semmet-angular

Angular schematics that generate real, fully working, accessible components.

ng generate semmet-angular:accordion my-faq scaffolds a standalone, signals-based Angular component — .ts/.html/.css — that implements a W3C ARIA Authoring Practices Guide pattern for real: correct roles and aria-* wiring, the keyboard/focus behavior the pattern requires (arrow-key navigation, focus traps, focus restoration...), and a consistent visual identity out of the box.

Relationship to Semmet

Semmet is a VS Code extension that autocompletes the same W3C ARIA vocabulary as plain HTML — no CSS, no JS, framework-agnostic by design. semmet-angular draws from that same vocabulary as its source of truth, but takes the opposite approach on purpose: an Angular component isn't usable with markup alone, so everything generated here — state, event handlers, styling — is fully working from the start, not just structure.

Usage

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 (28)

Overlays & disclosure

| Command | Generates | Keyboard/focus behavior implemented | |---|---|---| | ng generate semmet-angular:accordion <name> | Accordion | Click/Enter/Space toggle; Up/Down/Home/End moves focus between headers | | ng generate semmet-angular:disclosure <name> | Disclosure | Click/Enter/Space toggle | | ng generate semmet-angular:dialog <name> | 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 | Same focus trap as Dialog; initial focus on the least destructive action (Cancel) | | ng generate semmet-angular:tooltip <name> | Tooltip | Shows on hover and focus (required for keyboard users); hides on blur/mouseleave/Escape | | ng generate semmet-angular:menu-button <name> | 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 | Automatic activation; Left/Right/Home/End with roving tabindex | | ng generate semmet-angular:breadcrumb <name> | Breadcrumb | Static — plain links + aria-current="page" | | ng generate semmet-angular:navigation-menu <name> | Navigation Menu (Disclosure) | 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 | Hidden until focused, per the standard skip-link pattern | | ng generate semmet-angular:landmarks <name> | Landmarks (Page Skeleton) | Content-projected layout wrapper (header/nav/main/aside/footer slots) | | ng generate semmet-angular:tree-view <name> | Tree View | Up/Down/Left/Right/Home/End/Enter with roving tabindex across visible nodes | | ng generate semmet-angular:toolbar <name> | 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 | Static — caption + scoped headers |

Forms & inputs

| Command | Generates | Keyboard/focus behavior implemented | |---|---|---| | ng generate semmet-angular:checkbox <name> | Checkbox | Click/Enter/Space toggle | | ng generate semmet-angular:radio-group <name> | Radio Group | Up/Down/Left/Right/Home/End move focus and selection together | | ng generate semmet-angular:switch <name> | Switch | Native <button> — Click/Enter/Space toggle | | ng generate semmet-angular:combobox <name> | Combobox | Live filtering; Up/Down/Home/End/Enter/Escape via aria-activedescendant | | ng generate semmet-angular:listbox <name> | Listbox | Up/Down/Home/End via aria-activedescendant | | ng generate semmet-angular:slider <name> | Slider | Arrow keys/PageUp/PageDown/Home/End, plus pointer drag | | ng generate semmet-angular:spinbutton <name> | Spinbutton | Up/Down/Home/End, plus increment/decrement buttons | | ng generate semmet-angular:meter <name> | Meter | Static — native <meter> bound to a signal | | ng generate semmet-angular:progress-bar <name> | Progress Bar | Native <progress> bound to a signal |

Feedback & media

| Command | Generates | Keyboard/focus behavior implemented | |---|---|---| | ng generate semmet-angular:alert <name> | 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 | Previous/Next controls; aria-live="polite" slide region |

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.

Visual identity

Every generated component shares the same Material Design-informed look — clean surfaces, subtle elevation, a consistent radius/motion scale — using its own color palette (not Material's colors, to stay clear of any lookalike/plagiarism concern). The tokens are plain CSS custom properties declared on each component's :host (e.g. --semmet-color-primary, --semmet-radius-md, --semmet-elevation-1), so you can either use the defaults as-is or override the whole family from a global stylesheet without touching the generated files.

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