sherick-ui 2.9.0 → 2.10.1

package/dist/esm/components/Switch.js

@@ -1,13 +1,32 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { cn } from '../libs/utils.js';
 import { elevation, shape, stateLayer, tone, text, groupFocusRing, state } from './ui.common.js';
 import { motionRelocate, motionFeedback } from './ui.motion.js';
+import { useControlNameWarning } from './Field.js';
 
 const Switch = forwardRef(({ checked, defaultChecked, onCheckedChange, variant = "primary", className, disabled, name, form, value, uncheckedValue, readOnly, required, inputRef, ...buttonProps }, ref) => {
-    return (jsx(Switch$1.Root, { nativeButton: true, render: jsx("button", { ...buttonProps, ref: ref, type: "button" }), checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, form: form, value: value, uncheckedValue: uncheckedValue, readOnly: readOnly, required: required, inputRef: inputRef, onCheckedChange: onCheckedChange, className: cn("group inline-flex min-h-12 min-w-14 items-center justify-center outline-none", shape.pill, state.enabled, state.effectiveDisabled, className), children: jsx("span", { "aria-hidden": "true", className: cn("relative block h-8 w-[3.25rem] shrink-0", shape.pill, elevation.recessed, motionFeedback, groupFocusRing, tone.strong.secondary, text.medium, tone.strongChecked[variant], stateLayer.track), children: jsx(Switch$1.Thumb, { className: cn("absolute start-1 top-1/2 h-5 w-5 -translate-y-1/2 bg-current", "group-data-[checked]:h-6 group-data-[checked]:w-6 group-data-[checked]:translate-x-5 rtl:group-data-[checked]:-translate-x-5", shape.circle, elevation.control, motionRelocate) }) }) }));
+    /* The visible button is both the forwarded ref and the element the name check reads. */
+    const buttonRef = useRef(null);
+    const setButtonRef = (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    };
+    useControlNameWarning(buttonRef, "Switch", Boolean(buttonProps["aria-label"] || buttonProps["aria-labelledby"]));
+    return (jsx(Switch$1.Root, { nativeButton: true, render: jsx("button", { ...buttonProps, ref: setButtonRef, type: "button" }), checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, form: form, value: value, uncheckedValue: uncheckedValue, readOnly: readOnly, required: required, inputRef: inputRef, onCheckedChange: onCheckedChange, className: cn("group inline-flex min-h-12 min-w-14 items-center justify-center [outline-style:none]", shape.pill, state.enabled, state.effectiveDisabled, className), children: jsx("span", { "aria-hidden": "true", className: cn("relative block h-8 w-[3.25rem] shrink-0", shape.pill, elevation.recessed, motionFeedback, groupFocusRing, tone.strong.secondary, text.medium, tone.strongChecked[variant], stateLayer.track, 
+            /* Forced colors removes the track's fill and its shadow, so the track keeps its boundary as a
+               border the browser repaints. In normal colors the track still has no rim: its thumb and its
+               range identify it. */
+            "forced-colors:border"), children: jsx(Switch$1.Thumb, { className: cn("absolute start-1 top-1/2 h-5 w-5 -translate-y-1/2 bg-current", "group-data-[checked]:h-6 group-data-[checked]:w-6 group-data-[checked]:translate-x-5 rtl:group-data-[checked]:-translate-x-5", shape.circle, elevation.control, motionRelocate, 
+                /* The thumb's fill is a background, and forced colors removes every background unless the part
+                   opts out of colour adjustment, so the thumb opts out and paints a system colour in both
+                   states. Its position still says on or off. */
+                "forced-color-adjust-none forced-colors:[background-color:Highlight]") }) }) }));
 });
 Switch.displayName = "Switch";
 

package/dist/esm/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport React, {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  elevation,\n  groupFocusRing,\n  shape,\n  state,\n  stateLayer,\n  text,\n  tone,\n} from \"./ui.common\";\nimport { motionFeedback, motionRelocate } from \"./ui.motion\";\nimport { Variant } from \"./ui.types\";\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  /** Base's checked-change callback, event details included. */\n  onCheckedChange?: BaseSwitch.Root.Props[\"onCheckedChange\"];\n  variant?: Variant;\n  value?: string;\n  uncheckedValue?: string;\n  readOnly?: boolean;\n  required?: boolean;\n  inputRef?: Ref<HTMLInputElement>;\n}\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"primary\",\n  className,\n  disabled,\n  name,\n  form,\n  value,\n  uncheckedValue,\n  readOnly,\n  required,\n  inputRef,\n  ...buttonProps\n}, ref) => {\n  return (\n    <BaseSwitch.Root\n      nativeButton\n      render={<button {...buttonProps} ref={ref} type=\"button\" />}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      name={name}\n      form={form}\n      value={value}\n      uncheckedValue={uncheckedValue}\n      readOnly={readOnly}\n      required={required}\n      inputRef={inputRef}\n      onCheckedChange={onCheckedChange}\n      className={cn(\n        \"group inline-flex min-h-12 min-w-14 items-center justify-center outline-none\",\n        shape.pill,\n        state.enabled,\n        state.effectiveDisabled,\n        className\n      )}\n    >\n      {/* Every state of the track and the thumb is keyed on the primitive's own selection\n          marker rather than on the `checked` prop, so an uncontrolled switch is styled from\n          the same source of truth as a controlled one — and its thumb actually travels. */}\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"relative block h-8 w-[3.25rem] shrink-0\",\n          shape.pill,\n          elevation.recessed,\n          motionFeedback,\n          groupFocusRing,\n          tone.strong.secondary,\n          text.medium,\n          tone.strongChecked[variant],\n          stateLayer.track\n        )}\n      >\n        <BaseSwitch.Thumb\n          className={cn(\n            \"absolute start-1 top-1/2 h-5 w-5 -translate-y-1/2 bg-current\",\n            \"group-data-[checked]:h-6 group-data-[checked]:w-6 group-data-[checked]:translate-x-5 rtl:group-data-[checked]:-translate-x-5\",\n            shape.circle,\n            elevation.control,\n            motionRelocate\n          )}\n        />\n      </span>\n    </BaseSwitch.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["_jsx","BaseSwitch"],"mappings":";;;;;;;;AAmCO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,MAAM,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAiC,CAAC,EAChE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CACP,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CACd,eAAe,CAAA,CACf,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,GAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CACnB,SAAS,CAAA,CACT,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CACR,CAAA,CAAA,CAAA,CAAI,EACJ,CAAA,CAAA,CAAA,CAAI,CAAA,CACJ,KAAK,CAAA,CACL,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,EACd,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CACR,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CACR,QAAQ,CAAA,CACR,CAAA,CAAA,CAAG,WAAW,CAAA,CACf,CAAA,CAAE,GAAG,CAAA,CAAA,CAAA,CAAA,CAAI;AACR,CAAA,CAAA,CAAA,CAAA,QACEA,CAAAA,CAAAA,CAAA,CAACC,QAAU,CAAC,CAAA,CAAA,CAAA,CAAI,IACd,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAY,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACZ,MAAM,CAAA,CAAED,CAAAA,CAAAA,iBAAY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA,CAAE,CAAA,CAAA,CAAG,EAAE,CAAA,CAAA,CAAG,CAAA,CAAE,IAAI,CAAA,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,GAAG,CAAA,CAC3D,OAAO,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,EAChB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAE,cAAc,CAAA,CAC9B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAClB,CAAA,CAAA,CAAA,CAAI,CAAA,CAAE,IAAI,CAAA,CACV,CAAA,CAAA,CAAA,CAAI,EAAE,CAAA,CAAA,CAAA,CAAI,CAAA,CACV,KAAK,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAK,EACZ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAE,cAAc,CAAA,CAC9B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAClB,QAAQ,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAClB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,CAAA,CAClB,eAAe,CAAA,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAe,EAChC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,EAAE,CACX,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA8E,EAC9E,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,IAAI,CAAA,CACV,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CACb,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,iBAAiB,CAAA,CACvB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CACV,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAKDA,CAAAA,CAAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,aAAA,CAAA,CACc,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,EAClB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,EAAE,CACX,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAyC,CAAA,CACzC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA,CAAA,CAAA,CAAI,CAAA,CACV,SAAS,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ,EAClB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CACd,cAAc,CAAA,CACd,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,SAAS,CAAA,CACrB,CAAA,CAAA,CAAA,CAAI,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAA,CACX,CAAA,CAAA,CAAA,CAAI,CAAC,aAAa,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAC,CAAA,CAC3B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAU,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CACjB,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAEDA,IAACC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAU,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAA,CAAA,EACf,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAA,CAAE,CAAA,CAAE,CACX,8DAA8D,CAAA,CAC9D,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAA8H,EAC9H,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,MAAM,CAAA,CACZ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAO,CAAA,CACjB,cAAc,CACf,CAAA,EACD,CAAA,CAAA,CACG,EAAA,CACS,CAAA;AAEtB,CAAC,CAAA;AAED,CAAA,CAAA,CAAA,CAAA,CAAA,CAAM,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,CAAA,CAAA,CAAG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAQ;;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport React, {\n  forwardRef,\n  useRef,\n  type ButtonHTMLAttributes,\n  type Ref,\n} from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  elevation,\n  groupFocusRing,\n  shape,\n  state,\n  stateLayer,\n  text,\n  tone,\n} from \"./ui.common\";\nimport { motionFeedback, motionRelocate } from \"./ui.motion\";\nimport { useControlNameWarning } from \"./Field\";\nimport { Variant } from \"./ui.types\";\n\nexport interface SwitchProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"value\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  /** Base's checked-change callback, event details included. */\n  onCheckedChange?: BaseSwitch.Root.Props[\"onCheckedChange\"];\n  variant?: Variant;\n  value?: string;\n  uncheckedValue?: string;\n  readOnly?: boolean;\n  required?: boolean;\n  inputRef?: Ref<HTMLInputElement>;\n}\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  variant = \"primary\",\n  className,\n  disabled,\n  name,\n  form,\n  value,\n  uncheckedValue,\n  readOnly,\n  required,\n  inputRef,\n  ...buttonProps\n}, ref) => {\n  /* The visible button is both the forwarded ref and the element the name check reads. */\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const setButtonRef = (node: HTMLButtonElement | null) => {\n    buttonRef.current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  };\n  useControlNameWarning(buttonRef, \"Switch\", Boolean(buttonProps[\"aria-label\"] || buttonProps[\"aria-labelledby\"]));\n\n  return (\n    <BaseSwitch.Root\n      nativeButton\n      render={<button {...buttonProps} ref={setButtonRef} type=\"button\" />}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      name={name}\n      form={form}\n      value={value}\n      uncheckedValue={uncheckedValue}\n      readOnly={readOnly}\n      required={required}\n      inputRef={inputRef}\n      onCheckedChange={onCheckedChange}\n      className={cn(\n        \"group inline-flex min-h-12 min-w-14 items-center justify-center [outline-style:none]\",\n        shape.pill,\n        state.enabled,\n        state.effectiveDisabled,\n        className\n      )}\n    >\n      {/* Every state of the track and the thumb is keyed on the primitive's own selection\n          marker rather than on the `checked` prop, so an uncontrolled switch is styled from\n          the same source of truth as a controlled one — and its thumb actually travels. */}\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"relative block h-8 w-[3.25rem] shrink-0\",\n          shape.pill,\n          elevation.recessed,\n          motionFeedback,\n          groupFocusRing,\n          tone.strong.secondary,\n          text.medium,\n          tone.strongChecked[variant],\n          stateLayer.track,\n          /* Forced colors removes the track's fill and its shadow, so the track keeps its boundary as a\n             border the browser repaints. In normal colors the track still has no rim: its thumb and its\n             range identify it. */\n          \"forced-colors:border\"\n        )}\n      >\n        <BaseSwitch.Thumb\n          className={cn(\n            \"absolute start-1 top-1/2 h-5 w-5 -translate-y-1/2 bg-current\",\n            \"group-data-[checked]:h-6 group-data-[checked]:w-6 group-data-[checked]:translate-x-5 rtl:group-data-[checked]:-translate-x-5\",\n            shape.circle,\n            elevation.control,\n            motionRelocate,\n            /* The thumb's fill is a background, and forced colors removes every background unless the part\n               opts out of colour adjustment, so the thumb opts out and paints a system colour in both\n               states. Its position still says on or off. */\n            \"forced-color-adjust-none forced-colors:[background-color:Highlight]\"\n          )}\n        />\n      </span>\n    </BaseSwitch.Root>\n  );\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["_jsx","BaseSwitch"],"mappings":"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"}

package/dist/esm/components/Table.js

@@ -1,22 +1,30 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { cn } from '../libs/utils.js';
-import { text, type, edge, state, focusRing, material, shape } from './ui.common.js';
+import ScrollRegion from './scroll-region.js';
+import { text, type, edge, state, material, shape } from './ui.common.js';
 import { motionFeedback } from './ui.motion.js';
 
 /* A table is a quiet, dense data region: the lightest matte fill, tighter geometry than
    a card, and hairlines between rows. Row feedback is tonality only — the rows are
    scannable, not manipulated. */
-const Table = ({ headers, rows, className, tableClassName, }) => {
+const Table = forwardRef(({ headers, rows, caption, emptyMessage, getRowKey, className, tableClassName, "aria-label": ariaLabel, ...props }, ref) => {
+    var _a;
     const columns = headers.map((header, index) => typeof header === "string"
         ? { key: `string:${index}`, label: header }
         : { ...header, key: `column:${header.id}` });
+    const captionText = typeof caption === "string" ? caption : undefined;
     return (
-    // Passive cells still need a keyboard-reachable surface when the table overflows.
-    jsx("div", { tabIndex: 0, className: cn("w-full overflow-auto", shape.control, material.matteQuiet, focusRing, className), children: jsxs("table", { className: cn("w-full border-collapse", tableClassName), children: [jsx("thead", { children: jsx("tr", { className: cn(edge.header), children: columns.map((column) => (jsx("th", { className: cn("px-4 py-3 text-start", type.label, text.medium, column.className), children: column.label }, column.key))) }) }), jsx("tbody", { children: rows.map((row, i) => (jsx("tr", { className: cn(edge.row, motionFeedback, state.rowHover), children: row.map((cell, j) => {
-                            var _a, _b, _c;
-                            return (jsx("td", { className: cn("px-4 py-3 text-sm", type.numeric, text.high, (_a = columns[j]) === null || _a === void 0 ? void 0 : _a.className), children: cell }, (_c = (_b = columns[j]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : `extra:${j}`));
-                        }) }, i))) })] }) }));
-};
+    /* The region is named by the caller's label, then by a string caption, then by the table itself. A
+       scrolling box with no name is not something a screen reader can find. */
+    jsx(ScrollRegion, { ...props, ref: ref, label: (_a = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : captionText) !== null && _a !== void 0 ? _a : "Table", className: cn("w-full", shape.control, material.matteQuiet, className), children: jsxs("table", { className: cn("w-full border-collapse", tableClassName), children: [caption !== undefined && (jsx("caption", { className: cn("px-4 py-3 text-start", type.label, text.medium), children: caption })), jsx("thead", { children: jsx("tr", { className: cn(edge.header), children: columns.map((column) => (jsx("th", { scope: "col", className: cn("px-4 py-3 text-start", type.label, text.medium, column.className), children: column.label }, column.key))) }) }), jsx("tbody", { children: rows.length === 0 && emptyMessage !== undefined ? (jsx("tr", { children: jsx("td", { colSpan: columns.length, className: cn("px-4 py-6 text-start", type.body, text.medium), children: emptyMessage }) })) : (rows.map((row, i) => (jsx("tr", { className: cn(edge.row, motionFeedback, state.rowHover), children: row.map((cell, j) => {
+                            var _a;
+                            const column = columns[j];
+                            const cellClass = cn("px-4 py-3", type.numeric, text.high, column === null || column === void 0 ? void 0 : column.className);
+                            return (column === null || column === void 0 ? void 0 : column.rowHeader) ? (jsx("th", { scope: "row", className: cn(cellClass, "text-start font-medium"), children: cell }, column.key)) : (jsx("td", { className: cn(cellClass), children: cell }, (_a = column === null || column === void 0 ? void 0 : column.key) !== null && _a !== void 0 ? _a : `extra:${j}`));
+                        }) }, getRowKey ? getRowKey(row, i) : i)))) })] }) }));
+});
+Table.displayName = "Table";
 
 export { Table };
 //# sourceMappingURL=Table.js.map

package/dist/esm/components/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/Table.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport { edge, focusRing, material, shape, state, text, type } from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\n\nexport interface TableProps {\n  headers: Array<string | TableColumn>;\n  rows: ReactNode[][];\n  /** Classes for the outer scrollable surface. */\n  className?: string;\n  /** Classes for the native table element. */\n  tableClassName?: string;\n}\n\nexport interface TableColumn {\n  /** Stable identity for this column, shared by its header and body cells. */\n  id: string;\n  label: string;\n  /** Classes applied to this column's header and body cells. */\n  className?: string;\n}\n\n/* A table is a quiet, dense data region: the lightest matte fill, tighter geometry than\n   a card, and hairlines between rows. Row feedback is tonality only — the rows are\n   scannable, not manipulated. */\nexport const Table = ({\n  headers,\n  rows,\n  className,\n  tableClassName,\n}: TableProps) => {\n  const columns = headers.map((header, index): { key: string; label: string; className?: string } =>\n    typeof header === \"string\"\n      ? { key: `string:${index}`, label: header }\n      : { ...header, key: `column:${header.id}` }\n  );\n\n  return (\n    // Passive cells still need a keyboard-reachable surface when the table overflows.\n    <div tabIndex={0} className={cn(\"w-full overflow-auto\", shape.control, material.matteQuiet, focusRing, className)}>\n      <table className={cn(\"w-full border-collapse\", tableClassName)}>\n        <thead>\n          <tr className={cn(edge.header)}>\n            {columns.map((column) => (\n              <th\n                key={column.key}\n                className={cn(\"px-4 py-3 text-start\", type.label, text.medium, column.className)}\n              >\n                {column.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, i) => (\n            <tr key={i} className={cn(edge.row, motionFeedback, state.rowHover)}>\n              {row.map((cell, j) => (\n                <td key={columns[j]?.key ?? `extra:${j}`} className={cn(\"px-4 py-3 text-sm\", type.numeric, text.high, columns[j]?.className)}>\n                  {cell}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AAsBA;;AAEiC;AAC1B,MAAM,KAAK,GAAG,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,GACH,KAAI;AACf,IAAA,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KACxC,OAAO,MAAM,KAAK;UACd,EAAE,GAAG,EAAE,CAAA,OAAA,EAAU,KAAK,CAAA,CAAE,EAAE,KAAK,EAAE,MAAM;AACzC,UAAE,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,CAAA,OAAA,EAAU,MAAM,CAAC,EAAE,CAAA,CAAE,EAAE,CAC9C;IAED;;AAEE,IAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,CAAC,EAAA,QAAA,EAC/GC,IAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,cAAc,CAAC,EAAA,QAAA,EAAA,CAC5DD,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EACEA,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAA,QAAA,EAC3B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,GAAA,CAAA,IAAA,EAAA,EAEE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA,QAAA,EAE/E,MAAM,CAAC,KAAK,EAAA,EAHR,MAAM,CAAC,GAAG,CAIZ,CACN,CAAC,EAAA,CACC,EAAA,CACC,EACRA,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,MACfA,GAAA,CAAA,IAAA,EAAA,EAAY,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAA,QAAA,EAChE,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;AAAC,4BAAA,QACpBA,GAAA,CAAA,IAAA,EAAA,EAA0C,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,CAAC,EAAA,QAAA,EACzH,IAAI,EAAA,EADE,CAAA,EAAA,GAAA,MAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,GAAG,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAA,MAAA,EAAS,CAAC,CAAA,CAAE,CAEnC;yBACN,CAAC,EAAA,EALK,CAAC,CAML,CACN,CAAC,EAAA,CACI,CAAA,EAAA,CACF,EAAA,CACJ;AAEV;;"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table.tsx"],"sourcesContent":["import React, { forwardRef, type ComponentPropsWithoutRef, type Key, type ReactNode } from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport ScrollRegion from \"./scroll-region\";\nimport { edge, material, shape, state, text, type } from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\n\nexport interface TableColumn {\n  /** Stable identity for this column, shared by its header and body cells. */\n  id: string;\n  label: string;\n  /** Classes applied to this column's header and body cells. */\n  className?: string;\n  /**\n   * The column names each row, so its body cells are row headers (`th scope=\"row\"`) rather than data.\n   * A row header is what a screen reader announces with every cell beside it.\n   */\n  rowHeader?: boolean;\n}\n\nexport interface TableProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  headers: Array<string | TableColumn>;\n  rows: ReactNode[][];\n  /**\n   * The table's visible caption. A string caption also names the scrolling region, so a table with a\n   * caption is never anonymous.\n   */\n  caption?: ReactNode;\n  /** The one row shown when `rows` is empty, spanning every column. */\n  emptyMessage?: ReactNode;\n  /** A stable key for each row. The index is only right for rows that never reorder. */\n  getRowKey?: (row: ReactNode[], index: number) => Key;\n  /** Classes for the outer scrollable surface. */\n  className?: string;\n  /** Classes for the native table element. */\n  tableClassName?: string;\n}\n\n/* A table is a quiet, dense data region: the lightest matte fill, tighter geometry than\n   a card, and hairlines between rows. Row feedback is tonality only — the rows are\n   scannable, not manipulated. */\nexport const Table = forwardRef<HTMLDivElement, TableProps>(\n  (\n    {\n      headers,\n      rows,\n      caption,\n      emptyMessage,\n      getRowKey,\n      className,\n      tableClassName,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const columns = headers.map((header, index): { key: string; label: string; className?: string; rowHeader?: boolean } =>\n      typeof header === \"string\"\n        ? { key: `string:${index}`, label: header }\n        : { ...header, key: `column:${header.id}` }\n    );\n    const captionText = typeof caption === \"string\" ? caption : undefined;\n\n    return (\n      /* The region is named by the caller's label, then by a string caption, then by the table itself. A\n         scrolling box with no name is not something a screen reader can find. */\n      <ScrollRegion\n        {...props}\n        ref={ref}\n        label={ariaLabel ?? captionText ?? \"Table\"}\n        className={cn(\"w-full\", shape.control, material.matteQuiet, className)}\n      >\n        <table className={cn(\"w-full border-collapse\", tableClassName)}>\n          {caption !== undefined && (\n            <caption className={cn(\"px-4 py-3 text-start\", type.label, text.medium)}>{caption}</caption>\n          )}\n          <thead>\n            <tr className={cn(edge.header)}>\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  className={cn(\"px-4 py-3 text-start\", type.label, text.medium, column.className)}\n                >\n                  {column.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.length === 0 && emptyMessage !== undefined ? (\n              <tr>\n                <td colSpan={columns.length} className={cn(\"px-4 py-6 text-start\", type.body, text.medium)}>\n                  {emptyMessage}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, i) => (\n                <tr key={getRowKey ? getRowKey(row, i) : i} className={cn(edge.row, motionFeedback, state.rowHover)}>\n                  {row.map((cell, j) => {\n                    const column = columns[j];\n                    const cellClass = cn(\"px-4 py-3\", type.numeric, text.high, column?.className);\n                    return column?.rowHeader ? (\n                      <th key={column.key} scope=\"row\" className={cn(cellClass, \"text-start font-medium\")}>\n                        {cell}\n                      </th>\n                    ) : (\n                      <td key={column?.key ?? `extra:${j}`} className={cn(cellClass)}>\n                        {cell}\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </ScrollRegion>\n    );\n  }\n);\n\nTable.displayName = \"Table\";\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/Tabs.js

@@ -2,20 +2,27 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import { cn } from '../libs/utils.js';
-import { elevation, puck, shape, state, stateLayer, tone, text, focusRingInset, density, selectable } from './ui.common.js';
+import { useEdgeFade } from './edge-fade.js';
+import { elevation, puck, shape, iconSlot, state, stateLayer, tone, text, focusRingInset, density, selectable } from './ui.common.js';
 import { motionRelocateLong, motionTactileWide } from './ui.motion.js';
 
-const Tabs = ({ tabs, variant = "primary", className, value, defaultValue, onValueChange, ariaLabel = "Tabs", }) => {
-    var _a, _b;
+const defaultTabsLabels = {
+    list: "Tabs",
+};
+const Tabs = ({ tabs, variant = "primary", className, value, defaultValue, onValueChange, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ariaLabel, labels, }) => {
+    var _a, _b, _c;
+    /* Called before the empty check, so the hook order never depends on how many tabs there are. */
+    const edge = useEdgeFade();
     if (tabs.length === 0)
         return null;
     const fallbackValue = (_b = (_a = tabs.find((tab) => !tab.disabled)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : tabs[0].id;
     const uncontrolledDefault = defaultValue !== null && defaultValue !== void 0 ? defaultValue : fallbackValue;
+    const name = (_c = ariaLabelProp !== null && ariaLabelProp !== void 0 ? ariaLabelProp : ariaLabel) !== null && _c !== void 0 ? _c : { ...defaultTabsLabels, ...labels }.list;
     return (jsxs(Tabs$1.Root, { value: value, defaultValue: value === undefined ? uncontrolledDefault : undefined, onValueChange: (nextValue, eventDetails) => {
             if (typeof nextValue !== "string")
                 return;
             onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue, eventDetails);
-        }, className: cn("min-w-0 w-full [overflow-wrap:anywhere]", className), children: [jsx("div", { className: cn("overflow-x-auto"), children: jsxs(Tabs$1.List, { "aria-label": ariaLabel, className: cn("relative flex min-w-max p-1", shape.prominent, selectable.surface, selectable.rest), children: [jsx(Tabs$1.Indicator, { className: cn("absolute left-[var(--active-tab-left)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] w-[var(--active-tab-width)]", shape.control, puck, elevation.control, motionRelocateLong) }), tabs.map((tab) => (jsx(Tabs$1.Tab, { value: tab.id, disabled: tab.disabled, className: ({ active, disabled }) => cn("relative z-10 min-w-28 flex-1 whitespace-nowrap px-7 py-3 font-medium", density.normal, shape.control, motionTactileWide, focusRingInset, active ? tone.text[variant] : cn(text.medium, !disabled && "hover:text-sherick-ink"), !disabled && stateLayer.quiet, disabled && state.disabled), children: tab.label }, tab.id)))] }) }), tabs.map((tab) => (jsx(Tabs$1.Panel, { value: tab.id, className: cn("mt-5"), children: tab.content }, tab.id)))] }));
+        }, className: cn("min-w-0 w-full [overflow-wrap:anywhere]", className), children: [jsx("div", { ref: edge.ref, style: edge.mask, className: cn("overflow-x-auto"), children: jsxs(Tabs$1.List, { "aria-label": ariaLabelledBy ? undefined : name, "aria-labelledby": ariaLabelledBy, className: cn("relative flex min-w-max p-1", shape.prominent, selectable.surface, selectable.rest), children: [jsx(Tabs$1.Indicator, { className: cn("absolute left-[var(--active-tab-left)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] w-[var(--active-tab-width)]", shape.control, puck, elevation.control, motionRelocateLong) }), tabs.map((tab) => (jsxs(Tabs$1.Tab, { value: tab.id, disabled: tab.disabled, className: ({ active, disabled }) => cn("relative z-10 inline-flex min-w-28 flex-1 items-center justify-center gap-2 whitespace-nowrap px-7 py-3 font-medium", density.normal, shape.control, motionTactileWide, focusRingInset, active ? tone.text[variant] : disabled ? text.medium : state.quietInk, !disabled && stateLayer.quiet, disabled && state.disabled), children: [tab.icon && (jsx("span", { className: cn(iconSlot.normal), "aria-hidden": "true", children: tab.icon })), tab.label] }, tab.id)))] }) }), tabs.map((tab) => (jsx(Tabs$1.Panel, { value: tab.id, className: cn("mt-5"), children: tab.content }, tab.id)))] }));
 };
 
 export { Tabs };

package/dist/esm/components/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport React, { type ReactNode } from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  density,\n  elevation,\n  focusRingInset,\n  puck,\n  selectable,\n  shape,\n  state,\n  stateLayer,\n  text,\n  tone,\n} from \"./ui.common\";\nimport { motionRelocateLong, motionTactileWide } from \"./ui.motion\";\nimport { Variant } from \"./ui.types\";\n\ntype TabsChangeDetails = Parameters<NonNullable<BaseTabs.Root.Props[\"onValueChange\"]>>[1];\n\nexport interface Tab {\n  id: string;\n  label: string;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsProps {\n  tabs: Tab[];\n  variant?: Variant;\n  className?: string;\n  value?: string;\n  defaultValue?: string;\n  /** Base's value-change event details are passed through unchanged. */\n  onValueChange?: (tabId: string, eventDetails: TabsChangeDetails) => void;\n  ariaLabel?: string;\n}\n\nexport const Tabs = ({\n  tabs,\n  variant = \"primary\",\n  className,\n  value,\n  defaultValue,\n  onValueChange,\n  ariaLabel = \"Tabs\",\n}: TabsProps) => {\n  if (tabs.length === 0) return null;\n\n  const fallbackValue = tabs.find((tab) => !tab.disabled)?.id ?? tabs[0].id;\n  const uncontrolledDefault = defaultValue ?? fallbackValue;\n\n  return (\n    <BaseTabs.Root\n      value={value}\n      defaultValue={value === undefined ? uncontrolledDefault : undefined}\n      onValueChange={(nextValue, eventDetails) => {\n        if (typeof nextValue !== \"string\") return;\n        onValueChange?.(nextValue, eventDetails);\n      }}\n      className={cn(\"min-w-0 w-full [overflow-wrap:anywhere]\", className)}\n    >\n      {/* A tab row that cannot fit where it was placed scrolls inside itself rather than widening\n         the page. The row is the content that is wider than its container, so owning that overflow\n         here is the same thing `Table` does, and it is what keeps a 320px-wide reader from having\n         to pan the whole page sideways to reach the third tab — no consumer wrapper to know\n         about, and nothing about the shape of the control changes. The scroller wraps the track\n         and not the whole control, so the region an application placed the tabs in still owns the\n         horizontal axis of everything below it, and the track keeps its own content width so the\n         track still scrolls as one object. */}\n      <div className={cn(\"overflow-x-auto\")}>\n        <BaseTabs.List\n          aria-label={ariaLabel}\n          className={cn(\n            \"relative flex min-w-max p-1\",\n            shape.prominent,\n            selectable.surface,\n            selectable.rest\n          )}\n        >\n          <BaseTabs.Indicator\n            className={cn(\n              \"absolute left-[var(--active-tab-left)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] w-[var(--active-tab-width)]\",\n              shape.control,\n              puck,\n              elevation.control,\n              motionRelocateLong\n            )}\n          />\n\n          {tabs.map((tab) => (\n            <BaseTabs.Tab\n              key={tab.id}\n              value={tab.id}\n              disabled={tab.disabled}\n              className={({ active, disabled }) =>\n                cn(\n                  \"relative z-10 min-w-28 flex-1 whitespace-nowrap px-7 py-3 font-medium\",\n                  density.normal,\n                  shape.control,\n                  motionTactileWide,\n                  focusRingInset,\n                  active ? tone.text[variant] : cn(text.medium, !disabled && \"hover:text-sherick-ink\"),\n                  !disabled && stateLayer.quiet,\n                  disabled && state.disabled\n                )\n              }\n            >\n              {tab.label}\n            </BaseTabs.Tab>\n          ))}\n        </BaseTabs.List>\n      </div>\n\n      {tabs.map((tab) => (\n        <BaseTabs.Panel key={tab.id} value={tab.id} className={cn(\"mt-5\")}>\n          {tab.content}\n        </BaseTabs.Panel>\n      ))}\n    </BaseTabs.Root>\n  );\n};\n"],"names":["_jsxs","BaseTabs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport React, { type ReactNode } from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport { useEdgeFade } from \"./edge-fade\";\nimport {\n  density,\n  elevation,\n  focusRingInset,\n  iconSlot,\n  puck,\n  selectable,\n  shape,\n  state,\n  stateLayer,\n  text,\n  tone,\n} from \"./ui.common\";\nimport { motionRelocateLong, motionTactileWide } from \"./ui.motion\";\nimport { Variant } from \"./ui.types\";\n\ntype TabsChangeDetails = Parameters<NonNullable<BaseTabs.Root.Props[\"onValueChange\"]>>[1];\n\n/** The English copy a tab list names itself with. */\nexport interface TabsLabels {\n  /** The tab list's accessible name, when neither `aria-label` nor `aria-labelledby` names it. */\n  list: string;\n}\n\nconst defaultTabsLabels: TabsLabels = {\n  list: \"Tabs\",\n};\n\nexport interface Tab {\n  id: string;\n  /** The tab's name. The tab is named by its label, so the label may be any content a row can hold. */\n  label: ReactNode;\n  /** A mark before the label. It is decorative: the label alone names the tab. */\n  icon?: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface TabsProps {\n  tabs: Tab[];\n  variant?: Variant;\n  className?: string;\n  value?: string;\n  defaultValue?: string;\n  /** Base's value-change event details are passed through unchanged. */\n  onValueChange?: (tabId: string, eventDetails: TabsChangeDetails) => void;\n  /** Names the tab list. Left unset, the list takes the name in `labels`. */\n  \"aria-label\"?: string;\n  /** Names the tab list from an element that already labels it. It takes precedence over a name. */\n  \"aria-labelledby\"?: string;\n  /** The same name as `aria-label`, kept for callers that already use it. */\n  ariaLabel?: string;\n  /** The English copy the tab list names itself with. */\n  labels?: Partial<TabsLabels>;\n}\n\nexport const Tabs = ({\n  tabs,\n  variant = \"primary\",\n  className,\n  value,\n  defaultValue,\n  onValueChange,\n  \"aria-label\": ariaLabelProp,\n  \"aria-labelledby\": ariaLabelledBy,\n  ariaLabel,\n  labels,\n}: TabsProps) => {\n  /* Called before the empty check, so the hook order never depends on how many tabs there are. */\n  const edge = useEdgeFade<HTMLDivElement>();\n\n  if (tabs.length === 0) return null;\n\n  const fallbackValue = tabs.find((tab) => !tab.disabled)?.id ?? tabs[0].id;\n  const uncontrolledDefault = defaultValue ?? fallbackValue;\n  const name = ariaLabelProp ?? ariaLabel ?? { ...defaultTabsLabels, ...labels }.list;\n\n  return (\n    <BaseTabs.Root\n      value={value}\n      defaultValue={value === undefined ? uncontrolledDefault : undefined}\n      onValueChange={(nextValue, eventDetails) => {\n        if (typeof nextValue !== \"string\") return;\n        onValueChange?.(nextValue, eventDetails);\n      }}\n      className={cn(\"min-w-0 w-full [overflow-wrap:anywhere]\", className)}\n    >\n      {/* A tab row that cannot fit where it was placed scrolls inside itself rather than widening\n         the page. The row is the content that is wider than its container, so owning that overflow\n         here is the same thing `Table` does, and it is what keeps a 320px-wide reader from having\n         to pan the whole page sideways to reach the third tab — no consumer wrapper to know\n         about, and nothing about the shape of the control changes. The scroller wraps the track\n         and not the whole control, so the region an application placed the tabs in still owns the\n         horizontal axis of everything below it, and the track keeps its own content width so the\n         track still scrolls as one object. The edge fade says which side has more tabs behind it. */}\n      <div ref={edge.ref} style={edge.mask} className={cn(\"overflow-x-auto\")}>\n        <BaseTabs.List\n          aria-label={ariaLabelledBy ? undefined : name}\n          aria-labelledby={ariaLabelledBy}\n          className={cn(\n            \"relative flex min-w-max p-1\",\n            shape.prominent,\n            selectable.surface,\n            selectable.rest\n          )}\n        >\n          {/* Base publishes only the activation direction on the indicator, and that value persists between\n              selections, so it cannot tell a selection from a resize. The travel therefore stays on every\n              position change; the gap is recorded in DESIGN_LANGUAGE §12. */}\n          <BaseTabs.Indicator\n            className={cn(\n              \"absolute left-[var(--active-tab-left)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] w-[var(--active-tab-width)]\",\n              shape.control,\n              puck,\n              elevation.control,\n              motionRelocateLong\n            )}\n          />\n\n          {tabs.map((tab) => (\n            <BaseTabs.Tab\n              key={tab.id}\n              value={tab.id}\n              disabled={tab.disabled}\n              className={({ active, disabled }) =>\n                cn(\n                  \"relative z-10 inline-flex min-w-28 flex-1 items-center justify-center gap-2 whitespace-nowrap px-7 py-3 font-medium\",\n                  density.normal,\n                  shape.control,\n                  motionTactileWide,\n                  focusRingInset,\n                  active ? tone.text[variant] : disabled ? text.medium : state.quietInk,\n                  !disabled && stateLayer.quiet,\n                  disabled && state.disabled\n                )\n              }\n            >\n              {tab.icon && (\n                <span className={cn(iconSlot.normal)} aria-hidden=\"true\">\n                  {tab.icon}\n                </span>\n              )}\n              {tab.label}\n            </BaseTabs.Tab>\n          ))}\n        </BaseTabs.List>\n      </div>\n\n      {tabs.map((tab) => (\n        <BaseTabs.Panel key={tab.id} value={tab.id} className={cn(\"mt-5\")}>\n          {tab.content}\n        </BaseTabs.Panel>\n      ))}\n    </BaseTabs.Root>\n  );\n};\n"],"names":["_jsxs","BaseTabs","_jsx"],"mappings":"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"}

package/dist/esm/components/Textarea.js

@@ -5,14 +5,18 @@ import { forwardRef } from 'react';
 import { cn } from '../libs/utils.js';
 import { fieldLabel, state, rim, material, focusRing, shape, density, fieldMessage, fieldLayout } from './ui.common.js';
 import { motionFeedback } from './ui.motion.js';
+import { FieldLabel } from './FieldLabel.js';
 
-const Textarea = forwardRef(({ label, description, className, textareaClassName, required, error = false, errorMessage, id, name, disabled, onValueChange, value, defaultValue, ...textareaProps }, ref) => {
-    return (jsxs(Field.Root, { className: cn(fieldLayout, className), name: name, disabled: disabled, invalid: error, children: [label && (jsxs(Field.Label, { className: cn(fieldLabel), children: [label, required && jsx("span", { className: cn("ms-1 text-sherick-danger"), "aria-hidden": "true", children: "*" })] })), jsx(Field.Control, { render: jsx("textarea", { ...textareaProps, ref: ref }), id: id, name: name, required: required, disabled: disabled, value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: (controlState) => {
+const Textarea = forwardRef(({ label, description, className, textareaClassName, required, error, errorMessage, id, name, disabled, onValueChange, value, defaultValue, ...textareaProps }, ref) => {
+    /* An `error` that is a message, or a flag with the message beside it: both mark the field invalid. */
+    const invalidByProp = Boolean(error);
+    const errorText = typeof error === "boolean" || error == null ? errorMessage : error;
+    return (jsxs(Field.Root, { className: cn(fieldLayout, className), name: name, disabled: disabled, invalid: invalidByProp, children: [label && (jsx(Field.Label, { className: cn(fieldLabel), children: jsx(FieldLabel, { required: required, children: label }) })), jsx(Field.Control, { render: jsx("textarea", { ...textareaProps, ref: ref }), id: id, name: name, required: required, disabled: disabled, value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: (controlState) => {
                     /* Invalid by its own prop, or by what Base reports — a failed constraint, or the error a
                        `Form` returns for this field's name: one field, one ladder. */
-                    const invalid = error || controlState.valid === false;
+                    const invalid = invalidByProp || controlState.valid === false;
                     return cn("min-w-0 w-full resize-y", density.normal, "min-h-28 px-5 py-4", shape.control, motionFeedback, focusRing, invalid ? material.controlError : material.control, rim.field, !disabled && (invalid ? state.field.errorHover : state.field.hover), !disabled && (invalid ? state.field.errorFocus : state.field.focus), disabled ? state.disabled : state.text, textareaClassName);
-                } }), description && (jsx(Field.Description, { className: cn(fieldMessage.description), children: description })), !(error && !errorMessage) && (jsx(Field.Error, { match: error ? true : undefined, className: cn(fieldMessage.error), ...(error ? { children: errorMessage } : {}) }))] }));
+                } }), description && (jsx(Field.Description, { className: cn(fieldMessage.description), children: description })), !(invalidByProp && !errorText) && (jsx(Field.Error, { match: invalidByProp ? true : undefined, className: cn(fieldMessage.error), ...(invalidByProp ? { children: errorText } : {}) }))] }));
 });
 Textarea.displayName = "Textarea";
 

package/dist/esm/components/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field } from \"@base-ui/react/field\";\nimport React, {\n  forwardRef,\n  type ComponentProps,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  density,\n  fieldLabel,\n  fieldLayout,\n  fieldMessage,\n  focusRing,\n  material,\n  rim,\n  shape,\n  state,\n} from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\n\nexport interface TextareaProps\n  extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: boolean;\n  errorMessage?: ReactNode;\n  textareaClassName?: string;\n  /** Base's value-change callback, event details included. */\n  onValueChange?: ComponentProps<typeof Field.Control>[\"onValueChange\"];\n}\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({\n    label,\n    description,\n    className,\n    textareaClassName,\n    required,\n    error = false,\n    errorMessage,\n    id,\n    name,\n    disabled,\n    onValueChange,\n    value,\n    defaultValue,\n    ...textareaProps\n  }, ref) => {\n    return (\n      <Field.Root\n        className={cn(fieldLayout, className)}\n        name={name}\n        disabled={disabled}\n        invalid={error}\n      >\n        {label && (\n          <Field.Label className={cn(fieldLabel)}>\n            {label}\n            {required && <span className={cn(\"ms-1 text-sherick-danger\")} aria-hidden=\"true\">*</span>}\n          </Field.Label>\n        )}\n        <Field.Control\n          render={<textarea {...textareaProps} ref={ref} />}\n          id={id}\n          name={name}\n          required={required}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          className={(controlState) => {\n            /* Invalid by its own prop, or by what Base reports — a failed constraint, or the error a\n               `Form` returns for this field's name: one field, one ladder. */\n            const invalid = error || controlState.valid === false;\n            return cn(\n              \"min-w-0 w-full resize-y\",\n              density.normal,\n              \"min-h-28 px-5 py-4\",\n              shape.control,\n              motionFeedback,\n              focusRing,\n              invalid ? material.controlError : material.control,\n              rim.field,\n              !disabled && (invalid ? state.field.errorHover : state.field.hover),\n              !disabled && (invalid ? state.field.errorFocus : state.field.focus),\n              disabled ? state.disabled : state.text,\n              textareaClassName\n            );\n          }}\n        />\n        {description && (\n          <Field.Description className={cn(fieldMessage.description)}>\n            {description}\n          </Field.Description>\n        )}\n        {/* Mounted whether or not a message was passed, as `Field`'s is: without `match` this part\n            renders what Base reports, including the error a `Form` returns for this field's name. */}\n        {!(error && !errorMessage) && (\n          <Field.Error\n            match={error ? true : undefined}\n            className={cn(fieldMessage.error)}\n            {...(error ? { children: errorMessage } : {})}\n          />\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport default Textarea;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field } from \"@base-ui/react/field\";\nimport React, {\n  forwardRef,\n  type ComponentProps,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  density,\n  fieldLabel,\n  fieldLayout,\n  fieldMessage,\n  focusRing,\n  material,\n  rim,\n  shape,\n  state,\n} from \"./ui.common\";\nimport { motionFeedback } from \"./ui.motion\";\nimport FieldLabel from \"./FieldLabel\";\n\nexport interface TextareaProps\n  extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: ReactNode;\n  description?: ReactNode;\n  /**\n   * Marks the field invalid. A message is shown beneath it, so a `ReactNode` here is both the flag and\n   * its message. `true` marks the field without one, and `errorMessage` supplies the message.\n   */\n  error?: ReactNode;\n  /** The message for `error={true}`. A message passed as `error` takes its place. */\n  errorMessage?: ReactNode;\n  textareaClassName?: string;\n  /** Base's value-change callback, event details included. */\n  onValueChange?: ComponentProps<typeof Field.Control>[\"onValueChange\"];\n}\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({\n    label,\n    description,\n    className,\n    textareaClassName,\n    required,\n    error,\n    errorMessage,\n    id,\n    name,\n    disabled,\n    onValueChange,\n    value,\n    defaultValue,\n    ...textareaProps\n  }, ref) => {\n    /* An `error` that is a message, or a flag with the message beside it: both mark the field invalid. */\n    const invalidByProp = Boolean(error);\n    const errorText = typeof error === \"boolean\" || error == null ? errorMessage : error;\n\n    return (\n      <Field.Root\n        className={cn(fieldLayout, className)}\n        name={name}\n        disabled={disabled}\n        invalid={invalidByProp}\n      >\n        {label && (\n          <Field.Label className={cn(fieldLabel)}>\n            <FieldLabel required={required}>{label}</FieldLabel>\n          </Field.Label>\n        )}\n        <Field.Control\n          render={<textarea {...textareaProps} ref={ref} />}\n          id={id}\n          name={name}\n          required={required}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          className={(controlState) => {\n            /* Invalid by its own prop, or by what Base reports — a failed constraint, or the error a\n               `Form` returns for this field's name: one field, one ladder. */\n            const invalid = invalidByProp || controlState.valid === false;\n            return cn(\n              \"min-w-0 w-full resize-y\",\n              density.normal,\n              \"min-h-28 px-5 py-4\",\n              shape.control,\n              motionFeedback,\n              focusRing,\n              invalid ? material.controlError : material.control,\n              rim.field,\n              !disabled && (invalid ? state.field.errorHover : state.field.hover),\n              !disabled && (invalid ? state.field.errorFocus : state.field.focus),\n              disabled ? state.disabled : state.text,\n              textareaClassName\n            );\n          }}\n        />\n        {description && (\n          <Field.Description className={cn(fieldMessage.description)}>\n            {description}\n          </Field.Description>\n        )}\n        {/* Mounted whether or not a message was passed, as `Field`'s is: without `match` this part\n            renders what Base reports, including the error a `Form` returns for this field's name. */}\n        {!(invalidByProp && !errorText) && (\n          <Field.Error\n            match={invalidByProp ? true : undefined}\n            className={cn(fieldMessage.error)}\n            {...(invalidByProp ? { children: errorText } : {})}\n          />\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n\nexport default Textarea;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Toast.js

@@ -2,23 +2,38 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Toast } from '@base-ui/react/toast';
 import { useMemo } from 'react';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Cancel01Icon, InformationCircleIcon, Alert02Icon, CancelCircleIcon, CheckmarkCircle02Icon } from '@hugeicons/core-free-icons';
 import { cn } from '../libs/utils.js';
 import Button from './Button.js';
+import DismissButton from './DismissButton.js';
 import { Spinner } from './Spinner.js';
-import { text, type, iconStroke, state, stateLayer, focusRingInset, shape, density, overlay, stacking, tone } from './ui.common.js';
-import { motionInkPress, motionFeedback, motionPresenceToast } from './ui.motion.js';
+import { StatusMark } from './StatusMark.js';
+import { text, type, overlay, stacking } from './ui.common.js';
+import { motionFeedback, motionPresenceToast } from './ui.motion.js';
 
 /* The provider needs Base's own object back, and the only managers that can be handed to it are
    the ones this module built. Keeping the pair in a map rather than on the wrapper leaves the
    public type free of anything a consumer could reach for and depend on. */
 const baseManagers = new WeakMap();
+/* A toast that asks for a decision, or reports a failure, must not leave before it has been read: an
+   action waits to be taken and a danger waits to be acknowledged. A caller that names a timeout keeps
+   it, so this is a default and not a rule. */
+const stickyUnlessTimed = (options) => options.timeout === undefined && (options.actionProps !== undefined || options.type === "danger")
+    ? { ...options, timeout: 0 }
+    : options;
+/* A promise state is either a line, which needs no default, or an options object that can be sticky. */
+const stickyState = (state) => typeof state === "string" ? state : stickyUnlessTimed(state);
 const narrow = (base) => ({
-    add: (options) => base.add(options),
-    update: (id, options) => base.update(id, options),
+    add: (options) => base.add(stickyUnlessTimed(options)),
+    update: (id, options) => base.update(id, stickyUnlessTimed(options)),
     close: (id) => base.close(id),
-    promise: (value, options) => base.promise(value, options),
+    promise: (value, options) => {
+        const { loading, success, error } = options;
+        return base.promise(value, {
+            loading: stickyState(loading),
+            success: typeof success === "function" ? (result) => stickyState(success(result)) : stickyState(success),
+            error: typeof error === "function" ? (reason) => stickyState(error(reason)) : stickyState(error),
+        });
+    },
 });
 const baseOf = (manager) => {
     const base = baseManagers.get(manager);
@@ -27,25 +42,25 @@ const baseOf = (manager) => {
     }
     return base;
 };
-/* The mark a toast takes from what it is reporting, and the tone that goes with it. Base's promise
-   states are in this map because `promise()` sets them itself: loading, success and error are
-   states of one lifecycle rather than roles a caller chose, and a state left out of the map would
-   silently lose its mark and its tone. `loading` is the one that is not a status glyph — it is
-   ongoing work, so it carries the same activity the library's `Spinner` does. */
-const markIcon = (icon, className) => (jsx(HugeiconsIcon, { icon: icon, "aria-hidden": "true", className: cn(iconStroke.glyph, "size-5 shrink-0", className) }));
-const toastMark = (type) => {
-    switch (type) {
+/* The mark a toast takes from what it is reporting. Base's promise states are in this map because
+   `promise()` sets them itself: loading, success and error are states of one lifecycle rather than
+   roles a caller chose, and a state left out of the map would silently lose its mark and its tone.
+   `loading` is the one that is not a status glyph — it is ongoing work, so it carries the same
+   activity the library's `Spinner` does. Every status glyph comes from `StatusMark`, so a toast and an
+   alert draw the same mark for the same status. */
+const toastMark = (status) => {
+    switch (status) {
         case "loading":
-            return jsx(Spinner, { size: "small", className: cn("size-5") });
+            return jsx(Spinner, { size: "small", label: "Loading", className: cn("size-5") });
         case "success":
-            return markIcon(CheckmarkCircle02Icon, tone.text.success);
+            return jsx(StatusMark, { variant: "success" });
         case "error":
         case "danger":
-            return markIcon(CancelCircleIcon, tone.text.danger);
+            return jsx(StatusMark, { variant: "danger" });
         case "warning":
-            return markIcon(Alert02Icon, tone.text.warning);
+            return jsx(StatusMark, { variant: "warning" });
         case "info":
-            return markIcon(InformationCircleIcon, tone.text.primary);
+            return jsx(StatusMark, { variant: "primary" });
         default:
             return null;
     }
@@ -54,16 +69,19 @@ const toastMark = (type) => {
    so a toast raised with only a description would publish an unnamed dialog — a role with no
    accessible name. The state it reports names it instead in that case, which is what an
    assistive technology has left to announce; the description is still what it reads out, because
-   Base points the toast's own `aria-describedby` at it. A toast raised with a title is untouched.
-   The copy is this package's, like every other name the library gives a control it renders. */
-const toastTypeName = {
+   Base points the toast's own `aria-describedby` at it. A toast raised with a title is untouched. */
+const defaultLabels = {
     info: "Information",
     success: "Success",
     warning: "Warning",
     danger: "Error",
     error: "Error",
     loading: "Working",
+    notification: "Notification",
 };
+const nameFor = (names, status) => status !== undefined && Object.prototype.hasOwnProperty.call(names, status)
+    ? names[status]
+    : names.notification;
 /* Where the stack sits, where a toast rests inside the viewport, and which way it grows. A stack
    anchored to the bottom grows upward and a toast leaves downward, so one signed factor carries
    both the resting offset and the edge a new toast arrives from. The horizontal inset is
@@ -112,31 +130,26 @@ const ToastProvider = ({ children, manager, ...props }) => (jsx(Toast.Provider,
  * is holding. Base provides F6 entry and focus restoration; the live region remains available
  * while a modal is open. Keep the keyboard shortcut discoverable without reimplementing it.
  */
-const ToastViewport = ({ position = "bottom-end", className }) => {
+const ToastViewport = ({ position = "bottom-end", dismissLabel = "Dismiss", labels, className, }) => {
     const { toasts } = Toast.useToastManager();
     const geometry = positionLayout[position];
+    const names = { ...defaultLabels, ...labels };
     return (jsx(Toast.Portal, { children: jsx(Toast.Viewport, { "aria-keyshortcuts": "F6", className: cn("fixed flex w-[calc(100%-3rem)] flex-col sm:w-[22.5rem]", stacking.notification, geometry.viewport, className), children: toasts.map((toast) => {
-                var _a, _b;
                 const mark = toastMark(toast.type);
-                return (jsx(Toast.Root, { toast: toast, "aria-label": toast.title ? undefined : (_b = toastTypeName[String((_a = toast.type) !== null && _a !== void 0 ? _a : "")]) !== null && _b !== void 0 ? _b : "Notification", className: cn(
+                return (jsx(Toast.Root, { toast: toast, "aria-label": toast.title ? undefined : nameFor(names, toast.type), className: cn(
                     /* The stack's own geometry: each toast is anchored to the same viewport corner,
                        sits one shortened step behind the one in front of it, and the stack clamps every
                        root to the frontmost toast's height so a collapsed stack shows one surface with
                        a sliver of each of the others. Expanding rests every root at its own height
                        again. The signed factor is the only difference between a stack that grows up and
                        one that grows down. */
-                    "[--gap:0.75rem] [--peek:0.75rem]", "[--scale:calc(max(0,1-(var(--toast-index)*0.1)))]", "[--shrink:calc(1-var(--scale))]", "[--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--sui-toast-stack-sign)*(var(--toast-offset-y)+var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y,0px))]", "absolute z-[calc(1000-var(--toast-index))] w-full select-none overflow-hidden", geometry.anchor, geometry.sign, geometry.from, "[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(calc(var(--toast-swipe-movement-y,0px)+var(--sui-toast-stack-sign)*(var(--toast-index)*var(--peek)+var(--shrink)*var(--height))))_scale(var(--scale))]", "h-[var(--height)] data-[expanded]:h-[var(--toast-height)]", "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(var(--offset-y))]", "data-[limited]:opacity-0", overlay.toast, motionPresenceToast), children: jsxs(Toast.Content, { className: cn("flex max-h-[calc(100dvh-3rem)] items-start gap-3 overflow-y-auto overscroll-contain p-4 [overflow-wrap:anywhere]", motionFeedback, "data-[behind]:opacity-0 data-[expanded]:opacity-100"), children: [mark ? (jsx("span", { className: cn("inline-flex h-6 shrink-0 items-center"), children: mark })) : null, jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-0.5"), children: [toast.title ? (jsx(Toast.Title, { className: cn(type.title, text.high) })) : null, toast.description ? (jsx(Toast.Description, { className: cn(type.body, text.medium) })) : null, toast.actionProps ? (
+                    "[--gap:0.75rem] [--peek:0.75rem]", "[--scale:calc(max(0,1-(var(--toast-index)*0.1)))]", "[--shrink:calc(1-var(--scale))]", "[--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--sui-toast-stack-sign)*(var(--toast-offset-y)+var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y,0px))]", "absolute z-[calc(1000-var(--toast-index))] w-full select-none overflow-hidden", geometry.anchor, geometry.sign, geometry.from, "[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(calc(var(--toast-swipe-movement-y,0px)+var(--sui-toast-stack-sign)*(var(--toast-index)*var(--peek)+var(--shrink)*var(--height))))_scale(var(--scale))]", "h-[var(--height)] data-[expanded]:h-[var(--toast-height)]", "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x,0px))_translateY(var(--offset-y))]", "data-[limited]:opacity-0", overlay.toast, motionPresenceToast), children: jsxs(Toast.Content, { className: cn("flex max-h-[calc(100dvh-3rem)] items-start gap-3 overflow-y-auto overscroll-contain p-4 [overflow-wrap:anywhere]", motionFeedback, "data-[behind]:opacity-0 data-[expanded]:opacity-100"), children: [mark ? (jsx("span", { className: cn("inline-flex h-6 shrink-0 items-center"), children: mark })) : null, jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-1"), children: [toast.title ? (jsx(Toast.Title, { className: cn(type.title, text.high) })) : null, toast.description ? (jsx(Toast.Description, { className: cn(type.body, text.medium) })) : null, toast.actionProps ? (
                                     /* Actions follow the copy instead of squeezing it between three controls.
                                        Give back the small text button's start padding, moving the whole target. */
-                                    jsx(Toast.Action, { render: jsx(Button, { appearance: "text", variant: "primary", size: "sm", className: cn("-ms-4 mt-2 self-start"), children: toast.actionProps.children }) })) : null] }), jsx(Toast.Close, { "aria-label": "Dismiss", className: cn(density.target, shape.circle, 
-                                /* Centre the 44px target on the first line and give back its excess on BOTH
-                                   vertical edges: a top-only offset leaves 10–12px below a one-line toast.
-                                   The whole target stays intact, with an inset ring inside the clipped root.
-                                   Its inline end padding is compensated separately. */
-                                "group -me-2 inline-flex shrink-0 items-center justify-center", 
-                                /* Half the target minus half the first line: the title and the description both
-                                   set a 24px line, so the target gives back 10px either way. */
-                                "-my-2.5", text.medium, "hover:text-sherick-ink", motionFeedback, focusRingInset, stateLayer.quiet, state.enabled), children: jsx("span", { className: cn("inline-flex items-center justify-center", motionInkPress), children: jsx(HugeiconsIcon, { icon: Cancel01Icon, className: cn(iconStroke.glyph, "size-4"), "aria-hidden": "true" }) }) })] }) }, toast.id));
+                                    jsx(Toast.Action, { render: jsx(Button, { appearance: "text", variant: "primary", size: "sm", className: cn("-ms-4 mt-1 self-start"), children: toast.actionProps.children }) })) : null] }), jsx(Toast.Close, { render: jsx(DismissButton, { label: dismissLabel, size: "compact", inRow: true, 
+                                    /* Half the target minus half the first line: the title and the description both
+                                       set a 24px line, so the target gives back 10px either way. */
+                                    className: cn("-me-2 -my-2.5") }) })] }) }, toast.id));
             }) }) }));
 };
 /**