@sableui/react 0.15.0 → 0.16.0

package/dist/components/combobox/combobox.js

@@ -20,13 +20,18 @@ import { useAnchoredDensity, useDensity, useTypeTier } from "../../lib/density.j
 import { useResizeObserver } from "../../lib/use-resize-observer.js";
 import { HighlightGlide } from "../../lib/highlight-glide.js";
 import { hitTargetMin } from "../../lib/hit-target.js";
+import { mergeRefs } from "../../lib/refs.js";
+import { useMatchHighlight } from "../../lib/use-match-highlight.js";
 import { Badge } from "../badge/index.js";
 import { Button } from "../button/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var useComboboxFilteredItems = Base.useFilteredItems;
 var ComboboxVirtualContext = createContext(null);
+var ComboboxMatchContext = createContext("");
 function Combobox({
   onItemHighlighted,
+  onInputValueChange,
+  highlightMatches = true,
   ...props
 }) {
   const revealRef = useRef(null);
@@ -45,6 +50,16 @@ function Combobox({
     },
     []
   );
+  const [typed, setTyped] = useState("");
+  const inputChangeRef = useRef(onInputValueChange);
+  inputChangeRef.current = onInputValueChange;
+  const handleInputValueChange = useCallback(
+    (value, details) => {
+      inputChangeRef.current?.(value, details);
+      setTyped(details.reason === "input-change" ? value : "");
+    },
+    []
+  );
   const bridge = useMemo(
     () => ({
       register(reveal) {
@@ -55,13 +70,14 @@ function Combobox({
     }),
     [props.value, props.isItemEqualToValue]
   );
-  return /* @__PURE__ */ jsx(ComboboxVirtualContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComboboxVirtualContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx(ComboboxMatchContext.Provider, { value: highlightMatches ? typed : "", children: /* @__PURE__ */ jsx(
     Base.Root,
     {
       ...props,
-      onItemHighlighted: handleHighlight
+      onItemHighlighted: handleHighlight,
+      onInputValueChange: handleInputValueChange
     }
-  ) });
+  ) }) });
 }
 var ComboboxValue = Base.Value;
 var ComboboxClear = Base.Clear;
@@ -71,7 +87,7 @@ var ComboboxItemIndicator = Base.ItemIndicator;
 var ComboboxGroup = Base.Group;
 var FIELD_SHELL = {
   xs: cn(FIELD_SHELL_XS, "pe-7 text-ui-md"),
-  md: "rounded-sm border border-input bg-card pe-9"
+  md: "rounded-sm border border-field-border bg-field pe-9"
 };
 function useFieldType(xs) {
   const tier = useTypeTier();
@@ -203,12 +219,18 @@ function ComboboxContent({
   align = "start",
   sideOffset = 6,
   scroll = true,
+  ref,
   ...props
 }) {
   const anchoredDensity = useAnchoredDensity();
+  const paintMatches = useMatchHighlight(useContext(ComboboxMatchContext), {
+    selector: "[data-sable-match]"
+  });
+  const popupRef = useMemo(() => mergeRefs(ref, paintMatches), [ref, paintMatches]);
   return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(Base.Positioner, { side, align, sideOffset, className: "z-(--z-overlay)", children: /* @__PURE__ */ jsxs(
     Base.Popup,
     {
+      ref: popupRef,
       ...anchoredDensity,
       className: cn(
         "w-[var(--anchor-width)] origin-(--transform-origin) rounded-md border border-border-floating bg-popover text-popover-foreground shadow-md outline-none",
@@ -240,7 +262,7 @@ function ComboboxItem({ className, children, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        /* @__PURE__ */ jsx("span", { "data-sable-match": "", className: "truncate", children }),
         /* @__PURE__ */ jsx(Base.ItemIndicator, { className: "flex items-center text-(--primary)", children: /* @__PURE__ */ jsx(Icon, { name: "check", className: "text-sm" }) })
       ]
     }

package/dist/components/combobox/combobox.meta.js

@@ -121,6 +121,12 @@ var comboboxMeta = {
       default: "Base UI's locale-aware contains",
       description: "How items match the query. `null` turns matching off, for items a server already filtered: pair it with `onInputValueChange` to fetch."
     },
+    {
+      name: "highlightMatches",
+      type: "boolean",
+      default: "true",
+      description: "Paints the typed text wherever it appears in a row's label, on the `highlight` / `highlight-foreground` pair, through the CSS Custom Highlight API \u2014 no `<mark>` in the row, and the accessible name is unchanged. Only typed text counts: a field still holding the selected item's label lists everything and lights nothing. A literal, case-insensitive match within the label; a `filter` that matches differently leaves rows it kept unpainted. `false` turns it off."
+    },
     {
       name: "onInputValueChange",
       type: "(inputValue: string, eventDetails) => void",
@@ -188,8 +194,10 @@ var comboboxMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "highlight",
+    "highlight-foreground",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "ring",

package/dist/components/command-menu/command-menu.js

@@ -21,6 +21,7 @@ import {
   DialogTitle
 } from "../dialog/dialog.js";
 import { mergeRefs } from "../../lib/refs.js";
+import { useMatchHighlight } from "../../lib/use-match-highlight.js";
 import { Button } from "../button/index.js";
 import { Scroller } from "../scroller/scroller.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -44,6 +45,7 @@ function CommandMenuBody({
   setQuery,
   items,
   filter,
+  highlightMatches = true,
   listClassName,
   placeholder,
   emptyMessage,
@@ -99,6 +101,11 @@ function CommandMenuBody({
     },
     [seedActive]
   );
+  const paintMatches = useMatchHighlight(query, {
+    selector: "[data-sable-match]",
+    enabled: highlightMatches
+  });
+  const listRefs = useMemo(() => mergeRefs(attachList, paintMatches), [attachList, paintMatches]);
   useEffect(() => {
     if (open) seedActive();
   }, [open, query]);
@@ -215,7 +222,7 @@ function CommandMenuBody({
     /* @__PURE__ */ jsxs(
       Scroller,
       {
-        ref: attachList,
+        ref: listRefs,
         role: "listbox",
         id: listboxId,
         "aria-label": title,
@@ -258,6 +265,7 @@ function CommandMenu({
   query: queryProp,
   onQueryChange,
   filter,
+  highlightMatches,
   listClassName,
   placeholder = "Type a command or search\u2026",
   emptyMessage = "No results found.",
@@ -302,6 +310,7 @@ function CommandMenu({
             setQuery,
             items,
             filter,
+            highlightMatches,
             listClassName,
             placeholder,
             emptyMessage,
@@ -325,6 +334,7 @@ function CommandMenuPanel({
   query: queryProp,
   onQueryChange,
   filter,
+  highlightMatches,
   listClassName,
   placeholder = "Type a command or search\u2026",
   emptyMessage = "No results found.",
@@ -352,6 +362,7 @@ function CommandMenuPanel({
           setQuery,
           items,
           filter,
+          highlightMatches,
           listClassName,
           placeholder,
           emptyMessage,
@@ -443,10 +454,10 @@ function CommandMenuItem({
       children: [
         leading != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center", children: leading }) : icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-base text-muted-foreground" }),
         stacked ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+          /* @__PURE__ */ jsx("span", { "data-sable-match": "", className: "truncate", children }),
           detail && /* @__PURE__ */ jsx("span", { className: "truncate text-body-sm text-muted-foreground", children: detail })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+          /* @__PURE__ */ jsx("span", { "data-sable-match": "", className: "truncate", children }),
           detail && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-body-sm text-muted-foreground", children: detail })
         ] }),
         hint && /* @__PURE__ */ jsx("span", { className: "ms-auto flex min-w-0 max-w-1/2 items-center ps-4 text-body-sm text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: hint }) })

package/dist/components/command-menu/command-menu.meta.js

@@ -153,6 +153,12 @@ var commandMenuMeta = {
       default: "case-insensitive substring match on label",
       description: "Replaces or disables the built-in match. A function ranks and filters items itself and its order is kept verbatim; null renders items exactly as given. Either also stops declarative CommandMenuItem children self-filtering. The query arrives raw \u2014 trimming and case are policy, and this is the prop that hands policy over."
     },
+    {
+      name: "highlightMatches",
+      type: "boolean",
+      default: "true",
+      description: "Paints the query wherever it appears in a row's label (not its detail or hint), on the `highlight` / `highlight-foreground` pair, through the CSS Custom Highlight API \u2014 no `<mark>` in the row, and the accessible name is unchanged. A literal, case-insensitive match, so under a fuzzy `filter` a row that matched as a subsequence keeps an unpainted label. `false` turns it off. Applies to CommandMenuPanel too."
+    },
     {
       name: "listClassName",
       type: "string",
@@ -197,7 +203,7 @@ var commandMenuMeta = {
     {
       name: "CommandMenuTrigger",
       type: '{ onOpen?: () => void; placeholder?: string; shortcut?: string | false; size?: "sm" | "md"; disabled?: boolean }',
-      description: `The search field in a header that is really a button. Wears SearchInput's shell (border-input, card surface, leading magnifier, muted placeholder) on the control ladder, with a trailing Kbd: \u2318K on macOS, Ctrl K elsewhere. onOpen runs on click and on the shortcut, which it listens for page-wide (useCommandMenuShortcut). shortcut is the key (default "k"); false drops both the hint and the listener. size is sm in a header beside small buttons, md (default) beside Input and SearchInput. It sits outside CommandMenu, so the Dialog returns focus to it on close.`
+      description: `The search field in a header that is really a button. Wears SearchInput's shell (the field fill and outline, leading magnifier, muted placeholder) on the control ladder, with a trailing Kbd: \u2318K on macOS, Ctrl K elsewhere. onOpen runs on click and on the shortcut, which it listens for page-wide (useCommandMenuShortcut). shortcut is the key (default "k"); false drops both the hint and the listener. size is sm in a header beside small buttons, md (default) beside Input and SearchInput. It sits outside CommandMenu, so the Dialog returns focus to it on close.`
     },
     {
       name: "useCommandMenuShortcut",
@@ -221,6 +227,8 @@ var commandMenuMeta = {
     }
   ],
   tokensUsed: [
+    "highlight",
+    "highlight-foreground",
     "card",
     "card-foreground",
     "border",

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

@@ -125,8 +125,8 @@ var datePickerMeta = {
     "popover",
     "popover-foreground",
     "border",
-    "input",
-    "card",
+    "field-border",
+    "field",
     "ring"
   ],
   a11y: [

package/dist/components/feedback/feedback.js

@@ -147,7 +147,7 @@ function Feedback({
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: "inline-flex size-10 items-center justify-center rounded-full bg-success/15 text-2xl text-success",
+                    className: "inline-flex size-10 items-center justify-center rounded-full bg-success-mark/15 text-2xl text-success",
                     children: /* @__PURE__ */ jsx("span", { "data-starting-style": drawn ? void 0 : "", className: "inline-flex motion-tick", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) })
                   }
                 ),

package/dist/components/feedback/feedback.meta.js

@@ -98,7 +98,8 @@ var feedbackMeta = {
     "accent",
     "accent-foreground",
     "ring",
-    "success"
+    "success",
+    "success-mark"
   ],
   motion: [
     {

package/dist/components/gradient-art/gradient-art.js

@@ -40,19 +40,21 @@ function nudge(color, seed) {
   const dl = ((frac(seed * 13.7) * 2 - 1) * LIGHT_STEP).toFixed(3);
   return `oklch(from ${color} clamp(0, calc(l + ${dl}), 1) c calc(h + ${dh}))`;
 }
+var pastel = (color) => `oklch(from ${color} clamp(0.84, calc(0.8 + l * 0.15), 0.95) min(calc(c * 0.5), 0.09) h)`;
 function param(style, name, fallbackValue) {
   const n = Number.parseFloat(style.getPropertyValue(name));
   return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallbackValue;
 }
 var MAX_PIXELS = 15e5;
-function GradientArt({ variant = "mesh", tones, seed, className, style, children, ...props }) {
+function GradientArt({ variant = "mesh", tones, seed, intensity = "vivid", className, style, children, ...props }) {
   const root = useRef(null);
   const canvas = useRef(null);
   const probes = useRef(null);
   const value = seedValue(seed);
-  const palette = (tones?.length ? tones.map(lifted) : ART_SLOTS).map((color) => nudge(color, value));
-  const groundColor = nudge(tones?.length ? ground(tones[0]) : ART_GROUND, value);
-  const paletteKey = palette.join(" ");
+  const finish = (color) => intensity === "soft" ? pastel(nudge(color, value)) : nudge(color, value);
+  const palette = (tones?.length ? tones.map(lifted) : ART_SLOTS).map(finish);
+  const groundColor = finish(tones?.length ? ground(tones[0]) : ART_GROUND);
+  const paletteKey = [groundColor, ...palette].join(" ");
   const background = fallback(rotate(palette, value), groundColor, value);
   useEffect(() => {
     const element = root.current;
@@ -133,13 +135,14 @@ function GradientArt({ variant = "mesh", tones, seed, className, style, children
         offInvalidate();
       };
     }
-  }, [variant, value, paletteKey]);
+  }, [variant, value, intensity, paletteKey]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: root,
       "data-slot": "gradient-art",
       "data-variant": variant,
+      "data-intensity": intensity,
       className: cn("relative isolate overflow-hidden", className),
       style: { background, ...style },
       ...props,

package/dist/components/gradient-art/gradient-art.meta.js

@@ -5,7 +5,7 @@ var gradientArtMeta = {
   status: "beta",
   keywords: ["gradient", "mesh gradient", "grain", "shader", "artwork", "placeholder image", "cover", "banner", "avatar fallback", "generative"],
   usage: {
-    description: "Use GradientArt where a real image belongs but none exists yet, or where the image is decoration: a product cover before upload, a profile banner, an album tile, an avatar with no photo. It reads the theme's own tokens, so it follows every preset, mode and live edit; `seed` fixes each item's composition so a list of covers or avatars stays individually recognisable.",
+    description: "Use GradientArt where a real image belongs but none exists yet, or where the image is decoration: a product cover before upload, a profile banner, an album tile, an avatar with no photo. It reads the theme's own tokens, so it follows every preset, mode and live edit; `seed` fixes each item's composition so a list of covers or avatars stays individually recognisable. `intensity=\"soft\"` paints the same art as a pastel wash \u2014 the iridescent aura AI products use as a card or modal header band, and as a stage for floating chips and logo tiles.",
     bestPractices: [
       {
         guidance: "do",
@@ -19,6 +19,14 @@ var gradientArtMeta = {
         guidance: "do",
         description: "Keep the default `mesh` for covers, tiles and avatars. Reach for `grain` where a printed, tactile surface suits \u2014 a banner, a hero card \u2014 and keep one variant per surface type so art reads as a system."
       },
+      {
+        guidance: "do",
+        description: 'Use `intensity="soft"` as a stage: a card or modal header band, the art on an integration or pricing card, a field behind floating prompt chips or rounded logo tiles. Make the tiles and chips floating surfaces (`bg-popover` with `border-border-floating` and a shadow, or a `floating` Button) so they lift off the wash; soft stays light in dark mode too, so the same composition holds in both.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not put text straight on soft art with `text-overlay-foreground` ink. Soft is a light ground in every mode, so overlay ink washes out on it; put the content on a Card or a chip over the art, or use the default vivid intensity for a short overlay label."
+      },
       {
         guidance: "dont",
         description: "Do not put body text over it. The art spans the palette's lightest and most saturated tones, so no single ink is guaranteed to clear contrast across it; reserve overlays for a short label on a scrim or an avatar's initials."
@@ -42,10 +50,16 @@ var gradientArtMeta = {
       description: "Paint these `--tone-*` colours instead of the preset's art palette. Leave unset to follow the preset's art direction."
     },
     { name: "seed", type: "string | number", description: "Fixes the composition: the same seed paints the same art in every theme. Pass a stable id." },
+    {
+      name: "intensity",
+      type: '"vivid" | "soft"',
+      default: '"vivid"',
+      description: "vivid: the preset's art at full strength. soft: every colour and the ground lifted to a light pastel of itself (high lightness, half chroma) \u2014 a wash for header bands and for staging chips and logo tiles, light in both modes."
+    },
     { name: "children", type: "ReactNode", description: "Rendered above the art \u2014 initials, a glyph, a short label." },
     { name: "className", type: "string", description: "Size and shape: aspect, height, rounding." }
   ],
-  variants: { variant: ["mesh", "grain"] },
+  variants: { variant: ["mesh", "grain"], intensity: ["vivid", "soft"] },
   tokensUsed: ["art-1", "art-2", "art-3", "art-4", "art-5", "art-6", "art-ground", "art-warp", "art-softness", "art-grain", "primary", "tone-info", "tone-3", "tone-2", "tone-1", "tone-warning"],
   motion: [
     {
@@ -73,6 +87,25 @@ var gradientArtMeta = {
     {
       label: "Avatar with initials",
       code: '<GradientArt seed="Mara Okafor" className="grid size-10 place-items-center rounded-full text-label-md text-overlay-foreground">MO</GradientArt>'
+    },
+    {
+      label: "Soft header band with logo tiles",
+      code: `<Card className="w-full max-w-sm">
+	<GradientArt intensity="soft" seed="Integrations" className="flex h-32 items-center justify-center gap-3 rounded-t-lg">
+		{["mail", "calendar", "chart"].map((name) => (
+			<span key={name} className="grid size-12 place-items-center rounded-lg border border-border-floating bg-popover text-popover-foreground shadow-md">
+				<Icon name={name} className="text-xl" />
+			</span>
+		))}
+	</GradientArt>
+	<CardHeader>
+		<CardTitle>Connect your tools</CardTitle>
+		<CardDescription>Bring mail, calendar and analytics into one place.</CardDescription>
+	</CardHeader>
+	<CardFooter>
+		<Button>Connect</Button>
+	</CardFooter>
+</Card>`
     }
   ]
 };

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

@@ -1,7 +1,7 @@
 // src/components/input/input.meta.ts
 var inputMeta = {
   name: "Input",
-  summary: "Styled native text input. Soft-square (rounded-sm), card surface, 2px focus ring; aria-invalid raises the destructive error treatment.",
+  summary: "Styled native text input. Soft-square (rounded-sm), the theme's field surface (outlined or filled), 2px focus ring; aria-invalid raises the destructive error treatment.",
   keywords: [
     "input",
     "text input",
@@ -32,6 +32,14 @@ var inputMeta = {
         guidance: "do",
         description: "Keep a focusable field at 16px or larger on mobile. iOS Safari zooms the whole page when a focused input computes under 16px and never zooms back out. Input handles this itself \u2014 below the sm breakpoint it renders text-body-lg (17px) and returns to text-body-md at sm and up. Build a custom field the same way: a second paired tier under a max-sm: variant, never a hand-set font-size."
       },
+      {
+        guidance: "do",
+        description: "Choose outlined or filled fields once, in the theme: `--theme-field: var(--muted)` with `--theme-field-border: transparent` turns every Input, Textarea, Select, Combobox, SearchInput, InputGroup and ChatComposer into a borderless filled well; unset, they are outlined on the card. Every field reads the `field` / `field-border` pair, so they change together."
+      },
+      {
+        guidance: "dont",
+        description: "Restyle one Input as a filled chip with `bg-muted border-transparent`. It drifts from every other field on the page, and the theme can no longer move them together; set the field tokens instead."
+      },
       {
         guidance: "dont",
         description: "Override an Input's type with a page tier below 16px (text-body-md, text-body-sm, text-label-*) without a >=16px mobile arm \u2014 that reintroduces the iOS focus zoom."
@@ -104,8 +112,8 @@ var inputMeta = {
     }
   ],
   tokensUsed: [
-    "input",
-    "card",
+    "field-border",
+    "field",
     "foreground",
     "muted-foreground",
     "ring",

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

@@ -42,7 +42,7 @@ function InputGroup({
         "flex h-(--control-md) w-full items-center",
         // The field shell, moved from the input to the group: focus is the
         // ring on the whole field, and so are the error and disabled states.
-        "rounded-sm border border-input bg-card motion-interactive focus-within:ring-2 focus-within:ring-ring",
+        "rounded-sm border border-field-border bg-field motion-interactive focus-within:ring-2 focus-within:ring-ring",
         "has-[>input[aria-invalid=true]]:border-destructive has-[>input[aria-invalid=true]]:ring-destructive/30",
         "has-[>input:disabled]:cursor-not-allowed has-[>input:disabled]:opacity-50",
         // The Input keeps its type, padding and behaviour; the box is the group's.

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

@@ -75,7 +75,7 @@ var inputGroupMeta = {
       description: "Layout classes for the group (width, margins)."
     }
   ],
-  tokensUsed: ["input", "card", "ring", "destructive", "muted-foreground", "foreground"],
+  tokensUsed: ["field-border", "field", "ring", "destructive", "muted-foreground", "foreground"],
   motion: [
     {
       slot: "arrival",

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

@@ -180,7 +180,12 @@ var lineChartMeta = {
     "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/menu/menu.js

@@ -68,7 +68,7 @@ var MENU_ITEM_DESTRUCTIVE = (
   // enough for a white label, and ink mixed from them measured 3.8:1 on
   // Meridian's popover. From the text token every theme clears 4.5:1 (worst
   // 5.4:1, Prism dark, on the 10% red wash).
-  "text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))] data-[highlighted]:bg-destructive/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
+  "text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))] data-[highlighted]:bg-destructive-mark/10 data-[highlighted]:text-[color-mix(in_oklch,var(--destructive-text)_75%,var(--foreground))]"
 );
 function MenuItem({ className, variant = "default", icon, description, children, ...props }) {
   const tier = useTypeTier();

package/dist/components/meter/meter.js

@@ -1,22 +1,30 @@
 // src/components/meter/meter.tsx
 import { Meter as Base } from "@base-ui/react/meter";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 import { cn } from "../../lib/cn.js";
 import {
   meterIndicatorVariants,
   meterRingValueVariants,
   meterRingVariants,
+  meterSegmentedTrackVariants,
+  meterTickVariants,
   meterTrackVariants
 } from "./meter.variants.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ToneContext = createContext("primary");
 var SizeContext = createContext(void 0);
+var SegmentsContext = createContext(null);
+function filledTicks({ count, value, min, max }) {
+  if (value == null || value <= min) return 0;
+  const ratio = max === min ? 1 : Math.min(1, (value - min) / (max - min));
+  return Math.min(count, Math.max(1, Math.round(ratio * count)));
+}
 var RING_TONE_STROKE = {
   primary: "var(--primary)",
-  "3": "var(--tone-3)",
-  success: "var(--success)",
-  warning: "var(--tone-warning)",
-  destructive: "var(--destructive)"
+  "3": "var(--tone-3-mark)",
+  success: "var(--success-mark)",
+  warning: "var(--tone-warning-mark)",
+  destructive: "var(--destructive-mark)"
 };
 function MeterRing({
   value,
@@ -53,15 +61,30 @@ function MeterRing({
     showValue ? /* @__PURE__ */ jsx(MeterValue, { className: meterRingValueVariants({ size }) }) : null
   ] });
 }
-function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, ...props }) {
+function Meter({ className, children, tone = "primary", shape = "bar", size, strokeWidth = 6, showValue, segments, ...props }) {
   if (shape === "ring") {
     return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(Base.Root, { className: cn(meterRingVariants({ size }), className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterRing, { value: props.value ?? null, min: props.min, max: props.max, strokeWidth, showValue, tone, size }) }) });
   }
-  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(Base.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) });
+  const count = segments != null && Number.isFinite(segments) && segments >= 1 ? Math.floor(segments) : 0;
+  const segmented = count ? { count, value: props.value ?? null, min: props.min ?? 0, max: props.max ?? 100 } : null;
+  return /* @__PURE__ */ jsx(ToneContext.Provider, { value: tone, children: /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(SegmentsContext.Provider, { value: segmented, children: /* @__PURE__ */ jsx(Base.Root, { className: cn("w-full", className), ...props, children: children ?? /* @__PURE__ */ jsx(MeterTrack, {}) }) }) }) });
 }
 Meter.displayName = "Meter";
 function MeterTrack({ className, children, size, ...props }) {
   const inherited = useContext(SizeContext);
+  const tone = useContext(ToneContext);
+  const segments = useContext(SegmentsContext);
+  if (segments) {
+    return /* @__PURE__ */ jsx(
+      Base.Track,
+      {
+        "data-segmented": "",
+        className: cn(meterSegmentedTrackVariants({ size: size ?? inherited }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(MeterTicks, { count: segments.count, filled: filledTicks(segments), tone })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     Base.Track,
     {
@@ -72,6 +95,29 @@ function MeterTrack({ className, children, size, ...props }) {
   );
 }
 MeterTrack.displayName = "MeterTrack";
+function MeterTicks({ count, filled, tone }) {
+  const [shown, setShown] = useState(filled);
+  const [from, setFrom] = useState(filled);
+  if (filled !== shown) {
+    setFrom(shown);
+    setShown(filled);
+  }
+  return Array.from({ length: count }, (_, i) => {
+    const isFilled = i < filled;
+    const step = filled > from && i >= from && i < filled ? i - from : filled < from && i >= filled && i < from ? from - 1 - i : 0;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "meter-tick",
+        "data-filled": isFilled ? "" : void 0,
+        className: meterTickVariants({ tone, filled: isFilled }),
+        style: step ? { transitionDelay: `calc(var(--motion-duration-slow) * ${Number((step / count).toFixed(4))} * var(--motion-expressive, 1))` } : void 0
+      },
+      i
+    );
+  });
+}
 function MeterIndicator({ className, tone, ...props }) {
   const inherited = useContext(ToneContext);
   return /* @__PURE__ */ jsx(