@adia-ai/web-components 0.8.48 → 0.8.50

package/index.css

@@ -13,8 +13,7 @@
  *   @adia-ai/web-components/styles/index.css     (primitives only)
  *   @adia-ai/web-components/styles/tokens.css    (tokens only)
  *   @adia-ai/web-components/styles/themes.css    (optional — named theme presets)
- *   @adia-ai/web-components/styles/prose.css     (optional — prose context)
- *   @adia-ai/web-components/styles/verse.css     (optional — compact density)
+ *   @adia-ai/web-components/styles/scale.css     (optional — [scale] sizing register)
  */
 
 @import "./styles/host.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.48",
+  "version": "0.8.50",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/README.md

@@ -297,7 +297,7 @@ styles/
 │   └── layout.css          #   [hidden] [nomargin] [grow]
 │
 ├── themes.css              # CONTEXT: 8 named themes + light/dark scheme overrides ([theme])
-├── prose.css               # CONTEXT: opt-in article typography ([prose])
+├── scale.css               # CONTEXT: six-tier ancestor sizing register ([scale])
 ├── resets.css              # global RESET (box-sizing, scrollbar, focus, normalize)
 ├── fonts.css               # @font-face declarations + font-family primitives
 ├── components.css          # per-component @import barrel

package/styles/api/sizing.css

@@ -172,7 +172,7 @@
 
    Sets --a-gap-self, a NON-inheriting token, so an explicit gap on a
    parent does NOT leak into nested layout primitives. This is the
-   counterpart to --a-gap, the AMBIENT gap set by [size]/[prose]/:root
+   counterpart to --a-gap, the AMBIENT gap set by [size]/[scale]/:root
    (which DOES inherit — `<div size="sm">` shifts the whole subtree).
    Gap-reading components resolve `var(--a-gap-self, var(--a-gap))`:
    explicit-if-present, else fall through to the inherited ambient.

package/styles/host.css

@@ -21,10 +21,7 @@
 
    ── Opt-in add-ons (link separately when wanted) ─────────────────────
      styles/themes.css   the [theme] preset switcher      (@layer context)
-     styles/prose.css    the [prose] content context           (@layer context)
-     styles/verse.css    the [verse] compact register          (opt-in density)
-     styles/scale.css    the [scale] six-tier register — supersedes
-                          [verse]/[prose]                       (@layer context)
+     styles/scale.css    the [scale] six-tier sizing register (@layer context)
 
    See ADR-0035 (foundation reorg) + ADR-0038 (cascade layers). */
 

package/styles/index.css

@@ -7,8 +7,8 @@
      <link rel="stylesheet" href="@adia-ai/web-components/styles/host.css" />
      <link rel="stylesheet" href="@adia-ai/web-components/styles/index.css" />
 
-   Opt-in layers (theme presets, prose context, verse density) are linked
-   separately — styles/themes.css, styles/prose.css, styles/verse.css.
+   Opt-in layers (theme presets, the [scale] sizing register) are linked
+   separately — styles/themes.css, styles/scale.css.
 
    Composite-element CSS (chat-shell, editor-shell, admin-shell, etc.)
    lives in @adia-ai/web-modules — link its barrel separately:

package/styles/scale.css

@@ -5,11 +5,11 @@
    lookup (never a multiplier — multipliers drift height/font/icon
    off coherent rows; agent-ui ADR-0038 precedent):
 
-     [scale="ui-sm"]       dense product UI    (≡ legacy [verse])
+     [scale="ui-sm"]       dense product UI
      [scale="ui-md"]       the base register   (≡ :root defaults)
      [scale="ui-lg"]       touch/presentation UI
      [scale="content-sm"]  compact article
-     [scale="content-md"]  long-form default   (≡ legacy [prose])
+     [scale="content-md"]  long-form default
      [scale="content-lg"]  hero / marketing
 
    Control-band overlap: content-sm ≡ ui-md and content-md ≡ ui-lg
@@ -20,25 +20,19 @@
    the full *-sm/md/lg families, so the universal [size] attribute
    keeps working on and below a scaled element. Tokens compute at
    their declaration site, so each tier RE-DECLARES every pointer it
-   shifts (the [verse]/[prose] gotcha), and carries explicit
-   [size] tier rules — this context layer shadows the utilities-layer
-   global [size] rules for any token the tier pins.
-
-   Selector shape: [scale][scale="X"] (0-2-0) so a tier
-   deterministically beats the legacy [verse]/[prose] attributes
-   (0-1-0) regardless of stylesheet adoption order. Never a bare
-   [scale] selector — heatmap-ui reflects scale="linear|log" and
-   legacy theme-provider reflects scale="verse|prose".
-
-   [verse]/[prose] are DEPRECATED in favor of ui-sm / content-md and
-   are removed at v1.0. Do not combine verse|prose with [scale] on
-   one element.
-
-   ui-sm, ui-md and content-md are byte-derived from verse.css,
-   :root and prose.css respectively — an unscaled page and a
-   [scale="ui-md"] page render identically. ui-lg, content-sm and
-   content-lg are DEDUCED rows (one-step shifts of their neighbors)
-   — proposed, tune to taste.
+   shifts, and carries explicit [size] tier rules — this context
+   layer shadows the utilities-layer global [size] rules for any
+   token the tier pins.
+
+   Selector shape: [scale][scale="X"] (0-2-0). Never a bare [scale]
+   selector — heatmap-ui reflects scale="linear|log", a different
+   vocabulary on the same attribute name.
+
+   ui-sm, ui-md and content-md were originally byte-derived from the
+   now-removed compact-density and long-form-content sheets (gh#1885) —
+   an unscaled page and a [scale="ui-md"] page render identically.
+   ui-lg, content-sm and content-lg are DEDUCED rows (one-step shifts
+   of their neighbors) — proposed, tune to taste.
 
    --a-density is orthogonal and composes: every spacing value rides
    the --a-space-* rungs and every control row multiplies
@@ -302,7 +296,7 @@
     --a-size-lg: calc(var(--a-density) * 2.75rem); /* 44px */
     --a-size: var(--a-size-md);
 
-    /* prose type register (prose.css byte-values) */
+    /* content-md type register (byte-values from the removed prose sheet, gh#1885) */
     --a-display-sm: clamp(24px, 20px + 1.5vw, 36px);
     --a-display-md: clamp(32px, 24px + 3vw, 56px);
     --a-display-lg: clamp(40px, 32px + 4vw, 80px);
@@ -644,10 +638,9 @@
      the base row). */
 
   /* ═══════════════ Content-band flow enhancements ═══════════════
-     Ported from prose.css so every content tier gets them.
-     [scale^="content-"] is value-prefixed — cannot collide with
-     heatmap-ui's scale="linear|log" or legacy theme-provider
-     scale="verse|prose". */
+     Ported from the removed prose sheet (gh#1885) so every content
+     tier gets them. [scale^="content-"] is value-prefixed — cannot
+     collide with heatmap-ui's scale="linear|log". */
   [scale^="content-"] > :is(p, ul, ol, blockquote, pre, table, dl) {
     max-width: var(--prose-max-width);
   }

package/styles/themes.css

@@ -56,8 +56,8 @@
      <html theme="velour">...entire app...</html>
    ═══════════════════════════════════════════════════════════════ */
 
-/* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
-   context sits above `utilities`+`components`, so a [theme]/[prose] scope
+/* All rules below are the `context` layer (ADR-0038 step 7): theme/scale
+   context sits above `utilities`+`components`, so a [theme]/[scale] scope
    re-skins everything within it. The @layer order is declared by the co-loaded
    barrel (styles/index.css); this file only contributes to `context`. */
 @layer context {

package/styles/type/roles.css

@@ -260,12 +260,12 @@
   /* ═══════════════════════════════════════════════════════════
      MODE OVERRIDES — REGISTER (voice) control.
 
-     [prose] is ORTHOGONAL to [size]:
-       • [prose] shifts the sm/md/lg VALUES (bigger at every tier)
+     [scale="content-md"] is ORTHOGONAL to [size]:
+       • [scale="content-md"] shifts the sm/md/lg VALUES (bigger at every tier)
          and changes the DEFAULT tier pick to -md for all roles.
        • [size] on containers shifts which tier is active.
 
-     Neither [prose] nor [size] should be set globally on <body>.
+     Neither [scale="content-md"] nor [size] should be set globally on <body>.
      Both scope to containers — a page can have a compact sidebar
      + expressive hero + standard body.
      ═══════════════════════════════════════════════════════════ */

package/styles/typography.css

@@ -25,24 +25,25 @@
    tokens so every consuming component tracks the cascade.
 
    THREE PUBLICATION REGISTERS  (inset · gap · control · type · radius scale together)
-     [verse] — Dense product UI (inspectors, tables, toolbars, side rails).
+     [scale="ui-sm"] — Dense product UI (inspectors, tables, toolbars, side rails).
        Smallest scale: tight inset/gap, small controls + type, tight radius
-       (max 16px). Type SHIFTS with [size] (body 11/12/13). styles/verse.css.
+       (max 16px). Type SHIFTS with [size] (body 11/12/13). styles/scale.css.
 
      Default (productive) — Product UI.
        Static, compressed scale. Announce/Divide roles default to -sm
        because product UI rarely needs hero-scale type. Everything else
        defaults to -md. 1-2 px between tiers. No fluid clamps in UI chrome.
 
-     [prose] — Long-form content (articles, docs, marketing).
+     [scale="content-md"] — Long-form content (articles, docs, marketing).
        Dynamic scale. All roles default to -md (type PINNED — doesn't shift
        with [size]). Fluid clamps on display/title/metric respond to viewport.
        Reading measure (max-width) + generous insets + rounder radius (max 28px).
 
    TIERS
      Base defaults to -sm. [size="md"] or [size="lg"] on containers shifts up.
-     [verse] keeps the base convention (type shifts with [size]); [prose]
-     overrides to -md defaults (pinned) with fluid viewport-responsive clamps.
+     [scale="ui-sm"] keeps the base convention (type shifts with [size]);
+     [scale="content-md"] overrides to -md defaults (pinned) with fluid
+     viewport-responsive clamps.
 
    FONTS
      --a-font-family-sans    — long-form, marketing body

package/dist/prose.min.css

@@ -1 +0,0 @@
-@layer context{[prose]{--a-radius-min:.375rem;--a-radius-max:1.75rem;--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:var(--a-radius-md);--a-inset-sm:var(--a-space-8);--a-inset-md:var(--a-space-10);--a-inset-lg:var(--a-space-12);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-4) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-5) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-6) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-7) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-size-sm:calc(var(--a-density) * 1.75rem);--a-size-md:calc(var(--a-density) * 2.25rem);--a-size-lg:calc(var(--a-density) * 2.75rem);--a-size:var(--a-size-md);--a-display-sm:clamp(24px, 20px + 1.5vw, 36px);--a-display-md:clamp(32px, 24px + 3vw, 56px);--a-display-lg:clamp(40px, 32px + 4vw, 80px);--a-display-size:var(--a-display-md);--a-title-sm:clamp(18px, 16px + .75vw, 24px);--a-title-md:clamp(24px, 20px + 1.5vw, 36px);--a-title-lg:clamp(28px, 24px + 2vw, 48px);--a-title-size:var(--a-title-md);--a-heading-sm:16px;--a-heading-md:20px;--a-heading-lg:24px;--a-heading-size:var(--a-heading-md);--a-section-sm:14px;--a-section-md:17px;--a-section-lg:20px;--a-section-size:var(--a-section-md);--a-subsection-sm:13px;--a-subsection-md:15px;--a-subsection-lg:17px;--a-subsection-size:var(--a-subsection-md);--a-body-sm:14px;--a-body-md:16px;--a-body-lg:18px;--a-body-size:var(--a-body-md);--a-deck-sm:15px;--a-deck-md:18px;--a-deck-lg:20px;--a-deck-size:var(--a-deck-md);--a-caption-sm:14px;--a-caption-md:15px;--a-caption-lg:16px;--a-caption-size:var(--a-caption-md);--a-kicker-sm:14px;--a-kicker-md:15px;--a-kicker-lg:16px;--a-kicker-size:var(--a-kicker-md);--a-label-sm:12px;--a-label-md:13px;--a-label-lg:14px;--a-label-size:var(--a-label-md);--a-metric-sm:clamp(20px, 16px + 1.5vw, 32px);--a-metric-md:clamp(28px, 24px + 2vw, 48px);--a-metric-lg:clamp(40px, 32px + 4vw, 72px);--a-metric-size:var(--a-metric-md);--a-code-sm:14px;--a-code-md:15px;--a-code-lg:16px;--a-code-size:var(--a-code-md);--a-ui-px:var(--a-space-3);--a-ui-py:var(--a-space-2);--a-ui-sm:14px;--a-ui-md:15px;--a-ui-lg:16px;--a-ui-size:var(--a-ui-md);--prose-max-width-sm:55ch;--prose-max-width-md:65ch;--prose-max-width-lg:75ch;--prose-max-width:var(--prose-max-width-md)}[prose][size=lg],[prose] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-radius:var(--a-radius-lg)}[prose][size=sm],[prose] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-radius:var(--a-radius-sm)}[prose]>:is(p,ul,ol,blockquote,pre,table,dl){max-width:var(--prose-max-width)}[prose] :is(ul,ol){margin-block:.75em;padding-inline-start:1.75em}[prose] li+li{margin-block-start:.375em}[prose] blockquote{padding:var(--a-space-4) var(--a-space-6);font-size:var(--a-body-size);border-inline-start-width:4px}[prose] hr{margin-block:var(--a-space-6)}[prose] table{border:1px solid var(--a-border-subtle);border-radius:var(--a-radius-md);overflow:hidden}[prose] th{background:var(--a-bg-muted)}[prose] pre{padding:var(--a-space-5)}[prose] img{border-radius:var(--a-radius-lg)}}

package/dist/prose.sheet.js

@@ -1,11 +0,0 @@
-// Auto-generated by scripts/build/bundle-css.mjs — DO NOT EDIT.
-// Constructable CSSStyleSheet form of prose.min.css (same build, byte-identical CSS).
-// For <theme-provider> / runtime injection where a <link> in <head> isn't possible.
-const css = "@layer context{[prose]{--a-radius-min:.375rem;--a-radius-max:1.75rem;--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:var(--a-radius-md);--a-inset-sm:var(--a-space-8);--a-inset-md:var(--a-space-10);--a-inset-lg:var(--a-space-12);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-4) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-5) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-6) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-7) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-size-sm:calc(var(--a-density) * 1.75rem);--a-size-md:calc(var(--a-density) * 2.25rem);--a-size-lg:calc(var(--a-density) * 2.75rem);--a-size:var(--a-size-md);--a-display-sm:clamp(24px, 20px + 1.5vw, 36px);--a-display-md:clamp(32px, 24px + 3vw, 56px);--a-display-lg:clamp(40px, 32px + 4vw, 80px);--a-display-size:var(--a-display-md);--a-title-sm:clamp(18px, 16px + .75vw, 24px);--a-title-md:clamp(24px, 20px + 1.5vw, 36px);--a-title-lg:clamp(28px, 24px + 2vw, 48px);--a-title-size:var(--a-title-md);--a-heading-sm:16px;--a-heading-md:20px;--a-heading-lg:24px;--a-heading-size:var(--a-heading-md);--a-section-sm:14px;--a-section-md:17px;--a-section-lg:20px;--a-section-size:var(--a-section-md);--a-subsection-sm:13px;--a-subsection-md:15px;--a-subsection-lg:17px;--a-subsection-size:var(--a-subsection-md);--a-body-sm:14px;--a-body-md:16px;--a-body-lg:18px;--a-body-size:var(--a-body-md);--a-deck-sm:15px;--a-deck-md:18px;--a-deck-lg:20px;--a-deck-size:var(--a-deck-md);--a-caption-sm:14px;--a-caption-md:15px;--a-caption-lg:16px;--a-caption-size:var(--a-caption-md);--a-kicker-sm:14px;--a-kicker-md:15px;--a-kicker-lg:16px;--a-kicker-size:var(--a-kicker-md);--a-label-sm:12px;--a-label-md:13px;--a-label-lg:14px;--a-label-size:var(--a-label-md);--a-metric-sm:clamp(20px, 16px + 1.5vw, 32px);--a-metric-md:clamp(28px, 24px + 2vw, 48px);--a-metric-lg:clamp(40px, 32px + 4vw, 72px);--a-metric-size:var(--a-metric-md);--a-code-sm:14px;--a-code-md:15px;--a-code-lg:16px;--a-code-size:var(--a-code-md);--a-ui-px:var(--a-space-3);--a-ui-py:var(--a-space-2);--a-ui-sm:14px;--a-ui-md:15px;--a-ui-lg:16px;--a-ui-size:var(--a-ui-md);--prose-max-width-sm:55ch;--prose-max-width-md:65ch;--prose-max-width-lg:75ch;--prose-max-width:var(--prose-max-width-md)}[prose][size=lg],[prose] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-radius:var(--a-radius-lg)}[prose][size=sm],[prose] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-radius:var(--a-radius-sm)}[prose]>:is(p,ul,ol,blockquote,pre,table,dl){max-width:var(--prose-max-width)}[prose] :is(ul,ol){margin-block:.75em;padding-inline-start:1.75em}[prose] li+li{margin-block-start:.375em}[prose] blockquote{padding:var(--a-space-4) var(--a-space-6);font-size:var(--a-body-size);border-inline-start-width:4px}[prose] hr{margin-block:var(--a-space-6)}[prose] table{border:1px solid var(--a-border-subtle);border-radius:var(--a-radius-md);overflow:hidden}[prose] th{background:var(--a-bg-muted)}[prose] pre{padding:var(--a-space-5)}[prose] img{border-radius:var(--a-radius-lg)}}";
-let _sheet = null;
-export function constructSheet() {
-  if (typeof CSSStyleSheet === 'undefined') return null; // non-DOM (SSR/Node) — link the .min.css instead
-  if (!_sheet) { _sheet = new CSSStyleSheet(); _sheet.replaceSync(css); }
-  return _sheet;
-}
-export default constructSheet;

package/dist/verse.min.css

@@ -1 +0,0 @@
-@layer context{[verse]{--a-inset-sm:var(--a-space-2-5);--a-inset-md:var(--a-space-3);--a-inset-lg:var(--a-space-3-5);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-2) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-2-5) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-3-5) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-4) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-radius-min:.25rem;--a-radius-max:.75rem;--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:var(--a-radius-md);--a-size-sm:calc(var(--a-density) * 1.25rem);--a-size-md:calc(var(--a-density) * 1.5rem);--a-size-lg:calc(var(--a-density) * 1.75rem);--a-size:var(--a-size-md);--a-icon-size:16px;--a-caret-size:14px;--a-toggle-size:var(--a-space-5);--a-display-sm:18px;--a-display-md:23px;--a-display-lg:29px;--a-title-sm:16px;--a-title-md:19px;--a-title-lg:22px;--a-heading-sm:13px;--a-heading-md:14px;--a-heading-lg:15px;--a-section-sm:13px;--a-section-md:14px;--a-section-lg:16px;--a-subsection-sm:12px;--a-subsection-md:13px;--a-subsection-lg:14px;--a-body-sm:11px;--a-body-md:12px;--a-body-lg:13px;--a-deck-sm:14px;--a-deck-md:15px;--a-deck-lg:16px;--a-caption-sm:10px;--a-caption-md:11px;--a-caption-lg:12px;--a-kicker-sm:10px;--a-kicker-md:10px;--a-kicker-lg:11px;--a-label-sm:10px;--a-label-md:10px;--a-label-lg:11px;--a-metric-sm:19px;--a-metric-md:25px;--a-metric-lg:34px;--a-code-sm:11px;--a-code-md:12px;--a-code-lg:13px;--a-ui-px:var(--a-space-2);--a-ui-py:var(--a-space-1);--a-ui-sm:11px;--a-ui-md:12px;--a-ui-lg:13px}[verse]:not([size]){--a-display-size:var(--a-display-md);--a-title-size:var(--a-title-md);--a-heading-size:var(--a-heading-md);--a-section-size:var(--a-section-md);--a-subsection-size:var(--a-subsection-md);--a-body-size:var(--a-body-md);--a-deck-size:var(--a-deck-md);--a-caption-size:var(--a-caption-md);--a-kicker-size:var(--a-kicker-md);--a-label-size:var(--a-label-md);--a-metric-size:var(--a-metric-md);--a-code-size:var(--a-code-md);--a-ui-size:var(--a-ui-md)}[verse][size=lg],[verse] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-icon-size:18px;--a-caret-size:16px;--a-toggle-size:var(--a-space-6)}[verse][size=sm],[verse] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-icon-size:14px;--a-caret-size:12px;--a-toggle-size:var(--a-space-4)}}

package/dist/verse.sheet.js

@@ -1,11 +0,0 @@
-// Auto-generated by scripts/build/bundle-css.mjs — DO NOT EDIT.
-// Constructable CSSStyleSheet form of verse.min.css (same build, byte-identical CSS).
-// For <theme-provider> / runtime injection where a <link> in <head> isn't possible.
-const css = "@layer context{[verse]{--a-inset-sm:var(--a-space-2-5);--a-inset-md:var(--a-space-3);--a-inset-lg:var(--a-space-3-5);--a-inset:var(--a-inset-md);--a-gap-xs:calc(var(--a-space-2) * var(--a-gap-k));--a-gap-sm:calc(var(--a-space-2-5) * var(--a-gap-k));--a-gap-md:calc(var(--a-space-3) * var(--a-gap-k));--a-gap-lg:calc(var(--a-space-3-5) * var(--a-gap-k));--a-gap-xl:calc(var(--a-space-4) * var(--a-gap-k));--a-gap:var(--a-gap-md);--a-radius-min:.25rem;--a-radius-max:.75rem;--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:var(--a-radius-md);--a-size-sm:calc(var(--a-density) * 1.25rem);--a-size-md:calc(var(--a-density) * 1.5rem);--a-size-lg:calc(var(--a-density) * 1.75rem);--a-size:var(--a-size-md);--a-icon-size:16px;--a-caret-size:14px;--a-toggle-size:var(--a-space-5);--a-display-sm:18px;--a-display-md:23px;--a-display-lg:29px;--a-title-sm:16px;--a-title-md:19px;--a-title-lg:22px;--a-heading-sm:13px;--a-heading-md:14px;--a-heading-lg:15px;--a-section-sm:13px;--a-section-md:14px;--a-section-lg:16px;--a-subsection-sm:12px;--a-subsection-md:13px;--a-subsection-lg:14px;--a-body-sm:11px;--a-body-md:12px;--a-body-lg:13px;--a-deck-sm:14px;--a-deck-md:15px;--a-deck-lg:16px;--a-caption-sm:10px;--a-caption-md:11px;--a-caption-lg:12px;--a-kicker-sm:10px;--a-kicker-md:10px;--a-kicker-lg:11px;--a-label-sm:10px;--a-label-md:10px;--a-label-lg:11px;--a-metric-sm:19px;--a-metric-md:25px;--a-metric-lg:34px;--a-code-sm:11px;--a-code-md:12px;--a-code-lg:13px;--a-ui-px:var(--a-space-2);--a-ui-py:var(--a-space-1);--a-ui-sm:11px;--a-ui-md:12px;--a-ui-lg:13px}[verse]:not([size]){--a-display-size:var(--a-display-md);--a-title-size:var(--a-title-md);--a-heading-size:var(--a-heading-md);--a-section-size:var(--a-section-md);--a-subsection-size:var(--a-subsection-md);--a-body-size:var(--a-body-md);--a-deck-size:var(--a-deck-md);--a-caption-size:var(--a-caption-md);--a-kicker-size:var(--a-kicker-md);--a-label-size:var(--a-label-md);--a-metric-size:var(--a-metric-md);--a-code-size:var(--a-code-md);--a-ui-size:var(--a-ui-md)}[verse][size=lg],[verse] [size=lg]{--a-inset:var(--a-inset-lg);--a-gap:var(--a-gap-lg);--a-size:var(--a-size-lg);--a-icon-size:18px;--a-caret-size:16px;--a-toggle-size:var(--a-space-6)}[verse][size=sm],[verse] [size=sm]{--a-inset:var(--a-inset-sm);--a-gap:var(--a-gap-sm);--a-size:var(--a-size-sm);--a-icon-size:14px;--a-caret-size:12px;--a-toggle-size:var(--a-space-4)}}";
-let _sheet = null;
-export function constructSheet() {
-  if (typeof CSSStyleSheet === 'undefined') return null; // non-DOM (SSR/Node) — link the .min.css instead
-  if (!_sheet) { _sheet = new CSSStyleSheet(); _sheet.replaceSync(css); }
-  return _sheet;
-}
-export default constructSheet;

package/styles/prose.css

@@ -1,211 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   PROSE — content context via [prose] attribute.
-
-   ⚠ DEPRECATED (v0.8.11) — superseded by [scale="content-md"]
-   (styles/scale.css, byte-identical values). Removed at v1.0.
-   Do not combine [prose] with [scale] on one element.
-
-   Shifts the entire spatial + typographic context to
-   content-optimized values. Overrides the sm/md/lg tier tokens
-   so the standard [size] selector in tokens.css still works.
-
-     <section prose>...</section>            — md (default)
-     <article prose size="sm">...</article>  — compact prose
-     <div prose size="lg">...</div>          — spacious prose
-   ═══════════════════════════════════════════════════════════════ */
-
-/* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
-   context sits above `utilities`+`components`, so a [theme]/[prose] scope
-   re-skins everything within it. The @layer order is declared by the co-loaded
-   barrel (styles/index.css); this file only contributes to `context`. */
-@layer context {
-  [prose] {
-    /* ── Radius — prose register: rounder bounds (max 28px) than UI. ── */
-    --a-radius-min: 0.375rem; /* 6px */
-    --a-radius-max: 1.75rem;  /* 28px */
-    --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: var(--a-radius-md);
-
-    /* ── Inset — prose register (generous; sm/md/lg = 32/40/48). ── */
-    --a-inset-sm: var(--a-space-8);  /* 32px */
-    --a-inset-md: var(--a-space-10); /* 40px */
-    --a-inset-lg: var(--a-space-12); /* 48px */
-    --a-inset: var(--a-inset-md);
-
-    /* ── Gaps — prose register (value × --a-gap-k), one rung up from regular.
-       At k=1: 12/16/20/24/28px. ── */
-    --a-gap-xs: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
-    --a-gap-sm: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
-    --a-gap-md: calc(var(--a-space-5) * var(--a-gap-k)); /* 20px @k=1 */
-    --a-gap-lg: calc(var(--a-space-6) * var(--a-gap-k)); /* 24px @k=1 */
-    --a-gap-xl: calc(var(--a-space-7) * var(--a-gap-k)); /* 28px @k=1 */
-    --a-gap: var(--a-gap-md);
-
-    /* ── Sizing — larger controls ── */
-    --a-size-sm: calc(var(--a-density) * 1.75rem);
-    --a-size-md: calc(var(--a-density) * 2.25rem);
-    --a-size-lg: calc(var(--a-density) * 2.75rem);
-    --a-size: var(--a-size-md);
-
-    /* ── Typography — override sm/md/lg tiers with prose sizes
-     Also set --a-*-size to -md (base typography defaults to -sm) ── */
-
-    /* display */
-    --a-display-sm: clamp(24px, 20px + 1.5vw, 36px);
-    --a-display-md: clamp(32px, 24px + 3vw, 56px);
-    --a-display-lg: clamp(40px, 32px + 4vw, 80px);
-    --a-display-size: var(--a-display-md);
-
-    /* title */
-    --a-title-sm: clamp(18px, 16px + 0.75vw, 24px);
-    --a-title-md: clamp(24px, 20px + 1.5vw, 36px);
-    --a-title-lg: clamp(28px, 24px + 2vw, 48px);
-    --a-title-size: var(--a-title-md);
-
-    /* heading */
-    --a-heading-sm: 16px;
-    --a-heading-md: 20px;
-    --a-heading-lg: 24px;
-    --a-heading-size: var(--a-heading-md);
-
-    /* section */
-    --a-section-sm: 14px;
-    --a-section-md: 17px;
-    --a-section-lg: 20px;
-    --a-section-size: var(--a-section-md);
-
-    /* subsection */
-    --a-subsection-sm: 13px;
-    --a-subsection-md: 15px;
-    --a-subsection-lg: 17px;
-    --a-subsection-size: var(--a-subsection-md);
-
-    /* body */
-    --a-body-sm: 14px;
-    --a-body-md: 16px;
-    --a-body-lg: 18px;
-    --a-body-size: var(--a-body-md);
-
-    /* deck */
-    --a-deck-sm: 15px;
-    --a-deck-md: 18px;
-    --a-deck-lg: 20px;
-    --a-deck-size: var(--a-deck-md);
-
-    /* caption */
-    --a-caption-sm: 14px;
-    --a-caption-md: 15px;
-    --a-caption-lg: 16px;
-    --a-caption-size: var(--a-caption-md);
-
-    /* kicker */
-    --a-kicker-sm: 14px;
-    --a-kicker-md: 15px;
-    --a-kicker-lg: 16px;
-    --a-kicker-size: var(--a-kicker-md);
-
-    /* label */
-    --a-label-sm: 12px;
-    --a-label-md: 13px;
-    --a-label-lg: 14px;
-    --a-label-size: var(--a-label-md);
-
-    /* metric */
-    --a-metric-sm: clamp(20px, 16px + 1.5vw, 32px);
-    --a-metric-md: clamp(28px, 24px + 2vw, 48px);
-    --a-metric-lg: clamp(40px, 32px + 4vw, 72px);
-    --a-metric-size: var(--a-metric-md);
-
-    /* code */
-    --a-code-sm: 14px;
-    --a-code-md: 15px;
-    --a-code-lg: 16px;
-    --a-code-size: var(--a-code-md);
-
-    /* ── UI — scale up for content context ── */
-    --a-ui-px: var(--a-space-3);
-    --a-ui-py: var(--a-space-2);
-    --a-ui-sm: 14px;
-    --a-ui-md: 15px;
-    --a-ui-lg: 16px;
-    --a-ui-size: var(--a-ui-md);
-
-    --prose-max-width-sm: 55ch;
-    --prose-max-width-md: 65ch;
-    --prose-max-width-lg: 75ch;
-    --prose-max-width: var(--prose-max-width-md);
-  }
-
-  [prose][size="lg"],
-  [prose] [size="lg"] {
-    --a-inset: var(--a-inset-lg);
-    --a-gap: var(--a-gap-lg);
-    --a-size: var(--a-size-lg);
-    --a-radius: var(--a-radius-lg);
-  }
-  [prose][size="sm"],
-  [prose] [size="sm"] {
-    --a-inset: var(--a-inset-sm);
-    --a-gap: var(--a-gap-sm);
-    --a-size: var(--a-size-sm);
-    --a-radius: var(--a-radius-sm);
-  }
-
-  /* Max-width constraint on flow content */
-  [prose] > :is(p, ul, ol, blockquote, pre, table, dl) {
-    max-width: var(--prose-max-width);
-  }
-
-  /* ── Prose-enhanced native elements ── */
-
-  [prose] :is(ul, ol) {
-    padding-inline-start: 1.75em;
-    margin-block: 0.75em;
-  }
-
-  [prose] li + li {
-    margin-block-start: 0.375em;
-  }
-
-  [prose] blockquote {
-    padding: var(--a-space-4) var(--a-space-6);
-    border-inline-start-width: 4px;
-    font-size: var(--a-body-size);
-  }
-
-  [prose] hr {
-    margin-block: var(--a-space-6);
-  }
-
-  [prose] table {
-    border: 1px solid var(--a-border-subtle);
-    border-radius: var(--a-radius-md);
-    overflow: hidden;
-  }
-
-  [prose] th {
-    background: var(--a-bg-muted);
-  }
-
-  [prose] pre {
-    padding: var(--a-space-5);
-  }
-
-  [prose] img {
-    border-radius: var(--a-radius-lg);
-  }
-}

package/styles/verse.css

@@ -1,151 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   VERSE — dense / compact context via [verse] attribute.
-
-   ⚠ DEPRECATED (v0.8.11) — superseded by [scale="ui-sm"]
-   (styles/scale.css, byte-identical values). Removed at v1.0.
-   Do not combine [verse] with [scale] on one element.
-
-   The third typographic register, sibling to [prose]. Where [prose]
-   shifts everything UP (long-form, generous), [verse] shifts everything
-   DOWN — tighter inset/gap, smaller controls, smaller type — for dense
-   product surfaces (inspectors, data tables, toolbars, side rails).
-
-     <aside verse>...</aside>              — md (default)
-     <div verse size="sm">...</div>        — extra-compact
-     <section verse size="lg">...</section> — relaxed-compact
-
-   Scale relationship (at density=1, --a-gap-k=1):
-     register   inset sm/md/lg   gap sm/md/lg   body sm/md/lg
-     verse        10 / 12 / 14    10 / 12 / 14    11 / 12 / 13
-     regular      14 / 16 / 18    10 / 12 / 14    14 / 15 / 16
-     prose        32 / 40 / 48    16 / 20 / 24    14 / 16 / 18
-
-   TYPE SHIFTS WITH [size] (unlike [prose], which pins type at -md):
-   verse redefines the sm/md/lg type VALUES; the `-size` pointers are
-   re-declared under [verse]:not([size]) so a BARE verse resolves verse's
-   own md value (a pointer left at :root would resolve the BASE value —
-   custom props compute at their declaration site). The global [size]
-   rules then shift the pointer on [size]-bearing elements, resolving
-   verse's sm/lg values. Control-size (--a-size) needs explicit tier rules
-   because the global [size] rules set it to hardcoded base values, not via
-   --a-size-*.
-
-   NOTE: type sizes below the spacing anchors (body 11/12/13, control
-   20/24/28) are DEDUCED — proposed compact scale, tune to taste.
-   ═══════════════════════════════════════════════════════════════ */
-
-/* `context` layer (ADR-0038 step 7) — sits above utilities+components. */
-@layer context {
-  [verse] {
-    /* ── Inset — tighter than regular ── */
-    --a-inset-sm: var(--a-space-2-5); /* 10px */
-    --a-inset-md: var(--a-space-3);   /* 12px */
-    --a-inset-lg: var(--a-space-3-5); /* 14px */
-    --a-inset: var(--a-inset-md);
-
-    /* ── Gaps — parametric (value × --a-gap-k); k=1 = base value. ── */
-    --a-gap-xs: calc(var(--a-space-2)   * var(--a-gap-k)); /*  8px @k=1 */
-    --a-gap-sm: calc(var(--a-space-2-5) * var(--a-gap-k)); /* 10px @k=1 */
-    --a-gap-md: calc(var(--a-space-3)   * var(--a-gap-k)); /* 12px @k=1 */
-    --a-gap-lg: calc(var(--a-space-3-5) * var(--a-gap-k)); /* 14px @k=1 */
-    --a-gap-xl: calc(var(--a-space-4)   * var(--a-gap-k)); /* 16px @k=1 */
-    --a-gap: var(--a-gap-md);
-
-    /* ── Radius — verse register: tighter bounds (max 16px). Re-declares the
-       clamps so they resolve verse's min/max (base clamps compute at :root). ── */
-    --a-radius-min: 0.25rem; /* 4px */
-    --a-radius-max: 0.75rem;    /* 12px */
-    --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: var(--a-radius-md);
-
-    /* ── Control sizing — smaller (explicit tier rules below) ── */
-    --a-size-sm: calc(var(--a-density) * 1.250rem); /* 20px */
-    --a-size-md: calc(var(--a-density) * 1.500rem); /* 24px */
-    --a-size-lg: calc(var(--a-density) * 1.750rem); /* 28px */
-    --a-size: var(--a-size-md);
-
-    /* ── Icon / caret — shifted down one tier so chrome tracks verse's
-       smaller type + controls. The select/combobox caret is an <icon-ui>
-       reading --a-icon-size; CSS-drawn carets (calendar / nav-group / pane)
-       read --a-caret-size — both shrink here. Bumped +1 tier (0.7.9 control
-       bump) to track the larger 20/24/28 controls: md = 16/14, lg = 18/16,
-       sm = 14/12. Like --a-size, these
-       need explicit [size] tier rules below: the global [size] icon/caret
-       rules live in the utilities layer, which `context` shadows. ── */
-    --a-icon-size: 16px;
-    --a-caret-size: 14px;
-
-    /* ── Toggle (check / radio / switch) chrome — one tier down like inset +
-       --a-size, on clean space rungs. Bumped +1 tier with the 0.7.9 control
-       bump → verse toggle 16/20/24 (= --a-space-4/5/6). The explicit [size]
-       tier rules below are REQUIRED for the same reason --a-size needs them:
-       this context-layer base value pins the token, so the lower-layer global
-       [size] --a-toggle-size rules can't reach a verse subtree on their own. ── */
-    --a-toggle-size: var(--a-space-5); /* 20px @d=1 — md (bumped +1 tier, 0.7.9) */
-
-    /* ── Typography — compact register (deduced; static, no fluid clamps;
-       floored at 10px). VALUES only — pointers live under :not([size]). ── */
-    --a-display-sm: 18px;    --a-display-md: 23px;    --a-display-lg: 29px;
-    --a-title-sm: 16px;      --a-title-md: 19px;      --a-title-lg: 22px;
-    --a-heading-sm: 13px;    --a-heading-md: 14px;    --a-heading-lg: 15px;
-    --a-section-sm: 13px;    --a-section-md: 14px;    --a-section-lg: 16px;
-    --a-subsection-sm: 12px; --a-subsection-md: 13px; --a-subsection-lg: 14px;
-    --a-body-sm: 11px;       --a-body-md: 12px;       --a-body-lg: 13px;
-    --a-deck-sm: 14px;       --a-deck-md: 15px;       --a-deck-lg: 16px;
-    --a-caption-sm: 10px;    --a-caption-md: 11px;    --a-caption-lg: 12px;
-    --a-kicker-sm: 10px;     --a-kicker-md: 10px;     --a-kicker-lg: 11px;
-    --a-label-sm: 10px;      --a-label-md: 10px;      --a-label-lg: 11px;
-    --a-metric-sm: 19px;     --a-metric-md: 25px;     --a-metric-lg: 34px;
-    --a-code-sm: 11px;       --a-code-md: 12px;       --a-code-lg: 13px;
-
-    /* ── UI control text ── */
-    --a-ui-px: var(--a-space-2);
-    --a-ui-py: var(--a-space-1);
-    --a-ui-sm: 11px;         --a-ui-md: 12px;         --a-ui-lg: 13px;
-  }
-
-  /* Bare-verse default tier — re-declares the `-size` pointers ON the verse
-     element so they resolve verse's values (base :root pointers would resolve
-     base values). Mirrors the base default-tier convention: announce/divide
-     roles → -sm, text/data roles → -md. The global [size] rules override these
-     on [size]-bearing elements (resolving verse's sm/lg token values). */
-  [verse]:not([size]) {
-    --a-display-size: var(--a-display-md);
-    --a-title-size: var(--a-title-md);
-    --a-heading-size: var(--a-heading-md);
-    --a-section-size: var(--a-section-md);
-    --a-subsection-size: var(--a-subsection-md);
-    --a-body-size: var(--a-body-md);
-    --a-deck-size: var(--a-deck-md);
-    --a-caption-size: var(--a-caption-md);
-    --a-kicker-size: var(--a-kicker-md);
-    --a-label-size: var(--a-label-md);
-    --a-metric-size: var(--a-metric-md);
-    --a-code-size: var(--a-code-md);
-    --a-ui-size: var(--a-ui-md);
-  }
-
-  /* Tier shifts — inset/gap/control-size (typography shifts via global [size],
-     which resolves verse's token values). Mirrors the [prose] tier pattern. */
-  [verse][size="lg"],
-  [verse] [size="lg"] {
-    --a-inset: var(--a-inset-lg);
-    --a-gap: var(--a-gap-lg);
-    --a-size: var(--a-size-lg);
-    --a-icon-size: 18px;
-    --a-caret-size: 16px;
-    --a-toggle-size: var(--a-space-6); /* 24px @d=1 — lg (bumped +1 tier) */
-  }
-  [verse][size="sm"],
-  [verse] [size="sm"] {
-    --a-inset: var(--a-inset-sm);
-    --a-gap: var(--a-gap-sm);
-    --a-size: var(--a-size-sm);
-    --a-icon-size: 14px;
-    --a-caret-size: 12px;
-    --a-toggle-size: var(--a-space-4); /* 16px @d=1 — sm (bumped +1 tier) */
-  }
-}