@mk-kit/ui 0.41.0 → 0.43.0

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Injector, model, input, numberAttribute, booleanAttribute, output, signal, computed, effect, untracked, afterNextRender, forwardRef, ChangeDetectionStrategy, Component, viewChild, viewChildren } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { MK_I18N, MkLiveAnnouncer, mkUniqueId, mkValidatorChange, MkAnchoredPanel } from '@mk-kit/ui/core';
+import { MK_I18N, MkLiveAnnouncer, mkUniqueId, mkInjectFieldTouched, mkValidatorChange, MkAnchoredPanel } from '@mk-kit/ui/core';
 import { MkFormField } from '@mk-kit/ui/forms';
 import { DOCUMENT } from '@angular/common';
 
@@ -282,11 +282,13 @@ class MkCalendar {
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (inclusive, day granularity). */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable date (inclusive, day granularity). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** First column of the week: 0 = Sunday … 6 = Saturday. */
     firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Disable the whole calendar. */
@@ -340,7 +342,9 @@ class MkCalendar {
     /** Disabled by the `disabled` input or by the bound form control. */
     isControlDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isControlDisabled" }] : /* istanbul ignore next */ []));
-    isInvalid = computed(() => this.invalid(), /* @ts-ignore */
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
+    isInvalid = computed(() => this.invalid() && this.fieldTouched(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
     /** First day of the visible month. */
     viewMonth = computed(() => startOfMonth(this.focusedDate()), /* @ts-ignore */
@@ -609,7 +613,7 @@ class MkCalendar {
                 useExisting: forwardRef(() => MkCalendar),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-disabled)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-subtle)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCalendar, decorators: [{
             type: Component,
@@ -635,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class.mk-calendar--range]': 'rangeMode()',
                         '[class.mk-calendar--invalid]': 'isInvalid()',
                         '[attr.aria-invalid]': 'isInvalid() || null',
-                    }, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-disabled)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"] }]
+                    }, template: "<div class=\"mk-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.previousMonth\"\n    (click)=\"prevMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M15 5l-7 7 7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n\n  <span class=\"mk-calendar__label\" [id]=\"labelId\" aria-live=\"polite\">{{\n    monthLabel()\n  }}</span>\n\n  <button\n    type=\"button\"\n    class=\"mk-calendar__nav\"\n    [attr.aria-label]=\"i18n.nextMonth\"\n    (click)=\"nextMonth()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\">\n      <path\n        d=\"M9 5l7 7-7 7\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  </button>\n</div>\n\n<table\n  class=\"mk-calendar__grid\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"labelId\"\n  (keydown)=\"onGridKeydown($event)\"\n>\n  <thead>\n    <tr>\n      @for (wd of weekdays(); track $index) {\n        <th class=\"mk-calendar__weekday\" scope=\"col\">\n          <abbr [title]=\"wd.full\">{{ wd.short }}</abbr>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody (mouseleave)=\"clearHover()\">\n    @for (week of weeks(); track $index) {\n      <tr>\n        @for (day of week; track day.getTime()) {\n          <td\n            class=\"mk-calendar__cell\"\n            role=\"gridcell\"\n            [attr.aria-selected]=\"isAriaSelected(day) || null\"\n          >\n            <button\n              type=\"button\"\n              class=\"mk-calendar__day\"\n              [class.mk-calendar__day--outside]=\"isOutside(day)\"\n              [class.mk-calendar__day--today]=\"isToday(day)\"\n              [class.mk-calendar__day--selected]=\"isSelected(day)\"\n              [class.mk-calendar__day--range-start]=\"isRangeStart(day)\"\n              [class.mk-calendar__day--range-end]=\"isRangeEnd(day)\"\n              [class.mk-calendar__day--in-range]=\"isInRange(day)\"\n              [class.mk-calendar__day--disabled]=\"isDisabled(day)\"\n              [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n              [attr.aria-label]=\"dayLabel(day)\"\n              [attr.aria-current]=\"isToday(day) ? 'date' : null\"\n              [attr.aria-disabled]=\"isDisabled(day) || null\"\n              (click)=\"select(day)\"\n              (mouseenter)=\"onHover(day)\"\n            >\n              <span class=\"mk-calendar__day-num\">{{ day.getDate() }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", styles: ["@charset \"UTF-8\";:host{--_cell-size: 2.5rem;display:inline-block;width:fit-content;max-width:100%;padding:var(--mk-space-4);font-family:var(--mk-font-sans);color:var(--mk-text);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-lg);box-shadow:var(--mk-shadow-xs)}:host(.mk-calendar--full){display:block;width:100%;min-width:min-content}:host(.mk-calendar--full) .mk-calendar__grid{width:100%}:host(.mk-calendar--full) .mk-calendar__weekday{width:auto;min-width:var(--_cell-size)}:host(.mk-calendar--full) .mk-calendar__day{width:100%;min-width:var(--_cell-size)}:host(.mk-calendar--sm){--_cell-size: 2.1rem;padding:var(--mk-space-3);font-size:var(--mk-font-size-sm)}:host(.mk-calendar--lg){--_cell-size: 2.9rem;font-size:var(--mk-font-size-lg)}.mk-calendar__header{display:flex;align-items:center;gap:var(--mk-space-1);margin-bottom:var(--mk-space-2)}.mk-calendar__label{flex:1 1 auto;text-align:center;font-weight:var(--mk-font-weight-semibold);font-size:var(--mk-font-size-md);white-space:nowrap}.mk-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);flex:none;color:var(--mk-text-muted);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__nav:hover{background-color:var(--mk-hover-overlay);color:var(--mk-text)}.mk-calendar__nav:active{background-color:var(--mk-active-overlay)}.mk-calendar__nav:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-calendar__nav svg{display:block}.mk-calendar__grid{border-collapse:separate;border-spacing:0;table-layout:fixed}.mk-calendar__weekday{width:var(--_cell-size);padding:0 0 var(--mk-space-2);font-size:var(--mk-font-size-xs);font-weight:var(--mk-font-weight-semibold);letter-spacing:var(--mk-letter-spacing-wide);text-transform:uppercase;color:var(--mk-text-subtle)}.mk-calendar__weekday abbr{text-decoration:none;cursor:default}.mk-calendar__cell{padding:1px;text-align:center}.mk-calendar__day{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--_cell-size);height:var(--_cell-size);font-family:inherit;font-size:var(--mk-font-size-sm);color:var(--mk-text);background:transparent;border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);cursor:pointer;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-calendar__day:hover:not(.mk-calendar__day--disabled){background-color:var(--mk-hover-overlay)}.mk-calendar__day:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1)}.mk-calendar__day--outside{color:var(--mk-text-subtle)}.mk-calendar__day--today:after{content:\"\";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:var(--mk-radius-circle);background-color:var(--mk-primary);transform:translate(-50%)}.mk-calendar__day--in-range{background-color:var(--mk-primary-subtle);border-radius:0}.mk-calendar__day--selected,.mk-calendar__day--range-start,.mk-calendar__day--range-end{background-color:var(--mk-primary);color:var(--mk-primary-contrast);font-weight:var(--mk-font-weight-semibold)}.mk-calendar__day--selected:hover,.mk-calendar__day--range-start:hover,.mk-calendar__day--range-end:hover{background-color:var(--mk-primary-hover)}.mk-calendar__day--range-start{border-start-end-radius:0;border-end-end-radius:0}.mk-calendar__day--range-end{border-start-start-radius:0;border-end-start-radius:0}.mk-calendar__day--today.mk-calendar__day--selected:after,.mk-calendar__day--today.mk-calendar__day--range-start:after,.mk-calendar__day--today.mk-calendar__day--range-end:after{background-color:var(--mk-primary-contrast)}.mk-calendar__day--disabled{color:var(--mk-text-disabled);cursor:not-allowed;opacity:.6}.mk-calendar__day-num{line-height:1}@media(prefers-reduced-motion:reduce){.mk-calendar__nav,.mk-calendar__day{transition:none}}.mk-calendar--disabled{opacity:.55;pointer-events:none}:host(.mk-calendar--invalid){border-color:var(--mk-danger)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateHovered: [{ type: i0.Output, args: ["dateHovered"] }] } });
 
 /**
@@ -655,6 +659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkDatePicker {
     i18n = inject(MK_I18N);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     injector = inject(Injector);
     inputRef = viewChild('textInput', /* @ts-ignore */
@@ -670,11 +676,13 @@ class MkDatePicker {
     ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     ariaLabelAttr = computed(() => (this.field ? null : this.ariaLabel() || null), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabelAttr" }] : /* istanbul ignore next */ []));
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable date (inclusive). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Predicate marking individual days as disabled (threaded to the calendar). */
     disabledDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
@@ -690,6 +698,8 @@ class MkDatePicker {
     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 });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* 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`. */
@@ -710,9 +720,9 @@ class MkDatePicker {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (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 */ []));
@@ -890,7 +900,7 @@ class MkDatePicker {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDatePicker, isStandalone: true, selector: "mk-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-date-picker--sm": "effectiveSize() === 'sm'", "class.mk-date-picker--md": "effectiveSize() === 'md'", "class.mk-date-picker--lg": "effectiveSize() === 'lg'", "class.mk-date-picker--open": "open()", "class.mk-date-picker--invalid": "isInvalid()", "class.mk-date-picker--disabled": "isDisabled()" }, classAttribute: "mk-date-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkDatePicker, isStandalone: true, selector: "mk-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabledDate: { classPropertyName: "disabledDate", publicName: "disabledDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-date-picker--sm": "effectiveSize() === 'sm'", "class.mk-date-picker--md": "effectiveSize() === 'md'", "class.mk-date-picker--lg": "effectiveSize() === 'lg'", "class.mk-date-picker--open": "open()", "class.mk-date-picker--invalid": "isInvalid()", "class.mk-date-picker--disabled": "isDisabled()" }, classAttribute: "mk-date-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkDatePicker),
@@ -926,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<div #field class=\"mk-date-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-date-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    [attr.aria-label]=\"ariaLabelAttr()\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-date-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-date-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-date-picker__toggle\"\n    [attr.aria-label]=\"i18n.openCalendar\"\n    aria-haspopup=\"dialog\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"panelId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-date-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"17\" rx=\"2\" />\n      <path d=\"M3 9h18M8 2v4M16 2v4\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <div\n    #panel\n    class=\"mk-date-picker__panel\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    (dismiss)=\"close()\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    [attr.aria-label]=\"i18n.chooseDate\"\n    (keydown.escape)=\"onPanelEscape($event)\"\n    (focusout)=\"onPanelFocusout($event)\"\n  >\n    <mk-calendar\n      [value]=\"value()\"\n      (valueChange)=\"onCalendarPick($event)\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      [size]=\"effectiveSize()\"\n      [disabledDate]=\"disabledDate()\"\n    />\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-date-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-date-picker--sm) .mk-date-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-date-picker--lg) .mk-date-picker__field{height:var(--mk-control-height-lg)}.mk-date-picker__field:hover{border-color:var(--mk-border-strong)}.mk-date-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-date-picker--invalid) .mk-date-picker__field{border-color:var(--mk-danger)}:host(.mk-date-picker--invalid) .mk-date-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-date-picker--disabled) .mk-date-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-date-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-date-picker--sm) .mk-date-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-date-picker--lg) .mk-date-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-date-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-date-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-date-picker__toggle,.mk-date-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-date-picker__toggle:hover:not(:disabled),.mk-date-picker__clear:hover{color:var(--mk-text)}.mk-date-picker__toggle:focus-visible,.mk-date-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-date-picker__toggle:disabled{cursor:not-allowed}.mk-date-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-date-picker__clear-icon:before,.mk-date-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-date-picker__clear-icon:before{transform:rotate(45deg)}.mk-date-picker__clear-icon:after{transform:rotate(-45deg)}.mk-date-picker__panel{box-shadow:var(--mk-shadow-lg);border-radius:var(--mk-radius-lg)}@media(prefers-reduced-motion:reduce){.mk-date-picker__field,.mk-date-picker__toggle,.mk-date-picker__clear{transition:none}}@media(pointer:coarse){.mk-date-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-date-picker--sm) .mk-date-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabledDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 function pad2$1(n) {
     return n < 10 ? `0${n}` : `${n}`;
@@ -961,6 +971,8 @@ function pad2$1(n) {
 class MkTimePicker {
     i18n = inject(MK_I18N);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     injector = inject(Injector);
     inputRef = viewChild('textInput', /* @ts-ignore */
@@ -983,11 +995,13 @@ class MkTimePicker {
     valueFormat = input('string', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
     /** Earliest selectable time `HH:mm` (inclusive). */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable time `HH:mm` (inclusive). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Interval between generated options, in minutes. */
     step = input(30, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Display 12-hour time with AM/PM (the model stays 24h). */
@@ -1001,6 +1015,8 @@ class MkTimePicker {
     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 });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Control size. Ignored when nested in an `mk-form-field`. */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -1027,9 +1043,9 @@ class MkTimePicker {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (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 */ []));
@@ -1332,7 +1348,7 @@ class MkTimePicker {
         this.validatorChange.register(fn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTimePicker, isStandalone: true, selector: "mk-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-time-picker--sm": "effectiveSize() === 'sm'", "class.mk-time-picker--md": "effectiveSize() === 'md'", "class.mk-time-picker--lg": "effectiveSize() === 'lg'", "class.mk-time-picker--open": "open()", "class.mk-time-picker--invalid": "isInvalid()", "class.mk-time-picker--disabled": "isDisabled()" }, classAttribute: "mk-time-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkTimePicker, isStandalone: true, selector: "mk-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hour12: { classPropertyName: "hour12", publicName: "hour12", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class.mk-time-picker--sm": "effectiveSize() === 'sm'", "class.mk-time-picker--md": "effectiveSize() === 'md'", "class.mk-time-picker--lg": "effectiveSize() === 'lg'", "class.mk-time-picker--open": "open()", "class.mk-time-picker--invalid": "isInvalid()", "class.mk-time-picker--disabled": "isDisabled()" }, classAttribute: "mk-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MkTimePicker),
@@ -1368,7 +1384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             multi: true,
                         },
                     ], template: "<div #field class=\"mk-time-picker__field\">\n  <input\n    #textInput\n    type=\"text\"\n    class=\"mk-time-picker__input\"\n    [id]=\"inputId\"\n    [value]=\"inputText()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    autocomplete=\"off\"\n    role=\"combobox\"\n    [attr.aria-label]=\"ariaLabelAttr()\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"none\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-activedescendant]=\"\n      open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\n    \"\n    [attr.aria-invalid]=\"isInvalid() || null\"\n    [attr.aria-required]=\"isRequired() || null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n  />\n\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"mk-time-picker__clear\"\n      [attr.aria-label]=\"i18n.clear\"\n      (click)=\"clear()\"\n    >\n      <span class=\"mk-time-picker__clear-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n\n  <button\n    type=\"button\"\n    class=\"mk-time-picker__toggle\"\n    [attr.aria-label]=\"i18n.openTimeList\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listId\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <svg\n      class=\"mk-time-picker__icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"18\"\n      height=\"18\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 7v5l3 2\" />\n    </svg>\n  </button>\n</div>\n\n@if (open()) {\n  <ul\n    #list\n    class=\"mk-time-picker__list\"\n    mkAnchoredPanel\n    [mkAnchoredPanelFor]=\"field\"\n    [matchWidth]=\"true\"\n    (dismiss)=\"close()\"\n    [id]=\"listId\"\n    role=\"listbox\"\n  >\n    @for (opt of options(); track opt.value; let i = $index) {\n      <li\n        class=\"mk-time-picker__option\"\n        [id]=\"optionId(i)\"\n        role=\"option\"\n        [attr.aria-selected]=\"i === selectedIndex()\"\n        [class.mk-time-picker__option--active]=\"i === activeIndex()\"\n        [class.mk-time-picker__option--selected]=\"i === selectedIndex()\"\n        (mousedown)=\"$event.preventDefault()\"\n        (mousemove)=\"activeIndex.set(i)\"\n        (click)=\"selectOption(i)\"\n      >\n        {{ opt.label }}\n      </li>\n    } @empty {\n      <li class=\"mk-time-picker__empty\" role=\"presentation\">\n        {{ i18n.noOptions }}\n      </li>\n    }\n  </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative;width:100%;font-family:var(--mk-font-sans)}.mk-time-picker__field{display:flex;align-items:center;width:100%;height:var(--mk-control-height-md);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);transition:border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host(.mk-time-picker--sm) .mk-time-picker__field{height:var(--mk-control-height-sm);border-radius:var(--mk-radius-sm)}:host(.mk-time-picker--lg) .mk-time-picker__field{height:var(--mk-control-height-lg)}.mk-time-picker__field:hover{border-color:var(--mk-border-strong)}.mk-time-picker__field:focus-within{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);border-color:var(--mk-primary)}:host(.mk-time-picker--invalid) .mk-time-picker__field{border-color:var(--mk-danger)}:host(.mk-time-picker--invalid) .mk-time-picker__field:focus-within{outline-color:var(--mk-danger)}:host(.mk-time-picker--disabled) .mk-time-picker__field{background-color:var(--mk-surface-2);border-color:var(--mk-border-subtle);cursor:not-allowed;opacity:.7}.mk-time-picker__input{flex:1 1 auto;min-width:0;height:100%;padding:0 var(--mk-space-3);font-family:inherit;font-size:var(--mk-font-size-md);color:var(--mk-text);background:transparent;border:0;outline:none}:host(.mk-time-picker--sm) .mk-time-picker__input{padding:0 var(--mk-space-2);font-size:var(--mk-font-size-sm)}:host(.mk-time-picker--lg) .mk-time-picker__input{padding:0 var(--mk-space-4);font-size:var(--mk-font-size-lg)}.mk-time-picker__input::placeholder{color:var(--mk-text-subtle);opacity:1}.mk-time-picker__input:disabled{color:var(--mk-text-disabled);cursor:not-allowed}.mk-time-picker__toggle,.mk-time-picker__clear{display:inline-flex;align-items:center;justify-content:center;flex:none;height:100%;padding:0 var(--mk-space-2);color:var(--mk-text-muted);background:transparent;border:0;cursor:pointer;transition:color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-time-picker__toggle:hover:not(:disabled),.mk-time-picker__clear:hover{color:var(--mk-text)}.mk-time-picker__toggle:focus-visible,.mk-time-picker__clear:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:calc(var(--mk-focus-ring-offset) * -1);border-radius:var(--mk-radius-sm)}.mk-time-picker__toggle:disabled{cursor:not-allowed}.mk-time-picker__clear-icon{position:relative;width:.85rem;height:.85rem}.mk-time-picker__clear-icon:before,.mk-time-picker__clear-icon:after{content:\"\";position:absolute;top:50%;left:0;width:100%;height:2px;background-color:currentColor}.mk-time-picker__clear-icon:before{transform:rotate(45deg)}.mk-time-picker__clear-icon:after{transform:rotate(-45deg)}.mk-time-picker__list{padding:var(--mk-space-1);list-style:none;max-height:15rem;overflow-y:auto;background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-lg)}.mk-time-picker__option{padding:var(--mk-space-2) var(--mk-space-3);font-size:var(--mk-font-size-md);color:var(--mk-text);border-radius:var(--mk-radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.mk-time-picker__option--active{background-color:var(--mk-selected-bg)}.mk-time-picker__option--selected{color:var(--mk-selected-text);font-weight:var(--mk-font-weight-medium)}.mk-time-picker__empty{padding:var(--mk-space-2) var(--mk-space-3);color:var(--mk-text-subtle);font-size:var(--mk-font-size-sm)}@media(prefers-reduced-motion:reduce){.mk-time-picker__field,.mk-time-picker__toggle,.mk-time-picker__clear{transition:none}}@media(pointer:coarse){.mk-time-picker__input{font-size:max(var(--mk-font-size-md),16px)}:host(.mk-time-picker--sm) .mk-time-picker__input{font-size:max(var(--mk-font-size-sm),16px)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hour12: [{ type: i0.Input, args: [{ isSignal: true, alias: "hour12", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 function pad2(n) {
     return n < 10 ? `0${n}` : `${n}`;
@@ -1435,6 +1451,8 @@ function parseTime(text) {
 class MkDateTimePicker {
     i18n = inject(MK_I18N);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     injector = inject(Injector);
     inputRef = viewChild('textInput', /* @ts-ignore */
@@ -1448,11 +1466,13 @@ class MkDateTimePicker {
     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 */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable instant (inclusive, minute precision). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Predicate marking individual days as disabled (threaded to the calendar). */
     disabledDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
@@ -1475,6 +1495,8 @@ class MkDateTimePicker {
     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 });
+    /** Mark required (adds `aria-required`). Set by Signal Forms' `[formField]` from the schema. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* 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`. */
@@ -1502,9 +1524,9 @@ class MkDateTimePicker {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (this.field?.hasError() ?? false), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.field?.isRequired() ?? false, /* @ts-ignore */
+    isRequired = computed(() => this.required() || (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 */ []));
@@ -1863,7 +1885,7 @@ class MkDateTimePicker {
         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: [
+    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 }, required: { classPropertyName: "required", publicName: "required", 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),
@@ -1899,7 +1921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             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 }] }] } });
+        }], 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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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.
@@ -1915,6 +1937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkDateRangePicker {
     i18n = inject(MK_I18N);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     injector = inject(Injector);
     triggerRef = viewChild('trigger', /* @ts-ignore */
@@ -1926,11 +1950,13 @@ class MkDateRangePicker {
     value = model({ start: null, end: null }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (inclusive). */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable date (inclusive). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Predicate marking individual days as disabled. */
     disabledDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDate" }] : /* istanbul ignore next */ []));
@@ -1969,7 +1995,7 @@ class MkDateRangePicker {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (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 */ []));
@@ -2193,6 +2219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkMonthPicker {
     i18n = inject(MK_I18N);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     injector = inject(Injector);
     triggerRef = viewChild('trigger', /* @ts-ignore */
@@ -2208,11 +2236,13 @@ class MkMonthPicker {
     mode = input('month', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date. */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable date. */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Placeholder shown when empty. */
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -2245,7 +2275,7 @@ class MkMonthPicker {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (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 */ []));
@@ -2503,6 +2533,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class MkWeekPicker {
     i18n = inject(MK_I18N);
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     host = inject(ElementRef);
     injector = inject(Injector);
     triggerRef = viewChild('trigger', /* @ts-ignore */
@@ -2513,11 +2545,13 @@ class MkWeekPicker {
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (inclusive). */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Latest selectable date (inclusive). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** First column of the calendar week (0 = Sunday). Also anchors the week. */
     firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Placeholder shown when empty. */
@@ -2552,7 +2586,7 @@ class MkWeekPicker {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (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 */ []));
@@ -3591,15 +3625,19 @@ function daysInMonth(m, year) {
  */
 class MkMiniDate {
     field = inject(MkFormField, { optional: true });
+    /** Signal Forms: gates `invalid` until the bound field is touched or dirty. */
+    fieldTouched = mkInjectFieldTouched();
     i18n = inject(MK_I18N);
     segEls = viewChildren('seg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "segEls" }] : /* istanbul ignore next */ []));
     /** Minimum selectable date (inclusive). */
-    min = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `min()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Maximum selectable date (inclusive). */
-    max = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), 
+        // Signal Forms binds the schema's `max()` limit here, `undefined` when unset.
+        transform: (v) => v ?? null });
     /** Two-way value — a real `Date`, or `null` while incomplete. */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -3636,7 +3674,7 @@ class MkMiniDate {
     ...(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 */
+    isInvalid = computed(() => (this.invalid() && this.fieldTouched()) || (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 */ []));