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

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

package/dist/{chunk-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/{chunk-FBSL2LZQ.js → chunk-GU3T7SBA.js}

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

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

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

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

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