@sableui/react 0.9.0 → 0.10.0

package/dist/components/button/button.meta.js

@@ -232,7 +232,7 @@ var buttonMeta = {
     "loading sets aria-busy and disables activation (disabled on a native button, aria-disabled on a render element) so the action can't double-fire."
   ],
   examples: [
-    { label: "Primary", code: "<Button>Collect</Button>" },
+    { label: "Primary", code: "<Button>Save changes</Button>" },
     {
       label: "Secondary + ghost",
       code: '<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="ghost">Skip</Button></Row>'
@@ -259,7 +259,7 @@ var buttonMeta = {
     },
     {
       label: "Destructive with confirmation copy",
-      code: '<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="destructive">Delete edition</Button></Row>'
+      code: '<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="destructive">Delete project</Button></Row>'
     },
     {
       label: "Leading icon",
@@ -302,7 +302,7 @@ var buttonMeta = {
     },
     {
       label: "Action in a solid Banner",
-      code: '<Banner tone="warning" appearance="solid" action={<Button variant="on-color" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>'
+      code: '<Banner tone="warning" appearance="solid" action={<Button variant="on-color" size="sm">Reconnect</Button>}>Calendar sync paused.</Banner>'
     }
   ]
 };

package/dist/components/card/card.js

@@ -11,9 +11,9 @@ var DENSITY_PAD = {
   compact: "calc(var(--spacing) * 4)"
   // p-4
 };
-var INTERACTIVE_BASE = "[&:is(a[href],button)]:motion-interactive [&:is(a[href],button)]:cursor-pointer [&:is(button)]:w-full [&:is(button)]:text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var INTERACTIVE_BASE = "[&:is(a[href],button)]:motion-interactive [&:is(a[href],button)]:cursor-pointer [&:is(button)]:w-full [&:is(button)]:text-start focus-visible:ring-2 focus-visible:ring-ring";
 var INTERACTIVE_HOVER = {
-  default: "[&:is(a[href],button)]:hover:border-border-strong [&:is(a[href],button)]:hover:shadow-md",
+  default: "[&:is(a[href],button)]:hover:outline-border-strong [&:is(a[href],button)]:hover:shadow-md",
   flat: "[&:is(a[href],button)]:hover:bg-muted"
 };
 function Card({
@@ -41,9 +41,15 @@ function Card({
         // sable-frame — at Sable's paddings the subtraction runs to ~0, and a
         // near-square box inside a rounded card reads as another system.
         // A field or panel inside reads it (ChatComposer does).
-        "[--card-inner-radius:max(var(--radius-sm),calc(var(--radius-lg)-var(--card-p)-1px))]",
+        "[--card-inner-radius:max(var(--radius-sm),calc(var(--radius-lg)-var(--card-p)))]",
         // Declares its surface so sable-well / sable-surface-interactive inside derive from the card.
-        variant === "default" && "border border-border bg-card shadow-sm [--sable-surface-bg:var(--card)]",
+        // The edge is an outline drawn 1px INSIDE the box, not a border: it
+        // takes no space, so the card's padding is whole baseline steps and
+        // its content starts on the rhythm instead of a pixel below it. It
+        // paints above the card's in-flow content (a flush table's row fill);
+        // a positioned child with a fill of its own would cover it, which no
+        // card part has. DESIGN.md → Vertical rhythm.
+        variant === "default" && "outline-1 -outline-offset-1 outline-border bg-card shadow-sm [--sable-surface-bg:var(--card)]",
         // A CardList or a flush CardContent (an edge-to-edge Table) runs its
         // rows to the card's edges, and a row's hover fill or a TableFooter's
         // tint would otherwise poke square corners out past the card's
@@ -154,12 +160,15 @@ function CardList({
     {
       "data-slot": "card-list",
       className: cn(
-        "flex flex-col divide-y divide-border [--entity-radius:0px] [--entity-px:var(--card-p,--spacing(6))] [--entity-py:calc(var(--card-p,--spacing(6))/2)]",
+        "flex flex-col [--entity-radius:0px] [--entity-px:var(--card-p,--spacing(6))] [--entity-py:calc(var(--card-p,--spacing(6))/2)]",
         // Between rows the half padding is enough (each side of a hairline
         // gets it); against the card's own edge the first and last rows take
         // the full card padding, so the list is inset like every other card.
         "*:first:pt-[var(--card-p,--spacing(6))] *:last:pb-[var(--card-p,--spacing(6))]",
-        "[[data-slot=card-header]+&]:mt-[calc(var(--card-p,--spacing(6))/2)] [[data-slot=card-header]+&]:border-t [[data-slot=card-header]+&]:border-border",
+        // Hairlines between rows are inset shadows, not borders: a 1px border
+        // per row pushed every row below it a pixel further off the rhythm.
+        "[&>*+*]:shadow-[inset_0_1px_0_var(--border)]",
+        "[[data-slot=card-header]+&]:mt-[calc(var(--card-p,--spacing(6))/2)] [[data-slot=card-header]+&>*:first-child]:shadow-[inset_0_1px_0_var(--border)]",
         className
       ),
       ...props
@@ -182,7 +191,7 @@ function CardFooter({
       className: cn(
         "flex items-center gap-2 p-[var(--card-p,--spacing(6))] pt-0",
         "[[data-slot=card-header]+&]:pt-[var(--card-p,--spacing(6))]",
-        "[:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:border-t [:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:border-border [:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:pt-[var(--card-p,--spacing(6))]",
+        "[:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:shadow-[inset_0_1px_0_var(--border)] [:is([data-slot=card-list],[data-slot=card-content][data-flush])+&]:pt-[var(--card-p,--spacing(6))]",
         className,
         stacked && "mt-auto flex-col-reverse items-stretch justify-start"
       ),

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

@@ -179,11 +179,11 @@ var cardMeta = {
   examples: [
     {
       label: "With parts",
-      code: '<Card><CardHeader><CardTitle>Edition</CardTitle><CardDescription>Limited run of 100.</CardDescription></CardHeader><CardContent><p className="text-body-md">Each collector receives a signed print and the on-chain edition.</p></CardContent></Card>'
+      code: '<Card><CardHeader><CardTitle>Studio plan</CardTitle><CardDescription>Up to 10 seats.</CardDescription></CardHeader><CardContent><p className="text-body-md">Every seat gets unlimited projects and shared reports.</p></CardContent></Card>'
     },
     {
       label: "With a header action",
-      code: '<Card><CardHeader><CardTitle>Edition</CardTitle><CardAction><Button variant="ghost" size="icon-sm" aria-label="More"><Icon name="ellipsis" /></Button></CardAction></CardHeader><CardContent><p className="text-body-md text-muted-foreground">24 of 100 collected.</p></CardContent></Card>'
+      code: '<Card><CardHeader><CardTitle>Seats</CardTitle><CardAction><Button variant="ghost" size="icon-sm" aria-label="More"><Icon name="ellipsis" /></Button></CardAction></CardHeader><CardContent><p className="text-body-md text-muted-foreground">24 of 100 seats in use.</p></CardContent></Card>'
     },
     {
       label: "Compact section panel",
@@ -191,7 +191,7 @@ var cardMeta = {
     },
     {
       label: "Product card with actions",
-      code: '<Card><CardHeader><CardTitle>Midnight Archive</CardTitle><CardDescription>Edition #24 of 100</CardDescription><CardAction><Badge tone="edition">Edition</Badge></CardAction></CardHeader><CardContent><p className="text-body-sm text-muted-foreground">A signed print and token-gated download for collectors.</p></CardContent><CardFooter><Button size="sm">Collect</Button><Button size="sm" variant="ghost">Preview</Button></CardFooter></Card>'
+      code: '<Card><CardHeader><CardTitle>Midnight Archive</CardTitle><CardDescription>Template \xB7 24 pages</CardDescription><CardAction><Badge tone="1">New</Badge></CardAction></CardHeader><CardContent><p className="text-body-sm text-muted-foreground">A project template with a brief, a timeline and a review board.</p></CardContent><CardFooter><Button size="sm">Use template</Button><Button size="sm" variant="ghost">Preview</Button></CardFooter></Card>'
     },
     {
       label: "Whole card as a link",
@@ -199,7 +199,7 @@ var cardMeta = {
     },
     {
       label: "Metric card",
-      code: '<Card density="compact"><CardHeader><CardTitle>Revenue</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader><CardContent><p className="text-heading-3">128.4 SOL</p><p className="text-body-sm text-success">+12.8% from previous period</p></CardContent></Card>'
+      code: '<Card density="compact"><CardHeader><CardTitle>Revenue</CardTitle><CardDescription>Last 30 days</CardDescription></CardHeader><CardContent><p className="text-heading-3">$12,840</p><p className="text-body-sm text-success">+12.8% from previous period</p></CardContent></Card>'
     },
     {
       label: "List card",

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

@@ -79,7 +79,7 @@ var checkboxCardMeta = {
     },
     {
       name: "tone",
-      type: '"neutral" | "standard" | "collectible" | "edition" | "info" | "warning"',
+      type: '"neutral" | "3" | "2" | "1" | "info" | "warning"',
       default: '"neutral"',
       description: "Semantic colour the checked state carries across the border, checkbox box, and icon."
     },
@@ -102,7 +102,7 @@ var checkboxCardMeta = {
     }
   ],
   variants: {
-    tone: ["neutral", "standard", "collectible", "edition", "info", "warning"]
+    tone: ["neutral", "3", "2", "1", "info", "warning"]
   },
   tokensUsed: [
     "input",
@@ -113,12 +113,12 @@ var checkboxCardMeta = {
     "accent",
     "foreground",
     "muted-foreground",
-    "tone-standard",
-    "tone-standard-foreground",
-    "tone-collectible",
-    "tone-collectible-foreground",
-    "tone-edition",
-    "tone-edition-foreground",
+    "tone-3",
+    "tone-3-foreground",
+    "tone-2",
+    "tone-2-foreground",
+    "tone-1",
+    "tone-1-foreground",
     "tone-info",
     "tone-info-foreground",
     "tone-warning",
@@ -141,11 +141,11 @@ var checkboxCardMeta = {
     },
     {
       label: "A single independent card",
-      code: '<CheckboxCard title="Email me a receipt" description="Sent when the mint settles" checked={receipt} onCheckedChange={setReceipt} />'
+      code: '<CheckboxCard title="Email me a receipt" description="Sent when the payment settles" checked={receipt} onCheckedChange={setReceipt} />'
     },
     {
       label: "Toned with description",
-      code: '<CheckboxCard tone="edition" title="Editions" description="Sell as numbered NFT editions" defaultChecked />'
+      code: '<CheckboxCard tone="1" title="Reports" description="Weekly usage reports by email" defaultChecked />'
     }
   ]
 };

package/dist/components/checkbox-card/checkbox-card.variants.js

@@ -7,23 +7,23 @@ var checkboxCardToneClasses = {
     check: "text-primary-foreground",
     glyph: "text-foreground"
   },
-  standard: {
-    card: SELECTION_CARD_CHECKED.standard,
-    box: "group-data-[checked]:border-tone-standard group-data-[checked]:bg-tone-standard group-data-[indeterminate]:border-tone-standard group-data-[indeterminate]:bg-tone-standard",
-    check: "text-tone-standard-foreground",
-    glyph: "text-tone-standard"
+  "3": {
+    card: SELECTION_CARD_CHECKED["3"],
+    box: "group-data-[checked]:border-tone-3 group-data-[checked]:bg-tone-3 group-data-[indeterminate]:border-tone-3 group-data-[indeterminate]:bg-tone-3",
+    check: "text-tone-3-foreground",
+    glyph: "text-tone-3"
   },
-  collectible: {
-    card: SELECTION_CARD_CHECKED.collectible,
-    box: "group-data-[checked]:border-tone-collectible group-data-[checked]:bg-tone-collectible group-data-[indeterminate]:border-tone-collectible group-data-[indeterminate]:bg-tone-collectible",
-    check: "text-tone-collectible-foreground",
-    glyph: "text-tone-collectible"
+  "2": {
+    card: SELECTION_CARD_CHECKED["2"],
+    box: "group-data-[checked]:border-tone-2 group-data-[checked]:bg-tone-2 group-data-[indeterminate]:border-tone-2 group-data-[indeterminate]:bg-tone-2",
+    check: "text-tone-2-foreground",
+    glyph: "text-tone-2"
   },
-  edition: {
-    card: SELECTION_CARD_CHECKED.edition,
-    box: "group-data-[checked]:border-tone-edition group-data-[checked]:bg-tone-edition group-data-[indeterminate]:border-tone-edition group-data-[indeterminate]:bg-tone-edition",
-    check: "text-tone-edition-foreground",
-    glyph: "text-tone-edition"
+  "1": {
+    card: SELECTION_CARD_CHECKED["1"],
+    box: "group-data-[checked]:border-tone-1 group-data-[checked]:bg-tone-1 group-data-[indeterminate]:border-tone-1 group-data-[indeterminate]:bg-tone-1",
+    check: "text-tone-1-foreground",
+    glyph: "text-tone-1"
   },
   info: {
     card: SELECTION_CARD_CHECKED.info,

package/dist/components/code-block/code-block.meta.js

@@ -26,7 +26,7 @@ var codeBlockMeta = {
       },
       {
         guidance: "do",
-        description: "Wire highlighting once with CodeHighlightProvider and map token colors to semantic tone tokens (keywords \u2192 tone-edition, strings \u2192 success, comments \u2192 muted-foreground), so code follows the theme instead of a fixed palette."
+        description: "Wire highlighting once with CodeHighlightProvider and map token colors to semantic tone tokens (keywords \u2192 tone-1, strings \u2192 success, comments \u2192 muted-foreground), so code follows the theme instead of a fixed palette."
       },
       {
         guidance: "dont",

package/dist/components/command-menu/command-menu.js

@@ -194,6 +194,8 @@ function CommandMenuBody({
             variant: "ghost",
             size: "icon-xs",
             "aria-label": "Clear search",
+            tabIndex: -1,
+            onMouseDown: (event) => event.preventDefault(),
             className: "-my-1 text-muted-foreground hover:text-foreground",
             onClick: () => {
               setQuery("");

package/dist/components/command-menu/command-menu.meta.js

@@ -250,7 +250,7 @@ var commandMenuMeta = {
     },
     {
       label: "Grouped launcher",
-      code: '<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createEdition()}>New edition</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>'
+      code: '<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createProject()}>New project</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>'
     },
     {
       label: "Consumer-owned ranking",

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

@@ -1,7 +1,7 @@
 // src/components/context-card/context-card.meta.ts
 var contextCardMeta = {
   name: "ContextCard",
-  summary: "Hover/focus-triggered rich preview card over Base UI PreviewCard. Reveals contextual content (a profile, an edition summary) from an inline anchor; 20rem-wide surface with delayed open and collision-aware positioning.",
+  summary: "Hover/focus-triggered rich preview card over Base UI PreviewCard. Reveals contextual content (a profile, a project summary) from an inline anchor; 20rem-wide surface with delayed open and collision-aware positioning.",
   status: "stable",
   keywords: [
     "context card",
@@ -93,7 +93,7 @@ var contextCardMeta = {
   examples: [
     {
       label: "Profile preview",
-      code: "<ContextCard><ContextCardTrigger render={<a href='/u/ada' className='text-title-sm underline-offset-2 hover:underline'>@ada</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='AL' size='lg' />} title='Ada Lovelace' subtitle='@ada' /><p className='mt-3 text-body-sm text-muted-foreground'>Minting generative editions on Solana. Permanently on Arweave.</p></ContextCardContent></ContextCard>"
+      code: "<ContextCard><ContextCardTrigger render={<a href='/u/ada' className='text-title-sm underline-offset-2 hover:underline'>@ada</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='AL' size='lg' />} title='Ada Lovelace' subtitle='@ada' /><p className='mt-3 text-body-sm text-muted-foreground'>Product designer. Building tools for small teams.</p></ContextCardContent></ContextCard>"
     },
     {
       label: "With stat row",

package/dist/components/destructive-action-modal/destructive-action-modal.meta.js

@@ -127,7 +127,7 @@ var destructiveActionModalMeta = {
     },
     {
       label: "Body slot + type-to-confirm",
-      code: "<DestructiveActionModal open={open} onOpenChange={setOpen} title='Delete this post?' confirmText='gold rush' confirmLabel='Delete forever' onConfirm={handleDelete}><Note tone='warning'>Collectors who minted this edition keep their copies.</Note></DestructiveActionModal>"
+      code: "<DestructiveActionModal open={open} onOpenChange={setOpen} title='Delete this post?' confirmText='gold rush' confirmLabel='Delete forever' onConfirm={handleDelete}><Note tone='warning'>People you shared this post with lose access to it.</Note></DestructiveActionModal>"
     }
   ]
 };

package/dist/components/dialog/dialog.meta.js

@@ -222,7 +222,7 @@ var dialogMeta = {
     },
     {
       label: "Basic",
-      code: '<Dialog><DialogTrigger render={<Button>Open</Button>} /><DialogContent><DialogHeader><DialogTitle>Edition details</DialogTitle><DialogDescription>A limited run of 100, stored permanently on Arweave.</DialogDescription></DialogHeader><DialogFooter><DialogClose render={<Button variant="secondary">Close</Button>} /><DialogClose render={<Button>Collect</Button>} /></DialogFooter></DialogContent></Dialog>'
+      code: '<Dialog><DialogTrigger render={<Button>Open</Button>} /><DialogContent><DialogHeader><DialogTitle>Plan details</DialogTitle><DialogDescription>Up to 10 seats, billed monthly per seat.</DialogDescription></DialogHeader><DialogFooter><DialogClose render={<Button variant="secondary">Close</Button>} /><DialogClose render={<Button>Upgrade</Button>} /></DialogFooter></DialogContent></Dialog>'
     },
     {
       label: "Settings form",
@@ -230,7 +230,7 @@ var dialogMeta = {
     },
     {
       label: "Destructive confirmation",
-      code: '<AlertDialog><AlertDialogTrigger render={<Button variant="destructive">Delete edition</Button>} /><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete edition?</AlertDialogTitle><AlertDialogDescription>This removes the edition and cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose render={<Button variant="secondary">Cancel</Button>} /><Button variant="destructive" onClick={deleteEdition}>Delete edition</Button></AlertDialogFooter></AlertDialogContent></AlertDialog>'
+      code: '<AlertDialog><AlertDialogTrigger render={<Button variant="destructive">Delete project</Button>} /><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete project?</AlertDialogTitle><AlertDialogDescription>This removes the project and cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogClose render={<Button variant="secondary">Cancel</Button>} /><Button variant="destructive" onClick={deleteProject}>Delete project</Button></AlertDialogFooter></AlertDialogContent></AlertDialog>'
     }
   ]
 };

package/dist/components/disclosure-picker/disclosure-picker.js

@@ -361,7 +361,10 @@ function DisclosurePickerOption({
   note,
   disabled = false,
   textValue,
+  onRemove,
+  removeLabel = "Remove",
   className,
+  ref,
   onClick,
   ...props
 }) {
@@ -369,13 +372,27 @@ function DisclosurePickerOption({
   if (!list) throw new Error("<DisclosurePickerOption> must be rendered inside <DisclosurePickerList>.");
   const { size, pick } = list;
   const selected = list.value === value;
+  const optionRef = useRef(null);
+  const remove = () => {
+    const option = optionRef.current;
+    const options = [...option?.closest('[role="listbox"]')?.querySelectorAll(ENABLED_OPTION) ?? []];
+    const index = option ? options.indexOf(option) : -1;
+    if (option?.contains(document.activeElement)) moveTo(options[index + 1] ?? options[index - 1]);
+    onRemove?.();
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...props,
+      ref: (node) => {
+        optionRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       role: "option",
       "aria-selected": selected,
       "aria-disabled": disabled || void 0,
+      "aria-keyshortcuts": onRemove ? "Delete" : void 0,
       "data-value": value,
       "data-text-value": textValue,
       "data-selected": selected ? "" : void 0,
@@ -383,8 +400,13 @@ function DisclosurePickerOption({
         onClick?.(event);
         if (!event.defaultPrevented && !disabled) pick(value);
       },
+      onKeyDown: onRemove ? (event) => {
+        if (event.key !== "Delete" && event.key !== "Backspace") return;
+        event.preventDefault();
+        remove();
+      } : void 0,
       className: cn(
-        "flex items-center gap-3 rounded-sm px-(--item-px) text-start motion-interactive",
+        "group/option flex items-center gap-3 rounded-sm px-(--item-px) text-start motion-interactive",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
         size === "xs" ? "min-h-(--control-xs)" : "min-h-(--control-sm) py-1",
         // Chosen: lifted out of the well, like a segmented control's knob.
@@ -396,7 +418,31 @@ function DisclosurePickerOption({
           media != null ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: media }) : null,
           /* @__PURE__ */ jsx("span", { "data-disclosure-picker-label": "", className: cn("min-w-0 truncate", size === "xs" ? "text-ui-md" : "text-body-md"), children })
         ] }),
-        note != null ? /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-muted-foreground", size === "xs" ? "text-ui-sm" : "text-caption"), children: note }) : selected ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "shrink-0 text-sm" }) : null
+        note != null ? /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-muted-foreground", size === "xs" ? "text-ui-sm" : "text-caption"), children: note }) : selected ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "shrink-0 text-sm" }) : null,
+        onRemove ? (
+          // A pointer target, not a control: an option's children are presentational,
+          // so a nested button would be invisible to assistive tech. The keyboard
+          // path is Delete on the row, announced through aria-keyshortcuts.
+          // design-lint-disable-next-line clickable-static -- pointer twin of Delete on the focused option; a button cannot live inside role="option"
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              title: removeLabel,
+              "data-disclosure-picker-remove": "",
+              onClick: (event) => {
+                event.preventDefault();
+                remove();
+              },
+              className: cn(
+                "-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-xs text-muted-foreground motion-interactive hover:text-destructive",
+                size === "xs" ? "size-5 text-xs" : "size-6 text-sm",
+                "opacity-0 group-hover/option:opacity-100 group-focus-visible/option:opacity-100 pointer-coarse:opacity-100"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { name: "trash" })
+            }
+          )
+        ) : null
       ]
     }
   );

package/dist/components/disclosure-picker/disclosure-picker.meta.js

@@ -100,8 +100,8 @@ var disclosurePickerMeta = {
     },
     {
       name: "DisclosurePickerOption",
-      type: "{ value: string; children?: ReactNode; media?: ReactNode; note?: ReactNode; disabled?: boolean; textValue?: string }",
-      description: "One option row. `media` is a leading visual (a ThemePreview tile); `note` a muted trailing annotation \u2014 options without one show a check when chosen. `disabled` skips it for the keyboard and refuses the pick; `textValue` is what type-ahead matches when the name is not plain text."
+      type: "{ value: string; children?: ReactNode; media?: ReactNode; note?: ReactNode; disabled?: boolean; textValue?: string; onRemove?: () => void; removeLabel?: string }",
+      description: "One option row. `media` is a leading visual (a ThemePreview tile); `note` a muted trailing annotation \u2014 options without one show a check when chosen. `disabled` skips it for the keyboard and refuses the pick; `textValue` is what type-ahead matches when the name is not plain text. `onRemove` makes the option removable \u2014 for entries the person added (an imported preset, a saved font): a trash glyph at the row's end on hover or focus (always on touch), and Delete or Backspace on the focused row; removing never picks, and focus moves to a neighbour first. `removeLabel` is the glyph's tooltip."
     },
     { name: "DisclosurePickerEmpty", type: "{ children?: ReactNode }", description: "The no-match line, rendered in place of the list." },
     {
@@ -117,6 +117,7 @@ var disclosurePickerMeta = {
     "Why a listbox and not a radio group: a radio group's checked state follows focus, so every arrow press would be a pick \u2014 wrong for a choice that opens a confirm, loads a font or resets settings. Base UI ships no standalone listbox (Select is popup-only, Combobox's inline list is focus-in-the-input, Composite is internal), so the keyboard model lives here.",
     "Opening from the keyboard (Enter, Space, ArrowDown) moves focus into the panel: the search field when there is one, otherwise the chosen option (or the first). A pointer open focuses the search field on a fine pointer only, so touch does not raise the on-screen keyboard.",
     "Escape closes the row without changing the value (clearing a query first) and returns focus to the trigger; a pick does the same. Focus is not pulled back when it has already moved on, e.g. to a confirm dialog the pick opened.",
+    `A removable option (onRemove) announces aria-keyshortcuts="Delete"; Delete or Backspace removes it and focus moves to the next option (or the previous). The trash glyph is a pointer target only (aria-hidden, not focusable): an option's children are presentational, so a nested button would be unreachable by assistive tech anyway.`,
     "The panel animates with motion-disclosure, which is static under prefers-reduced-motion or MotionProvider off; the scroll that keeps the row in view is instant, never smooth."
   ],
   motion: [

package/dist/components/empty-state/empty-state.meta.js

@@ -16,7 +16,7 @@ var emptyStateMeta = {
     bestPractices: [
       {
         guidance: "do",
-        description: 'Explain what is empty in plain language, such as "No posts yet" or "No matching collectors".'
+        description: 'Explain what is empty in plain language, such as "No posts yet" or "No matching customers".'
       },
       {
         guidance: "do",
@@ -137,7 +137,7 @@ var emptyStateMeta = {
     },
     {
       label: "First-run setup",
-      code: '<EmptyState surface="card" icon={<Icon name="sparkles" />} title="Start your collection" description="Create a first edition, import an existing drop, or invite collaborators." action={<Row gap={1}><Button>Create edition</Button><Button variant="ghost">Import</Button></Row>} />'
+      code: '<EmptyState surface="card" icon={<Icon name="sparkles" />} title="Start your first project" description="Create a project, import one from a file, or invite collaborators." action={<Row gap={1}><Button>Create project</Button><Button variant="ghost">Import</Button></Row>} />'
     },
     {
       label: "Page-level error",
@@ -145,11 +145,11 @@ var emptyStateMeta = {
     },
     {
       label: "Error card",
-      code: '<EmptyState tone="destructive" surface="card" title="Could not load this edition" description="Check your connection and try again." action={<Button variant="secondary">Retry</Button>} />'
+      code: '<EmptyState tone="destructive" surface="card" title="Could not load this project" description="Check your connection and try again." action={<Button variant="secondary">Retry</Button>} />'
     },
     {
       label: "Empty table body",
-      code: '<DataTable data={[]} columns={[{ key: "name", header: "Collector" }, { key: "status", header: "Status" }]} empty={<EmptyState title="No collectors yet" description="Collectors appear here after the first mint." />} />'
+      code: '<DataTable data={[]} columns={[{ key: "name", header: "Customer" }, { key: "status", header: "Status" }]} empty={<EmptyState title="No customers yet" description="Customers appear here after the first order." />} />'
     }
   ]
 };

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({
@@ -68,23 +69,27 @@ function Form({
   );
 }
 Form.displayName = "Form";
-var isPromise = (value) => typeof value?.then === "function";
+var SETTLE_FRAMES = 10;
 function afterSubmit(form, result) {
-  const focus = () => requestAnimationFrame(() => {
+  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) return;
+    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(focus);
-  else focus();
+  if (isPromise(result)) result.finally(() => attempt(SETTLE_FRAMES));
+  else attempt(SETTLE_FRAMES);
 }
 function Field({
   label,

package/dist/components/gradient-art/gradient-art.meta.js

@@ -38,7 +38,7 @@ var gradientArtMeta = {
     { name: "variant", type: '"mesh" | "grain"', default: '"mesh"', description: "mesh: soft spots of colour pulled together by gentle waves. grain: glowing light over deep corners with a printed texture." },
     {
       name: "tones",
-      type: '("info" | "standard" | "collectible" | "edition" | "warning")[]',
+      type: '("info" | "3" | "2" | "1" | "warning")[]',
       description: "Paint these `--tone-*` colours instead of the preset's art palette. Leave unset to follow the preset's art direction."
     },
     { name: "seed", type: "string | number", description: "Fixes the composition: the same seed paints the same art in every theme. Pass a stable id." },
@@ -46,7 +46,7 @@ var gradientArtMeta = {
     { name: "className", type: "string", description: "Size and shape: aspect, height, rounding." }
   ],
   variants: { variant: ["mesh", "grain"] },
-  tokensUsed: ["art-1", "art-2", "art-3", "art-4", "art-5", "art-6", "art-ground", "art-warp", "art-softness", "art-grain", "primary", "tone-info", "tone-standard", "tone-collectible", "tone-edition", "tone-warning"],
+  tokensUsed: ["art-1", "art-2", "art-3", "art-4", "art-5", "art-6", "art-ground", "art-warp", "art-softness", "art-grain", "primary", "tone-info", "tone-3", "tone-2", "tone-1", "tone-warning"],
   motion: [
     {
       slot: "arrival",
@@ -69,7 +69,7 @@ var gradientArtMeta = {
   ],
   examples: [
     { label: "Product cover", code: '<GradientArt seed="Untitled (gold rush)" className="aspect-[4/3] rounded-lg" />' },
-    { label: "Grain banner", code: '<GradientArt variant="grain" seed="juno" tones={["info", "edition"]} className="h-20 rounded-md" />' },
+    { label: "Grain banner", code: '<GradientArt variant="grain" seed="juno" tones={["info", "1"]} className="h-20 rounded-md" />' },
     {
       label: "Avatar with initials",
       code: '<GradientArt seed="Mara Okafor" className="grid size-10 place-items-center rounded-full text-label-md text-overlay-foreground">MO</GradientArt>'

package/dist/components/label/label.meta.js

@@ -89,7 +89,7 @@ var labelMeta = {
     },
     {
       label: "With hint",
-      code: '<Label htmlFor="royalty" hint="A percentage of every resale, paid to you.">Royalty</Label>'
+      code: '<Label htmlFor="discount" hint="Taken off every order this code is used on.">Discount</Label>'
     }
   ]
 };

package/dist/components/line-chart/line-chart.meta.js

@@ -162,9 +162,9 @@ var lineChartMeta = {
     }
   ],
   tokensUsed: [
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "tone-warning",
     "primary",

package/dist/components/meter/meter.js

@@ -13,7 +13,7 @@ var ToneContext = createContext("primary");
 var SizeContext = createContext(void 0);
 var RING_TONE_STROKE = {
   primary: "var(--primary)",
-  standard: "var(--tone-standard)",
+  "3": "var(--tone-3)",
   success: "var(--success)",
   warning: "var(--tone-warning)",
   destructive: "var(--destructive)"

package/dist/components/meter/meter.meta.js

@@ -83,7 +83,7 @@ var meterMeta = {
     },
     {
       name: "tone",
-      type: '"primary" | "standard" | "success" | "warning" | "destructive"',
+      type: '"primary" | "3" | "success" | "warning" | "destructive"',
       default: '"primary"',
       description: "Fill colour, mapped to a semantic token. Choose it from your own thresholds."
     },
@@ -149,7 +149,7 @@ var meterMeta = {
     }
   ],
   variants: {
-    tone: ["primary", "standard", "success", "warning", "destructive"],
+    tone: ["primary", "3", "success", "warning", "destructive"],
     shape: ["bar", "ring"],
     size: ["sm", "md", "lg"]
   },

package/dist/components/meter/meter.variants.js

@@ -6,7 +6,7 @@ var meterIndicatorVariants = cva(
     variants: {
       tone: {
         primary: "bg-primary",
-        standard: "bg-tone-standard",
+        "3": "bg-tone-3",
         success: "bg-success",
         warning: "bg-tone-warning",
         destructive: "bg-destructive"

package/dist/components/middle-truncate/middle-truncate.meta.js

@@ -59,16 +59,16 @@ var middleTruncateMeta = {
   ],
   examples: [
     {
-      label: "Solana address",
-      code: '<MiddleTruncate text="5J7sX2QpHt9vK4mNbR8wYcZ3dF6gH1jL0pA8xQpVnTu" />'
+      label: "API key",
+      code: '<MiddleTruncate text="demo_key_7f3a9c2e5b8d1f4a6c0e9b3d7a2f5c8e1b4" />'
     },
     {
       label: "Custom start/end counts",
-      code: '<MiddleTruncate text="0xAbC1234567890dEf1234567890aBcDeF12345678" startChars={4} endChars={4} />'
+      code: '<MiddleTruncate text="9f2c4e7a1b3d5f60c8e2a4b6d8f0e1c3a5b7d9f2" startChars={4} endChars={4} />'
     },
     {
       label: "Copyable value",
-      code: 'const { copy, copied } = useCopy(address)\n<Row gap={1}><MiddleTruncate text={address} /><Button variant="ghost" size="icon-xs" aria-label="Copy address" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>'
+      code: 'const { copy, copied } = useCopy(commitHash)\n<Row gap={1}><MiddleTruncate text={commitHash} /><Button variant="ghost" size="icon-xs" aria-label="Copy commit hash" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button></Row>'
     }
   ]
 };