@mk-kit/ui 0.40.0 → 0.42.0

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

@@ -1264,6 +1264,8 @@ class MkSelect {
     triggerRef = viewChild('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     /** The list of options to choose from. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     /** Placeholder shown when nothing is selected. */
@@ -1455,13 +1457,13 @@ class MkSelect {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSelect, isStandalone: true, selector: "mk-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-select--sm": "effectiveSize() === 'sm'", "class.mk-select--md": "effectiveSize() === 'md'", "class.mk-select--lg": "effectiveSize() === 'lg'", "class.mk-select--open": "open()", "class.mk-select--invalid": "isInvalid()", "class.mk-select--disabled": "isDisabled()" }, classAttribute: "mk-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSelect, isStandalone: true, selector: "mk-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-select--sm": "effectiveSize() === 'sm'", "class.mk-select--md": "effectiveSize() === 'md'", "class.mk-select--lg": "effectiveSize() === 'lg'", "class.mk-select--open": "open()", "class.mk-select--invalid": "isInvalid()", "class.mk-select--disabled": "isDisabled()" }, classAttribute: "mk-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-select__trigger\"\n  [id]=\"triggerId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listId\"\n  [attr.aria-activedescendant]=\"\n    open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n  \"\n  [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  @if (displayLabel()) {\n    <span class=\"mk-select__value\">{{ displayLabel() }}</span>\n  } @else {\n    <span class=\"mk-select__value mk-select__value--placeholder\">{{\n      placeholder()\n    }}</span>\n  }\n  <span class=\"mk-select__arrow\" aria-hidden=\"true\"></span>\n</button>\n\n@if (open()) {\n  <ul\n    class=\"mk-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @for (opt of options(); track $index; let i = $index) {\n      <li\n        class=\"mk-select__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        [class.mk-select__option--active]=\"i === activeIndex()\"\n        [class.mk-select__option--selected]=\"i === selectedIndex()\"\n        [class.mk-select__option--disabled]=\"opt.disabled\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        <span class=\"mk-select__option-label\">{{ opt.label }}</span>\n        @if (i === selectedIndex()) {\n          <span class=\"mk-select__check\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    } @empty {\n      <li class=\"mk-select__empty\" role=\"presentation\">{{ i18n.noOptions }}</li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-select__trigger{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--sm) .mk-select__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-select--lg) .mk-select__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-select__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-select__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-select--invalid) .mk-select__trigger{border-color:var(--mk-danger)}:host(.mk-select--invalid) .mk-select__trigger:focus-visible{outline-color:var(--mk-danger)}.mk-select__trigger:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__value--placeholder{color:var(--mk-text-subtle)}.mk-select__arrow{flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--open) .mk-select__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__option--active{background-color:var(--mk-selected-bg)}.mk-select__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-select__check{flex:none;width:.4rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.mk-select__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-select__arrow,.mk-select__trigger{transition:none}}@media(pointer:coarse){.mk-select__trigger{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-select--sm) .mk-select__trigger{font-size:max(var(--mk-font-size-sm),16px)}}\n"], 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: MkSelect, decorators: [{
             type: Component,
@@ -1479,8 +1481,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkSelect),
                             multi: true,
                         },
-                    ], template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-select__trigger\"\n  [id]=\"triggerId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listId\"\n  [attr.aria-activedescendant]=\"\n    open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n  \"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-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"] }] } });
+                    ], template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-select__trigger\"\n  [id]=\"triggerId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"listId\"\n  [attr.aria-activedescendant]=\"\n    open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n  \"\n  [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n>\n  @if (displayLabel()) {\n    <span class=\"mk-select__value\">{{ displayLabel() }}</span>\n  } @else {\n    <span class=\"mk-select__value mk-select__value--placeholder\">{{\n      placeholder()\n    }}</span>\n  }\n  <span class=\"mk-select__arrow\" aria-hidden=\"true\"></span>\n</button>\n\n@if (open()) {\n  <ul\n    class=\"mk-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @for (opt of options(); track $index; let i = $index) {\n      <li\n        class=\"mk-select__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        [class.mk-select__option--active]=\"i === activeIndex()\"\n        [class.mk-select__option--selected]=\"i === selectedIndex()\"\n        [class.mk-select__option--disabled]=\"opt.disabled\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        <span class=\"mk-select__option-label\">{{ opt.label }}</span>\n        @if (i === selectedIndex()) {\n          <span class=\"mk-select__check\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    } @empty {\n      <li class=\"mk-select__empty\" role=\"presentation\">{{ i18n.noOptions }}</li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-select__trigger{display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);text-align:start;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--sm) .mk-select__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-select--lg) .mk-select__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-select__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-select__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-select--invalid) .mk-select__trigger{border-color:var(--mk-danger)}:host(.mk-select--invalid) .mk-select__trigger:focus-visible{outline-color:var(--mk-danger)}.mk-select__trigger:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__value--placeholder{color:var(--mk-text-subtle)}.mk-select__arrow{flex:none;width:.5rem;height:.5rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-select--open) .mk-select__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-select__option--active{background-color:var(--mk-selected-bg)}.mk-select__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-select__check{flex:none;width:.4rem;height:.7rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}.mk-select__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-select__arrow,.mk-select__trigger{transition:none}}@media(pointer:coarse){.mk-select__trigger{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-select--sm) .mk-select__trigger{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Listbox — a standalone, always-visible selection list (the ARIA `listbox`
@@ -2297,6 +2299,8 @@ class MkAutocomplete {
         });
     }
     /** The list of suggestions. Update it from `search` for async sources. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     /** Placeholder shown when the input is empty. */
@@ -2541,13 +2545,13 @@ class MkAutocomplete {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAutocomplete, isStandalone: true, selector: "mk-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionSelected: "optionSelected" }, host: { properties: { "class.mk-autocomplete--sm": "effectiveSize() === 'sm'", "class.mk-autocomplete--md": "effectiveSize() === 'md'", "class.mk-autocomplete--lg": "effectiveSize() === 'lg'", "class.mk-autocomplete--open": "open()", "class.mk-autocomplete--invalid": "isInvalid()", "class.mk-autocomplete--disabled": "isDisabled()" }, classAttribute: "mk-autocomplete" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkAutocomplete, isStandalone: true, selector: "mk-autocomplete", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionSelected: "optionSelected" }, host: { properties: { "class.mk-autocomplete--sm": "effectiveSize() === 'sm'", "class.mk-autocomplete--md": "effectiveSize() === 'md'", "class.mk-autocomplete--lg": "effectiveSize() === 'lg'", "class.mk-autocomplete--open": "open()", "class.mk-autocomplete--invalid": "isInvalid()", "class.mk-autocomplete--disabled": "isDisabled()" }, classAttribute: "mk-autocomplete" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkAutocomplete),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-autocomplete__field\">\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-autocomplete__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    aria-autocomplete=\"list\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (query() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-autocomplete__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      tabindex=\"-1\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"clear()\"\n    ></button>\n  }\n\n  <span class=\"mk-autocomplete__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    class=\"mk-autocomplete__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-autocomplete__status\" role=\"presentation\">\n        <span class=\"mk-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-autocomplete__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === activeIndex()\"\n          [attr.aria-disabled]=\"opt.disabled || null\"\n          [class.mk-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.mk-autocomplete__option--disabled]=\"opt.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"selectOption(i)\"\n        >\n          <span class=\"mk-autocomplete__option-label\">{{ opt.label }}</span>\n          @if (opt.description) {\n            <span class=\"mk-autocomplete__option-desc\">{{\n              opt.description\n            }}</span>\n          }\n        </li>\n      } @empty {\n        <li class=\"mk-autocomplete__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-autocomplete__field{display:flex;align-items:center;position:relative}.mk-autocomplete__input{flex:1 1 auto;min-width:0;width:100%;height:var(--mk-control-height-md);padding-block:0;padding-inline:var(--mk-space-3) var(--mk-space-8);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__input::placeholder{color:var(--mk-text-subtle)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{height:var(--mk-control-height-sm);padding:0;font-size:var(--mk-font-size-sm);padding-inline:var(--mk-space-2) var(--mk-space-7);border-radius:var(--mk-radius-sm)}:host(.mk-autocomplete--lg) .mk-autocomplete__input{height:var(--mk-control-height-lg);padding:0;font-size:var(--mk-font-size-lg);padding-inline:var(--mk-space-4) var(--mk-space-9)}.mk-autocomplete__input:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-autocomplete__input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input{border-color:var(--mk-danger)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input:focus-visible{outline-color:var(--mk-danger)}.mk-autocomplete__input:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-autocomplete__clear{position:absolute;inset-inline-end:var(--mk-space-6);display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-autocomplete__clear:before,.mk-autocomplete__clear:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-autocomplete__clear:before{transform:rotate(45deg)}.mk-autocomplete__clear:after{transform:rotate(-45deg)}.mk-autocomplete__arrow{position:absolute;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-autocomplete--open) .mk-autocomplete__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-autocomplete__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-autocomplete__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-autocomplete__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-autocomplete__option--active{background-color:var(--mk-selected-bg)}.mk-autocomplete__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-autocomplete__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-autocomplete__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-autocomplete-spin var(--mk-duration-slow) linear infinite}@keyframes mk-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-autocomplete__arrow,.mk-autocomplete__input,.mk-autocomplete__clear{transition:none}.mk-autocomplete__spinner{animation:none}}.mk-autocomplete__option-desc{display:block;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);line-height:var(--mk-line-height-snug)}@media(pointer:coarse){.mk-autocomplete__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-autocomplete__field\">\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-autocomplete__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    aria-autocomplete=\"list\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (query() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-autocomplete__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      tabindex=\"-1\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"clear()\"\n    ></button>\n  }\n\n  <span class=\"mk-autocomplete__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    class=\"mk-autocomplete__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-autocomplete__status\" role=\"presentation\">\n        <span class=\"mk-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-autocomplete__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === activeIndex()\"\n          [attr.aria-disabled]=\"opt.disabled || null\"\n          [class.mk-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.mk-autocomplete__option--disabled]=\"opt.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"selectOption(i)\"\n        >\n          <span class=\"mk-autocomplete__option-label\">{{ opt.label }}</span>\n          @if (opt.description) {\n            <span class=\"mk-autocomplete__option-desc\">{{\n              opt.description\n            }}</span>\n          }\n        </li>\n      } @empty {\n        <li class=\"mk-autocomplete__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-autocomplete__field{display:flex;align-items:center;position:relative}.mk-autocomplete__input{flex:1 1 auto;min-width:0;width:100%;height:var(--mk-control-height-md);padding-block:0;padding-inline:var(--mk-space-3) var(--mk-space-8);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__input::placeholder{color:var(--mk-text-subtle)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{height:var(--mk-control-height-sm);padding:0;font-size:var(--mk-font-size-sm);padding-inline:var(--mk-space-2) var(--mk-space-7);border-radius:var(--mk-radius-sm)}:host(.mk-autocomplete--lg) .mk-autocomplete__input{height:var(--mk-control-height-lg);padding:0;font-size:var(--mk-font-size-lg);padding-inline:var(--mk-space-4) var(--mk-space-9)}.mk-autocomplete__input:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-autocomplete__input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input{border-color:var(--mk-danger)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input:focus-visible{outline-color:var(--mk-danger)}.mk-autocomplete__input:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-autocomplete__clear{position:absolute;inset-inline-end:var(--mk-space-6);display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-autocomplete__clear:before,.mk-autocomplete__clear:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-autocomplete__clear:before{transform:rotate(45deg)}.mk-autocomplete__clear:after{transform:rotate(-45deg)}.mk-autocomplete__arrow{position:absolute;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-autocomplete--open) .mk-autocomplete__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-autocomplete__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-autocomplete__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-autocomplete__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-autocomplete__option--active{background-color:var(--mk-selected-bg)}.mk-autocomplete__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-autocomplete__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-autocomplete__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-autocomplete-spin var(--mk-duration-slow) linear infinite}@keyframes mk-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-autocomplete__arrow,.mk-autocomplete__input,.mk-autocomplete__clear{transition:none}.mk-autocomplete__spinner{animation:none}}.mk-autocomplete__option-desc{display:block;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);line-height:var(--mk-line-height-snug)}@media(pointer:coarse){.mk-autocomplete__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], 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: MkAutocomplete, decorators: [{
             type: Component,
@@ -2565,8 +2569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkAutocomplete),
                             multi: true,
                         },
-                    ], template: "<div #field class=\"mk-autocomplete__field\">\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-autocomplete__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    aria-autocomplete=\"list\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (query() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-autocomplete__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      tabindex=\"-1\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"clear()\"\n    ></button>\n  }\n\n  <span class=\"mk-autocomplete__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    class=\"mk-autocomplete__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-autocomplete__status\" role=\"presentation\">\n        <span class=\"mk-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-autocomplete__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === activeIndex()\"\n          [attr.aria-disabled]=\"opt.disabled || null\"\n          [class.mk-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.mk-autocomplete__option--disabled]=\"opt.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"selectOption(i)\"\n        >\n          <span class=\"mk-autocomplete__option-label\">{{ opt.label }}</span>\n          @if (opt.description) {\n            <span class=\"mk-autocomplete__option-desc\">{{\n              opt.description\n            }}</span>\n          }\n        </li>\n      } @empty {\n        <li class=\"mk-autocomplete__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-autocomplete__field{display:flex;align-items:center;position:relative}.mk-autocomplete__input{flex:1 1 auto;min-width:0;width:100%;height:var(--mk-control-height-md);padding-block:0;padding-inline:var(--mk-space-3) var(--mk-space-8);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__input::placeholder{color:var(--mk-text-subtle)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{height:var(--mk-control-height-sm);padding:0;font-size:var(--mk-font-size-sm);padding-inline:var(--mk-space-2) var(--mk-space-7);border-radius:var(--mk-radius-sm)}:host(.mk-autocomplete--lg) .mk-autocomplete__input{height:var(--mk-control-height-lg);padding:0;font-size:var(--mk-font-size-lg);padding-inline:var(--mk-space-4) var(--mk-space-9)}.mk-autocomplete__input:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-autocomplete__input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input{border-color:var(--mk-danger)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input:focus-visible{outline-color:var(--mk-danger)}.mk-autocomplete__input:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-autocomplete__clear{position:absolute;inset-inline-end:var(--mk-space-6);display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-autocomplete__clear:before,.mk-autocomplete__clear:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-autocomplete__clear:before{transform:rotate(45deg)}.mk-autocomplete__clear:after{transform:rotate(-45deg)}.mk-autocomplete__arrow{position:absolute;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-autocomplete--open) .mk-autocomplete__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-autocomplete__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-autocomplete__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-autocomplete__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-autocomplete__option--active{background-color:var(--mk-selected-bg)}.mk-autocomplete__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-autocomplete__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-autocomplete__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-autocomplete-spin var(--mk-duration-slow) linear infinite}@keyframes mk-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-autocomplete__arrow,.mk-autocomplete__input,.mk-autocomplete__clear{transition:none}.mk-autocomplete__spinner{animation:none}}.mk-autocomplete__option-desc{display:block;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);line-height:var(--mk-line-height-snug)}@media(pointer:coarse){.mk-autocomplete__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
+                    ], template: "<div #field class=\"mk-autocomplete__field\">\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-autocomplete__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    aria-autocomplete=\"list\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (query() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-autocomplete__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      tabindex=\"-1\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"clear()\"\n    ></button>\n  }\n\n  <span class=\"mk-autocomplete__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    class=\"mk-autocomplete__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-autocomplete__status\" role=\"presentation\">\n        <span class=\"mk-autocomplete__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-autocomplete__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === activeIndex()\"\n          [attr.aria-disabled]=\"opt.disabled || null\"\n          [class.mk-autocomplete__option--active]=\"i === activeIndex()\"\n          [class.mk-autocomplete__option--disabled]=\"opt.disabled\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"selectOption(i)\"\n        >\n          <span class=\"mk-autocomplete__option-label\">{{ opt.label }}</span>\n          @if (opt.description) {\n            <span class=\"mk-autocomplete__option-desc\">{{\n              opt.description\n            }}</span>\n          }\n        </li>\n      } @empty {\n        <li class=\"mk-autocomplete__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-autocomplete__field{display:flex;align-items:center;position:relative}.mk-autocomplete__input{flex:1 1 auto;min-width:0;width:100%;height:var(--mk-control-height-md);padding-block:0;padding-inline:var(--mk-space-3) var(--mk-space-8);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__input::placeholder{color:var(--mk-text-subtle)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{height:var(--mk-control-height-sm);padding:0;font-size:var(--mk-font-size-sm);padding-inline:var(--mk-space-2) var(--mk-space-7);border-radius:var(--mk-radius-sm)}:host(.mk-autocomplete--lg) .mk-autocomplete__input{height:var(--mk-control-height-lg);padding:0;font-size:var(--mk-font-size-lg);padding-inline:var(--mk-space-4) var(--mk-space-9)}.mk-autocomplete__input:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-autocomplete__input:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input{border-color:var(--mk-danger)}:host(.mk-autocomplete--invalid) .mk-autocomplete__input:focus-visible{outline-color:var(--mk-danger)}.mk-autocomplete__input:disabled{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-autocomplete__clear{position:absolute;inset-inline-end:var(--mk-space-6);display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-autocomplete__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-autocomplete__clear:before,.mk-autocomplete__clear:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor;border-radius:var(--mk-radius-pill)}.mk-autocomplete__clear:before{transform:rotate(45deg)}.mk-autocomplete__clear:after{transform:rotate(-45deg)}.mk-autocomplete__arrow{position:absolute;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-autocomplete--open) .mk-autocomplete__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-autocomplete__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-autocomplete__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-autocomplete__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-autocomplete__option--active{background-color:var(--mk-selected-bg)}.mk-autocomplete__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-autocomplete__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-autocomplete__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-autocomplete-spin var(--mk-duration-slow) linear infinite}@keyframes mk-autocomplete-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-autocomplete__arrow,.mk-autocomplete__input,.mk-autocomplete__clear{transition:none}.mk-autocomplete__spinner{animation:none}}.mk-autocomplete__option-desc{display:block;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted);line-height:var(--mk-line-height-snug)}@media(pointer:coarse){.mk-autocomplete__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-autocomplete--sm) .mk-autocomplete__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
 
 /**
  * Suggestion listbox for {@link MkMention}. Created dynamically by the
@@ -3075,6 +3079,8 @@ class MkMultiSelect {
     inputRef = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
     /** The list of options to choose from. Update from `search` for async. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     /** Placeholder shown when no value is selected. */
@@ -3433,7 +3439,7 @@ class MkMultiSelect {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMultiSelect, isStandalone: true, selector: "mk-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionAdded: "optionAdded", optionRemoved: "optionRemoved" }, host: { properties: { "class.mk-multi-select--sm": "effectiveSize() === 'sm'", "class.mk-multi-select--md": "effectiveSize() === 'md'", "class.mk-multi-select--lg": "effectiveSize() === 'lg'", "class.mk-multi-select--open": "open()", "class.mk-multi-select--invalid": "isInvalid()", "class.mk-multi-select--disabled": "isDisabled()" }, classAttribute: "mk-multi-select" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMultiSelect, isStandalone: true, selector: "mk-multi-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", search: "search", optionAdded: "optionAdded", optionRemoved: "optionRemoved" }, host: { properties: { "class.mk-multi-select--sm": "effectiveSize() === 'sm'", "class.mk-multi-select--md": "effectiveSize() === 'md'", "class.mk-multi-select--lg": "effectiveSize() === 'lg'", "class.mk-multi-select--open": "open()", "class.mk-multi-select--invalid": "isInvalid()", "class.mk-multi-select--disabled": "isDisabled()" }, classAttribute: "mk-multi-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkMultiSelect),
@@ -3444,7 +3450,7 @@ class MkMultiSelect {
                 useExisting: forwardRef(() => MkMultiSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #control\n  class=\"mk-multi-select__control\"\n  (pointerdown)=\"onControlPointerdown($event)\"\n>\n  @for (chip of chips(); track chip.value) {\n    <mk-chip\n      class=\"mk-multi-select__chip\"\n      size=\"sm\"\n      [removable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [removeLabel]=\"i18n.removeItem(chip.label)\"\n      (removed)=\"removeChip(chip.value)\"\n    >\n      {{ chip.label }}\n    </mk-chip>\n  }\n\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-multi-select__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"chips().length ? '' : placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n\n  <span class=\"mk-multi-select__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-multi-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"control\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-multi-select__status\" role=\"presentation\">\n        <span class=\"mk-multi-select__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-multi-select__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt.value)\"\n          [attr.aria-disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value)) || null\n          \"\n          [attr.title]=\"\n            atMax() && !isSelected(opt.value) && !opt.disabled\n              ? atMaxHint()\n              : null\n          \"\n          [class.mk-multi-select__option--active]=\"i === activeIndex()\"\n          [class.mk-multi-select__option--selected]=\"isSelected(opt.value)\"\n          [class.mk-multi-select__option--disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value))\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"toggleOption(i)\"\n        >\n          <span class=\"mk-multi-select__check\" aria-hidden=\"true\"></span>\n          <span class=\"mk-multi-select__option-label\">{{ opt.label }}</span>\n        </li>\n      } @empty {\n        <li class=\"mk-multi-select__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-multi-select__control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);min-height:var(--mk-control-height-md);padding-block:var(--mk-space-1);padding-inline:var(--mk-space-2) var(--mk-space-8);position:relative;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:text;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__control:hover{border-color:var(--mk-border-strong)}.mk-multi-select__control:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-multi-select--sm) .mk-multi-select__control{min-height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-multi-select--lg) .mk-multi-select__control{min-height:var(--mk-control-height-lg)}:host(.mk-multi-select--invalid) .mk-multi-select__control{border-color:var(--mk-danger)}:host(.mk-multi-select--invalid) .mk-multi-select__control:focus-within{outline-color:var(--mk-danger)}:host(.mk-multi-select--disabled) .mk-multi-select__control{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-multi-select__chip{flex:none;max-width:100%}.mk-multi-select__input{flex:1 1 4rem;min-width:4rem;height:var(--mk-line-height-lg, 1.5rem);padding:0 var(--mk-space-1);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-multi-select__input::placeholder{color:var(--mk-text-subtle)}.mk-multi-select__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__arrow{position:absolute;top:50%;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:translateY(-75%) rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-multi-select--open) .mk-multi-select__arrow{transform:translateY(-25%) rotate(-135deg)}.mk-multi-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-multi-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-multi-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-multi-select__check{flex:none;position:relative;width:1rem;height:1rem;border:2px solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__option--selected .mk-multi-select__check{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-multi-select__option--selected .mk-multi-select__check:after{content:\"\";position:absolute;top:1px;left:4px;width:4px;height:8px;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);transform:rotate(45deg)}.mk-multi-select__option--active{background-color:var(--mk-selected-bg)}.mk-multi-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__option--disabled .mk-multi-select__check{border-color:var(--mk-border-subtle)}.mk-multi-select__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-multi-select__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-multi-select-spin var(--mk-duration-slow) linear infinite}@keyframes mk-multi-select-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-multi-select__arrow,.mk-multi-select__control,.mk-multi-select__check{transition:none}.mk-multi-select__spinner{animation:none}}@media(pointer:coarse){.mk-multi-select__input{font-size:max(var(--mk-font-size-md),16px)}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkChip, selector: "mk-chip", inputs: ["tone", "variant", "size", "selectable", "removable", "disabled", "removeLabel", "selected"], outputs: ["selectedChange", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #control\n  class=\"mk-multi-select__control\"\n  (pointerdown)=\"onControlPointerdown($event)\"\n>\n  @for (chip of chips(); track chip.value) {\n    <mk-chip\n      class=\"mk-multi-select__chip\"\n      size=\"sm\"\n      [removable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [removeLabel]=\"i18n.removeItem(chip.label)\"\n      (removed)=\"removeChip(chip.value)\"\n    >\n      {{ chip.label }}\n    </mk-chip>\n  }\n\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-multi-select__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"chips().length ? '' : placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n\n  <span class=\"mk-multi-select__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-multi-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"control\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-multi-select__status\" role=\"presentation\">\n        <span class=\"mk-multi-select__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-multi-select__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt.value)\"\n          [attr.aria-disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value)) || null\n          \"\n          [attr.title]=\"\n            atMax() && !isSelected(opt.value) && !opt.disabled\n              ? atMaxHint()\n              : null\n          \"\n          [class.mk-multi-select__option--active]=\"i === activeIndex()\"\n          [class.mk-multi-select__option--selected]=\"isSelected(opt.value)\"\n          [class.mk-multi-select__option--disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value))\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"toggleOption(i)\"\n        >\n          <span class=\"mk-multi-select__check\" aria-hidden=\"true\"></span>\n          <span class=\"mk-multi-select__option-label\">{{ opt.label }}</span>\n        </li>\n      } @empty {\n        <li class=\"mk-multi-select__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-multi-select__control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);min-height:var(--mk-control-height-md);padding-block:var(--mk-space-1);padding-inline:var(--mk-space-2) var(--mk-space-8);position:relative;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:text;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__control:hover{border-color:var(--mk-border-strong)}.mk-multi-select__control:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-multi-select--sm) .mk-multi-select__control{min-height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-multi-select--lg) .mk-multi-select__control{min-height:var(--mk-control-height-lg)}:host(.mk-multi-select--invalid) .mk-multi-select__control{border-color:var(--mk-danger)}:host(.mk-multi-select--invalid) .mk-multi-select__control:focus-within{outline-color:var(--mk-danger)}:host(.mk-multi-select--disabled) .mk-multi-select__control{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-multi-select__chip{flex:none;max-width:100%}.mk-multi-select__input{flex:1 1 4rem;min-width:4rem;height:var(--mk-line-height-lg, 1.5rem);padding:0 var(--mk-space-1);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-multi-select__input::placeholder{color:var(--mk-text-subtle)}.mk-multi-select__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__arrow{position:absolute;top:50%;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:translateY(-75%) rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-multi-select--open) .mk-multi-select__arrow{transform:translateY(-25%) rotate(-135deg)}.mk-multi-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-multi-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-multi-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-multi-select__check{flex:none;position:relative;width:1rem;height:1rem;border:2px solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__option--selected .mk-multi-select__check{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-multi-select__option--selected .mk-multi-select__check:after{content:\"\";position:absolute;top:1px;left:4px;width:4px;height:8px;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);transform:rotate(45deg)}.mk-multi-select__option--active{background-color:var(--mk-selected-bg)}.mk-multi-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__option--disabled .mk-multi-select__check{border-color:var(--mk-border-subtle)}.mk-multi-select__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-multi-select__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-multi-select-spin var(--mk-duration-slow) linear infinite}@keyframes mk-multi-select-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-multi-select__arrow,.mk-multi-select__control,.mk-multi-select__check{transition:none}.mk-multi-select__spinner{animation:none}}@media(pointer:coarse){.mk-multi-select__input{font-size:max(var(--mk-font-size-md),16px)}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkChip, selector: "mk-chip", inputs: ["tone", "variant", "size", "selectable", "removable", "disabled", "removeLabel", "selected"], outputs: ["selectedChange", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMultiSelect, decorators: [{
             type: Component,
@@ -3467,8 +3473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkMultiSelect),
                             multi: true,
                         },
-                    ], template: "<div\n  #control\n  class=\"mk-multi-select__control\"\n  (pointerdown)=\"onControlPointerdown($event)\"\n>\n  @for (chip of chips(); track chip.value) {\n    <mk-chip\n      class=\"mk-multi-select__chip\"\n      size=\"sm\"\n      [removable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [removeLabel]=\"i18n.removeItem(chip.label)\"\n      (removed)=\"removeChip(chip.value)\"\n    >\n      {{ chip.label }}\n    </mk-chip>\n  }\n\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-multi-select__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"chips().length ? '' : placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n\n  <span class=\"mk-multi-select__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-multi-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"control\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-multi-select__status\" role=\"presentation\">\n        <span class=\"mk-multi-select__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-multi-select__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt.value)\"\n          [attr.aria-disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value)) || null\n          \"\n          [attr.title]=\"\n            atMax() && !isSelected(opt.value) && !opt.disabled\n              ? atMaxHint()\n              : null\n          \"\n          [class.mk-multi-select__option--active]=\"i === activeIndex()\"\n          [class.mk-multi-select__option--selected]=\"isSelected(opt.value)\"\n          [class.mk-multi-select__option--disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value))\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"toggleOption(i)\"\n        >\n          <span class=\"mk-multi-select__check\" aria-hidden=\"true\"></span>\n          <span class=\"mk-multi-select__option-label\">{{ opt.label }}</span>\n        </li>\n      } @empty {\n        <li class=\"mk-multi-select__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-multi-select__control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);min-height:var(--mk-control-height-md);padding-block:var(--mk-space-1);padding-inline:var(--mk-space-2) var(--mk-space-8);position:relative;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:text;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__control:hover{border-color:var(--mk-border-strong)}.mk-multi-select__control:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-multi-select--sm) .mk-multi-select__control{min-height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-multi-select--lg) .mk-multi-select__control{min-height:var(--mk-control-height-lg)}:host(.mk-multi-select--invalid) .mk-multi-select__control{border-color:var(--mk-danger)}:host(.mk-multi-select--invalid) .mk-multi-select__control:focus-within{outline-color:var(--mk-danger)}:host(.mk-multi-select--disabled) .mk-multi-select__control{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-multi-select__chip{flex:none;max-width:100%}.mk-multi-select__input{flex:1 1 4rem;min-width:4rem;height:var(--mk-line-height-lg, 1.5rem);padding:0 var(--mk-space-1);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-multi-select__input::placeholder{color:var(--mk-text-subtle)}.mk-multi-select__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__arrow{position:absolute;top:50%;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:translateY(-75%) rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-multi-select--open) .mk-multi-select__arrow{transform:translateY(-25%) rotate(-135deg)}.mk-multi-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-multi-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-multi-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-multi-select__check{flex:none;position:relative;width:1rem;height:1rem;border:2px solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__option--selected .mk-multi-select__check{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-multi-select__option--selected .mk-multi-select__check:after{content:\"\";position:absolute;top:1px;left:4px;width:4px;height:8px;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);transform:rotate(45deg)}.mk-multi-select__option--active{background-color:var(--mk-selected-bg)}.mk-multi-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__option--disabled .mk-multi-select__check{border-color:var(--mk-border-subtle)}.mk-multi-select__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-multi-select__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-multi-select-spin var(--mk-duration-slow) linear infinite}@keyframes mk-multi-select-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-multi-select__arrow,.mk-multi-select__control,.mk-multi-select__check{transition:none}.mk-multi-select__spinner{animation:none}}@media(pointer:coarse){.mk-multi-select__input{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionAdded: [{ type: i0.Output, args: ["optionAdded"] }], optionRemoved: [{ type: i0.Output, args: ["optionRemoved"] }] } });
+                    ], template: "<div\n  #control\n  class=\"mk-multi-select__control\"\n  (pointerdown)=\"onControlPointerdown($event)\"\n>\n  @for (chip of chips(); track chip.value) {\n    <mk-chip\n      class=\"mk-multi-select__chip\"\n      size=\"sm\"\n      [removable]=\"!isDisabled()\"\n      [disabled]=\"isDisabled()\"\n      [removeLabel]=\"i18n.removeItem(chip.label)\"\n      (removed)=\"removeChip(chip.value)\"\n    >\n      {{ chip.label }}\n    </mk-chip>\n  }\n\n  <input\n    #input\n    type=\"text\"\n    class=\"mk-multi-select__input\"\n    [id]=\"inputId\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [placeholder]=\"chips().length ? '' : placeholder()\"\n    [value]=\"query()\"\n    [disabled]=\"isDisabled()\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus()\"\n    (keydown)=\"onKeydown($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n\n  <span class=\"mk-multi-select__arrow\" aria-hidden=\"true\"></span>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-multi-select__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"control\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"onOutsideDismiss()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n  >\n    @if (loading()) {\n      <li class=\"mk-multi-select__status\" role=\"presentation\">\n        <span class=\"mk-multi-select__spinner\" aria-hidden=\"true\"></span>\n        {{ i18n.loading }}\n      </li>\n    } @else {\n      @for (opt of filtered(); track $index; let i = $index) {\n        <li\n          class=\"mk-multi-select__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt.value)\"\n          [attr.aria-disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value)) || null\n          \"\n          [attr.title]=\"\n            atMax() && !isSelected(opt.value) && !opt.disabled\n              ? atMaxHint()\n              : null\n          \"\n          [class.mk-multi-select__option--active]=\"i === activeIndex()\"\n          [class.mk-multi-select__option--selected]=\"isSelected(opt.value)\"\n          [class.mk-multi-select__option--disabled]=\"\n            opt.disabled || (atMax() && !isSelected(opt.value))\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"!opt.disabled && activeIndex.set(i)\"\n          (click)=\"toggleOption(i)\"\n        >\n          <span class=\"mk-multi-select__check\" aria-hidden=\"true\"></span>\n          <span class=\"mk-multi-select__option-label\">{{ opt.label }}</span>\n        </li>\n      } @empty {\n        <li class=\"mk-multi-select__status\" role=\"presentation\">\n          {{ emptyMessage() }}\n        </li>\n      }\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-multi-select__control{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mk-space-1);min-height:var(--mk-control-height-md);padding-block:var(--mk-space-1);padding-inline:var(--mk-space-2) var(--mk-space-8);position:relative;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:text;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__control:hover{border-color:var(--mk-border-strong)}.mk-multi-select__control:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-multi-select--sm) .mk-multi-select__control{min-height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-multi-select--lg) .mk-multi-select__control{min-height:var(--mk-control-height-lg)}:host(.mk-multi-select--invalid) .mk-multi-select__control{border-color:var(--mk-danger)}:host(.mk-multi-select--invalid) .mk-multi-select__control:focus-within{outline-color:var(--mk-danger)}:host(.mk-multi-select--disabled) .mk-multi-select__control{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-multi-select__chip{flex:none;max-width:100%}.mk-multi-select__input{flex:1 1 4rem;min-width:4rem;height:var(--mk-line-height-lg, 1.5rem);padding:0 var(--mk-space-1);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-multi-select__input::placeholder{color:var(--mk-text-subtle)}.mk-multi-select__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__arrow{position:absolute;top:50%;inset-inline-end:var(--mk-space-3);flex:none;width:.5rem;height:.5rem;pointer-events:none;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:translateY(-75%) rotate(45deg);transition:transform var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-multi-select--open) .mk-multi-select__arrow{transform:translateY(-25%) rotate(-135deg)}.mk-multi-select__list{padding:var(--mk-space-1);list-style:none;max-height:16rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-multi-select__option{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-multi-select__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-multi-select__check{flex:none;position:relative;width:1rem;height:1rem;border:2px solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-multi-select__option--selected .mk-multi-select__check{background-color:var(--mk-primary);border-color:var(--mk-primary)}.mk-multi-select__option--selected .mk-multi-select__check:after{content:\"\";position:absolute;top:1px;left:4px;width:4px;height:8px;border-right:2px solid var(--mk-primary-contrast);border-bottom:2px solid var(--mk-primary-contrast);transform:rotate(45deg)}.mk-multi-select__option--active{background-color:var(--mk-selected-bg)}.mk-multi-select__option--disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-multi-select__option--disabled .mk-multi-select__check{border-color:var(--mk-border-subtle)}.mk-multi-select__status{display:flex;align-items:center;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}.mk-multi-select__spinner{flex:none;width:.9rem;height:.9rem;border:2px solid var(--mk-border-strong);border-top-color:var(--mk-primary);border-radius:var(--mk-radius-circle);animation:mk-multi-select-spin var(--mk-duration-slow) linear infinite}@keyframes mk-multi-select-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-multi-select__arrow,.mk-multi-select__control,.mk-multi-select__check{transition:none}.mk-multi-select__spinner{animation:none}}@media(pointer:coarse){.mk-multi-select__input{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], search: [{ type: i0.Output, args: ["search"] }], optionAdded: [{ type: i0.Output, args: ["optionAdded"] }], optionRemoved: [{ type: i0.Output, args: ["optionRemoved"] }] } });
 
 /**
  * TagInput — a freeform token input: type a value and press Enter (or a
@@ -4355,10 +4361,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  *
  * With `reorderable`, each row gets a drag handle wired through the dnd
  * module's touch-safe handle-based configuration (a swipe on the row body
- * still scrolls the page). Reordering also works by keyboard: focus the
- * handle (or the row) and press Space/Enter to pick up, arrows to move,
- * Space/Enter to drop, Escape to cancel. Each completed reorder is announced
- * via {@link MkLiveAnnouncer}.
+ * still scrolls the page). The handle button is the only control the dnd
+ * layer adds — rows stay plain list items, so the inputs and buttons inside
+ * them are never nested in an interactive role. Reordering also works by
+ * keyboard: focus the handle and press Space/Enter to pick up, arrows to
+ * move, Space/Enter to drop, Escape to cancel. Each completed reorder is
+ * announced via {@link MkLiveAnnouncer}.
  *
  * ```html
  * <mk-repeater [(items)]="rows" [min]="1" [max]="10" reorderable
@@ -5113,7 +5121,7 @@ class MkFileUpload {
                 useExisting: forwardRef(() => MkFileUpload),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mk-file-upload__dropzone\"\n  role=\"button\"\n  [attr.tabindex]=\"isDisabled() ? null : 0\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onKeydown($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <span class=\"mk-file-upload__icon\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"none\"\n      stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"M12 15V3M8 7l4-4 4 4\" />\n      <path d=\"M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4\" />\n    </svg>\n  </span>\n  <span class=\"mk-file-upload__prompt\">{{ label() }}</span>\n  @if (hint()) {\n    <span class=\"mk-file-upload__hint\">{{ hint() }}</span>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"mk-file-upload__input\"\n    [id]=\"inputId\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onInputChange($event)\"\n  />\n</div>\n\n<div class=\"mk-file-upload__sr\" role=\"status\" aria-live=\"polite\">\n  {{ announcement() }}\n</div>\n\n@if (!hideList() && files().length) {\n  <ul class=\"mk-file-upload__list\">\n    @for (item of files(); track item.id) {\n      <li\n        class=\"mk-file-upload__item\"\n        [class.mk-file-upload__item--error]=\"item.status === 'error'\"\n        [class.mk-file-upload__item--success]=\"item.status === 'success'\"\n      >\n        <span class=\"mk-file-upload__thumb\" aria-hidden=\"true\">\n          @if (item.previewUrl) {\n            <img [src]=\"item.previewUrl\" [alt]=\"item.name\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n              <path d=\"M14 2v6h6\" />\n            </svg>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__meta\">\n          <span class=\"mk-file-upload__name\">{{ item.name }}</span>\n          <span class=\"mk-file-upload__size\">\n            @if (item.status === 'error') {\n              {{ item.error }}\n            } @else {\n              {{ formatBytes(item.size) }}\n              @if (item.status === 'uploading') {\n                \u00B7 {{ item.progress }}%\n              }\n            }\n          </span>\n          @if (item.status === 'uploading') {\n            <span\n              class=\"mk-file-upload__progress\"\n              role=\"progressbar\"\n              [attr.aria-valuenow]=\"item.progress\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n            >\n              <span class=\"mk-file-upload__bar\" [style.width.%]=\"item.progress\"></span>\n            </span>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__status\">\n          @if (item.status === 'success') {\n            <span class=\"mk-file-upload__check\" aria-hidden=\"true\"></span>\n          } @else if (item.status === 'error') {\n            <button\n              type=\"button\"\n              class=\"mk-file-upload__retry\"\n              [attr.aria-label]=\"i18n.retryUpload\"\n              (click)=\"retry(item)\"\n            >\n              <span aria-hidden=\"true\">\u21BB</span>\n            </button>\n          }\n        </span>\n\n        <button\n          type=\"button\"\n          class=\"mk-file-upload__remove\"\n          [attr.aria-label]=\"i18n.removeItem(item.name)\"\n          (click)=\"remove(item)\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-6) var(--mk-space-4);text-align:center;color:var(--mk-text);background-color:var(--mk-surface-2);border:2px dashed var(--mk-border-strong);border-radius:var(--mk-radius-lg);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__dropzone:hover{border-color:var(--mk-primary)}.mk-file-upload__dropzone: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-file-upload--dragging) .mk-file-upload__dropzone{border-color:var(--mk-primary);background-color:var(--mk-selected-bg)}:host(.mk-file-upload--invalid) .mk-file-upload__dropzone{border-color:var(--mk-danger-text)}:host(.mk-file-upload--disabled) .mk-file-upload__dropzone{cursor:not-allowed;opacity:.6;border-color:var(--mk-border-subtle)}.mk-file-upload__icon{display:grid;place-items:center;color:var(--mk-primary)}.mk-file-upload__prompt{font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium)}.mk-file-upload__hint{font-size:var(--mk-font-size-sm);color:var(--mk-text-subtle)}.mk-file-upload__input,.mk-file-upload__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.mk-file-upload__list{display:flex;flex-direction:column;gap:var(--mk-space-2);margin:var(--mk-space-3) 0 0;padding:0;list-style:none}.mk-file-upload__item{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-file-upload__item--error{border-color:var(--mk-danger-text)}.mk-file-upload__thumb{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;overflow:hidden;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border-radius:var(--mk-radius-sm)}.mk-file-upload__thumb img{width:100%;height:100%;object-fit:cover}.mk-file-upload__meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.mk-file-upload__name{font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-file-upload__size{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle)}.mk-file-upload__item--error .mk-file-upload__size{color:var(--mk-danger-text)}.mk-file-upload__progress{display:block;height:4px;margin-top:var(--mk-space-1);overflow:hidden;background-color:var(--mk-surface-3, var(--mk-border-subtle));border-radius:var(--mk-radius-pill)}.mk-file-upload__bar{display:block;height:100%;background-color:var(--mk-primary);border-radius:inherit;transition:width var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__status{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem}.mk-file-upload__check{position:relative;width:1rem;height:1rem;border-radius:var(--mk-radius-circle);background-color:var(--mk-success)}.mk-file-upload__check:after{content:\"\";position:absolute;top:3px;left:5px;width:3px;height:6px;border-right:2px solid var(--mk-success-contrast, #fff);border-bottom:2px solid var(--mk-success-contrast, #fff);transform:rotate(45deg)}.mk-file-upload__retry,.mk-file-upload__remove{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:var(--mk-font-size-md);line-height:1;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__retry:hover,.mk-file-upload__remove:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-file-upload__retry:focus-visible,.mk-file-upload__remove:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-file-upload__dropzone,.mk-file-upload__bar,.mk-file-upload__retry,.mk-file-upload__remove{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"mk-file-upload__dropzone\"\n  role=\"button\"\n  [attr.tabindex]=\"isDisabled() ? null : 0\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onKeydown($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <span class=\"mk-file-upload__icon\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"none\"\n      stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"M12 15V3M8 7l4-4 4 4\" />\n      <path d=\"M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4\" />\n    </svg>\n  </span>\n  <span class=\"mk-file-upload__prompt\">{{ label() }}</span>\n  @if (hint()) {\n    <span class=\"mk-file-upload__hint\">{{ hint() }}</span>\n  }\n\n</div>\n\n<input\n  #fileInput\n  type=\"file\"\n  class=\"mk-file-upload__input\"\n  [id]=\"inputId\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"isDisabled()\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n  (change)=\"onInputChange($event)\"\n/>\n\n<div class=\"mk-file-upload__sr\" role=\"status\" aria-live=\"polite\">\n  {{ announcement() }}\n</div>\n\n@if (!hideList() && files().length) {\n  <ul class=\"mk-file-upload__list\">\n    @for (item of files(); track item.id) {\n      <li\n        class=\"mk-file-upload__item\"\n        [class.mk-file-upload__item--error]=\"item.status === 'error'\"\n        [class.mk-file-upload__item--success]=\"item.status === 'success'\"\n      >\n        <span class=\"mk-file-upload__thumb\" aria-hidden=\"true\">\n          @if (item.previewUrl) {\n            <img [src]=\"item.previewUrl\" [alt]=\"item.name\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n              <path d=\"M14 2v6h6\" />\n            </svg>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__meta\">\n          <span class=\"mk-file-upload__name\">{{ item.name }}</span>\n          <span class=\"mk-file-upload__size\">\n            @if (item.status === 'error') {\n              {{ item.error }}\n            } @else {\n              {{ formatBytes(item.size) }}\n              @if (item.status === 'uploading') {\n                \u00B7 {{ item.progress }}%\n              }\n            }\n          </span>\n          @if (item.status === 'uploading') {\n            <span\n              class=\"mk-file-upload__progress\"\n              role=\"progressbar\"\n              [attr.aria-valuenow]=\"item.progress\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n            >\n              <span class=\"mk-file-upload__bar\" [style.width.%]=\"item.progress\"></span>\n            </span>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__status\">\n          @if (item.status === 'success') {\n            <span class=\"mk-file-upload__check\" aria-hidden=\"true\"></span>\n          } @else if (item.status === 'error') {\n            <button\n              type=\"button\"\n              class=\"mk-file-upload__retry\"\n              [attr.aria-label]=\"i18n.retryUpload\"\n              (click)=\"retry(item)\"\n            >\n              <span aria-hidden=\"true\">\u21BB</span>\n            </button>\n          }\n        </span>\n\n        <button\n          type=\"button\"\n          class=\"mk-file-upload__remove\"\n          [attr.aria-label]=\"i18n.removeItem(item.name)\"\n          (click)=\"remove(item)\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-6) var(--mk-space-4);text-align:center;color:var(--mk-text);background-color:var(--mk-surface-2);border:2px dashed var(--mk-border-strong);border-radius:var(--mk-radius-lg);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__dropzone:hover{border-color:var(--mk-primary)}.mk-file-upload__dropzone: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-file-upload--dragging) .mk-file-upload__dropzone{border-color:var(--mk-primary);background-color:var(--mk-selected-bg)}:host(.mk-file-upload--invalid) .mk-file-upload__dropzone{border-color:var(--mk-danger-text)}:host(.mk-file-upload--disabled) .mk-file-upload__dropzone{cursor:not-allowed;opacity:.6;border-color:var(--mk-border-subtle)}.mk-file-upload__icon{display:grid;place-items:center;color:var(--mk-primary)}.mk-file-upload__prompt{font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium)}.mk-file-upload__hint{font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-file-upload__input,.mk-file-upload__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.mk-file-upload__list{display:flex;flex-direction:column;gap:var(--mk-space-2);margin:var(--mk-space-3) 0 0;padding:0;list-style:none}.mk-file-upload__item{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-file-upload__item--error{border-color:var(--mk-danger-text)}.mk-file-upload__thumb{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;overflow:hidden;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border-radius:var(--mk-radius-sm)}.mk-file-upload__thumb img{width:100%;height:100%;object-fit:cover}.mk-file-upload__meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.mk-file-upload__name{font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-file-upload__size{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle)}.mk-file-upload__item--error .mk-file-upload__size{color:var(--mk-danger-text)}.mk-file-upload__progress{display:block;height:4px;margin-top:var(--mk-space-1);overflow:hidden;background-color:var(--mk-surface-3, var(--mk-border-subtle));border-radius:var(--mk-radius-pill)}.mk-file-upload__bar{display:block;height:100%;background-color:var(--mk-primary);border-radius:inherit;transition:width var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__status{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem}.mk-file-upload__check{position:relative;width:1rem;height:1rem;border-radius:var(--mk-radius-circle);background-color:var(--mk-success)}.mk-file-upload__check:after{content:\"\";position:absolute;top:3px;left:5px;width:3px;height:6px;border-right:2px solid var(--mk-success-contrast, #fff);border-bottom:2px solid var(--mk-success-contrast, #fff);transform:rotate(45deg)}.mk-file-upload__retry,.mk-file-upload__remove{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:var(--mk-font-size-md);line-height:1;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__retry:hover,.mk-file-upload__remove:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-file-upload__retry:focus-visible,.mk-file-upload__remove:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-file-upload__dropzone,.mk-file-upload__bar,.mk-file-upload__retry,.mk-file-upload__remove{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkFileUpload, decorators: [{
             type: Component,
@@ -5134,7 +5142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkFileUpload),
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"mk-file-upload__dropzone\"\n  role=\"button\"\n  [attr.tabindex]=\"isDisabled() ? null : 0\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onKeydown($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <span class=\"mk-file-upload__icon\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"none\"\n      stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"M12 15V3M8 7l4-4 4 4\" />\n      <path d=\"M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4\" />\n    </svg>\n  </span>\n  <span class=\"mk-file-upload__prompt\">{{ label() }}</span>\n  @if (hint()) {\n    <span class=\"mk-file-upload__hint\">{{ hint() }}</span>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"mk-file-upload__input\"\n    [id]=\"inputId\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (change)=\"onInputChange($event)\"\n  />\n</div>\n\n<div class=\"mk-file-upload__sr\" role=\"status\" aria-live=\"polite\">\n  {{ announcement() }}\n</div>\n\n@if (!hideList() && files().length) {\n  <ul class=\"mk-file-upload__list\">\n    @for (item of files(); track item.id) {\n      <li\n        class=\"mk-file-upload__item\"\n        [class.mk-file-upload__item--error]=\"item.status === 'error'\"\n        [class.mk-file-upload__item--success]=\"item.status === 'success'\"\n      >\n        <span class=\"mk-file-upload__thumb\" aria-hidden=\"true\">\n          @if (item.previewUrl) {\n            <img [src]=\"item.previewUrl\" [alt]=\"item.name\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n              <path d=\"M14 2v6h6\" />\n            </svg>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__meta\">\n          <span class=\"mk-file-upload__name\">{{ item.name }}</span>\n          <span class=\"mk-file-upload__size\">\n            @if (item.status === 'error') {\n              {{ item.error }}\n            } @else {\n              {{ formatBytes(item.size) }}\n              @if (item.status === 'uploading') {\n                \u00B7 {{ item.progress }}%\n              }\n            }\n          </span>\n          @if (item.status === 'uploading') {\n            <span\n              class=\"mk-file-upload__progress\"\n              role=\"progressbar\"\n              [attr.aria-valuenow]=\"item.progress\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n            >\n              <span class=\"mk-file-upload__bar\" [style.width.%]=\"item.progress\"></span>\n            </span>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__status\">\n          @if (item.status === 'success') {\n            <span class=\"mk-file-upload__check\" aria-hidden=\"true\"></span>\n          } @else if (item.status === 'error') {\n            <button\n              type=\"button\"\n              class=\"mk-file-upload__retry\"\n              [attr.aria-label]=\"i18n.retryUpload\"\n              (click)=\"retry(item)\"\n            >\n              <span aria-hidden=\"true\">\u21BB</span>\n            </button>\n          }\n        </span>\n\n        <button\n          type=\"button\"\n          class=\"mk-file-upload__remove\"\n          [attr.aria-label]=\"i18n.removeItem(item.name)\"\n          (click)=\"remove(item)\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-6) var(--mk-space-4);text-align:center;color:var(--mk-text);background-color:var(--mk-surface-2);border:2px dashed var(--mk-border-strong);border-radius:var(--mk-radius-lg);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__dropzone:hover{border-color:var(--mk-primary)}.mk-file-upload__dropzone: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-file-upload--dragging) .mk-file-upload__dropzone{border-color:var(--mk-primary);background-color:var(--mk-selected-bg)}:host(.mk-file-upload--invalid) .mk-file-upload__dropzone{border-color:var(--mk-danger-text)}:host(.mk-file-upload--disabled) .mk-file-upload__dropzone{cursor:not-allowed;opacity:.6;border-color:var(--mk-border-subtle)}.mk-file-upload__icon{display:grid;place-items:center;color:var(--mk-primary)}.mk-file-upload__prompt{font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium)}.mk-file-upload__hint{font-size:var(--mk-font-size-sm);color:var(--mk-text-subtle)}.mk-file-upload__input,.mk-file-upload__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.mk-file-upload__list{display:flex;flex-direction:column;gap:var(--mk-space-2);margin:var(--mk-space-3) 0 0;padding:0;list-style:none}.mk-file-upload__item{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-file-upload__item--error{border-color:var(--mk-danger-text)}.mk-file-upload__thumb{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;overflow:hidden;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border-radius:var(--mk-radius-sm)}.mk-file-upload__thumb img{width:100%;height:100%;object-fit:cover}.mk-file-upload__meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.mk-file-upload__name{font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-file-upload__size{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle)}.mk-file-upload__item--error .mk-file-upload__size{color:var(--mk-danger-text)}.mk-file-upload__progress{display:block;height:4px;margin-top:var(--mk-space-1);overflow:hidden;background-color:var(--mk-surface-3, var(--mk-border-subtle));border-radius:var(--mk-radius-pill)}.mk-file-upload__bar{display:block;height:100%;background-color:var(--mk-primary);border-radius:inherit;transition:width var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__status{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem}.mk-file-upload__check{position:relative;width:1rem;height:1rem;border-radius:var(--mk-radius-circle);background-color:var(--mk-success)}.mk-file-upload__check:after{content:\"\";position:absolute;top:3px;left:5px;width:3px;height:6px;border-right:2px solid var(--mk-success-contrast, #fff);border-bottom:2px solid var(--mk-success-contrast, #fff);transform:rotate(45deg)}.mk-file-upload__retry,.mk-file-upload__remove{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:var(--mk-font-size-md);line-height:1;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__retry:hover,.mk-file-upload__remove:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-file-upload__retry:focus-visible,.mk-file-upload__remove:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-file-upload__dropzone,.mk-file-upload__bar,.mk-file-upload__retry,.mk-file-upload__remove{transition:none}}\n"] }]
+                    ], template: "<div\n  class=\"mk-file-upload__dropzone\"\n  role=\"button\"\n  [attr.tabindex]=\"isDisabled() ? null : 0\"\n  [attr.aria-label]=\"label()\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"openPicker()\"\n  (keydown)=\"onKeydown($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <span class=\"mk-file-upload__icon\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"none\"\n      stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"M12 15V3M8 7l4-4 4 4\" />\n      <path d=\"M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4\" />\n    </svg>\n  </span>\n  <span class=\"mk-file-upload__prompt\">{{ label() }}</span>\n  @if (hint()) {\n    <span class=\"mk-file-upload__hint\">{{ hint() }}</span>\n  }\n\n</div>\n\n<input\n  #fileInput\n  type=\"file\"\n  class=\"mk-file-upload__input\"\n  [id]=\"inputId\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"isDisabled()\"\n  tabindex=\"-1\"\n  aria-hidden=\"true\"\n  (change)=\"onInputChange($event)\"\n/>\n\n<div class=\"mk-file-upload__sr\" role=\"status\" aria-live=\"polite\">\n  {{ announcement() }}\n</div>\n\n@if (!hideList() && files().length) {\n  <ul class=\"mk-file-upload__list\">\n    @for (item of files(); track item.id) {\n      <li\n        class=\"mk-file-upload__item\"\n        [class.mk-file-upload__item--error]=\"item.status === 'error'\"\n        [class.mk-file-upload__item--success]=\"item.status === 'success'\"\n      >\n        <span class=\"mk-file-upload__thumb\" aria-hidden=\"true\">\n          @if (item.previewUrl) {\n            <img [src]=\"item.previewUrl\" [alt]=\"item.name\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\"\n              stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\">\n              <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n              <path d=\"M14 2v6h6\" />\n            </svg>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__meta\">\n          <span class=\"mk-file-upload__name\">{{ item.name }}</span>\n          <span class=\"mk-file-upload__size\">\n            @if (item.status === 'error') {\n              {{ item.error }}\n            } @else {\n              {{ formatBytes(item.size) }}\n              @if (item.status === 'uploading') {\n                \u00B7 {{ item.progress }}%\n              }\n            }\n          </span>\n          @if (item.status === 'uploading') {\n            <span\n              class=\"mk-file-upload__progress\"\n              role=\"progressbar\"\n              [attr.aria-valuenow]=\"item.progress\"\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n            >\n              <span class=\"mk-file-upload__bar\" [style.width.%]=\"item.progress\"></span>\n            </span>\n          }\n        </span>\n\n        <span class=\"mk-file-upload__status\">\n          @if (item.status === 'success') {\n            <span class=\"mk-file-upload__check\" aria-hidden=\"true\"></span>\n          } @else if (item.status === 'error') {\n            <button\n              type=\"button\"\n              class=\"mk-file-upload__retry\"\n              [attr.aria-label]=\"i18n.retryUpload\"\n              (click)=\"retry(item)\"\n            >\n              <span aria-hidden=\"true\">\u21BB</span>\n            </button>\n          }\n        </span>\n\n        <button\n          type=\"button\"\n          class=\"mk-file-upload__remove\"\n          [attr.aria-label]=\"i18n.removeItem(item.name)\"\n          (click)=\"remove(item)\"\n        >\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </li>\n    }\n  </ul>\n}\n", styles: [":host{display:block;width:100%;font-family:var(--mk-font-sans)}.mk-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mk-space-2);padding:var(--mk-space-6) var(--mk-space-4);text-align:center;color:var(--mk-text);background-color:var(--mk-surface-2);border:2px dashed var(--mk-border-strong);border-radius:var(--mk-radius-lg);cursor:pointer;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__dropzone:hover{border-color:var(--mk-primary)}.mk-file-upload__dropzone: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-file-upload--dragging) .mk-file-upload__dropzone{border-color:var(--mk-primary);background-color:var(--mk-selected-bg)}:host(.mk-file-upload--invalid) .mk-file-upload__dropzone{border-color:var(--mk-danger-text)}:host(.mk-file-upload--disabled) .mk-file-upload__dropzone{cursor:not-allowed;opacity:.6;border-color:var(--mk-border-subtle)}.mk-file-upload__icon{display:grid;place-items:center;color:var(--mk-primary)}.mk-file-upload__prompt{font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium)}.mk-file-upload__hint{font-size:var(--mk-font-size-sm);color:var(--mk-text-muted)}.mk-file-upload__input,.mk-file-upload__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.mk-file-upload__list{display:flex;flex-direction:column;gap:var(--mk-space-2);margin:var(--mk-space-3) 0 0;padding:0;list-style:none}.mk-file-upload__item{display:flex;align-items:center;gap:var(--mk-space-3);padding:var(--mk-space-2) var(--mk-space-3);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-file-upload__item--error{border-color:var(--mk-danger-text)}.mk-file-upload__thumb{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;overflow:hidden;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border-radius:var(--mk-radius-sm)}.mk-file-upload__thumb img{width:100%;height:100%;object-fit:cover}.mk-file-upload__meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}.mk-file-upload__name{font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);color:var(--mk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-file-upload__size{font-size:var(--mk-font-size-xs);color:var(--mk-text-subtle)}.mk-file-upload__item--error .mk-file-upload__size{color:var(--mk-danger-text)}.mk-file-upload__progress{display:block;height:4px;margin-top:var(--mk-space-1);overflow:hidden;background-color:var(--mk-surface-3, var(--mk-border-subtle));border-radius:var(--mk-radius-pill)}.mk-file-upload__bar{display:block;height:100%;background-color:var(--mk-primary);border-radius:inherit;transition:width var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__status{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem}.mk-file-upload__check{position:relative;width:1rem;height:1rem;border-radius:var(--mk-radius-circle);background-color:var(--mk-success)}.mk-file-upload__check:after{content:\"\";position:absolute;top:3px;left:5px;width:3px;height:6px;border-right:2px solid var(--mk-success-contrast, #fff);border-bottom:2px solid var(--mk-success-contrast, #fff);transform:rotate(45deg)}.mk-file-upload__retry,.mk-file-upload__remove{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;font-size:var(--mk-font-size-md);line-height:1;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-file-upload__retry:hover,.mk-file-upload__remove:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-file-upload__retry:focus-visible,.mk-file-upload__remove:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}@media(prefers-reduced-motion:reduce){.mk-file-upload__dropzone,.mk-file-upload__bar,.mk-file-upload__retry,.mk-file-upload__remove{transition:none}}\n"] }]
         }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], hideList: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideList", required: false }] }], uploadFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFn", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], uploaded: [{ type: i0.Output, args: ["uploaded"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
@@ -5672,6 +5680,8 @@ class MkNumberInput {
     inputRef = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
     /** Minimum value. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     min = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     /** Maximum value. */
@@ -5823,7 +5833,7 @@ class MkNumberInput {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkNumberInput, isStandalone: true, selector: "mk-number-input", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-number-input--sm": "effectiveSize() === 'sm'", "class.mk-number-input--lg": "effectiveSize() === 'lg'", "class.mk-number-input--invalid": "isInvalid()", "class.mk-number-input--disabled": "isDisabled()" }, classAttribute: "mk-number-input" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkNumberInput, isStandalone: true, selector: "mk-number-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-number-input--sm": "effectiveSize() === 'sm'", "class.mk-number-input--lg": "effectiveSize() === 'lg'", "class.mk-number-input--invalid": "isInvalid()", "class.mk-number-input--disabled": "isDisabled()" }, classAttribute: "mk-number-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkNumberInput),
@@ -5834,7 +5844,7 @@ class MkNumberInput {
                 useExisting: forwardRef(() => MkNumberInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--dec\"\n  [attr.aria-label]=\"i18n.decrease\"\n  tabindex=\"-1\"\n  [disabled]=\"!canDecrement()\"\n  (click)=\"step_(-1)\"\n>\n  <span aria-hidden=\"true\">\u2212</span>\n</button>\n\n<input\n  #input\n  type=\"text\"\n  inputmode=\"decimal\"\n  class=\"mk-number-input__field\"\n  [id]=\"inputId\"\n  role=\"spinbutton\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--inc\"\n  [attr.aria-label]=\"i18n.increase\"\n  tabindex=\"-1\"\n  [disabled]=\"!canIncrement()\"\n  (click)=\"step_(1)\"\n>\n  <span aria-hidden=\"true\">+</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-number-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-number-input--lg){height:var(--mk-control-height-lg)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-number-input--invalid){border-color:var(--mk-danger)}:host(.mk-number-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-number-input__field{width:4.5rem;min-width:0;padding:0 var(--mk-space-2);text-align:center;font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none;appearance:textfield}.mk-number-input__field::placeholder{color:var(--mk-text-subtle)}.mk-number-input__btn{flex:none;display:grid;place-items:center;width:2rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-number-input__btn--dec{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn--inc{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn:not(:disabled):hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-number-input__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.mk-number-input__btn{transition:none}}@media(pointer:coarse){.mk-number-input__field{font-size:max(var(--mk-font-size-md),16px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--dec\"\n  [attr.aria-label]=\"i18n.decrease\"\n  tabindex=\"-1\"\n  [disabled]=\"!canDecrement()\"\n  (click)=\"step_(-1)\"\n>\n  <span aria-hidden=\"true\">\u2212</span>\n</button>\n\n<input\n  #input\n  type=\"text\"\n  inputmode=\"decimal\"\n  class=\"mk-number-input__field\"\n  [id]=\"inputId\"\n  role=\"spinbutton\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--inc\"\n  [attr.aria-label]=\"i18n.increase\"\n  tabindex=\"-1\"\n  [disabled]=\"!canIncrement()\"\n  (click)=\"step_(1)\"\n>\n  <span aria-hidden=\"true\">+</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-number-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-number-input--lg){height:var(--mk-control-height-lg)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-number-input--invalid){border-color:var(--mk-danger)}:host(.mk-number-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-number-input__field{width:4.5rem;min-width:0;padding:0 var(--mk-space-2);text-align:center;font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none;appearance:textfield}.mk-number-input__field::placeholder{color:var(--mk-text-subtle)}.mk-number-input__btn{flex:none;display:grid;place-items:center;width:2rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-number-input__btn--dec{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn--inc{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn:not(:disabled):hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-number-input__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.mk-number-input__btn{transition:none}}@media(pointer:coarse){.mk-number-input__field{font-size:max(var(--mk-font-size-md),16px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkNumberInput, decorators: [{
             type: Component,
@@ -5855,8 +5865,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkNumberInput),
                             multi: true,
                         },
-                    ], template: "<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--dec\"\n  [attr.aria-label]=\"i18n.decrease\"\n  tabindex=\"-1\"\n  [disabled]=\"!canDecrement()\"\n  (click)=\"step_(-1)\"\n>\n  <span aria-hidden=\"true\">\u2212</span>\n</button>\n\n<input\n  #input\n  type=\"text\"\n  inputmode=\"decimal\"\n  class=\"mk-number-input__field\"\n  [id]=\"inputId\"\n  role=\"spinbutton\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--inc\"\n  [attr.aria-label]=\"i18n.increase\"\n  tabindex=\"-1\"\n  [disabled]=\"!canIncrement()\"\n  (click)=\"step_(1)\"\n>\n  <span aria-hidden=\"true\">+</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-number-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-number-input--lg){height:var(--mk-control-height-lg)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-number-input--invalid){border-color:var(--mk-danger)}:host(.mk-number-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-number-input__field{width:4.5rem;min-width:0;padding:0 var(--mk-space-2);text-align:center;font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none;appearance:textfield}.mk-number-input__field::placeholder{color:var(--mk-text-subtle)}.mk-number-input__btn{flex:none;display:grid;place-items:center;width:2rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-number-input__btn--dec{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn--inc{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn:not(:disabled):hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-number-input__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.mk-number-input__btn{transition:none}}@media(pointer:coarse){.mk-number-input__field{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+                    ], template: "<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--dec\"\n  [attr.aria-label]=\"i18n.decrease\"\n  tabindex=\"-1\"\n  [disabled]=\"!canDecrement()\"\n  (click)=\"step_(-1)\"\n>\n  <span aria-hidden=\"true\">\u2212</span>\n</button>\n\n<input\n  #input\n  type=\"text\"\n  inputmode=\"decimal\"\n  class=\"mk-number-input__field\"\n  [id]=\"inputId\"\n  role=\"spinbutton\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-valuenow]=\"value()\"\n  [attr.aria-valuemin]=\"min()\"\n  [attr.aria-valuemax]=\"max()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || null)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n<button\n  type=\"button\"\n  class=\"mk-number-input__btn mk-number-input__btn--inc\"\n  [attr.aria-label]=\"i18n.increase\"\n  tabindex=\"-1\"\n  [disabled]=\"!canIncrement()\"\n  (click)=\"step_(1)\"\n>\n  <span aria-hidden=\"true\">+</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-number-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-number-input--lg){height:var(--mk-control-height-lg)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-number-input--invalid){border-color:var(--mk-danger)}:host(.mk-number-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-number-input__field{width:4.5rem;min-width:0;padding:0 var(--mk-space-2);text-align:center;font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:none;outline:none;appearance:textfield}.mk-number-input__field::placeholder{color:var(--mk-text-subtle)}.mk-number-input__btn{flex:none;display:grid;place-items:center;width:2rem;padding:0;font-size:var(--mk-font-size-lg);line-height:1;color:var(--mk-text-muted);background-color:var(--mk-surface-2);border:none;cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-number-input__btn--dec{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn--inc{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-number-input__btn:not(:disabled):hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-number-input__btn:disabled{color:var(--mk-text-disabled);cursor:not-allowed}@media(prefers-reduced-motion:reduce){:host,.mk-number-input__btn{transition:none}}@media(pointer:coarse){.mk-number-input__field{font-size:max(var(--mk-font-size-md),16px)}}\n"] }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Numeric keypad — a touch-first 3×4 digit pad for PIN entry, quantity entry
@@ -7446,6 +7456,8 @@ class MkCurrencyInput {
     /** Localised strings (override globally via `provideMkI18n`). */
     i18n = inject(MK_I18N);
     /** ISO 4217 currency code (`PLN`, `USD`, …). Empty = plain decimal. */
+    /** Accessible name when the control is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     currency = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
     /** BCP 47 locale for separators/symbol; defaults to the runtime locale. */
@@ -7701,7 +7713,7 @@ class MkCurrencyInput {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCurrencyInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCurrencyInput, isStandalone: true, selector: "mk-currency-input", inputs: { currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-currency-input--sm": "effectiveSize() === 'sm'", "class.mk-currency-input--lg": "effectiveSize() === 'lg'", "class.mk-currency-input--invalid": "isInvalid()", "class.mk-currency-input--disabled": "isDisabled()" }, classAttribute: "mk-currency-input" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkCurrencyInput, isStandalone: true, selector: "mk-currency-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mk-currency-input--sm": "effectiveSize() === 'sm'", "class.mk-currency-input--lg": "effectiveSize() === 'lg'", "class.mk-currency-input--invalid": "isInvalid()", "class.mk-currency-input--disabled": "isDisabled()" }, classAttribute: "mk-currency-input" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkCurrencyInput),
@@ -7712,7 +7724,7 @@ class MkCurrencyInput {
                 useExisting: forwardRef(() => MkCurrencyInput),
                 multi: true,
             },
-        ], exportAs: ["mkCurrencyInput"], ngImport: i0, template: "@if (localeInfo().symbol && localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n\n<input\n  type=\"text\"\n  class=\"mk-currency-input__field\"\n  [id]=\"inputId\"\n  inputmode=\"decimal\"\n  autocomplete=\"transaction-amount\"\n  spellcheck=\"false\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-label]=\"labelledBy() ? null : i18n.amount\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (localeInfo().symbol && !localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-currency-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-currency-input--lg){height:var(--mk-control-height-lg)}:host(:hover:not(.mk-currency-input--disabled)){border-color:var(--mk-border-strong)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-currency-input--invalid){border-color:var(--mk-danger)}:host(.mk-currency-input--invalid:focus-within){outline-color:var(--mk-danger)}:host(.mk-currency-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-currency-input__symbol{flex:none;padding-inline:var(--mk-space-3);align-self:stretch;display:flex;align-items:center;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);background-color:var(--mk-surface-2);-webkit-user-select:none;user-select:none}.mk-currency-input__symbol:first-child{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__symbol:last-child{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__field{flex:1 1 auto;min-width:0;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);font-variant-numeric:tabular-nums;color:var(--mk-text);background:transparent;border:none;outline:none;text-align:end}.mk-currency-input__field::placeholder{color:var(--mk-text-subtle)}.mk-currency-input__field:disabled{color:var(--mk-text-disabled);cursor:not-allowed}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:var(--mk-font-size-sm)}:host(.mk-currency-input--lg) .mk-currency-input__field{font-size:var(--mk-font-size-lg)}@media(prefers-reduced-motion:reduce){:host{transition:none}}@media(pointer:coarse){.mk-currency-input__field{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:max(var(--mk-font-size-sm),16px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], exportAs: ["mkCurrencyInput"], ngImport: i0, template: "@if (localeInfo().symbol && localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n\n<input\n  type=\"text\"\n  class=\"mk-currency-input__field\"\n  [id]=\"inputId\"\n  inputmode=\"decimal\"\n  autocomplete=\"transaction-amount\"\n  spellcheck=\"false\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || i18n.amount)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (localeInfo().symbol && !localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-currency-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-currency-input--lg){height:var(--mk-control-height-lg)}:host(:hover:not(.mk-currency-input--disabled)){border-color:var(--mk-border-strong)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-currency-input--invalid){border-color:var(--mk-danger)}:host(.mk-currency-input--invalid:focus-within){outline-color:var(--mk-danger)}:host(.mk-currency-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-currency-input__symbol{flex:none;padding-inline:var(--mk-space-3);align-self:stretch;display:flex;align-items:center;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);background-color:var(--mk-surface-2);-webkit-user-select:none;user-select:none}.mk-currency-input__symbol:first-child{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__symbol:last-child{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__field{flex:1 1 auto;min-width:0;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);font-variant-numeric:tabular-nums;color:var(--mk-text);background:transparent;border:none;outline:none;text-align:end}.mk-currency-input__field::placeholder{color:var(--mk-text-subtle)}.mk-currency-input__field:disabled{color:var(--mk-text-disabled);cursor:not-allowed}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:var(--mk-font-size-sm)}:host(.mk-currency-input--lg) .mk-currency-input__field{font-size:var(--mk-font-size-lg)}@media(prefers-reduced-motion:reduce){:host{transition:none}}@media(pointer:coarse){.mk-currency-input__field{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:max(var(--mk-font-size-sm),16px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCurrencyInput, decorators: [{
             type: Component,
@@ -7733,8 +7745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkCurrencyInput),
                             multi: true,
                         },
-                    ], template: "@if (localeInfo().symbol && localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n\n<input\n  type=\"text\"\n  class=\"mk-currency-input__field\"\n  [id]=\"inputId\"\n  inputmode=\"decimal\"\n  autocomplete=\"transaction-amount\"\n  spellcheck=\"false\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-label]=\"labelledBy() ? null : i18n.amount\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (localeInfo().symbol && !localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-currency-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-currency-input--lg){height:var(--mk-control-height-lg)}:host(:hover:not(.mk-currency-input--disabled)){border-color:var(--mk-border-strong)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-currency-input--invalid){border-color:var(--mk-danger)}:host(.mk-currency-input--invalid:focus-within){outline-color:var(--mk-danger)}:host(.mk-currency-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-currency-input__symbol{flex:none;padding-inline:var(--mk-space-3);align-self:stretch;display:flex;align-items:center;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);background-color:var(--mk-surface-2);-webkit-user-select:none;user-select:none}.mk-currency-input__symbol:first-child{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__symbol:last-child{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__field{flex:1 1 auto;min-width:0;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);font-variant-numeric:tabular-nums;color:var(--mk-text);background:transparent;border:none;outline:none;text-align:end}.mk-currency-input__field::placeholder{color:var(--mk-text-subtle)}.mk-currency-input__field:disabled{color:var(--mk-text-disabled);cursor:not-allowed}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:var(--mk-font-size-sm)}:host(.mk-currency-input--lg) .mk-currency-input__field{font-size:var(--mk-font-size-lg)}@media(prefers-reduced-motion:reduce){:host{transition:none}}@media(pointer:coarse){.mk-currency-input__field{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegative", 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                    ], template: "@if (localeInfo().symbol && localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n\n<input\n  type=\"text\"\n  class=\"mk-currency-input__field\"\n  [id]=\"inputId\"\n  inputmode=\"decimal\"\n  autocomplete=\"transaction-amount\"\n  spellcheck=\"false\"\n  [value]=\"display()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-label]=\"labelledBy() ? null : (ariaLabel() || i18n.amount)\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (localeInfo().symbol && !localeInfo().symbolPrefix) {\n  <span class=\"mk-currency-input__symbol\" aria-hidden=\"true\">{{\n    localeInfo().symbol\n  }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);font-family:var(--mk-font-sans);overflow:hidden;transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-currency-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-currency-input--lg){height:var(--mk-control-height-lg)}:host(:hover:not(.mk-currency-input--disabled)){border-color:var(--mk-border-strong)}:host(:focus-within){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:-2px;border-color:var(--mk-primary)}:host(.mk-currency-input--invalid){border-color:var(--mk-danger)}:host(.mk-currency-input--invalid:focus-within){outline-color:var(--mk-danger)}:host(.mk-currency-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-currency-input__symbol{flex:none;padding-inline:var(--mk-space-3);align-self:stretch;display:flex;align-items:center;font-size:var(--mk-font-size-sm);color:var(--mk-text-muted);background-color:var(--mk-surface-2);-webkit-user-select:none;user-select:none}.mk-currency-input__symbol:first-child{border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__symbol:last-child{border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle)}.mk-currency-input__field{flex:1 1 auto;min-width:0;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);font-variant-numeric:tabular-nums;color:var(--mk-text);background:transparent;border:none;outline:none;text-align:end}.mk-currency-input__field::placeholder{color:var(--mk-text-subtle)}.mk-currency-input__field:disabled{color:var(--mk-text-disabled);cursor:not-allowed}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:var(--mk-font-size-sm)}:host(.mk-currency-input--lg) .mk-currency-input__field{font-size:var(--mk-font-size-lg)}@media(prefers-reduced-motion:reduce){:host{transition:none}}@media(pointer:coarse){.mk-currency-input__field{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-currency-input--sm) .mk-currency-input__field{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], allowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowNegative", 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Human-readable names for the recognised brands. */
 const MK_CARD_BRAND_NAMES = {