@skra/ui 0.2.0

package/fesm2022/skra-ui-datepicker.mjs

@@ -0,0 +1,867 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, viewChild, inject, Injector, signal, computed, DestroyRef, 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).
+ *
+ * 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`.
+ * - `Date` is used ONLY as a UTC calendar calculator — built via `Date.UTC(...)`, read via `getUTC*`.
+ * - `new Date(isoString)` is FORBIDDEN (date-only parses as UTC midnight → local accessors shift it).
+ * - "today" uses LOCAL accessors — "today" is inherently local-civil.
+ * - Month length + leap years are delegated to the platform engine, NEVER a hand-written leap rule.
+ *
+ * Months are **1-based** here (1=Jan … 12=Dec) to mirror the ISO string; the single 0-based conversion
+ * happens at the `Date.UTC` call sites. Weekdays are **ISO** (1=Mon … 7=Sun) to match `firstDayOfWeek`.
+ *
+ * This module is the ADR 0050 §6 swap-point: a future `Temporal.PlainDate` migration touches only here.
+ */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Zero-pad to a fixed width (no locale, no `Intl` — pure formatting). */
+function pad(n, width) {
+    return String(n).padStart(width, '0');
+}
+/** Days in month `m` (1-based) of year `y` — delegated to the engine (leap years handled for free). */
+function daysInMonth(y, m) {
+    // Date.UTC month is 0-based; passing the 1-based `m` selects the NEXT month, day 0 = last of `m`.
+    return new Date(Date.UTC(y, m, 0)).getUTCDate();
+}
+/** ISO weekday (1=Mon … 7=Sun) of an arbitrary {y,m,d}, via the UTC calculator. */
+function isoWeekday(y, m, d) {
+    const jsDay = new Date(Date.UTC(y, m - 1, d)).getUTCDay(); // 0=Sun … 6=Sat
+    return ((jsDay + 6) % 7) + 1; // → 1=Mon … 7=Sun
+}
+/** Strict `YYYY-MM-DD` parse with real calendar validation. Returns `null` for anything invalid. */
+function parseIso(iso) {
+    const match = ISO_DATE.exec(iso);
+    if (!match)
+        return null;
+    const y = Number(match[1]);
+    const m = Number(match[2]);
+    const d = Number(match[3]);
+    if (m < 1 || m > 12)
+        return null;
+    if (d < 1 || d > daysInMonth(y, m))
+        return null; // rejects 2026-02-30, 2026-04-31, etc.
+    return { y, m, d };
+}
+/** `true` iff `iso` is a strictly valid `YYYY-MM-DD` calendar date. */
+function isValidIso(iso) {
+    return parseIso(iso) !== null;
+}
+/** Serialize a calendar date to `YYYY-MM-DD`. */
+function toIso({ y, m, d }) {
+    return `${pad(y, 4)}-${pad(m, 2)}-${pad(d, 2)}`;
+}
+/**
+ * Build a UTC `Date` from an ISO string — the ONLY sanctioned `Date`-from-value site (used by
+ * `calendar-intl` to feed `Intl.DateTimeFormat`, which MUST also pass `timeZone:'UTC'`). Returns the
+ * value as a UTC instant; callers MUST read it back via UTC accessors / a UTC-zoned formatter ONLY.
+ */
+function toUtcDate(iso) {
+    const date = parseIso(iso);
+    if (!date)
+        return null;
+    return new Date(Date.UTC(date.y, date.m - 1, date.d));
+}
+/** Today's LOCAL calendar date as ISO (local accessors — "today" is local-civil, ADR 0050 §3). */
+function today() {
+    const now = new Date();
+    return toIso({
+        y: now.getFullYear(),
+        m: now.getMonth() + 1,
+        d: now.getDate(),
+    });
+}
+/** Add `n` days (may be negative); crosses month/year boundaries via the UTC engine. */
+function addDays(iso, n) {
+    const date = parseIso(iso);
+    if (!date)
+        return iso;
+    const dt = new Date(Date.UTC(date.y, date.m - 1, date.d));
+    dt.setUTCDate(dt.getUTCDate() + n);
+    return toIso({
+        y: dt.getUTCFullYear(),
+        m: dt.getUTCMonth() + 1,
+        d: dt.getUTCDate(),
+    });
+}
+/**
+ * Add `n` months (may be negative), preserving day-of-month CLAMPED to the target month length
+ * (ADR 0050 §4): Jan 31 + 1 month → Feb 28/29, never Mar 3.
+ */
+function addMonthsClamped(iso, n) {
+    const date = parseIso(iso);
+    if (!date)
+        return iso;
+    const total = date.y * 12 + (date.m - 1) + n;
+    const y = Math.floor(total / 12);
+    const m = (((total % 12) + 12) % 12) + 1; // 1-based, safe for negative totals
+    const d = Math.min(date.d, daysInMonth(y, m));
+    return toIso({ y, m, d });
+}
+/** Add `n` years, clamped (Feb 29 + 1 year → Feb 28). Delegates to month arithmetic. */
+function addYearsClamped(iso, n) {
+    return addMonthsClamped(iso, n * 12);
+}
+/** Lexicographic comparison — valid because same-format ISO 8601 date-only strings are byte-sortable. */
+function compareIso(a, b) {
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+/** Inclusive range test. `''` bound = unbounded on that side (ADR 0050 §2, lexicographic). */
+function isInRange(iso, min, max) {
+    if (min !== '' && compareIso(iso, min) < 0)
+        return false;
+    if (max !== '' && compareIso(iso, max) > 0)
+        return false;
+    return true;
+}
+/** Clamp `iso` into `[min,max]` (each `''` = unbounded). Used to seed the displayed month / focus. */
+function clampIso(iso, min, max) {
+    if (min !== '' && compareIso(iso, min) < 0)
+        return min;
+    if (max !== '' && compareIso(iso, max) > 0)
+        return max;
+    return iso;
+}
+/**
+ * Build a month grid: weeks of 7 cells, each a day ISO string or `null` (leading/trailing padding —
+ * adjacent-month days are NOT rendered in MVP). `firstDayOfWeek` is ISO (1=Mon … 7=Sun).
+ * Pure + deterministic; the component decorates cells with selected/today/disabled/focused state.
+ */
+function monthGrid(y, m, firstDayOfWeek) {
+    const firstWeekday = isoWeekday(y, m, 1); // ISO weekday of the 1st
+    const leadingBlanks = (firstWeekday - firstDayOfWeek + 7) % 7;
+    const dim = daysInMonth(y, m);
+    const cells = [];
+    for (let i = 0; i < leadingBlanks; i++)
+        cells.push(null);
+    for (let d = 1; d <= dim; d++)
+        cells.push(toIso({ y, m, d }));
+    while (cells.length % 7 !== 0)
+        cells.push(null); // trailing padding
+    const weeks = [];
+    for (let i = 0; i < cells.length; i += 7)
+        weeks.push(cells.slice(i, i + 7));
+    return weeks;
+}
+
+const NONE = { type: 'none' };
+/**
+ * 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
+ * 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
+ * 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;
+        switch (event.key) {
+            case 'ArrowLeft':
+                return this.toFocus(focusedIso, addDays(focusedIso, -1));
+            case 'ArrowRight':
+                return this.toFocus(focusedIso, addDays(focusedIso, 1));
+            case 'ArrowUp':
+                return this.toFocus(focusedIso, addDays(focusedIso, -7));
+            case 'ArrowDown':
+                return this.toFocus(focusedIso, addDays(focusedIso, 7));
+            case 'Home':
+                return this.toFocus(focusedIso, this.weekStart(focusedIso, firstDayOfWeek));
+            case 'End':
+                return this.toFocus(focusedIso, addDays(this.weekStart(focusedIso, firstDayOfWeek), 6));
+            case 'PageUp':
+                return this.toFocus(focusedIso, event.shiftKey
+                    ? addYearsClamped(focusedIso, -1)
+                    : addMonthsClamped(focusedIso, -1));
+            case 'PageDown':
+                return this.toFocus(focusedIso, event.shiftKey
+                    ? addYearsClamped(focusedIso, 1)
+                    : addMonthsClamped(focusedIso, 1));
+            case 'Enter':
+            case ' ':
+            case 'Spacebar': // legacy key name
+                return { type: 'select' };
+            case 'Escape':
+                return { type: 'close' };
+            default:
+                return NONE;
+        }
+    }
+    toFocus(fromIso, toIso) {
+        return {
+            type: 'focus',
+            iso: toIso,
+            monthChanged: this.monthChanged(fromIso, toIso),
+        };
+    }
+    monthChanged(a, b) {
+        const pa = parseIso(a);
+        const pb = parseIso(b);
+        return !pa || !pb || pa.y !== pb.y || pa.m !== pb.m;
+    }
+    weekStart(iso, firstDayOfWeek) {
+        const p = parseIso(iso);
+        if (!p)
+            return iso;
+        const offset = (isoWeekday(p.y, p.m, p.d) - firstDayOfWeek + 7) % 7;
+        return addDays(iso, -offset);
+    }
+}
+
+/**
+ * calendar-intl — DatePicker localization via the platform `Intl` (ADR 0050 §5). NO locale string
+ * catalog is bundled (atoms-agnostic); everything language/digit-related is derived from `Intl`, keyed
+ * by the consumer `locale`. Every `Date` fed to a formatter comes from `calendar-math.toUtcDate` AND the
+ * formatter MUST set `timeZone: 'UTC'` (else the displayed date shifts off the zoneless value).
+ */
+const UTC = 'UTC';
+/** 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 → `''`. */
+function formatValue(iso, locale) {
+    const dt = toUtcDate(iso);
+    if (!dt)
+        return '';
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeZone: UTC,
+    }).format(dt);
+}
+/** 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`);
+    if (!dt)
+        return '';
+    return new Intl.DateTimeFormat(locale, {
+        month: 'long',
+        year: 'numeric',
+        timeZone: UTC,
+    }).format(dt);
+}
+/** Full localized date for a day cell's `[skra-sr-only]` accessible-name extension (ADR 033 Path 2). */
+function formatDayName(iso, locale) {
+    const dt = toUtcDate(iso);
+    if (!dt)
+        return '';
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'long',
+        timeZone: UTC,
+    }).format(dt);
+}
+/** Visible day number, localized digits (e.g. Arabic-Indic `٥`) — never a raw `toString()`. */
+function formatDayNumber(day, locale) {
+    return new Intl.NumberFormat(locale).format(day);
+}
+/**
+ * Localized weekday column headers, 7 entries starting at `firstDayOfWeek` (ISO 1=Mon … 7=Sun).
+ * Reference week: 2024-01-01 is a Monday, so day-of-month `d` (1–7) maps directly to ISO weekday `d`.
+ */
+function weekdayHeaders(firstDayOfWeek, locale) {
+    const shortFmt = new Intl.DateTimeFormat(locale, {
+        weekday: 'short',
+        timeZone: UTC,
+    });
+    const longFmt = new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        timeZone: UTC,
+    });
+    const headers = [];
+    for (let i = 0; i < 7; i++) {
+        const dow = ((firstDayOfWeek - 1 + i) % 7) + 1; // 1 … 7
+        const dt = toUtcDate(`2024-01-0${dow}`); // dow 1–7 → '2024-01-01' … '2024-01-07'
+        headers.push({
+            key: dow,
+            short: shortFmt.format(dt),
+            long: longFmt.format(dt),
+        });
+    }
+    return headers;
+}
+/**
+ * Resolve the first day of the week (ISO 1=Mon … 7=Sun): explicit `override` → `Intl` `getWeekInfo` →
+ * **Monday fallback**. The override is the MVP safety valve — `Intl.Locale.getWeekInfo()` support is
+ * spotty (older Firefox/Safari), so the detection path genuinely fails in mainstream browsers and the
+ * Monday fallback is wrong for en-US (Sun) / much of the Middle East (Sat) (ADR 0050 §5).
+ */
+function resolveFirstDayOfWeek(override, locale) {
+    if (typeof override === 'number' && override >= 1 && override <= 7)
+        return override;
+    try {
+        const loc = new Intl.Locale(locale ?? hostLocale() ?? 'en');
+        const info = loc.getWeekInfo?.() ?? loc.weekInfo; // method (modern) or property (older engines)
+        const firstDay = info?.firstDay;
+        if (typeof firstDay === 'number' && firstDay >= 1 && firstDay <= 7)
+            return firstDay;
+    }
+    catch {
+        /* unsupported / malformed locale → fall through to the documented fallback */
+    }
+    return 1; // Monday (ISO-8601 week start)
+}
+
+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).
+ *
+ * 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).
+ *
+ * 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). */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Inclusive lower bound (ISO); `''` = unbounded (ADR 0050 §2). */
+    min = input('', ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Inclusive upper bound (ISO); `''` = unbounded. */
+    max = input('', ...(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 */ []));
+    /** 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 */ []));
+    /** Value-empty hint in the trigger (NOT the accessible name — ADR 033). */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Placement intent; flip/shift adjust at runtime. */
+    placement = input('bottom', ...(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 */ []));
+    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 */ []));
+    /** 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 */ []));
+    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 */ []));
+    // ── 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 */ []));
+    /** 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 */ []));
+    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,
+                }),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.positioner?.destroy());
+        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;
+            }, ...(ngDevMode ? [{ debugName: "warn" }] : /* istanbul ignore next */ []));
+            afterNextRender(() => {
+                const message = warn();
+                if (message)
+                    console.warn(message);
+            }, { injector: this.injector });
+        }
+    }
+    // ── Trigger interaction ──
+    onTriggerClick(event) {
+        if (this.isReadonly())
+            event.preventDefault(); // block the native popovertarget open
+    }
+    onTriggerKeydown(event) {
+        if (this.isDisabled() || this.isReadonly() || this.isOpen())
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.open(); // Enter/Space/click open via the native popovertarget
+        }
+    }
+    // ── Grid keyboard (APG Date Picker, 2-D) ──
+    onGridKeydown(event) {
+        if (event.key === 'Tab') {
+            // APG: Tab dismisses the calendar; focus returns to the trigger (deterministic, no containment).
+            event.preventDefault();
+            this.returnFocus = true;
+            this.close();
+            return;
+        }
+        const intent = this.keyboard.resolve(event, {
+            focusedIso: this.focusedIso(),
+            firstDayOfWeek: this.firstDow(),
+        });
+        switch (intent.type) {
+            case 'focus':
+                event.preventDefault();
+                this.focusedIso.set(intent.iso);
+                this.scheduleFocus(); // re-focus after the grid re-stamps
+                break;
+            case 'select':
+                event.preventDefault();
+                this.selectDate(this.focusedIso());
+                break;
+            case 'close':
+                this.returnFocus = true;
+                this.close();
+                break;
+            case 'none':
+                break;
+        }
+    }
+    // ── Month navigation (pointer; focus stays on the nav button) ──
+    goToPreviousMonth() {
+        this.focusedIso.set(addMonthsClamped(this.focusedIso(), -1));
+    }
+    goToNextMonth() {
+        this.focusedIso.set(addMonthsClamped(this.focusedIso(), 1));
+    }
+    // ── Selection ──
+    selectDate(iso) {
+        if (!isInRange(iso, this.min(), this.max()))
+            return; // guard out-of-range (one place: keyboard + pointer)
+        this.returnFocus = true;
+        this.valueChange.emit(iso);
+        this.close();
+    }
+    // ── Panel open / close (native toggle from the Popover API) ──
+    onPanelToggle(event) {
+        const open = event.newState === 'open';
+        this.isOpen.set(open);
+        if (open)
+            this.onOpen();
+        else
+            this.onClose();
+    }
+    onOpen() {
+        this.focusedIso.set(this.seedFocus());
+        const anchor = this.triggerRef()?.nativeElement;
+        const panel = this.panelRef()?.nativeElement;
+        if (anchor && panel) {
+            this.positioner?.destroy();
+            this.positioner = _attachPositioner(anchor, panel, () => ({
+                placement: this.placement(),
+                offset: this.cssLenPx('--skra-comp-datepicker-panel-offset'),
+                viewportPadding: this.cssLenPx('--skra-comp-datepicker-panel-viewport-padding'),
+            }));
+        }
+        this.scheduleFocus();
+    }
+    onClose() {
+        this.positioner?.destroy();
+        this.positioner = undefined;
+        if (this.returnFocus) {
+            this.returnFocus = false;
+            this.triggerRef()?.nativeElement.focus();
+        }
+    }
+    open() {
+        this.panelRef()?.nativeElement.showPopover?.();
+    }
+    close() {
+        this.panelRef()?.nativeElement.hidePopover?.();
+    }
+    /** Seed the focused day 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());
+    }
+    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());
+    }
+    emptyCell(key) {
+        return {
+            key,
+            iso: null,
+            dayNum: '',
+            srName: '',
+            today: false,
+            selected: false,
+            disabled: true,
+            focused: false,
+        };
+    }
+    scheduleFocus() {
+        afterNextRender(() => this.focusActiveDay(), { injector: this.injector });
+    }
+    focusActiveDay() {
+        this.panelRef()
+            ?.nativeElement.querySelector('.skra-datepicker-day[tabindex="0"]')
+            ?.focus();
+    }
+    /** Read a length comp token (px/rem) off the panel computed style for the positioner. */
+    cssLenPx(prop) {
+        const el = this.panelRef()?.nativeElement;
+        if (!el)
+            return 0;
+        const raw = getComputedStyle(el).getPropertyValue(prop).trim();
+        if (raw.endsWith('px'))
+            return parseFloat(raw);
+        if (raw.endsWith('rem')) {
+            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            return parseFloat(raw) * rootFontSize;
+        }
+        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>
+  `, 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: [{
+            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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkraCalendarKeyboard, SkraDatePicker };
+//# sourceMappingURL=skra-ui-datepicker.mjs.map