semmet-angular 0.4.0 → 0.5.0

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

@@ -0,0 +1,49 @@
+: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-md: 12px;
+  --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
+
+  display: block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+article {
+  padding: 1.25rem;
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-1);
+}
+
+h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1.0625rem;
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+p {
+  margin: 0 0 1rem;
+  color: var(--semmet-color-on-surface-variant);
+}
+
+a {
+  color: var(--semmet-color-primary);
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,6 @@
+<!-- Semmet Angular: Card — https://www.w3.org/WAI/tutorials/page-structure/headings/ -->
+<article [attr.aria-labelledby]="instanceId + '-title'">
+  <h3 [id]="instanceId + '-title'">Card title</h3>
+  <p>Card description text.</p>
+  <a href="#">Learn more</a>
+</article>

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+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++}`;
+}

package/src/card/index.d.ts

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

package/src/card/index.js

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

package/src/card/index.js.map

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

package/src/card/index.ts

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

package/src/card/schema.d.ts

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

package/src/card/schema.js

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

package/src/card/schema.js.map

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

package/src/card/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularCard",
+  "title": "Semmet Angular Card Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Card component (semantic article + heading structure).",
+  "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 card 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/card/schema.ts

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

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

@@ -0,0 +1,58 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d7dedd;
+  --semmet-color-on-surface: #1b201f;
+  --semmet-radius-md: 12px;
+  --semmet-elevation-1: 0 1px 2px rgba(20, 24, 23, 0.1), 0 1px 1px rgba(20, 24, 23, 0.06);
+  --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;
+}
+
+section {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+[aria-live] {
+  flex: 1;
+  min-height: 8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-md);
+  box-shadow: var(--semmet-elevation-1);
+  text-align: center;
+}
+
+button {
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: 1.25rem;
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color var(--semmet-motion);
+}
+
+button:hover {
+  background: color-mix(in srgb, var(--semmet-color-primary) 88%, black);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,10 @@
+<!-- Semmet Angular: Carousel — https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ -->
+<section aria-roledescription="carousel" aria-label="Featured items">
+  <div aria-live="polite">
+    <div aria-roledescription="slide" [attr.aria-label]="slideLabel()">
+      {{ activeSlide().content }}
+    </div>
+  </div>
+  <button type="button" (click)="previous()" aria-label="Previous slide">‹</button>
+  <button type="button" (click)="next()" aria-label="Next slide">›</button>
+</section>

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

@@ -0,0 +1,35 @@
+import { Component, computed, signal } from '@angular/core';
+
+interface <%= classify(name) %>Slide {
+  id: number;
+  content: 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 slides: <%= classify(name) %>Slide[] = [
+    { id: 1, content: 'First slide content' },
+    { id: 2, content: 'Second slide content' },
+  ];
+
+  protected readonly activeIndex = signal(0);
+
+  protected readonly activeSlide = computed(() => this.slides[this.activeIndex()]);
+  protected readonly slideLabel = computed(() => `${this.activeIndex() + 1} of ${this.slides.length}`);
+
+  protected previous(): void {
+    this.activeIndex.update((index) => (index - 1 + this.slides.length) % this.slides.length);
+  }
+
+  protected next(): void {
+    this.activeIndex.update((index) => (index + 1) % this.slides.length);
+  }
+}

package/src/carousel/index.d.ts

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

package/src/carousel/index.js

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

package/src/carousel/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/carousel/index.ts

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

package/src/carousel/schema.d.ts

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

package/src/carousel/schema.js

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

package/src/carousel/schema.js.map

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

package/src/carousel/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularCarousel",
+  "title": "Semmet Angular Carousel Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Carousel component (signal-based slide state) 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 carousel 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/carousel/schema.ts

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

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

@@ -0,0 +1,62 @@
+:host {
+  --semmet-color-primary: #0d7a72;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-outline: #8a9793;
+  --semmet-color-on-surface: #1b201f;
+  --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='checkbox'] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-left: 1.625rem;
+  min-height: 1.125rem;
+  color: var(--semmet-color-on-surface);
+  cursor: pointer;
+  user-select: none;
+}
+
+[role='checkbox']::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  border: 2px solid var(--semmet-color-outline);
+  border-radius: 4px;
+  background: transparent;
+  transition: background-color var(--semmet-motion), border-color var(--semmet-motion);
+}
+
+[role='checkbox'][aria-checked='true']::before {
+  background: var(--semmet-color-primary);
+  border-color: var(--semmet-color-primary);
+}
+
+[role='checkbox']::after {
+  content: '';
+  position: absolute;
+  left: 0.3rem;
+  top: 0.1rem;
+  width: 0.4rem;
+  height: 0.65rem;
+  border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+  transform: rotate(45deg);
+}
+
+[role='checkbox'][aria-checked='true']::after {
+  border-color: var(--semmet-color-on-primary);
+}
+
+[role='checkbox']:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,11 @@
+<!-- Semmet Angular: Checkbox — https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ -->
+<div
+  role="checkbox"
+  [attr.aria-checked]="checked()"
+  tabindex="0"
+  [id]="instanceId"
+  (click)="toggle()"
+  (keydown)="handleKeydown($event)"
+>
+  Subscribe to newsletter
+</div>

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

@@ -0,0 +1,25 @@
+import { Component, signal } from '@angular/core';
+
+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 checked = signal(false);
+
+  protected toggle(): void {
+    this.checked.update((value) => !value);
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+}

package/src/checkbox/index.d.ts

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

package/src/checkbox/index.js

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

package/src/checkbox/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/checkbox/index.ts

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

package/src/checkbox/schema.d.ts

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

package/src/checkbox/schema.js

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

package/src/checkbox/schema.js.map

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

package/src/checkbox/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularCheckbox",
+  "title": "Semmet Angular Checkbox Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Checkbox component (custom widget, signal-based state) 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 checkbox 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/checkbox/schema.ts

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

package/src/collection.json

@@ -16,6 +16,11 @@
       "factory": "./dialog/index#dialog",
       "schema": "./dialog/schema.json"
     },
+    "alert-dialog": {
+      "description": "Generates a standalone Angular Alert Dialog component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./alert-dialog/index#alertDialog",
+      "schema": "./alert-dialog/schema.json"
+    },
     "disclosure": {
       "description": "Generates a standalone Angular Disclosure component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./disclosure/index#disclosure",
@@ -25,6 +30,116 @@
       "description": "Generates a standalone Angular Tooltip component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./tooltip/index#tooltip",
       "schema": "./tooltip/schema.json"
+    },
+    "menu-button": {
+      "description": "Generates a standalone Angular Menu Button (dropdown) component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./menu-button/index#menuButton",
+      "schema": "./menu-button/schema.json"
+    },
+    "combobox": {
+      "description": "Generates a standalone Angular Combobox component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./combobox/index#combobox",
+      "schema": "./combobox/schema.json"
+    },
+    "breadcrumb": {
+      "description": "Generates a standalone Angular Breadcrumb component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./breadcrumb/index#breadcrumb",
+      "schema": "./breadcrumb/schema.json"
+    },
+    "navigation-menu": {
+      "description": "Generates a standalone Angular disclosure-style navigation menu component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./navigation-menu/index#navigationMenu",
+      "schema": "./navigation-menu/schema.json"
+    },
+    "pagination": {
+      "description": "Generates a standalone Angular Pagination component with working page state.",
+      "factory": "./pagination/index#pagination",
+      "schema": "./pagination/schema.json"
+    },
+    "skip-link": {
+      "description": "Generates a standalone Angular Skip Link component per WCAG Technique G1.",
+      "factory": "./skip-link/index#skipLink",
+      "schema": "./skip-link/schema.json"
+    },
+    "landmarks": {
+      "description": "Generates a standalone Angular page-skeleton layout component with landmark regions and content projection.",
+      "factory": "./landmarks/index#landmarks",
+      "schema": "./landmarks/schema.json"
+    },
+    "tree-view": {
+      "description": "Generates a standalone Angular Tree View component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./tree-view/index#treeView",
+      "schema": "./tree-view/schema.json"
+    },
+    "toolbar": {
+      "description": "Generates a standalone Angular Toolbar component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./toolbar/index#toolbar",
+      "schema": "./toolbar/schema.json"
+    },
+    "card": {
+      "description": "Generates a standalone Angular Card component (semantic article + heading structure).",
+      "factory": "./card/index#card",
+      "schema": "./card/schema.json"
+    },
+    "table": {
+      "description": "Generates a standalone Angular accessible data table component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./table/index#table",
+      "schema": "./table/schema.json"
+    },
+    "checkbox": {
+      "description": "Generates a standalone Angular Checkbox component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./checkbox/index#checkbox",
+      "schema": "./checkbox/schema.json"
+    },
+    "radio-group": {
+      "description": "Generates a standalone Angular Radio Group component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./radio-group/index#radioGroup",
+      "schema": "./radio-group/schema.json"
+    },
+    "switch": {
+      "description": "Generates a standalone Angular Switch component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./switch/index#switchSchematic",
+      "schema": "./switch/schema.json"
+    },
+    "listbox": {
+      "description": "Generates a standalone Angular Listbox component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./listbox/index#listbox",
+      "schema": "./listbox/schema.json"
+    },
+    "slider": {
+      "description": "Generates a standalone Angular Slider component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./slider/index#slider",
+      "schema": "./slider/schema.json"
+    },
+    "spinbutton": {
+      "description": "Generates a standalone Angular Spinbutton component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./spinbutton/index#spinbutton",
+      "schema": "./spinbutton/schema.json"
+    },
+    "meter": {
+      "description": "Generates a standalone Angular Meter component (native <meter> gauge).",
+      "factory": "./meter/index#meter",
+      "schema": "./meter/schema.json"
+    },
+    "progress-bar": {
+      "description": "Generates a standalone Angular Progress Bar component (native <progress>).",
+      "factory": "./progress-bar/index#progressBar",
+      "schema": "./progress-bar/schema.json"
+    },
+    "alert": {
+      "description": "Generates a standalone Angular Alert component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./alert/index#alert",
+      "schema": "./alert/schema.json"
+    },
+    "toast": {
+      "description": "Generates a standalone Angular Toast/Notification component.",
+      "factory": "./toast/index#toast",
+      "schema": "./toast/schema.json"
+    },
+    "carousel": {
+      "description": "Generates a standalone Angular Carousel component following the W3C ARIA Authoring Practices Guide.",
+      "factory": "./carousel/index#carousel",
+      "schema": "./carousel/schema.json"
     }
   }
 }