@sableui/react 0.3.1 → 0.4.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { ClassValue } from 'clsx';
 import { C as ComponentMeta } from './meta-CcE_SeFu.js';
 export { A as AnatomyMeta, a as BestPracticeMeta, E as ExampleMeta, M as MotionMeta, b as MotionSlot, c as PropMeta, R as RelatedMeta, S as SubcomponentMeta, U as UsageMeta } from './meta-CcE_SeFu.js';
-import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-o3tUc8Ig.js';
-export { D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, R as RADIUS_TOKENS, d as RadiusToken, S as SEMANTIC_TOKENS, e as SemanticToken, f as TYPE_OVERLINE_TOKENS, g as TYPE_REFINEMENT_TOKENS, h as TYPE_SCALE_TOKENS, i as TYPE_UI_TOKENS, j as TypeOverlineToken, k as TypeRefinementToken, l as TypeScaleToken, m as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, n as WorkspaceSurfaceToken } from './_contract-o3tUc8Ig.js';
-import { T as ThemeId } from './theme-provider-BE-KqUG-.js';
-export { 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, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-BE-KqUG-.js';
+import { T as ThemeManifest, a as ThemeMode$1 } from './_contract-Cn3lUpih.js';
+export { D as DENSITY_TOKENS, b as DensityToken, M as MOTION_TOKENS, c as MotionToken, R as RADIUS_TOKENS, d as RadiusToken, S as SEMANTIC_TOKENS, e as SemanticToken, f as TYPE_OVERLINE_TOKENS, g as TYPE_REFINEMENT_TOKENS, h as TYPE_SCALE_TOKENS, i as TYPE_UI_TOKENS, j as TypeOverlineToken, k as TypeRefinementToken, l as TypeScaleToken, m as TypeUiToken, W as WORKSPACE_SURFACE_TOKENS, n as WorkspaceSurfaceToken } from './_contract-Cn3lUpih.js';
+import { T as ThemeId } from './theme-provider-CGeiusgu.js';
+export { 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, h as applySableColorMode, i as applySableTheme, k as defaultThemeId, m as getThemeManifest, o as isThemeId, t as themeIds, p as themeManifestById, q as themeManifests, u as useSableTheme } from './theme-provider-CGeiusgu.js';
 export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, CenterProps, Col, ColProps, Columns, ColumnsProps, Grid, GridOverlay, GridOverlayProps, GridProps, Page, PageProps, Region, RegionMax, RegionProps, Responsive, Row, RowProps, SafeArea, SafeAreaProps, Spacer, SpacerProps, SplitPane, SplitPaneProps, Stack, StackProps } from './layout/index.js';
 export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
 export { reiconIconSet as fallbackIconSet, reiconIconNames, reiconIconSet } from './icon-sets/reicon.js';
@@ -348,7 +348,7 @@ declare namespace ViewTransitionName {
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "floating" | "on-color" | "on-color-outline" | "on-color-ghost" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "floating" | "field" | "on-color" | "on-color-outline" | "on-color-ghost" | null | undefined;
     size?: "icon" | "sm" | "md" | "xs" | "cta" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 
@@ -1819,7 +1819,7 @@ type ChartTone = "edition" | "collectible" | "standard" | "info" | "warning" | "
 declare const CHART_SERIES_COUNT = 8;
 /**
  * The colour of series `index` when it names none: the theme's chart palette,
- * in order. The palette (`--chart-1` … `--chart-8`, defined by the Base theme
+ * in order. The palette (`--chart-1` … `--chart-8`, defined by the Sable theme
  * and inherited by every other) is validated for colour-blind separation of
  * neighbours, a normal-vision floor, a lightness band and a chroma floor, in
  * light and dark. Past eight series, fold the rest into "Other".
@@ -2485,7 +2485,7 @@ type TriggerProps$2 = Omit<ComponentProps<typeof Select$1.Trigger>, "className"
      * The surface is the part a `h-(--control-xs)` override could never reach,
      * and it is what the eye actually catches. A property grid's fields are
      * inset, not raised: `ScrubField` — the control immediately beside this one
-     * on the same rung — is `bg-canvas` with no border, and a bordered `bg-card`
+     * on the same rung — is `bg-panel-field` with no border, and a bordered `bg-card`
      * select beside it reads as a different KIND of control rather than the same
      * control holding a word. Consumers that overrode the height got an
      * md-register 8px radius on a 24px box and a raised card among inset fields;
@@ -7499,6 +7499,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.3.1";
+declare const SABLE_UI_VERSION: "0.4.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 };

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-X276MF2W.js';
+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-6LCIBMMG.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-WCFLQVK5.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-WCFLQVK5.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-CKNM7KSB.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-CKNM7KSB.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 { 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 { 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';
@@ -7003,7 +7003,7 @@ var scrubFieldMeta = {
     "Every scrub gesture is reachable from the keyboard: ArrowUp/ArrowDown step by `step`, Shift+Arrow by ten steps.",
     "Enter commits, Escape reverts to the last committed value, and blur commits \u2014 so a partial edit is never silently kept."
   ],
-  tokensUsed: ["foreground", "muted-foreground", "ring", "canvas", "panel-raised"],
+  tokensUsed: ["foreground", "muted-foreground", "ring", "panel-field", "panel-field-hover"],
   examples: [
     {
       label: "Opacity with a glyph handle",
@@ -9358,7 +9358,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 +11260,6 @@ var carouselMeta = {
 };
 
 // src/index.ts
-var SABLE_UI_VERSION = "0.3.1";
+var SABLE_UI_VERSION = "0.4.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 };

package/dist/patterns/index.js

@@ -1,5 +1,5 @@
-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-6LCIBMMG.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-CKNM7KSB.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-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 { Region, Stack, Row, Grid, Page, Columns, Col, AspectBox } from '../chunk-3IWZYBGH.js';
 import '../chunk-SRQWQUTW.js';
 import { Icon } from '../chunk-NGBDP3BM.js';

package/dist/presets/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../_contract-o3tUc8Ig.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

@@ -1,4 +1,4 @@
-import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS } from '../chunk-X276MF2W.js';
+import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS } from '../chunk-OQACYT2D.js';
 
 // src/presets/index.ts
 var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
@@ -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);
@@ -133,6 +133,8 @@
 	--color-panel: var(--panel);
 	--color-panel-foreground: var(--panel-foreground);
 	--color-panel-raised: var(--panel-raised);
+	--color-panel-field: var(--panel-field);
+	--color-panel-field-hover: var(--panel-field-hover);
 	--color-hairline: var(--hairline);
 	--color-hairline-strong: var(--hairline-strong);
 }
@@ -166,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
@@ -319,6 +321,14 @@
 	--panel-foreground: var(--theme-panel-foreground, var(--foreground));
 	--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. 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)));
 	--hairline-strong: var(--theme-hairline-strong, color-mix(in oklch, transparent 86%, var(--foreground)));
@@ -1468,7 +1478,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-BE-KqUG-.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-o3tUc8Ig.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-o3tUc8Ig.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-o3tUc8Ig.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-BE-KqUG-.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-o3tUc8Ig.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-o3tUc8Ig.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-o3tUc8Ig.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-o3tUc8Ig.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-o3tUc8Ig.js';
+import { T as ThemeManifest } from '../../_contract-Cn3lUpih.js';
 
 /**
  * Verdant — a Sable theme. Concrete token values live in

package/dist/themes.css

@@ -6,8 +6,8 @@
      @import "@sableui/react/themes.css";   ← this file
 
    For an app that offers the bundled set as user-selectable themes (a
-   `<ThemeSelector>` over Base / Meridian / Prism / Verdant / Ember / Poppy). `styles.css`
-   carries Base alone, since the alternates are `[data-sable-theme]`-scoped
+   `<ThemeSelector>` over Sable / Meridian / Prism / Verdant / Ember / Poppy). `styles.css`
+   carries the Sable theme alone, since the alternates are `[data-sable-theme]`-scoped
    and dead weight in the overwhelmingly common single-theme app.
 
    Needing exactly one alternate? Import just that one instead — this file is a
@@ -15,7 +15,7 @@
 
      @import "@sableui/react/theme/prism.css";
 
-   Base is NOT here: it ships in `styles.css` and must, since it declares
+   The Sable theme is NOT here: it ships in `styles.css` and must, since it declares
    the layout floor (`--page-inset`, `--region-*`, `--rhythm-unit`) on a bare
    `:root` that every other theme inherits.
    ========================================================================== */

package/llms/components/button.md

@@ -35,7 +35,7 @@ Use Button when the user commits an action, submits a form, opens UI, or confirm
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| variant | "primary" \| "secondary" \| "ghost" \| "outline" \| "destructive" \| "link" \| "floating" \| "on-color" \| "on-color-outline" \| "on-color-ghost" | "primary" | Visual emphasis tier. One primary per screen. The on-color tiers are for buttons ON a coloured fill: they paint with the inherited text colour (the fill's ink) — on-color is solid (ink background, fill-coloured label via the optional --on-color-fill var, else black/white), on-color-outline and on-color-ghost are transparent with an ink label. Never use them on page or card surfaces. floating is for a control that sits OVER content (carousel arrows, a marquee pause, a jump-to-latest over a conversation): its own edge, lift and translucent popover fill, so it reads on arbitrary content beneath. |
+| variant | "primary" \| "secondary" \| "ghost" \| "outline" \| "destructive" \| "link" \| "floating" \| "field" \| "on-color" \| "on-color-outline" \| "on-color-ghost" | "primary" | Visual emphasis tier. One primary per screen. The on-color tiers are for buttons ON a coloured fill: they paint with the inherited text colour (the fill's ink) — on-color is solid (ink background, fill-coloured label via the optional --on-color-fill var, else black/white), on-color-outline and on-color-ghost are transparent with an ink label. Never use them on page or card surfaces. floating is for a control that sits OVER content (carousel arrows, a marquee pause, a jump-to-latest over a conversation): its own edge, lift and translucent popover fill, so it reads on arbitrary content beneath. field is for a button docked in a workspace panel among xs fields: the inset panel-field fill and the field's corner, so a picker trigger or an add action reads as one of the row's controls; pair it with size xs or icon-xs. |
 | size | "xs" \| "sm" \| "md" \| "cta" \| "icon" \| "icon-sm" \| "icon-xs" | "md" | Reads the density ladder, so every value differs by register: page 28/32/40/44, workspace 24/28/32/36. xs and icon-xs were added in 0.31.0 for the workspace control floor and are the sizes tool chrome wants; md is the default everywhere. icon/icon-sm/icon-xs are square. |
 | render | ReactElement \| (props, state) => ReactElement | — | Compose with another element/component through the Base UI render prop. |
 | loading | boolean | false | Disable the button and show a leading Spinner while an action is in flight. Sets aria-busy; a native button is disabled, a render element (e.g. an <a>) gets aria-disabled. |
@@ -46,12 +46,12 @@ Use Button when the user commits an action, submits a form, opens UI, or confirm
 
 ## Variants
 
-- **variant**: primary, secondary, ghost, outline, destructive, link, floating, on-color, on-color-outline, on-color-ghost
+- **variant**: primary, secondary, ghost, outline, destructive, link, floating, field, on-color, on-color-outline, on-color-ghost
 - **size**: xs, sm, md, cta, icon, icon-sm, icon-xs
 
 ## Tokens used
 
-`primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `input`, `destructive`, `destructive-foreground`, `ring`
+`primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `accent`, `accent-foreground`, `input`, `destructive`, `destructive-foreground`, `ring`, `panel-field`, `panel-field-hover`, `panel-foreground`
 
 ## Motion
 
@@ -182,6 +182,18 @@ import { Button, Icon, NotificationBadge } from "@sableui/react"
 <Button size="icon" variant="ghost" aria-label="Notifications" badge={<NotificationBadge dot />}><Icon name="bell" /></Button>
 ```
 
+### Field button in a panel row
+
+```tsx
+import { Button, Icon, PanelSection, PropertyRow } from "@sableui/react"
+
+<PanelSection title="Text">
+  <PropertyRow label="Font">
+    <Button variant="field" size="xs" className="w-full justify-between" iconEnd={<Icon name="chevron-down" />}>Figtree</Button>
+  </PropertyRow>
+</PanelSection>
+```
+
 ### On a coloured band
 
 ```tsx

package/llms/components/input.md

@@ -33,7 +33,7 @@ Use Input for short freeform text, search, email, password, file, and native inp
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| size | "md" \| "xs" | "md" | md is the form field. xs is the dense inset field of a tool panel (an inset canvas fill, no outline, tight padding) — the same ladder as Select and Combobox. Use it instead of overriding the height with className. |
+| size | "md" \| "xs" | "md" | md is the form field. xs is the dense inset field of a tool panel (an inset panel-field fill, no outline, tight padding) — the same ladder as Select and Combobox. Use it instead of overriding the height with className. |
 | type | string | "text" | Native input type (text, email, password, search, number, file, …). type="file" themes the native selector button via file: token utilities. |
 | disabled | boolean | false | Dims the control and blocks pointer interaction. |
 | aria-invalid | boolean | — | Surfaces the destructive border + ring. Base UI form fields set this automatically. |

package/llms/components/scrub-field.md

@@ -40,7 +40,7 @@ Use ScrubField for numeric properties in tool chrome — an inspector, a propert
 
 ## Tokens used
 
-`foreground`, `muted-foreground`, `ring`, `canvas`, `panel-raised`
+`foreground`, `muted-foreground`, `ring`, `panel-field`, `panel-field-hover`
 
 ## Accessibility
 

package/llms/components/select.md

@@ -33,7 +33,7 @@ Use Select when users choose one value from a known, finite set. Use Combobox fo
 
 | Name | Type | Description |
 | --- | --- | --- |
-| SelectTrigger | Base UI Trigger props + placeholder?: ReactNode + size?: "md" \| "xs" + className | The button. Composes Trigger + Value + a chevron Icon that flips on open (data-[popup-open]). `size="xs"` is the property-grid rung — height, padding, radius AND surface move together, which is why it is a prop and not a className: the xs trigger is an inset `bg-canvas` field with no border, matching ScrubField on the same row. A consumer overriding only the height gets an md-register 8px radius on a 24px box and a raised card sitting among inset fields; one inspector panel had eleven of those, and both tells are visible at a glance. |
+| SelectTrigger | Base UI Trigger props + placeholder?: ReactNode + size?: "md" \| "xs" + className | The button. Composes Trigger + Value + a chevron Icon that flips on open (data-[popup-open]). `size="xs"` is the property-grid rung — height, padding, radius AND surface move together, which is why it is a prop and not a className: the xs trigger is an inset `bg-panel-field` field with no border, matching ScrubField on the same row. A consumer overriding only the height gets an md-register 8px radius on a 24px box and a raised card sitting among inset fields; one inspector panel had eleven of those, and both tells are visible at a glance. |
 | SelectContent | Base UI Popup props + side, align, sideOffset + className | Portal + Positioner + Popup + List. side="bottom", align="start", sideOffset=6 by default; matches trigger width. |
 | SelectItem | { value: string; disabled?: boolean; label?: string } + className | An option. Composes Item + ItemText + a check ItemIndicator for the selected row. String children double as the item's `label`, so the closed trigger shows the display text — pass `label` explicitly only when children are richer than a string. |
 | SelectGroup | Base UI Group props + className | Optional grouping of related options. |

package/llms/components/theme-selector.md

@@ -62,7 +62,7 @@ const { themeId, setThemeId, themes, mode } = useSableTheme()
 ```tsx
 import { ThemeSelector, type ThemeId } from "@sableui/react"
 
-const [themeId, setThemeId] = useState<ThemeId>("base")
+const [themeId, setThemeId] = useState<ThemeId>("sable")
 <ThemeSelector value={themeId} onValueChange={setThemeId} />
 ```
 

package/llms/reference/token-intent.md

@@ -306,7 +306,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
 - **`type-mono-sm-tracking`** — The monospace family: mono-xl through mono-sm, plus mono-caption. *Use for:* Code, identifiers, hashes, keyboard keys, and any figure where digits must align in a column.
     - **Not** the sans tiers for numeric data. Proportional digits make a column of numbers ragged; that is what `text-ui-num` solves in chrome and mono solves on a page.
 
-### derived (8)
+### derived (10)
 
 - **`canvas`** — The WORK surface — the artboard, the document being edited. *Use for:* Behind the thing the tool operates on. `WorkspaceCanvas` uses it.
     - **Not** `background`. The thing being edited is not the page behind the UI, and collapsing the two makes the document indistinguishable from its chrome.
@@ -318,6 +318,10 @@ Which token to reach for, and what it is most often confused with. Generated fro
     - **Not** `foreground`. That is the ink for `background` only; on any other surface it is a contrast gamble that happens to pass in the default theme and fails in another.
 - **`panel-raised`** — One step up from `panel`: a selected row, a hover fill, a nested well. *Use for:* Tree row selection, hovered panel rows, and the light square of a checkerboard.
     - **Not** `accent`. In a workspace the tonal band is only a few units wide; `accent` is a page-register step and reads as a shout in chrome.
+- **`panel-field`** — The inset fill of a compact control docked in a panel. *Use for:* The `size="xs"` field rung (Input, SelectTrigger, ScrubField share it) and `<Button variant="field">`. A panel control of your own that should sit among those fields.
+    - **Not** `canvas`. `canvas` names the work surface, and its step off the panel is too faint to read as a field in dark mode. This one is mixed from the panel itself, so it follows a theme that retunes the panel. Tune it with `--theme-panel-field`.
+- **`panel-field-hover`** — The hover step of a `panel-field` control. *Use for:* `hover:bg-panel-field-hover` on anything filled with `panel-field`.
+    - **Not** `hover:bg-panel-raised`. A fixed surface token as a hover is what the surface-hover lint rejects; this one is defined against the panel field it steps from.
 - **`hairline`** — The 1px structural line that carries all separation in tool chrome. *Use for:* Between panel sections, under a toolbar, above a status bar.
     - **Not** a bigger tonal step. This is one of the two rules the workspace register deliberately reverses: on a page prefer space or tone over a line, in chrome the hairline *is* the structure.
 - **`hairline-strong`** — A hairline that must be seen — an input edge, a swatch ring. *Use for:* Bounding a control whose fill is arbitrary (a colour swatch) or user content.