@adia-ai/web-components 0.7.5 → 0.7.7

package/components/input/input.yaml

@@ -80,12 +80,14 @@ props:
     - email
     - url
     - none
+    dynamic: true  # native attr — routed via setAttribute to the host, deliberately NOT in static properties (would clobber native reflection)
   autocomplete:
     description: 'Browser autofill behavior per HTML autocomplete spec. Routed via setAttribute to the host element. Common
       values: off, on, cc-number, cc-exp, cc-csc, cc-name, email, username, current-password, new-password, one-time-code,
       given-name, family-name, street-address, postal-code.'
     type: string
     default: ''
+    dynamic: true  # native attr — routed via setAttribute to the host, deliberately NOT in static properties (would clobber native reflection)
   min:
     description: Minimum numeric value. Applies when `type="number"`. Clamps + drives aria-valuemin + the [-] button's disabled
       state.

package/components/integration-card/integration-card.class.js

@@ -226,6 +226,7 @@ export class UIIntegrationCard extends UIElement {
   #hasConsumerDescription() {
     // Author description = direct child element that is neither one of our
     // stamped data- markers nor an [slot="actions"] / [slot="action"] node.
+    // wrapper-trap-ok: detects presence of consumer-provided description; wrapper spans from interpolated content also qualify as "consumer description present" (correct — the content IS there)
     for (const child of this.children) {
       if (child === this.#bodyEl) continue;
       if (child === this.#descEl) continue;

package/components/list/list.class.js

@@ -174,6 +174,7 @@ export class UIListItem extends UIElement {
   // otherwise we'd accidentally remove e.g. a <span slot="icon"> inside a
   // child <card-ui> when list-item-ui has no `icon` prop.
   #ownChild(selector) {
+    // wrapper-trap-ok: finds component-stamped children (identified by [data-list-stamped]) — consumer list-item-ui children are never queried here
     for (const ch of this.children) {
       if (ch.matches(selector)) return ch;
     }

package/components/list/list.yaml

@@ -34,6 +34,7 @@ props:
       so content sits at the list-ui edges (canonical edge-to-edge style).
     type: boolean
     default: false
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
   selectable:
     description: Enable selection on child listitems (roving tabindex + aria-selected).
     type: boolean

package/components/menu/menu.class.js

@@ -290,6 +290,7 @@ export class UIMenuItem extends UIElement {
   #wasStamped(el) { return el?.dataset?.menuItemStamped === '1'; }
 
   #ownChild(selector) {
+    // wrapper-trap-ok: finds component-stamped children (data-menuItemStamped); consumer menu-item-ui children are adopted by #show() using logical children
     for (const ch of this.children) {
       if (ch.matches(selector)) return ch;
     }

package/components/menu/menu.css

@@ -21,9 +21,21 @@
 
   /* Items/dividers in Light DOM are hidden unless they've been adopted
      into the popover on open. Popover API also hides the popover itself
-     when closed. */
+     when closed.
+
+     FB-97: interpolated items (`.map()` / `repeat()`) arrive nested in the
+     template engine's `display:contents` / `role="presentation"` wrapper
+     span (core/template.js), so the direct-child combinator alone misses
+     them on the initial (never-opened) render — a CLOSED declarative menu
+     would lay them out in flow and balloon to its widest item's width,
+     displacing siblings. The wrapper-piercing descendant selectors hide
+     those too. Safe vs. the open state: #show() appendChild's the real
+     items (not the wrappers) into [data-menu-popover], so open-state items
+     are neither `:scope >` children nor under a `:scope > [role]` wrapper. */
   :scope > menu-item-ui,
-  :scope > menu-divider-ui {
+  :scope > menu-divider-ui,
+  :scope > [role="presentation"] menu-item-ui,
+  :scope > [role="presentation"] menu-divider-ui {
     display: none;
   }
 }

package/components/pipeline-status/pipeline-status.yaml

@@ -15,6 +15,7 @@ props:
     description: 'Component property: complete.'
     type: boolean
     default: false
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
   message:
     description: 'Component property: message.'
     type: string

package/components/radio/radio.a2ui.json

@@ -108,9 +108,6 @@
       "dot": {
         "description": "Radio dot indicator, sized via --dot-size"
       },
-      "hint": {
-        "description": "Hint text container, rendered via CSS attr(hint) on ::after"
-      },
       "label": {
         "description": "Label text container, rendered via CSS attr(label) on ::after"
       }

package/components/radio/radio.yaml

@@ -59,8 +59,6 @@ events:
 slots:
   dot:
     description: Radio dot indicator, sized via --dot-size
-  hint:
-    description: Hint text container, rendered via CSS attr(hint) on ::after
   label:
     description: Label text container, rendered via CSS attr(label) on ::after
 states:

package/components/rating/rating.yaml

@@ -53,6 +53,7 @@ props:
       - ""
       - accent
       - warning
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
 events:
   "[object Object]":
     description: "Fired on [object Object]."

package/components/search/search.a2ui.json

@@ -99,14 +99,7 @@
       "Command",
       "Select"
     ],
-    "slots": {
-      "clear": {
-        "description": "Clear button (shown when value is non-empty)"
-      },
-      "input": {
-        "description": "Native search input element"
-      }
-    },
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/search/search.yaml

@@ -48,11 +48,7 @@ events:
         description: Current search-input value.
   search:
     description: Debounced CustomEvent with detail.query containing the search string
-slots:
-  clear:
-    description: Clear button (shown when value is non-empty)
-  input:
-    description: Native search input element
+slots: {}
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/select/select.a2ui.json

@@ -108,8 +108,7 @@
     },
     "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.",
-      "type": "array",
-      "default": []
+      "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "pattern": {
       "description": "Regex pattern for validation",

package/components/select/select.class.js

@@ -77,6 +77,9 @@ export class UISelect extends UIFormElement {
   #query = '';
   #searchInput = null;
   #rafId = null;
+  // FB-98: re-parse interpolated <option> children (.map()/repeat()) that arrive
+  // wrapper-nested and/or after connected(); torn down in disconnected().
+  #optionObserver = null;
 
   #onSearchFocus = () => { if (!this.disabled) this.open = true; };
   #onSearchClick = (e) => { e.stopPropagation(); if (!this.disabled) this.open = true; };
@@ -371,6 +374,27 @@ export class UISelect extends UIFormElement {
     if (this.#options.length === 0) {
       this.#parseOptions();
     }
+    // FB-98: interpolated <option>/<optgroup> (.map()/repeat()) are nested in the
+    // engine's display:contents wrapper spans and often applied in the template's
+    // update() pass AFTER connected() — so the parse above can see nothing ("No
+    // options"). Observe for them and re-parse once they appear. Guards: skip if
+    // options are already parsed/set, and skip unless there's a real
+    // <option>/<optgroup> to parse — so the component's own listbox/empty-state
+    // renders (and #parseOptions's own option removals) don't re-enter or loop.
+    if (!this.#optionObserver) {
+      this.#optionObserver = new MutationObserver(() => {
+        if (this.#options.length) return;
+        const kids = this.#logicalOptionChildren();
+        if (!kids.some((c) => c.tagName === 'OPTION' || c.tagName === 'OPTGROUP')) return;
+        this.#parseOptions();
+        if (this.#options.length) {
+          this.#renderOptions();
+          const display = this.querySelector('[slot="display"]');
+          if (display) display.textContent = this.#displayText();
+        }
+      });
+    }
+    this.#optionObserver.observe(this, { childList: true, subtree: true });
   }
 
   render() {
@@ -544,6 +568,25 @@ export class UISelect extends UIFormElement {
   }
 
   /** Parse <option> and <optgroup> children into internal model. */
+  // FB-98: collect declarative <option>/<optgroup> children — direct OR nested
+  // inside the template engine's display:contents wrapper spans (which carry
+  // role="presentation" since 0.7.2) — so .map()/repeat()-rendered options are
+  // seen, not just static literals. Skips component-stamped [slot] children
+  // (display/listbox/trigger). Mirrors tree-ui's #logicalSlotChildren (FB-96).
+  #logicalOptionChildren() {
+    const out = [];
+    const walk = (parent) => {
+      for (const ch of parent.children) {
+        if (ch.hasAttribute('slot')) continue;                  // component-stamped — skip, don't descend
+        if (ch.tagName === 'OPTION' || ch.tagName === 'OPTGROUP') { out.push(ch); continue; }
+        if (ch.matches('[role="presentation"]') || ch.style?.display === 'contents') { walk(ch); continue; }
+        out.push(ch);                                           // unknown authored child — caller warns
+      }
+    };
+    walk(this);
+    return out;
+  }
+
   #parseOptions() {
     this.#options = [];
     // §225 (v0.5.9): track unknown-child-tag names so we can warn once per element.
@@ -552,7 +595,8 @@ export class UISelect extends UIFormElement {
     // declarative initial selection is honoured (native <select> parity).
     // §FB-46: collect ALL selected options for [multiple] mode (not just first).
     const preSelectedArr = [];
-    for (const child of this.children) {
+    // FB-98: iterate wrapper-pierced logical children so interpolated options work.
+    for (const child of this.#logicalOptionChildren()) {
       if (child.tagName === 'OPTGROUP') {
         const group = { label: child.label || child.getAttribute('label') || '', options: [] };
         for (const opt of child.querySelectorAll('option')) {
@@ -974,6 +1018,7 @@ export class UISelect extends UIFormElement {
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKey);
     this.removeEventListener('remove', this.#onChipRemove);
+    this.#optionObserver?.disconnect();   // FB-98
     if (this.#rafId != null) {
       cancelAnimationFrame(this.#rafId);
       this.#rafId = null;

package/components/select/select.test.js

@@ -27,6 +27,39 @@ describe('select-ui', () => {
     expect(s.value).toBe('b');
   });
 
+  // §FB-98 — <option> children nested in the template engine's display:contents
+  // wrapper spans (.map()/repeat()) must be parsed, not just static literals.
+  it('FB-98: parses options nested in display:contents/role=presentation wrappers (present at connect)', async () => {
+    const s = mount(`
+      <select-ui value="a">
+        <span style="display:contents" role="presentation">
+          <span style="display:contents" role="presentation"><option value="a">Alpha</option></span>
+          <span style="display:contents" role="presentation"><option value="b">Beta</option></span>
+          <span style="display:contents" role="presentation"><option value="c">Gamma</option></span>
+        </span>
+      </select-ui>
+    `);
+    await tick();
+    expect(s.querySelectorAll('[role="option"]').length).toBe(3);
+    expect(s.options.map((o) => o.value)).toEqual(['a', 'b', 'c']);
+    expect(s.value).toBe('a');
+  });
+
+  // §FB-98 — interpolated options that ARRIVE after connect (the template's
+  // update() pass) are picked up by the re-parse MutationObserver.
+  it('FB-98: re-parses wrapped options that arrive after connect (observer)', async () => {
+    const s = mount(`<select-ui></select-ui>`);
+    await tick();
+    expect(s.querySelectorAll('[role="option"]').length).toBe(0);
+    const wrap = document.createElement('span');
+    wrap.style.display = 'contents';
+    wrap.setAttribute('role', 'presentation');
+    wrap.innerHTML = `<option value="x">X</option><option value="y">Y</option>`;
+    s.appendChild(wrap);
+    await tick(); await tick();   // mutation → observer microtask → re-parse + render
+    expect(s.querySelectorAll('[role="option"]').length).toBe(2);
+  });
+
   // §FB-46 — <option selected> must capture ALL values in [multiple] mode
   it('captures all <option selected> values as comma-separated for [multiple]', async () => {
     const s = mount(`

package/components/select/select.yaml

@@ -35,6 +35,7 @@ props:
     type: string
     default: default
     enum: [default, ghost]
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
   size:
     description: >-
       Sizing scale via universal `[size]` attribute system
@@ -154,6 +155,7 @@ props:
     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."
     type: array
     default: []
+    dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
   pattern:
     description: Regex pattern for validation
     type: string

package/components/slider/slider.a2ui.json

@@ -139,9 +139,6 @@
       "hint": {
         "description": "Override slot for hint markup richer than the plain [hint] attribute string (inline links, code spans). Renders beneath the slider at body-subtle typography. Mutually exclusive with [hint]."
       },
-      "input": {
-        "description": "Native range input element"
-      },
       "label": {
         "description": "Label element above the slider"
       },

package/components/slider/slider.yaml

@@ -90,8 +90,6 @@ events:
   input:
     description: Fired on each slider movement
 slots:
-  input:
-    description: Native range input element
   label:
     description: Label element above the slider
   value:

package/components/swatch/swatch.class.js

@@ -409,6 +409,7 @@ export class UISwatch extends UIElement {
   #absorbChromeSlot() {
     if (!this.#tileEl || !this.#badgeEl) return;
     const chromeChildren = [];
+    // wrapper-trap-ok: swatch chrome-slot children are always a single literal element (e.g. a selected-state checkmark); interpolated chrome collections are not a documented pattern
     for (const child of this.children) {
       if (child === this.#tileEl) continue;
       if (child === this.#badgeEl) break; // hit the badge — done scanning the head region

package/components/table/table.a2ui.json

@@ -15,16 +15,14 @@
   "properties": {
     "columns": {
       "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.",
-      "type": "array",
-      "default": []
+      "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "component": {
       "const": "Table"
     },
     "data": {
       "description": "Row records. Array of plain objects keyed to columns[].key.",
-      "type": "array",
-      "default": []
+      "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "density": {
       "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",

package/components/table/table.d.ts

@@ -87,9 +87,9 @@ export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 
 export class UITable extends UIElement {
   /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children. */
-  columns: unknown[];
+  columns: string;
   /** Row records. Array of plain objects keyed to columns[].key. */
-  data: unknown[];
+  data: string;
   /** Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows. */
   density: 'compact' | 'standard' | 'comfortable';
   /** Enable row expansion */

package/components/table/table.yaml

@@ -23,10 +23,12 @@ props:
     description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, accessor?, format?, render?, sortFn?, filterType?, meta?}. Alternative to declarative <col-def> children.
     type: array
     default: []
+    dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
   data:
     description: Row records. Array of plain objects keyed to columns[].key.
     type: array
     default: []
+    dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
   density:
     description: Controls cell padding and row height. 'compact' for dense data, 'standard' for default
       spacing, 'comfortable' for spacious rows.

package/components/tabs/tabs.yaml

@@ -26,6 +26,7 @@ props:
     type: string
     default: default
     enum: [default, bordered]
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
   value:
     description: Value of the currently active tab. Set programmatically or auto-assigned to the first
       non-disabled tab on connect.

package/components/tag/tag.yaml

@@ -71,6 +71,7 @@ props:
       - solid
       - muted
       - outline
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
 events:
   remove:
     description: Fired when the dismiss button is activated.

package/components/toggle-group/toggle-group.yaml

@@ -18,6 +18,7 @@ props:
     description: When true, restrict to one active option (single-select).
     type: boolean
     default: false
+    reflect: false  # declarative presentational attribute — CSS/author-time read, non-reactive by design
   value:
     description: Comma-separated selected values
     type: string

package/components/toolbar/toolbar.class.js

@@ -297,6 +297,7 @@ export class UIToolbar extends UIElement {
       // (Items moved to the popover and back must restore their original slot —
       // otherwise dividers end up clumped next to dividers and groups split.)
       let idx = 0;
+      // wrapper-trap-ok: stamps original DOM order on toolbar items for overflow tracking; toolbar children are always static literal buttons/groups (dynamic toolbars not documented)
       for (const el of this.children) {
         if (el === trigger || el === popover) continue;
         if (el.dataset.toolbarOrder == null) el.dataset.toolbarOrder = String(idx);

package/components/tree/tree.a2ui.json

@@ -77,8 +77,8 @@
       "Accordion"
     ],
     "slots": {
-      "default (tree-item-ui children)": {
-        "description": "Child content region for the `default (tree-item-ui children)` slot."
+      "default": {
+        "description": "Holds the tree's top-level `<tree-item-ui>` children."
       },
       "icon": {
         "description": "Override slot for the per-node icon glyph. Tree-item's `[icon]` attr stamps a default Phosphor icon; the slot lets consumers fill custom icons (folder open/closed, file-type glyphs, branded markers)."

package/components/tree/tree.yaml

@@ -41,8 +41,8 @@ events:
         type: boolean
         description: Shift key held during activation (false for programmatic select()).
 slots:
-  default (tree-item-ui children):
-    description: "Child content region for the `default (tree-item-ui children)` slot."
+  default:
+    description: "Holds the tree's top-level `<tree-item-ui>` children."
   icon:
     description: >-
       Override slot for the per-node icon glyph. Tree-item's `[icon]` attr