@skra/ui 0.4.0 → 0.5.0

package/fesm2022/skra-ui-datepicker.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, viewChild, inject, Injector, signal, computed, DestroyRef, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, output, viewChild, inject, Injector, signal, linkedSignal, computed, DestroyRef, effect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SkraFieldContext } from '@skra/ui/field';
 import { _attachPositioner } from '@skra/ui/core';
 
 /**
- * calendar-math — the ONE sanctioned site for DatePicker date arithmetic (ADR 0050 §3/§6).
+ * calendar-math — the ONE sanctioned site for DatePicker date arithmetic (ADR 0050 §3/§6) AND for every
+ * precision-aware key operation (ADR 0057 R3 — no parallel helper).
  *
  * Zoneless calendar-date discipline (the timezone off-by-one is the bug class this exists to prevent):
  * - The value is an ISO 8601 date-only string (`YYYY-MM-DD`) — NEVER materialized as a `Date`.
@@ -147,43 +148,178 @@ function monthGrid(y, m, firstDayOfWeek) {
         weeks.push(cells.slice(i, i + 7));
     return weeks;
 }
+const ISO_MONTH = /^(\d{4})-(\d{2})$/;
+/** Strict `YYYY-MM` parse. Returns `null` for anything invalid. */
+function parseIsoMonth(iso) {
+    const match = ISO_MONTH.exec(iso);
+    if (!match)
+        return null;
+    const y = Number(match[1]);
+    const m = Number(match[2]);
+    if (m < 1 || m > 12)
+        return null;
+    return { y, m };
+}
+/** Serialize a calendar month to `YYYY-MM`. */
+function toIsoMonth({ y, m }) {
+    return `${pad(y, 4)}-${pad(m, 2)}`;
+}
+/** `true` iff `iso` is a strictly valid `YYYY-MM` month key. */
+function isValidIsoMonth(iso) {
+    return parseIsoMonth(iso) !== null;
+}
+/** `true` iff `iso` is strictly valid AT `precision` (ADR 0057 R3 — format follows precision). */
+function isValidAt(iso, precision) {
+    return precision === 'month' ? isValidIsoMonth(iso) : isValidIso(iso);
+}
+/**
+ * Re-key an ISO key to `precision`, or `''` when it cannot be expressed there.
+ * Truncating down is a slice (`2026-06-14` → `2026-06`); widening up anchors to the first of the
+ * month (`2026-06` → `2026-06-01`), which is the only choice that keeps the key valid.
+ */
+function reKey(key, precision) {
+    if (key === '')
+        return '';
+    if (precision === 'month') {
+        if (isValidIsoMonth(key))
+            return key;
+        return isValidIso(key) ? key.slice(0, 7) : '';
+    }
+    if (isValidIso(key))
+        return key;
+    return isValidIsoMonth(key) ? `${key}-01` : '';
+}
+/**
+ * Normalize a `min`/`max` bound to `precision`, or `''` (= unbounded) when it cannot be expressed there.
+ *
+ * ADR 0057 R4: in month precision a DAY bound's day component is deliberately ignored — `min="2026-03-15"`
+ * truncates to `2026-03`, so **March 2026 stays selectable**. The value is the month, not a day inside it,
+ * so a partially-in-range month is in range. In day precision a MONTH bound is rejected rather than
+ * guessed: widening it would mean `min` anchors to the 1st but `max` would have to anchor to the last day,
+ * and inventing that asymmetry silently is worse than treating the bound as unset.
+ */
+function boundAt(bound, precision) {
+    if (bound === '')
+        return '';
+    if (precision === 'month')
+        return reKey(bound, 'month');
+    return isValidIso(bound) ? bound : '';
+}
+/**
+ * Inclusive range test AT `precision` — the candidate and BOTH bounds are truncated to the same
+ * precision before the lexicographic compare (ADR 0057 R4).
+ *
+ * Comparing mixed-precision keys byte-wise is the trap this exists to close: `'2026-03' < '2026-03-15'`
+ * is lexicographically true, so an un-truncated compare would silently disable a month that is in range.
+ */
+function isInRangeAt(key, min, max, precision) {
+    const k = reKey(key, precision);
+    if (k === '')
+        return false;
+    return isInRange(k, boundAt(min, precision), boundAt(max, precision));
+}
+/** Clamp `key` into `[min,max]` AT `precision` (each `''` = unbounded). Seeds the displayed period. */
+function clampAt(key, min, max, precision) {
+    const k = reKey(key, precision);
+    if (k === '')
+        return k;
+    return clampIso(k, boundAt(min, precision), boundAt(max, precision));
+}
+/** Add `n` months (may be negative) to a `YYYY-MM` key. No day component, so nothing to clamp. */
+function addMonthsToKey(key, n) {
+    const month = parseIsoMonth(key);
+    if (!month)
+        return key;
+    const total = month.y * 12 + (month.m - 1) + n;
+    const y = Math.floor(total / 12);
+    const m = (((total % 12) + 12) % 12) + 1; // 1-based, safe for negative totals
+    return toIsoMonth({ y, m });
+}
+/** Add `n` years to a `YYYY-MM` key. Delegates to month arithmetic. */
+function addYearsToKey(key, n) {
+    return addMonthsToKey(key, n * 12);
+}
+/** First month of the calendar quarter containing `key` (the month grid's ROW start — ADR 0057 §5). */
+function quarterStartKey(key) {
+    const month = parseIsoMonth(key);
+    if (!month)
+        return key;
+    return toIsoMonth({ y: month.y, m: Math.floor((month.m - 1) / 3) * 3 + 1 });
+}
+/** Last month of the calendar quarter containing `key` (the month grid's ROW end). */
+function quarterEndKey(key) {
+    return addMonthsToKey(quarterStartKey(key), 2);
+}
+/**
+ * Build a month grid for year `y`: the 12 months as `YYYY-MM` keys in **4 rows × 3 columns**.
+ * Rows are quarter-aligned, which is what makes Arrow Up/Down (∓3 months) a meaningful step, and
+ * 3 wide columns fit full localized month names at the panel width the 7-column day grid already sets.
+ * Unlike `monthGrid` there is no padding — a year always holds exactly 12 months.
+ */
+function yearGrid(y) {
+    const rows = [];
+    for (let q = 0; q < 4; q++) {
+        const row = [];
+        for (let i = 1; i <= 3; i++)
+            row.push(toIsoMonth({ y, m: q * 3 + i }));
+        rows.push(row);
+    }
+    return rows;
+}
+/** Today's LOCAL calendar key at `precision` (local accessors — "today" is local-civil, ADR 0050 §3). */
+function todayAt(precision) {
+    return reKey(today(), precision);
+}
 
 const NONE = { type: 'none' };
+/** Grid width per view — also the Arrow Up/Down step (one row). */
+const COLUMNS = { day: 7, month: 3 };
 /**
  * SkraCalendarKeyboard — the WAI-ARIA APG **Date Picker Dialog** grid keyboard model (2-D), confined to
  * ONE file. The THIRD per-pattern keyboard controller and the FIRST that does NOT wrap a CDK key manager:
  * neither `FocusKeyManager` (Menu) nor `ActiveDescendantKeyManager` (Select/Combobox) models a 2-D grid
- * whose focusable cell set is recomputed on month change (ADR 0044 §7 note, 2026-06-14). Date arithmetic
+ * whose focusable cell set is recomputed on period change (ADR 0044 §7 note, 2026-06-14). Date arithmetic
  * is delegated to `calendar-math` (the ADR 0050 single math site); this controller only maps keys to
  * intents. Roving REAL focus (NOT `aria-activedescendant`) — the divergence from Select/Combobox.
  *
- * Navigation is unclamped (a user may move onto a disabled out-of-range day — APG-discoverable); only
+ * **One model, two unit sets (ADR 0057 R8).** The `day` and `month` views share every key, every intent and
+ * the whole `switch` below; they differ ONLY in what a step, a row and a page mean. That parameterization is
+ * the falsifiable claim behind treating precision as a runtime axis rather than a second component — if this
+ * ever needs a second `resolve`, the classification was wrong and the feature splits.
+ *
+ * | Key                   | `day` view                    | `month` view                  |
+ * | --------------------- | ----------------------------- | ----------------------------- |
+ * | Left / Right          | ∓1 day                        | ∓1 month                      |
+ * | Up / Down             | ∓7 days (one week row)        | ∓3 months (one quarter row)   |
+ * | Home / End            | first / last day of the week   | first / last month of the quarter |
+ * | PageUp / PageDown     | ∓1 month (clamped)            | ∓1 year                       |
+ * | Shift+PageUp / -Down  | ∓1 year (clamped)             | ∓10 years                     |
+ *
+ * Home/End stay ROW-scoped in both views — APG grid semantics, and one rule beats two.
+ *
+ * Navigation is unclamped (a user may move onto a disabled out-of-range cell — APG-discoverable); only
  * SELECTION is range-guarded, and that guard lives in the component (one place, shared with pointer click).
  */
 class SkraCalendarKeyboard {
     resolve(event, ctx) {
-        const { focusedIso, firstDayOfWeek } = ctx;
+        const columns = COLUMNS[ctx.view];
         switch (event.key) {
             case 'ArrowLeft':
-                return this.toFocus(focusedIso, addDays(focusedIso, -1));
+                return this.toFocus(this.step(ctx, -1));
             case 'ArrowRight':
-                return this.toFocus(focusedIso, addDays(focusedIso, 1));
+                return this.toFocus(this.step(ctx, 1));
             case 'ArrowUp':
-                return this.toFocus(focusedIso, addDays(focusedIso, -7));
+                return this.toFocus(this.step(ctx, -columns));
             case 'ArrowDown':
-                return this.toFocus(focusedIso, addDays(focusedIso, 7));
+                return this.toFocus(this.step(ctx, columns));
             case 'Home':
-                return this.toFocus(focusedIso, this.weekStart(focusedIso, firstDayOfWeek));
+                return this.toFocus(this.rowStart(ctx));
             case 'End':
-                return this.toFocus(focusedIso, addDays(this.weekStart(focusedIso, firstDayOfWeek), 6));
+                return this.toFocus(this.rowEnd(ctx));
             case 'PageUp':
-                return this.toFocus(focusedIso, event.shiftKey
-                    ? addYearsClamped(focusedIso, -1)
-                    : addMonthsClamped(focusedIso, -1));
+                return this.toFocus(this.page(ctx, event.shiftKey, -1));
             case 'PageDown':
-                return this.toFocus(focusedIso, event.shiftKey
-                    ? addYearsClamped(focusedIso, 1)
-                    : addMonthsClamped(focusedIso, 1));
+                return this.toFocus(this.page(ctx, event.shiftKey, 1));
             case 'Enter':
             case ' ':
             case 'Spacebar': // legacy key name
@@ -194,17 +330,34 @@ class SkraCalendarKeyboard {
                 return NONE;
         }
     }
-    toFocus(fromIso, toIso) {
-        return {
-            type: 'focus',
-            iso: toIso,
-            monthChanged: this.monthChanged(fromIso, toIso),
-        };
+    /** One cell = one day / one month. */
+    step(ctx, n) {
+        return ctx.view === 'month'
+            ? addMonthsToKey(ctx.focusedIso, n)
+            : addDays(ctx.focusedIso, n);
+    }
+    /** Row start: the week (day view) / the calendar quarter (month view). */
+    rowStart(ctx) {
+        return ctx.view === 'month'
+            ? quarterStartKey(ctx.focusedIso)
+            : this.weekStart(ctx.focusedIso, ctx.firstDayOfWeek);
+    }
+    /** Row end: last day of the week / last month of the quarter. */
+    rowEnd(ctx) {
+        return ctx.view === 'month'
+            ? quarterEndKey(ctx.focusedIso)
+            : addDays(this.weekStart(ctx.focusedIso, ctx.firstDayOfWeek), 6);
     }
-    monthChanged(a, b) {
-        const pa = parseIso(a);
-        const pb = parseIso(b);
-        return !pa || !pb || pa.y !== pb.y || pa.m !== pb.m;
+    /** Page = the next container up; Shift = the one above that. Day math stays clamped (ADR 0050 §4). */
+    page(ctx, shiftKey, direction) {
+        if (ctx.view === 'month')
+            return addYearsToKey(ctx.focusedIso, direction * (shiftKey ? 10 : 1));
+        return shiftKey
+            ? addYearsClamped(ctx.focusedIso, direction)
+            : addMonthsClamped(ctx.focusedIso, direction);
+    }
+    toFocus(toIso) {
+        return { type: 'focus', iso: toIso };
     }
     weekStart(iso, firstDayOfWeek) {
         const p = parseIso(iso);
@@ -222,11 +375,28 @@ class SkraCalendarKeyboard {
  * formatter MUST set `timeZone: 'UTC'` (else the displayed date shifts off the zoneless value).
  */
 const UTC = 'UTC';
+/**
+ * The grid, `monthGrid()` and `formatDayNumber()` are all GREGORIAN — non-Gregorian calendars re-shape the
+ * grid, not just its language, and are out of scope (ADR 0050 Q-8). Every formatter here MUST therefore
+ * pin the calendar: left to its default, `Intl` follows the LOCALE's, and the widget then labels a
+ * Gregorian grid with another calendar's months and years. Measured before this was pinned: `fa-IR`
+ * showed `۱۴۰۴` in the panel header and `۱۴۰۵` in the trigger for ONE value, and a day cell displaying
+ * `۱۴` named `خرداد ۱۴۰۵` — which is 2026-06-04, not 2026-06-14. Localizing the LANGUAGE is the job;
+ * re-basing the CALENDAR is a different feature (ADR 0050 §6 adapter seam).
+ */
+const GREGORY = 'gregory';
+/** Zero-pad a year / month for building the ISO key a formatter is fed. No locale involved. */
+function pad4(n) {
+    return String(n).padStart(4, '0');
+}
+function pad2(n) {
+    return String(n).padStart(2, '0');
+}
 /** Resolve the host's default BCP-47 locale tag, SSR-safe (no `navigator` in Node). */
 function hostLocale() {
     return typeof navigator !== 'undefined' ? navigator.language : undefined;
 }
-/** Trigger display of the selected date (`dateStyle: 'medium'`). `''`/invalid → `''`. */
+/** Trigger display of the selected date, `day` precision (`dateStyle: 'medium'`). `''`/invalid → `''`. */
 function formatValue(iso, locale) {
     const dt = toUtcDate(iso);
     if (!dt)
@@ -234,27 +404,93 @@ function formatValue(iso, locale) {
     return new Intl.DateTimeFormat(locale, {
         dateStyle: 'medium',
         timeZone: UTC,
+        calendar: GREGORY,
     }).format(dt);
 }
+/**
+ * Trigger display of the selected month, `month` precision (ADR 0045 — the trigger shows the VALUE).
+ * Takes a `YYYY-MM` key; `''`/invalid → `''`.
+ */
+function formatMonthValue(key, locale) {
+    const match = /^(\d{4})-(\d{2})$/.exec(key);
+    if (!match)
+        return '';
+    return formatMonthYear(Number(match[1]), Number(match[2]), locale);
+}
 /** Header / nav-button label for a month: localized `month long + year` (e.g. "czerwiec 2026"). */
 function formatMonthYear(y, m, locale) {
-    const dt = toUtcDate(`${String(y).padStart(4, '0')}-${String(m).padStart(2, '0')}-01`);
+    const dt = toUtcDate(`${pad4(y)}-${pad2(m)}-01`);
     if (!dt)
         return '';
     return new Intl.DateTimeFormat(locale, {
         month: 'long',
         year: 'numeric',
         timeZone: UTC,
+        calendar: GREGORY,
     }).format(dt);
 }
-/** Full localized date for a day cell's `[skra-sr-only]` accessible-name extension (ADR 033 Path 2). */
-function formatDayName(iso, locale) {
+/**
+ * The day cell's `[skra-sr-only]` accessible-name **extension** — the localized month and year, with the
+ * day number REMOVED (ADR 0057 R6).
+ *
+ * The visible text of the cell is already the day number, and `[skra-sr-only]` keeps its content in
+ * `textContent` (that is the whole point of the clip technique), so an extension formatted with
+ * `dateStyle: 'long'` restates it: the name computes to `1414 czerwca 2026` in `pl-PL` and
+ * `14June 14, 2026` in `en-US`. Path 2 extends the visible text; it never repeats it.
+ *
+ * The day part is dropped via `formatToParts` so the remaining parts keep the LOCALE's own order, together
+ * with the literal that separates it from its neighbour (the following one, or the preceding one when the
+ * day is last) so no stray `, ` or `月` is left behind. Accepted trade-off (ADR 0057 R6): in year-first
+ * locales the assembled name reads `14 2026年6月` rather than `2026年6月14日` — the visible text is
+ * positionally first in the DOM and WCAG 2.5.3 requires it to be contained in the name, so perfect
+ * grammatical order is not reachable without reordering the DOM. Containment and non-duplication are the
+ * properties that matter.
+ */
+function formatDayNameExtension(iso, locale) {
     const dt = toUtcDate(iso);
     if (!dt)
         return '';
-    return new Intl.DateTimeFormat(locale, {
+    const parts = new Intl.DateTimeFormat(locale, {
         dateStyle: 'long',
         timeZone: UTC,
+        calendar: GREGORY,
+    }).formatToParts(dt);
+    const dayIndex = parts.findIndex((part) => part.type === 'day');
+    if (dayIndex === -1)
+        return parts
+            .map((part) => part.value)
+            .join('')
+            .trim();
+    const separatorIndex = parts[dayIndex + 1]?.type === 'literal' ? dayIndex + 1 : dayIndex - 1;
+    return parts
+        .filter((_, index) => index !== dayIndex && index !== separatorIndex)
+        .map((part) => part.value)
+        .join('')
+        .trim();
+}
+/** Visible text of a month cell: the localized full month name (e.g. "czerwiec"), no year. */
+function formatMonthCell(y, m, locale) {
+    const dt = toUtcDate(`${pad4(y)}-${pad2(m)}-01`);
+    if (!dt)
+        return '';
+    return new Intl.DateTimeFormat(locale, {
+        month: 'long',
+        timeZone: UTC,
+        calendar: GREGORY,
+    }).format(dt);
+}
+/**
+ * The month cell's `[skra-sr-only]` extension — the localized year (ADR 0057 R6). The visible text is
+ * already the month name, so the extension carries the year and nothing else.
+ */
+function formatYear(y, locale) {
+    const dt = toUtcDate(`${pad4(y)}-01-01`);
+    if (!dt)
+        return '';
+    return new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        timeZone: UTC,
+        calendar: GREGORY,
     }).format(dt);
 }
 /** Visible day number, localized digits (e.g. Arabic-Indic `٥`) — never a raw `toString()`. */
@@ -269,10 +505,12 @@ function weekdayHeaders(firstDayOfWeek, locale) {
     const shortFmt = new Intl.DateTimeFormat(locale, {
         weekday: 'short',
         timeZone: UTC,
+        calendar: GREGORY,
     });
     const longFmt = new Intl.DateTimeFormat(locale, {
         weekday: 'long',
         timeZone: UTC,
+        calendar: GREGORY,
     });
     const headers = [];
     for (let i = 0; i < 7; i++) {
@@ -310,26 +548,44 @@ function resolveFirstDayOfWeek(override, locale) {
 
 let nextDatePickerId = 0;
 /**
- * SkraDatePicker — pick a single **calendar date** from an APG Date Picker grid in the native top layer.
- * Second Tier-3 component. A value-display **trigger** (`<button>`) opens a non-modal top-layer **calendar
- * panel** (Popover API, `popover="auto"`, ADR 0044). The value is an **ISO 8601 date-only string**
- * (`YYYY-MM-DD`), consumer-owned (ADR 0050/037 — NO `@angular/forms`); all date math is the zoneless
- * UTC-calculator discipline in `calendar-math` (no date library). Localization (month/weekday names,
- * first-day-of-week, digits) is `Intl`-derived in `calendar-intl`; the 2-D grid keyboard is the
- * hand-rolled `SkraCalendarKeyboard` (ADR 0044 §7 — roving REAL focus, not aria-activedescendant).
+ * SkraDatePicker — pick a **calendar date** or a **calendar month** from an APG Date Picker grid in the
+ * native top layer. Second Tier-3 component. A value-display **trigger** (`<button>`) opens a non-modal
+ * top-layer **calendar panel** (Popover API, `popover="auto"`, ADR 0044). The value is an **ISO 8601 string**
+ * truncated to the active `precision` (`YYYY-MM-DD` / `YYYY-MM`), consumer-owned (ADR 0050/0057/037 — NO
+ * `@angular/forms`); all date math is the zoneless UTC-calculator discipline in `calendar-math` (no date
+ * library). Localization (month/weekday names, first-day-of-week, digits) is `Intl`-derived in
+ * `calendar-intl`; the 2-D grid keyboard is the hand-rolled `SkraCalendarKeyboard` (ADR 0044 §7 — roving
+ * REAL focus, not aria-activedescendant).
+ *
+ * **Precision is a runtime axis, not a second component (ADR 0057).** `precision="month"` swaps the 7×N day
+ * grid for a 3×4 quarter-aligned month grid inside the SAME trigger, panel, positioner, field DI wiring,
+ * dismissal model, selection model and keyboard controller. The value channel does not widen — `YYYY-MM` is
+ * a truncation of `YYYY-MM-DD`, both `string` — which is exactly why this is an input and cardinality
+ * (ADR 0046) is not. `week` / `time` / `datetime-local` are excluded by rule (ADR 0057 R5): they need a
+ * second calendar coordinate system or are not grids at all, and stay the native `skraInput` path.
  *
- * No projected content: the calendar days are GENERATED (the structural divergence from select/combobox —
- * there is no `skra-option` reuse). The only focusable element in the open panel is the roving day cell;
- * the month-nav buttons are pointer affordances (`tabindex="-1"`, driven by PageUp/PageDown on keyboard),
- * and Tab dismisses — so no focus-containment machinery is needed (spec Q-1).
+ * No projected content: the cells are GENERATED (the structural divergence from select/combobox — there is
+ * no `skra-option` reuse). The only focusable element in the open panel is the roving cell; the period-nav
+ * buttons are pointer affordances (`tabindex="-1"`, driven by PageUp/PageDown on keyboard), and Tab
+ * dismisses — so no focus-containment machinery is needed (spec Q-1).
  *
  * Full contract: adr/specs/component-datepicker-spec.md.
  */
 class SkraDatePicker {
-    /** Consumer-owned value: ISO 8601 date-only (`YYYY-MM-DD`); `''` = unset. NEVER a Date (ADR 0050/037). */
+    /**
+     * Consumer-owned value: an ISO 8601 key truncated to `precision` — `YYYY-MM-DD` (`day`) or `YYYY-MM`
+     * (`month`); `''` = unset. NEVER a Date (ADR 0050/0057/037).
+     */
     value = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Inclusive lower bound (ISO); `''` = unbounded (ADR 0050 §2). */
+    /**
+     * Value granularity (ADR 0057 R1). `'day'` (default) emits `YYYY-MM-DD` over a 7×N day grid; `'month'`
+     * emits `YYYY-MM` over a 3×4 quarter-aligned month grid. NOT a look input, NOT a cardinality flag, and
+     * NOT reflected to a `data-skra-*` attribute — precision is configuration, not state.
+     */
+    precision = input('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
+    /** Inclusive lower bound (ISO); `''` = unbounded (ADR 0050 §2, truncated to `precision` per ADR 0057 R4). */
     min = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     /** Inclusive upper bound (ISO); `''` = unbounded. */
@@ -350,7 +606,7 @@ class SkraDatePicker {
     /** 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). */
+    /** Fires ONLY on user selection — never on a programmatic `value()`/`precision()` change (ADR 037/0057 R3). */
     valueChange = output();
     triggerRef = viewChild('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
@@ -360,14 +616,35 @@ class SkraDatePicker {
     injector = inject(Injector);
     keyboard = new SkraCalendarKeyboard();
     panelId = `skra-datepicker-${nextDatePickerId}`;
-    monthYearId = `skra-datepicker-monthyear-${nextDatePickerId++}`;
+    periodId = `skra-datepicker-period-${nextDatePickerId++}`;
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * Which grid is on screen. Seeded from `precision` and writable in between (ADR 0057 R9) so the deferred
+     * month/year quick-pick — stepping UP from the day grid to pick a month, then back down — is an additive
+     * change rather than a rewrite. In MVP nothing writes it, so `view() === precision()` always.
+     *
+     * NOTE for whoever lands quick-pick: it adds a second focusable element to the open panel and therefore
+     * RE-OPENS spec Q-1, which was resolved on the premise that the panel holds exactly one focusable stop
+     * and Tab dismisses. Re-resolve Q-1 first.
+     */
+    view = linkedSignal(() => this.precision(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "focusedIso" }] : /* istanbul ignore next */ []));
+    /** The roving-focus cell; SINGLE source of truth for what the grid shows AND which cell is focusable. */
+    focusedKey = signal(this.todayIso, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedKey" }] : /* istanbul ignore next */ []));
+    /**
+     * The focused key re-keyed to the active view. A `precision` flip while the panel is closed leaves a key
+     * at the previous granularity behind; re-keying defensively keeps every downstream `computed` total
+     * without an effect or a reset cascade. `onOpen` re-seeds properly from the value.
+     */
+    focusedAt = computed(() => {
+        const view = this.view();
+        return reKey(this.focusedKey(), view) || todayAt(view);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedAt" }] : /* istanbul ignore next */ []));
     positioner;
     /** Set when a close should return focus to the trigger (keyboard/select), not on outside-click. */
     returnFocus = false;
@@ -385,76 +662,122 @@ class SkraDatePicker {
     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 : '';
+    /**
+     * The committed value, defensively normalized: wrong-format-for-precision, invalid or out-of-range → `''`
+     * for display (ADR 0050 §1 as amended by ADR 0057 R3). Keyed on `precision` (what the value IS), not on
+     * `view` (what is on screen) — the two only diverge once quick-pick lands.
+     */
+    selectedKey = computed(() => {
+        const value = this.value();
+        const precision = this.precision();
+        return isValidAt(value, precision) &&
+            isInRangeAt(value, this.min(), this.max(), precision)
+            ? value
+            : '';
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedIso" }] : /* istanbul ignore next */ []));
-    formattedValue = computed(() => formatValue(this.selectedIso(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []));
+    formattedValue = computed(() => this.precision() === 'month'
+        ? formatMonthValue(this.selectedKey(), this.locale())
+        : formatValue(this.selectedKey(), 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 };
+    /**
+     * The container the grid shows — the focused cell's MONTH in day view, its YEAR in month view (`m` is
+     * then meaningless). Always derived from the focused cell, which keeps the roving tabindex valid.
+     */
+    displayed = computed(() => {
+        const key = this.focusedAt();
+        if (this.view() === 'month') {
+            const month = parseIsoMonth(key);
+            return { y: month?.y ?? parseIso(this.todayIso).y, m: 1 };
+        }
+        const date = parseIso(key) ?? parseIso(this.todayIso);
+        return { y: date.y, m: date.m };
     }, /* @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 */ []));
+    ...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
+    periodLabel = computed(() => {
+        const { y, m } = this.displayed();
+        return this.view() === 'month'
+            ? formatYear(y, this.locale())
+            : formatMonthYear(y, m, this.locale());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []));
+    prevPeriodLabel = computed(() => this.periodOffsetLabel(-1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevPeriodLabel" }] : /* istanbul ignore next */ []));
+    nextPeriodLabel = computed(() => this.periodOffsetLabel(1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextPeriodLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * `aria-current` token for the cell holding today. ARIA 1.2 has no `month` value, and `date` is
+     * defined as the current DATE within a collection of dates — accurate for a day cell, a stretch for a
+     * month cell, where the generic `true` ("current item within a set") is the honest mapping.
+     */
+    currentToken = computed(() => this.view() === 'month' ? 'true' : 'date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentToken" }] : /* 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();
-        const sel = this.selectedIso();
-        const foc = this.focusedIso();
-        const min = this.min();
-        const max = this.max();
-        return monthGrid(y, m, this.firstDow()).map((week, wi) => ({
-            key: wi,
-            days: week.map((iso, di) => iso === null
-                ? this.emptyCell(`${wi}-${di}`)
-                : {
-                    key: iso,
-                    iso,
-                    dayNum: formatDayNumber(parseIso(iso).d, loc),
-                    srName: formatDayName(iso, loc),
-                    today: iso === this.todayIso,
-                    selected: iso === sel,
-                    disabled: !isInRange(iso, min, max),
-                    focused: iso === foc,
-                }),
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    /** ONE grid renderer, parameterized by view — the ADR 0057 R8 claim, made structural. */
+    rows = computed(() => this.view() === 'month' ? this.buildMonthRows() : this.buildDayRows(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     constructor() {
         inject(DestroyRef).onDestroy(() => this.positioner?.destroy());
+        // A `precision` flip while the panel is OPEN re-stamps the whole grid: cells are tracked by their
+        // ISO key, and a day key never matches a month key, so `@for` destroys and rebuilds every cell
+        // button and DOM focus falls back to <body>. The roving tabindex survives, but nothing is focused,
+        // so the arrow keys would be dead until the user clicked. Re-seed and re-focus. (Found in review.)
+        effect(() => {
+            this.view(); // the only tracked read — this effect exists to react to a view swap
+            if (!untracked(() => this.isOpen()))
+                return;
+            untracked(() => {
+                this.focusedKey.set(this.seedFocus());
+                this.scheduleFocus();
+            });
+        });
         if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-            // Dev-only sanity warnings (stripped in prod) — never thrown (ADR 0050 §1).
-            const warn = computed(() => {
-                const v = this.value();
-                if (v !== '' && !isValidIso(v))
-                    return `skra-datepicker: value "${v}" is not a valid YYYY-MM-DD date; shown as unset.`;
-                if (this.min() !== '' &&
-                    this.max() !== '' &&
-                    compareIso(this.min(), this.max()) > 0)
-                    return `skra-datepicker: min "${this.min()}" is after max "${this.max()}" — every day is disabled.`;
-                return null;
-            }, /* @ts-ignore */
-            ...(ngDevMode ? [{ debugName: "warn" }] : /* istanbul ignore next */ []));
-            afterNextRender(() => {
-                const message = warn();
+            // Dev-only sanity warnings (stripped in prod) — never thrown (ADR 0050 §1). REACTIVE on purpose:
+            // ADR 0057 R3 contemplates a runtime `precision` flip, and a one-shot first-render check would go
+            // silent for exactly the mismatch that flip creates. (The `afterNextRender` version this replaces
+            // read a `computed` once and was reactive in appearance only — found in review.)
+            effect(() => {
+                const message = this.devWarning();
                 if (message)
                     console.warn(message);
-            }, { injector: this.injector });
+            });
         }
     }
+    /**
+     * The dev-mode diagnostic, or `null` when the inputs are coherent. Split out of the constructor so it
+     * is a plain reactive expression rather than a closure buried in a lifecycle hook.
+     */
+    devWarning = computed(() => {
+        const value = this.value();
+        const precision = this.precision();
+        const rawMin = this.min();
+        const rawMax = this.max();
+        if (value !== '' && !isValidAt(value, precision))
+            return `skra-datepicker: value "${value}" is not a valid ${precision === 'month' ? 'YYYY-MM month' : 'YYYY-MM-DD date'} key for precision="${precision}"; shown as unset.`;
+        const min = boundAt(rawMin, precision);
+        const max = boundAt(rawMax, precision);
+        if (min !== '' && max !== '' && compareIso(min, max) > 0)
+            return `skra-datepicker: min "${rawMin}" is after max "${rawMax}" — every cell is disabled.`;
+        // A bound that cannot be expressed at the active precision is NOT an error, but it is never what
+        // the author meant, and silence is the failure mode: in month precision a day bound is truncated
+        // (ADR 0057 R4), and in day precision a month bound is dropped to unbounded rather than guessed.
+        // Report BOTH bounds — reporting only `min` hid the `max` case.
+        const ignored = [
+            ['min', rawMin],
+            ['max', rawMax],
+        ].filter(([, raw]) => raw !== '' && boundAt(raw, precision) !== raw);
+        if (ignored.length > 0)
+            return ignored
+                .map(([name, raw]) => precision === 'month'
+                ? `skra-datepicker: ${name}="${raw}" carries a day component that precision="month" ignores; compared as "${raw.slice(0, 7)}".`
+                : `skra-datepicker: ${name}="${raw}" is not a valid YYYY-MM-DD key for precision="day"; treated as unbounded. A month bound is NOT widened — "min" would anchor to the 1st but "max" would have to anchor to the last day, and inventing that asymmetry silently is worse.`)
+                .join(' ');
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "devWarning" }] : /* istanbul ignore next */ []));
     // ── Trigger interaction ──
     onTriggerClick(event) {
         if (this.isReadonly())
@@ -478,18 +801,19 @@ class SkraDatePicker {
             return;
         }
         const intent = this.keyboard.resolve(event, {
-            focusedIso: this.focusedIso(),
+            focusedIso: this.focusedAt(),
             firstDayOfWeek: this.firstDow(),
+            view: this.view(),
         });
         switch (intent.type) {
             case 'focus':
                 event.preventDefault();
-                this.focusedIso.set(intent.iso);
+                this.focusedKey.set(intent.iso);
                 this.scheduleFocus(); // re-focus after the grid re-stamps
                 break;
             case 'select':
                 event.preventDefault();
-                this.selectDate(this.focusedIso());
+                this.selectCell(this.focusedAt());
                 break;
             case 'close':
                 this.returnFocus = true;
@@ -499,19 +823,39 @@ class SkraDatePicker {
                 break;
         }
     }
-    // ── Month navigation (pointer; focus stays on the nav button) ──
-    goToPreviousMonth() {
-        this.focusedIso.set(addMonthsClamped(this.focusedIso(), -1));
+    // ── Period navigation (pointer; focus stays on the nav button) ──
+    goToPreviousPeriod() {
+        this.stepPeriod(-1);
+    }
+    goToNextPeriod() {
+        this.stepPeriod(1);
     }
-    goToNextMonth() {
-        this.focusedIso.set(addMonthsClamped(this.focusedIso(), 1));
+    /** One period = one month (day view) / one year (month view). */
+    stepPeriod(offset) {
+        const key = this.focusedAt();
+        this.focusedKey.set(this.view() === 'month'
+            ? addYearsToKey(key, offset)
+            : addMonthsClamped(key, offset));
     }
     // ── Selection ──
-    selectDate(iso) {
-        if (!isInRange(iso, this.min(), this.max()))
-            return; // guard out-of-range (one place: keyboard + pointer)
+    selectCell(iso) {
+        const precision = this.precision();
+        if (this.view() !== precision) {
+            // Reserved for the ADR 0057 R9 quick-pick. The moment a NAVIGATION view can differ from the
+            // terminal precision, a cell click in it is a step DOWN, not a commit — emitting here would
+            // silently write `2026-06-01` for a click on "June" under `precision="day"`. No such view exists
+            // yet, so this is a hard stop, not a behaviour: the step-down path must be filled in before a
+            // navigation view can ship. Cheap to add now, invisible to fix later. (Raised in review.)
+            if (typeof ngDevMode !== 'undefined' && ngDevMode)
+                console.warn(`skra-datepicker: a cell was activated in the "${this.view()}" view while precision is ` +
+                    `"${precision}". Nothing was emitted — a navigation view needs the ADR 0057 R9 step-down path.`);
+            return;
+        }
+        // Guard out-of-range in ONE place (keyboard + pointer), at the precision the value is emitted in.
+        if (!isInRangeAt(iso, this.min(), this.max(), precision))
+            return;
         this.returnFocus = true;
-        this.valueChange.emit(iso);
+        this.valueChange.emit(reKey(iso, precision));
         this.close();
     }
     // ── Panel open / close (native toggle from the Popover API) ──
@@ -524,7 +868,7 @@ class SkraDatePicker {
             this.onClose();
     }
     onOpen() {
-        this.focusedIso.set(this.seedFocus());
+        this.focusedKey.set(this.seedFocus());
         const anchor = this.triggerRef()?.nativeElement;
         const panel = this.panelRef()?.nativeElement;
         if (anchor && panel) {
@@ -551,23 +895,82 @@ class SkraDatePicker {
     close() {
         this.panelRef()?.nativeElement.hidePopover?.();
     }
-    /** Seed the focused day on open: the valid current value, else today, clamped into `[min,max]`. */
+    /** Seed the focused cell on open: the valid current value, else today, clamped into `[min,max]`. */
     seedFocus() {
-        const v = this.value();
-        const base = isValidIso(v) ? v : this.todayIso;
-        return clampIso(base, this.min(), this.max());
+        const value = this.value();
+        const precision = this.precision();
+        const base = isValidAt(value, precision) ? value : todayAt(precision);
+        return clampAt(base, this.min(), this.max(), precision);
     }
-    monthOffsetLabel(n) {
-        const { y, m } = this.displayedMonth();
-        const ref = parseIso(addMonthsClamped(toIso({ y, m, d: 1 }), n));
-        return formatMonthYear(ref.y, ref.m, this.locale());
+    // ── Grid builders ──
+    buildDayRows() {
+        const { y, m } = this.displayed();
+        const locale = this.locale();
+        const selected = reKey(this.selectedKey(), 'day');
+        const focused = this.focusedAt();
+        const min = this.min();
+        const max = this.max();
+        return monthGrid(y, m, this.firstDow()).map((week, rowIndex) => ({
+            key: rowIndex,
+            cells: week.map((iso, columnIndex) => iso === null
+                ? this.emptyCell(`${rowIndex}-${columnIndex}`)
+                : {
+                    key: iso,
+                    iso,
+                    label: formatDayNumber(parseIso(iso).d, locale),
+                    srExt: this.srExtension(formatDayNameExtension(iso, locale)),
+                    today: iso === this.todayIso,
+                    selected: iso === selected,
+                    disabled: !isInRangeAt(iso, min, max, 'day'),
+                    focused: iso === focused,
+                }),
+        }));
+    }
+    buildMonthRows() {
+        const { y } = this.displayed();
+        const locale = this.locale();
+        const selected = reKey(this.selectedKey(), 'month');
+        const focused = this.focusedAt();
+        const todayKey = todayAt('month');
+        const min = this.min();
+        const max = this.max();
+        const yearLabel = this.srExtension(formatYear(y, locale));
+        return yearGrid(y).map((quarter, rowIndex) => ({
+            key: rowIndex,
+            cells: quarter.map((key) => ({
+                key,
+                iso: key,
+                label: formatMonthCell(y, parseIsoMonth(key).m, locale),
+                srExt: yearLabel,
+                today: key === todayKey,
+                selected: key === selected,
+                disabled: !isInRangeAt(key, min, max, 'month'),
+                focused: key === focused,
+            })),
+        }));
+    }
+    /**
+     * The accessible-name separator is baked into the extension rather than left to the template or to the
+     * engine: `[skra-sr-only]` is absolutely positioned, so whether the name computation inserts a space
+     * between the visible text and the extension is engine-dependent. One explicit space, asserted by test.
+     */
+    srExtension(text) {
+        return text === '' ? '' : ` ${text}`;
+    }
+    periodOffsetLabel(offset) {
+        const { y, m } = this.displayed();
+        const locale = this.locale();
+        if (this.view() === 'month')
+            return formatYear(y + offset, locale);
+        const ref = parseIso(addMonthsClamped(toIso({ y, m, d: 1 }), offset));
+        return ref ? formatMonthYear(ref.y, ref.m, locale) : '';
     }
     emptyCell(key) {
         return {
             key,
             iso: null,
-            dayNum: '',
-            srName: '',
+            label: '',
+            srExt: '',
             today: false,
             selected: false,
             disabled: true,
@@ -575,11 +978,11 @@ class SkraDatePicker {
         };
     }
     scheduleFocus() {
-        afterNextRender(() => this.focusActiveDay(), { injector: this.injector });
+        afterNextRender(() => this.focusActiveCell(), { injector: this.injector });
     }
-    focusActiveDay() {
+    focusActiveCell() {
         this.panelRef()
-            ?.nativeElement.querySelector('.skra-datepicker-day[tabindex="0"]')
+            ?.nativeElement.querySelector('.skra-datepicker-cell[tabindex="0"]')
             ?.focus();
     }
     /** Read a length comp token (px/rem) off the panel computed style for the positioner. */
@@ -597,7 +1000,7 @@ class SkraDatePicker {
         return parseFloat(raw) || 0;
     }
     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: `
+    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 }, precision: { classPropertyName: "precision", publicName: "precision", 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"
@@ -641,7 +1044,7 @@ class SkraDatePicker {
       popover="auto"
       role="dialog"
       aria-modal="false"
-      [attr.aria-labelledby]="monthYearId"
+      [attr.aria-labelledby]="periodId"
       (toggle)="onPanelToggle($event)"
     >
       <div class="skra-datepicker-header">
@@ -649,8 +1052,8 @@ class SkraDatePicker {
           type="button"
           class="skra-datepicker-nav"
           tabindex="-1"
-          [attr.aria-label]="prevMonthLabel()"
-          (click)="goToPreviousMonth()"
+          [attr.aria-label]="prevPeriodLabel()"
+          (click)="goToPreviousPeriod()"
         >
           <svg
             viewBox="0 0 24 24"
@@ -663,17 +1066,17 @@ class SkraDatePicker {
           </svg>
         </button>
         <span
-          class="skra-datepicker-monthyear"
-          [id]="monthYearId"
+          class="skra-datepicker-period"
+          [id]="periodId"
           aria-live="polite"
-          >{{ monthYearLabel() }}</span
+          >{{ periodLabel() }}</span
         >
         <button
           type="button"
           class="skra-datepicker-nav"
           tabindex="-1"
-          [attr.aria-label]="nextMonthLabel()"
-          (click)="goToNextMonth()"
+          [attr.aria-label]="nextPeriodLabel()"
+          (click)="goToNextPeriod()"
         >
           <svg
             viewBox="0 0 24 24"
@@ -690,21 +1093,24 @@ class SkraDatePicker {
       <table
         class="skra-datepicker-grid"
         role="grid"
-        [attr.aria-labelledby]="monthYearId"
+        [class.skra-datepicker-grid--month]="view() === 'month'"
+        [attr.aria-labelledby]="periodId"
       >
-        <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>
+        @if (view() !== 'month') {
+          <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) {
+          @for (row of rows(); track row.key) {
             <tr>
-              @for (cell of week.days; track cell.key) {
+              @for (cell of row.cells; track cell.key) {
                 @if (cell.iso) {
                   <td
                     role="gridcell"
@@ -712,23 +1118,26 @@ class SkraDatePicker {
                   >
                     <button
                       type="button"
-                      class="skra-datepicker-day"
+                      class="skra-datepicker-cell"
                       [attr.tabindex]="cell.focused ? 0 : -1"
-                      [attr.aria-current]="cell.today ? 'date' : null"
+                      [attr.aria-current]="cell.today ? currentToken() : 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)"
+                      (click)="selectCell(cell.iso)"
                       (keydown)="onGridKeydown($event)"
                     >
-                      {{ cell.dayNum
-                      }}<span class="skra-datepicker-day-sr" skra-sr-only>{{
-                        cell.srName
+                      {{ cell.label
+                      }}<span class="skra-datepicker-cell-sr" skra-sr-only>{{
+                        cell.srExt
                       }}</span>
                     </button>
                   </td>
                 } @else {
-                  <td class="skra-datepicker-day-empty" aria-hidden="true"></td>
+                  <td
+                    class="skra-datepicker-cell-empty"
+                    aria-hidden="true"
+                  ></td>
                 }
               }
             </tr>
@@ -736,7 +1145,7 @@ class SkraDatePicker {
         </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 });
+  `, 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-period{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%}@media(hover:hover)and (pointer:fine){.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-cell-block-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-cell-empty{padding:0}.skra-datepicker-cell{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-datepicker-cell-block-size);block-size:var(--skra-comp-datepicker-cell-block-size);margin:0;padding:0;background:transparent;border:0;border-radius:var(--skra-comp-datepicker-cell-radius);color:var(--skra-comp-datepicker-cell-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)}@media(hover:hover)and (pointer:fine){.skra-datepicker-cell:hover:not([aria-disabled=true]){background:var(--skra-comp-datepicker-cell-background-hover)}}.skra-datepicker-cell:focus-visible{outline:var(--skra-comp-datepicker-focus-ring-width) solid var(--skra-comp-datepicker-focus-ring-color);outline-offset:-.0625rem}.skra-datepicker-cell[data-skra-today]{box-shadow:inset 0 0 0 .125rem var(--skra-comp-datepicker-cell-today-indicator-color)}.skra-datepicker-cell[data-skra-selected]{background:var(--skra-comp-datepicker-cell-background-selected);color:var(--skra-comp-datepicker-cell-foreground-selected)}.skra-datepicker-cell[aria-disabled=true]{color:var(--skra-comp-datepicker-cell-foreground-disabled);cursor:default}.skra-datepicker-grid--month .skra-datepicker-cell{inline-size:auto;min-inline-size:max(var(--skra-comp-datepicker-month-cell-min-inline-size),var(--skra-comp-datepicker-cell-block-size) * 7 / 3)}@media(prefers-reduced-motion:reduce){.skra-datepicker-trigger,.skra-datepicker-panel,.skra-datepicker-cell{transition-duration:0ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraDatePicker, decorators: [{
             type: Component,
@@ -784,7 +1193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
       popover="auto"
       role="dialog"
       aria-modal="false"
-      [attr.aria-labelledby]="monthYearId"
+      [attr.aria-labelledby]="periodId"
       (toggle)="onPanelToggle($event)"
     >
       <div class="skra-datepicker-header">
@@ -792,8 +1201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
           type="button"
           class="skra-datepicker-nav"
           tabindex="-1"
-          [attr.aria-label]="prevMonthLabel()"
-          (click)="goToPreviousMonth()"
+          [attr.aria-label]="prevPeriodLabel()"
+          (click)="goToPreviousPeriod()"
         >
           <svg
             viewBox="0 0 24 24"
@@ -806,17 +1215,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
           </svg>
         </button>
         <span
-          class="skra-datepicker-monthyear"
-          [id]="monthYearId"
+          class="skra-datepicker-period"
+          [id]="periodId"
           aria-live="polite"
-          >{{ monthYearLabel() }}</span
+          >{{ periodLabel() }}</span
         >
         <button
           type="button"
           class="skra-datepicker-nav"
           tabindex="-1"
-          [attr.aria-label]="nextMonthLabel()"
-          (click)="goToNextMonth()"
+          [attr.aria-label]="nextPeriodLabel()"
+          (click)="goToNextPeriod()"
         >
           <svg
             viewBox="0 0 24 24"
@@ -833,21 +1242,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
       <table
         class="skra-datepicker-grid"
         role="grid"
-        [attr.aria-labelledby]="monthYearId"
+        [class.skra-datepicker-grid--month]="view() === 'month'"
+        [attr.aria-labelledby]="periodId"
       >
-        <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>
+        @if (view() !== 'month') {
+          <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) {
+          @for (row of rows(); track row.key) {
             <tr>
-              @for (cell of week.days; track cell.key) {
+              @for (cell of row.cells; track cell.key) {
                 @if (cell.iso) {
                   <td
                     role="gridcell"
@@ -855,23 +1267,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                   >
                     <button
                       type="button"
-                      class="skra-datepicker-day"
+                      class="skra-datepicker-cell"
                       [attr.tabindex]="cell.focused ? 0 : -1"
-                      [attr.aria-current]="cell.today ? 'date' : null"
+                      [attr.aria-current]="cell.today ? currentToken() : 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)"
+                      (click)="selectCell(cell.iso)"
                       (keydown)="onGridKeydown($event)"
                     >
-                      {{ cell.dayNum
-                      }}<span class="skra-datepicker-day-sr" skra-sr-only>{{
-                        cell.srName
+                      {{ cell.label
+                      }}<span class="skra-datepicker-cell-sr" skra-sr-only>{{
+                        cell.srExt
                       }}</span>
                     </button>
                   </td>
                 } @else {
-                  <td class="skra-datepicker-day-empty" aria-hidden="true"></td>
+                  <td
+                    class="skra-datepicker-cell-empty"
+                    aria-hidden="true"
+                  ></td>
                 }
               }
             </tr>
@@ -883,8 +1298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.data-skra-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-skra-readonly]': 'isReadonly() ? "" : null',
                         '[attr.data-skra-validation]': 'hasError() ? "invalid" : null',
-                    }, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: 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-period{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%}@media(hover:hover)and (pointer:fine){.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-cell-block-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-cell-empty{padding:0}.skra-datepicker-cell{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skra-comp-datepicker-cell-block-size);block-size:var(--skra-comp-datepicker-cell-block-size);margin:0;padding:0;background:transparent;border:0;border-radius:var(--skra-comp-datepicker-cell-radius);color:var(--skra-comp-datepicker-cell-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)}@media(hover:hover)and (pointer:fine){.skra-datepicker-cell:hover:not([aria-disabled=true]){background:var(--skra-comp-datepicker-cell-background-hover)}}.skra-datepicker-cell:focus-visible{outline:var(--skra-comp-datepicker-focus-ring-width) solid var(--skra-comp-datepicker-focus-ring-color);outline-offset:-.0625rem}.skra-datepicker-cell[data-skra-today]{box-shadow:inset 0 0 0 .125rem var(--skra-comp-datepicker-cell-today-indicator-color)}.skra-datepicker-cell[data-skra-selected]{background:var(--skra-comp-datepicker-cell-background-selected);color:var(--skra-comp-datepicker-cell-foreground-selected)}.skra-datepicker-cell[aria-disabled=true]{color:var(--skra-comp-datepicker-cell-foreground-disabled);cursor:default}.skra-datepicker-grid--month .skra-datepicker-cell{inline-size:auto;min-inline-size:max(var(--skra-comp-datepicker-month-cell-min-inline-size),var(--skra-comp-datepicker-cell-block-size) * 7 / 3)}@media(prefers-reduced-motion:reduce){.skra-datepicker-trigger,.skra-datepicker-panel,.skra-datepicker-cell{transition-duration:0ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.