@adia-ai/web-components 0.6.44 → 0.6.46

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.46] — 2026-05-29
+
+### Added — declarative `traits="..."` Quick start sections on all 56 trait pages
+
+- **`traits/*/\*.examples.html`** — every trait page now opens with a "Quick start" section before the hero demo showing `traits="traitname"` on a real `*-ui` host element. No JS, no import — the declarative attribute is the primary example. Variants shown where config attrs exist. Hallucinated config attr names corrected in 13 pages (agents invented plausible-sounding names; fixed against JS source: e.g. `data-snap-grid` not `data-grid-size`, `data-noise-strength` not `data-noise-opacity`, `data-intersection-threshold` not `data-threshold`, etc.).
+
+### Added — expanded slot vocabulary for `header-ui`, `footer-ui`, `card-ui`
+
+- **`components/header/header.yaml`** — added `icon`, `heading`, `description` slots (previously only `default` + `action` were declared, but the parent container's `@scope` activates a 5-slot grid vocabulary when these are present). Each description explains the parent-`@scope` activation contract.
+- **`components/footer/footer.yaml`** — added `heading`, `description`, `action`, `action-leading` slots (all were styled by card/drawer/modal `@scope` but absent from the yaml; footer `heading`/`description` is the trend-stat / KPI pattern).
+- **`components/card/card.yaml`** — added `media` slot (full-bleed hero image/video region); updated `heading`, `description`, `action`, `action-leading` descriptions to accurately state they work in both `<header>` AND `<footer>` context, not just "in the header".
+
+### Fixed — spurious `bleed` removed from 31 section elements
+
+- **`patterns/kanban-board/kanban-board.examples.html`** and **`traits/confetti|magnetic-hover|tilt-hover/...examples.html`** — removed `bleed` from `<section bleed>` where the direct first child was `text-ui`, `stack-ui`, or `list-ui` without `divider`. `bleed` removes the card section's inset padding and is only correct for edge-to-edge content (tables, charts, code, divider-lists); it was being cargo-culted onto text sections that needed normal padding.
+
+### Fixed — stale token references in shipped examples
+
+- **`components/skeleton/skeleton.examples.html`**: `var(--ui-border)` → `var(--a-border)` (dead token; border was rendering colorless).
+- **`styles/overview.examples.html`**: token tier documentation table updated — `--ui-primary` → `--a-primary`, `--button-bg: var(--ui-primary)` → `var(--a-primary)` (the actual semantic token and component wiring).
+
+### Maintenance
+
+- **`packages/web-components/README.md`** — CDN example URLs updated from frozen `@0.6.30` to `@0.6` minor-range; `check:cdn-pins` guard added to `npm run check` aggregate.
+- **`dist/web-components.min.{js,css}` + `dist/icons-manifest.js`** — bundle rebuild.
+
+## [0.6.45] — 2026-05-29
+
+### Fixed — `<canvas-ui>` lazy `a2ui-root` import uses a bare specifier (FEEDBACK-85, follow-up to FB-81)
+
+- **`components/canvas/canvas.js`** — the FB-81 lazy import used a *relative* cross-package path (`../../../web-modules/runtime/a2ui-root/a2ui-root.js`). That resolves from the real `node_modules` location but breaks once Vite pre-bundles `web-components` into `node_modules/.vite/deps/` — `vite:import-analysis` fails to resolve the relative path (even with `/* @vite-ignore */`) and aborts dep optimization, so the app won't boot (blank page, Vite overlay only). Switched to a **bare specifier** `import('@adia-ai/web-modules/runtime/a2ui-root')`, which resolves identically whether `web-components` is pre-bundled or not (via web-modules' `./runtime/*` export). **`@adia-ai/web-modules` is now declared as an `optionalDependency`** (`^0.6.0`) so the specifier resolves under any bundler; the import stays dynamic + `.catch()`-guarded, so it's loaded only when `<canvas-ui>` is used and degrades gracefully if web-modules is genuinely absent. Lockfile regen (`npm install --package-lock-only`) required at the release cut.
+
+### Fixed — `<select-ui>` derives an accessible name from `placeholder` (FEEDBACK-88)
+
+- **`components/select/select.class.js`** — a placeholder-only `<select-ui placeholder="Status">` (no `label`/`aria-label`/`<field-ui>`) had **no accessible name** (WCAG 4.1.2 fail), while the sibling `<input-ui>` names itself from its placeholder. Added `#syncAccessibleName()` (run in `render()`) mirroring input-ui: derive `aria-label` from `placeholder` when the select is otherwise unnamed. **Guards** (a placeholder-only fix must not clobber a real label): an author `aria-label`, a visible `label`, or `aria-labelledby` always win; the **default `'Select...'` prompt is never used as a name** — otherwise every `<field-ui>`-wrapped select (named via a sibling `<label for>`, which `aria-label` would override) would be renamed to the generic prompt. A `#placeholderNamed` flag tracks the derived name so re-renders refresh/clear it without touching an author's aria-label. +5 unit tests. Known residual (matches input-ui): a `<field-ui>` + a *custom* placeholder on the same select still yields an aria-label from the placeholder — an unusual author combo.
+
+### Maintenance
+
+- **`package.json`** — `@adia-ai/web-modules` added as an `optionalDependency` (`^0.6.0`) for the FB-85 bare-specifier resolution; lockfile regenerated.
+- **`dist/web-components.min.js` + `dist/icons-manifest.js`** — bundle rebuild reflecting the `canvas.js` + `select.class.js` fixes above.
+
 ## [0.6.44] — 2026-05-28
 
 ### Fixed — `<canvas-ui>` no longer hard-requires `@adia-ai/web-modules` at build time (FEEDBACK-81)

package/README.md

@@ -38,12 +38,14 @@ 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.6.30/dist/web-components.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6/dist/web-components.min.css">
 
 <!-- JS: registers all 95 primitives (~250 KB gzipped via Brotli) -->
-<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6.30/dist/web-components.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6/dist/web-components.min.js"></script>
 ```
 
+The `@0.6` range tracks the latest `0.6.x` patch automatically (won't jump to a breaking `0.7`). For reproducible builds, pin an exact version instead — e.g. `@adia-ai/web-components@0.6.45/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.
 
 **Pick ONE bundle path.** Mixing (e.g. `everything.min.js` + a separate `web-components.min.js`) causes `customElements.define` to throw "name already defined" on dup-load. The choice tree:

package/components/canvas/canvas.js

@@ -1,9 +1,16 @@
 import { UIElement } from '../../core/element.js';
 // NOTE: the A2UI renderer (<a2ui-root>) lives in @adia-ai/web-modules and is
 // loaded lazily + guarded inside #ensureRenderer() (kicked off from connected()).
-// It is deliberately NOT a static import: @adia-ai/web-components declares no
-// dependency on @adia-ai/web-modules, so a static cross-package import hard-fails
-// the build for primitives-only consumers who never use <canvas-ui> (FEEDBACK-81).
+// Two constraints shape this import:
+//   • NOT static (FEEDBACK-81): a static cross-package import hard-fails the build
+//     for primitives-only consumers who never use <canvas-ui>. Hence lazy import().
+//   • BARE specifier, not a relative path (FEEDBACK-85): a relative
+//     '../../../web-modules/…' breaks Vite dep pre-bundling — once web-components is
+//     flattened into node_modules/.vite/deps/, the relative path no longer resolves
+//     and import-analysis aborts (even with @vite-ignore). A bare specifier resolves
+//     identically whether pre-bundled or not. @adia-ai/web-modules is declared as an
+//     optionalDependency so it resolves; the .catch() below degrades gracefully if
+//     it is genuinely absent at runtime.
 
 /**
  * <canvas-ui> — A2UI rendering surface.
@@ -102,7 +109,7 @@ export class UICanvas extends UIElement {
       this.#rendererReady = Promise.resolve(true);
       return this.#rendererReady;
     }
-    this.#rendererReady = import(/* @vite-ignore */ '../../../web-modules/runtime/a2ui-root/a2ui-root.js')
+    this.#rendererReady = import('@adia-ai/web-modules/runtime/a2ui-root')
       .then(() => customElements.whenDefined('a2ui-root'))
       .then(() => true)
       .catch((err) => {

package/components/card/card.a2ui.json

@@ -115,19 +115,22 @@
     ],
     "slots": {
       "description": {
-        "description": "Optional descriptive text beneath the heading. Renders in the header slot at body-subtle typography. Use for short metadata lines (timestamp, author, status sentence)."
+        "description": "Secondary metadata — grid row 2 beneath the heading inside `<header>`, or a period/caption line beneath a metric inside `<footer>` (e.g. \"Jan – Mar 2024\"). Also accepts bare `<p>` / `<small>` / body-variant `<text-ui>` as direct children without slot=\"description\". Triggers space-between layout in the footer when combined with slot=\"action\"."
       },
       "action": {
-        "description": "Trailing action cluster in the header (e.g. icon-buttons, menu trigger, more-options). Aligns to the header's flex-end edge."
+        "description": "Trailing control cluster inside `<header>` (icon-buttons, menu trigger, more-options) or the primary action cluster inside `<footer>` (e.g. Save, Confirm). Aligns to the flex-end edge in both contexts. Pair with slot=\"action-leading\" for dual-cluster footers."
       },
       "action-leading": {
-        "description": "Leading action cluster in the header (e.g. back button, switcher, breadcrumb-context). Aligns to the header's flex-start edge, before the icon/heading column."
+        "description": "Leading control cluster — inline-start edge of the header or footer. In the header: back button, breadcrumb context, or workspace switcher, before the icon/heading column. In the footer: secondary action (e.g. Back) opposite the primary cluster."
       },
       "heading": {
-        "description": "Card title. Renders in the header slot with title typography. Typically a short noun phrase or document/object name."
+        "description": "Primary title — grid row 1 inside `<header>`, or the prominent metric value inside `<footer>` (trend-stat / KPI pattern). Also accepts bare `<h1>`–`<h6>` tags as direct children without slot=\"heading\". A slot=\"heading\" wrapper can contain inline badges or metadata alongside the title text."
       },
       "icon": {
-        "description": "Optional leading icon for the card header (status / brand / type marker). Renders next to the heading. Use `<icon-ui name=\"…\">` or any inline icon element."
+        "description": "Leading icon for the card header — status, brand, or type marker. Placed in column 1 of the 3-column header grid when present; heading + description shift to column 2. Use `<icon-ui name=\"…\">`, `<avatar-ui>`, or any inline icon element as a DIRECT child of the `<header>` with slot=\"icon\" (not inside a wrapper — direct-child only, per the :has(> [slot=\"icon\"]) gate)."
+      },
+      "media": {
+        "description": "Full-bleed media region — placed before the first `<header>` or `<section>` as the card's hero image / video / illustration slot. Stretches edge-to-edge (negative margin equal to the card's inset); first-child `[slot=\"media\"]` gets zero border-radius on the top corners so it sits flush with the card border."
       }
     },
     "states": [

package/components/card/card.yaml

@@ -61,27 +61,45 @@ events: {}
 slots:
   icon:
     description: >-
-      Optional leading icon for the card header (status / brand / type
-      marker). Renders next to the heading. Use `<icon-ui name="…">` or
-      any inline icon element.
+      Leading icon for the card header — status, brand, or type marker.
+      Placed in column 1 of the 3-column header grid when present;
+      heading + description shift to column 2. Use `<icon-ui name="…">`,
+      `<avatar-ui>`, or any inline icon element as a DIRECT child of the
+      `<header>` with slot="icon" (not inside a wrapper — direct-child
+      only, per the :has(> [slot="icon"]) gate).
   heading:
     description: >-
-      Card title. Renders in the header slot with title typography.
-      Typically a short noun phrase or document/object name.
+      Primary title — grid row 1 inside `<header>`, or the prominent metric
+      value inside `<footer>` (trend-stat / KPI pattern). Also accepts bare
+      `<h1>`–`<h6>` tags as direct children without slot="heading". A
+      slot="heading" wrapper can contain inline badges or metadata alongside
+      the title text.
   description:
     description: >-
-      Optional descriptive text beneath the heading. Renders in the
-      header slot at body-subtle typography. Use for short metadata
-      lines (timestamp, author, status sentence).
+      Secondary metadata — grid row 2 beneath the heading inside `<header>`,
+      or a period/caption line beneath a metric inside `<footer>` (e.g.
+      "Jan – Mar 2024"). Also accepts bare `<p>` / `<small>` / body-variant
+      `<text-ui>` as direct children without slot="description". Triggers
+      space-between layout in the footer when combined with slot="action".
   action:
     description: >-
-      Trailing action cluster in the header (e.g. icon-buttons, menu
-      trigger, more-options). Aligns to the header's flex-end edge.
+      Trailing control cluster inside `<header>` (icon-buttons, menu
+      trigger, more-options) or the primary action cluster inside `<footer>`
+      (e.g. Save, Confirm). Aligns to the flex-end edge in both contexts.
+      Pair with slot="action-leading" for dual-cluster footers.
   action-leading:
     description: >-
-      Leading action cluster in the header (e.g. back button, switcher,
-      breadcrumb-context). Aligns to the header's flex-start edge,
-      before the icon/heading column.
+      Leading control cluster — inline-start edge of the header or footer.
+      In the header: back button, breadcrumb context, or workspace switcher,
+      before the icon/heading column. In the footer: secondary action (e.g.
+      Back) opposite the primary cluster.
+  media:
+    description: >-
+      Full-bleed media region — placed before the first `<header>` or
+      `<section>` as the card's hero image / video / illustration slot.
+      Stretches edge-to-edge (negative margin equal to the card's inset);
+      first-child `[slot="media"]` gets zero border-radius on the top
+      corners so it sits flush with the card border.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/footer/footer.a2ui.json

@@ -61,8 +61,20 @@
       "table"
     ],
     "slots": {
+      "description": {
+        "description": "Caption or period text rendered beneath slot=\"heading\" — small, muted. Triggers space-between layout when combined with slot=\"action\". Also accepts bare <p> / <small> elements as direct children without slot=\"description\"."
+      },
       "default": {
-        "description": "Default slot — primary child content."
+        "description": "Default slot — primary child content. Typically flat <button-ui> children laid out by the `justify` prop. Prefer flat children; a nested <row-ui> double-applies layout and breaks the chrome's gap."
+      },
+      "action": {
+        "description": "Trailing action cluster — self-aligns to the inline-end edge of the footer. Pair with slot=\"action-leading\" for dual-cluster footers (e.g. Back on the left, Save on the right). Activated by card-ui, drawer-ui, and modal-ui @scope rules."
+      },
+      "action-leading": {
+        "description": "Leading action cluster — self-aligns to the inline-start edge of the footer. Typically a Back or secondary action that needs to sit opposite the primary cluster. Activated by drawer-ui @scope; also works in card-ui footers via the same slot selector."
+      },
+      "heading": {
+        "description": "Metric or period label — rendered prominently at the leading edge of the footer chrome (e.g. \"$12.4k\" / \"Jan – Mar 2024\"). When present the parent's @scope switches to a heading + description layout. Pairs with slot=\"description\" for a caption line below the value (trend-stat footer pattern). Activated by card-ui and drawer-ui @scope rules."
       }
     },
     "states": [

package/components/footer/footer.yaml

@@ -21,7 +21,35 @@ props:
 events: {}
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: >-
+      Default slot — primary child content. Typically flat <button-ui>
+      children laid out by the `justify` prop. Prefer flat children; a
+      nested <row-ui> double-applies layout and breaks the chrome's gap.
+  heading:
+    description: >-
+      Metric or period label — rendered prominently at the leading edge of
+      the footer chrome (e.g. "$12.4k" / "Jan – Mar 2024"). When present
+      the parent's @scope switches to a heading + description layout. Pairs
+      with slot="description" for a caption line below the value (trend-stat
+      footer pattern). Activated by card-ui and drawer-ui @scope rules.
+  description:
+    description: >-
+      Caption or period text rendered beneath slot="heading" — small,
+      muted. Triggers space-between layout when combined with slot="action".
+      Also accepts bare <p> / <small> elements as direct children without
+      slot="description".
+  action:
+    description: >-
+      Trailing action cluster — self-aligns to the inline-end edge of the
+      footer. Pair with slot="action-leading" for dual-cluster footers (e.g.
+      Back on the left, Save on the right). Activated by card-ui, drawer-ui,
+      and modal-ui @scope rules.
+  action-leading:
+    description: >-
+      Leading action cluster — self-aligns to the inline-start edge of the
+      footer. Typically a Back or secondary action that needs to sit opposite
+      the primary cluster. Activated by drawer-ui @scope; also works in
+      card-ui footers via the same slot selector.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/header/header.a2ui.json

@@ -55,11 +55,20 @@
       "alert"
     ],
     "slots": {
+      "description": {
+        "description": "Secondary metadata — grid row 2 beneath the heading, spanning the heading and action columns. Also accepts bare <p> / <small> / body-variant <text-ui> as direct children without slot=\"description\". Renders muted + small."
+      },
       "default": {
-        "description": "Default slot — primary child content."
+        "description": "Default slot — primary child content. When no named slot= attributes are used, all children flow here as a block. Most card/drawer/modal usages prefer the named vocabulary below so the parent's @scope grid activates."
       },
       "action": {
-        "description": "Action region — buttons or badges on the right."
+        "description": "Trailing control cluster — placed in the last column of the parent container's header grid. Use for icon-buttons, menu triggers, or badge/button combinations. The first [slot=\"action\"] child pushes itself to the grid's end; subsequent siblings flow with gap."
+      },
+      "heading": {
+        "description": "Primary title — grid row 1 of the header grid. Also accepts bare <h1>–<h6> tags as direct children without slot=\"heading\". Renders at title weight + size per the parent's @scope. A slot=\"heading\" wrapper element can contain inline badges or metadata alongside the title text."
+      },
+      "icon": {
+        "description": "Leading icon column — placed in column 1 of the parent container's header grid (card-ui / drawer-ui / modal-ui / page-ui). Use <icon-ui name=\"...\">, <avatar-ui>, or any inline icon element. The grid activates only when this slot is present; without it the heading spans the full width."
       }
     },
     "states": [

package/components/header/header.yaml

@@ -17,9 +17,37 @@ props:
 events: {}
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: >-
+      Default slot — primary child content. When no named slot= attributes
+      are used, all children flow here as a block. Most card/drawer/modal
+      usages prefer the named vocabulary below so the parent's @scope grid
+      activates.
+  icon:
+    description: >-
+      Leading icon column — placed in column 1 of the parent container's
+      header grid (card-ui / drawer-ui / modal-ui / page-ui). Use
+      <icon-ui name="...">, <avatar-ui>, or any inline icon element.
+      The grid activates only when this slot is present; without it the
+      heading spans the full width.
+  heading:
+    description: >-
+      Primary title — grid row 1 of the header grid. Also accepts bare
+      <h1>–<h6> tags as direct children without slot="heading". Renders
+      at title weight + size per the parent's @scope. A slot="heading"
+      wrapper element can contain inline badges or metadata alongside
+      the title text.
+  description:
+    description: >-
+      Secondary metadata — grid row 2 beneath the heading, spanning the
+      heading and action columns. Also accepts bare <p> / <small> /
+      body-variant <text-ui> as direct children without slot="description".
+      Renders muted + small.
   action:
-    description: "Action region — buttons or badges on the right."
+    description: >-
+      Trailing control cluster — placed in the last column of the parent
+      container's header grid. Use for icon-buttons, menu triggers, or
+      badge/button combinations. The first [slot="action"] child pushes
+      itself to the grid's end; subsequent siblings flow with gap.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/select/select.class.js

@@ -324,6 +324,37 @@ export class UISelect extends UIFormElement {
     else this.selectAllOptions();
   };
 
+  // FB-88: tracks whether the host's current aria-label was derived from
+  // `placeholder` (vs author-supplied), so re-renders refresh/clear OUR name
+  // without ever clobbering an author's aria-label.
+  #placeholderNamed = false;
+
+  /**
+   * Derive an accessible name from `placeholder` when the select is otherwise
+   * unnamed — mirrors input-ui so a placeholder-only select (the idiomatic
+   * filter-bar shape) still has a name for assistive tech (WCAG 4.1.2, FB-88).
+   *
+   * Guards (a placeholder-only fix must NOT clobber a real label):
+   *  • an author `aria-label`, a visible `label`, or an `aria-labelledby` wins;
+   *  • the default 'Select...' prompt is NOT used as a name — otherwise every
+   *    field-ui-wrapped select (named by a sibling `<label for>`, which aria-label
+   *    would override) would be renamed to the generic prompt.
+   */
+  #syncAccessibleName() {
+    const DEFAULT_PLACEHOLDER = 'Select...'; // matches static properties.placeholder.default
+    const authoredAria = this.hasAttribute('aria-label') && !this.#placeholderNamed;
+    const labeledElsewhere = !!this.label || this.hasAttribute('aria-labelledby');
+    const namable = !authoredAria && !labeledElsewhere
+      && this.placeholder && this.placeholder !== DEFAULT_PLACEHOLDER;
+    if (namable) {
+      this.setAttribute('aria-label', this.placeholder);
+      this.#placeholderNamed = true;
+    } else if (this.#placeholderNamed) {
+      this.removeAttribute('aria-label');
+      this.#placeholderNamed = false;
+    }
+  }
+
   connected() {
     super.connected();
     this.setAttribute('role', 'combobox');
@@ -349,6 +380,10 @@ export class UISelect extends UIFormElement {
     if (this.multiple) this.setAttribute('data-multi-chips', '');
     else this.removeAttribute('data-multi-chips');
 
+    // A11y (FB-88): name a placeholder-only select from its placeholder, like
+    // input-ui, so it isn't unnamed for assistive tech (WCAG 4.1.2).
+    this.#syncAccessibleName();
+
     // Stamp default trigger if none provided
     if (!this.querySelector('[slot="trigger"]')) {
       // Detach listbox before innerHTML wipe so it isn't destroyed

package/components/select/select.test.js

@@ -288,4 +288,38 @@ describe('select-ui', () => {
     await tick();
     expect(s.value).toBe('b');
   });
+
+  // §FB-88 — placeholder-only select derives an accessible name (WCAG 4.1.2),
+  // mirroring input-ui, without clobbering a real label.
+  describe('accessible name from placeholder (FB-88)', () => {
+    it('names a placeholder-only select from its placeholder', async () => {
+      const s = mount(`<select-ui placeholder="Status"></select-ui>`);
+      await tick();
+      expect(s.getAttribute('aria-label')).toBe('Status');
+    });
+
+    it('does NOT derive a name from the default "Select..." placeholder', async () => {
+      const s = mount(`<select-ui></select-ui>`);
+      await tick();
+      expect(s.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('preserves an author-supplied aria-label (override wins over placeholder)', async () => {
+      const s = mount(`<select-ui aria-label="Filter by status" placeholder="Status"></select-ui>`);
+      await tick();
+      expect(s.getAttribute('aria-label')).toBe('Filter by status');
+    });
+
+    it('does not set aria-label when a visible label is present', async () => {
+      const s = mount(`<select-ui label="Status" placeholder="Pick one"></select-ui>`);
+      await tick();
+      expect(s.hasAttribute('aria-label')).toBe(false);
+    });
+
+    it('does not set aria-label when aria-labelledby is present (e.g. field-ui)', async () => {
+      const s = mount(`<select-ui aria-labelledby="ext-label" placeholder="Pick one"></select-ui>`);
+      await tick();
+      expect(s.hasAttribute('aria-label')).toBe(false);
+    });
+  });
 });