semmet-angular 0.12.0 → 0.13.0

package/package.json

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

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

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

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

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

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

@@ -1,4 +1,11 @@
 <!-- Semmet Angular: Badge - compact text metadata, status labels, or counters. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="New" variant="success" />
+<<%= selector %> label="7" accessibleLabel="7 unread notifications" />
+-->
 <span
   [id]="instanceId"
   [class]="badgeClasses()"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Breadcrumb — https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <nav aria-label="Breadcrumb">
   <ol>
     @for (item of items; track item.id) {

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

@@ -1,4 +1,11 @@
 <!-- Semmet Angular: Button - native <button> keeps form, focus, and keyboard semantics. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="Save changes" variant="primary" (click)="save()" />
+<<%= selector %> label="Saving" [busy]="isSaving()" />
+-->
 <button
   type="button"
   [id]="instanceId"

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Button Group - grouped native buttons with optional toggle state. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> label="View options" />
+-->
 <div
   [id]="instanceId"
   [class]="groupClasses()"

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

@@ -1,4 +1,10 @@
 <!-- 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.
+
+<<%= selector %> />
+-->
 <article [attr.aria-labelledby]="instanceId + '-title'">
   <h3 [id]="instanceId + '-title'">Card title</h3>
   <p>Card description text.</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Menu Button — https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <button
   #menuButton
   type="button"

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

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Navbar - semantic navigation with responsive disclosure behavior. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> brand="Acme" brandHref="/" />
+-->
 <!-- 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>

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

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

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

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Pagination — https://www.w3.org/TR/wai-aria-1.2/#aria-current -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <nav aria-label="Pagination">
   <ul>
     <li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Table — https://www.w3.org/WAI/ARIA/apg/patterns/table/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <table>
   <caption>Quarterly results</caption>
   <thead>

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

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

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

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

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

@@ -1,4 +1,10 @@
 <!-- Semmet Angular: Toolbar — https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+-->
 <div role="toolbar" aria-label="Text formatting">
   @for (action of actions; track action.id; let i = $index) {
     <button

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

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

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

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