Sheet

Recipe CSS

This is the exact CSS your kit ships for Sheet — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Sheet / Drawer ===
   Side-pull panel. Demo here is a static slice — real app slides in.
   --sheet-w sets the width; default 280px reads sensibly in a card. */
.sheet-frame {
  position: relative;
  height: 220px;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  background: var(--k-surface-sunken);
  overflow: hidden;
}
.sheet-frame__backdrop {
  position: absolute;
  inset: 0;
  background: var(--k-scrim);
}
.sheet {
  --sheet-w: 280px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--sheet-w);
  /* Never wider than the viewport — a 360px sheet must not overflow a 320px phone. */
  max-width: 100vw;
  background: var(--k-surface-overlay, var(--k-surface-raised));
  border-left: var(--k-divider);
  box-shadow: var(--k-shadow-lg);
  display: flex;
  flex-direction: column;
  /* Slow + emphasized-decelerate — large surface, expressive enter */
  animation: sheet-in var(--k-dur-slow, 320ms) var(--k-ease-out, cubic-bezier(.05,.7,.1,1));
}
.sheet--left { right: auto; left: 0; border-left: 0; border-right: var(--k-divider); animation-name: sheet-in-left; }
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space, 16px);
  border-bottom: var(--k-divider);
}
/* .sheet__title — folded into the shared panel-heading rule (see .card__title). */
.sheet__body {
  padding: var(--k-space, 16px);
  flex: 1;
  font-size: var(--k-type-small);
  color: var(--k-fg);
  overflow: auto;
  /* Stack form rows vertically so checkboxes don't run together as inline labels */
  display: flex;
  flex-direction: column;
  gap: var(--k-s-10);
}
.sheet__foot { padding: var(--k-space, 16px); border-top: var(--k-divider); display: flex; gap: var(--k-gap, var(--k-s-8)); justify-content: flex-end; }
@keyframes sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheet-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }