semmet-angular 0.42.0 → 0.43.0

package/src/spinner/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 spinner 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/steps/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+}
+
+.semmet-steps {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.semmet-steps__control,
+.semmet-steps__entry {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  font: inherit;
+}
+
+.semmet-steps__control {
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.semmet-steps__control:disabled {
+  cursor: not-allowed;
+}
+
+.semmet-steps__control:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.semmet-steps__content {
+  display: grid;
+}

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

@@ -0,0 +1,44 @@
+<!-- Semmet Angular: Steps - ordered progress with current-step semantics and optional keyboard navigation. -->
+<!--
+Usage from a parent component template:
+Import <%= classify(name) %> in that parent component.
+
+<<%= selector %> />
+<<%= selector %> interactive />
+-->
+<ol class="semmet-steps" [attr.aria-label]="label()">
+  @for (step of steps(); track step.id; let i = $index) {
+    <li class="semmet-steps__item" [attr.aria-current]="isCurrent(step) ? 'step' : null">
+      @if (interactive()) {
+        <button
+          #stepButton
+          type="button"
+          class="semmet-steps__control"
+          [disabled]="step.disabled"
+          [attr.aria-current]="isCurrent(step) ? 'step' : null"
+          [tabIndex]="isCurrent(step) ? 0 : -1"
+          (click)="select(step)"
+          (keydown)="navigate($event, i)"
+        >
+          <span class="semmet-steps__index" aria-hidden="true">{{ i + 1 }}</span>
+          <span class="semmet-steps__content">
+            <span class="semmet-steps__label">{{ step.label }}</span>
+            @if (step.description) {
+              <span class="semmet-steps__description">{{ step.description }}</span>
+            }
+          </span>
+        </button>
+      } @else {
+        <span class="semmet-steps__entry">
+          <span class="semmet-steps__index" aria-hidden="true">{{ i + 1 }}</span>
+          <span class="semmet-steps__content">
+            <span class="semmet-steps__label">{{ step.label }}</span>
+            @if (step.description) {
+              <span class="semmet-steps__description">{{ step.description }}</span>
+            }
+          </span>
+        </span>
+      }
+    </li>
+  }
+</ol>

package/src/steps/files/__name@dasherize__/__name@dasherize__.spec.ts.template

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `<<%= selector %> interactive />`,
+})
+class Host {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<Host>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Host] }).compileComponents();
+    fixture = TestBed.createComponent(Host);
+    fixture.detectChanges();
+  });
+
+  it('marks the current step with aria-current="step"', () => {
+    const current = fixture.nativeElement.querySelector('[aria-current="step"]');
+
+    expect(current?.textContent).toContain('Discover');
+  });
+
+  it('moves current step with arrow keys when interactive', () => {
+    const buttons = fixture.debugElement.queryAll(By.css('button'));
+
+    buttons[0].triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('[aria-current="step"]').textContent).toContain('Build');
+  });
+});

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

@@ -0,0 +1,107 @@
+import { Component, ElementRef, booleanAttribute, computed, input, output, signal, viewChildren } from '@angular/core';
+
+interface <%= classify(name) %>Step {
+  id: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+const DEFAULT_STEPS: readonly <%= classify(name) %>Step[] = [
+  { id: 'discover', label: 'Discover', description: 'Understand the current need.' },
+  { id: 'build', label: 'Build', description: 'Create the accessible UI.' },
+  { id: 'ship', label: 'Ship', description: 'Verify and deliver.' },
+];
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly stepButtons = viewChildren<ElementRef<HTMLButtonElement>>('stepButton');
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+
+  readonly label = input('Progress steps');
+  readonly interactive = input(false, { transform: booleanAttribute });
+  readonly steps = input<readonly <%= classify(name) %>Step[]>(DEFAULT_STEPS);
+  readonly currentId = input<string | null>(null);
+  readonly stepChange = output<<%= classify(name) %>Step>();
+
+  protected readonly selectedId = signal(DEFAULT_STEPS[0]?.id ?? null);
+  protected readonly activeId = computed(() => this.currentId() ?? this.selectedId());
+
+  protected isCurrent(step: <%= classify(name) %>Step): boolean {
+    return this.activeId() === step.id;
+  }
+
+  protected select(step: <%= classify(name) %>Step): void {
+    if (!this.interactive() || step.disabled) {
+      return;
+    }
+
+    this.selectedId.set(step.id);
+    this.stepChange.emit(step);
+  }
+
+  protected navigate(event: KeyboardEvent, index: number): void {
+    if (!this.interactive()) {
+      return;
+    }
+
+    const steps = this.steps();
+    let nextIndex: number;
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        nextIndex = this.findEnabledIndex(index, 1, steps);
+        break;
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        nextIndex = this.findEnabledIndex(index, -1, steps);
+        break;
+      case 'Home':
+        nextIndex = steps.findIndex((step) => !step.disabled);
+        break;
+      case 'End':
+        nextIndex = -1;
+        for (let i = steps.length - 1; i >= 0; i--) {
+          if (!steps[i].disabled) {
+            nextIndex = i;
+            break;
+          }
+        }
+        break;
+      default:
+        return;
+    }
+
+    if (nextIndex < 0) {
+      return;
+    }
+
+    event.preventDefault();
+    this.select(steps[nextIndex]);
+    this.stepButtons()[nextIndex]?.nativeElement.focus();
+  }
+
+  private findEnabledIndex(index: number, direction: 1 | -1, steps: readonly <%= classify(name) %>Step[]): number {
+    if (steps.length === 0) {
+      return -1;
+    }
+
+    for (let offset = 1; offset <= steps.length; offset++) {
+      const nextIndex = (index + offset * direction + steps.length) % steps.length;
+      if (!steps[nextIndex].disabled) {
+        return nextIndex;
+      }
+    }
+
+    return -1;
+  }
+}

package/src/steps/index.d.ts

@@ -0,0 +1 @@
+export declare const steps: (options: import("./schema").Schema) => import("@angular-devkit/schematics").Rule;

package/src/steps/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.steps = void 0;
+const generate_component_1 = require("../utils/generate-component");
+exports.steps = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedUnitTest: false });
+//# sourceMappingURL=index.js.map

package/src/steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,KAAK,GAAG,IAAA,iDAA4B,EAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/steps/index.ts

@@ -0,0 +1,3 @@
+import { createAriaComponentSchematic } from '../utils/generate-component';
+
+export const steps = createAriaComponentSchematic({ includeSharedUnitTest: false });

package/src/steps/schema.d.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

package/src/steps/schema.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=schema.js.map

package/src/steps/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["schema.ts"],"names":[],"mappings":""}

package/src/steps/schema.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularSteps",
+  "title": "Semmet Angular Steps Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Steps component for ordered progress, current-step semantics, and optional keyboard navigation.",
+  "additionalProperties": false,
+  "properties": {
+    "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
+      },
+      "x-prompt": "What name would you like to use for the steps 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"
+      },
+      "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"
+      }
+    }
+  },
+  "required": [
+    "name",
+    "project"
+  ]
+}

package/src/steps/schema.ts

@@ -0,0 +1 @@
+export { ComponentSchematicOptions as Schema } from '../utils/schema-types';

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

@@ -1,25 +1,14 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-outline: #71717a;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-on-surface: #18181b;
-  --semmet-space-md: 32px;
-  --semmet-target-sm: 32px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: inline-block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 [role='switch'] {
   position: relative;
   display: inline-flex;
   align-items: center;
-  padding-left: var(--semmet-space-md);
-  min-height: var(--semmet-target-sm);
+  padding-left: 2.75rem;
   font: inherit;
-  color: var(--semmet-color-on-surface);
+  color: inherit;
   background: none;
   border: none;
   cursor: pointer;
@@ -34,10 +23,9 @@
   width: 2.25rem;
   height: 1.25rem;
   box-sizing: border-box;
-  border: 2px solid var(--semmet-color-outline);
+  border: 2px solid currentColor;
   border-radius: 999px;
   background: transparent;
-  transition: background-color var(--semmet-motion), border-color var(--semmet-motion);
 }
 
 [role='switch']::after {
@@ -49,22 +37,19 @@
   width: 0.85rem;
   height: 0.85rem;
   border-radius: 50%;
-  background: var(--semmet-color-outline);
-  transition: transform var(--semmet-motion), background-color var(--semmet-motion);
+  background: currentColor;
 }
 
 [role='switch'][aria-checked='true']::before {
-  background: var(--semmet-color-primary);
-  border-color: var(--semmet-color-primary);
+  background: currentColor;
 }
 
 [role='switch'][aria-checked='true']::after {
-  background: var(--semmet-color-surface);
+  background: Canvas;
   transform: translateY(-50%) translateX(1rem);
 }
 
 [role='switch']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
-  border-radius: 4px;
 }

package/src/switch/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 switch 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/table/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,14 +1,5 @@
 :host {
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-color-surface-variant: #f4f4f5;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
 }
 
 table {
@@ -18,25 +9,9 @@ table {
 
 caption {
   text-align: left;
-  margin-bottom: var(--semmet-space-xs);
-  font-weight: 500;
-  color: var(--semmet-color-on-surface);
 }
 
 th,
 td {
   text-align: left;
-  padding: var(--semmet-space-2xs) var(--semmet-space-xs);
-  border-bottom: 1px solid var(--semmet-color-outline);
-}
-
-thead th {
-  background: var(--semmet-color-surface-variant);
-  color: var(--semmet-color-on-surface-variant);
-  font-weight: 500;
-}
-
-tbody th {
-  color: var(--semmet-color-on-surface);
-  font-weight: 500;
 }

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

@@ -20,8 +20,8 @@ Import <%= classify(name) %> in that parent component.
   </caption>
   <thead>
     <tr>
-      <th scope="col">Quarter</th>
-      <th scope="col">Revenue</th>
+      <th scope="col">{{ quarterHeader() }}</th>
+      <th scope="col">{{ revenueHeader() }}</th>
     </tr>
   </thead>
   <tbody>
@@ -36,7 +36,7 @@ Import <%= classify(name) %> in that parent component.
           @if (emptyTemplate(); as emptySlot) {
             <ng-container [ngTemplateOutlet]="emptySlot.templateRef" />
           } @else {
-            No results available.
+            {{ emptyLabel() }}
           }
         </td>
       </tr>

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

@@ -31,6 +31,9 @@ export class <%= classify(name) %> {
   protected readonly emptyTemplate = contentChild(<%= classify(name) %>Empty);
 
   readonly caption = input('Quarterly results');
+  readonly quarterHeader = input('Quarter');
+  readonly revenueHeader = input('Revenue');
+  readonly emptyLabel = input('No results available.');
   readonly rows = input<readonly <%= classify(name) %>Row[]>([
     { quarter: 'Q1', revenue: '$12,000' },
     { quarter: 'Q2', revenue: '$15,500' },

package/src/table/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 table 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/tabs/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,79 +1,40 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-sm: 8px;
-  --semmet-space-3xs: 4px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --semmet-target-lg: 48px;
-  --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;
-  line-height: 1.5;
-  color: var(--semmet-color-on-surface);
 }
 
 [role='tablist'] {
   display: flex;
-  gap: var(--semmet-space-3xs);
-  border-bottom: 1px solid var(--semmet-color-outline);
 }
 
 [role='tab'] {
   position: relative;
   font: inherit;
-  font-weight: 500;
-  color: var(--semmet-color-on-surface-variant);
   background: none;
   border: none;
-  border-radius: var(--semmet-radius-sm) var(--semmet-radius-sm) 0 0;
-  min-height: var(--semmet-target-lg);
-  padding: var(--semmet-space-2xs) var(--semmet-space-sm);
   cursor: pointer;
-  transition: background-color var(--semmet-motion), color var(--semmet-motion);
-}
-
-[role='tab']:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 [role='tab']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }
 
 [role='tab']::after {
   content: '';
   position: absolute;
-  left: var(--semmet-space-2xs);
-  right: var(--semmet-space-2xs);
+  left: 0;
+  right: 0;
   bottom: -1px;
   height: 2px;
-  border-radius: 2px 2px 0 0;
-  background: var(--semmet-color-primary);
+  background: currentColor;
   transform: scaleX(0);
-  transition: transform var(--semmet-motion);
-}
-
-[role='tab'][aria-selected='true'] {
-  color: var(--semmet-color-primary);
 }
 
 [role='tab'][aria-selected='true']::after {
   transform: scaleX(1);
 }
 
-[role='tabpanel'] {
-  padding: var(--semmet-space-xs) var(--semmet-space-3xs);
-  color: var(--semmet-color-on-surface-variant);
-}
-
 [role='tabpanel']:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
+  outline: 2px solid currentColor;
   outline-offset: 2px;
 }

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

@@ -3,7 +3,7 @@
 Usage from a parent component template:
 Import <%= classify(name) %> and <%= classify(name) %>Item in that parent component.
 
-<<%= selector %>>
+<<%= selector %> label="Tabs">
   <ng-template <%= camelize(name) %>Item id="profile" label="Profile" [selected]="true">
     <app-profile-panel />
   </ng-template>
@@ -15,7 +15,7 @@ Import <%= classify(name) %> and <%= classify(name) %>Item in that parent compon
 
 Set [preserveContent]="false" on <<%= selector %>> to destroy inactive tab content.
 -->
-<div role="tablist" aria-label="Tabs">
+<div role="tablist" [attr.aria-label]="label()">
   @for (item of items(); track item.id(); let i = $index) {
     <button
       #tabButton