@mk-kit/ui 0.40.0 → 0.42.0

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

@@ -609,7 +609,7 @@ class MkCalendar {
                 useExisting: forwardRef(() => MkCalendar),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-disabled)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-subtle)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCalendar, decorators: [{
             type: Component,
@@ -635,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-calendar--range]': 'rangeMode()',
                         '[class.mk-calendar--invalid]': 'isInvalid()',
                         '[attr.aria-invalid]': 'isInvalid() || null',
-                    }, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-disabled)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"] }]
+                    }, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-subtle)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { 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 }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateHovered: [{ type: i0.Output, args: ["dateHovered"] }] } });
 
 /**
@@ -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}`;