@misoto22/design 0.7.0 → 0.9.0

package/dist/components/SearchableMenu/SearchableMenu.d.ts

@@ -2,10 +2,19 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 interface MenuAction {
-    /** Stable id, and what the filter matches on. */
+    /**
+     * Stable identity for the row. Not what the filter matches — the label is,
+     * and an id a reader would never type is exactly what this used to be.
+     */
     id: string;
+    /** What the row prints. Its text is the first thing the filter matches. */
     label: ReactNode;
-    /** Plain text the filter should match beyond the label. */
+    /**
+     * More text the filter should match, beyond the label's own words.
+     *
+     * The synonym a reader reaches for first: "download" for Export, "bin" for
+     * Delete. Required in practice only when the label prints no text at all.
+     */
     keywords?: string[];
     /** Printed at the end of the row. */
     shortcut?: string;

package/dist/components/SearchableMenu/SearchableMenu.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
-import { useState } from "react";
+import { isValidElement, useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { DEV, warn } from "../../lib/warn.js";
 import {
   Command,
   CommandEmpty,
@@ -13,6 +14,27 @@ import {
   CommandSeparator
 } from "../Command/Command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+function textOf(node) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join(" ");
+  if (isValidElement(node)) return textOf(node.props.children);
+  return "";
+}
+function filterKeywords(action) {
+  const label = textOf(action.label).trim();
+  const extra = action.keywords ?? [];
+  if (DEV && !label && extra.length === 0) {
+    warn({
+      code: "SEARCHABLE_MENU_LABEL_UNREADABLE",
+      problem: "A SearchableMenu action has a label with no text in it, so the filter has nothing to match and the row can never be found by typing.",
+      field: "actions[].label",
+      fix: "Give the action keywords with the words a reader would type for it, or put text in the label.",
+      component: "SearchableMenu"
+    });
+  }
+  return label ? [label, ...extra] : extra;
+}
 function SearchableMenu({
   actions,
   children,
@@ -54,7 +76,7 @@ function SearchableMenu({
             CommandItem,
             {
               value: action.id,
-              keywords: action.keywords,
+              keywords: filterKeywords(action),
               disabled: action.disabled,
               shortcut: action.shortcut,
               onSelect: () => {

package/dist/components/SearchableMenu/SearchableMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SearchableMenu/SearchableMenu.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronDown } from 'lucide-react'\nimport { useState, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface MenuAction {\n  /** Stable id, and what the filter matches on. */\n  id: string\n  label: ReactNode\n  /** Plain text the filter should match beyond the label. */\n  keywords?: string[]\n  /** Printed at the end of the row. */\n  shortcut?: string\n  /** Optional group heading. Rows with the same value are shown together. */\n  group?: string\n  disabled?: boolean\n  destructive?: boolean\n  onSelect: () => void\n}\n\nexport interface SearchableMenuProps {\n  actions: MenuAction[]\n  /** The trigger's text. */\n  children: ReactNode\n  /** Names the menu for assistive tech. */\n  label: string\n  searchPlaceholder?: string\n  emptyMessage?: string\n  align?: 'start' | 'center' | 'end'\n  className?: string\n}\n\n/**\n * A menu of actions you can type into.\n *\n * The fourth corner of a square the system otherwise had three of, and the\n * distinction is worth stating because reaching for the wrong one is easy:\n *\n * | | few options | many options |\n * |---|---|---|\n * | **sets a value** | `Select` | `Combobox` |\n * | **runs an action** | `DropdownMenu` | `SearchableMenu` |\n *\n * A `DropdownMenu` past about a dozen rows stops being scannable, and the\n * usual response — nesting submenus — makes it worse. This is the same list\n * with a filter over it.\n *\n * Not the same thing as `Command`: that is a page-level palette, usually modal\n * and usually bound to ⌘K. This is anchored to a control, like the menu it\n * replaces.\n *\n * The rows are `option`s inside a listbox rather than `menuitem`s, because that\n * is what the filtering pattern requires — the highlight moves through\n * `aria-activedescendant` while focus stays in the input, and a menu cannot do\n * that. The trade is deliberate: a menu that cannot be filtered is worse for\n * the reader than a listbox that runs actions.\n *\n * @example\n * <SearchableMenu label=\"Actions\" actions={ACTIONS}>Actions</SearchableMenu>\n */\nexport function SearchableMenu({\n  actions,\n  children,\n  label,\n  searchPlaceholder = 'Filter…',\n  emptyMessage = 'Nothing matches.',\n  align = 'start',\n  className,\n}: SearchableMenuProps) {\n  const [open, setOpen] = useState(false)\n\n  // Grouped in declaration order, so a caller controls the arrangement by the\n  // order they list actions rather than by an extra prop.\n  const groups: { name: string | undefined; items: MenuAction[] }[] = []\n  for (const action of actions) {\n    const last = groups.at(-1)\n    if (last && last.name === action.group) last.items.push(action)\n    else groups.push({ name: action.group, items: [action] })\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label={label}\n        className={cn(\n          'inline-flex min-h-(--control-h-sm) items-center gap-2 rounded-(--radius-pill) border border-(--rule-2) px-4 text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--ink)',\n          className,\n        )}\n      >\n        {children}\n        <ChevronDown size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align={align} className=\"w-64 overflow-hidden p-0\">\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groups.map((group, index) => (\n              <div key={group.name ?? index}>\n                {index > 0 && <CommandSeparator />}\n                <CommandGroup heading={group.name}>\n                  {group.items.map((action) => (\n                    <CommandItem\n                      key={action.id}\n                      value={action.id}\n                      keywords={action.keywords}\n                      disabled={action.disabled}\n                      shortcut={action.shortcut}\n                      onSelect={() => {\n                        setOpen(false)\n                        action.onSelect()\n                      }}\n                      className={action.destructive ? 'text-(--danger)' : undefined}\n                    >\n                      {action.label}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </div>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default SearchableMenu\n"],"mappings":";AA6FM,SAQE,KARF;AA3FN,SAAS,mBAAmB;AAC5B,SAAS,gBAAgC;AACzC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AAyDjD,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,SAA8D,CAAC;AACrE,aAAW,UAAU,SAAS;AAC5B,UAAM,OAAO,OAAO,GAAG,EAAE;AACzB,QAAI,QAAQ,KAAK,SAAS,OAAO,MAAO,MAAK,MAAM,KAAK,MAAM;AAAA,QACzD,QAAO,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;AAAA,EAC1D;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACD,oBAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA;AAAA;AAAA,IAC9F;AAAA,IACA,oBAAC,kBAAe,OAAc,OAAc,WAAU,4BACpD,+BAAC,WAAQ,OAAO,GAAG,KAAK,KAAK,iBAAiB,IAAI,WAAU,yBAC1D;AAAA,0BAAC,gBAAa,aAAa,mBAAmB;AAAA,MAC9C,qBAAC,eACC;AAAA,4BAAC,gBAAc,wBAAa;AAAA,QAC3B,OAAO,IAAI,CAAC,OAAO,UAClB,qBAAC,SACE;AAAA,kBAAQ,KAAK,oBAAC,oBAAiB;AAAA,UAChC,oBAAC,gBAAa,SAAS,MAAM,MAC1B,gBAAM,MAAM,IAAI,CAAC,WAChB;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,OAAO;AAAA,cACd,UAAU,OAAO;AAAA,cACjB,UAAU,OAAO;AAAA,cACjB,UAAU,OAAO;AAAA,cACjB,UAAU,MAAM;AACd,wBAAQ,KAAK;AACb,uBAAO,SAAS;AAAA,cAClB;AAAA,cACA,WAAW,OAAO,cAAc,oBAAoB;AAAA,cAEnD,iBAAO;AAAA;AAAA,YAXH,OAAO;AAAA,UAYd,CACD,GACH;AAAA,aAnBQ,MAAM,QAAQ,KAoBxB,CACD;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/SearchableMenu/SearchableMenu.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronDown } from 'lucide-react'\nimport { isValidElement, useState, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface MenuAction {\n  /**\n   * Stable identity for the row. Not what the filter matches — the label is,\n   * and an id a reader would never type is exactly what this used to be.\n   */\n  id: string\n  /** What the row prints. Its text is the first thing the filter matches. */\n  label: ReactNode\n  /**\n   * More text the filter should match, beyond the label's own words.\n   *\n   * The synonym a reader reaches for first: \"download\" for Export, \"bin\" for\n   * Delete. Required in practice only when the label prints no text at all.\n   */\n  keywords?: string[]\n  /** Printed at the end of the row. */\n  shortcut?: string\n  /** Optional group heading. Rows with the same value are shown together. */\n  group?: string\n  disabled?: boolean\n  destructive?: boolean\n  onSelect: () => void\n}\n\nexport interface SearchableMenuProps {\n  actions: MenuAction[]\n  /** The trigger's text. */\n  children: ReactNode\n  /** Names the menu for assistive tech. */\n  label: string\n  searchPlaceholder?: string\n  emptyMessage?: string\n  align?: 'start' | 'center' | 'end'\n  className?: string\n}\n\n/** The plain text a label prints, gathered through whatever wraps it. */\nfunction textOf(node: ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (Array.isArray(node)) return node.map(textOf).join(' ')\n  if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children)\n  return ''\n}\n\n/**\n * What the filter matches this row on.\n *\n * cmdk derives an item's value from the first string in\n * `[props.value, props.children, ref]`, and only falls back to the row's\n * `textContent` when `value` is absent. This component passes the id as the\n * value, because that is the row's identity and two rows may print the same\n * words — so with the opaque ids an application actually has, the label a\n * reader can SEE scored zero and the menu showed its empty state. Lifting the\n * label's text into the keywords is what makes the visible words match, while\n * the id stays the identity.\n */\nfunction filterKeywords(action: MenuAction): string[] {\n  const label = textOf(action.label).trim()\n  const extra = action.keywords ?? []\n\n  if (DEV && !label && extra.length === 0) {\n    warn({\n      code: 'SEARCHABLE_MENU_LABEL_UNREADABLE',\n      problem:\n        'A SearchableMenu action has a label with no text in it, so the filter has nothing to match and the row can never be found by typing.',\n      field: 'actions[].label',\n      fix: 'Give the action keywords with the words a reader would type for it, or put text in the label.',\n      component: 'SearchableMenu',\n    })\n  }\n\n  return label ? [label, ...extra] : extra\n}\n\n/**\n * A menu of actions you can type into.\n *\n * The fourth corner of a square the system otherwise had three of, and the\n * distinction is worth stating because reaching for the wrong one is easy:\n *\n * | | few options | many options |\n * |---|---|---|\n * | **sets a value** | `Select` | `Combobox` |\n * | **runs an action** | `DropdownMenu` | `SearchableMenu` |\n *\n * A `DropdownMenu` past about a dozen rows stops being scannable, and the\n * usual response — nesting submenus — makes it worse. This is the same list\n * with a filter over it.\n *\n * Not the same thing as `Command`: that is a page-level palette, usually modal\n * and usually bound to ⌘K. This is anchored to a control, like the menu it\n * replaces.\n *\n * The rows are `option`s inside a listbox rather than `menuitem`s, because that\n * is what the filtering pattern requires — the highlight moves through\n * `aria-activedescendant` while focus stays in the input, and a menu cannot do\n * that. The trade is deliberate: a menu that cannot be filtered is worse for\n * the reader than a listbox that runs actions.\n *\n * @example\n * <SearchableMenu label=\"Actions\" actions={ACTIONS}>Actions</SearchableMenu>\n */\nexport function SearchableMenu({\n  actions,\n  children,\n  label,\n  searchPlaceholder = 'Filter…',\n  emptyMessage = 'Nothing matches.',\n  align = 'start',\n  className,\n}: SearchableMenuProps) {\n  const [open, setOpen] = useState(false)\n\n  // Grouped in declaration order, so a caller controls the arrangement by the\n  // order they list actions rather than by an extra prop.\n  const groups: { name: string | undefined; items: MenuAction[] }[] = []\n  for (const action of actions) {\n    const last = groups.at(-1)\n    if (last && last.name === action.group) last.items.push(action)\n    else groups.push({ name: action.group, items: [action] })\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label={label}\n        className={cn(\n          'inline-flex min-h-(--control-h-sm) items-center gap-2 rounded-(--radius-pill) border border-(--rule-2) px-4 text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--ink)',\n          className,\n        )}\n      >\n        {children}\n        <ChevronDown size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align={align} className=\"w-64 overflow-hidden p-0\">\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groups.map((group, index) => (\n              <div key={group.name ?? index}>\n                {index > 0 && <CommandSeparator />}\n                <CommandGroup heading={group.name}>\n                  {group.items.map((action) => (\n                    <CommandItem\n                      key={action.id}\n                      value={action.id}\n                      keywords={filterKeywords(action)}\n                      disabled={action.disabled}\n                      shortcut={action.shortcut}\n                      onSelect={() => {\n                        setOpen(false)\n                        action.onSelect()\n                      }}\n                      className={action.destructive ? 'text-(--danger)' : undefined}\n                    >\n                      {action.label}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </div>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default SearchableMenu\n"],"mappings":";AA8IM,SAQE,KARF;AA5IN,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,gBAAgC;AACzD,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AAuCxD,SAAS,OAAO,MAAyB;AACvC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,MAAI,OAAO,SAAS,SAAU,QAAO,OAAO,IAAI;AAChD,MAAI,MAAM,QAAQ,IAAI,EAAG,QAAO,KAAK,IAAI,MAAM,EAAE,KAAK,GAAG;AACzD,MAAI,eAAyC,IAAI,EAAG,QAAO,OAAO,KAAK,MAAM,QAAQ;AACrF,SAAO;AACT;AAcA,SAAS,eAAe,QAA8B;AACpD,QAAM,QAAQ,OAAO,OAAO,KAAK,EAAE,KAAK;AACxC,QAAM,QAAQ,OAAO,YAAY,CAAC;AAElC,MAAI,OAAO,CAAC,SAAS,MAAM,WAAW,GAAG;AACvC,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SACE;AAAA,MACF,OAAO;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAEA,SAAO,QAAQ,CAAC,OAAO,GAAG,KAAK,IAAI;AACrC;AA8BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,SAA8D,CAAC;AACrE,aAAW,UAAU,SAAS;AAC5B,UAAM,OAAO,OAAO,GAAG,EAAE;AACzB,QAAI,QAAQ,KAAK,SAAS,OAAO,MAAO,MAAK,MAAM,KAAK,MAAM;AAAA,QACzD,QAAO,KAAK,EAAE,MAAM,OAAO,OAAO,OAAO,CAAC,MAAM,EAAE,CAAC;AAAA,EAC1D;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACD,oBAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,8BAA6B;AAAA;AAAA;AAAA,IAC9F;AAAA,IACA,oBAAC,kBAAe,OAAc,OAAc,WAAU,4BACpD,+BAAC,WAAQ,OAAO,GAAG,KAAK,KAAK,iBAAiB,IAAI,WAAU,yBAC1D;AAAA,0BAAC,gBAAa,aAAa,mBAAmB;AAAA,MAC9C,qBAAC,eACC;AAAA,4BAAC,gBAAc,wBAAa;AAAA,QAC3B,OAAO,IAAI,CAAC,OAAO,UAClB,qBAAC,SACE;AAAA,kBAAQ,KAAK,oBAAC,oBAAiB;AAAA,UAChC,oBAAC,gBAAa,SAAS,MAAM,MAC1B,gBAAM,MAAM,IAAI,CAAC,WAChB;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,OAAO;AAAA,cACd,UAAU,eAAe,MAAM;AAAA,cAC/B,UAAU,OAAO;AAAA,cACjB,UAAU,OAAO;AAAA,cACjB,UAAU,MAAM;AACd,wBAAQ,KAAK;AACb,uBAAO,SAAS;AAAA,cAClB;AAAA,cACA,WAAW,OAAO,cAAc,oBAAoB;AAAA,cAEnD,iBAAO;AAAA;AAAA,YAXH,OAAO;AAAA,UAYd,CACD,GACH;AAAA,aAnBQ,MAAM,QAAQ,KAoBxB,CACD;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/components/Select/Select.d.ts

@@ -15,13 +15,29 @@ interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
      * picker over its own calendar, say.
      */
     contentClassName?: string;
-    /** Names the control. Required — the trigger shows a value, and a value is not a name. */
+    /**
+     * Names the control. Required — the trigger shows a value, and a value is not
+     * a name.
+     *
+     * It is announced together with the value, not instead of it: the trigger is
+     * named by the label and by its own text, so a reader hears "Region,
+     * Australia". Inside a `Field` with a label, that label is used and this one
+     * is not repeated.
+     */
     label: string;
     placeholder?: string;
     /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
     invalid?: boolean;
     disabled?: boolean;
     className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** The spelling a form library sets; read together with `invalid`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Announced on the trigger. A `Field` sets it from `required`. */
+    'aria-required'?: boolean;
     /** `SelectItem`s, optionally wrapped in `SelectGroup` with a `SelectLabel`. */
     children: ReactNode;
 }
@@ -53,7 +69,7 @@ interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {
  *   </Select>
  * </Field>
  */
-declare function Select({ label, placeholder, invalid, disabled, className, contentClassName, children, ...props }: SelectProps): react.JSX.Element;
+declare function Select({ label, placeholder, invalid, disabled, className, contentClassName, children, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, ...props }: SelectProps): react.JSX.Element;
 type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;
 /** One option. The tick marks the chosen one; the fill marks the highlighted one. */
 declare function SelectItem({ className, children, ...props }: SelectItemProps): react.JSX.Element;

package/dist/components/Select/Select.js

@@ -2,8 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { useId } from "react";
 import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
 import { useOverlayContainer } from "../../lib/overlay-container.js";
+import { useFieldControl } from "../Field/field-control.js";
 import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
 const SelectRoot = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
@@ -15,15 +18,28 @@ function Select({
   className,
   contentClassName,
   children,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
   ...props
 }) {
-  const bad = isInvalid(invalid);
+  warnBlankName("Select", "label", label, "the trigger is announced with no name");
+  const bad = isInvalid(invalid, ariaInvalid);
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
   const container = useOverlayContainer();
   return /* @__PURE__ */ jsxs(SelectPrimitive.Root, { disabled, ...props, children: [
     /* @__PURE__ */ jsxs(
       SelectPrimitive.Trigger,
       {
-        "aria-label": label,
+        id: triggerId,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
         "aria-invalid": bad || void 0,
         className: cn(
           CONTROL_BASE,
@@ -32,7 +48,8 @@ function Select({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "truncate", children: /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }) }),
           /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
             ChevronDown,
             {
@@ -54,7 +71,7 @@ function Select({
         sideOffset: 6,
         "data-m22-animated": true,
         className: cn(
-          "z-(--z-dropdown) max-h-72 min-w-(--radix-select-trigger-width) overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur",
+          "z-(--z-dropdown) max-h-72 min-w-(--radix-select-trigger-width) overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur",
           contentClassName,
           "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)"
         ),

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\n/** Radix Select root, group and label, as typed passthroughs. */\nexport const SelectRoot = SelectPrimitive.Root\nexport const SelectGroup = SelectPrimitive.Group\n\nexport interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {\n  /**\n   * Classes for the option PANEL, not the trigger.\n   *\n   * `className` styles the trigger, which is the common case. This exists for\n   * the uncommon one: a select inside a bounded surface, where the default\n   * 18rem of list would cover the thing the reader is choosing for — a year\n   * picker over its own calendar, say.\n   */\n  contentClassName?: string\n  /** Names the control. Required — the trigger shows a value, and a value is not a name. */\n  label: string\n  placeholder?: string\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  disabled?: boolean\n  className?: string\n  /** `SelectItem`s, optionally wrapped in `SelectGroup` with a `SelectLabel`. */\n  children: ReactNode\n}\n\n/**\n * A choice from a list, styled the whole way down.\n *\n * The option list is ours — drawn from the same tokens as everything else, so\n * it does not change typeface, spacing and selection colour the moment it\n * opens. That is the whole reason this replaced the native control as the\n * default: a design system whose most common form control stops being part of\n * the system on click is not a design system, it is a stylesheet for closed\n * states.\n *\n * The keyboard contract is Radix's, which means it is the platform's: typeahead\n * works, the arrows move, Home and End reach the ends, and Escape closes\n * without choosing. That was the one genuine argument for staying native, and\n * it is answered.\n *\n * Past roughly a dozen options, reach for `Combobox` — a list nobody can filter\n * is worse than one they can type into. Where the platform picker is genuinely\n * better — a phone, or a form that must survive without JavaScript — reach for\n * `NativeSelect`.\n *\n * @example\n * <Field label=\"Region\">\n *   <Select label=\"Region\" defaultValue=\"au\">\n *     <SelectItem value=\"au\">Australia</SelectItem>\n *     <SelectItem value=\"nz\">New Zealand</SelectItem>\n *   </Select>\n * </Field>\n */\nexport function Select({\n  label,\n  placeholder = 'Select…',\n  invalid,\n  disabled,\n  className,\n  contentClassName,\n  children,\n  ...props\n}: SelectProps) {\n  const bad = isInvalid(invalid)\n  const container = useOverlayContainer()\n\n  return (\n    <SelectPrimitive.Root disabled={disabled} {...props}>\n      <SelectPrimitive.Trigger\n        aria-label={label}\n        aria-invalid={bad || undefined}\n        className={cn(\n          CONTROL_BASE,\n          'group flex cursor-pointer items-center justify-between gap-2 text-start data-[placeholder]:text-(--ink-3-aa)',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          className,\n        )}\n      >\n        <SelectPrimitive.Value placeholder={placeholder} />\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown\n            size={16}\n            strokeWidth={1.5}\n            aria-hidden\n            className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-fast) group-data-[state=open]:rotate-180\"\n          />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n\n      <SelectPrimitive.Portal container={container ?? undefined}>\n        <SelectPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n          position=\"popper\"\n          sideOffset={6}\n          data-m22-animated\n          className={cn(\n            'z-(--z-dropdown) max-h-72 min-w-(--radix-select-trigger-width) overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur',\n            contentClassName,\n            'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          )}\n        >\n          <SelectPrimitive.ScrollUpButton className=\"flex h-6 items-center justify-center text-(--ink-3-aa)\">\n            <ChevronUp size={14} strokeWidth={1.5} aria-hidden />\n          </SelectPrimitive.ScrollUpButton>\n          <SelectPrimitive.Viewport className=\"p-1.5\">{children}</SelectPrimitive.Viewport>\n          <SelectPrimitive.ScrollDownButton className=\"flex h-6 items-center justify-center text-(--ink-3-aa)\">\n            <ChevronDown size={14} strokeWidth={1.5} aria-hidden />\n          </SelectPrimitive.ScrollDownButton>\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n  )\n}\n\nexport type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>\n\n/** One option. The tick marks the chosen one; the fill marks the highlighted one. */\nexport function SelectItem({ className, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        'flex cursor-pointer select-none items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm text-(--ink-2) outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[highlighted]:text-(--ink) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {/* The box is always there and only the tick inside it appears, so\n          choosing an option does not shunt every label sideways. */}\n      <span className=\"grid size-3.5 shrink-0 place-items-center\">\n        <SelectPrimitive.ItemIndicator asChild>\n          <Check size={14} strokeWidth={2} aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n/**\n * Mono eyebrow heading for a group of options.\n *\n * Must sit inside a `SelectGroup` — Radix throws otherwise, because a heading\n * with no group is a heading for nothing, and assistive tech would announce it\n * as an option.\n */\nexport function SelectLabel({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...props}\n    />\n  )\n}\n\n/** Hairline divider between groups. */\nexport function SelectSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...props} />\n  )\n}\n\nexport default Select\n"],"mappings":";AA6EM,SAUE,KAVF;AA3EN,YAAY,qBAAqB;AACjC,SAAS,OAAO,aAAa,iBAAiB;AAE9C,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,cAAc,gBAAgB,iBAAiB;AAGjD,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AAmDpC,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,MAAM,UAAU,OAAO;AAC7B,QAAM,YAAY,oBAAoB;AAEtC,SACE,qBAAC,gBAAgB,MAAhB,EAAqB,UAAqB,GAAG,OAC5C;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,cAAY;AAAA,QACZ,gBAAc,OAAO;AAAA,QACrB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,UAC9C;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,aAA0B;AAAA,UACjD,oBAAC,gBAAgB,MAAhB,EAAqB,SAAO,MAC3B;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAa;AAAA,cACb,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAC9C;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACD,mBAAmB,aAAa;AAAA,QAChC,kBAAkB;AAAA,QAChB,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,gBAAgB,gBAAhB,EAA+B,WAAU,0DACxC,8BAAC,aAAU,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,GACrD;AAAA,UACA,oBAAC,gBAAgB,UAAhB,EAAyB,WAAU,SAAS,UAAS;AAAA,UACtD,oBAAC,gBAAgB,kBAAhB,EAAiC,WAAU,0DAC1C,8BAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,GACvD;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAKO,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,MAAM,GAAoB;AAC7E,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAIJ;AAAA,4BAAC,UAAK,WAAU,6CACd,8BAAC,gBAAgB,eAAhB,EAA8B,SAAO,MACpC,8BAAC,SAAM,MAAM,IAAI,aAAa,GAAG,eAAW,MAAC,GAC/C,GACF;AAAA,QACA,oBAAC,gBAAgB,UAAhB,EAA0B,UAAS;AAAA;AAAA;AAAA,EACtC;AAEJ;AASO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAqD;AACnD,SACE,oBAAC,gBAAgB,WAAhB,EAA0B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,OAAO;AAE7F;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\nimport { useId, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\nimport { useFieldControl } from '../Field/field-control'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\n/** Radix Select root, group and label, as typed passthroughs. */\nexport const SelectRoot = SelectPrimitive.Root\nexport const SelectGroup = SelectPrimitive.Group\n\nexport interface SelectProps extends ComponentProps<typeof SelectPrimitive.Root> {\n  /**\n   * Classes for the option PANEL, not the trigger.\n   *\n   * `className` styles the trigger, which is the common case. This exists for\n   * the uncommon one: a select inside a bounded surface, where the default\n   * 18rem of list would cover the thing the reader is choosing for — a year\n   * picker over its own calendar, say.\n   */\n  contentClassName?: string\n  /**\n   * Names the control. Required — the trigger shows a value, and a value is not\n   * a name.\n   *\n   * It is announced together with the value, not instead of it: the trigger is\n   * named by the label and by its own text, so a reader hears \"Region,\n   * Australia\". Inside a `Field` with a label, that label is used and this one\n   * is not repeated.\n   */\n  label: string\n  placeholder?: string\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  disabled?: boolean\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** The spelling a form library sets; read together with `invalid`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n  /** Announced on the trigger. A `Field` sets it from `required`. */\n  'aria-required'?: boolean\n  /** `SelectItem`s, optionally wrapped in `SelectGroup` with a `SelectLabel`. */\n  children: ReactNode\n}\n\n/**\n * A choice from a list, styled the whole way down.\n *\n * The option list is ours — drawn from the same tokens as everything else, so\n * it does not change typeface, spacing and selection colour the moment it\n * opens. That is the whole reason this replaced the native control as the\n * default: a design system whose most common form control stops being part of\n * the system on click is not a design system, it is a stylesheet for closed\n * states.\n *\n * The keyboard contract is Radix's, which means it is the platform's: typeahead\n * works, the arrows move, Home and End reach the ends, and Escape closes\n * without choosing. That was the one genuine argument for staying native, and\n * it is answered.\n *\n * Past roughly a dozen options, reach for `Combobox` — a list nobody can filter\n * is worse than one they can type into. Where the platform picker is genuinely\n * better — a phone, or a form that must survive without JavaScript — reach for\n * `NativeSelect`.\n *\n * @example\n * <Field label=\"Region\">\n *   <Select label=\"Region\" defaultValue=\"au\">\n *     <SelectItem value=\"au\">Australia</SelectItem>\n *     <SelectItem value=\"nz\">New Zealand</SelectItem>\n *   </Select>\n * </Field>\n */\nexport function Select({\n  label,\n  placeholder = 'Select…',\n  invalid,\n  disabled,\n  className,\n  contentClassName,\n  children,\n  id,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  ...props\n}: SelectProps) {\n  warnBlankName('Select', 'label', label, 'the trigger is announced with no name')\n  const bad = isInvalid(invalid, ariaInvalid)\n\n  const field = useFieldControl()\n  const generated = useId()\n  // The id belongs on the TRIGGER: Radix's root renders no DOM node at all, so\n  // an id handed to it lands nowhere and the label above points at nothing.\n  const triggerId = id ?? generated\n  const valueId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n\n  const container = useOverlayContainer()\n\n  return (\n    <SelectPrimitive.Root disabled={disabled} {...props}>\n      <SelectPrimitive.Trigger\n        id={triggerId}\n        // Named by the label AND by its own value, in that order. `aria-label`\n        // outranks name-from-content, so naming it \"Region\" told a reader the\n        // noun and never the answer — and the answer is the only thing on the\n        // trigger.\n        aria-labelledby={`${nameId} ${valueId}`}\n        aria-describedby={describedBy}\n        aria-required={ariaRequired}\n        aria-invalid={bad || undefined}\n        className={cn(\n          CONTROL_BASE,\n          'group flex cursor-pointer items-center justify-between gap-2 text-start data-[placeholder]:text-(--ink-3-aa)',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          className,\n        )}\n      >\n        {field?.labelId == null && (\n          <span id={nameId} className=\"sr-only\">\n            {label}\n          </span>\n        )}\n        {/* Wrapped rather than styled directly: Radix's Value drops className.\n            The wrapper is also what `aria-labelledby` points at, so the name\n            picks up the value and not the chevron. */}\n        <span id={valueId} className=\"truncate\">\n          <SelectPrimitive.Value placeholder={placeholder} />\n        </span>\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown\n            size={16}\n            strokeWidth={1.5}\n            aria-hidden\n            className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-fast) group-data-[state=open]:rotate-180\"\n          />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n\n      <SelectPrimitive.Portal container={container ?? undefined}>\n        <SelectPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n          position=\"popper\"\n          sideOffset={6}\n          data-m22-animated\n          className={cn(\n            'z-(--z-dropdown) max-h-72 min-w-(--radix-select-trigger-width) overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur',\n            contentClassName,\n            'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          )}\n        >\n          <SelectPrimitive.ScrollUpButton className=\"flex h-6 items-center justify-center text-(--ink-3-aa)\">\n            <ChevronUp size={14} strokeWidth={1.5} aria-hidden />\n          </SelectPrimitive.ScrollUpButton>\n          <SelectPrimitive.Viewport className=\"p-1.5\">{children}</SelectPrimitive.Viewport>\n          <SelectPrimitive.ScrollDownButton className=\"flex h-6 items-center justify-center text-(--ink-3-aa)\">\n            <ChevronDown size={14} strokeWidth={1.5} aria-hidden />\n          </SelectPrimitive.ScrollDownButton>\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n  )\n}\n\nexport type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>\n\n/** One option. The tick marks the chosen one; the fill marks the highlighted one. */\nexport function SelectItem({ className, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        'flex cursor-pointer select-none items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm text-(--ink-2) outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[highlighted]:text-(--ink) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {/* The box is always there and only the tick inside it appears, so\n          choosing an option does not shunt every label sideways. */}\n      <span className=\"grid size-3.5 shrink-0 place-items-center\">\n        <SelectPrimitive.ItemIndicator asChild>\n          <Check size={14} strokeWidth={2} aria-hidden />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n/**\n * Mono eyebrow heading for a group of options.\n *\n * Must sit inside a `SelectGroup` — Radix throws otherwise, because a heading\n * with no group is a heading for nothing, and assistive tech would announce it\n * as an option.\n */\nexport function SelectLabel({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...props}\n    />\n  )\n}\n\n/** Hairline divider between groups. */\nexport function SelectSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator className={cn('my-1 h-px bg-(--rule)', className)} {...props} />\n  )\n}\n\nexport default Select\n"],"mappings":";AA6GM,SAkBI,KAlBJ;AA3GN,YAAY,qBAAqB;AACjC,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,aAAkD;AAC3D,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,cAAc,gBAAgB,iBAAiB;AAGjD,MAAM,aAAa,gBAAgB;AACnC,MAAM,cAAc,gBAAgB;AAmEpC,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAgB;AACd,gBAAc,UAAU,SAAS,OAAO,uCAAuC;AAC/E,QAAM,MAAM,UAAU,SAAS,WAAW;AAE1C,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,YAAY,MAAM;AAGxB,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,GAAG,SAAS;AAC5B,QAAM,SAAS,OAAO,WAAW,GAAG,SAAS;AAE7C,QAAM,YAAY,oBAAoB;AAEtC,SACE,qBAAC,gBAAgB,MAAhB,EAAqB,UAAqB,GAAG,OAC5C;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,IAAI;AAAA,QAKJ,mBAAiB,GAAG,MAAM,IAAI,OAAO;AAAA,QACrC,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,gBAAc,OAAO;AAAA,QACrB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,UAC9C;AAAA,QACF;AAAA,QAEC;AAAA,iBAAO,WAAW,QACjB,oBAAC,UAAK,IAAI,QAAQ,WAAU,WACzB,iBACH;AAAA,UAKF,oBAAC,UAAK,IAAI,SAAS,WAAU,YAC3B,8BAAC,gBAAgB,OAAhB,EAAsB,aAA0B,GACnD;AAAA,UACA,oBAAC,gBAAgB,MAAhB,EAAqB,SAAO,MAC3B;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAa;AAAA,cACb,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEA,oBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAC9C;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACD,mBAAmB,aAAa;AAAA,QAChC,kBAAkB;AAAA,QAChB,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,gBAAgB,gBAAhB,EAA+B,WAAU,0DACxC,8BAAC,aAAU,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,GACrD;AAAA,UACA,oBAAC,gBAAgB,UAAhB,EAAyB,WAAU,SAAS,UAAS;AAAA,UACtD,oBAAC,gBAAgB,kBAAhB,EAAiC,WAAU,0DAC1C,8BAAC,eAAY,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,GACvD;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAKO,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,MAAM,GAAoB;AAC7E,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAIJ;AAAA,4BAAC,UAAK,WAAU,6CACd,8BAAC,gBAAgB,eAAhB,EAA8B,SAAO,MACpC,8BAAC,SAAM,MAAM,IAAI,aAAa,GAAG,eAAW,MAAC,GAC/C,GACF;AAAA,QACA,oBAAC,gBAAgB,UAAhB,EAA0B,UAAS;AAAA;AAAA;AAAA,EACtC;AAEJ;AASO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAqD;AACnD,SACE,oBAAC,gBAAgB,WAAhB,EAA0B,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,OAAO;AAE7F;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/Separator/Separator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 
 interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
     orientation?: 'horizontal' | 'vertical';
@@ -11,20 +11,38 @@ interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
      * screen reader should hear as distinct.
      */
     decorative?: boolean;
+    /**
+     * Words in the break — "or continue with", "Older".
+     *
+     * Horizontal only, and it changes the construction rather than the styling:
+     * see the note on the component. `decorative` no longer applies, because the
+     * label is content and the two rules beside it are decoration either way.
+     */
+    label?: ReactNode;
 }
 /**
- * A rule.
+ * A rule, with or without words in it.
  *
  * In a monochrome system the rule does the work colour would otherwise do, so
  * it has three weights rather than one: hairline between rows, edge between
  * blocks, hard under a masthead. Picking by name keeps a page from drifting
  * into five hand-tuned greys.
  *
+ * **On the label.** "or continue with" was two Separators and a span at every
+ * call site, and the usual one-element version — text laid over a single rule
+ * with a background to punch a hole in it — needs to know the ground it is
+ * sitting on. Get that wrong and the notch is `--paper` on a card that is
+ * `--stone`, which reads as a rendering bug. So there is no ground: the rule is
+ * drawn twice, one piece either side of the label, and the gap is a gap. It is
+ * correct on any surface without being told which one it is on.
+ *
  * @example
  * <Separator weight="hard" />
  * @example
  * <Separator orientation="vertical" className="h-4" />
+ * @example
+ * <Separator label="or continue with" />
  */
-declare function Separator({ orientation, weight, decorative, className, ...rest }: SeparatorProps): react.JSX.Element;
+declare function Separator({ orientation, weight, decorative, label, className, ...rest }: SeparatorProps): react.JSX.Element;
 
 export { Separator, type SeparatorProps, Separator as default };

package/dist/components/Separator/Separator.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 const WEIGHT = {
   hairline: "bg-(--rule)",
@@ -9,9 +9,17 @@ function Separator({
   orientation = "horizontal",
   weight = "hairline",
   decorative = true,
+  label,
   className,
   ...rest
 }) {
+  if (label != null && orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-3", className), ...rest, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-px flex-1", WEIGHT[weight]) }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 mono-meta text-(--ink-3-aa)", children: label }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-px flex-1", WEIGHT[weight]) })
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  /** `hairline` divides rows inside one block; `edge` divides one block from the next. */\n  weight?: 'hairline' | 'edge' | 'hard'\n  /**\n   * A rule that only groups things visually is decoration and must not be\n   * announced. Set `false` when the rule genuinely separates two sections a\n   * screen reader should hear as distinct.\n   */\n  decorative?: boolean\n}\n\nconst WEIGHT = {\n  hairline: 'bg-(--rule)',\n  edge: 'bg-(--rule-2)',\n  hard: 'bg-(--rule-hard)',\n} as const\n\n/**\n * A rule.\n *\n * In a monochrome system the rule does the work colour would otherwise do, so\n * it has three weights rather than one: hairline between rows, edge between\n * blocks, hard under a masthead. Picking by name keeps a page from drifting\n * into five hand-tuned greys.\n *\n * @example\n * <Separator weight=\"hard\" />\n * @example\n * <Separator orientation=\"vertical\" className=\"h-4\" />\n */\nexport function Separator({\n  orientation = 'horizontal',\n  weight = 'hairline',\n  decorative = true,\n  className,\n  ...rest\n}: SeparatorProps) {\n  return (\n    <div\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={decorative ? undefined : orientation}\n      className={cn(\n        'shrink-0',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n        WEIGHT[weight],\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport default Separator\n"],"mappings":"AA0CI;AAzCJ,SAAS,UAAU;AAcnB,MAAM,SAAS;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AACR;AAeO,SAAS,UAAU;AAAA,EACxB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,aAAa,SAAS;AAAA,MAC5B,oBAAkB,aAAa,SAAY;AAAA,MAC3C,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C,OAAO,MAAM;AAAA,QACb;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  /** `hairline` divides rows inside one block; `edge` divides one block from the next. */\n  weight?: 'hairline' | 'edge' | 'hard'\n  /**\n   * A rule that only groups things visually is decoration and must not be\n   * announced. Set `false` when the rule genuinely separates two sections a\n   * screen reader should hear as distinct.\n   */\n  decorative?: boolean\n  /**\n   * Words in the break — \"or continue with\", \"Older\".\n   *\n   * Horizontal only, and it changes the construction rather than the styling:\n   * see the note on the component. `decorative` no longer applies, because the\n   * label is content and the two rules beside it are decoration either way.\n   */\n  label?: ReactNode\n}\n\nconst WEIGHT = {\n  hairline: 'bg-(--rule)',\n  edge: 'bg-(--rule-2)',\n  hard: 'bg-(--rule-hard)',\n} as const\n\n/**\n * A rule, with or without words in it.\n *\n * In a monochrome system the rule does the work colour would otherwise do, so\n * it has three weights rather than one: hairline between rows, edge between\n * blocks, hard under a masthead. Picking by name keeps a page from drifting\n * into five hand-tuned greys.\n *\n * **On the label.** \"or continue with\" was two Separators and a span at every\n * call site, and the usual one-element version — text laid over a single rule\n * with a background to punch a hole in it — needs to know the ground it is\n * sitting on. Get that wrong and the notch is `--paper` on a card that is\n * `--stone`, which reads as a rendering bug. So there is no ground: the rule is\n * drawn twice, one piece either side of the label, and the gap is a gap. It is\n * correct on any surface without being told which one it is on.\n *\n * @example\n * <Separator weight=\"hard\" />\n * @example\n * <Separator orientation=\"vertical\" className=\"h-4\" />\n * @example\n * <Separator label=\"or continue with\" />\n */\nexport function Separator({\n  orientation = 'horizontal',\n  weight = 'hairline',\n  decorative = true,\n  label,\n  className,\n  ...rest\n}: SeparatorProps) {\n  if (label != null && orientation === 'horizontal') {\n    return (\n      <div className={cn('flex w-full items-center gap-3', className)} {...rest}>\n        <span aria-hidden=\"true\" className={cn('h-px flex-1', WEIGHT[weight])} />\n        <span className=\"shrink-0 mono-meta text-(--ink-3-aa)\">{label}</span>\n        <span aria-hidden=\"true\" className={cn('h-px flex-1', WEIGHT[weight])} />\n      </div>\n    )\n  }\n\n  return (\n    <div\n      role={decorative ? 'none' : 'separator'}\n      aria-orientation={decorative ? undefined : orientation}\n      className={cn(\n        'shrink-0',\n        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n        WEIGHT[weight],\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport default Separator\n"],"mappings":"AA8DM,SACE,KADF;AA7DN,SAAS,UAAU;AAsBnB,MAAM,SAAS;AAAA,EACb,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AACR;AAyBO,SAAS,UAAU;AAAA,EACxB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,MAAI,SAAS,QAAQ,gBAAgB,cAAc;AACjD,WACE,qBAAC,SAAI,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,MACnE;AAAA,0BAAC,UAAK,eAAY,QAAO,WAAW,GAAG,eAAe,OAAO,MAAM,CAAC,GAAG;AAAA,MACvE,oBAAC,UAAK,WAAU,wCAAwC,iBAAM;AAAA,MAC9D,oBAAC,UAAK,eAAY,QAAO,WAAW,GAAG,eAAe,OAAO,MAAM,CAAC,GAAG;AAAA,OACzE;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,aAAa,SAAS;AAAA,MAC5B,oBAAkB,aAAa,SAAY;AAAA,MAC3C,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C,OAAO,MAAM;AAAA,QACb;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/Sheet/Sheet.d.ts

@@ -27,6 +27,9 @@ interface SheetContentProps extends Omit<ComponentProps<typeof DialogPrimitive.C
  * The title is required, visible or not. A modal with no accessible name drops
  * a screen reader into an unnamed region with no way back out.
  *
+ * Portals into the element an enclosing `OverlayContainer` names, docking to
+ * that element's edge rather than the viewport's when there is one.
+ *
  * @example
  * <Sheet>
  *   <SheetTrigger asChild><Button variant="secondary">Filters</Button></SheetTrigger>

package/dist/components/Sheet/Sheet.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
 const Sheet = DialogPrimitive.Root;
 const SheetTrigger = DialogPrimitive.Trigger;
 const SheetClose = DialogPrimitive.Close;
@@ -21,20 +22,28 @@ function SheetContent({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  const container = useOverlayContainer();
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container: container ?? void 0, children: [
     /* @__PURE__ */ jsx(
       DialogPrimitive.Overlay,
       {
         "data-m22-animated": true,
-        className: "fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]"
+        className: cn(
+          "inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]",
+          container ? "absolute" : "fixed"
+        )
       }
     ),
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Content,
       {
+        "data-m22-animated": true,
         className: cn(
-          "fixed z-(--z-modal) flex flex-col overflow-y-auto border-(--panel-border) bg-(--panel-bg) p-6 panel-blur transition-transform duration-(--duration-slow) ease-(--ease-out-expo) scroll-slim",
+          "fixed z-(--z-modal) flex flex-col overflow-y-auto border-(--panel-border) bg-(--panel-bg) p-6 shadow-(--panel-lift) panel-blur transition-transform duration-(--duration-slow) ease-(--ease-out-expo) scroll-slim",
           SIDE[side],
+          // Docked to the container's edge, and capped by its box — the widths
+          // above are read against the viewport and would overflow a frame.
+          container && "absolute max-h-full max-w-full",
           className
         ),
         ...rest,

package/dist/components/Sheet/Sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Dialog root, trigger and close — a sheet IS a dialog, docked. */\nexport const Sheet = DialogPrimitive.Root\nexport const SheetTrigger = DialogPrimitive.Trigger\nexport const SheetClose = DialogPrimitive.Close\n\nexport type SheetSide = 'start' | 'end' | 'top' | 'bottom'\n\n/**\n * Full literal class strings per edge, because Tailwind only generates what it\n * can see verbatim. The inline sides are named in READING order, so a sheet\n * docked to `end` comes from the right in English and the left in Arabic.\n */\nconst SIDE: Record<SheetSide, string> = {\n  start:\n    'inset-y-0 start-0 h-full w-[min(24rem,92vw)] border-e data-[state=closed]:-translate-x-full rtl:data-[state=closed]:translate-x-full',\n  end: 'inset-y-0 end-0 h-full w-[min(24rem,92vw)] border-s data-[state=closed]:translate-x-full rtl:data-[state=closed]:-translate-x-full',\n  top: 'inset-x-0 top-0 w-full max-h-[85vh] border-b data-[state=closed]:-translate-y-full',\n  bottom:\n    'inset-x-0 bottom-0 w-full max-h-[85vh] border-t data-[state=closed]:translate-y-full',\n}\n\nexport interface SheetContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title'> {\n  /** Which edge it is docked to. `end` by default. */\n  side?: SheetSide\n  title: ReactNode\n  description?: ReactNode\n  /** Hide the title visually while keeping it for assistive tech. */\n  hideTitle?: boolean\n}\n\n/**\n * A panel docked to an edge of the viewport.\n *\n * It is a modal dialog — Radix's, so the focus trap, the escape key, the scroll\n * lock and the `aria-modal` wiring are the same ones `Dialog` gets. The only\n * differences are where it sits and which way it arrives, which is why this\n * shares that implementation rather than reproducing it: a second focus trap is\n * a second focus trap to get wrong.\n *\n * The title is required, visible or not. A modal with no accessible name drops\n * a screen reader into an unnamed region with no way back out.\n *\n * @example\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"secondary\">Filters</Button></SheetTrigger>\n *   <SheetContent title=\"Filters\" description=\"Narrow the list.\">…</SheetContent>\n * </Sheet>\n */\nexport function SheetContent({\n  side = 'end',\n  title,\n  description,\n  hideTitle = false,\n  className,\n  children,\n  ...rest\n}: SheetContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className=\"fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]\"\n      />\n      <DialogPrimitive.Content\n        className={cn(\n          'fixed z-(--z-modal) flex flex-col overflow-y-auto border-(--panel-border) bg-(--panel-bg) p-6 panel-blur transition-transform duration-(--duration-slow) ease-(--ease-out-expo) scroll-slim',\n          SIDE[side],\n          className,\n        )}\n        {...rest}\n      >\n        <div className={cn('mb-4 flex flex-col gap-1 pe-8', hideTitle && 'sr-only')}>\n          <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n            {title}\n          </DialogPrimitive.Title>\n          {description !== undefined && (\n            <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n              {description}\n            </DialogPrimitive.Description>\n          )}\n        </div>\n\n        <DialogPrimitive.Close\n          aria-label=\"Close\"\n          className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n        >\n          <X size={16} strokeWidth={1.5} aria-hidden />\n        </DialogPrimitive.Close>\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Sheet\n"],"mappings":";AAmEM,cAYE,YAZF;AAjEN,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AAGZ,MAAM,QAAQ,gBAAgB;AAC9B,MAAM,eAAe,gBAAgB;AACrC,MAAM,aAAa,gBAAgB;AAS1C,MAAM,OAAkC;AAAA,EACtC,OACE;AAAA,EACF,KAAK;AAAA,EACL,KAAK;AAAA,EACL,QACE;AACJ;AA8BO,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE,qBAAC,gBAAgB,QAAhB,EACC;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,KAAK,IAAI;AAAA,UACT;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,+BAAC,SAAI,WAAW,GAAG,iCAAiC,aAAa,SAAS,GACxE;AAAA,gCAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,YACC,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,aAEJ;AAAA,UAEA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAEC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix Dialog root, trigger and close — a sheet IS a dialog, docked. */\nexport const Sheet = DialogPrimitive.Root\nexport const SheetTrigger = DialogPrimitive.Trigger\nexport const SheetClose = DialogPrimitive.Close\n\nexport type SheetSide = 'start' | 'end' | 'top' | 'bottom'\n\n/**\n * Full literal class strings per edge, because Tailwind only generates what it\n * can see verbatim. The inline sides are named in READING order, so a sheet\n * docked to `end` comes from the right in English and the left in Arabic.\n */\nconst SIDE: Record<SheetSide, string> = {\n  start:\n    'inset-y-0 start-0 h-full w-[min(24rem,92vw)] border-e data-[state=closed]:-translate-x-full rtl:data-[state=closed]:translate-x-full',\n  end: 'inset-y-0 end-0 h-full w-[min(24rem,92vw)] border-s data-[state=closed]:translate-x-full rtl:data-[state=closed]:-translate-x-full',\n  top: 'inset-x-0 top-0 w-full max-h-[85vh] border-b data-[state=closed]:-translate-y-full',\n  bottom:\n    'inset-x-0 bottom-0 w-full max-h-[85vh] border-t data-[state=closed]:translate-y-full',\n}\n\nexport interface SheetContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title'> {\n  /** Which edge it is docked to. `end` by default. */\n  side?: SheetSide\n  title: ReactNode\n  description?: ReactNode\n  /** Hide the title visually while keeping it for assistive tech. */\n  hideTitle?: boolean\n}\n\n/**\n * A panel docked to an edge of the viewport.\n *\n * It is a modal dialog — Radix's, so the focus trap, the escape key, the scroll\n * lock and the `aria-modal` wiring are the same ones `Dialog` gets. The only\n * differences are where it sits and which way it arrives, which is why this\n * shares that implementation rather than reproducing it: a second focus trap is\n * a second focus trap to get wrong.\n *\n * The title is required, visible or not. A modal with no accessible name drops\n * a screen reader into an unnamed region with no way back out.\n *\n * Portals into the element an enclosing `OverlayContainer` names, docking to\n * that element's edge rather than the viewport's when there is one.\n *\n * @example\n * <Sheet>\n *   <SheetTrigger asChild><Button variant=\"secondary\">Filters</Button></SheetTrigger>\n *   <SheetContent title=\"Filters\" description=\"Narrow the list.\">…</SheetContent>\n * </Sheet>\n */\nexport function SheetContent({\n  side = 'end',\n  title,\n  description,\n  hideTitle = false,\n  className,\n  children,\n  ...rest\n}: SheetContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <DialogPrimitive.Portal container={container ?? undefined}>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className={cn(\n          'inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]',\n          container ? 'absolute' : 'fixed',\n        )}\n      />\n      <DialogPrimitive.Content\n        // The panel's own assertion that its travel is decorative — the scrim\n        // beside it always made one and this half never did, so under reduced\n        // motion the fade was cancelled and the panel still slid the whole\n        // width of itself, which reads worse than leaving both alone. See the\n        // reduced-motion block in keyframes.css for what the marker now means:\n        // documentation with teeth, over a universal floor that no longer\n        // depends on anyone remembering it.\n        data-m22-animated\n        className={cn(\n          'fixed z-(--z-modal) flex flex-col overflow-y-auto border-(--panel-border) bg-(--panel-bg) p-6 shadow-(--panel-lift) panel-blur transition-transform duration-(--duration-slow) ease-(--ease-out-expo) scroll-slim',\n          SIDE[side],\n          // Docked to the container's edge, and capped by its box — the widths\n          // above are read against the viewport and would overflow a frame.\n          container && 'absolute max-h-full max-w-full',\n          className,\n        )}\n        {...rest}\n      >\n        <div className={cn('mb-4 flex flex-col gap-1 pe-8', hideTitle && 'sr-only')}>\n          <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n            {title}\n          </DialogPrimitive.Title>\n          {description !== undefined && (\n            <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n              {description}\n            </DialogPrimitive.Description>\n          )}\n        </div>\n\n        <DialogPrimitive.Close\n          aria-label=\"Close\"\n          className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n        >\n          <X size={16} strokeWidth={1.5} aria-hidden />\n        </DialogPrimitive.Close>\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Sheet\n"],"mappings":";AAyEM,cA0BE,YA1BF;AAvEN,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,QAAQ,gBAAgB;AAC9B,MAAM,eAAe,gBAAgB;AACrC,MAAM,aAAa,gBAAgB;AAS1C,MAAM,OAAkC;AAAA,EACtC,OACE;AAAA,EACF,KAAK;AAAA,EACL,KAAK;AAAA,EACL,QACE;AACJ;AAiCO,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,oBAAoB;AAEtC,SACE,qBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAC9C;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,QAC3B;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QAQC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA,KAAK,IAAI;AAAA;AAAA;AAAA,UAGT,aAAa;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,+BAAC,SAAI,WAAW,GAAG,iCAAiC,aAAa,SAAS,GACxE;AAAA,gCAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,YACC,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,aAEJ;AAAA,UAEA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAEC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}