@zellvora/ng-input 0.1.1

package/fesm2022/zellvora-ng-input.mjs

@@ -0,0 +1,2203 @@
+import * as i0 from '@angular/core';
+import { inject, Injector, signal, computed, effect, untracked, DestroyRef, InjectionToken, input, model, numberAttribute, booleanAttribute, output, Directive, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, EventEmitter, Input, Output } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '@angular/forms';
+import * as i1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { DecimalPipe } from '@angular/common';
+
+/**
+ * Signal Form Engine — the single source of truth for the whole library.
+ *
+ * A form is a `WritableSignal<T>` model plus a lazily-created `ZvControl` per
+ * field. Every piece of derived state (value, errors, validity, status) is a
+ * `computed()`, so it recomputes automatically and never needs subscriptions,
+ * `patchValue`, `setValue`, or manual change detection.
+ *
+ * The Reactive and Template adapters wrap *this* — they add no validation or
+ * state logic of their own.
+ */
+/**
+ * Create a Signal Form.
+ *
+ * @example
+ * const form = createForm(
+ *   { firstName: '', email: '', age: null as number | null },
+ *   { email: { validators: [ZvValidators.required, ZvValidators.email] } },
+ * );
+ * form.control('email').invalid();   // computed signal
+ */
+function createForm(initial, schema = {}, options = {}) {
+    const injector = options.injector ?? inject(Injector);
+    const initialSnapshot = structuredClone(initial);
+    const model = signal(initial, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+    const controls = new Map();
+    function build(key) {
+        const cfg = (schema[key] ?? {});
+        const validators = cfg.validators ?? [];
+        const asyncValidators = cfg.asyncValidators ?? [];
+        const disabled = signal(cfg.disabled ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        const dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+        const touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        const value = computed(() => model()[key], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        const required = computed(() => hasRequired(validators), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        // Synchronous errors recompute whenever value (or referenced model) changes.
+        const syncErrors = computed(() => {
+            if (disabled())
+                return null;
+            const v = value();
+            const m = model();
+            for (const fn of validators) {
+                const err = fn(v, m);
+                if (err)
+                    return err;
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "syncErrors" }] : /* istanbul ignore next */ []));
+        // Async errors live in their own writable signal, fed by an effect.
+        const asyncErrors = signal(null, ...(ngDevMode ? [{ debugName: "asyncErrors" }] : /* istanbul ignore next */ []));
+        const pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+        if (asyncValidators.length) {
+            const debounce = cfg.debounce ?? 300;
+            let timer;
+            let runId = 0;
+            effect((onCleanup) => {
+                const v = value();
+                const m = untracked(model);
+                // Skip async while a sync error already fails the field.
+                if (untracked(syncErrors)) {
+                    pending.set(false);
+                    asyncErrors.set(null);
+                    return;
+                }
+                pending.set(true);
+                const id = ++runId;
+                timer = setTimeout(async () => {
+                    let result = null;
+                    for (const fn of asyncValidators) {
+                        const err = await fn(v, m);
+                        if (err) {
+                            result = err;
+                            break;
+                        }
+                    }
+                    if (id === runId) {
+                        asyncErrors.set(result);
+                        pending.set(false);
+                    }
+                }, debounce);
+                onCleanup(() => clearTimeout(timer));
+            }, { injector });
+        }
+        const errors = computed(() => syncErrors() ?? asyncErrors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        const valid = computed(() => !pending() && errors() === null, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+        const invalid = computed(() => errors() !== null, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        const status = computed(() => disabled() ? 'DISABLED' : pending() ? 'PENDING' : invalid() ? 'INVALID' : 'VALID', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        const ctrl = {
+            key,
+            value,
+            model: value,
+            disabled: disabled.asReadonly(),
+            required,
+            dirty: dirty.asReadonly(),
+            touched: touched.asReadonly(),
+            pending: pending.asReadonly(),
+            errors,
+            valid,
+            invalid,
+            status,
+            setValue(v) {
+                model.update((m) => ({ ...m, [key]: v }));
+                dirty.set(true);
+            },
+            update(fn) {
+                model.update((m) => ({ ...m, [key]: fn(m[key]) }));
+                dirty.set(true);
+            },
+            setDisabled(d) {
+                disabled.set(d);
+            },
+            markTouched(t = true) {
+                touched.set(t);
+            },
+            markDirty(d = true) {
+                dirty.set(d);
+            },
+            reset() {
+                model.update((m) => ({ ...m, [key]: structuredClone(initialSnapshot[key]) }));
+                dirty.set(false);
+                touched.set(false);
+            },
+        };
+        return ctrl;
+    }
+    function control(key) {
+        let c = controls.get(key);
+        if (!c) {
+            c = build(key);
+            controls.set(key, c);
+        }
+        return c;
+    }
+    // Ensure every declared field has a control so aggregates see them.
+    const keys = Object.keys(initial);
+    const all = () => keys.map((k) => control(k));
+    const errors = computed(() => {
+        const out = {};
+        for (const c of all())
+            if (c.errors())
+                out[c.key] = c.errors();
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    const pending = computed(() => all().some((c) => c.pending()), ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    const valid = computed(() => !pending() && all().every((c) => c.valid()), ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    const invalid = computed(() => all().some((c) => c.invalid()), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    const dirty = computed(() => all().some((c) => c.dirty()), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    const touched = computed(() => all().some((c) => c.touched()), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    const status = computed(() => pending() ? 'PENDING' : invalid() ? 'INVALID' : 'VALID', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    // Cleanup map on destroy when in an injection context.
+    try {
+        inject(DestroyRef, { optional: true })?.onDestroy(() => controls.clear());
+    }
+    catch {
+        /* called outside injection context — caller owns lifecycle */
+    }
+    return {
+        model,
+        control,
+        value: model.asReadonly(),
+        errors,
+        valid,
+        invalid,
+        dirty,
+        touched,
+        pending,
+        status,
+        patch(partial) {
+            model.update((m) => ({ ...m, ...partial }));
+        },
+        setValue(v) {
+            model.set(v);
+        },
+        reset(value) {
+            model.set(value ? structuredClone(value) : structuredClone(initialSnapshot));
+            for (const c of all())
+                c.markDirty(false), c.markTouched(false);
+        },
+        markAllTouched() {
+            for (const c of all())
+                c.markTouched(true);
+        },
+    };
+}
+function hasRequired(validators) {
+    return validators.some((f) => f.zvRequired === true);
+}
+
+/** null/undefined/'' are "absent" — `required` is the only thing that rejects them. */
+const absent$1 = (v) => v === null || v === undefined || v === '';
+const re = (pattern, key) => (v) => absent$1(v) || pattern.test(String(v)) ? null : { [key]: true };
+// ---- Pattern library -------------------------------------------------------
+const ZV_PATTERNS = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    phone: /^\+?[0-9]{7,15}$/,
+    mobile: /^[6-9][0-9]{9}$/, // Indian mobile
+    url: /^(https?:\/\/)([\w-]+\.)+[\w-]+(\/[\w./?%&=#-]*)?$/i,
+    pan: /^[A-Z]{5}[0-9]{4}[A-Z]$/,
+    gst: /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z][0-9A-Z]Z[0-9A-Z]$/,
+    aadhaar: /^[2-9][0-9]{11}$/,
+    cvv: /^[0-9]{3,4}$/,
+    passport: /^[A-PR-WY][0-9]{7}$/,
+    drivingLicense: /^[A-Z]{2}[0-9]{2}\s?[0-9]{11}$/,
+    pincode: /^[1-9][0-9]{5}$/,
+    ifsc: /^[A-Z]{4}0[A-Z0-9]{6}$/,
+    swift: /^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/,
+    iban: /^[A-Z]{2}[0-9]{2}[A-Z0-9]{11,30}$/,
+    time: /^([01]?\d|2[0-3]):[0-5]\d$/,
+    password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/,
+};
+const requiredFn$1 = (v) => {
+    const empty = absent$1(v) || (Array.isArray(v) && v.length === 0) || v === false;
+    return empty ? { required: true } : null;
+};
+const required = Object.assign(requiredFn$1, { zvRequired: true });
+const ZvValidators$1 = {
+    required,
+    email: re(ZV_PATTERNS.email, 'email'),
+    phone: re(ZV_PATTERNS.phone, 'phone'),
+    mobile: re(ZV_PATTERNS.mobile, 'mobile'),
+    url: re(ZV_PATTERNS.url, 'url'),
+    pincode: re(ZV_PATTERNS.pincode, 'pincode'),
+    cvv: re(ZV_PATTERNS.cvv, 'cvv'),
+    passport: re(ZV_PATTERNS.passport, 'passport'),
+    drivingLicense: re(ZV_PATTERNS.drivingLicense, 'drivingLicense'),
+    ifsc: re(ZV_PATTERNS.ifsc, 'ifsc'),
+    swift: re(ZV_PATTERNS.swift, 'swift'),
+    iban: re(ZV_PATTERNS.iban, 'iban'),
+    time: re(ZV_PATTERNS.time, 'time'),
+    pan: re(ZV_PATTERNS.pan, 'pan'),
+    gst: re(ZV_PATTERNS.gst, 'gst'),
+    password: re(ZV_PATTERNS.password, 'password'),
+    pattern: (p) => (v) => {
+        const pat = typeof p === 'string' ? new RegExp(p) : p;
+        return absent$1(v) || pat.test(String(v)) ? null : { pattern: true };
+    },
+    regex: (p) => ZvValidators$1.pattern(p),
+    min: (n) => (v) => absent$1(v) || Number(v) >= n ? null : { min: { min: n, actual: Number(v) } },
+    max: (n) => (v) => absent$1(v) || Number(v) <= n ? null : { max: { max: n, actual: Number(v) } },
+    minLength: (n) => (v) => {
+        const len = absent$1(v) ? 0 : String(v).length;
+        return absent$1(v) || len >= n
+            ? null
+            : { minlength: { requiredLength: n, actualLength: len } };
+    },
+    maxLength: (n) => (v) => {
+        const len = absent$1(v) ? 0 : String(v).length;
+        return len <= n
+            ? null
+            : { maxlength: { requiredLength: n, actualLength: len } };
+    },
+    date: ((v) => absent$1(v) || !isNaN(new Date(v).getTime())
+        ? null
+        : { date: true }),
+    /** Minimum whole-year age relative to today. */
+    age: (minYears) => (v) => {
+        if (absent$1(v))
+            return null;
+        const dob = new Date(v);
+        if (isNaN(dob.getTime()))
+            return { date: true };
+        const now = new Date();
+        let age = now.getFullYear() - dob.getFullYear();
+        const m = now.getMonth() - dob.getMonth();
+        if (m < 0 || (m === 0 && now.getDate() < dob.getDate()))
+            age--;
+        return age >= minYears ? null : { age: { required: minYears, actual: age } };
+    },
+    aadhaar: ((v) => {
+        if (absent$1(v))
+            return null;
+        const s = String(v).replace(/\s/g, '');
+        return ZV_PATTERNS.aadhaar.test(s) && verhoeff$1(s) ? null : { aadhaar: true };
+    }),
+    creditCard: ((v) => {
+        if (absent$1(v))
+            return null;
+        const s = String(v).replace(/[\s-]/g, '');
+        return /^[0-9]{12,19}$/.test(s) && luhn$1(s) ? null : { creditCard: true };
+    }),
+    /** Max file size in bytes (works on File | File[]). */
+    fileSize: (maxBytes) => (v) => {
+        const files = toFiles(v);
+        const big = files.find((f) => f.size > maxBytes);
+        return big ? { fileSize: { max: maxBytes, actual: big.size } } : null;
+    },
+    /** Allowed MIME types (e.g. ['image/png','application/pdf']). */
+    mimeType: (allowed) => (v) => {
+        const bad = toFiles(v).find((f) => !allowed.some((a) => matchMime(f.type, a)));
+        return bad ? { mimeType: { allowed, actual: bad.type } } : null;
+    },
+    /** Image max width/height (async-free: relies on already-measured dims). */
+    imageSize: (maxW, maxH) => (v) => !v || (v.width <= maxW && v.height <= maxH)
+        ? null
+        : { imageSize: { maxW, maxH, actual: v } },
+    /**
+     * Cross-field: a control validator that compares against another model key.
+     * Use as a field validator; it receives the full model as 2nd arg.
+     */
+    confirm: (otherField, key = 'mismatch') => (value, model) => value === model[otherField]
+        ? null
+        : { [key]: true },
+};
+// ---- File helpers ----------------------------------------------------------
+function toFiles(v) {
+    if (!v)
+        return [];
+    if (v instanceof File)
+        return [v];
+    if (Array.isArray(v))
+        return v.filter((x) => x instanceof File);
+    if (typeof FileList !== 'undefined' && v instanceof FileList)
+        return Array.from(v);
+    return [];
+}
+function matchMime(actual, allowed) {
+    if (allowed.endsWith('/*'))
+        return actual.startsWith(allowed.slice(0, -1));
+    return actual === allowed;
+}
+// ---- Checksums -------------------------------------------------------------
+function luhn$1(num) {
+    let sum = 0;
+    let alt = false;
+    for (let i = num.length - 1; i >= 0; i--) {
+        let d = +num[i];
+        if (alt) {
+            d *= 2;
+            if (d > 9)
+                d -= 9;
+        }
+        sum += d;
+        alt = !alt;
+    }
+    return sum % 10 === 0;
+}
+const D$1 = [
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 4, 0, 6, 7, 8, 9, 5],
+    [2, 3, 4, 0, 1, 7, 8, 9, 5, 6], [3, 4, 0, 1, 2, 8, 9, 5, 6, 7],
+    [4, 0, 1, 2, 3, 9, 5, 6, 7, 8], [5, 9, 8, 7, 6, 0, 4, 3, 2, 1],
+    [6, 5, 9, 8, 7, 1, 0, 4, 3, 2], [7, 6, 5, 9, 8, 2, 1, 0, 4, 3],
+    [8, 7, 6, 5, 9, 3, 2, 1, 0, 4], [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
+];
+const P$1 = [
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], [1, 5, 7, 6, 2, 8, 3, 0, 9, 4],
+    [5, 8, 0, 3, 7, 9, 6, 1, 4, 2], [8, 9, 1, 6, 0, 4, 3, 5, 2, 7],
+    [9, 4, 5, 3, 1, 2, 6, 8, 7, 0], [4, 2, 8, 6, 5, 7, 3, 9, 0, 1],
+    [2, 7, 9, 3, 8, 0, 6, 4, 1, 5], [7, 0, 4, 6, 9, 1, 3, 2, 5, 8],
+];
+function verhoeff$1(num) {
+    let c = 0;
+    const digits = num.split('').reverse().map(Number);
+    for (let i = 0; i < digits.length; i++)
+        c = D$1[c][P$1[i % 8][digits[i]]];
+    return c === 0;
+}
+
+/** Shared types for all Zellvora form controls. */
+const ZV_DEFAULT_CONFIG = {
+    appearance: 'outlined',
+    size: 'md',
+    theme: 'material',
+    color: 'primary',
+    floatingLabel: true,
+    dir: 'ltr',
+    clearable: false,
+    debounce: 300,
+};
+
+/**
+ * App-wide defaults for every Zellvora control. Override at root or per
+ * lazy-loaded scope. Tree-shakable: the default is the bundled constant.
+ */
+const ZV_INPUT_CONFIG = new InjectionToken('ZV_INPUT_CONFIG', { providedIn: 'root', factory: () => ZV_DEFAULT_CONFIG });
+/** Provide partial overrides without restating the full config. */
+function provideZvInput(overrides = {}) {
+    return {
+        provide: ZV_INPUT_CONFIG,
+        useValue: { ...ZV_DEFAULT_CONFIG, ...overrides },
+    };
+}
+
+let counter = 0;
+/** Small, SSR-safe unique id (no crypto / DOM dependency). */
+function uid() {
+    return (++counter).toString(36);
+}
+
+/** Default human-readable messages for built-in validator error keys. */
+const ZV_DEFAULT_MESSAGES = {
+    required: () => 'This field is required.',
+    email: () => 'Enter a valid email address.',
+    phone: () => 'Enter a valid phone number.',
+    mobile: () => 'Enter a valid 10-digit mobile number.',
+    url: () => 'Enter a valid URL.',
+    password: () => 'Min 8 chars with upper, lower, number and symbol.',
+    pattern: () => 'Value does not match the required format.',
+    min: (i) => `Must be at least ${i.min}.`,
+    max: (i) => `Must be at most ${i.max}.`,
+    minlength: (i) => `Min length is ${i.requiredLength}.`,
+    maxlength: (i) => `Max length is ${i.requiredLength}.`,
+    date: () => 'Enter a valid date.',
+    time: () => 'Enter a valid time.',
+    age: (i) => `Must be at least ${i.required} years old.`,
+    pan: () => 'Enter a valid PAN.',
+    gst: () => 'Enter a valid GSTIN.',
+    aadhaar: () => 'Enter a valid Aadhaar number.',
+    passport: () => 'Enter a valid passport number.',
+    drivingLicense: () => 'Enter a valid driving licence number.',
+    pincode: () => 'Enter a valid PIN code.',
+    creditCard: () => 'Enter a valid card number.',
+    cvv: () => 'Enter a valid CVV.',
+    ifsc: () => 'Enter a valid IFSC code.',
+    swift: () => 'Enter a valid SWIFT/BIC code.',
+    iban: () => 'Enter a valid IBAN.',
+    fileSize: () => 'File is too large.',
+    mimeType: () => 'File type is not allowed.',
+    imageSize: () => 'Image dimensions are too large.',
+    mismatch: () => 'Values do not match.',
+};
+/** Resolve the first error in `errors` to a display string. */
+function formatError(errors, overrides) {
+    if (!errors)
+        return null;
+    const [key, info] = Object.entries(errors)[0];
+    if (overrides?.[key])
+        return overrides[key];
+    return ZV_DEFAULT_MESSAGES[key]?.(info) ?? 'Invalid value.';
+}
+
+/**
+ * SignalControlAccessor — signal-first base for every Zellvora control.
+ *
+ * 100% signal API: `input()`, `model()`, `output()`. No `@Input`/`@Output`
+ * decorators, no `ControlValueAccessor`, no `FormControl`. A control can bind
+ * in three interchangeable ways, all backed by the same internal signals:
+ *
+ *   1. Standalone two-way:   <zv-input [(value)]="name" />
+ *   2. Signal Forms:         <zv-input [form]="form" controlName="name" />
+ *   3. Reactive/Template:    via the adapter directives (zvControl / ngModel)
+ *
+ * The connection to the Signal Form Engine is a single bidirectional `effect`
+ * pair: model -> control on read, control -> model on write.
+ */
+class SignalControlAccessor {
+    config = inject(ZV_INPUT_CONFIG);
+    // ---- Identity ----------------------------------------------------------
+    id = signal(`zv-${uid()}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    // ---- Signal Forms binding ----------------------------------------------
+    /** The Signal Form to bind to (use with `controlName`). */
+    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : /* istanbul ignore next */ []));
+    controlName = input(...(ngDevMode ? [undefined, { debugName: "controlName" }] : /* istanbul ignore next */ []));
+    // ---- Two-way model (standalone use): [(value)] and [(model)] ------------
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Alias of `value` for `[(model)]` ergonomics. */
+    modelValue = model(null, { ...(ngDevMode ? { debugName: "modelValue" } : /* istanbul ignore next */ {}), alias: 'model' });
+    // ---- Developer-experience inputs ---------------------------------------
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    prefixIcon = input(...(ngDevMode ? [undefined, { debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
+    suffixIcon = input(...(ngDevMode ? [undefined, { debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    clearable = input(this.config.clearable, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'required' });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    floatingLabel = input(this.config.floatingLabel, { ...(ngDevMode ? { debugName: "floatingLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minlength = input(undefined, { ...(ngDevMode ? { debugName: "minlength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    maxlength = input(undefined, { ...(ngDevMode ? { debugName: "maxlength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+    mask = input(...(ngDevMode ? [undefined, { debugName: "mask" }] : /* istanbul ignore next */ []));
+    appearance = input(this.config.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input(this.config.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    theme = input(this.config.theme, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    color = input(this.config.color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    dir = input(this.config.dir, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    statusInput = input(null, { ...(ngDevMode ? { debugName: "statusInput" } : /* istanbul ignore next */ {}), alias: 'status' });
+    // ---- Disabled: input that seeds an internal writable signal ------------
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'disabled' });
+    _disabledOverride = signal(null, ...(ngDevMode ? [{ debugName: "_disabledOverride" }] : /* istanbul ignore next */ []));
+    // ---- Native-parity events ----------------------------------------------
+    // `value`/`model` models auto-emit `valueChange`/`modelChange`.
+    change = output();
+    inputEvent = output({ alias: 'input' });
+    focusEvent = output({ alias: 'focus' });
+    blurEvent = output({ alias: 'blur' });
+    // ---- Internal reactive state -------------------------------------------
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : /* istanbul ignore next */ []));
+    /** The bound engine control, if `[form] + controlName` are set. */
+    boundControl = computed(() => {
+        const f = this.form();
+        const key = this.controlName();
+        if (!f || !key)
+            return null;
+        return f.control(key);
+    }, ...(ngDevMode ? [{ debugName: "boundControl" }] : /* istanbul ignore next */ []));
+    // ---- Public reactive surface (the spec's control.* signals) ------------
+    current = computed(() => {
+        const bc = this.boundControl();
+        return bc ? bc.value() : this.value();
+    }, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => {
+        const o = this._disabledOverride();
+        if (o !== null)
+            return o;
+        return this.boundControl()?.disabled() ?? this.disabledInput();
+    }, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Errors injected by the Reactive/Template adapter (no bound signal form). */
+    _externalErrors = signal(null, ...(ngDevMode ? [{ debugName: "_externalErrors" }] : /* istanbul ignore next */ []));
+    errors = computed(() => this.boundControl()?.errors() ?? this._externalErrors(), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    valid = computed(() => this.boundControl()?.valid() ?? this.errors() === null, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => !this.valid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    pending = computed(() => this.boundControl()?.pending() ?? false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => this.boundControl()?.dirty() ?? this._dirty(), ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    touched = computed(() => this.boundControl()?.touched() ?? this._touched(), ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    focused = this._focused.asReadonly();
+    required = computed(() => this.boundControl()?.required() ?? this.requiredInput(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    status = computed(() => this.boundControl()?.status() ?? (this.disabled() ? 'DISABLED' : this.invalid() ? 'INVALID' : 'VALID'), ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Show validation error only once the field has been interacted with. */
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    /** Resolved error text: explicit `errorMessage` wins, else the first error. */
+    errorText = computed(() => this.errorMessage() ?? formatError(this.errors()), ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => {
+        const v = this.current();
+        return v !== null && v !== undefined && v !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep `value` and `model` aliases in sync for standalone two-way use.
+        effect(() => this.modelValue.set(this.value()));
+        effect(() => {
+            const m = this.modelValue();
+            if (m !== this.value())
+                this.value.set(m);
+        });
+    }
+    // ---- Mutators used by concrete templates -------------------------------
+    commit(v, kind) {
+        const bc = this.boundControl();
+        if (bc)
+            bc.setValue(v);
+        // Always update the two-way `value` model so `valueChange` fires in every mode.
+        this.value.set(v);
+        this._dirty.set(true);
+        this.committed.emit(v);
+        if (kind === 'input')
+            this.inputEvent.emit(v);
+        else
+            this.change.emit(v);
+    }
+    onFocus(ev) {
+        this._focused.set(true);
+        this.focusEvent.emit(ev);
+    }
+    onBlur(ev) {
+        this._focused.set(false);
+        this._touched.set(true);
+        this.boundControl()?.markTouched(true);
+        this.blurEvent.emit(ev);
+    }
+    setDisabled(disabled) {
+        this._disabledOverride.set(disabled);
+        this.boundControl()?.setDisabled(disabled);
+    }
+    // ---- Adapter hooks (used by ZvControlValueAccessor; no logic duplicated) -
+    /** Accept a value from a Reactive/Template control without re-emitting. */
+    acceptExternalValue(v) {
+        this.value.set(v);
+    }
+    /** Push validation errors computed by the adapter (same ZvValidators). */
+    setExternalErrors(e) {
+        this._externalErrors.set(e);
+    }
+    /** Mark touched from the adapter (e.g. on blur). */
+    markTouched() {
+        this.onBlur(new FocusEvent('blur'));
+    }
+    /** Subscribe to value commits (adapter -> NgControl onChange). */
+    committed = output({ alias: 'zvCommitted' });
+    clear() {
+        this.commit(null, 'change');
+    }
+    hostClasses = computed(() => {
+        const cls = [
+            `zv-${this.controlType}`,
+            `zv-appearance-${this.appearance()}`,
+            `zv-size-${this.size()}`,
+            `zv-theme-${this.theme()}`,
+            `zv-color-${this.color()}`,
+        ];
+        if (this.dir() === 'rtl')
+            cls.push('zv-rtl');
+        if (this.disabled())
+            cls.push('zv-disabled');
+        if (this.readonly())
+            cls.push('zv-readonly');
+        if (this.focused())
+            cls.push('zv-focused');
+        if (this.hasValue())
+            cls.push('zv-has-value');
+        if (this.loading())
+            cls.push('zv-loading');
+        if (this.floatingLabel())
+            cls.push('zv-floating');
+        if (this.rounded())
+            cls.push('zv-rounded');
+        if (this.showError())
+            cls.push('zv-invalid');
+        const s = this.statusInput();
+        if (s)
+            cls.push(`zv-status-${s}`);
+        return cls.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SignalControlAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SignalControlAccessor, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, modelValue: { classPropertyName: "modelValue", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, statusInput: { classPropertyName: "statusInput", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", modelValue: "modelChange", change: "change", inputEvent: "input", focusEvent: "focus", blurEvent: "blur", committed: "zvCommitted" }, host: { properties: { "class": "hostClasses()", "attr.dir": "dir()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SignalControlAccessor, decorators: [{
+            type: Directive,
+            args: [{ host: { '[class]': 'hostClasses()', '[attr.dir]': 'dir()' } }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], modelValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], statusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], inputEvent: [{ type: i0.Output, args: ["input"] }], focusEvent: [{ type: i0.Output, args: ["focus"] }], blurEvent: [{ type: i0.Output, args: ["blur"] }], committed: [{ type: i0.Output, args: ["zvCommitted"] }] } });
+
+/**
+ * Alias a concrete control to the abstract `SignalControlAccessor` token so the
+ * Reactive/Template adapter directive can inject it from the same element.
+ */
+function provideSignalControl(cmp) {
+    return { provide: SignalControlAccessor, useExisting: forwardRef(() => cmp) };
+}
+/**
+ * Standard provider trio every control registers so it integrates with
+ * Template-Driven and Reactive forms. `async` is opt-in.
+ */
+function controlProviders(cmp, opts = {}) {
+    const providers = [
+        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => cmp), multi: true },
+        { provide: NG_VALIDATORS, useExisting: forwardRef(() => cmp), multi: true },
+    ];
+    if (opts.async) {
+        providers.push({
+            provide: NG_ASYNC_VALIDATORS,
+            useExisting: forwardRef(() => cmp),
+            multi: true,
+        });
+    }
+    return providers;
+}
+
+/**
+ * Presentational wrapper: label, prefix/suffix icons, hint/error row,
+ * loading + clear affordances. Controls project their native element into it.
+ * Signal-first and OnPush — it never triggers extra change detection.
+ */
+class ZvFieldShell {
+    for = input(...(ngDevMode ? [undefined, { debugName: "for" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorText = input(...(ngDevMode ? [undefined, { debugName: "errorText" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    prefixIcon = input(...(ngDevMode ? [undefined, { debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
+    suffixIcon = input(...(ngDevMode ? [undefined, { debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loadingText = input(...(ngDevMode ? [undefined, { debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    hasValue = input(false, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    clear = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvFieldShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvFieldShell, isStandalone: true, selector: "zv-field-shell", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, hasValue: { classPropertyName: "hasValue", publicName: "hasValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, ngImport: i0, template: `
+    @if (label()) {
+      <label class="zv-label" [attr.for]="for()">
+        {{ label() }}@if (required()) {<span class="zv-req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="zv-field" [class.zv-field--invalid]="invalid()">
+      @if (prefixIcon()) {
+        <span class="zv-affix zv-prefix" aria-hidden="true"><i [class]="prefixIcon()"></i></span>
+      }
+
+      <ng-content></ng-content>
+
+      @if (loading()) {
+        <span class="zv-spinner" role="status" [attr.aria-label]="loadingText() || 'Loading'"></span>
+      } @else if (clearable() && hasValue() && !disabled() && !readonly()) {
+        <button type="button" class="zv-clear" (click)="clear.emit()" aria-label="Clear" tabindex="-1">×</button>
+      }
+
+      @if (suffixIcon()) {
+        <span class="zv-affix zv-suffix" aria-hidden="true"><i [class]="suffixIcon()"></i></span>
+      }
+    </div>
+
+    @if (invalid() && errorText()) {
+      <p class="zv-error" role="alert">{{ errorText() }}</p>
+    } @else if (hint() || helperText()) {
+      <p class="zv-hint">{{ hint() || helperText() }}</p>
+    }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--zv-font, inherit);margin-bottom:var(--zv-gap, 1rem)}.zv-label{display:inline-block;margin-bottom:.25rem;font-size:.85rem;font-weight:500;color:var(--zv-label-color, #374151)}.zv-req{color:var(--zv-warn, #dc2626);margin-inline-start:2px}.zv-field{display:flex;align-items:center;gap:.5rem;border:1px solid var(--zv-border, #d1d5db);border-radius:var(--zv-radius, .5rem);padding:0 .75rem;background:var(--zv-bg, #fff);transition:border-color .15s,box-shadow .15s}.zv-field:focus-within{border-color:var(--zv-primary, #2563eb);box-shadow:0 0 0 3px var(--zv-primary-ring, rgba(37, 99, 235, .2))}.zv-field--invalid{border-color:var(--zv-warn, #dc2626)}::ng-deep .zv-field>input,::ng-deep .zv-field>textarea,::ng-deep .zv-field>select{flex:1;border:0;outline:0;background:transparent;font:inherit;padding:.55rem 0;color:var(--zv-text, #111827);width:100%}.zv-clear{border:0;background:transparent;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--zv-muted, #6b7280)}.zv-spinner{width:1rem;height:1rem;border-radius:50%;border:2px solid var(--zv-border, #d1d5db);border-top-color:var(--zv-primary, #2563eb);animation:zv-spin .7s linear infinite}@keyframes zv-spin{to{transform:rotate(360deg)}}.zv-hint{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-muted, #6b7280)}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn, #dc2626)}:host-context(.zv-appearance-filled) .zv-field{background:var(--zv-filled-bg, #f3f4f6);border-color:transparent}:host-context(.zv-appearance-standard) .zv-field{border:0;border-bottom:1px solid var(--zv-border, #d1d5db);border-radius:0;padding-inline:0}:host-context(.zv-size-sm) .zv-field,:host-context(.zv-size-compact) .zv-field{padding-block:0}:host-context(.zv-size-dense) .zv-field ::ng-deep input{padding-block:.35rem}:host-context(.zv-rtl){direction:rtl}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvFieldShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-field-shell', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (label()) {
+      <label class="zv-label" [attr.for]="for()">
+        {{ label() }}@if (required()) {<span class="zv-req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="zv-field" [class.zv-field--invalid]="invalid()">
+      @if (prefixIcon()) {
+        <span class="zv-affix zv-prefix" aria-hidden="true"><i [class]="prefixIcon()"></i></span>
+      }
+
+      <ng-content></ng-content>
+
+      @if (loading()) {
+        <span class="zv-spinner" role="status" [attr.aria-label]="loadingText() || 'Loading'"></span>
+      } @else if (clearable() && hasValue() && !disabled() && !readonly()) {
+        <button type="button" class="zv-clear" (click)="clear.emit()" aria-label="Clear" tabindex="-1">×</button>
+      }
+
+      @if (suffixIcon()) {
+        <span class="zv-affix zv-suffix" aria-hidden="true"><i [class]="suffixIcon()"></i></span>
+      }
+    </div>
+
+    @if (invalid() && errorText()) {
+      <p class="zv-error" role="alert">{{ errorText() }}</p>
+    } @else if (hint() || helperText()) {
+      <p class="zv-hint">{{ hint() || helperText() }}</p>
+    }
+  `, styles: [":host{display:block;font-family:var(--zv-font, inherit);margin-bottom:var(--zv-gap, 1rem)}.zv-label{display:inline-block;margin-bottom:.25rem;font-size:.85rem;font-weight:500;color:var(--zv-label-color, #374151)}.zv-req{color:var(--zv-warn, #dc2626);margin-inline-start:2px}.zv-field{display:flex;align-items:center;gap:.5rem;border:1px solid var(--zv-border, #d1d5db);border-radius:var(--zv-radius, .5rem);padding:0 .75rem;background:var(--zv-bg, #fff);transition:border-color .15s,box-shadow .15s}.zv-field:focus-within{border-color:var(--zv-primary, #2563eb);box-shadow:0 0 0 3px var(--zv-primary-ring, rgba(37, 99, 235, .2))}.zv-field--invalid{border-color:var(--zv-warn, #dc2626)}::ng-deep .zv-field>input,::ng-deep .zv-field>textarea,::ng-deep .zv-field>select{flex:1;border:0;outline:0;background:transparent;font:inherit;padding:.55rem 0;color:var(--zv-text, #111827);width:100%}.zv-clear{border:0;background:transparent;cursor:pointer;font-size:1.1rem;line-height:1;color:var(--zv-muted, #6b7280)}.zv-spinner{width:1rem;height:1rem;border-radius:50%;border:2px solid var(--zv-border, #d1d5db);border-top-color:var(--zv-primary, #2563eb);animation:zv-spin .7s linear infinite}@keyframes zv-spin{to{transform:rotate(360deg)}}.zv-hint{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-muted, #6b7280)}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn, #dc2626)}:host-context(.zv-appearance-filled) .zv-field{background:var(--zv-filled-bg, #f3f4f6);border-color:transparent}:host-context(.zv-appearance-standard) .zv-field{border:0;border-bottom:1px solid var(--zv-border, #d1d5db);border-radius:0;padding-inline:0}:host-context(.zv-size-sm) .zv-field,:host-context(.zv-size-compact) .zv-field{padding-block:0}:host-context(.zv-size-dense) .zv-field ::ng-deep input{padding-block:.35rem}:host-context(.zv-rtl){direction:rtl}\n"] }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], hasValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+
+/**
+ * Single-line text input. Signal-first: binds via `[(value)]`, or via a Signal
+ * Form using `[form]` + `controlName`.
+ *
+ * @example <zv-input [form]="form" controlName="firstName" label="First name" />
+ */
+class ZvInput extends SignalControlAccessor {
+    controlType = 'input';
+    inputType = input('text', ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: ZvInput, isStandalone: true, selector: "zv-input", inputs: { inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSignalControl(ZvInput)], usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id()"
+      [label]="label()"
+      [required]="required()"
+      [hint]="hint()"
+      [helperText]="helperText()"
+      [errorText]="errorText()"
+      [invalid]="showError()"
+      [prefixIcon]="prefixIcon()"
+      [suffixIcon]="suffixIcon()"
+      [loading]="loading()"
+      [loadingText]="loadingText()"
+      [clearable]="clearable()"
+      [hasValue]="hasValue()"
+      [disabled]="disabled()"
+      [readonly]="readonly()"
+      (clear)="clear()"
+    >
+      <input
+        [id]="id()"
+        [type]="inputType()"
+        [name]="name()"
+        [value]="current() ?? ''"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        [attr.maxlength]="maxlength()"
+        [attr.minlength]="minlength()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.aria-label]="ariaLabel() || label()"
+        [attr.aria-invalid]="showError()"
+        [attr.aria-required]="required()"
+        [attr.title]="tooltip()"
+        [tabIndex]="tabIndex()"
+        (input)="commit($any($event.target).value, 'input')"
+        (change)="commit($any($event.target).value, 'change')"
+        (focus)="onFocus($event)"
+        (blur)="onBlur($event)"
+      />
+    </zv-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-input',
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [provideSignalControl(ZvInput)],
+                    template: `
+    <zv-field-shell
+      [for]="id()"
+      [label]="label()"
+      [required]="required()"
+      [hint]="hint()"
+      [helperText]="helperText()"
+      [errorText]="errorText()"
+      [invalid]="showError()"
+      [prefixIcon]="prefixIcon()"
+      [suffixIcon]="suffixIcon()"
+      [loading]="loading()"
+      [loadingText]="loadingText()"
+      [clearable]="clearable()"
+      [hasValue]="hasValue()"
+      [disabled]="disabled()"
+      [readonly]="readonly()"
+      (clear)="clear()"
+    >
+      <input
+        [id]="id()"
+        [type]="inputType()"
+        [name]="name()"
+        [value]="current() ?? ''"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readOnly]="readonly()"
+        [attr.maxlength]="maxlength()"
+        [attr.minlength]="minlength()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.aria-label]="ariaLabel() || label()"
+        [attr.aria-invalid]="showError()"
+        [attr.aria-required]="required()"
+        [attr.title]="tooltip()"
+        [tabIndex]="tabIndex()"
+        (input)="commit($any($event.target).value, 'input')"
+        (change)="commit($any($event.target).value, 'change')"
+        (focus)="onFocus($event)"
+        (blur)="onBlur($event)"
+      />
+    </zv-field-shell>
+  `,
+                }]
+        }], propDecorators: { inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }] } });
+
+/**
+ * Base class shared by every Zellvora control.
+ *
+ * Implements `ControlValueAccessor` + `Validator` so the same component works
+ * unchanged across Template-Driven (`ngModel`), Reactive (`formControlName`)
+ * and Signal Forms (via the `zvSignal` directive). Internal state is held in
+ * signals, so views can run fully `OnPush` with no manual `markForCheck`.
+ *
+ * Concrete controls extend this, set `controlType`, and bind `[value]` /
+ * `(handleInput)` / `(handleBlur)` in their template.
+ */
+class ZvBaseControl {
+    config = inject(ZV_INPUT_CONFIG);
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    // ---- Identity -----------------------------------------------------------
+    get id() {
+        return `zv-${this.controlType ?? 'ctrl'}-${uid()}`;
+    }
+    name;
+    // ---- Developer-experience inputs ---------------------------------------
+    label;
+    placeholder = '';
+    hint;
+    helperText;
+    errorMessage;
+    prefixIcon;
+    suffixIcon;
+    tooltip;
+    ariaLabel;
+    autocomplete = 'off';
+    loadingText;
+    tabIndex = 0;
+    // ---- Boolean state (attribute-transformed for `<zv-x clearable>`) -------
+    clearable = this.config.clearable;
+    readonly = false;
+    required = false;
+    loading = false;
+    floatingLabel = this.config.floatingLabel;
+    // ---- Constraint inputs (also fed to validators) -------------------------
+    minlength;
+    maxlength;
+    min;
+    max;
+    pattern;
+    mask;
+    // ---- Appearance ---------------------------------------------------------
+    appearance = this.config.appearance;
+    size = this.config.size;
+    theme = this.config.theme;
+    color = this.config.color;
+    dir = this.config.dir;
+    status = null;
+    // ---- Reactive internal state -------------------------------------------
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    /** Public readonly value signal — useful for Signal Forms & templates. */
+    valueSig = this._value.asReadonly();
+    disabledSig = this._disabled.asReadonly();
+    focusedSig = this._focused.asReadonly();
+    /** Has content for floating-label / empty-state styling. */
+    hasValue = computed(() => {
+        const v = this._value();
+        return v !== null && v !== undefined && v !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    // ---- Two-way binding & native-parity events -----------------------------
+    /** Enables `[(value)]`. */
+    valueChange = new EventEmitter();
+    input = new EventEmitter();
+    change = new EventEmitter();
+    focus = new EventEmitter();
+    blur = new EventEmitter();
+    /** `[(value)]` setter for direct (non-forms) usage. */
+    set value(v) {
+        if (v !== this._value()) {
+            this._value.set(v);
+        }
+    }
+    get value() {
+        return this._value();
+    }
+    set disabled(v) {
+        this._disabled.set(v);
+    }
+    get disabled() {
+        return this._disabled();
+    }
+    // ---- Signal Forms mode --------------------------------------------------
+    /** A writable signal holding the form model, e.g. `signal({ name: '' })`. */
+    signal;
+    /** Key within the signal model this control is bound to. */
+    controlName;
+    // ---- CVA plumbing -------------------------------------------------------
+    _onChange = () => { };
+    _onTouched = () => { };
+    _onValidatorChange = () => { };
+    constructor() {
+        // Bridge the value signal to the OnPush view without manual CD.
+        effect(() => {
+            this._value();
+            this._disabled();
+            this._focused();
+            this.cdr.markForCheck();
+        });
+        // Signal Forms: pull model -> control whenever the signal/key changes.
+        effect(() => {
+            if (this.signal && this.controlName) {
+                const model = this.signal();
+                const next = model[this.controlName];
+                if (next !== this._value())
+                    this._value.set(next);
+            }
+        });
+    }
+    /** Signal Forms: push control -> model (called from setValue). */
+    syncToSignal(v) {
+        if (this.signal && this.controlName) {
+            this.signal.update((m) => ({ ...m, [this.controlName]: v }));
+        }
+    }
+    // ---- ControlValueAccessor ----------------------------------------------
+    writeValue(value) {
+        this._value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    // ---- Validator (subclasses add via `ownValidators`) --------------------
+    validate(control) {
+        const fns = this.ownValidators();
+        if (this.required)
+            fns.unshift(requiredFn);
+        for (const fn of fns) {
+            const err = fn(control);
+            if (err)
+                return err;
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    /** Override to contribute control-specific validators (email, min, etc.). */
+    ownValidators() {
+        return [];
+    }
+    /** Call when constraint inputs change so the parent re-runs validation. */
+    notifyValidatorChange() {
+        this._onValidatorChange();
+    }
+    // ---- Event handlers used by subclass templates -------------------------
+    setValue(v, emitInput = true) {
+        this._value.set(v);
+        this._onChange(v);
+        this.syncToSignal(v);
+        this.valueChange.emit(v);
+        if (emitInput)
+            this.input.emit(v);
+    }
+    handleInput(v) {
+        this.setValue(v, true);
+    }
+    handleChange(v) {
+        this.setValue(v, false);
+        this.change.emit(v);
+    }
+    handleFocus(ev) {
+        this._focused.set(true);
+        this.focus.emit(ev);
+    }
+    handleBlur(ev) {
+        this._focused.set(false);
+        this._touched.set(true);
+        this._onTouched();
+        this.blur.emit(ev);
+    }
+    /** Clear button handler. */
+    clear() {
+        this.setValue(null);
+        this.change.emit(null);
+    }
+    // ---- Host class map for styling ----------------------------------------
+    get hostClasses() {
+        return {
+            [`zv-${this.controlType}`]: true,
+            [`zv-appearance-${this.appearance}`]: true,
+            [`zv-size-${this.size}`]: true,
+            [`zv-theme-${this.theme}`]: true,
+            [`zv-color-${this.color}`]: true,
+            'zv-rtl': this.dir === 'rtl',
+            'zv-disabled': this._disabled(),
+            'zv-readonly': this.readonly,
+            'zv-focused': this._focused(),
+            'zv-has-value': this.hasValue(),
+            'zv-loading': this.loading,
+            'zv-floating': this.floatingLabel,
+            [`zv-status-${this.status}`]: !!this.status,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvBaseControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.17", type: ZvBaseControl, isStandalone: true, inputs: { name: "name", label: "label", placeholder: "placeholder", hint: "hint", helperText: "helperText", errorMessage: "errorMessage", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", tooltip: "tooltip", ariaLabel: "ariaLabel", autocomplete: "autocomplete", loadingText: "loadingText", tabIndex: ["tabIndex", "tabIndex", numberAttribute], clearable: ["clearable", "clearable", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], required: ["required", "required", booleanAttribute], loading: ["loading", "loading", booleanAttribute], floatingLabel: ["floatingLabel", "floatingLabel", booleanAttribute], minlength: ["minlength", "minlength", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], min: "min", max: "max", pattern: "pattern", mask: "mask", appearance: "appearance", size: "size", theme: "theme", color: "color", dir: "dir", status: "status", value: "value", disabled: ["disabled", "disabled", booleanAttribute], signal: "signal", controlName: "controlName" }, outputs: { valueChange: "valueChange", input: "input", change: "change", focus: "focus", blur: "blur" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvBaseControl, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], prefixIcon: [{
+                type: Input
+            }], suffixIcon: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], loadingText: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], clearable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], floatingLabel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], minlength: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], maxlength: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], input: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], signal: [{
+                type: Input
+            }], controlName: [{
+                type: Input
+            }] } });
+const requiredFn = (c) => {
+    const v = c.value;
+    const empty = v === null || v === undefined || v === '' || (Array.isArray(v) && !v.length);
+    return empty ? { required: true } : null;
+};
+
+/** Treat null/undefined/'' as "absent" — required is a separate validator. */
+const absent = (v) => v === null || v === undefined || v === '';
+const test = (re, key) => (c) => absent(c.value) || re.test(String(c.value)) ? null : { [key]: true };
+// ---- Patterns --------------------------------------------------------------
+const RE = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    phone: /^\+?[0-9]{7,15}$/,
+    url: /^(https?:\/\/)([\w-]+\.)+[\w-]+(\/[\w./?%&=#-]*)?$/i,
+    pan: /^[A-Z]{5}[0-9]{4}[A-Z]$/,
+    gst: /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z][0-9A-Z]Z[0-9A-Z]$/,
+    aadhaar: /^[2-9][0-9]{11}$/,
+    cvv: /^[0-9]{3,4}$/,
+    passport: /^[A-PR-WY][0-9]{7}$/, // Indian passport format
+    drivingLicense: /^[A-Z]{2}[0-9]{2}\s?[0-9]{11}$/,
+    pincode: /^[1-9][0-9]{5}$/,
+    // Strong password: 8+, upper, lower, digit, special.
+    password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/,
+};
+const ZvValidators = {
+    required(c) {
+        const v = c.value;
+        const empty = absent(v) || (Array.isArray(v) && v.length === 0) || v === false;
+        return empty ? { required: true } : null;
+    },
+    email: test(RE.email, 'email'),
+    phone: test(RE.phone, 'phone'),
+    url: test(RE.url, 'url'),
+    pincode: test(RE.pincode, 'pincode'),
+    cvv: test(RE.cvv, 'cvv'),
+    passport: test(RE.passport, 'passport'),
+    drivingLicense: test(RE.drivingLicense, 'drivingLicense'),
+    password: test(RE.password, 'password'),
+    pattern(p) {
+        const re = typeof p === 'string' ? new RegExp(p) : p;
+        return test(re, 'pattern');
+    },
+    regex(p) {
+        return ZvValidators.pattern(p);
+    },
+    min(n) {
+        return (c) => (absent(c.value) || +c.value >= n ? null : { min: { min: n, actual: +c.value } });
+    },
+    max(n) {
+        return (c) => (absent(c.value) || +c.value <= n ? null : { max: { max: n, actual: +c.value } });
+    },
+    minLength(n) {
+        return (c) => absent(c.value) || String(c.value).length >= n
+            ? null
+            : { minlength: { requiredLength: n, actualLength: String(c.value).length } };
+    },
+    maxLength(n) {
+        return (c) => absent(c.value) || String(c.value).length <= n
+            ? null
+            : { maxlength: { requiredLength: n, actualLength: String(c.value).length } };
+    },
+    date(c) {
+        if (absent(c.value))
+            return null;
+        const d = new Date(c.value);
+        return isNaN(d.getTime()) ? { date: true } : null;
+    },
+    /** Minimum age in whole years relative to today. */
+    age(minYears) {
+        return (c) => {
+            if (absent(c.value))
+                return null;
+            const dob = new Date(c.value);
+            if (isNaN(dob.getTime()))
+                return { date: true };
+            const now = new Date();
+            let age = now.getFullYear() - dob.getFullYear();
+            const m = now.getMonth() - dob.getMonth();
+            if (m < 0 || (m === 0 && now.getDate() < dob.getDate()))
+                age--;
+            return age >= minYears ? null : { age: { required: minYears, actual: age } };
+        };
+    },
+    pan: test(RE.pan, 'pan'),
+    gst: test(RE.gst, 'gst'),
+    /** Aadhaar: format + Verhoeff checksum. */
+    aadhaar(c) {
+        if (absent(c.value))
+            return null;
+        const s = String(c.value).replace(/\s/g, '');
+        return RE.aadhaar.test(s) && verhoeff(s) ? null : { aadhaar: true };
+    },
+    /** Credit card: digits + Luhn checksum. */
+    creditCard(c) {
+        if (absent(c.value))
+            return null;
+        const s = String(c.value).replace(/[\s-]/g, '');
+        return /^[0-9]{12,19}$/.test(s) && luhn(s) ? null : { creditCard: true };
+    },
+    /** Cross-field: confirm `field` matches `other`. Apply on a FormGroup. */
+    confirm(field, other, key = 'mismatch') {
+        return (group) => {
+            const a = group.get(field)?.value;
+            const b = group.get(other)?.value;
+            return a === b ? null : { [key]: true };
+        };
+    },
+};
+// ---- Checksum helpers ------------------------------------------------------
+function luhn(num) {
+    let sum = 0;
+    let alt = false;
+    for (let i = num.length - 1; i >= 0; i--) {
+        let d = +num[i];
+        if (alt) {
+            d *= 2;
+            if (d > 9)
+                d -= 9;
+        }
+        sum += d;
+        alt = !alt;
+    }
+    return sum % 10 === 0;
+}
+const D = [
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    [1, 2, 3, 4, 0, 6, 7, 8, 9, 5],
+    [2, 3, 4, 0, 1, 7, 8, 9, 5, 6],
+    [3, 4, 0, 1, 2, 8, 9, 5, 6, 7],
+    [4, 0, 1, 2, 3, 9, 5, 6, 7, 8],
+    [5, 9, 8, 7, 6, 0, 4, 3, 2, 1],
+    [6, 5, 9, 8, 7, 1, 0, 4, 3, 2],
+    [7, 6, 5, 9, 8, 2, 1, 0, 4, 3],
+    [8, 7, 6, 5, 9, 3, 2, 1, 0, 4],
+    [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
+];
+const P = [
+    [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    [1, 5, 7, 6, 2, 8, 3, 0, 9, 4],
+    [5, 8, 0, 3, 7, 9, 6, 1, 4, 2],
+    [8, 9, 1, 6, 0, 4, 3, 5, 2, 7],
+    [9, 4, 5, 3, 1, 2, 6, 8, 7, 0],
+    [4, 2, 8, 6, 5, 7, 3, 9, 0, 1],
+    [2, 7, 9, 3, 8, 0, 6, 4, 1, 5],
+    [7, 0, 4, 6, 9, 1, 3, 2, 5, 8],
+];
+function verhoeff(num) {
+    let c = 0;
+    const digits = num.split('').reverse().map(Number);
+    for (let i = 0; i < digits.length; i++)
+        c = D[c][P[i % 8][digits[i]]];
+    return c === 0;
+}
+
+/**
+ * Base for all single-line / multi-line text controls. Subclasses set
+ * `controlType`, the native `inputType`, and any extra validators.
+ */
+class ZvTextControlBase extends ZvBaseControl {
+    maxRows = 4; // textarea only
+    onNativeInput(ev) {
+        const target = ev.target;
+        this.handleInput(target.value);
+    }
+    onNativeChange(ev) {
+        const target = ev.target;
+        this.handleChange(target.value);
+    }
+    ownValidators() {
+        const v = [];
+        if (this.minlength != null)
+            v.push(ZvValidators.minLength(this.minlength));
+        if (this.maxlength != null)
+            v.push(ZvValidators.maxLength(this.maxlength));
+        if (this.pattern)
+            v.push(ZvValidators.pattern(this.pattern));
+        return v;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvTextControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ZvTextControlBase, isStandalone: true, inputs: { maxRows: "maxRows" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvTextControlBase, decorators: [{
+            type: Directive
+        }], propDecorators: { maxRows: [{
+                type: Input
+            }] } });
+
+/** Shared template for single-line text controls (input/email/password/number). */
+const TEXT_TEMPLATE = `
+  <zv-field-shell
+    [for]="id" [label]="label" [required]="required" [hint]="hint"
+    [helperText]="helperText" [errorText]="errorMessage"
+    [invalid]="status === 'error'" [prefixIcon]="prefixIcon" [suffixIcon]="suffixIcon"
+    [loading]="loading" [loadingText]="loadingText" [clearable]="clearable"
+    [hasValue]="hasValue()" [disabled]="disabledSig()" [readonly]="readonly"
+    (clear)="clear()">
+    <input
+      [id]="id" [type]="inputType" [name]="name" [value]="valueSig() ?? ''"
+      [placeholder]="placeholder" [disabled]="disabledSig()" [readOnly]="readonly"
+      [attr.maxlength]="maxlength" [attr.minlength]="minlength"
+      [attr.min]="min" [attr.max]="max"
+      [attr.autocomplete]="autocomplete" [attr.aria-label]="ariaLabel || label"
+      [attr.aria-invalid]="status === 'error'" [attr.title]="tooltip" [tabIndex]="tabIndex"
+      (input)="onNativeInput($event)" (change)="onNativeChange($event)"
+      (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+  </zv-field-shell>
+`;
+
+class ZvEmail extends ZvTextControlBase {
+    controlType = 'email';
+    inputType = 'email';
+    autocomplete = 'email';
+    ownValidators() {
+        return [...super.ownValidators(), ZvValidators.email];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvEmail, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ZvEmail, isStandalone: true, selector: "zv-email", providers: controlProviders(ZvEmail), usesInheritance: true, ngImport: i0, template: "\n  <zv-field-shell\n    [for]=\"id\" [label]=\"label\" [required]=\"required\" [hint]=\"hint\"\n    [helperText]=\"helperText\" [errorText]=\"errorMessage\"\n    [invalid]=\"status === 'error'\" [prefixIcon]=\"prefixIcon\" [suffixIcon]=\"suffixIcon\"\n    [loading]=\"loading\" [loadingText]=\"loadingText\" [clearable]=\"clearable\"\n    [hasValue]=\"hasValue()\" [disabled]=\"disabledSig()\" [readonly]=\"readonly\"\n    (clear)=\"clear()\">\n    <input\n      [id]=\"id\" [type]=\"inputType\" [name]=\"name\" [value]=\"valueSig() ?? ''\"\n      [placeholder]=\"placeholder\" [disabled]=\"disabledSig()\" [readOnly]=\"readonly\"\n      [attr.maxlength]=\"maxlength\" [attr.minlength]=\"minlength\"\n      [attr.min]=\"min\" [attr.max]=\"max\"\n      [attr.autocomplete]=\"autocomplete\" [attr.aria-label]=\"ariaLabel || label\"\n      [attr.aria-invalid]=\"status === 'error'\" [attr.title]=\"tooltip\" [tabIndex]=\"tabIndex\"\n      (input)=\"onNativeInput($event)\" (change)=\"onNativeChange($event)\"\n      (focus)=\"handleFocus($event)\" (blur)=\"handleBlur($event)\" />\n  </zv-field-shell>\n", isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvEmail, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-email',
+                    standalone: true,
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: controlProviders(ZvEmail),
+                    template: TEXT_TEMPLATE,
+                }]
+        }] });
+
+class ZvPassword extends ZvTextControlBase {
+    controlType = 'password';
+    inputType = 'password';
+    autocomplete = 'current-password';
+    toggle = true;
+    strong = false;
+    reveal = signal(false, ...(ngDevMode ? [{ debugName: "reveal" }] : /* istanbul ignore next */ []));
+    ownValidators() {
+        const v = super.ownValidators();
+        if (this.strong)
+            v.push(ZvValidators.password);
+        return v;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvPassword, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvPassword, isStandalone: true, selector: "zv-password", inputs: { toggle: ["toggle", "toggle", booleanAttribute], strong: ["strong", "strong", booleanAttribute] }, providers: controlProviders(ZvPassword), usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [helperText]="helperText" [errorText]="errorMessage"
+      [invalid]="status === 'error'" [prefixIcon]="prefixIcon"
+      [loading]="loading" [clearable]="false" [hasValue]="hasValue()"
+      [disabled]="disabledSig()" [readonly]="readonly">
+      <input
+        [id]="id" [type]="reveal() ? 'text' : 'password'" [name]="name"
+        [value]="valueSig() ?? ''" [placeholder]="placeholder"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.minlength]="minlength" [attr.maxlength]="maxlength"
+        [attr.autocomplete]="autocomplete" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex"
+        (input)="onNativeInput($event)" (change)="onNativeChange($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+      @if (toggle) {
+        <button type="button" class="zv-clear" tabindex="-1"
+          [attr.aria-label]="reveal() ? 'Hide password' : 'Show password'"
+          (click)="reveal.set(!reveal())">{{ reveal() ? '🙈' : '👁' }}</button>
+      }
+    </zv-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvPassword, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-password',
+                    standalone: true,
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: controlProviders(ZvPassword),
+                    template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [helperText]="helperText" [errorText]="errorMessage"
+      [invalid]="status === 'error'" [prefixIcon]="prefixIcon"
+      [loading]="loading" [clearable]="false" [hasValue]="hasValue()"
+      [disabled]="disabledSig()" [readonly]="readonly">
+      <input
+        [id]="id" [type]="reveal() ? 'text' : 'password'" [name]="name"
+        [value]="valueSig() ?? ''" [placeholder]="placeholder"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.minlength]="minlength" [attr.maxlength]="maxlength"
+        [attr.autocomplete]="autocomplete" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex"
+        (input)="onNativeInput($event)" (change)="onNativeChange($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+      @if (toggle) {
+        <button type="button" class="zv-clear" tabindex="-1"
+          [attr.aria-label]="reveal() ? 'Hide password' : 'Show password'"
+          (click)="reveal.set(!reveal())">{{ reveal() ? '🙈' : '👁' }}</button>
+      }
+    </zv-field-shell>
+  `,
+                }]
+        }], propDecorators: { toggle: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], strong: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+class ZvNumber extends ZvBaseControl {
+    controlType = 'number';
+    step = 1;
+    onInput(ev) {
+        const raw = ev.target.value;
+        this.handleInput(raw === '' ? null : Number(raw));
+    }
+    ownValidators() {
+        const v = [];
+        if (this.min != null)
+            v.push(ZvValidators.min(Number(this.min)));
+        if (this.max != null)
+            v.push(ZvValidators.max(Number(this.max)));
+        return v;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvNumber, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.17", type: ZvNumber, isStandalone: true, selector: "zv-number", inputs: { step: ["step", "step", numberAttribute] }, providers: controlProviders(ZvNumber), usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [helperText]="helperText" [errorText]="errorMessage"
+      [invalid]="status === 'error'" [prefixIcon]="prefixIcon" [suffixIcon]="suffixIcon"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      [readonly]="readonly" (clear)="clear()">
+      <input type="number"
+        [id]="id" [name]="name" [value]="valueSig() ?? ''" [placeholder]="placeholder"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.min]="min" [attr.max]="max" [attr.step]="step"
+        [attr.aria-label]="ariaLabel || label" [tabIndex]="tabIndex"
+        (input)="onInput($event)" (change)="onInput($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+    </zv-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvNumber, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-number',
+                    standalone: true,
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: controlProviders(ZvNumber),
+                    template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [helperText]="helperText" [errorText]="errorMessage"
+      [invalid]="status === 'error'" [prefixIcon]="prefixIcon" [suffixIcon]="suffixIcon"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      [readonly]="readonly" (clear)="clear()">
+      <input type="number"
+        [id]="id" [name]="name" [value]="valueSig() ?? ''" [placeholder]="placeholder"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.min]="min" [attr.max]="max" [attr.step]="step"
+        [attr.aria-label]="ariaLabel || label" [tabIndex]="tabIndex"
+        (input)="onInput($event)" (change)="onInput($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+    </zv-field-shell>
+  `,
+                }]
+        }], propDecorators: { step: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }] } });
+
+class ZvTextarea extends ZvTextControlBase {
+    controlType = 'textarea';
+    inputType = 'textarea';
+    rows = 4;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.17", type: ZvTextarea, isStandalone: true, selector: "zv-textarea", inputs: { rows: ["rows", "rows", numberAttribute] }, providers: controlProviders(ZvTextarea), usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [helperText]="helperText" [errorText]="errorMessage"
+      [invalid]="status === 'error'" [clearable]="clearable" [hasValue]="hasValue()"
+      [disabled]="disabledSig()" [readonly]="readonly" (clear)="clear()">
+      <textarea
+        [id]="id" [name]="name" [value]="valueSig() ?? ''" [placeholder]="placeholder"
+        [disabled]="disabledSig()" [readOnly]="readonly" [rows]="rows"
+        [attr.maxlength]="maxlength" [attr.minlength]="minlength"
+        [attr.aria-label]="ariaLabel || label" [tabIndex]="tabIndex"
+        (input)="onNativeInput($event)" (change)="onNativeChange($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)"></textarea>
+    </zv-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvTextarea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-textarea',
+                    standalone: true,
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: controlProviders(ZvTextarea),
+                    template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [helperText]="helperText" [errorText]="errorMessage"
+      [invalid]="status === 'error'" [clearable]="clearable" [hasValue]="hasValue()"
+      [disabled]="disabledSig()" [readonly]="readonly" (clear)="clear()">
+      <textarea
+        [id]="id" [name]="name" [value]="valueSig() ?? ''" [placeholder]="placeholder"
+        [disabled]="disabledSig()" [readOnly]="readonly" [rows]="rows"
+        [attr.maxlength]="maxlength" [attr.minlength]="minlength"
+        [attr.aria-label]="ariaLabel || label" [tabIndex]="tabIndex"
+        (input)="onNativeInput($event)" (change)="onNativeChange($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)"></textarea>
+    </zv-field-shell>
+  `,
+                }]
+        }], propDecorators: { rows: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }] } });
+
+/**
+ * Wraps the native date input for full a11y + parity, normalizing the value to
+ * an ISO `yyyy-MM-dd` string. Swap the inner element for a custom calendar
+ * without touching the CVA contract.
+ */
+class ZvDatepicker extends ZvBaseControl {
+    controlType = 'datepicker';
+    onInput(ev) {
+        this.handleInput(ev.target.value || null);
+    }
+    ownValidators() {
+        return [ZvValidators.date];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ZvDatepicker, isStandalone: true, selector: "zv-datepicker", providers: controlProviders(ZvDatepicker), usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [errorText]="errorMessage" [invalid]="status === 'error'" [prefixIcon]="prefixIcon"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      (clear)="clear()">
+      <input type="date" [id]="id" [name]="name" [value]="valueSig() ?? ''"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.min]="min" [attr.max]="max" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (input)="onInput($event)" (change)="onInput($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+    </zv-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvDatepicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-datepicker',
+                    standalone: true,
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: controlProviders(ZvDatepicker),
+                    template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [errorText]="errorMessage" [invalid]="status === 'error'" [prefixIcon]="prefixIcon"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      (clear)="clear()">
+      <input type="date" [id]="id" [name]="name" [value]="valueSig() ?? ''"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.min]="min" [attr.max]="max" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (input)="onInput($event)" (change)="onInput($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+    </zv-field-shell>
+  `,
+                }]
+        }] });
+
+class ZvTimepicker extends ZvBaseControl {
+    controlType = 'timepicker';
+    onInput(ev) {
+        this.handleInput(ev.target.value || null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvTimepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ZvTimepicker, isStandalone: true, selector: "zv-timepicker", providers: controlProviders(ZvTimepicker), usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [errorText]="errorMessage" [invalid]="status === 'error'" [prefixIcon]="prefixIcon"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      (clear)="clear()">
+      <input type="time" [id]="id" [name]="name" [value]="valueSig() ?? ''"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.min]="min" [attr.max]="max" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (input)="onInput($event)" (change)="onInput($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+    </zv-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvTimepicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zv-timepicker',
+                    standalone: true,
+                    imports: [ZvFieldShell],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: controlProviders(ZvTimepicker),
+                    template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [errorText]="errorMessage" [invalid]="status === 'error'" [prefixIcon]="prefixIcon"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      (clear)="clear()">
+      <input type="time" [id]="id" [name]="name" [value]="valueSig() ?? ''"
+        [disabled]="disabledSig()" [readOnly]="readonly"
+        [attr.min]="min" [attr.max]="max" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (input)="onInput($event)" (change)="onInput($event)"
+        (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+    </zv-field-shell>
+  `,
+                }]
+        }] });
+
+/**
+ * Single-select with virtual-scrolled listbox + keyboard support.
+ * Accepts either `ZvOption[]` or a raw `T[]` via `bindLabel`/`bindValue`.
+ */
+class ZvSelect extends SignalControlAccessor {
+    controlType = 'select';
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    bindLabel = input('label', ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
+    bindValue = input('value', ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    options = computed(() => {
+        const label = this.bindLabel();
+        const value = this.bindValue();
+        return this.items().map((it) => it && typeof it === 'object' && label in it
+            ? {
+                label: String(it[label]),
+                value: (it[value] ?? it),
+            }
+            : { label: String(it), value: it });
+    }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const v = this.current();
+        return this.options().find((o) => o.value === v)?.label ?? '';
+    }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.disabled() && !this.readonly())
+            this.open.set(!this.open());
+    }
+    pick(o) {
+        this.commit(o.value, 'change');
+        this.open.set(false);
+    }
+    onKeydown(ev) {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+            ev.preventDefault();
+            this.toggle();
+        }
+        else if (ev.key === 'Escape') {
+            this.open.set(false);
+        }
+    }
+    trackByValue = (_, o) => o.value;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvSelect, isStandalone: true, selector: "zv-select", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSignalControl(ZvSelect)], usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id()" [label]="label()" [required]="required()" [hint]="hint()"
+      [helperText]="helperText()" [errorText]="errorText()"
+      [invalid]="showError()" [clearable]="clearable()" [hasValue]="hasValue()"
+      [disabled]="disabled()" [readonly]="readonly()" (clear)="clear()">
+      <button type="button" class="zv-select-trigger" role="combobox"
+        [id]="id()" [disabled]="disabled()" [attr.aria-expanded]="open()"
+        [attr.aria-haspopup]="'listbox'" [attr.aria-label]="ariaLabel() || label()"
+        [tabIndex]="tabIndex()"
+        (click)="toggle()" (keydown)="onKeydown($event)"
+        (blur)="onBlur($event)" (focus)="onFocus($event)">
+        {{ selectedLabel() || placeholder() }}
+      </button>
+    </zv-field-shell>
+
+    @if (open()) {
+      <ul class="zv-listbox" role="listbox">
+        <cdk-virtual-scroll-viewport [itemSize]="36" class="zv-vs">
+          <li *cdkVirtualFor="let opt of options(); trackBy: trackByValue"
+            role="option" class="zv-option"
+            [class.zv-selected]="opt.value === current()"
+            [attr.aria-selected]="opt.value === current()"
+            [class.zv-disabled]="opt.disabled"
+            (click)="!opt.disabled && pick(opt)">
+            {{ opt.label }}
+          </li>
+        </cdk-virtual-scroll-viewport>
+      </ul>
+    }
+  `, isInline: true, styles: [".zv-select-trigger{all:unset;flex:1;cursor:pointer;padding:.55rem 0}.zv-listbox{list-style:none;margin:.25rem 0 0;padding:0;border:1px solid var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem);background:var(--zv-bg,#fff);box-shadow:0 8px 24px #0000001f}.zv-vs{height:240px}.zv-option{height:36px;display:flex;align-items:center;padding:0 .75rem;cursor:pointer}.zv-option:hover{background:var(--zv-hover,#f3f4f6)}.zv-selected{background:var(--zv-primary,#2563eb);color:#fff}.zv-disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-select', imports: [ZvFieldShell, ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideSignalControl(ZvSelect)], template: `
+    <zv-field-shell
+      [for]="id()" [label]="label()" [required]="required()" [hint]="hint()"
+      [helperText]="helperText()" [errorText]="errorText()"
+      [invalid]="showError()" [clearable]="clearable()" [hasValue]="hasValue()"
+      [disabled]="disabled()" [readonly]="readonly()" (clear)="clear()">
+      <button type="button" class="zv-select-trigger" role="combobox"
+        [id]="id()" [disabled]="disabled()" [attr.aria-expanded]="open()"
+        [attr.aria-haspopup]="'listbox'" [attr.aria-label]="ariaLabel() || label()"
+        [tabIndex]="tabIndex()"
+        (click)="toggle()" (keydown)="onKeydown($event)"
+        (blur)="onBlur($event)" (focus)="onFocus($event)">
+        {{ selectedLabel() || placeholder() }}
+      </button>
+    </zv-field-shell>
+
+    @if (open()) {
+      <ul class="zv-listbox" role="listbox">
+        <cdk-virtual-scroll-viewport [itemSize]="36" class="zv-vs">
+          <li *cdkVirtualFor="let opt of options(); trackBy: trackByValue"
+            role="option" class="zv-option"
+            [class.zv-selected]="opt.value === current()"
+            [attr.aria-selected]="opt.value === current()"
+            [class.zv-disabled]="opt.disabled"
+            (click)="!opt.disabled && pick(opt)">
+            {{ opt.label }}
+          </li>
+        </cdk-virtual-scroll-viewport>
+      </ul>
+    }
+  `, styles: [".zv-select-trigger{all:unset;flex:1;cursor:pointer;padding:.55rem 0}.zv-listbox{list-style:none;margin:.25rem 0 0;padding:0;border:1px solid var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem);background:var(--zv-bg,#fff);box-shadow:0 8px 24px #0000001f}.zv-vs{height:240px}.zv-option{height:36px;display:flex;align-items:center;padding:0 .75rem;cursor:pointer}.zv-option:hover{background:var(--zv-hover,#f3f4f6)}.zv-selected{background:var(--zv-primary,#2563eb);color:#fff}.zv-disabled{opacity:.5;pointer-events:none}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }] } });
+
+class ZvMultiselect extends ZvBaseControl {
+    controlType = 'multiselect';
+    items = [];
+    bindLabel = 'label';
+    bindValue = 'value';
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    get options() {
+        return this.items.map((it) => it && typeof it === 'object' && this.bindLabel in it
+            ? { label: it[this.bindLabel], value: it[this.bindValue] ?? it }
+            : { label: String(it), value: it });
+    }
+    summary = computed(() => {
+        const v = this.valueSig() ?? [];
+        return v.length ? `${v.length} selected` : '';
+    }, ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    isSelected = (v) => (this.valueSig() ?? []).includes(v);
+    toggle() { if (!this.disabledSig())
+        this.open.set(!this.open()); }
+    picktoggle(o) {
+        const cur = [...(this.valueSig() ?? [])];
+        const i = cur.indexOf(o.value);
+        i >= 0 ? cur.splice(i, 1) : cur.push(o.value);
+        this.handleChange(cur);
+    }
+    trackByValue = (_, o) => o.value;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvMultiselect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvMultiselect, isStandalone: true, selector: "zv-multiselect", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue" }, providers: controlProviders(ZvMultiselect), usesInheritance: true, ngImport: i0, template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [errorText]="errorMessage" [invalid]="status === 'error'"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      (clear)="clear()">
+      <button type="button" class="zv-select-trigger" role="combobox"
+        [id]="id" [disabled]="disabledSig()" [attr.aria-expanded]="open()"
+        [tabIndex]="tabIndex" (click)="toggle()" (blur)="handleBlur($event)">
+        {{ summary() || placeholder }}
+      </button>
+    </zv-field-shell>
+    @if (open()) {
+      <ul class="zv-listbox" role="listbox" aria-multiselectable="true">
+        <cdk-virtual-scroll-viewport [itemSize]="36" class="zv-vs">
+          <li *cdkVirtualFor="let opt of options; trackBy: trackByValue"
+            role="option" class="zv-option" [class.zv-selected]="isSelected(opt.value)"
+            [attr.aria-selected]="isSelected(opt.value)" (click)="picktoggle(opt)">
+            <input type="checkbox" [checked]="isSelected(opt.value)" tabindex="-1" />
+            {{ opt.label }}
+          </li>
+        </cdk-virtual-scroll-viewport>
+      </ul>
+    }
+  `, isInline: true, styles: [".zv-select-trigger{all:unset;flex:1;cursor:pointer;padding:.55rem 0}.zv-listbox{list-style:none;margin:.25rem 0 0;padding:0;background:var(--zv-bg,#fff);border:1px solid var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem);box-shadow:0 8px 24px #0000001f}.zv-vs{height:240px}.zv-option{height:36px;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;cursor:pointer}.zv-option:hover{background:var(--zv-hover,#f3f4f6)}\n"], dependencies: [{ kind: "component", type: ZvFieldShell, selector: "zv-field-shell", inputs: ["for", "label", "required", "hint", "helperText", "errorText", "invalid", "prefixIcon", "suffixIcon", "loading", "loadingText", "clearable", "hasValue", "disabled", "readonly"], outputs: ["clear"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvMultiselect, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-multiselect', standalone: true, imports: [ZvFieldShell, ScrollingModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: controlProviders(ZvMultiselect), template: `
+    <zv-field-shell
+      [for]="id" [label]="label" [required]="required" [hint]="hint"
+      [errorText]="errorMessage" [invalid]="status === 'error'"
+      [clearable]="clearable" [hasValue]="hasValue()" [disabled]="disabledSig()"
+      (clear)="clear()">
+      <button type="button" class="zv-select-trigger" role="combobox"
+        [id]="id" [disabled]="disabledSig()" [attr.aria-expanded]="open()"
+        [tabIndex]="tabIndex" (click)="toggle()" (blur)="handleBlur($event)">
+        {{ summary() || placeholder }}
+      </button>
+    </zv-field-shell>
+    @if (open()) {
+      <ul class="zv-listbox" role="listbox" aria-multiselectable="true">
+        <cdk-virtual-scroll-viewport [itemSize]="36" class="zv-vs">
+          <li *cdkVirtualFor="let opt of options; trackBy: trackByValue"
+            role="option" class="zv-option" [class.zv-selected]="isSelected(opt.value)"
+            [attr.aria-selected]="isSelected(opt.value)" (click)="picktoggle(opt)">
+            <input type="checkbox" [checked]="isSelected(opt.value)" tabindex="-1" />
+            {{ opt.label }}
+          </li>
+        </cdk-virtual-scroll-viewport>
+      </ul>
+    }
+  `, styles: [".zv-select-trigger{all:unset;flex:1;cursor:pointer;padding:.55rem 0}.zv-listbox{list-style:none;margin:.25rem 0 0;padding:0;background:var(--zv-bg,#fff);border:1px solid var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem);box-shadow:0 8px 24px #0000001f}.zv-vs{height:240px}.zv-option{height:36px;display:flex;align-items:center;gap:.5rem;padding:0 .75rem;cursor:pointer}.zv-option:hover{background:var(--zv-hover,#f3f4f6)}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }] } });
+
+class ZvCheckbox extends ZvBaseControl {
+    controlType = 'checkbox';
+    onToggle(ev) {
+        this.handleChange(ev.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvCheckbox, isStandalone: true, selector: "zv-checkbox", providers: controlProviders(ZvCheckbox), usesInheritance: true, ngImport: i0, template: `
+    <label class="zv-check">
+      <input type="checkbox" [id]="id" [name]="name" [checked]="!!valueSig()"
+        [disabled]="disabledSig()" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (change)="onToggle($event)" (blur)="handleBlur($event)" />
+      <span class="zv-box" aria-hidden="true"></span>
+      @if (label) { <span class="zv-text">{{ label }}</span> }
+    </label>
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, isInline: true, styles: [".zv-check{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}input{position:absolute;opacity:0;width:1.1rem;height:1.1rem}.zv-box{width:1.1rem;height:1.1rem;border:2px solid var(--zv-border,#d1d5db);border-radius:.25rem;display:inline-block;transition:.15s}input:checked+.zv-box{background:var(--zv-primary,#2563eb);border-color:var(--zv-primary,#2563eb);background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 13l4 4L19 7'/></svg>\");background-size:contain}input:focus-visible+.zv-box{box-shadow:0 0 0 3px var(--zv-primary-ring,rgba(37,99,235,.3))}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: controlProviders(ZvCheckbox), template: `
+    <label class="zv-check">
+      <input type="checkbox" [id]="id" [name]="name" [checked]="!!valueSig()"
+        [disabled]="disabledSig()" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (change)="onToggle($event)" (blur)="handleBlur($event)" />
+      <span class="zv-box" aria-hidden="true"></span>
+      @if (label) { <span class="zv-text">{{ label }}</span> }
+    </label>
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, styles: [".zv-check{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}input{position:absolute;opacity:0;width:1.1rem;height:1.1rem}.zv-box{width:1.1rem;height:1.1rem;border:2px solid var(--zv-border,#d1d5db);border-radius:.25rem;display:inline-block;transition:.15s}input:checked+.zv-box{background:var(--zv-primary,#2563eb);border-color:var(--zv-primary,#2563eb);background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 13l4 4L19 7'/></svg>\");background-size:contain}input:focus-visible+.zv-box{box-shadow:0 0 0 3px var(--zv-primary-ring,rgba(37,99,235,.3))}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"] }]
+        }] });
+
+class ZvRadio extends ZvBaseControl {
+    controlType = 'radio';
+    items = [];
+    bindLabel = 'label';
+    bindValue = 'value';
+    get options() {
+        return this.items.map((it) => it && typeof it === 'object' && this.bindLabel in it
+            ? { label: it[this.bindLabel], value: it[this.bindValue] ?? it, disabled: it.disabled }
+            : { label: String(it), value: it });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvRadio, isStandalone: true, selector: "zv-radio", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue" }, providers: controlProviders(ZvRadio), usesInheritance: true, ngImport: i0, template: `
+    @if (label) { <span class="zv-group-label">{{ label }}</span> }
+    <div class="zv-radio-group" role="radiogroup" [attr.aria-label]="ariaLabel || label">
+      @for (opt of options; track opt.value) {
+        <label class="zv-radio">
+          <input type="radio" [name]="name || id" [checked]="opt.value === valueSig()"
+            [disabled]="disabledSig() || opt.disabled" [tabIndex]="tabIndex"
+            (change)="handleChange(opt.value)" (blur)="handleBlur($event)" />
+          <span class="zv-dot" aria-hidden="true"></span>
+          <span class="zv-text">{{ opt.label }}</span>
+        </label>
+      }
+    </div>
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, isInline: true, styles: [".zv-radio-group{display:flex;flex-direction:column;gap:.4rem}.zv-radio{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}input{position:absolute;opacity:0}.zv-dot{width:1.1rem;height:1.1rem;border:2px solid var(--zv-border,#d1d5db);border-radius:50%;position:relative}input:checked+.zv-dot{border-color:var(--zv-primary,#2563eb)}input:checked+.zv-dot:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--zv-primary,#2563eb)}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: controlProviders(ZvRadio), template: `
+    @if (label) { <span class="zv-group-label">{{ label }}</span> }
+    <div class="zv-radio-group" role="radiogroup" [attr.aria-label]="ariaLabel || label">
+      @for (opt of options; track opt.value) {
+        <label class="zv-radio">
+          <input type="radio" [name]="name || id" [checked]="opt.value === valueSig()"
+            [disabled]="disabledSig() || opt.disabled" [tabIndex]="tabIndex"
+            (change)="handleChange(opt.value)" (blur)="handleBlur($event)" />
+          <span class="zv-dot" aria-hidden="true"></span>
+          <span class="zv-text">{{ opt.label }}</span>
+        </label>
+      }
+    </div>
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, styles: [".zv-radio-group{display:flex;flex-direction:column;gap:.4rem}.zv-radio{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}input{position:absolute;opacity:0}.zv-dot{width:1.1rem;height:1.1rem;border:2px solid var(--zv-border,#d1d5db);border-radius:50%;position:relative}input:checked+.zv-dot{border-color:var(--zv-primary,#2563eb)}input:checked+.zv-dot:after{content:\"\";position:absolute;inset:3px;border-radius:50%;background:var(--zv-primary,#2563eb)}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], bindLabel: [{
+                type: Input
+            }], bindValue: [{
+                type: Input
+            }] } });
+
+class ZvSwitch extends ZvBaseControl {
+    controlType = 'switch';
+    onToggle(ev) {
+        this.handleChange(ev.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvSwitch, isStandalone: true, selector: "zv-switch", providers: controlProviders(ZvSwitch), usesInheritance: true, ngImport: i0, template: `
+    <label class="zv-switch">
+      <input type="checkbox" role="switch" [id]="id" [name]="name"
+        [checked]="!!valueSig()" [disabled]="disabledSig()"
+        [attr.aria-checked]="!!valueSig()" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (change)="onToggle($event)" (blur)="handleBlur($event)" />
+      <span class="zv-track" aria-hidden="true"><span class="zv-thumb"></span></span>
+      @if (label) { <span class="zv-text">{{ label }}</span> }
+    </label>
+  `, isInline: true, styles: [".zv-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}input{position:absolute;opacity:0}.zv-track{width:2.4rem;height:1.3rem;border-radius:1rem;background:var(--zv-border,#d1d5db);position:relative;transition:.2s}.zv-thumb{position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0000004d}input:checked+.zv-track{background:var(--zv-primary,#2563eb)}input:checked+.zv-track .zv-thumb{transform:translate(1.1rem)}input:focus-visible+.zv-track{box-shadow:0 0 0 3px var(--zv-primary-ring,rgba(37,99,235,.3))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: controlProviders(ZvSwitch), template: `
+    <label class="zv-switch">
+      <input type="checkbox" role="switch" [id]="id" [name]="name"
+        [checked]="!!valueSig()" [disabled]="disabledSig()"
+        [attr.aria-checked]="!!valueSig()" [attr.aria-label]="ariaLabel || label"
+        [tabIndex]="tabIndex" (change)="onToggle($event)" (blur)="handleBlur($event)" />
+      <span class="zv-track" aria-hidden="true"><span class="zv-thumb"></span></span>
+      @if (label) { <span class="zv-text">{{ label }}</span> }
+    </label>
+  `, styles: [".zv-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}input{position:absolute;opacity:0}.zv-track{width:2.4rem;height:1.3rem;border-radius:1rem;background:var(--zv-border,#d1d5db);position:relative;transition:.2s}.zv-thumb{position:absolute;top:2px;left:2px;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0000004d}input:checked+.zv-track{background:var(--zv-primary,#2563eb)}input:checked+.zv-track .zv-thumb{transform:translate(1.1rem)}input:focus-visible+.zv-track{box-shadow:0 0 0 3px var(--zv-primary-ring,rgba(37,99,235,.3))}\n"] }]
+        }] });
+
+class ZvPin extends ZvBaseControl {
+    controlType = 'pin';
+    length = 6;
+    masked = false;
+    get cells() { return Array.from({ length: this.length }); }
+    digitAt(i) { return (this.valueSig() ?? '')[i] ?? ''; }
+    onCell(i, ev) {
+        const el = ev.target;
+        const ch = el.value.replace(/\D/g, '').slice(-1);
+        el.value = ch;
+        const arr = (this.valueSig() ?? '').padEnd(this.length, ' ').split('');
+        arr[i] = ch || ' ';
+        this.handleInput(arr.join('').trimEnd());
+        if (ch && i < this.length - 1)
+            this.focusCell(el, 1);
+    }
+    onKey(i, ev) {
+        if (ev.key === 'Backspace' && !ev.target.value && i > 0)
+            this.focusCell(ev.target, -1);
+    }
+    focusCell(from, delta) {
+        const sib = delta > 0 ? from.nextElementSibling : from.previousElementSibling;
+        sib?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvPin, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvPin, isStandalone: true, selector: "zv-pin", inputs: { length: ["length", "length", numberAttribute], masked: "masked" }, providers: controlProviders(ZvPin), usesInheritance: true, ngImport: i0, template: `
+    @if (label) { <span class="zv-group-label">{{ label }}</span> }
+    <div class="zv-pin" [attr.aria-label]="ariaLabel || label || 'One time code'">
+      @for (cell of cells; track $index) {
+        <input class="zv-pin-cell" inputmode="numeric" maxlength="1"
+          [type]="masked ? 'password' : 'text'" [value]="digitAt($index)"
+          [disabled]="disabledSig()" [attr.aria-label]="'Digit ' + ($index + 1)"
+          (input)="onCell($index, $event)" (keydown)="onKey($index, $event)"
+          (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+      }
+    </div>
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, isInline: true, styles: [".zv-pin{display:flex;gap:.5rem}.zv-pin-cell{width:2.75rem;height:3rem;text-align:center;font-size:1.25rem;border:1px solid var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem)}.zv-pin-cell:focus{outline:0;border-color:var(--zv-primary,#2563eb);box-shadow:0 0 0 3px var(--zv-primary-ring,rgba(37,99,235,.2))}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvPin, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-pin', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: controlProviders(ZvPin), template: `
+    @if (label) { <span class="zv-group-label">{{ label }}</span> }
+    <div class="zv-pin" [attr.aria-label]="ariaLabel || label || 'One time code'">
+      @for (cell of cells; track $index) {
+        <input class="zv-pin-cell" inputmode="numeric" maxlength="1"
+          [type]="masked ? 'password' : 'text'" [value]="digitAt($index)"
+          [disabled]="disabledSig()" [attr.aria-label]="'Digit ' + ($index + 1)"
+          (input)="onCell($index, $event)" (keydown)="onKey($index, $event)"
+          (focus)="handleFocus($event)" (blur)="handleBlur($event)" />
+      }
+    </div>
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, styles: [".zv-pin{display:flex;gap:.5rem}.zv-pin-cell{width:2.75rem;height:3rem;text-align:center;font-size:1.25rem;border:1px solid var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem)}.zv-pin-cell:focus{outline:0;border-color:var(--zv-primary,#2563eb);box-shadow:0 0 0 3px var(--zv-primary-ring,rgba(37,99,235,.2))}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"] }]
+        }], propDecorators: { length: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], masked: [{
+                type: Input
+            }] } });
+
+class ZvUpload extends ZvBaseControl {
+    controlType = 'upload';
+    multiple = false;
+    accept = '';
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    onPick(ev) { this.commit(ev.target.files); }
+    onDrop(ev) {
+        ev.preventDefault();
+        this.dragging.set(false);
+        this.commit(ev.dataTransfer?.files ?? null);
+    }
+    commit(list) {
+        const arr = list ? Array.from(list) : [];
+        this.files.set(arr);
+        this.handleChange(arr);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ZvUpload, isStandalone: true, selector: "zv-upload", inputs: { multiple: ["multiple", "multiple", booleanAttribute], accept: "accept" }, providers: controlProviders(ZvUpload), usesInheritance: true, ngImport: i0, template: `
+    @if (label) { <span class="zv-group-label">{{ label }}</span> }
+    <div class="zv-drop" [class.zv-over]="dragging()" tabindex="0"
+      [attr.aria-label]="ariaLabel || label || 'File upload'"
+      (click)="picker.click()" (keydown.enter)="picker.click()"
+      (dragover)="$event.preventDefault(); dragging.set(true)"
+      (dragleave)="dragging.set(false)" (drop)="onDrop($event)">
+      <input #picker type="file" hidden [multiple]="multiple" [accept]="accept"
+        [disabled]="disabledSig()" (change)="onPick($event)" />
+      <p>{{ placeholder || 'Drop files or click to browse' }}</p>
+    </div>
+    @for (f of files(); track f.name) { <div class="zv-file">{{ f.name }} ({{ (f.size/1024)|number:'1.0-0' }} KB)</div> }
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, isInline: true, styles: [".zv-drop{border:2px dashed var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem);padding:1.5rem;text-align:center;cursor:pointer;color:var(--zv-muted,#6b7280)}.zv-drop.zv-over,.zv-drop:focus-visible{border-color:var(--zv-primary,#2563eb);outline:0}.zv-file{font-size:.8rem;margin-top:.4rem}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'zv-upload', standalone: true, imports: [DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: controlProviders(ZvUpload), template: `
+    @if (label) { <span class="zv-group-label">{{ label }}</span> }
+    <div class="zv-drop" [class.zv-over]="dragging()" tabindex="0"
+      [attr.aria-label]="ariaLabel || label || 'File upload'"
+      (click)="picker.click()" (keydown.enter)="picker.click()"
+      (dragover)="$event.preventDefault(); dragging.set(true)"
+      (dragleave)="dragging.set(false)" (drop)="onDrop($event)">
+      <input #picker type="file" hidden [multiple]="multiple" [accept]="accept"
+        [disabled]="disabledSig()" (change)="onPick($event)" />
+      <p>{{ placeholder || 'Drop files or click to browse' }}</p>
+    </div>
+    @for (f of files(); track f.name) { <div class="zv-file">{{ f.name }} ({{ (f.size/1024)|number:'1.0-0' }} KB)</div> }
+    @if (status === 'error' && errorMessage) { <p class="zv-error" role="alert">{{ errorMessage }}</p> }
+  `, styles: [".zv-drop{border:2px dashed var(--zv-border,#d1d5db);border-radius:var(--zv-radius,.5rem);padding:1.5rem;text-align:center;cursor:pointer;color:var(--zv-muted,#6b7280)}.zv-drop.zv-over,.zv-drop:focus-visible{border-color:var(--zv-primary,#2563eb);outline:0}.zv-file{font-size:.8rem;margin-top:.4rem}.zv-error{margin:.25rem 0 0;font-size:.75rem;color:var(--zv-warn,#dc2626)}\n"] }]
+        }], propDecorators: { multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], accept: [{
+                type: Input
+            }] } });
+
+/**
+ * Reactive + Template Forms adapter.
+ *
+ * A single `ControlValueAccessor` that bridges any Zellvora control to Angular's
+ * `formControl` / `formControlName` / `ngModel`. It owns NO state and NO
+ * validation — it simply forwards to the host `SignalControlAccessor`, whose
+ * signals remain the source of truth. This is the entire "Reactive/Template
+ * wraps Signals" story.
+ */
+class ZvControlValueAccessor {
+    host = inject(SignalControlAccessor);
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        const ref = inject(DestroyRef);
+        // host commit -> Angular onChange + touched
+        const sub = this.host.committed.subscribe((v) => {
+            this.onChange(v);
+            this.onTouched();
+        });
+        ref.onDestroy(() => sub.unsubscribe());
+        // host disabled state stays in sync if the host changes it locally.
+        effect(() => {
+            this.host.disabled();
+        });
+    }
+    writeValue(value) {
+        this.host.acceptExternalValue(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.host.setDisabled(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvControlValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: ZvControlValueAccessor, isStandalone: true, selector: "zv-input[formControl],zv-input[formControlName],zv-input[ngModel],zv-email[formControl],zv-email[formControlName],zv-email[ngModel],zv-password[formControl],zv-password[formControlName],zv-password[ngModel],zv-number[formControl],zv-number[formControlName],zv-number[ngModel],zv-textarea[formControl],zv-textarea[formControlName],zv-textarea[ngModel],zv-select[formControl],zv-select[formControlName],zv-select[ngModel],zv-multiselect[formControl],zv-multiselect[formControlName],zv-multiselect[ngModel],zv-checkbox[formControl],zv-checkbox[formControlName],zv-checkbox[ngModel],zv-radio[formControl],zv-radio[formControlName],zv-radio[ngModel],zv-switch[formControl],zv-switch[formControlName],zv-switch[ngModel],zv-datepicker[formControl],zv-datepicker[formControlName],zv-datepicker[ngModel],zv-timepicker[formControl],zv-timepicker[formControlName],zv-timepicker[ngModel],zv-pin[formControl],zv-pin[formControlName],zv-pin[ngModel],zv-upload[formControl],zv-upload[formControlName],zv-upload[ngModel]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZvControlValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ZvControlValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'zv-input[formControl],zv-input[formControlName],zv-input[ngModel],' +
+                        'zv-email[formControl],zv-email[formControlName],zv-email[ngModel],' +
+                        'zv-password[formControl],zv-password[formControlName],zv-password[ngModel],' +
+                        'zv-number[formControl],zv-number[formControlName],zv-number[ngModel],' +
+                        'zv-textarea[formControl],zv-textarea[formControlName],zv-textarea[ngModel],' +
+                        'zv-select[formControl],zv-select[formControlName],zv-select[ngModel],' +
+                        'zv-multiselect[formControl],zv-multiselect[formControlName],zv-multiselect[ngModel],' +
+                        'zv-checkbox[formControl],zv-checkbox[formControlName],zv-checkbox[ngModel],' +
+                        'zv-radio[formControl],zv-radio[formControlName],zv-radio[ngModel],' +
+                        'zv-switch[formControl],zv-switch[formControlName],zv-switch[ngModel],' +
+                        'zv-datepicker[formControl],zv-datepicker[formControlName],zv-datepicker[ngModel],' +
+                        'zv-timepicker[formControl],zv-timepicker[formControlName],zv-timepicker[ngModel],' +
+                        'zv-pin[formControl],zv-pin[formControlName],zv-pin[ngModel],' +
+                        'zv-upload[formControl],zv-upload[formControlName],zv-upload[ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZvControlValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
+function toNgValidator(v) {
+    return (c) => v(c.value, c.parent?.value ?? {});
+}
+function toNgAsyncValidator(v) {
+    return async (c) => (await v(c.value, c.parent?.value ?? {}));
+}
+/** Convenience: map many ZvValidators to one Angular ValidatorFn list. */
+const ngValidators = (...vs) => vs.map(toNgValidator);
+
+/*
+ * Public API — @zellvora/ng-input
+ *
+ * Signal-first enterprise form controls for Angular 22.
+ * The Signal Form Engine is the single source of truth; Reactive and Template
+ * forms are thin adapters over it.
+ */
+// ---- Signal Form Engine (source of truth) ---------------------------------
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SignalControlAccessor, ZV_DEFAULT_CONFIG, ZV_DEFAULT_MESSAGES, ZV_INPUT_CONFIG, ZV_PATTERNS, ZvCheckbox, ZvControlValueAccessor, ZvDatepicker, ZvEmail, ZvFieldShell, ZvInput, ZvMultiselect, ZvNumber, ZvPassword, ZvPin, ZvRadio, ZvSelect, ZvSwitch, ZvTextarea, ZvTimepicker, ZvUpload, ZvValidators$1 as ZvValidators, createForm, formatError, ngValidators, provideSignalControl, provideZvInput, toNgAsyncValidator, toNgValidator };
+//# sourceMappingURL=zellvora-ng-input.mjs.map