semmet-angular 0.13.0 → 0.15.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.13.0",
+  "version": "0.15.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/badge/files/__name@dasherize__/__name@dasherize__.html.template

@@ -5,6 +5,11 @@ 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"
@@ -16,6 +21,12 @@ Import <%= classify(name) %> in that parent component.
     <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/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

@@ -5,6 +5,11 @@ 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"
@@ -17,6 +22,21 @@ Import <%= classify(name) %> in that parent component.
 >
   @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

@@ -4,6 +4,12 @@ Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
 <<%= selector %> label="View options" />
+<<%= selector %> label="View options" [items]="views" [(selectedIds)]="selectedViewIds" />
+<<%= selector %> [items]="views">
+  <ng-template <%= camelize(name) %>Item let-item let-pressed="pressed">
+    {{ item.label }}
+  </ng-template>
+</<%= selector %>>
 -->
 <div
   [id]="instanceId"
@@ -20,7 +26,14 @@ Import <%= classify(name) %> in that parent component.
       [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, model } 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;
@@ -16,16 +17,25 @@ const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
   { id: 'week', label: 'Week' },
   { id: 'month', label: 'Month' },
 ];
+const DEFAULT_SELECTED_IDS = DEFAULT_ITEMS.filter((item) => item.pressed).map((item) => item.id);
 
 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');
@@ -34,10 +44,9 @@ export class <%= classify(name) %> {
   readonly size = input<<%= classify(name) %>Size>('md');
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+  readonly selectedIds = model<readonly string[]>(DEFAULT_SELECTED_IDS);
 
-  protected readonly selectedIds = signal<ReadonlySet<string>>(
-    new Set(DEFAULT_ITEMS.filter((item) => item.pressed).map((item) => item.id)),
-  );
+  protected readonly selectedIdSet = computed<ReadonlySet<string>>(() => new Set(this.selectedIds()));
 
   protected readonly groupClasses = computed(() => [
     'semmet-button-group',
@@ -50,7 +59,7 @@ export class <%= classify(name) %> {
       return item.pressed ?? null;
     }
 
-    return this.selectedIds().has(item.id);
+    return this.selectedIdSet().has(item.id);
   }
 
   protected ariaPressed(item: <%= classify(name) %>Item): string | null {
@@ -68,7 +77,7 @@ export class <%= classify(name) %> {
     }
 
     if (this.selectionMode() === 'single') {
-      this.selectedIds.set(new Set([item.id]));
+      this.selectedIds.set([item.id]);
       return;
     }
 
@@ -79,7 +88,7 @@ export class <%= classify(name) %> {
       } else {
         next.add(item.id);
       }
-      return next;
+      return Array.from(next);
     });
   }
 }

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,12 +1,62 @@
 <!-- Semmet Angular: Card — https://www.w3.org/WAI/tutorials/page-structure/headings/ -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %> and any slot directives you use in that parent component.
 
-<<%= selector %> />
+<<%= 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]="instanceId + '-title'">
-  <h3 [id]="instanceId + '-title'">Card title</h3>
-  <p>Card description text.</p>
-  <a href="#">Learn more</a>
+<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/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

@@ -4,10 +4,21 @@ 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"
@@ -38,5 +49,10 @@ Import <%= classify(name) %> in that parent component.
         </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/table/files/__name@dasherize__/__name@dasherize__.html.template

@@ -3,10 +3,21 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= 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>
@@ -14,11 +25,21 @@ Import <%= classify(name) %> in that parent component.
     </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' },
-  ];
+  ]);
 }