@adia-ai/web-components 0.6.50 → 0.7.1

package/components/grid/grid.class.js

@@ -23,10 +23,14 @@ import { parseResponsive, breakpoint } from '../../core/responsive.js';
 
 export class UIGrid extends UIElement {
   static properties = {
-    columns:   { type: String, default: '3',  reflect: true },
-    gap:       { type: String, default: 'md', reflect: true },
-    columnGap: { type: String, default: '',   reflect: true, attribute: 'column-gap' },
-    rowGap:    { type: String, default: '',   reflect: true, attribute: 'row-gap' },
+    columns:        { type: String, default: '3',  reflect: true },
+    gap:            { type: String, default: 'md', reflect: true },
+    columnGap:      { type: String, default: '',   reflect: true, attribute: 'column-gap' },
+    rowGap:         { type: String, default: '',   reflect: true, attribute: 'row-gap' },
+    // Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length,
+    // e.g. "240px", "16rem"). Drives the minmax() floor via --grid-min-col;
+    // unset → the 12rem default. No effect on numeric columns.
+    minColumnWidth: { type: String, default: '',   reflect: true, attribute: 'min-column-width' },
   };
   static template = () => null;
 
@@ -54,6 +58,12 @@ export class UIGrid extends UIElement {
       this.style.gridAutoColumns     = '';
     }
 
+    // ── min-column-width ───────────────────────────────────────────────────────
+    // Feeds the auto-fit/auto-fill minmax() floor (CSS + #colsToTemplate read
+    // var(--grid-min-col, 12rem)). Unset → cleared → falls back to 12rem.
+    if (this.minColumnWidth) this.style.setProperty('--grid-min-col', this.minColumnWidth);
+    else this.style.removeProperty('--grid-min-col');
+
     // ── gap ───────────────────────────────────────────────────────────────────
     // Same pattern: responsive values set inline column/row-gap directly;
     // scalar values clear those and let the universal [gap="N"] token rules
@@ -74,8 +84,8 @@ export class UIGrid extends UIElement {
   #colsToTemplate(v) {
     if (!v) return '';
     if (/^\d+$/.test(v)) return `repeat(${v}, 1fr)`;
-    if (v === 'auto-fill') return 'repeat(auto-fill, minmax(12rem, 1fr))';
-    if (v === 'auto-fit')  return 'repeat(auto-fit,  minmax(12rem, 1fr))';
+    if (v === 'auto-fill') return 'repeat(auto-fill, minmax(var(--grid-min-col, 12rem), 1fr))';
+    if (v === 'auto-fit')  return 'repeat(auto-fit,  minmax(var(--grid-min-col, 12rem), 1fr))';
     return v; // passthrough for custom template expressions
   }
 

package/components/grid/grid.css

@@ -28,9 +28,23 @@
   :scope[columns="5"] { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; }
   :scope[columns="6"] { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; }
 
-  /* Responsive presets */
-  :scope[columns="auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
-  :scope[columns="auto-fit"]  { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
+  /* Responsive presets — the minmax() floor reads [min-column-width] via
+     --grid-min-col (set inline by grid.class.js), defaulting to 12rem.
+     MUST also flip to grid-auto-flow:row + grid-auto-columns:auto (like the
+     numeric rules) — the base :scope default is grid-auto-flow:column +
+     grid-auto-columns:1fr, which makes items flow into IMPLICIT 1fr columns
+     instead of wrapping into the auto-fit row tracks (the cause of the
+     "240px 77px 77px" sliver cram). */
+  :scope[columns="auto-fill"] {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col, 12rem), 1fr));
+  }
+  :scope[columns="auto-fit"] {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-col, 12rem), 1fr));
+  }
 
   /* Column span — children can span multiple columns */
   & > [span="2"] { grid-column: span 2; }

package/components/grid/grid.d.ts

@@ -19,6 +19,8 @@ export class UIGrid extends UIElement {
   columns: string;
   /** Grid gap. Accepts numeric space-scale values (0–12) or named sizes (xs/sm/md/lg/xl). Responsive notation supported: "2 4@md" = 2 below md, 4 from md upward. */
   gap: string;
+  /** Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length, e.g. "240px", "16rem"). Sets the minmax() floor so cards don't shrink below it before wrapping; unset uses the 12rem default. No effect on numeric columns. */
+  minColumnWidth: string;
   /** Row gap override */
   rowGap: string;
 }

package/components/grid/grid.yaml

@@ -35,6 +35,15 @@ props:
       md, 4 from md upward.
     type: string
     default: md
+  minColumnWidth:
+    description: >-
+      Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length,
+      e.g. "240px", "16rem"). Sets the minmax() floor so cards don't shrink
+      below it before wrapping; unset uses the 12rem default. No effect on
+      numeric columns.
+    type: string
+    default: ""
+    attribute: min-column-width
   rowGap:
     description: Row gap override
     type: string

package/components/heatmap/heatmap.class.js

@@ -181,15 +181,21 @@ export class UIHeatmap extends UIElement {
           labels.appendChild(span);
         }
       }
-      labels.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+      // day-grid month labels align to the fixed-size cell columns.
+      labels.style.gridTemplateColumns = `repeat(${cols}, var(--heatmap-cell-min-size, 0.75rem))`;
       this.appendChild(labels);
     }
 
     // ── Grid of cells ──
+    // day-grid keeps FIXED cell tracks (host scrolls horizontally when the
+    // 52-week grid exceeds the container); matrix/density use minmax(0,1fr)
+    // so they fit-and-shrink to the container.
+    const isDayGrid = this.type === 'day-grid';
+    const cellTrack = isDayGrid ? 'var(--heatmap-cell-min-size, 0.75rem)' : 'minmax(0, 1fr)';
     const grid = document.createElement('div');
     grid.setAttribute('data-grid', '');
-    grid.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
-    grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+    grid.style.gridTemplateColumns = `repeat(${cols}, ${cellTrack})`;
+    grid.style.gridTemplateRows = `repeat(${rows}, ${isDayGrid ? 'var(--heatmap-cell-min-size, 0.75rem)' : '1fr'})`;
     for (let r = 0; r < rows; r++) {
       for (let c = 0; c < cols; c++) {
         const d = map.get(`${r},${c}`);

package/components/heatmap/heatmap.css

@@ -36,6 +36,19 @@
     gap: var(--heatmap-gap, var(--heatmap-gap-default));
     color: var(--heatmap-text, var(--heatmap-text-default));
     font-size: var(--a-body-size);
+    /* A wide day-grid (52+ week columns) keeps a FIXED cell size and scrolls
+       horizontally (the GitHub-contributions model) rather than crushing
+       fixed-size cells into overlap. matrix/density fit-and-shrink instead. */
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  /* day-grid: fixed-size cell tracks + intrinsic width so the host scrolls
+     instead of squishing. (class.js writes the fixed gridTemplateColumns
+     inline for day-grid; matrix/density keep minmax(0,1fr) to fit.) */
+  :scope[type="day-grid"] > [data-grid],
+  :scope[type="day-grid"] > [data-months] {
+    width: max-content;
   }
 
   /* Title slot */
@@ -73,8 +86,12 @@
   :scope [data-cell] {
     border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
     background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
-    min-width: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
-    min-height: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
+    /* No hard min on the cell box — it conflicted with matrix/density's
+       minmax(0,1fr) tracks (the floor refused to shrink, so cells overlapped
+       into a smear). day-grid keeps fixed size via its fixed tracks; the
+       fit-to-container modes shrink with the track. */
+    min-width: 0;
+    min-height: 0;
     aspect-ratio: 1 / 1;
     cursor: default;
     transition: transform var(--a-duration-fast) var(--a-easing-out);

package/components/image/image.css

@@ -14,13 +14,16 @@
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: inline-block;
+    display: block;
     position: relative;
     overflow: hidden;
     background: var(--image-bg, var(--image-bg-default));
     border-radius: var(--image-radius, var(--image-radius-default));
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-block; }
+
   /* ── Image ── */
   [slot="image"] {
     display: block;

package/components/input/input.class.js

@@ -327,6 +327,41 @@ export class UIInput extends UIFormElement {
     }
   }
 
+  /**
+   * FEEDBACK-93 — re-resolve the prefix/suffix slots from the live property.
+   *
+   * `connected()` builds the shell ONCE (`this.innerHTML = #shellHTML()`),
+   * reading `this.prefix` / `this.suffix` at that moment. For a reactive
+   * attribute binding (`suffix="${expr}"`) the framework writes the literal
+   * placeholder marker (`{{p:N}}`) into the attribute first and resolves it on
+   * a later reactive tick — so the marker gets baked into the slot as text and,
+   * since `render()` never rebuilt the affixes, it stuck. This mirrors the
+   * slider-ui FEEDBACK-45 fix, but input affixes can be icon names
+   * (`renderAffix` → `<icon-ui>`), so we handle text↔icon transitions here.
+   * The static-deploy icon-registry race is still owned by `#promoteAffixes()`.
+   */
+  #syncAffixSlots() {
+    for (const which of ['prefix', 'suffix']) {
+      const el = this.querySelector(`:scope > [slot="field"] > [slot="${which}"]`);
+      if (!el) continue;
+      const value = this[which] || '';
+      const icon = el.querySelector(':scope > icon-ui');
+      if (value && isIconName(value)) {
+        if (icon) {
+          if (icon.getAttribute('name') !== value) icon.setAttribute('name', value);
+        } else {
+          el.replaceChildren();
+          const created = document.createElement('icon-ui');
+          created.setAttribute('name', value);
+          el.appendChild(created);
+        }
+      } else {
+        if (icon) el.replaceChildren();
+        if (el.textContent !== value) el.textContent = value;
+      }
+    }
+  }
+
   render() {
     if (!this.#textEl) return;
 
@@ -360,6 +395,9 @@ export class UIInput extends UIFormElement {
 
     if (this.#labelEl) this.#labelEl.textContent = this.label || '';
 
+    // Re-resolve prefix/suffix from the live property each render (FEEDBACK-93).
+    this.#syncAffixSlots();
+
     if (this.label) {
       this.removeAttribute('aria-label');
     } else if (this.placeholder) {

package/components/input/input.css

@@ -229,7 +229,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      past the half-column cell). Targeting icon-ui directly is required
      because its own `:where(:scope)` declaration of --icon-size wins over
      any value inherited from its parent button-ui. Tying it to
-     --input-height keeps the chevron proportional across sm/md/lg. */
+     --input-height keeps the caret proportional across sm/md/lg. */
   [data-number] [slot="controls"] icon-ui {
     --icon-size: calc(var(--input-height, var(--input-height-default)) * 0.4);
   }
@@ -304,10 +304,14 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
   [slot="field"] > [slot="leading"],
   [slot="field"] > [slot="trailing"] {
     flex-shrink: 0;
-    /* Sized to chrome height per yaml contract. The button-ui or icon-ui
-       child receives the sizing tokens; we just constrain the slot box
-       and align it to the field's baseline. */
-    align-self: stretch;
+    /* Vertically CENTER the affordance in the chrome — do not `stretch`.
+       Stretch forces the slot box to the full chrome height; for a button-ui
+       child that overrode its own `--button-height` (chrome − 4px), and for a
+       fixed-height affordance like <kbd-ui> (definite `height`) stretch can't
+       grow the box so it pins to flex-start (top) instead — the ⌘K hint sat
+       ~4px high (bug-60). `center` lets each child keep its own token height
+       and sit on the field's vertical center. */
+    align-self: center;
     display: inline-flex;
     align-items: center;
     /* Inline padding moves from [slot="text"] (handled by the field's px)

package/components/input/input.test.js

@@ -15,6 +15,7 @@ import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 import '../../core/element.js';
 import './input.js';
+import { html, stamp } from '../../core/template.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const INPUT_CSS = readFileSync(resolve(__dirname, 'input.css'), 'utf8');
@@ -260,3 +261,59 @@ describe('input-ui — CSS source contract: placeholder pseudo is out of flow',
     );
   });
 });
+
+describe('input-ui — FEEDBACK-93 reactive prefix/suffix re-sync', () => {
+  const settle = () => new Promise((r) => setTimeout(r, 30));
+
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  function suffixOf(el) { return el.querySelector(':scope > [slot="field"] > [slot="suffix"]'); }
+  function prefixOf(el) { return el.querySelector(':scope > [slot="field"] > [slot="prefix"]'); }
+
+  it('resolves a reactive suffix binding instead of leaking the {{p:N}} marker (the bug)', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    // Interpolated attribute → the engine writes {{p:0}} into `suffix` before
+    // connected() reads it, then resolves on the update() tick. Pre-fix the
+    // baked marker stuck; post-fix render() re-resolves it.
+    stamp(html`<input-ui type="number" suffix="${'px'}" value="2"></input-ui>`, container);
+    await settle();
+
+    const el = container.querySelector('input-ui');
+    const suffix = suffixOf(el);
+    expect(suffix).not.toBeNull();
+    expect(suffix.textContent).toBe('px');
+    expect(suffix.textContent).not.toMatch(/\{\{p:/);
+  });
+
+  it('resolves a reactive prefix binding', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    stamp(html`<input-ui prefix="${'$'}" value="9.99"></input-ui>`, container);
+    await settle();
+
+    const el = container.querySelector('input-ui');
+    expect(prefixOf(el).textContent).toBe('$');
+    expect(prefixOf(el).textContent).not.toMatch(/\{\{p:/);
+  });
+
+  it('re-resolves when the bound value later changes', async () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    stamp(html`<input-ui type="number" suffix="${'px'}" value="2"></input-ui>`, container);
+    await settle();
+    const el = container.querySelector('input-ui');
+    expect(suffixOf(el).textContent).toBe('px');
+
+    // Simulate the binding resolving to a new value on a later reactive tick.
+    el.setAttribute('suffix', 'rem');
+    await settle();
+    expect(suffixOf(el).textContent).toBe('rem');
+  });
+
+  it('literal suffix still renders (no regression)', async () => {
+    const el = mount('<input-ui suffix="%"></input-ui>');
+    await settle();
+    expect(suffixOf(el).textContent).toBe('%');
+  });
+});

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

@@ -55,6 +55,25 @@ const BADGE_FOR_STATUS = Object.freeze({
   'coming-soon':{ variant: 'muted',   text: 'Coming soon', icon: '' },
 });
 
+// Fallback glyph per known provider when no explicit [logo] is supplied, so
+// a card set up with just [provider] never renders a blank logo disc. All
+// names are verified Phosphor icons. Unknown providers fall back to a generic
+// plug glyph.
+const PROVIDER_LOGO = Object.freeze({
+  slack:   'chat-circle',
+  github:  'git-branch',
+  gitlab:  'git-branch',
+  linear:  'kanban',
+  stripe:  'credit-card',
+  zapier:  'lightning',
+  figma:   'figma-logo',
+  notion:  'notion-logo',
+  webhook: 'lightning',
+  discord: 'discord-logo',
+  google:  'google-logo',
+});
+const DEFAULT_LOGO = 'plug';
+
 export class UIIntegrationCard extends UIElement {
   // Phosphor icons this primitive auto-stamps (without consumer markup).
   // Aggregated by installIconLoadersForRegistered() across all defined
@@ -238,8 +257,13 @@ export class UIIntegrationCard extends UIElement {
     // a "not found" warn for every {{p:4}} it receives on first connect.
     if (logo.startsWith('{{p:')) return;
 
-    // No logo → strip any prior content and hide.
-    if (!logo) {
+    // Resolve the visual: an explicit [logo] wins; otherwise fall back to a
+    // per-provider glyph (or a generic plug) so a card with only [provider]
+    // never renders a blank disc. Hide only when there's neither.
+    const provider = (this.provider || '').trim().toLowerCase();
+    const resolved = logo || PROVIDER_LOGO[provider] || (provider ? DEFAULT_LOGO : '');
+
+    if (!resolved) {
       this.#logoEl.replaceChildren();
       this.#logoEl.hidden = true;
       return;
@@ -247,18 +271,18 @@ export class UIIntegrationCard extends UIElement {
     this.#logoEl.hidden = false;
 
     // URL vs icon-name sniff: presence of '/' → URL.
-    const isUrl = logo.includes('/');
+    const isUrl = resolved.includes('/');
 
     if (isUrl) {
       // Reuse existing <img> if same src; otherwise re-stamp.
       let img = this.#logoEl.querySelector(':scope > img');
-      if (img && img.getAttribute('src') === logo) {
+      if (img && img.getAttribute('src') === resolved) {
         img.setAttribute('alt', `${this.name || this.provider || 'Integration'} logo`);
         return;
       }
       this.#logoEl.replaceChildren();
       img = document.createElement('img');
-      img.setAttribute('src', logo);
+      img.setAttribute('src', resolved);
       img.setAttribute('alt', `${this.name || this.provider || 'Integration'} logo`);
       img.setAttribute('data-integration-logo', '');
       img.setAttribute('loading', 'lazy');
@@ -269,10 +293,10 @@ export class UIIntegrationCard extends UIElement {
 
     // Icon name → <icon-ui>.
     let icon = this.#logoEl.querySelector(':scope > icon-ui');
-    if (icon && icon.getAttribute('name') === logo) return;
+    if (icon && icon.getAttribute('name') === resolved) return;
     this.#logoEl.replaceChildren();
     icon = document.createElement('icon-ui');
-    icon.setAttribute('name', logo);
+    icon.setAttribute('name', resolved);
     icon.setAttribute('aria-hidden', 'true');
     this.#logoEl.appendChild(icon);
   }

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

@@ -256,11 +256,22 @@ describe('integration-card-ui — logo rendering', () => {
     expect(icon.getAttribute('name')).toBe('lightning');
   });
 
-  it('hides logo wrapper when logo prop is empty', async () => {
+  it('renders a provider fallback glyph when logo prop is empty', async () => {
+    // Empty [logo] + a [provider] → the per-provider Phosphor glyph fallback
+    // (instead of a blank logo disc): wrapper stays visible with an <icon-ui>.
     const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
     await tick2();
     const wrap = c.querySelector('[data-integration-card-logo]');
     expect(wrap).not.toBeNull();
+    expect(wrap.hidden).toBe(false);
+    expect(wrap.querySelector('icon-ui')).not.toBeNull();
+  });
+
+  it('hides logo wrapper when both logo and provider are empty', async () => {
+    const c = mount('<integration-card-ui name="Custom"></integration-card-ui>');
+    await tick2();
+    const wrap = c.querySelector('[data-integration-card-logo]');
+    expect(wrap).not.toBeNull();
     expect(wrap.hidden).toBe(true);
   });
 });

package/components/kbd/kbd.a2ui.json

@@ -17,11 +17,12 @@
       "const": "Kbd"
     },
     "size": {
-      "description": "Sizing scale (compact tier — sm / md only).",
+      "description": "Sizing scale: sm, md (default), lg.",
       "type": "string",
       "enum": [
         "sm",
-        "md"
+        "md",
+        "lg"
       ],
       "default": ""
     }

package/components/kbd/kbd.css

@@ -7,8 +7,10 @@
     --kbd-radius-default:    var(--a-radius-sm);
     --kbd-font-default:      var(--a-font-family-code);
 
-    /* Size — defaults to md */
-    --kbd-font-size-default: var(--a-ui-tiny);
+    /* Size — defaults to md. Glyph is --a-ui-xs (12px) so md reads distinctly
+       larger than sm (--a-ui-tiny 10px) inside its 20px cap — previously both
+       md and sm resolved to --a-ui-tiny, so the glyphs were identical. */
+    --kbd-font-size-default: var(--a-ui-xs);
     --kbd-height-default:    1.25rem;
     --kbd-min-width-default: 1.25rem;
     --kbd-px-default:        var(--a-space-1);
@@ -19,8 +21,9 @@
     --kbd-height-sm-default:    1rem;
     --kbd-min-width-sm-default: 1rem;
 
-    /* Size: lg */
-    --kbd-font-size-lg-default: var(--a-ui-sm);
+    /* Size: lg — glyph --a-ui-md (14px), the top of the three-tier ramp
+       (sm 10 / md 12 / lg 14). */
+    --kbd-font-size-lg-default: var(--a-ui-md);
     --kbd-height-lg-default:    1.5rem;
     --kbd-min-width-lg-default: 1.5rem;
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */

package/components/kbd/kbd.d.ts

@@ -13,6 +13,6 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIKbd extends UIElement {
-  /** Sizing scale (compact tier — sm / md only). */
-  size: 'sm' | 'md';
+  /** Sizing scale: sm, md (default), lg. */
+  size: 'sm' | 'md' | 'lg';
 }

package/components/kbd/kbd.yaml

@@ -11,12 +11,13 @@ description: >-
   menu items, tooltips, command hints, and shortcut documentation.
 props:
   size:
-    description: Sizing scale (compact tier — sm / md only).
+    description: 'Sizing scale: sm, md (default), lg.'
     type: string
     default: ''
     enum:
     - sm
     - md
+    - lg
     reflect: true
 events: {}
 slots:

package/components/list/list.class.js

@@ -87,8 +87,15 @@ export class UIList extends UIElement {
   }
 
   #items() {
+    // Match by TAG as well as role: a child <list-item-ui> sets role="listitem"
+    // in its OWN connected(), which (light-DOM upgrade order) has NOT run yet
+    // when the parent list first render()s. A role-only filter therefore found
+    // zero items on the initial selectable render → aria-selected was never
+    // stamped → the [aria-selected="true"] selection CSS never matched. The tag
+    // name is present pre-upgrade, so this finds the rows regardless of timing;
+    // the attribute (aria-selected) we set persists through their later upgrade.
     return [...this.children].filter(
-      (el) => el.getAttribute && el.getAttribute('role') === 'listitem',
+      (el) => el.tagName === 'LIST-ITEM-UI' || el.getAttribute?.('role') === 'listitem',
     );
   }
 

package/components/menu/menu.class.js

@@ -85,9 +85,18 @@ export class UIMenu extends UIElement {
     if (!trigger) return;
     const pop = this.#ensurePopover();
 
-    // Move menu items into popover (so they render in the top layer).
-    const items = this.querySelectorAll(':scope > menu-item-ui, :scope > menu-divider-ui');
-    for (const item of items) pop.appendChild(item);
+    // Move menu items into the popover (so they render in the top layer).
+    // Use a DESCENDANT query — not `:scope >` — so items rendered via the
+    // template engine's `.map()` / `repeat()` are collected too: those wrap
+    // every interpolated child in a `display:contents` <span> (core/template.js
+    // wrap()), making the items grandchildren that a direct-child query skips
+    // → an empty popover (FEEDBACK-92). Skip anything already relocated into
+    // the popover so a re-entrant #show() (reactive re-render while open)
+    // doesn't reorder items. Mirrors the descendant query #hide() already uses.
+    const items = this.querySelectorAll('menu-item-ui, menu-divider-ui');
+    for (const item of items) {
+      if (!pop.contains(item)) pop.appendChild(item);
+    }
 
     if (!pop.matches(':popover-open')) pop.showPopover?.();
 

package/components/menu/menu.css

@@ -12,10 +12,13 @@
 
   :scope {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     position: relative;
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   /* 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. */