@sableui/react 0.9.1 → 0.10.0

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.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/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>'
     }
   ]
 };

package/dist/components/note/note.meta.js

@@ -91,11 +91,11 @@ var noteMeta = {
   examples: [
     {
       label: "Info",
-      code: '<Note tone="info">Editions mint on Solana mainnet.</Note>'
+      code: '<Note tone="info">Reports refresh every hour.</Note>'
     },
     {
       label: "With title",
-      code: '<Note tone="warning" title="Low balance">Top up SOL before minting.</Note>'
+      code: '<Note tone="warning" title="Low balance">Add credits before your next export.</Note>'
     },
     {
       label: "Warning with a remedy, inside a dialog",
@@ -103,7 +103,7 @@ var noteMeta = {
     },
     {
       label: "Custom icon",
-      code: '<Note tone="neutral" icon="lock">Pricing and supply cannot be changed after an edition is purchased.</Note>'
+      code: '<Note tone="neutral" icon="lock">Pricing cannot be changed after an order is placed.</Note>'
     }
   ]
 };

package/dist/components/page-header/page-header.js

@@ -12,7 +12,7 @@ function PageHeader({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 pb-4", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 pb-4", className), ...props, children: [
     /* @__PURE__ */ jsx(
       HeadingRow,
       {

package/dist/components/pagination/pagination.meta.js

@@ -21,7 +21,7 @@ var paginationMeta = {
       },
       {
         guidance: "do",
-        description: 'Use a specific label when multiple pagers appear on a page, such as "Collector pages".'
+        description: 'Use a specific label when multiple pagers appear on a page, such as "Customer pages".'
       },
       {
         guidance: "do",
@@ -128,7 +128,7 @@ var paginationMeta = {
     },
     {
       label: "Table results footer",
-      code: '<Stack gap={2}><DataTable data={rows} columns={columns} rowKey={(row) => row.id} /><Pagination label="Collector pages" page={page} total={12} onPageChange={setPage} /></Stack>'
+      code: '<Stack gap={2}><DataTable data={rows} columns={columns} rowKey={(row) => row.id} /><Pagination label="Customer pages" page={page} total={12} onPageChange={setPage} /></Stack>'
     },
     {
       label: "Server query state",

package/dist/components/phone/phone.meta.js

@@ -67,7 +67,7 @@ var phoneMeta = {
   examples: [
     {
       label: "Framing a mobile layout",
-      code: '<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new collects today.</p></div></Phone>'
+      code: '<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new orders today.</p></div></Phone>'
     },
     {
       label: "Mockup, not a responsive preview",

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

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

package/dist/components/pill/pill.js

@@ -1,15 +1,17 @@
 // src/components/pill/pill.tsx
 import { cn } from "../../lib/cn.js";
+import { isPaletteColor } from "../../lib/palette.js";
 import { trimLabel } from "../../lib/trim-label.js";
 import { pillVariants } from "./pill.variants.js";
 import { jsxs } from "react/jsx-runtime";
-function Pill({ selected = false, appearance, size, icon, className, children, type, ...props }) {
+function Pill({ selected = false, appearance, size, tone, icon, className, children, type, ...props }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: type ?? "button",
       "aria-pressed": selected,
-      className: cn(pillVariants({ appearance, size, selected }), className),
+      "data-palette": isPaletteColor(tone) ? tone : void 0,
+      className: cn(pillVariants({ appearance, size, selected, tone }), className),
       ...props,
       children: [
         icon,

package/dist/components/pill/pill.meta.js

@@ -61,6 +61,12 @@ var pillMeta = {
       default: '"md"',
       description: "md sits on the density ladder's xs control height (28px); sm is 24px, for chips under or inside other content."
     },
+    {
+      name: "tone",
+      type: '"neutral" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "purple" | "pink"',
+      default: '"neutral"',
+      description: "neutral is the chip as described. A palette family colours it as a category, like the choices in a tag picker: a wash at rest, the solid family colour when selected. Painted from the theme's generated palette."
+    },
     {
       name: "icon",
       type: "ReactNode",
@@ -70,9 +76,16 @@ var pillMeta = {
   variants: {
     appearance: ["solid", "outline"],
     size: ["md", "sm"],
-    selected: ["true", "false"]
+    selected: ["true", "false"],
+    tone: ["neutral", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"]
   },
   tokensUsed: [
+    "palette-wash",
+    "palette-wash-strong",
+    "palette-edge",
+    "palette-solid",
+    "palette-text",
+    "palette-solid-ink",
     "secondary",
     "secondary-foreground",
     "accent",
@@ -89,9 +102,13 @@ var pillMeta = {
     "Selected state is exposed via aria-pressed."
   ],
   examples: [
+    {
+      label: "Tag picker",
+      code: '<Row gap={1}><Pill tone="blue" selected onClick={() => {}}>Design</Pill><Pill tone="teal" onClick={() => {}}>Research</Pill><Pill tone="orange" onClick={() => {}}>Marketing</Pill></Row>'
+    },
     {
       label: "Filter row",
-      code: "<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Editions</Pill><Pill onClick={() => {}}>Collectibles</Pill></Row>"
+      code: "<Row gap={1}><Pill selected onClick={() => {}}>All</Pill><Pill onClick={() => {}}>Projects</Pill><Pill onClick={() => {}}>Reports</Pill></Row>"
     },
     {
       label: "Outline, small (reactions)",