@sableui/react 0.9.1 → 0.10.0

package/dist/blocks/revenue-breakdown-block.js

@@ -8,10 +8,10 @@ import { Grid } from "../layout/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var revenue = { label: "Revenue this month", total: "$12,480", change: "+8.2%" };
 var segments = [
-  { label: "Editions", value: 42, tone: "edition" },
-  { label: "Collectibles", value: 27, tone: "collectible" },
-  { label: "Standard", value: 19, tone: "standard" },
-  { label: "Commissions", value: 12, tone: "info" }
+  { label: "Direct", value: 42, tone: "1" },
+  { label: "Partners", value: 27, tone: "2" },
+  { label: "Referrals", value: 19, tone: "3" },
+  { label: "Resellers", value: 12, tone: "info" }
 ];
 function RevenueBreakdownBlock({ className, framed = true }) {
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [
@@ -21,7 +21,7 @@ function RevenueBreakdownBlock({ className, framed = true }) {
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4 pt-2", children: [
       /* @__PURE__ */ jsx("span", { className: "text-mono-xl", children: revenue.total }),
-      /* @__PURE__ */ jsx(SegmentedBar, { label: "Revenue by type", segments: [...segments], size: "lg" }),
+      /* @__PURE__ */ jsx(SegmentedBar, { label: "Revenue by channel", segments: [...segments], size: "lg" }),
       /* @__PURE__ */ jsx(Grid, { "aria-hidden": true, minItemWidth: "9.5em", gap: "calc(var(--spacing) * 1.5) calc(var(--spacing) * 4)", children: segments.map((s) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-body-sm", children: [
         /* @__PURE__ */ jsx(StatusDot, { tone: s.tone }),
         /* @__PURE__ */ jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }),

package/dist/blocks/stat-row-block.js

@@ -7,9 +7,9 @@ import { Grid, Row } from "../layout/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var stats = [
   { label: "Revenue", value: "$18,240", delta: "+8.2%", up: true, note: "vs. $16,857" },
-  { label: "Collects", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
-  { label: "Collectors", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
-  { label: "Sell-through", value: "64%", delta: "\u22121.8%", up: false, note: "6 open editions" }
+  { label: "Orders", value: "1,284", delta: "+3.1%", up: true, note: "182 first-time" },
+  { label: "New customers", value: "312", delta: "+12.4%", up: true, note: "Best month yet" },
+  { label: "Conversion", value: "3.4%", delta: "\u22120.2%", up: false, note: "6 open trials" }
 ];
 function StatRowBlock({ className }) {
   return /* @__PURE__ */ jsx(Grid, { cols: { base: 2, xl: 4 }, gap: 3, className: cn("w-full", className), children: stats.map((stat) => /* @__PURE__ */ jsxs(Card, { children: [

package/dist/blocks/task-list-block.js

@@ -9,9 +9,9 @@ import { Icon } from "../icon/index.js";
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var tasks = [
-  { title: "Pick the cover type", tag: "Design", tone: "collectible", done: true },
+  { title: "Pick the cover type", tag: "Design", tone: "2", done: true },
   { title: "Wire up checkout", tag: "Engineering", tone: "info", done: false },
-  { title: "Draft launch post", tag: "Launch", tone: "edition", done: false }
+  { title: "Draft launch post", tag: "Launch", tone: "1", done: false }
 ];
 function TaskListBlock({ className, framed = true, onAddTask }) {
   const [done, setDone] = useState(tasks.map((t) => t.done));

package/dist/blocks/team-members-block.js

@@ -32,7 +32,7 @@ function TeamMembersBlock({ className, framed = true, onInvite, onMemberAction }
         title: m.name,
         subtitle: m.email,
         action: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Badge, { appearance: m.role === "Pending" ? "outline" : "plain", tone: m.role === "Owner" ? "edition" : "neutral", size: "sm", children: m.role }),
+          /* @__PURE__ */ jsx(Badge, { appearance: m.role === "Pending" ? "outline" : "plain", tone: m.role === "Owner" ? "1" : "neutral", size: "sm", children: m.role }),
           m.role === "Owner" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-(--control-sm)" }) : /* @__PURE__ */ jsxs(OverflowMenu, { label: `Manage ${m.name}`, size: "icon-sm", children: [
             m.role === "Pending" ? /* @__PURE__ */ jsx(MenuItem, { onClick: () => onMemberAction?.(m.id, "resend"), children: "Resend invite" }) : m.role === "Admin" ? /* @__PURE__ */ jsx(MenuItem, { onClick: () => onMemberAction?.(m.id, "make-member"), children: "Make member" }) : /* @__PURE__ */ jsx(MenuItem, { onClick: () => onMemberAction?.(m.id, "make-admin"), children: "Make admin" }),
             /* @__PURE__ */ jsx(MenuSeparator, {}),

package/dist/blocks/wallet-block.js

@@ -5,11 +5,11 @@ import { Entity } from "../components/entity/index.js";
 import { Icon } from "../icon/index.js";
 import { cn } from "../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var balance = "14.62 SOL";
+var balance = "$2,418.50";
 var activity = [
-  { title: "Sold \u201CDusk, no. 4\u201D", detail: "Edition \xB7 2h ago", amount: "+0.80", tone: "edition" },
-  { title: "Royalty", detail: "Collectible \xB7 Yesterday", amount: "+0.12", tone: "collectible" },
-  { title: "Withdrawal", detail: "To Phantom \xB7 Mon", amount: "-1.50", tone: "standard" }
+  { title: "Subscription", detail: "Team plan \xB7 2h ago", amount: "+49.00", tone: "1" },
+  { title: "Refund", detail: "Order 1042 \xB7 Yesterday", amount: "-24.00", tone: "2" },
+  { title: "Payout", detail: "To checking \xB7 Mon", amount: "-850.00", tone: "3" }
 ];
 function WalletBlock({ className, framed = true, onSend, onReceive }) {
   return /* @__PURE__ */ jsxs(Card, { variant: framed ? "default" : "flat", className: cn("w-full max-w-xs", className), children: [

package/dist/blocks/wallet-block.meta.js

@@ -5,15 +5,15 @@ var walletBlockMeta = {
   kind: "card",
   width: { min: "18rem", max: "20rem" },
   summary: "A balance card: the balance in the metric mono tier, Send and Receive as an equal pair, and recent activity as Entity rows with signed amounts.",
-  intent: "Reach for this for a wallet, account balance or credits summary with its latest movements. For a full transaction history with filters, use a DataTable.",
+  intent: "Reach for this for an account balance, store credit or credits summary with its latest movements. For a full transaction history with filters, use a DataTable.",
   notes: [
     "The balance is CardTitle at `text-mono-xl` \u2014 tabular figures, never a heading tier \u2014 under its label as CardDescription.",
     "Send is primary and Receive secondary, side by side at equal width: two directions of one action, with sending the riskier and more frequent.",
-    "Incoming amounts are `text-success`; outgoing stay muted rather than red, because a withdrawal is not an error."
+    "Incoming amounts are `text-success`; outgoing stay muted rather than red, because a payout or refund is not an error."
   ],
   a11y: [
     "Each activity row's leading swatch is aria-hidden; the title and detail carry the meaning.",
-    "Amounts keep their sign in text (+0.80 / -1.50), so the direction does not depend on colour."
+    "Amounts keep their sign in text (+49.00 / -850.00), so the direction does not depend on colour."
   ]
 };
 export {

package/dist/components/accordion/accordion.meta.js

@@ -138,7 +138,7 @@ var accordionMeta = {
   examples: [
     {
       label: "Single (default)",
-      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger>Is it permanent?</AccordionTrigger><AccordionPanel>Yes \u2014 stored on Arweave.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>How much?</AccordionTrigger><AccordionPanel>A one-time mint fee.</AccordionPanel></AccordionItem></Accordion>'
+      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger>Can I cancel anytime?</AccordionTrigger><AccordionPanel>Yes \u2014 from billing settings.</AccordionPanel></AccordionItem><AccordionItem value="b"><AccordionTrigger>How much?</AccordionTrigger><AccordionPanel>$16 per seat each month.</AccordionPanel></AccordionItem></Accordion>'
     },
     {
       label: "Multiple open",
@@ -146,7 +146,7 @@ var accordionMeta = {
     },
     {
       label: "Custom indicator (plus-becomes-\xD7)",
-      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Is it permanent?</AccordionTrigger><AccordionPanel>Yes \u2014 stored on Arweave.</AccordionPanel></AccordionItem></Accordion>'
+      code: '<Accordion defaultValue={["a"]}><AccordionItem value="a"><AccordionTrigger indicator={<Icon name="plus" className="text-xs text-muted-foreground transition-transform [[data-panel-open]_&]:rotate-45" />}>Can I cancel anytime?</AccordionTrigger><AccordionPanel>Yes \u2014 from billing settings.</AccordionPanel></AccordionItem></Accordion>'
     }
   ]
 };

package/dist/components/app-header/app-header.meta.js

@@ -51,7 +51,7 @@ var appHeaderMeta = {
     {
       name: "actions",
       type: "ReactNode",
-      description: "Trailing slot \u2014 wallet trigger, action buttons."
+      description: "Trailing slot \u2014 account menu, action buttons."
     }
   ],
   a11y: [

package/dist/components/app-shell/app-shell.meta.js

@@ -133,7 +133,7 @@ var appShellMeta = {
     {
       label: "Full frame",
       code: `<AppShell
-  banners={<Banner tone="warning">Network congested \u2014 mints may be slow.</Banner>}
+  banners={<Banner tone="warning">Sync is delayed \u2014 changes may be slow to appear.</Banner>}
   header={<AppHeader title="Studio" />}
   sidebar={
     <Sidebar>
@@ -152,7 +152,7 @@ var appShellMeta = {
   }
 >
   <Region max="feed">
-    <PageHeader title="Home" description="Latest posts from artists you follow." />
+    <PageHeader title="Home" description="Latest posts from people you follow." />
   </Region>
 </AppShell>`
     },

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

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

package/dist/components/badge/badge.js

@@ -1,5 +1,6 @@
 // src/components/badge/badge.tsx
 import { cn } from "../../lib/cn.js";
+import { isPaletteColor } from "../../lib/palette.js";
 import { trimLabel } from "../../lib/trim-label.js";
 import { StatusDot } from "../status-dot/index.js";
 import { badgeVariants } from "./badge.variants.js";
@@ -15,10 +16,18 @@ function Badge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn(badgeVariants({ appearance, tone, size }), "[&_svg]:shrink-0", className), ...props, children: [
-    dot ? /* @__PURE__ */ jsx(StatusDot, { tone, pulse, size: size === "sm" ? "sm" : "md" }) : icon,
-    trimLabel(children)
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-palette": isPaletteColor(tone) ? tone : void 0,
+      className: cn(badgeVariants({ appearance, tone, size }), "[&_svg]:shrink-0", className),
+      ...props,
+      children: [
+        dot ? /* @__PURE__ */ jsx(StatusDot, { tone, pulse, size: size === "sm" ? "sm" : "md" }) : icon,
+        trimLabel(children)
+      ]
+    }
+  );
 }
 Badge.displayName = "Badge";
 export {

package/dist/components/badge/badge.meta.js

@@ -1,7 +1,7 @@
 // src/components/badge/badge.meta.ts
 var badgeMeta = {
   name: "Badge",
-  summary: "Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral or a semantic tone). An optional leading icon, or a status dot (with pulse) for state.",
+  summary: "Compact static label, set on two axes: appearance (soft, outline, solid, overlay on media, plain text) and tone (neutral, a semantic tone, or a palette family like blue for a category with no meaning attached). An optional leading icon, or a status dot (with pulse) for state.",
   keywords: [
     "badge",
     "tag",
@@ -22,7 +22,7 @@ var badgeMeta = {
       },
       {
         guidance: "do",
-        description: "Use tone variants when the badge carries meaning, such as success, warning, destructive, edition, or collectible."
+        description: "Use tone variants when the badge carries meaning, such as success, warning or destructive, or a decorative tone for a category or plan."
       },
       {
         guidance: "do",
@@ -73,9 +73,9 @@ var badgeMeta = {
     },
     {
       name: "tone",
-      type: '"neutral" | "standard" | "collectible" | "edition" | "info" | "success" | "warning" | "destructive"',
+      type: '"neutral" | "1" | "2" | "3" | "info" | "success" | "warning" | "destructive" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "purple" | "pink"',
       default: '"neutral"',
-      description: "What it means. Every appearance takes every tone."
+      description: "What it means. Every appearance takes every tone. The palette families (red \u2026 pink) are categories with no meaning attached \u2014 tags, labels, project colours \u2014 painted from the theme's generated palette, so they lean toward the brand and read in both modes."
     },
     {
       name: "size",
@@ -103,10 +103,17 @@ var badgeMeta = {
   ],
   variants: {
     appearance: ["soft", "outline", "solid", "overlay", "plain"],
-    tone: ["neutral", "standard", "collectible", "edition", "info", "success", "warning", "destructive"],
+    tone: ["neutral", "1", "2", "3", "info", "success", "warning", "destructive", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink"],
     size: ["sm", "md"]
   },
   tokensUsed: [
+    "palette-wash",
+    "palette-wash-strong",
+    "palette-edge",
+    "palette-dot",
+    "palette-solid",
+    "palette-text",
+    "palette-solid-ink",
     "secondary",
     "secondary-foreground",
     "border",
@@ -114,18 +121,18 @@ var badgeMeta = {
     "background",
     "muted",
     "muted-foreground",
-    "tone-standard",
-    "tone-collectible",
-    "tone-edition",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "success",
     "tone-warning",
     "destructive",
     "overlay",
     "overlay-foreground",
-    "tone-standard-foreground",
-    "tone-collectible-foreground",
-    "tone-edition-foreground",
+    "tone-1-foreground",
+    "tone-2-foreground",
+    "tone-3-foreground",
     "tone-info-foreground",
     "success-foreground",
     "tone-warning-foreground",
@@ -138,7 +145,11 @@ var badgeMeta = {
   examples: [
     {
       label: "Tones",
-      code: '<Row gap={1}><Badge tone="edition">Edition</Badge><Badge tone="collectible">Collectible</Badge><Badge tone="standard">Standard</Badge></Row>'
+      code: '<Row gap={1}><Badge tone="1">Business</Badge><Badge tone="2">Studio</Badge><Badge tone="3">Starter</Badge></Row>'
+    },
+    {
+      label: "Palette colours (categories)",
+      code: '<Row gap={1}><Badge tone="blue">Design</Badge><Badge tone="teal">Research</Badge><Badge tone="orange">Marketing</Badge><Badge tone="pink" appearance="outline">Ops</Badge><Badge tone="purple" appearance="solid">Launch</Badge></Row>'
     },
     {
       label: "Solid",
@@ -158,7 +169,7 @@ var badgeMeta = {
     },
     {
       label: "Metadata row",
-      code: '<Row gap={1}><Badge>12 editions</Badge><Badge appearance="outline">Open edition</Badge><Badge tone="info" icon={<Icon name="info" />}>Curated</Badge></Row>'
+      code: '<Row gap={1}><Badge>12 projects</Badge><Badge appearance="outline">Draft</Badge><Badge tone="info" icon={<Icon name="info" />}>Curated</Badge></Row>'
     },
     {
       label: "Semantic state",

package/dist/components/badge/badge.variants.js

@@ -1,64 +1,78 @@
 // src/components/badge/badge.variants.ts
 import { cva } from "class-variance-authority";
-var BADGE_TONES = ["neutral", "standard", "collectible", "edition", "info", "success", "warning", "destructive"];
+import { PALETTE_COLORS } from "../../lib/palette.js";
+var BADGE_TONES = ["neutral", "1", "2", "3", "info", "success", "warning", "destructive", ...PALETTE_COLORS];
 var BADGE_APPEARANCES = ["soft", "outline", "solid", "overlay", "plain"];
+var FAMILY = {
+  soft: "bg-palette-wash text-palette-text",
+  outline: "border border-palette-edge text-palette-text",
+  solid: "bg-palette-solid text-palette-solid-ink",
+  overlay: "bg-palette-solid text-palette-solid-ink",
+  plain: "text-foreground"
+};
+var families = (appearance) => Object.fromEntries(PALETTE_COLORS.map((color) => [color, FAMILY[appearance]]));
 var MATRIX = {
   // The ink is the tone pulled a quarter of the way to the page's own ink. The
   // raw tone clears 4.5:1 on the page, but on its own 15% wash it did not
-  // (light info 4.2:1, dark edition 3.6:1, most of Verdant's tones ~4.1:1).
+  // (light info 4.2:1, dark tone 1 3.6:1, most of Verdant's tones ~4.1:1).
   // Mixing toward --foreground moves it AWAY from the wash in both modes and
   // every theme, and keeps the hue. Status tones mix from their -text token,
   // not the fill: dark fills now sit low enough for a white label, and ink
   // mixed from them fell under 4.5:1 (Meridian dark destructive, 3.8:1).
   soft: {
     neutral: "bg-secondary text-secondary-foreground",
-    standard: "bg-tone-standard/15 text-[color-mix(in_oklch,var(--tone-standard)_75%,var(--foreground))]",
-    collectible: "bg-tone-collectible/15 text-[color-mix(in_oklch,var(--tone-collectible)_75%,var(--foreground))]",
-    edition: "bg-tone-edition/15 text-[color-mix(in_oklch,var(--tone-edition)_75%,var(--foreground))]",
+    "3": "bg-tone-3/15 text-[color-mix(in_oklch,var(--tone-3)_75%,var(--foreground))]",
+    "2": "bg-tone-2/15 text-[color-mix(in_oklch,var(--tone-2)_75%,var(--foreground))]",
+    "1": "bg-tone-1/15 text-[color-mix(in_oklch,var(--tone-1)_75%,var(--foreground))]",
     info: "bg-tone-info/15 text-[color-mix(in_oklch,var(--tone-info-text)_75%,var(--foreground))]",
     success: "bg-success/15 text-[color-mix(in_oklch,var(--success-text)_75%,var(--foreground))]",
     warning: "bg-tone-warning/15 text-[color-mix(in_oklch,var(--tone-warning-text)_75%,var(--foreground))]",
-    destructive: "bg-destructive/15 text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
+    destructive: "bg-destructive/15 text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]",
+    ...families("soft")
   },
   outline: {
     neutral: "border border-border text-foreground",
-    standard: "border border-tone-standard/50 text-tone-standard",
-    collectible: "border border-tone-collectible/50 text-tone-collectible",
-    edition: "border border-tone-edition/50 text-tone-edition",
+    "3": "border border-tone-3/50 text-tone-3",
+    "2": "border border-tone-2/50 text-tone-2",
+    "1": "border border-tone-1/50 text-tone-1",
     info: "border border-tone-info/50 text-tone-info",
     success: "border border-success/50 text-success",
     warning: "border border-tone-warning/50 text-tone-warning",
-    destructive: "border border-destructive/50 text-destructive"
+    destructive: "border border-destructive/50 text-destructive",
+    ...families("outline")
   },
   solid: {
     neutral: "bg-foreground text-background",
-    standard: "bg-tone-standard text-tone-standard-foreground",
-    collectible: "bg-tone-collectible text-tone-collectible-foreground",
-    edition: "bg-tone-edition text-tone-edition-foreground",
+    "3": "bg-tone-3 text-tone-3-foreground",
+    "2": "bg-tone-2 text-tone-2-foreground",
+    "1": "bg-tone-1 text-tone-1-foreground",
     info: "bg-tone-info text-tone-info-foreground",
     success: "bg-success text-success-foreground",
     warning: "bg-tone-warning text-tone-warning-foreground",
-    destructive: "bg-destructive text-destructive-foreground"
+    destructive: "bg-destructive text-destructive-foreground",
+    ...families("solid")
   },
   overlay: {
     neutral: "bg-overlay/85 text-overlay-foreground",
-    standard: "bg-tone-standard text-tone-standard-foreground",
-    collectible: "bg-tone-collectible text-tone-collectible-foreground",
-    edition: "bg-tone-edition text-tone-edition-foreground",
+    "3": "bg-tone-3 text-tone-3-foreground",
+    "2": "bg-tone-2 text-tone-2-foreground",
+    "1": "bg-tone-1 text-tone-1-foreground",
     info: "bg-tone-info text-tone-info-foreground",
     success: "bg-success text-success-foreground",
     warning: "bg-tone-warning text-tone-warning-foreground",
-    destructive: "bg-destructive text-destructive-foreground"
+    destructive: "bg-destructive text-destructive-foreground",
+    ...families("overlay")
   },
   plain: {
     neutral: "text-muted-foreground",
-    standard: "text-foreground",
-    collectible: "text-foreground",
-    edition: "text-foreground",
+    "3": "text-foreground",
+    "2": "text-foreground",
+    "1": "text-foreground",
     info: "text-foreground",
     success: "text-foreground",
     warning: "text-foreground",
-    destructive: "text-destructive"
+    destructive: "text-destructive",
+    ...families("plain")
   }
 };
 var badgeVariants = cva(
@@ -75,7 +89,7 @@ var badgeVariants = cva(
         overlay: "gap-1 border border-transparent",
         plain: "gap-1.5"
       },
-      tone: { neutral: "", standard: "", collectible: "", edition: "", info: "", success: "", warning: "", destructive: "" },
+      tone: { neutral: "", "1": "", "2": "", "3": "", info: "", success: "", warning: "", destructive: "", red: "", orange: "", yellow: "", green: "", teal: "", blue: "", purple: "", pink: "" },
       size: {
         sm: "text-label-sm",
         md: "text-label-md"

package/dist/components/banner/banner.meta.js

@@ -1,7 +1,7 @@
 // src/components/banner/banner.meta.ts
 var bannerMeta = {
   name: "Banner",
-  summary: "Full-width, page-level announcement bar. A tone (neutral, info, success, warning, edition, destructive) \xD7 an appearance (soft tint or loud solid fill), and an optional leading scope label. Centers its message, or \u2014 with a trailing action \u2014 switches to a leading-text + trailing-button layout. Optionally sticky and dismissible.",
+  summary: "Full-width, page-level announcement bar. A tone (neutral, info, success, warning, the decorative 1, destructive) \xD7 an appearance (soft tint or loud solid fill), and an optional leading scope label. Centers its message, or \u2014 with a trailing action \u2014 switches to a leading-text + trailing-button layout. Optionally sticky and dismissible.",
   keywords: [
     "banner",
     "announcement",
@@ -67,9 +67,9 @@ var bannerMeta = {
   props: [
     {
       name: "tone",
-      type: '"neutral" | "info" | "success" | "warning" | "edition" | "destructive"',
+      type: '"neutral" | "info" | "success" | "warning" | "1" | "destructive"',
       default: '"neutral"',
-      description: "Neutral surface or a tone that encodes the announcement's intent (info / success / warning / edition / destructive)."
+      description: "Neutral surface or a tone that encodes the announcement's intent (info / success / warning / the decorative 1 / destructive)."
     },
     {
       name: "appearance",
@@ -112,7 +112,7 @@ var bannerMeta = {
     }
   ],
   variants: {
-    tone: ["neutral", "info", "success", "warning", "edition", "destructive"],
+    tone: ["neutral", "info", "success", "warning", "1", "destructive"],
     appearance: ["soft", "solid"]
   },
   tokensUsed: [
@@ -126,8 +126,8 @@ var bannerMeta = {
     "success-foreground",
     "tone-warning",
     "tone-warning-foreground",
-    "tone-edition",
-    "tone-edition-foreground",
+    "tone-1",
+    "tone-1-foreground",
     "destructive",
     "destructive-foreground"
   ],
@@ -143,7 +143,7 @@ var bannerMeta = {
     },
     {
       label: "Solid (loud)",
-      code: '<Banner tone="destructive" appearance="solid" live="assertive">Blockchain unavailable. Collect and buy are temporarily disabled.</Banner>'
+      code: '<Banner tone="destructive" appearance="solid" live="assertive">Payments are down. Checkout and upgrades are temporarily disabled.</Banner>'
     },
     {
       label: "Success",
@@ -159,7 +159,7 @@ var bannerMeta = {
     },
     {
       label: "Recoverable warning",
-      code: '<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>'
+      code: '<Banner tone="warning" action={<Button variant="outline" size="sm">Reconnect</Button>}>Calendar sync paused.</Banner>'
     },
     {
       label: "App-shell outage",

package/dist/components/banner/banner.variants.js

@@ -9,7 +9,7 @@ var bannerVariants = cva(
         info: "",
         success: "",
         warning: "",
-        edition: "",
+        "1": "",
         destructive: ""
       },
       appearance: {
@@ -23,14 +23,14 @@ var bannerVariants = cva(
       { tone: "info", appearance: "soft", class: "bg-tone-info/15 text-foreground" },
       { tone: "success", appearance: "soft", class: "bg-success/15 text-foreground" },
       { tone: "warning", appearance: "soft", class: "bg-tone-warning/15 text-foreground" },
-      { tone: "edition", appearance: "soft", class: "bg-tone-edition/15 text-foreground" },
+      { tone: "1", appearance: "soft", class: "bg-tone-1/15 text-foreground" },
       { tone: "destructive", appearance: "soft", class: "bg-destructive/15 text-foreground" },
       // Solid — the full tone fill with its paired ink, for loud states.
       { tone: "neutral", appearance: "solid", class: "bg-foreground text-background" },
       { tone: "info", appearance: "solid", class: "bg-tone-info text-tone-info-foreground" },
       { tone: "success", appearance: "solid", class: "bg-success text-success-foreground" },
       { tone: "warning", appearance: "solid", class: "bg-tone-warning text-tone-warning-foreground" },
-      { tone: "edition", appearance: "solid", class: "bg-tone-edition text-tone-edition-foreground" },
+      { tone: "1", appearance: "solid", class: "bg-tone-1 text-tone-1-foreground" },
       { tone: "destructive", appearance: "solid", class: "bg-destructive text-destructive-foreground" }
     ],
     defaultVariants: {

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

@@ -164,7 +164,7 @@ var barChartMeta = {
     },
     {
       name: "negativeTone",
-      type: '"edition" | "collectible" | "standard" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive"',
+      type: '"1" | "2" | "3" | "info" | "warning" | "primary" | "neutral" | "success" | "destructive"',
       description: "Colour negative values with this tone."
     },
     {
@@ -181,9 +181,9 @@ var barChartMeta = {
     }
   ],
   tokensUsed: [
-    "tone-edition",
-    "tone-collectible",
-    "tone-standard",
+    "tone-1",
+    "tone-2",
+    "tone-3",
     "tone-info",
     "tone-warning",
     "primary",

package/dist/components/breadcrumbs/breadcrumbs.meta.js

@@ -98,7 +98,7 @@ var breadcrumbsMeta = {
   examples: [
     {
       label: "Three-level trail",
-      code: '<Breadcrumbs><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="/library">Library</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Editions</BreadcrumbPage></BreadcrumbItem></Breadcrumbs>'
+      code: '<Breadcrumbs><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="/library">Library</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Reports</BreadcrumbPage></BreadcrumbItem></Breadcrumbs>'
     },
     {
       label: "Custom separator",

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