@gtivr4/a1-design-system-react 0.15.0 → 0.18.0

package/src/components/autocomplete/autocomplete.css

@@ -0,0 +1,346 @@
+/* ─── Autocomplete (combobox) ─────────────────────────────────────────────────
+   Styled to match the A1 field family, with its own dropdown listbox + chips.
+   Size is driven by --a1-ac-* variables set per size modifier. */
+
+.a1-autocomplete {
+  --a1-ac-height: var(--component-field-default-height);
+  --a1-ac-padding-inline: var(--component-field-default-padding-inline);
+  --a1-ac-font-size: var(--semantic-font-size-body-md);
+  --a1-ac-label-size: var(--semantic-font-size-body-sm);
+  --a1-ac-radius: var(--base-radius-md);
+  --a1-ac-accent-width: var(--component-field-required-border-width);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-4);
+  font-family: var(--component-paragraph-font-family);
+}
+
+.a1-autocomplete--compact {
+  --a1-ac-height: var(--component-field-compact-height);
+  --a1-ac-padding-inline: var(--component-field-compact-padding-inline);
+  --a1-ac-font-size: var(--semantic-font-size-body-sm);
+  --a1-ac-label-size: var(--semantic-font-size-body-xs);
+  --a1-ac-radius: var(--base-radius-sm);
+  --a1-ac-accent-width: var(--component-field-compact-accent-border-width);
+}
+
+.a1-autocomplete--comfortable {
+  --a1-ac-height: var(--component-field-comfortable-height);
+  --a1-ac-padding-inline: var(--component-field-comfortable-padding-inline);
+  --a1-ac-radius: var(--base-radius-lg);
+}
+
+/* ─── Label ───────────────────────────────────────────────────────────────── */
+
+.a1-autocomplete__label {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-6);
+  flex-wrap: wrap;
+  font-size: var(--a1-ac-label-size);
+  font-weight: var(--component-field-label-font-weight);
+  color: var(--semantic-color-text-default);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-autocomplete--disabled .a1-autocomplete__label {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-autocomplete__asterisk {
+  color: var(--semantic-color-status-error-background);
+}
+
+/* ─── Control (input box) ─────────────────────────────────────────────────── */
+
+.a1-autocomplete__control {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--base-spacing-4);
+  min-block-size: var(--a1-ac-height);
+  padding-inline: var(--a1-ac-padding-inline);
+  padding-block: var(--base-spacing-2);
+  background: var(--semantic-color-surface-field);
+  border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
+  border-radius: var(--a1-ac-radius);
+  cursor: text;
+  transition: border-color var(--semantic-motion-duration-fast), background var(--semantic-motion-duration-fast);
+}
+
+.a1-autocomplete__control:hover {
+  border-color: var(--semantic-color-border-strong);
+}
+
+.a1-autocomplete__control:focus-within {
+  outline: var(--component-field-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: var(--component-field-focus-ring-offset);
+  border-color: var(--semantic-color-action-background);
+}
+
+/* Required: info-tinted border with a thick leading accent, matching the field family. */
+.a1-autocomplete--required .a1-autocomplete__control {
+  border-color: var(--semantic-color-status-info-border);
+  border-inline-start-width: var(--a1-ac-accent-width);
+  border-inline-start-color: var(--semantic-color-status-info-background);
+}
+
+.a1-autocomplete--required .a1-autocomplete__control:focus-within {
+  border-color: var(--semantic-color-status-info-background);
+}
+
+/* Error takes precedence over required. */
+.a1-autocomplete--error .a1-autocomplete__control {
+  border-color: var(--semantic-color-status-error-border);
+  border-inline-start-width: var(--a1-ac-accent-width);
+  border-inline-start-color: var(--semantic-color-status-error-background);
+}
+
+.a1-autocomplete--disabled .a1-autocomplete__control {
+  background: var(--semantic-color-surface-raised);
+  border-color: var(--semantic-color-border-subtle);
+  cursor: not-allowed;
+}
+
+.a1-autocomplete__input {
+  flex: 1;
+  min-inline-size: 4ch;
+  border: none;
+  background: transparent;
+  outline: none;
+  color: var(--semantic-color-text-default);
+  font-family: inherit;
+  font-size: var(--a1-ac-font-size);
+  line-height: var(--semantic-font-line-height-body);
+  padding-block: var(--base-spacing-2);
+}
+
+.a1-autocomplete__input:disabled {
+  cursor: not-allowed;
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-autocomplete__chevron {
+  flex-shrink: 0;
+  color: var(--semantic-color-text-muted);
+  font-size: var(--base-spacing-20);
+}
+
+.a1-autocomplete__clear {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--semantic-color-text-muted);
+  cursor: pointer;
+  border-radius: var(--base-radius-sm);
+  padding: var(--base-spacing-2);
+  font-size: var(--base-spacing-16);
+}
+
+.a1-autocomplete__clear:hover {
+  color: var(--semantic-color-text-default);
+}
+
+/* ─── Multi-select chips ──────────────────────────────────────────────────── */
+
+.a1-autocomplete__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-spacing-4);
+  padding-block: var(--base-spacing-2);
+  padding-inline: var(--base-spacing-8);
+  background: var(--semantic-color-surface-panel);
+  border: var(--component-divider-size-sm) solid var(--semantic-color-border-subtle);
+  border-radius: var(--base-radius-sm);
+  font-size: var(--semantic-font-size-body-xs);
+  color: var(--semantic-color-text-default);
+  white-space: nowrap;
+}
+
+.a1-autocomplete__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: var(--semantic-color-text-muted);
+  cursor: pointer;
+  padding: 0;
+  font-size: var(--base-spacing-16);
+}
+
+.a1-autocomplete__chip-remove:hover {
+  color: var(--semantic-color-status-error-text);
+}
+
+/* ─── Listbox dropdown ────────────────────────────────────────────────────── */
+
+.a1-autocomplete__listbox {
+  position: absolute;
+  z-index: var(--component-menu-z-index, 1000);
+  inset-block-start: calc(100% + var(--base-spacing-2));
+  inset-inline: 0;
+  margin: 0;
+  padding: var(--base-spacing-4);
+  list-style: none;
+  max-block-size: 16rem;
+  overflow-y: auto;
+  background: var(--semantic-color-surface-page);
+  border: var(--component-divider-size-sm) solid var(--semantic-color-border-default);
+  border-radius: var(--base-radius-md);
+  box-shadow: var(--semantic-shadow-md);
+}
+
+/* Portaled to <body>: positioned via inline fixed top/left/width so it escapes
+   any clipping ancestor (e.g. an Accordion's overflow:hidden panel). */
+.a1-autocomplete__listbox--floating {
+  inset-block-start: auto;
+  inset-inline: auto;
+  margin-block-start: var(--base-spacing-2);
+}
+
+.a1-autocomplete__option {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+  padding-block: var(--base-spacing-8);
+  padding-inline: var(--base-spacing-8);
+  border-radius: var(--base-radius-sm);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-default);
+  cursor: pointer;
+}
+
+/* Colour swatch shown beside an option / chip / the selected value (colour variant).
+   Sized to fill the row height (`--a1-autocomplete-swatch-size`, set per context)
+   and always bordered so a light swatch can't bleed into the surface. */
+.a1-autocomplete__swatch {
+  flex: none;
+  inline-size: var(--a1-autocomplete-swatch-size, var(--base-spacing-24));
+  block-size: var(--a1-autocomplete-swatch-size, var(--base-spacing-24));
+  border-radius: var(--base-radius-sm);
+  border: var(--component-divider-size-sm) solid var(--semantic-color-border-strong);
+}
+
+/* In the option list the swatch can be generous (fills the option line). */
+.a1-autocomplete__option .a1-autocomplete__swatch {
+  --a1-autocomplete-swatch-size: var(--base-spacing-24);
+}
+
+/* On the selected value in the control: match the input text line. */
+.a1-autocomplete__swatch--leading {
+  --a1-autocomplete-swatch-size: var(--base-spacing-24);
+  margin-inline: var(--base-spacing-8) 0;
+}
+
+/* Inside a multi-select chip: scale down to the chip height. */
+.a1-autocomplete__chip .a1-autocomplete__swatch {
+  --a1-autocomplete-swatch-size: var(--base-spacing-16);
+}
+
+.a1-autocomplete__option-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.a1-autocomplete__option--active {
+  background: var(--semantic-color-surface-panel);
+}
+
+.a1-autocomplete__option[aria-selected="true"] {
+  color: var(--semantic-color-action-background);
+}
+
+.a1-autocomplete__option--create {
+  color: var(--semantic-color-action-background);
+  font-weight: var(--semantic-font-weight-heading);
+}
+
+/* Multi-select: a checkbox on each option makes multi-selection obvious. Matches
+   the CheckboxGroup checkbox exactly (size, border, radius, fill, SVG tick). */
+.a1-autocomplete__checkbox {
+  flex-shrink: 0;
+  inline-size: var(--component-checkbox-group-box-size);
+  block-size: var(--component-checkbox-group-box-size);
+  border: var(--component-field-border-width) solid var(--semantic-color-border-strong);
+  border-radius: var(--base-radius-sm);
+  background-color: var(--semantic-color-surface-field);
+}
+
+.a1-autocomplete__checkbox--on {
+  background-color: var(--semantic-color-status-info-background);
+  border-color: var(--semantic-color-status-info-background);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9.5 10,3' fill='none' stroke='%23fafcff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: var(--component-checkbox-group-icon-size);
+}
+
+.a1-autocomplete__option-check,
+.a1-autocomplete__option-icon {
+  flex-shrink: 0;
+  font-size: var(--base-spacing-20);
+}
+
+.a1-autocomplete__empty {
+  padding: var(--base-spacing-8);
+  font-size: var(--semantic-font-size-body-sm);
+  color: var(--semantic-color-text-muted);
+}
+
+/* ─── Group headings ──────────────────────────────────────────────────────────
+   Inserted before the first option of each group. Sticky so the current
+   category stays visible while scrolling a long grouped list. */
+.a1-autocomplete__group {
+  position: sticky;
+  inset-block-start: calc(-1 * var(--base-spacing-4));
+  padding-block: var(--base-spacing-6) var(--base-spacing-2);
+  padding-inline: var(--base-spacing-8);
+  background: var(--semantic-color-surface-page);
+  font-size: var(--semantic-font-size-body-xs);
+  font-weight: var(--component-field-label-font-weight);
+  color: var(--semantic-color-text-muted);
+}
+
+/* "Showing the first N — keep typing" footer when the list is capped. */
+.a1-autocomplete__more {
+  padding: var(--base-spacing-8);
+  font-size: var(--semantic-font-size-body-xs);
+  color: var(--semantic-color-text-muted);
+  text-align: center;
+}
+
+/* Leading glyph for the selected value in the control (icon options). */
+.a1-autocomplete__leading-icon {
+  flex: none;
+  margin-inline-start: var(--base-spacing-4);
+  color: var(--semantic-color-text-muted);
+  font-size: var(--base-spacing-20);
+}
+
+.a1-autocomplete__chip-icon {
+  flex: none;
+  font-size: var(--base-spacing-16);
+}
+
+/* ─── Messages ────────────────────────────────────────────────────────────── */
+
+.a1-autocomplete__message {
+  margin: 0;
+  font-size: var(--semantic-font-size-body-xs);
+  line-height: var(--semantic-font-line-height-body);
+}
+
+.a1-autocomplete__message--hint {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-autocomplete__message--error {
+  color: var(--semantic-color-status-error-text);
+}

package/src/components/banner/Banner.d.ts

@@ -1,12 +1,19 @@
 import * as React from "react";
 
 export interface BannerProps {
-  /** Layout style. "inline" sits within content; "system" spans full width. Default: "inline" */
-  variant?: "inline" | "system";
+  /** Layout style. "inline" sits within content; "system" spans full width; "calendar" shows a date callout in place of the status icon. Default: "inline" */
+  variant?: "inline" | "system" | "calendar";
   /** Semantic status colour. Default: "neutral" */
   status?: "neutral" | "info" | "success" | "warn" | "error";
   /** Bold title text shown before the body */
   title?: string;
+  /** Small overline label shown above the title. Calendar variant only. */
+  eyebrow?: string;
+  /**
+   * Date shown in the calendar callout. Accepts a Date, an ISO date string, or
+   * `{ month, day }` for full control of the displayed month/day. Calendar variant only.
+   */
+  date?: Date | string | { month: string | number; day: string | number };
   /** Override the default status icon with any Material Symbols name */
   icon?: string;
   /** Action element (e.g. a Button) rendered at the trailing end */

package/src/components/banner/Banner.jsx

@@ -19,12 +19,27 @@ const SYSTEM_ICONS = {
 };
 
 const STATUSES = ["neutral", "info", "success", "warn", "error"];
-const VARIANTS = ["inline", "system"];
+const VARIANTS = ["inline", "system", "calendar"];
+
+// Derive the month/day for the calendar callout. `date` may be a Date, an
+// ISO-ish string, or an object `{ month, day }`. Month uses the locale's short
+// name (sentence case — never uppercased).
+function dateParts(date) {
+  if (!date) return null;
+  if (typeof date === "object" && !(date instanceof Date)) {
+    return { month: String(date.month ?? ""), day: String(date.day ?? "") };
+  }
+  const d = date instanceof Date ? date : new Date(date);
+  if (Number.isNaN(d.getTime())) return { month: "", day: String(date) };
+  return { month: d.toLocaleDateString(undefined, { month: "short" }), day: String(d.getDate()) };
+}
 
 export function Banner({
   variant = "inline",
   status = "neutral",
   title,
+  eyebrow,
+  date,
   icon,
   action,
   onDismiss,
@@ -34,21 +49,32 @@ export function Banner({
 }) {
   const resolvedVariant = VARIANTS.includes(variant) ? variant : "inline";
   const resolvedStatus  = STATUSES.includes(status)  ? status  : "neutral";
+  const isCalendar      = resolvedVariant === "calendar";
   const resolvedIcon    = icon ?? (resolvedVariant === "system" ? SYSTEM_ICONS : INLINE_ICONS)[resolvedStatus];
+  const dp              = isCalendar ? dateParts(date) : null;
 
   return (
     <div
       className={`a1-banner a1-banner--${resolvedVariant} a1-banner--${resolvedStatus}${className ? ` ${className}` : ""}`}
-      role="alert"
-      aria-live="polite"
+      // A calendar/event callout isn't an alert — keep it a quiet region.
+      role={isCalendar ? "group" : "alert"}
+      {...(isCalendar ? {} : { "aria-live": "polite" })}
       {...rest}
     >
       <div className="a1-banner__inner">
-        <span className="a1-banner__icon" aria-hidden="true">
-          <Icon name={resolvedIcon} />
-        </span>
+        {isCalendar && dp ? (
+          <span className="a1-banner__date" aria-hidden="true">
+            {dp.month && <span className="a1-banner__date-month">{dp.month}</span>}
+            {dp.day && <span className="a1-banner__date-day">{dp.day}</span>}
+          </span>
+        ) : (
+          <span className="a1-banner__icon" aria-hidden="true">
+            <Icon name={resolvedIcon} />
+          </span>
+        )}
 
         <div className="a1-banner__content">
+          {isCalendar && eyebrow && <span className="a1-banner__eyebrow">{eyebrow}</span>}
           {title    && <span className="a1-banner__title">{title}</span>}
           {children && <span className="a1-banner__body">{children}</span>}
         </div>

package/src/components/banner/banner.css

@@ -203,3 +203,84 @@
   --a1-icon-button-border-hover:       transparent;
   --a1-icon-button-border-pressed:     transparent;
 }
+
+/* ─── Calendar variant ─────────────────────────────────────────────────────────
+   An event/date callout: a tokenized date block replaces the status icon, and an
+   eyebrow sits above a larger title. Neutral defaults to the action colour for the
+   date block; status modifiers still drive the accent so a calendar callout can be
+   tinted to a status. Shares the inline surface treatment. */
+
+.a1-banner--calendar.a1-banner--neutral {
+  --a1-banner-accent: var(--semantic-color-action-background);
+}
+
+/* The date block puts inverse (white) text on the accent. warn.500 only hits
+   3.18:1 — too low for the small month label — so use warn.text, matching the
+   system variant's bg fix. */
+.a1-banner--calendar.a1-banner--warn {
+  --a1-banner-accent: var(--semantic-color-status-warn-text);
+}
+
+.a1-banner--calendar .a1-banner__inner {
+  align-items: center;
+  padding: var(--component-message-banner-padding);
+  border: var(--component-message-banner-border-width) solid var(--a1-banner-border);
+  border-radius: var(--component-message-banner-border-radius);
+  background: var(--a1-banner-surface);
+}
+
+.a1-banner__date {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--base-spacing-2);
+  min-inline-size: var(--base-spacing-48);
+  padding-block: var(--base-spacing-8);
+  padding-inline: var(--base-spacing-8);
+  background: var(--a1-banner-accent);
+  color: var(--semantic-color-text-inverse);
+  border-radius: var(--base-radius-md);
+  line-height: 1;
+}
+
+.a1-banner__date-month {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-2xs);
+  font-weight: var(--component-message-banner-title-font-weight);
+  line-height: 1;
+}
+
+.a1-banner__date-day {
+  font-family: var(--component-heading-font-family);
+  font-size: var(--semantic-font-size-heading-md);
+  font-weight: var(--semantic-font-weight-heading);
+  line-height: 1;
+}
+
+.a1-banner--calendar .a1-banner__content {
+  flex-direction: column;
+  gap: var(--base-spacing-2);
+}
+
+.a1-banner__eyebrow {
+  font-family: var(--component-paragraph-font-family);
+  font-size: var(--semantic-font-size-body-2xs);
+  font-weight: var(--semantic-font-weight-heading);
+  line-height: var(--semantic-font-line-height-body);
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-banner--calendar .a1-banner__title {
+  font-size: var(--semantic-font-size-heading-sm);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-banner--calendar .a1-banner__body {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-banner--calendar .a1-banner__action {
+  align-self: center;
+}

package/src/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export interface BottomSheetProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** First line shown in the header — the only content visible when collapsed. */
+  title?: string;
+  /**
+   * Expanded heights as fractions of the viewport height (0–1), smallest first.
+   * The collapsed state (header only) is always available as snap index 0.
+   * Default: [0.5, 0.92].
+   */
+  detents?: number[];
+  /** Controlled snap index. 0 = collapsed, then one index per `detents` entry. */
+  detent?: number;
+  /** Uncontrolled initial snap index. Default: 1 (the first detent). */
+  defaultDetent?: number;
+  /** Called with the next snap index when the detent changes. */
+  onDetentChange?: (index: number) => void;
+  children?: React.ReactNode;
+}
+
+export declare function BottomSheet(props: BottomSheetProps): React.ReactElement;

package/src/components/bottom-sheet/BottomSheet.jsx

@@ -0,0 +1,154 @@
+import { useCallback, useId, useRef, useState } from "react";
+import "./bottom-sheet.css";
+
+const DEFAULT_DETENTS = [0.5, 0.92];
+
+/**
+ * BottomSheet — a fixed panel attached to the bottom of the viewport that
+ * overlays content with no scrim (separation via shadow). A drag handle in the
+ * header resizes it between detents: a collapsed state (header / first line of
+ * the title only) and one or more expanded heights. Content scrolls internally;
+ * there is no footer. Only rendered at xs and sm breakpoints. The component
+ * reserves the collapsed footprint in flow (via an invisible spacer) so page
+ * content can always be scrolled clear of the sheet.
+ *
+ * `detents` are expanded heights as fractions of the viewport height (0–1).
+ * Snap indices: 0 = collapsed, then one per detent (controlled via `detent`).
+ */
+export function BottomSheet({
+  title,
+  detents = DEFAULT_DETENTS,
+  detent,
+  defaultDetent = 1,
+  onDetentChange,
+  children,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const id = useId();
+  const titleId = `${id}-title`;
+  const contentId = `${id}-content`;
+  const snapCount = detents.length + 1; // collapsed + each detent
+
+  const isControlled = detent !== undefined;
+  const [internalIndex, setInternalIndex] = useState(() =>
+    Math.min(Math.max(defaultDetent, 0), snapCount - 1)
+  );
+  const index = isControlled ? Math.min(Math.max(detent, 0), snapCount - 1) : internalIndex;
+
+  const [dragPx, setDragPx] = useState(null);
+  const headerRef = useRef(null);
+  const sheetRef = useRef(null);
+  const dragRef = useRef(null);
+
+  const commit = useCallback((next) => {
+    const clamped = Math.min(Math.max(next, 0), snapCount - 1);
+    if (!isControlled) setInternalIndex(clamped);
+    onDetentChange?.(clamped);
+  }, [isControlled, onDetentChange, snapCount]);
+
+  function collapsedPx() { return headerRef.current?.offsetHeight ?? 56; }
+  function snapPixels() {
+    const vh = window.innerHeight;
+    return [collapsedPx(), ...detents.map((d) => Math.round(d * vh))];
+  }
+
+  function onPointerDown(e) {
+    if (e.button != null && e.button !== 0) return;
+    dragRef.current = {
+      startY: e.clientY,
+      startHeight: sheetRef.current?.offsetHeight ?? collapsedPx(),
+      moved: false,
+    };
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+  }
+  function onPointerMove(e) {
+    if (!dragRef.current) return;
+    const delta = dragRef.current.startY - e.clientY; // dragging up grows the sheet
+    if (Math.abs(delta) > 4) dragRef.current.moved = true;
+    const max = Math.round(window.innerHeight * 0.96);
+    const next = Math.min(Math.max(dragRef.current.startHeight + delta, collapsedPx()), max);
+    setDragPx(next);
+  }
+  function onPointerUp(e) {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    e.currentTarget.releasePointerCapture?.(e.pointerId);
+    const current = dragPx;
+    setDragPx(null);
+    if (!drag) return;
+    if (!drag.moved) {
+      // A tap toggles between collapsed and the largest detent.
+      commit(index === 0 ? snapCount - 1 : 0);
+      return;
+    }
+    // Snap to the nearest detent.
+    const points = snapPixels();
+    let nearest = 0;
+    let best = Infinity;
+    points.forEach((p, i) => {
+      const d = Math.abs(p - (current ?? drag.startHeight));
+      if (d < best) { best = d; nearest = i; }
+    });
+    commit(nearest);
+  }
+
+  function onHandleKeyDown(e) {
+    if (e.key === "ArrowUp") { e.preventDefault(); commit(index + 1); }
+    else if (e.key === "ArrowDown") { e.preventDefault(); commit(index - 1); }
+    else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); commit(index === 0 ? snapCount - 1 : 0); }
+  }
+
+  const heightValue = dragPx != null
+    ? `${dragPx}px`
+    : index === 0
+      ? "var(--component-bottom-sheet-header-height, 3.5rem)"
+      : `${detents[index - 1] * 100}dvh`;
+
+  const classes = [
+    "a1-bottom-sheet",
+    index === 0 && "a1-bottom-sheet--collapsed",
+    dragPx != null && "a1-bottom-sheet--dragging",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <>
+      {/* Reserves the collapsed footprint in document flow so the page's last
+          content can always scroll clear of the fixed sheet. */}
+      <div className="a1-bottom-sheet__spacer" aria-hidden="true" />
+      <section
+        ref={sheetRef}
+        className={classes}
+        style={{ "--a1-bottom-sheet-height": heightValue }}
+        role="region"
+        aria-labelledby={title ? titleId : undefined}
+        aria-label={title ? undefined : ariaLabel}
+        {...props}
+      >
+        <div
+          ref={headerRef}
+          className="a1-bottom-sheet__header"
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+        >
+          <button
+            type="button"
+            className="a1-bottom-sheet__handle"
+            aria-label="Resize sheet"
+            aria-expanded={index > 0}
+            aria-controls={contentId}
+            onKeyDown={onHandleKeyDown}
+          />
+          {title && <span id={titleId} className="a1-bottom-sheet__title">{title}</span>}
+        </div>
+        <div id={contentId} className="a1-bottom-sheet__content">
+          {children}
+        </div>
+      </section>
+    </>
+  );
+}