@mk-kit/ui 0.34.1 → 0.36.0

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

@@ -1415,7 +1415,7 @@ class MkSelect {
                 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"], 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-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,
@@ -1737,7 +1737,7 @@ class MkAutocomplete {
                 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"], 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-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,
@@ -1814,7 +1814,7 @@ class MkMentionPanel {
         this.onPick(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMentionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMentionPanel, isStandalone: true, selector: "mk-mention-panel", viewQueries: [{ propertyName: "panel", first: true, predicate: MkAnchoredPanel, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #list\n  class=\"mk-mention__list\"\n  mkAnchoredPanel\n  [mkAnchoredPanelFor]=\"anchorEl\"\n  [anchorRect]=\"anchorPoint()\"\n  [gap]=\"6\"\n  (dismiss)=\"onDismiss()\"\n  [id]=\"listId\"\n  role=\"listbox\"\n>\n  @if (loading() && !options().length) {\n    <li class=\"mk-mention__status\" role=\"presentation\">\n      <span class=\"mk-mention__spinner\" aria-hidden=\"true\"></span>\n      {{ i18n.loading }}\n    </li>\n  } @else {\n    @for (opt of options(); track $index; let i = $index) {\n      <li\n        class=\"mk-mention__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === activeIndex()\"\n        [class.mk-mention__option--active]=\"i === activeIndex()\"\n        (pointerdown)=\"pick($event, i)\"\n        (pointermove)=\"onHover(i)\"\n      >\n        <span class=\"mk-mention__option-label\">{{ opt.label }}</span>\n        @if (opt.hint) {\n          <span class=\"mk-mention__option-hint\">{{ opt.hint }}</span>\n        }\n      </li>\n    }\n  }\n</ul>\n", styles: [":host{display:contents}.mk-mention__list{margin:0;padding:var(--mk-space-1);list-style:none;min-width:11rem;max-width:18rem;max-height:14rem;overflow-y:auto;font-family:var(--mk-font-sans);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-mention__option{display:flex;align-items:baseline;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-sm);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-mention__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-mention__option-hint{flex:none;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-mention__option--active{background-color:var(--mk-selected-bg)}.mk-mention__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-mention__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-mention-spin var(--mk-duration-slow) linear infinite}@keyframes mk-mention-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-mention__spinner{animation:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkMentionPanel, isStandalone: true, selector: "mk-mention-panel", viewQueries: [{ propertyName: "panel", first: true, predicate: MkAnchoredPanel, descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #list\n  class=\"mk-mention__list\"\n  mkAnchoredPanel\n  [mkAnchoredPanelFor]=\"anchorEl\"\n  [anchorRect]=\"anchorPoint()\"\n  [gap]=\"6\"\n  (dismiss)=\"onDismiss()\"\n  [id]=\"listId\"\n  role=\"listbox\"\n>\n  @if (loading() && !options().length) {\n    <li class=\"mk-mention__status\" role=\"presentation\">\n      <span class=\"mk-mention__spinner\" aria-hidden=\"true\"></span>\n      {{ i18n.loading }}\n    </li>\n  } @else {\n    @for (opt of options(); track $index; let i = $index) {\n      <li\n        class=\"mk-mention__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === activeIndex()\"\n        [class.mk-mention__option--active]=\"i === activeIndex()\"\n        (pointerdown)=\"pick($event, i)\"\n        (pointermove)=\"onHover(i)\"\n      >\n        <span class=\"mk-mention__option-label\">{{ opt.label }}</span>\n        @if (opt.hint) {\n          <span class=\"mk-mention__option-hint\">{{ opt.hint }}</span>\n        }\n      </li>\n    }\n  }\n</ul>\n", styles: [":host{display:contents}.mk-mention__list{margin:0;padding:var(--mk-space-1);list-style:none;min-width:11rem;max-width:18rem;max-height:14rem;overflow-y:auto;font-family:var(--mk-font-sans);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-mention__option{display:flex;align-items:baseline;gap:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-sm);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-mention__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-mention__option-hint{flex:none;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--mk-font-size-xs);color:var(--mk-text-muted)}.mk-mention__option--active{background-color:var(--mk-selected-bg)}.mk-mention__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-mention__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-mention-spin var(--mk-duration-slow) linear infinite}@keyframes mk-mention-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-mention__spinner{animation:none}}\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: MkMentionPanel, decorators: [{
             type: Component,
@@ -2634,7 +2634,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"], 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-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,
@@ -3887,7 +3887,7 @@ class MkTreeSelect {
                 useExisting: forwardRef(() => MkTreeSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-tree-select__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-tree-select__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy() ? labelledBy() + ' ' + valueId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (selectedLabel()) {\n      <span class=\"mk-tree-select__value\" [id]=\"valueId\">{{ selectedLabel() }}</span>\n    } @else {\n      <span\n        class=\"mk-tree-select__value mk-tree-select__value--placeholder\"\n        [id]=\"valueId\"\n        >{{ placeholder() }}</span\n      >\n    }\n    <span class=\"mk-tree-select__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && value() !== null && value() !== undefined && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-tree-select__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear($event)\"\n    >\n      <span class=\"mk-tree-select__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-tree-select__panel\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-tree\n      class=\"mk-tree-select__tree\"\n      selectable\n      [nodes]=\"nodes()\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onPick($event)\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-tree-select__field{display:flex;align-items:center;position:relative}.mk-tree-select__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-tree-select--sm) .mk-tree-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-tree-select--lg) .mk-tree-select__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-tree-select__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-tree-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-tree-select--invalid) .mk-tree-select__trigger{border-color:var(--mk-danger)}:host(.mk-tree-select--disabled) .mk-tree-select__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-tree-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-tree-select__value--placeholder{color:var(--mk-text-subtle)}.mk-tree-select__icon{flex:none;width:.6rem;height:.6rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg);transform-origin:center;margin-bottom:.15rem}:host(.mk-tree-select--open) .mk-tree-select__icon{transform:rotate(-135deg);margin-bottom:-.15rem}.mk-tree-select__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-tree-select__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-tree-select__clear-icon:before,.mk-tree-select__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-tree-select__clear-icon:before{transform:rotate(45deg)}.mk-tree-select__clear-icon:after{transform:rotate(-45deg)}.mk-tree-select__panel{max-height:20rem;overflow-y:auto;padding:var(--mk-space-1);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-tree-select__tree{display:block}\n"], dependencies: [{ kind: "component", type: MkTree, selector: "mk-tree", inputs: ["nodes", "selectable", "aria-label", "selected"], outputs: ["selectedChange", "selectionChange", "nodeToggle"] }, { kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-tree-select__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-tree-select__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy() ? labelledBy() + ' ' + valueId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (selectedLabel()) {\n      <span class=\"mk-tree-select__value\" [id]=\"valueId\">{{ selectedLabel() }}</span>\n    } @else {\n      <span\n        class=\"mk-tree-select__value mk-tree-select__value--placeholder\"\n        [id]=\"valueId\"\n        >{{ placeholder() }}</span\n      >\n    }\n    <span class=\"mk-tree-select__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && value() !== null && value() !== undefined && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-tree-select__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear($event)\"\n    >\n      <span class=\"mk-tree-select__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-tree-select__panel\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    (keydown)=\"onPanelKeydown($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-tree\n      class=\"mk-tree-select__tree\"\n      selectable\n      [nodes]=\"nodes()\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onPick($event)\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-tree-select__field{display:flex;align-items:center;position:relative}.mk-tree-select__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-tree-select--sm) .mk-tree-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-tree-select--lg) .mk-tree-select__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-tree-select__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-tree-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-tree-select--invalid) .mk-tree-select__trigger{border-color:var(--mk-danger)}:host(.mk-tree-select--disabled) .mk-tree-select__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-tree-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-tree-select__value--placeholder{color:var(--mk-text-subtle)}.mk-tree-select__icon{flex:none;width:.6rem;height:.6rem;border-right:2px solid var(--mk-text-muted);border-bottom:2px solid var(--mk-text-muted);transform:rotate(45deg);transform-origin:center;margin-bottom:.15rem}:host(.mk-tree-select--open) .mk-tree-select__icon{transform:rotate(-135deg);margin-bottom:-.15rem}.mk-tree-select__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-tree-select__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-tree-select__clear-icon:before,.mk-tree-select__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-tree-select__clear-icon:before{transform:rotate(45deg)}.mk-tree-select__clear-icon:after{transform:rotate(-45deg)}.mk-tree-select__panel{max-height:20rem;overflow-y:auto;padding:var(--mk-space-1);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-tree-select__tree{display:block}\n"], dependencies: [{ kind: "component", type: MkTree, selector: "mk-tree", inputs: ["nodes", "selectable", "aria-label", "selected"], outputs: ["selectedChange", "selectionChange", "nodeToggle"] }, { 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: MkTreeSelect, decorators: [{
             type: Component,
@@ -5558,7 +5558,7 @@ class MkOnScreenKeyboard {
         el.dispatchEvent(new Event('input', { bubbles: true }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkOnScreenKeyboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkOnScreenKeyboard, isStandalone: true, selector: "mk-on-screen-keyboard", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enter: "enter", closed: "closed" }, host: { classAttribute: "mk-on-screen-keyboard" }, exportAs: ["mkOnScreenKeyboard"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-on-screen-keyboard__panel\"\n    role=\"group\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"i18n.onScreenKeyboardLabel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    [clamp]=\"true\"\n    (dismiss)=\"close()\"\n    (pointerdown)=\"onPanelPointerdown($event)\"\n  >\n    @for (row of rows(); track $index) {\n      <div class=\"mk-on-screen-keyboard__row\">\n        @for (key of row; track $index) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"mk-on-screen-keyboard__key\"\n            [class.mk-on-screen-keyboard__key--action]=\"key.action !== undefined\"\n            [class.mk-on-screen-keyboard__key--active]=\"\n              (key.action === 'shift' && shift()) ||\n              (key.action === 'layer' && layer() === 'alt')\n            \"\n            [style.--_span]=\"key.span\"\n            [attr.aria-label]=\"key.action !== undefined ? keyLabel(key) : null\"\n            [attr.aria-pressed]=\"\n              key.action === 'shift'\n                ? shift()\n                : key.action === 'layer'\n                  ? layer() === 'alt'\n                  : null\n            \"\n            (click)=\"onKeyClick(key)\"\n          >\n            @switch (key.action) {\n              @case ('shift') {\n                <mk-icon name=\"arrow-up\" />\n              }\n              @case ('backspace') {\n                <mk-icon name=\"backspace\" />\n              }\n              @case ('enter') {\n                <mk-icon name=\"corner-down-left\" />\n              }\n              @case ('space') {\n                <span class=\"mk-on-screen-keyboard__space-bar\"></span>\n              }\n              @case ('layer') {\n                {{ layerFace() }}\n              }\n              @default {\n                {{ key.char }}\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.mk-on-screen-keyboard__panel{display:flex;flex-direction:column;gap:var(--mk-space-1);width:min(30rem,100vw - var(--mk-space-4));padding:var(--mk-space-2);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);-webkit-user-select:none;user-select:none;touch-action:manipulation;animation:mk-osk-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-on-screen-keyboard__row{display:flex;gap:var(--mk-space-1);justify-content:center}.mk-on-screen-keyboard__key{flex:var(--_span, 1) 1 0;min-width:0;min-height:var(--mk-control-height-md);display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit;font-size:var(--mk-font-size-lg);color:var(--mk-text);background:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-sm);cursor:pointer;transition:background-color var(--mk-duration-instant) var(--mk-ease-standard),transform var(--mk-duration-instant) var(--mk-ease-standard)}.mk-on-screen-keyboard__key--action{background:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-md)}.mk-on-screen-keyboard__key--active{background:var(--mk-primary-subtle);color:var(--mk-primary-subtle-text);border-color:var(--mk-primary)}.mk-on-screen-keyboard__key:hover{background:var(--mk-hover-overlay)}.mk-on-screen-keyboard__key:active{transform:scale(.94);background:var(--mk-active-overlay)}.mk-on-screen-keyboard__key:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-on-screen-keyboard__space-bar{display:block;width:60%;height:3px;border-radius:var(--mk-radius-pill);background:var(--mk-border-strong)}@keyframes mk-osk-in{0%{opacity:0;transform:translateY(var(--mk-space-1))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-on-screen-keyboard__panel{animation:none}.mk-on-screen-keyboard__key{transition:none}.mk-on-screen-keyboard__key:active{transform:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkOnScreenKeyboard, isStandalone: true, selector: "mk-on-screen-keyboard", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enter: "enter", closed: "closed" }, host: { classAttribute: "mk-on-screen-keyboard" }, exportAs: ["mkOnScreenKeyboard"], ngImport: i0, template: "@if (opened()) {\n  <div\n    #panel\n    class=\"mk-on-screen-keyboard__panel\"\n    role=\"group\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"i18n.onScreenKeyboardLabel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"anchorEl()\"\n    [placement]=\"placement()\"\n    [gap]=\"8\"\n    [clamp]=\"true\"\n    (dismiss)=\"close()\"\n    (pointerdown)=\"onPanelPointerdown($event)\"\n  >\n    @for (row of rows(); track $index) {\n      <div class=\"mk-on-screen-keyboard__row\">\n        @for (key of row; track $index) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"mk-on-screen-keyboard__key\"\n            [class.mk-on-screen-keyboard__key--action]=\"key.action !== undefined\"\n            [class.mk-on-screen-keyboard__key--active]=\"\n              (key.action === 'shift' && shift()) ||\n              (key.action === 'layer' && layer() === 'alt')\n            \"\n            [style.--_span]=\"key.span\"\n            [attr.aria-label]=\"key.action !== undefined ? keyLabel(key) : null\"\n            [attr.aria-pressed]=\"\n              key.action === 'shift'\n                ? shift()\n                : key.action === 'layer'\n                  ? layer() === 'alt'\n                  : null\n            \"\n            (click)=\"onKeyClick(key)\"\n          >\n            @switch (key.action) {\n              @case ('shift') {\n                <mk-icon name=\"arrow-up\" />\n              }\n              @case ('backspace') {\n                <mk-icon name=\"backspace\" />\n              }\n              @case ('enter') {\n                <mk-icon name=\"corner-down-left\" />\n              }\n              @case ('space') {\n                <span class=\"mk-on-screen-keyboard__space-bar\"></span>\n              }\n              @case ('layer') {\n                {{ layerFace() }}\n              }\n              @default {\n                {{ key.char }}\n              }\n            }\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:contents}.mk-on-screen-keyboard__panel{display:flex;flex-direction:column;gap:var(--mk-space-1);width:min(30rem,100vw - var(--mk-space-4));padding:var(--mk-space-2);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg);font-family:var(--mk-font-sans);-webkit-user-select:none;user-select:none;touch-action:manipulation;animation:mk-osk-in var(--mk-duration-fast) var(--mk-ease-out)}.mk-on-screen-keyboard__row{display:flex;gap:var(--mk-space-1);justify-content:center}.mk-on-screen-keyboard__key{flex:var(--_span, 1) 1 0;min-width:0;min-height:var(--mk-control-height-md);display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit;font-size:var(--mk-font-size-lg);color:var(--mk-text);background:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-sm);cursor:pointer;transition:background-color var(--mk-duration-instant) var(--mk-ease-standard),transform var(--mk-duration-instant) var(--mk-ease-standard)}.mk-on-screen-keyboard__key--action{background:var(--mk-surface-3);color:var(--mk-text-muted);font-size:var(--mk-font-size-md)}.mk-on-screen-keyboard__key--active{background:var(--mk-primary-subtle);color:var(--mk-primary-subtle-text);border-color:var(--mk-primary)}.mk-on-screen-keyboard__key:hover{background:var(--mk-hover-overlay)}.mk-on-screen-keyboard__key:active{transform:scale(.94);background:var(--mk-active-overlay)}.mk-on-screen-keyboard__key:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-on-screen-keyboard__space-bar{display:block;width:60%;height:3px;border-radius:var(--mk-radius-pill);background:var(--mk-border-strong)}@keyframes mk-osk-in{0%{opacity:0;transform:translateY(var(--mk-space-1))}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mk-on-screen-keyboard__panel{animation:none}.mk-on-screen-keyboard__key{transition:none}.mk-on-screen-keyboard__key:active{transform:none}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "component", type: MkIcon, selector: "mk-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkOnScreenKeyboard, decorators: [{
             type: Component,
@@ -6294,7 +6294,7 @@ class MkPhoneInput {
                 useExisting: forwardRef(() => MkPhoneInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "nationalRef", first: true, predicate: ["national"], descendants: true, isSignal: true }], exportAs: ["mkPhoneInput"], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-phone-input__country\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? listId : null\"\n  [attr.aria-label]=\"i18n.chooseCountry\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  <span class=\"mk-phone-input__flag\" aria-hidden=\"true\">{{\n    selectedFlag()\n  }}</span>\n  <span class=\"mk-phone-input__dial\">+{{ selectedCountry().dialCode }}</span>\n  <span class=\"mk-visually-hidden\">{{ selectedName() }}</span>\n  <span class=\"mk-phone-input__arrow\" aria-hidden=\"true\"></span>\n</button>\n\n<input\n  #national\n  type=\"tel\"\n  class=\"mk-phone-input__field\"\n  [id]=\"inputId\"\n  autocomplete=\"tel-national\"\n  [mkMask]=\"selectedCountry().mask\"\n  mkMaskInputmode=\"tel\"\n  [value]=\"nationalMasked()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-label]=\"labelledBy() ? null : i18n.phoneNumber\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (unmaskedChange)=\"onNationalChange($event)\"\n  (paste)=\"onNationalPaste($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (open()) {\n  <div\n    class=\"mk-phone-input__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    (dismiss)=\"close()\"\n  >\n    <input\n      #search\n      type=\"text\"\n      class=\"mk-phone-input__search\"\n      [id]=\"searchId\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"true\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"\n        activeIndex() >= 0 ? optionId(activeIndex()) : null\n      \"\n      [placeholder]=\"i18n.searchCountries\"\n      [value]=\"query()\"\n      (input)=\"onSearch($event)\"\n      (keydown)=\"onSearchKeydown($event)\"\n    />\n    <ul\n      class=\"mk-phone-input__list\"\n      [id]=\"listId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"i18n.chooseCountry\"\n    >\n      @for (opt of filtered(); track opt.country.code; let i = $index) {\n        <li\n          class=\"mk-phone-input__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"opt.country.code === selectedCountry().code\"\n          [class.mk-phone-input__option--active]=\"i === activeIndex()\"\n          [class.mk-phone-input__option--selected]=\"\n            opt.country.code === selectedCountry().code\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"activeIndex.set(i)\"\n          (click)=\"selectCountry(i)\"\n        >\n          <span class=\"mk-phone-input__flag\" aria-hidden=\"true\">{{\n            opt.flag\n          }}</span>\n          <span class=\"mk-phone-input__option-name\">{{ opt.name }}</span>\n          <span class=\"mk-phone-input__option-dial\"\n            >+{{ opt.country.dialCode }}</span\n          >\n        </li>\n      } @empty {\n        <li class=\"mk-phone-input__empty\" role=\"presentation\">\n          {{ i18n.noResults }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;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-phone-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-phone-input--lg){height:var(--mk-control-height-lg)}:host(:hover:not(.mk-phone-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-phone-input--invalid){border-color:var(--mk-danger)}:host(.mk-phone-input--invalid:focus-within){outline-color:var(--mk-danger)}:host(.mk-phone-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-phone-input__country{flex:none;display:flex;align-items:center;gap:var(--mk-space-1);padding:0 var(--mk-space-2);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface-2);border:none;border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-phone-input__country:not(:disabled):hover{background-color:var(--mk-hover-overlay)}.mk-phone-input__country:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-phone-input__country:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-offset))}.mk-phone-input__flag{font-size:1.1em;line-height:1}.mk-phone-input__dial{font-variant-numeric:tabular-nums;color:var(--mk-text-muted)}.mk-phone-input__arrow{width:.4rem;height:.4rem;margin-inline-start:var(--mk-space-1);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-phone-input--open) .mk-phone-input__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-phone-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);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-phone-input__field::placeholder{color:var(--mk-text-subtle)}.mk-phone-input__field:disabled{color:var(--mk-text-disabled);cursor:not-allowed}:host(.mk-phone-input--sm) .mk-phone-input__country,:host(.mk-phone-input--sm) .mk-phone-input__field{font-size:var(--mk-font-size-sm)}:host(.mk-phone-input--lg) .mk-phone-input__country,:host(.mk-phone-input--lg) .mk-phone-input__field{font-size:var(--mk-font-size-lg)}.mk-phone-input__panel{display:flex;flex-direction:column;min-width:18rem;max-height:20rem;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);overflow:hidden;font-family:var(--mk-font-sans)}.mk-phone-input__search{flex:none;margin:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-sm);outline:none}.mk-phone-input__search:focus-visible{border-color:var(--mk-primary)}.mk-phone-input__search::placeholder{color:var(--mk-text-subtle)}.mk-phone-input__list{flex:1 1 auto;margin:0;padding:0 var(--mk-space-1) var(--mk-space-1);list-style:none;overflow-y:auto}.mk-phone-input__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-phone-input__option-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-phone-input__option-dial{flex:none;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-phone-input__option--active{background-color:var(--mk-selected-bg)}.mk-phone-input__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-phone-input__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){:host,.mk-phone-input__country,.mk-phone-input__arrow{transition:none}}@media(pointer:coarse){.mk-phone-input__field{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-phone-input--sm) .mk-phone-input__field{font-size:max(var(--mk-font-size-sm),16px)}.mk-phone-input__search{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"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }, { kind: "directive", type: MkMask, selector: "[mkMask]", inputs: ["mkMask", "mkMaskInputmode"], outputs: ["maskedChange", "unmaskedChange"], exportAs: ["mkMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "searchRef", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "nationalRef", first: true, predicate: ["national"], descendants: true, isSignal: true }], exportAs: ["mkPhoneInput"], ngImport: i0, template: "<button\n  #trigger\n  type=\"button\"\n  class=\"mk-phone-input__country\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? listId : null\"\n  [attr.aria-label]=\"i18n.chooseCountry\"\n  [disabled]=\"isDisabled()\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  <span class=\"mk-phone-input__flag\" aria-hidden=\"true\">{{\n    selectedFlag()\n  }}</span>\n  <span class=\"mk-phone-input__dial\">+{{ selectedCountry().dialCode }}</span>\n  <span class=\"mk-visually-hidden\">{{ selectedName() }}</span>\n  <span class=\"mk-phone-input__arrow\" aria-hidden=\"true\"></span>\n</button>\n\n<input\n  #national\n  type=\"tel\"\n  class=\"mk-phone-input__field\"\n  [id]=\"inputId\"\n  autocomplete=\"tel-national\"\n  [mkMask]=\"selectedCountry().mask\"\n  mkMaskInputmode=\"tel\"\n  [value]=\"nationalMasked()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-label]=\"labelledBy() ? null : i18n.phoneNumber\"\n  [attr.aria-describedby]=\"describedBy()\"\n  [attr.aria-invalid]=\"isInvalid() || null\"\n  [attr.aria-required]=\"isRequired() || null\"\n  (unmaskedChange)=\"onNationalChange($event)\"\n  (paste)=\"onNationalPaste($event)\"\n  (blur)=\"onBlur()\"\n/>\n\n@if (open()) {\n  <div\n    class=\"mk-phone-input__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"trigger\"\n    (dismiss)=\"close()\"\n  >\n    <input\n      #search\n      type=\"text\"\n      class=\"mk-phone-input__search\"\n      [id]=\"searchId\"\n      role=\"combobox\"\n      autocomplete=\"off\"\n      aria-haspopup=\"listbox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"true\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"\n        activeIndex() >= 0 ? optionId(activeIndex()) : null\n      \"\n      [placeholder]=\"i18n.searchCountries\"\n      [value]=\"query()\"\n      (input)=\"onSearch($event)\"\n      (keydown)=\"onSearchKeydown($event)\"\n    />\n    <ul\n      class=\"mk-phone-input__list\"\n      [id]=\"listId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"i18n.chooseCountry\"\n    >\n      @for (opt of filtered(); track opt.country.code; let i = $index) {\n        <li\n          class=\"mk-phone-input__option\"\n          [id]=\"optionId(i)\"\n          role=\"option\"\n          [attr.aria-selected]=\"opt.country.code === selectedCountry().code\"\n          [class.mk-phone-input__option--active]=\"i === activeIndex()\"\n          [class.mk-phone-input__option--selected]=\"\n            opt.country.code === selectedCountry().code\n          \"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"activeIndex.set(i)\"\n          (click)=\"selectCountry(i)\"\n        >\n          <span class=\"mk-phone-input__flag\" aria-hidden=\"true\">{{\n            opt.flag\n          }}</span>\n          <span class=\"mk-phone-input__option-name\">{{ opt.name }}</span>\n          <span class=\"mk-phone-input__option-dial\"\n            >+{{ opt.country.dialCode }}</span\n          >\n        </li>\n      } @empty {\n        <li class=\"mk-phone-input__empty\" role=\"presentation\">\n          {{ i18n.noResults }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;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-phone-input--sm){height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-phone-input--lg){height:var(--mk-control-height-lg)}:host(:hover:not(.mk-phone-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-phone-input--invalid){border-color:var(--mk-danger)}:host(.mk-phone-input--invalid:focus-within){outline-color:var(--mk-danger)}:host(.mk-phone-input--disabled){background-color:var(--mk-surface-2);opacity:.7}.mk-phone-input__country{flex:none;display:flex;align-items:center;gap:var(--mk-space-1);padding:0 var(--mk-space-2);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface-2);border:none;border-inline-end:var(--mk-border-width) solid var(--mk-border-subtle);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-phone-input__country:not(:disabled):hover{background-color:var(--mk-hover-overlay)}.mk-phone-input__country:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-phone-input__country:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-offset))}.mk-phone-input__flag{font-size:1.1em;line-height:1}.mk-phone-input__dial{font-variant-numeric:tabular-nums;color:var(--mk-text-muted)}.mk-phone-input__arrow{width:.4rem;height:.4rem;margin-inline-start:var(--mk-space-1);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-phone-input--open) .mk-phone-input__arrow{transform:rotate(-135deg) translateY(-2px)}.mk-phone-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);color:var(--mk-text);background:transparent;border:none;outline:none}.mk-phone-input__field::placeholder{color:var(--mk-text-subtle)}.mk-phone-input__field:disabled{color:var(--mk-text-disabled);cursor:not-allowed}:host(.mk-phone-input--sm) .mk-phone-input__country,:host(.mk-phone-input--sm) .mk-phone-input__field{font-size:var(--mk-font-size-sm)}:host(.mk-phone-input--lg) .mk-phone-input__country,:host(.mk-phone-input--lg) .mk-phone-input__field{font-size:var(--mk-font-size-lg)}.mk-phone-input__panel{display:flex;flex-direction:column;min-width:18rem;max-height:20rem;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);overflow:hidden;font-family:var(--mk-font-sans)}.mk-phone-input__search{flex:none;margin:var(--mk-space-2);padding:var(--mk-space-2) var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background-color:var(--mk-surface-2);border:var(--mk-border-width) solid var(--mk-border-subtle);border-radius:var(--mk-radius-sm);outline:none}.mk-phone-input__search:focus-visible{border-color:var(--mk-primary)}.mk-phone-input__search::placeholder{color:var(--mk-text-subtle)}.mk-phone-input__list{flex:1 1 auto;margin:0;padding:0 var(--mk-space-1) var(--mk-space-1);list-style:none;overflow-y:auto}.mk-phone-input__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-phone-input__option-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-phone-input__option-dial{flex:none;color:var(--mk-text-muted);font-variant-numeric:tabular-nums}.mk-phone-input__option--active{background-color:var(--mk-selected-bg)}.mk-phone-input__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-phone-input__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){:host,.mk-phone-input__country,.mk-phone-input__arrow{transition:none}}@media(pointer:coarse){.mk-phone-input__field{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-phone-input--sm) .mk-phone-input__field{font-size:max(var(--mk-font-size-sm),16px)}.mk-phone-input__search{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"] }, { kind: "directive", type: MkMask, selector: "[mkMask]", inputs: ["mkMask", "mkMaskInputmode"], outputs: ["maskedChange", "unmaskedChange"], exportAs: ["mkMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkPhoneInput, decorators: [{
             type: Component,