semmet-angular 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Danilo Silva (daniloagostinho)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# semmet-angular
+
+**Real Angular components, same ARIA vocabulary as [Semmet](https://github.com/daniloagostinho/semmet).**
+
+`ng generate semmet-angular:accordion my-faq` scaffolds a standalone, signals-based Angular component — `.ts`/`.html`/`.css` — that implements the W3C ARIA Authoring Practices Guide pattern for real: correct roles and `aria-*` wiring, **and** the keyboard/focus behavior the pattern requires (arrow-key navigation, focus traps, focus restoration...). Unlike Semmet (markup only, by design), here markup alone isn't enough — so the generated component is fully self-contained and functional out of the box.
+
+## Why a separate project from Semmet
+
+Semmet's whole pitch is "just markup, zero CSS/JS, framework-agnostic" — that's the opposite of what's needed here. Generating a real Angular component means real state, real event handlers, real styling. Same ARIA vocabulary as the source of truth, different product.
+
+## Usage
+
+```bash
+npm install -D semmet-angular
+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)
+
+| 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: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 |
+
+## What every generated component looks like
+
+- Standalone (implicit — no `standalone: true` needed, matches Angular's current default).
+- State via `signal()`/`computed()`, not plain class fields.
+- Templates use the built-in control flow (`@for`, `@if`), not `*ngFor`/`*ngIf`.
+- No `.component` suffix on file names or class names (`accordion.ts`, `export class Accordion`), matching the current `ng generate component` convention.
+- A unique per-instance id (`<name>-0`, `<name>-1`, ...) so multiple instances of the same generated component never collide on `id`/`aria-controls`/`aria-labelledby`.
+
+## Options
+
+Every schematic accepts the same three options (same as `ng generate component`):
+
+- `name` (required, positional) — component name.
+- `project` — target project; defaults to the current/default project.
+- `path` — target directory; defaults to the project's `src/app`.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "semmet-angular",
+  "version": "0.1.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",
+  "keywords": [
+    "angular",
+    "schematics",
+    "ng-generate",
+    "aria",
+    "accessibility",
+    "a11y",
+    "standalone",
+    "signals"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daniloagostinho/semmet-angular.git"
+  },
+  "bugs": {
+    "url": "https://github.com/daniloagostinho/semmet-angular/issues"
+  },
+  "schematics": "./src/collection.json",
+  "files": [
+    "src",
+    "!src/**/*_spec.ts",
+    "!src/**/*_spec.js",
+    "!src/**/*_spec.js.map",
+    "!src/**/*_spec.d.ts"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "npm run build && node --test src/**/*_spec.js",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@angular-devkit/core": "^22.0.6",
+    "@angular-devkit/schematics": "^22.0.6",
+    "@schematics/angular": "^22.0.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "typescript": "^5.3.3"
+  }
+}

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

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+h3 {
+  margin: 0;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+}
+
+button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+[role='region'] {
+  padding: 0.75rem 1rem;
+}

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

@@ -0,0 +1,24 @@
+<!-- Semmet Angular: Accordion — https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ -->
+@for (item of items; track item.id; let i = $index) {
+  <h3>
+    <button
+      #headerButton
+      type="button"
+      [attr.aria-expanded]="isExpanded(item.id)"
+      [attr.aria-controls]="instanceId + '-panel-' + item.id"
+      [id]="instanceId + '-header-' + item.id"
+      (click)="toggle(item.id)"
+      (keydown)="onHeaderKeydown($event, i)"
+    >
+      {{ item.title }}
+    </button>
+  </h3>
+  <div
+    [id]="instanceId + '-panel-' + item.id"
+    role="region"
+    [attr.aria-labelledby]="instanceId + '-header-' + item.id"
+    [hidden]="!isExpanded(item.id)"
+  >
+    {{ item.content }}
+  </div>
+}

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

@@ -0,0 +1,70 @@
+import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  id: number;
+  title: string;
+  content: string;
+}
+
+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++}`;
+
+  readonly items: <%= classify(name) %>Item[] = [
+    { id: 1, title: 'First section title', content: 'First panel content' },
+    { id: 2, title: 'Second section title', content: 'Second panel content' },
+  ];
+
+  private readonly expandedIds = signal<ReadonlySet<number>>(new Set([1]));
+  private readonly headerButtons = viewChildren<ElementRef<HTMLButtonElement>>('headerButton');
+
+  isExpanded(id: number): boolean {
+    return this.expandedIds().has(id);
+  }
+
+  toggle(id: number): void {
+    const next = new Set(this.expandedIds());
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    this.expandedIds.set(next);
+  }
+
+  // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.
+  onHeaderKeydown(event: KeyboardEvent, index: number): void {
+    const buttons = this.headerButtons();
+    if (buttons.length === 0) {
+      return;
+    }
+
+    let nextIndex: number;
+    switch (event.key) {
+      case 'ArrowDown':
+        nextIndex = (index + 1) % buttons.length;
+        break;
+      case 'ArrowUp':
+        nextIndex = (index - 1 + buttons.length) % buttons.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = buttons.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    buttons[nextIndex].nativeElement.focus();
+  }
+}

package/src/accordion/index.d.ts

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

package/src/accordion/index.js

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

package/src/accordion/index.js.map

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

package/src/accordion/index.ts

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

package/src/accordion/schema.d.ts

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

package/src/accordion/schema.js

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

package/src/accordion/schema.js.map

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

package/src/accordion/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularAccordion",
+  "title": "Semmet Angular Accordion Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Accordion component (signals-based state, keyboard support) 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 accordion 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/accordion/schema.ts

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

package/src/collection.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "accordion": {
+      "description": "Generates a standalone Angular Accordion component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./accordion/index#accordion",
+      "schema": "./accordion/schema.json"
+    },
+    "tabs": {
+      "description": "Generates a standalone Angular Tabs component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./tabs/index#tabs",
+      "schema": "./tabs/schema.json"
+    },
+    "dialog": {
+      "description": "Generates a standalone Angular Dialog (Modal) component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./dialog/index#dialog",
+      "schema": "./dialog/schema.json"
+    },
+    "disclosure": {
+      "description": "Generates a standalone Angular Disclosure component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./disclosure/index#disclosure",
+      "schema": "./disclosure/schema.json"
+    },
+    "tooltip": {
+      "description": "Generates a standalone Angular Tooltip component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./tooltip/index#tooltip",
+      "schema": "./tooltip/schema.json"
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+:host {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgb(0 0 0 / 50%);
+}
+
+[role='dialog'] {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 20rem;
+  max-width: 90vw;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background: canvas;
+  color: canvastext;
+  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
+}
+
+[role='dialog']:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+button {
+  font: inherit;
+}

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

@@ -0,0 +1,18 @@
+<!-- Semmet Angular: Dialog (Modal) — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ -->
+<button type="button" (click)="open($event)">Open dialog</button>
+
+@if (isOpen()) {
+  <div class="backdrop" (click)="close()"></div>
+  <div
+    #dialog
+    role="dialog"
+    aria-modal="true"
+    [attr.aria-labelledby]="instanceId + '-title'"
+    tabindex="-1"
+    (keydown)="onKeydown($event)"
+  >
+    <h2 [id]="instanceId + '-title'">Dialog title</h2>
+    <div>Dialog content</div>
+    <button type="button" (click)="close()">Close</button>
+  </div>
+}

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

@@ -0,0 +1,74 @@
+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);
+
+  open(event: MouseEvent): void {
+    this.triggerElement = event.currentTarget as HTMLElement;
+    this.isOpen.set(true);
+    // Focus moves into the dialog only after Angular flushes the DOM update that un-hides it.
+    afterNextRender(() => this.focusFirstElement(), { injector: this.injector });
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+    this.triggerElement?.focus();
+  }
+
+  onKeydown(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/dialog/index.d.ts

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

package/src/dialog/index.js

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

package/src/dialog/index.js.map

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

package/src/dialog/index.ts

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

package/src/dialog/schema.d.ts

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

package/src/dialog/schema.js

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

package/src/dialog/schema.js.map

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

package/src/dialog/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularDialog",
+  "title": "Semmet Angular Dialog Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Dialog (Modal) component with a focus trap and focus restoration, 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 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/dialog/schema.ts

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

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+}
+
+button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+div {
+  padding: 0.75rem 1rem;
+}

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

@@ -0,0 +1,17 @@
+<!-- Semmet Angular: Disclosure — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ -->
+<button
+  type="button"
+  [attr.aria-expanded]="expanded()"
+  [attr.aria-controls]="instanceId + '-panel'"
+  [id]="instanceId + '-button'"
+  (click)="toggle()"
+>
+  Show details
+</button>
+<div
+  [id]="instanceId + '-panel'"
+  [attr.aria-labelledby]="instanceId + '-button'"
+  [hidden]="!expanded()"
+>
+  Hidden content
+</div>

package/src/disclosure/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 expanded = signal(false);
+
+  toggle(): void {
+    this.expanded.update((value) => !value);
+  }
+}

package/src/disclosure/index.d.ts

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

package/src/disclosure/index.js

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

package/src/disclosure/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/disclosure/index.ts

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

package/src/disclosure/schema.d.ts

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

package/src/disclosure/schema.js

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

package/src/disclosure/schema.js.map

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

package/src/disclosure/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularDisclosure",
+  "title": "Semmet Angular Disclosure Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Disclosure component (signals-based state) 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 disclosure 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/disclosure/schema.ts

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

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

@@ -0,0 +1,39 @@
+:host {
+  display: block;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+[role='tablist'] {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid currentColor;
+}
+
+[role='tab'] {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+[role='tab'][aria-selected='true'] {
+  border-bottom-color: currentColor;
+  font-weight: 600;
+}
+
+[role='tab']:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+[role='tabpanel'] {
+  padding: 1rem 0;
+}
+
+[role='tabpanel']:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,29 @@
+<!-- Semmet Angular: Tabs — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ -->
+<div role="tablist" aria-label="Tabs">
+  @for (item of items; track item.id; let i = $index) {
+    <button
+      #tabButton
+      type="button"
+      role="tab"
+      [attr.aria-selected]="isActive(item.id)"
+      [attr.aria-controls]="instanceId + '-panel-' + item.id"
+      [id]="instanceId + '-tab-' + item.id"
+      [tabIndex]="isActive(item.id) ? 0 : -1"
+      (click)="select(item.id)"
+      (keydown)="onTabKeydown($event, i)"
+    >
+      {{ item.label }}
+    </button>
+  }
+</div>
+@for (item of items; track item.id) {
+  <div
+    [id]="instanceId + '-panel-' + item.id"
+    role="tabpanel"
+    tabindex="0"
+    [attr.aria-labelledby]="instanceId + '-tab-' + item.id"
+    [hidden]="!isActive(item.id)"
+  >
+    {{ item.content }}
+  </div>
+}

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

@@ -0,0 +1,65 @@
+import { Component, ElementRef, signal, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  id: number;
+  label: string;
+  content: string;
+}
+
+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++}`;
+
+  readonly items: <%= classify(name) %>Item[] = [
+    { id: 1, label: 'First tab', content: 'First panel content' },
+    { id: 2, label: 'Second tab', content: 'Second panel content' },
+  ];
+
+  private readonly activeId = signal(this.items[0].id);
+  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');
+
+  isActive(id: number): boolean {
+    return this.activeId() === id;
+  }
+
+  select(id: number): void {
+    this.activeId.set(id);
+  }
+
+  // Left/Right/Home/End move focus AND selection (automatic activation model, per APG tabs pattern).
+  onTabKeydown(event: KeyboardEvent, index: number): void {
+    const buttons = this.tabButtons();
+    if (buttons.length === 0) {
+      return;
+    }
+
+    let nextIndex: number;
+    switch (event.key) {
+      case 'ArrowRight':
+        nextIndex = (index + 1) % buttons.length;
+        break;
+      case 'ArrowLeft':
+        nextIndex = (index - 1 + buttons.length) % buttons.length;
+        break;
+      case 'Home':
+        nextIndex = 0;
+        break;
+      case 'End':
+        nextIndex = buttons.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    this.select(this.items[nextIndex].id);
+    buttons[nextIndex].nativeElement.focus();
+  }
+}

package/src/tabs/index.d.ts

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

package/src/tabs/index.js

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

package/src/tabs/index.js.map

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

package/src/tabs/index.ts

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

package/src/tabs/schema.d.ts

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

package/src/tabs/schema.js

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

package/src/tabs/schema.js.map

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

package/src/tabs/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularTabs",
+  "title": "Semmet Angular Tabs Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Tabs component (signals-based state, roving tabindex keyboard support) following the W3C ARIA Authoring Practices Guide.",
+  "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 tabs 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/tabs/schema.ts

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

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

@@ -0,0 +1,33 @@
+:host {
+  position: relative;
+  display: inline-block;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  padding: 0.4rem 0.75rem;
+  cursor: pointer;
+}
+
+button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+[role='tooltip'] {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 0.35rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background: #111827;
+  color: #fff;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,15 @@
+<!-- Semmet Angular: Tooltip — https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ -->
+<button
+  type="button"
+  [attr.aria-describedby]="instanceId"
+  (mouseenter)="show()"
+  (mouseleave)="hide()"
+  (focus)="show()"
+  (blur)="hide()"
+  (keydown)="onTriggerKeydown($event)"
+>
+  Hover me
+</button>
+<span role="tooltip" [id]="instanceId" [hidden]="!visible()">
+  Tooltip text
+</span>

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

@@ -0,0 +1,28 @@
+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(false);
+
+  show(): void {
+    this.visible.set(true);
+  }
+
+  hide(): void {
+    this.visible.set(false);
+  }
+
+  onTriggerKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.hide();
+    }
+  }
+}

package/src/tooltip/index.d.ts

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

package/src/tooltip/index.js

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

package/src/tooltip/index.js.map

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

package/src/tooltip/index.ts

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

package/src/tooltip/schema.d.ts

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

package/src/tooltip/schema.js

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

package/src/tooltip/schema.js.map

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

package/src/tooltip/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularTooltip",
+  "title": "Semmet Angular Tooltip Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Tooltip component (signals-based state, hover + focus support) 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 tooltip 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/tooltip/schema.ts

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

package/src/utils/generate-component.d.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { ComponentSchematicOptions } from './schema-types';
+/**
+ * Shared Rule factory for every Semmet Angular schematic. `url('./files')` resolves relative to
+ * whichever named schematic is currently executing (per collection.json), not to this module's
+ * location, so centralizing this logic here is safe and avoids repeating it in all five schematics.
+ */
+export declare function createAriaComponentSchematic(): (options: ComponentSchematicOptions) => Rule;

package/src/utils/generate-component.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAriaComponentSchematic = createAriaComponentSchematic;
+const schematics_1 = require("@angular-devkit/schematics");
+const core_1 = require("@angular-devkit/core");
+const project_1 = require("@schematics/angular/utility/project");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const parse_name_1 = require("@schematics/angular/utility/parse-name");
+const validation_1 = require("@schematics/angular/utility/validation");
+/**
+ * Shared Rule factory for every Semmet Angular schematic. `url('./files')` resolves relative to
+ * whichever named schematic is currently executing (per collection.json), not to this module's
+ * location, so centralizing this logic here is safe and avoids repeating it in all five schematics.
+ */
+function createAriaComponentSchematic() {
+    return (0, project_1.createProjectSchematic)((options, { project }) => {
+        options.path ??= (0, workspace_1.buildDefaultPath)(project);
+        const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
+        const name = parsedPath.name;
+        const selector = `${project.prefix ? `${project.prefix}-` : ''}${core_1.strings.dasherize(name)}`;
+        (0, validation_1.validateHtmlSelector)(selector);
+        (0, validation_1.validateClassName)(core_1.strings.classify(name));
+        const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
+            (0, schematics_1.applyTemplates)({ ...core_1.strings, name, selector }),
+            (0, schematics_1.move)(parsedPath.path),
+        ]);
+        return (0, schematics_1.chain)([(0, schematics_1.mergeWith)(templateSource)]);
+    });
+}
+//# sourceMappingURL=generate-component.js.map

package/src/utils/generate-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-component.js","sourceRoot":"","sources":["generate-component.ts"],"names":[],"mappings":";;AAaA,oEAkBC;AA/BD,2DAAsG;AACtG,+CAA+C;AAC/C,iEAA6E;AAC7E,qEAAyE;AACzE,uEAAmE;AACnE,uEAAiG;AAGjG;;;;GAIG;AACH,SAAgB,4BAA4B;IAC1C,OAAO,IAAA,gCAAsB,EAA4B,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChF,OAAO,CAAC,IAAI,KAAK,IAAA,4BAAgB,EAAC,OAAO,CAAC,CAAC;QAE3C,MAAM,UAAU,GAAG,IAAA,sBAAS,EAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QACzD,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;QAE7B,MAAM,QAAQ,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,cAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3F,IAAA,iCAAoB,EAAC,QAAQ,CAAC,CAAC;QAC/B,IAAA,8BAAiB,EAAC,cAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QAE1C,MAAM,cAAc,GAAG,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,SAAS,CAAC,EAAE;YAC3C,IAAA,2BAAc,EAAC,EAAE,GAAG,cAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC9C,IAAA,iBAAI,EAAC,UAAU,CAAC,IAAI,CAAC;SACtB,CAAC,CAAC;QAEH,OAAO,IAAA,kBAAK,EAAC,CAAC,IAAA,sBAAS,EAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC"}

package/src/utils/generate-component.ts

@@ -0,0 +1,32 @@
+import { Rule, apply, applyTemplates, chain, mergeWith, move, url } from '@angular-devkit/schematics';
+import { strings } from '@angular-devkit/core';
+import { createProjectSchematic } from '@schematics/angular/utility/project';
+import { buildDefaultPath } from '@schematics/angular/utility/workspace';
+import { parseName } from '@schematics/angular/utility/parse-name';
+import { validateClassName, validateHtmlSelector } from '@schematics/angular/utility/validation';
+import { ComponentSchematicOptions } from './schema-types';
+
+/**
+ * Shared Rule factory for every Semmet Angular schematic. `url('./files')` resolves relative to
+ * whichever named schematic is currently executing (per collection.json), not to this module's
+ * location, so centralizing this logic here is safe and avoids repeating it in all five schematics.
+ */
+export function createAriaComponentSchematic(): (options: ComponentSchematicOptions) => Rule {
+  return createProjectSchematic<ComponentSchematicOptions>((options, { project }) => {
+    options.path ??= buildDefaultPath(project);
+
+    const parsedPath = parseName(options.path, options.name);
+    const name = parsedPath.name;
+
+    const selector = `${project.prefix ? `${project.prefix}-` : ''}${strings.dasherize(name)}`;
+    validateHtmlSelector(selector);
+    validateClassName(strings.classify(name));
+
+    const templateSource = apply(url('./files'), [
+      applyTemplates({ ...strings, name, selector }),
+      move(parsedPath.path),
+    ]);
+
+    return chain([mergeWith(templateSource)]);
+  });
+}

package/src/utils/schema-types.d.ts

@@ -0,0 +1,5 @@
+export interface ComponentSchematicOptions {
+    name: string;
+    path?: string;
+    project: string;
+}

package/src/utils/schema-types.js

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

package/src/utils/schema-types.js.map

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

package/src/utils/schema-types.ts

@@ -0,0 +1,5 @@
+export interface ComponentSchematicOptions {
+  name: string;
+  path?: string;
+  project: string;
+}

package/src/utils/test-helpers.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@angular-devkit/schematics';
+/** Minimal fake Angular workspace tree — just enough for getWorkspace()/buildDefaultPath() to work. */
+export declare function createWorkspaceTree(): Tree;

package/src/utils/test-helpers.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWorkspaceTree = createWorkspaceTree;
+const schematics_1 = require("@angular-devkit/schematics");
+/** Minimal fake Angular workspace tree — just enough for getWorkspace()/buildDefaultPath() to work. */
+function createWorkspaceTree() {
+    const tree = schematics_1.Tree.empty();
+    tree.create('/angular.json', JSON.stringify({
+        version: 1,
+        projects: {
+            demo: {
+                root: '',
+                sourceRoot: 'src',
+                prefix: 'app',
+                projectType: 'application',
+                architect: {},
+            },
+        },
+    }, null, 2));
+    tree.create('/package.json', JSON.stringify({ name: 'demo' }, null, 2));
+    return tree;
+}
+//# sourceMappingURL=test-helpers.js.map

package/src/utils/test-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-helpers.js","sourceRoot":"","sources":["test-helpers.ts"],"names":[],"mappings":";;AAGA,kDAyBC;AA5BD,2DAAkD;AAElD,uGAAuG;AACvG,SAAgB,mBAAmB;IACjC,MAAM,IAAI,GAAG,iBAAI,CAAC,KAAK,EAAE,CAAC;IAE1B,IAAI,CAAC,MAAM,CACT,eAAe,EACf,IAAI,CAAC,SAAS,CACZ;QACE,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,IAAI,EAAE,EAAE;gBACR,UAAU,EAAE,KAAK;gBACjB,MAAM,EAAE,KAAK;gBACb,WAAW,EAAE,aAAa;gBAC1B,SAAS,EAAE,EAAE;aACd;SACF;KACF,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;IACF,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IAExE,OAAO,IAAI,CAAC;AACd,CAAC"}

package/src/utils/test-helpers.ts

@@ -0,0 +1,29 @@
+import { Tree } from '@angular-devkit/schematics';
+
+/** Minimal fake Angular workspace tree — just enough for getWorkspace()/buildDefaultPath() to work. */
+export function createWorkspaceTree(): Tree {
+  const tree = Tree.empty();
+
+  tree.create(
+    '/angular.json',
+    JSON.stringify(
+      {
+        version: 1,
+        projects: {
+          demo: {
+            root: '',
+            sourceRoot: 'src',
+            prefix: 'app',
+            projectType: 'application',
+            architect: {},
+          },
+        },
+      },
+      null,
+      2
+    )
+  );
+  tree.create('/package.json', JSON.stringify({ name: 'demo' }, null, 2));
+
+  return tree;
+}