@skra/ui 0.2.0 → 0.3.0

package/fesm2022/skra-ui-datepicker.mjs

@@ -327,63 +327,88 @@ let nextDatePickerId = 0;
  */
 class SkraDatePicker {
     /** Consumer-owned value: ISO 8601 date-only (`YYYY-MM-DD`); `''` = unset. NEVER a Date (ADR 0050/037). */
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Inclusive lower bound (ISO); `''` = unbounded (ADR 0050 §2). */
-    min = input('', ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    min = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     /** Inclusive upper bound (ISO); `''` = unbounded. */
-    max = input('', ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    max = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     /** `Intl` locale (BCP-47); `undefined` → host default (ADR 0050 §5). */
-    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     /** First day of week, ISO 1=Mon … 7=Sun; overrides `Intl.getWeekInfo` (the MVP safety valve, ADR 0050 §5). */
-    firstDayOfWeek = input(undefined, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
     /** Value-empty hint in the trigger (NOT the accessible name — ADR 033). */
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Placement intent; flip/shift adjust at runtime. */
-    placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    placement = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
     /** Standalone availability source — `SkraFieldContext` wins when present. */
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Fires ONLY on user date selection — never on a programmatic `value()` change (ADR 037/0050). */
     valueChange = output();
-    triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
-    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     context = inject(SkraFieldContext, { optional: true });
     injector = inject(Injector);
     keyboard = new SkraCalendarKeyboard();
     panelId = `skra-datepicker-${nextDatePickerId}`;
     monthYearId = `skra-datepicker-monthyear-${nextDatePickerId++}`;
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /** Today's LOCAL date (ADR 0050 §3) — stable for the session. */
     todayIso = today();
     /** The roving-focus day; SINGLE source of truth for what the grid shows AND which cell is focusable. */
-    focusedIso = signal(this.todayIso, ...(ngDevMode ? [{ debugName: "focusedIso" }] : /* istanbul ignore next */ []));
+    focusedIso = signal(this.todayIso, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedIso" }] : /* istanbul ignore next */ []));
     positioner;
     /** Set when a close should return focus to the trigger (keyboard/select), not on outside-click. */
     returnFocus = false;
     // ── Availability / validation (SkraFieldContext, ADR 013, with standalone fallbacks) ──
-    isDisabled = computed(() => this.context?.isDisabled() ?? this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isReadonly = computed(() => this.context?.isReadonly() ?? this.readonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => this.context?.hasError() ?? false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    isRequired = computed(() => this.context?.isRequired() ?? false, ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
-    triggerId = computed(() => this.context?.fieldId() || null, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => this.context?.describedByIds() ?? null, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.context?.isDisabled() ?? this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isReadonly = computed(() => this.context?.isReadonly() ?? this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.context?.hasError() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.context?.isRequired() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    triggerId = computed(() => this.context?.fieldId() || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.context?.describedByIds() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     // ── Derived calendar state ──
     /** The committed value, defensively normalized: invalid/out-of-range → `''` for display (ADR 0050 §1). */
     selectedIso = computed(() => {
         const v = this.value();
         return isValidIso(v) && isInRange(v, this.min(), this.max()) ? v : '';
-    }, ...(ngDevMode ? [{ debugName: "selectedIso" }] : /* istanbul ignore next */ []));
-    formattedValue = computed(() => formatValue(this.selectedIso(), this.locale()), ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
-    firstDow = computed(() => resolveFirstDayOfWeek(this.firstDayOfWeek(), this.locale()), ...(ngDevMode ? [{ debugName: "firstDow" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIso" }] : /* istanbul ignore next */ []));
+    formattedValue = computed(() => formatValue(this.selectedIso(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedValue" }] : /* istanbul ignore next */ []));
+    firstDow = computed(() => resolveFirstDayOfWeek(this.firstDayOfWeek(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDow" }] : /* istanbul ignore next */ []));
     /** The month being shown — always the focused day's month (keeps the roving tabindex valid). */
     displayedMonth = computed(() => {
         const p = parseIso(this.focusedIso()) ?? parseIso(this.todayIso);
         return { y: p.y, m: p.m };
-    }, ...(ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []));
-    monthYearLabel = computed(() => formatMonthYear(this.displayedMonth().y, this.displayedMonth().m, this.locale()), ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
-    prevMonthLabel = computed(() => this.monthOffsetLabel(-1), ...(ngDevMode ? [{ debugName: "prevMonthLabel" }] : /* istanbul ignore next */ []));
-    nextMonthLabel = computed(() => this.monthOffsetLabel(1), ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
-    weekdayHeadersView = computed(() => weekdayHeaders(this.firstDow(), this.locale()), ...(ngDevMode ? [{ debugName: "weekdayHeadersView" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedMonth" }] : /* istanbul ignore next */ []));
+    monthYearLabel = computed(() => formatMonthYear(this.displayedMonth().y, this.displayedMonth().m, this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthYearLabel" }] : /* istanbul ignore next */ []));
+    prevMonthLabel = computed(() => this.monthOffsetLabel(-1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevMonthLabel" }] : /* istanbul ignore next */ []));
+    nextMonthLabel = computed(() => this.monthOffsetLabel(1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
+    weekdayHeadersView = computed(() => weekdayHeaders(this.firstDow(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayHeadersView" }] : /* istanbul ignore next */ []));
     weeks = computed(() => {
         const { y, m } = this.displayedMonth();
         const loc = this.locale();
@@ -406,7 +431,8 @@ class SkraDatePicker {
                     focused: iso === foc,
                 }),
         }));
-    }, ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
     constructor() {
         inject(DestroyRef).onDestroy(() => this.positioner?.destroy());
         if (typeof ngDevMode !== 'undefined' && ngDevMode) {
@@ -420,7 +446,8 @@ class SkraDatePicker {
                     compareIso(this.min(), this.max()) > 0)
                     return `skra-datepicker: min "${this.min()}" is after max "${this.max()}" — every day is disabled.`;
                 return null;
-            }, ...(ngDevMode ? [{ debugName: "warn" }] : /* istanbul ignore next */ []));
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "warn" }] : /* istanbul ignore next */ []));
             afterNextRender(() => {
                 const message = warn();
                 if (message)
@@ -569,289 +596,289 @@ class SkraDatePicker {
         }
         return parseFloat(raw) || 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SkraDatePicker, isStandalone: true, selector: "skra-datepicker", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-skra-disabled": "isDisabled() ? \"\" : null", "attr.data-skra-readonly": "isReadonly() ? \"\" : null", "attr.data-skra-validation": "hasError() ? \"invalid\" : null" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["skraDatePicker"], ngImport: i0, template: `
-    <button
-      #trigger
-      class="skra-datepicker-trigger"
-      type="button"
-      role="combobox"
-      aria-haspopup="dialog"
-      [attr.id]="triggerId()"
-      [attr.popovertarget]="panelId"
-      [attr.aria-controls]="panelId"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-describedby]="describedBy()"
-      [attr.aria-invalid]="hasError() ? 'true' : null"
-      [attr.aria-required]="isRequired() ? 'true' : null"
-      [attr.aria-readonly]="isReadonly() ? 'true' : null"
-      [disabled]="isDisabled()"
-      (click)="onTriggerClick($event)"
-      (keydown)="onTriggerKeydown($event)"
-    >
-      @if (formattedValue(); as label) {
-        <span class="skra-datepicker-value">{{ label }}</span>
-      } @else {
-        <span class="skra-datepicker-placeholder">{{ placeholder() }}</span>
-      }
-      <svg
-        class="skra-datepicker-icon"
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-      >
-        <rect x="3" y="4" width="18" height="17" rx="2" />
-        <path d="M3 9h18M8 2v4M16 2v4" />
-      </svg>
-    </button>
-
-    <div
-      #panel
-      class="skra-datepicker-panel"
-      [id]="panelId"
-      popover="auto"
-      role="dialog"
-      aria-modal="false"
-      [attr.aria-labelledby]="monthYearId"
-      (toggle)="onPanelToggle($event)"
-    >
-      <div class="skra-datepicker-header">
-        <button
-          type="button"
-          class="skra-datepicker-nav"
-          tabindex="-1"
-          [attr.aria-label]="prevMonthLabel()"
-          (click)="goToPreviousMonth()"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            aria-hidden="true"
-          >
-            <path d="M15 6l-6 6 6 6" />
-          </svg>
-        </button>
-        <span
-          class="skra-datepicker-monthyear"
-          [id]="monthYearId"
-          aria-live="polite"
-          >{{ monthYearLabel() }}</span
-        >
-        <button
-          type="button"
-          class="skra-datepicker-nav"
-          tabindex="-1"
-          [attr.aria-label]="nextMonthLabel()"
-          (click)="goToNextMonth()"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            aria-hidden="true"
-          >
-            <path d="M9 6l6 6-6 6" />
-          </svg>
-        </button>
-      </div>
-
-      <table
-        class="skra-datepicker-grid"
-        role="grid"
-        [attr.aria-labelledby]="monthYearId"
-      >
-        <thead>
-          <tr>
-            @for (wd of weekdayHeadersView(); track wd.key) {
-              <th scope="col" class="skra-datepicker-weekday">
-                <abbr [title]="wd.long">{{ wd.short }}</abbr>
-              </th>
-            }
-          </tr>
-        </thead>
-        <tbody>
-          @for (week of weeks(); track week.key) {
-            <tr>
-              @for (cell of week.days; track cell.key) {
-                @if (cell.iso) {
-                  <td
-                    role="gridcell"
-                    [attr.aria-selected]="cell.selected ? 'true' : null"
-                  >
-                    <button
-                      type="button"
-                      class="skra-datepicker-day"
-                      [attr.tabindex]="cell.focused ? 0 : -1"
-                      [attr.aria-current]="cell.today ? 'date' : null"
-                      [attr.aria-disabled]="cell.disabled ? 'true' : null"
-                      [attr.data-skra-selected]="cell.selected ? '' : null"
-                      [attr.data-skra-today]="cell.today ? '' : null"
-                      (click)="selectDate(cell.iso)"
-                      (keydown)="onGridKeydown($event)"
-                    >
-                      {{ cell.dayNum
-                      }}<span class="skra-datepicker-day-sr" skra-sr-only>{{
-                        cell.srName
-                      }}</span>
-                    </button>
-                  </td>
-                } @else {
-                  <td class="skra-datepicker-day-empty" aria-hidden="true"></td>
-                }
-              }
-            </tr>
-          }
-        </tbody>
-      </table>
-    </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SkraDatePicker, isStandalone: true, selector: "skra-datepicker", 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 }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-skra-disabled": "isDisabled() ? \"\" : null", "attr.data-skra-readonly": "isReadonly() ? \"\" : null", "attr.data-skra-validation": "hasError() ? \"invalid\" : null" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], exportAs: ["skraDatePicker"], ngImport: i0, template: `
+    <button
+      #trigger
+      class="skra-datepicker-trigger"
+      type="button"
+      role="combobox"
+      aria-haspopup="dialog"
+      [attr.id]="triggerId()"
+      [attr.popovertarget]="panelId"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-readonly]="isReadonly() ? 'true' : null"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      @if (formattedValue(); as label) {
+        <span class="skra-datepicker-value">{{ label }}</span>
+      } @else {
+        <span class="skra-datepicker-placeholder">{{ placeholder() }}</span>
+      }
+      <svg
+        class="skra-datepicker-icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <rect x="3" y="4" width="18" height="17" rx="2" />
+        <path d="M3 9h18M8 2v4M16 2v4" />
+      </svg>
+    </button>
+
+    <div
+      #panel
+      class="skra-datepicker-panel"
+      [id]="panelId"
+      popover="auto"
+      role="dialog"
+      aria-modal="false"
+      [attr.aria-labelledby]="monthYearId"
+      (toggle)="onPanelToggle($event)"
+    >
+      <div class="skra-datepicker-header">
+        <button
+          type="button"
+          class="skra-datepicker-nav"
+          tabindex="-1"
+          [attr.aria-label]="prevMonthLabel()"
+          (click)="goToPreviousMonth()"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <path d="M15 6l-6 6 6 6" />
+          </svg>
+        </button>
+        <span
+          class="skra-datepicker-monthyear"
+          [id]="monthYearId"
+          aria-live="polite"
+          >{{ monthYearLabel() }}</span
+        >
+        <button
+          type="button"
+          class="skra-datepicker-nav"
+          tabindex="-1"
+          [attr.aria-label]="nextMonthLabel()"
+          (click)="goToNextMonth()"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        </button>
+      </div>
+
+      <table
+        class="skra-datepicker-grid"
+        role="grid"
+        [attr.aria-labelledby]="monthYearId"
+      >
+        <thead>
+          <tr>
+            @for (wd of weekdayHeadersView(); track wd.key) {
+              <th scope="col" class="skra-datepicker-weekday">
+                <abbr [title]="wd.long">{{ wd.short }}</abbr>
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (week of weeks(); track week.key) {
+            <tr>
+              @for (cell of week.days; track cell.key) {
+                @if (cell.iso) {
+                  <td
+                    role="gridcell"
+                    [attr.aria-selected]="cell.selected ? 'true' : null"
+                  >
+                    <button
+                      type="button"
+                      class="skra-datepicker-day"
+                      [attr.tabindex]="cell.focused ? 0 : -1"
+                      [attr.aria-current]="cell.today ? 'date' : null"
+                      [attr.aria-disabled]="cell.disabled ? 'true' : null"
+                      [attr.data-skra-selected]="cell.selected ? '' : null"
+                      [attr.data-skra-today]="cell.today ? '' : null"
+                      (click)="selectDate(cell.iso)"
+                      (keydown)="onGridKeydown($event)"
+                    >
+                      {{ cell.dayNum
+                      }}<span class="skra-datepicker-day-sr" skra-sr-only>{{
+                        cell.srName
+                      }}</span>
+                    </button>
+                  </td>
+                } @else {
+                  <td class="skra-datepicker-day-empty" aria-hidden="true"></td>
+                }
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
   `, isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-block;box-sizing:border-box;margin:0}.skra-datepicker-trigger{display:flex;align-items:center;gap:var(--skra-comp-datepicker-gap);inline-size:100%;min-block-size:var(--skra-comp-datepicker-min-block-size);box-sizing:border-box;margin:0;padding-block:var(--skra-comp-datepicker-padding-block);padding-inline:var(--skra-comp-datepicker-padding-inline);text-align:start;cursor:pointer;background:var(--skra-comp-datepicker-background);color:var(--skra-comp-datepicker-foreground);border-color:var(--skra-comp-datepicker-border-color);border-width:var(--skra-comp-datepicker-border-width);border-style:var(--skra-comp-datepicker-border-style);border-radius:var(--skra-comp-datepicker-radius);box-shadow:var(--skra-comp-datepicker-shadow);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-datepicker-motion-duration) var(--skra-comp-datepicker-motion-easing),border-color var(--skra-comp-datepicker-motion-duration) var(--skra-comp-datepicker-motion-easing)}.skra-datepicker-trigger:focus-visible{outline:var(--skra-comp-datepicker-focus-ring-width) solid var(--skra-comp-datepicker-focus-ring-color);outline-offset:.125rem}.skra-datepicker-trigger:disabled{background:var(--skra-comp-datepicker-background-disabled);color:var(--skra-comp-datepicker-foreground-disabled);cursor:not-allowed}.skra-datepicker-trigger[aria-readonly=true]{background:var(--skra-comp-datepicker-background-readonly);cursor:default}.skra-datepicker-trigger[aria-invalid=true]{border-color:var(--skra-comp-datepicker-border-color-validation-invalid)}.skra-datepicker-value{flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skra-datepicker-placeholder{flex:1 1 auto;color:var(--skra-comp-datepicker-foreground-disabled)}.skra-datepicker-icon{flex:none;inline-size:var(--skra-comp-datepicker-icon-size);block-size:var(--skra-comp-datepicker-icon-size);color:var(--skra-comp-datepicker-icon-color)}.skra-datepicker-panel{position:fixed;margin:0;inset:auto;box-sizing:border-box;inline-size:max-content;padding:var(--skra-comp-datepicker-panel-padding);background:var(--skra-comp-datepicker-panel-background);color:var(--skra-comp-datepicker-panel-foreground);border:var(--skra-comp-datepicker-border-width) solid var(--skra-comp-datepicker-panel-border-color);border-radius:var(--skra-comp-datepicker-panel-radius);box-shadow:var(--skra-comp-datepicker-panel-shadow);opacity:0;transition:opacity var(--skra-comp-datepicker-motion-duration) var(--skra-comp-datepicker-motion-easing),display var(--skra-comp-datepicker-motion-duration) allow-discrete,overlay var(--skra-comp-datepicker-motion-duration) allow-discrete}.skra-datepicker-panel:popover-open{display:block;opacity:1}@starting-style{.skra-datepicker-panel:popover-open{opacity:0}}.skra-datepicker-header{display:flex;align-items:center;justify-content:space-between;gap:var(--skra-comp-datepicker-gap);margin-block-end:var(--skra-comp-datepicker-panel-padding)}.skra-datepicker-monthyear{flex:1 1 auto;text-align:center;color:var(--skra-comp-datepicker-header-foreground);font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing)}.skra-datepicker-nav{flex:none;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-datepicker-nav-icon-size);block-size:var(--skra-comp-datepicker-nav-icon-size);margin:0;padding:0;background:transparent;border:0;color:var(--skra-comp-datepicker-nav-color);cursor:pointer}.skra-datepicker-nav svg{inline-size:100%;block-size:100%}.skra-datepicker-nav:hover{color:var(--skra-comp-datepicker-nav-color-hover)}.skra-datepicker-nav:focus-visible{outline:var(--skra-comp-datepicker-focus-ring-width) solid var(--skra-comp-datepicker-focus-ring-color);outline-offset:.125rem}.skra-datepicker-grid{border-collapse:collapse}.skra-datepicker-weekday{inline-size:var(--skra-comp-datepicker-day-size);padding:0;color:var(--skra-comp-datepicker-weekday-foreground);font-family:var(--skra-sys-typography-role-body-small-font-family);font-size:var(--skra-sys-typography-role-body-small-font-size);font-weight:var(--skra-sys-typography-role-body-small-font-weight);line-height:var(--skra-sys-typography-role-body-small-line-height);letter-spacing:var(--skra-sys-typography-role-body-small-letter-spacing)}.skra-datepicker-weekday abbr{text-decoration:none}.skra-datepicker-day-empty{padding:0}.skra-datepicker-day{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-datepicker-day-size);block-size:var(--skra-comp-datepicker-day-size);margin:0;padding:0;background:transparent;border:0;border-radius:var(--skra-comp-datepicker-day-radius);color:var(--skra-comp-datepicker-day-foreground);cursor:pointer;font-family:var(--skra-sys-typography-role-body-medium-font-family);font-size:var(--skra-sys-typography-role-body-medium-font-size);font-weight:var(--skra-sys-typography-role-body-medium-font-weight);line-height:var(--skra-sys-typography-role-body-medium-line-height);letter-spacing:var(--skra-sys-typography-role-body-medium-letter-spacing);transition:background-color var(--skra-comp-datepicker-motion-duration) var(--skra-comp-datepicker-motion-easing)}.skra-datepicker-day:hover:not([aria-disabled=true]){background:var(--skra-comp-datepicker-day-background-hover)}.skra-datepicker-day:focus-visible{outline:var(--skra-comp-datepicker-focus-ring-width) solid var(--skra-comp-datepicker-focus-ring-color);outline-offset:-.0625rem}.skra-datepicker-day[data-skra-today]{box-shadow:inset 0 0 0 .125rem var(--skra-comp-datepicker-day-today-indicator-color)}.skra-datepicker-day[data-skra-selected]{background:var(--skra-comp-datepicker-day-background-selected);color:var(--skra-comp-datepicker-day-foreground-selected)}.skra-datepicker-day[aria-disabled=true]{color:var(--skra-comp-datepicker-day-foreground-disabled);cursor:default}@media(prefers-reduced-motion:reduce){.skra-datepicker-trigger,.skra-datepicker-panel,.skra-datepicker-day{transition-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SkraDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'skra-datepicker', standalone: true, exportAs: 'skraDatePicker', template: `
-    <button
-      #trigger
-      class="skra-datepicker-trigger"
-      type="button"
-      role="combobox"
-      aria-haspopup="dialog"
-      [attr.id]="triggerId()"
-      [attr.popovertarget]="panelId"
-      [attr.aria-controls]="panelId"
-      [attr.aria-expanded]="isOpen()"
-      [attr.aria-describedby]="describedBy()"
-      [attr.aria-invalid]="hasError() ? 'true' : null"
-      [attr.aria-required]="isRequired() ? 'true' : null"
-      [attr.aria-readonly]="isReadonly() ? 'true' : null"
-      [disabled]="isDisabled()"
-      (click)="onTriggerClick($event)"
-      (keydown)="onTriggerKeydown($event)"
-    >
-      @if (formattedValue(); as label) {
-        <span class="skra-datepicker-value">{{ label }}</span>
-      } @else {
-        <span class="skra-datepicker-placeholder">{{ placeholder() }}</span>
-      }
-      <svg
-        class="skra-datepicker-icon"
-        aria-hidden="true"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-      >
-        <rect x="3" y="4" width="18" height="17" rx="2" />
-        <path d="M3 9h18M8 2v4M16 2v4" />
-      </svg>
-    </button>
-
-    <div
-      #panel
-      class="skra-datepicker-panel"
-      [id]="panelId"
-      popover="auto"
-      role="dialog"
-      aria-modal="false"
-      [attr.aria-labelledby]="monthYearId"
-      (toggle)="onPanelToggle($event)"
-    >
-      <div class="skra-datepicker-header">
-        <button
-          type="button"
-          class="skra-datepicker-nav"
-          tabindex="-1"
-          [attr.aria-label]="prevMonthLabel()"
-          (click)="goToPreviousMonth()"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            aria-hidden="true"
-          >
-            <path d="M15 6l-6 6 6 6" />
-          </svg>
-        </button>
-        <span
-          class="skra-datepicker-monthyear"
-          [id]="monthYearId"
-          aria-live="polite"
-          >{{ monthYearLabel() }}</span
-        >
-        <button
-          type="button"
-          class="skra-datepicker-nav"
-          tabindex="-1"
-          [attr.aria-label]="nextMonthLabel()"
-          (click)="goToNextMonth()"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            aria-hidden="true"
-          >
-            <path d="M9 6l6 6-6 6" />
-          </svg>
-        </button>
-      </div>
-
-      <table
-        class="skra-datepicker-grid"
-        role="grid"
-        [attr.aria-labelledby]="monthYearId"
-      >
-        <thead>
-          <tr>
-            @for (wd of weekdayHeadersView(); track wd.key) {
-              <th scope="col" class="skra-datepicker-weekday">
-                <abbr [title]="wd.long">{{ wd.short }}</abbr>
-              </th>
-            }
-          </tr>
-        </thead>
-        <tbody>
-          @for (week of weeks(); track week.key) {
-            <tr>
-              @for (cell of week.days; track cell.key) {
-                @if (cell.iso) {
-                  <td
-                    role="gridcell"
-                    [attr.aria-selected]="cell.selected ? 'true' : null"
-                  >
-                    <button
-                      type="button"
-                      class="skra-datepicker-day"
-                      [attr.tabindex]="cell.focused ? 0 : -1"
-                      [attr.aria-current]="cell.today ? 'date' : null"
-                      [attr.aria-disabled]="cell.disabled ? 'true' : null"
-                      [attr.data-skra-selected]="cell.selected ? '' : null"
-                      [attr.data-skra-today]="cell.today ? '' : null"
-                      (click)="selectDate(cell.iso)"
-                      (keydown)="onGridKeydown($event)"
-                    >
-                      {{ cell.dayNum
-                      }}<span class="skra-datepicker-day-sr" skra-sr-only>{{
-                        cell.srName
-                      }}</span>
-                    </button>
-                  </td>
-                } @else {
-                  <td class="skra-datepicker-day-empty" aria-hidden="true"></td>
-                }
-              }
-            </tr>
-          }
-        </tbody>
-      </table>
-    </div>
+            args: [{ selector: 'skra-datepicker', standalone: true, exportAs: 'skraDatePicker', template: `
+    <button
+      #trigger
+      class="skra-datepicker-trigger"
+      type="button"
+      role="combobox"
+      aria-haspopup="dialog"
+      [attr.id]="triggerId()"
+      [attr.popovertarget]="panelId"
+      [attr.aria-controls]="panelId"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-invalid]="hasError() ? 'true' : null"
+      [attr.aria-required]="isRequired() ? 'true' : null"
+      [attr.aria-readonly]="isReadonly() ? 'true' : null"
+      [disabled]="isDisabled()"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      @if (formattedValue(); as label) {
+        <span class="skra-datepicker-value">{{ label }}</span>
+      } @else {
+        <span class="skra-datepicker-placeholder">{{ placeholder() }}</span>
+      }
+      <svg
+        class="skra-datepicker-icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <rect x="3" y="4" width="18" height="17" rx="2" />
+        <path d="M3 9h18M8 2v4M16 2v4" />
+      </svg>
+    </button>
+
+    <div
+      #panel
+      class="skra-datepicker-panel"
+      [id]="panelId"
+      popover="auto"
+      role="dialog"
+      aria-modal="false"
+      [attr.aria-labelledby]="monthYearId"
+      (toggle)="onPanelToggle($event)"
+    >
+      <div class="skra-datepicker-header">
+        <button
+          type="button"
+          class="skra-datepicker-nav"
+          tabindex="-1"
+          [attr.aria-label]="prevMonthLabel()"
+          (click)="goToPreviousMonth()"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <path d="M15 6l-6 6 6 6" />
+          </svg>
+        </button>
+        <span
+          class="skra-datepicker-monthyear"
+          [id]="monthYearId"
+          aria-live="polite"
+          >{{ monthYearLabel() }}</span
+        >
+        <button
+          type="button"
+          class="skra-datepicker-nav"
+          tabindex="-1"
+          [attr.aria-label]="nextMonthLabel()"
+          (click)="goToNextMonth()"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        </button>
+      </div>
+
+      <table
+        class="skra-datepicker-grid"
+        role="grid"
+        [attr.aria-labelledby]="monthYearId"
+      >
+        <thead>
+          <tr>
+            @for (wd of weekdayHeadersView(); track wd.key) {
+              <th scope="col" class="skra-datepicker-weekday">
+                <abbr [title]="wd.long">{{ wd.short }}</abbr>
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (week of weeks(); track week.key) {
+            <tr>
+              @for (cell of week.days; track cell.key) {
+                @if (cell.iso) {
+                  <td
+                    role="gridcell"
+                    [attr.aria-selected]="cell.selected ? 'true' : null"
+                  >
+                    <button
+                      type="button"
+                      class="skra-datepicker-day"
+                      [attr.tabindex]="cell.focused ? 0 : -1"
+                      [attr.aria-current]="cell.today ? 'date' : null"
+                      [attr.aria-disabled]="cell.disabled ? 'true' : null"
+                      [attr.data-skra-selected]="cell.selected ? '' : null"
+                      [attr.data-skra-today]="cell.today ? '' : null"
+                      (click)="selectDate(cell.iso)"
+                      (keydown)="onGridKeydown($event)"
+                    >
+                      {{ cell.dayNum
+                      }}<span class="skra-datepicker-day-sr" skra-sr-only>{{
+                        cell.srName
+                      }}</span>
+                    </button>
+                  </td>
+                } @else {
+                  <td class="skra-datepicker-day-empty" aria-hidden="true"></td>
+                }
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         '[attr.data-skra-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-skra-readonly]': 'isReadonly() ? "" : null',