@adia-ai/web-components 0.8.7 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.9] — 2026-07-19
+
+### Added
+- **`<select-ui mark>`** (gh#339) — a first-class `mark` boolean (host-level and per-option) renders `<adia-mark-ui>` (the token-driven Adia brand mark) as the leading visual, following the existing `icon`/`avatar` precedent exactly: `mark` wins over `avatar`, which wins over `icon`. Fits the workspace/app-switcher row that represents the Adia platform itself, where a static scheme-locked logo URL can't invert with the color scheme.
+
+### Fixed
+- **`select-ui`'s `.options = [...]` setter now syncs the trigger's leading visual** — it previously only rebuilt the listbox rows (`#renderOptions()`), never reconciling the *trigger's* icon/avatar/mark to the selected option (`#syncLeading()`, only ever called from `render()`). Setting `.options` programmatically after connect — a documented, supported path — left the trigger stale even though the listbox rows were correct. Found and fixed while adding `mark` test coverage; affected the pre-existing `icon`/`avatar` props too, not just `mark`.
+
+### Maintenance
+- **`components/` touched in this release window** (7 file(s), e.g. `select/select.a2ui.json`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (1 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`patterns/` touched in this release window** (2 file(s), e.g. `permissions-matrix/permissions-matrix.examples.html`) — carried by the entries above.
+
+## [0.8.8] — 2026-07-19
+
+### Changed
+- **Default type scale tightened one step** (`styles/type/roles.css`): `--a-body-*` 14/15/16 → **13/14/15** (base 15px → 14px) and `--a-ui-*` down 1px with `--a-ui-tiny` floored at 10px — the used UI ladder is a clean 10/11/12/13/14 (tiny/xs/sm/md/lg; nav/buttons = md = **13px**). Running text now shares a 14px base with `--a-code-*`, removing the old 1px body↔ui offset. Untouched by design: the `prose` register (16/18 long-form reading), `verse`, `--a-code-*`, `--a-kicker-*`. `--a-ui-2xs` (unused, pre-staged) shares the 10px floor with `tiny`; re-space it if it's ever wired up.
+- **`dist/` bundles regenerated** for the type scale: `web-components.min.css`, `host.min.css`, both `.sheet.js`, and `theme-provider.min.js` (it inlines the regenerated CSS sheet — the documented PR-#275 build-order coupling).
+
+### Fixed
+- **README CDN pins un-drifted**: `@0.7` → `@0.8` (3 pins), the range prose now describes the actual `0.8.x` tracking behavior, and the exact-pin example is current — the pins had shipped a full minor stale for the entire 0.8 line (caught by the newly-wired repo cut-hygiene gate).
+
 ## [0.8.7] — 2026-07-19
 
 ### Changed

package/README.md

@@ -38,13 +38,13 @@ Since **v0.6.30**, this package ships pre-flattened + minified bundles under `di
 
 ```html
 <!-- CSS: all primitives, tokens, resets (443 KB raw / ~50 KB gzipped) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.7/dist/web-components.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.8/dist/web-components.min.css">
 
 <!-- JS: registers all 122 primitives (~250 KB gzipped via Brotli) -->
-<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.7/dist/web-components.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.8/dist/web-components.min.js"></script>
 ```
 
-The `@0.7` range tracks the latest `0.6.x` patch automatically (won't jump to a breaking `0.8`). For reproducible builds, pin an exact version instead — e.g. `@adia-ai/web-components@0.7.13/dist/web-components.min.css`.
+The `@0.8` range tracks the latest `0.8.x` patch automatically (won't jump to a breaking `0.9`). For reproducible builds, pin an exact version instead — e.g. `@adia-ai/web-components@0.8.7/dist/web-components.min.css`.
 
 For composite shells, add the corresponding bundle from `@adia-ai/web-modules` — see [its README](../web-modules/#cdn-no-bundler--codepen-marketing-pages-static-html) or the [CDN usage guide](https://ui-kit.exe.xyz/site/cdn-usage). The kitchen-sink path is `@adia-ai/web-modules/dist/everything.min.js` (all primitives + all 4 shells; ~190 KB gzipped) — one tag for CodePen demos.
 

package/components/select/select.a2ui.json

@@ -66,6 +66,11 @@
       "type": "string",
       "default": ""
     },
+    "mark": {
+      "description": "Renders the Adia brand mark (`<adia-mark-ui>`) as the leading visual — takes precedence over avatar and icon. Token-driven (light/dark handled internally), so it fits a scheme-switching workspace/app switcher where a static logo URL can't invert. Per-option `mark` on an `<option>`/options-array entry works the same way, scoped to that row.",
+      "type": "boolean",
+      "default": false
+    },
     "max": {
       "description": "Multi-select only. Maximum allowed selections. Toggling past the\ncap is suppressed; the `invalid` event fires with reason=\"max\".\n`0` (default) = unlimited.\n",
       "type": "number",
@@ -107,7 +112,7 @@
       "default": false
     },
     "options": {
-      "description": "Option list. Array of {value, label, disabled?, icon?, avatar?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar render in the list AND reflect in the trigger's selected state.",
+      "description": "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon).",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "pattern": {

package/components/select/select.class.js

@@ -48,6 +48,7 @@ export class UISelect extends UIFormElement {
     label:       { type: String,  default: '', reflect: true },
     icon:        { type: String,  default: '', reflect: true },
     avatar:      { type: String,  default: '', reflect: true },
+    mark:        { type: Boolean, default: false, reflect: true },
     multiple:    { type: Boolean, default: false, reflect: true },
     searchable:  { type: Boolean, default: false, reflect: true },
     freeText:    { type: Boolean, default: false, reflect: true, attribute: 'free-text' },
@@ -417,14 +418,17 @@ export class UISelect extends UIFormElement {
       const lb = this.#listbox;
       if (lb?.parentNode === this) this.removeChild(lb);
 
-      // Initial leading reflects the host [avatar]/[icon]; #syncLeading() then
-      // reconciles it to the SELECTED option's icon/avatar on every render. The
-      // `data-select-leading` marker scopes that reconciliation to our element.
-      const leading = this.avatar
-        ? `<img slot="leading" data-select-leading src="${escapeHTML(this.avatar)}" alt="" />`
-        : this.icon
-          ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
-          : '';
+      // Initial leading reflects the host [mark]/[avatar]/[icon]; #syncLeading()
+      // then reconciles it to the SELECTED option's mark/avatar/icon on every
+      // render. The `data-select-leading` marker scopes that reconciliation to
+      // our element. mark wins over avatar, which wins over icon (gh#339).
+      const leading = this.mark
+        ? `<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>`
+        : this.avatar
+          ? `<img slot="leading" data-select-leading src="${escapeHTML(this.avatar)}" alt="" />`
+          : this.icon
+            ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
+            : '';
       const displayMarkup = this.searchable
         ? `<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${escapeHTML(this.placeholder || '')}" value="${escapeHTML(this.#displayText() === this.placeholder ? '' : this.#displayText())}" />`
         : `<span slot="display">${escapeHTML(this.#displayText())}</span>`;
@@ -498,7 +502,7 @@ export class UISelect extends UIFormElement {
       }
     }
 
-    // Reflect the selected option's icon/avatar in the trigger leading.
+    // Reflect the selected option's mark/avatar/icon in the trigger leading.
     this.#syncLeading();
 
     // SPEC-040 — stamp / reconcile chips + "+N more" pill on every render.
@@ -599,12 +603,12 @@ export class UISelect extends UIFormElement {
       if (child.tagName === 'OPTGROUP') {
         const group = { label: child.label || child.getAttribute('label') || '', options: [] };
         for (const opt of child.querySelectorAll('option')) {
-          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled, icon: opt.getAttribute('icon') || '', avatar: opt.getAttribute('avatar') || '' });
+          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled, icon: opt.getAttribute('icon') || '', avatar: opt.getAttribute('avatar') || '', mark: opt.hasAttribute('mark') });
           if (opt.hasAttribute('selected')) preSelectedArr.push(opt.value);
         }
         this.#options.push(group);
       } else if (child.tagName === 'OPTION') {
-        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled, icon: child.getAttribute('icon') || '', avatar: child.getAttribute('avatar') || '' });
+        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled, icon: child.getAttribute('icon') || '', avatar: child.getAttribute('avatar') || '', mark: child.hasAttribute('mark') });
         if (child.hasAttribute('selected')) preSelectedArr.push(child.value);
       } else if (
         // §225: skip [slot="display"] / [slot="listbox"] / [slot="action"] etc. — these are
@@ -660,26 +664,38 @@ export class UISelect extends UIFormElement {
       this.#renderOptions();
       const display = this.querySelector('[slot="display"]');
       if (display) display.textContent = this.#displayText();
+      // Pre-existing gap surfaced while adding mark (gh#339): #renderOptions()
+      // only rebuilds the LISTBOX rows — the trigger's leading visual
+      // (icon/avatar/mark) was only ever reconciled from render()'s call to
+      // #syncLeading(), never from this setter. So setting `.options = [...]`
+      // programmatically after connect (a documented, supported path) left a
+      // stale or missing leading on the trigger even though the listbox rows
+      // were correct. #syncLeading() already self-guards (multi-select /
+      // consumer-custom-trigger), so calling it here is safe.
+      this.#syncLeading();
     });
   }
 
   get options() { return this.#options; }
 
-  // Per-option leading markup: avatar (img) beats icon (icon-ui). Shared by
-  // the listbox rows AND the trigger (resolved against the selected option).
+  // Per-option leading markup: mark (adia-mark-ui) beats avatar (img) beats
+  // icon (icon-ui) — gh#339. Shared by the listbox rows AND the trigger
+  // (resolved against the selected option).
   static #optionLeadHTML(opt) {
     if (!opt) return '';
+    if (opt.mark) return `<adia-mark-ui size="xs"></adia-mark-ui>`;
     if (opt.avatar) return `<img data-option-avatar src="${escapeHTML(opt.avatar)}" alt="" />`;
     if (opt.icon) return `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>`;
     return '';
   }
 
   /**
-   * Reflect the SELECTED option's icon/avatar in the trigger's leading slot.
-   * Single-select only (multi-select shows chips). Falls back to the host
-   * [avatar]/[icon] when the selected option carries neither. Only manages the
-   * leading WE stamped (`[data-select-leading]`) — a consumer-custom trigger
-   * owns its own leading.
+   * Reflect the SELECTED option's mark/avatar/icon in the trigger's leading
+   * slot. Single-select only (multi-select shows chips). Falls back to the
+   * host [mark]/[avatar]/[icon] when the selected option carries none of the
+   * three (mark wins over avatar, which wins over icon — gh#339). Only
+   * manages the leading WE stamped (`[data-select-leading]`) — a
+   * consumer-custom trigger owns its own leading.
    */
   #syncLeading() {
     if (this.multiple || !this.#ownTrigger) return;
@@ -687,11 +703,13 @@ export class UISelect extends UIFormElement {
     if (!trigger) return;
     const flat = this.#options.flatMap((o) => o.options || [o]);
     const sel = flat.find((o) => !o.header && !o.separator && o.value === this.value);
+    const mark = (sel && sel.mark) || this.mark || false;
     const avatar = (sel && sel.avatar) || this.avatar || '';
     const icon = (sel && sel.icon) || this.icon || '';
     const existing = trigger.querySelector(':scope > [data-select-leading]');
     let html = '';
-    if (avatar) html = `<img slot="leading" data-select-leading src="${escapeHTML(avatar)}" alt="" />`;
+    if (mark) html = `<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>`;
+    else if (avatar) html = `<img slot="leading" data-select-leading src="${escapeHTML(avatar)}" alt="" />`;
     else if (icon) html = `<icon-ui slot="leading" data-select-leading name="${escapeHTML(icon)}"></icon-ui>`;
     if (!html) { existing?.remove(); return; }
     const tmp = document.createElement('template');
@@ -751,7 +769,8 @@ export class UISelect extends UIFormElement {
       // SPEC-040 — multi-select option rows render a leading checkbox
       // indicator (CSS-driven via [data-multi-option]); the `check` icon
       // shows when aria-selected="true".
-      // Per-option leading glyph — avatar (img) wins over icon (icon-ui).
+      // Per-option leading glyph — mark (adia-mark-ui) wins over avatar
+      // (img), which wins over icon (icon-ui).
       const lead = UISelect.#optionLeadHTML(opt);
       if (this.multiple) {
         el.setAttribute('data-multi-option', '');

package/components/select/select.d.ts

@@ -11,6 +11,8 @@ export interface SelectOption {
   label?: string;
   icon?: string;
   avatar?: string;
+  /** Renders the Adia brand mark as this option's leading visual. Takes precedence over avatar/icon. */
+  mark?: boolean;
   disabled?: boolean;
   action?: string;
   divider?: boolean;
@@ -47,6 +49,8 @@ export class UISelect extends UIFormElement {
   icon: string;
   /** Leading avatar URL or name. */
   avatar: string;
+  /** Renders the Adia brand mark as the leading visual — takes precedence over avatar and icon (gh#339). */
+  mark: boolean;
   multiple: boolean;
   searchable: boolean;
   /** Allow values not in the option list (combobox mode). */

package/components/select/select.examples.md

@@ -13,37 +13,26 @@
 </field-ui>
 ```
 
-## size
+## variant
 
 ```html
-<field-ui label="Small">
-  <select-ui size="sm" placeholder="Pick a fruit">
-    <option value="apple">Apple</option>
-    <option value="banana">Banana</option>
-    <option value="cherry">Cherry</option>
+<field-ui label="Sort by">
+  <select-ui variant="ghost" value="recent">
+    <option value="recent">Most recent</option>
+    <option value="popular">Most popular</option>
+    <option value="name">Name (A–Z)</option>
   </select-ui>
 </field-ui>
 ```
 
-## grouped options
+## size
 
 ```html
-<field-ui label="Location">
-  <select-ui placeholder="Choose a city">
-    <optgroup label="North America">
-      <option value="nyc">New York</option>
-      <option value="sf">San Francisco</option>
-      <option value="toronto">Toronto</option>
-    </optgroup>
-    <optgroup label="Europe">
-      <option value="london">London</option>
-      <option value="paris">Paris</option>
-      <option value="berlin">Berlin</option>
-    </optgroup>
-    <optgroup label="Asia">
-      <option value="tokyo">Tokyo</option>
-      <option value="singapore">Singapore</option>
-    </optgroup>
+<field-ui label="Small">
+  <select-ui size="sm" placeholder="Pick a fruit">
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="cherry">Cherry</option>
   </select-ui>
 </field-ui>
 ```

package/components/select/select.test.js

@@ -359,4 +359,95 @@ describe('select-ui', () => {
       expect(s.hasAttribute('aria-label')).toBe(false);
     });
   });
+
+  // gh#339 — mark (adia-mark-ui) as a leading visual, alongside icon/avatar.
+  describe('mark (gh#339)', () => {
+    it('renders <adia-mark-ui> in the listbox row for a declarative <option mark>', async () => {
+      const s = mount(`
+        <select-ui placeholder="Choose…">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      const row = s.querySelector('[role="option"][data-value="adia"]');
+      expect(row.querySelector('adia-mark-ui')).not.toBeNull();
+      expect(s.options.find((o) => o.value === 'adia').mark).toBe(true);
+    });
+
+    it('reflects the SELECTED option\'s mark in the trigger leading slot', async () => {
+      const s = mount(`
+        <select-ui value="adia">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+
+    it('mark wins over avatar and icon when more than one is set on the same option', async () => {
+      const s = mount(`<select-ui value="a"></select-ui>`);
+      await tick();
+      s.options = [{ value: 'a', label: 'A', mark: true, avatar: 'https://example.test/a.png', icon: 'star' }];
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+
+    it('switching the SELECTED option from mark to avatar swaps the trigger leading element (not just its attributes)', async () => {
+      const s = mount(`
+        <select-ui value="adia">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      expect(s.querySelector('[slot="trigger"] > [data-select-leading]').tagName).toBe('ADIA-MARK-UI');
+      s.value = 'acme';
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('IMG');
+      expect(leading.getAttribute('src')).toBe('https://example.test/acme.png');
+    });
+
+    it('a host-level [mark] renders the brand mark as a static leading visual when no option overrides it', async () => {
+      const s = mount(`
+        <select-ui mark value="adia">
+          <option value="adia">Adia</option>
+        </select-ui>
+      `);
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+
+    it('renders <adia-mark-ui> in a listbox ROW under [multiple] mode too (shares #optionLeadHTML with single-select)', async () => {
+      const s = mount(`
+        <select-ui multiple value="adia">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      const row = s.querySelector('[role="option"][data-value="adia"]');
+      expect(row.querySelector('adia-mark-ui')).not.toBeNull();
+      // Multi-select shows chips, not a leading visual, in the TRIGGER — mark
+      // is a correct no-op there (#syncLeading's `if (this.multiple) return`).
+      expect(s.querySelector('[slot="trigger"] > [data-select-leading]')).toBeNull();
+    });
+
+    it('mark set via the .options property (not just the declarative attribute) is honoured', async () => {
+      const s = mount(`<select-ui value="adia"></select-ui>`);
+      await tick();
+      s.options = [
+        { value: 'adia', label: 'Adia', mark: true },
+        { value: 'acme', label: 'Acme', avatar: 'https://example.test/acme.png' },
+      ];
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+  });
 });

package/components/select/select.yaml

@@ -56,6 +56,11 @@ props:
     description: URL for leading avatar image (takes precedence over icon)
     type: string
     default: ""
+  mark:
+    description: Renders the Adia brand mark (`<adia-mark-ui>`) as the leading visual — takes precedence over avatar and icon. Token-driven (light/dark handled internally), so it fits a scheme-switching workspace/app switcher where a static logo URL can't invert. Per-option `mark` on an `<option>`/options-array entry works the same way, scoped to that row.
+    type: boolean
+    default: false
+    reflect: true
   disabled:
     description: Disables interaction and dims the control
     type: boolean
@@ -153,7 +158,7 @@ props:
     default: false
     reflect: true
   options:
-    description: "Option list. Array of {value, label, disabled?, icon?, avatar?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar render in the list AND reflect in the trigger's selected state."
+    description: "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon)."
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
@@ -253,12 +258,16 @@ a2ui:
       at runtime. Or set `.options` programmatically as an array of
       `{value, label, disabled?}` (grouped form: `{label, options:[…]}`).
     - >-
-      Per-option visuals: give each <option> an `icon` (Phosphor name) or
-      `avatar` (image URL) — `<option value="light" icon="sun">`. Each row
-      renders its glyph in the list AND the trigger reflects the SELECTED
-      option's icon/avatar (theme pickers, assignee/account switchers).
-      `avatar` wins over `icon`; a host-level [icon]/[avatar] is the
-      fallback when the selected option carries neither.
+      Per-option visuals: give each <option> an `icon` (Phosphor name),
+      `avatar` (image URL), or `mark` (Adia brand mark) —
+      `<option value="light" icon="sun">`. Each row renders its glyph in
+      the list AND the trigger reflects the SELECTED option's icon/avatar/mark
+      (theme pickers, assignee/account switchers, workspace switchers).
+      `mark` wins over `avatar`, which wins over `icon`; a host-level
+      [mark]/[icon]/[avatar] is the fallback when the selected option
+      carries none of the three. `mark` renders `<adia-mark-ui>` — a
+      token-driven brand mark that inverts with the color scheme, so a
+      workspace/app switcher doesn't need a static, scheme-locked logo URL.
     - >-
       For dynamic option lists rendered inside <editor-shell>, set the
       JSON via the [data-options] attribute — <editor-shell>'s