@adia-ai/web-components 0.7.3 → 0.7.4

package/styles/prose.css

@@ -15,179 +15,193 @@
    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 — larger bases than UI ── */
-  --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 — shifted up the space scale ── */
-  --a-inset-sm:    var(--a-space-6);
-  --a-inset-md:    var(--a-space-8);
-  --a-inset-lg:    var(--a-space-10);
-  --a-inset:       var(--a-inset-md);
-
-  /* ── Gaps — prose register, one rung up; same parametric (half + half·k)
-     form as foundation, tracking --a-gap-k. At k=1: 8/12/16/20/24px. ── */
-  --a-gap-xs:      calc(var(--a-space-1)   + var(--a-space-1)   * var(--a-gap-k)); /*  8px @k=1 */
-  --a-gap-sm:      calc(var(--a-space-1-5) + var(--a-space-1-5) * var(--a-gap-k)); /* 12px @k=1 */
-  --a-gap-md:      calc(var(--a-space-2)   + var(--a-space-2)   * var(--a-gap-k)); /* 16px @k=1 */
-  --a-gap-lg:      calc(var(--a-space-2-5) + var(--a-space-2-5) * var(--a-gap-k)); /* 20px @k=1 */
-  --a-gap-xl:      calc(var(--a-space-3)   + var(--a-space-3)   * var(--a-gap-k)); /* 24px @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
+  [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);
-}
-
+    /* 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/type/scale.css

@@ -19,6 +19,12 @@
   --a-font-family-code: var(--a-font-family-mono);
   --a-font-family-control: var(--a-font-family-mono);
   --a-font-family: var(--a-font-family-sans);
+  /* Back-compat alias for the pre-ADR-0035 token name. DEPRECATED — prefer
+     --a-font-family. Kept so legacy `font-family: var(--a-font)` references
+     (demo scaffolds, external consumers, embedded apps) resolve to the sans
+     stack instead of going invalid-at-computed-value-time → inherit → UA
+     serif. Retire once the host.css migration removes the boilerplate. */
+  --a-font: var(--a-font-family);
 
   /* ── Type scale ──
       Ratio: ~1.25 (major third) with dramatic hero jump.

package/styles/typography.css

@@ -24,20 +24,25 @@
    universal size token system in tokens.css shifts --a-*-size
    tokens so every consuming component tracks the cascade.
 
-   TWO PUBLICATION REGISTERS
+   THREE PUBLICATION REGISTERS  (inset · gap · control · type · radius scale together)
+     [verse] — 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.
+
      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).
-       Dynamic scale. All roles default to -md. Big dynamic range between
-       tiers. Fluid clamps on display/title/metric respond to viewport.
-       Reading measure (max-width) + generous insets.
+       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.
-     [prose] overrides to -md defaults with fluid viewport-responsive clamps.
+     [verse] keeps the base convention (type shifts with [size]); [prose]
+     overrides to -md defaults (pinned) with fluid viewport-responsive clamps.
 
    FONTS
      --a-font-family-sans    — long-form, marketing body

package/styles/verse.css

@@ -0,0 +1,122 @@
+/* ═══════════════════════════════════════════════════════════════
+   VERSE — dense / compact context via [verse] attribute.
+
+   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
+   18/20/24) 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: 1rem;    /* 16px */
+    --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.125rem); /* 18px */
+    --a-size-md: calc(var(--a-density) * 1.25rem);  /* 20px */
+    --a-size-lg: calc(var(--a-density) * 1.5rem);   /* 24px */
+    --a-size: var(--a-size-md);
+
+    /* ── 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-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-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);
+  }
+  [verse][size="sm"],
+  [verse] [size="sm"] {
+    --a-inset: var(--a-inset-sm);
+    --a-gap: var(--a-gap-sm);
+    --a-size: var(--a-size-sm);
+  }
+}