semmet-angular 0.4.0 → 0.6.0

package/README.md

@@ -17,15 +17,55 @@ ng generate semmet-angular:accordion my-faq
 
 Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
 
-## Schematics (5)
+## Schematics (28)
+
+**Overlays & disclosure**
 
 | Command | Generates | Keyboard/focus behavior implemented |
 |---|---|---|
 | `ng generate semmet-angular:accordion <name>` | [Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) | Click/Enter/Space toggle; Up/Down/Home/End moves focus between headers |
-| `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:dialog <name>` | [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) | Focus moves in on open; Tab/Shift+Tab focus trap; Escape closes; focus returns to trigger on close |
 | `ng generate semmet-angular:disclosure <name>` | [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) | Click/Enter/Space toggle |
+| `ng generate semmet-angular:dialog <name>` | [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) | Focus moves in on open; Tab/Shift+Tab focus trap; Escape closes; focus returns to trigger on close |
+| `ng generate semmet-angular:alert-dialog <name>` | [Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) | Same focus trap as Dialog; initial focus on the least destructive action (Cancel) |
 | `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 |
+
+**Navigation & structure**
+
+| Command | Generates | Keyboard/focus behavior implemented |
+|---|---|---|
+| `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: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:table <name>` | [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) | Static — caption + scoped headers |
+
+**Forms & inputs**
+
+| Command | Generates | Keyboard/focus behavior implemented |
+|---|---|---|
+| `ng generate semmet-angular:checkbox <name>` | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) | Click/Enter/Space toggle |
+| `ng generate semmet-angular:radio-group <name>` | [Radio Group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) | Up/Down/Left/Right/Home/End move focus and selection together |
+| `ng generate semmet-angular:switch <name>` | [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) | Native `<button>` — Click/Enter/Space toggle |
+| `ng generate semmet-angular:combobox <name>` | [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) | Live filtering; Up/Down/Home/End/Enter/Escape via `aria-activedescendant` |
+| `ng generate semmet-angular:listbox <name>` | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) | Up/Down/Home/End via `aria-activedescendant` |
+| `ng generate semmet-angular:slider <name>` | [Slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) | Arrow keys/PageUp/PageDown/Home/End, plus pointer drag |
+| `ng generate semmet-angular:spinbutton <name>` | [Spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) | Up/Down/Home/End, plus increment/decrement buttons |
+| `ng generate semmet-angular:meter <name>` | [Meter](https://www.w3.org/TR/wai-aria-1.2/#meter) | Static — native `<meter>` bound to a signal |
+| `ng generate semmet-angular:progress-bar <name>` | [Progress Bar](https://www.w3.org/TR/wai-aria-1.2/#progressbar) | Native `<progress>` bound to a signal |
+
+**Feedback & media**
+
+| Command | Generates | Keyboard/focus behavior implemented |
+|---|---|---|
+| `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:carousel <name>` | [Carousel](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) | Previous/Next controls; `aria-live="polite"` slide region |
 
 ## What every generated component looks like
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.4.0",
+  "version": "0.6.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/accordion/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,9 +1,9 @@
 :host {
-  --semmet-color-primary: #0d7a72;
+  --semmet-color-primary: #18181b;
   --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d7dedd;
-  --semmet-color-on-surface: #1b201f;
-  --semmet-color-on-surface-variant: #576260;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
   --semmet-radius-md: 12px;
   --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
   --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);

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

@@ -0,0 +1,43 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-radius-sm: 8px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+[role='alert'] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  border-radius: var(--semmet-radius-sm);
+}
+
+button {
+  font: inherit;
+  font-size: 1.125rem;
+  line-height: 1;
+  color: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  transition: background-color var(--semmet-motion);
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-primary) 20%, transparent);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-on-primary);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,7 @@
+<!-- Semmet Angular: Alert — https://www.w3.org/WAI/ARIA/apg/patterns/alert/ -->
+@if (visible()) {
+  <div role="alert" [id]="instanceId">
+    <span>Your changes have been saved.</span>
+    <button type="button" (click)="dismiss()" aria-label="Dismiss">×</button>
+  </div>
+}

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

@@ -0,0 +1,18 @@
+import { Component, signal } from '@angular/core';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly visible = signal(true);
+
+  protected dismiss(): void {
+    this.visible.set(false);
+  }
+}

package/src/alert/index.d.ts

@@ -0,0 +1 @@
+export declare const alert: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/alert/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alert = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.alert = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,KAAK,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/alert/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const alert = createAriaComponentSchematic();

package/src/alert/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/alert/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/alert/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/alert/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularAlert",
+  "title": "Semmet Angular Alert Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Alert component (dismissible assertive live region) following the W3C ARIA Authoring Practices Guide.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the alert component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/alert/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

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

@@ -0,0 +1,82 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-scrim: rgba(20, 24, 23, 0.45);
+  --semmet-radius-lg: 20px;
+  --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+button {
+  font: inherit;
+  font-weight: 500;
+  color: var(--semmet-color-primary);
+  background: none;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-primary) 8%, transparent);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+[role='alertdialog'] button:last-of-type {
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  margin-left: 0.5rem;
+}
+
+[role='alertdialog'] button:last-of-type:hover {
+  background: color-mix(in srgb, var(--semmet-color-primary) 88%, black);
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--semmet-color-scrim);
+}
+
+[role='alertdialog'] {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 22rem;
+  max-width: 90vw;
+  padding: 1.5rem;
+  border-radius: var(--semmet-radius-lg);
+  background: var(--semmet-color-surface);
+  color: var(--semmet-color-on-surface);
+  box-shadow: var(--semmet-elevation-3);
+}
+
+[role='alertdialog']:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+[role='alertdialog'] h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+[role='alertdialog'] > div {
+  margin-bottom: 1.25rem;
+  color: var(--semmet-color-on-surface-variant);
+}

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

@@ -0,0 +1,20 @@
+<!-- Semmet Angular: Alert Dialog — https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/ -->
+<button type="button" (click)="open($event)">Delete item</button>
+
+@if (isOpen()) {
+  <div class="backdrop" (click)="close()"></div>
+  <div
+    #dialog
+    role="alertdialog"
+    aria-modal="true"
+    [attr.aria-labelledby]="instanceId + '-title'"
+    [attr.aria-describedby]="instanceId + '-description'"
+    tabindex="-1"
+    (keydown)="handleDialogKeydown($event)"
+  >
+    <h2 [id]="instanceId + '-title'">Confirm action</h2>
+    <div [id]="instanceId + '-description'">Are you sure you want to continue? This action cannot be undone.</div>
+    <button type="button" (click)="close()">Cancel</button>
+    <button type="button" (click)="close()">Confirm</button>
+  </div>
+}

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

@@ -0,0 +1,75 @@
+import { Component, ElementRef, Injector, afterNextRender, inject, signal, viewChild } from '@angular/core';
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly injector = inject(Injector);
+  private readonly dialogRef = viewChild<ElementRef<HTMLElement>>('dialog');
+  private triggerElement: HTMLElement | null = null;
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly isOpen = signal(false);
+
+  protected open(event: MouseEvent): void {
+    this.triggerElement = event.currentTarget as HTMLElement;
+    this.isOpen.set(true);
+    // Focus moves to the first focusable element (Cancel) only after Angular flushes the DOM
+    // update that un-hides the dialog — APG recommends focusing the least destructive action.
+    afterNextRender(() => this.focusFirstElement(), { injector: this.injector });
+  }
+
+  protected close(): void {
+    this.isOpen.set(false);
+    this.triggerElement?.focus();
+  }
+
+  protected handleDialogKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.close();
+      return;
+    }
+    if (event.key === 'Tab') {
+      this.trapFocus(event);
+    }
+  }
+
+  private focusFirstElement(): void {
+    const dialog = this.dialogRef()?.nativeElement;
+    const firstFocusable = dialog?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+    (firstFocusable ?? dialog)?.focus();
+  }
+
+  // Keeps Tab/Shift+Tab cycling within the dialog's focusable elements (APG dialog focus trap).
+  private trapFocus(event: KeyboardEvent): void {
+    const dialog = this.dialogRef()?.nativeElement;
+    if (!dialog) {
+      return;
+    }
+
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+    if (focusable.length === 0) {
+      return;
+    }
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = dialog.ownerDocument.activeElement;
+
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}

package/src/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export declare const alertDialog: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/alert-dialog/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alertDialog = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.alertDialog = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/alert-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,WAAW,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/alert-dialog/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const alertDialog = createAriaComponentSchematic();

package/src/alert-dialog/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/alert-dialog/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/alert-dialog/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/alert-dialog/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularAlertDialog",
+  "title": "Semmet Angular Alert Dialog Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Alert Dialog component (confirmation dialog with focus trap) following the W3C ARIA Authoring Practices Guide.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the alert dialog component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/alert-dialog/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

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

@@ -0,0 +1,52 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--semmet-color-on-surface-variant);
+}
+
+li:not(:last-child)::after {
+  content: '/';
+  opacity: 0.6;
+}
+
+a {
+  color: var(--semmet-color-primary);
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+li[aria-current='page'] {
+  color: var(--semmet-color-on-surface);
+  font-weight: 500;
+}

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

@@ -0,0 +1,9 @@
+<!-- Semmet Angular: Breadcrumb — https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ -->
+<nav aria-label="Breadcrumb">
+  <ol>
+    @for (item of items; track item.id) {
+      <li><a [href]="item.href">{{ item.label }}</a></li>
+    }
+    <li aria-current="page">Current page</li>
+  </ol>
+</nav>

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  id: number;
+  label: string;
+  href: string;
+}
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly items: <%= classify(name) %>Item[] = [
+    { id: 1, label: 'Home', href: '/' },
+    { id: 2, label: 'Category', href: '/category' },
+  ];
+}

package/src/breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export declare const breadcrumb: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/breadcrumb/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumb = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.breadcrumb = (0, generate_component_1.createAriaComponentSchematic)();
+//# sourceMappingURL=index.js.map

package/src/breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,UAAU,GAAG,IAAA,iDAA4B,GAAE,CAAC"}

package/src/breadcrumb/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const breadcrumb = createAriaComponentSchematic();

package/src/breadcrumb/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/breadcrumb/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/breadcrumb/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/breadcrumb/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularBreadcrumb",
+  "title": "Semmet Angular Breadcrumb Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Breadcrumb component following the W3C ARIA Authoring Practices Guide.",
+  "additionalProperties": false,
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name for the new component. Used to derive the class name, selector, and file names.",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "What name would you like to use for the breadcrumb component?"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": { "$source": "workingDirectory" },
+      "description": "The path where the component files should be created, relative to the workspace root. Defaults to the project's source root.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the component to.",
+      "$default": { "$source": "projectName" }
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/breadcrumb/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';