semmet-angular 0.44.0 → 0.46.0

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

@@ -1,64 +1,63 @@
-import { Component, ElementRef, Injector, afterNextRender, inject, input, signal, viewChild, viewChildren } from '@angular/core';
-
-interface <%= classify(name) %>Item {
-  id: number;
-  label: string;
-}
-
-const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
-  { id: 1, label: 'First option' },
-  { id: 2, label: 'Second option' },
-  { id: 3, label: 'Third option' },
-];
+import {
+  Directive,
+  ElementRef,
+  Injector,
+  afterNextRender,
+  contentChild,
+  contentChildren,
+  inject,
+  signal,
+} from '@angular/core';
 
 let nextId = 0;
 
-@Component({
-  selector: '<%= selector %>',
-  imports: [],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
-  host: {
-    '(document:click)': 'closeOnOutsideClick($event)',
-  },
+@Directive({
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
 })
 export class <%= classify(name) %> {
   private readonly injector = inject(Injector);
-  private readonly buttonRef = viewChild<ElementRef<HTMLButtonElement>>('menuButton');
-  private readonly menuRef = viewChild<ElementRef<HTMLElement>>('menu');
-  private readonly menuItems = viewChildren<ElementRef<HTMLElement>>('menuItem');
+  private readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly trigger = contentChild(<%= classify(name) %>Trigger);
+  private readonly items = contentChildren(<%= classify(name) %>Item, { descendants: true });
 
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly isOpen = signal(false);
+  readonly isOpen = signal(false);
 
-  readonly label = input('Options');
-  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+  buttonDomId(): string {
+    return `${this.instanceId}-button`;
+  }
 
-  protected toggle(): void {
+  menuDomId(): string {
+    return `${this.instanceId}-menu`;
+  }
+
+  isInsideTrigger(node: Node): boolean {
+    return this.trigger()?.contains(node) ?? false;
+  }
+
+  openAndFocusFirst(): void {
     this.isOpen.set(true);
-    this.focusFirstItem();
+    // Focus moves into the menu only after Angular flushes the DOM update that un-hides it.
+    afterNextRender(() => this.items()[0]?.focus(), { injector: this.injector });
   }
 
-  protected close(): void {
+  close(): void {
     this.isOpen.set(false);
-    this.buttonRef()?.nativeElement.focus();
+    this.trigger()?.focus();
   }
 
-  protected select(item: <%= classify(name) %>Item): void {
+  select(item: <%= classify(name) %>Item): void {
     // Wire up the selected item's action here.
     this.close();
   }
 
-  protected handleButtonKeydown(event: KeyboardEvent): void {
-    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.isOpen.set(true);
-      this.focusFirstItem();
+  navigate(current: <%= classify(name) %>Item, event: KeyboardEvent): void {
+    const items = this.items();
+    const index = items.indexOf(current);
+    if (index === -1) {
+      return;
     }
-  }
 
-  protected handleMenuKeydown(event: KeyboardEvent, item: <%= classify(name) %>Item, index: number): void {
-    const items = this.menuItems();
     switch (event.key) {
       case 'Escape':
         event.preventDefault();
@@ -66,42 +65,117 @@ export class <%= classify(name) %> {
         break;
       case 'ArrowDown':
         event.preventDefault();
-        items[(index + 1) % items.length]?.nativeElement.focus();
+        items[(index + 1) % items.length]?.focus();
         break;
       case 'ArrowUp':
         event.preventDefault();
-        items[(index - 1 + items.length) % items.length]?.nativeElement.focus();
+        items[(index - 1 + items.length) % items.length]?.focus();
         break;
       case 'Home':
         event.preventDefault();
-        items[0]?.nativeElement.focus();
+        items[0]?.focus();
         break;
       case 'End':
         event.preventDefault();
-        items[items.length - 1]?.nativeElement.focus();
+        items[items.length - 1]?.focus();
         break;
       case 'Enter':
       case ' ':
         event.preventDefault();
-        this.select(item);
+        this.select(current);
         break;
     }
   }
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Trigger]',
+  exportAs: '<%= camelize(name) %>Trigger',
+  host: {
+    'aria-haspopup': 'true',
+    '[id]': 'root.buttonDomId()',
+    '[attr.aria-expanded]': 'root.isOpen()',
+    '[attr.aria-controls]': 'root.menuDomId()',
+    '(click)': 'toggle()',
+    '(keydown)': 'handleKeydown($event)',
+  },
+})
+export class <%= classify(name) %>Trigger {
+  protected readonly root = inject(<%= classify(name) %>);
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  toggle(): void {
+    if (this.root.isOpen()) {
+      this.root.close();
+      return;
+    }
+
+    this.root.openAndFocusFirst();
+  }
 
-  protected closeOnOutsideClick(event: MouseEvent): void {
-    if (!this.isOpen()) {
+  handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.root.openAndFocusFirst();
+    }
+  }
+
+  contains(node: Node): boolean {
+    return this.elementRef.nativeElement.contains(node);
+  }
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
+  }
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Menu]',
+  exportAs: '<%= camelize(name) %>Menu',
+  host: {
+    role: 'menu',
+    '[id]': 'root.menuDomId()',
+    '[attr.aria-labelledby]': 'root.buttonDomId()',
+    '[hidden]': '!root.isOpen()',
+    '(document:click)': 'closeOnOutsideClick($event)',
+  },
+})
+export class <%= classify(name) %>Menu {
+  protected readonly root = inject(<%= classify(name) %>);
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  closeOnOutsideClick(event: MouseEvent): void {
+    if (!this.root.isOpen()) {
       return;
     }
+
     const target = event.target as Node;
-    const insideButton = this.buttonRef()?.nativeElement.contains(target);
-    const insideMenu = this.menuRef()?.nativeElement.contains(target);
-    if (!insideButton && !insideMenu) {
-      this.isOpen.set(false);
+    const insideMenu = this.elementRef.nativeElement.contains(target);
+    if (!insideMenu && !this.root.isInsideTrigger(target)) {
+      this.root.close();
     }
   }
+}
 
-  private focusFirstItem(): void {
-    // Focus moves into the menu only after Angular flushes the DOM update that un-hides it.
-    afterNextRender(() => this.menuItems()[0]?.nativeElement.focus(), { injector: this.injector });
+@Directive({
+  selector: '[<%= camelize(name) %>Item]',
+  exportAs: '<%= camelize(name) %>Item',
+  host: {
+    role: 'menuitem',
+    tabindex: '-1',
+    '(click)': 'select()',
+    '(keydown)': 'root.navigate(this, $event)',
+  },
+})
+export class <%= classify(name) %>Item {
+  protected readonly root = inject(<%= classify(name) %>);
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  select(): void {
+    this.root.select(this);
+  }
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
   }
 }

package/src/menu-button/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularMenuButton",
   "title": "Semmet Angular Menu Button Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular Menu Button (dropdown) component with full keyboard support, following the W3C ARIA Authoring Practices Guide.",
+  "description": "Generates headless Angular Menu Button directives (root, trigger, menu, item) with full keyboard support and outside-click dismissal, coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
   "additionalProperties": false,
   "properties": {
     "name": {

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

@@ -1,119 +0,0 @@
-:host {
-  display: block;
-}
-
-.semmet-navbar {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.semmet-navbar__brand {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  text-decoration: none;
-}
-
-.semmet-navbar__toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  background: none;
-  border: 0;
-  cursor: pointer;
-  font: inherit;
-}
-
-.semmet-navbar__toggle span,
-.semmet-navbar__toggle span::before,
-.semmet-navbar__toggle span::after {
-  display: block;
-  width: 1.125rem;
-  height: 0.125rem;
-  background: currentColor;
-}
-
-.semmet-navbar__toggle span {
-  position: relative;
-}
-
-.semmet-navbar__toggle span::before,
-.semmet-navbar__toggle span::after {
-  position: absolute;
-  left: 0;
-  content: '';
-}
-
-.semmet-navbar__toggle span::before {
-  top: -0.375rem;
-}
-
-.semmet-navbar__toggle span::after {
-  top: 0.375rem;
-}
-
-.semmet-navbar__menu {
-  display: none;
-  grid-column: 1 / -1;
-}
-
-.semmet-navbar__menu--open {
-  display: block;
-}
-
-.semmet-navbar__list {
-  display: grid;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.semmet-navbar__actions {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.semmet-navbar__link {
-  display: flex;
-  align-items: center;
-  color: inherit;
-  text-decoration: none;
-}
-
-.semmet-navbar__link--disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
-}
-
-.semmet-navbar__brand:focus-visible,
-.semmet-navbar__toggle:focus-visible,
-.semmet-navbar__link:focus-visible,
-.semmet-navbar__actions :is(a, button):focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-@media (min-width: 48rem) {
-  .semmet-navbar {
-    grid-template-columns: auto 1fr;
-  }
-
-  .semmet-navbar__toggle {
-    display: none;
-  }
-
-  .semmet-navbar__menu {
-    display: flex;
-    align-items: center;
-    grid-column: auto;
-  }
-
-  .semmet-navbar__list {
-    display: flex;
-    align-items: center;
-    padding: 0;
-  }
-}

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

@@ -4,22 +4,25 @@ test.describe('<%= classify(name) %>', () => {
   test('toggles mounted responsive navigation menu', async ({ page }) => {
     await page.goto('/');
 
-    const component = page.locator('<%= selector %>').first();
+    const nav = 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.'
+      (await nav.count()) === 0,
+      'Mount a [<%= camelize(name) %>] navigation in a route or host component to enable this generated e2e test.'
     );
 
-    const nav = component.getByRole('navigation').first();
-    const toggle = component.locator('.semmet-navbar__toggle').first();
+    const toggle = nav.locator('[<%= camelize(name) %>Toggle]').first();
+    test.skip(
+      (await toggle.count()) === 0,
+      'Add a [<%= camelize(name) %>Toggle] button to enable this generated e2e test.'
+    );
 
-    await expect(nav).toBeVisible();
+    await expect(nav).toHaveAttribute('aria-label', /.+/);
     await expect(toggle).toHaveAttribute('aria-expanded', 'false');
 
     await toggle.click();
     await expect(toggle).toHaveAttribute('aria-expanded', 'true');
 
-    const current = component.locator('[aria-current="page"]').first();
+    const current = nav.locator('[aria-current="page"]').first();
     if ((await current.count()) > 0) {
       await expect(current).toBeVisible();
     }

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

@@ -1,58 +1,34 @@
-<!-- Semmet Angular: Navbar - semantic navigation with responsive disclosure behavior. -->
+<!-- Semmet Angular: Navbar - headless navigation coordination directives. -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %>, <%= classify(name) %>Item, <%= classify(name) %>Toggle and <%= classify(name) %>Menu
+in that parent component. This directive set never owns markup: bring your own <nav>, brand, toggle
+button and links, in whatever structure the layout needs.
 
-<<%= selector %> brand="Acme" brandHref="/" />
-<<%= selector %>>
-  <ng-template <%= camelize(name) %>Actions>
-    <a href="/account">Account</a>
-  </ng-template>
-</<%= selector %>>
--->
-<!-- Deliberately avoids role="menu"; regular site navigation should stay as nav/list/link semantics. -->
-<nav class="semmet-navbar" [attr.aria-label]="label()">
-  <a class="semmet-navbar__brand" [href]="brandHref()">
-    @if (brandTemplate(); as brandSlot) {
-      <ng-container [ngTemplateOutlet]="brandSlot.templateRef" />
-    } @else {
-      {{ brand() }}
-    }
-  </a>
+<nav <%= camelize(name) %> label="Main navigation" #nav="<%= camelize(name) %>">
+  <a class="brand" href="/">Acme</a>
 
-  <button
-    type="button"
-    class="semmet-navbar__toggle"
-    [attr.aria-label]="toggleLabel()"
-    [attr.aria-controls]="instanceId + '-menu'"
-    [attr.aria-expanded]="expanded()"
-    (click)="toggle()"
-  >
+  <button type="button" <%= camelize(name) %>Toggle aria-label="Toggle navigation">
     <span aria-hidden="true"></span>
   </button>
 
-  <div [id]="instanceId + '-menu'" [class]="menuClasses()">
-    <ul class="semmet-navbar__list">
-      @for (item of items(); track item.href) {
-        <li class="semmet-navbar__item">
+  <div <%= camelize(name) %>Menu>
+    <ul>
+      @for (item of items; track item.href) {
+        <li>
           <a
-            class="semmet-navbar__link"
-            [class.semmet-navbar__link--current]="item.current"
-            [class.semmet-navbar__link--disabled]="item.disabled"
-            [href]="item.disabled ? null : item.href"
-            [attr.aria-current]="item.current ? 'page' : null"
-            [attr.aria-disabled]="item.disabled ? 'true' : null"
-            (click)="close()"
+            <%= camelize(name) %>Item
+            [href]="item.href"
+            [current]="item.current"
+            [disabled]="item.disabled"
+            #navLink="<%= camelize(name) %>Item"
+            [class.active]="item.current"
           >
             {{ item.label }}
           </a>
         </li>
       }
     </ul>
-    @if (actions(); as actionsSlot) {
-      <div class="semmet-navbar__actions">
-        <ng-container [ngTemplateOutlet]="actionsSlot.templateRef" />
-      </div>
-    }
   </div>
 </nav>
+-->

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

@@ -1,20 +1,40 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { <%= classify(name) %>, <%= classify(name) %>Actions } from './<%= dasherize(name) %>';
+import {
+  <%= classify(name) %>,
+  <%= classify(name) %>Item,
+  <%= classify(name) %>Menu,
+  <%= classify(name) %>Toggle,
+} from './<%= dasherize(name) %>';
 
 @Component({
-  imports: [<%= classify(name) %>, <%= classify(name) %>Actions],
+  imports: [<%= classify(name) %>, <%= classify(name) %>Item, <%= classify(name) %>Menu, <%= classify(name) %>Toggle],
   template: `
-    <<%= selector %>
-      brand="Acme"
-      label="Main navigation"
-      [items]="items"
-    >
-      <ng-template <%= camelize(name) %>Actions>
-        <a href="/account">Account</a>
-      </ng-template>
-    </<%= selector %>>
+    <nav <%= camelize(name) %> label="Main navigation" #nav="<%= camelize(name) %>">
+      <a class="brand" href="/">Acme</a>
+
+      <button type="button" <%= camelize(name) %>Toggle aria-label="Toggle navigation">
+        <span aria-hidden="true"></span>
+      </button>
+
+      <div <%= camelize(name) %>Menu>
+        <ul>
+          @for (item of items; track item.href) {
+            <li>
+              <a
+                <%= camelize(name) %>Item
+                [href]="item.href"
+                [current]="item.current"
+                [disabled]="item.disabled"
+              >
+                {{ item.label }}
+              </a>
+            </li>
+          }
+        </ul>
+      </div>
+    </nav>
   `,
 })
 class HostComponent {
@@ -39,36 +59,39 @@ describe('<%= classify(name) %>', () => {
     host = fixture.nativeElement as HTMLElement;
   });
 
-  it('renders semantic navigation with current and disabled links', () => {
+  it('decorates consumer-owned markup with navigation semantics', () => {
     const nav = host.querySelector<HTMLElement>('nav');
-    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('.semmet-navbar__link'));
 
     expect(nav?.getAttribute('aria-label')).toBe('Main navigation');
-    expect(host.querySelector('.semmet-navbar__brand')?.textContent?.trim()).toBe('Acme');
+    expect(host.textContent).toContain('Acme');
+  });
+
+  it('reflects aria-current and aria-disabled on items without owning their markup', () => {
+    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('li a'));
+
     expect(links[0].getAttribute('aria-current')).toBe('page');
     expect(links[2].getAttribute('aria-disabled')).toBe('true');
-    expect(links[2].getAttribute('href')).toBeNull();
-    expect(host.textContent).toContain('Account');
   });
 
-  it('toggles responsive menu state and closes when a link is activated', () => {
-    const toggle = host.querySelector<HTMLButtonElement>('.semmet-navbar__toggle');
-    const menu = host.querySelector<HTMLElement>('.semmet-navbar__menu');
-    const projectsLink = Array.from(host.querySelectorAll<HTMLAnchorElement>('.semmet-navbar__link'))[1];
+  it('toggles the collapsible menu and closes it when a link is activated', () => {
+    const toggle = host.querySelector<HTMLButtonElement>('button');
+    const menu = host.querySelector<HTMLElement>('div');
+    const projectsLink = Array.from(host.querySelectorAll<HTMLAnchorElement>('li a'))[1];
 
     expect(toggle?.getAttribute('aria-expanded')).toBe('false');
-    expect(menu?.classList.contains('semmet-navbar__menu--open')).toBe(false);
+    expect(menu?.hidden).toBe(true);
+    expect(toggle?.getAttribute('aria-controls')).toBe(menu?.id);
 
     toggle?.click();
     fixture.detectChanges();
 
     expect(toggle?.getAttribute('aria-expanded')).toBe('true');
-    expect(menu?.classList.contains('semmet-navbar__menu--open')).toBe(true);
+    expect(menu?.hidden).toBe(false);
 
     projectsLink.click();
     fixture.detectChanges();
 
     expect(toggle?.getAttribute('aria-expanded')).toBe('false');
-    expect(menu?.classList.contains('semmet-navbar__menu--open')).toBe(false);
+    expect(menu?.hidden).toBe(true);
   });
 });