semmet-angular 0.45.0 → 0.46.0

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

@@ -1,64 +1,68 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Component, Directive, TemplateRef, computed, contentChild, inject, input, signal } from '@angular/core';
-
-export interface <%= classify(name) %>Item {
-  label: string;
-  href: string;
-  current?: boolean;
-  disabled?: boolean;
-}
-
-const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
-  { label: 'Home', href: '/', current: true },
-  { label: 'Projects', href: '/projects' },
-  { label: 'About', href: '/about' },
-  { label: 'Contact', href: '/contact' },
-];
+import { booleanAttribute, computed, Directive, inject, input, model } from '@angular/core';
 
 let nextId = 0;
 
 @Directive({
-  selector: 'ng-template[<%= camelize(name) %>Brand]',
-})
-export class <%= classify(name) %>Brand {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Actions]',
-})
-export class <%= classify(name) %>Actions {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
-@Component({
-  selector: '<%= selector %>',
-  imports: [NgTemplateOutlet],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
+  host: {
+    '[attr.aria-label]': 'label() || null',
+  },
 })
 export class <%= classify(name) %> {
-  protected readonly brandTemplate = contentChild(<%= classify(name) %>Brand);
-  protected readonly actions = contentChild(<%= classify(name) %>Actions);
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly expanded = signal(false);
-
-  readonly label = input('Primary navigation');
-  readonly brand = input('Semmet');
-  readonly brandHref = input('/');
-  readonly toggleLabel = input('Toggle navigation');
-  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+  private readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
-  protected readonly menuClasses = computed(() => [
-    'semmet-navbar__menu',
-    this.expanded() ? 'semmet-navbar__menu--open' : '',
-  ].filter(Boolean).join(' '));
+  readonly label = input('');
+  readonly expanded = model(false);
+  readonly menuId = computed(() => `${this.instanceId}-menu`);
 
-  protected toggle(): void {
+  toggle(): void {
     this.expanded.update((value) => !value);
   }
 
-  protected close(): void {
+  close(): void {
     this.expanded.set(false);
   }
 }
+
+@Directive({
+  selector: '[<%= camelize(name) %>Item]',
+  exportAs: '<%= camelize(name) %>Item',
+  host: {
+    '[attr.aria-current]': 'current() ? ariaCurrent() : null',
+    '[attr.aria-disabled]': 'disabled() ? "true" : null',
+    '(click)': 'nav.close()',
+  },
+})
+export class <%= classify(name) %>Item {
+  protected readonly nav = inject(<%= classify(name) %>);
+
+  readonly current = input(false, { transform: booleanAttribute });
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly ariaCurrent = input('page');
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Toggle]',
+  exportAs: '<%= camelize(name) %>Toggle',
+  host: {
+    '[attr.aria-expanded]': 'nav.expanded()',
+    '[attr.aria-controls]': 'nav.menuId()',
+    '(click)': 'nav.toggle()',
+  },
+})
+export class <%= classify(name) %>Toggle {
+  protected readonly nav = inject(<%= classify(name) %>);
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Menu]',
+  exportAs: '<%= camelize(name) %>Menu',
+  host: {
+    '[id]': 'nav.menuId()',
+    '[hidden]': '!nav.expanded()',
+  },
+})
+export class <%= classify(name) %>Menu {
+  protected readonly nav = inject(<%= classify(name) %>);
+}

package/src/navbar/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularNavbar",
   "title": "Semmet Angular Navbar Options Schema",
   "type": "object",
-  "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.",
   "additionalProperties": false,
   "properties": {
     "name": {

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

@@ -1,35 +0,0 @@
-:host {
-  display: block;
-}
-
-ul {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-a,
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font: inherit;
-  color: inherit;
-  background: none;
-  text-decoration: none;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-a:focus-visible,
-button:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

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

@@ -4,10 +4,10 @@ test.describe('<%= classify(name) %>', () => {
   test('moves mounted pagination current page with next and previous controls', 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 current = component.locator('[aria-current="page"]').first();

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

@@ -1,32 +1,30 @@
 <!-- Semmet Angular: Pagination — https://www.w3.org/TR/wai-aria-1.2/#aria-current -->
 <!--
 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/ul/li structure, previous/next
+controls and page links. Native `disabled`/`aria-label` on the previous/next buttons
+already communicate everything they need — no directive required for those.
 
-<<%= selector %> label="Search results pages" />
--->
-<nav [attr.aria-label]="label()">
+<nav <%= camelize(name) %> label="Search results pages">
   <ul>
     <li>
-      <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()" [attr.aria-label]="previousAriaLabel()">
-        {{ previousLabel() }}
+      <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()" aria-label="Previous page">
+        Previous
       </button>
     </li>
     @for (page of pages; track page) {
       <li>
-        <a
-          [href]="'?page=' + page"
-          [attr.aria-current]="page === currentPage() ? 'page' : null"
-          (click)="goToPage(page)"
-        >
+        <a <%= camelize(name) %>Item [href]="'?page=' + page" [current]="page === currentPage()" (click)="goToPage(page)">
           {{ page }}
         </a>
       </li>
     }
     <li>
-      <button type="button" [disabled]="!hasNext()" (click)="goToNext()" [attr.aria-label]="nextAriaLabel()">
-        {{ nextLabel() }}
+      <button type="button" [disabled]="!hasNext()" (click)="goToNext()" aria-label="Next page">
+        Next
       </button>
     </li>
   </ul>
 </nav>
+-->

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

@@ -1,25 +1,75 @@
+import { Component, computed, signal } 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: `
+    <nav <%= camelize(name) %>>
+      <ul>
+        <li>
+          <button type="button" [disabled]="!hasPrevious()" (click)="goToPrevious()">Previous</button>
+        </li>
+        @for (page of pages; track page) {
+          <li>
+            <a <%= camelize(name) %>Item [href]="'?page=' + page" [current]="page === currentPage()" (click)="goToPage(page)">
+              {{ page }}
+            </a>
+          </li>
+        }
+        <li>
+          <button type="button" [disabled]="!hasNext()" (click)="goToNext()">Next</button>
+        </li>
+      </ul>
+    </nav>
+  `,
+})
+class HostComponent {
+  readonly pages = [1, 2, 3, 4, 5];
+  readonly currentPage = signal(1);
+
+  readonly hasPrevious = computed(() => this.currentPage() > 1);
+  readonly hasNext = computed(() => this.currentPage() < this.pages.length);
+
+  goToPage(page: number): void {
+    this.currentPage.set(page);
+  }
+
+  goToPrevious(): void {
+    if (this.hasPrevious()) {
+      this.currentPage.update((page) => page - 1);
+    }
+  }
+
+  goToNext(): void {
+    if (this.hasNext()) {
+      this.currentPage.update((page) => page + 1);
+    }
+  }
+}
 
 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'));
   }
 
   function links(): HTMLAnchorElement[] {
-    return Array.from(fixture.nativeElement.querySelectorAll('a'));
+    return Array.from(host.querySelectorAll('a'));
   }
 
-  it('renders navigation with current page state', () => {
-    expect(fixture.nativeElement.querySelector('nav').getAttribute('aria-label')).toBe('Pagination');
+  it('decorates consumer-owned markup with navigation and current-page state', () => {
+    expect(host.querySelector('nav')?.getAttribute('aria-label')).toBe('Pagination');
     expect(buttons()[0].disabled).toBe(true);
     expect(links()[0].getAttribute('aria-current')).toBe('page');
     expect(buttons()[1].disabled).toBe(false);

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

@@ -1,37 +1,23 @@
-import { Component, computed, input, signal } from '@angular/core';
+import { Directive, booleanAttribute, input } from '@angular/core';
 
-@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('Pagination');
-  readonly previousLabel = input('Previous');
-  readonly previousAriaLabel = input('Previous page');
-  readonly nextLabel = input('Next');
-  readonly nextAriaLabel = input('Next page');
-
-  protected readonly pages = [1, 2, 3, 4, 5];
-  protected readonly currentPage = signal(1);
-
-  protected readonly hasPrevious = computed(() => this.currentPage() > 1);
-  protected readonly hasNext = computed(() => this.currentPage() < this.pages.length);
-
-  protected goToPage(page: number): void {
-    this.currentPage.set(page);
-  }
-
-  protected goToPrevious(): void {
-    if (this.hasPrevious()) {
-      this.currentPage.update((page) => page - 1);
-    }
-  }
+}
 
-  protected goToNext(): void {
-    if (this.hasNext()) {
-      this.currentPage.update((page) => page + 1);
-    }
-  }
+@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/pagination/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularPagination",
   "title": "Semmet Angular Pagination Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular Pagination component with working page state, following W3C ARIA guidance on aria-current.",
+  "description": "Generates headless Angular Pagination directives (root, item) coordinated over consumer-owned markup, following W3C ARIA guidance on aria-current.",
   "additionalProperties": false,
   "properties": {
     "name": {

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

@@ -1,17 +0,0 @@
-:host {
-  display: block;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-caption {
-  text-align: left;
-}
-
-th,
-td {
-  text-align: left;
-}

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

@@ -9,7 +9,7 @@ test.describe('<%= classify(name) %>', () => {
     const table = component.locator('table').first();
     await expect(table).toBeVisible();
     await expect(table.locator('caption')).toBeVisible();
-    await expect(table.locator('th[scope="col"]')).toHaveCount(2);
+    await expect(table.locator('th[scope="col"]')).not.toHaveCount(0);
     await expect(table.locator('tbody tr')).not.toHaveCount(0);
   });
 });

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

@@ -1,45 +1,33 @@
 <!-- Semmet Angular: Table — https://www.w3.org/WAI/ARIA/apg/patterns/table/ -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %> in that parent component. This component only owns the <table>
+wrapper — caption, column count, row shape, and the empty state are entirely up to what you
+project. A <caption> as the first projected child already gives the table its accessible name
+natively; no aria-labelledby wiring needed.
 
-<<%= selector %> caption="Quarterly revenue" [rows]="results" />
 <<%= selector %>>
-  <ng-template <%= camelize(name) %>Caption>
-    Quarterly results, fiscal year 2026
-  </ng-template>
-</<%= selector %>>
--->
-<table>
-  <caption>
-    @if (captionTemplate(); as captionSlot) {
-      <ng-container [ngTemplateOutlet]="captionSlot.templateRef" />
-    } @else {
-      {{ caption() }}
-    }
-  </caption>
+  <caption>Quarterly revenue, fiscal year 2026</caption>
   <thead>
     <tr>
-      <th scope="col">{{ quarterHeader() }}</th>
-      <th scope="col">{{ revenueHeader() }}</th>
+      <th scope="col">Quarter</th>
+      <th scope="col">Revenue</th>
     </tr>
   </thead>
   <tbody>
-    @for (row of rows(); track row.quarter) {
+    @for (row of results; track row.quarter) {
       <tr>
         <th scope="row">{{ row.quarter }}</th>
         <td>{{ row.revenue }}</td>
       </tr>
     } @empty {
       <tr>
-        <td colspan="2">
-          @if (emptyTemplate(); as emptySlot) {
-            <ng-container [ngTemplateOutlet]="emptySlot.templateRef" />
-          } @else {
-            {{ emptyLabel() }}
-          }
-        </td>
+        <td colspan="2">No results available.</td>
       </tr>
     }
   </tbody>
+</<%= selector %>>
+-->
+<table>
+  <ng-content />
 </table>

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

@@ -1,41 +1,9 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { Component, Directive, TemplateRef, contentChild, inject, input } from '@angular/core';
-
-export interface <%= classify(name) %>Row {
-  quarter: string;
-  revenue: string;
-}
-
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Caption]',
-})
-export class <%= classify(name) %>Caption {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
-
-@Directive({
-  selector: 'ng-template[<%= camelize(name) %>Empty]',
-})
-export class <%= classify(name) %>Empty {
-  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
-}
+import { Component } from '@angular/core';
 
 @Component({
   selector: '<%= selector %>',
-  imports: [NgTemplateOutlet],
+  imports: [],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
-export class <%= classify(name) %> {
-  protected readonly captionTemplate = contentChild(<%= classify(name) %>Caption);
-  protected readonly emptyTemplate = contentChild(<%= classify(name) %>Empty);
-
-  readonly caption = input('Quarterly results');
-  readonly quarterHeader = input('Quarter');
-  readonly revenueHeader = input('Revenue');
-  readonly emptyLabel = input('No results available.');
-  readonly rows = input<readonly <%= classify(name) %>Row[]>([
-    { quarter: 'Q1', revenue: '$12,000' },
-    { quarter: 'Q2', revenue: '$15,500' },
-  ]);
-}
+export class <%= classify(name) %> {}

package/src/table/schema.json

@@ -3,7 +3,7 @@
   "$id": "SemmetAngularTable",
   "title": "Semmet Angular Table Options Schema",
   "type": "object",
-  "description": "Generates a standalone Angular accessible data table component (caption, scoped headers), following the W3C ARIA Authoring Practices Guide.",
+  "description": "Generates a minimal standalone Angular table wrapper (a bare <table> with content projection) — caption, column count, and row shape are entirely up to what you project, following the W3C ARIA Authoring Practices Guide.",
   "additionalProperties": false,
   "properties": {
     "name": {

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

@@ -1,40 +0,0 @@
-:host {
-  display: block;
-}
-
-[role='tablist'] {
-  display: flex;
-}
-
-[role='tab'] {
-  position: relative;
-  font: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-[role='tab']:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
-
-[role='tab']::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: 2px;
-  background: currentColor;
-  transform: scaleX(0);
-}
-
-[role='tab'][aria-selected='true']::after {
-  transform: scaleX(1);
-}
-
-[role='tabpanel']:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}

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

@@ -4,10 +4,10 @@ test.describe('<%= classify(name) %>', () => {
   test('switches mounted tabs through click and keyboard navigation', 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.'
     );
 
     await expect(component).toBeVisible();

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

@@ -1,48 +1,25 @@
 <!-- Semmet Angular: Tabs — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> and <%= classify(name) %>Item in that parent component.
+Import <%= classify(name) %>, <%= classify(name) %>List, <%= classify(name) %>Tab and <%= classify(name) %>Panel
+in that parent component. This directive set never owns markup: bring your own wrapper, tab strip,
+buttons and panels, in whatever structure the layout needs.
 
-<<%= selector %> label="Tabs">
-  <ng-template <%= camelize(name) %>Item id="profile" label="Profile" [selected]="true">
-    <app-profile-panel />
-  </ng-template>
+<div <%= camelize(name) %> [(activeId)]="activeTab">
+  <div <%= camelize(name) %>List label="Account">
+    <button type="button" <%= camelize(name) %>Tab value="profile" [selected]="true">Profile</button>
+    <button type="button" <%= camelize(name) %>Tab value="settings">Settings</button>
+    <button type="button" <%= camelize(name) %>Tab value="billing" [disabled]="true">Billing</button>
+  </div>
 
-  <ng-template <%= camelize(name) %>Item id="settings" label="Settings">
+  <div <%= camelize(name) %>Panel value="profile">
+    <app-profile-panel />
+  </div>
+  <div <%= camelize(name) %>Panel value="settings">
     <app-settings-panel [userId]="userId()" (saved)="reload()" />
-  </ng-template>
-</<%= selector %>>
-
-Set [preserveContent]="false" on <<%= selector %>> to destroy inactive tab content.
--->
-<div role="tablist" [attr.aria-label]="label()">
-  @for (item of items(); track item.id(); let i = $index) {
-    <button
-      #tabButton
-      type="button"
-      role="tab"
-      [disabled]="item.disabled()"
-      [attr.aria-selected]="isActive(item.id())"
-      [attr.aria-controls]="instanceId + '-panel-' + item.id()"
-      [id]="instanceId + '-tab-' + item.id()"
-      [tabIndex]="isActive(item.id()) ? 0 : -1"
-      (click)="select(item)"
-      (keydown)="navigateTabs($event, i)"
-    >
-      {{ item.label() }}
-    </button>
-  }
-</div>
-@for (item of items(); track item.id()) {
-  <div
-    [id]="instanceId + '-panel-' + item.id()"
-    role="tabpanel"
-    tabindex="0"
-    [attr.aria-labelledby]="instanceId + '-tab-' + item.id()"
-    [hidden]="!isActive(item.id())"
-  >
-    @if (shouldRender(item.id())) {
-      <ng-container [ngTemplateOutlet]="item.templateRef" />
-    }
   </div>
-}
+  <div <%= camelize(name) %>Panel value="billing">
+    <app-billing-panel />
+  </div>
+</div>
+-->