semmet-angular 0.44.0 → 0.46.0

package/src/block/files/__name@dasherize__/__name@dasherize__.html.template

@@ -38,14 +38,15 @@ Import <%= classify(name) %> in that parent component.
     <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
     <p class="semmet-block__summary">{{ summary }}</p>
   </header>
-  <div class="semmet-block__stack">
-    <<%= supportSelector %>>
-      @for (item of items; track item.title; let first = $first) {
-        <ng-template <%= camelize(supportName) %>Item [id]="item.title" [title]="item.title" [expanded]="first">
-          <p>{{ item.text }}</p>
-        </ng-template>
-      }
-    </<%= supportSelector %>>
+  <div class="semmet-block__stack" <%= camelize(supportName) %>>
+    @for (item of items; track item.title; let first = $first) {
+      <h3>
+        <button type="button" <%= camelize(supportName) %>Header [value]="item.title" [expanded]="first">{{ item.title }}</button>
+      </h3>
+      <div <%= camelize(supportName) %>Panel [value]="item.title">
+        <p>{{ item.text }}</p>
+      </div>
+    }
   </div>
 </section>
 <% } else if (kind === 'section-table') { %>
@@ -56,9 +57,21 @@ Import <%= classify(name) %> in that parent component.
     <p class="semmet-block__summary">{{ summary }}</p>
   </header>
   <<%= supportSelector %>>
-    <ng-template <%= camelize(supportName) %>Caption>
-      {{ title }}
-    </ng-template>
+    <caption>{{ title }}</caption>
+    <thead>
+      <tr>
+        <th scope="col">Item</th>
+        <th scope="col">Details</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (item of items; track item.title) {
+        <tr>
+          <th scope="row">{{ item.title }}</th>
+          <td>{{ item.text }}</td>
+        </tr>
+      }
+    </tbody>
   </<%= supportSelector %>>
 </section>
 <% } else if (kind === 'section-form') { %>
@@ -77,13 +90,18 @@ Import <%= classify(name) %> in that parent component.
     <h2 id="<%= dasherize(name) %>-title">{{ title }}</h2>
     <p class="semmet-block__summary">{{ summary }}</p>
   </header>
-  <<%= supportSelector %>>
-    @for (item of items; track item.title; let first = $first) {
-      <ng-template <%= camelize(supportName) %>Item [id]="item.title" [label]="item.title" [selected]="first">
+  <div <%= camelize(supportName) %>>
+    <div <%= camelize(supportName) %>List [label]="title">
+      @for (item of items; track item.title; let first = $first) {
+        <button type="button" <%= camelize(supportName) %>Tab [value]="item.title" [selected]="first">{{ item.title }}</button>
+      }
+    </div>
+    @for (item of items; track item.title) {
+      <div <%= camelize(supportName) %>Panel [value]="item.title">
         <p>{{ item.text }}</p>
-      </ng-template>
+      </div>
     }
-  </<%= supportSelector %>>
+  </div>
 </section>
 <% } else if (kind === 'section-list-group') { %>
 <section class="semmet-block" aria-labelledby="<%= dasherize(name) %>-title">
@@ -137,14 +155,24 @@ Import <%= classify(name) %> in that parent component.
 </section>
 <% } else if (kind === 'header-navbar') { %>
 <header class="semmet-block semmet-block--header">
-  <<%= supportSelector %>>
-    <ng-template <%= camelize(supportName) %>Brand>
-      {{ title }}
-    </ng-template>
-    <ng-template <%= camelize(supportName) %>Actions>
+  <nav <%= camelize(supportName) %> label="Main navigation" #<%= camelize(supportName) %>Ref="<%= camelize(supportName) %>">
+    <a class="semmet-block__brand" href="/">{{ title }}</a>
+
+    <button type="button" <%= camelize(supportName) %>Toggle aria-label="Toggle navigation">
+      <span aria-hidden="true"></span>
+    </button>
+
+    <div <%= camelize(supportName) %>Menu>
+      <ul>
+        @for (item of items; track item.title) {
+          <li>
+            <a <%= camelize(supportName) %>Item href="#<%= dasherize(name) %>-{{ item.title }}">{{ item.title }}</a>
+          </li>
+        }
+      </ul>
       <a href="#main-content">Skip to content</a>
-    </ng-template>
-  </<%= supportSelector %>>
+    </div>
+  </nav>
 </header>
 <% } else if (kind === 'footer-navigation') { %>
 <footer class="semmet-block semmet-block--footer">

package/src/block/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -4,20 +4,23 @@ import { Component } from '@angular/core';
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else if (supportVariable === 'accordion') { %>import {
   <%= classify(supportName) %>,
-  <%= classify(supportName) %>Item,
+  <%= classify(supportName) %>Header,
+  <%= classify(supportName) %>Panel,
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else if (supportVariable === 'table') { %>import {
   <%= classify(supportName) %>,
-  <%= classify(supportName) %>Caption,
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else if (supportVariable === 'navbar') { %>import {
   <%= classify(supportName) %>,
-  <%= classify(supportName) %>Actions,
-  <%= classify(supportName) %>Brand,
+  <%= classify(supportName) %>Item,
+  <%= classify(supportName) %>Menu,
+  <%= classify(supportName) %>Toggle,
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else if (supportVariable === 'tabs') { %>import {
   <%= classify(supportName) %>,
-  <%= classify(supportName) %>Item,
+  <%= classify(supportName) %>List,
+  <%= classify(supportName) %>Panel,
+  <%= classify(supportName) %>Tab,
 } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
 <% } else if (supportVariable === 'carousel') { %>import {
   <%= classify(supportName) %>,
@@ -49,14 +52,17 @@ interface <%= classify(name) %>FooterGroup {
     <%= classify(supportName) %>,
 <% if (supportVariable === 'card') { %>
 <% } else if (supportVariable === 'accordion') { %>
-    <%= classify(supportName) %>Item,
+    <%= classify(supportName) %>Header,
+    <%= classify(supportName) %>Panel,
 <% } else if (supportVariable === 'table') { %>
-    <%= classify(supportName) %>Caption,
 <% } else if (supportVariable === 'navbar') { %>
-    <%= classify(supportName) %>Actions,
-    <%= classify(supportName) %>Brand,
-<% } else if (supportVariable === 'tabs') { %>
     <%= classify(supportName) %>Item,
+    <%= classify(supportName) %>Menu,
+    <%= classify(supportName) %>Toggle,
+<% } else if (supportVariable === 'tabs') { %>
+    <%= classify(supportName) %>List,
+    <%= classify(supportName) %>Panel,
+    <%= classify(supportName) %>Tab,
 <% } else if (supportVariable === 'carousel') { %>
     <%= classify(supportName) %>Slide,
 <% } else if (supportVariable === 'listGroup') { %>

package/src/breadcrumb/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,32 +0,0 @@
-:host {
-  display: block;
-}
-
-ol {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-li {
-  display: flex;
-  align-items: center;
-}
-
-li:not(:last-child)::after {
-  content: '/';
-  opacity: 0.6;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}

package/src/breadcrumb/files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -3,8 +3,11 @@ import { expect, test } from '@playwright/test';
 test.describe('<%= classify(name) %>', () => {
   test('renders mounted breadcrumb navigation with current page', async ({ page }) => {
     await page.goto('/');
-    const component = page.locator('<%= selector %>').first();
-    test.skip((await component.count()) === 0, 'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.');
+    const component = page.locator('[<%= camelize(name) %>]').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount an element with [<%= camelize(name) %>] in a route or host component to enable this generated e2e test.'
+    );
 
     await expect(component.getByRole('navigation', { name: /breadcrumb/i })).toBeVisible();
     await expect(component.locator('[aria-current="page"]')).toBeVisible();

package/src/breadcrumb/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,15 +1,16 @@
 <!-- Semmet Angular: Breadcrumb — https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %> and <%= classify(name) %>Item in that parent component.
+This directive set never owns markup: bring your own <nav>/<ol>/<li> structure.
 
-<<%= selector %> label="Breadcrumb" currentPageLabel="Current page" [items]="breadcrumbItems" />
--->
-<nav [attr.aria-label]="label()">
+<nav <%= camelize(name) %>>
   <ol>
-    @for (item of items(); track item.id) {
-      <li><a [href]="item.href">{{ item.label }}</a></li>
+    @for (item of trail; track item.href) {
+      <li>
+        <a <%= camelize(name) %>Item [href]="item.href" [current]="item.current">{{ item.label }}</a>
+      </li>
     }
-    <li aria-current="page">{{ currentPageLabel() }}</li>
   </ol>
 </nav>
+-->

package/src/breadcrumb/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
+  template: `
+    <nav <%= camelize(name) %>>
+      <ol>
+        @for (item of trail; track item.href) {
+          <li>
+            <a <%= camelize(name) %>Item [href]="item.href" [current]="item.current">{{ item.label }}</a>
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+})
+class HostComponent {
+  readonly trail = [
+    { label: 'Home', href: '/', current: false },
+    { label: 'Category', href: '/category', current: false },
+    { label: 'Current item', href: '/category/current-item', current: true },
+  ];
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('decorates consumer-owned markup with breadcrumb navigation semantics', () => {
+    const nav = host.querySelector<HTMLElement>('nav');
+    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('a'));
+
+    expect(nav?.getAttribute('aria-label')).toBe('Breadcrumb');
+    expect(links.length).toBe(3);
+    expect(links[0].getAttribute('aria-current')).toBeNull();
+    expect(links[2].getAttribute('aria-current')).toBe('page');
+  });
+});

package/src/breadcrumb/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,24 +1,23 @@
-import { Component, input } from '@angular/core';
+import { Directive, booleanAttribute, input } from '@angular/core';
 
-interface <%= classify(name) %>Item {
-  id: number;
-  label: string;
-  href: string;
-}
-
-const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
-  { id: 1, label: 'Home', href: '/' },
-  { id: 2, label: 'Category', href: '/category' },
-];
-
-@Component({
-  selector: '<%= selector %>',
-  imports: [],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
+@Directive({
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
+  host: {
+    '[attr.aria-label]': 'label() || null',
+  },
 })
 export class <%= classify(name) %> {
   readonly label = input('Breadcrumb');
-  readonly currentPageLabel = input('Current page');
-  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Item]',
+  exportAs: '<%= camelize(name) %>Item',
+  host: {
+    '[attr.aria-current]': 'current() ? "page" : null',
+  },
+})
+export class <%= classify(name) %>Item {
+  readonly current = input(false, { transform: booleanAttribute });
 }

package/src/breadcrumb/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breadcrumb = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.breadcrumb = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedE2eTest: false });
+exports.breadcrumb = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false, includeSharedE2eTest: false });
 //# sourceMappingURL=index.js.map

package/src/breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,UAAU,GAAG,IAAA,iDAA4B,EAAC,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,UAAU,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/breadcrumb/index.ts

@@ -1,3 +1,3 @@
 import { createAriaComponentSchematic } from '../utils/generate-component';
 
-export const breadcrumb = createAriaComponentSchematic({ includeSharedE2eTest: false });
+export const breadcrumb = createAriaComponentSchematic({ includeSharedUnitTest: false, includeSharedE2eTest: false });

package/src/breadcrumb/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularBreadcrumb",
   "title": "Semmet Angular Breadcrumb Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular Breadcrumb component following the W3C ARIA Authoring Practices Guide.",
+  "description": "Generates headless Angular Breadcrumb directives (root, item) coordinated over consumer-owned nav/ol/li markup, following the W3C ARIA Authoring Practices Guide.",
   "additionalProperties": false,
   "properties": {
     "name": {

package/src/collection.json

@@ -32,12 +32,12 @@
       "schema": "./block/schema.json"
     },
     "accordion": {
-      "description": "Generates a standalone Angular Accordion component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates headless Angular Accordion directives (root, header, panel) coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
       "factory": "./accordion/index#accordion",
       "schema": "./accordion/schema.json"
     },
     "tabs": {
-      "description": "Generates a standalone Angular Tabs component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates headless Angular Tabs directives (root, list, tab, panel) coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
       "factory": "./tabs/index#tabs",
       "schema": "./tabs/schema.json"
     },
@@ -62,7 +62,7 @@
       "schema": "./tooltip/schema.json"
     },
     "menu-button": {
-      "description": "Generates a standalone Angular Menu Button (dropdown) component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates headless Angular Menu Button directives (root, trigger, menu, item) coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
       "factory": "./menu-button/index#menuButton",
       "schema": "./menu-button/schema.json"
     },
@@ -117,7 +117,7 @@
       "schema": "./combobox/schema.json"
     },
     "breadcrumb": {
-      "description": "Generates a standalone Angular Breadcrumb component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates headless Angular Breadcrumb directives (root, item) coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
       "factory": "./breadcrumb/index#breadcrumb",
       "schema": "./breadcrumb/schema.json"
     },
@@ -127,12 +127,12 @@
       "schema": "./navigation-menu/schema.json"
     },
     "navbar": {
-      "description": "Generates a standalone Angular Navbar component with semantic navigation, responsive disclosure toggle, and current-page state.",
+      "description": "Generates headless Angular Navbar directives (root, item, toggle, menu) for semantic navigation, responsive disclosure toggle, and current-page state, coordinated over consumer-owned markup.",
       "factory": "./navbar/index#navbar",
       "schema": "./navbar/schema.json"
     },
     "pagination": {
-      "description": "Generates a standalone Angular Pagination component with working page state.",
+      "description": "Generates headless Angular Pagination directives (root, item) coordinated over consumer-owned markup.",
       "factory": "./pagination/index#pagination",
       "schema": "./pagination/schema.json"
     },
@@ -147,12 +147,12 @@
       "schema": "./landmarks/schema.json"
     },
     "tree-view": {
-      "description": "Generates a standalone Angular Tree View component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates headless Angular Tree View directives (root, item, group) coordinated over consumer-owned, arbitrarily nested markup, following the W3C ARIA Authoring Practices Guide.",
       "factory": "./tree-view/index#treeView",
       "schema": "./tree-view/schema.json"
     },
     "toolbar": {
-      "description": "Generates a standalone Angular Toolbar component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates headless Angular Toolbar directives (root, item) coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
       "factory": "./toolbar/index#toolbar",
       "schema": "./toolbar/schema.json"
     },
@@ -162,7 +162,7 @@
       "schema": "./card/schema.json"
     },
     "table": {
-      "description": "Generates a standalone Angular accessible data table component following the W3C ARIA Authoring Practices Guide.",
+      "description": "Generates a minimal standalone Angular table wrapper with content projection — no fixed column count or row shape — following the W3C ARIA Authoring Practices Guide.",
       "factory": "./table/index#table",
       "schema": "./table/schema.json"
     },

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,48 +0,0 @@
-:host {
-  position: relative;
-  display: inline-block;
-}
-
-button {
-  display: flex;
-  align-items: center;
-  font: inherit;
-  cursor: pointer;
-}
-
-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-button::after {
-  content: '';
-  width: 0.4rem;
-  height: 0.4rem;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
-  transform: rotate(45deg);
-}
-
-button[aria-expanded='true']::after {
-  transform: rotate(-135deg);
-}
-
-ul {
-  position: absolute;
-  z-index: 1;
-  top: 100%;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-[role='menuitem'] {
-  cursor: pointer;
-}
-
-[role='menuitem']:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -4,10 +4,10 @@ test.describe('<%= classify(name) %>', () => {
   test('opens mounted menu button and closes it with Escape', async ({ page }) => {
     await page.goto('/');
 
-    const component = page.locator('<%= selector %>').first();
+    const component = page.locator('[<%= camelize(name) %>]').first();
     test.skip(
       (await component.count()) === 0,
-      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+      'Mount an element with [<%= camelize(name) %>] in a route or host component to enable this generated e2e test.'
     );
 
     const button = component.getByRole('button').first();

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,40 +1,19 @@
 <!-- Semmet Angular: Menu Button — https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %>, <%= classify(name) %>Trigger, <%= classify(name) %>Menu and <%= classify(name) %>Item
+in that parent component. This directive set never owns markup: bring your own wrapper, trigger
+button and popup list, in whatever structure the layout needs.
 
-<<%= selector %> label="Options" [items]="menuItems" />
+<div <%= camelize(name) %> style="position: relative; display: inline-block;">
+  <button type="button" <%= camelize(name) %>Trigger>Options</button>
+
+  <ul <%= camelize(name) %>Menu style="position: absolute;">
+    @for (item of items; track item.id) {
+      <li role="none">
+        <div <%= camelize(name) %>Item>{{ item.label }}</div>
+      </li>
+    }
+  </ul>
+</div>
 -->
-<button
-  #menuButton
-  type="button"
-  [id]="instanceId + '-button'"
-  aria-haspopup="true"
-  [attr.aria-expanded]="isOpen()"
-  [attr.aria-controls]="instanceId + '-menu'"
-  (click)="toggle()"
-  (keydown)="handleButtonKeydown($event)"
->
-  {{ label() }}
-</button>
-<ul
-  #menu
-  role="menu"
-  [id]="instanceId + '-menu'"
-  [attr.aria-labelledby]="instanceId + '-button'"
-  [hidden]="!isOpen()"
->
-  @for (item of items(); track item.id; let i = $index) {
-    <li role="none">
-      <div
-        #menuItem
-        role="menuitem"
-        tabindex="-1"
-        (click)="select(item)"
-        (keydown)="handleMenuKeydown($event, item, i)"
-      >
-        {{ item.label }}
-      </div>
-    </li>
-  }
-</ul>

package/src/menu-button/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -1,28 +1,60 @@
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+import {
+  <%= classify(name) %>,
+  <%= classify(name) %>Item,
+  <%= classify(name) %>Menu,
+  <%= classify(name) %>Trigger,
+} from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Item, <%= classify(name) %>Menu, <%= classify(name) %>Trigger],
+  template: `
+    <div <%= camelize(name) %>>
+      <button type="button" <%= camelize(name) %>Trigger>Options</button>
+      <ul <%= camelize(name) %>Menu>
+        @for (item of items; track item.id) {
+          <li role="none">
+            <div <%= camelize(name) %>Item>{{ item.label }}</div>
+          </li>
+        }
+      </ul>
+    </div>
+  `,
+})
+class HostComponent {
+  readonly items = [
+    { id: 1, label: 'First option' },
+    { id: 2, label: 'Second option' },
+    { id: 3, label: 'Third option' },
+  ];
+}
 
 describe('<%= classify(name) %>', () => {
-  let fixture: ComponentFixture<<%= classify(name) %>>;
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({ imports: [<%= classify(name) %>] }).compileComponents();
-    fixture = TestBed.createComponent(<%= classify(name) %>);
+    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(HostComponent);
     fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
   });
 
   function trigger(): HTMLButtonElement {
-    return fixture.nativeElement.querySelector('button');
+    return host.querySelector('button')!;
   }
 
   function menu(): HTMLElement {
-    return fixture.nativeElement.querySelector('[role="menu"]');
+    return host.querySelector('[role="menu"]')!;
   }
 
   function menuItems(): HTMLElement[] {
-    return Array.from(fixture.nativeElement.querySelectorAll('[role="menuitem"]'));
+    return Array.from(host.querySelectorAll('[role="menuitem"]'));
   }
 
-  it('starts closed with menu button semantics', () => {
+  it('starts closed with consumer-owned menu button semantics', () => {
     expect(trigger().getAttribute('aria-haspopup')).toBe('true');
     expect(trigger().getAttribute('aria-expanded')).toBe('false');
     expect(trigger().getAttribute('aria-controls')).toBe(menu().id);
@@ -39,7 +71,7 @@ describe('<%= classify(name) %>', () => {
     expect(menuItems()[0].textContent?.trim()).toBe('First option');
   });
 
-  it('opens with keyboard and closes with Escape', () => {
+  it('opens with keyboard and closes with Escape, returning focus to the trigger', () => {
     trigger().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
     fixture.detectChanges();
     expect(menu().hidden).toBe(false);
@@ -51,14 +83,24 @@ describe('<%= classify(name) %>', () => {
     expect(document.activeElement).toBe(trigger());
   });
 
-  it('moves focus between menu items', () => {
+  it('moves focus between menu items with ArrowDown/ArrowUp', () => {
     trigger().click();
     fixture.detectChanges();
 
-    menuItems()[0].focus();
     menuItems()[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
     fixture.detectChanges();
 
     expect(document.activeElement).toBe(menuItems()[1]);
   });
+
+  it('closes on an outside click without selecting an item', () => {
+    trigger().click();
+    fixture.detectChanges();
+
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    fixture.detectChanges();
+
+    expect(trigger().getAttribute('aria-expanded')).toBe('false');
+    expect(menu().hidden).toBe(true);
+  });
 });