@mk-kit/ui 0.34.1 → 0.35.0

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

@@ -57,7 +57,7 @@ const WEEKDAY_NAMES_SHORT = [
 ];
 /** English single-letter weekday names (narrow). */
 const WEEKDAY_NAMES_NARROW = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-function pad2$1(n) {
+function pad2$2(n) {
     return n < 10 ? `0${n}` : `${n}`;
 }
 /** True when both dates fall on the same calendar day (local time). */
@@ -142,7 +142,7 @@ function clampDate(date, min, max) {
 }
 /** Format `date` as an ISO calendar date `YYYY-MM-DD` (local time). */
 function formatISODate(date) {
-    return `${date.getFullYear().toString().padStart(4, '0')}-${pad2$1(date.getMonth() + 1)}-${pad2$1(date.getDate())}`;
+    return `${date.getFullYear().toString().padStart(4, '0')}-${pad2$2(date.getMonth() + 1)}-${pad2$2(date.getDate())}`;
 }
 /** Parse a `YYYY-MM-DD` string into a local-time `Date`, or `null` if invalid. */
 function parseISODate(value) {
@@ -166,21 +166,29 @@ function parseISODate(value) {
 /**
  * Format `date` using a small pattern set. Supported tokens:
  * `yyyy` (4-digit year), `MMMM` (full month), `MMM` (short month),
- * `MM` (2-digit month), `dd` (2-digit day), `d` (day), `ddd` (short weekday).
- * Longer tokens are matched first so `MMMM` wins over `MM`.
- * Month/weekday names come from `names` when given, else English.
+ * `MM` (2-digit month), `dd` (2-digit day), `d` (day), `ddd` (short weekday),
+ * `HH` / `H` (24-hour, padded / bare), `hh` / `h` (12-hour, padded / bare),
+ * `mm` (2-digit minutes) and `a` (`AM` / `PM`). Longer tokens are matched
+ * first so `MMMM` wins over `MM`. Month/weekday names come from `names` when
+ * given, else English.
  */
 function formatDate(date, pattern, names) {
     const tokens = [
         ['yyyy', () => date.getFullYear().toString().padStart(4, '0')],
         ['MMMM', () => (names?.months ?? MONTH_NAMES)[date.getMonth()]],
         ['MMM', () => (names?.monthsShort ?? MONTH_NAMES_SHORT)[date.getMonth()]],
-        ['MM', () => pad2$1(date.getMonth() + 1)],
+        ['MM', () => pad2$2(date.getMonth() + 1)],
         // Longest-first: 'ddd' (short weekday) must be matched before 'dd'/'d',
         // otherwise 'ddd' is consumed as 'dd' + 'd' and produces day numbers.
         ['ddd', () => (names?.weekdaysShort ?? WEEKDAY_NAMES_SHORT)[date.getDay()]],
-        ['dd', () => pad2$1(date.getDate())],
+        ['dd', () => pad2$2(date.getDate())],
         ['d', () => date.getDate().toString()],
+        ['HH', () => pad2$2(date.getHours())],
+        ['H', () => date.getHours().toString()],
+        ['hh', () => pad2$2(date.getHours() % 12 || 12)],
+        ['h', () => (date.getHours() % 12 || 12).toString()],
+        ['mm', () => pad2$2(date.getMinutes())],
+        ['a', () => (date.getHours() < 12 ? 'AM' : 'PM')],
     ];
     let result = '';
     let i = 0;
@@ -777,9 +785,15 @@ class MkDatePicker {
             this.setValue(clampDate(parsed, this.min(), this.max()));
         }
         else {
-            // Invalid entry — revert to the current model's display.
+            // Invalid entry — revert to the current model's display. The signal may
+            // already hold that string (the model did not change), so the `[value]`
+            // binding would not re-apply it: write the DOM value directly as well.
             const v = this.value();
-            this.inputText.set(v ? formatDate(v, this.displayFormat(), this.i18n.dateNames) : '');
+            const text = v ? formatDate(v, this.displayFormat(), this.i18n.dateNames) : '';
+            this.inputText.set(text);
+            const el = this.inputRef()?.nativeElement;
+            if (el)
+                el.value = text;
         }
     }
     parse(text) {
@@ -883,7 +897,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"], 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    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,
@@ -910,7 +924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ], 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 }] }] } });
 
-function pad2(n) {
+function pad2$1(n) {
     return n < 10 ? `0${n}` : `${n}`;
 }
 /**
@@ -1020,7 +1034,7 @@ class MkTimePicker {
         const max = this.max();
         const out = [];
         for (let mins = 0; mins < 24 * 60; mins += step) {
-            const value = `${pad2(Math.floor(mins / 60))}:${pad2(mins % 60)}`;
+            const value = `${pad2$1(Math.floor(mins / 60))}:${pad2$1(mins % 60)}`;
             if (min && value < min)
                 continue;
             if (max && value > max)
@@ -1059,9 +1073,9 @@ class MkTimePicker {
         if (this.hour12()) {
             const ap = h < 12 ? 'AM' : 'PM';
             const hh = h % 12 || 12;
-            return `${hh}:${pad2(m)} ${ap}`;
+            return `${hh}:${pad2$1(m)} ${ap}`;
         }
-        return `${pad2(h)}:${pad2(m)}`;
+        return `${pad2$1(h)}:${pad2$1(m)}`;
     }
     parse(text) {
         const m = /^\s*(\d{1,2})(?::(\d{2}))?\s*(am|pm)?\s*$/i.exec(text);
@@ -1080,7 +1094,7 @@ class MkTimePicker {
         }
         if (h > 23 || min > 59)
             return null;
-        return `${pad2(h)}:${pad2(min)}`;
+        return `${pad2$1(h)}:${pad2$1(min)}`;
     }
     toggle() {
         if (this.isDisabled())
@@ -1234,7 +1248,7 @@ class MkTimePicker {
     /** Normalise any accepted shape to canonical `HH:mm`, or `null`. */
     toHhmm(v) {
         if (v instanceof Date) {
-            return Number.isNaN(v.getTime()) ? null : `${pad2(v.getHours())}:${pad2(v.getMinutes())}`;
+            return Number.isNaN(v.getTime()) ? null : `${pad2$1(v.getHours())}:${pad2$1(v.getMinutes())}`;
         }
         if (typeof v !== 'string' || !v.trim())
             return null;
@@ -1321,7 +1335,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"], 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    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,
@@ -1348,6 +1362,537 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     ], 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 }] }] } });
 
+function pad2(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/** Minutes since local midnight, ignoring seconds. */
+function minutesOfDay$1(d) {
+    return d.getHours() * 60 + d.getMinutes();
+}
+/** Same instant floored to the minute — bounds compare at minute precision. */
+function toMinute(d) {
+    const c = new Date(d);
+    c.setSeconds(0, 0);
+    return c.getTime();
+}
+/** Put `minutes` since midnight onto `day`'s local date. */
+function combine(day, minutes) {
+    return new Date(day.getFullYear(), day.getMonth(), day.getDate(), Math.floor(minutes / 60), minutes % 60, 0, 0);
+}
+/** Parse `14:30`, `2:30 pm`, `9` … into minutes since midnight, or null. */
+function parseTime(text) {
+    const m = /^\s*(\d{1,2})(?::(\d{2}))?\s*(am|pm)?\s*$/i.exec(text);
+    if (!m)
+        return null;
+    let h = Number(m[1]);
+    const min = m[2] ? Number(m[2]) : 0;
+    const ap = m[3]?.toLowerCase();
+    if (ap) {
+        if (h < 1 || h > 12)
+            return null;
+        if (ap === 'pm' && h !== 12)
+            h += 12;
+        if (ap === 'am' && h === 12)
+            h = 0;
+    }
+    if (h > 23 || min > 59)
+        return null;
+    return h * 60 + min;
+}
+/**
+ * DateTimePicker — one field for a date **and** a time of day. The panel pairs
+ * an `mk-calendar` with a time list generated from `step`; the value is a
+ * single `Date` carrying both parts in local time (seconds and milliseconds
+ * zeroed). Implements `ControlValueAccessor` and a two-way `value` model, so it
+ * works with `[(ngModel)]`, reactive forms and `[(value)]`.
+ *
+ * Interaction: picking a day keeps the panel open and — when a value already
+ * exists — moves that value to the new day, preserving its time; picking a
+ * time commits and closes. With no value yet, the day is held until a time is
+ * chosen (so a half-picked datetime is never emitted). Typing also works:
+ * `2026-08-26 14:30`, `2026-08-26T09:05`, `Aug 26, 2026 2:30 pm` and a bare
+ * ISO date (→ midnight) are parsed on Enter/blur.
+ *
+ * `min` / `max` bound the whole instant at minute precision: the calendar
+ * greys out days outside the range and the time list hides times outside it
+ * on the boundary days. Validation reports `mkMinDate` / `mkMaxDate`.
+ *
+ * When nested in an `mk-form-field` it adopts the field's id and aria wiring.
+ *
+ * ```html
+ * <mk-datetime-picker [(value)]="startsAt" [step]="15" [min]="now" clearable />
+ * <mk-datetime-picker [(value)]="startsAt" hour12 />
+ * ```
+ */
+class MkDateTimePicker {
+    i18n = inject(MK_I18N);
+    field = inject(MkFormField, { optional: true });
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    inputRef = viewChild('textInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    /** The panel — lives in the top layer once opened. */
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    timesRef = viewChild('times', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timesRef" }] : /* istanbul ignore next */ []));
+    /** Two-way selected date-time (local; seconds and ms are zero). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable instant (inclusive, minute precision). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Latest selectable instant (inclusive, minute precision). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Predicate marking individual days as disabled (threaded to the calendar). */
+    disabledDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when empty. */
+    placeholder = input(this.i18n.selectDateTime, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Pattern used to render the value in the field. Defaults to
+     * `'MMM d, yyyy HH:mm'`, or `'MMM d, yyyy h:mm a'` when `hour12` is set.
+     */
+    displayFormat = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** Interval between generated time options, in minutes. */
+    step = input(30, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Display 12-hour times with AM/PM (the model is a `Date` either way). */
+    hour12 = input(false, { ...(ngDevMode ? { debugName: "hour12" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a clear button when a value is selected. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force invalid styling + `aria-invalid`. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** First column of the calendar week (0 = Sunday). */
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Control size. Ignored when nested in an `mk-form-field`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Editable text mirror of the field. */
+    inputText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []));
+    /** Keyboard-active option in the time list (index into `options`). */
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** Day picked in the calendar while there is no value yet. */
+    pendingDay = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingDay" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    inputId = this.field?.controlId ?? mkUniqueId('mk-datetime-picker');
+    panelId = mkUniqueId('mk-datetime-picker-panel');
+    listId = mkUniqueId('mk-datetime-picker-times');
+    effectiveSize = computed(() => this.field ? this.field.size() : this.size(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSize" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && !!this.value() && !this.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    effectiveFormat = computed(() => this.displayFormat() ??
+        (this.hour12() ? 'MMM d, yyyy h:mm a' : 'MMM d, yyyy HH:mm'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
+    /** The day the calendar shows as selected: the value's day, else the pending one. */
+    calendarValue = computed(() => {
+        const v = this.value();
+        return v ? startOfDay(v) : this.pendingDay();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarValue" }] : /* istanbul ignore next */ []));
+    /** Day-granular bounds for the calendar (inclusive). */
+    calendarMin = computed(() => {
+        const m = this.min();
+        return m ? startOfDay(m) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarMin" }] : /* istanbul ignore next */ []));
+    calendarMax = computed(() => {
+        const m = this.max();
+        return m ? startOfDay(m) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarMax" }] : /* istanbul ignore next */ []));
+    /**
+     * Generated time options. On the `min` / `max` boundary day the list only
+     * offers times inside the bound; on other days every step is listed.
+     */
+    options = computed(() => {
+        const step = Math.max(1, Math.floor(this.step()));
+        const day = this.calendarValue();
+        const min = this.min();
+        const max = this.max();
+        const lo = day && min && isSameDay(day, min) ? minutesOfDay$1(min) : 0;
+        const hi = day && max && isSameDay(day, max) ? minutesOfDay$1(max) : 24 * 60 - 1;
+        const out = [];
+        for (let mins = 0; mins < 24 * 60; mins += step) {
+            if (mins < lo || mins > hi)
+                continue;
+            out.push({
+                minutes: mins,
+                label: this.displayTime(mins),
+                id: `${this.listId}-opt-${mins}`,
+            });
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    selectedIndex = computed(() => {
+        const v = this.value();
+        if (!v)
+            return -1;
+        const mins = minutesOfDay$1(v);
+        return this.options().findIndex((o) => o.minutes === mins);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Keep the text field in sync with the model (typing does not touch value).
+        effect(() => {
+            const v = this.value();
+            this.inputText.set(v ? formatDate(v, this.effectiveFormat(), this.i18n.dateNames) : '');
+        });
+    }
+    // --- Display / parsing ------------------------------------------------------
+    displayTime(mins) {
+        const h = Math.floor(mins / 60);
+        const m = mins % 60;
+        if (this.hour12()) {
+            const ap = h < 12 ? 'AM' : 'PM';
+            return `${h % 12 || 12}:${pad2(m)} ${ap}`;
+        }
+        return `${pad2(h)}:${pad2(m)}`;
+    }
+    /**
+     * Accepts `YYYY-MM-DD[ T]HH:mm[ am|pm]`, a bare ISO date (→ midnight), any
+     * `Date.parse`-able date followed by a time, or a full `Date.parse`-able
+     * string. Seconds are dropped.
+     */
+    parse(text) {
+        const iso = /^(\d{4}-\d{2}-\d{2})(?:[T\s]+(.+))?$/.exec(text);
+        if (iso) {
+            const day = parseISODate(iso[1]);
+            if (!day)
+                return null;
+            if (!iso[2])
+                return day;
+            const mins = parseTime(iso[2]);
+            return mins === null ? null : combine(day, mins);
+        }
+        const split = /^(.*\S)[\s,]+(\d{1,2}(?::\d{2})?\s*(?:am|pm)?)$/i.exec(text);
+        if (split) {
+            const mins = parseTime(split[2]);
+            const ms = Date.parse(split[1]);
+            if (mins !== null && !Number.isNaN(ms)) {
+                return combine(startOfDay(new Date(ms)), mins);
+            }
+        }
+        const ms = Date.parse(text);
+        if (Number.isNaN(ms))
+            return null;
+        const d = new Date(ms);
+        d.setSeconds(0, 0);
+        return d;
+    }
+    clamp(d) {
+        const min = this.min();
+        const max = this.max();
+        if (min && toMinute(d) < toMinute(min))
+            return combine(min, minutesOfDay$1(min));
+        if (max && toMinute(d) > toMinute(max))
+            return combine(max, minutesOfDay$1(max));
+        return d;
+    }
+    // --- Panel ---------------------------------------------------------------
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+        const sel = this.selectedIndex();
+        this.activeIndex.set(sel >= 0 ? sel : this.nearestIndex(new Date()));
+        afterNextRender({
+            write: () => {
+                const el = this.panelRef()?.nativeElement.querySelector('.mk-calendar__day[tabindex="0"]');
+                el?.focus();
+                this.scrollActiveIntoView();
+            },
+        }, { injector: this.injector });
+    }
+    close() {
+        if (this.open()) {
+            this.open.set(false);
+            this.activeIndex.set(-1);
+        }
+    }
+    /** Index of the first option at or after `d`'s time of day (for the initial highlight). */
+    nearestIndex(d) {
+        const mins = minutesOfDay$1(d);
+        const i = this.options().findIndex((o) => o.minutes >= mins);
+        return i >= 0 ? i : Math.max(0, this.options().length - 1);
+    }
+    onCalendarPick(day) {
+        if (!day)
+            return;
+        const current = this.value();
+        if (current) {
+            this.setValue(this.clamp(combine(day, minutesOfDay$1(current))));
+        }
+        else {
+            this.pendingDay.set(startOfDay(day));
+        }
+        // Hand focus to the time list so the second half of the pick is one
+        // keystroke away; the highlighted option follows the (new) value.
+        const sel = this.selectedIndex();
+        this.activeIndex.set(sel >= 0 ? sel : this.nearestIndex(current ?? new Date()));
+        afterNextRender({
+            write: () => {
+                this.timesRef()?.nativeElement.focus();
+                this.scrollActiveIntoView();
+            },
+        }, { injector: this.injector });
+    }
+    selectTime(index) {
+        const opt = this.options()[index];
+        if (!opt)
+            return;
+        const day = this.calendarValue() ?? startOfDay(new Date());
+        this.setValue(this.clamp(combine(day, opt.minutes)));
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    onListKeydown(event) {
+        const e = event;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                this.activeIndex.set(0);
+                this.scrollActiveIntoView();
+                break;
+            case 'End':
+                e.preventDefault();
+                this.activeIndex.set(this.options().length - 1);
+                this.scrollActiveIntoView();
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (this.activeIndex() >= 0)
+                    this.selectTime(this.activeIndex());
+                break;
+        }
+    }
+    moveActive(delta) {
+        const len = this.options().length;
+        if (!len)
+            return;
+        const next = (this.activeIndex() + delta + len) % len;
+        this.activeIndex.set(next);
+        this.scrollActiveIntoView();
+    }
+    scrollActiveIntoView() {
+        afterNextRender({
+            write: () => {
+                const el = this.timesRef()?.nativeElement.querySelector('.mk-datetime-picker__option--active');
+                el?.scrollIntoView({ block: 'nearest' });
+            },
+        }, { injector: this.injector });
+    }
+    // --- Field ----------------------------------------------------------------
+    onInput(event) {
+        this.inputText.set(event.target.value);
+    }
+    onInputKeydown(event) {
+        const e = event;
+        if (this.isDisabled())
+            return;
+        switch (e.key) {
+            case 'Enter':
+                e.preventDefault();
+                this.commitInput();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                this.openPanel();
+                break;
+            case 'Escape':
+                if (this.open()) {
+                    e.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    clear() {
+        this.pendingDay.set(null);
+        this.setValue(null);
+        this.inputRef()?.nativeElement.focus();
+    }
+    commitInput() {
+        const text = this.inputText().trim();
+        if (!text) {
+            this.setValue(null);
+            return;
+        }
+        const parsed = this.parse(text);
+        if (parsed) {
+            this.setValue(this.clamp(parsed));
+        }
+        else {
+            // Invalid entry — revert to the current model's display. The signal may
+            // already hold that string (the model did not change), so the `[value]`
+            // binding would not re-apply it: write the DOM value directly as well.
+            const v = this.value();
+            const text = v ? formatDate(v, this.effectiveFormat(), this.i18n.dateNames) : '';
+            this.inputText.set(text);
+            const el = this.inputRef()?.nativeElement;
+            if (el)
+                el.value = text;
+        }
+    }
+    setValue(date) {
+        if (date)
+            this.pendingDay.set(null);
+        this.value.set(date);
+        this.onChange(date);
+    }
+    onFocusOut(event) {
+        const related = event.relatedTarget;
+        // Ignore focus moving into the field or the (top-layer) panel.
+        if (related && this.host.nativeElement.contains(related))
+            return;
+        if (related && this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.commitInput();
+        this.close();
+        this.onTouched();
+    }
+    /**
+     * Escape pressed inside the (teleported) panel — close and return focus to
+     * the input. `preventDefault` + `stopPropagation` keep any outer Escape
+     * handling (e.g. a containing dialog) from also firing.
+     */
+    onPanelEscape(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close();
+        this.inputRef()?.nativeElement.focus();
+    }
+    /**
+     * Focus left the teleported panel. The host `(focusout)` never sees this —
+     * the panel lives under `document.body` — so Tab-out is handled here: close
+     * unless focus moved back into the field or stayed inside the panel.
+     */
+    onPanelFocusout(event) {
+        const related = event.relatedTarget;
+        if (!related)
+            return;
+        if (this.host.nativeElement.contains(related))
+            return;
+        if (this.panelRef()?.nativeElement.contains(related))
+            return;
+        this.commitInput();
+        this.close();
+        this.onTouched();
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.pendingDay.set(null);
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.min();
+        this.max();
+    });
+    /**
+     * Reports `mkMinDate` / `mkMaxDate` against the `[min]` and `[max]` inputs,
+     * comparing whole instants at minute precision.
+     */
+    validate(control) {
+        const v = control.value;
+        if (!(v instanceof Date) || Number.isNaN(v.getTime()))
+            return null;
+        const t = toMinute(v);
+        const min = this.min();
+        if (min && t < toMinute(min))
+            return { mkMinDate: { min, actual: v } };
+        const max = this.max();
+        if (max && t > toMinute(max))
+            return { mkMaxDate: { max, actual: v } };
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDateTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDateTimePicker, isStandalone: true, selector: "mk-datetime-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 }, 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 }, 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-datetime-picker--sm": "effectiveSize() === 'sm'", "class.mk-datetime-picker--md": "effectiveSize() === 'md'", "class.mk-datetime-picker--lg": "effectiveSize() === 'lg'", "class.mk-datetime-picker--open": "open()", "class.mk-datetime-picker--invalid": "isInvalid()", "class.mk-datetime-picker--disabled": "isDisabled()" }, classAttribute: "mk-datetime-picker" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkDateTimePicker),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkDateTimePicker),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "timesRef", first: true, predicate: ["times"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-datetime-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-datetime-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-datetime-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-datetime-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-datetime-picker__toggle\"\n    [attr.aria-label]=\"i18n.openDateTimePicker\"\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-datetime-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      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n      <path d=\"M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h6\" />\n      <circle cx=\"17.5\" cy=\"17.5\" r=\"4.5\" />\n      <path d=\"M17.5 15.5v2l1.5 1\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-datetime-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDateTime\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"calendarValue()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"calendarMin()\"\n      [max]=\"calendarMax()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n\n    <ul\n      #times\n      class=\"mk-datetime-picker__times\"\n      [id]=\"listId\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"i18n.chooseTime\"\n      [attr.aria-activedescendant]=\"\n        activeIndex() >= 0 && options()[activeIndex()] ? options()[activeIndex()].id : null\n      \"\n      (keydown)=\"onListKeydown($event)\"\n    >\n      @for (opt of options(); track opt.minutes; let i = $index) {\n        <li\n          class=\"mk-datetime-picker__option\"\n          [id]=\"opt.id\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === selectedIndex()\"\n          [class.mk-datetime-picker__option--active]=\"i === activeIndex()\"\n          [class.mk-datetime-picker__option--selected]=\"i === selectedIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"activeIndex.set(i)\"\n          (click)=\"selectTime(i)\"\n        >\n          {{ opt.label }}\n        </li>\n      } @empty {\n        <li class=\"mk-datetime-picker__empty\" role=\"presentation\">\n          {{ i18n.noOptions }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-datetime-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-datetime-picker--sm) .mk-datetime-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-datetime-picker--lg) .mk-datetime-picker__field{height:var(--mk-control-height-lg)}.mk-datetime-picker__field:hover{border-color:var(--mk-border-strong)}.mk-datetime-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-datetime-picker--invalid) .mk-datetime-picker__field{border-color:var(--mk-danger)}:host(.mk-datetime-picker--invalid) .mk-datetime-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-datetime-picker--disabled) .mk-datetime-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-datetime-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-datetime-picker--sm) .mk-datetime-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-datetime-picker--lg) .mk-datetime-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-datetime-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-datetime-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-datetime-picker__toggle,.mk-datetime-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-datetime-picker__toggle:hover:not(:disabled),.mk-datetime-picker__clear:hover{color:var(--mk-text)}.mk-datetime-picker__toggle:focus-visible,.mk-datetime-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-datetime-picker__toggle:disabled{cursor:not-allowed}.mk-datetime-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-datetime-picker__clear-icon:before,.mk-datetime-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-datetime-picker__clear-icon:before{transform:rotate(45deg)}.mk-datetime-picker__clear-icon:after{transform:rotate(-45deg)}.mk-datetime-picker__panel{display:flex;align-items:stretch;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-lg);overflow:hidden}.mk-datetime-picker__times{flex:none;width:8rem;max-height:21rem;margin:0;padding:var(--mk-space-1);overflow-y:auto;list-style:none;border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle);outline:none}.mk-datetime-picker__times:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-datetime-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;font-variant-numeric:tabular-nums}.mk-datetime-picker__option--active{background-color:var(--mk-selected-bg)}.mk-datetime-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-datetime-picker__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(max-width:480px){.mk-datetime-picker__panel{flex-direction:column}.mk-datetime-picker__times{width:auto;max-height:10rem;border-inline-start:0;border-top:var(--mk-border-width) solid var(--mk-border-subtle)}}@media(prefers-reduced-motion:reduce){.mk-datetime-picker__field,.mk-datetime-picker__toggle,.mk-datetime-picker__clear{transition:none}}@media(pointer:coarse){.mk-datetime-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-datetime-picker--sm) .mk-datetime-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}@media(pointer:coarse){.mk-datetime-picker__option{position:relative}.mk-datetime-picker__option:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}}\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: MkDateTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-datetime-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkCalendar, MkAnchoredPanel], host: {
+                        class: 'mk-datetime-picker',
+                        '[class.mk-datetime-picker--sm]': "effectiveSize() === 'sm'",
+                        '[class.mk-datetime-picker--md]': "effectiveSize() === 'md'",
+                        '[class.mk-datetime-picker--lg]': "effectiveSize() === 'lg'",
+                        '[class.mk-datetime-picker--open]': 'open()',
+                        '[class.mk-datetime-picker--invalid]': 'isInvalid()',
+                        '[class.mk-datetime-picker--disabled]': 'isDisabled()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkDateTimePicker),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkDateTimePicker),
+                            multi: true,
+                        },
+                    ], template: "<div #field class=\"mk-datetime-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-datetime-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-datetime-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-datetime-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-datetime-picker__toggle\"\n    [attr.aria-label]=\"i18n.openDateTimePicker\"\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-datetime-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      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n      <path d=\"M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h6\" />\n      <circle cx=\"17.5\" cy=\"17.5\" r=\"4.5\" />\n      <path d=\"M17.5 15.5v2l1.5 1\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-datetime-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDateTime\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"calendarValue()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"calendarMin()\"\n      [max]=\"calendarMax()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n\n    <ul\n      #times\n      class=\"mk-datetime-picker__times\"\n      [id]=\"listId\"\n      role=\"listbox\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"i18n.chooseTime\"\n      [attr.aria-activedescendant]=\"\n        activeIndex() >= 0 && options()[activeIndex()] ? options()[activeIndex()].id : null\n      \"\n      (keydown)=\"onListKeydown($event)\"\n    >\n      @for (opt of options(); track opt.minutes; let i = $index) {\n        <li\n          class=\"mk-datetime-picker__option\"\n          [id]=\"opt.id\"\n          role=\"option\"\n          [attr.aria-selected]=\"i === selectedIndex()\"\n          [class.mk-datetime-picker__option--active]=\"i === activeIndex()\"\n          [class.mk-datetime-picker__option--selected]=\"i === selectedIndex()\"\n          (mousedown)=\"$event.preventDefault()\"\n          (mousemove)=\"activeIndex.set(i)\"\n          (click)=\"selectTime(i)\"\n        >\n          {{ opt.label }}\n        </li>\n      } @empty {\n        <li class=\"mk-datetime-picker__empty\" role=\"presentation\">\n          {{ i18n.noOptions }}\n        </li>\n      }\n    </ul>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-datetime-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-datetime-picker--sm) .mk-datetime-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-datetime-picker--lg) .mk-datetime-picker__field{height:var(--mk-control-height-lg)}.mk-datetime-picker__field:hover{border-color:var(--mk-border-strong)}.mk-datetime-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-datetime-picker--invalid) .mk-datetime-picker__field{border-color:var(--mk-danger)}:host(.mk-datetime-picker--invalid) .mk-datetime-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-datetime-picker--disabled) .mk-datetime-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-datetime-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-datetime-picker--sm) .mk-datetime-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-datetime-picker--lg) .mk-datetime-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-datetime-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-datetime-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-datetime-picker__toggle,.mk-datetime-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-datetime-picker__toggle:hover:not(:disabled),.mk-datetime-picker__clear:hover{color:var(--mk-text)}.mk-datetime-picker__toggle:focus-visible,.mk-datetime-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-datetime-picker__toggle:disabled{cursor:not-allowed}.mk-datetime-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-datetime-picker__clear-icon:before,.mk-datetime-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-datetime-picker__clear-icon:before{transform:rotate(45deg)}.mk-datetime-picker__clear-icon:after{transform:rotate(-45deg)}.mk-datetime-picker__panel{display:flex;align-items:stretch;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-lg);overflow:hidden}.mk-datetime-picker__times{flex:none;width:8rem;max-height:21rem;margin:0;padding:var(--mk-space-1);overflow-y:auto;list-style:none;border-inline-start:var(--mk-border-width) solid var(--mk-border-subtle);outline:none}.mk-datetime-picker__times:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-datetime-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;font-variant-numeric:tabular-nums}.mk-datetime-picker__option--active{background-color:var(--mk-selected-bg)}.mk-datetime-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-datetime-picker__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(max-width:480px){.mk-datetime-picker__panel{flex-direction:column}.mk-datetime-picker__times{width:auto;max-height:10rem;border-inline-start:0;border-top:var(--mk-border-width) solid var(--mk-border-subtle)}}@media(prefers-reduced-motion:reduce){.mk-datetime-picker__field,.mk-datetime-picker__toggle,.mk-datetime-picker__clear{transition:none}}@media(pointer:coarse){.mk-datetime-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-datetime-picker--sm) .mk-datetime-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}@media(pointer:coarse){.mk-datetime-picker__option{position:relative}.mk-datetime-picker__option:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], timesRef: [{ type: i0.ViewChild, args: ['times', { 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 }] }], 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 }] }], 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 }] }] } });
+
 /**
  * DateRangePicker — select a start + end date from a single calendar popover.
  * The first click sets the start, the second sets the end (endpoints are
@@ -1598,7 +2143,7 @@ class MkDateRangePicker {
                 useExisting: forwardRef(() => MkDateRangePicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-date-range-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-date-range-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-date-range-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-date-range-picker__value mk-date-range-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n  </button>\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-range-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-range-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-range-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-range-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-range-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDateRange\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [rangeMode]=\"true\"\n      [rangeStart]=\"selStart()\"\n      [rangeEnd]=\"selEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDate]=\"disabledDate()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-range-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-range-picker--sm) .mk-date-range-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__field{height:var(--mk-control-height-lg)}.mk-date-range-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-range-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-range-picker--invalid) .mk-date-range-picker__field{border-color:var(--mk-danger)}:host(.mk-date-range-picker--invalid) .mk-date-range-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-range-picker--disabled) .mk-date-range-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-range-picker__trigger{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);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-date-range-picker--sm) .mk-date-range-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-range-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-range-picker__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-date-range-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-date-range-picker__toggle,.mk-date-range-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-range-picker__toggle:hover:not(:disabled),.mk-date-range-picker__clear:hover{color:var(--mk-text)}.mk-date-range-picker__toggle:focus-visible,.mk-date-range-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-range-picker__toggle:disabled{cursor:not-allowed}.mk-date-range-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-range-picker__clear-icon:before,.mk-date-range-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-range-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-range-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-range-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-range-picker__field,.mk-date-range-picker__toggle,.mk-date-range-picker__clear{transition:none}}\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"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-date-range-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-date-range-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-date-range-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-date-range-picker__value mk-date-range-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n  </button>\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-range-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-range-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-range-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-range-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-range-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDateRange\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [rangeMode]=\"true\"\n      [rangeStart]=\"selStart()\"\n      [rangeEnd]=\"selEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [disabledDate]=\"disabledDate()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-range-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-range-picker--sm) .mk-date-range-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__field{height:var(--mk-control-height-lg)}.mk-date-range-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-range-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-range-picker--invalid) .mk-date-range-picker__field{border-color:var(--mk-danger)}:host(.mk-date-range-picker--invalid) .mk-date-range-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-range-picker--disabled) .mk-date-range-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-range-picker__trigger{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);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-date-range-picker--sm) .mk-date-range-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-range-picker--lg) .mk-date-range-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-range-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-range-picker__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-date-range-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-date-range-picker__toggle,.mk-date-range-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-range-picker__toggle:hover:not(:disabled),.mk-date-range-picker__clear:hover{color:var(--mk-text)}.mk-date-range-picker__toggle:focus-visible,.mk-date-range-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-range-picker__toggle:disabled{cursor:not-allowed}.mk-date-range-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-range-picker__clear-icon:before,.mk-date-range-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-range-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-range-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-range-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-range-picker__field,.mk-date-range-picker__toggle,.mk-date-range-picker__clear{transition:none}}\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: MkDateRangePicker, decorators: [{
             type: Component,
@@ -1910,7 +2455,7 @@ class MkMonthPicker {
                 useExisting: forwardRef(() => MkMonthPicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "cellRefs", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-month-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-month-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-month-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-month-picker__value mk-month-picker__value--placeholder\">{{\n        resolvedPlaceholder()\n      }}</span>\n    }\n    <span class=\"mk-month-picker__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && value() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-month-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear($event)\"\n    >\n      <span class=\"mk-month-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-month-picker__panel\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"mode() === 'year' ? i18n.chooseYear : i18n.chooseMonth\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n  >\n    <div class=\"mk-month-picker__header\">\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.previousYears : i18n.previousYear\"\n        (click)=\"shiftView(-1)\"\n      >\n        \u2039\n      </button>\n      <span class=\"mk-month-picker__header-label\" aria-live=\"polite\">{{ headerLabel() }}</span>\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.nextYears : i18n.nextYear\"\n        (click)=\"shiftView(1)\"\n      >\n        \u203A\n      </button>\n    </div>\n\n    <div class=\"mk-month-picker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n      @for (cell of cells(); track cell.label; let i = $index) {\n        <button\n          #cell\n          type=\"button\"\n          class=\"mk-month-picker__cell\"\n          [class.mk-month-picker__cell--selected]=\"cell.selected\"\n          [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\n          [attr.aria-selected]=\"cell.selected\"\n          [disabled]=\"cell.disabled\"\n          (click)=\"selectCell(cell)\"\n        >\n          {{ cell.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-month-picker__field{display:flex;align-items:center;position:relative}.mk-month-picker__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-month-picker--sm) .mk-month-picker__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-month-picker--lg) .mk-month-picker__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-month-picker__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-month-picker__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-month-picker--invalid) .mk-month-picker__trigger{border-color:var(--mk-danger)}:host(.mk-month-picker--disabled) .mk-month-picker__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-month-picker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-month-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-month-picker__icon{flex:none;width:1rem;height:1rem;border:2px solid var(--mk-text-muted);border-radius:2px;position:relative}.mk-month-picker__icon:before{content:\"\";position:absolute;top:-3px;left:2px;right:2px;border-top:2px solid var(--mk-text-muted)}.mk-month-picker__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-month-picker__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__clear-icon:before,.mk-month-picker__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-month-picker__clear-icon:before{transform:rotate(45deg)}.mk-month-picker__clear-icon:after{transform:rotate(-45deg)}.mk-month-picker__panel{width:17rem;padding:var(--mk-space-2);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg)}.mk-month-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mk-space-1)}.mk-month-picker__header-label{font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-month-picker__nav{display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-month-picker__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mk-space-1)}.mk-month-picker__cell{padding:var(--mk-space-2) 0;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__cell:hover:not(:disabled){background-color:var(--mk-hover-overlay)}.mk-month-picker__cell:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-month-picker__cell--selected{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-month-picker__cell--selected:hover:not(:disabled){background-color:var(--mk-primary)}.mk-month-picker__cell:disabled{color:var(--mk-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: MkAnchoredPanel, selector: "[mkAnchoredPanel]", inputs: ["mkAnchoredPanelFor", "anchorRect", "placement", "gap", "matchWidth", "flip", "clamp"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "cellRefs", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-month-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-month-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-month-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-month-picker__value mk-month-picker__value--placeholder\">{{\n        resolvedPlaceholder()\n      }}</span>\n    }\n    <span class=\"mk-month-picker__icon\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (clearable() && value() && !isDisabled()) {\n    <button\n      type=\"button\"\n      class=\"mk-month-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear($event)\"\n    >\n      <span class=\"mk-month-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-month-picker__panel\"\n    role=\"dialog\"\n    [id]=\"panelId\"\n    [attr.aria-label]=\"mode() === 'year' ? i18n.chooseYear : i18n.chooseMonth\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n  >\n    <div class=\"mk-month-picker__header\">\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.previousYears : i18n.previousYear\"\n        (click)=\"shiftView(-1)\"\n      >\n        \u2039\n      </button>\n      <span class=\"mk-month-picker__header-label\" aria-live=\"polite\">{{ headerLabel() }}</span>\n      <button\n        type=\"button\"\n        class=\"mk-month-picker__nav\"\n        [attr.aria-label]=\"mode() === 'year' ? i18n.nextYears : i18n.nextYear\"\n        (click)=\"shiftView(1)\"\n      >\n        \u203A\n      </button>\n    </div>\n\n    <div class=\"mk-month-picker__grid\" role=\"grid\" (keydown)=\"onGridKeydown($event)\">\n      @for (cell of cells(); track cell.label; let i = $index) {\n        <button\n          #cell\n          type=\"button\"\n          class=\"mk-month-picker__cell\"\n          [class.mk-month-picker__cell--selected]=\"cell.selected\"\n          [attr.tabindex]=\"i === activeIndex() ? 0 : -1\"\n          [attr.aria-selected]=\"cell.selected\"\n          [disabled]=\"cell.disabled\"\n          (click)=\"selectCell(cell)\"\n        >\n          {{ cell.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-month-picker__field{display:flex;align-items:center;position:relative}.mk-month-picker__trigger{flex:1 1 auto;display:flex;align-items:center;gap:var(--mk-space-2);width:100%;height:var(--mk-control-height-md);padding:0 var(--mk-space-3);text-align:start;font:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);cursor:pointer}:host(.mk-month-picker--sm) .mk-month-picker__trigger{height:var(--mk-control-height-sm);padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-month-picker--lg) .mk-month-picker__trigger{height:var(--mk-control-height-lg);padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-month-picker__trigger:hover:not(:disabled){border-color:var(--mk-border-strong)}.mk-month-picker__trigger:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-month-picker--invalid) .mk-month-picker__trigger{border-color:var(--mk-danger)}:host(.mk-month-picker--disabled) .mk-month-picker__trigger{background-color:var(--mk-surface-2);color:var(--mk-text-disabled);cursor:not-allowed;opacity:.7}.mk-month-picker__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-month-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-month-picker__icon{flex:none;width:1rem;height:1rem;border:2px solid var(--mk-text-muted);border-radius:2px;position:relative}.mk-month-picker__icon:before{content:\"\";position:absolute;top:-3px;left:2px;right:2px;border-top:2px solid var(--mk-text-muted)}.mk-month-picker__clear{position:absolute;inset-inline-end:var(--mk-space-8);display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-circle);cursor:pointer}.mk-month-picker__clear:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__clear-icon:before,.mk-month-picker__clear-icon:after{content:\"\";position:absolute;width:.7rem;height:2px;background-color:currentColor}.mk-month-picker__clear-icon:before{transform:rotate(45deg)}.mk-month-picker__clear-icon:after{transform:rotate(-45deg)}.mk-month-picker__panel{width:17rem;padding:var(--mk-space-2);background:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-lg)}.mk-month-picker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mk-space-1)}.mk-month-picker__header-label{font-weight:var(--mk-font-weight-semibold);color:var(--mk-text)}.mk-month-picker__nav{display:grid;place-items:center;width:2rem;height:2rem;font-size:var(--mk-font-size-lg);color:var(--mk-text-muted);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-month-picker__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-month-picker__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mk-space-1)}.mk-month-picker__cell{padding:var(--mk-space-2) 0;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:none;border-radius:var(--mk-radius-sm);cursor:pointer}.mk-month-picker__cell:hover:not(:disabled){background-color:var(--mk-hover-overlay)}.mk-month-picker__cell:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(-1 * var(--mk-focus-ring-width))}.mk-month-picker__cell--selected{background-color:var(--mk-primary);color:var(--mk-primary-contrast)}.mk-month-picker__cell--selected:hover:not(:disabled){background-color:var(--mk-primary)}.mk-month-picker__cell:disabled{color:var(--mk-text-disabled);cursor:not-allowed}\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: MkMonthPicker, decorators: [{
             type: Component,
@@ -2140,7 +2685,7 @@ class MkWeekPicker {
                 useExisting: forwardRef(() => MkWeekPicker),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-week-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-week-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-week-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-week-picker__value mk-week-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n    <svg\n      class=\"mk-week-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\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-week-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-week-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-week-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseWeek\"\n  >\n    <mk-calendar\n      [value]=\"calendarValue()\"\n      [rangeMode]=\"true\"\n      [rangeStart]=\"highlightStart()\"\n      [rangeEnd]=\"highlightEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      (dateHovered)=\"onHover($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-week-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-week-picker--sm) .mk-week-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-week-picker--lg) .mk-week-picker__field{height:var(--mk-control-height-lg)}.mk-week-picker__field:hover{border-color:var(--mk-border-strong)}.mk-week-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-week-picker--invalid) .mk-week-picker__field{border-color:var(--mk-danger)}:host(.mk-week-picker--invalid) .mk-week-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-week-picker--disabled) .mk-week-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-week-picker__trigger{display:flex;align-items:center;gap:var(--mk-space-2);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);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-week-picker--sm) .mk-week-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-week-picker--lg) .mk-week-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-week-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-week-picker__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-week-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-week-picker__icon{flex:none;color:var(--mk-text-muted)}.mk-week-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-week-picker__clear:hover{color:var(--mk-text)}.mk-week-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-week-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-week-picker__clear-icon:before,.mk-week-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-week-picker__clear-icon:before{transform:rotate(45deg)}.mk-week-picker__clear-icon:after{transform:rotate(-45deg)}.mk-week-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-week-picker__field,.mk-week-picker__clear{transition:none}}\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"], outputs: ["dismiss"], exportAs: ["mkAnchoredPanel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #field class=\"mk-week-picker__field\">\n  <button\n    #trigger\n    type=\"button\"\n    class=\"mk-week-picker__trigger\"\n    [id]=\"triggerId\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    @if (displayLabel()) {\n      <span class=\"mk-week-picker__value\">{{ displayLabel() }}</span>\n    } @else {\n      <span class=\"mk-week-picker__value mk-week-picker__value--placeholder\">{{\n        placeholder()\n      }}</span>\n    }\n    <svg\n      class=\"mk-week-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\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-week-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-week-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-week-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseWeek\"\n  >\n    <mk-calendar\n      [value]=\"calendarValue()\"\n      [rangeMode]=\"true\"\n      [rangeStart]=\"highlightStart()\"\n      [rangeEnd]=\"highlightEnd()\"\n      (dateSelected)=\"onPick($event)\"\n      (dateHovered)=\"onHover($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-week-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-week-picker--sm) .mk-week-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-week-picker--lg) .mk-week-picker__field{height:var(--mk-control-height-lg)}.mk-week-picker__field:hover{border-color:var(--mk-border-strong)}.mk-week-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-week-picker--invalid) .mk-week-picker__field{border-color:var(--mk-danger)}:host(.mk-week-picker--invalid) .mk-week-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-week-picker--disabled) .mk-week-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-week-picker__trigger{display:flex;align-items:center;gap:var(--mk-space-2);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);text-align:start;background:transparent;border:0;outline:none;cursor:pointer}:host(.mk-week-picker--sm) .mk-week-picker__trigger{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-week-picker--lg) .mk-week-picker__trigger{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-week-picker__trigger:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-week-picker__value{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mk-week-picker__value--placeholder{color:var(--mk-text-subtle)}.mk-week-picker__icon{flex:none;color:var(--mk-text-muted)}.mk-week-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-week-picker__clear:hover{color:var(--mk-text)}.mk-week-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-week-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-week-picker__clear-icon:before,.mk-week-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-week-picker__clear-icon:before{transform:rotate(45deg)}.mk-week-picker__clear-icon:after{transform:rotate(-45deg)}.mk-week-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-week-picker__field,.mk-week-picker__clear{transition:none}}\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: MkWeekPicker, decorators: [{
             type: Component,
@@ -3405,5 +3950,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MkCalendar, MkDatePicker, MkDateRangePicker, MkEventCalendar, MkMiniDate, MkMonthPicker, MkTimePicker, MkWeekPicker, addDays, addMonths, buildMonthMatrix, clampDate, endOfMonth, endOfWeek, formatDate, formatISODate, getISOWeek, getMonthNames, getWeekdayFullName, getWeekdayNames, isAfter, isBefore, isSameDay, isSameMonth, parseISODate, startOfDay, startOfMonth, startOfWeek };
+export { MkCalendar, MkDatePicker, MkDateRangePicker, MkDateTimePicker, MkEventCalendar, MkMiniDate, MkMonthPicker, MkTimePicker, MkWeekPicker, addDays, addMonths, buildMonthMatrix, clampDate, endOfMonth, endOfWeek, formatDate, formatISODate, getISOWeek, getMonthNames, getWeekdayFullName, getWeekdayNames, isAfter, isBefore, isSameDay, isSameMonth, parseISODate, startOfDay, startOfMonth, startOfWeek };
 //# sourceMappingURL=mk-kit-ui-datetime.mjs.map