@adia-ai/web-components 0.7.11 → 0.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "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",
@@ -21,6 +21,10 @@
       "types": "./css-module.d.ts",
       "default": "./dist/web-components.min.css"
     },
+    "./css/sheet": {
+      "import": "./dist/web-components.sheet.js",
+      "default": "./dist/web-components.sheet.js"
+    },
     "./js/bundled": {
       "types": "./index.d.ts",
       "import": "./dist/web-components.min.js",

package/styles/README.md

@@ -296,7 +296,7 @@ styles/
 │   ├── text.css            #   [text-align] [weight] [color] [transform] [truncate]
 │   └── layout.css          #   [hidden] [nomargin] [grow]
 │
-├── themes.css              # CONTEXT: 8 named themes + light/dark scheme overrides ([data-theme])
+├── themes.css              # CONTEXT: 8 named themes + light/dark scheme overrides ([theme])
 ├── prose.css               # CONTEXT: opt-in article typography ([prose])
 ├── resets.css              # global RESET (box-sizing, scrollbar, focus, normalize)
 ├── fonts.css               # @font-face declarations + font-family primitives

package/styles/colors/parameters.css

@@ -4,7 +4,7 @@
    Using @property for typed, animatable custom properties.
    syntax: "<number>" enables CSS transitions/animations on hue,
    chroma, and lightness parameters. inherits: true allows
-   theme-ui and [data-theme] to override per-subtree.
+   theme-ui and [theme] to override per-subtree.
    ═══════════════════════════════════════════════════════════════ */
 
 /* ── System bounds ── */

package/styles/colors/primitives-accent.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Accent tints (05 lightest → 95 darkest) ── */
   --a-accent-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-05) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
   --a-accent-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-10) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));

package/styles/colors/primitives-brand.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Brand tints (05 lightest → 95 darkest) ── */
   --a-brand-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-brand-c-min) + var(--_cf-05) * (var(--a-brand-c-max) - var(--a-brand-c-min))) var(--a-brand-hue));
   --a-brand-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-brand-c-min) + var(--_cf-10) * (var(--a-brand-c-max) - var(--a-brand-c-min))) var(--a-brand-hue));

package/styles/colors/primitives-danger.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Danger tints (05 lightest → 95 darkest) ── */
   --a-danger-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-danger-c-min) + var(--_cf-05) * (var(--a-danger-c-max) - var(--a-danger-c-min))) var(--a-danger-hue));
   --a-danger-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-danger-c-min) + var(--_cf-10) * (var(--a-danger-c-max) - var(--a-danger-c-min))) var(--a-danger-hue));

package/styles/colors/primitives-info.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Info tints (05 lightest → 95 darkest) ── */
   --a-info-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-info-c-min) + var(--_cf-05) * (var(--a-info-c-max) - var(--a-info-c-min))) var(--a-info-hue));
   --a-info-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-info-c-min) + var(--_cf-10) * (var(--a-info-c-max) - var(--a-info-c-min))) var(--a-info-hue));

package/styles/colors/primitives-neutral.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Neutral tints (05 lightest → 95 darkest) ── */
   --a-neutral-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-neutral-c-min) + var(--_cf-05) * (var(--a-neutral-c-max) - var(--a-neutral-c-min))) var(--a-neutral-hue));
   --a-neutral-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-neutral-c-min) + var(--_cf-10) * (var(--a-neutral-c-max) - var(--a-neutral-c-min))) var(--a-neutral-hue));

package/styles/colors/primitives-success.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Success tints (05 lightest → 95 darkest) ── */
   --a-success-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-success-c-min) + var(--_cf-05) * (var(--a-success-c-max) - var(--a-success-c-min))) var(--a-success-hue));
   --a-success-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-success-c-min) + var(--_cf-10) * (var(--a-success-c-max) - var(--a-success-c-min))) var(--a-success-hue));

package/styles/colors/primitives-warning.css

@@ -5,7 +5,7 @@
    Requires primitives-shared.css and parameters.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ── Warning tints (05 lightest → 95 darkest) ── */
   --a-warning-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-05) * var(--_cf-05) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-05) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));
   --a-warning-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min)) + var(--_sf-10) * var(--_cf-10) * var(--a-warning-l-lift)) calc(var(--a-warning-c-min) + var(--_cf-10) * (var(--a-warning-c-max) - var(--a-warning-c-min))) var(--a-warning-hue));

package/styles/colors/scrims.css

@@ -17,7 +17,7 @@
    Depends on: parameters.css
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
 
   /* ── Neutral ── */
   --a-neutral-0-tint-scrim:  oklch(var(--a-color-tint-scrim-l) calc(var(--a-neutral-c-min) + 0.0000 * (var(--a-neutral-c-max) - var(--a-neutral-c-min))) var(--a-neutral-hue) / var(--_af-0));

package/styles/colors/semantics/aliases.css

@@ -6,7 +6,7 @@
    base tier deliberately. The base tokens are defined upstream in core.css,
    so removing the override is non-breaking.) */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      SCRIMS — Role aliases. Map onto the 7-step adaptive scrim-0..6
      scale in scrims.css. Per-family semantic tiers (weak / default /

package/styles/colors/semantics/buckets.css

@@ -3,7 +3,7 @@
    within ONE family for heatmap/choropleth/treemap intensity.
    Split out of semantics.css (v0.6.48 reorg, ADR-0035). */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      BUCKETS — sequential 5-step ramp per family for data-vis consumers
 

package/styles/colors/semantics/core.css

@@ -5,7 +5,7 @@
    the semantics.css barrel so the status-compat overrides in aliases.css
    (imported last) still win, exactly as in the original source order. */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
 
   /* ══════════════════════════════════════════════════════════════
      CANVAS — Neutral text, borders, surfaces

package/styles/colors/semantics/data-viz.css

@@ -48,7 +48,7 @@
 @property --a-data-8-hue    { syntax: "<number>"; inherits: true; initial-value: 313; }
 @property --a-data-9-hue    { syntax: "<number>"; inherits: true; initial-value: 335; }
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      DATA PALETTE — 10 categorical series colors for charts
 

package/styles/colors/semantics/features.css

@@ -4,7 +4,7 @@
    backgrounds). Contiguous in the original source; split out of
    semantics.css (v0.6.48 reorg, ADR-0035). */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
   /* ══════════════════════════════════════════════════════════════
      FOCUS — canonical ring recipe shared by all form controls
      ══════════════════════════════════════════════════════════════

package/styles/colors/surfaces.css

@@ -5,7 +5,7 @@
    Neutral role aliases (--a-scrim-dialog etc.) live in semantics.css.
    ═══════════════════════════════════════════════════════════════ */
 
-:root, theme-ui, [data-theme] {
+:root, theme-ui, [theme], theme-provider {
 
   /* ══════════════════════════════════════════════════════════════
      Canvas — neutral surface, semantic alias of --a-neutral-{0-6}

package/styles/components.css

@@ -129,3 +129,4 @@
 @import "../components/time-picker/time-picker.css";
 @import "../components/integration-card/integration-card.css";
 @import "../components/tags-input/tags-input.css";
+@import "../components/theme-provider/theme-provider.css";

package/styles/design-tokens-export.js

@@ -27,7 +27,7 @@ function buildCssVarMap() {
 // selectors like `[color="info"]` conditionally override --a-fg etc. and
 // must not leak into the default-state token map.
 function isAuthoritativeSelector(sel) {
-  return /(^|,)\s*(:root|theme-ui|\[data-theme\])\b/i.test(sel);
+  return /(^|,)\s*(:root|theme-ui|\[theme\])\b/i.test(sel);
 }
 function walkRules(rules, map) {
   for (const rule of rules) {

package/styles/host.css

@@ -20,7 +20,7 @@
    without a specificity fight.
 
    ── Opt-in add-ons (link separately when wanted) ─────────────────────
-     styles/themes.css   the [data-theme] preset switcher      (@layer context)
+     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)
 

package/styles/prose.css

@@ -11,7 +11,7 @@
    ═══════════════════════════════════════════════════════════════ */
 
 /* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
-   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
+   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 {

package/styles/themes.css

@@ -1,17 +1,17 @@
 /* ═══════════════════════════════════════════════════════════════
-   Themes — CSS-only presets via [data-theme] attribute.
+   Themes — CSS-only presets via [theme] attribute.
    Zero JavaScript. Apply to any container element.
 
    Each theme overrides @property knobs: hues, chroma, radius, spacing.
    Downstream tokens (primitives, surfaces, semantics) recompute automatically.
 
    Usage:
-     <div data-theme="ocean">...ocean themed...</div>
-     <html data-theme="slate">...entire app...</html>
+     <div theme="ocean">...ocean themed...</div>
+     <html theme="slate">...entire app...</html>
    ═══════════════════════════════════════════════════════════════ */
 
 /* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
-   context sits above `utilities`+`components`, so a [data-theme]/[prose] scope
+   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 {
@@ -30,7 +30,7 @@
 
 /* ── Default (cool indigo, balanced) ── */
 
-[data-theme="default"] {
+[theme="default"] {
   --a-neutral-hue:   225;
   --a-neutral-c-min: 0.010;
   --a-brand-hue:     225;
@@ -45,7 +45,7 @@
 }
 
 /* ── Ocean (cool teal, vivid, rounded, relaxed) ── */
-[data-theme="ocean"] {
+[theme="ocean"] {
   --a-neutral-hue:   210;
   --a-neutral-c-min: 0.020;
   --a-brand-hue:     200;
@@ -61,7 +61,7 @@
 }
 
 /* ── Forest (earthy green, muted, compact) ── */
-[data-theme="forest"] {
+[theme="forest"] {
   --a-neutral-hue:   150;
   --a-neutral-c-min: 0.018;
   --a-neutral-c-max: 0.030;
@@ -78,7 +78,7 @@
 }
 
 /* ── Sunset (warm amber, vivid, sharp) ── */
-[data-theme="sunset"] {
+[theme="sunset"] {
   --a-neutral-hue:   30;
   --a-neutral-c-min: 0.022;
   --a-brand-hue:     20;
@@ -94,7 +94,7 @@
 }
 
 /* ── Lavender (soft purple, low chroma, pill radius) ── */
-[data-theme="lavender"] {
+[theme="lavender"] {
   --a-neutral-hue:   280;
   --a-neutral-c-min: 0.018;
   --a-brand-hue:     270;
@@ -110,7 +110,7 @@
 }
 
 /* ── Rose (warm pink, medium chroma) ── */
-[data-theme="rose"] {
+[theme="rose"] {
   --a-neutral-hue:   350;
   --a-neutral-c-min: 0.016;
   --a-brand-hue:     340;
@@ -126,7 +126,7 @@
 }
 
 /* ── Slate (desaturated grey-blue, sharp, tight) ── */
-[data-theme="slate"] {
+[theme="slate"] {
   --a-neutral-hue:   220;
   --a-neutral-c-min: 0.008;
   --a-neutral-c-max: 0.015;
@@ -144,7 +144,7 @@
 }
 
 /* ── Midnight (deep indigo, high chroma, rounded, spacious) ── */
-[data-theme="midnight"] {
+[theme="midnight"] {
   --a-neutral-hue:   250;
   --a-neutral-c-min: 0.020;
   --a-brand-hue:     240;