@sableui/react 0.3.2 → 0.4.0

package/AGENTS.md

@@ -4,7 +4,7 @@ How to **build with** Sable. This is the whole consumer contract an agent needs;
 
 ## What this is
 
-**Sable** is an owned, themeable React component system: about 100 components (`npx sable manifest` has the live count), 13 layout primitives, 8 page shells, on [Base UI](https://base-ui.com) behavior with Tailwind v4 + semantic CSS-variable tokens. The default theme is **Base**; the other featured presets are Meridian, Prism, Verdant, Ember, and Poppy.
+**Sable** is an owned, themeable React component system: about 100 components (`npx sable manifest` has the live count), 13 layout primitives, 8 page shells, on [Base UI](https://base-ui.com) behavior with Tailwind v4 + semantic CSS-variable tokens. The default theme is **Sable**; the other featured presets are Meridian, Prism, Verdant, Ember, and Poppy.
 
 **Where things are**
 
@@ -59,12 +59,12 @@ The machine-readable version of this section is the `consume` block in `registry
 2. **Dedupe React** in the bundler (`resolve.dedupe: ["react","react-dom"]`) — Base UI must not resolve a second React, or you get an "invalid hook call" blank page.
 3. **CSS, in order:** `@import "tailwindcss";` → `@import "@sableui/react/styles.css";` → `@source "<node_modules>/@sableui/react/dist/**/*.{js,mjs}";` so Tailwind scans the package's classes.
 
-   `styles.css` carries **Base only** — the default theme, and the layout floor every other theme inherits (`--page-inset`, `--region-*`, `--rhythm-unit` on a bare `:root`). The bundled **alternates are opt-in**, because they are `[data-sable-theme]`-scoped and an app that never sets the attribute ships CSS that can never match: 5.5 KB gzip of permanently-dead weight, which is exactly how a real app's build audit found this. Using one? `@import "@sableui/react/theme/prism.css";`. Offering the whole set through a `<ThemeSelector>`? `@import "@sableui/react/themes.css";`. **Symptom of forgetting:** `data-sable-theme` is set, nothing matches, and the page silently renders as Base — no error, just the wrong theme.
+   `styles.css` carries **Sable only** — the default theme, and the layout floor every other theme inherits (`--page-inset`, `--region-*`, `--rhythm-unit` on a bare `:root`). The bundled **alternates are opt-in**, because they are `[data-sable-theme]`-scoped and an app that never sets the attribute ships CSS that can never match: 5.5 KB gzip of permanently-dead weight, which is exactly how a real app's build audit found this. Using one? `@import "@sableui/react/theme/prism.css";`. Offering the whole set through a `<ThemeSelector>`? `@import "@sableui/react/themes.css";`. **Symptom of forgetting:** `data-sable-theme` is set, nothing matches, and the page silently renders as the Sable theme — no error, just the wrong theme.
 4. **Fonts:** load Figtree (sans) + DM Mono (mono) — the theme declares the stacks, the host provides the files. Apply `antialiased` (`-webkit-font-smoothing: antialiased` / `-moz-osx-font-smoothing: grayscale`) **once on the app root**: Sable's type scale was drawn against smoothed text, and without it macOS renders every weight heavier than designed. The package deliberately doesn't set it — a library has no business styling the host's whole page — so it has to happen here.
 5. **Providers (all optional):** components render with **Reicon** by default, so `<IconProvider set={…}>` is only needed to replace it with another icon package or extend it using `composeIconSets(appExtras, reiconIconSet)` (list the added names in `.sable/icons.json` as `{ "names": [...] }` so `sable grade` accepts them); `<MotionProvider>` is optional too. Use `<SableThemeProvider>` + `useSableTheme()` when the app should expose user-selectable themes; pair `themeId` / `setThemeId` with `<ThemeSelector>` and `preference` / `setPreference` with `<ThemeSwitcher>`. The provider stores `light` / `dark` / `system`, toggles the `dark` class on `<html>`, stores the active design theme, and writes `data-sable-theme` for non-default themes. Apps with their own state layer can call `applySableColorMode()` / `applySableTheme()` instead. You only need a Tailwind `@custom-variant dark` if **your** app code uses `dark:` utilities (Sable ships none).
 6. Import from the root barrel: `import { Button } from "@sableui/react"`. Page shells live on the `patterns` subpath (`import { SettingsPage } from "@sableui/react/patterns"`) — preview one, then copy its source from `registry.json → patterns` when the route needs to diverge. Blocks — section-sized compositions such as a sign-in card or a pricing card — live on the `blocks` subpath (`import { SignInBlock } from "@sableui/react/blocks"`) and ship the same way (`registry.json → blocks`); copy one and edit its content constants. A block's props are only `className`, `framed` and its primary action's callback, never content.
 
-7. **Check the wiring:** `npx sable doctor`. Every check it runs corresponds to a way Sable fails *silently* — a second React (blank page, "invalid hook call"), a missing `@source` (Tailwind emits none of the package's classes, everything renders unstyled), or `data-sable-theme` set with no theme CSS imported (every theme renders as Base and the switcher looks broken). Exits 1 on any failure; `--json` for the structured report.
+7. **Check the wiring:** `npx sable doctor`. Every check it runs corresponds to a way Sable fails *silently* — a second React (blank page, "invalid hook call"), a missing `@source` (Tailwind emits none of the package's classes, everything renders unstyled), or `data-sable-theme` set with no theme CSS imported (every theme renders as the Sable theme and the switcher looks broken). Exits 1 on any failure; `--json` for the structured report.
 
 8. **Read the catalog through the CLI, not the file.** `registry.json` is about 1 MB and `llms-full.txt` about 800 KB — complete and unreadable in a working context. `npx sable` serves the same generated contract in pieces, offline, at your installed version:
 

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # What's new
 
+## 0.4.0
+
+### The default theme is now called Sable
+
+The default theme was called Base, which read too close to Base UI, the
+library Sable's components are built on. It is now **Sable**. It looks the same.
+
+- Theme id `base` → `sable` (`data-sable-theme="sable"`, `setThemeId("sable")`).
+- `@sableui/react/theme/base` and `theme/base.css` → `theme/sable` and
+  `theme/sable.css`. `styles.css` still includes it, so most apps import nothing new.
+- `baseTheme` → `sableTheme`.
+- A stored `base` choice is no longer a known id, so `SableThemeProvider`
+  falls back to the default, which is Sable.
+
+### Themes
+
+- **Panel fields read in dark mode.** `panel-field` was the canvas tone, 3% ink
+  off the panel, which measured 1.04:1 on a dark panel. It is now mixed from the
+  panel at 9% ink (1.15:1 dark, 1.25:1 light), with hover a step further at 12%.
+- **Ember's dark-mode primary button has white text.** The fill is now Ember's
+  light-mode orange-red. On the old, brighter fill the dark label passed WCAG
+  but read muddy (APCA Lc 42); white now clears both (4.8:1, Lc 76). The
+  sidebar's active item follows.
+
+### Agent tools
+
+- `sable-lint` no longer reports `hand-derived-surface` on the value of a
+  `--theme-*` hook, such as `--theme-panel-field: color-mix(…)`. Tuning a
+  derived token is what the hooks are for.
+- `sable grade --ignore <glob>` skips the same paths `sable-lint --ignore`
+  does, so a data layer of document colours is not counted as contract
+  violations. Ignored files are still fingerprinted.
+
 ## 0.3.2
 
 ### Workspace panels

package/CONTRIBUTING.md

@@ -117,7 +117,7 @@ deliberately reverses: `DESIGN.md → Registers`. What a contributor needs to kn
 
 ## Theme contract
 
-A theme is a CSS file that defines every token in `themes/_contract.ts` for `:root` (light) and `.dark` (dark), plus an optional TS manifest. Components depend on the **semantic** layer; each theme supplies its own palette underneath. Alternate themes activate through the root `data-sable-theme` attribute; consuming apps should usually let `<SableThemeProvider>` own that wiring and read/update it through `useSableTheme()`. To make a new theme: copy `themes/base/`, swap the palette + semantic values, keep the token names identical, add the manifest to `themes/registry.ts`, import its CSS from `src/themes.css`, add `./theme/<id>` + `./theme/<id>.css` to both `exports` and `publishConfig.exports`, and cover it in `themes.test.ts`. `build-registry` fails on a theme missing from any of those, and generates `registry.json → themes.available` from the manifests — never hand-edit that list. Re-skinning never touches component code.
+A theme is a CSS file that defines every token in `themes/_contract.ts` for `:root` (light) and `.dark` (dark), plus an optional TS manifest. Components depend on the **semantic** layer; each theme supplies its own palette underneath. Alternate themes activate through the root `data-sable-theme` attribute; consuming apps should usually let `<SableThemeProvider>` own that wiring and read/update it through `useSableTheme()`. To make a new theme: copy `themes/sable/`, swap the palette + semantic values, keep the token names identical, add the manifest to `themes/registry.ts`, import its CSS from `src/themes.css`, add `./theme/<id>` + `./theme/<id>.css` to both `exports` and `publishConfig.exports`, and cover it in `themes.test.ts`. `build-registry` fails on a theme missing from any of those, and generates `registry.json → themes.available` from the manifests — never hand-edit that list. Re-skinning never touches component code.
 
 **Themes are presets, not the unit of customization.** Every token a theme sets can also be set by an app (or by the docs customizer) on `:root` after the theme loads. A theme is the starting point a consumer picks; the customizer exports the deltas on top of it. Keep that working: a theme must not set a token with `!important` or under a selector more specific than `[data-sable-theme="<id>"]`, or a consumer override cannot win.
 
@@ -130,7 +130,7 @@ while allowing a consumer to tune the whole type system, rather than making only
 headings reflect its art direction. Existing defaults remain the fallback; themes
 do not need to declare every optional hook.
 
-`SEMANTIC_TOKENS` includes `border-strong` alongside `border` — a visually-stronger structural divider (grid lines, table rules, section separators) distinct from `border`, which stays tuned for subtle chrome (badge/input outlines). Both need light + dark values, derived from the same neutral ramp as `border` but pulled from a higher-contrast step (e.g. Base: `border` = `--zinc-200` light / low-alpha `--zinc-700` dark → `border-strong` = `--zinc-300` light / higher-alpha `--zinc-500` dark). `styles.css`'s `@theme inline` block maps it to `--color-border-strong`, so components/consumers use it via the `border-strong` Tailwind color utility, same pattern as `border`.
+`SEMANTIC_TOKENS` includes `border-strong` alongside `border` — a visually-stronger structural divider (grid lines, table rules, section separators) distinct from `border`, which stays tuned for subtle chrome (badge/input outlines). Both need light + dark values, derived from the same neutral ramp as `border` but pulled from a higher-contrast step (e.g. the Sable theme: `border` = `--zinc-200` light / low-alpha `--zinc-700` dark → `border-strong` = `--zinc-300` light / higher-alpha `--zinc-500` dark). `styles.css`'s `@theme inline` block maps it to `--color-border-strong`, so components/consumers use it via the `border-strong` Tailwind color utility, same pattern as `border`.
 
 `TYPE_OVERLINE_TOKENS` (`type-overline-size/weight/leading/tracking/transform`) back the `text-overline` utility — the eyebrow/badge-label/stat-caption text role with no home in `TYPE_SCALE_TOKENS`'s display/heading/title ramp. `type-overline-transform` is themeable rather than a hardcoded `uppercase`, so a quieter reference (e.g. Cove) can opt into sentence case. Like the other type tiers, every built-in theme declares explicit values rather than relying on styles.css's fallback defaults (`0.75rem` / weight `600` / leading `1.2` / tracking `0.08em` / `uppercase`).
 

package/DESIGN.md

@@ -1,6 +1,6 @@
 # Sable — Design System Spec
 
-The system-level design spec for **Sable**, an owned, themeable component system. This document is **theme-agnostic**: it describes the structure, tokens, and rules that every theme inherits. The **default theme is "Base"** (a dark-by-default, content-first, fluid product aesthetic); its concrete values live in `src/themes/base/`. Other themes supply their own values for the same token contract.
+The system-level design spec for **Sable**, an owned, themeable component system. This document is **theme-agnostic**: it describes the structure, tokens, and rules that every theme inherits. The **default theme is "Sable"** (a dark-by-default, content-first, fluid product aesthetic); its concrete values live in `src/themes/sable/`. Other themes supply their own values for the same token contract.
 
 For building with Sable see `AGENTS.md`; for changing the package see `CONTRIBUTING.md`. For the machine-readable catalog see `registry.json` / `llms.txt`.
 
@@ -9,7 +9,7 @@ For building with Sable see `AGENTS.md`; for changing the package see `CONTRIBUT
 1. **Own the surface, theme the values.** Components reference semantic roles, not colors. Swapping a theme re-skins everything without touching a component.
 2. **Content over chrome.** The UI recedes so content advances. Restraint over decoration.
 3. **Constraint is generative.** A small set of tokens, tiers, and primitives yields a large space of good UIs. Reach for what exists before inventing.
-4. **A deliberate visual world.** Base starts dark. A consuming product chooses its modes, typography, shape, and art direction from its brief; the token contract travels across those choices.
+4. **A deliberate visual world.** The Sable theme starts dark. A consuming product chooses its modes, typography, shape, and art direction from its brief; the token contract travels across those choices.
 5. **Accessible by construction.** Base UI carries behavior/ARIA; semantic token pairs are pre-checked to WCAG AA.
 6. **AI-native.** The system is documented for machines as well as people (`registry.json`, per-component `*.meta.ts`).
 
@@ -26,7 +26,7 @@ evidence contract. A reviewer still has to see and operate the result. Read
 
 The semantic contract protects meaning, behavior, and consistency. It does not
 choose the story, visual hierarchy, imagery, or composition for every product.
-Statements about Base's accent, shape, and dark-first identity describe the
+Statements about the Sable theme's accent, shape, and dark-first identity describe the
 default theme; consumers can choose a different art direction while preserving
 semantic roles and accessibility. A palette change alone is not a new design.
 
@@ -57,7 +57,7 @@ Three layers, outermost is what components use:
 | **Semantic** (the contract) | `--primary`, `--card`, `--muted-foreground`, `--tone-edition`, `--ring` | **Components** (via `bg-*`/`text-*` utilities). |
 | **Component** (local) | a cva variant string | Inside one component. |
 
-`themes/_contract.ts` enumerates the semantic tokens every theme must define. The default (Base) palette is authored in **OKLCH** for perceptually-uniform ramps, locked hue, gamut-safe chroma, and dark-mode vibrancy.
+`themes/_contract.ts` enumerates the semantic tokens every theme must define. The default (Sable) palette is authored in **OKLCH** for perceptually-uniform ramps, locked hue, gamut-safe chroma, and dark-mode vibrancy.
 
 ### Semantic tokens (the contract)
 
@@ -68,7 +68,7 @@ Tone ink (legible text/icon on a tone fill, theme-adaptive): `tone-standard-fore
 Overlay (fixed dark surface over content — scrims, media letterbox, pills on imagery): `overlay`, `overlay-foreground`.
 Sidebar set: `sidebar`, `sidebar-foreground`, `sidebar-primary(-foreground)`, `sidebar-accent(-foreground)`, `sidebar-border`, `sidebar-ring`.
 
-**Base inversion rule:** in dark mode `primary` is light (a near-white pill); in light mode it is near-black. Other themes may use a different action palette. Never call `primary` "black" or `primary-foreground` "white" — use the semantic pair, whose values belong to the theme.
+**Sable theme inversion rule:** in dark mode `primary` is light (a near-white pill); in light mode it is near-black. Other themes may use a different action palette. Never call `primary` "black" or `primary-foreground` "white" — use the semantic pair, whose values belong to the theme.
 
 ### Tone system
 
@@ -442,7 +442,7 @@ Motion is a first-class token layer, not an afterthought. **Subtle by default, w
 
 **Three parts:**
 
-1. **Tokens** (`themes/base/base.css` → Motion tokens; contract in `themes/_contract.ts` → `MOTION_TOKENS`).
+1. **Tokens** (`themes/sable/sable.css` → Motion tokens; contract in `themes/_contract.ts` → `MOTION_TOKENS`).
    - **Durations:** `instant` 75 · `fast` 150 · `base` 200 · `slow` 300 · `slower` 500, plus semantic `enter`/`exit`. Every duration is multiplied by `--motion-scale`.
    - **Easings:** `standard` (≈ease-in-out, default) · `decelerate` (≈ease-out, entrances) · `emphasized` (large surfaces) · `linear` (indeterminate loaders) · **`spring`** (gentle ~+4% single overshoot — the default for delightful pops) · **`bounce`** (~+10%, opt-in playful accents). Springs apply on **enter only**; exits stay overshoot-free.
    - Consume easings via the `ease-*` utilities; durations via `duration-(--motion-duration-*)` (so the kill-switch always applies).
@@ -526,7 +526,7 @@ Not every removal is a regression; check for an **equivalent replacement** befor
 - Inline `oklch()`/hex or raw palette steps in components. *(CI-enforced: `inline-color`, `palette-ref`.)*
 - Decomposing paired typography utilities. *(CI-enforced: `decomposed-type`.)*
 - Pure `#000`/`#fff` (use `zinc-950`/`zinc-50`, or `overlay`/`overlay-foreground` for scrims). *(CI-enforced: `raw-black-white`.)*
-- In Base, purple/brand for primary CTAs (brand = editions + selection only). A different theme chooses its action palette through the semantic pair.
+- In the Sable theme, purple/brand for primary CTAs (brand = editions + selection only). A different theme chooses its action palette through the semantic pair.
 - Gradient text, side-stripe borders, nested cards, mixed radii.
 - Concrete icon-package imports scattered through components. Reicon supplies the default through the shared adapter; IconProvider allows replacement.
 - A global page max-width (use opt-in region caps).

package/README.md

@@ -1,6 +1,6 @@
 # Sable
 
-**Sable** — a themeable React component system with layout patterns, semantic tokens and tools for coding agents. Default theme: **Base**. On npm as `@sableui/react`; docs and the live catalog at [sableui.com](https://www.sableui.com).
+**Sable** — a themeable React component system with layout patterns, semantic tokens and tools for coding agents. Default theme: **Sable**. On npm as `@sableui/react`; docs and the live catalog at [sableui.com](https://www.sableui.com).
 
 For a clickable iOS prototype (demos and presentations, not production), ask the
 Sable skill to build with the iOS target. Every screen is Sable components in your
@@ -13,7 +13,7 @@ Frame it with `PhoneFrame` from `@sableui/react/ios/preview`. See
 
 Original Sable code is [MIT licensed](./LICENSE).
 
-The featured presets are Base (neutral), Meridian (square), Prism (compact technical),
+The featured presets are Sable (neutral), Meridian (square), Prism (compact technical),
 Verdant (serif), Ember (warm), and Poppy (playful). Every preset supports light and
 dark modes. Load its declared fonts and use `ThemeSelector` to offer preset choices.
 [Third-party notices](./THIRD_PARTY_NOTICES.md) list the software and fonts used

package/bin/sable.mjs

@@ -83,7 +83,7 @@ const COMMANDS = [
 		summary: "Create, validate, or compile a portable Sable preset used by Canvas and builds.",
 		arg: null,
 		flags: [
-			{ name: "--template", value: null, describe: "Print a complete editable Base preset JSON record." },
+			{ name: "--template", value: null, describe: "Print a complete editable Sable preset JSON record." },
 			{ name: "--check", value: "file.json", describe: "Validate the schema and Sable token contract." },
 			{ name: "--css", value: "file.json", describe: "Generate scoped theme CSS from a validated preset." },
 		],
@@ -210,6 +210,7 @@ const COMMANDS = [
 			{ name: "--strict", value: null, describe: "Exit 1 for contract findings or missing/incomplete/unresolved review evidence." },
 			{ name: "--cli-log", value: "file.jsonl", describe: "Include retrieval usage from a SABLE_CLI_LOG file." },
 			{ name: "--icons", value: "icons.json", describe: 'Icon names the app adds with composeIconSets, as { "names": [...] }. Default: .sable/icons.json when present.' },
+			{ name: "--ignore", value: "glob", describe: "Skip matching paths in the checks, with the same globs as sable-lint --ignore. Repeatable." },
 		],
 		returns: ["grade.score", "grade.template"],
 	},
@@ -1078,7 +1079,7 @@ function cmdDoctor() {
 	/* The theme trap: opting into theme switching without importing theme CSS. */
 	const src = collectSources(/\.(tsx?|jsx?)$/)
 	const srcText = src.map((f) => f.text).join("\n")
-	// A provider used only for light/dark mode needs Base, not alternate themes.
+	// A provider used only for light/dark mode needs only the Sable theme, not alternate themes.
 	const usesThemes = /ThemeSelector|data-sable-theme|applySableTheme|setThemeId|defaultThemeId/.test(srcText)
 	if (usesThemes) {
 		const themeCss = /@import\s+["'](?:@sableui\/react\/|[^"']*packages\/sable\/(?:src|dist)\/)(themes\.css|theme\/[a-z-]+\.css|themes\/[a-z-]+\/[a-z-]+\.css)["']/.test(cssText)
@@ -1088,7 +1089,7 @@ function cmdDoctor() {
 			add(
 				"fail",
 				"themes",
-				"This app selects a design theme but has no alternate or app-owned scoped theme CSS — the selected theme may silently render as Base.",
+				"This app selects a design theme but has no alternate or app-owned scoped theme CSS — the selected theme may silently render as the Sable theme.",
 				'Import themes.css, one theme/<id>.css, or the scoped CSS generated by sable preset --css.',
 			)
 	}

package/dist/{_contract-BlKMR4eX.d.ts → _contract-Cn3lUpih.d.ts}

@@ -4,14 +4,14 @@
  * never a theme's internal palette steps — which is what makes the system
  * re-themeable without touching component code.
  *
- * To author a new theme: copy `themes/base/`, keep these token names, and
+ * To author a new theme: copy `themes/sable/`, keep these token names, and
  * supply your own palette + values. See CONTRIBUTING.md → "Theme contract".
  */
 declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "muted", "muted-foreground", "border", "border-strong", "input", "control-border", "ring", "primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "success", "success-foreground", "tone-standard", "tone-collectible", "tone-edition", "tone-info", "tone-warning", "highlight", "tone-standard-foreground", "tone-collectible-foreground", "tone-edition-foreground", "tone-info-foreground", "tone-warning-foreground", "highlight-foreground", "overlay", "overlay-foreground", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
 type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
 /**
  * Motion tokens (mode-independent). A theme MAY override these to retune its
- * motion feel; if omitted, the Base defaults apply. Components reference
+ * motion feel; if omitted, the Sable theme's defaults apply. Components reference
  * them via `duration-(--motion-duration-*)` + the `ease-*` utilities, or — far
  * more often — via the named motion recipes (`motion-pop`, `motion-press`, …)
  * defined in styles.css. Every duration is multiplied by `--motion-scale`, the
@@ -23,7 +23,7 @@ type MotionToken = (typeof MOTION_TOKENS)[number];
 /**
  * Radius tokens (mode-independent). A theme MAY override these to retune its
  * shape language (soft-square, rectilinear, full-pill, …); if omitted, the
- * Base defaults apply (see styles.css → `@theme inline`, which bridges
+ * Sable defaults apply (see styles.css → `@theme inline`, which bridges
  * each `--theme-radius-*` var to the `radius-*` Tailwind scale). Components
  * never reference these directly — they use the derived `rounded-*`
  * utilities.
@@ -33,7 +33,7 @@ type RadiusToken = (typeof RADIUS_TOKENS)[number];
 /**
  * Type-scale tokens (mode-independent). A theme MAY override these to retune
  * its typographic voice (weight, leading, tracking, and — for heading/display
- * tiers — size); if omitted, the Base defaults baked into styles.css's
+ * tiers — size); if omitted, the Sable theme's defaults baked into styles.css's
  * paired `text-*` utilities apply. Additional body/label/caption/mono and size
  * hooks are advertised separately in TYPE_REFINEMENT_TOKENS: they are optional,
  * so a theme can retune its reading voice without duplicating every default.
@@ -97,9 +97,9 @@ type DensityToken = (typeof DENSITY_TOKENS)[number];
  *   tuned for the opposite job (lifting content off a page).
  * - `panel-field` / `panel-field-hover` are the inset fill of a compact control
  *   docked in a panel (the `size="xs"` field rung, a field-style button) and its
- *   hover step. They default to `canvas` / `panel-raised`, but name the role so
- *   a consumer's own panel control can wear it without borrowing the work
- *   surface's token or a fixed hover the surface-hover rule rightly rejects.
+ *   hover step, mixed from the panel they sit in. Named so a consumer's own panel
+ *   control can wear them without borrowing the work surface's token or a fixed
+ *   hover the surface-hover rule rightly rejects.
  * - `hairline` / `hairline-strong` are that structural edge. In this register
  *   hairlines carry structure INSTEAD of tonal steps — a deliberate reversal of
  *   the page register's "prefer a tonal step or space over a divider line".

package/dist/{chunk-YXBOYWBN.js → chunk-C4Z3CF54.js}

@@ -2,7 +2,7 @@
 var atelierTheme = {
   id: "atelier",
   label: "Atelier",
-  deprecated: { replacement: "base" },
+  deprecated: { replacement: "sable" },
   modes: ["light", "dark"],
   defaultMode: "light",
   fonts: {

package/dist/{chunk-MXJX3NZI.js → chunk-EFLC4NA3.js}

@@ -1,19 +1,19 @@
 import { prismTheme } from './chunk-7MG4SHYX.js';
 import { verdantTheme } from './chunk-KO3NAEBF.js';
 import { emberTheme } from './chunk-L4IEIQQA.js';
-import { baseTheme } from './chunk-EP55KSYA.js';
+import { sableTheme } from './chunk-EHH4MHO6.js';
 import { poppyTheme } from './chunk-ADLLDWLW.js';
 import { meridianTheme } from './chunk-K7RUHUGC.js';
-import { atelierTheme } from './chunk-YXBOYWBN.js';
+import { atelierTheme } from './chunk-C4Z3CF54.js';
 import { createContext, useMemo, useState, useEffect, useCallback, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 // src/themes/registry.ts
 var SABLE_THEME_ATTRIBUTE = "data-sable-theme";
-var DEFAULT_THEME_ID = baseTheme.id;
+var DEFAULT_THEME_ID = sableTheme.id;
 var defaultThemeId = DEFAULT_THEME_ID;
 var themeManifests = [
-  baseTheme,
+  sableTheme,
   meridianTheme,
   prismTheme,
   verdantTheme,

package/dist/{chunk-EP55KSYA.js → chunk-EHH4MHO6.js}

@@ -1,7 +1,7 @@
-// src/themes/base/index.ts
-var baseTheme = {
-  id: "base",
-  label: "Base",
+// src/themes/sable/index.ts
+var sableTheme = {
+  id: "sable",
+  label: "Sable",
   modes: ["dark", "light"],
   defaultMode: "dark",
   fonts: {
@@ -9,6 +9,6 @@ var baseTheme = {
     mono: '"DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace'
   }
 };
-var base_default = baseTheme;
+var sable_default = sableTheme;
 
-export { baseTheme, base_default };
+export { sableTheme, sable_default };

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-BlKMR4eX.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-BlKMR4eX.js';
-import { T as ThemeId } from './theme-provider-CuYYxF0o.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-CuYYxF0o.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';
@@ -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".
@@ -7499,6 +7499,6 @@ interface UseCopyResult {
  */
 declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
 
-declare const SABLE_UI_VERSION: "0.3.2";
+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

@@ -12,15 +12,15 @@ 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';
@@ -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.2";
+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/presets/index.d.ts

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

package/dist/presets/index.js

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

package/dist/styles.css

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

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

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

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

package/dist/themes/atelier/index.js

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

package/dist/themes/ember/ember.css

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

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

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

package/dist/themes/index.d.ts

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

package/dist/themes/index.js

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

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

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

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

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

package/dist/themes/poppy/poppy.css

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

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

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

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

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

package/dist/themes/sable/index.js

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

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

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

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

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

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/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

@@ -319,7 +319,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
 - **`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`. It resolves to the canvas tone by default, but `canvas` names the work surface; a field that borrows it says the wrong thing and stops following a theme that tunes its 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.

package/llms/tasks/building-a-page.md

@@ -62,7 +62,7 @@ chosen by what the surface *does*:
 - `secondary` — a control fill (something you can press)
 - `accent` — a transient state (hover, selected, current)
 
-Pick by appearance and it works in Base and breaks in Meridian. Every token's
+Pick by appearance and it works in the Sable theme and breaks in Meridian. Every token's
 intent, and what it gets confused with, is in
 `llms/reference/token-intent.md`.
 

package/llms/tasks/creating-a-preset.md

@@ -21,7 +21,7 @@ pnpm exec sable preset --check .sable/presets/clay.json --json
 pnpm exec sable preset --css .sable/presets/clay.json
 ```
 
-The template starts from a complete Base theme snapshot. Give it a unique ID and
+The template starts from a complete Sable theme snapshot. Give it a unique ID and
 label; author its tokens, direction, and reference observations. Avoid IDs of
 bundled themes. Save the record at `.sable/presets/<id>.json`. Advance `revision`
 when changing a shared record; keep earlier revisions when reproducibility matters.

package/llms/tasks/designing-a-surface.md

@@ -2,7 +2,7 @@
 
 Tokens make decisions consistent; they do not decide what deserves attention.
 Start with the user's task and content, then choose a visual direction. Sable's
-default Base identity is a starting point. A consumer can be light-first,
+default Sable identity is a starting point. A consumer can be light-first,
 photographic, editorial, playful, or quiet while retaining semantic tokens,
 accessible behavior, and a coherent interaction policy.
 

package/llms-full.txt

@@ -243,7 +243,7 @@ On npm as `@sableui/react`. The structured recipe is the `consume` block in `reg
 @source "<path-to>/@sableui/react/dist/**/*.{js,mjs}"; /* workspace: packages/sable/src; published: node_modules/@sableui/react/dist */
 ```
 
-4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — base: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
+4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — sable: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
 5. **Providers + theme switching:**
 
 ```tsx
@@ -653,7 +653,7 @@ chosen by what the surface *does*:
 - `secondary` — a control fill (something you can press)
 - `accent` — a transient state (hover, selected, current)
 
-Pick by appearance and it works in Base and breaks in Meridian. Every token's
+Pick by appearance and it works in the Sable theme and breaks in Meridian. Every token's
 intent, and what it gets confused with, is in
 `llms/reference/token-intent.md`.
 
@@ -1309,7 +1309,7 @@ pnpm exec sable preset --check .sable/presets/clay.json --json
 pnpm exec sable preset --css .sable/presets/clay.json
 ```
 
-The template starts from a complete Base theme snapshot. Give it a unique ID and
+The template starts from a complete Sable theme snapshot. Give it a unique ID and
 label; author its tokens, direction, and reference observations. Avoid IDs of
 bundled themes. Save the record at `.sable/presets/<id>.json`. Advance `revision`
 when changing a shared record; keep earlier revisions when reproducibility matters.
@@ -1435,7 +1435,7 @@ requirement that every future brand use the same illustration or font pairing.
 
 Tokens make decisions consistent; they do not decide what deserves attention.
 Start with the user's task and content, then choose a visual direction. Sable's
-default Base identity is a starting point. A consumer can be light-first,
+default Sable identity is a starting point. A consumer can be light-first,
 photographic, editorial, playful, or quiet while retaining semantic tokens,
 accessible behavior, and a coherent interaction policy.
 
@@ -18843,7 +18843,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} />
 ```
 
@@ -20304,7 +20304,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
 - **`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`. It resolves to the canvas tone by default, but `canvas` names the work surface; a field that borrows it says the wrong thing and stops following a theme that tunes its 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.

package/llms.txt

@@ -243,7 +243,7 @@ On npm as `@sableui/react`. The structured recipe is the `consume` block in `reg
 @source "<path-to>/@sableui/react/dist/**/*.{js,mjs}"; /* workspace: packages/sable/src; published: node_modules/@sableui/react/dist */
 ```
 
-4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — base: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
+4. **Fonts:** the theme declares the stacks; the host loads the files (every featured primary is available through Google Fonts). Per theme — sable: Figtree + DM Mono · meridian: Instrument Sans + Geist Mono · prism: Outfit + Roboto Mono + Playfair Display (display) · verdant: Inter + IBM Plex Mono + Instrument Serif (display) · ember: Work Sans + DM Mono · poppy: Albert Sans + Red Hat Mono + Unbounded (display). The machine-readable list is `registry.json → themes.available[].fonts`.
 5. **Providers + theme switching:**
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sableui/react",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Sable: themeable React components, layout patterns, and tools for coding agents.",
   "type": "module",
   "sideEffects": [
@@ -71,11 +71,11 @@
       "default": "./dist/themes/ember/index.js"
     },
     "./theme/ember.css": "./dist/themes/ember/ember.css",
-    "./theme/base": {
-      "types": "./dist/themes/base/index.d.ts",
-      "default": "./dist/themes/base/index.js"
+    "./theme/sable": {
+      "types": "./dist/themes/sable/index.d.ts",
+      "default": "./dist/themes/sable/index.js"
     },
-    "./theme/base.css": "./dist/themes/base/base.css",
+    "./theme/sable.css": "./dist/themes/sable/sable.css",
     "./theme/poppy": {
       "types": "./dist/themes/poppy/index.d.ts",
       "default": "./dist/themes/poppy/index.js"

package/registry.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://sable.design/registry.schema.json",
   "name": "@sableui/react",
-  "version": "0.3.2",
-  "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Base.",
+  "version": "0.4.0",
+  "description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
   "engine": {
     "behavior": "@base-ui/react",
     "styling": "tailwindcss@4",
@@ -42,9 +42,9 @@
     "designTheme": "Set data-sable-theme for alternate or app-owned themes; omit the attribute or use base for the default. Register portable presets with presetManifest() through SableThemeProvider customThemes, and load their scoped CSS and fonts.",
     "import": "import { Button, Card } from \"@sableui/react\"",
     "cssOptional": {
-      "themes.css": "@import \"@sableui/react/themes.css\"; — all bundled alternatives. styles.css already includes Base. Alternate CSS is scoped by data-sable-theme.",
+      "themes.css": "@import \"@sableui/react/themes.css\"; — all bundled alternatives. styles.css already includes the Sable theme. Alternate CSS is scoped by data-sable-theme.",
       "theme/<id>.css": "@import \"@sableui/react/theme/prism.css\"; — one bundled alternative. Prefer this when the app uses exactly one.",
-      "symptom": "The active theme renders as Base when its stylesheet has not been imported. Load the selected theme CSS before applying its ID."
+      "symptom": "The active theme renders as the Sable theme when its stylesheet has not been imported. Load the selected theme CSS before applying its ID."
     },
     "designWorkflow": {
       "brief": "sable docs designing-a-surface",
@@ -91,14 +91,14 @@
     }
   },
   "themes": {
-    "default": "base",
+    "default": "sable",
     "available": [
       {
-        "id": "base",
-        "label": "Base",
+        "id": "sable",
+        "label": "Sable",
         "featured": true,
-        "css": "./src/themes/base/base.css",
-        "manifest": "./src/themes/base/index.ts",
+        "css": "./src/themes/sable/sable.css",
+        "manifest": "./src/themes/sable/index.ts",
         "import": "@sableui/react/styles.css",
         "modes": [
           "dark",
@@ -233,7 +233,7 @@
         "id": "atelier",
         "label": "Atelier",
         "deprecated": {
-          "replacement": "base"
+          "replacement": "sable"
         },
         "featured": false,
         "css": "./src/themes/atelier/atelier.css",
@@ -1313,7 +1313,7 @@
         "name": "panel-field",
         "intent": "The inset fill of a compact control docked in a panel.",
         "whenToUse": "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.",
-        "insteadOf": "`canvas`. It resolves to the canvas tone by default, but `canvas` names the work surface; a field that borrows it says the wrong thing and stops following a theme that tunes its fields.",
+        "insteadOf": "`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`.",
         "pairsWith": [
           "panel-field-hover"
         ]
@@ -17085,7 +17085,7 @@
         },
         {
           "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} />",
           "imports": "import { ThemeSelector, type ThemeId } from \"@sableui/react\""
         },
         {

package/scripts/design-presets.mjs

@@ -15,7 +15,7 @@ try {
 	const action = modes[0]
 	if (action === "--template") {
 		const manifest = JSON.parse(readFileSync(resolve(packageRoot, "package.json"), "utf8"))
-		const css = readFileSync(resolve(packageRoot, "dist/themes/base/base.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "")
+		const css = readFileSync(resolve(packageRoot, "dist/themes/sable/sable.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "")
 		const groups = { light: {}, dark: {} }
 		for (const match of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
 			const target = match[1].includes(".dark") ? groups.dark : groups.light

package/scripts/grade.mjs

@@ -33,7 +33,7 @@ import { existsSync, readFileSync, readdirSync, statSync } from "node:fs"
 import { createHash } from "node:crypto"
 import { dirname, extname, join, relative, resolve } from "node:path"
 import { fileURLToPath } from "node:url"
-import { lintText, makeRules } from "./lint-rules.mjs"
+import { ignoreGlob, lintText, makeRules } from "./lint-rules.mjs"
 import { skeletonize } from "./skeleton.mjs"
 import { assessReview, reviewTemplate } from "./review-evidence.mjs"
 
@@ -44,6 +44,7 @@ const CWD = process.cwd()
 const argv = process.argv.slice(2)
 const flags = new Map()
 const targets = []
+const ignores = []
 const BOOLEAN_FLAGS = new Set(["json", "help", "template", "strict"])
 const VALUE_FLAGS = new Set(["cli-log", "review", "icons"])
 const JSON_OUT = argv.includes("--json")
@@ -55,7 +56,11 @@ function abort(message) {
 for (let i = 0; i < argv.length; i++) {
 	const a = argv[i]
 	if (!a.startsWith("--")) targets.push(a)
-	else if (BOOLEAN_FLAGS.has(a.slice(2))) flags.set(a.slice(2), true)
+	else if (a === "--ignore" || a.startsWith("--ignore=")) {
+		const glob = a === "--ignore" ? argv[++i] : a.slice(9)
+		if (!glob || glob.startsWith("--")) abort("--ignore requires a glob.")
+		ignores.push(glob)
+	} else if (BOOLEAN_FLAGS.has(a.slice(2))) flags.set(a.slice(2), true)
 	else if (VALUE_FLAGS.has(a.slice(2))) {
 		if (!argv[i + 1] || argv[i + 1].startsWith("--")) abort(`${a} requires a file path.`)
 		flags.set(a.slice(2), argv[++i])
@@ -72,13 +77,14 @@ if (flags.has("help") || !targets.length) {
 		[
 			"grade — check the static contract and recorded review evidence. No model calls.",
 			"",
-			"  sable grade <dir...> [--json] [--review <review.json>] [--icons <icons.json>] [--strict]",
+			"  sable grade <dir...> [--json] [--review <review.json>] [--icons <icons.json>] [--ignore <glob>] [--strict]",
 			"",
 			"  --json           machine-readable scorecard",
 			"  --cli-log        a SABLE_CLI_LOG jsonl, to report whether the CLI was used at all",
 			"  --template       print a review JSON template; fill after inspecting the rendered build",
 			"  --review         validate evidence files and observations; paths are relative to this JSON",
 			'  --icons          icon names the app adds with composeIconSets: { "names": [...] }. Default: .sable/icons.json',
+			"  --ignore         skip matching paths in the checks, as sable-lint --ignore (repeatable)",
 			"  --strict         exit 1 for static findings or a missing/incomplete/unresolved review",
 			"",
 			"Checks: design-contract violations · hallucinated components and props ·",
@@ -194,7 +200,13 @@ for (const t of targets) {
 	else snapshotFiles.push(abs)
 }
 snapshotFiles.splice(0, snapshotFiles.length, ...new Set(snapshotFiles.sort()))
-const files = snapshotFiles.filter((file) => CODE.test(file))
+/* --ignore takes the same globs sable-lint does, so the grade judges the same
+   files the lint does. A data layer (palette fixtures, document colours) is
+   skipped by the checks but still fingerprinted: it is part of the build. */
+const ignoreRes = ignores.map(ignoreGlob)
+const isIgnored = (file) => ignoreRes.some((re) => re.test(relative(CWD, file).replaceAll("\\", "/")))
+const ignoredFiles = snapshotFiles.filter((file) => CODE.test(file) && isIgnored(file))
+const files = snapshotFiles.filter((file) => CODE.test(file) && !isIgnored(file))
 if (!files.length) abort("No source files found.")
 if (!files.some((file) => readFileSync(file, "utf8").trim().length > 0)) abort("No non-empty source content found.")
 // Git checkouts may use CRLF on Windows and LF in CI. Normalize only known text
@@ -463,6 +475,7 @@ const result = {
 	sourceHash,
 	fingerprint: { algorithm: "sha256", files: snapshotFiles.length, packageHash, coverage: "All non-test files in supplied targets, plus Sable runtime sources, registry, and lint contract. Known text formats normalize CRLF to LF; binary assets retain their bytes. Pass public/ for external asset directories; remote resources are not covered." },
 	files: files.length,
+	ignored: { globs: ignores, files: ignoredFiles.length },
 	loc,
 	score,
 	scoreMeaning: "Static contract only. Pattern similarity does not affect this score; visual quality is not scored.",
@@ -485,7 +498,7 @@ if (JSON_OUT) {
 
 const L = (s = "") => process.stdout.write(`${s}\n`)
 L()
-L(`  grade — ${files.length} files, ${loc} lines, against @sableui/react ${REGISTRY.version}`)
+L(`  grade — ${files.length} files, ${loc} lines, against @sableui/react ${REGISTRY.version}${ignoredFiles.length ? ` (${ignoredFiles.length} ignored)` : ""}`)
 L(`  ${"─".repeat(66)}`)
 const row = (label, n, note = "") =>
 	L(`  ${label.padEnd(26)}${String(n).padStart(4)}${note ? `   ${note}` : ""}`)

package/scripts/lint-rules.mjs

@@ -537,10 +537,14 @@ export function makeRules({ semanticTokens, motionTokens }) {
 			since: "0.1.0",
 			code: true,
 			why:
-				"A colour hand-mixed from the foreground ink — `color-mix(… var(--foreground) …)`. Sable already derives these from the surface underneath, in every theme and mode: `sable-well` (a recessed track, pad or well), `sable-surface` + `sable-surface-interactive` (hover and selected fills on any surface), `bg-hairline` / `border-hairline` (a faint ink edge or fill). `npx sable search` finds them; `registry.json → utilities` explains each. If none fits, it is a gap — report it, then take the escape hatch with the reason.",
+				"A colour hand-mixed from the foreground ink — `color-mix(… var(--foreground) …)`. Sable already derives these from the surface underneath, in every theme and mode: `sable-well` (a recessed track, pad or well), `sable-surface` + `sable-surface-interactive` (hover and selected fills on any surface), `bg-hairline` / `border-hairline` (a faint ink edge or fill). `npx sable search` finds them; `registry.json → utilities` explains each. If none fits, it is a gap — report it, then take the escape hatch with the reason. " +
+				"Exempt: the value of a `--theme-*` hook (`--theme-panel-field: color-mix(…)`), which is how a theme tunes a derived token.",
 			find(line) {
 				const out = []
 				for (const m of line.matchAll(/color-mix\([^;"'`]*?var\(--foreground\)/g)) {
+					// A theme hook is the sanctioned place to retune a derived surface,
+					// in CSS or as an arbitrary property ([--theme-x:color-mix(…)]).
+					if (/--theme-[\w-]+\s*:\s*$/.test(line.slice(0, m.index))) continue
 					out.push({ match: m[0].length > 60 ? `${m[0].slice(0, 57)}…` : m[0] })
 				}
 				return out
@@ -964,6 +968,21 @@ function stripComments(src) {
 		.replace(/(^|[^:])\/\/[^\n]*/gm, (m, p) => p + " ".repeat(m.length - p.length))
 }
 
+/**
+ * An `--ignore` glob as a RegExp over a CWD-relative, forward-slash path:
+ * `**` crosses directories, `*` stays within one. Shared by sable-lint and
+ * sable grade so the same flag skips the same files in both.
+ */
+export function ignoreGlob(glob) {
+	return new RegExp(
+		`^${glob
+			.replace(/[.+^${}()|[\]\\]/g, "\\$&")
+			.replace(/\*\*/g, "\0")
+			.replace(/\*/g, "[^/]*")
+			.replace(/\0/g, ".*")}$`,
+	)
+}
+
 export function lintText(text, rules, ctx) {
 	const lines = text.split(/\r?\n/)
 	const codeLines = stripComments(text).split(/\r?\n/)

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

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

package/dist/themes/base/index.js

@@ -1 +0,0 @@
-export { baseTheme, base_default as default } from '../../chunk-EP55KSYA.js';