@sableui/react 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # What's new
 
+## 0.5.0
+
+- **Stacked toasts.** `<ToastProvider stacked>` stacks toasts like a deck of
+  cards: the newest in front, older ones peeking out behind it a step smaller,
+  so a burst of toasts no longer takes over the corner of the page. Hovering
+  or focusing the stack fans it out into the list. It works at every
+  `position`. `ToastContent` is the new part that holds a toast's row; in a
+  stacked viewport it hides the cards behind the front one. Collapsed, the
+  deck casts one shadow rather than one per card, so a theme with hard offset
+  shadows (Poppy) stays clean.
+- **Depth in Customize.** On sableui.com, Customize has a Depth control (Flat ↔
+  Lifted) and a Shadow style (Preset, Soft, Crisp, Offset). They write the five
+  `--theme-shadow-*` tokens for light and dark, so the CSS export and preset
+  download carry them. Depth scales the reach and strength of every step
+  together; lifting a flat preset such as Meridian brings in soft shadows. The
+  shadow takes the preset's neutral hue. Advanced replaces the slider with
+  exact numbers set on the largest step, which the others follow: light angle
+  (90° is overhead), distance, blur and opacity. Blur takes one
+  blur-to-distance ratio, so an Offset shadow can be softened; opacity is set
+  in light mode and dark mode darkens in proportion.
+- **Knob shadows stay on their track.** The Switch thumb, Slider thumb and
+  ColorField handle used `shadow-sm`, the elevation step for raised surfaces.
+  Where a theme or a Depth setting made that a long offset (Poppy's hard
+  drops), the shadow fell outside the switch's track. Knobs now take
+  `--knob-shadow`, one small contact shadow that themes can set through
+  `--theme-knob-shadow`. In Sable it looks the same as before.
+- **Pill tabs take the theme's button shape.** `TabsList variant="pill"`
+  triggers used the small radius, so in Sable they were rounded rectangles
+  beside pill buttons. They now read `--button-radius`
+  as `Button` does: pills in Sable, 12px in Poppy, square in Meridian, and a
+  theme's own button shape wherever it sets one.
+- **CodeBlock no longer scrolls code under its copy button.** Without a
+  filename header, the copy button floated over the code, so on a narrow
+  screen a long line ran underneath it. It now has its own column beside the
+  code. The code's edges fade while there is more to scroll, like `Scroller`'s.
+- **Scroller's edge fades follow content and size changes.** They were measured
+  on mount and on scroll only, so a list that grew, shrank or was resized kept
+  the fade it started with until it was scrolled.
+- **Icons no longer redraw on every render.** The default Reicon set and the
+  brand set rewrote their SVG each time a parent re-rendered (React 19
+  re-applies `dangerouslySetInnerHTML` when the object changes). Inside a
+  toast that never settled and froze the page.
+- **A card that is only a header keeps its bottom padding.** `CardHeader` leaves
+  the bottom padding to the content that follows it; with nothing after it (a
+  stat card: label, number, sparkline) the number sat on the card's edge.
+- **Line and area sparklines span their own range.** They used to include zero,
+  so a run from 12 to 26 used only the top half of the box: a flat squiggle over
+  a solid block. Bar sparklines keep the zero baseline, since a bar's length is
+  the value.
+- **Combobox chips are balanced.** The remove button was a full 28px icon
+  button, which swelled each chip into a 34px pill and left more room after the
+  label than before it. It is now drawn to the chip (20px, with a 14px X) and
+  keeps a 28px pointer target, so the label and the X sit evenly in a 23px chip.
+
 ## 0.4.0
 
 ### The default theme is now called Sable

package/dist/blocks/index.js

@@ -1,9 +1,9 @@
-import { Kbd, CommandMenuPanel, ToggleGroup, Toggle, BarChart, DateTile, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, RadialChart, Sparkline, Slider, Stepper, StepperItem, SegmentedBar, Checkbox, PieChart, AreaChart, OtpField } from '../chunk-FBSL2LZQ.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardAction, Button, CardList, Entity, OverflowMenu, MenuItem, MenuSeparator, Code, CardContent, Message, Bubble, CardFooter, DestructiveActionModal, Badge, AvatarGroup, Avatar, Textarea, CodeBlock, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, StatusDot, Switch, Form, Field, Select, SelectTrigger, SelectContent, SelectItem, Separator, Label, Attachment } from '../chunk-CCUDFLU3.js';
+import { Kbd, CommandMenuPanel, ToggleGroup, Toggle, BarChart, DateTile, Accordion, AccordionItem, AccordionTrigger, AccordionPanel, RadialChart, Sparkline, Slider, Stepper, StepperItem, SegmentedBar, Checkbox, PieChart, AreaChart, OtpField } from '../chunk-GU3T7SBA.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardAction, Button, CardList, Entity, OverflowMenu, MenuItem, MenuSeparator, Code, CardContent, Message, Bubble, CardFooter, DestructiveActionModal, Badge, AvatarGroup, Avatar, Textarea, CodeBlock, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, StatusDot, Switch, Form, Field, Select, SelectTrigger, SelectContent, SelectItem, Separator, Label, Attachment } from '../chunk-RCLKXF2N.js';
 import { Region, Stack, Row, Grid } from '../chunk-3IWZYBGH.js';
 import { cn } from '../chunk-SRQWQUTW.js';
-import { Icon } from '../chunk-NGBDP3BM.js';
-import '../chunk-TH563WLW.js';
+import { Icon } from '../chunk-QJ6FWTUG.js';
+import '../chunk-XAZGMY73.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useState } from 'react';
 

package/dist/{chunk-FBSL2LZQ.js → chunk-GU3T7SBA.js}

@@ -1,8 +1,8 @@
-import { FIELD_SHELL, FIELD_INVALID, useMotion, useTypeTier, useScrollActivity, setRef, useAnchoredDensity, Dialog, DialogContent, DialogTitle, DialogDescription, useIsomorphicLayoutEffect } from './chunk-CCUDFLU3.js';
+import { FIELD_SHELL, FIELD_INVALID, useMotion, useTypeTier, useScrollActivity, setRef, useEdgeFade, useAnchoredDensity, Dialog, DialogContent, DialogTitle, DialogDescription, useIsomorphicLayoutEffect } from './chunk-RCLKXF2N.js';
 import { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
 import * as OtpParts from '@base-ui/react/otp-field';
-import { createContext, Fragment, useRef, useState, useId, useEffect, Children, isValidElement, useContext, useCallback, useLayoutEffect, useSyncExternalStore, useMemo } from 'react';
+import { createContext, Fragment, useRef, useState, useId, useEffect, Children, isValidElement, useContext, useCallback, useSyncExternalStore, useMemo } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { cva } from 'class-variance-authority';
@@ -2652,8 +2652,9 @@ function Sparkline({ data, label, variant = "line", tone = "primary", animate =
   const [ref, inView] = useArrival();
   const shown = !animate || !enabled || inView;
   const color = toneColor(tone);
-  const lo = Math.min(0, ...data);
-  const hi = Math.max(...data, lo + 1);
+  const min = data.length ? Math.min(...data) : 0;
+  const max = data.length ? Math.max(...data) : 1;
+  const [lo, hi] = variant === "bar" ? [Math.min(0, min), Math.max(max, Math.min(0, min) + 1)] : min === max ? [min - 1, max + 1] : [min, max];
   const y = (v) => H - 2 - (v - lo) / (hi - lo) * (H - 4);
   const nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
   const summary = data.length ? `${label}: from ${nf.format(data[0])} to ${nf.format(data[data.length - 1])}, low ${nf.format(Math.min(...data))}, high ${nf.format(Math.max(...data))}` : label;
@@ -3775,7 +3776,7 @@ function SliderThumb({ className, children, ...props }) {
           {
             "aria-hidden": true,
             className: cn(
-              "pointer-events-none absolute inset-0 rounded-full border-2 border-primary bg-background shadow-sm",
+              "pointer-events-none absolute inset-0 rounded-full border-2 border-primary bg-background shadow-(--knob-shadow)",
               // The only thing that resizes. Scale (not width/height) so the box
               // metrics — and the row height around them — never move.
               "scale-75 motion-interactive ease-spring",
@@ -4225,35 +4226,15 @@ function Scroller({
     },
     [onKeyDown, orientation]
   );
-  const [showStart, setShowStart] = useState(false);
-  const [showEnd, setShowEnd] = useState(false);
-  const sync = useCallback(
-    (el) => {
-      if (orientation === "horizontal") {
-        const { scrollLeft, scrollWidth, clientWidth } = el;
-        setShowStart(scrollLeft > 0);
-        setShowEnd(scrollLeft < scrollWidth - clientWidth - 1);
-      } else {
-        const { scrollTop, scrollHeight, clientHeight } = el;
-        setShowStart(scrollTop > 0);
-        setShowEnd(scrollTop < scrollHeight - clientHeight - 1);
-      }
-    },
-    [orientation]
-  );
-  useLayoutEffect(() => {
-    if (regionRef.current) sync(regionRef.current);
-  }, [sync]);
+  const { sync: syncFade, style: fadeStyle } = useEdgeFade(regionRef, orientation);
   const handleScroll = useCallback(
     (event) => {
-      sync(event.currentTarget);
+      syncFade();
       onScroll?.(event);
     },
-    [sync, onScroll]
+    [syncFade, onScroll]
   );
   const isVertical = orientation === "vertical";
-  const fade = "calc(var(--spacing) * 7)";
-  const mask = showStart || showEnd ? `linear-gradient(to ${isVertical ? "bottom" : "right"}, ${showStart ? "transparent" : "#000"}, #000 ${showStart ? fade : "0"}, #000 ${showEnd ? `calc(100% - ${fade})` : "100%"}, ${showEnd ? "transparent" : "#000"})` : void 0;
   return (
     // The chrome box. Carries the consumer's border/background/radius and the
     // sizing, and is NOT masked — which is the entire point of the split. A
@@ -4269,7 +4250,7 @@ function Scroller({
         role: "group",
         "aria-label": label,
         "data-orientation": orientation,
-        style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0,
+        style: fadeStyle,
         className: cn(
           // Fill the chrome box without a percentage height. `min-h-0` /
           // `min-w-0` because a flex item's default `min-size: auto` refuses to

package/dist/{chunk-NGBDP3BM.js → chunk-QJ6FWTUG.js}

@@ -1,4 +1,4 @@
-import { reiconIconSet } from './chunk-TH563WLW.js';
+import { reiconIconSet } from './chunk-XAZGMY73.js';
 import { createContext, useMemo, useContext } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-CCUDFLU3.js → chunk-RCLKXF2N.js}

@@ -1,5 +1,5 @@
 import { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
 import { createContext, useMemo, useState, useRef, useLayoutEffect, useEffect, useSyncExternalStore, useCallback, useContext, isValidElement, Children, useId, cloneElement } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
@@ -837,8 +837,11 @@ function CardHeader({
         // one it collapses to a single stacked column (same as before).
         // Zeroes its own bottom padding so it owns the CardHeader/CardContent
         // seam — CardContent always has full padding on its own (see below),
-        // so a standalone CardContent never loses its top padding.
-        "grid auto-rows-min grid-cols-1 items-start gap-1.5 p-[var(--card-p,--spacing(6))] pb-0 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        // so a standalone CardContent never loses its top padding. As the
+        // card's last child (a stat card: label, number, sparkline) nothing
+        // follows to pad the bottom, so it keeps its own; zeroed, the number
+        // sat on the card's bottom edge.
+        "grid auto-rows-min grid-cols-1 items-start gap-1.5 p-[var(--card-p,--spacing(6))] pb-0 last:pb-[var(--card-p,--spacing(6))] has-data-[slot=card-action]:grid-cols-[1fr_auto]",
         className
       ),
       ...props
@@ -2888,7 +2891,7 @@ function Switch({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-sm motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-primary-foreground" })
+      children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-(--knob-shadow) motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-primary-foreground" })
     }
   );
 }
@@ -4819,6 +4822,29 @@ function useCopy(text, { timeout = 1500 } = {}) {
   }, [text, timeout]);
   return { copy, copied };
 }
+function useEdgeFade(ref, orientation) {
+  const [showStart, setShowStart] = useState(false);
+  const [showEnd, setShowEnd] = useState(false);
+  const sync = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (orientation === "horizontal") {
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      setShowStart(scrollLeft > 0);
+      setShowEnd(scrollLeft < scrollWidth - clientWidth - 1);
+    } else {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      setShowStart(scrollTop > 0);
+      setShowEnd(scrollTop < scrollHeight - clientHeight - 1);
+    }
+  }, [ref, orientation]);
+  useIsomorphicLayoutEffect(sync);
+  useResizeObserver(sync, [ref]);
+  const fade = "calc(var(--spacing) * 7)";
+  const direction = orientation === "vertical" ? "bottom" : "right";
+  const mask = showStart || showEnd ? `linear-gradient(to ${direction}, ${showStart ? "transparent" : "#000"}, #000 ${showStart ? fade : "0"}, #000 ${showEnd ? `calc(100% - ${fade})` : "100%"}, ${showEnd ? "transparent" : "#000"})` : void 0;
+  return { sync, style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0 };
+}
 var CodeHighlightContext = createContext(null);
 function CodeHighlightProvider({ highlight, children }) {
   return /* @__PURE__ */ jsx(CodeHighlightContext.Provider, { value: highlight, children });
@@ -4836,6 +4862,8 @@ function CodeBlock({
   const highlighter = highlight === false ? null : highlight ?? contextHighlight;
   const hasHeader = Boolean(filename);
   const { copy, copied } = useCopy(code);
+  const preRef = useRef(null);
+  const fade = useEdgeFade(preRef, "horizontal");
   if (prompt != null) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -4855,11 +4883,13 @@ function CodeBlock({
       }
     );
   }
+  const copyColumn = !hasHeader && showCopy;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-md border border-border bg-muted/40",
+        "overflow-hidden rounded-md border border-border bg-muted/40",
+        copyColumn && "flex items-start",
         className
       ),
       ...props,
@@ -4867,17 +4897,21 @@ function CodeBlock({
         hasHeader ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2", children: [
           /* @__PURE__ */ jsx("span", { className: "text-mono-caption text-muted-foreground", children: filename }),
           showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
-        ] }) : showCopy ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "absolute end-2 top-2 z-1 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null,
+        ] }) : null,
         /* @__PURE__ */ jsx(
           "pre",
           {
+            ref: preRef,
+            onScroll: fade.sync,
+            style: fade.style,
             className: cn(
               "overflow-x-auto overscroll-x-contain p-4 text-mono-md text-foreground scrollbar-quiet",
-              !hasHeader && showCopy ? "pe-12" : ""
+              copyColumn && "min-w-0 flex-1 pe-2"
             ),
             children: /* @__PURE__ */ jsx("code", { children: highlighter ? highlighter(code) : code })
           }
-        )
+        ),
+        copyColumn ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Copy code", onClick: copy, className: "m-2 ms-0 shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy" }) }) : null
       ]
     }
   );
@@ -6804,4 +6838,4 @@ var attachmentMeta = {
   ]
 };
 
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, FIELD_INVALID, FIELD_SHELL, FIELD_SHELL_XS, Field, Form, HighlightGlide, Input, Label, MENU_ITEM_DESTRUCTIVE, MOBILE_FIELD_TIER, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, anchoredListScroll, anchoredScroll, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, mergeRefs, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, setRef, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, trimLabel, useAnchoredDensity, useCopy, useDensity, useIsomorphicLayoutEffect, useMotion, useReducedMotion, useResizeObserver, useScrollActivity, useTypeTier, withPortalThemeScope };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, FIELD_INVALID, FIELD_SHELL, FIELD_SHELL_XS, Field, Form, HighlightGlide, Input, Label, MENU_ITEM_DESTRUCTIVE, MOBILE_FIELD_TIER, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, anchoredListScroll, anchoredScroll, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, mergeRefs, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, setRef, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, trimLabel, useAnchoredDensity, useCopy, useDensity, useEdgeFade, useIsomorphicLayoutEffect, useMotion, useReducedMotion, useResizeObserver, useScrollActivity, useTypeTier, withPortalThemeScope };

package/dist/{chunk-TH563WLW.js → chunk-XAZGMY73.js}

@@ -69,6 +69,7 @@ import { Send } from 'reicon-react/icons/Send';
 import { Star } from 'reicon-react/icons/Star';
 import { Trash } from 'reicon-react/icons/Trash';
 import { Upload } from 'reicon-react/icons/Upload';
+import { memo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/icon-sets/reicon.tsx
@@ -165,16 +166,22 @@ var reiconIconSet = ({
   if (!Glyph) return null;
   const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
   return /* @__PURE__ */ jsx(
-    Glyph,
+    ReiconGlyph,
     {
-      size: "1em",
+      glyph: Glyph,
       weight: WEIGHTS[variant] ?? "Outline",
       className: spin ? `motion-spin ${className ?? ""}` : className,
-      style: { color: void 0 },
       ...a11y
     }
   );
 };
+var NO_INLINE_COLOR = { color: void 0 };
+var ReiconGlyph = memo(function ReiconGlyph2({
+  glyph: Glyph,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Glyph, { size: "1em", style: NO_INLINE_COLOR, ...props });
+});
 var reiconIconNames = Object.keys(ICONS);
 
 export { reiconIconNames, reiconIconSet };

package/dist/{chunk-D2ETQBHV.js → chunk-ZBZMKOO7.js}

@@ -1,6 +1,6 @@
-import { useMotion, useIsomorphicLayoutEffect, mergeRefs, trimLabel, useTypeTier, buttonVariants, Input, Table, TableCaption, TableHeader, TableRow, TableHead, Button, TableBody, TableCell, Card, SimpleTooltip, useDensity, FIELD_SHELL, FIELD_INVALID, MOBILE_FIELD_TIER, Tooltip, TooltipTrigger, TooltipContent, useScrollActivity, setRef, Textarea, Menu, MenuTrigger, MenuContent, MenuSubmenu, MenuSubmenuTrigger, Separator } from './chunk-CCUDFLU3.js';
+import { useMotion, useIsomorphicLayoutEffect, mergeRefs, trimLabel, useTypeTier, buttonVariants, Input, Table, TableCaption, TableHeader, TableRow, TableHead, Button, TableBody, TableCell, Card, SimpleTooltip, useDensity, FIELD_SHELL, FIELD_INVALID, MOBILE_FIELD_TIER, Tooltip, TooltipTrigger, TooltipContent, useScrollActivity, setRef, Textarea, Menu, MenuTrigger, MenuContent, MenuSubmenu, MenuSubmenuTrigger, Separator } from './chunk-RCLKXF2N.js';
 import { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
 import { createContext, useRef, useState, useEffect, isValidElement, cloneElement, useContext, useMemo, useCallback, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { flushSync } from 'react-dom';
@@ -287,7 +287,7 @@ function TabsTrigger({ className, children, ...props }) {
           // On the control ladder like the pill variant (it was py-2 plus
           // the label's line, ~36px — no rung).
           "-mb-px inline-flex h-(--control-md) items-center border-b-2 border-transparent px-3 data-[active]:border-foreground"
-        ) : "inline-flex h-(--control-sm) items-center rounded-sm px-3 data-[active]:bg-muted",
+        ) : "inline-flex h-(--control-sm) items-center rounded-[var(--button-radius,9999px)] px-3 data-[active]:bg-muted",
         className
       ),
       ...props,
@@ -385,7 +385,7 @@ var tabsMeta = {
     {
       name: "TabsList",
       type: 'Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" | "pill" + className',
-      description: 'The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant.'
+      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant.`
     },
     {
       name: "TabsTrigger",

package/dist/icon/index.js

@@ -1,2 +1,2 @@
-export { Icon, IconProvider, composeIconSets, useIconSet } from '../chunk-NGBDP3BM.js';
-export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from '../chunk-TH563WLW.js';
+export { Icon, IconProvider, composeIconSets, useIconSet } from '../chunk-QJ6FWTUG.js';
+export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from '../chunk-XAZGMY73.js';

package/dist/icon-sets/brands.d.ts

@@ -10,33 +10,6 @@ interface BrandGlyph {
 declare const BRAND_GRID = 24;
 declare const BRAND_GLYPHS: Record<string, BrandGlyph>;
 
-/**
- * Brand marks as a Sable icon set — `<Icon name="github" />`.
- *
- * This is an ADDITIVE set: it answers only for the brands it carries and
- * returns `null` for everything else, which is exactly what `composeIconSets`
- * falls through on. So it layers under a UI set rather than replacing one:
- *
- *     <IconProvider set={composeIconSets(brandIconSet, reiconIconSet)} />
- *
- * Order matters only if a name collides. None do today — the brand names are
- * proper nouns (`github`, `figma`) and the contract's names are common ones
- * (`gear`, `chevron-down`) — but put the brand set first if you ever want a
- * brand to win.
- *
- * **Marks are monochrome by default and take the surrounding ink**, because
- * that is what a footer social row wants and it keeps rule #1 intact: nothing
- * here names a color, so `text-muted-foreground` on the icon governs. The
- * generator strips upstream `fill`/`stroke` colors for this reason. A brand
- * that must appear in its official color is a deliberate act at the call site —
- * a token, or an arbitrary color utility on that one instance — never a
- * default. A page where every logo asserts its own brand color is how a footer
- * turns into a fruit salad.
- *
- * The glyph data is vendored and committed, never fetched at render time; see
- * `scripts/fetch-brand-icons.mjs` for why. Trademark note: these designs belong
- * to their owners — follow each brand's usage guidelines.
- */
 declare const brandIconSet: IconSet;
 /** The brand names this set answers to — useful for a coverage assertion. */
 declare const brandIconNames: string[];

package/dist/icon-sets/brands.js

@@ -119,6 +119,12 @@ var BRAND_GLYPHS = {
     markup: '<path d="M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z"/>'
   }
 };
+var MARKUP = /* @__PURE__ */ new WeakMap();
+function markupOf(glyph) {
+  let markup = MARKUP.get(glyph);
+  if (!markup) MARKUP.set(glyph, markup = { __html: glyph.markup });
+  return markup;
+}
 var brandIconSet = ({
   name,
   spin,
@@ -137,7 +143,7 @@ var brandIconSet = ({
       height: "1em",
       fill: "currentColor",
       className: spin ? `motion-spin ${className ?? ""}` : className,
-      dangerouslySetInnerHTML: { __html: glyph.markup },
+      dangerouslySetInnerHTML: markupOf(glyph),
       ...a11y
     }
   );

package/dist/icon-sets/reicon.js

@@ -1 +1 @@
-export { reiconIconNames, reiconIconSet } from '../chunk-TH563WLW.js';
+export { reiconIconNames, reiconIconSet } from '../chunk-XAZGMY73.js';

package/dist/index.d.ts

@@ -1095,7 +1095,9 @@ type TriggerProps$3 = Omit<ComponentProps<typeof Tabs$1.Tab>, "className"> & {
  * A single tab button (Base UI's Tabs.Tab). Underline: the active tab draws its
  * rule via `data-active`, and `-mb-px` overlaps the list's divider. Pill: the
  * active tab takes a muted fill on the control ladder, and its label is trimmed
- * to the cap height so it centres optically in the short pill.
+ * to the cap height so it centres optically in the short pill. A pill tab is a
+ * button-shaped control, so it takes the theme's button shape (`--button-radius`,
+ * as Button does): a pill in Sable, rounded in Poppy, square in Meridian.
  */
 declare function TabsTrigger({ className, children, ...props }: TriggerProps$3): react.JSX.Element;
 type PanelProps$3 = Omit<ComponentProps<typeof Tabs$1.Panel>, "className"> & {
@@ -2504,7 +2506,7 @@ type TriggerProps$2 = Omit<ComponentProps<typeof Select$1.Trigger>, "className"
  */
 declare function SelectTrigger({ className, placeholder, size, children, ...props }: TriggerProps$2): react.JSX.Element;
 type PositionerProps$5 = ComponentProps<typeof Select$1.Positioner>;
-type ContentProps$6 = Omit<ComponentProps<typeof Select$1.Popup>, "className"> & {
+type ContentProps$7 = Omit<ComponentProps<typeof Select$1.Popup>, "className"> & {
     className?: string;
     /** Which side of the trigger to render against. @default "bottom" */
     side?: PositionerProps$5["side"];
@@ -2517,7 +2519,7 @@ type ContentProps$6 = Omit<ComponentProps<typeof Select$1.Popup>, "className"> &
  * The popup surface. Composes Portal + Positioner + Popup + List so callers pass
  * SelectItems directly. Scrolls when the option list overflows.
  */
-declare function SelectContent({ className, children, side, align, sideOffset, ...props }: ContentProps$6): react.JSX.Element;
+declare function SelectContent({ className, children, side, align, sideOffset, ...props }: ContentProps$7): react.JSX.Element;
 type ItemProps$4 = Omit<ComponentProps<typeof Select$1.Item>, "className"> & {
     className?: string;
 };
@@ -2567,7 +2569,7 @@ declare const PopoverPortal: {
 };
 declare const PopoverClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 type PositionerProps$4 = ComponentProps<typeof Popover$1.Positioner>;
-type ContentProps$5 = Omit<ComponentProps<typeof Popover$1.Popup>, "className"> & {
+type ContentProps$6 = Omit<ComponentProps<typeof Popover$1.Popup>, "className"> & {
     className?: string;
     /** Which side of the trigger to render against. @default "bottom" */
     side?: PositionerProps$4["side"];
@@ -2586,7 +2588,7 @@ type ContentProps$5 = Omit<ComponentProps<typeof Popover$1.Popup>, "className">
  * The popover surface. Composes Portal + Positioner + Popup so callers pass a
  * single element. Defaults to the `bottom` side with an 8px offset.
  */
-declare function PopoverContent({ className, children, side, align, sideOffset, anchor, ...props }: ContentProps$5): react.JSX.Element;
+declare function PopoverContent({ className, children, side, align, sideOffset, anchor, ...props }: ContentProps$6): react.JSX.Element;
 type TitleProps$2 = Omit<ComponentProps<typeof Popover$1.Title>, "className"> & {
     className?: string;
 };
@@ -2633,7 +2635,7 @@ declare const MenuPortal: {
     displayName: string;
 };
 type PositionerProps$3 = ComponentProps<typeof Menu$1.Positioner>;
-type ContentProps$4 = Omit<ComponentProps<typeof Menu$1.Popup>, "className"> & {
+type ContentProps$5 = Omit<ComponentProps<typeof Menu$1.Popup>, "className"> & {
     className?: string;
     /** Which side of the trigger to render against. @default "bottom" */
     side?: PositionerProps$3["side"];
@@ -2646,7 +2648,7 @@ type ContentProps$4 = Omit<ComponentProps<typeof Menu$1.Popup>, "className"> & {
  * The dropdown surface. Composes Portal + Positioner + Popup so callers pass a
  * single element. Defaults to the `bottom` side, `start` aligned, 6px offset.
  */
-declare function MenuContent({ className, children, side, align, sideOffset, ...props }: ContentProps$4): react.JSX.Element;
+declare function MenuContent({ className, children, side, align, sideOffset, ...props }: ContentProps$5): react.JSX.Element;
 type ItemProps$3 = Omit<ComponentProps<typeof Menu$1.Item>, "className"> & {
     className?: string;
     /**
@@ -2768,7 +2770,7 @@ declare const SheetPortal: {
     (props: _base_ui_react.DrawerPortalProps & react.RefAttributes<HTMLDivElement>): react.JSX.Element;
     displayName: string;
 };
-type ContentProps$3 = Omit<ComponentProps<typeof Drawer.Popup>, "className"> & VariantProps<typeof sheetVariants> & {
+type ContentProps$4 = Omit<ComponentProps<typeof Drawer.Popup>, "className"> & VariantProps<typeof sheetVariants> & {
     className?: string;
 };
 /**
@@ -2779,7 +2781,7 @@ type ContentProps$3 = Omit<ComponentProps<typeof Drawer.Popup>, "className"> & V
  * stay flex items of the popup column): a mouse drag that starts on content
  * selects text instead of dragging the sheet. Touch swipes work anywhere.
  */
-declare function SheetContent({ className, children, side, initialFocus, ref, ...props }: ContentProps$3): react.JSX.Element;
+declare function SheetContent({ className, children, side, initialFocus, ref, ...props }: ContentProps$4): react.JSX.Element;
 type TitleProps$1 = Omit<ComponentProps<typeof Drawer.Title>, "className"> & {
     className?: string;
 };
@@ -3249,6 +3251,11 @@ type ViewportProps = Omit<ComponentProps<typeof Toast.Viewport>, "className"> &
     className?: string;
     /** Screen anchor for the toast stack. @default "top-right" */
     position?: ToastPosition;
+    /**
+     * Stack the toasts on top of one another, the newest in front, instead of
+     * listing them. Hovering or focusing the stack fans it out. @default false
+     */
+    stacked?: boolean;
 };
 /**
  * The fixed region that hosts the toast stack. Top-right by default; collision
@@ -3260,7 +3267,7 @@ type ViewportProps = Omit<ComponentProps<typeof Toast.Viewport>, "className"> &
  * with a transform, translate, filter or contain (a route's enter animation is
  * enough), so the stack landed in the content column instead of the screen corner.
  */
-declare function ToastViewport({ className, position, ...props }: ViewportProps): react.JSX.Element;
+declare function ToastViewport({ className, position, stacked, ...props }: ViewportProps): react.JSX.Element;
 type RootProps$1 = Omit<ComponentProps<typeof Toast.Root>, "className"> & {
     className?: string;
 };
@@ -3270,6 +3277,15 @@ type RootProps$1 = Omit<ComponentProps<typeof Toast.Root>, "className"> & {
  * is wired by Base UI.
  */
 declare function ToastRoot({ className, ...props }: RootProps$1): react.JSX.Element;
+type ContentProps$3 = Omit<ComponentProps<typeof Toast.Content>, "className"> & {
+    className?: string;
+};
+/**
+ * The toast's contents (icon, text, action, close) as one row. In a stacked
+ * viewport the contents of the cards behind the front one fade, since only an
+ * edge of them shows, and come back when the stack fans out.
+ */
+declare function ToastContent({ className, ...props }: ContentProps$3): react.JSX.Element;
 type TitleProps = Omit<ComponentProps<typeof Toast.Title>, "className"> & {
     className?: string;
 };
@@ -3320,6 +3336,12 @@ interface ToastProviderProps {
     closeIcon?: ReactNode;
     /** Screen anchor for the toast stack. @default "top-right" */
     position?: ToastPosition;
+    /**
+     * Stack the toasts like a deck of cards, the newest in front and the older
+     * ones peeking out behind it, instead of listing them one under another.
+     * Hovering or focusing the stack fans it out into the list. @default false
+     */
+    stacked?: boolean;
     /**
      * Extra classes merged LAST onto the fixed viewport region — for safe-area
      * insets or an offset (e.g. clearing a sidebar). @example
@@ -3340,7 +3362,7 @@ interface ToastProviderProps {
  * The action does NOT dismiss the toast — Base UI leaves that to the handler, so
  * call `toast.dismiss(id)` yourself when the action should close it.
  */
-declare function ToastProvider({ children, timeout, limit, closeIcon, position, viewportClassName, }: ToastProviderProps): react.JSX.Element;
+declare function ToastProvider({ children, timeout, limit, closeIcon, position, stacked, viewportClassName, }: ToastProviderProps): react.JSX.Element;
 
 declare const toastMeta: ComponentMeta;
 
@@ -3983,7 +4005,10 @@ interface CodeBlockProps extends ComponentPropsWithRef<"div"> {
 }
 /**
  * A multi-line code block. An optional header bar carries the filename and a
- * copy affordance; the body is a horizontally scrollable monospace pre.
+ * copy affordance; the body is a horizontally scrollable monospace pre whose
+ * edges fade while there is more to scroll (see useEdgeFade). Without a
+ * header, the copy button takes its own column beside the code rather than
+ * floating over it, so a long line can never scroll underneath it.
  * Highlighting is opt-in through `highlight` or `CodeHighlightProvider`.
  * Soft-square (rounded-md), never a pill.
  */
@@ -7499,6 +7524,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.4.0";
+declare const SABLE_UI_VERSION: "0.5.0";
 
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formMeta, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useInView, useMotion, usePanelWidth, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formMeta, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useInView, useMotion, usePanelWidth, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };

package/dist/index.js

@@ -1,17 +1,17 @@
 export { DENSITY_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, SEMANTIC_TOKENS, TYPE_OVERLINE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_SCALE_TOKENS, TYPE_UI_TOKENS, WORKSPACE_SURFACE_TOKENS } from './chunk-OQACYT2D.js';
 export { Phone, phoneMeta } from './chunk-KFZ43RKU.js';
 import './chunk-NEQNXI2G.js';
-export { AppHeader, AppShell, BottomNav, BottomNavItem, Browser, ChatComposer, DataTable, EmptyState, Marker, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, NotificationBadge, PageHeader, Presence, RelativeTime, Reveal, SearchInput, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Skeleton, StreamingText, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ViewTransitionName, appHeaderMeta, appShellMeta, bottomNavMeta, browserMeta, chatComposerMeta, dataTableMeta, emptyStateMeta, markerMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, relativeTimeMeta, searchInputMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, startViewTransition, streamingTextMeta, supportsViewTransitions, tabsMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, useInView, useSidebar } from './chunk-D2ETQBHV.js';
-import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-FBSL2LZQ.js';
-export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-FBSL2LZQ.js';
-import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, FIELD_INVALID, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, Textarea, Progress } from './chunk-CCUDFLU3.js';
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, Field, Form, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useMotion, useReducedMotion, useScrollActivity, useTypeTier } from './chunk-CCUDFLU3.js';
+export { AppHeader, AppShell, BottomNav, BottomNavItem, Browser, ChatComposer, DataTable, EmptyState, Marker, MessageScroller, Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue, NotificationBadge, PageHeader, Presence, RelativeTime, Reveal, SearchInput, SettingsMenu, SettingsRow, SideNav, SideNavGroup, SideNavItem, Sidebar, SidebarFooter, SidebarHeader, SidebarItem, SidebarNav, Skeleton, StreamingText, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, ViewTransitionName, appHeaderMeta, appShellMeta, bottomNavMeta, browserMeta, chatComposerMeta, dataTableMeta, emptyStateMeta, markerMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, pageHeaderMeta, relativeTimeMeta, searchInputMeta, settingsMenuMeta, sideNavMeta, sidebarMeta, skeletonMeta, startViewTransition, streamingTextMeta, supportsViewTransitions, tabsMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, useInView, useSidebar } from './chunk-ZBZMKOO7.js';
+import { SELECTION_CARD_CHECKED, CartesianChart, resolveSeries, chartFormatters, categoryText, numberValue, niceTicks, ChartFrame, polar, riseTransition, stagger, pathStyle, morphTransition, ChartLegend, RADIO_DOT, RADIO_RING, SELECTION_CARD_TILE_HEAD, SELECTION_CARD_GLYPH, SELECTION_CARD_SHELL, SELECTION_CARD_LAYOUT, CheckboxMark, CHECK_BOX, SEGMENTED_STEP, SEGMENTED_ITEM, SEGMENTED_TRACK, ToggleGroup, Toggle, approxTextWidth, ChartTooltipContent } from './chunk-GU3T7SBA.js';
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AreaChart, BarChart, CHART_SERIES_COUNT, Checkbox, CommandMenu, CommandMenuGroup, CommandMenuItem, CommandMenuPanel, CommandMenuTrigger, DateTile, Kbd, KbdGroup, OtpField, PieChart, RadialChart, SEGMENTED_BAR_TONES, Scroller, SegmentedBar, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, Stepper, StepperItem, Toggle, ToggleGroup, Toggle as ToggleGroupItem, accordionMeta, areaChartMeta, barChartMeta, chartColor, toneColor as chartToneColor, checkboxMeta, commandMenuMeta, dateTileMeta, kbdMeta, otpFieldMeta, pieChartMeta, radialChartMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, sliderMeta, sparklineMeta, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, toggleMeta, useCommandMenuShortcut } from './chunk-GU3T7SBA.js';
+import { withPortalThemeScope, FIELD_SHELL_XS, useTypeTier, useDensity, FIELD_SHELL, MOBILE_FIELD_TIER, useMotion, HighlightGlide, useAnchoredDensity, anchoredScroll, useIsomorphicLayoutEffect, mergeRefs, buttonVariants, FIELD_INVALID, Select, SelectTrigger, SelectContent, SelectItem, Button, Spinner, Badge, anchoredListScroll, useResizeObserver, MENU_ITEM_DESTRUCTIVE, DensityProvider, Input, Textarea, Progress } from './chunk-RCLKXF2N.js';
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, Attachment, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, Bubble, BubbleReaction, BubbleReactions, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardList, CardTitle, Code, CodeBlock, CodeHighlightProvider, Density, DensityProvider, DestructiveActionModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Entity, Field, Form, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, MotionProvider, OverflowMenu, Pill, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleTooltip, Spinner, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bubbleMeta, buttonMeta, buttonVariants, cardMeta, codeBlockMeta, codeMeta, destructiveActionModalMeta, dialogMeta, entityMeta, formMeta, inputMeta, labelMeta, menuMeta, messageMeta, overflowMenuMeta, pillVariants, progressMeta, progressTrackVariants, selectMeta, separatorMeta, spinnerMeta, statusDotMeta, statusDotVariants, switchMeta, tableMeta, textareaMeta, tooltipMeta, useAnchoredDensity, useCopy, useDensity, useMotion, useReducedMotion, useScrollActivity, useTypeTier } from './chunk-RCLKXF2N.js';
 export { AspectBox, Bleed, Center, Col, Columns, Grid, GridOverlay, Page, Region, Row, SafeArea, Spacer, SplitPane, Stack } from './chunk-3IWZYBGH.js';
 import { cn } from './chunk-SRQWQUTW.js';
 export { cn } from './chunk-SRQWQUTW.js';
-import { Icon } from './chunk-NGBDP3BM.js';
-export { Icon, IconProvider, composeIconSets, useIconSet } from './chunk-NGBDP3BM.js';
-export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './chunk-TH563WLW.js';
+import { Icon } from './chunk-QJ6FWTUG.js';
+export { Icon, IconProvider, composeIconSets, useIconSet } from './chunk-QJ6FWTUG.js';
+export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './chunk-XAZGMY73.js';
 import { featuredThemeManifests, defaultThemeId } from './chunk-EFLC4NA3.js';
 export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, defaultThemeId, getThemeManifest, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from './chunk-EFLC4NA3.js';
 import './chunk-7MG4SHYX.js';
@@ -3512,7 +3512,43 @@ var ENTER_MOTION = {
   "bottom-center": "motion-slide-up",
   "bottom-right": "motion-slide-left"
 };
-var ToastPositionContext = createContext("top-right");
+var STACKED_ROOT = [
+  // design-lint-disable-next-line raw-z-index -- orders the cards inside the viewport's own stacking context (it is fixed at z-(--z-toast)); not a page layer
+  "absolute inset-x-0 z-[calc(100-var(--toast-index))] select-none",
+  "[--toast-gap:--spacing(2)] [--toast-peek:--spacing(3)]",
+  "[--toast-scale:max(0,1-var(--toast-index)*0.05)]",
+  "[--toast-h:var(--toast-frontmost-height,var(--toast-height))]",
+  "h-(--toast-h) data-expanded:h-(--toast-height)",
+  // Collapsed: shrink about the anchored edge, then lift a peek per card.
+  "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-h))))_scale(var(--toast-scale))]",
+  // Fanned out: Base UI's offset is the heights in front of it; add the gaps.
+  "data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap))))]",
+  // Arrive from the anchored edge and leave the same way, unless swiped or
+  // pushed out by the limit, which only fade.
+  "data-starting-style:[translate:0_calc(var(--toast-dir)*-100%)] data-starting-style:opacity-0",
+  "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[translate:0_calc(var(--toast-dir)*-100%)]",
+  "data-ending-style:opacity-0 data-limited:opacity-0",
+  // Fanned out, bridges the gap to the next card, so the pointer stays on the
+  // stack and the list does not collapse under it.
+  "after:absolute after:inset-x-0 after:h-[calc(var(--toast-gap)+1px)] not-data-expanded:after:hidden",
+  // Collapsed, the deck lifts as one: cards resting on each other barely shade
+  // each other. A full shadow on every card stacked a slab per card, and a
+  // theme with hard offset shadows (Poppy's reach 12px, past the 12px peek)
+  // painted the front card's slab over the cards behind it. So the front card
+  // steps down to shadow-md and the cards behind to shadow-sm; fanned out,
+  // each is a toast again and takes the full step back.
+  "not-data-expanded:shadow-md not-data-expanded:has-[>[data-behind]]:shadow-sm",
+  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-emphasized"
+].join(" ");
+var STACKED_EDGE = {
+  top: "top-0 origin-top [--toast-dir:1] after:top-full",
+  bottom: "bottom-0 origin-bottom [--toast-dir:-1] after:bottom-full"
+};
+var edgeOf = (position) => position.startsWith("top") ? "top" : "bottom";
+var ToastViewportContext = createContext({
+  position: "top-right",
+  stacked: false
+});
 function persistsByDefault(type, options) {
   return type === "loading" || type === "error" || options?.actionProps !== void 0;
 }
@@ -3548,13 +3584,16 @@ var ToastPortal = withPortalThemeScope(Toast.Portal);
 function ToastViewport({
   className,
   position = "top-right",
+  stacked = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(ToastPositionContext.Provider, { value: position, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ToastViewportContext.Provider, { value: { position, stacked }, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
     Toast.Viewport,
     {
       className: cn(
-        "fixed z-(--z-toast) flex w-95 max-w-[90vw] flex-col gap-2 outline-none",
+        "fixed z-(--z-toast) w-95 max-w-[90vw] outline-none",
+        // Stacked toasts are positioned against the viewport, not laid out in it.
+        !stacked && "flex flex-col gap-2",
         POSITION[position],
         className
       ),
@@ -3563,13 +3602,27 @@ function ToastViewport({
   ) }) });
 }
 function ToastRoot({ className, ...props }) {
-  const position = useContext(ToastPositionContext);
+  const { position, stacked } = useContext(ToastViewportContext);
   return /* @__PURE__ */ jsx(
     Toast.Root,
     {
       className: cn(
         "flex w-full gap-3 rounded-md border border-border-floating bg-popover p-4 text-popover-foreground shadow-xl",
-        ENTER_MOTION[position],
+        stacked ? [STACKED_ROOT, STACKED_EDGE[edgeOf(position)]] : ENTER_MOTION[position],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastContent({ className, ...props }) {
+  const { stacked } = useContext(ToastViewportContext);
+  return /* @__PURE__ */ jsx(
+    Toast.Content,
+    {
+      className: cn(
+        "flex min-w-0 flex-1 gap-3",
+        stacked && "transition-opacity duration-(--motion-duration-base) ease-standard data-behind:not-data-expanded:pointer-events-none data-behind:not-data-expanded:opacity-0",
         className
       ),
       ...props
@@ -3619,6 +3672,7 @@ function ToastProvider({
   limit,
   closeIcon,
   position,
+  stacked,
   viewportClassName
 }) {
   return /* @__PURE__ */ jsxs(Toast.Provider, { timeout, limit, toastManager, children: [
@@ -3628,6 +3682,7 @@ function ToastProvider({
       {
         closeIcon,
         position,
+        stacked,
         viewportClassName
       }
     )
@@ -3642,12 +3697,13 @@ var TYPE_ACCENT = {
 function ToastList({
   closeIcon,
   position,
+  stacked,
   viewportClassName
 }) {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsx(ToastViewport, { position, className: viewportClassName, children: toasts.map((item) => {
+  return /* @__PURE__ */ jsx(ToastViewport, { position, stacked, className: viewportClassName, children: toasts.map((item) => {
     const accent = item.type ? TYPE_ACCENT[item.type] : void 0;
-    return /* @__PURE__ */ jsxs(ToastRoot, { toast: item, children: [
+    return /* @__PURE__ */ jsx(ToastRoot, { toast: item, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
       item.type === "loading" ? /* @__PURE__ */ jsx(
         Spinner,
         {
@@ -3667,7 +3723,7 @@ function ToastList({
       ] }),
       /* @__PURE__ */ jsx(ToastAction, { className: "self-center" }),
       /* @__PURE__ */ jsx(ToastClose, { children: closeIcon ?? /* @__PURE__ */ jsx(Icon, { name: "xmark", className: "text-sm" }) })
-    ] }, item.id);
+    ] }) }, item.id);
   }) });
 }
 
@@ -3753,7 +3809,7 @@ var toastMeta = {
   props: [
     {
       name: "ToastProvider",
-      type: "{ children, timeout?, limit?, closeIcon?, position?, viewportClassName? }",
+      type: "{ children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? }",
       default: "\u2014",
       description: "Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast()."
     },
@@ -3763,6 +3819,12 @@ var toastMeta = {
       default: '"top-right"',
       description: "Screen anchor for the toast stack."
     },
+    {
+      name: "stacked",
+      type: "boolean",
+      default: "false",
+      description: "Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page."
+    },
     {
       name: "viewportClassName",
       type: "string",
@@ -3811,6 +3873,11 @@ var toastMeta = {
       type: "Base UI Toast.Root props + className (requires the `toast` object)",
       description: "A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI."
     },
+    {
+      name: "ToastContent",
+      type: "Base UI Toast.Content props + className",
+      description: "The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them."
+    },
     {
       name: "ToastTitle",
       type: "Base UI Toast.Title props + className",
@@ -3866,6 +3933,12 @@ var toastMeta = {
       part: "ToastRoot",
       why: "Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause."
     },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "ToastRoot (stacked)",
+      why: "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
+    },
     {
       slot: "activity",
       recipe: "none",
@@ -3902,6 +3975,10 @@ var toastMeta = {
       label: "Undo action",
       code: 'toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })'
     },
+    {
+      label: "Stacked",
+      code: '<ToastProvider stacked position="bottom-right">{children}</ToastProvider>'
+    },
     {
       label: "Provider with app chrome",
       code: '<ToastProvider position="bottom-right" limit={3}><AppShell><Region max="feed"><Button onClick={() => toast.success("Saved")}>Save</Button></Region></AppShell></ToastProvider>'
@@ -4181,7 +4258,7 @@ function ComboboxChips({
                 Combobox$1.Chip,
                 {
                   render: /* @__PURE__ */ jsx(Badge, { appearance: "soft", size: "sm" }),
-                  className: "pe-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  className: "gap-0.5 pe-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring",
                   children: [
                     label,
                     /* @__PURE__ */ jsx(
@@ -4192,7 +4269,7 @@ function ComboboxChips({
                           {
                             variant: "ghost",
                             size: "icon-xs",
-                            className: "-my-1"
+                            className: cn("-my-1 size-5 [--button-icon:0.875rem]", hitTargetMin)
                           }
                         ),
                         "aria-label": `Remove ${label}`,
@@ -8034,7 +8111,7 @@ function ColorField({
                 "aria-hidden": true,
                 className: (
                   // design-lint-disable-next-line raw-black-white -- handle over arbitrary user colour; no token can guarantee contrast
-                  "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white ring-inset shadow-sm"
+                  "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white ring-inset shadow-(--knob-shadow)"
                 ),
                 style: {
                   left: `${picker.hsv.s * 100}%`,
@@ -11260,6 +11337,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.4.0";
+var SABLE_UI_VERSION = "0.5.0";
 
-export { Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, LineChart, Marquee, MiddleTruncate, Note, NumberField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, RadarChart, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, StatusBar, StatusBarGroup, StatusBarSeparator, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, lineChartMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radarChartMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, statusBarMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, treeIndent, treeMeta, useComboboxFilteredItems, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };
+export { Banner, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, Carousel, CheckboxCard, CheckboxGroup, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxPortal, ComboboxValue, ComboboxVirtualList, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DatePicker, Feedback, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, FileDropzone, GlidingHighlight, InlineStatus, LineChart, Marquee, MiddleTruncate, Note, NumberField, PageLoader, Pagination, Panel, PanelGroup, PanelResizer, PanelSection, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PropertyPair, PropertyRow, RadarChart, Radio, RadioCard, RadioGroup, SABLE_UI_VERSION, STATUS_TONES, STATUS_TONE_ICON, ScrubField, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, ShowMore, StatusBar, StatusBarGroup, StatusBarSeparator, TRANSPARENT, ThemeSelector, ThemeSwitcher, ThinkingOrb, ToastAction, ToastClose, ToastContent, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, Video, Workspace, WorkspaceBar, WorkspaceCanvas, bannerMeta, bannerVariants, breadcrumbsMeta, calendarMeta, carouselMeta, checkboxCardMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, datePickerMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, formatFileSize, formatHex, glidingHighlightMeta, hsvToRgb, hueColor, inlineStatusMeta, isTransparent, lineChartMeta, marqueeMeta, middleTruncateMeta, noteMeta, noteVariants, numberFieldMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, pillMeta, popoverMeta, radarChartMeta, radioCardMeta, radioMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, sheetMeta, sheetVariants, showMoreMeta, statusBarMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, treeIndent, treeMeta, useComboboxFilteredItems, usePanelWidth, useToast, useToastManager, videoMeta, workspaceMeta };

package/dist/patterns/index.js

@@ -1,9 +1,9 @@
-import { TextReveal, Reveal, MessageScroller, Marker, Toolbar, ToolbarButton, StreamingText, ChatComposer, SettingsMenu, SettingsRow, AppShell, PageHeader, DataTable, Meter, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, BottomNav, BottomNavItem, AppHeader, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, SearchInput, EmptyState, SideNav, SideNavItem } from '../chunk-D2ETQBHV.js';
-import { Form, Field, Input, Button, Separator, Card, CardContent, Badge, Entity, Avatar, StatusDot, CardHeader, CardTitle, CardDescription, CardAction, Message, Bubble, CodeBlock, SimpleTooltip, Attachment, CardFooter, MenuRadioGroup, MenuRadioItem, CardList, OverflowMenu, MenuItem, MenuSeparator, Textarea, Code, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, Switch } from '../chunk-CCUDFLU3.js';
+import { TextReveal, Reveal, MessageScroller, Marker, Toolbar, ToolbarButton, StreamingText, ChatComposer, SettingsMenu, SettingsRow, AppShell, PageHeader, DataTable, Meter, RelativeTime, Sidebar, SidebarHeader, SidebarNav, SidebarItem, NotificationBadge, SidebarFooter, BottomNav, BottomNavItem, AppHeader, Tabs, TabsList, TabsTrigger, TabsPanel, Skeleton, Browser, MeterLabel, MeterValue, MeterTrack, SearchInput, EmptyState, SideNav, SideNavItem } from '../chunk-ZBZMKOO7.js';
+import { Form, Field, Input, Button, Separator, Card, CardContent, Badge, Entity, Avatar, StatusDot, CardHeader, CardTitle, CardDescription, CardAction, Message, Bubble, CodeBlock, SimpleTooltip, Attachment, CardFooter, MenuRadioGroup, MenuRadioItem, CardList, OverflowMenu, MenuItem, MenuSeparator, Textarea, Code, Select, SelectTrigger, SelectContent, SelectItem, DestructiveActionModal, Switch } from '../chunk-RCLKXF2N.js';
 import { Region, Stack, Row, Grid, Page, Columns, Col, AspectBox } from '../chunk-3IWZYBGH.js';
 import '../chunk-SRQWQUTW.js';
-import { Icon } from '../chunk-NGBDP3BM.js';
-import '../chunk-TH563WLW.js';
+import { Icon } from '../chunk-QJ6FWTUG.js';
+import '../chunk-XAZGMY73.js';
 import { useState, useRef, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/styles.css

@@ -345,6 +345,13 @@
 	   a dark track (well under 3:1). When ON the knob takes `--primary-foreground`,
 	   the ink every theme already tunes against its primary fill. */
 	--switch-thumb: var(--theme-switch-thumb, oklch(99% 0.002 90));
+
+	/* The contact shadow under a knob: the Switch thumb, the Slider thumb, the
+	   ColorField handle. NOT the elevation ladder. `shadow-sm` is a surface's
+	   lift, and a theme or a Depth setting may make it a long offset (Poppy's
+	   are hard 3–12px drops); on a 20px knob inside its track that drop escaped
+	   the track. A knob only sits on its rail, so it keeps one small shadow. */
+	--knob-shadow: var(--theme-knob-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
 /* ==========================================================================

package/llms/components/tabs.md

@@ -31,7 +31,7 @@ Use Tabs to switch between related panels within the same page context.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant. |
+| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant. |
 | TabsTrigger | Base UI Tabs.Tab props (value, disabled) + className | A single tab button. value pairs it with the panel of the same value. |
 | TabsPanel | Base UI Tabs.Panel props (value, keepMounted) + className | The content shown when the matching trigger is active. |
 | TabsContent | Alias of TabsPanel | Re-export of TabsPanel for consumers that prefer this name. |

package/llms/components/toast.md

@@ -34,6 +34,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 | Name | Type | Description |
 | --- | --- | --- |
 | ToastRoot | Base UI Toast.Root props + className (requires the `toast` object) | A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI. |
+| ToastContent | Base UI Toast.Content props + className | The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them. |
 | ToastTitle | Base UI Toast.Title props + className | The toast headline (text-title-sm). Auto-associated as the toast's accessible name. |
 | ToastDescription | Base UI Toast.Description props + className | Supporting body copy beneath the title (text-body-sm, muted). Auto-associated as the toast's accessible description. |
 | ToastClose | Base UI Toast.Close props + className | Dismiss button. Base UI handles the close and leave animation; labelled "Dismiss" by default. |
@@ -43,8 +44,9 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
+| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
 | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" | "top-right" | Screen anchor for the toast stack. |
+| stacked | boolean | false | Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page. |
 | viewportClassName | string | — | Extra classes merged LAST onto the fixed viewport region — for safe-area insets or an offset (e.g. clearing a sidebar). |
 | timeout | number | 5000 | Default auto-dismiss time in ms for toasts. 0 keeps a toast until it is dismissed. Error toasts, loading toasts, and any toast carrying actionProps default to 0 regardless of this value; a per-toast timeout overrides both. |
 | limit | number | 3 | Maximum toasts shown at once; older toasts are pushed out when the limit is exceeded. |
@@ -62,6 +64,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 - **arrival** · ToastRoot · `motion-slide-left` — A toast interrupts without being asked, so where it came from is the reader's first question. Sliding in from the viewport edge answers it and marks the toast as belonging to the edge rather than to whatever it happens to cover.
 - **response** · ToastAction · `motion-interactive` — Toasts are on a timer, so the action has to look actionable at a glance — there is no time to hunt for the hit target.
 - **transition** · ToastRoot · `motion-slide-left` — Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause.
+- **transition** · ToastRoot (stacked) · _custom (outside the recipe layer)_ — A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there.
 - **activity** · ToastRoot · _no motion_ — A toast reports a result that has already happened. Anything still in flight belongs in the surface that started it, where the reader is still looking.
 
 ## Accessibility
@@ -121,6 +124,14 @@ import { toast } from "@sableui/react"
 toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })
 ```
 
+### Stacked
+
+```tsx
+import { ToastProvider } from "@sableui/react"
+
+<ToastProvider stacked position="bottom-right">{children}</ToastProvider>
+```
+
 ### Provider with app chrome
 
 ```tsx

package/llms-full.txt

@@ -18634,7 +18634,7 @@ Use Tabs to switch between related panels within the same page context.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger. Triggers inherit the variant. |
+| TabsList | Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" \| "pill" + className | The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant. |
 | TabsTrigger | Base UI Tabs.Tab props (value, disabled) + className | A single tab button. value pairs it with the panel of the same value. |
 | TabsPanel | Base UI Tabs.Panel props (value, keepMounted) + className | The content shown when the matching trigger is active. |
 | TabsContent | Alias of TabsPanel | Re-export of TabsPanel for consumers that prefer this name. |
@@ -19081,6 +19081,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 | Name | Type | Description |
 | --- | --- | --- |
 | ToastRoot | Base UI Toast.Root props + className (requires the `toast` object) | A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI. |
+| ToastContent | Base UI Toast.Content props + className | The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them. |
 | ToastTitle | Base UI Toast.Title props + className | The toast headline (text-title-sm). Auto-associated as the toast's accessible name. |
 | ToastDescription | Base UI Toast.Description props + className | Supporting body copy beneath the title (text-body-sm, muted). Auto-associated as the toast's accessible description. |
 | ToastClose | Base UI Toast.Close props + className | Dismiss button. Base UI handles the close and leave animation; labelled "Dismiss" by default. |
@@ -19090,8 +19091,9 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
+| ToastProvider | { children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? } | — | Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast(). |
 | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" | "top-right" | Screen anchor for the toast stack. |
+| stacked | boolean | false | Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page. |
 | viewportClassName | string | — | Extra classes merged LAST onto the fixed viewport region — for safe-area insets or an offset (e.g. clearing a sidebar). |
 | timeout | number | 5000 | Default auto-dismiss time in ms for toasts. 0 keeps a toast until it is dismissed. Error toasts, loading toasts, and any toast carrying actionProps default to 0 regardless of this value; a per-toast timeout overrides both. |
 | limit | number | 3 | Maximum toasts shown at once; older toasts are pushed out when the limit is exceeded. |
@@ -19109,6 +19111,7 @@ Use Toast for transient feedback caused by a user action: saved, failed, copied,
 - **arrival** · ToastRoot · `motion-slide-left` — A toast interrupts without being asked, so where it came from is the reader's first question. Sliding in from the viewport edge answers it and marks the toast as belonging to the edge rather than to whatever it happens to cover.
 - **response** · ToastAction · `motion-interactive` — Toasts are on a timer, so the action has to look actionable at a glance — there is no time to hunt for the hit target.
 - **transition** · ToastRoot · `motion-slide-left` — Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause.
+- **transition** · ToastRoot (stacked) · _custom (outside the recipe layer)_ — A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there.
 - **activity** · ToastRoot · _no motion_ — A toast reports a result that has already happened. Anything still in flight belongs in the surface that started it, where the reader is still looking.
 
 ## Accessibility
@@ -19168,6 +19171,14 @@ import { toast } from "@sableui/react"
 toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })
 ```
 
+### Stacked
+
+```tsx
+import { ToastProvider } from "@sableui/react"
+
+<ToastProvider stacked position="bottom-right">{children}</ToastProvider>
+```
+
 ### Provider with app chrome
 
 ```tsx

package/llms.txt

@@ -446,7 +446,7 @@ import { Button, Card, IconProvider, MotionProvider, SableThemeProvider, useSabl
 - **ThemeSelector** — A presentational radiogroup for choosing a Sable design theme from theme manifests — swatch-strip cards for a settings page, or compact rows for tool chrome. → [`llms/components/theme-selector.md`](./llms/components/theme-selector.md)
 - **ThemeSwitcher** — A segmented light / dark / system switch. → [`llms/components/theme-switcher.md`](./llms/components/theme-switcher.md)
 - **ThinkingOrb** — Canvas dot-cloud 'agent is thinking' indicator. → [`llms/components/thinking-orb.md`](./llms/components/thinking-orb.md)
-- **Toast** — Imperative notification system over Base UI Toast — auto-dismiss timers, swipe-to-dismiss, focus management, ARIA live-region announcements, and a limit-aware stack. *Parts:* ToastRoot, ToastTitle, ToastDescription, ToastClose, ToastAction. → [`llms/components/toast.md`](./llms/components/toast.md)
+- **Toast** — Imperative notification system over Base UI Toast — auto-dismiss timers, swipe-to-dismiss, focus management, ARIA live-region announcements, and a limit-aware stack. *Parts:* ToastRoot, ToastContent, ToastTitle, ToastDescription, ToastClose, ToastAction. → [`llms/components/toast.md`](./llms/components/toast.md)
 - **Toggle** — Pressed-state button over Base UI Toggle, plus ToggleGroup for shared single- or multi-select rows. *Parts:* ToggleGroup, ToggleGroupItem. → [`llms/components/toggle.md`](./llms/components/toggle.md)
 - **Toolbar** — A row or column of controls that is one tab stop, with arrow-key movement between its items (role="toolbar"), over Base UI Toolbar. *Parts:* ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator. → [`llms/components/toolbar.md`](./llms/components/toolbar.md)
 - **Tooltip** — Hover/focus label over Base UI Tooltip (collision-aware positioning, ARIA wiring, delay grouping via TooltipProvider). *Parts:* TooltipProvider, TooltipTrigger, TooltipContent, TooltipArrow, SimpleTooltip. → [`llms/components/tooltip.md`](./llms/components/tooltip.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [

package/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
   "engine": {
     "behavior": "@base-ui/react",
@@ -16798,7 +16798,7 @@
         {
           "name": "TabsList",
           "type": "Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: \"underline\" | \"pill\" + className",
-          "description": "The tablist row. variant=\"underline\" (default) draws a divider rule beneath the triggers; variant=\"pill\" drops the rule and fills the active trigger. Triggers inherit the variant."
+          "description": "The tablist row. variant=\"underline\" (default) draws a divider rule beneath the triggers; variant=\"pill\" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant."
         },
         {
           "name": "TabsTrigger",
@@ -17450,7 +17450,7 @@
       "props": [
         {
           "name": "ToastProvider",
-          "type": "{ children, timeout?, limit?, closeIcon?, position?, viewportClassName? }",
+          "type": "{ children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? }",
           "default": "—",
           "description": "Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast()."
         },
@@ -17460,6 +17460,12 @@
           "default": "\"top-right\"",
           "description": "Screen anchor for the toast stack."
         },
+        {
+          "name": "stacked",
+          "type": "boolean",
+          "default": "false",
+          "description": "Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page."
+        },
         {
           "name": "viewportClassName",
           "type": "string",
@@ -17508,6 +17514,11 @@
           "type": "Base UI Toast.Root props + className (requires the `toast` object)",
           "description": "A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI."
         },
+        {
+          "name": "ToastContent",
+          "type": "Base UI Toast.Content props + className",
+          "description": "The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them."
+        },
         {
           "name": "ToastTitle",
           "type": "Base UI Toast.Title props + className",
@@ -17563,6 +17574,12 @@
           "part": "ToastRoot",
           "why": "Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause."
         },
+        {
+          "slot": "transition",
+          "recipe": "custom",
+          "part": "ToastRoot (stacked)",
+          "why": "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
+        },
         {
           "slot": "activity",
           "recipe": "none",
@@ -17604,6 +17621,11 @@
           "code": "toast.message(\"Post archived\", { actionProps: { children: \"Undo\", onClick: () => restorePost() } })",
           "imports": "import { toast } from \"@sableui/react\""
         },
+        {
+          "label": "Stacked",
+          "code": "<ToastProvider stacked position=\"bottom-right\">{children}</ToastProvider>",
+          "imports": "import { ToastProvider } from \"@sableui/react\""
+        },
         {
           "label": "Provider with app chrome",
           "code": "<ToastProvider position=\"bottom-right\" limit={3}><AppShell><Region max=\"feed\"><Button onClick={() => toast.success(\"Saved\")}>Save</Button></Region></AppShell></ToastProvider>",
@@ -23699,6 +23721,11 @@
         "render",
         "style"
       ],
+      "ToastContent": [
+        "className",
+        "render",
+        "style"
+      ],
       "ToastDescription": [
         "className",
         "render",
@@ -23709,6 +23736,7 @@
         "closeIcon",
         "limit",
         "position",
+        "stacked",
         "timeout",
         "viewportClassName"
       ],
@@ -23728,6 +23756,7 @@
         "className",
         "position",
         "render",
+        "stacked",
         "style"
       ],
       "Toggle": [