@mk-kit/ui 0.36.0 → 0.37.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, contentChild, signal, effect, DestroyRef, computed, forwardRef, ChangeDetectionStrategy, Component, DOCUMENT, ElementRef, Injector, afterNextRender, viewChild, model, output, contentChildren, numberAttribute, untracked, ViewContainerRef, Directive, viewChildren, TemplateRef, PLATFORM_ID } from '@angular/core';
+import { inject, input, booleanAttribute, ElementRef, contentChild, signal, computed, afterNextRender, effect, DestroyRef, forwardRef, ChangeDetectionStrategy, Component, DOCUMENT, Injector, viewChild, model, output, contentChildren, numberAttribute, afterRenderEffect, untracked, ViewContainerRef, Directive, viewChildren, TemplateRef, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NgForm, FormGroupDirective, NgControl, Validators, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormsModule, NG_VALIDATORS } from '@angular/forms';
 import { MK_I18N, mkUniqueId, mkFirstErrorMessage, MkFieldContext, MkAnchoredPanel, MkLiveAnnouncer, mkValidatorChange, mkHighlight } from '@mk-kit/ui/core';
@@ -95,8 +95,42 @@ class MkFormField {
     /** Control size; nested controls inherit it. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the label sits: above the control (default), or `float` — inside
+     * the control, sliding up once it is focused or has a value. Floating works
+     * with `mkInput` / textarea and any control bound with `ngModel` or a
+     * `formControl`; the placeholder stays hidden until the label has moved.
+     */
+    labelPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
     /** The projected control's form binding, when it has one. */
     ngControl = contentChild(NgControl, { ...(ngDevMode ? { debugName: "ngControl" } : /* istanbul ignore next */ {}), descendants: true });
+    /** A control inside the field has focus. */
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** Last value read straight from a native control (fallback when no NgControl). */
+    domValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "domValue" }] : /* istanbul ignore next */ []));
+    /** The field holds a non-empty value (drives the floating label). */
+    hasValue = computed(() => {
+        this.controlTick();
+        const control = this.ngControl();
+        const v = control ? control.value : this.domValue();
+        if (v == null || v === '')
+            return false;
+        if (Array.isArray(v))
+            return v.length > 0;
+        return true;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Track a native control's value for the floating label when nothing else reports it. */
+    readDomValue(target) {
+        const el = target;
+        if (!el || typeof el.value !== 'string')
+            return;
+        this.domValue.set(el.value);
+    }
     /**
      * Bumped on every change of the bound control so the computed state below
      * re-reads it. `AbstractControl` is not signal-based, so this bridges its
@@ -113,6 +147,11 @@ class MkFormField {
     /** Id of the error element. */
     errorId = `${this.controlId}-error`;
     constructor() {
+        afterNextRender(() => {
+            const el = this.host.nativeElement.querySelector('input, textarea, select');
+            if (el)
+                this.readDomValue(el);
+        });
         const bump = () => this.controlTick.update((n) => n + 1);
         let sub = null;
         // `AbstractControl.events` emits on value, status, pristine and touched
@@ -190,12 +229,12 @@ class MkFormField {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFormField, isStandalone: true, selector: "mk-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, errorOn: { classPropertyName: "errorOn", publicName: "errorOn", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mk-form-field--sm": "size() === 'sm'", "class.mk-form-field--md": "size() === 'md'", "class.mk-form-field--lg": "size() === 'lg'", "class.mk-form-field--invalid": "hasError()", "class.mk-form-field--required": "isRequired()", "class.mk-form-field--disabled": "isDisabled()" }, classAttribute: "mk-form-field" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkFormField, isStandalone: true, selector: "mk-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, errorOn: { classPropertyName: "errorOn", publicName: "errorOn", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focused.set(true)", "focusout": "focused.set(false)", "input": "readDomValue($event.target)", "change": "readDomValue($event.target)" }, properties: { "class.mk-form-field--sm": "size() === 'sm'", "class.mk-form-field--md": "size() === 'md'", "class.mk-form-field--lg": "size() === 'lg'", "class.mk-form-field--invalid": "hasError()", "class.mk-form-field--required": "isRequired()", "class.mk-form-field--disabled": "isDisabled()", "class.mk-form-field--float": "labelPosition() === 'float'", "class.mk-form-field--focused": "focused()", "class.mk-form-field--filled": "hasValue()" }, classAttribute: "mk-form-field" }, providers: [
             {
                 provide: MkFieldContext,
                 useExisting: forwardRef(() => MkFormField),
             },
-        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label() && labelPosition() !== 'float') {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n  @if (label() && labelPosition() === 'float') {\n    <label class=\"mk-form-field__label mk-form-field__label--float\" [id]=\"labelId\" [attr.for]=\"controlId\">\n      <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n      @if (isRequired()) {\n        <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}:host(.mk-form-field--float) .mk-form-field__control{position:relative}.mk-form-field__label--float{position:absolute;inset-inline-start:var(--mk-space-3);top:50%;translate:0 -50%;max-width:calc(100% - 2 * var(--mk-space-3));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-muted);pointer-events:none;transition:top var(--mk-duration-fast) var(--mk-ease-standard),translate var(--mk-duration-fast) var(--mk-ease-standard),font-size var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-form-field--focused) .mk-form-field__label--float,:host(.mk-form-field--filled) .mk-form-field__label--float{top:.35rem;translate:0 0;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--focused) .mk-form-field__label--float{color:var(--mk-primary)}:host(.mk-form-field--invalid) .mk-form-field__label--float{color:var(--mk-danger-text)}:host(.mk-form-field--float) ::ng-deep .mk-input:not(textarea){height:calc(var(--mk-control-height-md) + .75rem);padding-top:1.05rem}:host(.mk-form-field--float) ::ng-deep textarea.mk-input{padding-top:1.5rem}:host(.mk-form-field--float:not(.mk-form-field--focused):not(.mk-form-field--filled)) ::ng-deep .mk-input::placeholder{color:transparent}@media(prefers-reduced-motion:reduce){.mk-form-field__label--float{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFormField, decorators: [{
             type: Component,
@@ -207,13 +246,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-form-field--invalid]': 'hasError()',
                         '[class.mk-form-field--required]': 'isRequired()',
                         '[class.mk-form-field--disabled]': 'isDisabled()',
+                        '[class.mk-form-field--float]': "labelPosition() === 'float'",
+                        '[class.mk-form-field--focused]': 'focused()',
+                        '[class.mk-form-field--filled]': 'hasValue()',
+                        '(focusin)': 'focused.set(true)',
+                        '(focusout)': 'focused.set(false)',
+                        '(input)': 'readDomValue($event.target)',
+                        '(change)': 'readDomValue($event.target)',
                     }, providers: [
                         {
                             provide: MkFieldContext,
                             useExisting: forwardRef(() => MkFormField),
                         },
-                    ], template: "@if (label()) {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], errorOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorOn", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }] } });
+                    ], template: "@if (label() && labelPosition() !== 'float') {\n  <label class=\"mk-form-field__label\" [id]=\"labelId\" [attr.for]=\"controlId\">\n    <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n    @if (isRequired()) {\n      <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n}\n\n<div class=\"mk-form-field__control\">\n  <ng-content />\n  @if (label() && labelPosition() === 'float') {\n    <label class=\"mk-form-field__label mk-form-field__label--float\" [id]=\"labelId\" [attr.for]=\"controlId\">\n      <span class=\"mk-form-field__label-text\">{{ label() }}</span>\n      @if (isRequired()) {\n        <span class=\"mk-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n</div>\n\n@if (hintVisible()) {\n  <p class=\"mk-form-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n}\n\n@if (hasError()) {\n  <p class=\"mk-form-field__error\" [id]=\"errorId\" role=\"alert\">{{ errorText() }}</p>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--mk-space-2);font-family:var(--mk-font-sans);color:var(--mk-text)}.mk-form-field__label{display:inline-flex;align-items:center;gap:var(--mk-space-1);font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:var(--mk-line-height-snug);color:var(--mk-text);width:fit-content}:host(.mk-form-field--lg) .mk-form-field__label{font-size:var(--mk-font-size-md)}:host(.mk-form-field--sm) .mk-form-field__label{font-size:var(--mk-font-size-xs)}.mk-form-field__required{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-bold);line-height:1}.mk-form-field__control{display:block;min-width:0}.mk-form-field__hint,.mk-form-field__error{margin:0;font-size:var(--mk-font-size-xs);line-height:var(--mk-line-height-snug)}.mk-form-field__hint{color:var(--mk-text-muted)}.mk-form-field__error{color:var(--mk-danger-text);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--disabled){opacity:.6}:host(.mk-form-field--float) .mk-form-field__control{position:relative}.mk-form-field__label--float{position:absolute;inset-inline-start:var(--mk-space-3);top:50%;translate:0 -50%;max-width:calc(100% - 2 * var(--mk-space-3));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-normal);color:var(--mk-text-muted);pointer-events:none;transition:top var(--mk-duration-fast) var(--mk-ease-standard),translate var(--mk-duration-fast) var(--mk-ease-standard),font-size var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-form-field--focused) .mk-form-field__label--float,:host(.mk-form-field--filled) .mk-form-field__label--float{top:.35rem;translate:0 0;font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-medium)}:host(.mk-form-field--focused) .mk-form-field__label--float{color:var(--mk-primary)}:host(.mk-form-field--invalid) .mk-form-field__label--float{color:var(--mk-danger-text)}:host(.mk-form-field--float) ::ng-deep .mk-input:not(textarea){height:calc(var(--mk-control-height-md) + .75rem);padding-top:1.05rem}:host(.mk-form-field--float) ::ng-deep textarea.mk-input{padding-top:1.5rem}:host(.mk-form-field--float:not(.mk-form-field--focused):not(.mk-form-field--filled)) ::ng-deep .mk-input::placeholder{color:transparent}@media(prefers-reduced-motion:reduce){.mk-form-field__label--float{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], errorOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorOn", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], ngControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgControl), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * FormErrorSummary — an accessible summary of a form's validation errors,
@@ -1436,6 +1482,770 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ], template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-select__trigger\"\n  [id]=\"triggerId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listId\"\n  [attr.aria-activedescendant]=\"\n    open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n  \"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  @if (displayLabel()) {\n    <span class=\"mk-select__value\">{{ displayLabel() }}</span>\n  } @else {\n    <span class=\"mk-select__value mk-select__value--placeholder\">{{\n      placeholder()\n    }}</span>\n  }\n  <span class=\"mk-select__arrow\" aria-hidden=\"true\"></span>\n</button>\n\n@if (open()) {\n  <ul\n    class=\"mk-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @for (opt of options(); track $index; let i = $index) {\n      <li\n        class=\"mk-select__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        [class.mk-select__option--active]=\"i === activeIndex()\"\n        [class.mk-select__option--selected]=\"i === selectedIndex()\"\n        [class.mk-select__option--disabled]=\"opt.disabled\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        <span class=\"mk-select__option-label\">{{ opt.label }}</span>\n        @if (i === selectedIndex()) {\n          <span class=\"mk-select__check\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    } @empty {\n      <li class=\"mk-select__empty\" role=\"presentation\">{{ i18n.noOptions }}</li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-select__trigger{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--sm) .mk-select__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-select--lg) .mk-select__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-select__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-select__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-select--invalid) .mk-select__trigger{border-color:var(--mk-danger)}:host(.mk-select--invalid) .mk-select__trigger:focus-visible{outline-color:var(--mk-danger)}.mk-select__trigger:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__value--placeholder{color:var(--mk-text-subtle)}.mk-select__arrow{flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--open) .mk-select__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__option--active{background-color:var(--mk-selected-bg)}.mk-select__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-select__check{flex:none;width:.4rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.mk-select__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-select__arrow,.mk-select__trigger{transition:none}}@media(pointer:coarse){.mk-select__trigger{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-select--sm) .mk-select__trigger{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
         }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Listbox — a standalone, always-visible selection list (the ARIA `listbox`
+ * pattern) for one or many values: settings panes, "choose a template"
+ * pickers, side-by-side assignments, any place a dropdown would hide choices
+ * the user should see at once.
+ *
+ * Keyboard: Up / Down move, Home / End jump, PageUp / PageDown skip ten,
+ * type to jump to a label, Enter / Space select (toggle when `multiple`),
+ * Shift+Arrow / Shift+click extend a range, Ctrl/Cmd+A selects all. Focus
+ * stays on the list (`aria-activedescendant`). With `filterable`, a search
+ * box above the list narrows it by label or description.
+ *
+ * Implements `ControlValueAccessor` and a two-way `value` model — a single
+ * value, or an array when `multiple`.
+ *
+ * ```html
+ * <mk-listbox [options]="plans" [(value)]="plan" ariaLabel="Plan" />
+ * <mk-listbox multiple filterable [options]="people" [(ngModel)]="reviewers" />
+ * ```
+ */
+class MkListbox {
+    field = inject(MkFormField, { optional: true });
+    i18n = inject(MK_I18N);
+    listRef = viewChild.required('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    /** The rows to choose from. */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Allow several values; the model becomes an array. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a search box that narrows the list by label / description. */
+    filterable = input(false, { ...(ngDevMode ? { debugName: "filterable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    filterPlaceholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Single-select only: moving with the arrow keys selects immediately
+     * (default `true`); `false` requires Enter / Space to commit.
+     */
+    selectionFollowsFocus = input(true, { ...(ngDevMode ? { debugName: "selectionFollowsFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name when there is no visible label / form field. */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Text shown when no option matches the filter. */
+    emptyText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    /** Two-way value: one value, or an array when `multiple`. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Emitted after the user changes the selection (not on programmatic writes). */
+    change = output();
+    listId = this.field?.controlId ?? mkUniqueId('mk-listbox');
+    filterId = mkUniqueId('mk-listbox-filter');
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    typeahead = '';
+    typeaheadTimer;
+    /** Range anchor for Shift selection (index in the visible list). */
+    anchor = -1;
+    effectiveSize = computed(() => (this.field ? this.field.size() : this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.ariaLabelledby() ?? this.field?.labelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** Options that match the filter, in source order. */
+    visible = computed(() => {
+        const q = this.query().trim().toLocaleLowerCase();
+        const all = this.options();
+        if (!q)
+            return [...all];
+        return all.filter((o) => o.label.toLocaleLowerCase().includes(q) || (o.description?.toLocaleLowerCase().includes(q) ?? false));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Visible options with group headings interleaved. */
+    rows = computed(() => {
+        const out = [];
+        let lastGroup;
+        this.visible().forEach((option, index) => {
+            if (option.group && option.group !== lastGroup) {
+                out.push({ kind: 'group', label: option.group, id: `${this.listId}-grp-${out.length}` });
+            }
+            lastGroup = option.group;
+            out.push({ kind: 'option', option, index });
+        });
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    selectedValues = computed(() => {
+        const v = this.value();
+        if (this.multiple())
+            return Array.isArray(v) ? v : v == null ? [] : [v];
+        return v == null ? [] : [v];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    activeId = computed(() => (this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the active row in view as it changes.
+        afterRenderEffect(() => {
+            const i = this.activeIndex();
+            if (i < 0)
+                return;
+            const el = this.listRef().nativeElement.ownerDocument.getElementById(this.optionId(i));
+            el?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
+    optionId(index) {
+        return `${this.listId}-opt-${index}`;
+    }
+    isSelected(option) {
+        return this.selectedValues().includes(option.value);
+    }
+    /** Focus the list. */
+    focus() {
+        this.listRef().nativeElement.focus();
+    }
+    // --- Pointer -----------------------------------------------------------------
+    onOptionClick(index, event) {
+        if (this.isDisabled())
+            return;
+        const option = this.visible()[index];
+        if (!option || option.disabled)
+            return;
+        this.activeIndex.set(index);
+        if (this.multiple() && event.shiftKey && this.anchor >= 0) {
+            this.selectRange(this.anchor, index, !(event.ctrlKey || event.metaKey));
+        }
+        else {
+            this.commit(index, this.multiple() ? 'toggle' : 'select');
+            this.anchor = index;
+        }
+    }
+    onFilterInput(event) {
+        this.query.set(event.target.value);
+        this.activeIndex.set(-1);
+        this.anchor = -1;
+    }
+    onFilterKeydown(event) {
+        // Arrow keys from the search box hand over to the list.
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.focus();
+            this.jump(event.key === 'ArrowDown' ? this.firstEnabled() : this.lastEnabled(), false);
+        }
+    }
+    // --- Keyboard ----------------------------------------------------------------
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const key = event.key;
+        const multi = this.multiple();
+        switch (key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.step(key === 'ArrowDown' ? 1 : -1, event.shiftKey);
+                break;
+            case 'Home':
+            case 'End':
+                event.preventDefault();
+                this.jump(key === 'Home' ? this.firstEnabled() : this.lastEnabled(), event.shiftKey);
+                break;
+            case 'PageDown':
+            case 'PageUp':
+                event.preventDefault();
+                this.step(key === 'PageDown' ? 10 : -10, event.shiftKey, false);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.activeIndex() >= 0) {
+                    this.commit(this.activeIndex(), multi ? 'toggle' : 'select');
+                    this.anchor = this.activeIndex();
+                }
+                break;
+            case 'a':
+            case 'A':
+                if (multi && (event.ctrlKey || event.metaKey)) {
+                    event.preventDefault();
+                    this.selectAll();
+                }
+                else if (key.length === 1)
+                    this.typeaheadSearch(key);
+                break;
+            default:
+                if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey)
+                    this.typeaheadSearch(key);
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    /** Move the active row by `delta` (wrapping for ±1), extending the selection with Shift. */
+    step(delta, extend, wrap = true) {
+        const opts = this.visible();
+        if (!opts.length)
+            return;
+        let i = this.activeIndex();
+        if (i < 0) {
+            this.jump(delta > 0 ? this.firstEnabled() : this.lastEnabled(), extend);
+            return;
+        }
+        if (Math.abs(delta) === 1) {
+            for (let s = 0; s < opts.length; s++) {
+                i = wrap ? (i + delta + opts.length) % opts.length : Math.min(Math.max(i + delta, 0), opts.length - 1);
+                if (!opts[i].disabled)
+                    break;
+            }
+        }
+        else {
+            i = Math.min(Math.max(i + delta, 0), opts.length - 1);
+            // Land on an enabled row, searching in the direction of travel then back.
+            let j = i;
+            while (j >= 0 && j < opts.length && opts[j].disabled)
+                j += Math.sign(delta);
+            if (j < 0 || j >= opts.length) {
+                j = i;
+                while (j >= 0 && j < opts.length && opts[j].disabled)
+                    j -= Math.sign(delta);
+            }
+            i = j;
+        }
+        this.jump(i, extend);
+    }
+    jump(index, extend) {
+        if (index < 0)
+            return;
+        this.activeIndex.set(index);
+        if (this.multiple()) {
+            if (extend) {
+                if (this.anchor < 0)
+                    this.anchor = index;
+                this.selectRange(this.anchor, index, true);
+            }
+            else {
+                // Plain navigation moves the range anchor along with the cursor.
+                this.anchor = index;
+            }
+        }
+        else if (this.selectionFollowsFocus()) {
+            this.commit(index, 'select');
+        }
+    }
+    firstEnabled() {
+        return this.visible().findIndex((o) => !o.disabled);
+    }
+    lastEnabled() {
+        const opts = this.visible();
+        for (let i = opts.length - 1; i >= 0; i--)
+            if (!opts[i].disabled)
+                return i;
+        return -1;
+    }
+    typeaheadSearch(char) {
+        this.typeahead += char.toLocaleLowerCase();
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+        this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 500);
+        const opts = this.visible();
+        const start = this.activeIndex() + 1;
+        for (let s = 0; s < opts.length; s++) {
+            const i = (start + s) % opts.length;
+            if (!opts[i].disabled && opts[i].label.toLocaleLowerCase().startsWith(this.typeahead)) {
+                this.jump(i, false);
+                return;
+            }
+        }
+    }
+    // --- Selection ---------------------------------------------------------------
+    commit(index, mode) {
+        const option = this.visible()[index];
+        if (!option || option.disabled)
+            return;
+        if (!this.multiple()) {
+            if (this.value() === option.value)
+                return;
+            this.emit(option.value);
+            return;
+        }
+        const current = this.selectedValues();
+        const next = mode === 'toggle' && current.includes(option.value)
+            ? current.filter((v) => v !== option.value)
+            : current.includes(option.value)
+                ? current
+                : [...current, option.value];
+        this.emit(next);
+    }
+    /** Select every enabled option between two visible indexes (replacing, or adding to, the selection). */
+    selectRange(from, to, replace) {
+        const opts = this.visible();
+        const [lo, hi] = from < to ? [from, to] : [to, from];
+        const range = opts.slice(lo, hi + 1).filter((o) => !o.disabled).map((o) => o.value);
+        const base = replace ? [] : this.selectedValues();
+        this.emit([...base, ...range.filter((v) => !base.includes(v))]);
+    }
+    selectAll() {
+        const all = this.visible().filter((o) => !o.disabled).map((o) => o.value);
+        const current = this.selectedValues();
+        // Ctrl+A toggles: everything selected → clear, else select all.
+        this.emit(all.every((v) => current.includes(v)) ? [] : all);
+    }
+    emit(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.change.emit(value);
+    }
+    ngOnDestroy() {
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+    }
+    // --- ControlValueAccessor ----------------------------------------------------
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkListbox, isStandalone: true, selector: "mk-listbox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectionFollowsFocus: { classPropertyName: "selectionFollowsFocus", publicName: "selectionFollowsFocus", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { properties: { "class.mk-listbox--sm": "effectiveSize() === 'sm'", "class.mk-listbox--md": "effectiveSize() === 'md'", "class.mk-listbox--lg": "effectiveSize() === 'lg'", "class.mk-listbox--multiple": "multiple()", "class.mk-listbox--invalid": "isInvalid()", "class.mk-listbox--disabled": "isDisabled()" }, classAttribute: "mk-listbox" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MkListbox), multi: true }], viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (filterable()) {\n  <div class=\"mk-listbox__filter\">\n    <input\n      class=\"mk-listbox__filter-input\"\n      type=\"search\"\n      [id]=\"filterId\"\n      [value]=\"query()\"\n      [placeholder]=\"filterPlaceholder() ?? i18n.listboxFilter\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-label]=\"i18n.listboxFilter\"\n      autocomplete=\"off\"\n      (input)=\"onFilterInput($event)\"\n      (keydown)=\"onFilterKeydown($event)\"\n    />\n  </div>\n}\n\n<ul\n  #list\n  class=\"mk-listbox__list\"\n  role=\"listbox\"\n  [id]=\"listId\"\n  [tabindex]=\"isDisabled() ? -1 : 0\"\n  [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n  [attr.aria-activedescendant]=\"activeId()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  @for (row of rows(); track row.kind === 'group' ? row.id : row.option.value) {\n    @if (row.kind === 'group') {\n      <li class=\"mk-listbox__group\" role=\"presentation\" [id]=\"row.id\">{{ row.label }}</li>\n    } @else {\n      @let selected = isSelected(row.option);\n      <li\n        class=\"mk-listbox__option\"\n        role=\"option\"\n        [id]=\"optionId(row.index)\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"row.option.disabled || null\"\n        [class.mk-listbox__option--active]=\"row.index === activeIndex()\"\n        [class.mk-listbox__option--selected]=\"selected\"\n        [class.mk-listbox__option--disabled]=\"row.option.disabled\"\n        (click)=\"onOptionClick(row.index, $event)\"\n      >\n        @if (multiple()) {\n          <span class=\"mk-listbox__box\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" focusable=\"false\"><path d=\"M2.5 6.5l2.5 2.5 4.5-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>\n          </span>\n        }\n        <span class=\"mk-listbox__text\">\n          <span class=\"mk-listbox__label\">{{ row.option.label }}</span>\n          @if (row.option.description) {\n            <span class=\"mk-listbox__description\">{{ row.option.description }}</span>\n          }\n        </span>\n        @if (!multiple() && selected) {\n          <span class=\"mk-listbox__check\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  }\n  @if (!rows().length) {\n    <li class=\"mk-listbox__empty\" role=\"presentation\">{{ emptyText() ?? i18n.listboxEmpty }}</li>\n  }\n</ul>\n", styles: [":host{--_pad-y: var(--mk-space-2);--_pad-x: var(--mk-space-3);--_font: var(--mk-font-size-md);display:flex;flex-direction:column;min-width:0;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font-family:var(--mk-font-sans);overflow:hidden}:host(.mk-listbox--sm){--_pad-y: var(--mk-space-1);--_pad-x: var(--mk-space-2);--_font: var(--mk-font-size-sm)}:host(.mk-listbox--lg){--_pad-y: var(--mk-space-3);--_pad-x: var(--mk-space-4);--_font: var(--mk-font-size-lg)}:host(:focus-within){border-color:var(--mk-primary);box-shadow:0 0 0 var(--mk-focus-ring-width) var(--mk-focus-ring, var(--mk-primary-subtle))}:host(.mk-listbox--invalid){border-color:var(--mk-danger)}:host(.mk-listbox--disabled){opacity:.6;cursor:not-allowed}.mk-listbox__filter{flex:none;padding:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-listbox__filter-input{width:100%;padding:var(--_pad-y) var(--_pad-x);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:inherit;font:inherit;font-size:var(--_font)}.mk-listbox__filter-input:focus-visible{outline:none;border-color:var(--mk-primary)}.mk-listbox__filter-input::placeholder{color:var(--mk-text-muted)}.mk-listbox__list{flex:1 1 auto;min-height:0;max-height:var(--mk-listbox-max-height, 16rem);margin:0;padding:var(--mk-space-1);list-style:none;overflow-y:auto;overscroll-behavior:contain;outline:none}.mk-listbox__group{padding:var(--mk-space-2) var(--_pad-x) var(--mk-space-1);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.mk-listbox__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--_pad-y) var(--_pad-x);border-radius:var(--mk-radius-sm);font-size:var(--_font);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-listbox__option:hover:not(.mk-listbox__option--disabled){background-color:var(--mk-hover-bg, var(--mk-surface-2))}.mk-listbox__option--active{background-color:var(--mk-selected-bg)}.mk-listbox__list:focus-visible .mk-listbox__option--active{box-shadow:inset 0 0 0 2px var(--mk-primary)}.mk-listbox__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-listbox__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-listbox__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.mk-listbox__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-listbox__description{color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-normal)}.mk-listbox__box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:var(--mk-border-width) solid var(--mk-border-strong, var(--mk-border));border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:transparent}.mk-listbox__option--selected .mk-listbox__box{border-color:var(--mk-primary);background:var(--mk-primary);color:var(--mk-primary-contrast, #fff)}.mk-listbox__check{flex:none;width:.4rem;height:.7rem;margin-inline-end:var(--mk-space-1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.mk-listbox__empty{padding:var(--mk-space-3) var(--_pad-x);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}@media(forced-colors:active){.mk-listbox__option--active{outline:2px solid Highlight}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkListbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-listbox', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-listbox',
+                        '[class.mk-listbox--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-listbox--md]': "effectiveSize() === 'md'",
+                        '[class.mk-listbox--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-listbox--multiple]': 'multiple()',
+                        '[class.mk-listbox--invalid]': 'isInvalid()',
+                        '[class.mk-listbox--disabled]': 'isDisabled()',
+                    }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MkListbox), multi: true }], template: "@if (filterable()) {\n  <div class=\"mk-listbox__filter\">\n    <input\n      class=\"mk-listbox__filter-input\"\n      type=\"search\"\n      [id]=\"filterId\"\n      [value]=\"query()\"\n      [placeholder]=\"filterPlaceholder() ?? i18n.listboxFilter\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-label]=\"i18n.listboxFilter\"\n      autocomplete=\"off\"\n      (input)=\"onFilterInput($event)\"\n      (keydown)=\"onFilterKeydown($event)\"\n    />\n  </div>\n}\n\n<ul\n  #list\n  class=\"mk-listbox__list\"\n  role=\"listbox\"\n  [id]=\"listId\"\n  [tabindex]=\"isDisabled() ? -1 : 0\"\n  [attr.aria-multiselectable]=\"multiple() ? 'true' : null\"\n  [attr.aria-activedescendant]=\"activeId()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  @for (row of rows(); track row.kind === 'group' ? row.id : row.option.value) {\n    @if (row.kind === 'group') {\n      <li class=\"mk-listbox__group\" role=\"presentation\" [id]=\"row.id\">{{ row.label }}</li>\n    } @else {\n      @let selected = isSelected(row.option);\n      <li\n        class=\"mk-listbox__option\"\n        role=\"option\"\n        [id]=\"optionId(row.index)\"\n        [attr.aria-selected]=\"selected\"\n        [attr.aria-disabled]=\"row.option.disabled || null\"\n        [class.mk-listbox__option--active]=\"row.index === activeIndex()\"\n        [class.mk-listbox__option--selected]=\"selected\"\n        [class.mk-listbox__option--disabled]=\"row.option.disabled\"\n        (click)=\"onOptionClick(row.index, $event)\"\n      >\n        @if (multiple()) {\n          <span class=\"mk-listbox__box\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" focusable=\"false\"><path d=\"M2.5 6.5l2.5 2.5 4.5-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>\n          </span>\n        }\n        <span class=\"mk-listbox__text\">\n          <span class=\"mk-listbox__label\">{{ row.option.label }}</span>\n          @if (row.option.description) {\n            <span class=\"mk-listbox__description\">{{ row.option.description }}</span>\n          }\n        </span>\n        @if (!multiple() && selected) {\n          <span class=\"mk-listbox__check\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  }\n  @if (!rows().length) {\n    <li class=\"mk-listbox__empty\" role=\"presentation\">{{ emptyText() ?? i18n.listboxEmpty }}</li>\n  }\n</ul>\n", styles: [":host{--_pad-y: var(--mk-space-2);--_pad-x: var(--mk-space-3);--_font: var(--mk-font-size-md);display:flex;flex-direction:column;min-width:0;border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);background:var(--mk-surface);color:var(--mk-text);font-family:var(--mk-font-sans);overflow:hidden}:host(.mk-listbox--sm){--_pad-y: var(--mk-space-1);--_pad-x: var(--mk-space-2);--_font: var(--mk-font-size-sm)}:host(.mk-listbox--lg){--_pad-y: var(--mk-space-3);--_pad-x: var(--mk-space-4);--_font: var(--mk-font-size-lg)}:host(:focus-within){border-color:var(--mk-primary);box-shadow:0 0 0 var(--mk-focus-ring-width) var(--mk-focus-ring, var(--mk-primary-subtle))}:host(.mk-listbox--invalid){border-color:var(--mk-danger)}:host(.mk-listbox--disabled){opacity:.6;cursor:not-allowed}.mk-listbox__filter{flex:none;padding:var(--mk-space-2);border-bottom:var(--mk-border-width) solid var(--mk-border)}.mk-listbox__filter-input{width:100%;padding:var(--_pad-y) var(--_pad-x);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:inherit;font:inherit;font-size:var(--_font)}.mk-listbox__filter-input:focus-visible{outline:none;border-color:var(--mk-primary)}.mk-listbox__filter-input::placeholder{color:var(--mk-text-muted)}.mk-listbox__list{flex:1 1 auto;min-height:0;max-height:var(--mk-listbox-max-height, 16rem);margin:0;padding:var(--mk-space-1);list-style:none;overflow-y:auto;overscroll-behavior:contain;outline:none}.mk-listbox__group{padding:var(--mk-space-2) var(--_pad-x) var(--mk-space-1);color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.mk-listbox__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--_pad-y) var(--_pad-x);border-radius:var(--mk-radius-sm);font-size:var(--_font);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-listbox__option:hover:not(.mk-listbox__option--disabled){background-color:var(--mk-hover-bg, var(--mk-surface-2))}.mk-listbox__option--active{background-color:var(--mk-selected-bg)}.mk-listbox__list:focus-visible .mk-listbox__option--active{box-shadow:inset 0 0 0 2px var(--mk-primary)}.mk-listbox__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-listbox__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-listbox__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}.mk-listbox__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-listbox__description{color:var(--mk-text-muted);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-normal)}.mk-listbox__box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:var(--mk-border-width) solid var(--mk-border-strong, var(--mk-border));border-radius:var(--mk-radius-sm);background:var(--mk-surface);color:transparent}.mk-listbox__option--selected .mk-listbox__box{border-color:var(--mk-primary);background:var(--mk-primary);color:var(--mk-primary-contrast, #fff)}.mk-listbox__check{flex:none;width:.4rem;height:.7rem;margin-inline-end:var(--mk-space-1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.mk-listbox__empty{padding:var(--mk-space-3) var(--_pad-x);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}@media(forced-colors:active){.mk-listbox__option--active{outline:2px solid Highlight}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], selectionFollowsFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionFollowsFocus", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+/**
+ * Cascader — a select whose choices are a hierarchy shown as side-by-side
+ * columns (region → country → city, category → subcategory, org unit → team).
+ * Each pick opens the next column; picking a leaf commits the whole path.
+ *
+ * The value is the **path** of option values (`['eu', 'pl', 'krk']`) by
+ * default, or just the leaf's value with `valueMode="leaf"`. Parents are only
+ * selectable with `selectParents` (a click on one then commits, and its
+ * children stay reachable).
+ *
+ * Keyboard: Up / Down move within a column, Right opens the children, Left
+ * goes back, Enter / Space selects, typing jumps to a label, Escape closes.
+ * `expandTrigger="hover"` opens columns on pointer hover as well as click.
+ *
+ * Implements `ControlValueAccessor` and a two-way `value` model.
+ *
+ * ```html
+ * <mk-cascader [options]="regions" [(value)]="location" placeholder="Where?" clearable />
+ * ```
+ */
+class MkCascader {
+    field = inject(MkFormField, { optional: true });
+    i18n = inject(MK_I18N);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    /** The hierarchy to choose from. */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Two-way value: the path of values (default) or the leaf value (`valueMode="leaf"`). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Bind the full path of values (default) or only the chosen option's value. */
+    valueMode = input('path', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueMode" }] : /* istanbul ignore next */ []));
+    /** Allow committing a parent option (click / Enter on it) instead of leaves only. */
+    selectParents = input(false, { ...(ngDevMode ? { debugName: "selectParents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Open the next column on click (default) or also on pointer hover. */
+    expandTrigger = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandTrigger" }] : /* istanbul ignore next */ []));
+    placeholder = input(this.i18n.selectPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Text between the labels of the chosen path. */
+    separator = input(' / ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Emitted after the user commits or clears a value. */
+    change = output();
+    triggerId = this.field?.controlId ?? mkUniqueId('mk-cascader');
+    panelId = mkUniqueId('mk-cascader-panel');
+    valueId = mkUniqueId('mk-cascader-value');
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Row index highlighted in each open column, left to right. */
+    activePath = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    typeahead = '';
+    typeaheadTimer;
+    effectiveSize = computed(() => (this.field ? this.field.size() : this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.field?.labelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /** The options along the committed value, or `[]`. */
+    selectedPath = computed(() => {
+        const v = this.value();
+        if (v == null)
+            return [];
+        if (this.valueMode() === 'path') {
+            if (!Array.isArray(v))
+                return [];
+            const out = [];
+            let list = this.options();
+            for (const step of v) {
+                const hit = list.find((o) => o.value === step);
+                if (!hit)
+                    return [];
+                out.push(hit);
+                list = hit.children ?? [];
+            }
+            return out;
+        }
+        return this.findPath(this.options(), v) ?? [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedPath" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => this.selectedPath().map((o) => o.label).join(this.separator()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Columns rendered in the panel: the root list, then the children of every
+     * opened parent along the active path. The last entry of the path is the
+     * cursor — resting on a parent does not open it (click, hover or → does).
+     */
+    columns = computed(() => {
+        const cols = [[...this.options()]];
+        const path = this.activePath();
+        for (let depth = 0; depth < path.length - 1; depth++) {
+            const opt = cols[depth]?.[path[depth]];
+            if (!opt?.children?.length)
+                break;
+            cols.push([...opt.children]);
+        }
+        return cols;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** The column the keyboard cursor is in. */
+    cursorColumn = computed(() => Math.max(0, Math.min(this.activePath().length - 1, this.columns().length - 1)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursorColumn" }] : /* istanbul ignore next */ []));
+    activeId = computed(() => {
+        const path = this.activePath();
+        const col = this.cursorColumn();
+        return path.length ? this.optionId(col, path[col]) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            const id = this.activeId();
+            if (!id || !this.open())
+                return;
+            this.panelRef()?.nativeElement.ownerDocument.getElementById(id)?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
+    optionId(column, row) {
+        return `${this.panelId}-c${column}-r${row}`;
+    }
+    isOnPath(column, row) {
+        return this.activePath()[column] === row;
+    }
+    isSelected(column, option) {
+        return this.selectedPath()[column] === option;
+    }
+    isCursor(column, row) {
+        return this.cursorColumn() === column && this.activePath()[column] === row;
+    }
+    // --- Open / close ------------------------------------------------------------
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        // Start on the committed path (its columns open), else on the first row.
+        const sel = this.selectedPath();
+        const path = sel.length ? this.indexPath(sel) : [this.firstEnabled(this.options())].filter((i) => i >= 0);
+        this.activePath.set(path);
+        this.open.set(true);
+        afterNextRender(() => this.panelRef()?.nativeElement.focus(), { injector: this.injector });
+    }
+    close(restoreFocus = false) {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        if (restoreFocus)
+            this.triggerRef()?.nativeElement.focus();
+    }
+    onTriggerKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.openPanel();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        if (related && (this.host.nativeElement.contains(related) || this.panelRef()?.nativeElement.contains(related)))
+            return;
+        this.close();
+        this.onTouched();
+    }
+    onPanelFocusout(event) {
+        const related = event.relatedTarget;
+        if (!related)
+            return;
+        if (this.host.nativeElement.contains(related) || this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.close();
+        this.onTouched();
+    }
+    // --- Pointer -----------------------------------------------------------------
+    onOptionClick(column, row) {
+        const option = this.columns()[column]?.[row];
+        if (!option || option.disabled)
+            return;
+        if (option.children?.length) {
+            this.expand(column, row);
+            if (this.selectParents())
+                this.commit(column, row);
+            return;
+        }
+        this.setCursor(column, row);
+        this.commit(column, row);
+    }
+    onOptionHover(column, row) {
+        if (this.expandTrigger() !== 'hover')
+            return;
+        const option = this.columns()[column]?.[row];
+        if (!option || option.disabled)
+            return;
+        this.expand(column, row);
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.emit(null);
+        this.triggerRef()?.nativeElement.focus();
+    }
+    // --- Keyboard ----------------------------------------------------------------
+    onPanelKeydown(event) {
+        const col = this.cursorColumn();
+        const column = this.columns()[col] ?? [];
+        const row = this.activePath()[col] ?? -1;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                const next = this.stepRow(column, row, event.key === 'ArrowDown' ? 1 : -1);
+                if (next >= 0)
+                    this.setCursor(col, next);
+                break;
+            }
+            case 'Home':
+            case 'End': {
+                event.preventDefault();
+                const next = event.key === 'Home' ? this.firstEnabled(column) : this.lastEnabled(column);
+                if (next >= 0)
+                    this.setCursor(col, next);
+                break;
+            }
+            case 'ArrowRight':
+                event.preventDefault();
+                if (row >= 0)
+                    this.expand(col, row);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (col > 0)
+                    this.activePath.set(this.activePath().slice(0, col));
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const option = column[row];
+                if (!option || option.disabled)
+                    break;
+                if (option.children?.length && !this.selectParents()) {
+                    this.expand(col, row);
+                }
+                else {
+                    this.commit(col, row);
+                }
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.close(true);
+                break;
+            case 'Tab':
+                this.close();
+                break;
+            default:
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    this.typeaheadSearch(event.key, col, column, row);
+                }
+        }
+    }
+    /** Point the cursor at `(column, row)`, trimming any deeper columns. */
+    setCursor(column, row) {
+        this.activePath.set([...this.activePath().slice(0, column), row]);
+    }
+    /** Open the children of `(column, row)` and move the cursor onto the first enabled one. */
+    expand(column, row) {
+        const option = this.columns()[column]?.[row];
+        const children = option?.children;
+        const first = children?.length ? this.firstEnabled(children) : -1;
+        this.activePath.set(first >= 0 ? [...this.activePath().slice(0, column), row, first] : [...this.activePath().slice(0, column), row]);
+    }
+    stepRow(column, from, delta) {
+        if (!column.length)
+            return -1;
+        let i = from;
+        for (let s = 0; s < column.length; s++) {
+            i = (i + delta + column.length) % column.length;
+            if (!column[i].disabled)
+                return i;
+        }
+        return -1;
+    }
+    firstEnabled(list) {
+        return list.findIndex((o) => !o.disabled);
+    }
+    lastEnabled(list) {
+        for (let i = list.length - 1; i >= 0; i--)
+            if (!list[i].disabled)
+                return i;
+        return -1;
+    }
+    typeaheadSearch(char, col, column, from) {
+        this.typeahead += char.toLocaleLowerCase();
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+        this.typeaheadTimer = setTimeout(() => (this.typeahead = ''), 500);
+        for (let s = 1; s <= column.length; s++) {
+            const i = (from + s) % column.length;
+            if (!column[i].disabled && column[i].label.toLocaleLowerCase().startsWith(this.typeahead)) {
+                this.setCursor(col, i);
+                return;
+            }
+        }
+    }
+    // --- Value -------------------------------------------------------------------
+    commit(column, row) {
+        const cols = this.columns();
+        const path = [];
+        for (let c = 0; c < column; c++)
+            path.push(cols[c][this.activePath()[c]]);
+        path.push(cols[column][row]);
+        const value = this.valueMode() === 'path' ? path.map((o) => o.value) : path[path.length - 1].value;
+        this.emit(value);
+        this.close(true);
+    }
+    emit(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.change.emit(value);
+    }
+    /** Row indexes of a path of options. */
+    indexPath(path) {
+        const out = [];
+        let list = this.options();
+        for (const opt of path) {
+            const i = list.indexOf(opt);
+            if (i < 0)
+                break;
+            out.push(i);
+            list = opt.children ?? [];
+        }
+        return out;
+    }
+    /** Depth-first search for the option whose value is `value` (leaf mode). */
+    findPath(list, value, trail = []) {
+        for (const opt of list) {
+            const next = [...trail, opt];
+            if (opt.value === value)
+                return next;
+            if (opt.children?.length) {
+                const hit = this.findPath(opt.children, value, next);
+                if (hit)
+                    return hit;
+            }
+        }
+        return null;
+    }
+    ngOnDestroy() {
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+    }
+    // --- ControlValueAccessor ----------------------------------------------------
+    writeValue(value) {
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCascader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCascader, isStandalone: true, selector: "mk-cascader", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueMode: { classPropertyName: "valueMode", publicName: "valueMode", isSignal: true, isRequired: false, transformFunction: null }, selectParents: { classPropertyName: "selectParents", publicName: "selectParents", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-cascader--sm": "effectiveSize() === 'sm'", "class.mk-cascader--lg": "effectiveSize() === 'lg'", "class.mk-cascader--open": "open()", "class.mk-cascader--invalid": "isInvalid()", "class.mk-cascader--disabled": "isDisabled()" }, classAttribute: "mk-cascader" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MkCascader), multi: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-cascader__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-cascader__trigger\"\n    [id]=\"triggerId\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy() ? labelledBy() + ' ' + valueId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-cascader__value\" [id]=\"valueId\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-cascader__value mk-cascader__value--placeholder\" [id]=\"valueId\">{{ placeholder() }}</span>\n    }\n    <span class=\"mk-cascader__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && selectedPath().length && !isDisabled()) {\n    <button type=\"button\" class=\"mk-cascader__clear\" [attr.aria-label]=\"i18n.clear\" (click)=\"clear($event)\">\n      <span class=\"mk-cascader__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-cascader__panel\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-activedescendant]=\"activeId()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    @for (column of columns(); track $index; let c = $index) {\n      <ul class=\"mk-cascader__column\" role=\"group\">\n        @for (opt of column; track $index; let r = $index) {\n          <li\n            class=\"mk-cascader__option\"\n            role=\"option\"\n            [id]=\"optionId(c, r)\"\n            [attr.aria-selected]=\"isSelected(c, opt)\"\n            [attr.aria-disabled]=\"opt.disabled || null\"\n            [class.mk-cascader__option--path]=\"isOnPath(c, r)\"\n            [class.mk-cascader__option--cursor]=\"isCursor(c, r)\"\n            [class.mk-cascader__option--selected]=\"isSelected(c, opt)\"\n            [class.mk-cascader__option--disabled]=\"opt.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (mouseenter)=\"onOptionHover(c, r)\"\n            (click)=\"onOptionClick(c, r)\"\n          >\n            <span class=\"mk-cascader__option-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <span class=\"mk-cascader__chevron\" aria-hidden=\"true\"></span>\n            }\n          </li>\n        } @empty {\n          <li class=\"mk-cascader__empty\" role=\"presentation\">{{ i18n.noOptions }}</li>\n        }\n      </ul>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-cascader__field{display:flex;align-items:center;position:relative}.mk-cascader__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-cascader--sm) .mk-cascader__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-cascader--lg) .mk-cascader__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-cascader__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-cascader__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-cascader--invalid) .mk-cascader__trigger{border-color:var(--mk-danger)}:host(.mk-cascader--disabled) .mk-cascader__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-cascader__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-cascader__value--placeholder{color:var(--mk-text-subtle)}.mk-cascader__icon{flex:none;width:.6rem;height:.6rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg);transform-origin:center;margin-bottom:.15rem}:host(.mk-cascader--open) .mk-cascader__icon{transform:rotate(-135deg);margin-bottom:-.15rem}.mk-cascader__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-cascader__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-cascader__clear-icon:before,.mk-cascader__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-cascader__clear-icon:before{transform:rotate(45deg)}.mk-cascader__clear-icon:after{transform:rotate(-45deg)}.mk-cascader__panel{display:flex;align-items:stretch;background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);outline:none}.mk-cascader__column{min-width:10rem;max-height:16rem;margin:0;padding:var(--mk-space-1);list-style:none;overflow-y:auto;overscroll-behavior:contain}.mk-cascader__column+.mk-cascader__column{border-inline-start:var(--mk-border-width) solid var(--mk-border)}.mk-cascader__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-cascader__option:hover:not(.mk-cascader__option--disabled){background-color:var(--mk-hover-bg, var(--mk-surface-2))}.mk-cascader__option--path{background-color:var(--mk-selected-bg)}.mk-cascader__option--cursor{box-shadow:inset 0 0 0 2px var(--mk-primary)}.mk-cascader__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-cascader__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-cascader__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-cascader__chevron{flex:none;width:.45rem;height:.45rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(-45deg)}[dir=rtl] .mk-cascader__chevron{transform:rotate(135deg)}.mk-cascader__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}@media(max-width:640px){.mk-cascader__panel{flex-direction:column-reverse;max-height:60vh;overflow-y:auto}.mk-cascader__column{max-height:none}.mk-cascader__column+.mk-cascader__column{border-inline-start:0;border-bottom:var(--mk-border-width) solid var(--mk-border)}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCascader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-cascader', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkAnchoredPanel], host: {
+                        class: 'mk-cascader',
+                        '[class.mk-cascader--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-cascader--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-cascader--open]': 'open()',
+                        '[class.mk-cascader--invalid]': 'isInvalid()',
+                        '[class.mk-cascader--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MkCascader), multi: true }], template: "<div #field class=\"mk-cascader__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-cascader__trigger\"\n    [id]=\"triggerId\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy() ? labelledBy() + ' ' + valueId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-cascader__value\" [id]=\"valueId\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-cascader__value mk-cascader__value--placeholder\" [id]=\"valueId\">{{ placeholder() }}</span>\n    }\n    <span class=\"mk-cascader__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && selectedPath().length && !isDisabled()) {\n    <button type=\"button\" class=\"mk-cascader__clear\" [attr.aria-label]=\"i18n.clear\" (click)=\"clear($event)\">\n      <span class=\"mk-cascader__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-cascader__panel\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-activedescendant]=\"activeId()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    @for (column of columns(); track $index; let c = $index) {\n      <ul class=\"mk-cascader__column\" role=\"group\">\n        @for (opt of column; track $index; let r = $index) {\n          <li\n            class=\"mk-cascader__option\"\n            role=\"option\"\n            [id]=\"optionId(c, r)\"\n            [attr.aria-selected]=\"isSelected(c, opt)\"\n            [attr.aria-disabled]=\"opt.disabled || null\"\n            [class.mk-cascader__option--path]=\"isOnPath(c, r)\"\n            [class.mk-cascader__option--cursor]=\"isCursor(c, r)\"\n            [class.mk-cascader__option--selected]=\"isSelected(c, opt)\"\n            [class.mk-cascader__option--disabled]=\"opt.disabled\"\n            (mousedown)=\"$event.preventDefault()\"\n            (mouseenter)=\"onOptionHover(c, r)\"\n            (click)=\"onOptionClick(c, r)\"\n          >\n            <span class=\"mk-cascader__option-label\">{{ opt.label }}</span>\n            @if (opt.children?.length) {\n              <span class=\"mk-cascader__chevron\" aria-hidden=\"true\"></span>\n            }\n          </li>\n        } @empty {\n          <li class=\"mk-cascader__empty\" role=\"presentation\">{{ i18n.noOptions }}</li>\n        }\n      </ul>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-cascader__field{display:flex;align-items:center;position:relative}.mk-cascader__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-cascader--sm) .mk-cascader__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-cascader--lg) .mk-cascader__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-cascader__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-cascader__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-cascader--invalid) .mk-cascader__trigger{border-color:var(--mk-danger)}:host(.mk-cascader--disabled) .mk-cascader__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-cascader__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-cascader__value--placeholder{color:var(--mk-text-subtle)}.mk-cascader__icon{flex:none;width:.6rem;height:.6rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg);transform-origin:center;margin-bottom:.15rem}:host(.mk-cascader--open) .mk-cascader__icon{transform:rotate(-135deg);margin-bottom:-.15rem}.mk-cascader__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-cascader__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-cascader__clear-icon:before,.mk-cascader__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-cascader__clear-icon:before{transform:rotate(45deg)}.mk-cascader__clear-icon:after{transform:rotate(-45deg)}.mk-cascader__panel{display:flex;align-items:stretch;background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg);outline:none}.mk-cascader__column{min-width:10rem;max-height:16rem;margin:0;padding:var(--mk-space-1);list-style:none;overflow-y:auto;overscroll-behavior:contain}.mk-cascader__column+.mk-cascader__column{border-inline-start:var(--mk-border-width) solid var(--mk-border)}.mk-cascader__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-cascader__option:hover:not(.mk-cascader__option--disabled){background-color:var(--mk-hover-bg, var(--mk-surface-2))}.mk-cascader__option--path{background-color:var(--mk-selected-bg)}.mk-cascader__option--cursor{box-shadow:inset 0 0 0 2px var(--mk-primary)}.mk-cascader__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-cascader__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-cascader__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-cascader__chevron{flex:none;width:.45rem;height:.45rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(-45deg)}[dir=rtl] .mk-cascader__chevron{transform:rotate(135deg)}.mk-cascader__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}@media(max-width:640px){.mk-cascader__panel{flex-direction:column-reverse;max-height:60vh;overflow-y:auto}.mk-cascader__column{max-height:none}.mk-cascader__column+.mk-cascader__column{border-inline-start:0;border-bottom:var(--mk-border-width) solid var(--mk-border)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMode", required: false }] }], selectParents: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectParents", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
 /**
  * Autocomplete — an accessible text input that suggests options as the user
  * types, implementing the ARIA combobox (`aria-autocomplete="list"`) pattern
@@ -9204,5 +10014,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MK_CARD_BRAND_NAMES, MK_IBAN_LENGTHS, MK_KEYBOARD_LAYOUT_QWERTY_PL, MK_PHONE_COUNTRIES, MK_POSTAL_FORMATS, MK_TAX_ID_FORMATS, MkAutocomplete, MkButtonToggle, MkButtonToggleGroup, MkCardNumberInput, MkCodeEditor, MkColorPicker, MkCurrencyInput, MkFileUpload, MkFormErrorSummary, MkFormField, MkI18nInput, MkIbanInput, MkInput, MkInputGroup, MkMention, MkMentionPanel, MkMultiSelect, MkNumberInput, MkNumericKeypad, MkOnScreenKeyboard, MkOnScreenKeyboardTrigger, MkOtp, MkPasswordInput, MkPhoneInput, MkPostalCodeInput, MkRadio, MkRadioGroup, MkRangeSlider, MkRating, MkRepeater, MkRepeaterEmpty, MkRepeaterRow, MkSelect, MkSignaturePad, MkSlider, MkSubmitInput, MkSwitch, MkTagInput, MkTaxIdInput, MkTransferList, MkTreeSelect, mkCountryFlag, mkDetectCardBrand, mkIbanChecksum, mkIbanIsValid, mkIbanValidator, mkLuhnCheck, mkNipChecksum, mkPostalCodeValidator, mkPostalFormat, mkTaxIdFormat, mkTaxIdIsValid, mkTaxIdValidator };
+export { MK_CARD_BRAND_NAMES, MK_IBAN_LENGTHS, MK_KEYBOARD_LAYOUT_QWERTY_PL, MK_PHONE_COUNTRIES, MK_POSTAL_FORMATS, MK_TAX_ID_FORMATS, MkAutocomplete, MkButtonToggle, MkButtonToggleGroup, MkCardNumberInput, MkCascader, MkCodeEditor, MkColorPicker, MkCurrencyInput, MkFileUpload, MkFormErrorSummary, MkFormField, MkI18nInput, MkIbanInput, MkInput, MkInputGroup, MkListbox, MkMention, MkMentionPanel, MkMultiSelect, MkNumberInput, MkNumericKeypad, MkOnScreenKeyboard, MkOnScreenKeyboardTrigger, MkOtp, MkPasswordInput, MkPhoneInput, MkPostalCodeInput, MkRadio, MkRadioGroup, MkRangeSlider, MkRating, MkRepeater, MkRepeaterEmpty, MkRepeaterRow, MkSelect, MkSignaturePad, MkSlider, MkSubmitInput, MkSwitch, MkTagInput, MkTaxIdInput, MkTransferList, MkTreeSelect, mkCountryFlag, mkDetectCardBrand, mkIbanChecksum, mkIbanIsValid, mkIbanValidator, mkLuhnCheck, mkNipChecksum, mkPostalCodeValidator, mkPostalFormat, mkTaxIdFormat, mkTaxIdIsValid, mkTaxIdValidator };
 //# sourceMappingURL=mk-kit-ui-forms.mjs.map