@cueplusplus/ui 0.15.0 → 0.17.0

package/dist/forms/slider.js

@@ -1,5 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
@@ -40,7 +44,7 @@ const Slider$1 = React.forwardRef(function Slider$2({ className, onCommit, label
 		className: cn("flex w-full flex-col gap-(--cue-space-2)", className),
 		...elementProps,
 		children: [label === void 0 && !showValue ? null : /* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase",
+			className: cn("flex items-baseline justify-between gap-(--cue-space-3) text-(length:--cue-text-label) text-fg-muted", LABEL_FACE, LABEL_TRACKING_TIGHT, LABEL_CASE),
 			children: [label === void 0 ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsx(Slider.Label, { children: label }), showValue ? /* @__PURE__ */ jsx(Slider.Value, { className: "tabular-nums text-fg normal-case tracking-normal" }) : null]
 		}), /* @__PURE__ */ jsx(Slider.Control, {
 			"data-slot": "slider-control",
@@ -55,7 +59,7 @@ const Slider$1 = React.forwardRef(function Slider$2({ className, onCommit, label
 					index,
 					"data-slot": "slider-thumb",
 					"aria-label": ariaLabel === void 0 ? void 0 : count > 1 ? `${ariaLabel} ${index + 1}` : ariaLabel,
-					className: "size-[0.5rem] rounded-full bg-accent outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent data-[disabled]:opacity-40"
+					className: `size-[0.5rem] rounded-full bg-accent outline-none ${FOCUS_RING_OFFSET_2} data-[disabled]:opacity-40`
 				}, index))]
 			})
 		})]

package/dist/forms/switch.js

@@ -1,5 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_INK } from "../system/_style-label-ink.js";
+import { CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
@@ -50,7 +54,7 @@ const Switch$1 = React.forwardRef(function Switch$2({ className, label, size = "
 		ref,
 		"data-slot": "switch",
 		"aria-labelledby": hasLabel ? labelId : void 0,
-		className: cn("relative inline-flex shrink-0 items-center rounded-full border border-border bg-surface-3 p-0 outline-none transition-colors duration-150 motion-reduce:transition-none", geometry.track, "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
+		className: cn("relative inline-flex shrink-0 items-center rounded-full border border-border bg-surface-3 p-0 outline-none transition-colors duration-150 motion-reduce:transition-none", geometry.track, "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", `${FOCUS_RING}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Switch.Thumb, {
 			"data-slot": "switch-thumb",
@@ -60,7 +64,7 @@ const Switch$1 = React.forwardRef(function Switch$2({ className, label, size = "
 	if (!hasLabel) return control;
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "switch-label",
-		className: "inline-flex cursor-pointer items-center gap-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40",
+		className: cn("inline-flex cursor-pointer items-center gap-(--cue-space-3) text-(length:--cue-text-ui) select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40", LABEL_INK, CONTROL_LABEL_WEIGHT, CONTROL_FACE),
 		children: [control, /* @__PURE__ */ jsx("span", {
 			id: labelId,
 			children: label

package/dist/forms/tags-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/tags-input.d.ts
 interface TagsInputProps {

package/dist/forms/textarea.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { controlSurface } from "./_chassis.js";
+import { TEXTAREA_LEADING, TEXTAREA_PAD_Y } from "../system/_style-textarea.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
@@ -29,7 +30,7 @@ const Textarea = React.forwardRef(function Textarea({ className, rows = 3, ...el
 			rows
 		}),
 		"data-slot": "textarea",
-		className: cn(controlSurface, "resize-y px-(--cue-space-4) py-(--cue-space-3) text-(length:--cue-text-ui) leading-(--cue-leading-ui)", className),
+		className: cn(controlSurface, `resize-y px-(--cue-space-4) ${TEXTAREA_PAD_Y} text-(length:--cue-text-ui) ${TEXTAREA_LEADING}`, className),
 		...controlProps
 	});
 });

package/dist/forms/toggle-group.d.ts

@@ -1,4 +1,4 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
 import * as React from "react";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/forms/toggle-group.d.ts

package/dist/forms/toggle.d.ts

@@ -1,4 +1,4 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
 import * as React from "react";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/forms/toggle.d.ts

package/dist/forms/toggle.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { cva } from "../lib/cva.js";
 import { ToggleGroupSizeContext } from "./toggle-group.js";
 import * as React from "react";
@@ -12,7 +14,7 @@ import { Toggle } from "@base-ui/react/toggle";
 * the highlighted menu row. A solid accent block on a 22px control reads as a
 * second, louder button and drowns the labels beside it.
 */
-const toggleVariants = cva("inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-(--radius-control) border border-transparent bg-transparent font-mono font-medium text-fg-muted transition-colors duration-150 outline-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent data-[pressed]:bg-accent-soft data-[pressed]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40", {
+const toggleVariants = cva(`inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control border border-transparent bg-transparent ${CONTROL_FACE} font-medium text-fg-muted transition-colors duration-150 outline-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING} data-[pressed]:bg-accent-soft data-[pressed]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, {
 	variants: {
 		size: {
 			sm: "text-(length:--cue-text-label)",

package/dist/index.d.ts

@@ -34,7 +34,8 @@ import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
 import "./chrome/index.js";
-import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { FormControlSize } from "./forms/_chassis-size.js";
+import { ControlVariantProps, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
 import { TokenOverrides, isSafeTokenValue } from "./system/overrides.js";
 import { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.js";
 import { Autocomplete, AutocompleteProps } from "./forms/autocomplete.js";
@@ -134,5 +135,5 @@ import { ThemeRegistry } from "./system/vocabulary.js";
 import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-import { DEFAULT_STYLE_SET, DensityEntry, DensityLevel, FontEntry, FontName, Mode, STYLE_SETS, StyleSet, ThemeManifest, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+import { DEFAULT_PAINT, DEFAULT_STYLE_SET, DensityEntry, DensityLevel, FontEntry, FontName, Mode, PAINTS, Paint, STYLE_SETS, StyleSet, ThemeManifest, ThemeName } from "./system/index.js";
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, CodeBlock, type CodeBlockProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Frames, type FramesHeight, type FramesItemProps, type FramesLayout, type FramesRootProps, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, type Paint, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, STYLE_SETS, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, type StyleSet, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/index.js

@@ -120,5 +120,5 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-import { DEFAULT_STYLE_SET, STYLE_SETS } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Frames, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };
+import { DEFAULT_PAINT, DEFAULT_STYLE_SET, PAINTS, STYLE_SETS } from "./system/index.js";
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Band, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, CodeBlock, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_PAINT, DEFAULT_STORAGE_KEY, DEFAULT_STYLE_SET, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Frames, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Inspector, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PAINTS, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Preview, Progress, Radio, RadioGroup, Rating, Row, STYLE_SETS, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/instruments/_data-row.js

@@ -1,3 +1,4 @@
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
 //#region src/instruments/_data-row.ts
 /**
@@ -46,7 +47,7 @@ const dataRowVariants = cva([
 			false: "px-(--cue-pad-row-x)"
 		},
 		interactive: {
-			true: "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent",
+			true: `cursor-pointer outline-none hover:bg-(--cue-row-hover) ${FOCUS_RING_INSET_2}`,
 			false: ""
 		}
 	},

package/dist/instruments/app-window-frame.js

@@ -43,7 +43,7 @@ const AppWindowFrame = React.forwardRef(function AppWindowFrame({ className, tit
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "app-window-frame",
-		className: cn("flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-bg", elevated ? "shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)]" : null, className),
+		className: cn("flex min-w-0 flex-col overflow-hidden rounded-surface border border-border bg-bg", elevated ? "shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)]" : null, className),
 		...elementProps,
 		children: [
 			/* @__PURE__ */ jsx(TitleBar, {

package/dist/instruments/code-block.js

@@ -1,6 +1,12 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE_MICRO } from "../system/_style-label-size.js";
 import { Panel } from "../chrome/panel.js";
 import { CopyButton } from "./copy-button.js";
+import { CODE_WEIGHT } from "../system/_style-code.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/code-block.tsx
@@ -159,12 +165,12 @@ const CodeBlock = React.forwardRef(function CodeBlock({ code, label, language =
 			className: "flex items-center justify-between gap-(--cue-space-4) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "code-block-label",
-				className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: cn(LABEL_SIZE_MICRO, LABEL_INK_SUBTLE, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 				children: label ?? language
 			}), /* @__PURE__ */ jsx(CopyButton, { value: code })]
 		}), /* @__PURE__ */ jsx("pre", {
 			"data-language": language,
-			className: "overflow-x-auto p-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg",
+			className: `overflow-x-auto p-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) ${CODE_WEIGHT} text-fg`,
 			children: /* @__PURE__ */ jsx("code", { children: body })
 		})]
 	});

package/dist/instruments/group-bar.js

@@ -88,7 +88,7 @@ const GroupBar = React.forwardRef(function GroupBar({ className, items, height =
 			role: "img",
 			"aria-label": label === void 0 ? summary : `${label}: ${summary}`,
 			"data-slot": "group-bar-track",
-			className: "flex w-full gap-px overflow-hidden rounded-(--radius-control) bg-border",
+			className: "flex w-full gap-px overflow-hidden rounded-control bg-border",
 			style: { height: toRem(height) },
 			children: present.map((item) => /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",

package/dist/instruments/ledger.js

@@ -1,4 +1,8 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { headingTag } from "./_ledger.js";
 import { LedgerDisclosure } from "./_ledger-disclosure.js";
 import * as React from "react";
@@ -13,7 +17,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * be said out loud, because `<h2>` and `<h3>` come bold by default and a bold
 * micro-label in a dense list reads as a second kind of emphasis.
 */
-const LEDGER_LABEL = "font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) text-fg-subtle uppercase";
+const LEDGER_LABEL = `${LABEL_FACE} text-(length:--cue-text-label) font-normal ${LABEL_TRACKING} text-fg-subtle ${LABEL_CASE}`;
 /**
 * The disclosure button a collapsible heading holds.
 *
@@ -29,7 +33,7 @@ const LEDGER_LABEL = "font-mono text-(length:--cue-text-label) font-normal track
 * reason `_data-row.ts` gives: these headings dock at the top of clipped panes,
 * where an outset ring on the first one is cut off by the pane's own rim.
 */
-const LEDGER_TOGGLE = "flex w-full min-w-0 cursor-pointer items-baseline gap-(--cue-space-2) text-left outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+const LEDGER_TOGGLE = `flex w-full min-w-0 cursor-pointer items-baseline gap-(--cue-space-2) text-left outline-none ${FOCUS_RING_INSET_2}`;
 /**
 * A grouped run of dense rows under sticky headings: the ledger idiom.
 *

package/dist/instruments/log-viewer.js

@@ -1,7 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING, FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { Chip } from "../primitives/chip.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { toRem } from "./_rem.js";
 import { useControlHeight } from "../system/use-density.js";
 import { ansiSpans } from "./_ansi.js";
@@ -130,7 +132,7 @@ const LogViewer = React.forwardRef(function LogViewer({ className, lines, follow
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "log-viewer",
-		className: cn("relative flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-sunken", className),
+		className: cn("relative flex min-w-0 flex-col overflow-hidden rounded-surface border border-border bg-sunken", className),
 		style: { height: toRem(height) },
 		...elementProps,
 		children: [
@@ -157,7 +159,7 @@ const LogViewer = React.forwardRef(function LogViewer({ className, lines, follow
 				"aria-label": ariaLabel,
 				tabIndex: 0,
 				"data-slot": "log-viewer-scroller",
-				className: "min-h-0 flex-1 overflow-auto font-mono text-(length:--cue-text-label) leading-none outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent",
+				className: `min-h-0 flex-1 overflow-auto font-mono text-(length:--cue-text-label) leading-none outline-none ${FOCUS_RING_INSET_2}`,
 				onScroll,
 				children: visible.length === 0 ? /* @__PURE__ */ jsx("div", {
 					"data-slot": "log-viewer-empty",
@@ -204,7 +206,7 @@ const LogViewer = React.forwardRef(function LogViewer({ className, lines, follow
 			pending > 0 ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-slot": "log-viewer-jump",
-				className: "absolute bottom-(--cue-space-4) left-1/2 -translate-x-1/2 cursor-pointer rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+				className: `absolute bottom-(--cue-space-4) left-1/2 -translate-x-1/2 cursor-pointer rounded-control border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg ${ELEVATION_2} outline-none hover:border-accent hover:text-accent ${FOCUS_RING}`,
 				onClick: jumpToBottom,
 				children: newLinesLabel(pending)
 			}) : null

package/dist/instruments/progress.js

@@ -1,4 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { toRem } from "./_rem.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -54,11 +57,11 @@ const Progress$1 = React.forwardRef(function Progress$2({ className, trackClassN
 		...rootProps,
 		children: [hasHeader ? /* @__PURE__ */ jsxs("div", {
 			"data-slot": "progress-header",
-			className: "flex items-baseline gap-(--cue-space-3) font-mono text-(length:--cue-text-label)",
+			className: cn("flex items-baseline gap-(--cue-space-3) text-(length:--cue-text-label)", LABEL_FACE),
 			children: [label === void 0 ? null : /* @__PURE__ */ jsx(Progress.Label, {
 				id: namedByCaption ? captionId : void 0,
 				"data-slot": "progress-label",
-				className: "truncate tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: cn("truncate text-fg-subtle", LABEL_TRACKING, LABEL_CASE),
 				children: label
 			}), showValue ? /* @__PURE__ */ jsx(Progress.Value, {
 				"data-slot": "progress-value",

package/dist/instruments/seam-grid.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { SEAM_INK, SEAM_RIM } from "../system/_style-seam.js";
 import { toRem } from "./_rem.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,14 +12,15 @@ const GROUNDS = {
 	"surface-3": "bg-surface-3"
 };
 /**
-* The seam recipe itself: a 1px gap over the border colour.
+* The seam recipe itself: a 1px gap over the seam's ink — the border colour,
+* unless a style set names a lighter one (`SEAM_INK` says why).
 *
 * No borders anywhere. Two adjacent bordered cells stack into a 2px rule and
 * the grid's outer edge gets a rim nobody asked for; a gap over a coloured
 * ground gives exactly one hairline between every pair of neighbours and
 * nothing at all around the outside.
 */
-const SEAM_CONTAINER = "gap-px bg-border";
+const SEAM_CONTAINER = `gap-px ${SEAM_INK}`;
 /**
 * The seam idiom as a component: cells separated by hairlines, no borders.
 *
@@ -45,7 +47,7 @@ const SeamGrid = React.forwardRef(function SeamGrid({ className, columns, min, b
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-slot": "seam-grid",
-		className: cn("grid", SEAM_CONTAINER, bordered ? "overflow-hidden rounded-(--radius-surface) border border-border" : null, className),
+		className: cn("grid", SEAM_CONTAINER, bordered ? `overflow-hidden rounded-surface border ${SEAM_RIM}` : null, className),
 		style: {
 			...gridTemplateColumns === void 0 ? null : { gridTemplateColumns },
 			...style

package/dist/instruments/stat.js

@@ -1,4 +1,11 @@
 import { cn } from "../lib/cn.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE_MICRO } from "../system/_style-label-size.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/stat.tsx
@@ -39,17 +46,17 @@ const Stat = React.forwardRef(function Stat({ className, label, value, detail, t
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-label",
-				className: "truncate font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: cn("truncate", LABEL_SIZE_MICRO, LABEL_INK_SUBTLE, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 				children: label
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-value",
-				className: cn("truncate font-mono text-(length:--cue-text-title) leading-none tabular-nums", VALUE_TONE_CLASSES[tone]),
+				className: cn(`truncate ${DATA_FACE} text-(length:--cue-text-title) leading-none tabular-nums`, VALUE_TONE_CLASSES[tone]),
 				children: value
 			}),
 			detail === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-detail",
-				className: "truncate font-mono text-(length:--cue-text-label) text-fg-muted",
+				className: `truncate ${DATA_FACE} text-(length:--cue-text-label) text-fg-muted`,
 				children: detail
 			})
 		]

package/dist/instruments/table.js

@@ -1,4 +1,16 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT_NORMAL } from "../system/_style-label-weight.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import { BODY_SIZE, BODY_SIZE_LABEL } from "../system/_style-body-size.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
+import { SELECTED_ROW } from "../system/_style-selected.js";
+import { HELP_INK } from "../system/_style-help-ink.js";
+import { ROW_PAD_Y } from "../system/_style-row-pad.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/table.tsx
@@ -16,7 +28,7 @@ const TableScrollRegion = React.forwardRef(function TableScrollRegion({ classNam
 		role: "region",
 		tabIndex: 0,
 		"data-slot": "table-scroll-region",
-		className: cn("overflow-x-auto outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", className)
+		className: cn(`overflow-x-auto outline-none ${FOCUS_RING_INSET_2}`, className)
 	});
 });
 /**
@@ -32,7 +44,7 @@ const TableRoot = React.forwardRef(function TableRoot({ className, ...elementPro
 	return /* @__PURE__ */ jsx("table", {
 		ref,
 		"data-slot": "table",
-		className: cn("w-full border-collapse font-mono text-(length:--cue-text-ui) text-fg", "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
+		className: cn(`w-full border-collapse ${DATA_FACE} ${BODY_SIZE} text-fg`, "[&_[data-numeric]]:text-right [&_[data-numeric]]:tabular-nums", className),
 		...elementProps
 	});
 });
@@ -93,7 +105,7 @@ const TableRow = React.forwardRef(function TableRow({ className, interactive = f
 		ref,
 		"data-slot": "table-row",
 		"data-selected": selected ? "" : void 0,
-		className: cn("group/data-row border-b border-border last:border-b-0 data-[selected]:bg-accent-soft", interactive ? "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent" : null, className),
+		className: cn(`group/data-row border-b border-border last:border-b-0 ${SELECTED_ROW}`, interactive ? `cursor-pointer outline-none hover:bg-(--cue-row-hover) ${FOCUS_RING_INSET_2}` : null, className),
 		...elementProps
 	});
 });
@@ -122,7 +134,7 @@ const TableHead = React.forwardRef(function TableHead({ className, numeric = fal
 		scope,
 		"data-slot": "table-head",
 		"data-numeric": numeric ? "" : void 0,
-		className: cn("border-b border-border bg-surface-1 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
+		className: cn(`border-b border-border bg-surface-1 px-(--cue-pad-row-x) ${ROW_PAD_Y} text-left whitespace-nowrap`, LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT_NORMAL, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
 		...elementProps
 	});
 });
@@ -140,8 +152,14 @@ const headingTag = (level) => `h${level}`;
 * - `text-[length:inherit]` — `<h2>` is `1.5em` and `<h6>` is `0.67em`, so
 *   without this the divider's type would change with the level it was given,
 *   which is a heading level leaking into the visual design.
-* - `font-normal` — headings come bold, and a bold micro-label in a dense list
-*   reads as a second kind of emphasis (the same ruling as `Ledger`'s heading).
+* - `font-[number:inherit]` — headings come bold, and a bold micro-label in a
+*   dense list reads as a second kind of emphasis (the same ruling as
+*   `Ledger`'s heading). The weight is *inherited*, not set: the `<th>` reads
+*   `--cue-style-label-weight` (falling back to `400`), and a label that
+*   declared its own `font-normal` held the group's name at 400 while the cell
+*   and the count beside it moved to a style set's weight — two weights in one
+*   row. Inheriting also lets a caller's `className="font-medium"`, which lands
+*   on the cell, reach the name.
 * - `m-0` — headings carry a block margin that would thicken the divider row.
 *
 * Preflight already does the middle two for consumers who import it, but the
@@ -150,7 +168,7 @@ const headingTag = (level) => `h${level}`;
 * touches them, so they inherit from the `<th>` that owns the recipe, and a
 * second copy of a treatment is exactly how two surfaces drift apart.
 */
-const TABLE_GROUP_LABEL = "m-0 inline text-[length:inherit] font-normal";
+const TABLE_GROUP_LABEL = "m-0 inline text-[length:inherit] font-[number:inherit]";
 /**
 * The canonical console table: hairlines, mono figures, no zebra striping.
 *
@@ -201,7 +219,7 @@ const Table = {
 				colSpan: span,
 				scope: "rowgroup",
 				"data-slot": "table-group-cell",
-				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
+				className: cn(`bg-bg px-(--cue-pad-row-x) ${ROW_PAD_Y} text-left whitespace-nowrap`, LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT_NORMAL, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
 				children: [/* @__PURE__ */ jsx(Label, {
 					"data-slot": "table-group-label",
 					className: TABLE_GROUP_LABEL,
@@ -220,7 +238,7 @@ const Table = {
 			ref,
 			"data-slot": "table-cell",
 			"data-numeric": numeric ? "" : void 0,
-			className: cn("px-(--cue-pad-row-x) py-(--cue-pad-row-y) align-middle", className),
+			className: cn(`px-(--cue-pad-row-x) ${ROW_PAD_Y} align-middle`, className),
 			...elementProps
 		});
 	}),
@@ -228,7 +246,7 @@ const Table = {
 		return /* @__PURE__ */ jsx("caption", {
 			ref,
 			"data-slot": "table-caption",
-			className: cn("caption-bottom pt-(--cue-space-3) text-left font-mono text-(length:--cue-text-label) text-fg-subtle", className),
+			className: cn(`caption-bottom pt-(--cue-space-3) text-left ${BODY_SIZE_LABEL} ${HELP_INK}`, LABEL_FACE, className),
 			...elementProps
 		});
 	})

package/dist/instruments/terminal-frame.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { CopyButton } from "./copy-button.js";
 import { toRem } from "./_rem.js";
 import { mulberry32, usePrefersReducedMotion } from "./_motion.js";
@@ -184,14 +186,14 @@ const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title
 		ref,
 		"data-slot": "terminal-frame",
 		"data-simulating": simulate === void 0 ? void 0 : String(simulating),
-		className: cn("flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-sunken font-mono text-(length:--cue-text-ui) text-fg-muted", className),
+		className: cn("flex min-w-0 flex-col overflow-hidden rounded-surface border border-border bg-sunken font-mono text-(length:--cue-text-ui) text-fg-muted", className),
 		...elementProps,
 		children: [title === void 0 && !copy ? null : /* @__PURE__ */ jsxs("div", {
 			"data-slot": "terminal-frame-bar",
 			className: "flex h-control-md shrink-0 items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-title",
-				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: `min-w-0 truncate ${LABEL_SIZE} tracking-(--cue-tracking-caps) ${LABEL_INK_SUBTLE} uppercase`,
 				children: title
 			}), copy ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-copy",

package/dist/instruments/usage-chart.js

@@ -220,7 +220,7 @@ const UsageChart = React.forwardRef(function UsageChart({ className, points, ton
 			]
 		}), hover === null ? null : /* @__PURE__ */ jsx("div", {
 			"data-slot": "usage-chart-tooltip",
-			className: "pointer-events-none absolute top-0 -translate-x-1/2 rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-3) py-(--cue-space-1) font-mono text-(length:--cue-text-label) tabular-nums text-fg",
+			className: "pointer-events-none absolute top-0 -translate-x-1/2 rounded-control border border-border-overlay bg-surface-2 px-(--cue-space-3) py-(--cue-space-1) font-mono text-(length:--cue-text-label) tabular-nums text-fg",
 			style: { left: `${Math.min(88, Math.max(2, hover.x / VIEW_WIDTH * 100))}%` },
 			children: `${formatValue(hover.point.v)} · ${formatTimestamp === void 0 ? new Date(hover.point.t).toLocaleString(void 0, {
 				month: "short",

package/dist/layout/_collapse.js

@@ -1,3 +1,8 @@
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_WEIGHT_NORMAL } from "../system/_style-label-weight.js";
+import { COLLAPSE_HEIGHT } from "../system/_style-collapse.js";
+import { QUIET_INK } from "../system/_style-quiet-ink.js";
 //#region src/layout/_collapse.ts
 /**
 * The one disclosure recipe, shared by `Accordion` and `Collapsible`.
@@ -19,7 +24,7 @@
 * inset (`-outline-offset-2`) because sections live inside `overflow-hidden`
 * panels, where an outset ring on the first row would be clipped by the rim.
 */
-const collapseTriggerClasses = "group/collapse flex h-control-md w-full cursor-pointer items-center gap-(--cue-space-3) px-(--cue-pad-row-x) text-left font-mono text-(length:--cue-text-ui) text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent data-[panel-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const collapseTriggerClasses = `group/collapse flex ${COLLAPSE_HEIGHT} w-full cursor-pointer items-center gap-(--cue-space-3) px-(--cue-pad-row-x) text-left ${CONTROL_FACE} text-(length:--cue-text-ui) ${QUIET_INK} ${LABEL_WEIGHT_NORMAL} transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET_2} data-[panel-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /** The label between the summary row's gutters — truncates, never wraps. */
 const collapseLabelClasses = "min-w-0 flex-1 truncate";
 /**

package/dist/layout/bento.js

@@ -1,4 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
+import { DATA_FACE } from "../system/_style-data-face.js";
+import { TITLE_VOICE } from "../system/_style-title.js";
 import { GAP_CLASSES } from "./stack.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -53,9 +56,9 @@ const MIN_HEIGHT_CLASSES = {
 	hero: "min-h-[calc(var(--cue-space-8)*8)]"
 };
 /** The tile surface, shared by both variants so a link tile is not a second look. */
-const TILE_CLASS = "flex flex-col gap-(--cue-space-3) overflow-hidden rounded-(--radius-surface) border border-border bg-surface-1 p-(--cue-space-5)";
+const TILE_CLASS = "flex flex-col gap-(--cue-space-3) overflow-hidden rounded-surface border border-border bg-surface-1 p-(--cue-space-5)";
 /** What a link tile adds: the hover tint and the focus ring the whole surface takes. */
-const LINK_TILE_CLASS = "no-underline transition-colors duration-150 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent";
+const LINK_TILE_CLASS = `no-underline transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING_OFFSET_2}`;
 /** The host elements a link tile may not contain, plus anything carrying `tabIndex`. */
 const INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
 	"a",
@@ -169,11 +172,11 @@ const BentoTile = React.forwardRef(function BentoTile(props, ref) {
 			className: "flex min-w-0 flex-col gap-(--cue-space-1)",
 			children: [eyebrow === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "bento-tile-eyebrow",
-				className: "min-w-0 truncate font-mono text-(length:--cue-text-micro) text-fg-muted",
+				className: `min-w-0 truncate ${DATA_FACE} text-(length:--cue-text-micro) text-fg-muted`,
 				children: eyebrow
 			}), title === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "bento-tile-title",
-				className: "font-mono text-(length:--cue-text-emphasis) font-medium text-fg",
+				className: TITLE_VOICE,
 				children: title
 			})]
 		}) : null, tail ? /* @__PURE__ */ jsxs("div", {