@adia-ai/web-components 0.7.5 → 0.7.6

package/index.css

@@ -3,25 +3,19 @@
  *
  *   <link rel="stylesheet" href="@adia-ai/web-components/css" />
  *
- * The real barrel now lives at `./styles/index.css`; this file re-exports
- * it (v0.6.48 foundation reorg, ADR-0035) so this published entry point
- * and the `dist/web-components.min.css` bundle are unchanged. It pulls, in
- * cascade order: design tokens (foundation + type + color, via the colors
- * tree) → component styles → global resets.
- *
- * Composite-element CSS (chat-shell, editor-shell, admin-shell, etc.)
- * lives in the sibling `@adia-ai/web-modules` package as of 0.0.29
- * (see ADR-0012). Each page links its own cluster CSS explicitly.
- * Opinionated theme overrides live in `./styles/themes.css`; link
- * them separately when you want the 8 named themes.
+ * Pulls, in cascade order: design tokens → global resets → page-frame →
+ * all primitive component styles. Composite-element CSS (chat-shell,
+ * editor-shell, admin-shell, etc.) lives in the sibling @adia-ai/web-modules
+ * package; link its barrel separately when needed.
  *
  * If you need a subset, skip this file and link the layers directly:
- *   @adia-ai/web-components/styles/tokens.css
- *   @adia-ai/web-components/styles/components.css
- *   @adia-ai/web-components/styles/resets.css
- *   @adia-ai/web-components/styles/themes.css      (optional)
- *   @adia-ai/web-components/styles/prose.css       (optional)
- *   @adia-ai/web-components/styles/typography.css  (standalone)
+ *   @adia-ai/web-components/styles/host.css      (tokens + resets + page-frame)
+ *   @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)
  */
 
+@import "./styles/host.css";
 @import "./styles/index.css";

package/package.json

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

package/styles/api/sizing.css

@@ -238,9 +238,16 @@
 [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); }
+/* Named scale — parametric (value × --a-padding-k), xs–xl; references the
+   --a-padding-* tokens (foundation/space.css), so it tracks the --a-padding-k
+   knob and composes on --a-density. sm/md/lg keep their prior values
+   (16/24/32px @k=1) — behavior-neutral; xs (8) + xl (40) are new. Distinct
+   from the integer rules above, which are LITERAL space-rungs (k-independent). */
+[padding="xs"] { --a-padding: var(--a-padding-xs); }
+[padding="sm"] { --a-padding: var(--a-padding-sm); }
+[padding="md"] { --a-padding: var(--a-padding-md); }
+[padding="lg"] { --a-padding: var(--a-padding-lg); }
+[padding="xl"] { --a-padding: var(--a-padding-xl); }
 
 [margin="0"]  { --a-margin: 0; }
 [margin="1"]  { --a-margin: var(--a-space-1); }
@@ -256,6 +263,11 @@
 [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); }
+/* Named scale — parametric (value × --a-margin-k), xs–xl; references the
+   --a-margin-* tokens (foundation/space.css). sm/md/lg unchanged (16/24/32px
+   @k=1) — behavior-neutral; xs (8) + xl (40) added; tracks --a-margin-k. */
+[margin="xs"] { --a-margin: var(--a-margin-xs); }
+[margin="sm"] { --a-margin: var(--a-margin-sm); }
+[margin="md"] { --a-margin: var(--a-margin-md); }
+[margin="lg"] { --a-margin: var(--a-margin-lg); }
+[margin="xl"] { --a-margin: var(--a-margin-xl); }

package/styles/foundation/space.css

@@ -23,6 +23,22 @@
   initial-value: 1;
 }
 
+/* Padding/margin-scale knobs — multiply the named [padding]/[margin] scale
+   (--a-{padding,margin}-{xs,sm,md,lg,xl}), same form + semantics as --a-gap-k.
+   k=1 (default) = base; <1 tightens, >1 loosens (k=0 → 0). Per-dimension so a
+   provider can retune box padding/margin independently of gap. Inherits — set
+   at a provider boundary (declaration-site compute, as with --a-density). */
+@property --a-padding-k {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+@property --a-margin-k {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
 :root {
   /* ── Spacing ── */
   --a-space-0: 0;
@@ -61,4 +77,21 @@
   --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);
+
+  /* ── Padding / margin — parametric named scale (value × --a-{padding,margin}-k),
+     xs–xl. Same FORM as the gap scale above, on the larger box-spacing rungs.
+     sm/md/lg keep their prior literal values (16/24/32px) so existing
+     [padding|margin="sm|md|lg"] are behavior-neutral; xs (8) + xl (40) are new.
+     Composes on --a-density (baked into --a-space-*). At k=1: 8/16/24/32/40px.
+     Consumed via the [padding] / [margin] attribute API (api/sizing.css). ── */
+  --a-padding-xs: calc(var(--a-space-2)  * var(--a-padding-k)); /*  8px @k=1 */
+  --a-padding-sm: calc(var(--a-space-4)  * var(--a-padding-k)); /* 16px @k=1 */
+  --a-padding-md: calc(var(--a-space-6)  * var(--a-padding-k)); /* 24px @k=1 */
+  --a-padding-lg: calc(var(--a-space-8)  * var(--a-padding-k)); /* 32px @k=1 */
+  --a-padding-xl: calc(var(--a-space-10) * var(--a-padding-k)); /* 40px @k=1 */
+  --a-margin-xs:  calc(var(--a-space-2)  * var(--a-margin-k));  /*  8px @k=1 */
+  --a-margin-sm:  calc(var(--a-space-4)  * var(--a-margin-k));  /* 16px @k=1 */
+  --a-margin-md:  calc(var(--a-space-6)  * var(--a-margin-k));  /* 24px @k=1 */
+  --a-margin-lg:  calc(var(--a-space-8)  * var(--a-margin-k));  /* 32px @k=1 */
+  --a-margin-xl:  calc(var(--a-space-10) * var(--a-margin-k));  /* 40px @k=1 */
 }

package/styles/host.css

@@ -1,44 +1,42 @@
-/* adia:barrel/host — the host-page drop-in foundation.
+/* adia:barrel/host — the slim host-page foundation.
 
    One <link> turns a bare HTML document into an AdiaUI host:
 
      <link rel="stylesheet" href="@adia-ai/web-components/styles/host.css" />
 
-   It bundles the full library foundation in cascade order — design tokens +
-   every component's styles + global resets (via the canonical barrel
-   `index.css`) — and adds the PAGE-FRAME: the document-root setup
-   (background, foreground, font-family anchor, viewport min-height) that
-   every host page needs. This is the setup demo scaffolds used to hand-roll
-   as `:where(html, body){ … font-family: var(--a-font) }` — a pattern that
-   was both redundant with resets.css and silently broken (the dead `--a-font`
-   token resolved to UA serif). Loading host.css means a host page declares
-   ZERO of that boilerplate.
+   Provides: design tokens + global resets + page-frame.
+   Does NOT include component styles — link the components barrel separately:
+
+     <link rel="stylesheet" href="@adia-ai/web-components/styles/index.css" />   ← primitives
+     <link rel="stylesheet" href="@adia-ai/web-modules/index.css" />              ← composites (opt-in)
 
    ── Layer YOUR surface's chrome OVER it ──────────────────────────────
      <link rel="stylesheet" href="@adia-ai/web-components/styles/host.css" />
+     <link rel="stylesheet" href="@adia-ai/web-components/styles/index.css" />
      <link rel="stylesheet" href="/site/site.css" />        ← docs site, or
      <style> main { max-inline-size: 60rem; … } </style>     ← a demo's own CSS
 
-   Consumer rules sit ABOVE the `reset`/`components` layers below, so they win
+   Consumer rules sit ABOVE the layered components, so they win
    without a specificity fight.
 
-   ── NOT included (opt-in — link separately when wanted) ──────────────
+   ── Opt-in add-ons (link separately when wanted) ─────────────────────
      styles/themes.css   the [data-theme] preset switcher      (@layer context)
      styles/prose.css    the [prose] content context           (@layer context)
-     web-modules/**.css   per-module explicit-import policy (FB-53 §CSSPolicy)
+     styles/verse.css    the [verse] compact register          (opt-in density)
+
+   See ADR-0035 (foundation reorg) + ADR-0038 (cascade layers). */
 
-   See ADR-0035 (foundation reorg) + ADR-0038 (cascade layers). The canonical
-   published entry `@adia-ai/web-components/css` (index.css) stays byte-stable;
-   host.css composes it and adds the page-frame on top. */
+@layer reset, tokens, elements, components, utilities, context, overrides;
 
-@import "./index.css";   /* tokens + components + resets — @layer order intact */
+@import "./tokens.css";
+@import "./resets.css" layer(reset);
 
 @layer reset {
-  /* Page-frame. resets.css already floors `body` (margin, font-family, bg, fg,
-     min-block-size); this extends the same defaults up to the document root so
-     overscroll / rubber-band areas + color-scheme match, and anchors the host
-     font-family at :root so it holds even before `body` inherits. Token-only;
-     :where() keeps specificity at (0,0,0) so any consumer html/body rule wins. */
+  /* Page-frame. resets.css already floors `body`; this extends the same
+     defaults up to the document root so overscroll / rubber-band areas +
+     color-scheme match, and anchors the host font-family at :root so it
+     holds even before `body` inherits. Token-only; :where() keeps specificity
+     at (0,0,0) so any consumer html/body rule wins. */
   :where(html) {
     background: var(--a-bg);
     color: var(--a-fg);

package/styles/index.css

@@ -1,23 +1,20 @@
-/* adia:barrel/styles — the real all-in-one barrel.
+/* adia:barrel/styles — web-components primitives 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.
+   Links every primitive component's styles in cascade-layer order.
+   Foundation (tokens + resets + page-frame) lives in host.css and must
+   be linked before this file:
 
-   Opt-in layers (theme presets, prose context) are linked separately —
-   styles/themes.css and styles/prose.css. */
+     <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.
+
+   Composite-element CSS (chat-shell, editor-shell, admin-shell, etc.)
+   lives in @adia-ai/web-modules — link its barrel separately:
+
+     <link rel="stylesheet" href="@adia-ai/web-modules/index.css" /> */
 
-/* Cascade-layer order — ADR-0038, GS-P2-SPEC-1 §8 step 1.
-   Declares the precedence order once, up front. INERT until rules are assigned
-   to layers: with every import below still unlayered, all rules stay in the
-   (highest-priority) unlayered context, so the resolved cascade is unchanged —
-   proven behavior-neutral by the dist-bundle fingerprint at commit time.
-   Later cuts move each import into its layer (e.g. `… layer(tokens)`), one at
-   a time, each re-fingerprinted. */
 @layer reset, tokens, elements, components, utilities, context, overrides;
 
-@import "./tokens.css";
 @import "./components.css" layer(components);
-@import "./resets.css" layer(reset);

package/styles/verse.css

@@ -63,6 +63,16 @@
     --a-size-lg: calc(var(--a-density) * 1.5rem);   /* 24px */
     --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. md = regular-sm (14/12),
+       lg = regular-md (16/14), sm one below (12/10). 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: 14px;
+    --a-caret-size: 12px;
+
     /* ── 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;
@@ -112,11 +122,15 @@
     --a-inset: var(--a-inset-lg);
     --a-gap: var(--a-gap-lg);
     --a-size: var(--a-size-lg);
+    --a-icon-size: 16px;
+    --a-caret-size: 14px;
   }
   [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: 12px;
+    --a-caret-size: 10px;
   }
 }