@misoto22/design 0.7.0 → 0.8.0

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) 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",
           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 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":[]}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,13 +3,20 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 type SkeletonProps = HTMLAttributes<HTMLDivElement>;
 /**
- * The fill every skeleton part is drawn from: `--stone`, and nothing else.
+ * The fill every skeleton part is drawn from: `--stone`, at the height of one
+ * line until something says otherwise.
  *
  * Deliberately NOT a shimmer. A shimmer sweeps a highlight across the shape,
  * which implies a light source; the White Reset has none, so the sweep reads as
  * a bug rather than as loading. The whole page breathes together instead —
  * see `SkeletonPage`, which owns the single pulse.
  *
+ * `h-3` is a default rather than a design. A `<div>` is already full width, so
+ * height was the one dimension a caller could omit and get nothing for — a
+ * bare `<Skeleton />` was a zero-height box, which is not a small skeleton but
+ * an absent one. Twelve pixels is the height `SkeletonLine` already chose, and
+ * any class the caller passes replaces it.
+ *
  * @example
  * <Skeleton className="h-3 w-40 rounded-(--radius-pill)" />
  */

package/dist/components/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 function Skeleton({ className, ...rest }) {
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("bg-(--stone)", className), ...rest });
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("h-3 bg-(--stone)", className), ...rest });
 }
 function SkeletonLine({ className, ...rest }) {
   return /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3 rounded-(--radius-pill)", className), ...rest });

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The fill every skeleton part is drawn from: `--stone`, and nothing else.\n *\n * Deliberately NOT a shimmer. A shimmer sweeps a highlight across the shape,\n * which implies a light source; the White Reset has none, so the sweep reads as\n * a bug rather than as loading. The whole page breathes together instead —\n * see `SkeletonPage`, which owns the single pulse.\n *\n * @example\n * <Skeleton className=\"h-3 w-40 rounded-(--radius-pill)\" />\n */\nexport function Skeleton({ className, ...rest }: SkeletonProps) {\n  return <div aria-hidden=\"true\" className={cn('bg-(--stone)', className)} {...rest} />\n}\n\n/** A line of type. Height is the line's; width is how far it runs. */\nexport function SkeletonLine({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('h-3 rounded-(--radius-pill)', className)} {...rest} />\n}\n\n/** A block: an image mount, a plate, a chart. */\nexport function SkeletonBlock({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('rounded-(--radius-sm)', className)} {...rest} />\n}\n\n/** A circle: an avatar, a marker. */\nexport function SkeletonCircle({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('size-9 rounded-full', className)} {...rest} />\n}\n\nexport interface SkeletonTextProps extends SkeletonProps {\n  /** How many lines of prose to stand in for. */\n  lines?: number\n}\n\n/**\n * A paragraph.\n *\n * The last line is short, because real prose ends mid-measure. A block of equal\n * full-width bars reads as a table, and the reader then flinches when a\n * paragraph arrives instead.\n */\nexport function SkeletonText({ lines = 3, className, ...rest }: SkeletonTextProps) {\n  return (\n    <div className={cn('flex flex-col gap-2.5', className)} {...rest}>\n      {Array.from({ length: lines }, (_, index) => (\n        <SkeletonLine key={index} className={index === lines - 1 ? 'w-[62%]' : 'w-full'} />\n      ))}\n    </div>\n  )\n}\n\nexport interface SkeletonPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * What is loading, in words. Announced once; the shapes themselves are\n   * `aria-hidden`, so this sentence is the entire experience for a screen\n   * reader and \"Loading\" alone tells it nothing.\n   */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The frame a skeleton sits in: the live region, and the single pulse.\n *\n * One `animate-pulse` on the wrapper rather than one per part, so the page\n * breathes together instead of shimmering out of phase — twenty independently\n * animated bars is a visual noise floor, not a loading state.\n *\n * A skeleton whose shape does not match what replaces it is worse than none: it\n * promises a layout and then the page jumps out from under the reader. Compose\n * the parts to match the real thing, and change both together.\n *\n * @example\n * <SkeletonPage label=\"Loading projects\">\n *   <SkeletonLine className=\"h-2.5 w-28\" />\n *   <SkeletonBlock className=\"mt-6 h-40\" />\n * </SkeletonPage>\n */\nexport function SkeletonPage({ label, children, className, ...rest }: SkeletonPageProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-busy=\"true\"\n      data-m22-animated\n      className={cn('animate-pulse motion-reduce:animate-none', className)}\n      {...rest}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {children}\n    </div>\n  )\n}\n\nexport default Skeleton\n"],"mappings":"AAiBS,cAqEL,YArEK;AAhBT,SAAS,UAAU;AAeZ,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAAkB;AAC9D,SAAO,oBAAC,SAAI,eAAY,QAAO,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,MAAM;AACrF;AAGO,SAAS,aAAa,EAAE,WAAW,GAAG,KAAK,GAAkB;AAClE,SAAO,oBAAC,YAAS,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,MAAM;AACtF;AAGO,SAAS,cAAc,EAAE,WAAW,GAAG,KAAK,GAAkB;AACnE,SAAO,oBAAC,YAAS,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAChF;AAGO,SAAS,eAAe,EAAE,WAAW,GAAG,KAAK,GAAkB;AACpE,SAAO,oBAAC,YAAS,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AAC9E;AAcO,SAAS,aAAa,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MACzD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC,oBAAC,gBAAyB,WAAW,UAAU,QAAQ,IAAI,YAAY,YAApD,KAA8D,CAClF,GACH;AAEJ;AA6BO,SAAS,aAAa,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAsB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,qBAAiB;AAAA,MACjB,WAAW,GAAG,4CAA4C,SAAS;AAAA,MAClE,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,QAChC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The fill every skeleton part is drawn from: `--stone`, at the height of one\n * line until something says otherwise.\n *\n * Deliberately NOT a shimmer. A shimmer sweeps a highlight across the shape,\n * which implies a light source; the White Reset has none, so the sweep reads as\n * a bug rather than as loading. The whole page breathes together instead —\n * see `SkeletonPage`, which owns the single pulse.\n *\n * `h-3` is a default rather than a design. A `<div>` is already full width, so\n * height was the one dimension a caller could omit and get nothing for — a\n * bare `<Skeleton />` was a zero-height box, which is not a small skeleton but\n * an absent one. Twelve pixels is the height `SkeletonLine` already chose, and\n * any class the caller passes replaces it.\n *\n * @example\n * <Skeleton className=\"h-3 w-40 rounded-(--radius-pill)\" />\n */\nexport function Skeleton({ className, ...rest }: SkeletonProps) {\n  return <div aria-hidden=\"true\" className={cn('h-3 bg-(--stone)', className)} {...rest} />\n}\n\n/** A line of type. Height is the line's; width is how far it runs. */\nexport function SkeletonLine({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('h-3 rounded-(--radius-pill)', className)} {...rest} />\n}\n\n/** A block: an image mount, a plate, a chart. */\nexport function SkeletonBlock({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('rounded-(--radius-sm)', className)} {...rest} />\n}\n\n/** A circle: an avatar, a marker. */\nexport function SkeletonCircle({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('size-9 rounded-full', className)} {...rest} />\n}\n\nexport interface SkeletonTextProps extends SkeletonProps {\n  /** How many lines of prose to stand in for. */\n  lines?: number\n}\n\n/**\n * A paragraph.\n *\n * The last line is short, because real prose ends mid-measure. A block of equal\n * full-width bars reads as a table, and the reader then flinches when a\n * paragraph arrives instead.\n */\nexport function SkeletonText({ lines = 3, className, ...rest }: SkeletonTextProps) {\n  return (\n    <div className={cn('flex flex-col gap-2.5', className)} {...rest}>\n      {Array.from({ length: lines }, (_, index) => (\n        <SkeletonLine key={index} className={index === lines - 1 ? 'w-[62%]' : 'w-full'} />\n      ))}\n    </div>\n  )\n}\n\nexport interface SkeletonPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * What is loading, in words. Announced once; the shapes themselves are\n   * `aria-hidden`, so this sentence is the entire experience for a screen\n   * reader and \"Loading\" alone tells it nothing.\n   */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The frame a skeleton sits in: the live region, and the single pulse.\n *\n * One `animate-pulse` on the wrapper rather than one per part, so the page\n * breathes together instead of shimmering out of phase — twenty independently\n * animated bars is a visual noise floor, not a loading state.\n *\n * A skeleton whose shape does not match what replaces it is worse than none: it\n * promises a layout and then the page jumps out from under the reader. Compose\n * the parts to match the real thing, and change both together.\n *\n * @example\n * <SkeletonPage label=\"Loading projects\">\n *   <SkeletonLine className=\"h-2.5 w-28\" />\n *   <SkeletonBlock className=\"mt-6 h-40\" />\n * </SkeletonPage>\n */\nexport function SkeletonPage({ label, children, className, ...rest }: SkeletonPageProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-busy=\"true\"\n      data-m22-animated\n      className={cn('animate-pulse motion-reduce:animate-none', className)}\n      {...rest}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {children}\n    </div>\n  )\n}\n\nexport default Skeleton\n"],"mappings":"AAwBS,cAqEL,YArEK;AAvBT,SAAS,UAAU;AAsBZ,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAAkB;AAC9D,SAAO,oBAAC,SAAI,eAAY,QAAO,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AACzF;AAGO,SAAS,aAAa,EAAE,WAAW,GAAG,KAAK,GAAkB;AAClE,SAAO,oBAAC,YAAS,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,MAAM;AACtF;AAGO,SAAS,cAAc,EAAE,WAAW,GAAG,KAAK,GAAkB;AACnE,SAAO,oBAAC,YAAS,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAChF;AAGO,SAAS,eAAe,EAAE,WAAW,GAAG,KAAK,GAAkB;AACpE,SAAO,oBAAC,YAAS,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AAC9E;AAcO,SAAS,aAAa,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MACzD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC,oBAAC,gBAAyB,WAAW,UAAU,QAAQ,IAAI,YAAY,YAApD,KAA8D,CAClF,GACH;AAEJ;AA6BO,SAAS,aAAa,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAsB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,qBAAiB;AAAA,MACjB,WAAW,GAAG,4CAA4C,SAAS;AAAA,MAClE,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,QAChC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Slider/Slider.d.ts

@@ -10,9 +10,21 @@ interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
      * A range slider (two thumbs) needs one name per thumb — pass an array.
      */
     label: string | [string, string];
-    /** Prints the current value beside the label. */
+    /**
+     * Prints the current value beside the label.
+     *
+     * A two-thumb range prints both names and both values, in the same order —
+     * the heading used to print the first name over a pair of numbers, which read
+     * as "Minimum" over "10 – 90".
+     */
     showValue?: boolean;
-    /** Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. */
+    /**
+     * Renders the value with a unit or a currency, e.g. `(n) => n + '%'`.
+     *
+     * Reaches assistive tech as well as the readout: it becomes each thumb's
+     * `aria-valuetext`, so a thumb showing "$1,200" announces that rather than the
+     * bare number. Left off, the platform announces the value itself.
+     */
     format?: (value: number) => string;
 }
 /**
@@ -27,9 +39,15 @@ interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
  * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized
  * for the design is well under any pointer-target guideline.
  *
+ * Inside a `Field`, the hint, the error and the requirement land on the THUMB,
+ * which is the element carrying `role="slider"` — on the root they would sit on
+ * a `<span>` with no role and announce nothing. The NAME still comes from
+ * `label` here: a field's label above a slider points at that same roleless
+ * root, so it neither names the control nor clicks through to it.
+ *
  * @example
  * <Slider label="Quality" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />
  */
-declare function Slider({ label, showValue, format, className, onValueChange, ...props }: SliderProps): react.JSX.Element;
+declare function Slider({ label, showValue, format, className, onValueChange, 'aria-describedby': describedBy, 'aria-required': ariaRequired, 'aria-invalid': ariaInvalid, ...props }: SliderProps): react.JSX.Element;
 
 export { Slider, type SliderProps, Slider as default };

package/dist/components/Slider/Slider.js

@@ -3,46 +3,73 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
 function Slider({
   label,
   showValue = false,
-  format = String,
+  format,
   className,
   onValueChange,
+  "aria-describedby": describedBy,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
   ...props
 }) {
   const names = Array.isArray(label) ? label : [label];
-  const [uncontrolled, setUncontrolled] = useState(props.defaultValue ?? []);
+  warnBlankName("Slider", "label", names[0], "the thumb is announced with no name and its value describes nothing");
+  const [uncontrolled, setUncontrolled] = useState(
+    props.defaultValue ?? [props.min ?? 0]
+  );
   const current = props.value ?? uncontrolled;
   const handleChange = (next) => {
     if (props.value === void 0) setUncontrolled(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
-    showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
-      /* @__PURE__ */ jsx("span", { children: names[0] }),
-      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-(--ink)", children: current.map((value) => format(value)).join(" \u2013 ") })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      SliderPrimitive.Root,
-      {
-        className: "group relative flex w-full touch-none select-none items-center py-3",
-        onValueChange: handleChange,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-(--accent)" }) }),
-          current.map((_, index) => /* @__PURE__ */ jsx(
-            SliderPrimitive.Thumb,
-            {
-              "aria-label": names[index] ?? names[0],
-              className: "relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 disabled:opacity-(--disabled-opacity) motion-reduce:transition-none"
-            },
-            index
-          ))
-        ]
-      }
-    )
-  ] });
+  const print = format ?? String;
+  const heading = names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(" \u2013 ") : names[0];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col gap-3",
+        // On the wrapper, and driven by the prop: the thumb is a <span>, so a
+        // `disabled:` variant compiles to `&:disabled` and matches nothing —
+        // the control was drawn exactly like a live one while refusing to move.
+        // The wrapper is also what dims the readout above the track.
+        props.disabled && "opacity-(--disabled-opacity) pointer-events-none",
+        className
+      ),
+      children: [
+        showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
+          /* @__PURE__ */ jsx("span", { children: heading }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums text-(--ink)", children: current.map((value) => print(value)).join(" \u2013 ") })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Root,
+          {
+            className: "group relative flex w-full touch-none select-none items-center py-3",
+            onValueChange: handleChange,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-(--accent)" }) }),
+              current.map((value, index) => /* @__PURE__ */ jsx(
+                SliderPrimitive.Thumb,
+                {
+                  "aria-label": names[index] ?? names[0],
+                  "aria-describedby": describedBy,
+                  "aria-required": ariaRequired,
+                  "aria-invalid": ariaInvalid,
+                  "aria-valuetext": format ? format(value) : void 0,
+                  className: "relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 motion-reduce:transition-none"
+                },
+                index
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 var Slider_default = Slider;
 export {

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {\n  /**\n   * Names the control. Required: a slider with no name announces only a number,\n   * and a number with no noun is not information.\n   *\n   * A range slider (two thumbs) needs one name per thumb — pass an array.\n   */\n  label: string | [string, string]\n  /** Prints the current value beside the label. */\n  showValue?: boolean\n  /** Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. */\n  format?: (value: number) => string\n}\n\n/**\n * A value chosen along a range.\n *\n * Radix owns the keyboard contract — arrows step, Page keys jump, Home and End\n * reach the ends — and the ARIA that reports the value. What is here is the\n * look, and the labelling, which is the part a slider most often gets wrong: a\n * thumb that announces \"42\" and nothing else leaves a screen reader user with a\n * number and no idea what it measures.\n *\n * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized\n * for the design is well under any pointer-target guideline.\n *\n * @example\n * <Slider label=\"Quality\" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />\n */\nexport function Slider({\n  label,\n  showValue = false,\n  format = String,\n  className,\n  onValueChange,\n  ...props\n}: SliderProps) {\n  const names = Array.isArray(label) ? label : [label]\n\n  // Tracked here, not read off the props. An uncontrolled slider's\n  // `defaultValue` never changes, so the printed figure sat at its starting\n  // number while the thumb moved — the one thing `showValue` exists to avoid.\n  const [uncontrolled, setUncontrolled] = useState<number[]>(props.defaultValue ?? [])\n  const current = props.value ?? uncontrolled\n\n  const handleChange = (next: number[]) => {\n    if (props.value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-3', className)}>\n      {showValue && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{names[0]}</span>\n          <span className=\"tabular-nums text-(--ink)\">\n            {current.map((value) => format(value)).join(' – ')}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        className=\"group relative flex w-full touch-none select-none items-center py-3\"\n        onValueChange={handleChange}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5\">\n          <SliderPrimitive.Range className=\"absolute h-full bg-(--accent)\" />\n        </SliderPrimitive.Track>\n        {current.map((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={names[index] ?? names[0]}\n            // The visible thumb is 16px; the `before` pseudo-element widens the\n            // hit area to 44px without changing what is drawn.\n            // `transition-transform` and not `all`: the thumb's own position is\n            // set by Radix as a `left` percentage, and transitioning that would\n            // make it lag the pointer. Only the grow-on-grab is animated.\n            className=\"relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 disabled:opacity-(--disabled-opacity) motion-reduce:transition-none\"\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Slider\n"],"mappings":";AA2DQ,SACE,KADF;AAzDR,YAAY,qBAAqB;AACjC,SAAS,gBAAqC;AAC9C,SAAS,UAAU;AA+BZ,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAKnD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,MAAM,gBAAgB,CAAC,CAAC;AACnF,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,eAAe,CAAC,SAAmB;AACvC,QAAI,MAAM,UAAU,OAAW,iBAAgB,IAAI;AACnD,oBAAgB,IAAI;AAAA,EACtB;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBACC,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,gBAAM,CAAC,GAAE;AAAA,MAChB,oBAAC,UAAK,WAAU,6BACb,kBAAQ,IAAI,CAAC,UAAU,OAAO,KAAK,CAAC,EAAE,KAAK,UAAK,GACnD;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAU;AAAA,QACV,eAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,kJAC/B,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,iCAAgC,GACnE;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,UACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,MAAM,KAAK,KAAK,MAAM,CAAC;AAAA,cAMnC,WAAU;AAAA;AAAA,YAPL;AAAA,UAQP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {\n  /**\n   * Names the control. Required: a slider with no name announces only a number,\n   * and a number with no noun is not information.\n   *\n   * A range slider (two thumbs) needs one name per thumb — pass an array.\n   */\n  label: string | [string, string]\n  /**\n   * Prints the current value beside the label.\n   *\n   * A two-thumb range prints both names and both values, in the same order —\n   * the heading used to print the first name over a pair of numbers, which read\n   * as \"Minimum\" over \"10 – 90\".\n   */\n  showValue?: boolean\n  /**\n   * Renders the value with a unit or a currency, e.g. `(n) => n + '%'`.\n   *\n   * Reaches assistive tech as well as the readout: it becomes each thumb's\n   * `aria-valuetext`, so a thumb showing \"$1,200\" announces that rather than the\n   * bare number. Left off, the platform announces the value itself.\n   */\n  format?: (value: number) => string\n}\n\n/**\n * A value chosen along a range.\n *\n * Radix owns the keyboard contract — arrows step, Page keys jump, Home and End\n * reach the ends — and the ARIA that reports the value. What is here is the\n * look, and the labelling, which is the part a slider most often gets wrong: a\n * thumb that announces \"42\" and nothing else leaves a screen reader user with a\n * number and no idea what it measures.\n *\n * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized\n * for the design is well under any pointer-target guideline.\n *\n * Inside a `Field`, the hint, the error and the requirement land on the THUMB,\n * which is the element carrying `role=\"slider\"` — on the root they would sit on\n * a `<span>` with no role and announce nothing. The NAME still comes from\n * `label` here: a field's label above a slider points at that same roleless\n * root, so it neither names the control nor clicks through to it.\n *\n * @example\n * <Slider label=\"Quality\" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />\n */\nexport function Slider({\n  label,\n  showValue = false,\n  format,\n  className,\n  onValueChange,\n  'aria-describedby': describedBy,\n  'aria-required': ariaRequired,\n  'aria-invalid': ariaInvalid,\n  ...props\n}: SliderProps) {\n  const names = Array.isArray(label) ? label : [label]\n\n  // The other five guarded naming props are plain strings; this one is a\n  // string or a pair, so the first name is what is checked — a range whose\n  // lower thumb has no name is the same silence as a single one with none.\n  // It catches a blank, not an absent: `label` is required, so a missing one\n  // is a type error everywhere except a caller that has already left the\n  // types behind.\n  warnBlankName('Slider', 'label', names[0], 'the thumb is announced with no name and its value describes nothing')\n\n  // Tracked here, not read off the props. An uncontrolled slider's\n  // `defaultValue` never changes, so the printed figure sat at its starting\n  // number while the thumb moved — the one thing `showValue` exists to avoid.\n  //\n  // The fallback is the primitive's own — one thumb at the minimum. The thumbs\n  // are rendered from THIS array rather than from Radix's, so an empty one is a\n  // track with nothing on it to drag, which is what `<Slider label=\"Volume\" />`\n  // used to render.\n  const [uncontrolled, setUncontrolled] = useState<number[]>(\n    props.defaultValue ?? [props.min ?? 0],\n  )\n  const current = props.value ?? uncontrolled\n\n  const handleChange = (next: number[]) => {\n    if (props.value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  const print = format ?? String\n  // One name per thumb, in the thumbs' own order, so the heading lines up with\n  // the numbers under it. A single name stays a single name however many thumbs\n  // there are — a price filter called \"Price\" is not \"Price – Price\".\n  const heading =\n    names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(' – ') : names[0]\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3',\n        // On the wrapper, and driven by the prop: the thumb is a <span>, so a\n        // `disabled:` variant compiles to `&:disabled` and matches nothing —\n        // the control was drawn exactly like a live one while refusing to move.\n        // The wrapper is also what dims the readout above the track.\n        props.disabled && 'opacity-(--disabled-opacity) pointer-events-none',\n        className,\n      )}\n    >\n      {showValue && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{heading}</span>\n          <span className=\"tabular-nums text-(--ink)\">\n            {current.map((value) => print(value)).join(' – ')}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        className=\"group relative flex w-full touch-none select-none items-center py-3\"\n        onValueChange={handleChange}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5\">\n          <SliderPrimitive.Range className=\"absolute h-full bg-(--accent)\" />\n        </SliderPrimitive.Track>\n        {current.map((value, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={names[index] ?? names[0]}\n            // The thumb is what carries role=\"slider\", so this is where a\n            // Field's description and requirement have to land — on the root\n            // they sit on a <span> with no role, which announces nothing.\n            aria-describedby={describedBy}\n            aria-required={ariaRequired}\n            aria-invalid={ariaInvalid}\n            // Only when a format was given: setting it otherwise would replace\n            // the platform's own reading of the value with the same digits.\n            aria-valuetext={format ? format(value) : undefined}\n            // The visible thumb is 16px; the `before` pseudo-element widens the\n            // hit area to 44px without changing what is drawn.\n            // `transition-transform` and not `all`: the thumb's own position is\n            // set by Radix as a `left` percentage, and transitioning that would\n            // make it lag the pointer. Only the grow-on-grab is animated.\n            className=\"relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 motion-reduce:transition-none\"\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Slider\n"],"mappings":";AAiHQ,SACE,KADF;AA/GR,YAAY,qBAAqB;AACjC,SAAS,gBAAqC;AAC9C,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAiDvB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAgB;AACd,QAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAQnD,gBAAc,UAAU,SAAS,MAAM,CAAC,GAAG,qEAAqE;AAUhH,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,MAAM,gBAAgB,CAAC,MAAM,OAAO,CAAC;AAAA,EACvC;AACA,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,eAAe,CAAC,SAAmB;AACvC,QAAI,MAAM,UAAU,OAAW,iBAAgB,IAAI;AACnD,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,QAAQ,UAAU;AAIxB,QAAM,UACJ,MAAM,SAAS,IAAI,QAAQ,IAAI,CAAC,GAAG,UAAU,MAAM,KAAK,KAAK,MAAM,CAAC,CAAC,EAAE,KAAK,UAAK,IAAI,MAAM,CAAC;AAE9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,MAAM,YAAY;AAAA,QAClB;AAAA,MACF;AAAA,MAEC;AAAA,qBACC,qBAAC,SAAI,WAAU,mEACb;AAAA,8BAAC,UAAM,mBAAQ;AAAA,UACf,oBAAC,UAAK,WAAU,6BACb,kBAAQ,IAAI,CAAC,UAAU,MAAM,KAAK,CAAC,EAAE,KAAK,UAAK,GAClD;AAAA,WACF;AAAA,QAEF;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAU;AAAA,YACV,eAAe;AAAA,YACd,GAAG;AAAA,YAEJ;AAAA,kCAAC,gBAAgB,OAAhB,EAAsB,WAAU,kJAC/B,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,iCAAgC,GACnE;AAAA,cACC,QAAQ,IAAI,CAAC,OAAO,UACnB;AAAA,gBAAC,gBAAgB;AAAA,gBAAhB;AAAA,kBAEC,cAAY,MAAM,KAAK,KAAK,MAAM,CAAC;AAAA,kBAInC,oBAAkB;AAAA,kBAClB,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBAGd,kBAAgB,SAAS,OAAO,KAAK,IAAI;AAAA,kBAMzC,WAAU;AAAA;AAAA,gBAhBL;AAAA,cAiBP,CACD;AAAA;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/Spinner/Spinner.d.ts

@@ -11,6 +11,8 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
      * ink ground an ink ring is invisible.
      */
     tone?: 'default' | 'current';
+    /** Merged onto the RING, after `size` and `tone`, so it overrides both. */
+    className?: string;
     /**
      * Announced to assistive tech. Pass the specific thing being waited on
      * ("Loading projects"), not the generic word — a screen reader user hearing
@@ -39,6 +41,12 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
  * page is broken, prefer `Skeleton` — a shape that describes what is coming
  * beats a dot that describes nothing.
  *
+ * `className` reaches the RING, alongside `size` and `tone`, and overrides
+ * them: every utility a caller has for a spinner is about the ring, and merged
+ * onto the wrapper instead `className="size-8"` grew an invisible box around an
+ * unchanged 18px circle. Layout still works from there — the wrapper is
+ * `inline-flex` and takes the ring's margin box as its own.
+ *
  * @example
  * <Spinner size="lg" label="Loading projects" />
  * @example

package/dist/components/Spinner/Spinner.js

@@ -21,7 +21,7 @@ function Spinner({
     {
       role: label === null ? void 0 : "status",
       "aria-hidden": label === null ? true : void 0,
-      className: cn("inline-flex shrink-0 items-center justify-center", className),
+      className: "inline-flex shrink-0 items-center justify-center",
       ...rest,
       children: [
         /* @__PURE__ */ jsx(
@@ -31,7 +31,8 @@ function Spinner({
             className: cn(
               "inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]",
               SIZE[size],
-              TONE[tone]
+              TONE[tone],
+              className
             )
           }
         ),

package/dist/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 14px / 18px / 26px. Match the size of the type it sits beside. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * `default` draws the ring against the page — a hairline track in the rule\n   * colour with the leading quarter in ink. `current` draws it in the inherited\n   * text colour, which is what a spinner inside a filled button needs: on an\n   * ink ground an ink ring is invisible.\n   */\n  tone?: 'default' | 'current'\n  /**\n   * Announced to assistive tech. Pass the specific thing being waited on\n   * (\"Loading projects\"), not the generic word — a screen reader user hearing\n   * \"Loading\" three times cannot tell which three things.\n   *\n   * Pass `null` for a spinner that sits inside a control which already names\n   * the operation (a button whose own label changes to \"Saving…\"), so the two\n   * are not read out twice.\n   */\n  label?: string | null\n}\n\nconst SIZE = {\n  sm: 'size-3.5 border-[1.5px]',\n  md: 'size-[18px] border-2',\n  lg: 'size-6.5 border-2',\n} as const\n\nconst TONE = {\n  default: 'border-(--rule-2) border-t-(--ink)',\n  current: 'border-current/25 border-t-current',\n} as const\n\n/**\n * The system's one \"working\" indicator.\n *\n * A ring, not a blurred glow and not a shimmer: the White Reset has no light\n * source, so depth and softness are not available to it. The leading quarter is\n * the only thing that distinguishes the ring from a plain circle, which is why\n * the track stays a hairline — a spinner is a hint that time is passing, not a\n * feature of the page.\n *\n * It spins under `motion-safe` only. A reader who has asked for less motion\n * gets a static ring, which still reads as \"not finished\" because the leading\n * quarter is darker than the track.\n *\n * For a wait long enough that the reader would otherwise wonder whether the\n * page is broken, prefer `Skeleton` — a shape that describes what is coming\n * beats a dot that describes nothing.\n *\n * @example\n * <Spinner size=\"lg\" label=\"Loading projects\" />\n * @example\n * // Inside a filled button, where the ground is ink:\n * <Spinner size=\"sm\" tone=\"current\" label={null} />\n */\nexport function Spinner({\n  size = 'md',\n  tone = 'default',\n  className,\n  label = 'Loading',\n  ...rest\n}: SpinnerProps) {\n  return (\n    <span\n      role={label === null ? undefined : 'status'}\n      aria-hidden={label === null ? true : undefined}\n      className={cn('inline-flex shrink-0 items-center justify-center', className)}\n      {...rest}\n    >\n      <span\n        data-m22-animated\n        className={cn(\n          'inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]',\n          SIZE[size],\n          TONE[tone],\n        )}\n      />\n      {label !== null && <span className=\"sr-only\">{label}</span>}\n    </span>\n  )\n}\n\nexport default Spinner\n"],"mappings":"AAmEI,SAME,KANF;AAlEJ,SAAS,UAAU;AAwBnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AAyBO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,OAAO,SAAY;AAAA,MACnC,eAAa,UAAU,OAAO,OAAO;AAAA,MACrC,WAAW,GAAG,oDAAoD,SAAS;AAAA,MAC1E,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YACjB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF;AAAA,QACC,UAAU,QAAQ,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,EACtD;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 14px / 18px / 26px. Match the size of the type it sits beside. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * `default` draws the ring against the page — a hairline track in the rule\n   * colour with the leading quarter in ink. `current` draws it in the inherited\n   * text colour, which is what a spinner inside a filled button needs: on an\n   * ink ground an ink ring is invisible.\n   */\n  tone?: 'default' | 'current'\n  /** Merged onto the RING, after `size` and `tone`, so it overrides both. */\n  className?: string\n  /**\n   * Announced to assistive tech. Pass the specific thing being waited on\n   * (\"Loading projects\"), not the generic word — a screen reader user hearing\n   * \"Loading\" three times cannot tell which three things.\n   *\n   * Pass `null` for a spinner that sits inside a control which already names\n   * the operation (a button whose own label changes to \"Saving…\"), so the two\n   * are not read out twice.\n   */\n  label?: string | null\n}\n\nconst SIZE = {\n  sm: 'size-3.5 border-[1.5px]',\n  md: 'size-[18px] border-2',\n  lg: 'size-6.5 border-2',\n} as const\n\nconst TONE = {\n  default: 'border-(--rule-2) border-t-(--ink)',\n  current: 'border-current/25 border-t-current',\n} as const\n\n/**\n * The system's one \"working\" indicator.\n *\n * A ring, not a blurred glow and not a shimmer: the White Reset has no light\n * source, so depth and softness are not available to it. The leading quarter is\n * the only thing that distinguishes the ring from a plain circle, which is why\n * the track stays a hairline — a spinner is a hint that time is passing, not a\n * feature of the page.\n *\n * It spins under `motion-safe` only. A reader who has asked for less motion\n * gets a static ring, which still reads as \"not finished\" because the leading\n * quarter is darker than the track.\n *\n * For a wait long enough that the reader would otherwise wonder whether the\n * page is broken, prefer `Skeleton` — a shape that describes what is coming\n * beats a dot that describes nothing.\n *\n * `className` reaches the RING, alongside `size` and `tone`, and overrides\n * them: every utility a caller has for a spinner is about the ring, and merged\n * onto the wrapper instead `className=\"size-8\"` grew an invisible box around an\n * unchanged 18px circle. Layout still works from there — the wrapper is\n * `inline-flex` and takes the ring's margin box as its own.\n *\n * @example\n * <Spinner size=\"lg\" label=\"Loading projects\" />\n * @example\n * // Inside a filled button, where the ground is ink:\n * <Spinner size=\"sm\" tone=\"current\" label={null} />\n */\nexport function Spinner({\n  size = 'md',\n  tone = 'default',\n  className,\n  label = 'Loading',\n  ...rest\n}: SpinnerProps) {\n  return (\n    <span\n      role={label === null ? undefined : 'status'}\n      aria-hidden={label === null ? true : undefined}\n      className=\"inline-flex shrink-0 items-center justify-center\"\n      {...rest}\n    >\n      <span\n        data-m22-animated\n        className={cn(\n          'inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]',\n          SIZE[size],\n          TONE[tone],\n          className,\n        )}\n      />\n      {label !== null && <span className=\"sr-only\">{label}</span>}\n    </span>\n  )\n}\n\nexport default Spinner\n"],"mappings":"AA2EI,SAME,KANF;AA1EJ,SAAS,UAAU;AA0BnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AA+BO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,OAAO,SAAY;AAAA,MACnC,eAAa,UAAU,OAAO,OAAO;AAAA,MACrC,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YACjB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,cACT;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,UAAU,QAAQ,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,EACtD;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/StatusPill/StatusPill.d.ts

@@ -15,6 +15,11 @@ interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
  * how the same "available for work" chip ended up with three different dot
  * sizes and two different pulse timings on one site.
  *
+ * A warning or danger tone is doubled by a visually-hidden severity word, so
+ * the tone survives the dot being hidden. It does not survive monochrome: the
+ * pill's own text is `--ink-2` at every tone, and the state itself still
+ * belongs in the words the call site writes.
+ *
  * @example
  * <StatusPill>Available for work</StatusPill>
  * @example

package/dist/components/StatusPill/StatusPill.js

@@ -1,6 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 import { StatusDot } from "../StatusDot/StatusDot.js";
+const SEVERITY = {
+  warning: "Warning",
+  danger: "Error"
+};
 function StatusPill({
   children,
   tone = "success",
@@ -8,6 +12,7 @@ function StatusPill({
   className,
   ...rest
 }) {
+  const severity = SEVERITY[tone];
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -18,6 +23,7 @@ function StatusPill({
       ...rest,
       children: [
         /* @__PURE__ */ jsx(StatusDot, { tone, pulse }),
+        severity && /* @__PURE__ */ jsx("span", { className: "sr-only", children: severity }),
         children
       ]
     }

package/dist/components/StatusPill/StatusPill.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { StatusDot, type StatusTone } from '../StatusDot/StatusDot'\n\nexport interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  tone?: StatusTone\n  /** Pulsing live dot (default) vs a settled one. */\n  pulse?: boolean\n}\n\n/**\n * A live state, named: a dot plus an uppercase mono label in an outlined pill.\n *\n * One component rather than a dot and a pill assembled per call site, which is\n * how the same \"available for work\" chip ended up with three different dot\n * sizes and two different pulse timings on one site.\n *\n * @example\n * <StatusPill>Available for work</StatusPill>\n * @example\n * <StatusPill tone=\"warning\" pulse={false}>Degraded</StatusPill>\n */\nexport function StatusPill({\n  children,\n  tone = 'success',\n  pulse = true,\n  className,\n  ...rest\n}: StatusPillProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-2.5 rounded-(--radius-pill) border border-(--rule-2) bg-(--paper) py-1.5 ps-2.5 pe-3 eyebrow tracking-[0.12em] text-(--ink-2)',\n        className,\n      )}\n      {...rest}\n    >\n      <StatusDot tone={tone} pulse={pulse} />\n      {children}\n    </span>\n  )\n}\n\nexport default StatusPill\n"],"mappings":"AA+BI,SAOE,KAPF;AA9BJ,SAAS,UAAU;AACnB,SAAS,iBAAkC;AAqBpC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,aAAU,MAAY,OAAc;AAAA,QACpC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { StatusDot, type StatusTone } from '../StatusDot/StatusDot'\n\nexport interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  tone?: StatusTone\n  /** Pulsing live dot (default) vs a settled one. */\n  pulse?: boolean\n}\n\n/**\n * The two tones a reader must not miss, in the words the dot cannot say.\n *\n * `tone` reaches only the StatusDot, and the dot is `aria-hidden` by law — so\n * before this, \"Degraded\" in a warning pill and \"Degraded\" in a neutral one\n * were the same sentence to anyone who could not see the colour.\n *\n * `success` and `neutral` add nothing on purpose. They are the absence of\n * alarm, which is what a reader assumes; announcing it before every settled\n * pill is noise charged to the two tones that are worth interrupting for.\n */\nconst SEVERITY: Partial<Record<StatusTone, string>> = {\n  warning: 'Warning',\n  danger: 'Error',\n}\n\n/**\n * A live state, named: a dot plus an uppercase mono label in an outlined pill.\n *\n * One component rather than a dot and a pill assembled per call site, which is\n * how the same \"available for work\" chip ended up with three different dot\n * sizes and two different pulse timings on one site.\n *\n * A warning or danger tone is doubled by a visually-hidden severity word, so\n * the tone survives the dot being hidden. It does not survive monochrome: the\n * pill's own text is `--ink-2` at every tone, and the state itself still\n * belongs in the words the call site writes.\n *\n * @example\n * <StatusPill>Available for work</StatusPill>\n * @example\n * <StatusPill tone=\"warning\" pulse={false}>Degraded</StatusPill>\n */\nexport function StatusPill({\n  children,\n  tone = 'success',\n  pulse = true,\n  className,\n  ...rest\n}: StatusPillProps) {\n  const severity = SEVERITY[tone]\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-2.5 rounded-(--radius-pill) border border-(--rule-2) bg-(--paper) py-1.5 ps-2.5 pe-3 eyebrow tracking-[0.12em] text-(--ink-2)',\n        className,\n      )}\n      {...rest}\n    >\n      <StatusDot tone={tone} pulse={pulse} />\n      {/* Absolutely positioned by `sr-only`, so it is out of flow and costs the\n          pill neither a gap nor a pixel. */}\n      {severity && <span className=\"sr-only\">{severity}</span>}\n      {children}\n    </span>\n  )\n}\n\nexport default StatusPill\n"],"mappings":"AAsDI,SAOE,KAPF;AArDJ,SAAS,UAAU;AACnB,SAAS,iBAAkC;AAoB3C,MAAM,WAAgD;AAAA,EACpD,SAAS;AAAA,EACT,QAAQ;AACV;AAmBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,WAAW,SAAS,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,aAAU,MAAY,OAAc;AAAA,QAGpC,YAAY,oBAAC,UAAK,WAAU,WAAW,oBAAS;AAAA,QAChD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}