semmet-angular 0.3.0 → 0.5.0

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

@@ -0,0 +1,75 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+  --semmet-radius-sm: 8px;
+  --semmet-radius-md: 12px;
+  --semmet-elevation-3: 0 8px 24px rgba(20, 24, 23, 0.18), 0 2px 8px rgba(20, 24, 23, 0.1);
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  position: relative;
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.375rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+input {
+  width: 100%;
+  min-width: 14rem;
+  font: inherit;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 0.75rem;
+  box-sizing: border-box;
+  transition: border-color var(--semmet-motion);
+}
+
+input:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 1px;
+  border-color: var(--semmet-color-primary);
+}
+
+ul {
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: 0.25rem 0 0;
+  padding: 0.375rem;
+  list-style: none;
+  background: var(--semmet-color-surface);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-3);
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+[role='option'] {
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  color: var(--semmet-color-on-surface);
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+[role='option'][aria-selected='true'] {
+  background: color-mix(in srgb, var(--semmet-color-primary) 12%, transparent);
+  color: var(--semmet-color-primary);
+}
+
+[role='option']:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+}

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

@@ -0,0 +1,33 @@
+<!-- Semmet Angular: Combobox — https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ -->
+<label [id]="instanceId + '-label'" [for]="instanceId + '-input'">Choose a fruit</label>
+<input
+  type="text"
+  [id]="instanceId + '-input'"
+  role="combobox"
+  [attr.aria-expanded]="isOpen()"
+  [attr.aria-controls]="instanceId + '-listbox'"
+  aria-autocomplete="list"
+  [attr.aria-activedescendant]="activeDescendantId()"
+  [attr.aria-labelledby]="instanceId + '-label'"
+  [value]="query()"
+  (input)="onInput($event)"
+  (keydown)="handleInputKeydown($event)"
+  (focus)="openList()"
+/>
+<ul
+  role="listbox"
+  [id]="instanceId + '-listbox'"
+  [attr.aria-labelledby]="instanceId + '-label'"
+  [hidden]="!isOpen() || filteredItems().length === 0"
+>
+  @for (item of filteredItems(); track item.id; let i = $index) {
+    <li
+      role="option"
+      [id]="instanceId + '-option-' + item.id"
+      [attr.aria-selected]="i === activeIndex()"
+      (click)="select(item)"
+    >
+      {{ item.label }}
+    </li>
+  }
+</ul>

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

@@ -0,0 +1,93 @@
+import { Component, computed, signal } from '@angular/core';
+
+interface <%= classify(name) %>Item {
+  id: number;
+  label: string;
+}
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly items: <%= classify(name) %>Item[] = [
+    { id: 1, label: 'Apple' },
+    { id: 2, label: 'Banana' },
+    { id: 3, label: 'Cherry' },
+  ];
+
+  protected readonly query = signal('');
+  protected readonly isOpen = signal(false);
+  protected readonly activeIndex = signal(-1);
+
+  protected readonly filteredItems = computed(() =>
+    this.items.filter((item) => item.label.toLowerCase().includes(this.query().toLowerCase()))
+  );
+
+  protected readonly activeDescendantId = computed(() => {
+    const active = this.filteredItems()[this.activeIndex()];
+    return active ? `${this.instanceId}-option-${active.id}` : null;
+  });
+
+  protected openList(): void {
+    this.isOpen.set(true);
+  }
+
+  protected onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.query.set(value);
+    this.isOpen.set(true);
+    this.activeIndex.set(-1);
+  }
+
+  protected select(item: <%= classify(name) %>Item): void {
+    this.query.set(item.label);
+    this.isOpen.set(false);
+    this.activeIndex.set(-1);
+  }
+
+  protected handleInputKeydown(event: KeyboardEvent): void {
+    const options = this.filteredItems();
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.isOpen.set(true);
+        this.activeIndex.update((index) => Math.min(index + 1, options.length - 1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.activeIndex.update((index) => Math.max(index - 1, 0));
+        break;
+      case 'Home':
+        if (this.isOpen()) {
+          event.preventDefault();
+          this.activeIndex.set(0);
+        }
+        break;
+      case 'End':
+        if (this.isOpen()) {
+          event.preventDefault();
+          this.activeIndex.set(options.length - 1);
+        }
+        break;
+      case 'Enter': {
+        const active = options[this.activeIndex()];
+        if (active) {
+          event.preventDefault();
+          this.select(active);
+        }
+        break;
+      }
+      case 'Escape':
+        this.isOpen.set(false);
+        this.activeIndex.set(-1);
+        break;
+    }
+  }
+}

package/src/combobox/index.d.ts

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

package/src/combobox/index.js

@@ -0,0 +1,6 @@
+"use strict";
+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)();
+//# sourceMappingURL=index.js.map

package/src/combobox/index.js.map

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

package/src/combobox/index.ts

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

package/src/combobox/schema.d.ts

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

package/src/combobox/schema.js

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

package/src/combobox/schema.js.map

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

package/src/combobox/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularCombobox",
+  "title": "Semmet Angular Combobox Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Combobox component (list autocomplete, active-descendant model) following the W3C ARIA Authoring Practices Guide.",
+  "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 combobox component?"
+    },
+    "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/combobox/schema.ts

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

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

@@ -0,0 +1,61 @@
+:host {
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-color-on-surface-variant: #576260;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  color: var(--semmet-color-on-surface);
+}
+
+header,
+nav,
+footer {
+  padding: 1rem 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 {
+  min-height: 12rem;
+}
+
+@media (min-width: 48rem) {
+  :host {
+    grid-template-columns: 1fr 16rem;
+    grid-template-areas:
+      'header header'
+      'nav nav'
+      'main aside'
+      'footer footer';
+  }
+
+  header {
+    grid-area: header;
+  }
+
+  nav {
+    grid-area: nav;
+  }
+
+  main {
+    grid-area: main;
+  }
+
+  aside {
+    grid-area: aside;
+  }
+
+  footer {
+    grid-area: footer;
+  }
+}

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

@@ -0,0 +1,17 @@
+<!-- Semmet Angular: Landmarks (Page Skeleton) — https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/ -->
+<!-- Project content into a region with the matching attribute, e.g. <div header>...</div>. Unmatched content goes to <main>. -->
+<header>
+  <ng-content select="[header]"></ng-content>
+</header>
+<nav aria-label="Main">
+  <ng-content select="[nav]"></ng-content>
+</nav>
+<main>
+  <ng-content></ng-content>
+</main>
+<aside aria-label="Related links">
+  <ng-content select="[aside]"></ng-content>
+</aside>
+<footer>
+  <ng-content select="[footer]"></ng-content>
+</footer>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {}

package/src/landmarks/index.d.ts

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

package/src/landmarks/index.js

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

package/src/landmarks/index.js.map

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

package/src/landmarks/index.ts

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

package/src/landmarks/schema.d.ts

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

package/src/landmarks/schema.js

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

package/src/landmarks/schema.js.map

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

package/src/landmarks/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularLandmarks",
+  "title": "Semmet Angular Landmarks Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular page-skeleton layout component (header/nav/main/aside/footer landmarks with content projection), following W3C ARIA landmark region guidance.",
+  "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 layout component?"
+    },
+    "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/landmarks/schema.ts

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

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

@@ -0,0 +1,52 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-radius-sm: 8px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+span {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+ul {
+  margin: 0;
+  padding: 0.375rem;
+  list-style: none;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  background: var(--semmet-color-surface);
+  max-width: 16rem;
+}
+
+ul:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 1px;
+}
+
+[role='option'] {
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  color: var(--semmet-color-on-surface);
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+[role='option'][aria-selected='true'] {
+  background: color-mix(in srgb, var(--semmet-color-primary) 12%, transparent);
+  color: var(--semmet-color-primary);
+  font-weight: 500;
+}
+
+[role='option']:hover {
+  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
+}

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

@@ -0,0 +1,20 @@
+<!-- Semmet Angular: Listbox — https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ -->
+<span [id]="instanceId + '-label'">Choose an option</span>
+<ul
+  role="listbox"
+  [attr.aria-labelledby]="instanceId + '-label'"
+  [attr.aria-activedescendant]="activeDescendantId()"
+  tabindex="0"
+  (keydown)="navigateList($event)"
+>
+  @for (option of options; track option.id; let i = $index) {
+    <li
+      role="option"
+      [id]="instanceId + '-option-' + option.id"
+      [attr.aria-selected]="i === activeIndex()"
+      (click)="select(i)"
+    >
+      {{ option.label }}
+    </li>
+  }
+</ul>

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

@@ -0,0 +1,54 @@
+import { Component, computed, signal } from '@angular/core';
+
+interface <%= classify(name) %>Option {
+  id: number;
+  label: string;
+}
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly options: <%= classify(name) %>Option[] = [
+    { id: 1, label: 'First option' },
+    { id: 2, label: 'Second option' },
+  ];
+
+  protected readonly activeIndex = signal(0);
+
+  protected readonly activeDescendantId = computed(
+    () => `${this.instanceId}-option-${this.options[this.activeIndex()].id}`
+  );
+
+  protected select(index: number): void {
+    this.activeIndex.set(index);
+  }
+
+  // Up/Down move the active option; Home/End jump to first/last (APG listbox, active-descendant model).
+  protected navigateList(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.activeIndex.update((index) => Math.min(index + 1, this.options.length - 1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.activeIndex.update((index) => Math.max(index - 1, 0));
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.activeIndex.set(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        this.activeIndex.set(this.options.length - 1);
+        break;
+    }
+  }
+}

package/src/listbox/index.d.ts

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

package/src/listbox/index.js

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

package/src/listbox/index.js.map

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

package/src/listbox/index.ts

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

package/src/listbox/schema.d.ts

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

package/src/listbox/schema.js

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

package/src/listbox/schema.js.map

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

package/src/listbox/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularListbox",
+  "title": "Semmet Angular Listbox Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Listbox component (active-descendant model) following the W3C ARIA Authoring Practices Guide.",
+  "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 listbox component?"
+    },
+    "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/listbox/schema.ts

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