@malva-ui/core 0.1.12 → 0.1.14

package/fesm2022/malva-ui-core-form-utils.mjs

@@ -0,0 +1,977 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, viewChild, signal, DestroyRef, afterNextRender, contentChild, effect, isDevMode, Directive, output, Injectable } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MLV_FORM_UTILS_I18N } from '@malva-ui/i18n';
+import { LucideCircleQuestionMark } from '@lucide/angular';
+import { MlvTooltip } from '@malva-ui/core/tooltip';
+import { NgControl, FormGroupDirective, NgForm, StatusChangeEvent, TouchedChangeEvent, PristineChangeEvent } from '@angular/forms';
+import { FormField } from '@angular/forms/signals';
+import { MlvStructural, mlvNextId, MlvRtlService } from '@malva-ui/cdk/utils';
+import { NgTemplateOutlet } from '@angular/common';
+import { MlvButtonClose } from '@malva-ui/core/button';
+import { Subject } from 'rxjs';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
+
+const MLV_FORM_CONTROL = new InjectionToken('MLV_FORM_CONTROL');
+
+class MlvLabel {
+    /** Id of the control this label names, rendered as the native `for` attribute. */
+    for = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the labelled control is required. Renders a visual `*` marker plus
+     * a visually-hidden, translated "required" word so the requirement is
+     * announced even where `aria-required` is not surfaced. Controls extending
+     * `MlvSignalFormUiControlBase` forward their own `required` input here.
+     */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * @private The form-utils i18n strings. Optional so a bare `mlv-label` still
+     * renders in applications that never called `provideMlvI18n()`.
+     */
+    _i18n = inject(MLV_FORM_UTILS_I18N, { optional: true });
+    /** @protected Translated word announced after the label of a required control. */
+    _requiredText = computed(() => this._i18n?.().required ?? 'required', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_requiredText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvLabel, isStandalone: true, selector: "mlv-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-label" }, ngImport: i0, template: `
+    <label [attr.for]="for()">
+      <ng-content />
+      @if (required()) {
+        <span class="mlv-label__required" aria-hidden="true">*</span>
+        <span class="cdk-visually-hidden">{{ _requiredText() }}</span>
+      }
+      <span class="mlv-label__hint">
+        <ng-content select="mlv-hint" />
+      </span>
+    </label>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-label{display:block;margin-bottom:.25rem;font-size:var(--mlv-font-size-m)}[class*=--tight] .mlv-label:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-label[class*=--tight]{font-size:var(--mlv-font-size-s)}[class*=--compact] .mlv-label:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-label[class*=--compact]{font-size:var(--mlv-font-size-m)}[class*=--spacious] .mlv-label:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-label[class*=--spacious]{font-size:var(--mlv-font-size-l)}[class*=--airy] .mlv-label:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-label[class*=--airy]{font-size:var(--mlv-font-size-xl)}.mlv-label label{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--mlv-text-primary)}.mlv-label__hint{display:inline-flex;align-self:center}.mlv-label__required{color:var(--mlv-text-negative);margin-inline-start:-.125rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvLabel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-label', template: `
+    <label [attr.for]="for()">
+      <ng-content />
+      @if (required()) {
+        <span class="mlv-label__required" aria-hidden="true">*</span>
+        <span class="cdk-visually-hidden">{{ _requiredText() }}</span>
+      }
+      <span class="mlv-label__hint">
+        <ng-content select="mlv-hint" />
+      </span>
+    </label>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-label',
+                    }, styles: ["@layer mlv.components{.mlv-label{display:block;margin-bottom:.25rem;font-size:var(--mlv-font-size-m)}[class*=--tight] .mlv-label:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-label[class*=--tight]{font-size:var(--mlv-font-size-s)}[class*=--compact] .mlv-label:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-label[class*=--compact]{font-size:var(--mlv-font-size-m)}[class*=--spacious] .mlv-label:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-label[class*=--spacious]{font-size:var(--mlv-font-size-l)}[class*=--airy] .mlv-label:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-label[class*=--airy]{font-size:var(--mlv-font-size-xl)}.mlv-label label{display:inline-flex;align-items:baseline;gap:.25rem;color:var(--mlv-text-primary)}.mlv-label__hint{display:inline-flex;align-self:center}.mlv-label__required{color:var(--mlv-text-negative);margin-inline-start:-.125rem}}\n"] }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+/**
+ * Secondary hint for the control named by the enclosing `mlv-label`.
+ *
+ * The hint is authored as projected content — `<mlv-hint>Sent to your phone</mlv-hint>` —
+ * but it renders as a small `circle-question-mark` icon button that reveals the
+ * text in an `mlvTooltip` on hover and on keyboard focus. Rendering an icon
+ * rather than inline text keeps the label row on one line no matter how long
+ * the hint is, which inline text could not do inside the label's flex row.
+ *
+ * The projected content itself stays in the DOM (hidden) purely as the source
+ * the tooltip string is read from; it is `aria-hidden` so the hint no longer
+ * leaks into the accessible name of the labelled control. The same string is
+ * put on the trigger's `aria-label`, so assistive tech still reaches it.
+ *
+ * Use `mlv-description` instead for sentence-length help text that should stay
+ * permanently visible below the control.
+ *
+ * @example Inside a label
+ * ```html
+ * <mlv-label for="email">
+ *   Email
+ *   <mlv-hint>We only use this for receipts</mlv-hint>
+ * </mlv-label>
+ * ```
+ *
+ * @example Interpolated, as every `hint`-input control renders it
+ * ```html
+ * <mlv-hint>{{ hint() }}</mlv-hint>
+ * ```
+ */
+class MlvHint {
+    /**
+     * @protected Wrapper around the projected content. Kept in the DOM (only
+     * `display: none`, never `@if`-ed away) because it is the sole source the
+     * hint string can be read from, and `textContent` still resolves on a
+     * non-displayed element.
+     */
+    _source = viewChild.required('source', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_source" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Trimmed text of the projected content — used both as the tooltip
+     * body and as the trigger's accessible name. Empty until the first render has
+     * produced the projected DOM, and kept in sync afterwards by `_observer`.
+     * While it is empty no trigger is rendered at all, so an empty `mlv-hint`
+     * never leaves a nameless icon button behind.
+     */
+    _text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_text" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Watches the projected content for changes. Interpolated hints
+     * (`<mlv-hint>{{ hint() }}</mlv-hint>`) mutate a text node owned by the
+     * *parent* view, which no signal in this component can depend on — and
+     * `textContent` is not a reactive read, so an effect would evaluate once and
+     * never re-run. A MutationObserver is the only thing that sees the change.
+     */
+    _observer = null;
+    /** @private Disconnects `_observer` when the component is destroyed. */
+    _destroyRef = inject(DestroyRef);
+    constructor() {
+        // Deferred to `afterNextRender` so it never runs on the server, where there
+        // is no DOM to read and no MutationObserver to construct.
+        afterNextRender(() => {
+            const sourceEl = this._source().nativeElement;
+            this._readText(sourceEl);
+            if (typeof MutationObserver === 'undefined') {
+                return;
+            }
+            this._observer = new MutationObserver(() => this._readText(sourceEl));
+            this._observer.observe(sourceEl, {
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        });
+        this._destroyRef.onDestroy(() => this._observer?.disconnect());
+    }
+    /**
+     * @protected Swallows the trigger's click so it does not read as an
+     * activation of the enclosing `<label>`. `preventDefault()` stops the label's
+     * native "focus the labelled control" behaviour, and `stopPropagation()`
+     * stops click handlers bound on `mlv-label` itself — `mlv-select` binds one
+     * there to open its dropdown — from firing when the user only wanted the
+     * hint. Both are required; neither alone covers the other case.
+     */
+    _onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * @private Reads the trimmed projected text into `_text`. Setting a signal to
+     * an identical string is a no-op, so re-reads triggered by unrelated DOM
+     * mutations cannot loop.
+     */
+    _readText(sourceEl) {
+        this._text.set(sourceEl.textContent?.trim() ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvHint, isStandalone: true, selector: "mlv-hint", host: { classAttribute: "mlv-hint" }, viewQueries: [{ propertyName: "_source", first: true, predicate: ["source"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (_text(); as text) {
+      <button
+        type="button"
+        class="mlv-hint__trigger"
+        [attr.aria-label]="text"
+        [mlvTooltip]="text"
+        (click)="_onClick($event)"
+      >
+        <svg lucideCircleQuestionMark aria-hidden="true" [size]="14"></svg>
+      </button>
+    }
+    <span #source class="mlv-hint__source" aria-hidden="true"
+      ><ng-content
+    /></span>
+  `, isInline: true, styles: ["@layer mlv.components{.mlv-hint{display:inline-flex;align-items:center}.mlv-hint__source{display:none}.mlv-hint__trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--mlv-radius-full);background:none;color:var(--mlv-text-tertiary);line-height:0;cursor:help;transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-hint__trigger:hover,.mlv-hint__trigger:focus-visible{color:var(--mlv-text-secondary)}.mlv-hint__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mlv-hint__trigger{transition:none}}}\n"], dependencies: [{ kind: "component", type: LucideCircleQuestionMark, selector: "svg[lucideCircleQuestionMark], svg[lucideHelpCircle], svg[lucideCircleHelp]" }, { kind: "directive", type: MlvTooltip, selector: "[mlvTooltip]", inputs: ["mlvTooltip", "tooltipPlacement", "tooltipTone", "tooltipDelay", "tooltipDisabled", "tooltipArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvHint, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-hint', template: `
+    @if (_text(); as text) {
+      <button
+        type="button"
+        class="mlv-hint__trigger"
+        [attr.aria-label]="text"
+        [mlvTooltip]="text"
+        (click)="_onClick($event)"
+      >
+        <svg lucideCircleQuestionMark aria-hidden="true" [size]="14"></svg>
+      </button>
+    }
+    <span #source class="mlv-hint__source" aria-hidden="true"
+      ><ng-content
+    /></span>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-hint',
+                    }, imports: [LucideCircleQuestionMark, MlvTooltip], styles: ["@layer mlv.components{.mlv-hint{display:inline-flex;align-items:center}.mlv-hint__source{display:none}.mlv-hint__trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--mlv-radius-full);background:none;color:var(--mlv-text-tertiary);line-height:0;cursor:help;transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-hint__trigger:hover,.mlv-hint__trigger:focus-visible{color:var(--mlv-text-secondary)}.mlv-hint__trigger:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:var(--mlv-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mlv-hint__trigger{transition:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _source: [{ type: i0.ViewChild, args: ['source', { isSignal: true }] }] } });
+
+/**
+ * Persistent help text rendered below a form control, in front of the
+ * validation message. Projected into `mlv-form-control-wrapper` through its
+ * `mlv-description` slot and referenced by the control's `aria-describedby`,
+ * so it stays readable while a validation message is shown.
+ *
+ * @example
+ * <mlv-description [id]="descriptionId">
+ *   We only use this address for receipts.
+ * </mlv-description>
+ */
+class MlvDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: MlvDescription, isStandalone: true, selector: "mlv-description", host: { classAttribute: "mlv-description" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer mlv.components{.mlv-description{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size);color:var(--mlv-text-secondary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvDescription, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-description', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-description',
+                    }, styles: ["@layer mlv.components{.mlv-description{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size);color:var(--mlv-text-secondary)}}\n"] }]
+        }] });
+
+class MlvMessage {
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvMessage, isStandalone: true, selector: "mlv-message", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.enter": "enter-animation", "animate.leave": "leave-animation" }, properties: { "class": "\"mlv-message--\" + state()", "attr.role": "state() === 'error' ? 'alert' : null", "attr.aria-live": "state() !== 'default' ? 'polite' : null" }, classAttribute: "mlv-message" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: ["@layer mlv.components{.mlv-message{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size)}.mlv-message--default{color:var(--mlv-text-secondary)}.mlv-message--success{color:var(--mlv-text-positive)}.mlv-message--info{color:var(--mlv-text-info)}.mlv-message--warning{color:var(--mlv-text-warning)}.mlv-message--error{color:var(--mlv-text-negative)}@media(prefers-reduced-motion:reduce){.mlv-message,.mlv-message *,.mlv-message:before,.mlv-message:after,[class^=mlv-message__],[class*=\" mlv-message__\"],[class^=mlv-message--],[class*=\" mlv-message--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.enter-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default)}.leave-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default) reverse}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMessage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-message', host: {
+                        'animate.enter': 'enter-animation',
+                        'animate.leave': 'leave-animation',
+                        class: 'mlv-message',
+                        '[class]': '"mlv-message--" + state()',
+                        '[attr.role]': "state() === 'error' ? 'alert' : null",
+                        '[attr.aria-live]': "state() !== 'default' ? 'polite' : null",
+                    }, template: ` <ng-content /> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer mlv.components{.mlv-message{display:block;font-weight:400;font-size:var(--mlv-typography-body-s-size)}.mlv-message--default{color:var(--mlv-text-secondary)}.mlv-message--success{color:var(--mlv-text-positive)}.mlv-message--info{color:var(--mlv-text-info)}.mlv-message--warning{color:var(--mlv-text-warning)}.mlv-message--error{color:var(--mlv-text-negative)}@media(prefers-reduced-motion:reduce){.mlv-message,.mlv-message *,.mlv-message:before,.mlv-message:after,[class^=mlv-message__],[class*=\" mlv-message__\"],[class^=mlv-message--],[class*=\" mlv-message--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}.enter-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default)}.leave-animation{animation:mlv-slide-down var(--mlv-duration-normal) var(--mlv-ease-default) reverse}}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+const DEFAULT_ERROR_MESSAGES = {
+    required: () => 'This field is required',
+    email: () => 'Please enter a valid email address',
+    min: (err) => `Value must be at least ${err.min}`,
+    max: (err) => `Value must be at most ${err.max}`,
+    minlength: (err) => {
+        const e = err;
+        return `Must be at least ${e.requiredLength} characters`;
+    },
+    maxlength: (err) => {
+        const e = err;
+        return `Must be at most ${e.requiredLength} characters`;
+    },
+    pattern: () => 'Invalid format',
+};
+/**
+ * Validator keys already reported through {@link MlvFormField}'s dev-mode
+ * warning. Module-scoped so a key is named once per application run rather than
+ * on every change-detection pass.
+ */
+const WARNED_UNMAPPED_KEYS = new Set();
+class MlvFormField {
+    /** Visual state of the field. Overridden to `'error'` when an auto error message is shown. */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Custom validator-key → message map (string or factory) overriding the built-in defaults. */
+    errorMessages = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []));
+    /** Controls when validation errors become visible. */
+    displayStrategy = input('touched', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayStrategy" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The form-utils i18n strings. Optional so `mlv-form-field` keeps
+     * rendering in applications that never called `provideMlvI18n()`.
+     */
+    _i18n = inject(MLV_FORM_UTILS_I18N, { optional: true });
+    /** @private The projected `NgControl` whose validation state this field reflects. */
+    _ngControl = contentChild(NgControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControl" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The projected signal-forms `[formField]` directive, when the
+     * child control is bound through `@angular/forms/signals` instead of an
+     * `NgControl`. Takes precedence over the NgControl path when present.
+     */
+    _signalField = contentChild(FormField, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_signalField" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The bound signal-forms `FieldState`, or `null` while no
+     * `[formField]` child is projected. `field()` is the `FieldTree`; calling it
+     * yields the reactive `FieldState`.
+     */
+    _signalFieldState = computed(() => {
+        const formField = this._signalField();
+        return formField ? formField.field()() : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_signalFieldState" }] : /* istanbul ignore next */ []));
+    /** @private The ancestor form directive, used to observe submission state. */
+    _formDirective = inject(FormGroupDirective, { optional: true }) ??
+        inject(NgForm, { optional: true });
+    /** @private Current validation errors of the projected control. */
+    _controlErrors = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controlErrors" }] : /* istanbul ignore next */ []));
+    /** @private Whether the projected control has been touched. */
+    _controlTouched = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controlTouched" }] : /* istanbul ignore next */ []));
+    /** @private Whether the projected control is dirty. */
+    _controlDirty = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_controlDirty" }] : /* istanbul ignore next */ []));
+    /** @private Whether the ancestor form has been submitted. */
+    _formSubmitted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitted" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            // Signal-forms path: state is read reactively from the FieldState — no
+            // event subscriptions. (The signals interop also exposes a shim
+            // NgControl whose `.control` lacks the `events` stream, so the legacy
+            // path below must not run for a [formField]-bound child.)
+            if (this._signalField())
+                return;
+            const control = this._ngControl()?.control;
+            if (!control)
+                return;
+            this._controlErrors.set(control.errors);
+            this._controlTouched.set(control.touched);
+            this._controlDirty.set(control.dirty);
+            this._formSubmitted.set(this._formDirective?.submitted ?? false);
+            const subscription = control.events.subscribe((event) => {
+                if (event instanceof StatusChangeEvent) {
+                    this._controlErrors.set(control.errors);
+                }
+                else if (event instanceof TouchedChangeEvent) {
+                    this._controlTouched.set(event.touched);
+                }
+                else if (event instanceof PristineChangeEvent) {
+                    this._controlDirty.set(!event.pristine);
+                }
+            });
+            const formDirective = this._formDirective;
+            if (formDirective) {
+                const formControl = formDirective.form;
+                const formSub = formControl.events.subscribe(() => {
+                    this._formSubmitted.set(formDirective.submitted);
+                });
+                subscription.add(formSub);
+            }
+            onCleanup(() => subscription.unsubscribe());
+        });
+        // Dev-only diagnostic: a validator key with no mapped message renders the
+        // generic fallback, which is correct for users but usually a gap for the
+        // author. Warned once per key per application run.
+        effect(() => {
+            const key = this._unmappedErrorKey();
+            if (!key || !isDevMode() || WARNED_UNMAPPED_KEYS.has(key))
+                return;
+            WARNED_UNMAPPED_KEYS.add(key);
+            console.warn(`[mlv-form-field] No message is mapped for the validator key "${key}"; ` +
+                `showing the generic message instead. Supply one through [errorMessages].`);
+        });
+    }
+    /** @private Whether validation errors should currently be displayed, per {@link displayStrategy}. */
+    _shouldDisplay = computed(() => {
+        const signalState = this._signalFieldState();
+        switch (this.displayStrategy()) {
+            case 'touched':
+                return signalState ? signalState.touched() : this._controlTouched();
+            case 'dirty':
+                return signalState ? signalState.dirty() : this._controlDirty();
+            case 'submit':
+                // Signal forms: submission is field-tree-level state; the closest
+                // per-field proxy is touched (submit() marks all fields touched).
+                return signalState ? signalState.touched() : this._formSubmitted();
+            case 'immediate':
+                return true;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_shouldDisplay" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Unified error view: `[key, errorPayload]` pairs from whichever
+     * forms API the projected control is bound through. Signal-forms
+     * `ValidationError`s are keyed by their lower-cased `kind` (matching the
+     * legacy reactive keys: `minLength` → `minlength`); the payload is the
+     * error object itself (it carries `message` when a rule supplied one).
+     */
+    _errorEntries = computed(() => {
+        const signalState = this._signalFieldState();
+        if (signalState) {
+            return signalState
+                .errors()
+                .map((error) => [error.kind.toLowerCase(), error]);
+        }
+        const errors = this._controlErrors();
+        return errors ? Object.entries(errors) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_errorEntries" }] : /* istanbul ignore next */ []));
+    /** The resolved auto error message for the projected control, or `''` when none should show. */
+    autoErrorMessage = computed(() => {
+        const entries = this._errorEntries();
+        if (entries.length === 0 || !this._shouldDisplay())
+            return '';
+        const customMessages = this.errorMessages();
+        const [key, payload] = entries[0];
+        const custom = customMessages[key];
+        if (custom) {
+            return typeof custom === 'function' ? custom(payload) : custom;
+        }
+        // Signal-forms rules can carry their own message — prefer it.
+        const ruleMessage = payload?.message;
+        if (ruleMessage)
+            return ruleMessage;
+        const defaultFn = DEFAULT_ERROR_MESSAGES[key];
+        if (defaultFn) {
+            return defaultFn(payload);
+        }
+        // Unknown validator key: never surface the raw key to end users.
+        return this._genericErrorMessage();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoErrorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Neutral, translated message shown when a validator key has no
+     * consumer-supplied, rule-supplied or built-in message.
+     */
+    _genericErrorMessage = computed(() => this._i18n?.().invalidValue ?? 'This value is invalid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_genericErrorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The currently displayed validator key that has no mapped message
+     * and therefore falls back to {@link _genericErrorMessage} — `null` when a
+     * specific message applies. Drives the dev-mode warning only.
+     */
+    _unmappedErrorKey = computed(() => {
+        const entries = this._errorEntries();
+        if (entries.length === 0 || !this._shouldDisplay())
+            return null;
+        const [key, payload] = entries[0];
+        if (this.errorMessages()[key])
+            return null;
+        if (payload?.message)
+            return null;
+        if (DEFAULT_ERROR_MESSAGES[key])
+            return null;
+        return key;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_unmappedErrorKey" }] : /* istanbul ignore next */ []));
+    /** The effective visual state: `'error'` when an auto error message is shown, otherwise {@link state}. */
+    resolvedState = computed(() => {
+        if (this.autoErrorMessage())
+            return 'error';
+        return this.state();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFormField, isStandalone: true, selector: "mlv-form-field", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, displayStrategy: { classPropertyName: "displayStrategy", publicName: "displayStrategy", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "_ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "_signalField", first: true, predicate: FormField, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="mlv-form-field" [class]="'mlv-form-field--' + resolvedState()">
+      <ng-content select="mlv-label" />
+      <div class="mlv-form-field__control">
+        <ng-content />
+      </div>
+      <ng-content select="mlv-message" />
+      @if (autoErrorMessage()) {
+        <mlv-message state="error">{{ autoErrorMessage() }}</mlv-message>
+      }
+    </div>
+  `, isInline: true, styles: ["@layer mlv.components{:host{display:block}.mlv-form-field{display:flex;flex-direction:column}.mlv-form-field__control{display:flex;align-items:center;width:100%}.mlv-form-field__control>*{width:100%}.mlv-form-field--error>.mlv-form-field__control>*>.mlv-form-control-wrapper{--container-border-color: var(--mlv-border-error)}}\n"], dependencies: [{ kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-form-field', imports: [MlvMessage], template: `
+    <div class="mlv-form-field" [class]="'mlv-form-field--' + resolvedState()">
+      <ng-content select="mlv-label" />
+      <div class="mlv-form-field__control">
+        <ng-content />
+      </div>
+      <ng-content select="mlv-message" />
+      @if (autoErrorMessage()) {
+        <mlv-message state="error">{{ autoErrorMessage() }}</mlv-message>
+      }
+    </div>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer mlv.components{:host{display:block}.mlv-form-field{display:flex;flex-direction:column}.mlv-form-field__control{display:flex;align-items:center;width:100%}.mlv-form-field__control>*{width:100%}.mlv-form-field--error>.mlv-form-field__control>*>.mlv-form-control-wrapper{--container-border-color: var(--mlv-border-error)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], displayStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayStrategy", required: false }] }], _ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { isSignal: true }] }], _signalField: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FormField), { isSignal: true }] }] } });
+
+class MlvFormControlPrepend extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlPrepend, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlPrepend, isStandalone: true, selector: "[mlvFormControlPrepend]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlPrepend, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFormControlPrepend]' }]
+        }] });
+class MlvFormControlAppend extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlAppend, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlAppend, isStandalone: true, selector: "[mlvFormControlAppend]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlAppend, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFormControlAppend]' }]
+        }] });
+/**
+ * Full-width content rendered inside the bordered control, after its main row.
+ *
+ * Use for secondary, non-interactive control presentation such as strength
+ * meters. Prefix and suffix actions remain in their dedicated slots.
+ */
+class MlvFormControlInset extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlInset, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlInset, isStandalone: true, selector: "[mlvFormControlInset]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlInset, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFormControlInset]' }]
+        }] });
+
+/**
+ * Shared, forms-transport-agnostic surface for **signal-forms** Malva controls.
+ * Owns everything EXCEPT the value/checked model: the
+ * Malva field surface (`state`, `label`, `hint`, `message`, `clearable`,
+ * `id`, prepend/append slots), the wrapper connector contract
+ * ({@link MlvFormControl}), and the signal-forms field↔control bindings —
+ * `errors` / `disabled` / `readonly` / `touched` / `dirty` input signals the
+ * `[formField]` directive binds automatically, plus the `touch` output the
+ * control emits when the user leaves the field.
+ *
+ * Per the signal-forms contract a component must NOT implement both
+ * `ControlValueAccessor` and `FormValueControl`; controls therefore adopt
+ * either {@link MlvSignalFormControlBase} or {@link MlvSignalCheckboxControlBase}
+ * atomically. Reactive (`[formControl]`)
+ * and template-driven (`ngModel`) bindings keep working — Angular binds the
+ * signal contract from those directives without extra compatibility code.
+ */
+class MlvSignalFormUiControlBase {
+    /** @protected Backing signal for {@link focused}. */
+    _focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    /** Whether the control currently has focus (drives the wrapper's focus ring). */
+    focused = this._focused;
+    /** Sets the control's focus state (wired to the focus target's focus/blur). */
+    setFocused(value) {
+        this._focused.set(value);
+    }
+    /** Explicit consumer-authored visual validation state. */
+    state = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the control is read-only. Also a signal-forms field binding: when
+     * bound via `[formField]`, a `readonly` schema rule drives this input.
+     */
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /**
+     * Whether the control is disabled. Also a signal-forms field binding: when
+     * bound via `[formField]`, the field's disabled state drives this input.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /**
+     * Whether the control must be filled in. Renders the required marker in
+     * `mlv-label` and sets `aria-required` on the control's focus target. Also a
+     * signal-forms field binding: when bound via `[formField]`, a `required()`
+     * schema rule drives this input.
+     */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /** Whether the control shows its loading affordance. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether the control renders a clear (X) affordance while it has a value. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Fully rounded (stadium) control container. Shared by every control that
+     * renders through `mlv-form-control-wrapper`, mirroring `shape="pill"` on
+     * buttons and the pill action bar.
+     */
+    pill = input(false, { ...(ngDevMode ? { debugName: "pill" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Signal-forms field binding: current validation errors of the bound field
+     * (`[formField]` binds them automatically). Empty when unbound.
+     */
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** Signal-forms field binding: whether the bound field is touched. */
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /** Signal-forms field binding: whether the bound field is dirty. */
+    dirty = input(false, { ...(ngDevMode ? { debugName: "dirty" } : /* istanbul ignore next */ {}), transform: (value) => coerceBooleanProperty(value) });
+    /**
+     * Effective visual state exposed through the Malva form-control connector.
+     * An explicit non-default state wins; otherwise a signal-form validation
+     * error becomes visible after the field is touched, matching the default
+     * `MlvFormField` error-display strategy.
+     */
+    resolvedState = computed(() => {
+        const explicitState = this.state();
+        if (explicitState !== 'default')
+            return explicitState;
+        return this.errors().length > 0 && this.touched() ? 'error' : 'default';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits when the user finishes interacting with the field (blur) — the
+     * signal-forms replacement for the CVA `onTouched` callback; `[formField]`
+     * subscribes and marks the bound field touched.
+     */
+    touch = output();
+    /** HTML id applied to the control's focus target. */
+    id = input(mlvNextId('mlv-control'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Label text rendered above the control. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Hint text rendered inside the label. */
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /**
+     * Persistent help text rendered **below** the control, in front of the
+     * validation message. Unlike {@link hint} (a short inline aside inside the
+     * label) this is meant for sentence-length descriptions, and it stays
+     * visible while {@link message} is shown. Referenced by `aria-describedby`.
+     */
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Validation/status message rendered below the control. */
+    message = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name applied to the control's focus target (`aria-label`).
+     * Use it when the control renders no visible `<mlv-label>`.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Id of the rendered `<mlv-description>` element. */
+    _descriptionId = computed(() => `${this.id()}-description`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_descriptionId" }] : /* istanbul ignore next */ []));
+    /** @protected Id of the rendered `<mlv-message>` element. */
+    _messageId = computed(() => `${this.id()}-message`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_messageId" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Space-separated `aria-describedby` value covering the rendered
+     * description and message elements — `null` when neither is rendered, so no
+     * dangling IDREF is emitted.
+     */
+    _describedBy = computed(() => {
+        const ids = [];
+        if (this.description())
+            ids.push(this._descriptionId());
+        if (this.message())
+            ids.push(this._messageId());
+        return ids.length > 0 ? ids.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []));
+    /** Projected prefix slot. */
+    prepend = contentChild(MlvFormControlPrepend, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prepend" }] : /* istanbul ignore next */ []));
+    /** Projected suffix slot. */
+    append = contentChild(MlvFormControlAppend, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "append" }] : /* istanbul ignore next */ []));
+    /** Projected full-width content rendered inside the control border. */
+    inset = contentChild(MlvFormControlInset, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
+    /**
+     * Effective disabled state. In the signal base there is no CVA
+     * `setDisabledState` side channel — the `disabled` input is the single
+     * source (consumer-bound or field-bound), kept as a computed so existing
+     * control templates retain one consistent disabled-state signal.
+     */
+    computedDisabled = computed(() => this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedDisabled" }] : /* istanbul ignore next */ []));
+    /** @protected Notifies the field that the user left the control. */
+    _markTouched() {
+        this.touch.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormUiControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.7", type: MlvSignalFormUiControlBase, isStandalone: true, inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch" }, queries: [{ propertyName: "prepend", first: true, predicate: MlvFormControlPrepend, descendants: true, isSignal: true }, { propertyName: "append", first: true, predicate: MlvFormControlAppend, descendants: true, isSignal: true }, { propertyName: "inset", first: true, predicate: MlvFormControlInset, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormUiControlBase, decorators: [{
+            type: Directive
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], prepend: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlPrepend), { isSignal: true }] }], append: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlAppend), { isSignal: true }] }], inset: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlInset), { isSignal: true }] }] } });
+/**
+ * Signal-forms base for **value** controls: adds the required
+ * `value: ModelSignal<T>` of the `FormValueControl` contract. Each control
+ * supplies the model itself (`readonly value = model<T>(initial)`), mirroring
+ * how `hasValue` is supplied.
+ */
+class MlvSignalFormControlBase extends MlvSignalFormUiControlBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSignalFormControlBase, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalFormControlBase, decorators: [{
+            type: Directive
+        }] });
+/**
+ * Signal-forms base for **checkbox-shaped** controls (checkbox, switch): adds
+ * the required `checked: ModelSignal<boolean>` of the `FormCheckboxControl`
+ * contract. The contract forbids a `value` member on this variant.
+ */
+class MlvSignalCheckboxControlBase extends MlvSignalFormUiControlBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalCheckboxControlBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSignalCheckboxControlBase, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSignalCheckboxControlBase, decorators: [{
+            type: Directive
+        }] });
+
+class MlvFormControlWrapperControl extends MlvStructural {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapperControl, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFormControlWrapperControl, isStandalone: true, selector: "[mlvFormControlWrapperControl]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapperControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvFormControlWrapperControl]',
+                }]
+        }] });
+
+class MlvFormControlWrapper {
+    /** @protected Optional injected form control connector for state/focus/disabled bindings. */
+    formControl = inject(MLV_FORM_CONTROL, {
+        optional: true,
+    });
+    /** @protected Computed BEM state modifier class derived from the control's validation state. */
+    _stateClass = computed(() => `mlv-form-control-wrapper--state-${this.formControl?.resolvedState?.() ??
+        this.formControl?.state() ??
+        'default'}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stateClass" }] : /* istanbul ignore next */ []));
+    /** @protected Required projected control-slot directive rendered inside the wrapper. */
+    renderer = contentChild.required(MlvFormControlWrapperControl, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []));
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_FORM_UTILS_I18N);
+    /**
+     * Clear event emitter. Emits when user clicks on clear button
+     */
+    clear = output();
+    /** @protected Handles the clear-button click by emitting the `clear` output. */
+    _onClearClick() {
+        this.clear.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFormControlWrapper, isStandalone: true, selector: "mlv-form-control-wrapper", outputs: { clear: "clear" }, host: { properties: { "class": "_stateClass()", "class.mlv-form-control-wrapper--focused": "formControl?.focused()", "class.mlv-form-control-wrapper--disabled": "formControl?.disabled()", "class.mlv-form-control-wrapper--readonly": "formControl?.readonly()", "class.mlv-form-control-wrapper--loading": "formControl?.loading()", "class.mlv-form-control-wrapper--pill": "formControl?.pill?.() ?? false" }, classAttribute: "mlv-form-control-wrapper" }, queries: [{ propertyName: "renderer", first: true, predicate: MlvFormControlWrapperControl, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-form-control-wrapper__label-container\">\n  <ng-content select=\"mlv-label\"></ng-content>\n</div>\n<div\n  class=\"mlv-form-control-wrapper__control-container\"\n  [class.mlv-form-control-wrapper__control-container--with-inset]=\"\n    formControl?.inset()\n  \"\n>\n  <div class=\"mlv-form-control-wrapper__control-row\">\n    @if (formControl?.prepend(); as prependTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"prependTpl.templateRef\"></ng-template>\n    </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"renderer().templateRef\"></ng-template>\n\n    @if ( formControl?.clearable() && formControl?.hasValue() &&\n    !formControl?.ownsClearButton?.() ) {\n    <div class=\"mlv-form-control-wrapper__clear\">\n      <mlv-button-close\n        (click)=\"_onClearClick()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_i18n().clear\"\n      />\n    </div>\n    } @if (formControl?.append(); as appendTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"appendTpl.templateRef\"></ng-template>\n    </div>\n    }\n  </div>\n\n  @if (formControl?.inset(); as insetTpl) {\n  <div class=\"mlv-form-control-wrapper__inset\">\n    <ng-template [ngTemplateOutlet]=\"insetTpl.templateRef\"></ng-template>\n  </div>\n  }\n</div>\n\n<!-- Below-control slots. `mlv-description` is persistent help text, `mlv-message`\n     the stateful validation line, and `[mlvFormControlWrapperAside]` any\n     control-owned auxiliary readout (e.g. the textarea character counter). -->\n<div class=\"mlv-form-control-wrapper__message-container\">\n  <ng-content select=\"mlv-description\"></ng-content>\n  <ng-content select=\"mlv-message\"></ng-content>\n  <ng-content select=\"[mlvFormControlWrapperAside]\"></ng-content>\n</div>\n", styles: ["@layer mlv.components{.mlv-form-control-wrapper{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-form-control-wrapper *{box-sizing:border-box}.mlv-form-control-wrapper{display:flex;flex-direction:column;gap:.25rem;--form-ctrl-height: var(--mlv-height-m);--form-ctrl-h-padding: var(--mlv-spacing-3);--form-ctrl-font-size: var(--mlv-font-size-m);--form-ctrl-radius: var(--mlv-radius-input);--form-ctrl-icon-size: calc( var(--form-ctrl-height) * var(--mlv-icon-in-container-ratio) );--container-border-color: var(--mlv-border-normal);--container-background-color: var(--mlv-elevation-bg-3);--container-side-content-color: var(--mlv-text-primary);--container-shadow: none;--container-action-color: var(--mlv-text-secondary)}[class*=--tight] .mlv-form-control-wrapper:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--tight]{--form-ctrl-height: var(--mlv-height-xs);--form-ctrl-h-padding: var(--mlv-spacing-2);--form-ctrl-font-size: var(--mlv-font-size-s)}[class*=--compact] .mlv-form-control-wrapper:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--compact]{--form-ctrl-height: var(--mlv-height-s);--form-ctrl-h-padding: var(--mlv-spacing-2-5);--form-ctrl-font-size: var(--mlv-font-size-m)}[class*=--spacious] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-form-control-wrapper[class*=--spacious]{--form-ctrl-height: var(--mlv-height-l);--form-ctrl-h-padding: var(--mlv-spacing-4);--form-ctrl-font-size: var(--mlv-font-size-l)}[class*=--airy] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-form-control-wrapper[class*=--airy]{--form-ctrl-height: var(--mlv-height-xl);--form-ctrl-h-padding: var(--mlv-spacing-5);--form-ctrl-font-size: var(--mlv-font-size-xl)}.mlv-form-control-wrapper--pill .mlv-form-control-wrapper__control-container{border-radius:var(--mlv-radius-full);padding-inline:calc(var(--form-ctrl-h-padding) * 1.35)}.mlv-form-control-wrapper__label-container:empty{display:none}.mlv-form-control-wrapper__control-container{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;width:100%;border-radius:var(--form-ctrl-radius);background-color:var(--container-background-color);border:.0625rem solid var(--container-border-color);--mlv-control-padding: var(--mlv-spacing-1) var(--form-ctrl-h-padding);padding:var(--mlv-control-padding);color:var(--container-border-color);box-shadow:var(--container-shadow);transition-property:background-color,border-color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-default);height:var(--form-ctrl-height);font-size:var(--form-ctrl-font-size)}.mlv-form-control-wrapper__control-container--with-inset{position:relative}.mlv-form-control-wrapper__control-container:hover{--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper__control-row{display:flex;align-items:center;justify-content:space-between;gap:.25rem;width:100%;min-height:0;flex:1}.mlv-form-control-wrapper__inset{position:absolute;bottom:0;left:0;right:0;padding:var(--mlv-control-padding)}.mlv-form-control-wrapper__message-container{display:flex;flex-direction:column;gap:.125rem;min-width:0}.mlv-form-control-wrapper__message-container:empty{display:none}.mlv-form-control-wrapper__side-content{color:var(--container-side-content-color);line-height:1}.mlv-form-control-wrapper__clear .mlv-button-close .mlv-button--close.mlv-button--icon-only{--mlv-icon-font-size: min( var(--form-ctrl-icon-size), calc(var(--mlv-btn-height) * .75) )}.mlv-form-control-wrapper--state-error{--container-border-color: var(--mlv-border-error)}.mlv-form-control-wrapper--state-default:hover{--container-border-color: var(--mlv-border-strong)}.mlv-form-control-wrapper--focused{--container-shadow: 0 0 0 var(--mlv-stroke-width) currentColor;--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper--focused.mlv-form-control-wrapper--state-default{--container-border-color: var(--mlv-border-focus)}.mlv-form-control-wrapper--disabled{--container-background-color: var(--mlv-background-sunken);cursor:not-allowed;pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-form-control-wrapper,.mlv-form-control-wrapper *,.mlv-form-control-wrapper:before,.mlv-form-control-wrapper:after,[class^=mlv-form-control-wrapper__],[class*=\" mlv-form-control-wrapper__\"],[class^=mlv-form-control-wrapper--],[class*=\" mlv-form-control-wrapper--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvButtonClose, selector: "mlv-button-close", inputs: ["variant", "shape", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFormControlWrapper, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-form-control-wrapper', imports: [NgTemplateOutlet, MlvButtonClose], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-form-control-wrapper',
+                        '[class]': '_stateClass()',
+                        '[class.mlv-form-control-wrapper--focused]': 'formControl?.focused()',
+                        '[class.mlv-form-control-wrapper--disabled]': 'formControl?.disabled()',
+                        '[class.mlv-form-control-wrapper--readonly]': 'formControl?.readonly()',
+                        '[class.mlv-form-control-wrapper--loading]': 'formControl?.loading()',
+                        '[class.mlv-form-control-wrapper--pill]': 'formControl?.pill?.() ?? false',
+                    }, template: "<div class=\"mlv-form-control-wrapper__label-container\">\n  <ng-content select=\"mlv-label\"></ng-content>\n</div>\n<div\n  class=\"mlv-form-control-wrapper__control-container\"\n  [class.mlv-form-control-wrapper__control-container--with-inset]=\"\n    formControl?.inset()\n  \"\n>\n  <div class=\"mlv-form-control-wrapper__control-row\">\n    @if (formControl?.prepend(); as prependTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"prependTpl.templateRef\"></ng-template>\n    </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"renderer().templateRef\"></ng-template>\n\n    @if ( formControl?.clearable() && formControl?.hasValue() &&\n    !formControl?.ownsClearButton?.() ) {\n    <div class=\"mlv-form-control-wrapper__clear\">\n      <mlv-button-close\n        (click)=\"_onClearClick()\"\n        mlvDensity=\"tight\"\n        [ariaLabel]=\"_i18n().clear\"\n      />\n    </div>\n    } @if (formControl?.append(); as appendTpl) {\n    <div class=\"mlv-form-control-wrapper__side-content\">\n      <ng-template [ngTemplateOutlet]=\"appendTpl.templateRef\"></ng-template>\n    </div>\n    }\n  </div>\n\n  @if (formControl?.inset(); as insetTpl) {\n  <div class=\"mlv-form-control-wrapper__inset\">\n    <ng-template [ngTemplateOutlet]=\"insetTpl.templateRef\"></ng-template>\n  </div>\n  }\n</div>\n\n<!-- Below-control slots. `mlv-description` is persistent help text, `mlv-message`\n     the stateful validation line, and `[mlvFormControlWrapperAside]` any\n     control-owned auxiliary readout (e.g. the textarea character counter). -->\n<div class=\"mlv-form-control-wrapper__message-container\">\n  <ng-content select=\"mlv-description\"></ng-content>\n  <ng-content select=\"mlv-message\"></ng-content>\n  <ng-content select=\"[mlvFormControlWrapperAside]\"></ng-content>\n</div>\n", styles: ["@layer mlv.components{.mlv-form-control-wrapper{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-form-control-wrapper *{box-sizing:border-box}.mlv-form-control-wrapper{display:flex;flex-direction:column;gap:.25rem;--form-ctrl-height: var(--mlv-height-m);--form-ctrl-h-padding: var(--mlv-spacing-3);--form-ctrl-font-size: var(--mlv-font-size-m);--form-ctrl-radius: var(--mlv-radius-input);--form-ctrl-icon-size: calc( var(--form-ctrl-height) * var(--mlv-icon-in-container-ratio) );--container-border-color: var(--mlv-border-normal);--container-background-color: var(--mlv-elevation-bg-3);--container-side-content-color: var(--mlv-text-primary);--container-shadow: none;--container-action-color: var(--mlv-text-secondary)}[class*=--tight] .mlv-form-control-wrapper:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--tight]{--form-ctrl-height: var(--mlv-height-xs);--form-ctrl-h-padding: var(--mlv-spacing-2);--form-ctrl-font-size: var(--mlv-font-size-s)}[class*=--compact] .mlv-form-control-wrapper:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-form-control-wrapper[class*=--compact]{--form-ctrl-height: var(--mlv-height-s);--form-ctrl-h-padding: var(--mlv-spacing-2-5);--form-ctrl-font-size: var(--mlv-font-size-m)}[class*=--spacious] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-form-control-wrapper[class*=--spacious]{--form-ctrl-height: var(--mlv-height-l);--form-ctrl-h-padding: var(--mlv-spacing-4);--form-ctrl-font-size: var(--mlv-font-size-l)}[class*=--airy] .mlv-form-control-wrapper:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-form-control-wrapper[class*=--airy]{--form-ctrl-height: var(--mlv-height-xl);--form-ctrl-h-padding: var(--mlv-spacing-5);--form-ctrl-font-size: var(--mlv-font-size-xl)}.mlv-form-control-wrapper--pill .mlv-form-control-wrapper__control-container{border-radius:var(--mlv-radius-full);padding-inline:calc(var(--form-ctrl-h-padding) * 1.35)}.mlv-form-control-wrapper__label-container:empty{display:none}.mlv-form-control-wrapper__control-container{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;width:100%;border-radius:var(--form-ctrl-radius);background-color:var(--container-background-color);border:.0625rem solid var(--container-border-color);--mlv-control-padding: var(--mlv-spacing-1) var(--form-ctrl-h-padding);padding:var(--mlv-control-padding);color:var(--container-border-color);box-shadow:var(--container-shadow);transition-property:background-color,border-color,box-shadow;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-default);height:var(--form-ctrl-height);font-size:var(--form-ctrl-font-size)}.mlv-form-control-wrapper__control-container--with-inset{position:relative}.mlv-form-control-wrapper__control-container:hover{--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper__control-row{display:flex;align-items:center;justify-content:space-between;gap:.25rem;width:100%;min-height:0;flex:1}.mlv-form-control-wrapper__inset{position:absolute;bottom:0;left:0;right:0;padding:var(--mlv-control-padding)}.mlv-form-control-wrapper__message-container{display:flex;flex-direction:column;gap:.125rem;min-width:0}.mlv-form-control-wrapper__message-container:empty{display:none}.mlv-form-control-wrapper__side-content{color:var(--container-side-content-color);line-height:1}.mlv-form-control-wrapper__clear .mlv-button-close .mlv-button--close.mlv-button--icon-only{--mlv-icon-font-size: min( var(--form-ctrl-icon-size), calc(var(--mlv-btn-height) * .75) )}.mlv-form-control-wrapper--state-error{--container-border-color: var(--mlv-border-error)}.mlv-form-control-wrapper--state-default:hover{--container-border-color: var(--mlv-border-strong)}.mlv-form-control-wrapper--focused{--container-shadow: 0 0 0 var(--mlv-stroke-width) currentColor;--container-action-color: var(--mlv-text-primary)}.mlv-form-control-wrapper--focused.mlv-form-control-wrapper--state-default{--container-border-color: var(--mlv-border-focus)}.mlv-form-control-wrapper--disabled{--container-background-color: var(--mlv-background-sunken);cursor:not-allowed;pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-form-control-wrapper,.mlv-form-control-wrapper *,.mlv-form-control-wrapper:before,.mlv-form-control-wrapper:after,[class^=mlv-form-control-wrapper__],[class*=\" mlv-form-control-wrapper__\"],[class^=mlv-form-control-wrapper--],[class*=\" mlv-form-control-wrapper--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], propDecorators: { renderer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFormControlWrapperControl), { isSignal: true }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+
+class MlvSelectionService {
+    multiple = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    selectedValues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    focusFirst$ = new Subject();
+    /**
+     * Equality predicate used for all membership checks (`isSelected`,
+     * `deselect`, and the `select`/`toggle` de-dup path). Defaults to reference
+     * equality (`a === b`). Set a custom comparator (e.g. compare by id) so object
+     * values written via `writeValue` after deserialization match the option
+     * instances and check-marks / display value stay in agreement.
+     */
+    compareWith = signal((a, b) => a === b, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const values = this.selectedValues();
+        if (values.length === 0)
+            return '';
+        if (values.length === 1)
+            return String(values[0]);
+        return `${values.length} items selected`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /** @private Index of `value` within the current selection, or `-1`. */
+    _indexOf(value) {
+        const compare = this.compareWith();
+        return this.selectedValues().findIndex((v) => compare(v, value));
+    }
+    select(value) {
+        if (this.multiple()) {
+            const current = this.selectedValues();
+            const index = this._indexOf(value);
+            if (index >= 0) {
+                this.selectedValues.set([
+                    ...current.slice(0, index),
+                    ...current.slice(index + 1),
+                ]);
+            }
+            else {
+                this.selectedValues.set([...current, value]);
+            }
+        }
+        else {
+            this.selectedValues.set([value]);
+        }
+    }
+    deselect(value) {
+        const compare = this.compareWith();
+        this.selectedValues.set(this.selectedValues().filter((v) => !compare(v, value)));
+    }
+    isSelected(value) {
+        return this._indexOf(value) >= 0;
+    }
+    clear() {
+        this.selectedValues.set([]);
+    }
+    setValues(values) {
+        this.selectedValues.set(values);
+    }
+    toggle(value) {
+        if (this.isSelected(value)) {
+            this.deselect(value);
+        }
+        else {
+            this.select(value);
+        }
+    }
+    requestFocusFirst() {
+        this.focusFirst$.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectionService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSelectionService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Forms ↔ `@angular/aria` value bridge.
+ *
+ * The headless `@angular/aria` selection patterns (`ngListbox`, `ngMenu`,
+ * `ngTree`, …) always model their selection as an **array** of values
+ * (`value: ModelSignal<V[]>`), even in single-select mode where the array holds
+ * at most one entry. Malva UI form controls expose the idiomatic public shape:
+ * a bare `T` for single-select and a `T[]` for multi-select, with `null` used
+ * to represent "no selection".
+ *
+ * These helpers translate between the two representations so a component can
+ * keep its public single/multi forms contract while driving an aria pattern
+ * underneath. They are pure and allocation-light, and are designed to
+ * round-trip: `fromAriaValues(toAriaValues(v, multi), multi)` yields the
+ * canonical form of `v`.
+ *
+ * @remarks
+ * `toAriaValues` treats an incoming array as an already-expanded multi-select
+ * value. If your single-select `T` is itself an array type, wrap it before
+ * bridging — this is the same ambiguity the aria patterns themselves carry.
+ */
+/**
+ * Normalises a control value (`T`, `T[]`, or `null`/`undefined`) into the flat
+ * `V[]` array that `@angular/aria` selection patterns expect.
+ *
+ * - `null` / `undefined` → `[]` (cleared selection)
+ * - an array → a shallow copy of that array (multi-select)
+ * - any other value → a single-element array (single-select)
+ *
+ * @param value The control-side value to convert.
+ * @returns A fresh array suitable for assigning to an aria `value` model.
+ */
+function toAriaValues(value) {
+    if (value === null || value === undefined) {
+        return [];
+    }
+    return Array.isArray(value) ? [...value] : [value];
+}
+/**
+ * Collapses the flat `V[]` array produced by an `@angular/aria` selection
+ * pattern back into the control-side value shape.
+ *
+ * - `multiple === true` → a shallow copy of the array (empty array stays `[]`)
+ * - `multiple === false` → the first entry, or `null` when the array is empty
+ *
+ * @param values The aria-side selection array.
+ * @param multiple Whether the control is in multi-select mode.
+ * @returns The control-side value: `V[]` for multi-select, `V | null` for single.
+ */
+function fromAriaValues(values, multiple) {
+    const list = values ?? [];
+    if (multiple) {
+        return [...list];
+    }
+    return list.length > 0 ? list[0] : null;
+}
+
+/**
+ * Shared, selection-agnostic scaffold for composite groups that navigate their
+ * children with a vertical, wrapping {@link FocusKeyManager} and a roving
+ * tabindex that follows focus (only the active child is tabbable).
+ *
+ * Extracted from the duplicated lifecycle in `MlvCheckboxGroup` and
+ * `MlvSwitchGroup`. It owns **only** the focus / roving-tabindex concern:
+ * key-manager creation over the current children, the `change`→tabindex sync,
+ * keydown delegation, child-focus tracking, and teardown. Subclasses supply the
+ * live children signal ({@link _items}) and the skip predicate
+ * ({@link _isDisabled}); everything else (selection, CVA, templates) stays in
+ * the concrete component.
+ *
+ * NB: this is a *focus-roving* base — the tab stop follows the focused child.
+ * Groups whose tab stop must follow a *selected* child instead (e.g.
+ * `mlv-radio-group`, whose checked radio is the tab stop and whose arrow keys
+ * also move selection) do not fit this contract and keep their own manager.
+ *
+ * @typeParam T The concrete focusable child component type.
+ */
+class MlvFocusableGroupBase {
+    /** @private Normalizes the vertical arrow keys delegated to the key manager. */
+    _rtlService = inject(MlvRtlService);
+    /** @private FocusKeyManager driving roving-tabindex arrow navigation between children. */
+    _keyManager;
+    /** @private Subscription to the key manager's active-item changes. */
+    _changeSub;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this._changeSub?.unsubscribe();
+            this._keyManager?.destroy();
+        });
+        effect(() => {
+            const items = [...this._items()];
+            if (items.length === 0)
+                return;
+            // Destroy the previous instance before allocating a new one — without
+            // this, every children emission accumulates a live FocusKeyManager
+            // (subscriptions, change-detection refs) against detached items.
+            this._changeSub?.unsubscribe();
+            this._keyManager?.destroy();
+            this._keyManager = new FocusKeyManager(items)
+                .skipPredicate((item) => this._isDisabled(item))
+                .withVerticalOrientation()
+                .withWrap();
+            // Keep the roving tabindex in sync as focus moves between children so only
+            // the active item is tabbable. `tabIndex` is a signal, so the host binding
+            // updates under OnPush without an extra change-detection trigger.
+            this._changeSub = this._keyManager.change.subscribe((index) => this._syncTabIndices(index));
+            // Initial roving state: the first child is the single tab stop.
+            this._syncTabIndices(0);
+        });
+    }
+    /**
+     * Notifies the manager which child took focus so arrow navigation resumes from
+     * it. Wire to each child's focus notification (group accessor token).
+     */
+    onChildFocus(item) {
+        const index = this._items().indexOf(item);
+        if (index >= 0) {
+            this._keyManager?.setActiveItem(index);
+        }
+    }
+    /**
+     * Delegates ArrowUp/ArrowDown to the key manager (moving focus + the tab stop)
+     * and suppresses the default page scroll. Wire to the group's `(keydown)`.
+     */
+    onKeydown(event) {
+        const key = this._rtlService.normalizeArrowKey(event);
+        if (key === UP_ARROW || key === DOWN_ARROW) {
+            this._keyManager?.onKeydown(event);
+            event.preventDefault();
+        }
+    }
+    /** @private Sets tabindex 0 on the active child and -1 on the rest. */
+    _syncTabIndices(activeIndex) {
+        this._items().forEach((item, i) => {
+            item.tabIndex.set(i === activeIndex ? 0 : -1);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFocusableGroupBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvFocusableGroupBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFocusableGroupBase, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MLV_FORM_CONTROL, MlvDescription, MlvFocusableGroupBase, MlvFormControlAppend, MlvFormControlInset, MlvFormControlPrepend, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvFormField, MlvHint, MlvLabel, MlvMessage, MlvSelectionService, MlvSignalCheckboxControlBase, MlvSignalFormControlBase, MlvSignalFormUiControlBase, fromAriaValues, toAriaValues };
+//# sourceMappingURL=malva-ui-core-form-utils.mjs.map