semmet-angular 0.12.0 → 0.14.0

package/README.md

@@ -21,7 +21,7 @@ Each generated component is dropped into your project exactly like `ng generate
 
 Some generated components are containers: they own the ARIA wiring, keyboard behavior, focus management, and visual shell, while your app owns the content rendered inside them.
 
-`accordion`, `tabs`, `carousel`, and `disclosure` use Angular's modern projection pattern with `ng-template`, signal queries, and `NgTemplateOutlet`. This means you can place real app components inside generated components without dynamic component factories.
+`accordion`, `tabs`, `carousel`, `disclosure`, `card`, `button`, `badge`, `navbar`, `table`, and `button-group` use Angular's modern projection pattern with `ng-template`, signal queries, and `NgTemplateOutlet`. This means you can place real app components inside generated components without dynamic component factories.
 
 Example after generating `faq`:
 
@@ -79,6 +79,50 @@ The same pattern applies to `tabs`, `carousel`, and `disclosure`:
 
 By default, projected panel/slide content is preserved after its first render. Set `[preserveContent]="false"` on the generated container to destroy inactive content when it closes or becomes inactive.
 
+The smaller structural schematics keep their simple input APIs and add safe slots where the generated component still owns the accessible structure:
+
+```
+<app-product-card title="Accessible components">
+  <ng-template productCardMedia>
+    <img src="/assets/card.png" alt="Generated Angular component preview" />
+  </ng-template>
+
+  <ng-template productCardDescription>
+    Generate Angular components with ARIA, keyboard behavior and signals.
+  </ng-template>
+
+  <ng-template productCardActions>
+    <a href="/docs">Read docs</a>
+  </ng-template>
+</app-product-card>
+
+<app-save-button label="Save">
+  <ng-template saveButtonLeading>
+    <app-save-icon aria-hidden="true" />
+  </ng-template>
+</app-save-button>
+
+<app-status-badge accessibleLabel="Build passed">
+  <ng-template statusBadgeLabel>Passed</ng-template>
+</app-status-badge>
+
+<app-main-navbar brand="Acme">
+  <ng-template mainNavbarActions>
+    <a href="/account">Account</a>
+  </ng-template>
+</app-main-navbar>
+
+<app-results-table caption="Quarterly revenue" [rows]="results">
+  <ng-template resultsTableEmpty>No revenue results yet.</ng-template>
+</app-results-table>
+
+<app-view-switcher [items]="views">
+  <ng-template viewSwitcherItem let-item>
+    {{ item.label }}
+  </ng-template>
+</app-view-switcher>
+```
+
 ## Schematics (43)
 
 **Overlays & disclosure**
@@ -93,8 +137,8 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:popover <name>` | Popover | Disclosure trigger with `aria-haspopup="dialog"`; Escape closes; outside click dismisses |
 | `ng generate semmet-angular:tooltip <name>` | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) | Shows on hover **and** focus (required for keyboard users); hides on blur/mouseleave/Escape |
 | `ng generate semmet-angular:menu-button <name>` | [Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) | Up/Down/Home/End/Escape inside the menu; closes on outside click; focus returns to the trigger |
-| `ng generate semmet-angular:button <name>` | Button | Native `<button>` with variant, size, disabled, busy, and optional pressed state |
-| `ng generate semmet-angular:button-group <name>` | Button Group | Native grouped buttons with `role="group"` and optional `aria-pressed` toggle state |
+| `ng generate semmet-angular:button <name>` | Button | Native `<button>` with variant, size, disabled, busy, optional pressed state, and safe label/icon slots |
+| `ng generate semmet-angular:button-group <name>` | Button Group | Native grouped buttons with `role="group"`, optional `aria-pressed` toggle state, and safe item-label projection |
 | `ng generate semmet-angular:close-button <name>` | Close Button | Native icon button with required accessible label |
 
 **Navigation & structure**
@@ -104,15 +148,15 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:tabs <name>` | [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) | Automatic activation; Left/Right/Home/End with roving `tabindex` |
 | `ng generate semmet-angular:breadcrumb <name>` | [Breadcrumb](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) | Static — plain links + `aria-current="page"` |
 | `ng generate semmet-angular:navigation-menu <name>` | [Navigation Menu (Disclosure)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) | Click/Enter/Space toggles the submenu — deliberately avoids `role="menu"`, reserved for app-style menus |
-| `ng generate semmet-angular:navbar <name>` | Navbar | Semantic `nav`/list/link structure with responsive disclosure toggle and `aria-current` |
+| `ng generate semmet-angular:navbar <name>` | Navbar | Semantic `nav`/list/link structure with responsive disclosure toggle, `aria-current`, and safe brand/action slots |
 | `ng generate semmet-angular:pagination <name>` | Pagination | Working page state; Previous/Next disable at the boundaries |
 | `ng generate semmet-angular:skip-link <name>` | [Skip Link](https://www.w3.org/WAI/WCAG21/Techniques/general/G1) | Hidden until focused, per the standard skip-link pattern |
 | `ng generate semmet-angular:landmarks <name>` | [Landmarks (Page Skeleton)](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) | Content-projected layout wrapper (`header`/`nav`/`main`/`aside`/`footer` slots) |
 | `ng generate semmet-angular:tree-view <name>` | [Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) | Up/Down/Left/Right/Home/End/Enter with roving `tabindex` across visible nodes |
 | `ng generate semmet-angular:toolbar <name>` | [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) | Left/Right/Home/End with roving `tabindex` |
-| `ng generate semmet-angular:card <name>` | Card | Static — semantic `<article>` + heading structure |
+| `ng generate semmet-angular:card <name>` | Card | Semantic `<article>` with owned heading/description/action/media structure and safe projection slots |
 | `ng generate semmet-angular:list-group <name>` | List Group | Semantic list structure with action items, active state, optional badges, and disabled states |
-| `ng generate semmet-angular:table <name>` | [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) | Static — caption + scoped headers |
+| `ng generate semmet-angular:table <name>` | [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) | Caption + scoped headers, input rows, and safe caption/empty-state slots |
 
 **Forms & inputs**
 
@@ -140,7 +184,7 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:alert <name>` | [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) | Dismissible assertive live region |
 | `ng generate semmet-angular:toast <name>` | Toast / Notification | Auto-dismisses after 5s (cleaned up via `DestroyRef`); dismissible early |
 | `ng generate semmet-angular:skeleton <name>` | Skeleton Loading | Composable loading placeholder for text, media, circles, cards, and custom blocks |
-| `ng generate semmet-angular:badge <name>` | Badge | Compact status label/counter with decorative mode and optional accessible label |
+| `ng generate semmet-angular:badge <name>` | Badge | Compact status label/counter with decorative mode, optional accessible label, and safe label projection |
 | `ng generate semmet-angular:spinner <name>` | Spinner | Loading status with `role="status"`, visually hidden label by default, and reduced-motion support |
 | `ng generate semmet-angular:carousel <name>` | [Carousel](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) | Previous/Next controls; `aria-live="polite"` slide region |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
   "publisher": "danilodevsilva",
   "license": "MIT",

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Alert — https://www.w3.org/WAI/ARIA/apg/patterns/alert/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 @if (visible()) {
   <div role="alert" [id]="instanceId">
     <span>Your changes have been saved.</span>

package/src/alert-dialog/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Alert Dialog — https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <button type="button" (click)="open($event)">Delete item</button>
 
 @if (isOpen()) {

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

@@ -1,4 +1,16 @@
 <!-- Semmet Angular: Badge - compact text metadata, status labels, or counters. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="New" variant="success" />
+<<%= selector %> label="7" accessibleLabel="7 unread notifications" />
+<<%= selector %> accessibleLabel="Build passed">
+  <ng-template <%= camelize(name) %>Label>
+    Passed
+  </ng-template>
+</<%= selector %>>
+-->
 <span
   [id]="instanceId"
   [class]="badgeClasses()"
@@ -9,6 +21,12 @@
     <span class="semmet-badge__dot" aria-hidden="true"></span>
   }
   @if (!dot() || label()) {
-    <span class="semmet-badge__label">{{ label() }}</span>
+    <span class="semmet-badge__label">
+      @if (labelTemplate(); as labelSlot) {
+        <ng-container [ngTemplateOutlet]="labelSlot.templateRef" />
+      } @else {
+        {{ label() }}
+      }
+    </span>
   }
 </span>

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

@@ -1,17 +1,26 @@
-import { Component, booleanAttribute, computed, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input } from '@angular/core';
 
 type <%= classify(name) %>Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
 type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Label]',
+})
+export class <%= classify(name) %>Label {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly labelTemplate = contentChild(<%= classify(name) %>Label);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Badge');

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

@@ -1,4 +1,10 @@
 <!-- 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.
+
+<<%= selector %> />
+-->
 <nav aria-label="Breadcrumb">
   <ol>
     @for (item of items; track item.id) {

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

@@ -108,6 +108,11 @@
   animation: semmet-button-spin 700ms linear infinite;
 }
 
+.semmet-button__slot {
+  display: inline-flex;
+  align-items: center;
+}
+
 @keyframes semmet-button-spin {
   to {
     transform: rotate(360deg);

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

@@ -1,4 +1,16 @@
 <!-- Semmet Angular: Button - native <button> keeps form, focus, and keyboard semantics. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Save changes" variant="primary" (click)="save()" />
+<<%= selector %> label="Saving" [busy]="isSaving()" />
+<<%= selector %> label="Upload">
+  <ng-template <%= camelize(name) %>Leading>
+    <app-upload-icon aria-hidden="true" />
+  </ng-template>
+</<%= selector %>>
+-->
 <button
   type="button"
   [id]="instanceId"
@@ -10,6 +22,21 @@
 >
   @if (busy()) {
     <span class="semmet-button__spinner" aria-hidden="true"></span>
+  } @else if (leading(); as leadingSlot) {
+    <span class="semmet-button__slot" aria-hidden="true">
+      <ng-container [ngTemplateOutlet]="leadingSlot.templateRef" />
+    </span>
+  }
+  <span>
+    @if (labelTemplate(); as labelSlot) {
+      <ng-container [ngTemplateOutlet]="labelSlot.templateRef" />
+    } @else {
+      {{ label() }}
+    }
+  </span>
+  @if (trailing(); as trailingSlot) {
+    <span class="semmet-button__slot" aria-hidden="true">
+      <ng-container [ngTemplateOutlet]="trailingSlot.templateRef" />
+    </span>
   }
-  <span>{{ label() }}</span>
 </button>

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

@@ -1,17 +1,42 @@
-import { Component, computed, input, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, computed, contentChild, inject, input, output } from '@angular/core';
 
 type <%= classify(name) %>Variant = 'primary' | 'secondary' | 'danger' | 'ghost';
 type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Leading]',
+})
+export class <%= classify(name) %>Leading {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Label]',
+})
+export class <%= classify(name) %>Label {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Trailing]',
+})
+export class <%= classify(name) %>Trailing {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly leading = contentChild(<%= classify(name) %>Leading);
+  protected readonly labelTemplate = contentChild(<%= classify(name) %>Label);
+  protected readonly trailing = contentChild(<%= classify(name) %>Trailing);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('Continue');

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

@@ -1,4 +1,15 @@
 <!-- Semmet Angular: Button Group - grouped native buttons with optional toggle state. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="View options" />
+<<%= selector %> [items]="views">
+  <ng-template <%= camelize(name) %>Item let-item let-pressed="pressed">
+    {{ item.label }}
+  </ng-template>
+</<%= selector %>>
+-->
 <div
   [id]="instanceId"
   [class]="groupClasses()"
@@ -14,7 +25,14 @@
       [attr.aria-pressed]="ariaPressed(item)"
       (click)="activate(item)"
     >
-      {{ item.label }}
+      @if (itemTemplate(); as itemSlot) {
+        <ng-container
+          [ngTemplateOutlet]="itemSlot.templateRef"
+          [ngTemplateOutletContext]="{ $implicit: item, pressed: isPressed(item) }"
+        />
+      } @else {
+        {{ item.label }}
+      }
     </button>
   }
 </div>

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

@@ -1,10 +1,11 @@
-import { Component, booleanAttribute, computed, input, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, signal } from '@angular/core';
 
 type <%= classify(name) %>Orientation = 'horizontal' | 'vertical';
 type <%= classify(name) %>SelectionMode = 'none' | 'single' | 'multiple';
 type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
 
-interface <%= classify(name) %>Item {
+export interface <%= classify(name) %>Item {
   id: string;
   label: string;
   disabled?: boolean;
@@ -19,13 +20,21 @@ const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Item]',
+})
+export class <%= classify(name) %>ItemTemplate {
+  readonly templateRef = inject<TemplateRef<{ $implicit: <%= classify(name) %>Item; pressed: boolean | null }>>(TemplateRef);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly itemTemplate = contentChild(<%= classify(name) %>ItemTemplate);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
 
   readonly label = input('View options');

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

@@ -13,7 +13,7 @@
 }
 
 article {
-  padding: 1.25rem;
+  overflow: hidden;
   background: var(--semmet-color-surface);
   border: 1px solid var(--semmet-color-outline);
   border-radius: var(--semmet-radius-md);
@@ -21,17 +21,34 @@ article {
 }
 
 h3 {
-  margin: 0 0 0.5rem;
+  margin: 1.25rem 1.25rem 0.5rem;
   font-size: 1.0625rem;
   font-weight: 500;
   color: var(--semmet-color-on-surface);
 }
 
 p {
-  margin: 0 0 1rem;
+  margin: 0;
+}
+
+.semmet-card__media :is(img, video, svg) {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.semmet-card__description {
+  margin: 0 1.25rem 1rem;
   color: var(--semmet-color-on-surface-variant);
 }
 
+.semmet-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 0 1.25rem 1.25rem;
+}
+
 a {
   color: var(--semmet-color-primary);
   font-weight: 500;

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

@@ -1,6 +1,62 @@
 <!-- Semmet Angular: Card — https://www.w3.org/WAI/tutorials/page-structure/headings/ -->
-<article [attr.aria-labelledby]="instanceId + '-title'">
-  <h3 [id]="instanceId + '-title'">Card title</h3>
-  <p>Card description text.</p>
-  <a href="#">Learn more</a>
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> and any slot directives you use in that parent component.
+
+<<%= selector %> title="Accessible components" description="Generate Angular components with ARIA." />
+
+<<%= selector %>>
+  <ng-template <%= camelize(name) %>Media>
+    <img src="..." alt="..." />
+  </ng-template>
+
+  <ng-template <%= camelize(name) %>Title>
+    Accessible components
+  </ng-template>
+
+  <ng-template <%= camelize(name) %>Description>
+    Generate Angular components with ARIA, keyboard behavior and signals.
+  </ng-template>
+
+  <ng-template <%= camelize(name) %>Actions>
+    <a href="/docs">Read docs</a>
+  </ng-template>
+</<%= selector %>>
+-->
+<article [attr.aria-labelledby]="labelledBy()">
+  @if (media(); as mediaSlot) {
+    <div class="semmet-card__media">
+      <ng-container [ngTemplateOutlet]="mediaSlot.templateRef" />
+    </div>
+  }
+
+  @if (hasTitle()) {
+    <h3 [id]="instanceId + '-title'">
+      @if (titleTemplate(); as titleSlot) {
+        <ng-container [ngTemplateOutlet]="titleSlot.templateRef" />
+      } @else {
+        {{ title() }}
+      }
+    </h3>
+  }
+
+  @if (hasDescription()) {
+    <div class="semmet-card__description">
+      @if (descriptionTemplate(); as descriptionSlot) {
+        <ng-container [ngTemplateOutlet]="descriptionSlot.templateRef" />
+      } @else {
+        <p>{{ description() }}</p>
+      }
+    </div>
+  }
+
+  @if (hasActions()) {
+    <div class="semmet-card__actions">
+      @if (actions(); as actionsSlot) {
+        <ng-container [ngTemplateOutlet]="actionsSlot.templateRef" />
+      } @else {
+        <a [href]="linkHref()">{{ linkLabel() }}</a>
+      }
+    </div>
+  }
 </article>

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

@@ -1,13 +1,56 @@
-import { Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, computed, contentChild, inject, input } from '@angular/core';
 
 let nextId = 0;
 
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Media]',
+})
+export class <%= classify(name) %>Media {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Title]',
+})
+export class <%= classify(name) %>Title {
+  readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+}
+
+@Directive({
+  selector: 'ng-template[<%= camelize(name) %>Description]',
+})
+export class <%= classify(name) %>Description {
+  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: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
+  protected readonly media = contentChild(<%= classify(name) %>Media);
+  protected readonly titleTemplate = contentChild(<%= classify(name) %>Title);
+  protected readonly descriptionTemplate = contentChild(<%= classify(name) %>Description);
+  protected readonly actions = contentChild(<%= classify(name) %>Actions);
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly title = input('Card title');
+  readonly description = input('Card description text.');
+  readonly linkHref = input('#');
+  readonly linkLabel = input('Learn more');
+
+  protected readonly hasTitle = computed(() => Boolean(this.titleTemplate()) || this.title().trim().length > 0);
+  protected readonly labelledBy = computed(() => this.hasTitle() ? `${this.instanceId}-title` : null);
+  protected readonly hasDescription = computed(() => Boolean(this.descriptionTemplate()) || this.description().trim().length > 0);
+  protected readonly hasActions = computed(() => Boolean(this.actions()) || this.linkLabel().trim().length > 0);
 }

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Checkbox — https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <div
   role="checkbox"
   [attr.aria-checked]="checked()"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Close Button - native button with a required accessible name. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Close dialog" (click)="close()" />
+-->
 <button
   type="button"
   [id]="instanceId"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Combobox — https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Choose a fruit</label>
 <input
   type="text"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Dialog (Modal) — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <button type="button" (click)="open($event)">Open dialog</button>
 
 @if (isOpen()) {

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Form - native form with labels, inline validation, and status messaging. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <form [attr.aria-labelledby]="instanceId + '-title'" (submit)="submit($event)" novalidate>
   <h2 [id]="instanceId + '-title'">Contact form</h2>
 

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Input - native <input> with label, hint, and validation wiring. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Email address" [(value)]="email" [required]="true" />
+-->
 <div class="semmet-field">
   <label [for]="controlId()">
     {{ label() }}

package/src/input-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Input Group - native input with addon text announced through aria-describedby. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Website" prefix="https://" suffix=".com" [(value)]="website" />
+-->
 <label class="semmet-input-group__label" [for]="instanceId">
   {{ label() }}
   @if (required()) {

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

@@ -1,4 +1,16 @@
 <!-- Semmet Angular: Landmarks (Page Skeleton) — https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %>>
+  <h1 header>Dashboard</h1>
+  <a nav routerLink="/reports">Reports</a>
+  <section>Primary page content</section>
+  <aside aside>Related actions</aside>
+  <small footer>Copyright 2026</small>
+</<%= selector %>>
+-->
 <!-- Project content into a region with the matching attribute, e.g. <div header>...</div>. Unmatched content goes to <main>. -->
 <header>
   <ng-content select="[header]"></ng-content>

package/src/list-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: List Group - semantic list with optional action and active states. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Settings sections" />
+-->
 <ul [id]="instanceId" [class]="listClasses()" [attr.aria-label]="label()">
   @for (item of items(); track item.id) {
     <li class="semmet-list-group__item">

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Listbox — https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <span [id]="instanceId + '-label'">Choose an option</span>
 <ul
   role="listbox"

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

@@ -1,4 +1,10 @@
 <!-- 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.
+
+<<%= selector %> />
+-->
 <button
   #menuButton
   type="button"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Meter — https://www.w3.org/TR/wai-aria-1.2/#meter -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [for]="instanceId">Disk usage</label>
 <meter [id]="instanceId" min="0" max="100" [value]="value()" low="50" high="90" optimum="0">
   {{ value() }}%

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

@@ -96,6 +96,13 @@
   list-style: none;
 }
 
+.semmet-navbar__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+}
+
 .semmet-navbar__link {
   display: flex;
   align-items: center;
@@ -128,7 +135,8 @@
 
 .semmet-navbar__brand:focus-visible,
 .semmet-navbar__toggle:focus-visible,
-.semmet-navbar__link:focus-visible {
+.semmet-navbar__link:focus-visible,
+.semmet-navbar__actions :is(a, button):focus-visible {
   outline: 2px solid var(--semmet-color-primary);
   outline-offset: 2px;
 }
@@ -144,7 +152,10 @@
   }
 
   .semmet-navbar__menu {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
     grid-column: auto;
   }
 
@@ -155,4 +166,8 @@
     gap: 0.25rem;
     padding: 0;
   }
+
+  .semmet-navbar__actions {
+    padding-top: 0;
+  }
 }

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

@@ -1,7 +1,24 @@
 <!-- Semmet Angular: Navbar - semantic navigation with responsive disclosure behavior. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= 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()">{{ brand() }}</a>
+  <a class="semmet-navbar__brand" [href]="brandHref()">
+    @if (brandTemplate(); as brandSlot) {
+      <ng-container [ngTemplateOutlet]="brandSlot.templateRef" />
+    } @else {
+      {{ brand() }}
+    }
+  </a>
 
   <button
     type="button"
@@ -32,5 +49,10 @@
         </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__.ts.template

@@ -1,6 +1,7 @@
-import { Component, computed, input, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, computed, contentChild, inject, input, signal } from '@angular/core';
 
-interface <%= classify(name) %>Item {
+export interface <%= classify(name) %>Item {
   label: string;
   href: string;
   current?: boolean;
@@ -16,13 +17,29 @@ const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
 
 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: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 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);
 

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Navigation Menu (Disclosure) — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <!-- Deliberately avoids the ARIA menu/menuitem roles — APG reserves those for app-style menus. -->
 <nav aria-label="Main">
   <ul>

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

@@ -1,4 +1,12 @@
 <!-- Semmet Angular: Offcanvas - modal drawer with dialog semantics and focus management. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> triggerLabel="Open filters" title="Filters">
+  <app-filter-panel />
+</<%= selector %>>
+-->
 <button
   type="button"
   class="semmet-offcanvas__trigger"

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

@@ -1,4 +1,10 @@
 <!-- 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.
+
+<<%= selector %> />
+-->
 <nav aria-label="Pagination">
   <ul>
     <li>

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

@@ -1,4 +1,12 @@
 <!-- Semmet Angular: Popover - disclosure trigger for short, contextual non-modal content. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> triggerLabel="More information" title="Helpful context">
+  <a routerLink="/help">Read the guide</a>
+</<%= selector %>>
+-->
 <button
   type="button"
   class="semmet-popover__trigger"

package/src/progress-bar/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Progress Bar — https://www.w3.org/TR/wai-aria-1.2/#progressbar -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [for]="instanceId">Uploading file</label>
 <progress [id]="instanceId" [value]="value()" max="100">{{ value() }}%</progress>
 <button type="button" (click)="advance()" [disabled]="isComplete()">

package/src/radio-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Radio Group — https://www.w3.org/WAI/ARIA/apg/patterns/radio/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <div role="radiogroup" [attr.aria-labelledby]="instanceId + '-label'">
   <span [id]="instanceId + '-label'">Choose a plan</span>
   @for (option of options; track option.id; let i = $index) {

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Select - native select keeps platform semantics and form behavior. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Category" [(value)]="category" [required]="true" />
+-->
 <label class="semmet-select" [for]="instanceId">
   <span class="semmet-select__label">
     {{ label() }}

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Skeleton Loading - decorative placeholder for pending content. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> [lines]="3" label="Loading profile" />
+-->
 @if (variant() === 'text') {
   <span
     [id]="instanceId"

package/src/skip-link/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,3 +1,10 @@
 <!-- Semmet Angular: Skip Link — https://www.w3.org/WAI/WCAG21/Techniques/general/G1 -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+<main id="main-content">Main content</main>
+-->
 <a class="skip-link" href="#main-content">Skip to main content</a>
 <!-- Add id="main-content" to your <main> element -->

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Slider — https://www.w3.org/WAI/ARIA/apg/patterns/slider/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [id]="instanceId + '-label'">Volume</label>
 <div #track class="track" (pointerdown)="handlePointerDown($event)" (pointermove)="handlePointerMove($event)">
   <div class="fill" [style.width.%]="value()"></div>

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Spinbutton — https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Quantity</label>
 <div class="stepper">
   <button type="button" (click)="decrement()" aria-label="Decrease quantity">−</button>

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

@@ -1,4 +1,11 @@
 <!-- Semmet Angular: Spinner - use decorative=true when another element already announces loading. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Loading results" />
+<<%= selector %> [decorative]="true" />
+-->
 <span
   [id]="instanceId"
   [class]="spinnerClasses()"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Switch — https://www.w3.org/WAI/ARIA/apg/patterns/switch/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <button type="button" role="switch" [attr.aria-checked]="checked()" [id]="instanceId" (click)="toggle()">
   Enable notifications
 </button>

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

@@ -1,6 +1,23 @@
 <!-- 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.
+
+<<%= selector %> caption="Quarterly revenue" [rows]="results" />
+<<%= selector %>>
+  <ng-template <%= camelize(name) %>Caption>
+    Quarterly results, fiscal year 2026
+  </ng-template>
+</<%= selector %>>
+-->
 <table>
-  <caption>Quarterly results</caption>
+  <caption>
+    @if (captionTemplate(); as captionSlot) {
+      <ng-container [ngTemplateOutlet]="captionSlot.templateRef" />
+    } @else {
+      {{ caption() }}
+    }
+  </caption>
   <thead>
     <tr>
       <th scope="col">Quarter</th>
@@ -8,11 +25,21 @@
     </tr>
   </thead>
   <tbody>
-    @for (row of rows; track row.quarter) {
+    @for (row of rows(); 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 {
+            No results available.
+          }
+        </td>
+      </tr>
     }
   </tbody>
 </table>

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

@@ -1,19 +1,38 @@
-import { Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Directive, TemplateRef, contentChild, inject, input } from '@angular/core';
 
-interface <%= classify(name) %>Row {
+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);
+}
+
 @Component({
   selector: '<%= selector %>',
-  imports: [],
+  imports: [NgTemplateOutlet],
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly rows: <%= classify(name) %>Row[] = [
+  protected readonly captionTemplate = contentChild(<%= classify(name) %>Caption);
+  protected readonly emptyTemplate = contentChild(<%= classify(name) %>Empty);
+
+  readonly caption = input('Quarterly results');
+  readonly rows = input<readonly <%= classify(name) %>Row[]>([
     { quarter: 'Q1', revenue: '$12,000' },
     { quarter: 'Q2', revenue: '$15,500' },
-  ];
+  ]);
 }

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Textarea - native <textarea> with label, hint, counter, and validation wiring. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Message" [(value)]="message" [required]="true" />
+-->
 <div class="semmet-field">
   <label [for]="controlId()">
     {{ label() }}

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Toast / Notification — https://www.w3.org/TR/wai-aria-1.2/#status -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <button type="button" (click)="show()">Save</button>
 
 @if (visible()) {

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

@@ -1,4 +1,10 @@
 <!-- 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.
+
+<<%= selector %> />
+-->
 <div role="toolbar" aria-label="Text formatting">
   @for (action of actions; track action.id; let i = $index) {
     <button

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Tooltip — https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <button
   type="button"
   [attr.aria-describedby]="instanceId"

package/src/tree-view/files/__name@dasherize__/__name@dasherize__.html.template

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Tree View — https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <ul role="tree" aria-label="Files">
   @for (root of tree; track root.id) {
     <li