semmet-angular 0.44.0 → 0.46.0

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

@@ -1,31 +1,41 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';
+
+import {
+  <%= classify(name) %>,
+  <%= classify(name) %>List,
+  <%= classify(name) %>Panel,
+  <%= classify(name) %>Tab,
+} from './<%= dasherize(name) %>';
 
 @Component({
-  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
+  imports: [<%= classify(name) %>, <%= classify(name) %>List, <%= classify(name) %>Panel, <%= classify(name) %>Tab],
   template: `
-    <<%= selector %> [preserveContent]="preserveContent">
-      <ng-template <%= camelize(name) %>Item id="profile" label="Profile" [selected]="true">
-        <p>Profile content</p>
-      </ng-template>
-
-      <ng-template <%= camelize(name) %>Item id="settings" label="Settings">
-        <p>Settings content</p>
-      </ng-template>
-
-      <ng-template <%= camelize(name) %>Item id="billing" label="Billing" disabled>
-        <p>Billing content</p>
-      </ng-template>
-    </<%= selector %>>
+    <div <%= camelize(name) %>>
+      <div <%= camelize(name) %>List label="Account">
+        @for (item of items; track item.id) {
+          <button type="button" <%= camelize(name) %>Tab [value]="item.id" [disabled]="item.disabled">
+            {{ item.title }}
+          </button>
+        }
+      </div>
+      @for (item of items; track item.id) {
+        <div <%= camelize(name) %>Panel [value]="item.id">{{ item.title }} content</div>
+      }
+    </div>
   `,
 })
 class HostComponent {
-  preserveContent = true;
+  readonly items = [
+    { id: 'profile', title: 'Profile', disabled: false },
+    { id: 'security', title: 'Security', disabled: false },
+    { id: 'billing', title: 'Billing', disabled: true },
+  ];
 }
 
 describe('<%= classify(name) %>', () => {
   let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -34,23 +44,23 @@ describe('<%= classify(name) %>', () => {
 
     fixture = TestBed.createComponent(HostComponent);
     fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
   });
 
   function tabs(): HTMLButtonElement[] {
-    return Array.from(fixture.nativeElement.querySelectorAll('[role="tab"]'));
+    return Array.from(host.querySelectorAll('[role="tab"]'));
   }
 
   function panels(): HTMLElement[] {
-    return Array.from(fixture.nativeElement.querySelectorAll('[role="tabpanel"]'));
+    return Array.from(host.querySelectorAll('[role="tabpanel"]'));
   }
 
-  it('renders a tablist with ARIA relationships', () => {
-    const tablist = fixture.nativeElement.querySelector('[role="tablist"]');
+  it('decorates consumer-owned markup with ARIA tab/tabpanel relationships', () => {
+    const tablist = host.querySelector('[role="tablist"]');
     const [profileTab, settingsTab] = tabs();
     const [profilePanel, settingsPanel] = panels();
 
-    expect(tablist).toBeTruthy();
-    expect(profileTab.textContent?.trim()).toBe('Profile');
+    expect(tablist?.getAttribute('aria-label')).toBe('Account');
     expect(profileTab.getAttribute('aria-selected')).toBe('true');
     expect(profileTab.getAttribute('aria-controls')).toBe(profilePanel.id);
     expect(profileTab.tabIndex).toBe(0);
@@ -58,7 +68,6 @@ describe('<%= classify(name) %>', () => {
     expect(profilePanel.hidden).toBe(false);
 
     expect(settingsTab.getAttribute('aria-selected')).toBe('false');
-    expect(settingsTab.getAttribute('aria-controls')).toBe(settingsPanel.id);
     expect(settingsTab.tabIndex).toBe(-1);
     expect(settingsPanel.hidden).toBe(true);
   });
@@ -73,7 +82,7 @@ describe('<%= classify(name) %>', () => {
     expect(settingsTab.getAttribute('aria-selected')).toBe('true');
     expect(settingsTab.tabIndex).toBe(0);
     expect(settingsPanel.hidden).toBe(false);
-    expect(settingsPanel.textContent).toContain('Settings content');
+    expect(settingsPanel.textContent).toContain('Security content');
     expect(profilePanel.hidden).toBe(true);
   });
 
@@ -81,33 +90,32 @@ describe('<%= classify(name) %>', () => {
     const disabledTab = tabs()[2];
     const disabledPanel = panels()[2];
 
-    expect(disabledTab.disabled).toBe(true);
-
     disabledTab.click();
     fixture.detectChanges();
 
+    expect(disabledTab.getAttribute('aria-disabled')).toBe('true');
     expect(disabledTab.getAttribute('aria-selected')).toBe('false');
     expect(disabledPanel.hidden).toBe(true);
   });
 
   it('moves focus and selection with arrow, Home, and End keys while skipping disabled tabs', () => {
+    const tablist = host.querySelector<HTMLElement>('[role="tablist"]');
     const [profileTab, settingsTab, billingTab] = tabs();
 
-    profileTab.focus();
-    profileTab.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    tablist?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     fixture.detectChanges();
     expect(document.activeElement).toBe(settingsTab);
     expect(settingsTab.getAttribute('aria-selected')).toBe('true');
 
-    settingsTab.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    tablist?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     fixture.detectChanges();
     expect(document.activeElement).toBe(profileTab);
     expect(profileTab.getAttribute('aria-selected')).toBe('true');
 
-    profileTab.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    tablist?.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
     fixture.detectChanges();
     expect(document.activeElement).toBe(settingsTab);
 
-    expect(billingTab.disabled).toBe(true);
+    expect(billingTab.getAttribute('aria-disabled')).toBe('true');
   });
 });

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

@@ -1,157 +1,155 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-  Component,
-  Directive,
-  ElementRef,
-  TemplateRef,
-  booleanAttribute,
-  computed,
-  contentChildren,
-  inject,
-  input,
-  signal,
-  viewChildren,
-} from '@angular/core';
-
-type <%= classify(name) %>ItemId = string | number;
+import { Directive, ElementRef, booleanAttribute, computed, contentChildren, inject, input, model } from '@angular/core';
+
+type <%= classify(name) %>Id = string;
 
 let nextId = 0;
-let nextItemId = 0;
 
 @Directive({
-  selector: 'ng-template[<%= camelize(name) %>Item]',
-})
-export class <%= classify(name) %>Item {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-
-  readonly id = input<<%= classify(name) %>ItemId>(`<%= dasherize(name) %>-item-${nextItemId++}`);
-  readonly label = input.required<string>();
-  readonly selected = input(false, { transform: booleanAttribute });
-  readonly disabled = input(false, { transform: booleanAttribute });
-}
-
-@Component({
-  selector: '<%= selector %>',
-  imports: [NgTemplateOutlet],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
 })
 export class <%= classify(name) %> {
-  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');
-
-  protected readonly items = contentChildren(<%= classify(name) %>Item);
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly tabs = contentChildren(<%= classify(name) %>Tab, { descendants: true });
 
-  readonly label = input('Tabs');
-  readonly preserveContent = input(true, { transform: booleanAttribute });
+  readonly activeId = model<<%= classify(name) %>Id | null>(null);
 
-  private readonly renderedIds = signal<ReadonlySet<<%= classify(name) %>ItemId>>(new Set());
-  private readonly selectedId = signal<<%= classify(name) %>ItemId | null>(null);
-
-  private readonly activeId = computed<<%= classify(name) %>ItemId | null>(() => {
-    const selectedId = this.selectedId();
-    const items = this.items();
-    if (selectedId !== null && items.some((item) => item.id() === selectedId && !item.disabled())) {
-      return selectedId;
+  private readonly resolvedActiveId = computed<<%= classify(name) %>Id | null>(() => {
+    const activeId = this.activeId();
+    const tabs = this.tabs();
+    if (activeId !== null && tabs.some((tab) => tab.value() === activeId && !tab.disabled())) {
+      return activeId;
     }
 
     return (
-      items.find((item) => item.selected() && !item.disabled()) ??
-      items.find((item) => !item.disabled()) ??
-      items[0]
-    )?.id() ?? null;
+      tabs.find((tab) => tab.selected() && !tab.disabled()) ??
+      tabs.find((tab) => !tab.disabled()) ??
+      tabs[0]
+    )?.value() ?? null;
   });
 
-  protected isActive(id: <%= classify(name) %>ItemId): boolean {
-    return this.activeId() === id;
+  isActive(value: <%= classify(name) %>Id): boolean {
+    return this.resolvedActiveId() === value;
   }
 
-  protected shouldRender(id: <%= classify(name) %>ItemId): boolean {
-    return this.isActive(id) || (this.preserveContent() && this.renderedIds().has(id));
-  }
-
-  protected select(item: <%= classify(name) %>Item): void {
-    if (item.disabled()) {
+  select(tab: <%= classify(name) %>Tab): void {
+    if (tab.disabled()) {
       return;
     }
 
-    const activeId = this.activeId();
-    if (activeId !== null) {
-      this.markRendered(activeId);
-    }
+    this.activeId.set(tab.value());
+  }
 
-    const id = item.id();
-    this.markRendered(id);
-    this.selectedId.set(id);
+  tabDomId(value: <%= classify(name) %>Id): string {
+    return `${this.instanceId}-tab-${value}`;
   }
 
+  panelDomId(value: <%= classify(name) %>Id): string {
+    return `${this.instanceId}-panel-${value}`;
+  }
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>List]',
+  exportAs: '<%= camelize(name) %>List',
+  host: {
+    role: 'tablist',
+    '[attr.aria-label]': 'label() || null',
+    '(keydown)': 'handleKeydown($event)',
+  },
+})
+export class <%= classify(name) %>List {
+  private readonly root = inject(<%= classify(name) %>);
+  private readonly tabs = contentChildren(<%= classify(name) %>Tab, { descendants: true });
+
+  readonly label = input('');
+
   // Left/Right/Home/End move focus AND selection (automatic activation model, per APG tabs pattern).
-  protected navigateTabs(event: KeyboardEvent, index: number): void {
-    const items = this.items();
-    const buttons = this.tabButtons();
-    if (buttons.length === 0 || items.length === 0) {
+  handleKeydown(event: KeyboardEvent): void {
+    const enabledTabs = this.tabs().filter((tab) => !tab.disabled());
+    const currentIndex = enabledTabs.findIndex((tab) => tab.active());
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.focusAt(enabledTabs, currentIndex + 1);
       return;
     }
 
-    let nextIndex: number | null;
-    switch (event.key) {
-      case 'ArrowRight':
-        nextIndex = this.nextEnabledIndex(items, index, 1);
-        break;
-      case 'ArrowLeft':
-        nextIndex = this.nextEnabledIndex(items, index, -1);
-        break;
-      case 'Home':
-        nextIndex = this.firstEnabledIndex(items);
-        break;
-      case 'End':
-        nextIndex = this.lastEnabledIndex(items);
-        break;
-      default:
-        return;
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.focusAt(enabledTabs, currentIndex - 1);
+      return;
     }
 
-    if (nextIndex === null) {
+    if (event.key === 'Home') {
+      event.preventDefault();
+      this.focusAt(enabledTabs, 0);
       return;
     }
 
-    event.preventDefault();
-    this.select(items[nextIndex]);
-    buttons[nextIndex]?.nativeElement.focus();
+    if (event.key === 'End') {
+      event.preventDefault();
+      this.focusAt(enabledTabs, enabledTabs.length - 1);
+    }
   }
 
-  private markRendered(id: <%= classify(name) %>ItemId): void {
-    const renderedIds = this.renderedIds();
-    if (renderedIds.has(id)) {
+  private focusAt(tabs: readonly <%= classify(name) %>Tab[], index: number): void {
+    if (!tabs.length) {
       return;
     }
 
-    this.renderedIds.set(new Set(renderedIds).add(id));
+    const nextIndex = (index + tabs.length) % tabs.length;
+    const tab = tabs[nextIndex];
+    this.root.select(tab);
+    tab.focus();
   }
+}
 
-  private nextEnabledIndex(items: readonly <%= classify(name) %>Item[], index: number, direction: 1 | -1): number | null {
-    for (let step = 1; step <= items.length; step++) {
-      const nextIndex = (index + step * direction + items.length) % items.length;
-      if (!items[nextIndex].disabled()) {
-        return nextIndex;
-      }
-    }
+@Directive({
+  selector: '[<%= camelize(name) %>Tab]',
+  exportAs: '<%= camelize(name) %>Tab',
+  host: {
+    role: 'tab',
+    '[id]': 'root.tabDomId(value())',
+    '[attr.aria-selected]': 'active()',
+    '[attr.aria-controls]': 'root.panelDomId(value())',
+    '[attr.aria-disabled]': 'disabled() ? "true" : null',
+    '[attr.tabindex]': 'active() ? 0 : -1',
+    '(click)': 'select()',
+  },
+})
+export class <%= classify(name) %>Tab {
+  protected readonly root = inject(<%= classify(name) %>);
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
 
-    return null;
+  readonly value = input.required<<%= classify(name) %>Id>();
+  readonly selected = input(false, { transform: booleanAttribute });
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly active = computed(() => this.root.isActive(this.value()));
+
+  select(): void {
+    this.root.select(this);
   }
 
-  private firstEnabledIndex(items: readonly <%= classify(name) %>Item[]): number | null {
-    const index = items.findIndex((item) => !item.disabled());
-    return index === -1 ? null : index;
+  focus(): void {
+    this.elementRef.nativeElement.focus();
   }
+}
 
-  private lastEnabledIndex(items: readonly <%= classify(name) %>Item[]): number | null {
-    for (let index = items.length - 1; index >= 0; index--) {
-      if (!items[index].disabled()) {
-        return index;
-      }
-    }
+@Directive({
+  selector: '[<%= camelize(name) %>Panel]',
+  exportAs: '<%= camelize(name) %>Panel',
+  host: {
+    role: 'tabpanel',
+    '[id]': 'root.panelDomId(value())',
+    '[attr.aria-labelledby]': 'root.tabDomId(value())',
+    '[attr.tabindex]': '0',
+    '[hidden]': '!active()',
+  },
+})
+export class <%= classify(name) %>Panel {
+  protected readonly root = inject(<%= classify(name) %>);
 
-    return null;
-  }
+  readonly value = input.required<<%= classify(name) %>Id>();
+  readonly active = computed(() => this.root.isActive(this.value()));
 }

package/src/tabs/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularTabs",
   "title": "Semmet Angular Tabs Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular Tabs component (signals-based state, roving tabindex keyboard support) following the W3C ARIA Authoring Practices Guide.",
+  "description": "Generates headless Angular Tabs directives (root, list, tab, panel) with signals-based state and roving tabindex keyboard support, coordinated over consumer-owned markup, following the W3C ARIA Authoring Practices Guide.",
   "additionalProperties": false,
   "properties": {
     "name": {

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

@@ -1,19 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-[role='toolbar'] {
-  display: inline-flex;
-}
-
-button {
-  font: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}

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

@@ -4,13 +4,12 @@ test.describe('<%= classify(name) %>', () => {
   test('toggles mounted toolbar buttons and moves focus with arrows', async ({ page }) => {
     await page.goto('/');
 
-    const component = page.locator('<%= selector %>').first();
+    const toolbar = 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 toolbar.count()) === 0,
+      'Mount an element with [<%= camelize(name) %>] in a route or host component to enable this generated e2e test.'
     );
 
-    const toolbar = component.getByRole('toolbar').first();
     const buttons = toolbar.getByRole('button');
     test.skip(
       (await buttons.count()) < 2,

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

@@ -1,21 +1,12 @@
 <!-- Semmet Angular: Toolbar — https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ -->
 <!--
 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 container and buttons.
 
-<<%= selector %> label="Text formatting" [actions]="formattingActions" />
--->
-<div role="toolbar" [attr.aria-label]="label()">
-  @for (action of actions(); track action.id; let i = $index) {
-    <button
-      #toolbarButton
-      type="button"
-      [attr.aria-pressed]="isPressed(action.id)"
-      [tabIndex]="activeId() === action.id ? 0 : -1"
-      (click)="toggle(action.id)"
-      (keydown)="navigateToolbar($event, i)"
-    >
-      {{ action.label }}
-    </button>
-  }
+<div <%= camelize(name) %> label="Text formatting">
+  <button type="button" <%= camelize(name) %>Item value="bold" [(pressed)]="isBold">Bold</button>
+  <button type="button" <%= camelize(name) %>Item value="italic" [(pressed)]="isItalic">Italic</button>
+  <button type="button" <%= camelize(name) %>Item value="underline" [(pressed)]="isUnderline">Underline</button>
 </div>
+-->

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

@@ -1,25 +1,40 @@
+import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
+  template: `
+    <div <%= camelize(name) %> label="Text formatting">
+      <button type="button" <%= camelize(name) %>Item value="bold">Bold</button>
+      <button type="button" <%= camelize(name) %>Item value="italic">Italic</button>
+      <button type="button" <%= camelize(name) %>Item value="underline">Underline</button>
+    </div>
+  `,
+})
+class HostComponent {}
 
 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 buttons(): HTMLButtonElement[] {
-    return Array.from(fixture.nativeElement.querySelectorAll('button'));
+    return Array.from(host.querySelectorAll('button'));
   }
 
-  it('renders a labelled toolbar with roving tabindex', () => {
-    const toolbar = fixture.nativeElement.querySelector('[role="toolbar"]');
+  it('decorates consumer-owned markup with a labelled toolbar and roving tabindex', () => {
+    const toolbar = host.querySelector('[role="toolbar"]');
     const [bold, italic] = buttons();
 
-    expect(toolbar.getAttribute('aria-label')).toBe('Text formatting');
-    expect(bold.textContent?.trim()).toBe('Bold');
+    expect(toolbar?.getAttribute('aria-label')).toBe('Text formatting');
     expect(bold.tabIndex).toBe(0);
     expect(italic.tabIndex).toBe(-1);
     expect(bold.getAttribute('aria-pressed')).toBe('false');
@@ -33,13 +48,13 @@ describe('<%= classify(name) %>', () => {
     expect(bold.getAttribute('aria-pressed')).toBe('true');
   });
 
-  it('moves focus with keyboard', () => {
+  it('moves focus with ArrowRight and updates roving tabindex', () => {
     const [bold, italic] = buttons();
-    bold.focus();
     bold.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
     fixture.detectChanges();
 
     expect(document.activeElement).toBe(italic);
     expect(italic.tabIndex).toBe(0);
+    expect(bold.tabIndex).toBe(-1);
   });
 });