semmet-angular 0.8.0 → 0.9.0

package/README.md

@@ -79,7 +79,7 @@ The same pattern applies to `tabs`, `carousel`, and `disclosure`:
 
 By default, projected panel/slide content is preserved after its first render. Set `[preserveContent]="false"` on the generated container to destroy inactive content when it closes or becomes inactive.
 
-## Schematics (28)
+## Schematics (32)
 
 **Overlays & disclosure**
 
@@ -91,6 +91,7 @@ By default, projected panel/slide content is preserved after its first render. S
 | `ng generate semmet-angular:alert-dialog <name>` | [Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) | Same focus trap as Dialog; initial focus on the least destructive action (Cancel) |
 | `ng generate semmet-angular:tooltip <name>` | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) | Shows on hover **and** focus (required for keyboard users); hides on blur/mouseleave/Escape |
 | `ng generate semmet-angular:menu-button <name>` | [Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) | Up/Down/Home/End/Escape inside the menu; closes on outside click; focus returns to the trigger |
+| `ng generate semmet-angular:button <name>` | Button | Native `<button>` with variant, size, disabled, busy, and optional pressed state |
 
 **Navigation & structure**
 
@@ -111,6 +112,9 @@ By default, projected panel/slide content is preserved after its first render. S
 
 | Command | Generates | Keyboard/focus behavior implemented |
 |---|---|---|
+| `ng generate semmet-angular:form <name>` | Form | Native `<form>` with labeled controls, inline validation, and status messaging |
+| `ng generate semmet-angular:input <name>` | Input | Native `<input>` with label, hint, validation message wiring, and signal-backed value |
+| `ng generate semmet-angular:textarea <name>` | Textarea | Native `<textarea>` with label, hint, counter, validation message wiring, and signal-backed value |
 | `ng generate semmet-angular:checkbox <name>` | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) | Click/Enter/Space toggle |
 | `ng generate semmet-angular:radio-group <name>` | [Radio Group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) | Up/Down/Left/Right/Home/End move focus and selection together |
 | `ng generate semmet-angular:switch <name>` | [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) | Native `<button>` — Click/Enter/Space toggle |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
   "publisher": "danilodevsilva",
   "license": "MIT",

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

@@ -0,0 +1,115 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-danger: #b42318;
+  --semmet-color-on-danger: #ffffff;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-radius-sm: 8px;
+  --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: inline-block;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+.semmet-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-width: 2.75rem;
+  border: 1px solid transparent;
+  border-radius: var(--semmet-radius-sm);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.2;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  box-shadow: var(--semmet-elevation-1);
+  transition:
+    background-color var(--semmet-motion),
+    border-color var(--semmet-motion),
+    color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    transform var(--semmet-motion);
+}
+
+.semmet-button--sm {
+  min-height: 2rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.semmet-button--md {
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.semmet-button--lg {
+  min-height: 3rem;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+}
+
+.semmet-button--primary {
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+}
+
+.semmet-button--secondary {
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  border-color: var(--semmet-color-outline);
+}
+
+.semmet-button--danger {
+  color: var(--semmet-color-on-danger);
+  background: var(--semmet-color-danger);
+}
+
+.semmet-button--ghost {
+  color: var(--semmet-color-on-surface);
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.semmet-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.semmet-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.semmet-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+  box-shadow: none;
+}
+
+.semmet-button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+.semmet-button__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: semmet-button-spin 700ms linear infinite;
+}
+
+@keyframes semmet-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,15 @@
+<!-- Semmet Angular: Button - native <button> keeps form, focus, and keyboard semantics. -->
+<button
+  type="button"
+  [id]="instanceId"
+  [class]="buttonClasses()"
+  [disabled]="disabled() || busy()"
+  [attr.aria-busy]="busy() ? 'true' : null"
+  [attr.aria-pressed]="ariaPressed()"
+  (click)="handleClick($event)"
+>
+  @if (busy()) {
+    <span class="semmet-button__spinner" aria-hidden="true"></span>
+  }
+  <span>{{ label() }}</span>
+</button>

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

@@ -0,0 +1,45 @@
+import { Component, computed, input, output } from '@angular/core';
+
+type <%= classify(name) %>Variant = 'primary' | 'secondary' | 'danger' | 'ghost';
+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('Continue');
+  readonly variant = input<<%= classify(name) %>Variant>('primary');
+  readonly size = input<<%= classify(name) %>Size>('md');
+  readonly disabled = input(false);
+  readonly busy = input(false);
+  readonly pressed = input<boolean | null>(null);
+  readonly buttonClick = output<MouseEvent>();
+
+  protected readonly buttonClasses = computed(() => [
+    'semmet-button',
+    `semmet-button--${this.variant()}`,
+    `semmet-button--${this.size()}`,
+  ].join(' '));
+
+  protected readonly ariaPressed = computed(() => {
+    const pressed = this.pressed();
+    return pressed === null ? null : String(pressed);
+  });
+
+  protected handleClick(event: MouseEvent): void {
+    if (this.disabled() || this.busy()) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    this.buttonClick.emit(event);
+  }
+}

package/src/button/index.d.ts

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

package/src/button/index.js

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

package/src/button/index.js.map

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

package/src/button/index.ts

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

package/src/button/schema.d.ts

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

package/src/button/schema.js

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

package/src/button/schema.js.map

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

package/src/button/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularButton",
+  "title": "Semmet Angular Button Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Button component using a native button with variants, sizes, disabled state, busy state, and optional pressed state.",
+  "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 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/button/schema.ts

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

package/src/collection.json

@@ -36,6 +36,11 @@
       "factory": "./menu-button/index#menuButton",
       "schema": "./menu-button/schema.json"
     },
+    "button": {
+      "description": "Generates a standalone Angular Button component using a native button with variants, sizes, disabled state, busy state, and optional pressed state.",
+      "factory": "./button/index#button",
+      "schema": "./button/schema.json"
+    },
     "combobox": {
       "description": "Generates a standalone Angular Combobox component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./combobox/index#combobox",
@@ -86,6 +91,21 @@
       "factory": "./table/index#table",
       "schema": "./table/schema.json"
     },
+    "form": {
+      "description": "Generates a standalone Angular Form component with native form semantics, labeled controls, inline validation messages, submit handling, and signal-based state.",
+      "factory": "./form/index#form",
+      "schema": "./form/schema.json"
+    },
+    "input": {
+      "description": "Generates a standalone Angular Input component with native input semantics, label, hint text, validation message wiring, and signal-based value state.",
+      "factory": "./input/index#input",
+      "schema": "./input/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",
+      "schema": "./textarea/schema.json"
+    },
     "checkbox": {
       "description": "Generates a standalone Angular Checkbox component following the W3C ARIA Authoring Practices Guide.",
       "factory": "./checkbox/index#checkbox",

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

@@ -0,0 +1,122 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-on-primary: #ffffff;
+  --semmet-color-danger: #b42318;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-radius-sm: 8px;
+  --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;
+  max-width: 34rem;
+  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+}
+
+form {
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+  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);
+}
+
+h2 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.semmet-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+label {
+  font-weight: 500;
+}
+
+label span {
+  color: var(--semmet-color-danger);
+}
+
+input,
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion);
+}
+
+input {
+  min-height: 2.5rem;
+}
+
+textarea {
+  min-height: 7rem;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+input[aria-invalid='true'],
+textarea[aria-invalid='true'] {
+  border-color: var(--semmet-color-danger);
+}
+
+input:focus-visible,
+textarea:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 2px;
+}
+
+button {
+  justify-self: start;
+  min-height: 2.5rem;
+  border: 0;
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 1rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--semmet-color-on-primary);
+  background: var(--semmet-color-primary);
+  cursor: pointer;
+  transition:
+    background-color var(--semmet-motion),
+    transform var(--semmet-motion);
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+
+.semmet-hint,
+.semmet-error,
+.semmet-status {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.semmet-hint,
+.semmet-status {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-error {
+  color: var(--semmet-color-danger);
+}

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

@@ -0,0 +1,70 @@
+<!-- Semmet Angular: Form - native form with labels, inline validation, and status messaging. -->
+<form [attr.aria-labelledby]="instanceId + '-title'" (submit)="submit($event)" novalidate>
+  <h2 [id]="instanceId + '-title'">Contact form</h2>
+
+  <div class="semmet-field">
+    <label [for]="instanceId + '-name'">
+      Name
+      <span aria-hidden="true">*</span>
+    </label>
+    <input
+      [id]="instanceId + '-name'"
+      type="text"
+      autocomplete="name"
+      required
+      [value]="form().name"
+      [attr.aria-invalid]="nameError() ? 'true' : null"
+      [attr.aria-describedby]="nameError() ? instanceId + '-name-error' : null"
+      (input)="updateField('name', $event)"
+    />
+    @if (nameError()) {
+      <p class="semmet-error" [id]="instanceId + '-name-error'" role="alert">{{ nameError() }}</p>
+    }
+  </div>
+
+  <div class="semmet-field">
+    <label [for]="instanceId + '-email'">
+      Email
+      <span aria-hidden="true">*</span>
+    </label>
+    <input
+      [id]="instanceId + '-email'"
+      type="email"
+      autocomplete="email"
+      required
+      [value]="form().email"
+      [attr.aria-invalid]="emailError() ? 'true' : null"
+      [attr.aria-describedby]="emailError() ? instanceId + '-email-error' : null"
+      (input)="updateField('email', $event)"
+    />
+    @if (emailError()) {
+      <p class="semmet-error" [id]="instanceId + '-email-error'" role="alert">{{ emailError() }}</p>
+    }
+  </div>
+
+  <div class="semmet-field">
+    <label [for]="instanceId + '-message'">
+      Message
+      <span aria-hidden="true">*</span>
+    </label>
+    <textarea
+      [id]="instanceId + '-message'"
+      rows="4"
+      required
+      [value]="form().message"
+      [attr.aria-invalid]="messageError() ? 'true' : null"
+      [attr.aria-describedby]="messageError() ? instanceId + '-message-error' : instanceId + '-message-hint'"
+      (input)="updateField('message', $event)"
+    ></textarea>
+    <p class="semmet-hint" [id]="instanceId + '-message-hint'">Minimum 10 characters.</p>
+    @if (messageError()) {
+      <p class="semmet-error" [id]="instanceId + '-message-error'" role="alert">{{ messageError() }}</p>
+    }
+  </div>
+
+  <button type="submit">Submit</button>
+
+  @if (statusMessage()) {
+    <p class="semmet-status" role="status">{{ statusMessage() }}</p>
+  }
+</form>

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

@@ -0,0 +1,76 @@
+import { Component, computed, signal } from '@angular/core';
+
+interface <%= classify(name) %>State {
+  name: string;
+  email: string;
+  message: string;
+}
+
+let nextId = 0;
+
+@Component({
+  selector: '<%= selector %>',
+  imports: [],
+  templateUrl: './<%= dasherize(name) %>.html',
+  styleUrl: './<%= dasherize(name) %>.css',
+})
+export class <%= classify(name) %> {
+  private readonly emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  protected readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;
+  protected readonly submitted = signal(false);
+  protected readonly statusMessage = signal('');
+  protected readonly form = signal<<%= classify(name) %>State>({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  protected readonly nameError = computed(() => {
+    if (!this.submitted() || this.form().name.trim()) {
+      return '';
+    }
+
+    return 'Enter your name.';
+  });
+
+  protected readonly emailError = computed(() => {
+    if (!this.submitted()) {
+      return '';
+    }
+
+    const email = this.form().email.trim();
+    if (!email) {
+      return 'Enter your email address.';
+    }
+
+    return this.emailPattern.test(email) ? '' : 'Enter a valid email address.';
+  });
+
+  protected readonly messageError = computed(() => {
+    if (!this.submitted() || this.form().message.trim().length >= 10) {
+      return '';
+    }
+
+    return 'Enter a message with at least 10 characters.';
+  });
+
+  protected readonly isInvalid = computed(() => Boolean(this.nameError() || this.emailError() || this.messageError()));
+
+  protected updateField(field: keyof <%= classify(name) %>State, event: Event): void {
+    const value = (event.target as HTMLInputElement | HTMLTextAreaElement).value;
+    this.form.update((current) => ({ ...current, [field]: value }));
+  }
+
+  protected submit(event: SubmitEvent): void {
+    event.preventDefault();
+    this.submitted.set(true);
+
+    if (this.isInvalid()) {
+      this.statusMessage.set('Check the highlighted fields and try again.');
+      return;
+    }
+
+    this.statusMessage.set('Form is valid and ready to submit.');
+  }
+}

package/src/form/index.d.ts

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

package/src/form/index.js

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

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

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

package/src/form/schema.d.ts

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

package/src/form/schema.js

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

package/src/form/schema.js.map

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

package/src/form/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularForm",
+  "title": "Semmet Angular Form Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Form component with native form semantics, labeled controls, inline validation messages, submit handling, and signal-based state.",
+  "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 form 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/form/schema.ts

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

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

@@ -0,0 +1,80 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-danger: #b42318;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-disabled: #f4f4f5;
+  --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-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+label {
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+label span {
+  color: var(--semmet-color-danger);
+}
+
+input {
+  width: 100%;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    background-color var(--semmet-motion);
+}
+
+input::placeholder {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+input[aria-invalid='true'] {
+  border-color: var(--semmet-color-danger);
+}
+
+input:disabled {
+  color: var(--semmet-color-on-surface-variant);
+  background: var(--semmet-color-disabled);
+  cursor: not-allowed;
+}
+
+input:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 1px;
+  border-color: var(--semmet-color-primary);
+}
+
+.semmet-field__hint,
+.semmet-field__error {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.semmet-field__hint {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-field__error {
+  color: var(--semmet-color-danger);
+}

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

@@ -0,0 +1,32 @@
+<!-- Semmet Angular: Input - native <input> with label, hint, and validation wiring. -->
+<div class="semmet-field">
+  <label [for]="controlId()">
+    {{ label() }}
+    @if (required()) {
+      <span aria-hidden="true">*</span>
+    }
+  </label>
+
+  <input
+    [id]="controlId()"
+    [type]="inputType()"
+    [value]="value()"
+    [placeholder]="placeholder()"
+    [autocomplete]="autocomplete()"
+    [required]="required()"
+    [disabled]="disabled()"
+    [readOnly]="readOnly()"
+    [attr.aria-required]="required() ? 'true' : null"
+    [attr.aria-invalid]="error() ? 'true' : null"
+    [attr.aria-describedby]="describedBy()"
+    (input)="updateValue($event)"
+  />
+
+  @if (hint()) {
+    <p class="semmet-field__hint" [id]="hintId()">{{ hint() }}</p>
+  }
+
+  @if (error()) {
+    <p class="semmet-field__error" [id]="errorId()" role="alert">{{ error() }}</p>
+  }
+</div>

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

@@ -0,0 +1,48 @@
+import { Component, computed, input, model } from '@angular/core';
+
+type <%= classify(name) %>Type = 'text' | 'email' | 'password' | '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('Email address');
+  readonly inputType = input<<%= classify(name) %>Type>('email');
+  readonly placeholder = input('name@example.com');
+  readonly hint = input('Use the email address associated with your account.');
+  readonly error = input('');
+  readonly required = input(false);
+  readonly disabled = input(false);
+  readonly readOnly = input(false);
+  readonly autocomplete = input('email');
+  readonly value = model('');
+
+  protected readonly controlId = computed(() => `${this.instanceId}-control`);
+  protected readonly hintId = computed(() => `${this.instanceId}-hint`);
+  protected readonly errorId = computed(() => `${this.instanceId}-error`);
+
+  protected readonly describedBy = computed(() => {
+    const ids = [];
+
+    if (this.hint()) {
+      ids.push(this.hintId());
+    }
+
+    if (this.error()) {
+      ids.push(this.errorId());
+    }
+
+    return ids.length > 0 ? ids.join(' ') : null;
+  });
+
+  protected updateValue(event: Event): void {
+    this.value.set((event.target as HTMLInputElement).value);
+  }
+}

package/src/input/index.d.ts

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

package/src/input/index.js

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

package/src/input/index.js.map

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

package/src/input/index.ts

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

package/src/input/schema.d.ts

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

package/src/input/schema.js

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

package/src/input/schema.js.map

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

package/src/input/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularInput",
+  "title": "Semmet Angular Input Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Input component with native input semantics, label, hint text, validation message wiring, and signal-based value state.",
+  "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 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/schema.ts

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

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

@@ -0,0 +1,95 @@
+:host {
+  --semmet-color-primary: #18181b;
+  --semmet-color-danger: #b42318;
+  --semmet-color-surface: #ffffff;
+  --semmet-color-outline: #d4d4d8;
+  --semmet-color-on-surface: #18181b;
+  --semmet-color-on-surface-variant: #52525b;
+  --semmet-color-disabled: #f4f4f5;
+  --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-field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+label {
+  font-weight: 500;
+  color: var(--semmet-color-on-surface);
+}
+
+label span {
+  color: var(--semmet-color-danger);
+}
+
+textarea {
+  width: 100%;
+  min-height: 7rem;
+  box-sizing: border-box;
+  resize: vertical;
+  border: 1px solid var(--semmet-color-outline);
+  border-radius: var(--semmet-radius-sm);
+  padding: 0.625rem 0.75rem;
+  font: inherit;
+  line-height: 1.5;
+  color: var(--semmet-color-on-surface);
+  background: var(--semmet-color-surface);
+  transition:
+    border-color var(--semmet-motion),
+    box-shadow var(--semmet-motion),
+    background-color var(--semmet-motion);
+}
+
+textarea::placeholder {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+textarea[aria-invalid='true'] {
+  border-color: var(--semmet-color-danger);
+}
+
+textarea:disabled {
+  color: var(--semmet-color-on-surface-variant);
+  background: var(--semmet-color-disabled);
+  cursor: not-allowed;
+}
+
+textarea:focus-visible {
+  outline: 2px solid var(--semmet-color-primary);
+  outline-offset: 1px;
+  border-color: var(--semmet-color-primary);
+}
+
+.semmet-field__meta {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.semmet-field__hint,
+.semmet-field__counter,
+.semmet-field__error {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.semmet-field__hint,
+.semmet-field__counter {
+  color: var(--semmet-color-on-surface-variant);
+}
+
+.semmet-field__counter {
+  white-space: nowrap;
+}
+
+.semmet-field__error {
+  color: var(--semmet-color-danger);
+}

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

@@ -0,0 +1,40 @@
+<!-- Semmet Angular: Textarea - native <textarea> with label, hint, counter, and validation wiring. -->
+<div class="semmet-field">
+  <label [for]="controlId()">
+    {{ label() }}
+    @if (required()) {
+      <span aria-hidden="true">*</span>
+    }
+  </label>
+
+  <textarea
+    [id]="controlId()"
+    [value]="value()"
+    [placeholder]="placeholder()"
+    [rows]="rows()"
+    [attr.maxlength]="maxLength()"
+    [required]="required()"
+    [disabled]="disabled()"
+    [readOnly]="readOnly()"
+    [attr.aria-required]="required() ? 'true' : null"
+    [attr.aria-invalid]="error() ? 'true' : null"
+    [attr.aria-describedby]="describedBy()"
+    (input)="updateValue($event)"
+  ></textarea>
+
+  <div class="semmet-field__meta">
+    @if (hint()) {
+      <p class="semmet-field__hint" [id]="hintId()">{{ hint() }}</p>
+    }
+
+    @if (maxLength() !== null) {
+      <p class="semmet-field__counter" [id]="counterId()" aria-live="polite">
+        {{ remainingCharacters() }} characters left
+      </p>
+    }
+  </div>
+
+  @if (error()) {
+    <p class="semmet-field__error" [id]="errorId()" role="alert">{{ error() }}</p>
+  }
+</div>

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

@@ -0,0 +1,56 @@
+import { Component, computed, input, model } 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++}`;
+
+  readonly label = input('Message');
+  readonly placeholder = input('Write your message...');
+  readonly hint = input('Keep it concise and include the details someone needs to respond.');
+  readonly error = input('');
+  readonly required = input(false);
+  readonly disabled = input(false);
+  readonly readOnly = input(false);
+  readonly rows = input(4);
+  readonly maxLength = input<number | null>(280);
+  readonly value = model('');
+
+  protected readonly controlId = computed(() => `${this.instanceId}-control`);
+  protected readonly hintId = computed(() => `${this.instanceId}-hint`);
+  protected readonly errorId = computed(() => `${this.instanceId}-error`);
+  protected readonly counterId = computed(() => `${this.instanceId}-counter`);
+
+  protected readonly remainingCharacters = computed(() => {
+    const maxLength = this.maxLength();
+    return maxLength === null ? null : maxLength - this.value().length;
+  });
+
+  protected readonly describedBy = computed(() => {
+    const ids = [];
+
+    if (this.hint()) {
+      ids.push(this.hintId());
+    }
+
+    if (this.maxLength() !== null) {
+      ids.push(this.counterId());
+    }
+
+    if (this.error()) {
+      ids.push(this.errorId());
+    }
+
+    return ids.length > 0 ? ids.join(' ') : null;
+  });
+
+  protected updateValue(event: Event): void {
+    this.value.set((event.target as HTMLTextAreaElement).value);
+  }
+}

package/src/textarea/index.d.ts

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

package/src/textarea/index.js

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

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

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

package/src/textarea/schema.d.ts

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

package/src/textarea/schema.js

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

package/src/textarea/schema.js.map

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

package/src/textarea/schema.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SemmetAngularTextarea",
+  "title": "Semmet Angular Textarea Options Schema",
+  "type": "object",
+  "description": "Generates a standalone Angular Textarea component with native textarea semantics, label, hint text, validation message wiring, and signal-based value state.",
+  "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 textarea 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/textarea/schema.ts

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