@sableui/react 0.8.2 → 0.9.1

package/dist/components/fieldset/fieldset.meta.js

@@ -1,7 +1,7 @@
 // src/components/fieldset/fieldset.meta.ts
 var fieldsetMeta = {
   name: "Fieldset",
-  summary: "Form section panel (Card-like bordered surface) over Base UI Fieldset, with Legend/Description/Content/Footer parts.",
+  summary: 'Form section panel (Card-like bordered surface) over Base UI Fieldset, with Legend/Description/Content/Footer parts; `variant="plain"` is the bare group, for a radio group\'s shared name.',
   status: "stable",
   keywords: [
     "fieldset",
@@ -24,6 +24,10 @@ var fieldsetMeta = {
         guidance: "dont",
         description: "Do not use Fieldset as a generic spacing wrapper outside forms."
       },
+      {
+        guidance: "do",
+        description: 'Use `variant="plain"` to name a radio group or a run of checkboxes inside a form or card that is already framed: the legend reads as a field label and nothing draws a second box. Do not strip the card variant with classes instead.'
+      },
       {
         guidance: "dont",
         description: "Do not use a Legend that is really a heading. A legend names the group's question for assistive technology; using it as a section title puts a question mark where the outline should be."
@@ -64,6 +68,12 @@ var fieldsetMeta = {
     ]
   },
   props: [
+    {
+      name: "variant",
+      type: '"card" | "plain"',
+      default: '"card"',
+      description: "`card` is a bordered, raised section with padded parts. `plain` is the grouping alone (no border, surface or inset) with the legend in the field-label style: the shared name a radio group needs, inside a form that is already framed."
+    },
     {
       name: "disabled",
       type: "boolean",
@@ -152,6 +162,20 @@ var fieldsetMeta = {
 // \u2717 Not for visual grouping of unrelated fields. Use PanelSection on a panel or
 //   a Card section on a page; a legend that is really a heading lies to
 //   assistive technology about the form's structure.`
+    },
+    {
+      label: "A radio group's name, without a second box",
+      code: `<Card>
+  <CardContent>
+    <Fieldset variant="plain">
+      <FieldsetLegend>Delivery</FieldsetLegend>
+      <RadioGroup defaultValue="standard">
+        <RadioCard value="standard" title="Standard" description="3\u20135 working days" trailing="Free" />
+        <RadioCard value="express" title="Express" description="Next working day" trailing="$12.00" />
+      </RadioGroup>
+    </Fieldset>
+  </CardContent>
+</Card>`
     }
   ]
 };

package/dist/components/form/form.js

@@ -10,6 +10,7 @@ import {
   useRef
 } from "react";
 import { cn } from "../../lib/cn.js";
+import { isPromise } from "../../lib/is-promise.js";
 import { Label } from "../label/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Form({
@@ -23,16 +24,18 @@ function Form({
   ...props
 }) {
   const blockedRef = useRef(false);
+  const formRef = useRef(null);
   const handleSubmit = (event) => {
     blockedRef.current = false;
     const form = event.currentTarget;
+    formRef.current = form;
     if (!form.checkValidity()) {
       event.preventDefault();
       blockedRef.current = true;
       form.reportValidity();
       return;
     }
-    onSubmit?.(event);
+    afterSubmit(form, onSubmit?.(event));
   };
   if (noValidate) {
     return /* @__PURE__ */ jsx(
@@ -40,7 +43,10 @@ function Form({
       {
         noValidate: true,
         className: cn("flex flex-col gap-6", className),
-        onSubmit,
+        onSubmit: (event) => {
+          const form = event.currentTarget;
+          afterSubmit(form, onSubmit?.(event));
+        },
         ...props
       }
     );
@@ -54,13 +60,37 @@ function Form({
       actionsRef,
       onSubmit: handleSubmit,
       onFormSubmit: onFormSubmit ? (values, details) => {
-        if (!blockedRef.current) onFormSubmit(values, details);
+        if (blockedRef.current) return;
+        const result = onFormSubmit(values, details);
+        if (formRef.current && isPromise(result)) afterSubmit(formRef.current, result);
       } : void 0,
       ...props
     }
   );
 }
 Form.displayName = "Form";
+var SETTLE_FRAMES = 10;
+function afterSubmit(form, result) {
+  const attempt = (framesLeft) => requestAnimationFrame(() => {
+    if (!form.isConnected) return;
+    const active = document.activeElement;
+    if (active && active !== document.body && !form.contains(active)) return;
+    if (active && form.contains(active) && active.getAttribute("aria-invalid") === "true") return;
+    const first = [...form.querySelectorAll('[aria-invalid="true"]')].find(
+      (el) => !(el instanceof HTMLInputElement && el.type === "hidden") && !el.closest("[aria-hidden='true'],[inert]")
+    );
+    if (!first) {
+      if (framesLeft > 0) attempt(framesLeft - 1);
+      return;
+    }
+    first.focus();
+    if (first instanceof HTMLInputElement && /^(?:text|search|email|tel|url|password|number)?$/.test(first.type)) {
+      first.select();
+    }
+  });
+  if (isPromise(result)) result.finally(() => attempt(SETTLE_FRAMES));
+  else attempt(SETTLE_FRAMES);
+}
 function Field({
   label,
   description,
@@ -73,8 +103,10 @@ function Field({
   validationMode,
   validationDebounceTime,
   orientation = "vertical",
+  trailing,
   className,
-  children
+  children,
+  ...props
 }) {
   const generatedId = useId();
   const child = Children.only(children);
@@ -137,22 +169,31 @@ function Field({
       validate,
       validationMode,
       validationDebounceTime,
+      ...props,
       children: orientation === "horizontal" ? (
         // Control beside a text column. The control sits in a box one LABEL
         // line tall (`h-[1lh]` in the label's own type step), so it centres
         // on the first line and stays there when the label wraps. Helper and
         // error text live in the label's column, not under the control.
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-[1lh] shrink-0 items-center text-label-lg", children: control }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+        // A Switch (the tallest, --spacing(6)) is taller than that line, so
+        // the row is padded by the difference: the control stays inside the
+        // Field's box, where an AccordionPanel or any clipping parent keeps
+        // it whole.
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 py-[max(0px,calc((--spacing(6)_-_1lh)/2))] text-label-lg", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-[1lh] shrink-0 items-center", children: control }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
             labelNode,
             descriptionNode,
             errorNode
-          ] })
+          ] }),
+          trailing != null ? /* @__PURE__ */ jsx("div", { className: "flex h-[1lh] shrink-0 items-center", children: trailing }) : null
         ] })
       ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         labelNode,
-        control,
+        trailing != null ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: control }),
+          trailing
+        ] }) : control,
         descriptionNode,
         errorNode
       ] })

package/dist/components/form/form.meta.js

@@ -72,7 +72,12 @@ var formMeta = {
     {
       name: "Form",
       type: '{ validationMode?: "onSubmit" | "onBlur" | "onChange"; errors?: Record<string, string | string[]>; onFormSubmit?: (values, details) => void; actionsRef?: RefObject<Form.Actions> } + ComponentPropsWithRef<"form">',
-      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs. Validating in your own code (react-hook-form, a schema, state)? Pass noValidate: onSubmit always runs and each Field shows the error you set; without it an empty required Field stops the submit before your handler can set that error.'
+      description: 'A <form> laid out as a vertical column with comfortable field spacing (override with className, e.g. gap-4). On submit it validates every Field (native constraints plus Field validate), shows each message under its field, focuses the first invalid control, and only then calls onSubmit. validationMode defaults to "onSubmit" (then live re-validation on change). errors shows external (e.g. server) messages keyed by Field name and clears one when its field is edited. onFormSubmit receives the named Field values and prevents the native submit. A control outside any Field is still checked by the browser before onSubmit runs. Validating in your own code (react-hook-form, a schema, state)? Pass noValidate: onSubmit always runs and each Field shows the error you set; without it an empty required Field stops the submit before your handler can set that error. Either way, once onSubmit returns (or the promise it returns settles), the first control a Field marks invalid takes focus.'
+    },
+    {
+      name: "onSubmit",
+      type: "(event: FormEvent<HTMLFormElement>) => unknown",
+      description: "The native submit handler. It may return a promise. When it returns, or its promise settles, the first control a Field marks invalid takes focus, so errors your own code sets get the same treatment as Sable's validation."
     },
     {
       name: "validationMode",
@@ -105,8 +110,8 @@ var formMeta = {
   subcomponents: [
     {
       name: "Field",
-      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; messages?: Partial<Record<"valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput", ReactNode>>; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; className?: string; children: ReactElement }',
-      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows the field's messages entry for the native constraint that failed (messages={{ valueMissing: "Enter a subject." }}), else Base UI's validation message (the browser's wording for a native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
+      type: '{ label?: ReactNode; description?: ReactNode; error?: ReactNode; required?: boolean; messages?: Partial<Record<"valueMissing" | "typeMismatch" | "patternMismatch" | "tooShort" | "tooLong" | "rangeUnderflow" | "rangeOverflow" | "stepMismatch" | "badInput", ReactNode>>; disabled?: boolean; name?: string; validate?: (value, formValues) => string | string[] | null | Promise<\u2026>; validationMode?: "onSubmit" | "onBlur" | "onChange"; validationDebounceTime?: number; orientation?: "vertical" | "horizontal"; trailing?: ReactNode; className?: string; children: ReactElement } + other div props on the root',
+      description: `Wraps a single control element (e.g. <Input />) on Base UI Field and wires label (htmlFor + aria-labelledby), helper text and error (aria-describedby), aria-invalid, and required onto it automatically. Base UI-backed controls (Input, Textarea, Select, Combobox, NumberField, Checkbox, Switch, Slider, OtpField\u2026) register through context; the child is also cloned so plain elements keep the same wiring. error renders a destructive message and takes precedence; without it the slot shows the field's messages entry for the native constraint that failed (messages={{ valueMissing: "Enter a subject." }}), else Base UI's validation message (the browser's wording for a native constraint, validate, or Form errors). required adds the native attribute plus a visual asterisk (defaults to false). disabled disables the control and dims the label. name keys the field in Form errors / onFormSubmit. validationMode overrides the Form's. orientation defaults to "vertical" (label \u2192 control); "horizontal" places control then label inline for a single checkbox / switch / radio \u2014 the control centres on the label's first line (it stays there when the label wraps) and description/error sit in the label's column. trailing puts something at the end of the control's row: vertically, beside the control (a promo code's Apply button, the control taking the rest); horizontally, at the end of the label's first line (a facet count). Other props (data-*, id, aria-*) land on the root. The root, label, description, error and control carry data-invalid / data-valid, data-touched, data-dirty, data-filled, data-focused and data-disabled for state styling.`
     }
   ],
   tokensUsed: ["muted-foreground", "destructive"],
@@ -125,6 +130,10 @@ var formMeta = {
       label: "Field with an error",
       code: '<Field label="Password" error="Must be at least 8 characters."><Input type="password" /></Field>'
     },
+    {
+      label: "An input with its action",
+      code: '<Field label="Promo code" error={promoError} trailing={<Button variant="secondary" onClick={applyPromo}>Apply</Button>}><Input name="promo" autoCapitalize="characters" /></Field>'
+    },
     {
       label: "Your own wording for a missing value",
       code: '<Form onSubmit={handleSubmit}><Field label="Subject" required messages={{ valueMissing: "Enter a subject." }}><Input name="subject" /></Field><Button type="submit">Send</Button></Form>'

package/dist/components/media-tile/media-tile.js

@@ -28,7 +28,10 @@ function TileLink({
 function MediaTile({
   title,
   subtitle,
+  meta,
   src,
+  srcSet,
+  sizes,
   alt,
   seed,
   aspect = "square",
@@ -84,7 +87,18 @@ function MediaTile({
               ),
               children: subtitle
             }
-          ) : /* @__PURE__ */ jsx("p", { className: mediaTileSubtitleVariants({ size }), children: subtitle }) : null
+          ) : /* @__PURE__ */ jsx("p", { className: mediaTileSubtitleVariants({ size }), children: subtitle }) : null,
+          meta != null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "media-tile-meta",
+              className: cn(
+                mediaTileSubtitleVariants({ size }),
+                "flex flex-wrap items-center gap-x-2 gap-y-1 overflow-visible whitespace-normal"
+              ),
+              children: meta
+            }
+          ) : null
         ] }),
         /* @__PURE__ */ jsxs(
           AspectBox,
@@ -93,7 +107,7 @@ function MediaTile({
             "data-slot": "media-tile-cover",
             className: "order-first rounded-(--media-tile-radius)",
             children: [
-              /* @__PURE__ */ jsx(MediaImage, { src, alt, seed: seed ?? titleText, loading }),
+              /* @__PURE__ */ jsx(MediaImage, { src, srcSet, sizes, alt, seed: seed ?? titleText, loading }),
               linked || action != null ? (
                 // The tile answers the pointer and the keyboard alike: a light scrim
                 // deepens the cover so the action reads over any artwork. Hover only

package/dist/components/media-tile/media-tile.meta.js

@@ -3,6 +3,7 @@ var mediaTileMeta = {
   name: "MediaTile",
   summary: "A cover-first tile \u2014 square, 16:9 or poster artwork with an optional play-style action over it, then a title and a subtitle that can each be links \u2014 that is one link as a whole without nesting its other controls inside one.",
   status: "beta",
+  composition: 'AspectBox, MediaImage, a stretched link (or Card render), Badge appearance="overlay", Button',
   keywords: [
     "album",
     "album art",
@@ -63,7 +64,10 @@ var mediaTileMeta = {
   props: [
     { name: "title", type: "ReactNode", description: "The item's name. Seeds the fallback art when it is a string." },
     { name: "subtitle", type: "ReactNode", description: "The second line \u2014 an artist, a channel, a year." },
+    { name: "meta", type: "ReactNode", description: "Lines under the subtitle, in its muted type: a price beside its sale price, a count of finishes, a status Badge. A wrapping block, where the subtitle is one truncated line. Use it for a product tile instead of building one." },
     { name: "src", type: "string", description: "Cover image URL. Without one, or when it fails, the cover is GradientArt seeded by the item." },
+    { name: "srcSet", type: "string", description: "Responsive cover candidates, passed to the `<img>`." },
+    { name: "sizes", type: "string", description: 'The cover\'s layout width for `srcSet`, e.g. `"(min-width: 64rem) 25vw, 50vw"`.' },
     { name: "alt", type: "string", default: '""', description: "Cover alt text. Empty by default: the title below already names the item." },
     { name: "seed", type: "string | number", description: "Seeds the fallback art. Defaults to `title` when it is a string." },
     {
@@ -110,6 +114,10 @@ var mediaTileMeta = {
     "Truncated titles keep their full text in the link's accessible name and in a `title` tooltip."
   ],
   examples: [
+    {
+      label: "Product tile",
+      code: '<Grid minItemWidth="14rem" gap={4}>\n	{products.map((product) => (\n		<MediaTile\n			key={product.id}\n			aspect={4 / 5}\n			title={product.name}\n			subtitle={product.material}\n			src={product.image}\n			srcSet={product.imageSet}\n			sizes="(min-width: 64rem) 25vw, 50vw"\n			render={<Link to={`/products/${product.slug}`} />}\n			badge={product.isNew ? <Badge appearance="overlay">New</Badge> : undefined}\n			meta={\n				<>\n					<span className="text-foreground">{formatPrice(product.price)}</span>\n					<span>{product.finishes.length} finishes</span>\n				</>\n			}\n		/>\n	))}\n</Grid>'
+    },
     {
       label: "Album grid",
       code: '<Grid minItemWidth="10rem" gap={3}>\n	{albums.map((album) => (\n		<MediaTile\n			key={album.id}\n			title={album.title}\n			subtitle={album.artist}\n			src={album.cover}\n			render={<Link to={`/albums/${album.id}`} />}\n			subtitleRender={<Link to={`/artists/${album.artistId}`} />}\n			action={\n				<Button size="icon" aria-label={`Play ${album.title}`} onClick={() => play(album)}>\n					<Icon name="play" variant="solid" />\n				</Button>\n			}\n		/>\n	))}\n</Grid>'

package/dist/components/radio-card/radio-card.js

@@ -15,6 +15,7 @@ function RadioCard({
   className,
   title,
   description,
+  trailing,
   icon,
   tone = "neutral",
   titleClassName,
@@ -40,8 +41,11 @@ function RadioCard({
       )
     }
   );
-  const content = /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-    /* @__PURE__ */ jsx("span", { className: cn("text-title-sm", titleClassName), children: title }),
+  const content = /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+    trailing != null ? /* @__PURE__ */ jsxs("span", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("min-w-0 text-title-sm", titleClassName), children: title }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-body-md text-foreground tabular-nums", children: trailing })
+    ] }) : /* @__PURE__ */ jsx("span", { className: cn("text-title-sm", titleClassName), children: title }),
     description ? /* @__PURE__ */ jsx(
       "span",
       {

package/dist/components/radio-card/radio-card.meta.js

@@ -65,6 +65,11 @@ var radioCardMeta = {
       type: "ReactNode",
       description: "Optional supporting copy beneath the title (text-body-sm, muted)."
     },
+    {
+      name: "trailing",
+      type: "ReactNode",
+      description: "End-aligned on the title's line: a price, a delivery date, a count. The title takes the rest of the row."
+    },
     {
       name: "icon",
       type: "ReactNode",

package/dist/components/sheet/sheet.js

@@ -42,7 +42,21 @@ function SheetContent({
     reportSide?.(resolvedSide);
   }, [reportSide, resolvedSide]);
   const popupRef = useRef(null);
-  const mergedRef = useMemo(() => mergeRefs(popupRef, ref), [ref]);
+  const [popup, setPopup] = useState(null);
+  const mergedRef = useMemo(() => mergeRefs(popupRef, ref, setPopup), [ref]);
+  useIsomorphicLayoutEffect(() => {
+    if (!popup || resolvedSide !== "left" && resolvedSide !== "right") return;
+    const root = document.documentElement;
+    const name = `--sable-sheet-${resolvedSide}-w`;
+    const publish = () => root.style.setProperty(name, `${popup.offsetWidth}px`);
+    publish();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(publish);
+    observer?.observe(popup);
+    return () => {
+      observer?.disconnect();
+      root.style.removeProperty(name);
+    };
+  }, [popup, resolvedSide]);
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(Base.Backdrop, { className: "fixed inset-0 z-(--z-overlay) bg-overlay/(--scrim-alpha) opacity-[calc(1_-_var(--drawer-swipe-progress))] motion-fade data-[swiping]:transition-none" }),
     /* @__PURE__ */ jsx(Base.Viewport, { className: "fixed inset-0 z-(--z-overlay)", children: /* @__PURE__ */ jsx(
@@ -50,6 +64,7 @@ function SheetContent({
       {
         ref: mergedRef,
         initialFocus: initialFocus === void 0 ? (type) => type === "touch" ? popupRef.current : true : initialFocus,
+        "data-sable-sheet": resolvedSide,
         className: cn(sheetVariants({ side }), className),
         ...props,
         children: /* @__PURE__ */ jsx(Base.Content, { className: "contents", children: /* @__PURE__ */ jsx(PresentationProvider, { value: resolvedSide === "bottom" ? "sheet" : "page", children }) })

package/dist/components/stepper/stepper.js

@@ -33,6 +33,10 @@ function Stepper({
 }) {
   const items = Children.toArray(children).filter(isValidElement);
   const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
+  const hasCurrent = items.some((child, index) => {
+    const own = child.props.status;
+    return (own ?? (index < current ? "complete" : index === current ? "current" : "upcoming")) === "current";
+  });
   return /* @__PURE__ */ jsx(
     "ol",
     {
@@ -41,7 +45,8 @@ function Stepper({
         // isolate: the indicators' z-10 (above the connector) stays inside the
         // stepper instead of rising over sticky headers and nav bars.
         "isolate flex w-full",
-        orientation === "horizontal" ? "flex-row items-start gap-3" : "flex-col",
+        // A container, so the steps compact on the stepper's own width.
+        orientation === "horizontal" ? "@container/stepper flex-row items-start gap-3" : "flex-col",
         className
       ),
       ...props,
@@ -54,7 +59,8 @@ function Stepper({
             current,
             orientation,
             indicator,
-            statusLabels: labels
+            statusLabels: labels,
+            hasCurrent
           },
           children: child
         },
@@ -83,6 +89,7 @@ function StepperItem({
   const isLast = index === count - 1;
   const isCurrent = index === current;
   const statusLabel = (ctx?.statusLabels ?? DEFAULT_STATUS_LABELS)[status];
+  const hasCurrent = ctx?.hasCurrent ?? true;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     dot ? (
       // One title line tall (the step carries the title's type), so the dot
@@ -94,7 +101,14 @@ function StepperItem({
       {
         className: cn(
           "flex min-w-0 flex-col gap-0.5 text-start",
-          !dot && "min-h-(--control-xs) justify-center"
+          !dot && "min-h-(--control-xs) justify-center",
+          // Narrow and horizontal: three two-word titles wrapped under their
+          // connectors at 390px. The current step keeps its title; the rest
+          // are discs on screen and full titles to a screen reader.
+          // Keyed on the resolved status, not the index: a flow driven by each
+          // step's `status`, or finished (`current` past the end), still keeps
+          // the right title, or every title when no step is current.
+          orientation === "horizontal" && status !== "current" && hasCurrent && "@max-md/stepper:sr-only"
         ),
         children: [
           /* @__PURE__ */ jsxs(

package/dist/components/stepper/stepper.meta.js

@@ -73,7 +73,7 @@ var stepperMeta = {
       name: "orientation",
       type: '"horizontal" | "vertical"',
       default: '"horizontal"',
-      description: "Horizontal for a short flow across the top of a form; vertical for long flows, narrow columns or steps with descriptions."
+      description: "Horizontal for a short flow across the top of a form; vertical for long flows, narrow columns or steps with descriptions. A horizontal stepper narrower than 28rem (a phone) compacts itself: every disc stays, only the current step's title shows, and the other titles stay for screen readers. No breakpoint code needed."
     },
     {
       name: "indicator",

package/dist/components/toast/toast.js

@@ -103,6 +103,8 @@ function ToastViewport({
   return /* @__PURE__ */ jsx(ToastViewportContext.Provider, { value: { position, stacked }, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
     Base.Viewport,
     {
+      "data-sable-toast-viewport": "",
+      "data-position": position,
       className: cn(
         "fixed z-(--z-toast) w-95 max-w-[90vw] outline-none",
         // Stacked toasts are positioned against the viewport, not laid out in it.
@@ -119,6 +121,7 @@ function ToastRoot({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     Base.Root,
     {
+      "data-sable-toast-stacked": stacked ? "" : void 0,
       className: cn(
         "flex w-full gap-3 rounded-md border border-border-floating bg-popover p-4 text-popover-foreground shadow-xl",
         stacked ? [STACKED_ROOT, STACKED_EDGE[edgeOf(position)]] : ENTER_MOTION[position],

package/dist/file-hashes.json

@@ -24,7 +24,7 @@
 	"dist/blocks/goal-progress-block.meta.js": "3e5b376bf58bdb4b",
 	"dist/blocks/hero-block.js": "ac74e80d4d7d2ad9",
 	"dist/blocks/hero-block.meta.js": "2dd2e5be2472a563",
-	"dist/blocks/index.d.ts": "3a17da01eaa6b5f4",
+	"dist/blocks/index.d.ts": "7dc3a0506334de38",
 	"dist/blocks/index.js": "8116f4581aad860e",
 	"dist/blocks/invite-team-block.js": "be4df15518252535",
 	"dist/blocks/invite-team-block.meta.js": "fd57b632f0f32276",
@@ -89,9 +89,10 @@
 	"dist/components/app-header/app-header.meta.js": "708f75abae1bb376",
 	"dist/components/app-header/index.js": "012804273e56f06d",
 	"dist/components/app-shell/app-shell-dock.js": "1038582b11567a8a",
-	"dist/components/app-shell/app-shell.js": "983f2c34bf5e8d75",
-	"dist/components/app-shell/app-shell.meta.js": "d7fc13df89305638",
-	"dist/components/app-shell/index.js": "54cfab2dbacb0216",
+	"dist/components/app-shell/app-shell.js": "88d2d0d1f4e11374",
+	"dist/components/app-shell/app-shell.meta.js": "77c4bc3e2fa16ec0",
+	"dist/components/app-shell/index.js": "976c14a186f290ec",
+	"dist/components/app-shell/skip-link.js": "59f149e155942e69",
 	"dist/components/area-chart/area-chart.js": "ddcc0a0f65328dea",
 	"dist/components/area-chart/area-chart.meta.js": "ba9ac76647282b0c",
 	"dist/components/area-chart/index.js": "51abe421742a4b41",
@@ -127,15 +128,15 @@
 	"dist/components/bubble/bubble.meta.js": "2202d4226cf79eb6",
 	"dist/components/bubble/bubble.variants.js": "b1eefabd9f0bb425",
 	"dist/components/bubble/index.js": "dfdc5326d5050d12",
-	"dist/components/button/button.js": "66868eaaaed21718",
-	"dist/components/button/button.meta.js": "dca1d77177e5d2aa",
+	"dist/components/button/button.js": "95d4cea99b77a48f",
+	"dist/components/button/button.meta.js": "aa62fe875a12ac8a",
 	"dist/components/button/button.variants.js": "d3054d6389644df0",
 	"dist/components/button/index.js": "1ef5e4068111496a",
 	"dist/components/calendar/calendar.js": "91321f1ea8843a11",
 	"dist/components/calendar/calendar.meta.js": "46565db6017d2706",
 	"dist/components/calendar/index.js": "24c1d513b60c972a",
 	"dist/components/card/card.js": "0b864f24d922a0c9",
-	"dist/components/card/card.meta.js": "e2b8107ece1ca7ca",
+	"dist/components/card/card.meta.js": "2cee6606ed8720cc",
 	"dist/components/card/index.js": "d6b4b33cd2a0c862",
 	"dist/components/carousel/carousel.js": "09aef818b8130d57",
 	"dist/components/carousel/carousel.meta.js": "d45f0086b2e40632",
@@ -169,7 +170,7 @@
 	"dist/components/combobox/combobox.meta.js": "38ef70bf96a3cf87",
 	"dist/components/combobox/index.js": "f8f9863cf4f7e59b",
 	"dist/components/command-menu/command-menu-trigger.js": "30b1606fb611c758",
-	"dist/components/command-menu/command-menu.js": "c126d5a07b936311",
+	"dist/components/command-menu/command-menu.js": "3478c25118653d88",
 	"dist/components/command-menu/command-menu.meta.js": "dde6c79e36a55f25",
 	"dist/components/command-menu/index.js": "c49dd188ea788ba5",
 	"dist/components/context-card/context-card.js": "ab28de9684e32eea",
@@ -185,7 +186,7 @@
 	"dist/components/date-picker/date-picker.meta.js": "a56f356cf633d7e8",
 	"dist/components/date-picker/index.js": "44e1227972891934",
 	"dist/components/date-tile/date-tile.js": "7458bf733bc64ab2",
-	"dist/components/date-tile/date-tile.meta.js": "c3e119d069bf66e6",
+	"dist/components/date-tile/date-tile.meta.js": "0bc0081c8cb73535",
 	"dist/components/date-tile/index.js": "684eef3a72b11651",
 	"dist/components/destructive-action-modal/destructive-action-modal.js": "3806d39cb3fb0cdf",
 	"dist/components/destructive-action-modal/destructive-action-modal.meta.js": "e81a94de90f8eccf",
@@ -204,10 +205,10 @@
 	"dist/components/entity/entity.variants.js": "8838fb5cf6f304f1",
 	"dist/components/entity/index.js": "1397602aa7068da8",
 	"dist/components/feedback/feedback.js": "af27a7be7d8e0552",
-	"dist/components/feedback/feedback.meta.js": "286f3b2331e02636",
+	"dist/components/feedback/feedback.meta.js": "a37f92831e6e24f2",
 	"dist/components/feedback/index.js": "fd1ab40c9d879286",
-	"dist/components/fieldset/fieldset.js": "b3618d9987ad4dcb",
-	"dist/components/fieldset/fieldset.meta.js": "84842564127c6629",
+	"dist/components/fieldset/fieldset.js": "08d02302b6866f8e",
+	"dist/components/fieldset/fieldset.meta.js": "64be6d633de27e04",
 	"dist/components/fieldset/index.js": "9def974be7511a5c",
 	"dist/components/file-dropzone/file-dropzone.js": "668f2325feba6b6d",
 	"dist/components/file-dropzone/file-dropzone.meta.js": "6f7f0601319576ae",
@@ -216,8 +217,8 @@
 	"dist/components/font-picker/font-picker.js": "1d76108197a03759",
 	"dist/components/font-picker/font-picker.meta.js": "846401404a0e03c5",
 	"dist/components/font-picker/index.js": "eb8b97fcda8ff592",
-	"dist/components/form/form.js": "3b6497305d155da8",
-	"dist/components/form/form.meta.js": "071442ffd103c43c",
+	"dist/components/form/form.js": "af2fa2d3cb54d125",
+	"dist/components/form/form.meta.js": "1e377418406a019d",
 	"dist/components/form/index.js": "6c3047e437b10fba",
 	"dist/components/gliding-highlight/gliding-highlight.js": "c424c85af1cc5665",
 	"dist/components/gliding-highlight/gliding-highlight.meta.js": "4aecad0e1aabea90",
@@ -253,8 +254,8 @@
 	"dist/components/media-image/media-image.js": "f68499e9f84b6e64",
 	"dist/components/media-image/media-image.meta.js": "0778fd790511a701",
 	"dist/components/media-tile/index.js": "00281f6f8cc246d1",
-	"dist/components/media-tile/media-tile.js": "9396be50ea93808d",
-	"dist/components/media-tile/media-tile.meta.js": "2229f0c98e1cfea8",
+	"dist/components/media-tile/media-tile.js": "faf79c27ec15c8d4",
+	"dist/components/media-tile/media-tile.meta.js": "6a21970f9b463812",
 	"dist/components/media-tile/media-tile.variants.js": "e22c08004b4a55ad",
 	"dist/components/menu/index.js": "44a0f949be1272fb",
 	"dist/components/menu/menu.js": "55d24cd48752830a",
@@ -333,8 +334,8 @@
 	"dist/components/radio/radio.js": "dce8ff6dd0deaa5e",
 	"dist/components/radio/radio.meta.js": "0b0419bde53f857d",
 	"dist/components/radio-card/index.js": "ff815b13ce46e2bb",
-	"dist/components/radio-card/radio-card.js": "4f8c35a3b44b67e6",
-	"dist/components/radio-card/radio-card.meta.js": "3941f904085e471b",
+	"dist/components/radio-card/radio-card.js": "29c459d88339f035",
+	"dist/components/radio-card/radio-card.meta.js": "7370c85b8f32ffad",
 	"dist/components/radio-card/radio-card.variants.js": "86778fe9e4888cd1",
 	"dist/components/relative-time/index.js": "02e9b7b91ccad470",
 	"dist/components/relative-time/relative-time.js": "db5cd286b36dee74",
@@ -366,7 +367,7 @@
 	"dist/components/settings-menu/settings-menu.meta.js": "46bdda712ce13d85",
 	"dist/components/settings-menu/settings-menu.variants.js": "1eefc629793ed7b3",
 	"dist/components/sheet/index.js": "b19aacba55e7de80",
-	"dist/components/sheet/sheet.js": "131b7f06ec9a35c9",
+	"dist/components/sheet/sheet.js": "61e0c11831dfa940",
 	"dist/components/sheet/sheet.meta.js": "28cd51d5ba9872db",
 	"dist/components/sheet/sheet.variants.js": "672d2fd7f746bd57",
 	"dist/components/show-more/index.js": "e7c7e37ffedde2c2",
@@ -399,8 +400,8 @@
 	"dist/components/status-dot/status-dot.meta.js": "90200e97feb25c97",
 	"dist/components/status-dot/status-dot.variants.js": "d65605a0376e7d3b",
 	"dist/components/stepper/index.js": "2346537b50c95017",
-	"dist/components/stepper/stepper.js": "4bcb5ea9b5515449",
-	"dist/components/stepper/stepper.meta.js": "2e9cb9935eb21282",
+	"dist/components/stepper/stepper.js": "8e1bdfc654e5aa3e",
+	"dist/components/stepper/stepper.meta.js": "6d17c7521e2aa31e",
 	"dist/components/stepper/stepper.variants.js": "3c343c6e38e39d80",
 	"dist/components/streaming-text/index.js": "c46856aa7c0718f5",
 	"dist/components/streaming-text/streaming-text.js": "e450c4d5e312a6c5",
@@ -428,7 +429,7 @@
 	"dist/components/thinking-orb/thinking-orb.meta.js": "dcc1982c0f9e9d01",
 	"dist/components/thinking-orb/thinking-orb.render.js": "1d561ac1ffcd1e97",
 	"dist/components/toast/index.js": "d13be0a6c335931d",
-	"dist/components/toast/toast.js": "23041aac9b57a88b",
+	"dist/components/toast/toast.js": "f58c5e39eb3158a3",
 	"dist/components/toast/toast.meta.js": "493dec13b784b6bc",
 	"dist/components/toggle/index.js": "84a0a4bf596a1b7d",
 	"dist/components/toggle/toggle.js": "90d0deb9c6af0d61",
@@ -470,8 +471,8 @@
 	"dist/icon-sets/brands.js": "9a37d8739f14f2a9",
 	"dist/icon-sets/reicon.d.ts": "52f6e41dc8137b4e",
 	"dist/icon-sets/reicon.js": "89a930f17cc90cde",
-	"dist/index.d.ts": "5412b556b1d05aa9",
-	"dist/index.js": "3f9d4da26572073f",
+	"dist/index.d.ts": "b3c6e9a4124867da",
+	"dist/index.js": "b7e51e26dc0b1e6c",
 	"dist/ios/chrome.css": "a7ca9e3735d8658e",
 	"dist/ios/chrome.js": "37091fef7b68bd28",
 	"dist/ios/frame.css": "dd2703c944ce575a",
@@ -524,6 +525,7 @@
 	"dist/lib/heading-row.js": "ef1faf4955e0fec6",
 	"dist/lib/highlight-glide.js": "04a077a17dad7e52",
 	"dist/lib/hit-target.js": "b2ad19bc6d3271e0",
+	"dist/lib/is-promise.js": "cc36f1bd7d4d4461",
 	"dist/lib/meta.js": "e3b0c44298fc1c14",
 	"dist/lib/portal-theme-scope.js": "2c0d22d961e51174",
 	"dist/lib/presentation.js": "8e4f69cd7205bd55",
@@ -540,7 +542,7 @@
 	"dist/lib/use-resize-observer.js": "4f08e280d64be22c",
 	"dist/lib/use-scroll-activity.js": "793394a8c952e697",
 	"dist/lib/use-wheel-to-horizontal.js": "5f886b1033db9129",
-	"dist/meta-CcE_SeFu.d.ts": "c1a10b5cf75438de",
+	"dist/meta-DVG8ceze.d.ts": "60cdb0adc726bc03",
 	"dist/motion/MotionProvider.js": "feeab4e6ce816a5e",
 	"dist/motion/Presence.js": "21fc6f1c68207718",
 	"dist/motion/Reveal.js": "b80396095aa2de96",
@@ -559,7 +561,7 @@
 	"dist/patterns/dashboard-page.meta.js": "da27758c17fe15a2",
 	"dist/patterns/feed-page.js": "0fabf456c32dbbad",
 	"dist/patterns/feed-page.meta.js": "ab079074b87ad23b",
-	"dist/patterns/index.d.ts": "ed15cd27eeb74f4f",
+	"dist/patterns/index.d.ts": "7511ee8632e26bbf",
 	"dist/patterns/index.js": "3ff5fabb1afbf8dc",
 	"dist/patterns/landing-page.js": "4f3294839ac36cd6",
 	"dist/patterns/landing-page.meta.js": "95d34273ee999eea",
@@ -570,7 +572,7 @@
 	"dist/presets/index.d.ts": "143528fa9cbec492",
 	"dist/presets/index.js": "51babe07a2424380",
 	"dist/registry-CyL28OzJ.d.ts": "b068fc89571517d8",
-	"dist/styles.css": "ce0dc2926e952ef3",
+	"dist/styles.css": "5a8e45c86522c82f",
 	"dist/theme-provider-S0NVJs2Y.d.ts": "ae7728dddd10f563",
 	"dist/themes/_contract.js": "cacc81c9295d55a2",
 	"dist/themes/atelier/atelier.css": "e693fec4a6ae71a8",