@sableui/react 0.15.0 → 0.16.0

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

@@ -11,7 +11,12 @@ var meterMeta = {
     "capacity",
     "limit",
     "password strength",
-    "level"
+    "level",
+    "segmented",
+    "tick bar",
+    "score",
+    "credits",
+    "spend limit"
   ],
   usage: {
     description: "Use Meter to show a static measurement against a known maximum \u2014 storage used, seats taken, API quota, password strength. It is announced as a meter, not a progress bar, so a screen-reader user hears a level rather than a task underway.",
@@ -36,6 +41,15 @@ var meterMeta = {
       {
         guidance: "do",
         description: 'Use shape="ring" when the reading is a score that belongs in a small, glanceable spot on a card. It is the same measurement drawn as a circular gauge, not a different component.'
+      },
+      {
+        guidance: "do",
+        description: "Use `segments` (a tick bar, \u25AE\u25AE\u25AE\u25AE\u25AE\u25AE\u25AF\u25AF\u25AF\u25AF) for a discrete budget, score or quota read at a glance \u2014 a spend limit, credits left, an ICP lead score, months of data coverage. Pick a count that matches the unit when there is one (10 for a score out of 10, 12 for months) and otherwise size it to the track: a tick reads as a tick when it is taller than it is wide, about one per 8px of track (40 across a card row, 20 in a narrow table cell). Any reading above min shows at least one tick."
+      },
+      {
+        guidance: "dont",
+        description: "Do not segment a fine-grained continuous value where the exact proportion matters (disk at 73.4%) \u2014 ticks round it to the nearest mark; use the continuous bar. And do not use a tick bar for a task in flight or steps completed: that is Progress, or a Stepper for named steps.",
+        instead: ["Progress"]
       }
     ],
     anatomy: [
@@ -47,7 +61,7 @@ var meterMeta = {
       {
         name: "MeterIndicator",
         required: true,
-        description: "The fill, sized from value and coloured by tone."
+        description: "The fill, sized from value and coloured by tone. Not used with `segments`: the track draws its ticks instead."
       },
       {
         name: "MeterLabel",
@@ -105,6 +119,11 @@ var meterMeta = {
       type: "boolean",
       description: "Print the value in the ring's centre (formatted like MeterValue)."
     },
+    {
+      name: "segments",
+      type: "number",
+      description: 'Draw the bar as this many separate ticks instead of a continuous fill (a quota, score or spend limit). Filled ticks = round(share \xD7 N), at least one for any reading above min, none at min. Ticks take the tone; empty ones sit on the rail colour. The segmented track has its own, taller sm / md / lg ladder. Bar only: ignored for shape="ring".'
+    },
     {
       name: "strokeWidth",
       type: "number",
@@ -131,7 +150,7 @@ var meterMeta = {
     {
       name: "MeterTrack",
       type: "Base UI Track props + className + size",
-      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default."
+      description: "The rail. Rendered automatically when Meter has no children; renders a MeterIndicator by default \u2014 or, when the Meter has `segments`, its row of ticks (children are not rendered then)."
     },
     {
       name: "MeterIndicator",
@@ -157,11 +176,16 @@ var meterMeta = {
   tokensUsed: [
     "secondary",
     "primary",
+    "tone-3",
     "success",
     "tone-warning",
     "destructive",
     "foreground",
-    "muted-foreground"
+    "muted-foreground",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-3-mark"
   ],
   motion: [
     {
@@ -182,6 +206,12 @@ var meterMeta = {
       part: "MeterIndicator",
       why: "Width and colour ease on the motion tokens (no recipe animates width) when the reading changes \u2014 freeing space after a delete visibly shrinks the bar, so the user sees the cause and effect rather than a different bar."
     },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "MeterTrack (segments)",
+      why: "With segments, the fill runs through the ticks from the edge it is leaving \u2014 left to right as it grows, right to left as it shrinks \u2014 each tick easing its colour on the fast token after a stagger that is a share of the slow token (a full sweep is one slow duration) \xD7 --motion-expressive. Every tick switching at once would read as a different bar, not the same budget moving; `subtle` lands them together and off is instant."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -212,6 +242,23 @@ var meterMeta = {
 	</div>
 	<MeterTrack />
 </Meter>`
+    },
+    {
+      label: "Segmented spend limit",
+      code: `<Meter value={1240} max={2000} segments={40} getAriaValueText={() => "\u20AC1,240 of \u20AC2,000 spent this month"}>
+	<div className="mb-2 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+		<MeterLabel>Monthly spend limit</MeterLabel>
+		<MeterValue>{() => "\u20AC1,240 / \u20AC2,000"}</MeterValue>
+	</div>
+	<MeterTrack />
+</Meter>`
+    },
+    {
+      label: "Segmented score cell",
+      code: `<div className="flex items-center gap-3">
+	<Meter value={8} max={10} segments={10} size="sm" tone="success" className="w-24" aria-label="ICP score" getAriaValueText={(_, v) => \`\${v} out of 10\`} />
+	<span className="text-mono-sm text-foreground">8/10</span>
+</div>`
     },
     {
       label: "Tones",

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

@@ -1,16 +1,17 @@
 // src/components/meter/meter.variants.ts
 import { cva } from "class-variance-authority";
+var meterToneFill = {
+  primary: "bg-primary",
+  "3": "bg-tone-3-mark",
+  success: "bg-success-mark",
+  warning: "bg-tone-warning-mark",
+  destructive: "bg-destructive-mark"
+};
 var meterIndicatorVariants = cva(
   "h-full rounded-full transition-[width,background-color] duration-(--motion-duration-slow) ease-decelerate",
   {
     variants: {
-      tone: {
-        primary: "bg-primary",
-        "3": "bg-tone-3",
-        success: "bg-success",
-        warning: "bg-tone-warning",
-        destructive: "bg-destructive"
-      }
+      tone: meterToneFill
     },
     defaultVariants: {
       tone: "primary"
@@ -29,6 +30,39 @@ var meterTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-se
     size: "md"
   }
 });
+var meterSegmentedTrackVariants = cva("flex w-full gap-0.5", {
+  variants: {
+    size: {
+      sm: "h-3",
+      md: "h-4",
+      lg: "h-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var meterTickVariants = cva(
+  // The corner follows the theme's smallest radius but stops at half a spacing
+  // step: a tick is a few px wide, and at the full radius-xs (4px in most
+  // themes) it rounded into a pill and the row read as a string of beads.
+  "h-full min-w-0 flex-1 rounded-[min(var(--radius-xs),--spacing(0.5))] transition-[background-color] duration-(--motion-duration-fast) ease-standard",
+  {
+    variants: {
+      tone: { primary: "", "3": "", success: "", warning: "", destructive: "" },
+      filled: { true: "", false: "bg-secondary" }
+    },
+    compoundVariants: Object.keys(meterToneFill).map((tone) => ({
+      tone,
+      filled: true,
+      class: meterToneFill[tone]
+    })),
+    defaultVariants: {
+      tone: "primary",
+      filled: false
+    }
+  }
+);
 var meterRingValueVariants = cva("absolute inset-0 flex items-center justify-center text-foreground", {
   variants: {
     size: {
@@ -57,5 +91,7 @@ export {
   meterIndicatorVariants,
   meterRingValueVariants,
   meterRingVariants,
+  meterSegmentedTrackVariants,
+  meterTickVariants,
   meterTrackVariants
 };

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

@@ -83,7 +83,11 @@ var noteMeta = {
     "tone-info",
     "tone-warning",
     "success",
-    "destructive"
+    "destructive",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark"
   ],
   motion: [
     {

package/dist/components/note/note.variants.js

@@ -5,10 +5,10 @@ var noteVariants = cva(
   {
     variants: {
       tone: {
-        info: "border-tone-info/30 bg-tone-info/10",
-        warning: "border-tone-warning/30 bg-tone-warning/10",
-        success: "border-success/30 bg-success/10",
-        destructive: "border-destructive/30 bg-destructive/10",
+        info: "border-tone-info-mark/30 bg-tone-info-mark/10",
+        warning: "border-tone-warning-mark/30 bg-tone-warning-mark/10",
+        success: "border-success-mark/30 bg-success-mark/10",
+        destructive: "border-destructive-mark/30 bg-destructive-mark/10",
         neutral: "border-border bg-muted/40"
       }
     },

package/dist/components/number-field/number-field.meta.js

@@ -80,8 +80,8 @@ var numberFieldMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "accent",

package/dist/components/otp-field/otp-field.meta.js

@@ -142,8 +142,8 @@ var otpFieldMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "border-strong",

package/dist/components/panel-group/panel-group.js

@@ -107,14 +107,11 @@ function PanelResizer({
       const delta = side === "left" ? ev.clientX - startX : startX - ev.clientX;
       onWidthChange(startWidth + delta);
     }
-    function onUp() {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    }
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    const drag = new AbortController();
+    const { signal } = drag;
+    window.addEventListener("pointermove", onMove, { signal });
+    window.addEventListener("pointerup", () => drag.abort(), { signal });
+    window.addEventListener("pointercancel", () => drag.abort(), { signal });
   }
   function onKeyDown(e) {
     const grow = side === "left" ? "ArrowRight" : "ArrowLeft";

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

@@ -168,7 +168,12 @@ var pieChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

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

@@ -162,7 +162,12 @@ var radarChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

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

@@ -174,7 +174,12 @@ var radialChartMeta = {
     "popover",
     "popover-foreground",
     "foreground",
-    "background"
+    "background",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

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

@@ -1,7 +1,7 @@
 // src/components/search-input/search-input.meta.ts
 var searchInputMeta = {
   name: "SearchInput",
-  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), card surface, 2px focus ring; the clear button appears only when there is a value.",
+  summary: "Styled search field with a leading magnifier and a clearable X. Soft-square (rounded-sm), the theme's field surface, 2px focus ring; the clear button appears only when there is a value.",
   status: "stable",
   keywords: [
     "search",
@@ -24,6 +24,10 @@ var searchInputMeta = {
         guidance: "do",
         description: "When a button stands in for search (a header trigger that opens CommandMenu with \u2318K), use CommandMenuTrigger. It wears this field's shell from the same source, so the two cannot drift; a hand-styled button already did once, into a borderless chip that matched neither the field nor a button."
       },
+      {
+        guidance: "do",
+        description: "Light the query in the results it filters with `useMatchHighlight(query)` \u2014 a callback ref for the results container, with `selector` to keep it to titles. It paints on the `highlight` pair without wrapping matches in `<mark>`, the same paint Combobox and CommandMenu use for their rows."
+      },
       {
         guidance: "dont",
         description: "Do not use SearchInput as a command palette; use CommandMenu for global commands, opened from the header by CommandMenuTrigger. A SearchInput that opens a dialog on focus is a text box you cannot type in."
@@ -91,8 +95,8 @@ var searchInputMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "ring",
@@ -144,6 +148,10 @@ var searchInputMeta = {
       label: "Uncontrolled, sized as a whole",
       code: '<Field label="Search posts"><SearchInput defaultValue="roadmap" className="max-w-80" /></Field>'
     },
+    {
+      label: "Highlighting matches in the results",
+      code: 'const [q, setQ] = useState("")\nconst results = useMatchHighlight<HTMLUListElement>(q, { selector: "[data-title]" })\nconst shown = posts.filter((post) => post.title.toLowerCase().includes(q.trim().toLowerCase()))\n\n<SearchInput value={q} onValueChange={setQ} placeholder="Search posts" />\n<ul ref={results}>\n	{shown.map((post) => (\n		<li key={post.id}><span data-title>{post.title}</span></li>\n	))}\n</ul>'
+    },
     {
       label: "Disabled",
       code: '<SearchInput disabled placeholder="Search" />'

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

@@ -71,7 +71,14 @@ var segmentedBarMeta = {
     "muted-foreground",
     "success",
     "tone-warning",
-    "destructive"
+    "destructive",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

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

@@ -5,15 +5,15 @@ var segmentedBarSegmentVariants = cva(
   {
     variants: {
       tone: {
-        "1": "bg-tone-1",
-        "2": "bg-tone-2",
-        "3": "bg-tone-3",
-        info: "bg-tone-info",
+        "1": "bg-tone-1-mark",
+        "2": "bg-tone-2-mark",
+        "3": "bg-tone-3-mark",
+        info: "bg-tone-info-mark",
         primary: "bg-primary",
         neutral: "bg-muted-foreground",
-        success: "bg-success",
-        warning: "bg-tone-warning",
-        destructive: "bg-destructive"
+        success: "bg-success-mark",
+        warning: "bg-tone-warning-mark",
+        destructive: "bg-destructive-mark"
       }
     },
     defaultVariants: {

package/dist/components/select/select.js

@@ -72,7 +72,7 @@ function SelectTrigger({
       className: cn(
         `flex w-full items-center justify-between ${tier.body} text-foreground motion-interactive`,
         mobileTier,
-        size === "xs" ? cn("h-(--control-xs) gap-1 px-1.5", FIELD_SHELL_XS) : "h-(--control-md) gap-2 rounded-sm border border-input bg-card px-3",
+        size === "xs" ? cn("h-(--control-xs) gap-1 px-1.5", FIELD_SHELL_XS) : "h-(--control-md) gap-2 rounded-sm border border-field-border bg-field px-3",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         "data-[popup-open]:ring-2 data-[popup-open]:ring-ring",
         // Invalid like every other field: Base UI marks the trigger

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

@@ -124,8 +124,8 @@ var selectMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "ring",
     "border",

package/dist/components/sheet/sheet.js

@@ -61,11 +61,12 @@ function useKeyboardInset(enabled) {
       Math.abs(viewport.scale - 1) > 0.01 ? 0 : Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop))
     );
     measure();
-    viewport.addEventListener("resize", measure);
-    viewport.addEventListener("scroll", measure);
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    viewport.addEventListener("resize", measure, { signal });
+    viewport.addEventListener("scroll", measure, { signal });
     return () => {
-      viewport.removeEventListener("resize", measure);
-      viewport.removeEventListener("scroll", measure);
+      listeners.abort();
       setInset(0);
     };
   }, [enabled]);

package/dist/components/sidebar/sidebar.js

@@ -10,6 +10,7 @@ import {
 import { cn } from "../../lib/cn.js";
 import { HighlightGlide } from "../../lib/highlight-glide.js";
 import { motionAttribute } from "../../motion/MotionProvider.js";
+import { useAppShellFrame } from "../app-shell/app-shell-frame.js";
 import { RAIL_ROW_INLINE, sideNavItemIconVariants, sideNavItemVariants } from "../side-nav/side-nav.variants.js";
 import { SimpleTooltip } from "../tooltip/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -27,6 +28,8 @@ var SIDEBAR_VARIANT = {
   app: "hidden lg:flex lg:sticky lg:top-0 lg:h-[calc(100vh-var(--dock-height,0px))] lg:self-start",
   inline: "flex h-full"
 };
+var INSET_RAIL = "lg:h-auto lg:self-stretch";
+var INSET_RAIL_SURFACE = "lg:border-r-0 lg:[--sidebar:var(--shell-ground)]";
 var SIDEBAR_INK = [
   "[--background:var(--sidebar)] [--sable-surface-bg:var(--sidebar)]",
   "[--foreground:var(--sidebar-foreground)]",
@@ -54,6 +57,7 @@ function Sidebar({
 }) {
   const [hasCollapsed, setHasCollapsed] = useState(collapsed);
   if (collapsed && !hasCollapsed) setHasCollapsed(true);
+  const inset = useAppShellFrame() === "inset";
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { collapsed, icons, reopened: hasCollapsed && !collapsed }, children: /* @__PURE__ */ jsx(
     "aside",
     {
@@ -61,6 +65,7 @@ function Sidebar({
       "data-collapsed": collapsed || void 0,
       "data-variant": variant,
       "data-surface": surface,
+      "data-frame": inset ? "inset" : void 0,
       className: cn(
         "shrink-0 flex-col bg-sidebar text-sidebar-foreground",
         // The rail is its own surface. Anything placed in it that inks with
@@ -71,8 +76,11 @@ function Sidebar({
         // a theme names --sidebar-muted-foreground.
         // On the page surface the rail is separated by space and its
         // content, not a rule and a tonal step.
-        surface === "rail" ? cn("border-r border-sidebar-border", SIDEBAR_INK) : PAGE_INK,
+        // In an inset AppShell the rail is the ground itself, so from lg its border
+        // goes too: the gap around the main panel is the divider.
+        surface === "rail" ? cn("border-r border-sidebar-border", inset && INSET_RAIL_SURFACE, SIDEBAR_INK) : PAGE_INK,
         SIDEBAR_VARIANT[variant],
+        inset && INSET_RAIL,
         "w-[var(--sidebar-width,16rem)] data-[collapsed]:w-[var(--sidebar-width-collapsed,4rem)]",
         // Collapsing eases the width (`motion-size`, expressive) rather than
         // jumping 192px in one frame. It reflows the page beside the rail for
@@ -164,11 +172,18 @@ function SidebarFooter({
   className,
   ...props
 }) {
+  const inset = useAppShellFrame() === "inset";
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         "flex flex-col gap-1 border-t border-sidebar-border px-3 py-4",
+        // In an inset shell the rail has no edge of its own (the gap is the
+        // divider), so a full-width rule ran out into that gap and stopped on
+        // nothing. Inset to the content column it spans what the rows span:
+        // the padding becomes margin, so the rule shortens and nothing inside
+        // moves.
+        inset && "lg:mx-3 lg:px-0",
         className
       ),
       ...props

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

@@ -24,6 +24,10 @@ var sidebarMeta = {
         guidance: "do",
         description: `Set surface="page" when a full-width top bar sits above the rail. A theme's tinted or dark rail is for a full-height rail that frames the app.`
       },
+      {
+        guidance: "do",
+        description: `Keep surface="rail" inside AppShell frame="inset": the rail's tint becomes the ground the main panel floats on. Do not add a border-r class back \u2014 the gap is the divider.`
+      },
       {
         guidance: "dont",
         description: "Do not use Sidebar for page-local settings, filters, or temporary action groups."
@@ -76,7 +80,7 @@ var sidebarMeta = {
       name: "surface",
       type: '"rail" | "page"',
       default: '"rail"',
-      description: `Which surface the rail is painted on. "rail" is its own --sidebar-* surface with a border \u2014 right for a full-height rail that frames the app, which a theme may tint or paint dark. "page" uses the page's surface and ink with no border \u2014 use it when a full-width header sits above the rail, where a tinted column starting under a page-coloured bar reads as pasted on. Use it instead of overriding bg-/text- classes, which the rail's re-pointed tokens defeat.`
+      description: `Which surface the rail is painted on. "rail" is its own --sidebar-* surface with a border \u2014 right for a full-height rail that frames the app, which a theme may tint or paint dark. "page" uses the page's surface and ink with no border \u2014 use it when a full-width header sits above the rail, where a tinted column starting under a page-coloured bar reads as pasted on. Use it instead of overriding bg-/text- classes, which the rail's re-pointed tokens defeat. In AppShell's sidebar slot with frame="inset", the rail's surface is also the shell's ground: from lg a "rail" rail drops its border (the gap around the main panel divides them) and either surface stretches to the shell's body row instead of sizing to the viewport. AppShell signals this to its sidebar slot only, so a Sidebar elsewhere in the page is unaffected.`
     },
     {
       name: "motion",
@@ -146,7 +150,8 @@ var sidebarMeta = {
     "sidebar-border",
     "sidebar-accent",
     "sidebar-accent-foreground",
-    "sidebar-ring"
+    "sidebar-ring",
+    "shell-ground"
   ],
   variants: {
     variant: ["app", "inline"]

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

@@ -106,7 +106,14 @@ var sparklineMeta = {
     "tone-warning",
     "muted-foreground",
     "success",
-    "destructive"
+    "destructive",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   motion: [
     {

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

@@ -83,7 +83,14 @@ var statusDotMeta = {
     "tone-info",
     "tone-1",
     "tone-2",
-    "destructive"
+    "destructive",
+    "destructive-mark",
+    "success-mark",
+    "tone-warning-mark",
+    "tone-info-mark",
+    "tone-1-mark",
+    "tone-2-mark",
+    "tone-3-mark"
   ],
   a11y: [
     "Rendered aria-hidden \u2014 purely decorative. Convey status in adjacent text, not color alone.",

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

@@ -4,13 +4,13 @@ var statusDotVariants = cva("inline-block shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-muted-foreground",
-      "3": "bg-tone-3",
-      success: "bg-success",
-      warning: "bg-tone-warning",
-      info: "bg-tone-info",
-      "1": "bg-tone-1",
-      "2": "bg-tone-2",
-      destructive: "bg-destructive",
+      "3": "bg-tone-3-mark",
+      success: "bg-success-mark",
+      warning: "bg-tone-warning-mark",
+      info: "bg-tone-info-mark",
+      "1": "bg-tone-1-mark",
+      "2": "bg-tone-2-mark",
+      destructive: "bg-destructive-mark",
       // A palette family paints from the slot its data-palette scope fills.
       red: "bg-palette-dot",
       orange: "bg-palette-dot",

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

@@ -115,7 +115,8 @@ var stepperMeta = {
     "border-strong",
     "destructive",
     "destructive-foreground",
-    "ring"
+    "ring",
+    "destructive-mark"
   ],
   motion: [
     {

package/dist/components/stepper/stepper.variants.js

@@ -24,7 +24,7 @@ var stepperDotVariants = cva(
         complete: "bg-primary",
         current: "bg-[var(--sable-surface-bg,var(--background))] ring-[0.1875em] ring-primary ring-inset",
         upcoming: "bg-border-strong",
-        error: "bg-destructive"
+        error: "bg-destructive-mark"
       }
     },
     defaultVariants: {

package/dist/components/table/table.meta.js

@@ -100,13 +100,13 @@ var tableMeta = {
     },
     {
       name: "TableHead",
-      type: 'ComponentPropsWithRef<"th">',
-      description: "A column header cell (th) in muted label styling."
+      type: 'ComponentPropsWithRef<"th"> & { numeric?: boolean }',
+      description: "A column header cell (th) in muted label styling. `numeric` marks a number column: end-aligned, tabular figures \u2014 set it on the column's cells too."
     },
     {
       name: "TableCell",
-      type: 'ComponentPropsWithRef<"td">',
-      description: "A data cell (td)."
+      type: 'ComponentPropsWithRef<"td"> & { numeric?: boolean }',
+      description: "A data cell (td). `numeric` end-aligns it with tabular figures, matching its column's header."
     },
     {
       name: "TableCaption",

package/dist/components/textarea/textarea.js

@@ -23,6 +23,11 @@ function Textarea({
         // already lost the invalid ring Input shows on focus.
         FIELD_SHELL,
         FIELD_INVALID,
+        // Text being edited must not rewrap above the caret. `text-wrap-style`
+        // inherits, so a field inside a `text-pretty` or `text-balance` block
+        // would re-break every earlier line on each keystroke; `stable` is
+        // what an editing surface asks for. Longhand only: the wrap mode stays.
+        "[text-wrap-style:stable]",
         autoResize && "field-sizing-content resize-none",
         tier.body,
         density === "comfortable" && MOBILE_FIELD_TIER,

package/dist/components/textarea/textarea.meta.js

@@ -1,7 +1,7 @@
 // src/components/textarea/textarea.meta.ts
 var textareaMeta = {
   name: "Textarea",
-  summary: "Styled native multi-line text control. Soft-square, card surface, --ring focus, and an aria-invalid destructive error state.",
+  summary: "Styled native multi-line text control. Soft-square, the theme's field surface, --ring focus, and an aria-invalid destructive error state.",
   status: "stable",
   keywords: [
     "textarea",
@@ -75,8 +75,8 @@ var textareaMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "ring",