semmet-angular 0.22.0 → 0.24.0

package/src/menu-button/index.js

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

package/src/menu-button/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,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/menu-button/index.ts

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

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

@@ -0,0 +1,74 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %>, <%= classify(name) %>Actions } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>, <%= classify(name) %>Actions],
+  template: `
+    <<%= selector %>
+      brand="Acme"
+      label="Main navigation"
+      [items]="items"
+    >
+      <ng-template <%= camelize(name) %>Actions>
+        <a href="/account">Account</a>
+      </ng-template>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {
+  readonly items = [
+    { label: 'Home', href: '/', current: true },
+    { label: 'Projects', href: '/projects' },
+    { label: 'Disabled', href: '/disabled', disabled: true },
+  ];
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders semantic navigation with current and disabled links', () => {
+    const nav = host.querySelector<HTMLElement>('nav');
+    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('.semmet-navbar__link'));
+
+    expect(nav?.getAttribute('aria-label')).toBe('Main navigation');
+    expect(host.querySelector('.semmet-navbar__brand')?.textContent?.trim()).toBe('Acme');
+    expect(links[0].getAttribute('aria-current')).toBe('page');
+    expect(links[2].getAttribute('aria-disabled')).toBe('true');
+    expect(links[2].getAttribute('href')).toBeNull();
+    expect(host.textContent).toContain('Account');
+  });
+
+  it('toggles responsive menu state and closes when a link is activated', () => {
+    const toggle = host.querySelector<HTMLButtonElement>('.semmet-navbar__toggle');
+    const menu = host.querySelector<HTMLElement>('.semmet-navbar__menu');
+    const projectsLink = Array.from(host.querySelectorAll<HTMLAnchorElement>('.semmet-navbar__link'))[1];
+
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
+    expect(menu?.classList.contains('semmet-navbar__menu--open')).toBe(false);
+
+    toggle?.click();
+    fixture.detectChanges();
+
+    expect(toggle?.getAttribute('aria-expanded')).toBe('true');
+    expect(menu?.classList.contains('semmet-navbar__menu--open')).toBe(true);
+
+    projectsLink.click();
+    fixture.detectChanges();
+
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false');
+    expect(menu?.classList.contains('semmet-navbar__menu--open')).toBe(false);
+  });
+});

package/src/navbar/index.js

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

package/src/navbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,MAAM,GAAG,IAAA,iDAA4B,GAAE,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,CAAC,CAAC"}

package/src/navbar/index.ts

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

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

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `<<%= selector %> />`,
+})
+class HostComponent {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders semantic navigation without app menu roles', () => {
+    const nav = host.querySelector<HTMLElement>('nav');
+    const links = Array.from(host.querySelectorAll<HTMLAnchorElement>('a'));
+
+    expect(nav?.getAttribute('aria-label')).toBe('Main');
+    expect(host.querySelector('[role="menu"]')).toBeNull();
+    expect(host.querySelector('[role="menuitem"]')).toBeNull();
+    expect(links.map((link) => link.textContent?.trim())).toEqual(['Home', 'First product', 'Second product']);
+  });
+
+  it('toggles submenu visibility and ARIA state', () => {
+    const button = host.querySelector<HTMLButtonElement>('button');
+    const submenu = host.querySelector<HTMLUListElement>('ul ul');
+
+    expect(button?.getAttribute('aria-expanded')).toBe('false');
+    expect(button?.getAttribute('aria-controls')).toBe(submenu?.id);
+    expect(submenu?.getAttribute('aria-labelledby')).toBe(button?.id);
+    expect(submenu?.hidden).toBe(true);
+
+    button?.click();
+    fixture.detectChanges();
+
+    expect(button?.getAttribute('aria-expanded')).toBe('true');
+    expect(submenu?.hidden).toBe(false);
+  });
+});

package/src/navigation-menu/index.js

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

package/src/navigation-menu/index.js.map

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

package/src/navigation-menu/index.ts

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

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

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `
+    <<%= selector %> triggerLabel="Open filters" title="Filters" description="Refine results">
+      <button type="button">Apply filters</button>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders a closed trigger wired to the panel id', () => {
+    const trigger = host.querySelector<HTMLButtonElement>('.semmet-offcanvas__trigger');
+
+    expect(trigger?.textContent?.trim()).toBe('Open filters');
+    expect(trigger?.getAttribute('aria-controls')).toBeTruthy();
+    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it('opens as a modal dialog and closes with Escape, backdrop, and close button', () => {
+    const trigger = host.querySelector<HTMLButtonElement>('.semmet-offcanvas__trigger');
+
+    trigger?.click();
+    fixture.detectChanges();
+
+    let panel = host.querySelector<HTMLElement>('[role="dialog"]');
+    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
+    expect(panel?.getAttribute('aria-modal')).toBe('true');
+    expect(panel?.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(panel?.getAttribute('aria-describedby')).toBeTruthy();
+    expect(panel?.textContent).toContain('Filters');
+    expect(panel?.textContent).toContain('Apply filters');
+
+    panel?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+
+    trigger?.click();
+    fixture.detectChanges();
+    host.querySelector<HTMLElement>('.semmet-offcanvas__backdrop')?.click();
+    fixture.detectChanges();
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+
+    trigger?.click();
+    fixture.detectChanges();
+    panel = host.querySelector<HTMLElement>('[role="dialog"]');
+    panel?.querySelector<HTMLButtonElement>('.semmet-offcanvas__close')?.click();
+    fixture.detectChanges();
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+  });
+});

package/src/offcanvas/index.js

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

package/src/offcanvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,SAAS,GAAG,IAAA,iDAA4B,GAAE,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,CAAC,CAAC"}

package/src/offcanvas/index.ts

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

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

@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<<%= classify(name) %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [<%= classify(name) %>] }).compileComponents();
+    fixture = TestBed.createComponent(<%= classify(name) %>);
+    fixture.detectChanges();
+  });
+
+  function buttons(): HTMLButtonElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('button'));
+  }
+
+  function links(): HTMLAnchorElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('a'));
+  }
+
+  it('renders navigation with current page state', () => {
+    expect(fixture.nativeElement.querySelector('nav').getAttribute('aria-label')).toBe('Pagination');
+    expect(buttons()[0].disabled).toBe(true);
+    expect(links()[0].getAttribute('aria-current')).toBe('page');
+    expect(buttons()[1].disabled).toBe(false);
+  });
+
+  it('changes current page from page links and next/previous buttons', () => {
+    links()[2].click();
+    fixture.detectChanges();
+    expect(links()[2].getAttribute('aria-current')).toBe('page');
+
+    buttons()[0].click();
+    fixture.detectChanges();
+    expect(links()[1].getAttribute('aria-current')).toBe('page');
+
+    buttons()[1].click();
+    fixture.detectChanges();
+    expect(links()[2].getAttribute('aria-current')).toBe('page');
+  });
+});

package/src/pagination/index.js

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

package/src/pagination/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,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/pagination/index.ts

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

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

@@ -0,0 +1,69 @@
+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 %> triggerLabel="Details" title="Extra details" content="Context text">
+      <a href="/help">Help link</a>
+    </<%= selector %>>
+  `,
+})
+class HostComponent {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders a closed disclosure trigger for non-modal dialog content', () => {
+    const trigger = host.querySelector<HTMLButtonElement>('.semmet-popover__trigger');
+
+    expect(trigger?.textContent?.trim()).toBe('Details');
+    expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
+    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it('opens and closes the popover from trigger, close button, and Escape', () => {
+    const triggerDebug = fixture.debugElement.query(By.css('.semmet-popover__trigger'));
+    const trigger = triggerDebug.nativeElement as HTMLButtonElement;
+
+    trigger.click();
+    fixture.detectChanges();
+
+    let panel = host.querySelector<HTMLElement>('[role="dialog"]');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(trigger.getAttribute('aria-controls')).toBe(panel?.id);
+    expect(panel?.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(panel?.textContent).toContain('Extra details');
+    expect(panel?.textContent).toContain('Help link');
+
+    panel?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+
+    trigger.click();
+    fixture.detectChanges();
+
+    panel = host.querySelector<HTMLElement>('[role="dialog"]');
+    panel?.querySelector<HTMLButtonElement>('.semmet-popover__close')?.click();
+    fixture.detectChanges();
+
+    expect(host.querySelector('[role="dialog"]')).toBeNull();
+  });
+});

package/src/popover/index.js

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

package/src/popover/index.js.map

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

package/src/popover/index.ts

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

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

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<<%= classify(name) %>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [<%= classify(name) %>] }).compileComponents();
+    fixture = TestBed.createComponent(<%= classify(name) %>);
+    fixture.detectChanges();
+  });
+
+  function radios(): HTMLElement[] {
+    return Array.from(fixture.nativeElement.querySelectorAll('[role="radio"]'));
+  }
+
+  it('renders a labelled radiogroup with one selected item', () => {
+    const group = fixture.nativeElement.querySelector('[role="radiogroup"]');
+    const [monthly, yearly] = radios();
+
+    expect(group.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(monthly.textContent?.trim()).toBe('Monthly');
+    expect(monthly.getAttribute('aria-checked')).toBe('true');
+    expect(monthly.tabIndex).toBe(0);
+    expect(yearly.getAttribute('aria-checked')).toBe('false');
+    expect(yearly.tabIndex).toBe(-1);
+  });
+
+  it('selects an option on click', () => {
+    const [, yearly] = radios();
+    yearly.click();
+    fixture.detectChanges();
+
+    expect(yearly.getAttribute('aria-checked')).toBe('true');
+    expect(yearly.tabIndex).toBe(0);
+  });
+
+  it('moves focus and selection with arrow keys', () => {
+    const [monthly, yearly] = radios();
+    monthly.focus();
+    monthly.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(yearly);
+    expect(yearly.getAttribute('aria-checked')).toBe('true');
+  });
+});

package/src/radio-group/index.js

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

package/src/radio-group/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,qBAAqB,EAAE,KAAK,EAAE,CAAC,CAAC"}

package/src/radio-group/index.ts

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

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

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%= classify(name) %> } from './<%= dasherize(name) %>';
+
+@Component({
+  imports: [<%= classify(name) %>],
+  template: `
+    <<%= selector %>
+      label="Area"
+      hint="Choose a team."
+      errorMessage="Area is required."
+      [required]="true"
+      [(value)]="area"
+    />
+  `,
+})
+class HostComponent {
+  area = '';
+}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [HostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+  });
+
+  function select(): HTMLSelectElement {
+    return fixture.nativeElement.querySelector('select');
+  }
+
+  it('wires native select semantics with hint and error', () => {
+    const label = fixture.nativeElement.querySelector('label');
+    const hint = fixture.nativeElement.querySelector('.semmet-select__hint');
+    const error = fixture.nativeElement.querySelector('.semmet-select__error');
+
+    expect(label.textContent).toContain('Area');
+    expect(label.getAttribute('for')).toBe(select().id);
+    expect(select().required).toBe(true);
+    expect(select().getAttribute('aria-invalid')).toBe('true');
+    expect(select().getAttribute('aria-describedby')).toContain(hint.id);
+    expect(select().getAttribute('aria-describedby')).toContain(error.id);
+  });
+
+  it('updates the bound value on change', () => {
+    select().value = 'engineering';
+    select().dispatchEvent(new Event('change', { bubbles: true }));
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.area).toBe('engineering');
+  });
+});

package/src/select/index.js

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

package/src/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,MAAM,GAAG,IAAA,iDAA4B,GAAE,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,CAAC,CAAC"}

package/src/select/index.ts

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

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

@@ -0,0 +1,61 @@
+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 %> />`,
+})
+class HostComponent {}
+
+describe('<%= classify(name) %>', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement as HTMLElement;
+  });
+
+  it('renders slider semantics with label and value bounds', () => {
+    const slider = host.querySelector<HTMLElement>('[role="slider"]');
+
+    expect(slider).toBeTruthy();
+    expect(slider?.getAttribute('aria-labelledby')).toBeTruthy();
+    expect(slider?.getAttribute('aria-valuemin')).toBe('0');
+    expect(slider?.getAttribute('aria-valuemax')).toBe('100');
+    expect(slider?.getAttribute('aria-valuenow')).toBe('50');
+  });
+
+  it('updates value with keyboard commands and clamps to bounds', () => {
+    const sliderDebug = fixture.debugElement.query(By.css('[role="slider"]'));
+    const slider = sliderDebug.nativeElement as HTMLElement;
+
+    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    fixture.detectChanges();
+    expect(slider.getAttribute('aria-valuenow')).toBe('51');
+
+    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'PageDown' }));
+    fixture.detectChanges();
+    expect(slider.getAttribute('aria-valuenow')).toBe('41');
+
+    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'Home' }));
+    fixture.detectChanges();
+    expect(slider.getAttribute('aria-valuenow')).toBe('0');
+
+    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+    fixture.detectChanges();
+    expect(slider.getAttribute('aria-valuenow')).toBe('0');
+
+    sliderDebug.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'End' }));
+    fixture.detectChanges();
+    expect(slider.getAttribute('aria-valuenow')).toBe('100');
+  });
+});

package/src/slider/index.js

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

package/src/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAE9D,QAAA,MAAM,GAAG,IAAA,iDAA4B,GAAE,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,CAAC,CAAC"}

package/src/slider/index.ts

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