semmet-angular 0.10.0 → 0.12.0

package/src/close-button/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,105 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-surface: #27272a;
+  --semmet-color-on-inverse: #ffffff;
+  --semmet-color-hover: #f4f4f5;
+  --semmet-radius-full: 999px;
+  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
+
+  display: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+.semmet-close-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--semmet-radius-full);
+  color: var(--semmet-color-on-surface);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background-color var(--semmet-motion),
+    color var(--semmet-motion),
+    opacity var(--semmet-motion),
+    transform var(--semmet-motion);
+}
+
+.semmet-close-button--sm {
+  width: 2rem;
+  height: 2rem;
+}
+
+.semmet-close-button--md {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.semmet-close-button--lg {
+  width: 3rem;
+  height: 3rem;
+}
+
+.semmet-close-button--default:hover:not(:disabled),
+.semmet-close-button--subtle {
+  background: var(--semmet-color-hover);
+}
+
+.semmet-close-button--inverse {
+  color: var(--semmet-color-on-inverse);
+}
+
+.semmet-close-button--inverse:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.semmet-close-button:hover:not(:disabled) {
+  transform: scale(1.04);
+}
+
+.semmet-close-button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.semmet-close-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.semmet-close-button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+.semmet-close-button__icon,
+.semmet-close-button__icon::before,
+.semmet-close-button__icon::after {
+  display: block;
+  width: 1em;
+  height: 0.125em;
+}
+
+.semmet-close-button__icon {
+  position: relative;
+  font-size: 1rem;
+}
+
+.semmet-close-button__icon::before,
+.semmet-close-button__icon::after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-radius: 999px;
+  background: currentColor;
+  content: '';
+}
+
+.semmet-close-button__icon::before {
+  transform: rotate(45deg);
+}
+
+.semmet-close-button__icon::after {
+  transform: rotate(-45deg);
+}

package/src/close-button/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,11 @@
+<!-- Semmet Angular: Close Button - native button with a required accessible name. -->
+<button
+  type="button"
+  [id]="instanceId"
+  [class]="buttonClasses()"
+  [disabled]="disabled()"
+  [attr.aria-label]="label()"
+  (click)="handleClick($event)"
+>
+  <span class="semmet-close-button__icon" aria-hidden="true"></span>
+</button>

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

@@ -0,0 +1,38 @@
+import { Component, booleanAttribute, computed, input, output } from '@angular/core';
+
+type <%= classify(name) %>Variant = 'default' | 'subtle' | 'inverse';
+type <%= classify(name) %>Size = 'sm' | 'md' | 'lg';
+
+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++}`;
+
+  readonly label = input('Close');
+  readonly variant = input<<%= classify(name) %>Variant>('default');
+  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly buttonClick = output<MouseEvent>();
+
+  protected readonly buttonClasses = computed(() => [
+    'semmet-close-button',
+    `semmet-close-button--${this.variant()}`,
+    `semmet-close-button--${this.size()}`,
+  ].join(' '));
+
+  protected handleClick(event: MouseEvent): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    this.buttonClick.emit(event);
+  }
+}

package/src/close-button/index.d.ts

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

package/src/close-button/index.js

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

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

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

package/src/close-button/index.ts

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

package/src/close-button/schema.d.ts

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

package/src/close-button/schema.js

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

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

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

package/src/close-button/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularCloseButton",
+  "title": "Semmet Angular Close Button Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Close Button component with a native button and accessible label.",
+  "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 close button 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/close-button/schema.ts

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

package/src/collection.json

@@ -41,6 +41,36 @@
       "factory": "./button/index#button",
       "schema": "./button/schema.json"
     },
+    "badge": {
+      "description": "Generates a standalone Angular Badge component for accessible status labels, counters, and compact metadata.",
+      "factory": "./badge/index#badge",
+      "schema": "./badge/schema.json"
+    },
+    "close-button": {
+      "description": "Generates a standalone Angular Close Button component with a native button and accessible label.",
+      "factory": "./close-button/index#closeButton",
+      "schema": "./close-button/schema.json"
+    },
+    "offcanvas": {
+      "description": "Generates a standalone Angular Offcanvas component using modal dialog semantics, focus trap, Escape close, and focus restoration.",
+      "factory": "./offcanvas/index#offcanvas",
+      "schema": "./offcanvas/schema.json"
+    },
+    "popover": {
+      "description": "Generates a standalone Angular Popover component with a disclosure trigger, non-modal dialog semantics, Escape close, and outside-click dismissal.",
+      "factory": "./popover/index#popover",
+      "schema": "./popover/schema.json"
+    },
+    "spinner": {
+      "description": "Generates a standalone Angular Spinner component with status semantics and reduced-motion support.",
+      "factory": "./spinner/index#spinner",
+      "schema": "./spinner/schema.json"
+    },
+    "button-group": {
+      "description": "Generates a standalone Angular Button Group component with grouped native buttons and optional toggle state.",
+      "factory": "./button-group/index#buttonGroup",
+      "schema": "./button-group/schema.json"
+    },
     "combobox": {
       "description": "Generates a standalone Angular Combobox component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./combobox/index#combobox",
@@ -56,6 +86,11 @@
       "factory": "./navigation-menu/index#navigationMenu",
       "schema": "./navigation-menu/schema.json"
     },
+    "navbar": {
+      "description": "Generates a standalone Angular Navbar component with semantic navigation, responsive disclosure toggle, and current-page state.",
+      "factory": "./navbar/index#navbar",
+      "schema": "./navbar/schema.json"
+    },
     "pagination": {
       "description": "Generates a standalone Angular Pagination component with working page state.",
       "factory": "./pagination/index#pagination",
@@ -101,6 +136,16 @@
       "factory": "./input/index#input",
       "schema": "./input/schema.json"
     },
+    "select": {
+      "description": "Generates a standalone Angular Select component using native select semantics, label, hint text, validation message wiring, and signal-based value state.",
+      "factory": "./select/index#select",
+      "schema": "./select/schema.json"
+    },
+    "input-group": {
+      "description": "Generates a standalone Angular Input Group component with a native input, prefix/suffix text, optional action button, and accessible descriptions.",
+      "factory": "./input-group/index#inputGroup",
+      "schema": "./input-group/schema.json"
+    },
     "textarea": {
       "description": "Generates a standalone Angular Textarea component with native textarea semantics, label, hint text, validation message wiring, and signal-based value state.",
       "factory": "./textarea/index#textarea",
@@ -126,6 +171,11 @@
       "factory": "./listbox/index#listbox",
       "schema": "./listbox/schema.json"
     },
+    "list-group": {
+      "description": "Generates a standalone Angular List Group component with semantic list structure, active state, optional badges, and action items.",
+      "factory": "./list-group/index#listGroup",
+      "schema": "./list-group/schema.json"
+    },
     "slider": {
       "description": "Generates a standalone Angular Slider component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./slider/index#slider",

package/src/input-group/files/__name@dasherize__/__name@dasherize__.css.template

@@ -0,0 +1,119 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-surface-muted: #f4f4f5;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #27272a;
+  --semmet-color-on-surface-variant: #71717a;
+  --semmet-color-danger: #b42318;
+  --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;
+}
+
+.semmet-input-group__label {
+  display: inline-block;
+  margin-block-end: 0.5rem;
+  color: var(--semmet-color-on-surface);
+  font-weight: 650;
+}
+
+.semmet-input-group__required {
+  color: var(--semmet-color-danger);
+}
+
+.semmet-input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-height: 2.75rem;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  overflow: hidden;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    opacity var(--semmet-motion);
+}
+
+.semmet-input-group:focus-within {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+.semmet-input-group--invalid {
+  border-color: var(--semmet-color-danger);
+}
+
+.semmet-input-group--disabled {
+  opacity: 0.58;
+}
+
+.semmet-input-group__addon,
+.semmet-input-group__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.875rem;
+  white-space: nowrap;
+}
+
+.semmet-input-group__addon {
+  color: var(--semmet-color-on-surface-variant);
+  background: var(--semmet-color-surface-muted);
+  border-inline-end: 1px solid var(--semmet-color-outline);
+}
+
+.semmet-input-group__control + .semmet-input-group__addon {
+  border-inline-start: 1px solid var(--semmet-color-outline);
+  border-inline-end: 0;
+}
+
+.semmet-input-group__control {
+  min-width: 0;
+  flex: 1 1 auto;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  padding: 0.625rem 0.875rem;
+}
+
+.semmet-input-group__control:focus {
+  outline: 0;
+}
+
+.semmet-input-group__button {
+  border: 0;
+  border-inline-start: 1px solid var(--semmet-color-outline);
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  font: inherit;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.semmet-input-group__button:disabled {
+  cursor: not-allowed;
+}
+
+.semmet-input-group__hint,
+.semmet-input-group__error {
+  margin: 0.375rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.semmet-input-group__hint {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-input-group__error {
+  color: var(--semmet-color-danger);
+}

package/src/input-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -0,0 +1,51 @@
+<!-- Semmet Angular: Input Group - native input with addon text announced through aria-describedby. -->
+<label class="semmet-input-group__label" [for]="instanceId">
+  {{ label() }}
+  @if (required()) {
+    <span class="semmet-input-group__required" aria-hidden="true">*</span>
+  }
+</label>
+<div
+  class="semmet-input-group"
+  [class.semmet-input-group--invalid]="hasError()"
+  [class.semmet-input-group--disabled]="disabled()"
+>
+  @if (hasPrefix()) {
+    <span class="semmet-input-group__addon" [id]="instanceId + '-prefix'">
+      {{ prefix() }}
+    </span>
+  }
+  <input
+    [id]="instanceId"
+    class="semmet-input-group__control"
+    [type]="type()"
+    [value]="value()"
+    [placeholder]="placeholder()"
+    [required]="required()"
+    [disabled]="disabled()"
+    [attr.aria-describedby]="describedBy()"
+    [attr.aria-invalid]="hasError()"
+    (input)="handleInput($event)"
+  />
+  @if (hasSuffix()) {
+    <span class="semmet-input-group__addon" [id]="instanceId + '-suffix'">
+      {{ suffix() }}
+    </span>
+  }
+  @if (hasAction()) {
+    <button
+      type="button"
+      class="semmet-input-group__button"
+      [disabled]="disabled()"
+      (click)="handleButtonClick($event)"
+    >
+      {{ buttonLabel() }}
+    </button>
+  }
+</div>
+@if (hint()) {
+  <p class="semmet-input-group__hint" [id]="instanceId + '-hint'">{{ hint() }}</p>
+}
+@if (hasError()) {
+  <p class="semmet-input-group__error" [id]="instanceId + '-error'">{{ errorMessage() }}</p>
+}

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

@@ -0,0 +1,64 @@
+import { Component, booleanAttribute, computed, input, model, output } from '@angular/core';
+
+type <%= classify(name) %>InputType = 'text' | 'email' | 'search' | 'tel' | 'url';
+
+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++}`;
+
+  readonly label = input('Website');
+  readonly type = input<<%= classify(name) %>InputType>('url');
+  readonly placeholder = input('example');
+  readonly prefix = input('https://');
+  readonly suffix = input('.com');
+  readonly buttonLabel = input('Apply');
+  readonly hint = input('Use a short, memorable address.');
+  readonly errorMessage = input('');
+  readonly required = input(false, { transform: booleanAttribute });
+  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly value = model('');
+  readonly buttonClick = output<MouseEvent>();
+
+  protected readonly hasPrefix = computed(() => this.prefix().trim().length > 0);
+  protected readonly hasSuffix = computed(() => this.suffix().trim().length > 0);
+  protected readonly hasAction = computed(() => this.buttonLabel().trim().length > 0);
+  protected readonly hasError = computed(() => this.errorMessage().trim().length > 0);
+
+  protected readonly describedBy = computed(() => {
+    const ids: string[] = [];
+    if (this.hasPrefix()) {
+      ids.push(`${this.instanceId}-prefix`);
+    }
+    if (this.hasSuffix()) {
+      ids.push(`${this.instanceId}-suffix`);
+    }
+    if (this.hint().trim().length > 0) {
+      ids.push(`${this.instanceId}-hint`);
+    }
+    if (this.hasError()) {
+      ids.push(`${this.instanceId}-error`);
+    }
+    return ids.length > 0 ? ids.join(' ') : null;
+  });
+
+  protected handleInput(event: Event): void {
+    this.value.set((event.target as HTMLInputElement).value);
+  }
+
+  protected handleButtonClick(event: MouseEvent): void {
+    if (this.disabled()) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    this.buttonClick.emit(event);
+  }
+}

package/src/input-group/index.d.ts

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

package/src/input-group/index.js

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

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

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

package/src/input-group/index.ts

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

package/src/input-group/schema.d.ts

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

package/src/input-group/schema.js

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

package/src/input-group/schema.js.map

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

package/src/input-group/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularInputGroup",
+  "title": "Semmet Angular Input Group Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Input Group component with a native input, prefix/suffix text, optional action button, and accessible descriptions.",
+  "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 input group 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/input-group/schema.ts

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