@mk-kit/ui 0.39.0 → 0.41.0

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

@@ -666,6 +666,10 @@ class MkDatePicker {
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (inclusive). */
+    /** Accessible name when the picker is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelAttr = computed(() => (this.field ? null : this.ariaLabel() || null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelAttr" }] : /* istanbul ignore next */ []));
     min = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     /** Latest selectable date (inclusive). */
@@ -886,7 +890,7 @@ class MkDatePicker {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDatePicker, isStandalone: true, selector: "mk-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-date-picker--sm": "effectiveSize() === 'sm'", "class.mk-date-picker--md": "effectiveSize() === 'md'", "class.mk-date-picker--lg": "effectiveSize() === 'lg'", "class.mk-date-picker--open": "open()", "class.mk-date-picker--invalid": "isInvalid()", "class.mk-date-picker--disabled": "isDisabled()" }, classAttribute: "mk-date-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDatePicker, isStandalone: true, selector: "mk-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-date-picker--sm": "effectiveSize() === 'sm'", "class.mk-date-picker--md": "effectiveSize() === 'md'", "class.mk-date-picker--lg": "effectiveSize() === 'lg'", "class.mk-date-picker--open": "open()", "class.mk-date-picker--invalid": "isInvalid()", "class.mk-date-picker--disabled": "isDisabled()" }, classAttribute: "mk-date-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkDatePicker),
@@ -897,7 +901,7 @@ class MkDatePicker {
                 useExisting: forwardRef(() => MkDatePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field: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-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], dependencies: [{ kind: "component", type: MkCalendar, selector: "mk-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "disabled", "invalid", "disabledDate", "size", "fullWidth", "rangeMode", "rangeStart", "rangeEnd"], outputs: ["valueChange", "dateSelected", "dateHovered"] }, { kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    [attr.aria-label]=\"ariaLabelAttr()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field: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-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], dependencies: [{ kind: "component", type: MkCalendar, selector: "mk-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "disabled", "invalid", "disabledDate", "size", "fullWidth", "rangeMode", "rangeStart", "rangeEnd"], outputs: ["valueChange", "dateSelected", "dateHovered"] }, { 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: MkDatePicker, decorators: [{
             type: Component,
@@ -921,8 +925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkDatePicker),
                             multi: true,
                         },
-                    ], template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field: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-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+                    ], template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    [attr.aria-label]=\"ariaLabelAttr()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field: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-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 function pad2$1(n) {
     return n < 10 ? `0${n}` : `${n}`;
@@ -972,6 +976,10 @@ class MkTimePicker {
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Shape of the form value: a `HH:mm` string or a `Date`. */
+    /** Accessible name when the picker is used without an `mk-form-field` label. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelAttr = computed(() => (this.field ? null : this.ariaLabel() || null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelAttr" }] : /* istanbul ignore next */ []));
     valueFormat = input('string', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
     /** Earliest selectable time `HH:mm` (inclusive). */
@@ -1324,7 +1332,7 @@ class MkTimePicker {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTimePicker, isStandalone: true, selector: "mk-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-time-picker--sm": "effectiveSize() === 'sm'", "class.mk-time-picker--md": "effectiveSize() === 'md'", "class.mk-time-picker--lg": "effectiveSize() === 'lg'", "class.mk-time-picker--open": "open()", "class.mk-time-picker--invalid": "isInvalid()", "class.mk-time-picker--disabled": "isDisabled()" }, classAttribute: "mk-time-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTimePicker, isStandalone: true, selector: "mk-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-time-picker--sm": "effectiveSize() === 'sm'", "class.mk-time-picker--md": "effectiveSize() === 'md'", "class.mk-time-picker--lg": "effectiveSize() === 'lg'", "class.mk-time-picker--open": "open()", "class.mk-time-picker--invalid": "isInvalid()", "class.mk-time-picker--disabled": "isDisabled()" }, classAttribute: "mk-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkTimePicker),
@@ -1335,7 +1343,7 @@ class MkTimePicker {
                 useExisting: forwardRef(() => MkTimePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\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-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field: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-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;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-time-picker__option{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-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__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-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp", "keepOpenWhen"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    [attr.aria-label]=\"ariaLabelAttr()\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\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-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field: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-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;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-time-picker__option{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-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__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-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__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: MkTimePicker, decorators: [{
             type: Component,
@@ -1359,8 +1367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             useExisting: forwardRef(() => MkTimePicker),
                             multi: true,
                         },
-                    ], template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\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-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field: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-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;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-time-picker__option{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-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__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-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+                    ], template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    [attr.aria-label]=\"ariaLabelAttr()\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\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-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field: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-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;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-time-picker__option{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-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__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-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 function pad2(n) {
     return n < 10 ? `0${n}` : `${n}`;