@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-icon-toggle.mjs

@@ -0,0 +1,120 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1 from '@malva-ui/cdk/density';
+import { MLV_DENSITY_ELEMENT, MlvDensityDirective } from '@malva-ui/cdk/density';
+
+/**
+ * Chromeless, glyph-only WAI-ARIA toggle button (visual-language spec AB-R7).
+ *
+ * Wraps exactly one projected Lucide `<svg>` and expresses `pressed` purely
+ * through the glyph itself — an outlined icon at rest, a "tiny fill" on
+ * hover, and a full `fill: currentColor` when pressed. There is **no
+ * background in any state**; a design that needs a filled/tinted toggle
+ * affordance should reach for `mlv-button-toggle` instead. Because the fill
+ * mechanism relies on the glyph having an enclosed shape, it only reads
+ * correctly for icons like a star, heart, bookmark, or pin — not for
+ * open-stroke glyphs.
+ *
+ * Enhances a native `<button>` (`.claude/rules/angular-component.md` §
+ * Selectors — the attribute-selector-on-native-element pattern), so native
+ * `disabled`, `type`, and click/keyboard activation semantics all work
+ * unmodified. The pointer target is held at a minimum of `1.5rem` (24px —
+ * WCAG 2.2 SC 2.5.8) via density-aware padding, never by inflating the
+ * glyph.
+ *
+ * @example
+ * ```html
+ * <!-- Neutral toggle, no tone -->
+ * <button mlvIconToggle type="button" [(pressed)]="bookmarked" aria-label="Bookmark">
+ *   <svg lucideBookmark [size]="16" aria-hidden="true" />
+ * </button>
+ *
+ * <!-- `tone` recolours only the pressed glyph -->
+ * <button
+ *   mlvIconToggle
+ *   type="button"
+ *   tone="warning"
+ *   [pressed]="ticket.starred"
+ *   aria-label="Star conversation"
+ *   (pressedChange)="toggleStar()"
+ * >
+ *   <svg lucideStar [size]="16" aria-hidden="true" />
+ * </button>
+ * ```
+ */
+class MlvIconToggle {
+    /**
+     * Two-way bindable pressed state, reflected as `aria-pressed` on the
+     * native button. Bind one-way (`[pressed]` + `(pressedChange)`) when the
+     * caller owns the source of truth and the toggle must never write its own
+     * model behind that owner's back — see `mlv-button-toggle` for the same
+     * convention.
+     */
+    pressed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional semantic tone. Recolours only the **pressed** glyph to the
+     * matching semantic text token (e.g. `tone="warning"` → `--mlv-text-warning`
+     * for a favourite star). Rest and hover stay neutral regardless of tone —
+     * a tone marks state, it never paints a surface. Defaults to `undefined`,
+     * which keeps the pressed glyph in `currentColor`.
+     */
+    tone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Whether the native button is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * @protected The `--tone-*` BEM modifier class for the current `tone`, or
+     * an empty string when no tone is set.
+     */
+    _toneClass = computed(() => this.tone() ? `mlv-icon-toggle--tone-${this.tone()}` : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_toneClass" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Flips `pressed` on click unless the control is disabled.
+     * Keyboard activation (Enter/Space) reaches this the same way — the host
+     * is a real `<button>`, so the browser translates both keys into a native
+     * `click` event with no extra keydown handling required.
+     */
+    _handleClick() {
+        if (this.disabled())
+            return;
+        this.pressed.update((pressed) => !pressed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvIconToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvIconToggle, isStandalone: true, selector: "button[mlvIconToggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { listeners: { "click": "_handleClick()" }, properties: { "class.mlv-icon-toggle--pressed": "pressed()", "class": "_toneClass()", "attr.aria-pressed": "pressed()", "attr.disabled": "disabled() || null", "attr.aria-disabled": "disabled() || null" }, classAttribute: "mlv-icon-toggle" }, providers: [
+            {
+                provide: MLV_DENSITY_ELEMENT,
+                useValue: 'icon-toggle',
+            },
+        ], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer mlv.components{.mlv-icon-toggle{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-icon-toggle *{box-sizing:border-box}.mlv-icon-toggle{display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background:transparent;cursor:pointer;color:var(--mlv-text-secondary);min-inline-size:1.5rem;min-block-size:1.5rem;padding:var(--mlv-spacing-2)}[class*=--tight] .mlv-icon-toggle:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-icon-toggle[class*=--tight]{padding:var(--mlv-spacing-1)}[class*=--compact] .mlv-icon-toggle:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-icon-toggle[class*=--compact]{padding:var(--mlv-spacing-1-5)}[class*=--spacious] .mlv-icon-toggle:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-icon-toggle[class*=--spacious]{padding:var(--mlv-spacing-2-5)}[class*=--airy] .mlv-icon-toggle:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-icon-toggle[class*=--airy]{padding:var(--mlv-spacing-3)}.mlv-icon-toggle svg{fill:transparent;transition:fill var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-icon-toggle:not(.mlv-icon-toggle--pressed):hover{color:var(--mlv-text-primary)}.mlv-icon-toggle:not(.mlv-icon-toggle--pressed):hover svg{fill:color-mix(in srgb,currentColor 15%,transparent)}.mlv-icon-toggle--pressed{color:var(--mlv-text-primary)}.mlv-icon-toggle--pressed svg{fill:currentColor}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-info{color:var(--mlv-text-info)}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-success{color:var(--mlv-text-positive)}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-warning{color:var(--mlv-text-warning)}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-danger{color:var(--mlv-text-negative)}.mlv-icon-toggle{outline:var(--mlv-stroke-width-medium) solid transparent;outline-offset:var(--mlv-focus-ring-offset)}.mlv-icon-toggle:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-icon-toggle:disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-icon-toggle,.mlv-icon-toggle *,.mlv-icon-toggle:before,.mlv-icon-toggle:after,[class^=mlv-icon-toggle__],[class*=\" mlv-icon-toggle__\"],[class^=mlv-icon-toggle--],[class*=\" mlv-icon-toggle--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvIconToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mlvIconToggle]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: MlvDensityDirective,
+                            inputs: ['mlvDensity: mlvDensity'],
+                        },
+                    ], providers: [
+                        {
+                            provide: MLV_DENSITY_ELEMENT,
+                            useValue: 'icon-toggle',
+                        },
+                    ], host: {
+                        class: 'mlv-icon-toggle',
+                        '[class.mlv-icon-toggle--pressed]': 'pressed()',
+                        '[class]': '_toneClass()',
+                        '[attr.aria-pressed]': 'pressed()',
+                        '[attr.disabled]': 'disabled() || null',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '(click)': '_handleClick()',
+                    }, styles: ["@layer mlv.components{.mlv-icon-toggle{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-icon-toggle *{box-sizing:border-box}.mlv-icon-toggle{display:inline-flex;align-items:center;justify-content:center;appearance:none;border:none;background:transparent;cursor:pointer;color:var(--mlv-text-secondary);min-inline-size:1.5rem;min-block-size:1.5rem;padding:var(--mlv-spacing-2)}[class*=--tight] .mlv-icon-toggle:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-icon-toggle[class*=--tight]{padding:var(--mlv-spacing-1)}[class*=--compact] .mlv-icon-toggle:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-icon-toggle[class*=--compact]{padding:var(--mlv-spacing-1-5)}[class*=--spacious] .mlv-icon-toggle:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-icon-toggle[class*=--spacious]{padding:var(--mlv-spacing-2-5)}[class*=--airy] .mlv-icon-toggle:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-icon-toggle[class*=--airy]{padding:var(--mlv-spacing-3)}.mlv-icon-toggle svg{fill:transparent;transition:fill var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-icon-toggle:not(.mlv-icon-toggle--pressed):hover{color:var(--mlv-text-primary)}.mlv-icon-toggle:not(.mlv-icon-toggle--pressed):hover svg{fill:color-mix(in srgb,currentColor 15%,transparent)}.mlv-icon-toggle--pressed{color:var(--mlv-text-primary)}.mlv-icon-toggle--pressed svg{fill:currentColor}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-info{color:var(--mlv-text-info)}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-success{color:var(--mlv-text-positive)}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-warning{color:var(--mlv-text-warning)}.mlv-icon-toggle--pressed.mlv-icon-toggle--tone-danger{color:var(--mlv-text-negative)}.mlv-icon-toggle{outline:var(--mlv-stroke-width-medium) solid transparent;outline-offset:var(--mlv-focus-ring-offset)}.mlv-icon-toggle:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-icon-toggle:disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-icon-toggle,.mlv-icon-toggle *,.mlv-icon-toggle:before,.mlv-icon-toggle:after,[class^=mlv-icon-toggle__],[class*=\" mlv-icon-toggle__\"],[class^=mlv-icon-toggle--],[class*=\" mlv-icon-toggle--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], propDecorators: { pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }, { type: i0.Output, args: ["pressedChange"] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvIconToggle };
+//# sourceMappingURL=malva-ui-core-icon-toggle.mjs.map

package/fesm2022/malva-ui-core-icon-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-icon-toggle.mjs","sources":["../../../../libs/core/icon-toggle/src/lib/icon-toggle/icon-toggle.ts","../../../../libs/core/icon-toggle/src/malva-ui-core-icon-toggle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport type { MlvTone } from '@malva-ui/cdk/utils';\nimport {\n  MLV_DENSITY_ELEMENT,\n  MlvDensityDirective,\n} from '@malva-ui/cdk/density';\n\n/**\n * Chromeless, glyph-only WAI-ARIA toggle button (visual-language spec AB-R7).\n *\n * Wraps exactly one projected Lucide `<svg>` and expresses `pressed` purely\n * through the glyph itself — an outlined icon at rest, a \"tiny fill\" on\n * hover, and a full `fill: currentColor` when pressed. There is **no\n * background in any state**; a design that needs a filled/tinted toggle\n * affordance should reach for `mlv-button-toggle` instead. Because the fill\n * mechanism relies on the glyph having an enclosed shape, it only reads\n * correctly for icons like a star, heart, bookmark, or pin — not for\n * open-stroke glyphs.\n *\n * Enhances a native `<button>` (`.claude/rules/angular-component.md` §\n * Selectors — the attribute-selector-on-native-element pattern), so native\n * `disabled`, `type`, and click/keyboard activation semantics all work\n * unmodified. The pointer target is held at a minimum of `1.5rem` (24px —\n * WCAG 2.2 SC 2.5.8) via density-aware padding, never by inflating the\n * glyph.\n *\n * @example\n * ```html\n * <!-- Neutral toggle, no tone -->\n * <button mlvIconToggle type=\"button\" [(pressed)]=\"bookmarked\" aria-label=\"Bookmark\">\n *   <svg lucideBookmark [size]=\"16\" aria-hidden=\"true\" />\n * </button>\n *\n * <!-- `tone` recolours only the pressed glyph -->\n * <button\n *   mlvIconToggle\n *   type=\"button\"\n *   tone=\"warning\"\n *   [pressed]=\"ticket.starred\"\n *   aria-label=\"Star conversation\"\n *   (pressedChange)=\"toggleStar()\"\n * >\n *   <svg lucideStar [size]=\"16\" aria-hidden=\"true\" />\n * </button>\n * ```\n */\n@Component({\n  // Attribute-selector component enhancing a native <button> — the\n  // documented button[mlvButton] pattern (see .claude/rules/angular-component.md).\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[mlvIconToggle]',\n  template: '<ng-content />',\n  styleUrl: './icon-toggle.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: MlvDensityDirective,\n      inputs: ['mlvDensity: mlvDensity'],\n    },\n  ],\n  providers: [\n    {\n      provide: MLV_DENSITY_ELEMENT,\n      useValue: 'icon-toggle',\n    },\n  ],\n  host: {\n    class: 'mlv-icon-toggle',\n    '[class.mlv-icon-toggle--pressed]': 'pressed()',\n    '[class]': '_toneClass()',\n    '[attr.aria-pressed]': 'pressed()',\n    '[attr.disabled]': 'disabled() || null',\n    '[attr.aria-disabled]': 'disabled() || null',\n    '(click)': '_handleClick()',\n  },\n})\nexport class MlvIconToggle {\n  /**\n   * Two-way bindable pressed state, reflected as `aria-pressed` on the\n   * native button. Bind one-way (`[pressed]` + `(pressedChange)`) when the\n   * caller owns the source of truth and the toggle must never write its own\n   * model behind that owner's back — see `mlv-button-toggle` for the same\n   * convention.\n   */\n  readonly pressed = model(false);\n\n  /**\n   * Optional semantic tone. Recolours only the **pressed** glyph to the\n   * matching semantic text token (e.g. `tone=\"warning\"` → `--mlv-text-warning`\n   * for a favourite star). Rest and hover stay neutral regardless of tone —\n   * a tone marks state, it never paints a surface. Defaults to `undefined`,\n   * which keeps the pressed glyph in `currentColor`.\n   */\n  readonly tone = input<MlvTone | undefined>(undefined);\n\n  /** Whether the native button is disabled. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * @protected The `--tone-*` BEM modifier class for the current `tone`, or\n   * an empty string when no tone is set.\n   */\n  protected readonly _toneClass = computed(() =>\n    this.tone() ? `mlv-icon-toggle--tone-${this.tone()}` : '',\n  );\n\n  /**\n   * @protected Flips `pressed` on click unless the control is disabled.\n   * Keyboard activation (Enter/Space) reaches this the same way — the host\n   * is a real `<button>`, so the browser translates both keys into a native\n   * `click` event with no extra keydown handling required.\n   */\n  protected _handleClick(): void {\n    if (this.disabled()) return;\n    this.pressed.update((pressed) => !pressed);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/malva-ui-core-input.mjs

@@ -0,0 +1,375 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, InjectionToken, input, model, output, viewChild, contentChild, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvSignalFormControlBase, MlvLabel, MlvHint, MlvDescription, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+
+/**
+ * Marks a consumer-provided native `<input>` that should be adopted as the
+ * control element of a `<mlv-input projectControl>`.
+ *
+ * `mlv-input` normally renders and owns its own internal `<input>`. Some
+ * headless behaviours — most notably `@angular/aria`'s combobox family, whose
+ * trigger directive (`[ngCombobox]`, formerly `input[ngComboboxInput]`) must
+ * sit directly on the interactive `<input>` element — need to attach their own
+ * attribute directives to that input. Because Angular cannot attach an external
+ * directive to a component's *internal* template element, `mlv-input` instead
+ * exposes an opt-in projection slot: set `projectControl` on `<mlv-input>` and
+ * project your own `<input mlvInputNative …>` carrying whatever directives you
+ * need. This directive applies the shared `mlv-input__native` styling hook and
+ * makes the element discoverable to the host `mlv-input` so focus/selection
+ * helpers keep working.
+ *
+ * @example
+ * ```html
+ * <mlv-input bare projectControl>
+ *   <input mlvInputNative ngCombobox [(value)]="query" [(expanded)]="open" />
+ * </mlv-input>
+ * ```
+ */
+class MlvInputNative {
+    /**
+     * @protected The projected native `<input>` element reference, used by the
+     * host `mlv-input` to forward `focus()` / `select()` calls.
+     */
+    _elementRef = inject(ElementRef);
+    /** The projected native `<input>` element. */
+    get nativeElement() {
+        return this._elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvInputNative, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvInputNative, isStandalone: true, selector: "input[mlvInputNative]", host: { classAttribute: "mlv-input__native" }, exportAs: ["mlvInputNative"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvInputNative, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[mlvInputNative]',
+                    exportAs: 'mlvInputNative',
+                    host: {
+                        class: 'mlv-input__native',
+                    },
+                }]
+        }] });
+
+/** @internal Injection token for the active input value signal. */
+const MLV_INPUT_VALUE = new InjectionToken('MLV_INPUT_VALUE');
+
+class MlvInput extends MlvSignalFormControlBase {
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Native HTML `autocomplete` hint forwarded to the underlying `<input>`.
+     * When empty, no `autocomplete` attribute is rendered.
+     * @default ''
+     */
+    autocomplete = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    /**
+     * Native HTML `inputmode` attribute forwarded to the underlying `<input>`.
+     * Controls the virtual keyboard on mobile devices.
+     * @default null
+     */
+    inputMode = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of characters the user may enter. Forwarded to the
+     * underlying `<input>` `maxlength` attribute. `null` removes the cap.
+     */
+    maxLength = input(null, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    /**
+     * Minimum number of characters the user must enter for the form control
+     * to validate. Forwarded to the underlying `<input>` `minlength` attribute.
+     */
+    minLength = input(null, { ...(ngDevMode ? { debugName: "minLength" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    /**
+     * Native HTML5 validation pattern (regular-expression source) forwarded
+     * to the underlying `<input>` `pattern` attribute.
+     */
+    pattern = input(null, { ...(ngDevMode ? { debugName: "pattern" } : /* istanbul ignore next */ {}), 
+        // Signal forms' `pattern` rule binds `readonly RegExp[]`; the native
+        // attribute wants one regex source. Normalise: single source pass-through,
+        // multiple sources OR-combined.
+        transform: (value) => {
+            if (value == null)
+                return null;
+            if (typeof value === 'string')
+                return value;
+            if (value instanceof RegExp)
+                return value.source;
+            if (value.length === 0)
+                return null;
+            return value.length === 1
+                ? value[0].source
+                : value.map((r) => `(?:${r.source})`).join('|');
+        } });
+    /**
+     * Native HTML `name` attribute. Required for non-Angular form submission;
+     * Reactive Forms / template-driven forms do not need this.
+     */
+    name = input(null, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    /**
+     * When `true`, the underlying `<input>` is focused as soon as it mounts.
+     * Use sparingly — autofocus is generally an a11y anti-pattern outside of
+     * dialogs and confirmation flows.
+     */
+    autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Numeric `min` attribute forwarded to the underlying `<input>`.
+     * Only meaningful when `type` is `'number'`.
+     */
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    /**
+     * Numeric `max` attribute forwarded to the underlying `<input>`.
+     * Only meaningful when `type` is `'number'`.
+     */
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    /**
+     * Numeric `step` attribute forwarded to the underlying `<input>`.
+     * Only meaningful when `type` is `'number'`. `null` falls back to the
+     * browser default of `1`.
+     */
+    step = input(null, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => value ?? null });
+    /**
+     * When `true`, renders only the bare `<input>` element with no
+     * `mlv-form-control-wrapper` chrome (no label, no message, no
+     * prefix/suffix slots). Used by composite controls (combobox,
+     * tokenizer, command-palette, color-picker) that own their own
+     * surrounding container.
+     */
+    bare = input(false, { ...(ngDevMode ? { debugName: "bare" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, `mlv-input` does not render its own internal `<input>` and
+     * instead adopts a consumer-projected `<input mlvInputNative>` as the control
+     * element. Opt in when an external attribute directive must sit directly on
+     * the native input — e.g. `@angular/aria`'s combobox trigger, which requires
+     * `[ngCombobox]` on the `<input>` itself. In this mode the projected input
+     * owns its own value/keyboard wiring; `mlv-input` provides the surrounding
+     * chrome, styling hook (`mlv-input__native`), and focus/select forwarding.
+     *
+     * Ignored unless a matching `<input mlvInputNative>` is projected.
+     */
+    projectControl = input(false, { ...(ngDevMode ? { debugName: "projectControl" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Optional explicit `role` attribute forwarded to the underlying
+     * `<input>`. Use for combobox-style consumers — leave `null` for
+     * a vanilla text field.
+     */
+    role = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-expanded`. Use with `role="combobox"` to
+     * communicate dropdown state.
+     */
+    ariaExpanded = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-haspopup` (typically `'listbox'`).
+     */
+    ariaHasPopup = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaHasPopup" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-autocomplete` (typically `'list'`). Use with
+     * `role="combobox"` to describe the autocomplete behaviour of the field.
+     */
+    ariaAutocomplete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaAutocomplete" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-controls` — the id of the listbox / popup the
+     * input drives.
+     */
+    ariaControls = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /**
+     * Forwarded to `aria-activedescendant` — the id of the currently
+     * highlighted option in the listbox.
+     */
+    ariaActiveDescendant = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit `aria-describedby` for the underlying `<input>`, overriding the
+     * ids the control derives from its own `description` / `message`. Composite
+     * controls (`mlv-pin-input`, `mlv-tokenizer`, `mlv-combobox`) that render the
+     * description and message themselves point the inner input here.
+     */
+    ariaDescribedBy = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * The input's text value — the signal-forms `FormValueControl` model.
+     * Two-way bindable (`[(value)]`), one-way bindable by composite controls
+     * (`[value]="searchQuery()"`), and kept in sync with the bound field by
+     * `[formField]` / `[formControl]` / `ngModel`.
+     */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when the underlying native `<input>` gains focus. Re-emitted from
+     * the input's own `focus` handler so composite controls (e.g. `mlv-combobox`)
+     * can react to focus without relying on the non-bubbling native `focus`
+     * event reaching the `mlv-input` host. Carries the original `FocusEvent`.
+     */
+    inputFocus = output();
+    /**
+     * Emitted when the underlying native `<input>` loses focus. Re-emitted from
+     * the input's own `blur` handler (fired after the touch output), so composite
+     * controls can run blur-driven logic (close dropdowns, revert text, mark
+     * touched) reliably. Carries the original `FocusEvent`.
+     */
+    inputBlur = output();
+    /**
+     * @private Reference to the internally-rendered native `<input>` element so
+     * the component can imperatively focus / select its contents.
+     */
+    _nativeRef = viewChild('native', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nativeRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Reference to a consumer-projected `<input mlvInputNative>` used
+     * when {@link projectControl} is enabled.
+     */
+    _projectedNative = contentChild(MlvInputNative, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectedNative" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Resolves the active native `<input>` — the projected one when
+     * projection is enabled and present, otherwise the internally-rendered input.
+     */
+    _resolveNative() {
+        if (this.projectControl()) {
+            return this._projectedNative()?.nativeElement ?? null;
+        }
+        return this._nativeRef()?.nativeElement ?? null;
+    }
+    /**
+     * Direct access to the underlying native `<input>`. Use sparingly —
+     * required only for selection-range / paste-distribution flows in
+     * composite controls. Resolves to the projected input when
+     * {@link projectControl} is enabled.
+     */
+    get nativeElement() {
+        return this._resolveNative();
+    }
+    /**
+     * Focuses the underlying native input.
+     */
+    focus() {
+        this._resolveNative()?.focus();
+    }
+    /**
+     * Selects the current text inside the underlying native input.
+     */
+    select() {
+        this._resolveNative()?.select();
+    }
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    /**
+     * Handles the native `<input>` focus event: sets the focused state and
+     * re-emits {@link inputFocus} for composite-control consumers.
+     */
+    onFocus(event) {
+        this.setFocused(true);
+        this.inputFocus.emit(event);
+    }
+    onBlur(event) {
+        this.setFocused(false);
+        this._markTouched();
+        this.inputBlur.emit(event);
+    }
+    /** Whether the control holds a clearable value — Non-empty text present. */
+    hasValue = computed(() => (this.value() ?? '').length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Clears the text value (wired to the wrapper's clear button). */
+    clearValue() {
+        this.value.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvInput, isStandalone: true, selector: "mlv-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", 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 }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, projectControl: { classPropertyName: "projectControl", publicName: "projectControl", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, ariaAutocomplete: { classPropertyName: "ariaAutocomplete", publicName: "ariaAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, ariaActiveDescendant: { classPropertyName: "ariaActiveDescendant", publicName: "ariaActiveDescendant", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.mlv-input--default": "resolvedState() === \"default\"", "class.mlv-input--success": "resolvedState() === \"success\"", "class.mlv-input--info": "resolvedState() === \"info\"", "class.mlv-input--warning": "resolvedState() === \"warning\"", "class.mlv-input--error": "resolvedState() === \"error\"", "class.mlv-input--disabled": "disabled()", "class.mlv-input--focused": "focused()" }, classAttribute: "mlv-input" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvInput),
+            },
+            {
+                provide: MLV_INPUT_VALUE,
+                useExisting: forwardRef(() => MlvInput),
+            },
+        ], queries: [{ propertyName: "_projectedNative", first: true, predicate: MlvInputNative, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_nativeRef", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (bare()) { @if (projectControl()) {\n<!-- Consumer-projected native input (e.g. carrying @angular/aria's [ngCombobox]). -->\n<ng-content select=\"input[mlvInputNative]\" />\n} @else {\n<!-- autofocus is an opt-in API forwarded to the native input (see best-practices.md);\n     it stays off unless the consumer explicitly sets it. -->\n<!-- eslint-disable @angular-eslint/template/no-autofocus -->\n<input\n  #native\n  class=\"mlv-input__native\"\n  [id]=\"id()\"\n  [type]=\"type()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"computedDisabled()\"\n  [readOnly]=\"readonly()\"\n  [value]=\"value() ?? ''\"\n  [attr.name]=\"name()\"\n  [attr.autocomplete]=\"autocomplete() || null\"\n  [attr.autofocus]=\"autofocus() ? '' : null\"\n  [attr.inputmode]=\"inputMode()\"\n  [attr.maxlength]=\"maxLength()\"\n  [attr.minlength]=\"minLength()\"\n  [attr.pattern]=\"pattern()\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.step]=\"step()\"\n  [attr.role]=\"role()\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  [attr.aria-haspopup]=\"ariaHasPopup()\"\n  [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n  [attr.aria-controls]=\"ariaControls()\"\n  [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-invalid]=\"resolvedState() === 'error'\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? _describedBy()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n/>\n<!-- eslint-enable @angular-eslint/template/no-autofocus -->\n} } @else {\n<mlv-form-control-wrapper (clear)=\"clearValue()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    @if (projectControl()) {\n    <!-- Consumer-projected native input (e.g. carrying @angular/aria's [ngCombobox]). -->\n    <ng-content select=\"input[mlvInputNative]\" />\n    } @else {\n    <!-- eslint-disable @angular-eslint/template/no-autofocus -->\n    <input\n      #native\n      class=\"mlv-input__native\"\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"computedDisabled()\"\n      [readOnly]=\"readonly()\"\n      [value]=\"value() ?? ''\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.autofocus]=\"autofocus() ? '' : null\"\n      [attr.inputmode]=\"inputMode()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [attr.pattern]=\"pattern()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.role]=\"role()\"\n      [attr.aria-expanded]=\"ariaExpanded()\"\n      [attr.aria-haspopup]=\"ariaHasPopup()\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n      [attr.aria-controls]=\"ariaControls()\"\n      [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"resolvedState() === 'error'\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? _describedBy()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <!-- eslint-enable @angular-eslint/template/no-autofocus -->\n    }\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n}\n", styles: ["@layer mlv.components{.mlv-input__native{position:relative;display:block;width:100%;border:none;outline:none;appearance:none;padding:0;font-size:var(--form-ctrl-font-size, var(--mlv-font-size-m));background:none;height:100%}.mlv-input__native::placeholder{color:var(--mlv-text-tertiary)}}\n"], dependencies: [{ kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { 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: MlvInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-input', imports: [
+                        MlvLabel,
+                        MlvHint,
+                        MlvDescription,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvMessage,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvInput),
+                        },
+                        {
+                            provide: MLV_INPUT_VALUE,
+                            useExisting: forwardRef(() => MlvInput),
+                        },
+                    ], host: {
+                        class: 'mlv-input',
+                        '[class.mlv-input--default]': 'resolvedState() === "default"',
+                        '[class.mlv-input--success]': 'resolvedState() === "success"',
+                        '[class.mlv-input--info]': 'resolvedState() === "info"',
+                        '[class.mlv-input--warning]': 'resolvedState() === "warning"',
+                        '[class.mlv-input--error]': 'resolvedState() === "error"',
+                        '[class.mlv-input--disabled]': 'disabled()',
+                        '[class.mlv-input--focused]': 'focused()',
+                    }, template: "@if (bare()) { @if (projectControl()) {\n<!-- Consumer-projected native input (e.g. carrying @angular/aria's [ngCombobox]). -->\n<ng-content select=\"input[mlvInputNative]\" />\n} @else {\n<!-- autofocus is an opt-in API forwarded to the native input (see best-practices.md);\n     it stays off unless the consumer explicitly sets it. -->\n<!-- eslint-disable @angular-eslint/template/no-autofocus -->\n<input\n  #native\n  class=\"mlv-input__native\"\n  [id]=\"id()\"\n  [type]=\"type()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"computedDisabled()\"\n  [readOnly]=\"readonly()\"\n  [value]=\"value() ?? ''\"\n  [attr.name]=\"name()\"\n  [attr.autocomplete]=\"autocomplete() || null\"\n  [attr.autofocus]=\"autofocus() ? '' : null\"\n  [attr.inputmode]=\"inputMode()\"\n  [attr.maxlength]=\"maxLength()\"\n  [attr.minlength]=\"minLength()\"\n  [attr.pattern]=\"pattern()\"\n  [attr.min]=\"min()\"\n  [attr.max]=\"max()\"\n  [attr.step]=\"step()\"\n  [attr.role]=\"role()\"\n  [attr.aria-expanded]=\"ariaExpanded()\"\n  [attr.aria-haspopup]=\"ariaHasPopup()\"\n  [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n  [attr.aria-controls]=\"ariaControls()\"\n  [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-invalid]=\"resolvedState() === 'error'\"\n  [attr.aria-describedby]=\"ariaDescribedBy() ?? _describedBy()\"\n  (input)=\"onInput($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n/>\n<!-- eslint-enable @angular-eslint/template/no-autofocus -->\n} } @else {\n<mlv-form-control-wrapper (clear)=\"clearValue()\">\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    @if (projectControl()) {\n    <!-- Consumer-projected native input (e.g. carrying @angular/aria's [ngCombobox]). -->\n    <ng-content select=\"input[mlvInputNative]\" />\n    } @else {\n    <!-- eslint-disable @angular-eslint/template/no-autofocus -->\n    <input\n      #native\n      class=\"mlv-input__native\"\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"computedDisabled()\"\n      [readOnly]=\"readonly()\"\n      [value]=\"value() ?? ''\"\n      [attr.name]=\"name()\"\n      [attr.autocomplete]=\"autocomplete() || null\"\n      [attr.autofocus]=\"autofocus() ? '' : null\"\n      [attr.inputmode]=\"inputMode()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [attr.pattern]=\"pattern()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [attr.step]=\"step()\"\n      [attr.role]=\"role()\"\n      [attr.aria-expanded]=\"ariaExpanded()\"\n      [attr.aria-haspopup]=\"ariaHasPopup()\"\n      [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n      [attr.aria-controls]=\"ariaControls()\"\n      [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"resolvedState() === 'error'\"\n      [attr.aria-describedby]=\"ariaDescribedBy() ?? _describedBy()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <!-- eslint-enable @angular-eslint/template/no-autofocus -->\n    }\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n}\n", styles: ["@layer mlv.components{.mlv-input__native{position:relative;display:block;width:100%;border:none;outline:none;appearance:none;padding:0;font-size:var(--form-ctrl-font-size, var(--mlv-font-size-m));background:none;height:100%}.mlv-input__native::placeholder{color:var(--mlv-text-tertiary)}}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", 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 }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], projectControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "projectControl", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], ariaAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaAutocomplete", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], ariaActiveDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaActiveDescendant", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], _nativeRef: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }], _projectedNative: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvInputNative), { isSignal: true }] }] } });
+
+/**
+ * Headless password-strength calculator for `mlv-input`.
+ *
+ * The directive evaluates consumer-provided rules against the input's current
+ * value and exposes reactive score metadata through `exportAs`. It renders no
+ * UI, allowing consumers to present bars, text, emoji, or another indicator.
+ */
+class MlvPasswordStrength {
+    /**
+     * Synchronous rules evaluated against the current input value.
+     */
+    mlvPasswordStrength = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvPasswordStrength" }] : /* istanbul ignore next */ []));
+    /** @private Input value accessor provided by the host `mlv-input`. */
+    _input = inject(MLV_INPUT_VALUE);
+    /** Number of rules currently satisfied by the input value. */
+    score = computed(() => {
+        const value = this._input.value() ?? '';
+        return this.mlvPasswordStrength().reduce((total, rule) => total + (rule(value) ? 1 : 0), 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "score" }] : /* istanbul ignore next */ []));
+    /** Total number of configured rules. */
+    maxScore = computed(() => this.mlvPasswordStrength().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxScore" }] : /* istanbul ignore next */ []));
+    /**
+     * Normalized score from `0` to `1`. Returns `0` when no rules are configured.
+     */
+    ratio = computed(() => {
+        const maximum = this.maxScore();
+        return maximum === 0 ? 0 : this.score() / maximum;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPasswordStrength, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvPasswordStrength, isStandalone: true, selector: "mlv-input[mlvPasswordStrength]", inputs: { mlvPasswordStrength: { classPropertyName: "mlvPasswordStrength", publicName: "mlvPasswordStrength", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["mlvPasswordStrength"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvPasswordStrength, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mlv-input[mlvPasswordStrength]',
+                    exportAs: 'mlvPasswordStrength',
+                }]
+        }], propDecorators: { mlvPasswordStrength: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvPasswordStrength", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvInput, MlvInputNative, MlvPasswordStrength };
+//# sourceMappingURL=malva-ui-core-input.mjs.map