@mk-kit/ui 0.42.0 → 0.43.0

package/fesm2022/mk-kit-ui-forms.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, ElementRef, contentChild, signal, computed, afterNextRender, effect, DestroyRef, forwardRef, ChangeDetectionStrategy, Component, DOCUMENT, Injector, viewChild, model, output, contentChildren, numberAttribute, afterRenderEffect, untracked, ViewContainerRef, Directive, viewChildren, TemplateRef, PLATFORM_ID } from '@angular/core';
+import { inject, input, booleanAttribute, ElementRef, contentChild, computed, signal, afterNextRender, effect, DestroyRef, forwardRef, ChangeDetectionStrategy, Component, DOCUMENT, Injector, viewChild, model, output, contentChildren, numberAttribute, afterRenderEffect, untracked, ViewContainerRef, Directive, viewChildren, TemplateRef, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgForm, FormGroupDirective, NgControl, Validators, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
-import { MK_I18N, mkUniqueId, mkFirstErrorMessage, MkFieldContext, MkAnchoredPanel, MkLiveAnnouncer, mkValidatorChange, mkHighlight } from '@mk-kit/ui/core';
+import { FORM_FIELD } from '@angular/forms/signals';
+import { MK_I18N, mkUniqueId, mkSignalErrorMessage, mkFirstErrorMessage, MkFieldContext, mkInjectFieldTouched, MkAnchoredPanel, MkLiveAnnouncer, mkValidatorChange, mkHighlight } from '@mk-kit/ui/core';
 export { mkHighlight } from '@mk-kit/ui/core';
 import { MkButton } from '@mk-kit/ui/button';
 import { MkIcon } from '@mk-kit/ui/icon';
@@ -33,6 +34,29 @@ export * from '@mk-kit/ui/checkbox';
  * is touched or dirty, or its form has been submitted; `errorOn` changes that.
  * `required` and the disabled styling are derived from the control too.
  *
+ * ## Signal Forms
+ *
+ * The same applies to a control bound with Signal Forms' `[formField]`
+ * directive (`@angular/forms/signals`): the field adopts the projected
+ * `FormField` binding and reads `touched()` / `dirty()` / `invalid()` /
+ * `errors()` / `required()` / `disabled()` from its `FieldState`. Errors
+ * written by the schema (`required(p.email)`, `minLength(p.name, 2)`, …) are
+ * rendered through the same `validation` i18n table, a `message` supplied to
+ * the schema rule wins over the table, and `errorMessages` / `errorOn` work
+ * unchanged. Calling `submit()` marks every field touched, so errors surface
+ * on a failed submit exactly as with `formControlName`. When the control is
+ * not projected (or lives deeper), point the field at it with `[field]`.
+ *
+ * ```html
+ * <mk-form-field label="Email">
+ *   <input mkInput type="email" [formField]="f.email" />
+ * </mk-form-field>
+ *
+ * <mk-form-field label="Country" [field]="f.country">
+ *   <mk-select [formField]="f.country" [options]="countries" />
+ * </mk-form-field>
+ * ```
+ *
  * ```html
  * <!-- automatic: message + required marker come from the validators -->
  * <mk-form-field label="Email">
@@ -103,9 +127,31 @@ class MkFormField {
      */
     labelPosition = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /**
+     * Signal Forms field to read state from explicitly (`[field]="f.email"`).
+     * Not needed when the projected control carries the `[formField]` binding —
+     * the wrapper finds that itself; set it when the control is nested deeper
+     * or when the wrapper should follow a field it does not contain.
+     */
+    field = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     host = inject(ElementRef);
     /** The projected control's form binding, when it has one. */
     ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : /* istanbul ignore next */ {}), descendants: true });
+    /** The projected control's Signal Forms `[formField]` binding, when it has one. */
+    signalField = contentChild(FORM_FIELD, { ...(ngDevMode ? { debugName: "signalField" } : /* istanbul ignore next */ {}), descendants: true });
+    /**
+     * The Signal Forms field state driving this wrapper — the explicit `field`
+     * input first, else the projected `[formField]` binding. `undefined` for a
+     * reactive-forms / template-driven control.
+     */
+    fieldState = computed(() => {
+        const explicit = this.field();
+        if (explicit)
+            return explicit();
+        return this.signalField()?.state();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldState" }] : /* istanbul ignore next */ []));
     /** A control inside the field has focus. */
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
@@ -115,8 +161,9 @@ class MkFormField {
     /** The field holds a non-empty value (drives the floating label). */
     hasValue = computed(() => {
         this.controlTick();
-        const control = this.ngControl();
-        const v = control ? control.value : this.domValue();
+        const state = this.fieldState();
+        const control = state ? null : this.ngControl();
+        const v = state ? state.value() : control ? control.value : this.domValue();
         if (v == null || v === '')
             return false;
         if (Array.isArray(v))
@@ -160,9 +207,13 @@ class MkFormField {
         const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
         const submitSub = submit?.subscribe(bump) ?? null;
         effect(() => {
-            const control = this.ngControl()?.control;
+            // A `[formField]` binding provides an interop `NgControl` without an
+            // `events` stream; its state is read reactively via `fieldState` instead.
+            const control = this.signalField()
+                ? null
+                : this.ngControl()?.control;
             sub?.unsubscribe();
-            sub = control ? control.events.subscribe(bump) : null;
+            sub = control?.events ? control.events.subscribe(bump) : null;
         });
         inject(DestroyRef).onDestroy(() => {
             sub?.unsubscribe();
@@ -177,8 +228,19 @@ class MkFormField {
     ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
     /** The automatic message for the bound control, when one should show. */
     autoError = computed(() => {
+        const state = this.fieldState();
+        if (state) {
+            if (state.disabled() || state.hidden() || !state.invalid())
+                return null;
+            const gate = this.errorOn();
+            const visible = gate === 'always' ||
+                (gate === 'dirty' ? state.dirty() : state.touched() || state.dirty());
+            if (!visible)
+                return null;
+            return mkSignalErrorMessage(state.errors(), this.i18n.validation, this.errorMessages() ?? undefined);
+        }
         this.controlTick();
-        const control = this.ngControl()?.control;
+        const control = this.signalField() ? null : this.ngControl()?.control;
         if (!control || control.disabled || !control.invalid)
             return null;
         const gate = this.errorOn();
@@ -200,6 +262,9 @@ class MkFormField {
     isRequired = computed(() => {
         if (this.required())
             return true;
+        const state = this.fieldState();
+        if (state)
+            return state.required();
         this.controlTick();
         return this.ngControl()?.control?.hasValidator(Validators.required) ?? false;
     }, /* @ts-ignore */
@@ -208,6 +273,9 @@ class MkFormField {
     isDisabled = computed(() => {
         if (this.disabled())
             return true;
+        const state = this.fieldState();
+        if (state)
+            return state.disabled();
         this.controlTick();
         return this.ngControl()?.control?.disabled ?? false;
     }, /* @ts-ignore */
@@ -229,12 +297,12 @@ class MkFormField {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFormField, isStandalone: true, selector: "mk-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, errorOn: { classPropertyName: "errorOn", publicName: "errorOn", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focused.set(true)", "focusout": "focused.set(false)", "input": "readDomValue($event.target)", "change": "readDomValue($event.target)" }, properties: { "class.mk-form-field--sm": "size() === 'sm'", "class.mk-form-field--md": "size() === 'md'", "class.mk-form-field--lg": "size() === 'lg'", "class.mk-form-field--invalid": "hasError()", "class.mk-form-field--required": "isRequired()", "class.mk-form-field--disabled": "isDisabled()", "class.mk-form-field--float": "labelPosition() === 'float'", "class.mk-form-field--focused": "focused()", "class.mk-form-field--filled": "hasValue()" }, classAttribute: "mk-form-field" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFormField, isStandalone: true, selector: "mk-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, errorOn: { classPropertyName: "errorOn", publicName: "errorOn", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focused.set(true)", "focusout": "focused.set(false)", "input": "readDomValue($event.target)", "change": "readDomValue($event.target)" }, properties: { "class.mk-form-field--sm": "size() === 'sm'", "class.mk-form-field--md": "size() === 'md'", "class.mk-form-field--lg": "size() === 'lg'", "class.mk-form-field--invalid": "hasError()", "class.mk-form-field--required": "isRequired()", "class.mk-form-field--disabled": "isDisabled()", "class.mk-form-field--float": "labelPosition() === 'float'", "class.mk-form-field--focused": "focused()", "class.mk-form-field--filled": "hasValue()" }, classAttribute: "mk-form-field" }, providers: [
             {
                 provide: MkFieldContext,
                 useExisting: forwardRef(() => MkFormField),
             },
-        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label() && labelPosition() !== 'float') {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n  @if (label() && labelPosition() === 'float') {\n    <label class=\"mk-form-field__label mk-form-field__label--float\" [id]=\"labelId\" [attr.for]=\"controlId\">\n      <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n      @if (isRequired()) {\n        <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}:host(.mk-form-field--float) .mk-form-field__control{position:relative}.mk-form-field__label--float{position:absolute;inset-inline-start:var(--mk-space-3);top:50%;translate:0 -50%;max-width:calc(100% - 2 * var(--mk-space-3));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-muted);pointer-events:none;transition:top var(--mk-duration-fast) var(--mk-ease-standard),translate var(--mk-duration-fast) var(--mk-ease-standard),font-size var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-form-field--focused) .mk-form-field__label--float,:host(.mk-form-field--filled) .mk-form-field__label--float{top:.35rem;translate:0 0;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--focused) .mk-form-field__label--float{color:var(--mk-primary)}:host(.mk-form-field--invalid) .mk-form-field__label--float{color:var(--mk-danger-text)}:host(.mk-form-field--float) ::ng-deep .mk-input:not(textarea){height:calc(var(--mk-control-height-md) + .75rem);padding-top:1.05rem}:host(.mk-form-field--float) ::ng-deep textarea.mk-input{padding-top:1.5rem}:host(.mk-form-field--float:not(.mk-form-field--focused):not(.mk-form-field--filled)) ::ng-deep .mk-input::placeholder{color:transparent}@media(prefers-reduced-motion:reduce){.mk-form-field__label--float{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "signalField", first: true, predicate: FORM_FIELD, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label() && labelPosition() !== 'float') {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n  @if (label() && labelPosition() === 'float') {\n    <label class=\"mk-form-field__label mk-form-field__label--float\" [id]=\"labelId\" [attr.for]=\"controlId\">\n      <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n      @if (isRequired()) {\n        <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}:host(.mk-form-field--float) .mk-form-field__control{position:relative}.mk-form-field__label--float{position:absolute;inset-inline-start:var(--mk-space-3);top:50%;translate:0 -50%;max-width:calc(100% - 2 * var(--mk-space-3));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-muted);pointer-events:none;transition:top var(--mk-duration-fast) var(--mk-ease-standard),translate var(--mk-duration-fast) var(--mk-ease-standard),font-size var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-form-field--focused) .mk-form-field__label--float,:host(.mk-form-field--filled) .mk-form-field__label--float{top:.35rem;translate:0 0;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--focused) .mk-form-field__label--float{color:var(--mk-primary)}:host(.mk-form-field--invalid) .mk-form-field__label--float{color:var(--mk-danger-text)}:host(.mk-form-field--float) ::ng-deep .mk-input:not(textarea){height:calc(var(--mk-control-height-md) + .75rem);padding-top:1.05rem}:host(.mk-form-field--float) ::ng-deep textarea.mk-input{padding-top:1.5rem}:host(.mk-form-field--float:not(.mk-form-field--focused):not(.mk-form-field--filled)) ::ng-deep .mk-input::placeholder{color:transparent}@media(prefers-reduced-motion:reduce){.mk-form-field__label--float{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFormField, decorators: [{
             type: Component,
@@ -259,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkFormField),
                         },
                     ], template: "@if (label() && labelPosition() !== 'float') {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n  @if (label() && labelPosition() === 'float') {\n    <label class=\"mk-form-field__label mk-form-field__label--float\" [id]=\"labelId\" [attr.for]=\"controlId\">\n      <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n      @if (isRequired()) {\n        <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}:host(.mk-form-field--float) .mk-form-field__control{position:relative}.mk-form-field__label--float{position:absolute;inset-inline-start:var(--mk-space-3);top:50%;translate:0 -50%;max-width:calc(100% - 2 * var(--mk-space-3));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-muted);pointer-events:none;transition:top var(--mk-duration-fast) var(--mk-ease-standard),translate var(--mk-duration-fast) var(--mk-ease-standard),font-size var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-form-field--focused) .mk-form-field__label--float,:host(.mk-form-field--filled) .mk-form-field__label--float{top:.35rem;translate:0 0;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--focused) .mk-form-field__label--float{color:var(--mk-primary)}:host(.mk-form-field--invalid) .mk-form-field__label--float{color:var(--mk-danger-text)}:host(.mk-form-field--float) ::ng-deep .mk-input:not(textarea){height:calc(var(--mk-control-height-md) + .75rem);padding-top:1.05rem}:host(.mk-form-field--float) ::ng-deep textarea.mk-input{padding-top:1.5rem}:host(.mk-form-field--float:not(.mk-form-field--focused):not(.mk-form-field--filled)) ::ng-deep .mk-input::placeholder{color:transparent}@media(prefers-reduced-motion:reduce){.mk-form-field__label--float{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], errorOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorOn", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], errorOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorOn", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }], signalField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FORM_FIELD), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * FormErrorSummary — an accessible summary of a form's validation errors,
@@ -282,6 +350,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * `formControlName` must be a static attribute (`formControlName="email"`,
  * the usual form) rather than a binding.
  *
+ * ## Signal Forms
+ *
+ * Point `field` at a Signal Forms root (`[field]="f"`) instead of `form` and
+ * the summary reads `errorSummary()` from the `FieldTree`: one entry per
+ * invalid field, keyed by dotted path in `labels` / `errorMessages` like the
+ * reactive path. With the default `showOn="submit"` an entry appears once its
+ * field is touched — `submit()` marks every field touched, so a failed submit
+ * lists them all. Clicking an entry focuses the control bound with
+ * `[formField]`. When the summary sits inside the `<form>`, focus also moves
+ * to it after the form's `submit` event, as with `ngSubmit`.
+ *
+ * ```html
+ * <form (submit)="save($event)">
+ *   <mk-form-error-summary [field]="f" [labels]="{ email: 'Email address' }" />
+ *   …
+ * </form>
+ * ```
+ *
  * ```html
  * <!-- automatic -->
  * <form [formGroup]="form" (ngSubmit)="submit()">
@@ -313,6 +399,12 @@ class MkFormErrorSummary {
     /** Collect errors from this control tree instead of passing them in. */
     form = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+    /**
+     * Collect errors from this Signal Forms field (usually the root returned by
+     * `form()`) instead of `form`. Entries are keyed by dotted path for `labels`.
+     */
+    field = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
     /** Field names for automatic entries, keyed by control path. */
     labels = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
@@ -339,15 +431,26 @@ class MkFormErrorSummary {
         const bump = () => this.formTick.update((n) => n + 1);
         let sub = null;
         const injector = inject(Injector);
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        const submitSub = submit?.subscribe(() => {
+        const onSubmit = () => {
             bump();
             // After the entries have rendered (and [hidden] cleared), take the
             // user straight to the problems. `focus()` no-ops without errors.
             if (this.autoFocus()) {
                 afterNextRender(() => this.focus(), { injector });
             }
-        }) ?? null;
+        };
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        const submitSub = submit?.subscribe(onSubmit) ?? null;
+        // Signal Forms has no `ngSubmit`; a summary placed inside the `<form>`
+        // follows the native submit event instead (`submit()` marks every field
+        // touched synchronously, so the entries exist by the next render).
+        let nativeForm = null;
+        afterNextRender(() => {
+            if (!this.field())
+                return;
+            nativeForm = this.host.nativeElement.closest('form');
+            nativeForm?.addEventListener('submit', onSubmit);
+        });
         effect(() => {
             const form = this.form();
             sub?.unsubscribe();
@@ -356,6 +459,7 @@ class MkFormErrorSummary {
         inject(DestroyRef).onDestroy(() => {
             sub?.unsubscribe();
             submitSub?.unsubscribe();
+            nativeForm?.removeEventListener('submit', onSubmit);
         });
     }
     /** Whether the surrounding form (if any) has been submitted. */
@@ -364,8 +468,48 @@ class MkFormErrorSummary {
         return (this.parentFormGroup?.submitted || this.parentForm?.submitted || false);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    /**
+     * Entries collected from `field` (a Signal Forms root), each with the element
+     * carrying the field's `[formField]` binding so a click can focus it the way
+     * `focusBoundControl()` would.
+     */
+    signalEntries = computed(() => {
+        const field = this.field();
+        if (!field)
+            return [];
+        const root = field();
+        const gateOnTouch = this.showOn() === 'submit';
+        const labels = this.labels();
+        const overrides = this.errorMessages() ?? undefined;
+        const seen = new Set();
+        const out = [];
+        for (const err of root.errorSummary()) {
+            const state = err.fieldTree();
+            const name = state.name();
+            if (seen.has(name) || state.disabled() || state.hidden())
+                continue;
+            if (gateOnTouch && !state.touched())
+                continue;
+            seen.add(name);
+            const message = mkSignalErrorMessage([err], this.i18n.validation, overrides);
+            if (!message)
+                continue;
+            const path = signalFieldPath(root, state) ?? '';
+            const label = labels[path] ?? path;
+            const element = state.formFieldBindings()[0]?.element ?? null;
+            const fieldId = element?.id || name;
+            out.push({
+                error: { fieldId, message: label ? `${label}: ${message}` : message },
+                element,
+            });
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "signalEntries" }] : /* istanbul ignore next */ []));
     /** Entries collected from `form`, when one is set and they should show. */
     autoErrors = computed(() => {
+        if (this.field())
+            return this.signalEntries().map((e) => e.error);
         this.formTick();
         const form = this.form();
         if (!form)
@@ -403,7 +547,8 @@ class MkFormErrorSummary {
     }
     /** Focus the field an entry points at (native anchor jump is unreliable). */
     focusField(event, fieldId) {
-        const target = this.document.getElementById(fieldId) ??
+        const target = this.signalEntries().find((e) => e.error.fieldId === fieldId)?.element ??
+            this.document.getElementById(fieldId) ??
             this.document.querySelector(`[formcontrolname="${cssEscape(fieldId)}"]`);
         if (!target)
             return;
@@ -422,7 +567,7 @@ class MkFormErrorSummary {
         return el?.id || path;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFormErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFormErrorSummary, isStandalone: true, selector: "mk-form-error-summary", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showOn: { classPropertyName: "showOn", publicName: "showOn", isSignal: true, isRequired: false, transformFunction: null }, summaryTitle: { classPropertyName: "summaryTitle", publicName: "summaryTitle", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "tabindex": "-1" }, properties: { "attr.hidden": "hasErrors() ? null : \"\"", "attr.aria-labelledby": "hasErrors() ? titleId : null" }, classAttribute: "mk-form-error-summary" }, exportAs: ["mkFormErrorSummary"], ngImport: i0, template: "@if (hasErrors()) {\n  <p [id]=\"titleId\" class=\"mk-form-error-summary__title\">{{ summaryTitle() }}</p>\n  <ul class=\"mk-form-error-summary__list\">\n    @for (error of shownErrors(); track error.fieldId) {\n      <li class=\"mk-form-error-summary__item\">\n        <a\n          class=\"mk-form-error-summary__link\"\n          [href]=\"'#' + error.fieldId\"\n          (click)=\"focusField($event, error.fieldId)\"\n          >{{ error.message }}</a\n        >\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;padding:var(--mk-space-4);color:var(--mk-text);background-color:var(--mk-danger-subtle, var(--mk-surface-2));border:var(--mk-border-width) solid var(--mk-danger);border-radius:var(--mk-radius-md);border-inline-start-width:4px}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-form-error-summary__title{margin:0 0 var(--mk-space-2);font-weight:var(--mk-font-weight-semibold);color:var(--mk-danger-text)}.mk-form-error-summary__list{margin:0;padding-inline-start:var(--mk-space-4);display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-form-error-summary__link{color:var(--mk-danger-text);text-decoration:underline;cursor:pointer}.mk-form-error-summary__link:hover{text-decoration:none}.mk-form-error-summary__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFormErrorSummary, isStandalone: true, selector: "mk-form-error-summary", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showOn: { classPropertyName: "showOn", publicName: "showOn", isSignal: true, isRequired: false, transformFunction: null }, summaryTitle: { classPropertyName: "summaryTitle", publicName: "summaryTitle", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "tabindex": "-1" }, properties: { "attr.hidden": "hasErrors() ? null : \"\"", "attr.aria-labelledby": "hasErrors() ? titleId : null" }, classAttribute: "mk-form-error-summary" }, exportAs: ["mkFormErrorSummary"], ngImport: i0, template: "@if (hasErrors()) {\n  <p [id]=\"titleId\" class=\"mk-form-error-summary__title\">{{ summaryTitle() }}</p>\n  <ul class=\"mk-form-error-summary__list\">\n    @for (error of shownErrors(); track error.fieldId) {\n      <li class=\"mk-form-error-summary__item\">\n        <a\n          class=\"mk-form-error-summary__link\"\n          [href]=\"'#' + error.fieldId\"\n          (click)=\"focusField($event, error.fieldId)\"\n          >{{ error.message }}</a\n        >\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;padding:var(--mk-space-4);color:var(--mk-text);background-color:var(--mk-danger-subtle, var(--mk-surface-2));border:var(--mk-border-width) solid var(--mk-danger);border-radius:var(--mk-radius-md);border-inline-start-width:4px}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-form-error-summary__title{margin:0 0 var(--mk-space-2);font-weight:var(--mk-font-weight-semibold);color:var(--mk-danger-text)}.mk-form-error-summary__list{margin:0;padding-inline-start:var(--mk-space-4);display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-form-error-summary__link{color:var(--mk-danger-text);text-decoration:underline;cursor:pointer}.mk-form-error-summary__link:hover{text-decoration:none}.mk-form-error-summary__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFormErrorSummary, decorators: [{
             type: Component,
@@ -433,7 +578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.hidden]': 'hasErrors() ? null : ""',
                         '[attr.aria-labelledby]': 'hasErrors() ? titleId : null',
                     }, template: "@if (hasErrors()) {\n  <p [id]=\"titleId\" class=\"mk-form-error-summary__title\">{{ summaryTitle() }}</p>\n  <ul class=\"mk-form-error-summary__list\">\n    @for (error of shownErrors(); track error.fieldId) {\n      <li class=\"mk-form-error-summary__item\">\n        <a\n          class=\"mk-form-error-summary__link\"\n          [href]=\"'#' + error.fieldId\"\n          (click)=\"focusField($event, error.fieldId)\"\n          >{{ error.message }}</a\n        >\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;padding:var(--mk-space-4);color:var(--mk-text);background-color:var(--mk-danger-subtle, var(--mk-surface-2));border:var(--mk-border-width) solid var(--mk-danger);border-radius:var(--mk-radius-md);border-inline-start-width:4px}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-form-error-summary__title{margin:0 0 var(--mk-space-2);font-weight:var(--mk-font-weight-semibold);color:var(--mk-danger-text)}.mk-form-error-summary__list{margin:0;padding-inline-start:var(--mk-space-4);display:flex;flex-direction:column;gap:var(--mk-space-1)}.mk-form-error-summary__link{color:var(--mk-danger-text);text-decoration:underline;cursor:pointer}.mk-form-error-summary__link:hover{text-decoration:none}.mk-form-error-summary__link:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-sm)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOn", required: false }] }], summaryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryTitle", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], showOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOn", required: false }] }], summaryTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryTitle", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }] } });
 /** Depth-first walk yielding `[dotted path, control]` for every leaf control. */
 function* eachControl(control, path = '') {
     if (control instanceof FormGroup) {
@@ -450,6 +595,33 @@ function* eachControl(control, path = '') {
         yield [path, control];
     }
 }
+/**
+ * Dotted path of a Signal Forms field under `root` (`'address.city'`,
+ * `'contacts.0.name'`), found by walking the field tree along the model's
+ * keys; `''` for the root itself, `null` when the field is not under `root`.
+ */
+function signalFieldPath(root, target) {
+    const wanted = target.name();
+    const walk = (tree, path) => {
+        const state = tree();
+        if (state.name() === wanted)
+            return path;
+        const value = state.value();
+        if (!value || typeof value !== 'object')
+            return null;
+        const children = tree;
+        for (const key of Object.keys(value)) {
+            const child = children[key];
+            if (typeof child !== 'function')
+                continue;
+            const found = walk(child, path ? `${path}.${key}` : key);
+            if (found !== null)
+                return found;
+        }
+        return null;
+    };
+    return walk(root.fieldTree, '');
+}
 /** Minimal attribute-value escaping for the selectors built above. */
 function cssEscape(value) {
     return value.replace(/["\\]/g, '\\$&');
@@ -545,6 +717,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     group = inject(MkInputGroup, { optional: true });
     host = inject(ElementRef);
     initialId = this.host.nativeElement.getAttribute('id');
@@ -559,7 +733,7 @@ class MkInput {
         ? this.field.size()
         : (this.group?.effectiveSize() ?? this.size()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() ||
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) ||
         (this.field?.hasError() ?? false) ||
         (this.group?.isInvalid() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
@@ -679,6 +853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkSubmitInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     inputRef = viewChild('input', /* @ts-ignore */
@@ -742,7 +918,7 @@ class MkSubmitInput {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -912,6 +1088,8 @@ class MkButtonToggleGroup {
     host = inject(ElementRef);
     /** Optional surrounding form field — supplies label/hint/error wiring. */
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Live list of projected toggle items, in DOM order. */
     toggles = contentChildren(MkButtonToggle, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toggles" }] : /* istanbul ignore next */ []));
@@ -951,7 +1129,7 @@ class MkButtonToggleGroup {
     onTouched = () => { };
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /** The single item that currently owns the tab stop (roving tabindex). */
     rovingTarget = computed(() => {
@@ -1259,6 +1437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkSelect {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     triggerRef = viewChild('trigger', /* @ts-ignore */
@@ -1276,6 +1456,8 @@ class MkSelect {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Force invalid styling + `aria-invalid` when used standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Disable the control. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Two-way selected value. */
@@ -1297,9 +1479,9 @@ class MkSelect {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -1457,7 +1639,7 @@ class MkSelect {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSelect, isStandalone: true, selector: "mk-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-select--sm": "effectiveSize() === 'sm'", "class.mk-select--md": "effectiveSize() === 'md'", "class.mk-select--lg": "effectiveSize() === 'lg'", "class.mk-select--open": "open()", "class.mk-select--invalid": "isInvalid()", "class.mk-select--disabled": "isDisabled()" }, classAttribute: "mk-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSelect, isStandalone: true, selector: "mk-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-select--sm": "effectiveSize() === 'sm'", "class.mk-select--md": "effectiveSize() === 'md'", "class.mk-select--lg": "effectiveSize() === 'lg'", "class.mk-select--open": "open()", "class.mk-select--invalid": "isInvalid()", "class.mk-select--disabled": "isDisabled()" }, classAttribute: "mk-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkSelect),
@@ -1482,7 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-select__trigger\"\n  [id]=\"triggerId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listId\"\n  [attr.aria-activedescendant]=\"\n    open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n  \"\n  [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  @if (displayLabel()) {\n    <span class=\"mk-select__value\">{{ displayLabel() }}</span>\n  } @else {\n    <span class=\"mk-select__value mk-select__value--placeholder\">{{\n      placeholder()\n    }}</span>\n  }\n  <span class=\"mk-select__arrow\" aria-hidden=\"true\"></span>\n</button>\n\n@if (open()) {\n  <ul\n    class=\"mk-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @for (opt of options(); track $index; let i = $index) {\n      <li\n        class=\"mk-select__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        [class.mk-select__option--active]=\"i === activeIndex()\"\n        [class.mk-select__option--selected]=\"i === selectedIndex()\"\n        [class.mk-select__option--disabled]=\"opt.disabled\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        <span class=\"mk-select__option-label\">{{ opt.label }}</span>\n        @if (i === selectedIndex()) {\n          <span class=\"mk-select__check\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    } @empty {\n      <li class=\"mk-select__empty\" role=\"presentation\">{{ i18n.noOptions }}</li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-select__trigger{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--sm) .mk-select__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-select--lg) .mk-select__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-select__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-select__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-select--invalid) .mk-select__trigger{border-color:var(--mk-danger)}:host(.mk-select--invalid) .mk-select__trigger:focus-visible{outline-color:var(--mk-danger)}.mk-select__trigger:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__value--placeholder{color:var(--mk-text-subtle)}.mk-select__arrow{flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--open) .mk-select__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__option--active{background-color:var(--mk-selected-bg)}.mk-select__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-select__check{flex:none;width:.4rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.mk-select__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-select__arrow,.mk-select__trigger{transition:none}}@media(pointer:coarse){.mk-select__trigger{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-select--sm) .mk-select__trigger{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Listbox — a standalone, always-visible selection list (the ARIA `listbox`
@@ -1506,6 +1688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkListbox {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     listRef = viewChild.required('list', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
@@ -1559,7 +1743,7 @@ class MkListbox {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.ariaLabelledby() ?? this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -1862,6 +2046,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkCascader {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     host = inject(ElementRef);
     injector = inject(Injector);
@@ -1914,7 +2100,7 @@ class MkCascader {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -2272,6 +2458,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkAutocomplete {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     announcer = inject(MkLiveAnnouncer);
@@ -2311,6 +2499,8 @@ class MkAutocomplete {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Force invalid styling + `aria-invalid` when used standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Disable the control. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** How the option list is filtered against the typed text. */
@@ -2348,9 +2538,9 @@ class MkAutocomplete {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -2545,7 +2735,7 @@ class MkAutocomplete {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAutocomplete, isStandalone: true, selector: "mk-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionSelected: "optionSelected" }, host: { properties: { "class.mk-autocomplete--sm": "effectiveSize() === 'sm'", "class.mk-autocomplete--md": "effectiveSize() === 'md'", "class.mk-autocomplete--lg": "effectiveSize() === 'lg'", "class.mk-autocomplete--open": "open()", "class.mk-autocomplete--invalid": "isInvalid()", "class.mk-autocomplete--disabled": "isDisabled()" }, classAttribute: "mk-autocomplete" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAutocomplete, isStandalone: true, selector: "mk-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionSelected: "optionSelected" }, host: { properties: { "class.mk-autocomplete--sm": "effectiveSize() === 'sm'", "class.mk-autocomplete--md": "effectiveSize() === 'md'", "class.mk-autocomplete--lg": "effectiveSize() === 'lg'", "class.mk-autocomplete--open": "open()", "class.mk-autocomplete--invalid": "isInvalid()", "class.mk-autocomplete--disabled": "isDisabled()" }, classAttribute: "mk-autocomplete" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkAutocomplete),
@@ -2570,7 +2760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<div #field class=\"mk-autocomplete__field\">\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-autocomplete__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    aria-autocomplete=\"list\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (query() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-autocomplete__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      tabindex=\"-1\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"clear()\"\n    ></button>\n  }\n\n  <span class=\"mk-autocomplete__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    class=\"mk-autocomplete__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-autocomplete__status\" role=\"presentation\">\n        <span class=\"mk-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-autocomplete__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === activeIndex()\"\n          [attr.aria-disabled]=\"opt.disabled || null\"\n          [class.mk-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.mk-autocomplete__option--disabled]=\"opt.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"selectOption(i)\"\n        >\n          <span class=\"mk-autocomplete__option-label\">{{ opt.label }}</span>\n          @if (opt.description) {\n            <span class=\"mk-autocomplete__option-desc\">{{\n              opt.description\n            }}</span>\n          }\n        </li>\n      } @empty {\n        <li class=\"mk-autocomplete__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-autocomplete__field{display:flex;align-items:center;position:relative}.mk-autocomplete__input{flex:1 1 auto;min-width:0;width:100%;height:var(--mk-control-height-md);padding-block:0;padding-inline:var(--mk-space-3) var(--mk-space-8);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__input::placeholder{color:var(--mk-text-subtle)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{height:var(--mk-control-height-sm);padding:0;font-size:var(--mk-font-size-sm);padding-inline:var(--mk-space-2) var(--mk-space-7);border-radius:var(--mk-radius-sm)}:host(.mk-autocomplete--lg) .mk-autocomplete__input{height:var(--mk-control-height-lg);padding:0;font-size:var(--mk-font-size-lg);padding-inline:var(--mk-space-4) var(--mk-space-9)}.mk-autocomplete__input:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-autocomplete__input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input{border-color:var(--mk-danger)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input:focus-visible{outline-color:var(--mk-danger)}.mk-autocomplete__input:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-autocomplete__clear{position:absolute;inset-inline-end:var(--mk-space-6);display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-autocomplete__clear:before,.mk-autocomplete__clear:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-autocomplete__clear:before{transform:rotate(45deg)}.mk-autocomplete__clear:after{transform:rotate(-45deg)}.mk-autocomplete__arrow{position:absolute;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-autocomplete--open) .mk-autocomplete__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-autocomplete__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-autocomplete__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-autocomplete__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-autocomplete__option--active{background-color:var(--mk-selected-bg)}.mk-autocomplete__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-autocomplete__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-autocomplete__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-autocomplete-spin var(--mk-duration-slow) linear infinite}@keyframes mk-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-autocomplete__arrow,.mk-autocomplete__input,.mk-autocomplete__clear{transition:none}.mk-autocomplete__spinner{animation:none}}.mk-autocomplete__option-desc{display:block;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);line-height:var(--mk-line-height-snug)}@media(pointer:coarse){.mk-autocomplete__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
 
 /**
  * Suggestion listbox for {@link MkMention}. Created dynamically by the
@@ -3072,6 +3262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkMultiSelect {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
@@ -3091,6 +3283,8 @@ class MkMultiSelect {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Force invalid styling + `aria-invalid` when used standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Disable the control. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** How the option list is filtered against the typed text. */
@@ -3183,9 +3377,9 @@ class MkMultiSelect {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -3439,7 +3633,7 @@ class MkMultiSelect {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMultiSelect, isStandalone: true, selector: "mk-multi-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionAdded: "optionAdded", optionRemoved: "optionRemoved" }, host: { properties: { "class.mk-multi-select--sm": "effectiveSize() === 'sm'", "class.mk-multi-select--md": "effectiveSize() === 'md'", "class.mk-multi-select--lg": "effectiveSize() === 'lg'", "class.mk-multi-select--open": "open()", "class.mk-multi-select--invalid": "isInvalid()", "class.mk-multi-select--disabled": "isDisabled()" }, classAttribute: "mk-multi-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMultiSelect, isStandalone: true, selector: "mk-multi-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionAdded: "optionAdded", optionRemoved: "optionRemoved" }, host: { properties: { "class.mk-multi-select--sm": "effectiveSize() === 'sm'", "class.mk-multi-select--md": "effectiveSize() === 'md'", "class.mk-multi-select--lg": "effectiveSize() === 'lg'", "class.mk-multi-select--open": "open()", "class.mk-multi-select--invalid": "isInvalid()", "class.mk-multi-select--disabled": "isDisabled()" }, classAttribute: "mk-multi-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkMultiSelect),
@@ -3474,7 +3668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<div\n  #control\n  class=\"mk-multi-select__control\"\n  (pointerdown)=\"onControlPointerdown($event)\"\n>\n  @for (chip of chips(); track chip.value) {\n    <mk-chip\n      class=\"mk-multi-select__chip\"\n      size=\"sm\"\n      [removable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [removeLabel]=\"i18n.removeItem(chip.label)\"\n      (removed)=\"removeChip(chip.value)\"\n    >\n      {{ chip.label }}\n    </mk-chip>\n  }\n\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-multi-select__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"chips().length ? '' : placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n\n  <span class=\"mk-multi-select__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-multi-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"control\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-multi-select__status\" role=\"presentation\">\n        <span class=\"mk-multi-select__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-multi-select__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt.value)\"\n          [attr.aria-disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value)) || null\n          \"\n          [attr.title]=\"\n            atMax() && !isSelected(opt.value) && !opt.disabled\n              ? atMaxHint()\n              : null\n          \"\n          [class.mk-multi-select__option--active]=\"i === activeIndex()\"\n          [class.mk-multi-select__option--selected]=\"isSelected(opt.value)\"\n          [class.mk-multi-select__option--disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value))\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"toggleOption(i)\"\n        >\n          <span class=\"mk-multi-select__check\" aria-hidden=\"true\"></span>\n          <span class=\"mk-multi-select__option-label\">{{ opt.label }}</span>\n        </li>\n      } @empty {\n        <li class=\"mk-multi-select__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-multi-select__control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);min-height:var(--mk-control-height-md);padding-block:var(--mk-space-1);padding-inline:var(--mk-space-2) var(--mk-space-8);position:relative;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:text;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__control:hover{border-color:var(--mk-border-strong)}.mk-multi-select__control:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-multi-select--sm) .mk-multi-select__control{min-height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-multi-select--lg) .mk-multi-select__control{min-height:var(--mk-control-height-lg)}:host(.mk-multi-select--invalid) .mk-multi-select__control{border-color:var(--mk-danger)}:host(.mk-multi-select--invalid) .mk-multi-select__control:focus-within{outline-color:var(--mk-danger)}:host(.mk-multi-select--disabled) .mk-multi-select__control{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-multi-select__chip{flex:none;max-width:100%}.mk-multi-select__input{flex:1 1 4rem;min-width:4rem;height:var(--mk-line-height-lg, 1.5rem);padding:0 var(--mk-space-1);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-multi-select__input::placeholder{color:var(--mk-text-subtle)}.mk-multi-select__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__arrow{position:absolute;top:50%;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:translateY(-75%) rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-multi-select--open) .mk-multi-select__arrow{transform:translateY(-25%) rotate(-135deg)}.mk-multi-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-multi-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-multi-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-multi-select__check{flex:none;position:relative;width:1rem;height:1rem;border:2px solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__option--selected .mk-multi-select__check{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-multi-select__option--selected .mk-multi-select__check:after{content:\"\";position:absolute;top:1px;left:4px;width:4px;height:8px;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);transform:rotate(45deg)}.mk-multi-select__option--active{background-color:var(--mk-selected-bg)}.mk-multi-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__option--disabled .mk-multi-select__check{border-color:var(--mk-border-subtle)}.mk-multi-select__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-multi-select__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-multi-select-spin var(--mk-duration-slow) linear infinite}@keyframes mk-multi-select-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-multi-select__arrow,.mk-multi-select__control,.mk-multi-select__check{transition:none}.mk-multi-select__spinner{animation:none}}@media(pointer:coarse){.mk-multi-select__input{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionAdded: [{ type: i0.Output, args: ["optionAdded"] }], optionRemoved: [{ type: i0.Output, args: ["optionRemoved"] }] } });
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionAdded: [{ type: i0.Output, args: ["optionAdded"] }], optionRemoved: [{ type: i0.Output, args: ["optionRemoved"] }] } });
 
 /**
  * TagInput — a freeform token input: type a value and press Enter (or a
@@ -3489,6 +3683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkTagInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     announcer = inject(MkLiveAnnouncer);
     host = inject(ElementRef);
@@ -3515,6 +3711,8 @@ class MkTagInput {
     ...(ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []));
     /** Force invalid styling + `aria-invalid` when used standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Disable the control. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Control size. Ignored when nested in an `mk-form-field`. */
@@ -3535,9 +3733,9 @@ class MkTagInput {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -3674,7 +3872,7 @@ class MkTagInput {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTagInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTagInput, isStandalone: true, selector: "mk-tag-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, host: { listeners: { "click": "focusInput()" }, properties: { "class.mk-tag-input--sm": "effectiveSize() === 'sm'", "class.mk-tag-input--lg": "effectiveSize() === 'lg'", "class.mk-tag-input--invalid": "isInvalid()", "class.mk-tag-input--disabled": "isDisabled()" }, classAttribute: "mk-tag-input" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTagInput, isStandalone: true, selector: "mk-tag-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "addOnBlur", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", added: "added", removed: "removed" }, host: { listeners: { "click": "focusInput()" }, properties: { "class.mk-tag-input--sm": "effectiveSize() === 'sm'", "class.mk-tag-input--lg": "effectiveSize() === 'lg'", "class.mk-tag-input--invalid": "isInvalid()", "class.mk-tag-input--disabled": "isDisabled()" }, classAttribute: "mk-tag-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkTagInput),
@@ -3708,7 +3906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<div class=\"mk-tag-input__field\">\n  <ul class=\"mk-tag-input__tags\">\n    @for (tag of value(); track $index; let i = $index) {\n      <li class=\"mk-tag-input__tag\">\n        <mk-chip\n          [size]=\"effectiveSize()\"\n          [removable]=\"!isDisabled()\"\n          [disabled]=\"isDisabled()\"\n          [removeLabel]=\"i18n.removeItem(tag)\"\n          (removed)=\"removeChipAt(i)\"\n        >\n          {{ tag }}\n        </mk-chip>\n      </li>\n    }\n    <li class=\"mk-tag-input__entry\">\n      <input\n        #input\n        class=\"mk-tag-input__input\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [id]=\"inputId\"\n        [value]=\"query()\"\n        [placeholder]=\"value().length ? '' : placeholder()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"atMax()\"\n        [attr.aria-disabled]=\"atMax() || null\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-required]=\"isRequired() || null\"\n        (input)=\"onQueryInput($event)\"\n        (keydown)=\"onKeydown($event)\"\n        (paste)=\"onPaste($event)\"\n        (blur)=\"onBlur()\"\n      />\n    </li>\n  </ul>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-tag-input__field{display:flex;min-height:var(--mk-control-height-md);padding:var(--mk-space-1);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:text;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-tag-input--sm) .mk-tag-input__field{min-height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-tag-input--lg) .mk-tag-input__field{min-height:var(--mk-control-height-lg)}.mk-tag-input__field:has(.mk-tag-input__input:focus){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-tag-input--invalid) .mk-tag-input__field{border-color:var(--mk-danger)}:host(.mk-tag-input--disabled) .mk-tag-input__field{background-color:var(--mk-surface-2);cursor:not-allowed;opacity:.7}.mk-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);width:100%;margin:0;padding:0;list-style:none}.mk-tag-input__tag{display:inline-flex}.mk-tag-input__entry{flex:1 1 6rem;display:inline-flex;align-items:center;min-width:6rem}.mk-tag-input__input{width:100%;padding:0 var(--mk-space-2);font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-tag-input--sm) .mk-tag-input__input{font-size:var(--mk-font-size-sm)}.mk-tag-input__input::placeholder{color:var(--mk-text-subtle)}.mk-tag-input__input:disabled{cursor:not-allowed}.mk-tag-input__input[readonly]{cursor:default}@media(pointer:coarse){.mk-tag-input__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-tag-input--sm) .mk-tag-input__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], added: [{ type: i0.Output, args: ["added"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
  * PasswordInput — a password field with a reveal toggle, an optional strength
@@ -3722,6 +3920,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkPasswordInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     inputRef = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
@@ -3765,7 +3965,7 @@ class MkPasswordInput {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -3948,6 +4148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkTransferList {
     host = inject(ElementRef);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     announcer = inject(MkLiveAnnouncer);
     injector = inject(Injector);
@@ -4010,7 +4212,7 @@ class MkTransferList {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /** Items keyed by value, for resolving the selected order. */
     byValue = computed(() => {
@@ -4528,6 +4730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkTreeSelect {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     host = inject(ElementRef);
     injector = inject(Injector);
@@ -4567,7 +4771,7 @@ class MkTreeSelect {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -5253,7 +5457,9 @@ class MkCodeEditor {
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "jsonError" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false) || !!this.jsonError(), /* @ts-ignore */
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false) || !!this.jsonError(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /** `aria-describedby` merging the field's ids with the JSON error id. */
     ariaDescribedBy = computed(() => {
@@ -5486,6 +5692,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkRating {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     /** Number of stars. */
     max = input(5, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
@@ -5512,7 +5720,7 @@ class MkRating {
     onTouched = () => { };
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /** The surrounding field's label labels this control (`aria-labelledby`). */
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
@@ -5676,17 +5884,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkNumberInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     inputRef = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
     /** Minimum value. */
     /** Accessible name when the control is used without an `mk-form-field` label. */
     ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Maximum value. */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Step increment for buttons + Arrow keys. */
     step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Two-way value. */
@@ -5699,6 +5911,8 @@ class MkNumberInput {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Force invalid styling when standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Control size. Ignored inside an `mk-form-field`. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -5711,9 +5925,9 @@ class MkNumberInput {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -5833,7 +6047,7 @@ class MkNumberInput {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkNumberInput, isStandalone: true, selector: "mk-number-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-number-input--sm": "effectiveSize() === 'sm'", "class.mk-number-input--lg": "effectiveSize() === 'lg'", "class.mk-number-input--invalid": "isInvalid()", "class.mk-number-input--disabled": "isDisabled()" }, classAttribute: "mk-number-input" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkNumberInput, isStandalone: true, selector: "mk-number-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-number-input--sm": "effectiveSize() === 'sm'", "class.mk-number-input--lg": "effectiveSize() === 'lg'", "class.mk-number-input--invalid": "isInvalid()", "class.mk-number-input--disabled": "isDisabled()" }, classAttribute: "mk-number-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkNumberInput),
@@ -5866,7 +6080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--dec\"\n  [attr.aria-label]=\"i18n.decrease\"\n  tabindex=\"-1\"\n  [disabled]=\"!canDecrement()\"\n  (click)=\"step_(-1)\"\n>\n  <span aria-hidden=\"true\">\u2212</span>\n</button>\n\n<input\n  #input\n  type=\"text\"\n  inputmode=\"decimal\"\n  class=\"mk-number-input__field\"\n  [id]=\"inputId\"\n  role=\"spinbutton\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--inc\"\n  [attr.aria-label]=\"i18n.increase\"\n  tabindex=\"-1\"\n  [disabled]=\"!canIncrement()\"\n  (click)=\"step_(1)\"\n>\n  <span aria-hidden=\"true\">+</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-number-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-number-input--lg){height:var(--mk-control-height-lg)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-number-input--invalid){border-color:var(--mk-danger)}:host(.mk-number-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-number-input__field{width:4.5rem;min-width:0;padding:0 var(--mk-space-2);text-align:center;font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none;appearance:textfield}.mk-number-input__field::placeholder{color:var(--mk-text-subtle)}.mk-number-input__btn{flex:none;display:grid;place-items:center;width:2rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-number-input__btn--dec{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn--inc{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn:not(:disabled):hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-number-input__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.mk-number-input__btn{transition:none}}@media(pointer:coarse){.mk-number-input__field{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Numeric keypad — a touch-first 3×4 digit pad for PIN entry, quantity entry
@@ -5900,11 +6114,13 @@ class MkNumericKeypad {
     /** PIN length (`pin` mode only). Reaching it emits `submit`. */
     length = input(4, { ...(ngDevMode ? { debugName: "length" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Lower bound reported through the validator (`quantity`/`amount`). */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Upper bound reported through the validator (`quantity`/`amount`). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Mask the echo row in `pin` mode. Default `true`. */
     mask = input(true, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Show the echo row above the keys. Default `true`. */
@@ -6448,6 +6664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkOtp {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     cells = viewChildren('cell', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
@@ -6484,7 +6702,7 @@ class MkOtp {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -6764,6 +6982,8 @@ function mkCountryFlag(code) {
  */
 class MkPhoneInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     triggerRef = viewChild('trigger', /* @ts-ignore */
@@ -6827,7 +7047,7 @@ class MkPhoneInput {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -7245,6 +7465,8 @@ function mkPostalCodeValidator(country, formats = MK_POSTAL_FORMATS) {
  */
 class MkPostalCodeInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     /** ISO 3166-1 alpha-2 country whose format applies. */
@@ -7301,7 +7523,7 @@ class MkPostalCodeInput {
         return fmt.pattern.test(v);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() ||
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) ||
         (this.field?.hasError() ?? false) ||
         (this.touched() && this.valid() === false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
@@ -7453,6 +7675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkCurrencyInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     /** ISO 4217 currency code (`PLN`, `USD`, …). Empty = plain decimal. */
@@ -7467,11 +7691,13 @@ class MkCurrencyInput {
     decimals = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "decimals" }] : /* istanbul ignore next */ []));
     /** Clamp the value to at least this on blur. */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Clamp the value to at most this on blur. */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Allow a leading minus sign. */
     allowNegative = input(true, { ...(ngDevMode ? { debugName: "allowNegative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Control size. Ignored when nested in an `mk-form-field`. */
@@ -7501,7 +7727,7 @@ class MkCurrencyInput {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -7819,6 +8045,8 @@ const DEFAULT_MASK = '0000 0000 0000 0000';
  */
 class MkCardNumberInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     /** Show the detected brand as a badge inside the field. */
@@ -7890,7 +8118,7 @@ class MkCardNumberInput {
         return mkLuhnCheck(digits);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() ||
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) ||
         (this.field?.hasError() ?? false) ||
         (this.touched() && this.valid() === false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
@@ -8052,6 +8280,8 @@ function mkIbanValidator() {
  */
 class MkIbanInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     /** Control size. Ignored when nested in an `mk-form-field`. */
@@ -8110,7 +8340,7 @@ class MkIbanInput {
         return mkIbanChecksum(compact);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() ||
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) ||
         (this.field?.hasError() ?? false) ||
         (this.touched() && this.valid() === false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
@@ -8329,6 +8559,8 @@ function mkTaxIdValidator(country) {
  */
 class MkTaxIdInput {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     /** ISO 3166-1 alpha-2 country whose format applies. */
@@ -8393,7 +8625,7 @@ class MkTaxIdInput {
         return compact.length < digits ? null : false;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() ||
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) ||
         (this.field?.hasError() ?? false) ||
         (this.touched() && this.valid() === false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
@@ -8521,6 +8753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkSignaturePad {
     host = inject(ElementRef);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
@@ -8567,7 +8801,7 @@ class MkSignaturePad {
     padId = this.field?.controlId ?? mkUniqueId('mk-signature');
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -8925,6 +9159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkRadioGroup {
     host = inject(ElementRef);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Two-way selected value. */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -8956,7 +9192,7 @@ class MkRadioGroup {
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
@@ -9184,6 +9420,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkSwitch {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     /** Two-way checked (on/off) state. */
     checked = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -9191,6 +9429,8 @@ class MkSwitch {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Force the invalid visual + `aria-invalid` when used standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Control size. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -9206,9 +9446,9 @@ class MkSwitch {
     labelId = mkUniqueId('mk-switch-label');
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
     describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
@@ -9246,7 +9486,7 @@ class MkSwitch {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkSwitch, isStandalone: true, selector: "mk-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.mk-switch--sm": "size() === 'sm'", "class.mk-switch--md": "size() === 'md'", "class.mk-switch--lg": "size() === 'lg'", "class.mk-switch--checked": "checked()", "class.mk-switch--disabled": "isDisabled()", "attr.data-tone": "tone()" }, classAttribute: "mk-switch" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkSwitch, isStandalone: true, selector: "mk-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { properties: { "class.mk-switch--sm": "size() === 'sm'", "class.mk-switch--md": "size() === 'md'", "class.mk-switch--lg": "size() === 'lg'", "class.mk-switch--checked": "checked()", "class.mk-switch--disabled": "isDisabled()", "attr.data-tone": "tone()" }, classAttribute: "mk-switch" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkSwitch),
@@ -9271,7 +9511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<button\n  type=\"button\"\n  class=\"mk-switch__control\"\n  role=\"switch\"\n  [attr.aria-checked]=\"checked()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onTouched()\"\n>\n  <span class=\"mk-switch__track\">\n    <span class=\"mk-switch__thumb\"></span>\n  </span>\n</button>\n<span class=\"mk-switch__label\" [id]=\"labelId\" (click)=\"toggle()\">\n  <ng-content />\n</span>\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_track-w: 2.4rem;--_track-h: 1.4rem;--_gap: 2px;display:inline-flex;align-items:center;gap:var(--mk-space-2);font-family:var(--mk-font-sans);font-size:var(--mk-font-size-md);color:var(--mk-text)}:host(.mk-switch--sm){--_track-w: 2rem;--_track-h: 1.15rem;font-size:var(--mk-font-size-sm)}:host(.mk-switch--lg){--_track-w: 2.9rem;--_track-h: 1.7rem;font-size:var(--mk-font-size-lg)}:host([data-tone=primary]){--_main: var(--mk-primary)}:host([data-tone=success]){--_main: var(--mk-success)}:host([data-tone=warning]){--_main: var(--mk-warning)}:host([data-tone=danger]){--_main: var(--mk-danger)}:host([data-tone=info]){--_main: var(--mk-info)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse)}.mk-switch__control{flex:none;padding:0;border:none;background:none;cursor:pointer;border-radius:var(--mk-radius-pill)}.mk-switch__control:disabled{cursor:not-allowed}@media(pointer:coarse){.mk-switch__control{position:relative}.mk-switch__control:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-switch__track{display:block;position:relative;width:var(--_track-w);height:var(--_track-h);background-color:var(--mk-border-strong);border-radius:var(--mk-radius-pill);transition:background-color var(--mk-duration-normal) var(--mk-ease-standard)}.mk-switch__thumb{position:absolute;top:var(--_gap);inset-inline-start:var(--_gap);width:calc(var(--_track-h) - 2 * var(--_gap));height:calc(var(--_track-h) - 2 * var(--_gap));background-color:var(--mk-surface);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);transition:transform var(--mk-duration-normal) var(--mk-ease-emphasized)}:host(.mk-switch--checked) .mk-switch__track{background-color:var(--_main)}:host(.mk-switch--checked) .mk-switch__thumb{transform:translate(calc(var(--_track-w) - var(--_track-h)))}:host(.mk-switch--checked:dir(rtl)) .mk-switch__thumb{transform:translate(calc(-1 * (var(--_track-w) - var(--_track-h))))}.mk-switch__control:focus-visible .mk-switch__track{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-switch__label{cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-switch--disabled){opacity:.6}:host(.mk-switch--disabled) .mk-switch__label{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.mk-switch__track,.mk-switch__thumb{transition:none}}\n"] }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 
 /**
  * Slider — a single-value range slider with `role="slider"`, a filled track and
@@ -9287,6 +9527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 class MkSlider {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     trackRef = viewChild('track', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
     thumbRef = viewChild('thumb', /* @ts-ignore */
@@ -9301,6 +9543,8 @@ class MkSlider {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Force the invalid visual + `aria-invalid` when used standalone. */
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Control size (track/thumb thickness). */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -9325,9 +9569,9 @@ class MkSlider {
     onTouched = () => { };
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => {
         if (this.ariaLabel())
@@ -9524,7 +9768,7 @@ class MkSlider {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkSlider, isStandalone: true, selector: "mk-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-slider--sm": "size() === 'sm'", "class.mk-slider--md": "size() === 'md'", "class.mk-slider--lg": "size() === 'lg'", "class.mk-slider--disabled": "isDisabled()", "attr.data-tone": "tone()" }, classAttribute: "mk-slider" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkSlider, isStandalone: true, selector: "mk-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-slider--sm": "size() === 'sm'", "class.mk-slider--md": "size() === 'md'", "class.mk-slider--lg": "size() === 'lg'", "class.mk-slider--disabled": "isDisabled()", "attr.data-tone": "tone()" }, classAttribute: "mk-slider" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkSlider),
@@ -9558,7 +9802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<div #track class=\"mk-slider__track\" (pointerdown)=\"onPointerDown($event)\">\n  <div class=\"mk-slider__fill\" [style.width.%]=\"percent()\"></div>\n  <div\n    #thumb\n    class=\"mk-slider__thumb\"\n    role=\"slider\"\n    [style.inset-inline-start.%]=\"percent()\"\n    [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuetext]=\"value()\"\n    aria-orientation=\"horizontal\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onPointerUp()\"\n  ></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_track-h: .4rem;--_thumb: 1.15rem;display:block;width:100%;padding:calc(var(--_thumb) / 2) 0;font-family:var(--mk-font-sans);touch-action:none}:host(.mk-slider--sm){--_track-h: .3rem;--_thumb: .95rem}:host(.mk-slider--lg){--_track-h: .55rem;--_thumb: 1.4rem}:host([data-tone=primary]){--_main: var(--mk-primary)}:host([data-tone=success]){--_main: var(--mk-success)}:host([data-tone=warning]){--_main: var(--mk-warning)}:host([data-tone=danger]){--_main: var(--mk-danger)}:host([data-tone=info]){--_main: var(--mk-info)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse)}.mk-slider__track{position:relative;width:100%;height:var(--_track-h);background-color:var(--mk-surface-3);border-radius:var(--mk-radius-pill);cursor:pointer}.mk-slider__fill{position:absolute;top:0;inset-inline-start:0;height:100%;background-color:var(--_main);border-radius:var(--mk-radius-pill)}.mk-slider__thumb{position:absolute;top:50%;width:var(--_thumb);height:var(--_thumb);margin-inline-start:calc(var(--_thumb) / -2);background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--_main);border-radius:var(--mk-radius-circle);box-shadow:var(--mk-shadow-sm);transform:translateY(-50%);cursor:grab}.mk-slider__thumb:active{cursor:grabbing}@media(pointer:coarse){.mk-slider__thumb:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}}.mk-slider__thumb:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-slider--disabled){opacity:.6}:host(.mk-slider--disabled) .mk-slider__track,:host(.mk-slider--disabled) .mk-slider__thumb{cursor:not-allowed}\n"] }]
-        }], propDecorators: { trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumbRef: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], thumbRef: [{ type: i0.ViewChild, args: ['thumb', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Whether `value` is a valid `#rgb` / `#rrggbb` hex color. */
 function isHex(value) {
@@ -9583,6 +9827,8 @@ function toLongHex(value) {
  */
 class MkColorPicker {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     nativeRef = viewChild('native', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "nativeRef" }] : /* istanbul ignore next */ []));
@@ -9620,7 +9866,7 @@ class MkColorPicker {
     ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
@@ -9717,6 +9963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkRangeSlider {
     host = inject(ElementRef);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     trackRef = viewChildren('track', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trackRef" }] : /* istanbul ignore next */ []));
@@ -9764,7 +10012,7 @@ class MkRangeSlider {
     ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));