@sableui/react 0.14.0 → 0.16.0

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

@@ -0,0 +1,104 @@
+"use client";
+
+// src/components/reaction-picker/reaction-picker.tsx
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { cn } from "../../lib/cn.js";
+import { motionAttribute } from "../../motion/MotionProvider.js";
+import { Toolbar, ToolbarButton } from "../toolbar/toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_REACTIONS = [
+  { emoji: "\u{1F44D}", label: "Thumbs up" },
+  { emoji: "\u2764\uFE0F", label: "Heart" },
+  { emoji: "\u{1F602}", label: "Laughing" },
+  { emoji: "\u{1F389}", label: "Party" },
+  { emoji: "\u{1F62E}", label: "Surprised" },
+  { emoji: "\u{1F622}", label: "Sad" },
+  { emoji: "\u{1F64F}", label: "Thank you" }
+];
+var PRESSED = "aria-pressed:bg-primary/10 data-[checked]:bg-primary/10";
+var MENU_CELL = `group/reaction grid size-(--control-md) shrink-0 cursor-pointer select-none place-items-center rounded-full outline-none sable-surface-interactive motion-interactive motion-press ${PRESSED}`;
+function Glyph({ emoji, index }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "motion-bloom",
+      style: { "--motion-bloom-delay": `${index * 24}ms` },
+      children: /* @__PURE__ */ jsx("span", { className: "block text-[calc(var(--control-md)*0.6)] leading-none transition-[scale] duration-(--motion-duration-fast) ease-standard group-hover/reaction:scale-125 group-focus-visible/reaction:scale-125 group-data-[highlighted]/reaction:scale-125", children: emoji })
+    }
+  );
+}
+function ReactionPicker({
+  reactions = DEFAULT_REACTIONS,
+  selected = [],
+  onSelect,
+  motion,
+  className,
+  children,
+  "aria-label": ariaLabel = "Reactions",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      "aria-label": ariaLabel,
+      "data-motion": motionAttribute(motion),
+      className: cn("gap-0.5", className),
+      ...props,
+      children: [
+        reactions.map((reaction, index) => /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            size: "icon",
+            "aria-label": reaction.label,
+            "aria-pressed": selected.includes(reaction.emoji),
+            onClick: () => onSelect?.(reaction.emoji),
+            className: cn("group/reaction rounded-full", PRESSED),
+            children: /* @__PURE__ */ jsx(Glyph, { emoji: reaction.emoji, index })
+          },
+          reaction.emoji
+        )),
+        children
+      ]
+    }
+  );
+}
+ReactionPicker.displayName = "ReactionPicker";
+function MenuReactions({
+  reactions = DEFAULT_REACTIONS,
+  selected = [],
+  onSelect,
+  motion,
+  className,
+  "aria-label": ariaLabel = "Reactions",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    BaseMenu.Group,
+    {
+      "aria-label": ariaLabel,
+      "data-motion": motionAttribute(motion),
+      className: cn("flex items-center gap-0.5", className),
+      ...props,
+      children: reactions.map((reaction, index) => /* @__PURE__ */ jsx(
+        BaseMenu.CheckboxItem,
+        {
+          label: reaction.label,
+          "aria-label": reaction.label,
+          checked: selected.includes(reaction.emoji),
+          onCheckedChange: () => onSelect?.(reaction.emoji),
+          closeOnClick: true,
+          className: MENU_CELL,
+          children: /* @__PURE__ */ jsx(Glyph, { emoji: reaction.emoji, index })
+        },
+        reaction.emoji
+      ))
+    }
+  );
+}
+MenuReactions.displayName = "MenuReactions";
+export {
+  DEFAULT_REACTIONS,
+  MenuReactions,
+  ReactionPicker
+};

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

@@ -0,0 +1,156 @@
+// src/components/reaction-picker/reaction-picker.meta.ts
+var reactionPickerMeta = {
+  name: "ReactionPicker",
+  summary: "The quick row of emoji you react to a message with: a toolbar of large emoji toggles that bloom in one after another as it opens and magnify under the pointer, with MenuReactions as the same row inside a right-click menu.",
+  status: "stable",
+  keywords: [
+    "reaction",
+    "reactions",
+    "emoji",
+    "emoji picker",
+    "react",
+    "tapback",
+    "quick reactions",
+    "message actions",
+    "chat"
+  ],
+  usage: {
+    description: "Use ReactionPicker wherever a reader chooses a reaction for something: in a Popover from an add-reaction control (BubbleReactionAdd is that, ready-made), or as a hover bar over a message. Use MenuReactions for the same row as the first group of the menu a message opens on right-click or long-press, above Reply and Copy. Both report which emoji the reader has already used, so choosing one again removes it.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Keep the quick set short \u2014 six to eight. It is the reactions people actually use; a full emoji catalogue belongs behind a trailing "more" control passed as children.'
+      },
+      {
+        guidance: "do",
+        description: "Give every reaction a `label`. It is the accessible name and the menu's typeahead, and an emoji's own spoken name differs between platforms."
+      },
+      {
+        guidance: "do",
+        description: "Pass `selected` so the reader's own reactions show pressed, and toggle in `onSelect`: choosing a reaction you already gave takes it back."
+      },
+      {
+        guidance: "do",
+        description: "Offer the right-click menu and a visible add-reaction control together. A context menu is invisible until you know it is there; the pill is how a first-time reader finds reactions."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put a ReactionPicker inside a Menu or ContextMenu. A toolbar is not a menu item, so the menu's arrow keys would skip it; use MenuReactions there.",
+        instead: ["MenuReactions"]
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it to rate an answer or collect a verdict. Reactions are social and many-valued; a helpful / not-helpful question is Feedback.",
+        instead: ["Feedback"]
+      }
+    ],
+    anatomy: [
+      {
+        name: "ReactionPicker",
+        required: true,
+        description: "The toolbar: one tab stop, arrow keys move between emoji, each a toggle with `aria-pressed`."
+      },
+      {
+        name: "MenuReactions",
+        required: false,
+        description: "The same row as a group of checkbox menu items, for MenuContent and ContextMenuContent. Choosing one closes the menu."
+      }
+    ]
+  },
+  related: {
+    components: ["Bubble", "ContextMenu", "Popover", "Toolbar", "Feedback"]
+  },
+  props: [
+    {
+      name: "reactions",
+      type: "readonly { emoji: string; label: string }[]",
+      default: "DEFAULT_REACTIONS",
+      description: "The choices, in order. The default is \u{1F44D} \u2764\uFE0F \u{1F602} \u{1F389} \u{1F62E} \u{1F622} \u{1F64F}."
+    },
+    {
+      name: "selected",
+      type: "readonly string[]",
+      default: "[]",
+      description: "The emoji the reader has already reacted with: shown pressed, and choosing one again removes it."
+    },
+    {
+      name: "onSelect",
+      type: "(emoji: string) => void",
+      description: "Called with the emoji the reader chose. Toggle it in or out of `selected`."
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "ReactionPicker only: trailing controls after the emoji, such as a button that opens a full emoji picker."
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      default: '"Reactions"',
+      description: "The name of the toolbar or menu group."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps the press and drops the wave of emoji blooming in and the magnify, `off` stills it. It can only turn motion down."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "MenuReactions",
+      type: "{ reactions?; selected?; onSelect?; motion? } & ComponentProps<typeof Menu.Group>",
+      description: "The quick row as checkbox menu items, for the first group of a MenuContent or ContextMenuContent. Same props as ReactionPicker, without children."
+    }
+  ],
+  tokensUsed: ["accent", "primary", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-bloom",
+      part: "Glyph",
+      why: "Opening the picker is the reader's own action, so the emoji answer it: each blooms in 24ms after the one before, a short wave from first to last. The surface it sits in (a Popover or a menu) arrives with its own motion-pop. Expressive only \u2014 under `subtle` the emoji are simply there."
+    },
+    {
+      slot: "response",
+      recipe: "custom",
+      part: "Glyph",
+      why: "The emoji under the pointer or the keyboard highlight magnifies to 1.25 on a fast standard ease, so you can see which one a release will choose; each cell also carries motion-interactive and motion-press. The magnify rides an inner layer so it never fights the bloom over `scale`."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Cell",
+      why: "Pressed and not pressed differ by a tint, eased by motion-interactive. The celebration belongs to the reaction that lands under the message (BubbleReaction), not to the picker that chose it."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Choosing is instant; there is no in-between state to show."
+    }
+  ],
+  a11y: [
+    "ReactionPicker is a Base UI toolbar: one tab stop, Left/Right move between emoji, Home/End jump to the ends.",
+    "Each emoji is a button named by its `label` and reporting `aria-pressed`, so a screen-reader user hears whether choosing it adds or removes their reaction. The glyph itself is aria-hidden.",
+    "MenuReactions renders checkbox menu items (`menuitemcheckbox` with `aria-checked`), reached by the menu's arrow keys and typeahead like every other row.",
+    "Under reduced motion the emoji appear at once and do not magnify; pressed state is carried by `aria-pressed` and a tint, never motion."
+  ],
+  examples: [
+    {
+      label: "In a popover",
+      code: '<Popover>\n	<PopoverTrigger render={<Button variant="ghost" size="icon-sm" aria-label="Add reaction" />}>\n		<Icon name="emoji" />\n	</PopoverTrigger>\n	<PopoverContent side="top" className="w-auto rounded-full p-1">\n		<ReactionPicker selected={mine} onSelect={toggle} />\n	</PopoverContent>\n</Popover>'
+    },
+    {
+      label: "In a right-click menu",
+      code: "<ContextMenu>\n	<ContextMenuTrigger render={<Bubble />}>See you at 6.</ContextMenuTrigger>\n	<ContextMenuContent>\n		<MenuReactions selected={mine} onSelect={toggle} />\n		<ContextMenuSeparator />\n		<ContextMenuItem>Reply</ContextMenuItem>\n		<ContextMenuItem>Copy text</ContextMenuItem>\n	</ContextMenuContent>\n</ContextMenu>"
+    },
+    {
+      label: "A custom set",
+      code: '<ReactionPicker\n	reactions={[\n		{ emoji: "\u2705", label: "Done" },\n		{ emoji: "\u{1F440}", label: "Looking" },\n		{ emoji: "\u{1F680}", label: "Shipped" },\n	]}\n	selected={mine}\n	onSelect={toggle}\n/>'
+    }
+  ]
+};
+export {
+  reactionPickerMeta
+};

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