@kenlo/sds-design-system 0.9.9

package/components/DatePicker/date-picker.marko

@@ -0,0 +1,492 @@
+<!-- sds-date-picker — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/DatePicker/DatePicker.tsx.
+
+     A trigger and a calendar: single date, range, date with time, or time alone. The month
+     grid, the bounds, the disabled days and times, and what the trigger says are all in
+     date-logic.js and tested there — 41 cases, because dates are where off-by-ones live and
+     none of them needs a browser to find.
+
+     Divergences:
+
+     The dark theme's range highlight was Kenlo blue at 15%, written as a literal in three
+     rules. It is the installed scheme's own colour at 15% now — see DatePicker.css.
+
+     The grid is a <table> with real headers. KDLS renders nested divs, so a screen reader
+     is read forty loose numbers with no way to know which column is which day: "15" without
+     "quarta-feira" is not a date. The weekday header is a full name, visually abbreviated.
+
+     Every day is a <button> rather than a div with a click handler, so the calendar can be
+     used from the keyboard at all — and arrow keys move through it, which KDLS does not
+     offer in any mode.
+
+     The two invalid combinations KDLS forbids in the type system are checked at render:
+     a range with a time, and time-only with disablePast. Neither means anything, and
+     silently ignoring one is how a caller ends up debugging a control that quietly does
+     half of what it was told. -->
+
+import {
+  MONTHS, WEEKDAYS, WEEKDAY_NAMES, pad2, formatTime, isSameDay, triggerLabel,
+  effectiveBounds, isDisabledDate, isDisabledTime, monthGrid, yearGrid, timeSlots,
+  isBetween, orderRange, DEFAULT_TIME_INTERVAL,
+} from "./date-logic.js";
+import { assertFeedback as assertInputFeedback, assertWidth as assertInputWidth }
+  from "../Input/input-types.js";
+import calendarIcon from "../../icons/generated/fluent-calendar-regular.marko";
+import chevronDown from "../../icons/generated/fluent-chevron-down-regular.marko";
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+import clockIcon from "../../icons/generated/fluent-clock-regular.marko";
+import chevronLeft from "../../icons/generated/fluent-chevron-left-regular.marko";
+import chevronRight from "../../icons/generated/fluent-chevron-right-regular.marko";
+
+class {
+  onCreate(input) {
+    const single = input.isRange ? null : (input.value ?? null);
+    const start = input.isRange ? (input.value?.start ?? null) : null;
+    this.state = {
+      open: false,
+      // `input.today`, not `new Date()`. The prop exists so a caller can say what "today"
+      // is — a test pinning a month, a page rendered on a server in another timezone — and
+      // every other read of today here goes through it. This one did not, so the calendar
+      // opened on the real month while everything else in it agreed on the given one.
+      view: input.defaultViewDate ?? single ?? start ?? input.today ?? new Date(),
+      mode: "calendar",
+      rangeStep: "start",
+      pendingDate: null,
+    };
+  }
+
+  get today() {
+    return this.input.today ?? new Date();
+  }
+
+  get bounds() {
+    const { minDate, maxDate, disablePast, disableFuture } = this.input;
+    return effectiveBounds({ minDate, maxDate, disablePast, disableFuture, today: this.today });
+  }
+
+  dayDisabled(date) {
+    const { min, max } = this.bounds;
+    const { filterDate, disableToday, excludeDates, includeDates } = this.input;
+    return isDisabledDate(date, {
+      min, max, filterDate, disableToday, excludeDates, includeDates, today: this.today,
+    });
+  }
+
+  slotDisabled(slot) {
+    const { min, max } = this.bounds;
+    const { onlyTime, hasTime, filterTime, includeTimes, excludeTimes, isRange } = this.input;
+    const single = isRange ? null : (this.input.value ?? null);
+    return isDisabledTime(slot, {
+      min,
+      max,
+      onlyTime,
+      hasTime,
+      reference: this.state.pendingDate ?? single,
+      filterTime,
+      includeTimes,
+      excludeTimes,
+    });
+  }
+
+  setOpen(next) {
+    if (this.input.disabled || this.input.isLoading) return;
+    this.state.open = next;
+    if (!next) this.state.mode = "calendar";
+  }
+
+  navigate(direction) {
+    const view = this.state.view;
+    const year = view.getFullYear();
+    const month = view.getMonth();
+    if (this.state.mode === "year") {
+      this.state.view = new Date(yearGrid(year)[0] + direction * 16, month, 1);
+    } else if (this.state.mode === "month-grid") {
+      this.state.view = new Date(year + direction, month, 1);
+    } else {
+      this.state.view = new Date(year, month + direction, 1);
+    }
+  }
+
+  setMode(mode) { this.state.mode = mode; }
+
+  chooseMonth(month) {
+    this.state.view = new Date(this.state.view.getFullYear(), month, 1);
+    this.state.mode = "calendar";
+  }
+
+  chooseYear(year) {
+    this.state.view = new Date(year, this.state.view.getMonth(), 1);
+    this.state.mode = "month-grid";
+  }
+
+  chooseDay(date) {
+    if (this.dayDisabled(date)) return;
+    const { isRange, hasTime, onlyTime, onChange } = this.input;
+
+    if (!isRange) {
+      if (hasTime) {
+        // The date is held until a time is picked: a half-answer is not an answer.
+        this.state.pendingDate = date;
+        return;
+      }
+      onChange?.(date);
+      if (!onlyTime) this.setOpen(false);
+      return;
+    }
+
+    const start = this.input.value?.start ?? null;
+    if (this.state.rangeStep === "start" || !start) {
+      onChange?.({ start: date, end: null });
+      this.state.rangeStep = "end";
+      return;
+    }
+    onChange?.(orderRange(start, date));
+    this.state.rangeStep = "start";
+    this.setOpen(false);
+  }
+
+  chooseTime(slot) {
+    if (this.slotDisabled(slot)) return;
+    const base = this.state.pendingDate ?? this.input.value ?? this.today;
+    this.state.pendingDate = null;
+    this.input.onChange?.(new Date(
+      base.getFullYear(), base.getMonth(), base.getDate(),
+      slot.getHours(), slot.getMinutes(),
+    ));
+    this.setOpen(false);
+  }
+
+  /**
+   * Back to the current month. Navigation, not selection — nothing is chosen, the calendar
+   * just stops showing 2031 because you went looking there. Ported from KDLS `handleToday`,
+   * which SDS had dropped: after a few taps on "próximo mês" there was no way back but the
+   * same number of taps in the other direction.
+   */
+  goToToday() {
+    this.state.view = this.today;
+    this.state.mode = "calendar";
+  }
+
+  clear() {
+    this.input.onChange?.(this.input.isRange ? { start: null, end: null } : null);
+    this.state.pendingDate = null;
+    this.state.rangeStep = "start";
+    this.setOpen(false);
+  }
+
+  /**
+   * Arrow keys through the grid.
+   *
+   * KDLS binds click and nothing else, in every mode, so a calendar cannot be used without
+   * a mouse — on a control whose alternative is typing a date into a field it does not have.
+   */
+  handleGridKey(date, event) {
+    const steps = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    const step = steps[event.key];
+    if (step === undefined) return;
+    event.preventDefault();
+    const next = new Date(date.getFullYear(), date.getMonth(), date.getDate() + step);
+    this.state.view = next;
+    // The grid is re-rendered around the new date; focus follows it by key.
+    requestAnimationFrame(() => {
+      this.getEl(`day-${next.getFullYear()}-${next.getMonth()}-${next.getDate()}`)?.focus();
+    });
+  }
+}
+
+$ {
+  const {
+    label,
+    trigger = "input",
+    width = "hug",
+    value,
+    isRange = false,
+    hasTime: hasTimeInput = false,
+    onlyTime: onlyTimeInput = false,
+    disabled = false,
+    isLoading = false,
+    feedback = "none",
+    hint,
+    name,
+    required = false,
+    timeIntervals = DEFAULT_TIME_INTERVAL,
+    clearLabel = "Limpar",
+    todayLabel = "Hoje",
+    // Distinct from `clearLabel` on purpose. Both clear, and while the panel is open both
+    // are on screen at once — two buttons announced as "Limpar" is a screen reader reading
+    // the same word twice for two different controls.
+    clearValueLabel,
+    class: extraClass = "",
+  } = input;
+
+  // The trigger renders an Input, so its width and feedback are the Input's vocabulary.
+  assertInputWidth(width);
+  assertInputFeedback(feedback);
+
+  // KDLS forbids these in the type system, which does not exist here. Silently ignoring
+  // half of what a caller asked for is how they end up debugging the wrong thing.
+  if (isRange && (hasTimeInput || onlyTimeInput)) {
+    throw new Error("sds-date-picker: `isRange` cannot be combined with `hasTime` or `onlyTime` — a range has two ends and a time has one.");
+  }
+  if (onlyTimeInput && (input.disablePast || input.disableFuture || input.disableToday)) {
+    throw new Error("sds-date-picker: `onlyTime` has no calendar, so `disablePast`, `disableFuture` and `disableToday` mean nothing with it.");
+  }
+  if (trigger !== "input" && trigger !== "pill") {
+    throw new Error(`Unknown date picker trigger: "${trigger}". Allowed: input, pill`);
+  }
+
+  const hasTime = isRange ? false : hasTimeInput;
+  const onlyTime = isRange ? false : onlyTimeInput;
+  const single = isRange ? null : (value ?? null);
+  const start = isRange ? (value?.start ?? null) : null;
+  const end = isRange ? (value?.end ?? null) : null;
+
+  const text = triggerLabel({ isRange, value, hasTime, onlyTime });
+  const hasValue = isRange ? Boolean(value?.start || value?.end) : Boolean(value);
+  const clearedName = clearValueLabel
+    ?? (onlyTime ? "Limpar a hora escolhida" : "Limpar a data escolhida");
+  const fallbackLabel = isRange ? "Período" : "Data";
+  const fieldLabel = label ?? fallbackLabel;
+
+  const view = state.view;
+  const year = view.getFullYear();
+  const month = view.getMonth();
+  const weeks = monthGrid(year, month);
+  const years = yearGrid(year);
+  const slots = (hasTime || onlyTime) ? timeSlots(timeIntervals, component.today) : [];
+
+  const showingTime = !state.pendingDate && (hasTime || onlyTime) && single;
+  const selectedHour = showingTime ? single.getHours() : null;
+  const selectedMinute = showingTime ? single.getMinutes() : null;
+
+  const headerLabel = state.mode === "year"
+    ? `${years[0]} – ${years[15]}`
+    : state.mode === "month-grid" ? String(year) : `${MONTHS[month]} ${year}`;
+
+  const prevLabel = state.mode === "year" ? "Anos anteriores"
+    : state.mode === "month-grid" ? "Ano anterior" : "Mês anterior";
+  const nextLabel = state.mode === "year" ? "Próximos anos"
+    : state.mode === "month-grid" ? "Próximo ano" : "Próximo mês";
+
+  const hiddenValue = isRange
+    ? (!start ? "" : !end ? start.toISOString() : `${start.toISOString()}/${end.toISOString()}`)
+    : (single ? single.toISOString() : "");
+
+  const panelClass = [
+    "sds-datepicker",
+    onlyTime ? "sds-datepicker--only-time" : "",
+    hasTime ? "sds-datepicker--has-time" : "",
+    disabled ? "sds-datepicker--disabled" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<div class=[
+  "sds-datepicker-root",
+  width === "fill" ? "sds-datepicker-root--fill" : "",
+  extraClass,
+].filter(Boolean).join(" ")>
+  <sds-floating
+    open=state.open
+    onOpenChange=(next) => component.setOpen(next)
+    placement="bottomLeft"
+    trigger="click"
+  >
+    <@content>
+      <div class=panelClass>
+        <if(!onlyTime)>
+          <div class="sds-datepicker__calendar-col">
+            <div class="sds-datepicker__header">
+              <sds-icon-button variant="neutral" size="sm" aria-label=prevLabel
+                onClick=() => component.navigate(-1)>
+                <@icon><${chevronLeft}/></@icon>
+              </sds-icon-button>
+
+              <sds-button
+                variant="link"
+                size="md"
+                label=headerLabel
+                onClick=() => component.setMode(state.mode === "calendar" ? "month-grid" : state.mode === "month-grid" ? "year" : "calendar")
+              />
+
+              <sds-icon-button variant="neutral" size="sm" aria-label=nextLabel
+                onClick=() => component.navigate(1)>
+                <@icon><${chevronRight}/></@icon>
+              </sds-icon-button>
+            </div>
+
+            <if(state.mode === "calendar")>
+              <!-- A real table. KDLS nests divs, so a screen reader meets forty loose
+                   numbers and cannot tell which column is which day — "15" without
+                   "quarta-feira" is not a date. -->
+              <table class="sds-datepicker__grid" role="grid" aria-label=`${MONTHS[month]} ${year}`>
+                <thead>
+                  <tr class="sds-datepicker__weekdays">
+                    <for|initial, index| of=WEEKDAYS>
+                      <th scope="col" abbr=WEEKDAY_NAMES[index]>
+                        <span aria-hidden="true">${initial}</span>
+                        <span class="sds-visually-hidden">${WEEKDAY_NAMES[index]}</span>
+                      </th>
+                    </for>
+                  </tr>
+                </thead>
+                <tbody>
+                  <for|week| of=weeks>
+                    <tr class="sds-datepicker__week-row">
+                      <for|cell| of=week>
+                        <td class=[
+                          "sds-datepicker__day-wrap",
+                          isRange && isBetween(cell.date, start, end) ? "sds-datepicker__day-wrap--in-range" : "",
+                          isRange && start && end && isSameDay(cell.date, start) ? "sds-datepicker__day-wrap--range-start" : "",
+                          isRange && start && end && isSameDay(cell.date, end) ? "sds-datepicker__day-wrap--range-end" : "",
+                        ].filter(Boolean).join(" ")>
+                          <button
+                            key=`day-${cell.date.getFullYear()}-${cell.date.getMonth()}-${cell.date.getDate()}`
+                            type="button"
+                            class=[
+                              "sds-datepicker__day",
+                              !cell.current ? "sds-datepicker__day--other" : "",
+                              isSameDay(cell.date, component.today) ? "sds-datepicker__day--today" : "",
+                              (isSameDay(cell.date, single) || isSameDay(cell.date, start) || isSameDay(cell.date, end))
+                                ? "sds-datepicker__day--selected" : "",
+                              component.dayDisabled(cell.date) ? "sds-datepicker__day--disabled" : "",
+                            ].filter(Boolean).join(" ")
+                            disabled=(component.dayDisabled(cell.date) || null)
+                            aria-current=(isSameDay(cell.date, component.today) ? "date" : null)
+                            aria-selected=(isSameDay(cell.date, single) || isSameDay(cell.date, start) || isSameDay(cell.date, end) ? "true" : "false")
+                            on-click("chooseDay", cell.date)
+                            on-keydown("handleGridKey", cell.date)
+                          >
+                            ${cell.date.getDate()}
+                          </button>
+                        </td>
+                      </for>
+                    </tr>
+                  </for>
+                </tbody>
+              </table>
+            </if>
+
+            <else-if(state.mode === "month-grid")>
+              <div class="sds-datepicker__month-grid">
+                <for|name, index| of=MONTHS>
+                  <button
+                    type="button"
+                    class=[
+                      "sds-datepicker__month-item",
+                      index === month ? "sds-datepicker__month-item--selected" : "",
+                      index === component.today.getMonth() && year === component.today.getFullYear()
+                        ? "sds-datepicker__month-item--today" : "",
+                    ].filter(Boolean).join(" ")
+                    on-click("chooseMonth", index)
+                  >
+                    ${name.slice(0, 3)}
+                  </button>
+                </for>
+              </div>
+            </else-if>
+
+            <else>
+              <div class="sds-datepicker__year-grid">
+                <for|candidate| of=years>
+                  <button
+                    type="button"
+                    class=[
+                      "sds-datepicker__year-item",
+                      candidate === year ? "sds-datepicker__year-item--selected" : "",
+                      candidate === component.today.getFullYear() ? "sds-datepicker__year-item--today" : "",
+                    ].filter(Boolean).join(" ")
+                    on-click("chooseYear", candidate)
+                  >
+                    ${candidate}
+                  </button>
+                </for>
+              </div>
+            </else>
+          </div>
+        </if>
+
+        <if(hasTime || onlyTime)>
+          <div class="sds-datepicker__time-panel">
+            <div class="sds-datepicker__time-list sds-scroll sds-scroll--thin"
+              role="listbox" aria-label="Horário">
+              <for|slot| of=slots>
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected=(selectedHour === slot.getHours() && selectedMinute === slot.getMinutes() ? "true" : "false")
+                  class=[
+                    "sds-datepicker__time-slot",
+                    selectedHour === slot.getHours() && selectedMinute === slot.getMinutes()
+                      ? "sds-datepicker__time-slot--selected" : "",
+                    component.slotDisabled(slot) ? "sds-datepicker__time-slot--disabled" : "",
+                  ].filter(Boolean).join(" ")
+                  disabled=(component.slotDisabled(slot) || null)
+                  on-click("chooseTime", slot)
+                >
+                  ${formatTime(slot)}
+                </button>
+              </for>
+            </div>
+          </div>
+        </if>
+
+        <div class="sds-datepicker__footer">
+          <sds-button variant="link" size="md" label=clearLabel onClick=() => component.clear()/>
+          // No calendar, nothing to navigate back to: the time-only panel is a list of
+          // slots. KDLS makes the same exception.
+          <if(!onlyTime)>
+            <sds-button variant="link" size="md" label=todayLabel onClick=() => component.goToToday()/>
+          </if>
+        </div>
+      </div>
+    </@content>
+
+    <if(trigger === "pill")>
+      <!-- No `active`. A pill has two jobs and they colour differently: as a filter you
+           toggle, being on is a state of the data and `--on` fills it with the theme's
+           colour; as the trigger of a list, being open or holding a value is a state of
+           the control, and filling it would say the filter is applied when it is only the
+           thing you press. KDLS passes `active` to a Pill in Pagination — where the pill
+           IS the current page — and nowhere else. -->
+      <sds-pill
+        label=(text || fieldLabel)
+        width=width
+        iconLeft=(onlyTime ? clockIcon : calendarIcon)
+        iconRight=(hasValue ? dismissIcon : chevronDown)
+        onClickIconRight=(hasValue && !disabled ? () => component.clear() : undefined)
+        iconRightLabel=clearedName
+        isLoading=isLoading
+        disabled=disabled
+        aria-haspopup="dialog"
+        aria-expanded=(state.open ? "true" : "false")
+      />
+    </if>
+    <else>
+      // The calendar sits on the left and the right side is the way out, which is how
+      // KDLS has it and how every other field here now reads: SearchBar swaps its
+      // magnifier for a clear button the moment there is something to clear. The chevron
+      // stands there while there is not, so the field still says it opens something.
+      <sds-input
+        label=fieldLabel
+        value=text
+        readOnly
+        disabled=disabled
+        required=required
+        feedback=feedback
+        hint=hint
+        isLoading=isLoading
+        width=width
+        iconLeft=(onlyTime ? clockIcon : calendarIcon)
+        iconRight=(hasValue ? dismissIcon : chevronDown)
+        onClickIconRight=(hasValue && !disabled ? () => component.clear() : undefined)
+        iconRightLabel=clearedName
+      />
+    </else>
+  </sds-floating>
+
+  <if(name)>
+    <!-- What a form submits. The trigger is a read-only field or a pill, neither of which
+         posts anything on its own. -->
+    <input type="hidden" name=name value=hiddenValue/>
+  </if>
+</div>

package/components/Drawer/Drawer.css

@@ -0,0 +1,174 @@
+/* SDS Drawer.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Drawer/Drawer.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ */
+
+/* Two values were written outside the system and are snapped back to it here.
+
+   The panel shadow was rgba(26,26,26,0.15). The opacity scale runs 05/10/20/30/40/50, so
+   0.15 is not a step on it — it reads --color-opacity-20 now, a touch stronger, which is
+   the direction a shadow separating a panel from the page wants to go.
+
+   The dark-mode veil and shadow were black literals. --color-opacity-* inverts with the
+   theme and would light the screen up instead of dimming it, which is why they were
+   literals at all; --color-scrim is that value as a token. *//* ============================================================
+   SDS Drawer
+   Width: 600px (default) | full height | slides from right/left
+   Header: Bold 24px, border-bottom neutral-30
+   Footer: py-16, border-top neutral-30
+   ============================================================ */
+
+/* ── Overlay ── */
+.sds-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-opacity-50);
+  z-index: var(--z-overlay);
+  animation: sds-overlay-in 120ms ease;
+}
+@keyframes sds-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+/* ── Container: slides from right, no border-radius ── */
+.sds-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--drawer-width, 600px);
+  max-width: 100vw;
+  background: var(--component-bg-color);
+  display: flex;
+  flex-direction: column;
+  z-index: calc(var(--z-overlay) + 1);
+  animation: sds-drawer-in 250ms var(--ease-standard);
+  box-shadow: -4px 0px 24px var(--color-opacity-20);
+}
+.sds-drawer--left {
+  right: auto;
+  left: 0;
+  box-shadow: 4px 0px 24px var(--color-opacity-20);
+  animation: sds-drawer-in-left 250ms var(--ease-standard);
+}
+@keyframes sds-drawer-in {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes sds-drawer-in-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+/* ── Header: pt-[24px] pb-[24px] px-[24px] + border-bottom ── */
+.sds-drawer__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-6);
+  border-bottom: 1px solid var(--border-interactive-color);
+  background: var(--component-bg-color);
+  flex-shrink: 0;
+}
+.sds-drawer__title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex: 1;
+  min-width: 0;
+}
+.sds-drawer__title-group .sds-tooltip-wrapper {
+  flex-shrink: 0;
+}
+/* Title: Manrope Bold 24px, tracking -0.8px, neutral-90 */
+.sds-drawer__title {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-title-lg);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--lh-title-lg);
+  letter-spacing: -0.8px;
+  color: var(--color-neutral-90);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sds-drawer__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+}
+/* ── Body: scrollable, 24px top/bottom padding ── */
+.sds-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-6);
+}
+/* ── Footer: px-[24px] py-[16px] + border-top ── */
+.sds-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  /* 16px between the buttons, decided by Rafael looking at a three-button footer. KDLS
+     uses 24 and the Card here already used 16, so the system disagreed with itself; 16 is
+     the side that keeps a row of actions reading as one group. */
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-6);
+  border-top: 1px solid var(--border-interactive-color);
+  background: var(--component-bg-color);
+  flex-shrink: 0;
+}
+/* ── Confirmation modal — rendered above the drawer ── */
+.sds-modal-overlay:has(.sds-drawer__confirm-modal) {
+  z-index: calc(var(--z-overlay) + 100);
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-drawer-overlay {
+  background: var(--color-scrim);
+}
+[data-theme="dark"] .sds-drawer {
+  box-shadow: -4px 0px 24px var(--color-scrim);
+}
+[data-theme="dark"] .sds-drawer--left {
+  box-shadow: 4px 0px 24px var(--color-scrim);
+}
+[data-theme="dark"] .sds-drawer__header {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-drawer__footer {
+  border-top-color: var(--border-interactive-color);
+}
+/* ── Mobile (≤799px): same lateral drawer as desktop, just full width —
+   the base rule's max-width: 100vw only kicks in below 600px, so widths
+   between 600 and 799px need an explicit override here. The footer also
+   switches to primary/secondary/tertiary stacked full-width instead of
+   sitting in a row ── */
+@media (max-width: 799px) {
+  .sds-drawer {
+    width: 100%;
+  }
+  .sds-drawer__footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+    gap: var(--spacing-4);
+  }
+  .sds-drawer__footer .sds-button {
+    width: 100%;
+  }
+}
+
+/* The confirmation, drawn inside the drawer's own overlay and wearing the modal's panel —
+   a question about leaving is a dialog, not a second drawer. A second veil over the first
+   would double the dimming, so this one only holds the panel and centres it. */
+.sds-drawer-overlay--confirm {
+  background: transparent;
+  /* Above the panel, not below it. It was `z-index: 1` while `.sds-drawer` sits at
+     `--z-overlay + 1` — both fixed, both children of the same container — so the question
+     was painted underneath the thing it was asking about. Measured in Chrome: the element
+     at the centre of the confirmation was `.sds-drawer__body`. You pressed close, an
+     invisible dialog opened, and the drawer would not close: stuck, with nothing on
+     screen to say why. */
+  z-index: calc(var(--z-overlay) + 2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}