@ng-solid/mcp 22.0.0

package/lib/types.d.ts

@@ -0,0 +1,349 @@
+/**
+ * Snapshot types for the ng-solid MCP server.
+ *
+ * The snapshot is generated at build time by `scripts/prebuild.mjs` (Fase 2/3 del plan)
+ * from the design-system AST, the Arvisfy preset, the icon catalog and the docs registry.
+ * These types mirror the *actual* shape written to `data/design-system.json` /
+ * `data/icons.json` -- verified field-by-field against the real snapshot rather than
+ * assumed from the plan.
+ */
+export type NsVisibility = 'public' | 'internal';
+export type NsSelectorType = 'element' | 'attribute';
+export type MemberKind = 'input' | 'output' | 'model' | 'content-child' | 'content-children' | 'view-child' | 'view-children';
+export type MemberTransformKind = 'angular' | 'custom';
+/** A single member (input/output/model) exposed by a component or a base class it extends. */
+export interface MemberDoc {
+    /** Property name as declared in the class. */
+    name: string;
+    kind: MemberKind;
+    required: boolean;
+    /** Public binding name if different from `name` (e.g. `input.required({ alias: 'nsTooltip' })`). */
+    alias: string | null;
+    /** The name an agent should actually bind to in a template -- `alias ?? name`. */
+    bindingName: string;
+    /** Resolved TypeScript type text (the explicit type argument, never the transform's output type). */
+    type: string;
+    /** Expanded string-literal union members, when the type resolves to a closed set. */
+    values: string[] | null;
+    default: string | null;
+    defaultKind: 'literal' | 'expression' | null;
+    transform: string | null;
+    transformKind: MemberTransformKind | null;
+    /** True when `booleanAttribute`/`numberAttribute` allow the bare-attribute form (`<ns-x loading>`). */
+    acceptsAttribute: boolean;
+    docs: string;
+    /** Name of the base class this member was inherited from, if not declared on the component itself. */
+    inheritedFrom: string | null;
+    /** Primary template binding form, e.g. `[variant]="variant"` or the bare-attribute `loading`. */
+    binding: string;
+    /** Additional valid binding forms (e.g. the property-binding form of a boolean-attribute input). */
+    bindingAlt?: string[];
+    /** Present only on `kind: 'model'` members -- the companion `Change` output name, e.g. `valueChange`. */
+    outputName?: string;
+}
+/** One entry of the `host: {...}` block's `[class.x]` bindings, decoded into a structured form. */
+export interface BemModifierDoc {
+    /** Bound input name driving this modifier, or `null` for a free host-expression modifier. */
+    input: string | null;
+    /** Literal value the input must equal to apply the modifier (`true` for boolean modifiers). */
+    value: string | boolean | null;
+    kind: 'boolean' | 'enum' | 'expression';
+    className: string;
+    /** Raw host-binding expression text, present for `kind: 'expression'`. */
+    expression?: string;
+}
+export interface BemAttrDoc {
+    attr: string;
+    raw: string;
+}
+export interface BemListenerDoc {
+    event: string;
+    raw: string;
+}
+export interface BemOtherHostDoc {
+    key: string;
+    raw: string;
+}
+/** Parsed `host: {...}` metadata block, decoded into a BEM shape. */
+export interface BemDoc {
+    block: string;
+    /** Class names present unconditionally on the host (rare -- most styling is via modifiers). */
+    staticClasses: string[];
+    /** `ns-block__element` class names referenced anywhere in the component's own template/host. */
+    elements: string[];
+    modifiers: BemModifierDoc[];
+    /** modifier input -> { boundValue -> css modifier class }, used to cross-check against `values`. */
+    modifierMap: Record<string, Record<string, string>>;
+    /** Non-class host attribute bindings, e.g. `[attr.data-selected]`. */
+    attrs: BemAttrDoc[];
+    /** Host event bindings, e.g. `(mouseenter)="pause()"`. */
+    listeners: BemListenerDoc[];
+    /** Host-bound CSS custom properties (`[style.--x]`), when present. */
+    styleVars: string[];
+    /** Any other host block entry that isn't a class/attr/listener/style (e.g. `role`). */
+    other: BemOtherHostDoc[];
+}
+export interface SlotDoc {
+    /** `'default'` for the unnamed content-projection slot. */
+    name: string;
+    /** The `select` attribute of the matching `<ng-content>`, or `null` for the default slot. */
+    select: string | null;
+}
+export interface A11yDoc {
+    roles: string[];
+    ariaAttributes: string[];
+    focusTrap: boolean;
+    focusable: boolean;
+}
+export interface FormControlDoc {
+    isValueAccessor: boolean;
+    /** Resolved generic value type of the CVA, e.g. `string`, when statically known. */
+    valueType: string | null;
+    /** Base class providing the `ControlValueAccessor` implementation, e.g. `NsValueAccessor`. */
+    baseClass: string | null;
+}
+export interface CompositionDoc {
+    /** Selector of the component this one is designed to be projected into, if any. */
+    parent: string | null;
+    /** Selectors of child components this component queries via `contentChildren`/`contentChild`. */
+    children: string[];
+}
+export interface ComponentDoc {
+    slug: string;
+    selector: string;
+    selectorType: NsSelectorType;
+    className: string;
+    /** Angular `exportAs` value used in template reference variables (`#ref="exportedAs"`), when set. */
+    exportedAs: string;
+    visibility: NsVisibility;
+    /** Always `@ng-solid/design-system` today (single entrypoint) -- kept explicit for future secondary entrypoints. */
+    importFrom: string;
+    /** Feature directory, e.g. `input` for `form/components/input`. */
+    family: string;
+    /** Top-level grouping, e.g. `form`. `null` for components outside a grouped feature area. */
+    group: string | null;
+    standalone: boolean;
+    templateExportAs: string | null;
+    /** Repo-relative path to the component's `.ts` source file. */
+    filePath: string;
+    /** Class names this component's `imports: [...]` array references (its own dependencies, not its consumers'). */
+    imports: string[];
+    /** Raw source text of the `providers: [...]` array, if any. */
+    providers: string;
+    formControl: FormControlDoc | null;
+    inputs: MemberDoc[];
+    outputs: MemberDoc[];
+    models: MemberDoc[];
+    composition: CompositionDoc;
+    bem: BemDoc;
+    slots: SlotDoc[];
+    a11y: A11yDoc;
+    tokens: string[];
+    docs: string;
+    /** From the docs registry join (`apps/demo/src/app/docs.registry.ts`) -- only present for the ~44 registry slugs. */
+    category?: string;
+    summary?: string;
+    snippet?: string;
+    variants?: string[];
+    /** Hand-authored pitfalls from `overrides/component-notes.json`, keyed by selector. */
+    pitfalls?: string[];
+    /** Selectors of components worth cross-referencing (from `overrides/component-notes.json`, in addition to `composition`). */
+    relatedComponents?: string[];
+}
+export interface ServiceMethodDoc {
+    name: string;
+    signature: string;
+    docs?: string;
+}
+export interface ServiceDoc {
+    name: string;
+    exportedAs: string;
+    importFrom: string;
+    filePath: string;
+    providedIn: string | null;
+    docs?: string;
+    methods: ServiceMethodDoc[];
+    /** Selectors of components this service creates/manages (e.g. `NsToastService` -> `ns-toast`). */
+    relatedComponents: string[];
+}
+/** A function provider (`provideNsTheme`, `provideIcons`, `provideIconsPatch`). */
+export interface ProviderDoc {
+    name: string;
+    importFrom: string;
+    signature: string;
+    docs?: string;
+    example: string;
+}
+/** One `## `-delimited section of a skill's markdown body. */
+export interface GuideSectionDoc {
+    /** Kebab-case id derived from the heading text (accent/punctuation-stripped). */
+    id: string;
+    title: string;
+    /** Markdown body of the section, with every `<!-- ns:… -->` marker already resolved. */
+    content: string;
+}
+/**
+ * A guide generated from `packages/mcp/skills/<name>/SKILL.md` (the single
+ * source of truth -- see `scripts/lib/extract-guides.mjs`). `name` matches
+ * both the skill's directory name and its front-matter `name:`, so it is
+ * simultaneously the `get_guide`/`list_guides` identifier and the
+ * `install-skills` distribution directory name.
+ */
+export interface GuideDoc {
+    name: string;
+    /** Always equal to `name` -- kept as an alias so callers can use either the `slug`/`name` convention consistently with `ComponentDoc.slug`/`ServiceDoc.name`. */
+    slug: string;
+    /** First `# ` heading in the skill body, or `name` if the body has none. */
+    title: string;
+    /** Front-matter `description:`. */
+    description: string;
+    sections: GuideSectionDoc[];
+    /**
+     * Package-root-relative path to the *resolved* copy of this skill (markers
+     * already interpolated), e.g. `data/skills/ns-solid-install/SKILL.md`.
+     * This is what `install-skills` copies and what `ns://skill/{slug}`
+     * resolves -- never the raw authored source under `skills/`, which may
+     * still contain unresolved `<!-- ns:... -->` markers.
+     */
+    skillPath: string;
+}
+/** One flattened token entry in the `primitive` tier: no reference, just the raw value. */
+export interface PrimitiveTokenDoc {
+    path: string;
+    cssVariable: string;
+    value: string | number;
+}
+/** One flattened token entry in the `semantic` tier: references a primitive token. */
+export interface SemanticTokenDoc {
+    path: string;
+    cssVariable: string;
+    reference: string;
+    resolvedLiteral: string | number | null;
+    broken?: string;
+}
+/**
+ * One flattened token entry in the `components` tier, resolved all the way
+ * down to its primitive literal for both color schemes -- this is what lets
+ * an agent reason about contrast without running Angular.
+ */
+export interface ComponentTokenDoc {
+    path: string;
+    cssVariable: string;
+    reference: string;
+    resolved: {
+        light: string | number | null;
+        dark: string | number | null;
+    };
+    broken?: {
+        light?: string;
+        dark?: string;
+    };
+}
+/** One naming/validation rule enforced by `validateNsPreset`, extracted from `theme.utils.ts`. */
+export interface ThemeRuleDoc {
+    id: string;
+    severity: 'error' | 'warning';
+    scope: string;
+    pattern: string | null;
+    message: string;
+}
+export interface ThemeDoc {
+    presetName: string;
+    tiers: {
+        primitive: PrimitiveTokenDoc[];
+        semantic: {
+            common: SemanticTokenDoc[];
+            light: SemanticTokenDoc[];
+            dark: SemanticTokenDoc[];
+        };
+        component: ComponentTokenDoc[];
+    };
+    /** Top-level keys of the `components` tier (e.g. `button`, `modal`) -- ~43 groups. */
+    componentGroups: string[];
+    drift: {
+        /** `--ns-component-*` used in component SCSS but not defined by the preset. */
+        undefinedInPreset: string[];
+        /** `--ns-component-*` defined by the preset but never referenced in component SCSS. */
+        unusedInScss: string[];
+    };
+    rules: ThemeRuleDoc[];
+}
+export interface IconDoc {
+    name: string;
+    symbol: string | null;
+    keywords: string[];
+}
+export interface IconsSnapshot {
+    schemaVersion: number;
+    version: string;
+    generatedAt: string;
+    meta: {
+        sourceUrl: string;
+        sourceCommit: string;
+        license: string;
+        count: number;
+    };
+    icons: IconDoc[];
+    /** `NsIconsComponent`'s own API (selector `ns-icon`), so an agent doesn't need a second lookup. */
+    component: ComponentDoc;
+    stats: {
+        total: number;
+    };
+    __stub?: boolean;
+}
+export interface NsSnapshotPackages {
+    designSystem: string;
+    icons: string;
+    core?: string;
+}
+export interface NsSnapshotStats {
+    componentsPublic: number;
+    componentsInternal: number;
+    services: number;
+    providers: number;
+    guides: number;
+    icons: number;
+    tokensPrimitive: number;
+    tokensSemantic: number;
+    tokensComponent: number;
+}
+export interface NsFrameworkDoc {
+    name: string;
+    version: string;
+}
+/** A feature directory grouping (`family`, e.g. `input`) and its optional top-level `group` (e.g. `form`). */
+export interface FamilyDoc {
+    family: string;
+    group: string | null;
+    components: string[];
+}
+export interface StyleContractRuleDoc {
+    id: string;
+    severity: 'error' | 'warning';
+    scope: string;
+    message: string;
+}
+export interface StyleContractDoc {
+    /** Stringified `RegExp` source, e.g. `"/^ns-.../"` -- parse with `parseRegexLiteral` before using. */
+    bemClassPattern: string;
+    utilityClassPattern: string;
+    rawStyleValuePattern: string;
+    rules: StyleContractRuleDoc[];
+}
+export interface NsSnapshot {
+    schemaVersion: number;
+    version: string;
+    generatedAt: string;
+    framework: NsFrameworkDoc;
+    packages: NsSnapshotPackages;
+    categories: string[];
+    families: FamilyDoc[];
+    components: ComponentDoc[];
+    services: ServiceDoc[];
+    providers: ProviderDoc[];
+    guides: GuideDoc[];
+    theme?: ThemeDoc;
+    styleContract?: StyleContractDoc;
+    stats: NsSnapshotStats;
+    __stub?: boolean;
+}

package/lib/types.js

@@ -0,0 +1,11 @@
+/**
+ * Snapshot types for the ng-solid MCP server.
+ *
+ * The snapshot is generated at build time by `scripts/prebuild.mjs` (Fase 2/3 del plan)
+ * from the design-system AST, the Arvisfy preset, the icon catalog and the docs registry.
+ * These types mirror the *actual* shape written to `data/design-system.json` /
+ * `data/icons.json` -- verified field-by-field against the real snapshot rather than
+ * assumed from the plan.
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ng-solid/mcp",
+  "version": "22.0.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "MCP server for the ng-solid Arvisfy design system — serves component, token, icon and style-contract metadata to AI agents.",
+  "author": "Ulises Familia Rodríguez <chicromedia@hotmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Solid-Techologies/ng-solid.git"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "ng-solid-mcp": "./index.js"
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "data",
+    "skills",
+    "README.md",
+    "GUIDE.md"
+  ],
+  "keywords": [
+    "ng-solid",
+    "mcp",
+    "model-context-protocol",
+    "design-system",
+    "arvisfy",
+    "angular"
+  ],
+  "engines": {
+    "node": "^24.0.0",
+    "pnpm": ">=11.22.0"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.26.0",
+    "zod": "^4.1.13"
+  }
+}

package/skills/ns-solid-components/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: ns-solid-components
+description: Reference for @ng-solid/design-system's public component catalog — parent/child composition rules, service-driven components, and internal subcomponents that are not part of the public API.
+---
+
+# Catálogo de componentes de ng-solid
+
+## Tabla generada
+
+<!-- ns:component-list -->
+
+Todos se importan desde `@ng-solid/design-system` (entry point único —
+ver la skill `ns-solid-install`) y son standalone: deben declararse en
+`imports: [...]` de quien los usa.
+
+## Reglas de composición padre → hijo
+
+Estos pares no son componentes independientes: el hijo sólo tiene sentido
+proyectado dentro del padre, y ambos deben estar en `imports`:
+
+| Padre            | Hijo(s)                                            | Notas                                                                                                                                            |
+| ---------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ns-tabs`        | `ns-tab`                                           | Cada `ns-tab` es una pestaña; `ns-tabs` las descubre vía `contentChildren(NsTabComponent)`.                                                      |
+| `ns-card`        | `ns-card-header`, `ns-card-body`, `ns-card-footer` | Tres selectores adicionales del mismo fichero `card.component.ts`; son slots con nombre, no requieren los tres a la vez.                         |
+| `ns-accordion`   | `ns-accordion-item`                                | `ns-accordion` gestiona `expandedKeys` como `model()`; los items son sólo presentación + trigger.                                                |
+| `ns-dropdown`    | `ns-dropdown-item`                                 | `ns-dropdown-item` es una **directiva** (`NsDropdownItemDirective`), no un componente — se aplica sobre el elemento que hace de opción.          |
+| `ns-tag-group`   | `ns-tag`                                           | Agrupa chips seleccionables/removibles.                                                                                                          |
+| `ns-breadcrumbs` | `ns-breadcrumb-item`                               | Cada nivel de la ruta es un `ns-breadcrumb-item`.                                                                                                |
+| `ns-radio-group` | `ns-radio`                                         | `ns-radio-group` es el `ControlValueAccessor` (hereda de `NsValueAccessor`, ver `ns-solid-forms`); `ns-radio` por sí solo **no** implementa CVA. |
+
+`ns-input-group` es sólo un wrapper de layout — no tiene `label` ni `wrap`;
+los inputs de formulario y sus labels van en el `ns-input`/`ns-input-number`
+proyectado dentro (`ns-input-group-addon` para prefijos/sufijos).
+
+## Componentes que se usan vía servicio
+
+Estos no se instancian con una etiqueta en el template del consumidor — se
+abren/gestionan imperativamente inyectando el servicio correspondiente:
+
+- **`NsToastService`** → produce instancias de `ns-toast` (y el
+  subcomponente interno `ns-toast-region` que las hostea).
+- **`NsModalService`** → abre `ns-modal`, con contenido proyectado o un
+  `contentComponent` tipado.
+- **`NsDrawerService`** → abre `ns-drawer`.
+- **`NsScheduleService`** → coordina el estado del calendario detrás de
+  `ns-schedule` y sus celdas/eventos internos.
+
+`NsThemeService` (ver `ns-solid-theming`) y `NsOverlayService` (posicionamiento,
+focus trap, scroll lock, `inert` — usado internamente por
+popover/tooltip/drawer/modal) también son servicios públicos, pero no
+"envuelven" un componente de la misma forma.
+
+## Subcomponentes internos — no exportados
+
+Existen en el código pero **no** están en el barrel público
+(`visibility: 'internal'` en el snapshot). Un agente no debe importarlos ni
+sugerirlos; si un usuario pregunta por ellos, la respuesta correcta es
+señalar el componente público que los engloba:
+
+- `ns-schedule-cell`, `ns-schedule-day`, `ns-schedule-event`,
+  `ns-schedule-week`, `ns-schedule-workweek` → usar `ns-schedule`.
+- `ns-date-picker-calendar` → usar `ns-date-picker` / `ns-date-range-picker`.
+- `ns-toast-region` → se instancia sólo a través de `NsToastService`, nunca
+  directamente.
+
+## Variantes visuales — lenguaje HeroUI
+
+Los nombres de variante son consistentes entre componentes:
+
+- `solid` — relleno de acción sólido.
+- `soft` — versión plana (`flat` en HeroUI).
+- `outline` — bordeada (`bordered` en HeroUI).
+- `ghost` — ligera (`light` en HeroUI).
+
+Cada familia posee sus propios tokens `--ns-component-<familia>-*` — no
+tomes prestados los tokens de otro componente aunque el valor visual
+coincida.

package/skills/ns-solid-forms/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: ns-solid-forms
+description: Build forms with @ng-solid/design-system's ControlValueAccessor controls — formControlName/[(value)] bindings, the 14 inputs inherited from NsValueAccessor, and [nsField] wiring.
+---
+
+# Formularios con ng-solid
+
+## Controles CVA y sus inputs heredados
+
+<!-- ns:form-controls -->
+
+Todos implementan `ControlValueAccessor` extendiendo la clase base abstracta
+`NsValueAccessor<T>`
+(`packages/design-system/src/lib/form/models/value-accessor.ts`). Muchos
+componentes (`NsInputComponent`, `NsSwitchComponent`, `NsCheckboxComponent`…)
+tienen cuerpo de clase vacío — **toda** su API pública viene por herencia. Si
+consultas la API de un control y ves 0 inputs propios, no significa que el
+componente no acepte nada: revisa `inheritedFrom: 'NsValueAccessor'`.
+
+`NsValueAccessor` expone, en todos los controles por igual:
+
+- `type`, `placeholder`, `label`, `description`, `errorMessage`, `required`,
+  `invalid`, `readonly`, `name`, `ariaLabel`, `ariaDescribedBy` — `input()`.
+- `size: 'sm' | 'md' | 'lg'` (default `'md'`), `color: 'neutral' | 'primary'
+| 'success' | 'warning' | 'danger'` (default `'neutral'`), `variant:
+'solid' | 'soft' | 'outline' | 'ghost'` (default `'outline'`) — `input()`.
+- `disabled` — **`model()`**, no `input()`. Por eso `formControl.disable()` /
+  `.enable()` funciona de forma transparente: `setDisabledState` (parte del
+  contrato `ControlValueAccessor`) llama a `this.disabled.set(isDisabled)`
+  por debajo.
+- `value` — también `model()`, escrito por Angular Forms vía `writeValue` y
+  leído/emitido por el propio control con `setValue()`.
+
+## Bindings — los tres equivalentes
+
+```html
+<!-- Reactive Forms -->
+<ns-input formControlName="email" label="Correo" />
+
+<!-- Template-driven -->
+<ns-input [(ngModel)]="email" label="Correo" />
+
+<!-- Binding directo al model, sin FormsModule -->
+<ns-input [(value)]="email" label="Correo" />
+```
+
+Los tres funcionan porque el control implementa `ControlValueAccessor` (los
+dos primeros) y expone `value` como `model()` (el tercero). Para
+`disabled` como two-way binding equivalente: `[(disabled)]="isDisabled"`.
+
+## `[nsField]` — vincular label, descripción y error
+
+`NsFieldDirective` (selector `[nsField]`,
+`packages/design-system/src/lib/a11y/field-context.ts`) provee un
+`NsFieldContext` al subárbol. El control lo consume vía `inject(NsFieldContext,
+{ optional: true, skipSelf: true })` para resolver su `id` real
+(`controlId()`), y componentes como `NsDescriptionComponent` (hint) se
+registran contra el mismo contexto para el `aria-describedby`:
+
+```html
+<div nsField="email">
+  <ns-input formControlName="email" label="Correo" />
+  <ns-description id="email-hint"
+    >Usaremos este correo para notificarte.</ns-description
+  >
+</div>
+```
+
+Sin `[nsField]`, cada control genera su propio id vía `NsAriaIdService`; con
+él, el id explícito (`nsField="email"`) gana y el `aria-describedby` se
+compone automáticamente con las descripciones registradas en el contexto.
+
+## `errorMessage` + `invalid`
+
+El mensaje de error sólo se renderiza cuando **ambos** están presentes:
+`invalid()` es `true` y `errorMessage()` no es vacío/undefined (ver
+`input.component.html`: `@if (invalid() && errorMessage())`). Calcula
+`invalid` desde el estado del `FormControl`, no lo dejes fijo:
+
+```html
+<ns-input
+  [invalid]="control.invalid && control.touched"
+  [errorMessage]="
+    control.hasError('required') ? 'Este campo es obligatorio' : undefined
+  "
+/>
+```
+
+## Ejemplo completo con `FormBuilder`
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+  NsButtonComponent,
+  NsFieldDirective,
+  NsInputComponent,
+  NsPasswordComponent,
+  NsSwitchComponent
+} from '@ng-solid/design-system';
+
+@Component({
+  selector: 'app-signup-form',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    NsFieldDirective,
+    NsInputComponent,
+    NsPasswordComponent,
+    NsSwitchComponent,
+    NsButtonComponent
+  ],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <div nsField="signup-email">
+        <ns-input
+          formControlName="email"
+          label="Correo"
+          type="email"
+          [invalid]="form.controls.email.invalid && form.controls.email.touched"
+          [errorMessage]="'Ingresa un correo válido'"
+        />
+      </div>
+
+      <div nsField="signup-password">
+        <ns-password
+          formControlName="password"
+          label="Contraseña"
+          [invalid]="
+            form.controls.password.invalid && form.controls.password.touched
+          "
+          [errorMessage]="'Mínimo 8 caracteres'"
+        />
+      </div>
+
+      <ns-switch formControlName="acceptTerms" label="Acepto los términos" />
+
+      <ns-button variant="primary" type="submit" [disabled]="form.invalid">
+        Crear cuenta
+      </ns-button>
+    </form>
+  `
+})
+export class SignupFormComponent {
+  private readonly fb = inject(FormBuilder);
+
+  readonly form = this.fb.group({
+    email: this.fb.control('', [Validators.required, Validators.email]),
+    password: this.fb.control('', [
+      Validators.required,
+      Validators.minLength(8)
+    ]),
+    acceptTerms: this.fb.control(false, [Validators.requiredTrue])
+  });
+
+  submit(): void {
+    if (this.form.valid) {
+      // this.form.getRawValue()
+    }
+  }
+}
+```
+
+Nota: `NsPasswordComponent` añade `forgotLink` y `showAndHide` propios sobre
+la base heredada; `NsSwitchComponent` no añade inputs propios (todo viene de
+`NsValueAccessor`).