semmet-angular 0.42.0 → 0.44.0

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

@@ -1,22 +1,36 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+import { <%= classify(name) %>, <%= classify(name) %>Item } from './<%= dasherize(name) %>';
 
 @Component({
-  imports: [<%= classify(name) %>],
+  imports: [<%= classify(name) %>, <%= classify(name) %>Item],
   template: `
-    <<%= selector %>
+    <ul
+      <%= camelize(name) %>
       label="Account sections"
-      [items]="items"
-    />
+      [(activeId)]="activeId"
+    >
+      @for (item of items; track item.id) {
+        <li
+          <%= camelize(name) %>Item
+          [value]="item.id"
+          [disabled]="item.disabled"
+          #section="<%= camelize(name) %>Item"
+          [class.active]="section.active()"
+        >
+          <a [href]="item.href">{{ item.title }}</a>
+        </li>
+      }
+    </ul>
   `,
 })
 class HostComponent {
+  activeId = 'profile';
   readonly items = [
-    { id: 'profile', title: 'Profile', description: 'Public identity', active: true },
-    { id: 'security', title: 'Security', description: 'Password settings', badge: '2' },
-    { id: 'billing', title: 'Billing', description: 'Invoices', disabled: true },
+    { id: 'profile', title: 'Profile', href: '/profile', disabled: false },
+    { id: 'security', title: 'Security', href: '/security', disabled: false },
+    { id: 'billing', title: 'Billing', href: '/billing', disabled: true },
   ];
 }
 
@@ -34,33 +48,41 @@ describe('<%= classify(name) %>', () => {
     host = fixture.nativeElement as HTMLElement;
   });
 
-  it('renders a labeled semantic list with active and disabled states', () => {
+  it('decorates consumer-owned markup with list semantics and state', () => {
     const list = host.querySelector<HTMLUListElement>('ul');
-    const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>('button'));
+    const items = Array.from(host.querySelectorAll<HTMLLIElement>('li'));
 
     expect(list?.getAttribute('aria-label')).toBe('Account sections');
-    expect(buttons.map((button) => button.textContent?.replace(/\s+/g, ' ').trim())).toEqual([
-      'Profile Public identity',
-      'Security Password settings 2',
-      'Billing Invoices',
-    ]);
-    expect(buttons[0].getAttribute('aria-current')).toBe('true');
-    expect(buttons[2].disabled).toBe(true);
+    expect(list?.getAttribute('role')).toBe('list');
+    expect(items.map((item) => item.textContent?.trim())).toEqual(['Profile', 'Security', 'Billing']);
+    expect(items[0].getAttribute('aria-current')).toBe('true');
+    expect(items[0].getAttribute('tabindex')).toBe('0');
+    expect(items[2].getAttribute('aria-disabled')).toBe('true');
   });
 
   it('updates selected item when an enabled item is activated', () => {
-    const buttons = Array.from(host.querySelectorAll<HTMLButtonElement>('button'));
+    const items = Array.from(host.querySelectorAll<HTMLLIElement>('li'));
 
-    buttons[1].click();
+    items[1].click();
     fixture.detectChanges();
 
-    expect(buttons[0].getAttribute('aria-current')).toBeNull();
-    expect(buttons[1].getAttribute('aria-current')).toBe('true');
+    expect(items[0].getAttribute('aria-current')).toBeNull();
+    expect(items[1].getAttribute('aria-current')).toBe('true');
 
-    buttons[2].click();
+    items[2].click();
     fixture.detectChanges();
 
-    expect(buttons[1].getAttribute('aria-current')).toBe('true');
-    expect(buttons[2].getAttribute('aria-current')).toBeNull();
+    expect(items[1].getAttribute('aria-current')).toBe('true');
+    expect(items[2].getAttribute('aria-current')).toBeNull();
+  });
+
+  it('moves active state with keyboard without owning item content', () => {
+    const list = host.querySelector<HTMLUListElement>('ul');
+    const items = Array.from(host.querySelectorAll<HTMLLIElement>('li'));
+
+    list?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(items[1].getAttribute('aria-current')).toBe('true');
   });
 });

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

@@ -1,55 +1,113 @@
-import { Component, booleanAttribute, computed, input, signal } from '@angular/core';
-
-interface <%= classify(name) %>Item {
-  id: string;
-  title: string;
-  description?: string;
-  badge?: string;
-  href?: string;
-  disabled?: boolean;
-  active?: boolean;
-}
-
-const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
-  { id: 'profile', title: 'Profile', description: 'Personal details and public identity', active: true },
-  { id: 'security', title: 'Security', description: 'Password, sessions, and two-factor settings', badge: '2' },
-  { id: 'billing', title: 'Billing', description: 'Invoices and payment methods' },
-];
+import { Directive, ElementRef, booleanAttribute, computed, contentChildren, inject, input, model } from '@angular/core';
 
-let nextId = 0;
+type <%= classify(name) %>Orientation = 'vertical' | 'horizontal';
 
-@Component({
-  selector: '<%= selector %>',
-  imports: [],
-  templateUrl: './<%= dasherize(name) %>.html',
-  styleUrl: './<%= dasherize(name) %>.css',
+@Directive({
+  selector: '[<%= camelize(name) %>]',
+  exportAs: '<%= camelize(name) %>',
+  host: {
+    role: 'list',
+    '[attr.aria-label]': 'label() || null',
+    '[attr.aria-orientation]': 'orientation()',
+    '(keydown)': 'handleKeydown($event)',
+  },
 })
 export class <%= classify(name) %> {
-  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  private readonly items = contentChildren(<%= classify(name) %>Item, { descendants: true });
 
-  readonly label = input('Settings sections');
-  readonly flush = input(false, { transform: booleanAttribute });
+  readonly label = input('');
+  readonly orientation = input<<%= classify(name) %>Orientation>('vertical');
   readonly selectable = input(true, { transform: booleanAttribute });
-  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+  readonly activeId = model<string | null>(null);
 
-  protected readonly selectedId = signal<string | null>(
-    DEFAULT_ITEMS.find((item) => item.active)?.id ?? DEFAULT_ITEMS[0]?.id ?? null,
-  );
+  isActive(item: <%= classify(name) %>Item): boolean {
+    return this.activeId() === item.value();
+  }
 
-  protected readonly listClasses = computed(() => [
-    'semmet-list-group',
-    this.flush() ? 'semmet-list-group--flush' : '',
-  ].filter(Boolean).join(' '));
+  select(item: <%= classify(name) %>Item): void {
+    if (!this.selectable() || item.disabled()) {
+      return;
+    }
 
-  protected isActive(item: <%= classify(name) %>Item): boolean {
-    return this.selectable() ? this.selectedId() === item.id : Boolean(item.active);
+    this.activeId.set(item.value());
   }
 
-  protected select(item: <%= classify(name) %>Item): void {
-    if (!this.selectable() || item.disabled) {
+  handleKeydown(event: KeyboardEvent): void {
+    const enabledItems = this.items().filter((item) => !item.disabled());
+    const currentIndex = enabledItems.findIndex((item) => this.isActive(item));
+    const nextKey = this.orientation() === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const previousKey = this.orientation() === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+
+    if (event.key === nextKey) {
+      event.preventDefault();
+      this.focusAt(enabledItems, currentIndex + 1);
+      return;
+    }
+
+    if (event.key === previousKey) {
+      event.preventDefault();
+      this.focusAt(enabledItems, currentIndex - 1);
+      return;
+    }
+
+    if (event.key === 'Home') {
+      event.preventDefault();
+      this.focusAt(enabledItems, 0);
+      return;
+    }
+
+    if (event.key === 'End') {
+      event.preventDefault();
+      this.focusAt(enabledItems, enabledItems.length - 1);
       return;
     }
 
-    this.selectedId.set(item.id);
+    if (event.key === ' ' || event.key === 'Enter') {
+      const activeItem = enabledItems[currentIndex];
+      if (activeItem) {
+        event.preventDefault();
+        this.select(activeItem);
+      }
+    }
+  }
+
+  private focusAt(items: readonly <%= classify(name) %>Item[], index: number): void {
+    if (!items.length) {
+      return;
+    }
+
+    const nextIndex = (index + items.length) % items.length;
+    const item = items[nextIndex];
+    this.activeId.set(item.value());
+    item.focus();
+  }
+}
+
+@Directive({
+  selector: '[<%= camelize(name) %>Item]',
+  exportAs: '<%= camelize(name) %>Item',
+  host: {
+    role: 'listitem',
+    '[attr.aria-current]': 'active() ? ariaCurrent() : null',
+    '[attr.aria-disabled]': 'disabled() ? "true" : null',
+    '[attr.tabindex]': 'disabled() ? -1 : active() ? 0 : -1',
+    '(click)': 'select()',
+  },
+})
+export class <%= classify(name) %>Item {
+  private readonly listGroup = inject(<%= classify(name) %>);
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly value = input.required<string>();
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly ariaCurrent = input('true');
+  readonly active = computed(() => this.listGroup.isActive(this));
+
+  select(): void {
+    this.listGroup.select(this);
+  }
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
   }
 }

package/src/list-group/schema.json

@@ -9,21 +9,36 @@
     "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 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the list group component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$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" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -1,56 +1,22 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-radius-sm: 8px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-md: 40px;
-  --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;
 }
 
 span {
   display: block;
-  margin-bottom: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 ul {
   margin: 0;
-  padding: var(--semmet-space-2xs);
+  padding: 0;
   list-style: none;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  background: var(--semmet-color-surface);
-  max-width: 16rem;
 }
 
 ul:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: 1px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 [role='option'] {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border-radius: 6px;
-  color: var(--semmet-color-on-surface);
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
-}
-
-[role='option'][aria-selected='true'] {
-  background: color-mix(in srgb, var(--semmet-color-primary) 12%, transparent);
-  color: var(--semmet-color-primary);
-  font-weight: 500;
-}
-
-[role='option']:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }

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

@@ -3,9 +3,9 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Choose an option" />
 -->
-<span [id]="instanceId + '-label'">Choose an option</span>
+<span [id]="instanceId + '-label'">{{ label() }}</span>
 <ul
   role="listbox"
   [attr.aria-labelledby]="instanceId + '-label'"

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

@@ -1,4 +1,4 @@
-import { Component, computed, signal } from '@angular/core';
+import { Component, computed, input, signal } from '@angular/core';
 
 interface <%= classify(name) %>Option {
   id: number;
@@ -22,6 +22,8 @@ export class <%= classify(name) %> {
 
   protected readonly activeIndex = signal(0);
 
+  readonly label = input('Choose an option');
+
   protected readonly activeDescendantId = computed(
     () => `${this.instanceId}-option-${this.options[this.activeIndex()].id}`
   );

package/src/listbox/schema.json

@@ -9,21 +9,36 @@
     "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 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the listbox component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$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" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -1,46 +1,17 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 8px;
-  --semmet-radius-md: 12px;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-target-md: 40px;
-  --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);
-
   position: relative;
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 button {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-2xs);
-  min-height: var(--semmet-target-md);
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-sm);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
-}
-
-button:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
@@ -48,10 +19,9 @@ button::after {
   content: '';
   width: 0.4rem;
   height: 0.4rem;
-  border-right: 2px solid var(--semmet-color-on-surface-variant);
-  border-bottom: 2px solid var(--semmet-color-on-surface-variant);
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
-  transition: transform var(--semmet-motion);
 }
 
 button[aria-expanded='true']::after {
@@ -61,28 +31,18 @@ button[aria-expanded='true']::after {
 ul {
   position: absolute;
   z-index: 1;
-  top: calc(100% + var(--semmet-space-3xs));
+  top: 100%;
   left: 0;
-  min-width: 10rem;
   margin: 0;
-  padding: var(--semmet-space-2xs);
+  padding: 0;
   list-style: none;
-  background: var(--semmet-color-surface);
-  border-radius: var(--semmet-radius-md);
-  box-shadow: var(--semmet-elevation-3);
 }
 
 [role='menuitem'] {
-  min-height: var(--semmet-target-md);
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border-radius: 6px;
-  color: var(--semmet-color-on-surface);
   cursor: pointer;
-  transition: background-color var(--semmet-motion);
 }
 
-[role='menuitem']:hover,
 [role='menuitem']:focus-visible {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
-  outline: none;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }

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

@@ -3,7 +3,7 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Options" [items]="menuItems" />
 -->
 <button
   #menuButton
@@ -15,7 +15,7 @@ Import <%= classify(name) %> in that parent component.
   (click)="toggle()"
   (keydown)="handleButtonKeydown($event)"
 >
-  Options
+  {{ label() }}
 </button>
 <ul
   #menu
@@ -24,7 +24,7 @@ Import <%= classify(name) %> in that parent component.
   [attr.aria-labelledby]="instanceId + '-button'"
   [hidden]="!isOpen()"
 >
-  @for (item of items; track item.id; let i = $index) {
+  @for (item of items(); track item.id; let i = $index) {
     <li role="none">
       <div
         #menuItem

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

@@ -1,10 +1,16 @@
-import { Component, ElementRef, Injector, afterNextRender, inject, signal, viewChild, viewChildren } from '@angular/core';
+import { Component, ElementRef, Injector, afterNextRender, inject, input, signal, viewChild, viewChildren } from '@angular/core';
 
 interface <%= classify(name) %>Item {
   id: number;
   label: string;
 }
 
+const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
+  { id: 1, label: 'First option' },
+  { id: 2, label: 'Second option' },
+  { id: 3, label: 'Third option' },
+];
+
 let nextId = 0;
 
 @Component({
@@ -23,14 +29,11 @@ export class <%= classify(name) %> {
   private readonly menuItems = viewChildren<ElementRef<HTMLElement>>('menuItem');
 
   protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
-  protected readonly items: <%= classify(name) %>Item[] = [
-    { id: 1, label: 'First option' },
-    { id: 2, label: 'Second option' },
-    { id: 3, label: 'Third option' },
-  ];
-
   protected readonly isOpen = signal(false);
 
+  readonly label = input('Options');
+  readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+
   protected toggle(): void {
     this.isOpen.set(true);
     this.focusFirstItem();

package/src/menu-button/schema.json

@@ -9,21 +9,36 @@
     "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 },
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
       "x-prompt": "What name would you like to use for the menu button component?"
     },
+    "e2e": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate a Playwright e2e spec for this component. Requires Playwright to be installed/configured in the consuming app."
+    },
     "path": {
       "type": "string",
       "format": "path",
-      "$default": { "$source": "workingDirectory" },
+      "$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" }
+      "$default": {
+        "$source": "projectName"
+      }
     }
   },
-  "required": ["name", "project"]
+  "required": [
+    "name",
+    "project"
+  ]
 }

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

@@ -1,23 +1,11 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-surface: #18181b;
-  --semmet-space-2xs: 8px;
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 label {
   display: block;
-  margin-bottom: var(--semmet-space-2xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 meter {
   width: 100%;
-  max-width: 20rem;
-  height: 0.75rem;
-  accent-color: var(--semmet-color-primary);
 }

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

@@ -3,9 +3,9 @@
 Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
-<<%= selector %> />
+<<%= selector %> label="Disk usage" />
 -->
-<label [for]="instanceId">Disk usage</label>
+<label [for]="instanceId">{{ label() }}</label>
 <meter [id]="instanceId" min="0" max="100" [value]="value()" low="50" high="90" optimum="0">
   {{ value() }}%
 </meter>