@adia-ai/web-components 0.6.46 → 0.6.48

package/styles/foundation/elevation.css

@@ -0,0 +1,29 @@
+/* adia:primitive/elevation — Shadow primitives (L1).
+   Material-style soft, diffused 4-layer shadows: ambient + penumbra +
+   umbra + contact edge. Hue-tinted via neutral hue. --a-shadow-intensity
+   lets themes control shadow strength (0 = flat, 2 = heavy).
+   Moved verbatim out of tokens.css (v0.6.48 foundation reorg, ADR-0035). */
+
+:root {
+  --a-shadow-intensity: 1;
+  --a-shadow-color: oklch(0.2 0.01 var(--a-neutral-hue));
+  /* Per-layer alpha is applied via the oklch(from …) relative-color
+     syntax — the legacy `var(--c) / alpha` form is invalid outside a
+     color function and silently resolved to `box-shadow: none` (latent
+     bug fixed 2026-04-27). */
+  --a-shadow-sm:
+    0 0.5px 0.5px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
+    0 0.5px 1.5px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.02 * var(--a-shadow-intensity))),
+    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity)));
+  --a-shadow-md:
+    0 0.5px 1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
+    0 1.5px 3px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 4px 12px oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
+  --a-shadow-lg:
+    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 4px 8px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 8px 24px oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
+    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
+}

package/styles/foundation/index.css

@@ -0,0 +1,11 @@
+/* adia:barrel/foundation — non-color, non-type primitive scales (L1).
+   Imported by the tokens.css compat barrel AFTER colors + typography,
+   reproducing the historical cascade position of these primitives
+   (they previously lived inline in the single :root block of tokens.css).
+   Splitting one :root into five is cascade-inert: every token is declared
+   exactly once, so block grouping cannot change any computed value. */
+@import "./space.css";
+@import "./radius.css";
+@import "./size.css";
+@import "./motion.css";
+@import "./elevation.css";

package/styles/foundation/motion.css

@@ -0,0 +1,10 @@
+/* adia:primitive/motion — Duration + easing primitives (L1).
+   Moved verbatim out of tokens.css (v0.6.48 foundation reorg, ADR-0035). */
+
+:root {
+  --a-duration-fast: 120ms;
+  --a-duration: 250ms;
+  --a-duration-slow: 300ms;
+  --a-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --a-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
+}

package/styles/foundation/radius.css

@@ -0,0 +1,27 @@
+/* adia:primitive/radius — Corner-radius primitive scale (L1).
+   Parametric: each token = clamp(min, --a-radius-k × base, max). At k=1,
+   values match the original fixed scale. k=0 → sharp (clamped to min);
+   k=2 → extra round (clamped to max).
+   Moved verbatim out of tokens.css (v0.6.48 foundation reorg, ADR-0035). */
+
+@property --a-radius-k {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+:root {
+  --a-radius-min: 0.25rem;
+  --a-radius-max: 1.25rem;
+  /* §230-bundle (v0.5.9): xs scale notch added for badge / sub-tile / inline-pill use cases needing smaller radius than `sm`. */
+  --a-radius-xs-k: 0.166;
+  --a-radius-sm-k: 0.333;
+  --a-radius-md-k: 0.666;
+  --a-radius-lg-k: 1.000;
+  --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
+  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
+  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
+  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
+  --a-radius-full: 100rem;
+  --a-radius: var(--a-radius-md);
+}

package/styles/foundation/size.css

@@ -0,0 +1,33 @@
+/* adia:primitive/size — Component / chrome / icon sizing primitives (L1).
+   Component heights scale with --a-density (registered in space.css).
+   Chrome heights are fixed structural measurements (not density-scaled).
+   Moved verbatim out of tokens.css (v0.6.48 foundation reorg, ADR-0035). */
+
+:root {
+  /* ── Sizing (component heights) ──
+     Heights scale with density via the space tokens. */
+  --a-size-sm: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
+  --a-size-md: calc(var(--a-density) * 1.875rem); /* 30px at d=1 */
+  --a-size-lg: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
+  --a-size: var(--a-size-md);
+
+  /* ── Chrome heights — global app/feature UI ──
+     App-level chrome (top-level headers, footers, toolbars) is 48px;
+     pane-level chrome (pane headers, footers, toolbars) is 36px.
+     Fixed values — these are structural measurements, not typographic,
+     so they don't scale with --a-density. */
+  --a-chrome-app-header-height:   48px;
+  --a-chrome-app-footer-height:   48px;
+  --a-chrome-app-toolbar-height:  48px;
+  --a-chrome-pane-header-height:  36px;
+  --a-chrome-pane-footer-height:  36px;
+  --a-chrome-pane-toolbar-height: 36px;
+
+  /* ── Toggle-control size (check, radio, switch) ──
+     Tighter additive scale than --a-size: 16 / 20 / 24 px at d=1. */
+  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px at d=1 — md default */
+
+  /* ── Icon / caret ── */
+  --a-icon-size: 1.00rem;
+  --a-caret-size: 0.875rem;
+}

package/styles/foundation/space.css

@@ -0,0 +1,47 @@
+/* adia:primitive/space — Spacing primitive scale (L1).
+   Parametric: each token = --a-density × base. At d=1, values match the
+   original fixed scale. Base unit 0.5rem (8px); named by multiplier of
+   0.25rem. The --a-density knob is registered here (it is fundamentally
+   the spatial-scale multiplier; --a-size-* in size.css also reads it).
+   Moved verbatim out of tokens.css (v0.6.48 foundation reorg, ADR-0035). */
+
+@property --a-density {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+:root {
+  /* ── Spacing ── */
+  --a-space-0: 0;
+  --a-space-px: 1px;
+  --a-space-0-5: calc(var(--a-density) * 0.125rem); /*  2px at d=1 */
+  --a-space-1: calc(var(--a-density) * 0.25rem); /*  4px at d=1 */
+  --a-space-1-5: calc(var(--a-density) * 0.375rem); /*  6px at d=1 */
+  --a-space-2: calc(var(--a-density) * 0.5rem); /*  8px at d=1 */
+  --a-space-2-5: calc(var(--a-density) * 0.625rem); /* 10px at d=1 */
+  --a-space-3: calc(var(--a-density) * 0.75rem); /* 12px at d=1 */
+  --a-space-3-5: calc(var(--a-density) * 0.875rem); /* 14px at d=1 */
+  --a-space-4: calc(var(--a-density) * 1rem); /* 16px at d=1 */
+  --a-space-4-5: calc(var(--a-density) * 1.125rem); /* 18px at d=1 */
+  --a-space-5: calc(var(--a-density) * 1.25rem); /* 20px at d=1 */
+  --a-space-6: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
+  --a-space-7: calc(var(--a-density) * 1.75rem); /* 28px at d=1 */
+  --a-space-8: calc(var(--a-density) * 2rem); /* 32px at d=1 */
+  --a-space-9: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
+  --a-space-10: calc(var(--a-density) * 2.5rem); /* 40px at d=1 */
+  --a-space-12: calc(var(--a-density) * 3rem); /* 48px at d=1 */
+  --a-space-16: calc(var(--a-density) * 4rem); /* 64px at d=1 */
+
+  /* ── Inset ── */
+  --a-inset-sm: var(--a-space-2);
+  --a-inset-md: var(--a-space-4);
+  --a-inset-lg: var(--a-space-6);
+  --a-inset: var(--a-inset-md);
+
+  /* ── Gaps ── */
+  --a-gap-sm: var(--a-space-2);
+  --a-gap-md: var(--a-space-3);
+  --a-gap-lg: var(--a-space-4);
+  --a-gap: var(--a-gap-md);
+}

package/styles/index.css

@@ -0,0 +1,14 @@
+/* adia:barrel/styles — the real all-in-one barrel.
+
+   Imports, in cascade order: design tokens (foundation + type + color +
+   the spatial attribute API, via tokens.css) → component styles → global
+   resets. This is the canonical internal barrel; the package-root
+   `index.css` re-exports it so the published `@adia-ai/web-components/css`
+   entry and the dist bundle are byte-for-byte unchanged.
+
+   Opt-in layers (theme presets, prose context) are linked separately —
+   styles/themes.css and styles/prose.css. */
+
+@import "./tokens.css";
+@import "./components.css";
+@import "./resets.css";

package/styles/resets.css

@@ -1,10 +1,12 @@
 /**
  * Global resets — box-sizing, scrollbar hiding, focus management,
- * element defaults, and the size-query provider utility.
+ * universal normalize, and the size-query provider utility.
  *
- * Imported from styles.css (the barrel). Targets document-level
- * defaults and universal selectors; component-scoped rules live in
- * each component's own CSS under `@scope (component-ui)`.
+ * Imported via styles/index.css (the barrel) and linked directly by most
+ * surfaces. Targets document-level defaults and universal selectors;
+ * component-scoped rules live in each component's own CSS under
+ * `@scope (component-ui)`. Element-level *typographic* defaults live in
+ * styles/type/elements.css (v0.6.48 reorg, ADR-0035), not here.
  */
 
 *,
@@ -94,9 +96,15 @@ ol[role='list'] {
 }
 
 
+/* Global focus fallback for focusable elements WITHOUT their own @scope
+   focus styling (plain <a>, [tabindex], etc.). Components override via
+   --a-focus-ring. `Highlight` (system color) is deliberate — it respects the
+   OS/user focus color and forced-colors mode. Fixed v0.6.48 (ADR-0035): the
+   width hook used the dead --ui-* namespace; --a-focus-width (2px) is the live
+   token, so the computed value is unchanged (2px solid Highlight). */
 :focus-visible {
-  outline: var(--ui-focus-width, 2px) solid var(--ui-focus, Highlight);
-  outline-offset: 2px;
+  outline: var(--a-focus-width, 2px) solid Highlight;
+  outline-offset: var(--a-focus-offset, 2px);
 }
 
 ::selection {
@@ -105,22 +113,6 @@ ol[role='list'] {
   border-radius: var(--a-selection-radius);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-  line-height: 1.1;
-}
-
-p,
-li,
-figcaption {
-  text-wrap: pretty;
-}
-
-a:not([class]) {
-  text-underline-offset: 0.12em;
-}
+/* Native element typography (h1-h6 balance/leading, p/li/figcaption
+   text-wrap, a underline-offset) now lives in styles/type/elements.css —
+   one home for element-level typographic defaults (v0.6.48 reorg, ADR-0035). */

package/styles/tokens.css

@@ -1,389 +1,21 @@
-/* ═══════════════════════════════════════════════════════════════
-   Tokens — Design tokens for chat-ui component system.
-   OKLCH color space · light-dark() adaptive · rem spatial units
+/* adia:barrel/tokens — COMPAT BARREL + foundation token entry point.
 
-   Aesthetic: dark-first, high-contrast, monochromatic.
-   Dark mode uses pure grayscale (zero chroma, zero hue).
-   Light mode carries a cool tint (hue 225).
-   Hierarchy is luminance-only — no accent color for decoration,
-   accent reserved strictly for interactive elements.
+   Public entry point: 1090+ HTML <link>s + the `@adia-ai/web-components/styles/tokens.css`
+   export point at it, so it MUST stay at this path. As of the v0.6.48
+   foundation reorg (ADR-0035) it no longer holds token declarations
+   inline — the real foundation now lives in dimension×layer files:
 
-   Distinguishing choices (from design reference):
-   · Hero numbers use weight-thin (300) at display scale — elegant, not bold
-   · Dark bg is true black — depth comes from luminance steps, never shadows
-   · Overline labels are uppercase + wide tracking (0.06em) for categorization
-   · Flat dark mode — zero shadows, surfaces separated by bg color shifts only
-   · Monospace font is the default — data-confident, technical character
-   ═══════════════════════════════════════════════════════════════ */
+     colors/         L1→L3 color system (parameters · primitives · surfaces · scrims · semantics)
+     typography.css  the type system barrel (type/{scale,roles,elements} + api/{text,layout})
+     foundation/     non-color, non-type primitive scales (space · radius · size · motion · elevation)
+     api/sizing.css  the spatial attribute API ([density][radius][size][gap][padding][margin])
+
+   The import order below reproduces the historical tokens.css cascade
+   exactly: colors → typography → foundation primitives → spatial attribute
+   API. Splitting the former single :root block into per-dimension files is
+   cascade-inert (every token is declared exactly once). */
 
-/* Color ramps + semantic role aliases + typography scale are
-   primitive-layer — every component consumes `--a-fg`, `--a-bg-*`,
-   `--a-font-family`, `--a-body-size`, etc. Kept bundled. */
 @import "./colors/index.css";
 @import "./typography.css";
-
-/* NOT imported here:
-   - styles/prose.css   — opt-in per-page; [prose] attribute only
-   - styles/themes.css  — opt-in per-page; 8 named themes + schemes
-   Link separately from HTML when needed. */
-
-/* ═══════════════════════════════════════════════════════════════
-   PARAMETRIC MULTIPLIERS — @property declarations
-   Two knobs that rescale the entire spatial system.
-   Set on :root for global effect, or on [density]/[radius] for scoped.
-
-   --a-density   Controls ALL spatial dimensions: spacing, padding,
-                 gaps, component heights. One knob for everything.
-   --a-radius-k  Controls corner rounding independently.
-   ═══════════════════════════════════════════════════════════════ */
-
-@property --a-density {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 1;
-}
-@property --a-radius-k {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 1;
-}
-
-:root {
-  /* ═══════════════════════════════════════════════════════════
-     PRIMITIVES — context-free building blocks
-     ═══════════════════════════════════════════════════════════ */
-
-  /* ── Spacing ──
-     Parametric: each token = --a-density × base.
-     At d=1, values match the original fixed scale.
-     Base unit: 0.5rem (8px). Named by multiplier of 0.25rem. */
-  --a-space-0: 0;
-  --a-space-px: 1px;
-  --a-space-0-5: calc(var(--a-density) * 0.125rem); /*  2px at d=1 */
-  --a-space-1: calc(var(--a-density) * 0.25rem); /*  4px at d=1 */
-  --a-space-1-5: calc(var(--a-density) * 0.375rem); /*  6px at d=1 */
-  --a-space-2: calc(var(--a-density) * 0.5rem); /*  8px at d=1 */
-  --a-space-2-5: calc(var(--a-density) * 0.625rem); /* 10px at d=1 */
-  --a-space-3: calc(var(--a-density) * 0.75rem); /* 12px at d=1 */
-  --a-space-3-5: calc(var(--a-density) * 0.875rem); /* 14px at d=1 */
-  --a-space-4: calc(var(--a-density) * 1rem); /* 16px at d=1 */
-  --a-space-4-5: calc(var(--a-density) * 1.125rem); /* 18px at d=1 */
-  --a-space-5: calc(var(--a-density) * 1.25rem); /* 20px at d=1 */
-  --a-space-6: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
-  --a-space-7: calc(var(--a-density) * 1.75rem); /* 28px at d=1 */
-  --a-space-8: calc(var(--a-density) * 2rem); /* 32px at d=1 */
-  --a-space-9: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
-  --a-space-10: calc(var(--a-density) * 2.5rem); /* 40px at d=1 */
-  --a-space-12: calc(var(--a-density) * 3rem); /* 48px at d=1 */
-  --a-space-16: calc(var(--a-density) * 4rem); /* 64px at d=1 */
-
-  /* ── Radius ──
-     Parametric: each token = clamp(min, --a-radius-k × base, max).
-     At k=1, values match the original fixed scale.
-     k=0 → sharp (clamped to min). k=2 → extra round (clamped to max). */
-  --a-radius-min: 0.25rem;
-  --a-radius-max: 1.25rem;
-  /* §230-bundle (v0.5.9): xs scale notch added for badge / sub-tile / inline-pill use cases needing smaller radius than `sm`. */
-  --a-radius-xs-k: 0.166;
-  --a-radius-sm-k: 0.333;
-  --a-radius-md-k: 0.666;
-  --a-radius-lg-k: 1.000;
-  --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
-  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
-  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
-  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
-  --a-radius-full: 100rem;
-  --a-radius: var(--a-radius-md);
-
-  /* ── Inset ── */
-  --a-inset-sm: var(--a-space-2);
-  --a-inset-md: var(--a-space-4);
-  --a-inset-lg: var(--a-space-6);
-  --a-inset: var(--a-inset-md);
-
-  /* ── Gaps ── */
-  --a-gap-sm: var(--a-space-2);
-  --a-gap-md: var(--a-space-3);
-  --a-gap-lg: var(--a-space-4);
-  --a-gap: var(--a-gap-md);
-
-  /* ── Sizing (component heights) ──
-     Heights scale with density via the space tokens. */
-  --a-size-sm: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
-  --a-size-md: calc(var(--a-density) * 1.875rem); /* 30px at d=1 */
-  --a-size-lg: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
-  --a-size: var(--a-size-md);
-
-  /* ── Chrome heights — global app/feature UI ──
-     App-level chrome (top-level headers, footers, toolbars) is 48px;
-     pane-level chrome (pane headers, footers, toolbars) is 36px.
-     Fixed values — these are structural measurements, not typographic,
-     so they don't scale with --a-density. */
-  --a-chrome-app-header-height:   48px;
-  --a-chrome-app-footer-height:   48px;
-  --a-chrome-app-toolbar-height:  48px;
-  --a-chrome-pane-header-height:  36px;
-  --a-chrome-pane-footer-height:  36px;
-  --a-chrome-pane-toolbar-height: 36px;
-
-  /* ── Toggle-control size (check, radio, switch) ──
-     Tighter additive scale than --a-size: 16 / 20 / 24 px at d=1. */
-  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px at d=1 — md default */
-
-  /* ── Motion ── */
-  --a-duration-fast: 120ms;
-  --a-duration: 250ms;
-  --a-duration-slow: 300ms;
-  --a-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --a-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
-
-  /* ── Shadows ──
-     Material-style soft, diffused 4-layer shadows:
-     ambient + penumbra + umbra + contact edge.
-     Hue-tinted via neutral hue. Intensity multiplier
-     allows themes to control shadow strength (0 = flat, 2 = heavy). */
-  --a-shadow-intensity: 1;
-  --a-shadow-color: oklch(0.2 0.01 var(--a-neutral-hue));
-  /* Per-layer alpha is applied via the oklch(from …) relative-color
-     syntax — the legacy `var(--c) / alpha` form is invalid outside a
-     color function and silently resolved to `box-shadow: none` (latent
-     bug fixed 2026-04-27). */
-  --a-shadow-sm:
-    0 0.5px 0.5px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
-    0 0.5px 1.5px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
-    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.02 * var(--a-shadow-intensity))),
-    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity)));
-  --a-shadow-md:
-    0 0.5px 1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
-    0 1.5px 3px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
-    0 4px 12px oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
-    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
-  --a-shadow-lg:
-    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
-    0 4px 8px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
-    0 8px 24px oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
-    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
-
-    --a-icon-size: 1.00rem;
-    --a-caret-size: 0.875rem;
-}
-
-/* ═══════════════════════════════════════════════════════════════
-   DENSITY PRESETS — scoped via [density] attribute.
-   --a-density controls spacing, padding, gaps, AND component heights.
-   --a-radius-k is coupled for visual consistency.
-
-   Usage:
-     <div density="compact">...tight layout...</div>
-     <div density="spacious">...generous layout...</div>
-   ═══════════════════════════════════════════════════════════════ */
-
-[density="compact"] {
-  --a-density: 0.85;
-  --a-radius-k: 0.75;
-}
-
-[density="spacious"] {
-  --a-density: 1.15;
-  --a-radius-k: 1.25;
-}
-
-/* ── Radius presets — scoped via [radius] attribute ── */
-
-[radius="sharp"] {
-  --a-radius-k: 0;
-  --a-radius-min: 0rem;
-  --a-radius-max: 0rem;
-}
-
-[radius="rounded"] {
-  --a-radius-k: 1.5;
-}
-
-[radius="round"] {
-  --a-radius-k: 2;
-  --a-radius-max: 3rem;
-}
-
-/* ═══════════════════════════════════════════════════════════════
-   SIZE PRESETS — universal [size="sm|md|lg"] attribute.
-
-   Sets BOTH component tokens AND container tokens.
-   Each tier shifts the entire typescale to its sm/md/lg variant.
-
-   Component: --a-size, --a-ui-px, --a-ui-size, --a-icon-size
-   Container: --a-inset, --a-gap
-   Typography: all 13 role sizes shift to the tier's variant
-
-   Usage:
-     <button-ui size="sm">            — compact button
-     <card-ui size="lg">...</card-ui>  — spacious card + larger type inside
-     <div size="sm">...</div>        — everything inside scales down
-   ═══════════════════════════════════════════════════════════════ */
-/* ── sm — dense data UIs, sidebars, inspectors ── */
-[size] {
-  font-size: var(--a-body-size);
-}
-[size="sm"] {
-  /* Component */
-  --a-size: calc(var(--a-density) * 1.5rem);
-  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-2)); /* 16px at d=1 */
-  --a-ui-px: var(--a-space-1-5);
-  --a-ui-size: var(--a-ui-sm);
-  --a-icon-size: 0.875rem;
-  --a-caret-size: 0.75rem;
-  /* Container */
-  --a-inset: var(--a-inset-sm);
-  --a-gap: var(--a-gap-sm);
-  --a-radius: var(--a-radius-sm);
-  /* Typography — all roles shift to -sm */
-  --a-display-size: var(--a-display-sm);
-  --a-title-size: var(--a-title-sm);
-  --a-heading-size: var(--a-heading-sm);
-  --a-section-size: var(--a-section-sm);
-  --a-subsection-size: var(--a-subsection-sm);
-  --a-body-size: var(--a-body-sm);
-  --a-deck-size: var(--a-deck-sm);
-  --a-caption-size: var(--a-caption-sm);
-  --a-kicker-size: var(--a-kicker-sm);
-  --a-label-size: var(--a-label-sm);
-  --a-metric-size: var(--a-metric-sm);
-  --a-code-size: var(--a-code-sm);
-}
-
-/* [size="md"] is the default — no overrides needed */
-
-/* ── lg — pages, hero sections, marketing ── */
-[size="lg"] {
-  /* Component */
-  --a-size: calc(var(--a-density) * 2.25rem);
-  --a-toggle-size: var(--a-size-sm); /* 24px at d=1 */
-  --a-ui-px: var(--a-space-3);
-  --a-ui-size: var(--a-ui-lg);
-  --a-icon-size: 1.25rem;
-  --a-caret-size: 1rem;
-  /* Container */
-  --a-inset: var(--a-inset-lg);
-  --a-gap: var(--a-gap-lg);
-  --a-radius: var(--a-radius-lg);
-  /* Typography — all roles shift to -lg */
-  --a-display-size: var(--a-display-lg);
-  --a-title-size: var(--a-title-lg);
-  --a-heading-size: var(--a-heading-lg);
-  --a-section-size: var(--a-section-lg);
-  --a-subsection-size: var(--a-subsection-lg);
-  --a-body-size: var(--a-body-lg);
-  --a-deck-size: var(--a-deck-lg);
-  --a-caption-size: var(--a-caption-lg);
-  --a-kicker-size: var(--a-kicker-lg);
-  --a-label-size: var(--a-label-lg);
-  --a-metric-size: var(--a-metric-lg);
-  --a-code-size: var(--a-code-lg);
-}
-
-[gap="0"] {
-  --a-gap: 0;
-}
-[gap="1"] {
-  --a-gap: var(--a-space-1);
-}
-[gap="2"] {
-  --a-gap: var(--a-space-2);
-}
-[gap="3"] {
-  --a-gap: var(--a-space-3);
-}
-[gap="4"] {
-  --a-gap: var(--a-space-4);
-}
-[gap="5"] {
-  --a-gap: var(--a-space-5);
-}
-[gap="6"] {
-  --a-gap: var(--a-space-6);
-}
-[gap="7"] {
-  --a-gap: var(--a-space-7);
-}
-[gap="8"] {
-  --a-gap: var(--a-space-8);
-}
-[gap="9"] {
-  --a-gap: var(--a-space-9);
-}
-[gap="10"] {
-  --a-gap: var(--a-space-10);
-}
-[gap="12"] {
-  --a-gap: var(--a-space-12);
-}
-[gap="16"] {
-  --a-gap: var(--a-space-16);
-}
-
-[gap="sm"] {
-  --a-gap: var(--a-space-4);
-}
-[gap="md"] {
-  --a-gap: var(--a-space-6);
-}
-[gap="lg"] {
-  --a-gap: var(--a-space-8);
-}
-
-/* ── Universal [padding] / [margin] — same scale as [gap]. Layout
-   primitives (row-ui, col-ui, grid-ui, stack-ui) opt in by reading
-   var(--a-padding, 0) and var(--a-margin, 0). Components with their
-   own padding/margin contracts (block-ui, card-ui, drawer-ui) keep
-   their scoped declarations and aren't affected.
-
-   Registered as non-inheriting via @property so a parent's
-   [padding="6"] doesn't bleed into nested layout primitives —
-   children see the initial-value (0) unless they declare their own
-   [padding] / [margin]. */
-@property --a-padding {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-@property --a-margin {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-
-[padding="0"]  { --a-padding: 0; }
-[padding="1"]  { --a-padding: var(--a-space-1); }
-[padding="2"]  { --a-padding: var(--a-space-2); }
-[padding="3"]  { --a-padding: var(--a-space-3); }
-[padding="4"]  { --a-padding: var(--a-space-4); }
-[padding="5"]  { --a-padding: var(--a-space-5); }
-[padding="6"]  { --a-padding: var(--a-space-6); }
-[padding="7"]  { --a-padding: var(--a-space-7); }
-[padding="8"]  { --a-padding: var(--a-space-8); }
-[padding="9"]  { --a-padding: var(--a-space-9); }
-[padding="10"] { --a-padding: var(--a-space-10); }
-[padding="12"] { --a-padding: var(--a-space-12); }
-[padding="16"] { --a-padding: var(--a-space-16); }
-
-[padding="sm"] { --a-padding: var(--a-space-4); }
-[padding="md"] { --a-padding: var(--a-space-6); }
-[padding="lg"] { --a-padding: var(--a-space-8); }
-
-[margin="0"]  { --a-margin: 0; }
-[margin="1"]  { --a-margin: var(--a-space-1); }
-[margin="2"]  { --a-margin: var(--a-space-2); }
-[margin="3"]  { --a-margin: var(--a-space-3); }
-[margin="4"]  { --a-margin: var(--a-space-4); }
-[margin="5"]  { --a-margin: var(--a-space-5); }
-[margin="6"]  { --a-margin: var(--a-space-6); }
-[margin="7"]  { --a-margin: var(--a-space-7); }
-[margin="8"]  { --a-margin: var(--a-space-8); }
-[margin="9"]  { --a-margin: var(--a-space-9); }
-[margin="10"] { --a-margin: var(--a-space-10); }
-[margin="12"] { --a-margin: var(--a-space-12); }
-[margin="16"] { --a-margin: var(--a-space-16); }
-
-[margin="sm"] { --a-margin: var(--a-space-4); }
-[margin="md"] { --a-margin: var(--a-space-6); }
-[margin="lg"] { --a-margin: var(--a-space-8); }
+@import "./foundation/index.css";
+@import "./api/sizing.css";