@codenhub/styles 0.0.3 → 0.0.4

package/docs/classes.md

@@ -1,198 +0,0 @@
-# @codenhub/styles Classes
-
-**Status:** IMPLEMENTED
-**Last updated:** 2026-06-18
-**Scope:** Public helper classes for `@codenhub/styles`.
-
-Helper classes are CSS-only. They provide presentation and state styling, not semantics or behavior.
-
-## Layout
-
-`.stack`, `.cluster`, and `.auto-grid` are `@utility` classes. They are available in both the full stylesheet and the Tailwind source entrypoints, and participate in Tailwind's JIT pipeline.
-
-| Class              | Purpose                                                        |
-| ------------------ | -------------------------------------------------------------- |
-| `.stack`           | Vertical flex stack using `--layout-stack-gap`.                |
-| `.stack.tight`     | Smaller stack gap.                                             |
-| `.stack.loose`     | Larger stack gap.                                              |
-| `.cluster`         | Wrapping horizontal flex cluster using `--layout-cluster-gap`. |
-| `.cluster.between` | Cluster with `space-between` alignment.                        |
-| `.auto-grid`       | Responsive auto-fit grid using `--layout-grid-min`.            |
-
-## Surfaces
-
-| Class          | Purpose                                       |
-| -------------- | --------------------------------------------- |
-| `.empty-state` | Centered empty-state layout with muted color. |
-
-## Buttons
-
-Use `.btn` with one optional intent class, one optional presentation class, optional size class, and optional state.
-
-Intent classes map color tokens into button tone slots. Presentation classes own how those slots become background, text, border, hover, and spinner styles.
-
-Intent classes:
-
-| Class                               | Meaning                        |
-| ----------------------------------- | ------------------------------ |
-| `.primary`                          | Primary action.                |
-| `.secondary`                        | Secondary/accent action.       |
-| `.success`                          | Successful or positive action. |
-| `.warning`                          | Warning/caution action.        |
-| `.destructive`, `.danger`, `.error` | Destructive or error action.   |
-| `.info`                             | Informational action.          |
-
-Presentation and size classes:
-
-| Class                                                                  | Purpose                                                                       |
-| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `.out`                                                                 | Transparent button with intent readable-tone border and text.                 |
-| `.ghost`                                                               | Transparent button with intent readable-tone text and soft hover.             |
-| `.soft`                                                                | Low-emphasis filled button using intent subtle surface and strong text tones. |
-| `.pill`                                                                | Fully rounded button corners (`border-radius: 9999px`).                       |
-| `.fill` with `.out`                                                    | Filled hover treatment using intent color and contrast text.                  |
-| `.sm`                                                                  | Smaller button.                                                               |
-| `.lg`                                                                  | Larger button.                                                                |
-| `.icon`                                                                | Square icon button. Use an accessible name in HTML.                           |
-| `.loading`                                                             | Loading state. Hides text and shows CSS activity indicator.                   |
-| `.disabled`, `[disabled]`, `[aria-disabled="true"]`, `[data-disabled]` | Disabled styling.                                                             |
-
-Examples:
-
-```html
-<button class="btn primary">Primary</button>
-<button class="btn success out">Success outline</button>
-<button class="btn warning soft">Warning soft</button>
-<button class="btn destructive ghost">Danger ghost</button>
-<button class="btn icon primary" aria-label="Create">+</button>
-<button class="btn primary loading" disabled>Saving</button>
-```
-
-`.loading` is a state, not a color or presentation class. Prefer combining it with disabled behavior so users cannot trigger duplicate work. Loading buttons keep only opacity and transform transitions active so spinner and surface colors stay synchronized when theme tokens change.
-
-## Forms
-
-| Class or Selector                                                     | Purpose                             |
-| --------------------------------------------------------------------- | ----------------------------------- |
-| `.field`                                                              | Vertical field wrapper.             |
-| `.label`                                                              | Form label text.                    |
-| `.hint`                                                               | Secondary helper text.              |
-| `.error` inside `.field` except `.btn.error`, `.field-error`          | Destructive helper text.            |
-| `.ipt`                                                                | Input control styling.              |
-| `.textarea`                                                           | Textarea control styling.           |
-| `.select`                                                             | Select control styling.             |
-| `input[type="checkbox"].checkbox`                                     | Custom checkbox control styling.    |
-| `input[type="checkbox"].switch`                                       | Custom switch control styling.      |
-| `[aria-invalid="true"]` on controls                                   | Destructive border and focus color. |
-| `[disabled]`, `[aria-disabled="true"]`, `[data-disabled]` on controls | Disabled styling.                   |
-
-`.checkbox` and `.switch` accept the same intent classes as buttons to set the checked color:
-
-| Class                               | Meaning            |
-| ----------------------------------- | ------------------ |
-| _(default)_                         | Primary color.     |
-| `.success`                          | Success color.     |
-| `.warning`                          | Warning color.     |
-| `.destructive`, `.danger`, `.error` | Destructive color. |
-| `.info`                             | Info color.        |
-
-Example:
-
-```html
-<label class="field">
-  <span class="label">Email</span>
-  <input class="ipt" type="email" aria-invalid="true" aria-describedby="email-error" />
-  <span class="error" id="email-error">Enter a valid email.</span>
-</label>
-<label style="display: flex; gap: 0.5rem; align-items: center">
-  <input type="checkbox" class="checkbox success" />
-  <span>Accept terms</span>
-</label>
-<label style="display: flex; gap: 0.5rem; align-items: center">
-  <input type="checkbox" class="switch destructive" />
-  <span>Enable</span>
-</label>
-```
-
-`.progress` also accepts the same intent classes to color the fill bar:
-
-## Feedback
-
-| Class       | Purpose                                                             |
-| ----------- | ------------------------------------------------------------------- |
-| `.alert`    | Inline feedback surface.                                            |
-| `.icon`     | Subclass of `.alert`. Adds a corresponding intent icon and padding. |
-| `.badge`    | Compact status pill.                                                |
-| `.ai`       | Low-level activity indicator. Applies CSS masking.                  |
-| `.loader`   | Standalone inline loader. Composes `.ai` with visual styles.        |
-| `.skeleton` | Ambient loading placeholder.                                        |
-| `.progress` | Progress track. Fill element uses `--progress-value`.               |
-
-Feedback helpers accept the same intent classes as buttons: `.success`, `.warning`, `.destructive`, `.danger`, `.error`, and `.info`.
-
-`.icon` is a subclass of `.alert`. When applied as `.alert.icon`, it increases the left padding and adds an embedded SVG icon matching the alert's intent (success, warning, error, info).
-
-`.badge` also accepts presentation variant classes:
-
-| Class    | Purpose                                                                            |
-| -------- | ---------------------------------------------------------------------------------- |
-| _(none)_ | Default. Tinted surface, intent-colored text, subtle intent-tinted border.         |
-| `.flat`  | Filled with the intent color; uses contrast text. Border matches the intent color. |
-| `.soft`  | Tinted surface and intent-colored text with no border (border is transparent).     |
-
-Examples:
-
-```html
-<div class="alert success" role="status">Saved successfully.</div>
-<div class="alert success icon" role="status">Saved successfully with icon.</div>
-<span class="badge warning">Queued</span>
-<span class="badge success flat">Live</span>
-<span class="badge info soft">Draft</span>
-<span class="loader" aria-hidden="true"></span>
-<span class="loader dots-wave" aria-hidden="true"></span>
-<div class="progress" aria-label="Upload progress"><span style="--progress-value: 64%"></span></div>
-<div class="progress success" aria-label="Upload progress"><span style="--progress-value: 64%"></span></div>
-```
-
-## Tooltips
-
-| Class or Attribute                 | Purpose                                                      |
-| ---------------------------------- | ------------------------------------------------------------ |
-| `.tooltip`                         | Tooltip host. Uses `data-tooltip` as pseudo-element content. |
-| `.tooltip.tooltip-icon`            | Circular icon-style tooltip host.                            |
-| `[data-tooltip-position="top"]`    | Positions tooltip above host.                                |
-| `[data-tooltip-position="bottom"]` | Positions tooltip below host.                                |
-| `[data-tooltip-position="left"]`   | Positions tooltip left of host.                              |
-| `[data-tooltip-position="right"]`  | Positions tooltip right of host.                             |
-| No `data-tooltip-position`         | Defaults to top placement.                                   |
-| `[data-state="open"]`              | Shows tooltip without hover.                                 |
-
-Example:
-
-```html
-<button
-  class="tooltip tooltip-icon"
-  data-tooltip="More details"
-  data-tooltip-position="right"
-  aria-label="More details"
->
-  ?
-</button>
-```
-
-CSS pseudo-element tooltips are presentational. They are not a complete accessible tooltip implementation by themselves.
-
-## Typography Utilities
-
-All typography classes and `.selection-contrast` are `@utility` classes.
-
-| Class                 | Purpose                                                      |
-| --------------------- | ------------------------------------------------------------ |
-| `.text-display`       | Large display headings.                                      |
-| `.text-title-lg`      | Large section titles.                                        |
-| `.text-title`         | Default section titles.                                      |
-| `.text-title-sm`      | Smaller titles or card titles.                               |
-| `.text-label-lg`      | Large label text.                                            |
-| `.text-label`         | Default label text.                                          |
-| `.text-body`          | Default body copy.                                           |
-| `.selection-contrast` | Inverts `::selection` colors to primary-contrast background. |

package/docs/index.md

@@ -1,73 +0,0 @@
-# @codenhub/styles Overview
-
-**Status:** IMPLEMENTED
-**Last updated:** 2026-06-18
-**Scope:** `@codenhub/styles` package.
-
-`@codenhub/styles` is a CSS-only styling foundation for Codenhub interfaces. It provides tokens, base styles, typography utilities, layout helpers, component helper classes, and Tailwind CSS v4 source entrypoints.
-
-The package has no JavaScript runtime. It does not create DOM nodes, attach event listeners, manage focus, validate forms, dismiss toasts, or provide framework components.
-
-## Public Entrypoints
-
-| Path                             | Contents                                                              |
-| -------------------------------- | --------------------------------------------------------------------- |
-| `@codenhub/styles`               | Full compiled stylesheet: theme, base styles, components, typography. |
-| `@codenhub/styles/theme`         | Compiled theme tokens and dark-mode variables.                        |
-| `@codenhub/styles/components`    | Compiled theme tokens plus component classes.                         |
-| `@codenhub/styles/tw`            | Tailwind v4 source for theme, base styles, components, and utilities. |
-| `@codenhub/styles/tw/theme`      | Tailwind v4 source for theme tokens and custom dark variant.          |
-| `@codenhub/styles/tw/components` | Tailwind v4 source for theme tokens and component classes.            |
-| `@codenhub/styles/tw/surface`    | Tailwind v4 source for surface styles and empty-state utility.        |
-| `@codenhub/styles/tw/button`     | Tailwind v4 source for composable button utilities.                   |
-| `@codenhub/styles/tw/form`       | Tailwind v4 source for form, inputs, checkbox, and switch utilities.  |
-| `@codenhub/styles/tw/feedback`   | Tailwind v4 source for alert, badge, skeleton, and progress.          |
-| `@codenhub/styles/tw/loader`     | Tailwind v4 source for loader and activity indicator utilities.       |
-| `@codenhub/styles/tw/tooltip`    | Tailwind v4 source for tooltip utility.                               |
-| `@codenhub/styles/tw/utilities`  | Tailwind v4 source for layout primitives and contrast utilities.      |
-
-`components` entrypoints include theme tokens because component classes depend on those variables.
-
-## Class Model
-
-Helper classes are designed as small composable CSS contracts:
-
-- Intent classes define meaning, such as `.primary`, `.success`, `.warning`, `.destructive`, and `.info`.
-- Presentation classes define treatment, such as `.out`, `.ghost`, `.soft`, `.sm`, `.lg`, and `.icon`.
-- State classes or attributes define current state, such as `.loading`, `.disabled`, `[disabled]`, `[aria-disabled="true"]`, `[data-disabled]`, `[aria-invalid="true"]`, and `[data-state="open"]`.
-
-Button example:
-
-```html
-<button class="btn success out">Success outline</button>
-<button class="btn destructive ghost">Danger ghost</button>
-<button class="btn primary loading" disabled>Saving</button>
-```
-
-`out`, `ghost`, and `soft` are presentation choices. They consume active intent tone slots instead of carrying a fixed color intent; for example, `.btn.success.soft` uses success subtle and strong tones.
-
-## Token Model
-
-Component classes use public foundation tokens for shape, motion, focus, surface, and state behavior. Internal scoped variables may exist to compose class variants, but they are not the public customization contract.
-
-Example future-ready profile shape:
-
-```css
-.custom-profile {
-  --radius-surface: 1.25rem;
-  --elevation-low: 0 24px 60px rgb(0 0 0 / 0.18);
-  --motion-duration-normal: 240ms;
-}
-```
-
-Aesthetic profile classes such as `.glassmorphism` or `.brutalism` are not part of v0.0.2. v0.0.2 provides the token foundation that makes them possible later.
-
-## Documentation Map
-
-| Document                            | Purpose                                                   |
-| ----------------------------------- | --------------------------------------------------------- |
-| [Tokens](./tokens.md)               | Theme and foundation variable contracts.                  |
-| [Classes](./classes.md)             | Public helper class behavior and composition rules.       |
-| [Accessibility](./accessibility.md) | CSS accessibility hooks and responsibilities outside CSS. |
-| [Tests](./tests.md)                 | Build and browser validation strategy.                    |
-| [Roadmap](./roadmap.md)             | Draft direction and durable planning context.             |

package/docs/roadmap.md

@@ -1,34 +0,0 @@
-# Roadmap
-
-**Status:** APPROVED
-**Last updated:** 2026-06-23
-**Scope:** `@codenhub/styles` package direction.
-
-## Purpose
-
-This roadmap tracks durable direction for `@codenhub/styles`. It captures styling-system improvements that should guide future changes without turning this document into a release checklist.
-
-## Recently Completed
-
-- Published the v0.0.2 foundation: design tokens (colors, layout, radius, motion, focus, shadows, layering, dark mode), presentation/helper classes (buttons, forms, feedback, loaders, tooltips), accessibility contrast verification, and multi-path bundler visual regression tests.
-
-## Planned
-
-- **Aesthetic Themes**: Add aesthetic themes (e.g., glassmorphism, brutalism, glitch) to allow changing the whole look-and-feel of the UI.
-- **Layout Helpers**: Expand layout helpers to support common page structure and flex/grid requirements.
-- **Dynamic Tokens & Color Schemes**: Add `@codenhub/theme` as a dev dependency to enable dynamic token changes and color scheme creation.
-- **Button Presentation Classes**: Consider adding more presentation classes for buttons (e.g., loading state enhancements) once component APIs stabilize.
-- **Compatibility Tests**: Add more explicit compatibility tests for intent and presentation combinations when new combinations are supported.
-
-## Not Planned
-
-- **JS/TS Helpers**: Runtime DOM helpers (such as a typed `createElement` wrapper) are not planned for now. They will be considered further before any future package expansion, but remain out of scope for now to keep the package CSS-only.
-- Public JavaScript behavior like toast dismissal, focus management, and app-level theme state remain outside the CSS package.
-
-## References
-
-- [Overview](./index.md)
-- [Tokens](./tokens.md)
-- [Classes](./classes.md)
-- [Accessibility](./accessibility.md)
-- [Tests](./tests.md)

package/docs/tests.md

@@ -1,128 +0,0 @@
-# Styles Test Strategy
-
-**Status:** APPROVED
-**Last updated:** 2026-06-16
-**Scope:** `@codenhub/styles` package test strategy.
-
-## Goal
-
-Validate `@codenhub/styles` before publishing changes across both supported consumer paths:
-
-- Ready-to-import compiled CSS.
-- Tailwind CSS build-time source CSS.
-
-Keep tests package-local and focused on visual confidence plus build compatibility.
-
-## Structure
-
-```text
-packages/styles/
-  tests/
-    preview/
-    vanilla/
-    build/
-    browser/
-  scripts/
-```
-
-## `tests/preview`
-
-Shared manual and automated preview page for both supported consumer paths.
-
-Open with one of these URLs when running the package dev server:
-
-```text
-http://localhost:5173/tests/preview/index.html?env=vanilla
-http://localhost:5173/tests/preview/index.html?env=build
-```
-
-The page loads `tests/vanilla/output.css` for `env=vanilla` and `tests/build/output.css` for `env=build`.
-
-The floating environment toggle switches the `env` query value between `vanilla` and `build`. Its tooltip names the target environment with `See build` or `See vanilla`.
-
-Cover:
-
-- Tokens in light and dark mode.
-- Typography utilities.
-- Buttons: intent, presentation, disabled, and loading states.
-- Layout helpers, surfaces, forms, feedback, tooltips, and sections.
-- Selection and base styles.
-- Tailwind token utilities, dark variants, and responsive variants.
-
-Purpose: keep one HTML fixture while validating both real CSS outputs.
-
-## `tests/vanilla`
-
-Compiled CSS output for vanilla consumers.
-
-Use built package CSS only:
-
-```css
-@import "../../dist/index.css";
-```
-
-Purpose: confirm canonical `@codenhub/styles` output looks right with no Tailwind consumer build.
-
-## `tests/build`
-
-Build validation for Tailwind consumers.
-
-Use source entrypoint:
-
-```css
-@import "tailwindcss";
-@import "@codenhub/styles/tw";
-
-@source "../preview/index.html";
-```
-
-Cover:
-
-- Tailwind can process package source.
-- Token utilities work, such as `bg-background`, `text-text`, `font-default`.
-- Dark variant works with `.dark`.
-- Component classes build correctly.
-- Responsive token variants work.
-
-Purpose: confirm `@codenhub/styles/tw` works in consumer Tailwind builds.
-
-## `tests/browser`
-
-Cross-browser automation for visual and computed-style confidence.
-
-Use Playwright by default.
-
-Tests load the same preview page twice with different `env` query values.
-
-Cover:
-
-- Chromium.
-- Firefox.
-- WebKit.
-- Page load assertions.
-- Key computed style assertions.
-- Optional screenshots for visual review.
-
-Purpose: catch browser-specific CSS regressions before publishing changes.
-
-## Scripts
-
-Default package checks:
-
-```json
-{
-  "test": "pnpm typecheck && pnpm test:build && pnpm test:visual",
-  "test:build": "pnpm build && pnpm test:build:vanilla && pnpm test:build:tw",
-  "test:visual": "playwright test",
-  "dev": "node ./scripts/dev.js"
-}
-```
-
-`pnpm dev` starts a local static server and watches both CSS test builds.
-
-## Priority
-
-1. Keep `tests/preview` as the single shared HTML fixture.
-2. Keep `tests/vanilla` for compiled CSS output.
-3. Keep `tests/build` for Tailwind source build validation.
-4. Keep `tests/browser` for Playwright cross-browser validation.

package/docs/tokens.md

@@ -1,101 +0,0 @@
-# @codenhub/styles Tokens
-
-**Status:** IMPLEMENTED
-**Last updated:** 2026-06-18
-**Scope:** Public CSS variable contract for `@codenhub/styles`.
-
-Tokens are CSS custom properties. Default values apply by default. `.dark` may override any token value for that subtree.
-
-```html
-<section class="dark">
-  <article class="card">Dark token subtree</article>
-</section>
-```
-
-## Color Tokens
-
-| Token                          | Purpose                                                                                                       |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `--color-primary`              | Primary action/content color.                                                                                 |
-| `--color-primary-contrast`     | Text/icon color on primary filled surface.                                                                    |
-| `--color-primary-hover`        | Primary hover state.                                                                                          |
-| `--color-primary-subtle`       | Low-emphasis companion tone for primary. Use as soft surface or subtle background.                            |
-| `--color-primary-strong`       | High-emphasis companion tone for primary. Use as readable text, icon, or border on subtle surfaces.           |
-| `--color-accent`               | Secondary/accent surface.                                                                                     |
-| `--color-accent-contrast`      | Text/icon color on accent filled surface.                                                                     |
-| `--color-accent-hover`         | Accent hover state.                                                                                           |
-| `--color-accent-subtle`        | Low-emphasis companion tone for accent. Use as soft surface or subtle background.                             |
-| `--color-accent-strong`        | High-emphasis companion tone for accent. Use as readable text, icon, or border on subtle surfaces.            |
-| `--color-border`               | Default border color.                                                                                         |
-| `--color-border-hover`         | Interactive border color.                                                                                     |
-| `--color-background`           | Page and default raised surface background.                                                                   |
-| `--color-foreground`           | Subtle raised foreground surface.                                                                             |
-| `--color-surface`              | Nested or muted surface.                                                                                      |
-| `--color-text`                 | Primary text color.                                                                                           |
-| `--color-text-secondary`       | Secondary text color.                                                                                         |
-| `--color-text-contrast`        | Text/icon color on text filled surface.                                                                       |
-| `--color-text-hover`           | Text hover state.                                                                                             |
-| `--color-text-subtle`          | Low-emphasis companion tone for text. Use as soft surface or subtle background.                               |
-| `--color-text-strong`          | High-emphasis companion tone for text. Use as readable text, icon, or border on subtle surfaces.              |
-| `--color-success`              | Success state color.                                                                                          |
-| `--color-success-contrast`     | Text/icon color on success filled surface. Meets 3:1 UI component contrast against `--color-success`.         |
-| `--color-success-hover`        | Success hover tone.                                                                                           |
-| `--color-success-subtle`       | Low-emphasis companion tone for success.                                                                      |
-| `--color-success-strong`       | High-emphasis companion tone for success.                                                                     |
-| `--color-warning`              | Warning state color.                                                                                          |
-| `--color-warning-contrast`     | Text/icon color on warning filled surface. Meets 3:1 UI component contrast against `--color-warning`.         |
-| `--color-warning-hover`        | Warning hover tone.                                                                                           |
-| `--color-warning-subtle`       | Low-emphasis companion tone for warning.                                                                      |
-| `--color-warning-strong`       | High-emphasis companion tone for warning.                                                                     |
-| `--color-destructive`          | Destructive/error state color.                                                                                |
-| `--color-destructive-contrast` | Text/icon color on destructive filled surface. Meets 3:1 UI component contrast against `--color-destructive`. |
-| `--color-destructive-hover`    | Destructive hover tone.                                                                                       |
-| `--color-destructive-subtle`   | Low-emphasis companion tone for destructive.                                                                  |
-| `--color-destructive-strong`   | High-emphasis companion tone for destructive.                                                                 |
-| `--color-info`                 | Informational state color.                                                                                    |
-| `--color-info-contrast`        | Text/icon color on info filled surface. Meets 3:1 UI component contrast against `--color-info`.               |
-| `--color-info-hover`           | Info hover tone.                                                                                              |
-| `--color-info-subtle`          | Low-emphasis companion tone for info.                                                                         |
-| `--color-info-strong`          | High-emphasis companion tone for info.                                                                        |
-
-> **Intent token contract**: color intent tokens own meaning and tone variants. Components map an intent palette into scoped component slots, and presentation classes decide which slots to consume. Theme changes belong in token values such as `.dark`, not broad component-level theme checks. Component-level theme handling should exist only when a component has an internal structure that cannot be expressed through the token palette alone.
-
-## Foundation Tokens
-
-Foundation tokens are not aliases for one color. They define layout, shape, motion, focus, depth, and layering behavior used by helper classes.
-
-| Token                       | Purpose                                                                      |
-| --------------------------- | ---------------------------------------------------------------------------- |
-| `--font-default`            | Default app font family.                                                     |
-| `--container-narrow`        | Narrow content width.                                                        |
-| `--container-max`           | Default content width.                                                       |
-| `--container-wide`          | Wide content width.                                                          |
-| `--layout-gutter`           | Responsive inline page padding.                                              |
-| `--layout-section-block`    | Responsive section vertical padding.                                         |
-| `--layout-stack-gap`        | Default vertical stack gap.                                                  |
-| `--layout-cluster-gap`      | Default horizontal/wrapped cluster gap.                                      |
-| `--layout-grid-min`         | Minimum column width for `.auto-grid`.                                       |
-| `--radius-control`          | Radius for buttons, inputs, tooltips, and compact UI.                        |
-| `--radius-surface`          | Radius for cards, panels, and alerts.                                        |
-| `--control-height`          | Default minimum height for controls.                                         |
-| `--border-width`            | Default border width.                                                        |
-| `--elevation-low`           | Elevation for surface-level components such as cards and panels.             |
-| `--elevation-mid`           | Elevation for elevated components such as dropdowns and floating containers. |
-| `--elevation-high`          | Elevation for tooltips and inline overlays.                                  |
-| `--focus-ring`              | Focus-visible ring color.                                                    |
-| `--focus-ring-offset`       | Focus-visible outline offset.                                                |
-| `--focus-ring-width`        | Focus-visible outline/ring width.                                            |
-| `--motion-duration-fast`    | Fast transition for buttons and input interactions (`120ms`).                |
-| `--motion-duration-normal`  | Normal transition for layout and modals (`200ms`).                           |
-| `--motion-duration-slow`    | Slow animation for skeleton loaders and progress bars (`400ms`).             |
-| `--motion-ease`             | Default easing curve.                                                        |
-| `--z-popover`               | Popover/tooltip z-index.                                                     |
-| `--surface-hover-transform` | The transform applied on interactive card/panel hover.                       |
-| `--breakpoint-xs`           | Extra-small Tailwind responsive breakpoint.                                  |
-| `--breakpoint-2xl`          | Extended large Tailwind responsive breakpoint.                               |
-
-## Component Internals
-
-Component classes may define scoped implementation variables such as `--button-*`, `--surface-*`, `--control-*`, `--feedback-*`, and `--tooltip-*`. These variables are internal wiring for class composition and are not the public token contract.
-
-Consumers should customize broad behavior through color, foundation, motion, elevation, radius, layout, and focus tokens first. The only supported component-scoped input is `--progress-value` on the child fill element inside `.progress`, because consumers must provide a value such as `64%`.