semmet-angular 0.24.0 → 0.26.0

package/README.md

@@ -15,12 +15,11 @@ Read the broader product direction in [PRODUCT_VISION.md](./PRODUCT_VISION.md).
 ## Usage
 
 ```
-npm install -D semmet-angular
 ng add semmet-angular
 ng generate semmet-angular:accordion my-faq
 ```
 
-`ng add semmet-angular` configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
+`ng add semmet-angular` installs the package and configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
 
 ## Generated tests
 
@@ -34,7 +33,7 @@ my-faq.spec.ts
 my-faq.e2e-spec.ts
 ```
 
-The unit test uses Angular's `TestBed` to verify that the standalone component can be created. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
+The unit test uses Angular's `TestBed` to verify the component through its public selector. Interactive components also generate behavior-focused tests for their ARIA state, keyboard flow, value changes, focus management, and open/close behavior. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
 
 After running `ng add semmet-angular`, use:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "Accessible UI Delivery Kit for Angular: schematics that generate ARIA-conformant standalone components with styling, keyboard behavior, unit tests, and Playwright e2e smoke tests.",
   "publisher": "danilodevsilva",
   "license": "MIT",

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

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('toggles mounted accordion panels and keeps disabled headers stable', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    await expect(component).toBeVisible();
+
+    const buttons = component.getByRole('button');
+    const enabledButton = buttons.filter({ hasText: /settings|details|show|open/i }).first();
+    const targetButton = (await enabledButton.count()) > 0 ? enabledButton : buttons.filter({ hasNotText: /billing/i }).nth(1);
+
+    test.skip(
+      (await targetButton.count()) === 0,
+      'Mount at least two enabled accordion headers to enable the generated accordion interaction e2e test.'
+    );
+
+    await expect(targetButton).toHaveAttribute('aria-controls', /.+/);
+    const controls = await targetButton.getAttribute('aria-controls');
+    const panel = page.locator(`#${controls}`);
+
+    await targetButton.click();
+    await expect(targetButton).toHaveAttribute('aria-expanded', 'true');
+    await expect(panel).toBeVisible();
+
+    await targetButton.click();
+    await expect(targetButton).toHaveAttribute('aria-expanded', 'false');
+
+    const disabledButton = component.getByRole('button', { disabled: true }).first();
+    if ((await disabledButton.count()) > 0) {
+      await expect(disabledButton).toHaveAttribute('aria-expanded', 'false');
+    }
+  });
+});

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

@@ -25,7 +25,7 @@ Set [preserveContent]="false" on <<%= selector %>> to destroy panel content when
       [attr.aria-controls]="instanceId + '-panel-' + item.id()"
       [id]="instanceId + '-header-' + item.id()"
       (click)="toggle(item)"
-      (keydown)="navigateHeaders($event, i)"
+      (keydown)="navigateHeaders($event)"
     >
       {{ item.title() }}
     </button>

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

@@ -106,7 +106,7 @@ describe('<%= classify(name) %>', () => {
   });
 
   it('moves focus between headers with arrow, Home, and End keys', () => {
-    const [profileButton, settingsButton, billingButton] = buttons();
+    const [profileButton, settingsButton] = buttons();
 
     profileButton.focus();
     profileButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
@@ -115,9 +115,9 @@ describe('<%= classify(name) %>', () => {
 
     settingsButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
     fixture.detectChanges();
-    expect(document.activeElement).toBe(billingButton);
+    expect(document.activeElement).toBe(settingsButton);
 
-    billingButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    settingsButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
     fixture.detectChanges();
     expect(document.activeElement).toBe(profileButton);
   });

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

@@ -94,12 +94,17 @@ export class <%= classify(name) %> {
   }
 
   // Up/Down/Home/End move focus between headers — optional but APG-recommended keyboard support.
-  protected navigateHeaders(event: KeyboardEvent, index: number): void {
-    const buttons = this.headerButtons();
+  protected navigateHeaders(event: KeyboardEvent): void {
+    const buttons = this.headerButtons().filter((button) => !button.nativeElement.disabled);
     if (buttons.length === 0) {
       return;
     }
 
+    const index = buttons.findIndex((button) => button.nativeElement === event.currentTarget);
+    if (index === -1) {
+      return;
+    }
+
     let nextIndex: number;
     switch (event.key) {
       case 'ArrowDown':

package/src/accordion/index.js

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

package/src/accordion/index.js.map

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

package/src/accordion/index.ts

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

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

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('renders mounted alert and dismisses it when a dismiss button exists', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const alert = component.getByRole('alert').first();
+    await expect(alert).toBeVisible();
+
+    const dismiss = component.getByRole('button').first();
+    if ((await dismiss.count()) > 0) {
+      await dismiss.click();
+      await expect(alert).toBeHidden();
+    }
+  });
+});

package/src/alert/index.js

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

package/src/alert/index.js.map

@@ -1 +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"}
+{"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,oBAAoB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/alert/index.ts

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

package/src/alert-dialog/files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('opens mounted alert dialog and closes it from an action', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const trigger = component.getByRole('button', { name: /delete item/i }).first();
+    test.skip(
+      (await trigger.count()) === 0,
+      'Keep a Delete item trigger inside <<%= selector %> /> to enable this generated alert-dialog e2e test.'
+    );
+
+    await trigger.click();
+
+    const dialog = page.getByRole('alertdialog').first();
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toHaveAttribute('aria-modal', 'true');
+    await expect(dialog).toHaveAttribute('aria-describedby', /.+/);
+
+    await dialog.getByRole('button', { name: /cancel/i }).click();
+    await expect(dialog).toBeHidden();
+  });
+});

package/src/alert-dialog/index.js

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

package/src/alert-dialog/index.js.map

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

package/src/alert-dialog/index.ts

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

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

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('renders mounted badge metadata accessibly', async ({ page }) => {
+    await page.goto('/');
+    const component = page.locator('<%= selector %>').first();
+    test.skip((await component.count()) === 0, 'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.');
+
+    const badge = component.locator('span').first();
+    await expect(badge).toBeVisible();
+    await expect(badge).toHaveAttribute('id', /.+/);
+  });
+});

package/src/badge/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.badge = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.badge = (0, generate_component_1.createAriaComponentSchematic)();
+exports.badge = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedE2eTest: false });
 //# sourceMappingURL=index.js.map

package/src/badge/index.js.map

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

package/src/badge/index.ts

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

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

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('renders mounted breadcrumb navigation with current page', async ({ page }) => {
+    await page.goto('/');
+    const component = page.locator('<%= selector %>').first();
+    test.skip((await component.count()) === 0, 'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.');
+
+    await expect(component.getByRole('navigation', { name: /breadcrumb/i })).toBeVisible();
+    await expect(component.locator('[aria-current="page"]')).toBeVisible();
+    await expect(component.locator('ol > li')).not.toHaveCount(0);
+  });
+});

package/src/breadcrumb/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breadcrumb = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.breadcrumb = (0, generate_component_1.createAriaComponentSchematic)();
+exports.breadcrumb = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedE2eTest: false });
 //# sourceMappingURL=index.js.map

package/src/breadcrumb/index.js.map

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

package/src/breadcrumb/index.ts

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

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

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('renders mounted native button with accessible state', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const button = component.getByRole('button').first();
+    await expect(button).toBeVisible();
+    await expect(button).toHaveAttribute('type', 'button');
+
+    const ariaPressed = await button.getAttribute('aria-pressed');
+    if (ariaPressed !== null) {
+      await expect(button).toHaveAttribute('aria-pressed', /true|false/);
+    }
+
+    await button.focus();
+    await expect(button).toBeFocused();
+  });
+});

package/src/button/index.js

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

package/src/button/index.js.map

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

package/src/button/index.ts

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

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

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('toggles mounted button group selection', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const group = component.getByRole('group').first();
+    const buttons = group.getByRole('button');
+    test.skip(
+      (await buttons.count()) === 0,
+      'Mount at least one button group item to enable this generated button-group e2e test.'
+    );
+
+    await expect(group).toHaveAttribute('aria-label', /.+/);
+    const first = buttons.first();
+
+    await first.click();
+    const pressed = await first.getAttribute('aria-pressed');
+    if (pressed !== null) {
+      await expect(first).toHaveAttribute('aria-pressed', /true|false/);
+    }
+  });
+});

package/src/button-group/index.js

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

package/src/button-group/index.js.map

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

package/src/button-group/index.ts

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

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

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('renders mounted card article with heading relationship', async ({ page }) => {
+    await page.goto('/');
+    const component = page.locator('<%= selector %>').first();
+    test.skip((await component.count()) === 0, 'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.');
+
+    const article = component.locator('article').first();
+    await expect(article).toBeVisible();
+    const labelledBy = await article.getAttribute('aria-labelledby');
+    if (labelledBy) {
+      await expect(component.locator(`#${labelledBy}`)).toBeVisible();
+    }
+  });
+});

package/src/card/index.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.card = void 0;
 const generate_component_1 = require("../utils/generate-component");
-exports.card = (0, generate_component_1.createAriaComponentSchematic)();
+exports.card = (0, generate_component_1.createAriaComponentSchematic)({ includeSharedE2eTest: false });
 //# sourceMappingURL=index.js.map

package/src/card/index.js.map

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

package/src/card/index.ts

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

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

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('moves mounted carousel slides with previous and next controls', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const slides = component.locator('[aria-roledescription="slide"]');
+    test.skip(
+      (await slides.count()) < 2,
+      'Mount at least two carousel slides to enable this generated carousel interaction e2e test.'
+    );
+
+    await expect(component.locator('[aria-roledescription="carousel"]')).toBeVisible();
+    await expect(slides.nth(0)).toBeVisible();
+    await expect(slides.nth(1)).toBeHidden();
+
+    await component.getByRole('button', { name: /next slide/i }).click();
+    await expect(slides.nth(0)).toBeHidden();
+    await expect(slides.nth(1)).toBeVisible();
+
+    await component.getByRole('button', { name: /previous slide/i }).click();
+    await expect(slides.nth(0)).toBeVisible();
+  });
+});

package/src/carousel/index.js

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

package/src/carousel/index.js.map

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

package/src/carousel/index.ts

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

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

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('toggles mounted checkbox with click and keyboard', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const checkbox = component.getByRole('checkbox').first();
+    await expect(checkbox).toBeVisible();
+    await expect(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    await checkbox.click();
+    await expect(checkbox).toHaveAttribute('aria-checked', 'true');
+
+    await checkbox.press('Space');
+    await expect(checkbox).toHaveAttribute('aria-checked', 'false');
+  });
+});

package/src/checkbox/index.js

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

package/src/checkbox/index.js.map

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

package/src/checkbox/index.ts

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

package/src/close-button/files/__name@dasherize__/__name@dasherize__.e2e-spec.ts.template

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('renders mounted close button with native button semantics and accessible name', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const button = component.getByRole('button').first();
+    await expect(button).toBeVisible();
+    await expect(button).toHaveAttribute('type', 'button');
+    await expect(button).toHaveAttribute('aria-label', /.+/);
+    await expect(component.locator('[aria-hidden="true"]').first()).toBeVisible();
+  });
+});

package/src/close-button/index.js

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

package/src/close-button/index.js.map

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

package/src/close-button/index.ts

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

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

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('<%= classify(name) %>', () => {
+  test('filters mounted combobox options and selects with keyboard', async ({ page }) => {
+    await page.goto('/');
+
+    const component = page.locator('<%= selector %>').first();
+    test.skip(
+      (await component.count()) === 0,
+      'Mount <<%= selector %> /> in a route or host component to enable this generated e2e test.'
+    );
+
+    const combobox = component.getByRole('combobox').first();
+    await expect(combobox).toBeVisible();
+    await expect(combobox).toHaveAttribute('aria-expanded', 'false');
+
+    await combobox.fill('ba');
+    await expect(combobox).toHaveAttribute('aria-expanded', 'true');
+    await expect(component.getByRole('option')).toHaveCount(1);
+
+    await combobox.press('ArrowDown');
+    await expect(combobox).toHaveAttribute('aria-activedescendant', /.+/);
+    await combobox.press('Enter');
+    await expect(combobox).toHaveValue('Banana');
+    await expect(combobox).toHaveAttribute('aria-expanded', 'false');
+  });
+});

package/src/combobox/index.js

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

package/src/combobox/index.js.map

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