@adia-ai/web-components 0.8.8 → 0.8.10

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.10] — 2026-07-20
+
+### Added
+- **`<tag-ui>` gains an `accent` variant** (`components/tag/tag.{yaml,css}`; gh#372) — the brand-primary-colored option for non-semantic labels (filter chips, taxonomy tags) that shouldn't imply a success/warning/danger state, mirroring `<badge-ui>`'s existing `accent` variant token-for-token across all three `tone` values. `tag-ui`'s enum was `default | info | success | warning | danger`; `badge-ui`'s parallel enum already had `accent` — the two sibling components' variant vocabularies had drifted apart.
+
+### Fixed
+- **`calendar-grid-ui` in-range highlight now extends across month boundaries** (`components/calendar-grid/calendar-grid.class.js`; gh#368) — a selected range spanning two months previously broke visual continuity at the boundary: the previous/next-month "filler" day loops rendered `data-outside` cells with no date comparison at all, so they could never carry `data-in-range`. Consolidated the per-day predicate logic into a shared `dayCell(date, day, outside)` closure used by all three day-loops; filler days stay exactly as unselectable as before — a pure visual-continuity fix, selection value unaffected.
+- **Dialog-class backdrops (`modal-ui`, `drawer-ui`, `tour-ui`) read black at ~80% opacity, not mid-gray at 50%** (`styles/colors/semantics/{aliases,features}.css`; gh#373) — a self-documented regression from the 2026-07-14 "Material Phase 5" migration, which repointed the dialog scrim onto the shared neutral-500 static ladder (a mid-tone tint, never black; its darkest tier topped out at 60%). Added a purpose-built `--a-chrome-scrim-dialog: oklch(0 0 0 / 0.8)` token (matching the existing non-adaptive black/white CHROME-tier pattern) and repointed `--a-scrim-dialog` to it, leaving the shared ladder's other four roles (hover-wash, toast-veil, generic-overlay, heaviest-veil) untouched.
+- **`<card-ui>`'s `width: stretch` no longer squashes unequal-content flex siblings to identical widths** (`components/card/card.css`; gh#380) — when several `card-ui` KPI tiles (e.g. stat-ui) sit as flex siblings without explicit sizing, `stretch` gave every card an identical flex-basis regardless of content, so `flex-shrink` divided the deficit equally — squeezing a long-title/large-value card to the same pixel width as a trivial short one, which then triggered `stat-ui`'s own (correct) ellipsis truncation. Changed to `flex: 1 1 auto`, which still lets a lone card fill its row but sizes flex-basis from content so unequal siblings shrink proportionally. No effect in block/grid contexts (this repo's canonical KPI-row pattern).
+- **`table.yaml`'s `[raw]` a2ui rule no longer describes non-existent "demo seed data" behavior** (`components/table/table.yaml`; gh#385) — the rule dated to before v0.6.33 and described a data-lifecycle toggle that no longer exists; `[raw]` unconditionally short-circuits the entire data lifecycle (no header injection, no `.data`/`.columns` reconciliation, no aggregation/pagination footers), regardless of whether `.columns`/`.data` are set. Rewritten to match `render()`'s actual `if (this.raw) return;` early-return and every real consumer's usage (spreadsheet/inline-edit style patterns wrapping consumer-owned body markup).
+
+### Maintenance
+- **`dist/` bundles rebuilt** (`web-components.{min.css,min.js,sheet.js}`, `host.{min.css,sheet.js}`, `theme-provider.min.js`) — regenerated from the source changes described above, not independent edits.
+
+## [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

package/components/calendar-grid/calendar-grid.class.js

@@ -181,36 +181,39 @@ export class UICalendarGrid extends UIElement {
     const daysInMonth  = new Date(year, month + 1, 0).getDate();
     const daysInPrev   = new Date(year, month, 0).getDate();
 
-    h += '<div data-cal-grid>';
-
-    // Previous-month trailing days (outside, disabled)
-    for (let i = firstDay - 1; i >= 0; i--) {
-      const day = daysInPrev - i;
-      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${day}"></button-ui>`;
-    }
-
-    // Current-month days
-    for (let d = 1; d <= daysInMonth; d++) {
-      const date       = new Date(year, month, d);
-      const iso        = toISO(year, month, d);
-      const isToday    = sameDay(date, today);
-      const isSelected = selected && sameDay(date, selected);
-      const isDisabled = (minDate && date < minDate) || (maxDate && date > maxDate);
-      const isFocused  = this.#focusedDay === d;
+    // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
+    // number moves from element text content to the `text` attribute, which
+    // button-ui renders via CSS attr(text) on its ::after.
+    //
+    // Shared by all three day-loops (prev-month filler / current-month /
+    // next-month filler) so today/selected/in-range predicates stay
+    // consistent across a month boundary (gh#368) — a range spanning two
+    // months must show a continuous in-range band through the filler days
+    // representing the adjacent month, not just within each month's own
+    // cells. Filler days pass `outside: true`, which forces them
+    // disabled/unfocusable/unclickable regardless of the computed
+    // predicates — this only affects the highlight band's visual
+    // continuity, never selectability.
+    const dayCell = (date, day, outside) => {
+      const iso = toISO(date.getFullYear(), date.getMonth(), date.getDate());
+      const isToday      = sameDay(date, today);
+      const isSelected   = !!(selected && sameDay(date, selected));
       // In-range: strictly between rangeStart and rangeEnd (endpoints
       // themselves render as `[data-selected]` via the `value` prop;
       // marking them in-range too would double-up the styling).
-      const isInRange = !!(rangeFrom && rangeTo
+      const isInRange    = !!(rangeFrom && rangeTo
         && date > rangeFrom && date < rangeTo);
       // Range endpoint flags — let CSS render the start/end cell with
-      // half-pill caps so the in-range strip reads as a continuous
-      // band when displayed next to the in-range cells.
+      // half-pill caps so the in-range strip reads as a continuous band
+      // when displayed next to the in-range cells.
       const isRangeStart = !!(rangeFrom && sameDay(date, rangeFrom));
       const isRangeEnd   = !!(rangeTo   && sameDay(date, rangeTo));
+      const isDisabled   = outside || (minDate && date < minDate) || (maxDate && date > maxDate);
+      const isFocused    = !outside && this.#focusedDay === day;
 
       const attrs = [
         'data-cal-day',
-        `data-date="${iso}"`,
+        outside ? 'data-outside' : `data-date="${iso}"`,
         isToday      ? 'data-today' : '',
         isSelected   ? 'data-selected' : '',
         isInRange    ? 'data-in-range' : '',
@@ -221,17 +224,31 @@ export class UICalendarGrid extends UIElement {
         `tabindex="${isFocused ? '0' : '-1'}"`,
       ].filter(Boolean).join(' ');
 
-      // <button-ui variant="ghost" text="…"> (gh issue 276 wave 4) — the day
-      // number moves from element text content to the `text` attribute,
-      // which button-ui renders via CSS attr(text) on its ::after.
-      h += `<button-ui variant="ghost" ${attrs} text="${d}"></button-ui>`;
+      return `<button-ui variant="ghost" ${attrs} text="${day}"></button-ui>`;
+    };
+
+    h += '<div data-cal-grid>';
+
+    // Previous-month trailing days (outside, disabled)
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear  = month === 0 ? year - 1 : year;
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const day = daysInPrev - i;
+      h += dayCell(new Date(prevYear, prevMonth, day), day, true);
+    }
+
+    // Current-month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      h += dayCell(new Date(year, month, d), d, false);
     }
 
     // Next-month leading days
     const totalCells = firstDay + daysInMonth;
     const remaining  = (7 - (totalCells % 7)) % 7;
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear  = month === 11 ? year + 1 : year;
     for (let d = 1; d <= remaining; d++) {
-      h += `<button-ui variant="ghost" data-cal-day data-outside disabled tabindex="-1" text="${d}"></button-ui>`;
+      h += dayCell(new Date(nextYear, nextMonth, d), d, true);
     }
 
     h += '</div>';

package/components/card/card.css

@@ -61,7 +61,7 @@
     box-shadow: var(--card-shadow);
     overflow: hidden;
     corner-shape: superellipse(1.1);
-    width: stretch;
+    flex: 1 1 auto;
   }
 
   /* ═══════ Variants — token-only overrides ═══════ */

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

package/components/table/table.yaml

@@ -269,9 +269,15 @@ a2ui:
       multiline, or per-cell with [data-wrap] on a single column /
       cell.
     - >-
-      Use [raw] in production app consumers — it disables the demo
-      seed data so the table renders only consumer-provided rows /
-      columns / data props.
+      [raw] is a visual-and-lifecycle chrome reset for consumer-owned
+      body markup — render()'s early return (`if (this.raw) return;`)
+      is unconditional: no header injection, no .data/.columns
+      reconciliation, no empty/loading overlays, no aggregation or
+      pagination footers, even if .columns and .data are set. Reach
+      for it only when the consumer authors 100% of the body
+      (spreadsheet / inline-edit style patterns wrapping a native
+      <table>) — never to "keep the data lifecycle but skip demo
+      seeding."
     - >-
       Listen for the `sort` event with detail.key + detail.dir (NOT
       .column / .direction). `cell-click` detail carries {key, row,

package/components/tag/tag.a2ui.json

@@ -55,10 +55,11 @@
       "default": "solid"
     },
     "variant": {
-      "description": "Semantic variant — `default | info | success | warning | danger`.",
+      "description": "Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token.",
       "type": "string",
       "enum": [
         "default",
+        "accent",
         "info",
         "success",
         "warning",

package/components/tag/tag.css

@@ -93,6 +93,15 @@ tag-ui[removable]:not([disabled]):hover {
      text, near-white in both schemes by design). Reads as a status pill
      where the chip IS the state. Opt out per-tag via [tone="muted"] for
      metadata-chip surfaces in dense lists. */
+  /* `accent` is brand-primary emphasis for non-semantic labels — mirrors
+     <badge-ui>'s `accent` variant token-for-token (--a-primary-bg /
+     on-primary for the solid fill), applied to tag-ui's own solid-default
+     tone shape. Not a status color — no success/warning/danger implication. */
+  :scope[variant="accent"] {
+    --tag-bg: var(--a-primary-bg);
+    --tag-fg: var(--md-sys-color-primary-on-primary);
+  }
+
   :scope[variant="info"] {
     --tag-bg: var(--a-info-bg);
     --tag-fg: var(--md-sys-color-info-on-info);
@@ -149,11 +158,21 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-bg: var(--md-sys-color-danger-container);
     --tag-fg: var(--md-sys-color-danger-on-surface);
   }
+  /* Mirrors <badge-ui>'s default (muted) accent pair —
+     --md-sys-color-primary-container / -on-surface. */
+  :scope[tone="muted"][variant="accent"] {
+    --tag-bg: var(--md-sys-color-primary-container);
+    --tag-fg: var(--md-sys-color-primary-on-surface);
+  }
 
   /* `[tone="solid"]` on the neutral default (or no variant) inverts the
      chrome — solid fg-color bg with bg-color text. High-contrast neutral
-     stamp. Explicit opt-in; the variant-less default stays quiet chrome. */
-  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+     stamp. Explicit opt-in; the variant-less default stays quiet chrome.
+     [variant="accent"] is excluded — it already has an explicit solid
+     pair above (the plain [variant="accent"] rule) that this higher-
+     specificity fallback would otherwise clobber when tone="solid" is
+     set explicitly alongside it. */
+  :scope[tone="solid"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
     --tag-bg: var(--md-sys-color-neutral-on-surface);
     --tag-fg: var(--md-sys-color-neutral-background);
   }
@@ -182,8 +201,15 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-fg:     var(--md-sys-color-danger-on-surface);
     --tag-border: var(--md-sys-color-danger-outline);
   }
-  /* Outline on neutral (no family) — fg-muted text + subtle border. */
-  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]) {
+  /* Mirrors <badge-ui>'s outline accent pair —
+     --md-sys-color-primary-on-surface / -primary-outline. */
+  :scope[tone="outline"][variant="accent"] {
+    --tag-fg:     var(--md-sys-color-primary-on-surface);
+    --tag-border: var(--md-sys-color-primary-outline);
+  }
+  /* Outline on neutral (no family) — fg-muted text + subtle border.
+     [variant="accent"] excluded — see the [tone="solid"] fallback note above. */
+  :scope[tone="outline"]:not([variant="info"]):not([variant="success"]):not([variant="warning"]):not([variant="danger"]):not([variant="accent"]) {
     --tag-fg:     var(--a-fg-muted);
     --tag-border: var(--md-sys-color-neutral-outline);
   }

package/components/tag/tag.d.ts

@@ -54,8 +54,8 @@ tone unless `tone="solid"` is set explicitly (high-contrast neutral
 inverse), or `tone="outline"` (fg-muted text + subtle border).
  */
   tone: 'solid' | 'muted' | 'outline';
-  /** Semantic variant — `default | info | success | warning | danger`. */
-  variant: 'default' | 'info' | 'success' | 'warning' | 'danger';
+  /** Semantic variant — `default | accent | info | success | warning | danger`. `accent` is brand-primary emphasis for non-semantic labels — a filter chip or taxonomy tag that shouldn't imply a success/warning/danger state. Mirrors <badge-ui>'s `accent` variant token-for-token. */
+  variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
 
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,