@thewhatmatters/wmds 0.4.27 → 0.4.28

package/CHANGELOG.md

@@ -7,6 +7,56 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.28
+
+**AlertDialog takes a body, Input takes a rich label, and dialogs get a roomier edge.**
+
+- **InlinePill** (new): a pill that sits inside running text and scales with it (em-sized), with an optional picture on its left held in the pill's padding so it never parts from its word. `useInlinePillsPopIn()` pops the pictures in one after another when the text scrolls into view, on the WMDS motion tokens; nothing under reduced motion. Not a control: `Chip` and `Badge` stay UI-sized. Story **Components/InlinePill**, with a 390px long-word test.
+- **AlertDialog** `children` (new) — content between the description and the actions, such as a typed-confirmation **Input**. It renders outside the description `<p>`, so `aria-describedby` still names the description alone. Cancel still takes initial focus. Without `children` the markup is unchanged.
+- **Input** `label` is now `ReactNode` (was `string`), so a label can read "Type **@handle** to confirm". The `<label htmlFor>` association is unchanged, and the whole label is the field's accessible name. A string label behaves as before.
+- **Pattern — alert dialog (typed confirmation delete)** is new on **Components/Dialog**: Delete stays off until the typed value matches the handle (a leading `@`, case, and surrounding spaces are ignored), and the field clears on reopen. **Pattern — rich label** is new on **Components/Input**.
+- New interaction test **Internal/Interactions/Overlay → AlertDialog — typed confirmation**.
+- **Dialog** and **AlertDialog** edge inset is **24px** on every side, phones included (was 16px): header, body, and footer share the same horizontal inset, and the panel's top and bottom are 24px. A pill action now clears the 16px panel radius instead of sitting in the corner. **Sheet**, **Panel**, and **Card** keep their 16px layout. `dialogStyles` adds `dialogPanelInsetXClasses`, `dialogHeaderInsetTopClasses`, `dialogFooterInsetBottomClasses`.
+- **Dialog**, **Sheet**, and **IntakeModal** scroll lock no longer leaves a pale strip at the trailing edge on platforms with classic scrollbars: `html { scrollbar-gutter: stable }` kept that strip after the body stopped scrolling, and the fixed scrim cannot paint into it. While a modal is open the gutter is released and the body takes its width as `padding-right`, so the page behind does not move and the scrim reaches the edge.
+- **Loading keeps keyboard focus.** **Button** `status="loading"` (and `"error"` with `disableOnError`), **IconButton** `loading`, **Checkbox** `loading`, and **Switch** `loading` set `aria-disabled` and ignore presses instead of setting native `disabled`, which dropped focus to `<body>` mid-submit. `disabled` still sets native `disabled`. **FilterPanel** Clear all moves focus to the first group (rail) or the results button (Sheet) as it disables itself. New interaction test **Internal/Interactions/Button → a loading button keeps keyboard focus and ignores presses**.
+- **Field** `description` now reaches the control: Field appends its description id to the single child's `aria-describedby` (keeping the child's own ids) instead of setting it on the wrapper `<div>`, where screen readers ignored it. A multi-control Field keeps it on its `role="group"`. **Select** takes `aria-describedby` (new) and joins it with its own `description`. New interaction test **Internal/Interactions/Form controls → Field — description describes the control**.
+- **AlertDialog** (and **Dialog** with `dismissOnBackdrop={false}`): a press on the scrim no longer moves focus to `<body>`, where the next Tab left the dialog. The interaction test **AlertDialog — confirm and cancel** now presses the scrim and checks focus stays inside.
+- **AppShell** has a skip link (new): the first Tab shows "Skip to content" over the top-start corner, and Enter moves focus to `<main>` without changing the URL. `labels.skipToContent` (new) words it. New interaction test **Internal/Interactions/AppShell → the first Tab reaches a skip link that moves focus to the page**.
+- **SiteNav**: while the compact bar is pinned (`placement="fixed"` or a `scrollContainer`), the page (or that container) gets `scroll-padding-top` of `--site-nav-height` plus 16px, so an element focused with Tab scrolls into view below the bar instead of under it. The previous value comes back when the bar unpins or unmounts. New interaction test **Internal/Interactions/SiteNav → pinned compact bar keeps focused elements out from under it**.
+- **Dialog**, **Sheet**, **IntakeModal**, and **Panel** share one open/close lifecycle (`useOverlayLifecycle` in `lib/dialogOverlay`, internal). What changes for users:
+  - **Escape closes only the topmost overlay**, so an AlertDialog over a Sheet no longer closes both. An Escape that a control inside already handled (`defaultPrevented`) is left alone.
+  - **Dialog** and **IntakeModal** make the page behind inert, as **Sheet** already did, so a screen reader's virtual cursor stays in the modal.
+  - **Panel** moves focus into itself on open (its first control).
+  - On close, focus returns to the opener only if it is still in the page and focus has not moved on elsewhere; otherwise it goes to `<main>`. This was Sheet-only before.
+  - Stacked modals share one scroll lock, so the page scrolls again however they close (closing them out of order used to leave it locked).
+  - New interaction tests in **Internal/Interactions/Overlay lifecycle** cover the shared lifecycle and each of the four overlays.
+  - **IntakeModal** `dismissOnEscape` (new, default `true`): set `false` so Escape cannot drop typed answers.
+- **Menus share one behaviour** (`useDropdownMenu`, internal, in the Dropdown folder). **Select**, **MoreMenu**, and **Breadcrumb**'s "…" menu:
+  - **Escape** closes only the menu and returns focus to its trigger, so a menu inside a **Dialog** or **Sheet** no longer closes the overlay too. An Escape during IME composition is ignored by menus and overlays.
+  - **Tab** closes the menu. A press outside closes it (`pointerdown`, so touch works too). Scroll and resize keep it attached to its trigger.
+  - **Keyboard:** ArrowDown/ArrowUp, Home/End, and type-ahead; disabled rows are skipped.
+  - **Screen readers hear the active row.** **Select**'s trigger is a select-only `combobox` naming the active option with `aria-activedescendant`. **MoreMenu** and Breadcrumb move real focus onto the rows; Space chooses a row like Enter does.
+  - **Tab** and **SiteNav** More menus use it too, through one overflow module (`useOverflowMenu`) that owns measuring, the fit, and the More menu. SiteNav no longer reaches into Tab. More menus now follow their trigger on scroll instead of closing, and stop listening for Escape on the whole page.
+  - **SiteNav** More rows are real links (`<a href>`), so Cmd-click and middle-click open a new tab.
+  - **Tab**: More now sits beside the `tablist` instead of inside it (a `tablist` may only own tabs), which clears the accessibility violations its overflow stories were waiving.
+  - New interaction tests in **Internal/Interactions/Menus** cover the shared behaviour and all five menus, including a Select and a MoreMenu inside a **Dialog** and a Breadcrumb inside a **Sheet**, where Escape closes the menu and leaves the overlay open.
+  - **Dropdown.Item** forwards its ref. A row that is both active and selected now shows the active fill, so focus is visible on it.
+- **Theme** sets `color-scheme` (new): `light` on `:root` and `dark` under `[data-theme="dark"]`, so native scrollbars, form controls, and autofill follow the theme instead of staying light in dark mode.
+- **`docs/exports.json`** now lists all 41 lib helpers `src/index.ts` exports (was 12). Nothing was added to or removed from the package. `npm run validate:manifest` now also fails when `src/index.ts` exports a lib helper the manifest does not list.
+
+- **Brand kit (new).** A client's brand is now a short `brand.css` of allow-listed knobs (**CONSUMING.md → Brand kit**):
+  - **Type:** `--font-display` (every `type-display-*` step; unset follows `--font-family-heading`), `--font-display-weight`, `--font-display-tracking`, `--font-display-case`, and a `--font-serif` slot. `--font-family-heading` is now allow-listed too. With none set, type renders as before.
+  - **New display steps:** `type-display-hero` (fluid to 16vw, `--text-display-hero-size` knob) and `type-display-xl` (44px → 136px), both with tight leading and safe word breaks on phones.
+  - **Section colours:** `--color-brand-surface` / `--color-on-brand-surface` (default: the navy) and `--color-field` / `--color-on-field` (default: the primary), each with an optional `-muted` step.
+  - **Band (new component):** `tone` `default` / `inverse` / `field` sets `data-tone`, which remaps surface, text, border, fill and focus roles so every component inside re-skins. It holds its own `grid-page`; inside a `grid-page` it bleeds to the viewport edges (no horizontal scrollbar) and keeps the page's columns. `spacing` `md` / `lg` / `none`. New stories **Components/Band → Pattern — page in bands** and **Foundations/Brand kit → Theme a client** (the offer-sheet values with a contrast table); new interaction tests **Internal/Interactions/Band**.
+  - **wmds-check** `brand-contrast` (new, error): fails an on-colour or muted step under 4.5:1 on its colour, for primary, brand surface and field, when both are hex in the same CSS rule. It now reads the app's `.css` files.
+  - **TextSequence** word masks reach 0.08em above and to the sides of each word, so tall caps on tight display leading and outline strokes aren't clipped. Layout is unchanged.
+- **Design knobs for shape (new).** `--radius-control` (default pill) and `--radius-surface` (default 16px) reshape every control and surface. Set them on `:root`, or on a wrapper with Tailwind (`[--radius-control:4px]`), for rectangular buttons, inputs, selects, chips, badges and tabs, and squarer cards and menus. Avatars, dots, spinners, radios, switches and progress bars stay round. Defaults are unchanged: every component renders as before. **CONSUMING.md → Design knobs**; new story **Foundations/Shape → Design knobs — rectangular controls**; new interaction test **Internal/Interactions/Shape**.
+
+### Consumer actions
+
+None. To ask for a typed confirmation, pass an **Input** as `children` of **AlertDialog** and set `confirmDisabled` until the value matches. Copy **Components/Dialog → Pattern — alert dialog (typed confirmation delete)**. A **Dialog** or **AlertDialog** is 16px wider on each side's content inset and 16px taller (8px top, 8px bottom); check the narrowest phone width. No `className` change is needed. `npx wmds-check` now reads your `.css` files: if `brand-contrast` fails on an existing `--color-on-primary`, pick an ink that clears 4.5:1 (or mark a deliberate exception with `/* wmds-check-ignore brand-contrast <reason> */` on the line above). To carry a client's type and section colours, see **CONSUMING.md → Brand kit** and replace hand-rolled section colours with **Band** `tone`.
+
 ## 0.4.27
 
 **An opt-in counter for the Carousel.**

package/CONSUMING.md

@@ -316,6 +316,67 @@ Browse [lucide.dev/icons](https://lucide.dev/icons/).
 
 ## Customization
 
+### Design knobs (shape)
+
+A site whose design isn't WMDS's default shape (rectangular buttons instead of pills, squarer cards) changes it with **design knobs**: allow-listed CSS variables that every component reads. Don't restyle components with `className`. A knob reshapes every component inside the element it's set on, and keeps focus rings, hit areas and nested radii consistent.
+
+| Knob | Default | Reshapes |
+|------|---------|----------|
+| `--radius-control` | pill | Button, IconButton, Input, Search, Select, Chip, PillGroup, Badge, SegmentedControl, Tab, the compact SiteNav bar. Multi-line controls (TextArea, NavList rows) use 12px or the knob, whichever is smaller. |
+| `--radius-surface` | `16px` | Card layout shells and occupants, Dropdown menus, Toast, ChatQa, Carousel. Smaller surfaces scale with it: Stat, LogView and Skeleton at ¾ (12px), a padded Card at ½ (8px). |
+
+Avatars, status dots, spinners, radios, switches, progress bars and chart marks stay round.
+
+Set knobs for the whole app on `:root` in `brand.css` (below), or for one page or section with a Tailwind arbitrary property on a plain wrapper:
+
+```tsx
+<main className="grid-page [--radius-control:4px] [--radius-surface:6px]">…</main>
+```
+
+Derived radii (`--radius-control-inner`, `--radius-control-box`, `--radius-surface-md`, `--radius-surface-sm`, `--radius-card-shell`, `--radius-card-body`) follow the knobs; don't set them. See **Foundations → Shape → Design knobs — rectangular controls**.
+
+### Brand kit (type and section colours)
+
+A client's brand on WMDS is a short `brand.css` (imported after `styles.css`, unlayered) that sets **allow-listed** knobs. Each knob is read by every component that needs it; nothing else is overridable, so contrast and layout stay guaranteed.
+
+| Knob | Default | Reads it |
+|------|---------|----------|
+| `--font-family-heading` | Geist | `type-heading-*`, and every display step when `--font-display` is unset |
+| `--font-display` | unset (the heading face) | every `type-display-*` step (`hero`, `xl`, `1`, `2`, `3`) |
+| `--font-display-weight` | each step's own (700 / 600) | display steps: set `400` for a one-weight face, so nothing is faux-bolded |
+| `--font-display-tracking` | each step's own | display steps: `0` for a condensed face |
+| `--font-display-case` | unset | display steps: `uppercase` for a face set in capitals (the accessible name stays the written text) |
+| `--font-serif` | system serif | a slot: point `--font-display` or `--font-family-heading` at `var(--font-serif)` |
+| `--text-display-hero-size` | `clamp(3.5rem, 16vw, 16rem)` | `type-display-hero` (a condensed face carries more vw) |
+| `--color-brand-surface` / `--color-on-brand-surface` | the navy / white | **Band** `tone="inverse"` |
+| `--color-on-brand-surface-muted` | 72% of the ink on the surface | secondary text on `inverse` |
+| `--color-field` / `--color-on-field` | the primary pair | **Band** `tone="field"` |
+| `--color-on-field-muted` | the ink itself | secondary text on `field` |
+
+The font knobs also work on a section wrapper (`[--font-display:…]`); set the colour pairs on `:root` (and `[data-theme="dark"]` if they differ there). Load the face yourself (`next/font` or `@fontsource/*`).
+
+**Display steps:** `type-display-hero` (fluid to 16vw, 0.92 leading) and `type-display-xl` (44px → 136px, 0.9 leading) sit above `type-display-1`; both break long words rather than overflow a phone. **TextSequence** word masks keep 0.08em headroom above and to the sides, so tall caps and outline strokes aren't clipped.
+
+**Contrast:** every on-colour and muted step needs **4.5:1** on its colour. `npx wmds-check` reads the app's CSS and fails a hex pair under that (`brand-contrast`, an error). Pairs it can't resolve (a `var()` or `color-mix`) aren't checked, so check those yourself.
+
+```css
+/* brand.css — the reference client (Foundations → Brand kit → Theme a client) */
+:root {
+  --font-display: "Anton", Impact, sans-serif;
+  --font-display-weight: 400;
+  --font-display-tracking: 0;
+  --font-display-case: uppercase;
+  --text-display-hero-size: clamp(4rem, 17.5vw, 18rem);
+  --color-brand-surface: #120d08;
+  --color-on-brand-surface: #f3e3c3;
+  --color-on-brand-surface-muted: #a89a80;
+  --color-field: #e2522b;
+  --color-on-field: #120d08;
+}
+```
+
+Sections then use **Band** `tone="inverse"` / `"field"`: it re-skins everything inside and bleeds full width on the page's own columns (**Components → Band**).
+
 ### Brand override (`--color-primary`)
 
 The **only** per-app color hook is the primary brand color. The WhatMatters default palette stays in **`src/theme/colors.css`**; an app overrides it by redefining the allowlisted tokens on `:root` (light) and `[data-theme="dark"]` (dark) in a stylesheet imported **after** `@thewhatmatters/wmds/styles.css`.
@@ -359,4 +420,4 @@ Rules:
 - Set both the light and the dark value. Leaving `[data-theme="dark"]` unset falls back to the WhatMatters dark primary, not to your light value.
 - Check contrast for `--color-on-primary` on your primary and for `--color-primary` on `--color-body` in both themes.
 
-**Not overridable per app:** brand navy (`--color-brand` `#011272`, `--color-on-brand`, `--color-brand-outline`, `--color-brand-soft`, `--color-on-brand-hover`), accent (`--color-accent*`, `--color-on-accent`), status (`--color-error*`, `--color-success*`, `--color-warning*`, `--color-info*`), chart series, typography (`--font-*`, `--line-height-*`, `type-*`), and grid (`--grid-*`, `--spacing`). Those roles are the shared WMDS contract — change them in `src/theme/`, rebuild, and bump the package. Do **not** fork component visuals with per-app utility overrides — extend WMDS via new variants/patterns in the design system repo.
+**Not overridable per app** (beyond the Brand kit and Design knobs above): brand navy (`--color-brand` `#011272`, `--color-on-brand`, `--color-brand-outline`, `--color-brand-soft`, `--color-on-brand-hover`), accent (`--color-accent*`, `--color-on-accent`), status (`--color-error*`, `--color-success*`, `--color-warning*`, `--color-info*`), chart series, typography (`--font-*`, `--line-height-*`, `type-*`, except the Brand kit knobs), and grid (`--grid-*`, `--spacing`). Those roles are the shared WMDS contract — change them in `src/theme/`, rebuild, and bump the package. Do **not** fork component visuals with per-app utility overrides — extend WMDS via new variants/patterns in the design system repo.

package/bin/wmds-check.mjs

@@ -18,6 +18,9 @@
  *                             content, data, handlers, and exports may change
  *   pattern-stale     warn   a pasted pattern's header names an older package version
  *   pattern-removed   error  a pasted pattern's id no longer ships
+ *   brand-contrast    error  a brand-kit pair in the app's CSS under WCAG AA 4.5:1: --color-on-X (and
+ *                             --color-on-X-muted) on --color-X, for primary, brand-surface and field,
+ *                             when both are hex values in the same rule
  *
  * Silence one line with a trailing or preceding comment: `wmds-check-ignore raw-control <reason>`.
  * The checks are line-based heuristics, not a parser: they favor few false negatives, and every
@@ -50,6 +53,7 @@ try {
 
 const skipDirs = new Set(["node_modules", ".next", "dist", "build", "out", ".git", "coverage", "storybook-static"]);
 const files = [];
+const cssFiles = [];
 const walk = (dir) => {
   for (const name of readdirSync(dir)) {
     const file = path.join(dir, name);
@@ -57,6 +61,8 @@ const walk = (dir) => {
       if (!skipDirs.has(name)) walk(file);
     } else if (/\.(tsx|jsx|ts|js|mdx)$/.test(name) && !/\.(test|spec|stories)\./.test(name)) {
       files.push(file);
+    } else if (/\.css$/.test(name)) {
+      cssFiles.push(file);
     }
   }
 };
@@ -259,6 +265,47 @@ for (const file of files) {
   }
 }
 
+// Brand-kit contrast. Innermost rule blocks only, so a pair inside @media is read as its own rule.
+const brandPairs = ["primary", "brand-surface", "field"];
+const channel = (value) => {
+  const c = value / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+const luminance = (hex) => {
+  let digits = hex.slice(1);
+  if (digits.length === 3 || digits.length === 4) digits = [...digits].map((d) => d + d).join("");
+  if (digits.length === 8 && digits.slice(6) !== "ff") return null; // translucent: depends on what's behind
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(digits.slice(i, i + 2), 16));
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+};
+const contrast = (a, b) => {
+  const [la, lb] = [luminance(a), luminance(b)];
+  if (la === null || lb === null) return null;
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+};
+for (const file of cssFiles) {
+  const source = readFileSync(file, "utf8");
+  const lines = source.split("\n");
+  for (const block of source.matchAll(/\{([^{}]*)\}/g)) {
+    const values = new Map();
+    for (const declaration of block[1].matchAll(/(--color-[\w-]+)\s*:\s*(#[0-9a-fA-F]{3,8})\b/g)) {
+      const index = block.index + 1 + declaration.index;
+      values.set(declaration[1], { hex: declaration[2].toLowerCase(), line: source.slice(0, index).split("\n").length });
+    }
+    for (const name of brandPairs) {
+      const background = values.get(`--color-${name}`);
+      if (!background) continue;
+      for (const ink of [`--color-on-${name}`, `--color-on-${name}-muted`]) {
+        const on = values.get(ink);
+        const ratio = on && contrast(on.hex, background.hex);
+        if (ratio && ratio < 4.5 && !ignored(lines, on.line - 1, "brand-contrast")) {
+          report(file, on.line, "brand-contrast", "error", `${ink} ${on.hex} on --color-${name} ${background.hex} is ${ratio.toFixed(2)}:1 — text needs 4.5:1`);
+        }
+      }
+    }
+  }
+}
+
 const errors = findings.filter((finding) => finding.severity === "error").length;
 const warnings = findings.length - errors;
 

package/dist/colors.css

@@ -9,6 +9,9 @@
  * Brand actions: primary / on-primary (WhatMatters — separate from accent).
  */
 :root {
+  /* Native UI (scrollbars, form controls, autofill) follows the theme. */
+  color-scheme: light;
+
   /* Surface hierarchy — body/muted lightened for softer inset wells (test) */
   --color-background-body: #f8f8f8;
   --color-background-surface: #ffffff;
@@ -102,6 +105,23 @@
    */
   --color-brand-tint: color-mix(in srgb, var(--color-brand) 10%, transparent);
 
+  /*
+   * Brand kit colour roles (apps may set these on :root, like --color-primary; CONSUMING.md → Brand kit).
+   * Read by **Band** `tone` (the `[data-tone]` scopes at the end of this file). Two pairs only, so every
+   * on-colour stays checkable: `npx wmds-check` fails a pair under 4.5:1.
+   * - brand surface: a dark section in the brand's own colour (`tone="inverse"`). Default: the navy.
+   * - field: a saturated section colour (`tone="field"`). Default: the primary.
+   * `*-muted` is the secondary text step on that colour; it must clear 4.5:1 too.
+   */
+  --color-brand-surface: var(--color-brand);
+  --color-on-brand-surface: var(--color-on-brand);
+  --color-field: var(--color-primary);
+  --color-on-field: var(--color-on-primary);
+  /*
+   * The muted steps (`--color-on-brand-surface-muted`, `--color-on-field-muted`) are optional and read
+   * with fallbacks in the tone scopes below, so they follow their pair wherever it's set.
+   */
+
   /* Derived from --color-primary — 62% clears WCAG 3:1 on white and #f8f8f8 */
   --color-focus-ring: color-mix(in srgb, var(--color-primary) 62%, transparent);
 
@@ -155,6 +175,7 @@
 }
 
 [data-theme="dark"] {
+  color-scheme: dark;
   --color-background-body: #1b1b1b;
   --color-background-surface: #262626;
   --color-background-card: #1b1b1b;
@@ -290,3 +311,74 @@
 
   --color-skeleton: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-background-muted));
 }
+
+/**
+ * Band tones — `[data-tone]` remaps the surface, text, border and fill roles to a brand-kit pair,
+ * the way `[data-theme]` swaps the palette, so every component inside re-skins. Set by **Band**.
+ * `inverse` also carries `data-theme="dark"`, so status, chart, shadow and focus roles take their dark
+ * values, and this block (later in the file) overrides the surfaces and text on the same element.
+ * Status colours are not remapped on `field`: keep validation messages off a field band.
+ */
+[data-tone="inverse"] {
+  --tone-bg: var(--color-brand-surface);
+  --tone-fg: var(--color-on-brand-surface);
+  /* Default: 72% of the ink on the surface (on the navy, about #b8bdd8, 8.7:1). */
+  --tone-muted: var(
+    --color-on-brand-surface-muted,
+    color-mix(in srgb, var(--color-on-brand-surface) 72%, var(--color-brand-surface))
+  );
+  /* Cards lift 6% toward the ink; the muted step keeps its contrast on the light side. */
+  --tone-raised: color-mix(in srgb, var(--tone-fg) 6%, var(--tone-bg));
+}
+
+[data-tone="field"] {
+  --tone-bg: var(--color-field);
+  --tone-fg: var(--color-on-field);
+  /* Default: the ink itself, since a lighter step on a mid-tone field would fall under 4.5:1. */
+  --tone-muted: var(--color-on-field-muted, var(--color-on-field));
+  /* A tinted card would pull a mid-tone field under 4.5:1, so cards sit flat on the field. */
+  --tone-raised: var(--tone-bg);
+}
+
+[data-tone="inverse"],
+[data-tone="field"] {
+  --color-background-body: var(--tone-bg);
+  --color-background-surface: var(--tone-raised);
+  --color-background-card: var(--tone-raised);
+  --color-background-popover: var(--tone-raised);
+  --color-background-muted: var(--tone-bg);
+
+  --color-text-primary: var(--tone-fg);
+  --color-text-secondary: var(--tone-muted);
+  --color-text-disabled: color-mix(in srgb, var(--tone-fg) 45%, var(--tone-bg));
+  --color-text-accent: var(--tone-fg);
+
+  --color-accent: var(--tone-fg);
+  --color-accent-muted: color-mix(in srgb, var(--tone-fg) 10%, var(--tone-bg));
+  --color-on-accent: var(--tone-bg);
+
+  --color-neutral: color-mix(in srgb, var(--tone-fg) 10%, transparent);
+  --color-overlay-hover: color-mix(in srgb, var(--tone-fg) 8%, transparent);
+  --color-overlay-pressed: color-mix(in srgb, var(--tone-fg) 14%, transparent);
+  /* stateColors.css derives these on :root; derive them again here so they follow the tone. */
+  --color-ghost-foreground: var(--tone-fg);
+  --color-secondary-hover: var(--color-overlay-hover);
+  --color-secondary-active: var(--color-overlay-pressed);
+  --color-ghost-hover: var(--color-overlay-hover);
+  --color-ghost-active: var(--color-overlay-pressed);
+
+  --color-border: color-mix(in srgb, var(--tone-fg) 16%, transparent);
+  --color-border-emphasized: color-mix(in srgb, var(--tone-fg) 32%, transparent);
+  /* Control edges need 3:1; the muted text step clears 4.5:1. */
+  --color-border-control: var(--tone-muted);
+  --color-fill-selected: color-mix(in srgb, var(--tone-fg) 14%, var(--tone-bg));
+  --color-elevation-edge: color-mix(in srgb, var(--tone-fg) 16%, transparent);
+  --color-elevation-surface: var(--tone-raised);
+
+  --color-skeleton: color-mix(in srgb, var(--tone-fg) 12%, var(--tone-bg));
+  /* The ink itself: a primary-tinted ring can vanish on a saturated field. */
+  --color-focus-ring: var(--tone-fg);
+
+  background-color: var(--color-background-body);
+  color: var(--color-text-primary);
+}

package/dist/components/atoms/Badge/badgeStyles.js

@@ -32,8 +32,8 @@ var r = [
 	failed: "bg-error",
 	warning: "bg-warning"
 }, l = "animate-status-dot-pulse", u = {
-	sm: `${t.sm} gap-1.5 rounded-full px-2.5 text-xs leading-none tabular-nums`,
-	md: `${t.md} gap-2 rounded-full px-3 text-sm leading-none tabular-nums`
+	sm: `${t.sm} gap-1.5 rounded-[var(--radius-control)] px-2.5 text-xs leading-none tabular-nums`,
+	md: `${t.md} gap-2 rounded-[var(--radius-control)] px-3 text-sm leading-none tabular-nums`
 }, d = "inline-flex shrink-0 items-center justify-center font-sans font-medium normal-case tracking-normal", f = {
 	neutral: "border border-border bg-secondary text-secondary-foreground shadow-raised",
 	info: "bg-info text-on-info",
@@ -57,14 +57,14 @@ function h(e, t) {
 	return t === "outline" ? m[e] : t === "muted" ? p[e] : f[e];
 }
 var g = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]", _ = e("relative cursor-pointer decoration-1 underline-offset-2 hover:underline", "after:absolute after:inset-x-0 after:top-1/2 after:h-11 after:-translate-y-1/2 after:content-['']", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body", "transition-[border-color,text-decoration-color]", n("fast")), v = "hover:border-fg", y = {
-	sm: "h-5 rounded-full px-2 text-xs leading-none",
-	md: "h-6 rounded-full px-2.5 text-sm leading-none"
+	sm: "h-5 rounded-[var(--radius-control)] px-2 text-xs leading-none",
+	md: "h-6 rounded-[var(--radius-control)] px-2.5 text-sm leading-none"
 }, b = {
 	sm: "gap-1",
 	md: "gap-1.5"
 }, x = {
-	sm: "h-5 gap-1 rounded-full py-0 pl-0 pr-2 text-xs leading-none",
-	md: "h-6 gap-1.5 rounded-full py-0 pl-0 pr-2.5 text-sm leading-none"
+	sm: "h-5 gap-1 rounded-[var(--radius-control)] py-0 pl-0 pr-2 text-xs leading-none",
+	md: "h-6 gap-1.5 rounded-[var(--radius-control)] py-0 pl-0 pr-2.5 text-sm leading-none"
 }, S = {
 	sm: "size-3 shrink-0 stroke-current",
 	md: "size-3.5 shrink-0 stroke-current"

package/dist/components/atoms/Band/Band.d.ts

@@ -0,0 +1,27 @@
+import type { AriaAttributes, ReactNode } from "react";
+import { type BandElement, type BandSpacing, type BandTone } from "./bandStyles";
+export { bandElements, bandSpacings, bandTones, type BandElement, type BandSpacing, type BandTone, } from "./bandStyles";
+/** Layout-only — margin or grid placement of the band itself. */
+export type BandLayoutClassName = string;
+export interface BandProps {
+    /** Section content, placed on the band's own `grid-page` columns with `col-span-*` / `col-start-*`. */
+    children: ReactNode;
+    /** `default` keeps the page's colours; `inverse` (brand surface) and `field` re-skin everything inside. */
+    tone?: BandTone;
+    /** Space above and below the content: `md` (default) 48px, `lg` 96px, `none`. */
+    spacing?: BandSpacing;
+    /** The band element. Default: `section`. */
+    as?: BandElement;
+    id?: string;
+    "aria-label"?: AriaAttributes["aria-label"];
+    "aria-labelledby"?: AriaAttributes["aria-labelledby"];
+    className?: BandLayoutClassName;
+}
+/**
+ * A full-bleed page section in one of the brand kit's tones. Its tone remaps the surface, text,
+ * border and fill roles (`data-tone`), so every WMDS component inside re-skins with no `className`.
+ * It holds its own `grid-page` on the shared `--grid-*` tokens, so its columns line up with the
+ * page's; placed inside a `grid-page` it bleeds to the viewport edges and keeps the page's columns.
+ */
+export declare function Band({ children, tone, spacing, as: Element, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, }: BandProps): import("react").JSX.Element;
+//# sourceMappingURL=Band.d.ts.map

package/dist/components/atoms/Band/Band.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Band.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Band/Band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,GACd,MAAM,cAAc,CAAC;AAEtB,iEAAiE;AACjE,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,uGAAuG;IACvG,QAAQ,EAAE,SAAS,CAAC;IACpB,2GAA2G;IAC3G,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iFAAiF;IACjF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4CAA4C;IAC5C,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAgB,EAChB,OAAc,EACd,EAAE,EAAE,OAAmB,EACvB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,GACV,EAAE,SAAS,+BAeX"}

package/dist/components/atoms/Band/Band.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn as e } from "../../../lib/cn.js";
+import { bandClasses as t, bandElements as n, bandPageClasses as r, bandSpacingClasses as i, bandSpacings as a, bandTones as o } from "./bandStyles.js";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/atoms/Band/Band.tsx
+function c({ children: n, tone: a = "default", spacing: o = "md", as: c = "section", id: l, "aria-label": u, "aria-labelledby": d, className: f }) {
+	return /* @__PURE__ */ s(c, {
+		id: l,
+		"aria-label": u,
+		"aria-labelledby": d,
+		className: e(t, i[o], f),
+		"data-band": "",
+		"data-tone": a,
+		"data-theme": a === "inverse" ? "dark" : void 0,
+		children: /* @__PURE__ */ s("div", {
+			className: r,
+			children: n
+		})
+	});
+}
+//#endregion
+export { c as Band, n as bandElements, a as bandSpacings, o as bandTones };

package/dist/components/atoms/Band/bandStyles.d.ts

@@ -0,0 +1,20 @@
+export declare const bandTones: readonly ["default", "inverse", "field"];
+/**
+ * `default` — the page's own colours. `inverse` — the brand surface (`--color-brand-surface`, a dark
+ * section; dark status, chart and focus roles). `field` — the saturated section colour (`--color-field`).
+ */
+export type BandTone = (typeof bandTones)[number];
+export declare const bandSpacings: readonly ["md", "lg", "none"];
+/** Space above and below the content: `md` (default) 48px, `lg` 96px, `none` 0. */
+export type BandSpacing = (typeof bandSpacings)[number];
+export declare const bandElements: readonly ["section", "div", "header", "footer", "aside"];
+export type BandElement = (typeof bandElements)[number];
+/**
+ * Full-width block; the inner `grid-page` keeps its columns and margins (grid.css → Band). Inside a
+ * parent `grid-page` it spans every column: a band is full width by definition.
+ */
+export declare const bandClasses = "relative col-[1/-1] block w-full min-w-0";
+/** The inner page drops its own block padding; Band's spacing is the section's. */
+export declare const bandPageClasses = "grid-page !py-0";
+export declare const bandSpacingClasses: Record<BandSpacing, string>;
+//# sourceMappingURL=bandStyles.d.ts.map

package/dist/components/atoms/Band/bandStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bandStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Band/bandStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,0CAA2C,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,YAAY,+BAAgC,CAAC;AAE1D,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,YAAY,0DAA2D,CAAC;AAErF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,WAAW,6CAA6C,CAAC;AAEtE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAI1D,CAAC"}

package/dist/components/atoms/Band/bandStyles.js

@@ -0,0 +1,23 @@
+"use client";
+//#region src/components/atoms/Band/bandStyles.ts
+var e = [
+	"default",
+	"inverse",
+	"field"
+], t = [
+	"md",
+	"lg",
+	"none"
+], n = [
+	"section",
+	"div",
+	"header",
+	"footer",
+	"aside"
+], r = "relative col-[1/-1] block w-full min-w-0", i = "grid-page !py-0", a = {
+	md: "py-[calc(var(--leading-base)*2)]",
+	lg: "py-[calc(var(--leading-base)*4)]",
+	none: ""
+};
+//#endregion
+export { r as bandClasses, n as bandElements, i as bandPageClasses, a as bandSpacingClasses, t as bandSpacings, e as bandTones };

package/dist/components/atoms/Button/ButtonStatusButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonStatusButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,kEAAkE;IAClE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,uHAkE7B,CAAC"}
+{"version":3,"file":"ButtonStatusButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,kEAAkE;IAClE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,uHA6E7B,CAAC"}

package/dist/components/atoms/Button/ButtonStatusButton.js

@@ -9,13 +9,14 @@ import { jsx as f, jsxs as p } from "react/jsx-runtime";
 import { motion as m } from "motion/react";
 //#region src/components/atoms/Button/ButtonStatusButton.tsx
 var h = d(function({ status: d, role: h = "primary", size: g = "md", statusLabels: _, icon: v, disableOnError: y = !1, disabled: b, className: x, children: S, type: C = "button", onClick: w, "aria-label": T, "aria-pressed": E, "aria-keyshortcuts": D, id: O, name: k, form: A, ...j }, M) {
-	let N = u(S, _)[d], P = b || d === "loading" || d === "error" && y, F = r(d, h);
+	let N = u(S, _)[d], P = !b && (d === "loading" || d === "error" && y), F = b || P, I = r(d, h);
 	return /* @__PURE__ */ p(m.button, {
 		...j,
 		ref: M,
 		type: C,
 		layout: !0,
-		disabled: P,
+		disabled: b,
+		"aria-disabled": P || void 0,
 		"aria-busy": d === "loading" || void 0,
 		"aria-live": "polite",
 		"aria-label": T,
@@ -24,12 +25,18 @@ var h = d(function({ status: d, role: h = "primary", size: g = "md", statusLabel
 		"data-role": h,
 		"data-size": g,
 		"data-status": d,
-		animate: F,
+		animate: I,
 		initial: !1,
 		className: e(t, "justify-center", l[g], (d !== "idle" || v != null) && c[g], n, i(d, h), "overflow-hidden", x),
-		whileTap: P ? void 0 : { scale: .98 },
+		whileTap: F ? void 0 : { scale: .98 },
 		transition: a,
-		onClick: w,
+		onClick: (e) => {
+			if (P) {
+				e.preventDefault();
+				return;
+			}
+			w?.(e);
+		},
 		id: O,
 		name: k,
 		form: A,

package/dist/components/atoms/Button/buttonStyles.d.ts

@@ -4,7 +4,7 @@ export type ButtonRole = (typeof buttonRoles)[number];
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export type IconButtonSize = ButtonSize;
 /** All action buttons are pills by default — `layout="row"` for flat full-width detail lines. */
-export declare const buttonPillClass = "rounded-full";
+export declare const buttonPillClass = "rounded-[var(--radius-control)]";
 export declare const buttonLayouts: readonly ["pill", "row", "nav"];
 export type ButtonLayout = (typeof buttonLayouts)[number];
 /** `layout="row"` width: `fill` (default) spans the container; `hug` sizes to its content. */

package/dist/components/atoms/Button/buttonStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStyles.ts"],"names":[],"mappings":"AAMA,uEAAuE;AACvE,eAAO,MAAM,WAAW,oGAQd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,iBAAiB,CAAC;AAE9C,eAAO,MAAM,aAAa,iCAAkC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,8FAA8F;AAC9F,eAAO,MAAM,YAAY,0BAA2B,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,uGAAuG;AACvG,eAAO,MAAM,YAAY,8BAA+B,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,sGAAsG;AACtG,eAAO,MAAM,cAAc,8BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,iBAAiB,QAUd,CAAC;AAEjB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAmBxD,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,2GACuE,CAAC;AAE3G,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,kDAAkD,CAAC;AAEzF,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,kGAC0D,CAAC;AAElG,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK9D,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK5D,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAKhE,CAAC;AAEF,kHAAkH;AAClH,eAAO,MAAM,oBAAoB,QAK+C,CAAC;AAEjF,eAAO,MAAM,sBAAsB,QAEqB,CAAC;AAEzD,mHAAmH;AACnH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG7D,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,QAGqB,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAI/D"}
+{"version":3,"file":"buttonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStyles.ts"],"names":[],"mappings":"AAMA,uEAAuE;AACvE,eAAO,MAAM,WAAW,oGAQd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,oCAAoC,CAAC;AAEjE,eAAO,MAAM,aAAa,iCAAkC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,8FAA8F;AAC9F,eAAO,MAAM,YAAY,0BAA2B,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,uGAAuG;AACvG,eAAO,MAAM,YAAY,8BAA+B,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,sGAAsG;AACtG,eAAO,MAAM,cAAc,8BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,iBAAiB,QAUd,CAAC;AAEjB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAmBxD,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,2GACuE,CAAC;AAE3G,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,kDAAkD,CAAC;AAEzF,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,kGAC0D,CAAC;AAElG,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK9D,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK5D,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAKhE,CAAC;AAEF,kHAAkH;AAClH,eAAO,MAAM,oBAAoB,QAK+C,CAAC;AAEjF,eAAO,MAAM,sBAAsB,QAEqB,CAAC;AAEzD,mHAAmH;AACnH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG7D,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,QAGqB,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAI/D"}

package/dist/components/atoms/Button/buttonStyles.js

@@ -10,7 +10,7 @@ var i = [
 	"inverse",
 	"outline",
 	"inverse-outline"
-], a = "rounded-full", o = [
+], a = "rounded-[var(--radius-control)]", o = [
 	"pill",
 	"row",
 	"nav"
@@ -48,7 +48,7 @@ var i = [
 }, x = "flex cursor-pointer items-center font-sans tracking-normal transition-[color,background-color,outline-color] " + n("fast") + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", S = "h-auto min-h-0 rounded-md px-1.5 py-1 text-left font-normal focus-visible:ring-inset focus-visible:ring-offset-0", C = {
 	fill: "w-full justify-between gap-3",
 	hug: "w-auto justify-start gap-1.5"
-}, w = "h-auto min-h-0 w-full justify-start gap-2.5 rounded-xl px-2.5 py-2 text-left text-sm font-normal leading-[var(--line-height-sm)] focus-visible:ring-inset focus-visible:ring-offset-0";
+}, w = "h-auto min-h-0 w-full justify-start gap-2.5 rounded-[var(--radius-control-box)] px-2.5 py-2 text-left text-sm font-normal leading-[var(--line-height-sm)] focus-visible:ring-inset focus-visible:ring-offset-0";
 function T(e) {
 	return e ? "bg-secondary text-secondary-foreground" : "bg-transparent text-muted hover:bg-ghost-hover hover:text-fg";
 }

package/dist/components/atoms/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAoBL,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4GA4MnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAoBL,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4GAgNnB,CAAC"}