@konce-pt/react 0.12.0 → 0.15.0

package/dist/date-range/date-range.js

@@ -19,10 +19,10 @@ const EMPTY_RANGE = { start: '', end: '' };
  * `visibleMonths` pokazuje kilka miesięcy obok siebie, a zakres podświetla się ciągłym pasmem
  * przez wszystkie panele.
  *
- * Klawiatura jak w `KptDatepicker`: `Enter`/`Spacja`/`↓` otwierają panel z fokusem na początku
- * zakresu (albo dziś), strzałki, `Home`/`End` i `PageUp`/`PageDown` (z `Shift` — rok) chodzą po
+ * Klawiatura jak w `KptDatepicker`: `Enter`/`Spacja`/`ArrowDown` otwierają panel z fokusem na początku
+ * zakresu (albo dziś), strzałki, `Home`/`End` i `PageUp`/`PageDown` (z `Shift` - rok) chodzą po
  * dniach przez wszystkie panele, `Tab` krąży w panelu, `Escape` i wybór końca oddają fokus polu.
- * Krańce i środek zakresu są w nazwie dnia („…, początek zakresu”), a wybór i przewinięcie miesiąca
+ * Krańce i środek zakresu są w nazwie dnia ("..., początek zakresu"), a wybór i przewinięcie miesiąca
  * ogłasza region `polite`. Pole to `role="combobox"` z `aria-haspopup="dialog"`, więc niesie
  * `aria-required`, `aria-readonly` i `aria-invalid`. Tydzień zaczyna się wg aktywnego języka.
  *
@@ -32,7 +32,7 @@ const EMPTY_RANGE = { start: '', end: '' };
  */
 export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange, mode = 'date', visibleMonths = 1, hourFormat = 24, minuteStep = 1, placeholder, displayFormat = 'pl', firstDayOfWeek = null, open, onOpenChange, minDate = null, maxDate = null, ariaLabel = null, id, disabled = false, readOnly = false, required = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
-    /** `div` z rolą nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    /** `div` z rolą nie dostaje nazwy z `label[for]` - stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-date-range');
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: false, onChange: onOpenChange });
@@ -40,14 +40,14 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
     const triggerRef = useRef(null);
     const panelRef = useRef(null);
     const panelId = useKptId(undefined, 'kpt-date-range-panel');
-    /** Dzień z fokusem — jedyny przystanek Tab siatek dni (roving tabindex przez wszystkie panele). */
+    /** Dzień z fokusem - jedyny przystanek Tab siatek dni (roving tabindex przez wszystkie panele). */
     const [focusIso, setFocusIso] = useState('');
     /** Komunikat regionu `polite` po wyborze początku i całego zakresu. */
     const [announcement, setAnnouncement] = useState('');
-    /** Prośba o przeniesienie fokusu po najbliższym renderze (otwarcie, ruch klawiszem) — licznik w stanie. */
+    /** Prośba o przeniesienie fokusu po najbliższym renderze (otwarcie, ruch klawiszem) - licznik w stanie. */
     const [focusRequest, setFocusRequest] = useState(0);
     const requestFocus = () => setFocusRequest((n) => n + 1);
-    /** „Dziś” liczone przy każdym otwarciu — panel otwarty po północy nie pokazuje wczorajszego dnia. */
+    /** "Dziś" liczone przy każdym otwarciu - panel otwarty po północy nie pokazuje wczorajszego dnia. */
     const [today, setToday] = useState(() => new Date());
     const todayIso = toIso(today);
     const firstDay = firstDayOfWeek ?? kptFirstDayOfWeek(activeLocale);
@@ -57,7 +57,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
     const [startTime, setStartTime] = useState('');
     const [endTime, setEndTime] = useState('');
     const [timeEnd, setTimeEnd] = useState('start');
-    // Część kalendarzowa zakresu w trybie datetime — wartość powstaje dopiero przy „Gotowe".
+    // Część kalendarzowa zakresu w trybie datetime - wartość powstaje dopiero przy "Gotowe".
     const [startDate, setStartDate] = useState('');
     const [endDate, setEndDate] = useState('');
     const months = monthNames(activeLocale);
@@ -69,7 +69,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
         const date = parseDate(iso);
         return date ? dayFormat.format(date) : iso;
     };
-    /** Pełna nazwa dnia z rolą w zakresie — kolor pasma nie jest jedynym nośnikiem informacji. */
+    /** Pełna nazwa dnia z rolą w zakresie - kolor pasma nie jest jedynym nośnikiem informacji. */
     const dayLabel = (cell) => {
         const name = dayName(cell.iso);
         if (cell.isStart)
@@ -89,7 +89,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
         if (!start)
             return '';
         if (mode === 'time') {
-            return end ? `${fmtTime(start)} – ${fmtTime(end)}` : `${fmtTime(start)} – …`;
+            return end ? `${fmtTime(start)} - ${fmtTime(end)}` : `${fmtTime(start)} - ...`;
         }
         if (mode === 'datetime') {
             const one = (v) => {
@@ -97,13 +97,13 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
                 const time = fmtTime(timePart(v));
                 return time ? `${date} ${time}` : date;
             };
-            return end ? `${one(start)} – ${one(end)}` : `${one(start)} – …`;
+            return end ? `${one(start)} - ${one(end)}` : `${one(start)} - ...`;
         }
         const fmt = (iso) => displayDate(iso, displayFormat, activeLocale);
-        return end ? `${fmt(start)} – ${fmt(end)}` : `${fmt(start)} – …`;
+        return end ? `${fmt(start)} - ${fmt(end)}` : `${fmt(start)} - ...`;
     })();
-    // Panel otwiera też `open` z zewnątrz — stan początkowy liczymy przy każdym przejściu w stan
-    // otwarty, wzorcem „poprzednia wartość w stanie” (bez efektu i klatki ze starym widokiem).
+    // Panel otwiera też `open` z zewnątrz - stan początkowy liczymy przy każdym przejściu w stan
+    // otwarty, wzorcem "poprzednia wartość w stanie" (bez efektu i klatki ze starym widokiem).
     const [wasOpen, setWasOpen] = useState(isOpen);
     if (wasOpen !== isOpen) {
         setWasOpen(isOpen);
@@ -142,12 +142,12 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
         setOpen(false);
         onTouch?.();
     };
-    /** Zamknięcie z powrotem fokusu na pole — po wyborze z klawiatury, `Escape`. */
+    /** Zamknięcie z powrotem fokusu na pole - po wyborze z klawiatury, `Escape`. */
     const closeAndFocus = () => {
         close();
         triggerRef.current?.focus();
     };
-    // Fokus po renderze. Panel w nakładce jest niewidoczny do pierwszego pomiaru — stąd rAF.
+    // Fokus po renderze. Panel w nakładce jest niewidoczny do pierwszego pomiaru - stąd rAF.
     const focusActive = useEffectEvent(() => focusCalendarActive(panelRef.current, focusIso));
     useEffect(() => {
         if (!isOpen || focusRequest === 0)
@@ -155,7 +155,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
         const frame = requestAnimationFrame(() => focusActive());
         return () => cancelAnimationFrame(frame);
     }, [focusRequest, isOpen]);
-    /** Przesuwa okno paneli tak, żeby miesiąc dnia `iso` był widoczny — z najmniejszym skokiem. */
+    /** Przesuwa okno paneli tak, żeby miesiąc dnia `iso` był widoczny - z najmniejszym skokiem. */
     const revealMonth = (iso) => {
         const target = +iso.slice(0, 4) * 12 + (+iso.slice(5, 7) - 1);
         const first = page.y * 12 + page.m;
@@ -176,7 +176,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
         revealMonth(next);
         requestFocus();
     };
-    /** Strzałki ‹ ›: fokus zostaje na strzałce, ale przystanek siatki idzie za stroną. */
+    /** Strzałki < >: fokus zostaje na strzałce, ale przystanek siatki idzie za stroną. */
     const turnPage = (dir) => {
         const first = page.y * 12 + page.m + dir;
         setPage({ y: Math.floor(first / 12), m: ((first % 12) + 12) % 12 });
@@ -184,11 +184,11 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
         setAnnouncement(Array.from({ length: panelCount }, (_, i) => {
             const month = first + i;
             return `${months[((month % 12) + 12) % 12]} ${Math.floor(month / 12)}`;
-        }).join(' – '));
+        }).join(' - '));
         const moved = moveFocusDate(focusIso, dir === 1 ? 'PageDown' : 'PageUp', { minDate, maxDate, firstDay });
         if (moved) {
             const target = +moved.slice(0, 4) * 12 + (+moved.slice(5, 7) - 1);
-            // Nowe okno zaczyna się od `first` — dzień spoza niego nie dostałby przystanku Tab.
+            // Nowe okno zaczyna się od `first` - dzień spoza niego nie dostałby przystanku Tab.
             if (target >= first && target < first + panelCount)
                 setFocusIso(moved);
         }
@@ -224,12 +224,12 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
             setStartDate(next.start);
             setEndDate(next.end);
             announce(next.start, next.end);
-            return; // czas do wyboru → zamknięcie przez „Gotowe"
+            return; // czas do wyboru -> zamknięcie przez "Gotowe"
         }
         const next = pickRangeDay(current, iso);
         setCurrent(next);
         announce(next.start, next.end);
-        // Panel zostaje otwarty do czasu domknięcia zakresu — inaczej drugi klik nie miałby gdzie paść.
+        // Panel zostaje otwarty do czasu domknięcia zakresu - inaczej drugi klik nie miałby gdzie paść.
         if (next.end)
             closeAndFocus();
     };
@@ -277,7 +277,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
                         clear(event);
                     }
                 }, 
-                // Przy otwartym panelu fokus idzie do kalendarza — „dotknięcie” wyśle dopiero zamknięcie.
+                // Przy otwartym panelu fokus idzie do kalendarza - "dotknięcie" wyśle dopiero zamknięcie.
                 onBlur: () => !isOpen && onTouch?.(), children: [display ? (_jsx("span", { className: "kpt-date-range__value", children: display })) : (_jsx("span", { className: "kpt-date-range__placeholder", children: placeholder ?? t('dateRange.placeholder') })), _jsx("span", { className: "kpt-date-range__spacer" }), display && !readOnly ? (_jsx("button", { type: "button", className: "kpt-date-range__clear", tabIndex: -1, onClick: clear, "aria-label": t('common.clear'), children: _jsx(KptIcon, { name: "x" }) })) : null, _jsx(KptIcon, { className: "kpt-date-range__icon", name: "calendar" })] }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 4, children: _jsxs("div", { ref: panelRef, id: panelId, role: "dialog", "aria-label": t('dateRange.dialog'), className: cn('kpt-calendar', mode === 'time' && 'kpt-calendar--clock', mode !== 'time' && 'kpt-calendar--range', multi && mode !== 'time' && 'kpt-calendar--multi'), onKeyDown: (event) => {
                         if (event.key === 'Escape') {
                             event.preventDefault();
@@ -288,7 +288,7 @@ export function KptDateRange({ value, defaultValue = EMPTY_RANGE, onValueChange,
                             trapTab(event.currentTarget, event.nativeEvent);
                         }
                     }, children: [_jsx("span", { className: "kpt-calendar__live", "aria-live": "polite", children: announcement }), mode === 'time' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-range-tabs", children: [_jsx("button", { type: "button", className: cn(timeEnd === 'start' && 'is-active'), onClick: () => setTimeEnd('start'), children: t('dateRange.from') }), _jsx("button", { type: "button", className: cn(timeEnd === 'end' && 'is-active'), onClick: () => setTimeEnd('end'), children: t('dateRange.to') })] }), _jsx(KptClock
-                                // Klucz na edytowanym końcu wymusza remount przy przełączeniu Od/Koniec — tarcza ma
+                                // Klucz na edytowanym końcu wymusza remount przy przełączeniu Od/Koniec - tarcza ma
                                 // wtedy wrócić do etapu godzin, tak jak dwie osobne instancje w porcie Angulara.
                                 , { value: clockValue, onValueChange: setClockValue, hourFormat: hourFormat, minuteStep: minuteStep }, timeEnd), _jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-calendar__panels", children: panels.map((panel, index) => (_jsxs("div", { className: "kpt-calendar__panel", children: [_jsxs("div", { className: "kpt-calendar__header", children: [index === 0 ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => turnPage(-1), "aria-label": t('datepicker.prevMonth'), children: _jsx(KptIcon, { name: "chevron-left" }) })) : (_jsx("span", { className: "kpt-calendar__nav-slot" })), _jsx("span", { className: "kpt-calendar__title", children: panel.label }), index === panels.length - 1 ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => turnPage(1), "aria-label": t('datepicker.nextMonth'), children: _jsx(KptIcon, { name: "chevron-right" }) })) : (_jsx("span", { className: "kpt-calendar__nav-slot" }))] }), _jsx("div", { className: "kpt-calendar__weekdays", children: weekdays.map((weekday) => (_jsx("span", { className: "kpt-calendar__weekday", children: weekday }, weekday))) }), _jsx("div", { className: "kpt-calendar__grid", onKeyDown: onDayKeyDown, children: panel.weeks.flat().map((cell) => cell.blank ? (_jsx("span", { className: "kpt-calendar__day kpt-calendar__day--blank" }, cell.iso)) : (_jsx("button", { type: "button", className: cn('kpt-calendar__day', !cell.inMonth && 'kpt-calendar__day--muted', cell.today && 'kpt-calendar__day--today', cell.inRange && 'kpt-calendar__day--range', cell.rangeStart && 'kpt-calendar__day--range-start', cell.rangeEnd && 'kpt-calendar__day--range-end', (cell.isStart || cell.isEnd) && 'kpt-calendar__day--selected'), "data-iso": cell.iso, tabIndex: cell.iso === focusIso ? 0 : -1, "aria-label": dayLabel(cell), "aria-current": cell.today ? 'date' : undefined, "aria-pressed": cell.isStart || cell.isEnd, disabled: cell.disabled, onClick: () => selectDay(cell.iso), children: cell.day }, cell.iso))) })] }, panel.key))) }), mode === 'datetime' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "kpt-range-tabs", children: [_jsx("button", { type: "button", className: cn(timeEnd === 'start' && 'is-active'), onClick: () => setTimeEnd('start'), children: t('dateRange.fromTime') }), _jsx("button", { type: "button", className: cn(timeEnd === 'end' && 'is-active'), onClick: () => setTimeEnd('end'), children: t('dateRange.toTime') })] }), _jsx(KptClock, { value: clockValue, onValueChange: setClockValue, hourFormat: hourFormat, minuteStep: minuteStep }, timeEnd), _jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })] })) : null] }))] }) })] }));
 }

package/dist/date-range/llms.txt

@@ -6,48 +6,48 @@ Import: `import { KptDateRange, type KptDateRangeValue } from '@konce-pt/react';
 ## DOM
     <div class="kpt-date-range-host">
       <div class="kpt-date-range" role="combobox" tabindex="0" aria-haspopup="dialog">
-        <span class="kpt-date-range__value">08.09.2026 – 14.09.2026</span>
-        …clear, icon…
+        <span class="kpt-date-range__value">08.09.2026 - 14.09.2026</span>
+        ...clear, icon...
       </div>
     </div>
-    <!-- in a portal: <div class="kpt-calendar kpt-calendar--range kpt-calendar--multi">…</div> -->
+    <!-- in a portal: <div class="kpt-calendar kpt-calendar--range kpt-calendar--multi">...</div> -->
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — `{ start, end }`: dates 'YYYY-MM-DD',
+- `value` / `defaultValue` / `onValueChange` - `{ start, end }`: dates 'YYYY-MM-DD',
   datetime 'YYYY-MM-DDTHH:mm', times 'HH:mm'
 - `mode`: `'date'` (default) | `'datetime'` | `'time'`
-- `visibleMonths`: number (default 1, clamped to 1–3) — months side by side; ignored in 'time' mode
+- `visibleMonths`: number (default 1, clamped to 1-3) - months side by side; ignored in 'time' mode
 - `hourFormat`: 12 | 24 (default 24); `minuteStep`: number (default 1)
-- `placeholder` — without one it falls back to `dateRange.placeholder`
+- `placeholder` - without one it falls back to `dateRange.placeholder`
 - `displayFormat`: `'pl'` (default) | `'iso'` | `'locale'`
 - `minDate`, `maxDate`: 'YYYY-MM-DD' bounds (inclusive); days outside are disabled
-- `ariaLabel` — the accessible name when no `<label for>` describes the field
+- `ariaLabel` - the accessible name when no `<label for>` describes the field
 - `disabled`, `invalid`, `touched`
-- `onTouch()` — fires when the panel closes or focus leaves the closed trigger
+- `onTouch()` - fires when the panel closes or focus leaves the closed trigger
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Two clicks, one band
 The first click sets `start`, the second `end`, a third starts over; clicking before the start
 normalizes the order rather than producing a reversed range (`pickRangeDay` in `@konce-pt/datetime`).
-The panel stays open until the range closes — the second click needs somewhere to land.
+The panel stays open until the range closes - the second click needs somewhere to land.
 
 With several panels the adjacent-month days become blank slots: otherwise the same date would be
 clickable twice, and the band would paint in both places.
 
 ## Keyboard
 As in the date picker: the trigger has `aria-haspopup="dialog"` and `aria-expanded`; `Enter`, `Space`
-and `↓` open the panel (a `role="dialog"` named "Choose a date range") with focus on the range start,
-or today. The arrows, `Home`/`End` and `PageUp`/`PageDown` (with `Shift` — a year) walk the days across
+and `ArrowDown` open the panel (a `role="dialog"` named "Choose a date range") with focus on the range start,
+or today. The arrows, `Home`/`End` and `PageUp`/`PageDown` (with `Shift` - a year) walk the days across
 every panel, shifting the set of months when focus leaves it. `Tab` cycles inside the panel, `Escape`
 closes it, and picking the end (or "Done") returns focus to the trigger. `Delete`/`Backspace` on the
 trigger clears the range.
 
-Each day is named with the full date and its role in the range ("…, start of range", "…, end of range",
-"…, in range") — the band colour is not the only carrier. The ends have `aria-pressed`, today has
-`aria-current="date"`. After the first pick a polite live region says "Start: … Choose the end date.".
+Each day is named with the full date and its role in the range ("..., start of range", "..., end of range",
+"..., in range") - the band colour is not the only carrier. The ends have `aria-pressed`, today has
+`aria-current="date"`. After the first pick a polite live region says "Start: ... Choose the end date.".
 
 ## The clock remounts when the end switches
-`key={timeEnd}` on `KptClock`, so the dial returns to the hours stage after the From/To toggle —
+`key={timeEnd}` on `KptClock`, so the dial returns to the hours stage after the From/To toggle -
 in Angular that came for free from two separate template branches.
 
 ## Examples
@@ -62,16 +62,16 @@ from the `dateRange`, `datepicker` and `common` namespaces.
 
 ## Week start, display format and field state
 - The week starts by the active language (`Intl.Locale#getWeekInfo`, with a fallback list of regions):
-  en / en-US on Sunday, pl, de, en-GB on Monday. `firstDayOfWeek` (1 = Monday … 7 = Sunday) overrides it;
+  en / en-US on Sunday, pl, de, en-GB on Monday. `firstDayOfWeek` (1 = Monday ... 7 = Sunday) overrides it;
   the headers, the grid and `Home`/`End` follow it.
-- `displayFormat`: `'pl'` (DD.MM.YYYY, default), `'iso'` (YYYY-MM-DD) or `'locale'` — order and separators
+- `displayFormat`: `'pl'` (DD.MM.YYYY, default), `'iso'` (YYYY-MM-DD) or `'locale'` - order and separators
   from `Intl` (en-US: MM/DD/YYYY). The placeholder follows the format and its letters follow the language
   (EN `YYYY`, PL `RRRR`, the `datepicker.yearToken`/`monthToken`/`dayToken` keys). AM/PM come from `Intl`.
 - The field is `role="combobox"` with `aria-haspopup="dialog"` (the APG select-only combobox), so it carries
-  `aria-required` (`required`), `aria-readonly` (`readOnly` — the value shows, the panel does not open,
+  `aria-required` (`required`), `aria-readonly` (`readOnly` - the value shows, the panel does not open,
   there is no clear button) and `aria-invalid`.
-- Turning the page with ‹ › is announced (`aria-live="polite"`); the title buttons are named
-  "October, Choose month" — the visible text first (WCAG 2.5.3). Clearing the value counts as a touch.
+- Turning the page with < > is announced (`aria-live="polite"`); the title buttons are named
+  "October, Choose month" - the visible text first (WCAG 2.5.3). Clearing the value counts as a touch.
 - "Today" is computed on every open, so a panel opened after midnight marks the right day.
 
 ## Label and description

package/dist/datepicker/datepicker.d.ts

@@ -16,25 +16,25 @@ export interface KptDatepickerProps extends Omit<ComponentPropsWithRef<'div'>, '
     /** Prezentacja miesiąca w trybie 'month' i w etykietach: słownie czy liczbą. */
     monthDisplay?: 'long' | 'number';
     /**
-     * Zapis daty: `'pl'` (DD.MM.RRRR, domyślnie), `'iso'` albo `'locale'` — kolejność i separatory
+     * Zapis daty: `'pl'` (DD.MM.RRRR, domyślnie), `'iso'` albo `'locale'` - kolejność i separatory
      * z `Intl` dla aktywnego języka. Placeholder idzie za formatem, a jego litery za językiem.
      */
     displayFormat?: KptDateDisplayFormat;
-    /** Pierwszy dzień tygodnia (1 = poniedziałek … 7 = niedziela); `null` = wg aktywnego języka. */
+    /** Pierwszy dzień tygodnia (1 = poniedziałek ... 7 = niedziela); `null` = wg aktywnego języka. */
     firstDayOfWeek?: KptFirstDayOfWeek | null;
     hourFormat?: 12 | 24;
     minuteStep?: number;
-    /** Stan panelu — pozwala otworzyć kalendarz z zewnątrz i wiedzieć, kiedy wybór się skończył. */
+    /** Stan panelu - pozwala otworzyć kalendarz z zewnątrz i wiedzieć, kiedy wybór się skończył. */
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     /** Nazwa dostępna, gdy pola nie opisuje `<label for>`. */
     ariaLabel?: string | null;
-    /** Id pola (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    /** Id pola (nie hosta); bez niego generowane, w `KptFormField` - z wrappera. */
     id?: string;
     disabled?: boolean;
-    /** Tylko do odczytu — wartość widać, panel się nie otwiera (`aria-readonly`). */
+    /** Tylko do odczytu - wartość widać, panel się nie otwiera (`aria-readonly`). */
     readOnly?: boolean;
-    /** Pole wymagane — `aria-required`. */
+    /** Pole wymagane - `aria-required`. */
     required?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -42,18 +42,18 @@ export interface KptDatepickerProps extends Omit<ComponentPropsWithRef<'div'>, '
 }
 /**
  * Wybór daty i godziny z własnym kalendarzem. Panel jest stosem widoków
- * dekady → lata → miesiące → dni: klik w komórkę schodzi poziom niżej, klik w tytuł wchodzi wyżej.
+ * dekady -> lata -> miesiące -> dni: klik w komórkę schodzi poziom niżej, klik w tytuł wchodzi wyżej.
  *
- * Klawiatura według wzorca WAI-ARIA „date picker dialog”: `Enter`/`Spacja`/`↓` na polu otwierają
+ * Klawiatura według wzorca WAI-ARIA "date picker dialog": `Enter`/`Spacja`/`ArrowDown` na polu otwierają
  * kalendarz i przenoszą fokus na wybrany (albo dzisiejszy) dzień. W siatce dni strzałki chodzą
  * o dzień i tydzień, `Home`/`End` na początek i koniec tygodnia, `PageUp`/`PageDown` o miesiąc
- * (z `Shift` — o rok); w siatkach miesięcy, lat i dekad strzałki chodzą po komórkach. `Tab` krąży
+ * (z `Shift` - o rok); w siatkach miesięcy, lat i dekad strzałki chodzą po komórkach. `Tab` krąży
  * w panelu, `Escape` zamyka go, a wybór i zamknięcie oddają fokus polu. `Delete`/`Backspace` na polu
  * czyści wartość.
  *
  * Pole to `role="combobox"` z `aria-haspopup="dialog"`, więc niesie `aria-required`,
  * `aria-readonly` i `aria-invalid`. Tydzień zaczyna się wg aktywnego języka, chyba że podano
- * `firstDayOfWeek`; przewinięcie strony strzałką ‹ › jest ogłaszane.
+ * `firstDayOfWeek`; przewinięcie strony strzałką < > jest ogłaszane.
  *
  * @example
  * <KptDatepicker value={date} onValueChange={setDate} startView="decade" minDate="1920-01-01" />

package/dist/datepicker/datepicker.js

@@ -15,18 +15,18 @@ import { useKptId } from "../internal/use-id.js";
 import { focusCalendarActive, trapTab } from "../internal/calendar-focus.js";
 /**
  * Wybór daty i godziny z własnym kalendarzem. Panel jest stosem widoków
- * dekady → lata → miesiące → dni: klik w komórkę schodzi poziom niżej, klik w tytuł wchodzi wyżej.
+ * dekady -> lata -> miesiące -> dni: klik w komórkę schodzi poziom niżej, klik w tytuł wchodzi wyżej.
  *
- * Klawiatura według wzorca WAI-ARIA „date picker dialog”: `Enter`/`Spacja`/`↓` na polu otwierają
+ * Klawiatura według wzorca WAI-ARIA "date picker dialog": `Enter`/`Spacja`/`ArrowDown` na polu otwierają
  * kalendarz i przenoszą fokus na wybrany (albo dzisiejszy) dzień. W siatce dni strzałki chodzą
  * o dzień i tydzień, `Home`/`End` na początek i koniec tygodnia, `PageUp`/`PageDown` o miesiąc
- * (z `Shift` — o rok); w siatkach miesięcy, lat i dekad strzałki chodzą po komórkach. `Tab` krąży
+ * (z `Shift` - o rok); w siatkach miesięcy, lat i dekad strzałki chodzą po komórkach. `Tab` krąży
  * w panelu, `Escape` zamyka go, a wybór i zamknięcie oddają fokus polu. `Delete`/`Backspace` na polu
  * czyści wartość.
  *
  * Pole to `role="combobox"` z `aria-haspopup="dialog"`, więc niesie `aria-required`,
  * `aria-readonly` i `aria-invalid`. Tydzień zaczyna się wg aktywnego języka, chyba że podano
- * `firstDayOfWeek`; przewinięcie strony strzałką ‹ › jest ogłaszane.
+ * `firstDayOfWeek`; przewinięcie strony strzałką < > jest ogłaszane.
  *
  * @example
  * <KptDatepicker value={date} onValueChange={setDate} startView="decade" minDate="1920-01-01" />
@@ -34,18 +34,18 @@ import { focusCalendarActive, trapTab } from "../internal/calendar-focus.js";
  */
 export function KptDatepicker({ value, defaultValue = '', onValueChange, selectionMode = 'date', startView = null, minDate = null, maxDate = null, placeholder = '', monthDisplay = 'long', displayFormat = 'pl', firstDayOfWeek = null, hourFormat = 24, minuteStep = 1, open, onOpenChange, ariaLabel = null, id, disabled = false, readOnly = false, required = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
-    /** `div` z rolą nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    /** `div` z rolą nie dostaje nazwy z `label[for]` - stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-datepicker');
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: false, onChange: onOpenChange });
     const [anchor, setAnchor] = useState(null);
     const triggerRef = useRef(null);
-    /** „Dziś” liczone przy każdym otwarciu — panel otwarty po północy nie pokazuje wczorajszego dnia. */
+    /** "Dziś" liczone przy każdym otwarciu - panel otwarty po północy nie pokazuje wczorajszego dnia. */
     const [today, setToday] = useState(() => new Date());
     const todayIso = toIso(today);
     const firstDay = firstDayOfWeek ?? kptFirstDayOfWeek(activeLocale);
     const periods = dayPeriodLabels(activeLocale);
-    /** Ogłoszenie strony kalendarza po przewinięciu strzałką ‹ ›. */
+    /** Ogłoszenie strony kalendarza po przewinięciu strzałką < >. */
     const [pageAnnouncement, setPageAnnouncement] = useState('');
     const showInvalid = invalid && (touched ?? true);
     const [page, setPage] = useState(() => initialPage(current, selectionMode, today));
@@ -53,7 +53,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
     const [timeStr, setTimeStr] = useState('');
     const [pendingDate, setPendingDate] = useState('');
     const [dtView, setDtView] = useState('calendar');
-    /** Dzień z fokusem w siatce dni — jedyny przystanek Tab siatki (roving tabindex). */
+    /** Dzień z fokusem w siatce dni - jedyny przystanek Tab siatki (roving tabindex). */
     const [focusIso, setFocusIso] = useState('');
     /** Komórka z fokusem w siatkach miesięcy, lat i dekad. */
     const [focusCell, setFocusCell] = useState(0);
@@ -61,16 +61,16 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
     const panelRef = useRef(null);
     /**
      * Prośba o przeniesienie fokusu po najbliższym renderze (otwarcie, ruch klawiszem, zmiana
-     * poziomu) — licznik w stanie, nie ref zapisywany w renderze.
+     * poziomu) - licznik w stanie, nie ref zapisywany w renderze.
      */
     const [focusRequest, setFocusRequest] = useState(0);
     const requestFocus = () => setFocusRequest((n) => n + 1);
     const months = monthNames(activeLocale);
     const weekdays = orderWeekdays(weekdayNames(activeLocale), firstDay);
     const commitLevel = commitLevelFor(selectionMode);
-    // Panel można otworzyć także z zewnątrz (`open`), nie tylko klikiem w trigger — widok i bufor
-    // czasu ustawiamy więc przy każdym przejściu w stan otwarty. Wzorzec „poprzednia wartość
-    // w stanie” z react.dev: stan liczy się w tym samym renderze, bez efektu i bez klatki ze starym
+    // Panel można otworzyć także z zewnątrz (`open`), nie tylko klikiem w trigger - widok i bufor
+    // czasu ustawiamy więc przy każdym przejściu w stan otwarty. Wzorzec "poprzednia wartość
+    // w stanie" z react.dev: stan liczy się w tym samym renderze, bez efektu i bez klatki ze starym
     // widokiem. Późniejsze zmiany wartości w otwartym panelu go nie resetują.
     const [wasOpen, setWasOpen] = useState(isOpen);
     if (wasOpen !== isOpen) {
@@ -114,12 +114,12 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         setOpen(false);
         onTouch?.();
     };
-    /** Zamknięcie z powrotem fokusu na pole — po wyborze z klawiatury, `Escape`. */
+    /** Zamknięcie z powrotem fokusu na pole - po wyborze z klawiatury, `Escape`. */
     const closeAndFocus = () => {
         close();
         triggerRef.current?.focus();
     };
-    // Fokus po renderze. Panel w nakładce jest niewidoczny do pierwszego pomiaru — stąd rAF.
+    // Fokus po renderze. Panel w nakładce jest niewidoczny do pierwszego pomiaru - stąd rAF.
     // `focusIso` czytamy przez zdarzenie efektu: liczy się prośba, nie każda zmiana dnia.
     const focusActive = useEffectEvent(() => focusCalendarActive(panelRef.current, focusIso));
     useEffect(() => {
@@ -128,7 +128,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         const frame = requestAnimationFrame(() => focusActive());
         return () => cancelAnimationFrame(frame);
     }, [focusRequest, isOpen]);
-    // ── Prezentacja w triggerze ──
+    // -- Prezentacja w triggerze --
     const effectivePlaceholder = (() => {
         if (placeholder)
             return placeholder;
@@ -149,7 +149,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                 return datePlaceholder(displayFormat, tokens, 'date', activeLocale);
         }
     })();
-    /** Wartość niepasująca do formatu trybu daje pusty tekst — trigger nie pokazuje śmieci. */
+    /** Wartość niepasująca do formatu trybu daje pusty tekst - trigger nie pokazuje śmieci. */
     const display = (() => {
         if (!current)
             return '';
@@ -179,7 +179,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                 return displayDate(current, displayFormat, activeLocale);
         }
     })();
-    // ── Siatki ──
+    // -- Siatki --
     const selectedDateIso = selectionMode === 'datetime' ? pendingDate : current;
     const weeks = buildDayGrid({ page, selectedIso: selectedDateIso, todayIso, minDate, maxDate, firstDay });
     const selectedYM = selectedYearMonth(selectionMode === 'datetime' ? pendingDate : current, selectionMode);
@@ -205,7 +205,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         return now >= 0 ? now : Math.max(0, levelCells.findIndex((c) => !c.disabled));
     })();
     const activeCell = focusCell >= 0 && focusCell < levelCells.length ? focusCell : defaultCell;
-    /** Pełna nazwa dnia dla czytnika („czwartek, 8 października 2026”) — sama liczba nic nie mówi. */
+    /** Pełna nazwa dnia dla czytnika ("czwartek, 8 października 2026") - sama liczba nic nie mówi. */
     const dayFormat = new Intl.DateTimeFormat(activeLocale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
     const dayName = (iso) => {
         const date = parseDate(iso);
@@ -231,20 +231,20 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         setFocusCell(next);
         requestFocus();
     };
-    /** Tytuł, który kliknięto, znika razem z poziomem — fokus idzie do nowej siatki. */
+    /** Tytuł, który kliknięto, znika razem z poziomem - fokus idzie do nowej siatki. */
     const goTo = (level) => {
         setPanelView(level);
         setFocusCell(-1);
         requestFocus();
     };
-    /** Strzałki ‹ ›: fokus zostaje na strzałce, ale przystanek siatki dni idzie za stroną. */
+    /** Strzałki < >: fokus zostaje na strzałce, ale przystanek siatki dni idzie za stroną. */
     const turnPage = (dir) => {
         const next = pageBy(page, panelView, dir);
         setPage(next);
         setPageAnnouncement(pageTitle(next));
         if (panelView === 'day') {
             const moved = moveFocusDate(focusIso, dir === 1 ? 'PageDown' : 'PageUp', { minDate, maxDate, firstDay });
-            // Dzień przycięty do granicy może leżeć poza nową stroną — wtedy pierwszy dozwolony dzień miesiąca.
+            // Dzień przycięty do granicy może leżeć poza nową stroną - wtedy pierwszy dozwolony dzień miesiąca.
             const inPage = moved?.startsWith(`${next.y}-${pad(next.m + 1)}`);
             const fallback = buildDayGrid({ page: next, selectedIso: selectedDateIso, todayIso, minDate, maxDate, firstDay })
                 .flat()
@@ -257,7 +257,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
             setFocusCell(-1);
         }
     };
-    /** Tytuł strony do ogłoszenia — miesiąc z rokiem, rok albo zakres lat. */
+    /** Tytuł strony do ogłoszenia - miesiąc z rokiem, rok albo zakres lat. */
     const pageTitle = (target) => {
         switch (panelView) {
             case 'day':
@@ -265,9 +265,9 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
             case 'month':
                 return String(target.y);
             case 'year':
-                return `${decadeStart(target.y)} – ${decadeStart(target.y) + 9}`;
+                return `${decadeStart(target.y)} - ${decadeStart(target.y) + 9}`;
             default:
-                return `${centuryStart(target.y)} – ${centuryStart(target.y) + 119}`;
+                return `${centuryStart(target.y)} - ${centuryStart(target.y) + 119}`;
         }
     };
     const navLabel = (dir) => {
@@ -282,12 +282,12 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                 return t(dir === 'prev' ? 'datepicker.prevMonth' : 'datepicker.nextMonth');
         }
     };
-    // ── Wybór ──
+    // -- Wybór --
     const selectDay = (iso, cellDisabled) => {
         if (cellDisabled)
             return;
         if (selectionMode === 'datetime') {
-            setPendingDate(iso); // czas jeszcze do wyboru — zamyka dopiero „Gotowe"
+            setPendingDate(iso); // czas jeszcze do wyboru - zamyka dopiero "Gotowe"
             return;
         }
         setCurrent(iso);
@@ -333,7 +333,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
             return;
         setCurrent('');
         setPendingDate('');
-        // Wyczyszczenie to interakcja z polem — błąd „wymagane” ma się pokazać od razu.
+        // Wyczyszczenie to interakcja z polem - błąd "wymagane" ma się pokazać od razu.
         onTouch?.();
     };
     const timeParts = parseTime(timeStr);
@@ -353,7 +353,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                         clear(event);
                     }
                 }, 
-                // Przy otwartym panelu fokus idzie do kalendarza — „dotknięcie” wyśle dopiero zamknięcie.
+                // Przy otwartym panelu fokus idzie do kalendarza - "dotknięcie" wyśle dopiero zamknięcie.
                 onBlur: () => !isOpen && onTouch?.(), children: [display ? (_jsx("span", { className: "kpt-datepicker__value", children: display })) : (_jsx("span", { className: "kpt-datepicker__placeholder", children: effectivePlaceholder })), _jsx("span", { className: "kpt-datepicker__spacer" }), display && !readOnly ? (_jsx("button", { type: "button", className: "kpt-datepicker__clear", tabIndex: -1, onClick: clear, "aria-label": t('common.clear'), children: _jsx(KptIcon, { name: "x" }) })) : null, _jsx(KptIcon, { className: "kpt-datepicker__icon", name: selectionMode === 'time' ? 'clock' : 'calendar' })] }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 4, children: _jsxs("div", { ref: panelRef, id: panelId, role: "dialog", "aria-label": t('datepicker.dialog'), className: cn('kpt-calendar', showClock && 'kpt-calendar--clock'), onKeyDown: (event) => {
                         if (event.key === 'Escape') {
                             event.preventDefault();
@@ -363,5 +363,5 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                         else if (event.key === 'Tab') {
                             trapTab(event.currentTarget, event.nativeEvent);
                         }
-                    }, children: [showClock ? (_jsxs(_Fragment, { children: [selectionMode === 'datetime' ? (_jsxs("div", { className: "kpt-calendar__header", children: [_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => setDtView('calendar'), "aria-label": t('datepicker.calendar'), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("span", { className: "kpt-calendar__title", children: t('datepicker.time') })] })) : null, _jsx(KptClock, { value: timeStr, onValueChange: setTimeStr, hourFormat: hourFormat, minuteStep: minuteStep })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "kpt-calendar__live", "aria-live": "polite", children: pageAnnouncement }), _jsxs("div", { className: "kpt-calendar__header", children: [hasNav ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", disabled: !canPageBack(page, panelView, minDate), onClick: () => turnPage(-1), "aria-label": navLabel('prev'), children: _jsx(KptIcon, { name: "chevron-left" }) })) : null, _jsxs("span", { className: "kpt-calendar__titles", children: [panelView === 'day' ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('month'), "aria-label": `${months[page.m]}, ${t('datepicker.chooseMonth')}`, children: months[page.m] }), _jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('year'), "aria-label": `${page.y}, ${t('datepicker.chooseYear')}`, children: page.y })] })) : null, panelView === 'month' ? (selectionMode === 'month' ? (_jsx("span", { className: "kpt-calendar__title", children: t('datepicker.month') })) : (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('year'), "aria-label": `${page.y}, ${t('datepicker.chooseYear')}`, children: page.y }))) : null, panelView === 'year' ? (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('decade'), "aria-label": `${decadeStart(page.y)} – ${decadeStart(page.y) + 9}, ${t('datepicker.chooseDecade')}`, children: `${decadeStart(page.y)} – ${decadeStart(page.y) + 9}` })) : null, panelView === 'decade' ? (_jsx("span", { className: "kpt-calendar__title", children: `${centuryStart(page.y)} – ${centuryStart(page.y) + 119}` })) : null] }), hasNav ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", disabled: !canPageForward(page, panelView, maxDate), onClick: () => turnPage(1), "aria-label": navLabel('next'), children: _jsx(KptIcon, { name: "chevron-right" }) })) : null] }), panelView === 'day' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-calendar__weekdays", children: weekdays.map((weekday) => (_jsx("span", { className: "kpt-calendar__weekday", children: weekday }, weekday))) }), _jsx("div", { className: "kpt-calendar__grid", onKeyDown: onDayKeyDown, children: weeks.flat().map((cell) => (_jsx("button", { type: "button", className: cn('kpt-calendar__day', !cell.inMonth && 'kpt-calendar__day--muted', cell.today && 'kpt-calendar__day--today', cell.selected && 'kpt-calendar__day--selected'), "data-iso": cell.iso, tabIndex: cell.iso === focusIso ? 0 : -1, "aria-label": dayName(cell.iso), "aria-current": cell.today ? 'date' : undefined, disabled: cell.disabled, "aria-pressed": cell.selected, onClick: () => selectDay(cell.iso, cell.disabled), children: cell.day }, cell.iso))) })] })) : (_jsx("div", { className: cn('kpt-calendar__grid kpt-calendar__grid--cells', panelView === 'decade' && 'kpt-calendar__grid--decades'), onKeyDown: onCellKeyDown, children: levelCells.map((cell, index) => (_jsx("button", { type: "button", className: cn('kpt-calendar__cell', cell.selected && 'kpt-calendar__cell--selected', cell.current && 'kpt-calendar__cell--current'), tabIndex: index === activeCell ? 0 : -1, disabled: cell.disabled, "aria-pressed": cell.selected, onClick: () => selectCell(cell), children: cell.label }, cell.label))) })), selectionMode === 'datetime' ? (_jsxs("button", { type: "button", className: "kpt-calendar__timebar", onClick: () => setDtView('clock'), children: [_jsx(KptIcon, { name: "clock" }), _jsx("span", { children: formatTime(timeParts?.h ?? 0, timeParts?.m ?? 0, hourFormat, periods) })] })) : null] })), hasFooter ? (_jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })) : null] }) })] }));
+                    }, children: [showClock ? (_jsxs(_Fragment, { children: [selectionMode === 'datetime' ? (_jsxs("div", { className: "kpt-calendar__header", children: [_jsx("button", { type: "button", className: "kpt-calendar__nav", onClick: () => setDtView('calendar'), "aria-label": t('datepicker.calendar'), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("span", { className: "kpt-calendar__title", children: t('datepicker.time') })] })) : null, _jsx(KptClock, { value: timeStr, onValueChange: setTimeStr, hourFormat: hourFormat, minuteStep: minuteStep })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "kpt-calendar__live", "aria-live": "polite", children: pageAnnouncement }), _jsxs("div", { className: "kpt-calendar__header", children: [hasNav ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", disabled: !canPageBack(page, panelView, minDate), onClick: () => turnPage(-1), "aria-label": navLabel('prev'), children: _jsx(KptIcon, { name: "chevron-left" }) })) : null, _jsxs("span", { className: "kpt-calendar__titles", children: [panelView === 'day' ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('month'), "aria-label": `${months[page.m]}, ${t('datepicker.chooseMonth')}`, children: months[page.m] }), _jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('year'), "aria-label": `${page.y}, ${t('datepicker.chooseYear')}`, children: page.y })] })) : null, panelView === 'month' ? (selectionMode === 'month' ? (_jsx("span", { className: "kpt-calendar__title", children: t('datepicker.month') })) : (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('year'), "aria-label": `${page.y}, ${t('datepicker.chooseYear')}`, children: page.y }))) : null, panelView === 'year' ? (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('decade'), "aria-label": `${decadeStart(page.y)} - ${decadeStart(page.y) + 9}, ${t('datepicker.chooseDecade')}`, children: `${decadeStart(page.y)} - ${decadeStart(page.y) + 9}` })) : null, panelView === 'decade' ? (_jsx("span", { className: "kpt-calendar__title", children: `${centuryStart(page.y)} - ${centuryStart(page.y) + 119}` })) : null] }), hasNav ? (_jsx("button", { type: "button", className: "kpt-calendar__nav", disabled: !canPageForward(page, panelView, maxDate), onClick: () => turnPage(1), "aria-label": navLabel('next'), children: _jsx(KptIcon, { name: "chevron-right" }) })) : null] }), panelView === 'day' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-calendar__weekdays", children: weekdays.map((weekday) => (_jsx("span", { className: "kpt-calendar__weekday", children: weekday }, weekday))) }), _jsx("div", { className: "kpt-calendar__grid", onKeyDown: onDayKeyDown, children: weeks.flat().map((cell) => (_jsx("button", { type: "button", className: cn('kpt-calendar__day', !cell.inMonth && 'kpt-calendar__day--muted', cell.today && 'kpt-calendar__day--today', cell.selected && 'kpt-calendar__day--selected'), "data-iso": cell.iso, tabIndex: cell.iso === focusIso ? 0 : -1, "aria-label": dayName(cell.iso), "aria-current": cell.today ? 'date' : undefined, disabled: cell.disabled, "aria-pressed": cell.selected, onClick: () => selectDay(cell.iso, cell.disabled), children: cell.day }, cell.iso))) })] })) : (_jsx("div", { className: cn('kpt-calendar__grid kpt-calendar__grid--cells', panelView === 'decade' && 'kpt-calendar__grid--decades'), onKeyDown: onCellKeyDown, children: levelCells.map((cell, index) => (_jsx("button", { type: "button", className: cn('kpt-calendar__cell', cell.selected && 'kpt-calendar__cell--selected', cell.current && 'kpt-calendar__cell--current'), tabIndex: index === activeCell ? 0 : -1, disabled: cell.disabled, "aria-pressed": cell.selected, onClick: () => selectCell(cell), children: cell.label }, cell.label))) })), selectionMode === 'datetime' ? (_jsxs("button", { type: "button", className: "kpt-calendar__timebar", onClick: () => setDtView('clock'), children: [_jsx(KptIcon, { name: "clock" }), _jsx("span", { children: formatTime(timeParts?.h ?? 0, timeParts?.m ?? 0, hourFormat, periods) })] })) : null] })), hasFooter ? (_jsx("div", { className: "kpt-calendar__footer", children: _jsx(KptButton, { size: "sm", onClick: commit, children: t('common.done') }) })) : null] }) })] }));
 }