@adia-ai/web-components 0.8.12 → 0.8.13

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # 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

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() {