@adia-ai/web-components 0.8.11 → 0.8.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.13] — 2026-07-25
+
+### Added
+- **12 named `[theme]` identities** (`styles/themes.css`, fully rewritten; PR #409) — atlas, signal, terrarium, ledger, arcade, meridian, solstice, glacier, ember, botanica, vector, velour. Each is a real recolor (not a decorative hue nudge): overrides the raw `--md-sys-color-{primary,secondary,tertiary}-*` OKLCH ramps per theme, hue-rotated from the shipped, contrast-verified L/C curve, so every semantic role (`-hover`/`-container`/`-outline`/`-on-surface`/etc., all `light-dark()` reads of those stops) recolors with zero component changes. `neutral` and the four intent families (`info`/`success`/`warning`/`danger`) stay constant across all 12 — only brand identity rotates. Each theme also pairs a distinct Google Fonts family (`--a-font-family-display`/`-text`) and its own shape knobs (`--a-radius-k`/`--a-density`/`--a-shadow-intensity`/`--a-brand-hue`). Supersedes the previous 8-name preset list (default/ocean/forest/sunset/lavender/rose/slate/midnight), which had degraded to shape-only knobs since v0.8.0's Material-static-export migration.
+- **Google Fonts stylesheet reference** (`styles/theme-fonts-url.txt`) — the exact `<link>` URL (22 families, one request) a consumer must add once to use `[theme]`. Not `@import`'d from `themes.css` itself — LightningCSS's bundler resolves every `@import` as a local file, remote http(s) URLs included, so a CSS-level `@import` broke `build:bundle-css`; a `<link>` also avoids blocking parallel download. Falls back cleanly to each family's system-font stack when unlinked.
+
+### Fixed
+- **`styles/scale.css` (the six-tier `[scale]` register, shipped v0.8.11) was never linked anywhere** — not in `host.css`'s own "opt-in add-ons" list, not in `site/index.html`, not in `theme-panel`'s own demo. `[scale="x"]` was being set correctly by consumers but no stylesheet defined what the attribute did, so scale toggles were silently inert. `host.css`'s opt-in list now documents it; `site/index.html` links it.
+
+### Maintenance
+- **`components/` touched in this release window** (3 file(s), e.g. `nav-group/nav-group.class.js`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
+## [0.8.12] — 2026-07-24
+
+### Changed
+- **`tag-ui` adopts `badge-ui`'s sm/md/lg size system** (`components/tag/{tag.yaml,tag.examples.html}`; PR #401) — the `size` enum was `sm|md` only, one row short of `badge-ui` despite already sharing the identical CSS pattern (both delegate sizing entirely to the universal `[size]` system; neither has any per-size CSS of its own). Added `lg`. No CSS changes required. Also fixed a stale deck paragraph ("Supports status variants and two sizes" → "three sizes") on the compile source for `/site/components/tag`.
+
 ## [0.8.11] — 2026-07-23
 
 ### Added

package/components/nav-group/nav-group.class.js

@@ -86,6 +86,14 @@ export class UINavGroup extends UIElement {
     if (badgeEl) badgeEl.textContent = this.badge;
 
     this.setAttribute('aria-expanded', String(this.open));
+
+    // Mirrors nav-item-ui's selected → fill convention: an open group
+    // reads as the active section via the same filled-glyph treatment
+    // [open] already drives (nav-group.css's [open] > [slot=header] color
+    // rule) — a state-driven weight swap, not a CSS color change, since
+    // Phosphor ships filled/regular as distinct SVGs.
+    const iconEl = this.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    if (iconEl) iconEl.setAttribute('weight', this.open ? 'fill' : 'regular');
   }
 
   showPopover() {

package/components/nav-group/nav-group.test.js

@@ -30,3 +30,38 @@ describe('nav-group-ui — header stamp-if-absent (wrapper trap)', () => {
     expect(headers[0].dataset.test).toBe('h');
   });
 });
+
+describe('nav-group-ui — [open] drives the header icon weight', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('defaults the auto-stamped header icon to weight="regular"', async () => {
+    const el = mount('<nav-group-ui text="Reports" icon="folder"></nav-group-ui>');
+    await tick();
+    const icon = el.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    expect(icon.getAttribute('weight')).toBe('regular');
+  });
+
+  it('switches the header icon to weight="fill" when [open] is set', async () => {
+    const el = mount('<nav-group-ui text="Reports" icon="folder"></nav-group-ui>');
+    await tick();
+    el.open = true;
+    await tick();
+    const icon = el.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    expect(icon.getAttribute('weight')).toBe('fill');
+  });
+
+  it('reverts to weight="regular" when [open] is cleared', async () => {
+    const el = mount('<nav-group-ui text="Reports" icon="folder" open></nav-group-ui>');
+    await tick();
+    el.open = false;
+    await tick();
+    const icon = el.querySelector('[slot="header"] [slot="icon"] icon-ui');
+    expect(icon.getAttribute('weight')).toBe('regular');
+  });
+
+  it('is a no-op when the group has no icon (empty icon slot, no icon-ui)', async () => {
+    const el = mount('<nav-group-ui text="Reports" open></nav-group-ui>');
+    await tick();
+    expect(el.querySelector('[slot="header"] [slot="icon"] icon-ui')).toBeNull();
+  });
+});

package/components/nav-item/nav-item.class.js

@@ -77,6 +77,12 @@ export class UINavItem extends UIElement {
     this.setAttribute('tabindex', this.disabled ? '-1' : '0');
     if (this.selected) this.setAttribute('aria-current', 'page');
     else this.removeAttribute('aria-current');
+
+    // Selected rows read as filled glyphs, unselected as regular weight —
+    // a state-driven weight swap (Phosphor ships filled/regular as distinct
+    // SVGs, so this can't be a CSS-only color change).
+    const iconEl = this.querySelector('[slot="icon"] icon-ui');
+    if (iconEl) iconEl.setAttribute('weight', this.selected ? 'fill' : 'regular');
   }
 
   disconnected() {

package/components/tag/tag.a2ui.json

@@ -27,11 +27,12 @@
       "default": false
     },
     "size": {
-      "description": "Size preset controlling font-size and padding.",
+      "description": "Size preset controlling font-size and padding (sm/md/lg — same size system as badge-ui). For a denser or larger register, set [scale] on an ancestor.",
       "type": "string",
       "enum": [
         "sm",
-        "md"
+        "md",
+        "lg"
       ],
       "default": "md"
     },

package/components/tag/tag.d.ts

@@ -34,8 +34,8 @@ export class UITag extends UIElement {
   disabled: boolean;
   /** Shows a dismiss button that fires the remove event. */
   removable: boolean;
-  /** Size preset controlling font-size and padding. */
-  size: 'sm' | 'md';
+  /** Size preset controlling font-size and padding (sm/md/lg — same size system as badge-ui). For a denser or larger register, set [scale] on an ancestor. */
+  size: 'sm' | 'md' | 'lg';
   /** Tag text content. */
   text: string;
   /** Tag label. Renderer routes this to the `text` attribute, rendered via CSS attr(text) on ::after. */

package/components/tag/tag.yaml

@@ -30,12 +30,13 @@ props:
     type: boolean
     default: false
   size:
-    description: Size preset controlling font-size and padding.
+    description: Size preset controlling font-size and padding (sm/md/lg — same size system as badge-ui). For a denser or larger register, set [scale] on an ancestor.
     type: string
     default: md
     enum:
       - sm
       - md
+      - lg
   text:
     description: Tag text content.
     type: string