@sableui/react 0.3.2 → 0.5.0

package/dist/index.js

@@ -1,26 +1,26 @@
 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 { featuredThemeManifests, defaultThemeId } from './chunk-MXJX3NZI.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-MXJX3NZI.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';
 import './chunk-KO3NAEBF.js';
 import './chunk-L4IEIQQA.js';
-import './chunk-EP55KSYA.js';
+import './chunk-EHH4MHO6.js';
 import './chunk-ADLLDWLW.js';
 import './chunk-K7RUHUGC.js';
-import './chunk-YXBOYWBN.js';
+import './chunk-C4Z3CF54.js';
 import { NumberField as NumberField$1 } from '@base-ui/react/number-field';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useId, useRef, useState, useEffect, useLayoutEffect, useContext, useMemo, useCallback, useSyncExternalStore, Children } from 'react';
@@ -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}%`,
@@ -9358,7 +9435,7 @@ var themeSelectorMeta = {
     },
     {
       label: "Controlled",
-      code: 'const [themeId, setThemeId] = useState<ThemeId>("base")\n<ThemeSelector value={themeId} onValueChange={setThemeId} />'
+      code: 'const [themeId, setThemeId] = useState<ThemeId>("sable")\n<ThemeSelector value={themeId} onValueChange={setThemeId} />'
     },
     {
       label: "In chrome \u2014 a popover or a docked panel",
@@ -11260,6 +11337,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.3.2";
+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/presets/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../_contract-Cn3lUpih.js';
 
 /** The public theme vocabulary. Presets never need component overrides. */
 declare const PRESET_TOKEN_NAMES: readonly string[];

package/dist/presets/index.js

@@ -24,7 +24,7 @@ var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   "theme-shadow-md",
   "theme-shadow-lg",
   "theme-shadow-xl",
-  // Chart series colours: optional — a preset without them inherits Base's validated set.
+  // Chart series colours: optional — a preset without them inherits the Sable theme's validated set.
   "chart-1",
   "chart-2",
   "chart-3",

package/dist/styles.css

@@ -12,7 +12,7 @@
    @utility set, and an @source directive so Tailwind scans the package.
    ========================================================================== */
 
-/* Base ONLY. It is the default theme, and it is also the layout floor:
+/* The Sable theme ONLY. It is the default theme, and it is also the layout floor:
    `--page-inset`, the `--region-*` caps, `--rhythm-unit`, `--grid-*` and
    `--z-*` are declared here on a bare `:root`, so every other theme — bundled
    or app-owned — inherits them. Removing it does not save 18 KB, it silently
@@ -30,10 +30,10 @@
      @import "@sableui/react/themes.css";
 
    The failure mode if you forget: `data-sable-theme` is set, nothing matches,
-   and the page renders as Base — no error, just the wrong theme. If a
+   and the page renders as the Sable theme — no error, just the wrong theme. If a
    theme selector looks like it does nothing, this import is the first thing
    to check. */
-@import "./themes/base/base.css";
+@import "./themes/sable/sable.css";
 
 /* Scan the package for utility classes (path is relative to THIS file). Covers
    both workspace source (.ts/.tsx next to this file in src/) and the compiled
@@ -119,7 +119,7 @@
 	/* Motion easings → ease-* utilities (ease-standard/decelerate/emphasized;
 	   `linear` is built-in). Durations stay raw CSS vars and are consumed via
 	   `duration-(--motion-duration-*)` so the --motion-scale kill-switch applies.
-	   See themes/base/base.css → Motion tokens, and DESIGN.md → Motion. */
+	   See themes/sable/sable.css → Motion tokens, and DESIGN.md → Motion. */
 	--ease-standard: var(--motion-ease-standard);
 	--ease-decelerate: var(--motion-ease-decelerate);
 	--ease-emphasized: var(--motion-ease-emphasized);
@@ -168,7 +168,7 @@
    dims what is behind it, per mode.
 
    `--overlay` is near-black in every theme and mode, which is right for a
-   scrim. But a dark page is near-black too: Base's dark `--background` IS its
+   scrim. But a dark page is near-black too: the Sable theme's dark `--background` IS its
    `--overlay`, so a 50% scrim over it changed nothing, and with a dialog open
    the page's text stayed at nearly full strength — while foundations/surfaces
    calls the scrim "the primary depth cue" for a modal. Dark mode needs more of
@@ -322,11 +322,12 @@
 	--panel-raised: var(--theme-panel-raised, color-mix(in oklch, var(--background) 94%, var(--foreground)));
 
 	/* A compact control docked in a panel: the xs field rung and a field-style
-	   button. Inset to the canvas tone at rest, a panel step under the pointer.
-	   Named so a panel control states its role instead of borrowing the work
-	   surface's token and a fixed hover. */
-	--panel-field: var(--theme-panel-field, var(--canvas));
-	--panel-field-hover: var(--theme-panel-field-hover, var(--panel-raised));
+	   button. Mixed from the panel it sits in, a further step under the pointer.
+	   It used to borrow the canvas tone (3% ink), which measured 1.04:1 against
+	   a dark panel: the field all but vanished. 9% is what a shipped inspector
+	   settled on (1.15:1 dark, 1.25:1 light). */
+	--panel-field: var(--theme-panel-field, color-mix(in oklch, var(--panel) 91%, var(--panel-foreground)));
+	--panel-field-hover: var(--theme-panel-field-hover, color-mix(in oklch, var(--panel) 88%, var(--panel-foreground)));
 
 	/* The structural edge. Alpha-based so it holds over any surface beneath it. */
 	--hairline: var(--theme-hairline, color-mix(in oklch, transparent 93%, var(--foreground)));
@@ -344,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));
 }
 
 /* ==========================================================================
@@ -1477,7 +1485,7 @@
 
    Motion is a first-class layer of Sable. Three ideas:
 
-   1. TOKENS (themes/base/base.css): a duration ladder + semantic
+   1. TOKENS (themes/sable/sable.css): a duration ladder + semantic
       easings, every duration scaled by --motion-scale.
    2. RECIPES (below): named, reusable motion behaviours a component opts into
       with ONE class (e.g. `motion-pop`, `motion-press`) instead of hand-rolling

package/dist/{theme-provider-CuYYxF0o.d.ts → theme-provider-CGeiusgu.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as ThemeManifest } from './_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from './_contract-Cn3lUpih.js';
 
 declare const SABLE_THEME_ATTRIBUTE: "data-sable-theme";
 declare const DEFAULT_THEME_ID: string;
@@ -62,7 +62,7 @@ interface SableThemeProviderProps {
     preference?: SableThemePreference;
     /** Notified whenever setPreference/setColorPreference is called. */
     onPreferenceChange?: (preference: SableThemePreference) => void;
-    /** Initial design theme when uncontrolled and no stored value exists. @default "base" */
+    /** Initial design theme when uncontrolled and no stored value exists. @default "sable" */
     defaultThemeId?: AnyThemeId;
     /** Controlled design theme id. */
     themeId?: AnyThemeId;
@@ -98,7 +98,7 @@ declare function applySableTheme(themeId: AnyThemeId, target?: HTMLElement | nul
 declare function SableThemeProvider({ children, defaultPreference, preference: controlledPreference, onPreferenceChange, defaultThemeId, themeId: controlledThemeId, onThemeIdChange, colorStorageKey, themeStorageKey, target, customThemes, }: SableThemeProviderProps): react.JSX.Element;
 /**
  * Reads Sable's active color preference and design theme. Safe without a
- * provider; mutators become no-ops and the default (Base, dark) is reported.
+ * provider; mutators become no-ops and the default (Sable, dark) is reported.
  */
 declare function useSableTheme(): SableThemeContextValue;
 

package/dist/themes/atelier/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /**
  * Mono Editorial — a Sable theme. Concrete token values live in

package/dist/themes/atelier/index.js

@@ -1 +1 @@
-export { atelierTheme, atelier_default as default } from '../../chunk-YXBOYWBN.js';
+export { atelierTheme, atelier_default as default } from '../../chunk-C4Z3CF54.js';

package/dist/themes/ember/ember.css

@@ -5,7 +5,7 @@
    --tone-edition, …), never any palette ramp directly. See themes/_contract.ts.
    ========================================================================== */
 
-/* Scoped only — never a bare `:root`. Base alone owns `:root` as the
+/* Scoped only — never a bare `:root`. The Sable theme alone owns `:root` as the
    package default; a second theme claiming it leaks its tokens into every other
    theme, and `themes.test.ts` fails the build on it. */
 [data-sable-theme="ember"] {
@@ -238,8 +238,11 @@
 	--input: oklch(33% 0.012 65);
 	--control-border: oklch(55.6% 0.0084 67.7);
 	--ring: oklch(65.2% 0.235 32.9);
-	--primary: oklch(65.2% 0.235 32.9);
-	--primary-foreground: oklch(14.1% 0.018 70.5);
+	/* The light-mode fill, not a brighter one: on the brighter fill WCAG preferred
+	   dark ink (5.6:1), but it reads at APCA Lc 42 — muddy — against Lc 67 for
+	   white. At 58% white clears both (4.8:1, Lc 76). */
+	--primary: oklch(58% 0.245 32.9);
+	--primary-foreground: oklch(100% 0 0);
 	--secondary: oklch(26% 0.012 67.2); /* a step ABOVE the card, so a secondary Button reads on a card and on the page */
 	--secondary-foreground: oklch(100% 0 0);
 	--accent: oklch(29% 0.014 60);
@@ -264,8 +267,8 @@
 	--overlay-foreground: oklch(100% 0 0);
 	--sidebar: oklch(15.9% 0.016 65);
 	--sidebar-foreground: oklch(100% 0 0);
-	--sidebar-primary: oklch(65.2% 0.235 32.9);
-	--sidebar-primary-foreground: oklch(14.1% 0.018 70.5);
+	--sidebar-primary: oklch(58% 0.245 32.9);
+	--sidebar-primary-foreground: oklch(100% 0 0);
 	--sidebar-accent: oklch(22% 0.010 60);
 	--sidebar-accent-foreground: oklch(100% 0 0);
 	--sidebar-border: oklch(25.2% 0.012 67.2);

package/dist/themes/ember/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /**
  * Ember — a Sable theme. Concrete token values live in

package/dist/themes/index.d.ts

@@ -1,10 +1,10 @@
-export { A as AnyThemeId, D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, T as ThemeId, h as applySableColorMode, i as applySableTheme, j as buildThemeManifestById, k as defaultThemeId, l as featuredThemeManifests, m as getThemeManifest, n as isKnownThemeId, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from '../theme-provider-CuYYxF0o.js';
+export { A as AnyThemeId, D as DEFAULT_THEME_ID, S as SABLE_COLOR_STORAGE_KEY, a as SABLE_THEME_ATTRIBUTE, b as SABLE_THEME_STORAGE_KEY, c as SableColorMode, d as SableThemeContextValue, e as SableThemePreference, f as SableThemeProvider, g as SableThemeProviderProps, T as ThemeId, h as applySableColorMode, i as applySableTheme, j as buildThemeManifestById, k as defaultThemeId, l as featuredThemeManifests, m as getThemeManifest, n as isKnownThemeId, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from '../theme-provider-CGeiusgu.js';
 export { atelierTheme } from './atelier/index.js';
-export { baseTheme } from './base/index.js';
 export { default as emberTheme } from './ember/index.js';
 export { default as meridianTheme } from './meridian/index.js';
 export { default as poppyTheme } from './poppy/index.js';
 export { default as prismTheme } from './prism/index.js';
+export { default as sableTheme } from './sable/index.js';
 export { default as verdantTheme } from './verdant/index.js';
 import 'react';
-import '../_contract-BlKMR4eX.js';
+import '../_contract-Cn3lUpih.js';

package/dist/themes/index.js

@@ -1,8 +1,8 @@
-export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, buildThemeManifestById, defaultThemeId, featuredThemeManifests, getThemeManifest, isKnownThemeId, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from '../chunk-MXJX3NZI.js';
+export { DEFAULT_THEME_ID, SABLE_COLOR_STORAGE_KEY, SABLE_THEME_ATTRIBUTE, SABLE_THEME_STORAGE_KEY, SableThemeProvider, applySableColorMode, applySableTheme, buildThemeManifestById, defaultThemeId, featuredThemeManifests, getThemeManifest, isKnownThemeId, isThemeId, themeIds, themeManifestById, themeManifests, useSableTheme } from '../chunk-EFLC4NA3.js';
 export { prismTheme } from '../chunk-7MG4SHYX.js';
 export { verdantTheme } from '../chunk-KO3NAEBF.js';
 export { emberTheme } from '../chunk-L4IEIQQA.js';
-export { baseTheme } from '../chunk-EP55KSYA.js';
+export { sableTheme } from '../chunk-EHH4MHO6.js';
 export { poppyTheme } from '../chunk-ADLLDWLW.js';
 export { meridianTheme } from '../chunk-K7RUHUGC.js';
-export { atelierTheme } from '../chunk-YXBOYWBN.js';
+export { atelierTheme } from '../chunk-C4Z3CF54.js';

package/dist/themes/meridian/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /**
  * Meridian — a Sable theme. Concrete token values live in

package/dist/themes/poppy/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const poppyTheme: ThemeManifest;

package/dist/themes/poppy/poppy.css

@@ -122,7 +122,7 @@
 	--theme-button-radius: 12px;
 	--button-radius: var(--theme-button-radius);
 	/* Hard offsets the whole way up. Only sm and md were declared, so the
-	   default, lg and xl steps fell through to Base's soft blurs and one ladder
+	   default, lg and xl steps fell through to the Sable theme's soft blurs and one ladder
 	   spoke two shadow languages. Offset doubles roughly per step. */
 	--theme-shadow-sm: 3px 3px 0 oklch(32% 0.05 320 / 0.12);
 	--theme-shadow: 4px 4px 0 oklch(32% 0.05 320 / 0.13);

package/dist/themes/prism/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /** Original Sable preset; no third-party artwork or reference-site code. */
 declare const prismTheme: ThemeManifest;

package/dist/themes/sable/index.d.ts

@@ -0,0 +1,9 @@
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
+
+/**
+ * Sable — the default theme. Concrete token values live in
+ * `sable.css`; this manifest is the typed, machine-readable description.
+ */
+declare const sableTheme: ThemeManifest;
+
+export { sableTheme as default, sableTheme };

package/dist/themes/sable/index.js

@@ -0,0 +1 @@
+export { sable_default as default, sableTheme } from '../../chunk-EHH4MHO6.js';

package/dist/themes/{base/base.css → sable/sable.css}

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   Base — the default Sable theme.
+   Sable — the default theme.
 
    Dark-by-default, content-first, fluid product aesthetic. Palette authored in
    OKLCH (locked hue per ramp, perceptually-even lightness, sRGB-capped chroma).
@@ -14,7 +14,7 @@
    ========================================================================== */
 
 :root,
-[data-sable-theme="base"] {
+[data-sable-theme="sable"] {
 	/* Chart series colours — a categorical palette validated for colour-blind
 	   separation (adjacent pairs), a normal-vision floor, a lightness band and a
 	   chroma floor against this theme's surfaces. Charts take them in order
@@ -319,7 +319,7 @@
 	   font size. The docs app runs a 14px responsive root, so `56rem` rendered
 	   784px while claiming 896px and `80rem` rendered 1120px while claiming
 	   1280px — the default theme silently 12.5% under its own spec, in its own
-	   primary consumer. Every generated theme already declares px; Base was
+	   primary consumer. Every generated theme already declares px; Sable was
 	   the only one that did not, which is the worst possible one to get wrong.
 	   The values below are DESIGN.md's table verbatim. */
 	--region-form: 480px; /* narrow single-col forms, auth, dialogs */
@@ -382,11 +382,11 @@
    Semantic tokens — dark mode (the brand default)
    ========================================================================== */
 .dark,
-.dark[data-sable-theme="base"],
-[data-sable-theme="base"].dark,
+.dark[data-sable-theme="sable"],
+[data-sable-theme="sable"].dark,
 /* A preset-scoped subtree inside a dark page follows the page into dark mode;
    add `.light` to that subtree to pin it light. */
-.dark [data-sable-theme="base"]:not(.light) {
+.dark [data-sable-theme="sable"]:not(.light) {
 	/* The same eight hues, stepped for the dark band (L 0.48–0.67, >= 3:1 on
 	   the dark surfaces) and validated as a set — not a lightness flip. */
 	--chart-1: oklch(62.21% 0.1612 255.05); /* #3987e5 */

package/dist/themes/verdant/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-BlKMR4eX.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /**
  * Verdant — a Sable theme. Concrete token values live in