semmet-angular 0.42.0 → 0.43.0

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

@@ -1,30 +1,6 @@
 :host {
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--semmet-space-sm);
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  color: var(--semmet-color-on-surface);
-}
-
-header,
-nav,
-footer {
-  padding: var(--semmet-space-xs) 0;
-}
-
-header {
-  border-bottom: 1px solid var(--semmet-color-outline);
-}
-
-footer {
-  border-top: 1px solid var(--semmet-color-outline);
-  color: var(--semmet-color-on-surface-variant);
 }
 
 main {

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

@@ -15,13 +15,13 @@ Import <%= classify(name) %> in that parent component.
 <header>
   <ng-content select="[header]"></ng-content>
 </header>
-<nav aria-label="Main">
+<nav [attr.aria-label]="navigationLabel()">
   <ng-content select="[nav]"></ng-content>
 </nav>
 <main>
   <ng-content></ng-content>
 </main>
-<aside aria-label="Related links">
+<aside [attr.aria-label]="asideLabel()">
   <ng-content select="[aside]"></ng-content>
 </aside>
 <footer>

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: '<%= selector %>',
@@ -6,4 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: './<%= dasherize(name) %>.html',
   styleUrl: './<%= dasherize(name) %>.css',
 })
-export class <%= classify(name) %> {}
+export class <%= classify(name) %> {
+  readonly navigationLabel = input('Main');
+  readonly asideLabel = input('Related links');
+}

package/src/landmarks/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 layout 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/list-group/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,123 +0,0 @@
-:host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-on-primary: #ffffff;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-surface-muted: #f4f4f5;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #27272a;
-  --semmet-color-on-surface-variant: #71717a;
-  --semmet-radius-md: 10px;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-xl: 64px;
-  --semmet-target-sm: 32px;
-  --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;
-}
-
-.semmet-list-group {
-  display: grid;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  background: var(--semmet-color-surface);
-  list-style: none;
-}
-
-.semmet-list-group--flush {
-  border-radius: 0;
-}
-
-.semmet-list-group__item + .semmet-list-group__item {
-  border-block-start: 1px solid var(--semmet-color-outline);
-}
-
-.semmet-list-group__action {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--semmet-space-xs);
-  width: 100%;
-  min-height: var(--semmet-space-xl);
-  padding: var(--semmet-space-xs);
-  border: 0;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  font: inherit;
-  text-align: start;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background-color var(--semmet-motion),
-    color var(--semmet-motion),
-    opacity var(--semmet-motion);
-}
-
-.semmet-list-group__action:hover:not(:disabled):not(.semmet-list-group__action--disabled) {
-  background: var(--semmet-color-surface-muted);
-}
-
-.semmet-list-group__action--active {
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-}
-
-.semmet-list-group__action:disabled,
-.semmet-list-group__action--disabled {
-  cursor: not-allowed;
-  opacity: 0.54;
-}
-
-.semmet-list-group__action:focus-visible {
-  position: relative;
-  z-index: 1;
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
-}
-
-.semmet-list-group__content {
-  display: grid;
-  min-width: 0;
-  gap: var(--semmet-space-3xs);
-}
-
-.semmet-list-group__title {
-  font-weight: 700;
-  line-height: 1.25;
-}
-
-.semmet-list-group__description {
-  color: var(--semmet-color-on-surface-variant);
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.semmet-list-group__action--active .semmet-list-group__description {
-  color: rgba(255, 255, 255, 0.76);
-}
-
-.semmet-list-group__badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--semmet-target-sm);
-  min-height: var(--semmet-target-sm);
-  padding: var(--semmet-space-3xs) var(--semmet-space-2xs);
-  border-radius: 999px;
-  color: var(--semmet-color-on-primary);
-  background: var(--semmet-color-primary);
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.semmet-list-group__action--active .semmet-list-group__badge {
-  color: var(--semmet-color-primary);
-  background: var(--semmet-color-on-primary);
-}

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

@@ -4,23 +4,22 @@ test.describe('<%= classify(name) %>', () => {
   test('updates mounted list group active action', async ({ page }) => {
     await page.goto('/');
 
-    const component = page.locator('<%= selector %>').first();
+    const component = page.locator('[<%= camelize(name) %>]').first();
     test.skip(
       (await component.count()) === 0,
-      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+      'Mount a <%= camelize(name) %> list in a route or host component to enable this generated e2e test.'
     );
 
-    const list = component.locator('ul').first();
-    const actions = component.locator('.semmet-list-group__action');
+    const items = component.locator('[<%= camelize(name) %>Item]');
     test.skip(
-      (await actions.count()) < 2,
+      (await items.count()) < 2,
       'Mount at least two list group actions to enable this generated list-group e2e test.'
     );
 
-    await expect(list).toHaveAttribute('aria-label', /.+/);
-    await expect(actions.first()).toHaveAttribute('aria-current', /page|true/);
+    await expect(component).toHaveAttribute('aria-label', /.+/);
+    await expect(items.first()).toHaveAttribute('aria-current', /page|true/);
 
-    await actions.nth(1).click();
-    await expect(actions.nth(1)).toHaveAttribute('aria-current', /page|true/);
+    await items.nth(1).click();
+    await expect(items.nth(1)).toHaveAttribute('aria-current', /page|true/);
   });
 });

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

@@ -1,53 +1,19 @@
-<!-- Semmet Angular: List Group - semantic list with optional action and active states. -->
+<!-- Semmet Angular: List Group - headless list relationship directives. -->
 <!--
 Usage from a parent component template:
-Import <%= classify(name) %> in that parent component.
+Import <%= classify(name) %> and <%= classify(name) %>Item 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">
-      @if (item.href) {
-        <a
-          class="semmet-list-group__action"
-          [class.semmet-list-group__action--active]="isActive(item)"
-          [class.semmet-list-group__action--disabled]="item.disabled"
-          [href]="item.disabled ? null : item.href"
-          [attr.aria-current]="isActive(item) ? 'page' : null"
-          [attr.aria-disabled]="item.disabled ? 'true' : null"
-          (click)="select(item)"
-        >
-          <span class="semmet-list-group__content">
-            <span class="semmet-list-group__title">{{ item.title }}</span>
-            @if (item.description) {
-              <span class="semmet-list-group__description">{{ item.description }}</span>
-            }
-          </span>
-          @if (item.badge) {
-            <span class="semmet-list-group__badge">{{ item.badge }}</span>
-          }
-        </a>
-      } @else {
-        <button
-          type="button"
-          class="semmet-list-group__action"
-          [class.semmet-list-group__action--active]="isActive(item)"
-          [disabled]="item.disabled"
-          [attr.aria-current]="isActive(item) ? 'true' : null"
-          (click)="select(item)"
-        >
-          <span class="semmet-list-group__content">
-            <span class="semmet-list-group__title">{{ item.title }}</span>
-            @if (item.description) {
-              <span class="semmet-list-group__description">{{ item.description }}</span>
-            }
-          </span>
-          @if (item.badge) {
-            <span class="semmet-list-group__badge">{{ item.badge }}</span>
-          }
-        </button>
-      }
+<ul <%= camelize(name) %> label="Settings sections" [(activeId)]="activeSection">
+  @for (item of sections; track item.id) {
+    <li
+      <%= camelize(name) %>Item
+      [value]="item.id"
+      [disabled]="item.disabled"
+      #sectionItem="<%= camelize(name) %>Item"
+      [class.active]="sectionItem.active()"
+    >
+      <a [href]="item.href">{{ item.label }}</a>
     </li>
   }
 </ul>
+-->

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"
+  ]
 }