semmet-angular 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.1.0",
+  "version": "0.2.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__.html.template

@@ -8,7 +8,7 @@
       [attr.aria-controls]="instanceId + '-panel-' + item.id"
       [id]="instanceId + '-header-' + item.id"
       (click)="toggle(item.id)"
-      (keydown)="onHeaderKeydown($event, i)"
+      (keydown)="navigateHeaders($event, i)"
     >
       {{ item.title }}
     </button>

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

@@ -15,21 +15,21 @@ let nextId = 0;
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly headerButtons = viewChildren<ElementRef<HTMLButtonElement>>('headerButton');
 
-  readonly items: <%= classify(name) %>Item[] = [
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected 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 {
+  protected isExpanded(id: number): boolean {
     return this.expandedIds().has(id);
   }
 
-  toggle(id: number): void {
+  protected toggle(id: number): void {
     const next = new Set(this.expandedIds());
     if (next.has(id)) {
       next.delete(id);
@@ -40,7 +40,7 @@ export class <%= classify(name) %> {
   }
 
   // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.
-  onHeaderKeydown(event: KeyboardEvent, index: number): void {
+  protected navigateHeaders(event: KeyboardEvent, index: number): void {
     const buttons = this.headerButtons();
     if (buttons.length === 0) {
       return;

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

@@ -9,7 +9,7 @@
     aria-modal="true"
     [attr.aria-labelledby]="instanceId + '-title'"
     tabindex="-1"
-    (keydown)="onKeydown($event)"
+    (keydown)="handleDialogKeydown($event)"
   >
     <h2 [id]="instanceId + '-title'">Dialog title</h2>
     <div>Dialog content</div>

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

@@ -19,19 +19,19 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly isOpen = signal(false);
 
-  open(event: MouseEvent): void {
+  protected 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 {
+  protected close(): void {
     this.isOpen.set(false);
     this.triggerElement?.focus();
   }
 
-  onKeydown(event: KeyboardEvent): void {
+  protected handleDialogKeydown(event: KeyboardEvent): void {
     if (event.key === 'Escape') {
       this.close();
       return;

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

@@ -12,7 +12,7 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly expanded = signal(false);
 
-  toggle(): void {
+  protected toggle(): void {
     this.expanded.update((value) => !value);
   }
 }

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

@@ -10,7 +10,7 @@
       [id]="instanceId + '-tab-' + item.id"
       [tabIndex]="isActive(item.id) ? 0 : -1"
       (click)="select(item.id)"
-      (keydown)="onTabKeydown($event, i)"
+      (keydown)="navigateTabs($event, i)"
     >
       {{ item.label }}
     </button>

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

@@ -15,26 +15,26 @@ let nextId = 0;
   styleUrl: './<%= dasherize(name) %>.css',
 })
 export class <%= classify(name) %> {
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');
 
-  readonly items: <%= classify(name) %>Item[] = [
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected 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 {
+  protected isActive(id: number): boolean {
     return this.activeId() === id;
   }
 
-  select(id: number): void {
+  protected 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 {
+  protected navigateTabs(event: KeyboardEvent, index: number): void {
     const buttons = this.tabButtons();
     if (buttons.length === 0) {
       return;

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

@@ -6,7 +6,7 @@
   (mouseleave)="hide()"
   (focus)="show()"
   (blur)="hide()"
-  (keydown)="onTriggerKeydown($event)"
+  (keydown)="closeOnEscape($event)"
 >
   Hover me
 </button>

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

@@ -12,15 +12,15 @@ export class <%= classify(name) %> {
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
   protected readonly visible = signal(false);
 
-  show(): void {
+  protected show(): void {
     this.visible.set(true);
   }
 
-  hide(): void {
+  protected hide(): void {
     this.visible.set(false);
   }
 
-  onTriggerKeydown(event: KeyboardEvent): void {
+  protected closeOnEscape(event: KeyboardEvent): void {
     if (event.key === 'Escape') {
       this.hide();
     }