@sableui/react 0.9.1 → 0.11.0

package/dist/components/panel-section/panel-section.meta.js

@@ -60,6 +60,11 @@ var panelSectionMeta = {
         name: "PropertyPair",
         required: false,
         description: "Two controls side by side, with optional captions above each."
+      },
+      {
+        name: "PropertyGroup",
+        required: false,
+        description: "A set of properties folded behind one row that names the group and summarises its value, opening with +/\u2212 to the controls beneath."
       }
     ]
   },
@@ -89,9 +94,15 @@ var panelSectionMeta = {
       name: "PropertyPair",
       type: "{ labels?: [ReactNode, ReactNode] }",
       description: "Two controls side by side in a 2-up grid, with optional captions above each."
+    },
+    {
+      name: "PropertyGroup",
+      type: "{ label: ReactNode; summary?: ReactNode; defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void }",
+      description: "A collapsible set of properties inside a section, at the panel's scale (an Accordion is page furniture). The row shows the label, then the summary (the group's value, readable while closed: a word, a few swatches, or both), then a + that turns to \u2212 when open. Groups open independently and stack with a hairline between them. Built on Collapsible."
     }
   ],
   a11y: [
+    "PropertyGroup's row is a real button with aria-expanded (Collapsible); its summary is part of the button's name, so a closed group still announces its value.",
     "PropertyRow renders a real <label>; pass htmlFor with the control's id so clicking the label focuses it.",
     "The section title is an h3, so panels contribute a real heading outline rather than styled divs.",
     "`hint` is exposed as the label's title attribute \u2014 keep the essential meaning in the label itself, since title text is not reliably announced.",
@@ -99,6 +110,27 @@ var panelSectionMeta = {
   ],
   tokensUsed: ["foreground", "muted-foreground", "hairline"],
   examples: [
+    {
+      label: "Groups that fold behind their value",
+      code: `<PanelSection title="Color">
+  <PropertyGroup label="Tones" summary="Brand only">
+    <PropertyRow label="Scheme">
+      <Select value="brand">
+        <SelectTrigger size="xs" />
+        <SelectContent>
+          <SelectItem value="brand">Brand only</SelectItem>
+          <SelectItem value="harmonize">Harmonize</SelectItem>
+        </SelectContent>
+      </Select>
+    </PropertyRow>
+  </PropertyGroup>
+  <PropertyGroup label="Grid" summary="8px">
+    <PropertyRow label="Size">
+      <ScrubField label="Grid size" value={8} min={1} max={64} suffix="px" />
+    </PropertyRow>
+  </PropertyGroup>
+</PanelSection>`
+    },
     {
       label: "Blending section, 2-up",
       code: `<PanelSection title="Blending">

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)",

package/dist/components/pill/pill.variants.js

@@ -1,5 +1,6 @@
 // src/components/pill/pill.variants.ts
 import { cva } from "class-variance-authority";
+import { PALETTE_COLORS } from "../../lib/palette.js";
 var pillVariants = cva(
   /*
    * The asymmetric `pt-[0.23em] pb-[0.1em]` is the LEGACY optical correction: a
@@ -31,6 +32,20 @@ var pillVariants = cva(
       selected: {
         true: "",
         false: ""
+      },
+      // `neutral` is the chip as described above. A palette family is a
+      // category colour (a tag someone picks): the chip paints from the slots
+      // its data-palette scope fills, so no step is named here.
+      tone: {
+        neutral: "",
+        red: "",
+        orange: "",
+        yellow: "",
+        green: "",
+        teal: "",
+        blue: "",
+        purple: "",
+        pink: ""
       }
     },
     compoundVariants: [
@@ -51,12 +66,18 @@ var pillVariants = cva(
         // Transparent on whatever it sits on; the hover is derived from that
         // surface (sable-surface-interactive), not a fixed accent fill.
         class: "border-border text-muted-foreground sable-surface-interactive"
-      }
+      },
+      // After the neutral looks, so cn's merge lets these win.
+      { appearance: "solid", selected: false, tone: [...PALETTE_COLORS], class: "bg-palette-wash text-palette-text hover:bg-palette-wash-strong hover:text-palette-text" },
+      { appearance: "solid", selected: true, tone: [...PALETTE_COLORS], class: "bg-palette-solid text-palette-solid-ink hover:bg-palette-solid" },
+      { appearance: "outline", selected: false, tone: [...PALETTE_COLORS], class: "border-palette-edge text-palette-text" },
+      { appearance: "outline", selected: true, tone: [...PALETTE_COLORS], class: "border-palette-edge bg-palette-wash text-palette-text hover:bg-palette-wash-strong" }
     ],
     defaultVariants: {
       appearance: "solid",
       size: "md",
-      selected: false
+      selected: false,
+      tone: "neutral"
     }
   }
 );

package/dist/components/popover/popover.meta.js

@@ -123,11 +123,11 @@ var popoverMeta = {
   examples: [
     {
       label: "Basic",
-      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Edition details</PopoverTitle><PopoverDescription>A limited run of 100, stored permanently on Arweave.</PopoverDescription></PopoverContent></Popover>'
+      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Details</Button>} /><PopoverContent><PopoverTitle>Plan details</PopoverTitle><PopoverDescription>Up to 10 seats, billed monthly per seat.</PopoverDescription></PopoverContent></Popover>'
     },
     {
       label: "With close",
-      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Collecting mints a compressed NFT to your wallet.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>'
+      code: '<Popover><PopoverTrigger render={<Button variant="secondary">Open</Button>} /><PopoverContent><PopoverTitle>Heads up</PopoverTitle><PopoverDescription>Upgrading starts a new billing period today.</PopoverDescription><PopoverClose render={<Button size="sm">Got it</Button>} /></PopoverContent></Popover>'
     }
   ]
 };

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

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

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

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

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

@@ -80,7 +80,7 @@ var radioMeta = {
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal"><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal"><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>`
@@ -92,7 +92,7 @@ var radioMeta = {
 	<FieldsetContent>
 		<RadioGroup defaultValue="standard">
 			<Field label="Standard" orientation="horizontal"><Radio value="standard" /></Field>
-			<Field label="Edition" orientation="horizontal" disabled><Radio value="edition" /></Field>
+			<Field label="Poll" orientation="horizontal" disabled><Radio value="poll" /></Field>
 		</RadioGroup>
 	</FieldsetContent>
 </Fieldset>`

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

@@ -77,7 +77,7 @@ var radioCardMeta = {
     },
     {
       name: "tone",
-      type: '"neutral" | "standard" | "collectible" | "edition" | "info" | "warning"',
+      type: '"neutral" | "3" | "2" | "1" | "info" | "warning"',
       default: '"neutral"',
       description: "Semantic colour the selected state carries across the border, radio, and icon glyph. Neutral uses the primary ring with a muted wash."
     },
@@ -106,7 +106,7 @@ var radioCardMeta = {
     }
   ],
   variants: {
-    tone: ["neutral", "standard", "collectible", "edition", "info", "warning"]
+    tone: ["neutral", "3", "2", "1", "info", "warning"]
   },
   tokensUsed: [
     "input",
@@ -116,9 +116,9 @@ var radioCardMeta = {
     "muted",
     "ring",
     "muted-foreground",
-    "tone-standard",
-    "tone-collectible",
-    "tone-edition",
+    "tone-3",
+    "tone-2",
+    "tone-1",
     "tone-info",
     "tone-warning"
   ],
@@ -132,7 +132,7 @@ var radioCardMeta = {
   examples: [
     {
       label: "Post type (tone + icon)",
-      code: '<RadioGroup defaultValue="post" className="grid sm:grid-cols-3"><RadioCard value="post" tone="standard" icon={<Icon name="plus" />} title="Standard" description="Share without minting" /><RadioCard value="collectible" tone="collectible" icon={<Icon name="gem" />} title="Collectible" description="Free to collect as NFT" /><RadioCard value="edition" tone="edition" icon={<Icon name="image-stack" />} title="Edition" description="Sell as NFT editions" /></RadioGroup>'
+      code: '<RadioGroup defaultValue="starter" className="grid sm:grid-cols-3"><RadioCard value="starter" tone="3" icon={<Icon name="plus" />} title="Starter" description="Free for one person" /><RadioCard value="studio" tone="2" icon={<Icon name="gem" />} title="Studio" description="For small teams" /><RadioCard value="business" tone="1" icon={<Icon name="image-stack" />} title="Business" description="SSO and audit log" /></RadioGroup>'
     },
     {
       label: "Plan picker (plain)",

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

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

package/dist/components/scroller/scroller.meta.js

@@ -97,7 +97,7 @@ var scrollerMeta = {
   examples: [
     {
       label: "Vertical with overflow",
-      code: '<Scroller label="Editions" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>'
+      code: '<Scroller label="Projects" className="h-64"><ul className="space-y-2 p-4">{items.map((item) => (<li key={item.id} className="text-body-sm">{item.title}</li>))}</ul></Scroller>'
     },
     {
       label: "Capped, scrolls past the cap",

package/dist/components/search-input/search-input.meta.js

@@ -116,7 +116,7 @@ var searchInputMeta = {
     },
     {
       label: "Uncontrolled, sized as a whole",
-      code: '<Field label="Search posts"><SearchInput defaultValue="editions" className="max-w-80" /></Field>'
+      code: '<Field label="Search posts"><SearchInput defaultValue="roadmap" className="max-w-80" /></Field>'
     },
     {
       label: "Disabled",

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

@@ -18,7 +18,7 @@ function SectionHeader({
   ...props
 }) {
   const generatedId = useId();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "section-header", className: cn("flex flex-col gap-1", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "section-header", className: cn("flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx(
       HeadingRow,
       {

package/dist/components/segmented-bar/segmented-bar.js

@@ -2,7 +2,7 @@
 import { cn } from "../../lib/cn.js";
 import { segmentedBarSegmentVariants, segmentedBarVariants } from "./segmented-bar.variants.js";
 import { jsx } from "react/jsx-runtime";
-var SEGMENTED_BAR_TONES = ["edition", "collectible", "standard", "info", "primary", "neutral"];
+var SEGMENTED_BAR_TONES = ["1", "2", "3", "info", "primary", "neutral"];
 function SegmentedBar({ segments, label, locale, size, className, ...props }) {
   const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
   const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });

package/dist/components/segmented-bar/segmented-bar.meta.js

@@ -59,12 +59,12 @@ var segmentedBarMeta = {
   ],
   variants: {
     size: ["sm", "md", "lg"],
-    tone: ["edition", "collectible", "standard", "info", "primary", "neutral", "success", "warning", "destructive"]
+    tone: ["1", "2", "3", "info", "primary", "neutral", "success", "warning", "destructive"]
   },
   tokensUsed: [
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "primary",
     "muted-foreground",
@@ -89,13 +89,13 @@ var segmentedBarMeta = {
     { slot: "activity", recipe: "none", part: "SegmentedBar", why: "No indeterminate state \u2014 an unknown breakdown is not drawn." }
   ],
   a11y: [
-    'Rendered role=img with an aria-label built from `label` and each segment\'s share ("Revenue by type: Editions 42%, Collectibles 27%"), so the whole breakdown is read in one stop.',
+    'Rendered role=img with an aria-label built from `label` and each segment\'s share ("Revenue by channel: Direct 42%, Partners 27%"), so the whole breakdown is read in one stop.',
     "Colour alone does not identify a segment: always show a legend with each segment's label beside the bar."
   ],
   examples: [
     {
       label: "With a legend",
-      code: 'const sales = [\n	{ label: "Editions", value: 42, tone: "edition" },\n	{ label: "Collectibles", value: 27, tone: "collectible" },\n	{ label: "Standard", value: 19, tone: "standard" },\n] as const\n\n<Stack gap={3}>\n	<SegmentedBar label="Revenue by type" segments={[...sales]} size="lg" />\n	<ul className="flex flex-col gap-1.5">\n		{sales.map((s) => (\n			<li key={s.label} className="flex items-center gap-2 text-body-sm">\n				<StatusDot tone={s.tone} />\n				<span className="flex-1 text-muted-foreground">{s.label}</span>\n				<span className="text-mono-caption">{s.value}%</span>\n			</li>\n		))}\n	</ul>\n</Stack>'
+      code: 'const sales = [\n	{ label: "Direct", value: 42, tone: "1" },\n	{ label: "Partners", value: 27, tone: "2" },\n	{ label: "Referrals", value: 19, tone: "3" },\n] as const\n\n<Stack gap={3}>\n	<SegmentedBar label="Revenue by channel" segments={[...sales]} size="lg" />\n	<ul className="flex flex-col gap-1.5">\n		{sales.map((s) => (\n			<li key={s.label} className="flex items-center gap-2 text-body-sm">\n				<StatusDot tone={s.tone} />\n				<span className="flex-1 text-muted-foreground">{s.label}</span>\n				<span className="text-mono-caption">{s.value}%</span>\n			</li>\n		))}\n	</ul>\n</Stack>'
     },
     {
       label: "Test results \u2014 status tones",

package/dist/components/segmented-bar/segmented-bar.variants.js

@@ -5,9 +5,9 @@ var segmentedBarSegmentVariants = cva(
   {
     variants: {
       tone: {
-        edition: "bg-tone-edition",
-        collectible: "bg-tone-collectible",
-        standard: "bg-tone-standard",
+        "1": "bg-tone-1",
+        "2": "bg-tone-2",
+        "3": "bg-tone-3",
         info: "bg-tone-info",
         primary: "bg-primary",
         neutral: "bg-muted-foreground",
@@ -17,7 +17,7 @@ var segmentedBarSegmentVariants = cva(
       }
     },
     defaultVariants: {
-      tone: "standard"
+      tone: "3"
     }
   }
 );

package/dist/components/select/select.meta.js

@@ -176,11 +176,11 @@ var selectMeta = {
     },
     {
       label: "Inside Field",
-      code: '<Field label="Default visibility" description="Controls how new editions appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>'
+      code: '<Field label="Default visibility" description="Controls how new projects appear."><Select defaultValue="public"><SelectTrigger placeholder="Choose visibility" /><SelectContent><SelectItem value="public">Public</SelectItem><SelectItem value="private">Private</SelectItem><SelectItem value="unlisted">Unlisted</SelectItem></SelectContent></Select></Field>'
     },
     {
       label: "Rich item labels",
-      code: '<Select defaultValue="edition" items={[{ value: "edition", label: "Edition" }, { value: "collectible", label: "Collectible" }]}><SelectTrigger /><SelectContent><SelectItem value="edition" label="Edition"><span className="flex items-center gap-2"><Badge tone="edition">Edition</Badge><span>Edition drop</span></span></SelectItem><SelectItem value="collectible" label="Collectible"><span className="flex items-center gap-2"><Badge tone="collectible">Collectible</Badge><span>Collectible</span></span></SelectItem></SelectContent></Select>'
+      code: '<Select defaultValue="business" items={[{ value: "business", label: "Business" }, { value: "studio", label: "Studio" }]}><SelectTrigger /><SelectContent><SelectItem value="business" label="Business"><span className="flex items-center gap-2"><Badge tone="1">Business</Badge><span>Business plan</span></span></SelectItem><SelectItem value="studio" label="Studio"><span className="flex items-center gap-2"><Badge tone="2">Studio</Badge><span>Studio</span></span></SelectItem></SelectContent></Select>'
     }
   ]
 };

package/dist/components/sheet/sheet.meta.js

@@ -158,7 +158,7 @@ var sheetMeta = {
     },
     {
       label: "Bottom side",
-      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Edition details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>'
+      code: '<Sheet><SheetTrigger render={<Button variant="secondary">Details</Button>} /><SheetContent side="bottom"><SheetHeader><SheetTitle>Order details</SheetTitle></SheetHeader><SheetFooter><SheetClose render={<Button variant="secondary">Close</Button>} /></SheetFooter></SheetContent></Sheet>'
     }
   ]
 };

package/dist/components/side-nav/side-nav.meta.js

@@ -122,7 +122,7 @@ var sideNavMeta = {
     },
     {
       label: "Chrome-weight rail (size=lg)",
-      code: '<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Wallets" render={<Link to="/settings/wallets" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>'
+      code: '<SideNav size="lg"><SideNavItem label="Profile" active render={<Link to="/settings/profile" />} /><SideNavItem label="Billing" render={<Link to="/settings/billing" />} /><SideNavItem label="Security" render={<Link to="/settings/security" />} /></SideNav>'
     },
     {
       label: "Inside Sidebar chrome",

package/dist/components/sidebar/sidebar.meta.js

@@ -106,7 +106,7 @@ var sidebarMeta = {
   examples: [
     {
       label: "Rail with nav",
-      code: '<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{wallet}</SidebarFooter></Sidebar>'
+      code: '<Sidebar><SidebarHeader><SidebarBrand mark={<Icon name="music" variant="solid" />} label="Undertow" render={<Link to="/" />} /></SidebarHeader><SidebarNav><SidebarItem icon={<Icon name="bell" />} label="Notifications" badge={<NotificationBadge count={3} />} render={<Link to="/notifications" />} /></SidebarNav><SidebarFooter>{account}</SidebarFooter></Sidebar>'
     },
     {
       label: "Collapsible (icon rail)",

package/dist/components/sparkline/sparkline.meta.js

@@ -60,7 +60,7 @@ var sparklineMeta = {
     },
     {
       name: "tone",
-      type: '"edition" | "collectible" | "standard" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive"',
+      type: '"1" | "2" | "3" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive"',
       default: '"primary"',
       description: "Colour by role."
     },
@@ -92,9 +92,9 @@ var sparklineMeta = {
   },
   tokensUsed: [
     "primary",
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "tone-warning",
     "muted-foreground",

package/dist/components/spinner/spinner.meta.js

@@ -109,7 +109,7 @@ var spinnerMeta = {
     },
     {
       label: "Inside a button (Button owns it \u2014 use loading)",
-      code: "<Button loading>Collecting</Button>"
+      code: "<Button loading>Saving</Button>"
     }
   ]
 };

package/dist/components/status-dot/status-dot.js

@@ -1,5 +1,6 @@
 // src/components/status-dot/status-dot.tsx
 import { cn } from "../../lib/cn.js";
+import { isPaletteColor } from "../../lib/palette.js";
 import { statusDotVariants } from "./status-dot.variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function StatusDot({
@@ -10,11 +11,13 @@ function StatusDot({
   ...props
 }) {
   const dot = statusDotVariants({ tone, size });
+  const palette = isPaletteColor(tone) ? tone : void 0;
   if (pulse) {
     return /* @__PURE__ */ jsxs(
       "span",
       {
         "aria-hidden": "true",
+        "data-palette": palette,
         className: cn("relative inline-flex shrink-0", className),
         ...props,
         children: [
@@ -32,7 +35,7 @@ function StatusDot({
       }
     );
   }
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(dot, className), ...props });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-palette": palette, className: cn(dot, className), ...props });
 }
 StatusDot.displayName = "StatusDot";
 export {

package/dist/components/status-dot/status-dot.meta.js

@@ -53,9 +53,9 @@ var statusDotMeta = {
   props: [
     {
       name: "tone",
-      type: '"neutral" | "standard" | "success" | "warning" | "info" | "edition" | "collectible" | "destructive"',
+      type: '"neutral" | "1" | "2" | "3" | "success" | "warning" | "info" | "destructive" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "purple" | "pink"',
       default: '"neutral"',
-      description: "Semantic color of the dot."
+      description: "Semantic color of the dot, or a palette family (red \u2026 pink) for a category legend."
     },
     {
       name: "size",
@@ -71,26 +71,18 @@ var statusDotMeta = {
     }
   ],
   variants: {
-    tone: [
-      "neutral",
-      "standard",
-      "success",
-      "warning",
-      "info",
-      "edition",
-      "collectible",
-      "destructive"
-    ],
+    tone: ["neutral", "1", "2", "3", "success", "warning", "info", "destructive", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"],
     size: ["sm", "md", "lg"]
   },
   tokensUsed: [
+    "palette-dot",
     "muted-foreground",
-    "tone-standard",
+    "tone-3",
     "success",
     "tone-warning",
     "tone-info",
-    "tone-edition",
-    "tone-collectible",
+    "tone-1",
+    "tone-2",
     "destructive"
   ],
   a11y: [
@@ -100,7 +92,7 @@ var statusDotMeta = {
   examples: [
     {
       label: "Tones",
-      code: '<Row gap={2}><StatusDot tone="standard" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>'
+      code: '<Row gap={2}><StatusDot tone="3" /><StatusDot tone="info" /><StatusDot tone="warning" /><StatusDot tone="destructive" /></Row>'
     },
     {
       label: "With label \u2014 use Badge",