@konce-pt/react 0.11.2 → 0.14.0

package/dist/datepicker/datepicker.js

@@ -1,6 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState, } from 'react';
-import { KPT_CALENDAR_LEVELS, buildDayGrid, buildDecadeCells, buildMonthCells, buildYearCells, canPageBack, canPageForward, centuryStart, commitLevelFor, decadeStart, formatDate, formatTime, initialFocusDate, initialPage, moveCellIndex, moveFocusDate, pad, pageBy, parseDate, parseDateTime, parseTime, resolveStartView, selectedYearMonth, toIso, } from '@konce-pt/datetime';
+import { useEffect, useEffectEvent, useRef, useState, } from 'react';
+import { KPT_CALENDAR_LEVELS, buildDayGrid, buildDecadeCells, buildMonthCells, buildYearCells, canPageBack, canPageForward, centuryStart, commitLevelFor, datePlaceholder, dayPeriodLabels, decadeStart, displayDate, displayMonthYear, formatTime, initialFocusDate, kptFirstDayOfWeek, orderWeekdays, initialPage, moveCellIndex, moveFocusDate, pad, pageBy, parseDate, parseDateTime, parseTime, resolveStartView, selectedYearMonth, toIso, } from '@konce-pt/datetime';
 import { monthNames, weekdayNames } from '@konce-pt/i18n';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -14,52 +15,74 @@ 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.
+ *
  * @example
  * <KptDatepicker value={date} onValueChange={setDate} startView="decade" minDate="1920-01-01" />
  * <KptDatepicker selectionMode="datetime" hourFormat={12} value={at} onValueChange={setAt} />
  */
-export function KptDatepicker({ value, defaultValue = '', onValueChange, selectionMode = 'date', startView = null, minDate = null, maxDate = null, placeholder = '', monthDisplay = 'long', displayFormat = 'pl', hourFormat = 24, minuteStep = 1, open, onOpenChange, ariaLabel = null, id, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+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);
-    const today = useRef(new Date()).current;
+    /** "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ą < >. */
+    const [pageAnnouncement, setPageAnnouncement] = useState('');
     const showInvalid = invalid && (touched ?? true);
     const [page, setPage] = useState(() => initialPage(current, selectionMode, today));
     const [panelView, setPanelView] = useState(() => resolveStartView(selectionMode, startView));
     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);
     const panelId = useKptId(undefined, 'kpt-datepicker-panel');
     const panelRef = useRef(null);
-    /** Prośba o przeniesienie fokusu po najbliższym renderze (otwarcie, ruch klawiszem, zmiana poziomu). */
-    const wantFocus = useRef(false);
+    /**
+     * Prośba o przeniesienie fokusu po najbliższym renderze (otwarcie, ruch klawiszem, zmiana
+     * 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 = weekdayNames(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 otwarciu, a nie w obsłudze kliknięcia.
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        setPage(initialPage(current, selectionMode, today));
+    // 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) {
+        setWasOpen(isOpen);
+        if (isOpen)
+            prepareOpen();
+    }
+    function prepareOpen() {
+        const now = new Date();
+        setToday(now);
+        setPageAnnouncement('');
+        setPage(initialPage(current, selectionMode, now));
         setPanelView(resolveStartView(selectionMode, startView));
         setDtView(selectionMode === 'time' ? 'clock' : 'calendar');
         if (selectionMode === 'time') {
@@ -73,18 +96,15 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         }
         const startLevel = resolveStartView(selectionMode, startView);
         const selected = selectionMode === 'datetime' ? (parseDateTime(current)?.date ?? '') : current;
-        const focus = initialFocusDate(selected, todayIso, minDate, maxDate);
+        const focus = initialFocusDate(selected, toIso(now), minDate, maxDate);
         setFocusIso(focus);
         if (startLevel === 'day' && selectionMode !== 'time') {
             const date = parseDate(focus);
             setPage({ y: date.getFullYear(), m: date.getMonth() });
         }
         setFocusCell(-1); // -1 = domyślna komórka nowej siatki, wyliczana przy renderze
-        wantFocus.current = true;
-        // Zależność wyłącznie od `isOpen`: to otwarcie ma ustawić stan początkowy, a późniejsze
-        // zmiany wartości w otwartym panelu nie mogą go zresetować pod palcami użytkownika.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen]);
+        requestFocus();
+    }
     const showClock = selectionMode === 'time' || (selectionMode === 'datetime' && dtView === 'clock');
     const hasFooter = selectionMode === 'time' || selectionMode === 'datetime';
     const hasNav = selectionMode !== 'month';
@@ -94,54 +114,48 @@ 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(() => {
-        if (!isOpen || !wantFocus.current)
+        if (!isOpen || focusRequest === 0)
             return;
-        const frame = requestAnimationFrame(() => {
-            wantFocus.current = false;
-            focusCalendarActive(panelRef.current, focusIso);
-        });
+        const frame = requestAnimationFrame(() => focusActive());
         return () => cancelAnimationFrame(frame);
-    });
-    // ── Prezentacja w triggerze ──
+    }, [focusRequest, isOpen]);
+    // -- Prezentacja w triggerze --
     const effectivePlaceholder = (() => {
         if (placeholder)
             return placeholder;
-        const iso = displayFormat === 'iso';
+        const tokens = { year: t('datepicker.yearToken'), month: t('datepicker.monthToken'), day: t('datepicker.dayToken') };
         const time = hourFormat === 12 ? '--:-- --' : '--:--';
         switch (selectionMode) {
             case 'monthYear':
-                return iso ? 'RRRR-MM' : 'MM.RRRR';
+                return datePlaceholder(displayFormat, tokens, 'monthYear', activeLocale);
             case 'year':
-                return 'RRRR';
+                return tokens.year;
             case 'month':
-                return monthDisplay === 'number' ? 'MM' : t('datepicker.month');
+                return monthDisplay === 'number' ? tokens.month : t('datepicker.month');
             case 'time':
                 return time;
             case 'datetime':
-                return `${iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR'} ${time}`;
+                return `${datePlaceholder(displayFormat, tokens, 'date', activeLocale)} ${time}`;
             default:
-                return iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR';
+                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 '';
-        const iso = displayFormat === 'iso';
         switch (selectionMode) {
-            case 'monthYear': {
-                const match = /^(\d{4})-(\d{2})$/.exec(current);
-                if (!match)
-                    return '';
-                return iso ? current : `${match[2]}.${match[1]}`;
-            }
+            case 'monthYear':
+                return displayMonthYear(current, displayFormat, activeLocale);
             case 'year':
                 return /^\d{4}$/.test(current) ? current : '';
             case 'month': {
@@ -152,22 +166,22 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
             }
             case 'time': {
                 const parsed = parseTime(current);
-                return parsed ? formatTime(parsed.h, parsed.m, hourFormat) : '';
+                return parsed ? formatTime(parsed.h, parsed.m, hourFormat, periods) : '';
             }
             case 'datetime': {
                 const parsed = parseDateTime(current);
                 if (!parsed)
                     return '';
-                const sep = iso ? 'T' : ' ';
-                return `${formatDate(parsed.date, displayFormat)}${sep}${formatTime(parsed.h, parsed.m, hourFormat)}`;
+                const sep = displayFormat === 'iso' ? 'T' : ' ';
+                return `${displayDate(parsed.date, displayFormat, activeLocale)}${sep}${formatTime(parsed.h, parsed.m, hourFormat, periods)}`;
             }
             default:
-                return formatDate(current, displayFormat);
+                return displayDate(current, displayFormat, activeLocale);
         }
     })();
-    // ── Siatki ──
+    // -- Siatki --
     const selectedDateIso = selectionMode === 'datetime' ? pendingDate : current;
-    const weeks = buildDayGrid({ page, selectedIso: selectedDateIso, todayIso, minDate, maxDate });
+    const weeks = buildDayGrid({ page, selectedIso: selectedDateIso, todayIso, minDate, maxDate, firstDay });
     const selectedYM = selectedYearMonth(selectionMode === 'datetime' ? pendingDate : current, selectionMode);
     const levelCells = panelView === 'year'
         ? buildYearCells({ year: page.y, selected: selectedYM, today, minDate, maxDate })
@@ -191,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);
@@ -199,7 +213,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
     };
     const isRtl = () => !!panelRef.current && getComputedStyle(panelRef.current).direction === 'rtl';
     const onDayKeyDown = (event) => {
-        const next = moveFocusDate(focusIso, event.key, { shift: event.shiftKey, rtl: isRtl(), minDate, maxDate });
+        const next = moveFocusDate(focusIso, event.key, { shift: event.shiftKey, rtl: isRtl(), minDate, maxDate, firstDay });
         if (next === null)
             return;
         event.preventDefault();
@@ -207,7 +221,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         const date = parseDate(next);
         if (date.getFullYear() !== page.y || date.getMonth() !== page.m)
             setPage({ y: date.getFullYear(), m: date.getMonth() });
-        wantFocus.current = true;
+        requestFocus();
     };
     const onCellKeyDown = (event) => {
         const next = moveCellIndex(levelCells.map((c) => c.disabled), activeCell, event.key, 3, isRtl());
@@ -215,23 +229,24 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
             return;
         event.preventDefault();
         setFocusCell(next);
-        wantFocus.current = true;
+        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);
-        wantFocus.current = true;
+        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 });
-            // Dzień przycięty do granicy może leżeć poza nową stroną — wtedy pierwszy dozwolony dzień miesiąca.
+            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.
             const inPage = moved?.startsWith(`${next.y}-${pad(next.m + 1)}`);
-            const fallback = buildDayGrid({ page: next, selectedIso: selectedDateIso, todayIso, minDate, maxDate })
+            const fallback = buildDayGrid({ page: next, selectedIso: selectedDateIso, todayIso, minDate, maxDate, firstDay })
                 .flat()
                 .find((c) => c.inMonth && !c.disabled)?.iso;
             const target = inPage ? moved : fallback;
@@ -242,6 +257,19 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
             setFocusCell(-1);
         }
     };
+    /** Tytuł strony do ogłoszenia - miesiąc z rokiem, rok albo zakres lat. */
+    const pageTitle = (target) => {
+        switch (panelView) {
+            case 'day':
+                return `${months[target.m]} ${target.y}`;
+            case 'month':
+                return String(target.y);
+            case 'year':
+                return `${decadeStart(target.y)} - ${decadeStart(target.y) + 9}`;
+            default:
+                return `${centuryStart(target.y)} - ${centuryStart(target.y) + 119}`;
+        }
+    };
     const navLabel = (dir) => {
         switch (panelView) {
             case 'month':
@@ -254,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);
@@ -286,7 +314,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         else {
             setFocusCell(-1);
         }
-        wantFocus.current = true;
+        requestFocus();
     };
     const commit = () => {
         const time = timeStr || '00:00';
@@ -301,15 +329,19 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
     };
     const clear = (event) => {
         event.stopPropagation();
+        if (readOnly)
+            return;
         setCurrent('');
         setPendingDate('');
+        // Wyczyszczenie to interakcja z polem - błąd "wymagane" ma się pokazać od razu.
+        onTouch?.();
     };
     const timeParts = parseTime(timeStr);
     return (_jsxs("div", { className: cn('kpt-datepicker-host', className), ...rest, children: [_jsxs("div", { ref: (el) => {
                     triggerRef.current = el;
                     setAnchor(el);
-                }, className: cn('kpt-datepicker', isOpen && 'kpt-datepicker--open', disabled && 'kpt-datepicker--disabled', showInvalid && 'kpt-datepicker--invalid'), role: "button", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, id: field.id, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? undefined, onClick: () => !disabled && setOpen(!isOpen), onKeyDown: (event) => {
-                    if (disabled)
+                }, className: cn('kpt-datepicker', isOpen && 'kpt-datepicker--open', disabled && 'kpt-datepicker--disabled', readOnly && 'kpt-datepicker--readonly', showInvalid && 'kpt-datepicker--invalid'), role: "combobox", tabIndex: 0, "aria-haspopup": "dialog", "aria-keyshortcuts": "Delete Backspace", "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-invalid": showInvalid || undefined, "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, id: field.id, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-disabled": disabled || undefined, "aria-label": ariaLabel ?? undefined, onClick: () => !disabled && !readOnly && setOpen(!isOpen), onKeyDown: (event) => {
+                    if (disabled || readOnly)
                         return;
                     if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
                         event.preventDefault();
@@ -321,8 +353,8 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                         clear(event);
                     }
                 }, 
-                // 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 ? (_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) => {
+                // 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();
                             event.stopPropagation();
@@ -331,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: [_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": t('datepicker.chooseMonth'), children: months[page.m] }), _jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('year'), "aria-label": 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": t('datepicker.chooseYear'), children: page.y }))) : null, panelView === 'year' ? (_jsx("button", { type: "button", className: "kpt-calendar__title-btn", onClick: () => goTo('decade'), "aria-label": 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) })] })) : 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] }) })] }));
 }

package/dist/datepicker/llms.txt

@@ -5,36 +5,36 @@ Import: `import { KptDatepicker } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-datepicker-host">
-      <div class="kpt-datepicker" role="button" tabindex="0">
+      <div class="kpt-datepicker" role="combobox" tabindex="0" aria-haspopup="dialog">
         <span class="kpt-datepicker__value">06.09.2026</span>
         <span class="kpt-datepicker__spacer"></span>
-        <button class="kpt-datepicker__clear">…</button>
-        <span class="kpt-icon-host kpt-datepicker__icon">…</span>
+        <button class="kpt-datepicker__clear">...</button>
+        <span class="kpt-icon-host kpt-datepicker__icon">...</span>
       </div>
     </div>
-    <!-- in a portal: <div class="kpt-calendar">…</div> -->
+    <!-- in a portal: <div class="kpt-calendar">...</div> -->
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the value as a string; its format follows the mode:
+- `value` / `defaultValue` / `onValueChange` - the value as a string; its format follows the mode:
   'YYYY-MM-DD' / 'YYYY-MM' / 'YYYY' / 'MM' / 'YYYY-MM-DDTHH:mm' / 'HH:mm'
 - `selectionMode`: `'date'` (default) | `'monthYear'` | `'year'` | `'month'` | `'datetime'` | `'time'`
-- `startView`: `'day' | 'month' | 'year' | 'decade' | null` — the level the panel opens at; `null`
+- `startView`: `'day' | 'month' | 'year' | 'decade' | null` - the level the panel opens at; `null`
   means the level where the mode commits. It is never lowered below that level, so
   `startView="day"` in 'year' mode is raised to 'year'.
 - `minDate`, `maxDate`: 'YYYY-MM-DD' strings
-- `monthDisplay`: `'long'` (default) | `'number'`; `displayFormat`: `'pl'` (default) | `'iso'`
-- `hourFormat`: 12 | 24 (default 24) — the dial; the stored value is always 24h
-- `minuteStep`: number (default 1) — minute snapping on the dial
-- `open` / `onOpenChange` — the panel state, so it can be opened from outside
+- `monthDisplay`: `'long'` (default) | `'number'`; `displayFormat`: `'pl'` (default) | `'iso'` | `'locale'`
+- `hourFormat`: 12 | 24 (default 24) - the dial; the stored value is always 24h
+- `minuteStep`: number (default 1) - minute snapping on the dial
+- `open` / `onOpenChange` - the panel state, so it can be opened from outside
 - `placeholder`, `ariaLabel`, `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
 
 ## Keyboard
 The date picker dialog pattern. The trigger has `aria-haspopup="dialog"` and `aria-expanded`;
-`Enter`, `Space` and `↓` open the panel — a `role="dialog"` named "Choose a date" — and move focus to
+`Enter`, `Space` and `ArrowDown` open the panel - a `role="dialog"` named "Choose a date" - and move focus to
 the selected day, or today, clamped to `minDate`/`maxDate`.
-- Day grid: `←`/`→` one day, `↑`/`↓` one week, `Home`/`End` Monday and Sunday of the week,
+- Day grid: `ArrowLeft`/`ArrowRight` one day, `ArrowUp`/`ArrowDown` one week, `Home`/`End` Monday and Sunday of the week,
   `PageUp`/`PageDown` one month, with `Shift` one year (the day is clamped to the month length).
   Crossing a month edge turns the page. Each day is named with the full date from `Intl`
   ("Thursday, October 8, 2026"), today has `aria-current="date"`, and only the focused day is
@@ -42,22 +42,22 @@ the selected day, or today, clamped to `minDate`/`maxDate`.
 - Month, year and decade grids: the arrows move between cells (three columns), `Home`/`End` to the ends.
   Clicking a title moves focus to the new grid.
 - `Tab` cycles inside the panel; `Escape` closes it. Picking a value (or "Done") closes the panel
-  and returns focus to the trigger. `Delete`/`Backspace` on the trigger clears the value; the "×" button
+  and returns focus to the trigger. `Delete`/`Backspace` on the trigger clears the value; the "x" button
   sits outside the Tab order.
 
 ## The view stack
-The header is always `‹ title ›`: the arrows page the current level, the title goes one level up.
+The header is always `< title >`: the arrows page the current level, the title goes one level up.
 
-    day      ‹  [June]  [1979]  ›   arrows ±1 month;  the chips → months / years
-    month    ‹      [1979]      ›   arrows ±1 year;   the chip  → years
-    year     ‹  [1970 – 1979]   ›   arrows ±10 years; the chip  → decades
-    decade   ‹   1920 – 2039    ›   arrows ±120 years; the top of the stack
+    day      <  [June]  [1979]  >   arrows +/-1 month;  the chips -> months / years
+    month    <      [1979]      >   arrows +/-1 year;   the chip  -> years
+    year     <  [1970 - 1979]   >   arrows +/-10 years; the chip  -> decades
+    decade   <   1920 - 2039    >   arrows +/-120 years; the top of the stack
 
 Clicking a cell above the committing level drills down; on that level it sets the value and closes
 the panel. An arrow dims when the whole neighbouring page falls outside `minDate`/`maxDate`.
 
 ## The logic lives in a package, the component only renders
-Every grid, bound and format comes from `@konce-pt/datetime` — pure functions with their own tests.
+Every grid, bound and format comes from `@konce-pt/datetime` - pure functions with their own tests.
 The component holds nothing but React state: the page, the level, the time buffer.
 
 ## The panel is set up on open, not on click
@@ -66,7 +66,7 @@ outside through the `open` prop. The effect deliberately depends on `open` alone
 while the panel is open must not reset the view under the user's fingers.
 
 ## Requires
-`@konce-pt/styles/components` for the calendar styles. No CDK — the panel rides the internal
+`@konce-pt/styles/components` for the calendar styles. No CDK - the panel rides the internal
 overlay primitive.
 
 ## Examples
@@ -81,6 +81,20 @@ Weekday and month names come from `Intl` for the active locale, not from the dic
 navigation labels and "Done" come from the `datepicker` and `common` namespaces; `locale` and
 `dictionary` override them per instance.
 
+## 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;
+  the headers, the grid and `Home`/`End` follow it.
+- `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,
+  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.
+- "Today" is computed on every open, so a panel opened after midnight marks the right day.
+
 ## Label and description
 `id` goes to the focusable element, not the host; without one it comes from `KptFormField` or is
 generated. A `div` with a role is not named by `label[for]`, so inside `KptFormField` it gets
@@ -92,7 +106,7 @@ is added to `aria-describedby`. New: `id`; the trigger is the element that carri
 `--kpt-color-surface-raised`, the selection `--kpt-color-primary`.
 
 ## Accessibility
-The trigger is `role="button"` with `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls`;
+The trigger is `role="combobox"` with `aria-haspopup="dialog"`, `aria-expanded` and `aria-controls`;
 the panel is a named `role="dialog"`; every cell is a real `<button>` with `aria-pressed`, days carry
 the full date and `aria-current="date"`; `ariaLabel` names the field when no `<label for>` describes
 it. The keyboard is described above.

package/dist/dialog/dialog.d.ts

@@ -7,22 +7,22 @@ export interface KptDialogProps extends Omit<ComponentPropsWithRef<'dialog'>, 'o
     onOpenChange: (open: boolean) => void;
     header?: string;
     /**
-     * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem — zawsze przycięta do szerokości
+     * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem - zawsze przycięta do szerokości
      * okna przeglądarki. `lg` jest dla treści, której nie da się sensownie zwęzić: kodu, tabeli,
      * porównania dwóch kolumn.
      */
     size?: KptDialogSize;
-    /** Pozwala zamknąć klawiszem Esc i przyciskiem ×. */
+    /** Pozwala zamknąć klawiszem Esc i przyciskiem x. */
     dismissible?: boolean;
     children?: ReactNode;
 }
 /**
- * Okno modalne na natywnym `<dialog>` — pułapka fokusu, Escape i backdrop pochodzą z platformy,
+ * Okno modalne na natywnym `<dialog>` - pułapka fokusu, Escape i backdrop pochodzą z platformy,
  * nie z naszego kodu. Stopkę wstaw przez `<KptDialog.Footer>`.
  *
  * Z `header` okno bierze nazwę z nagłówka (`aria-labelledby`); bez niego podaj `aria-label`.
  * Okno wymagające odpowiedzi dostaje `role="alertdialog"` i `aria-describedby` wprost z propsów
- * `<dialog>` — tak robi `KptConfirmContainer`.
+ * `<dialog>` - tak robi `KptConfirmContainer`.
  *
  * @example
  * <KptDialog open={open} onOpenChange={setOpen} header="Usunąć?">

package/dist/dialog/dialog.js

@@ -1,18 +1,21 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useEffect, useRef, useState, } from 'react';
+import { isValidElement, useEffect, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren } from "../internal/slot-children.js";
+import { kptLockScroll } from "../internal/scroll-lock.js";
 import { composeRefs } from "../internal/compose-refs.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptOverlayContainerContext } from "../internal/overlay-container.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 /**
- * Okno modalne na natywnym `<dialog>` — pułapka fokusu, Escape i backdrop pochodzą z platformy,
+ * Okno modalne na natywnym `<dialog>` - pułapka fokusu, Escape i backdrop pochodzą z platformy,
  * nie z naszego kodu. Stopkę wstaw przez `<KptDialog.Footer>`.
  *
  * Z `header` okno bierze nazwę z nagłówka (`aria-labelledby`); bez niego podaj `aria-label`.
  * Okno wymagające odpowiedzi dostaje `role="alertdialog"` i `aria-describedby` wprost z propsów
- * `<dialog>` — tak robi `KptConfirmContainer`.
+ * `<dialog>` - tak robi `KptConfirmContainer`.
  *
  * @example
  * <KptDialog open={open} onOpenChange={setOpen} header="Usunąć?">
@@ -27,23 +30,41 @@ export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismis
     const { t } = useKptMessages({ locale, dictionary });
     const dialogRef = useRef(null);
     const titleId = useKptId(undefined, 'kpt-dialog-title');
-    // Element trafia do kontekstu, więc musi wywołać render — sam `ref` by nie wystarczył.
+    // Element trafia do kontekstu, więc musi wywołać render - sam `ref` by nie wystarczył.
     const [dialogEl, setDialogEl] = useState(null);
     useEffect(() => {
         const el = dialogRef.current;
-        if (!el)
+        if (!el || !open)
             return;
-        if (open && !el.open)
+        if (!el.open)
             el.showModal();
-        else if (!open && el.open)
-            el.close();
+        // `showModal()` blokuje interakcję z tłem, ale nie jego przewijanie kółkiem.
+        const releaseScroll = kptLockScroll();
+        return () => {
+            releaseScroll();
+            if (el.open)
+                el.close();
+        };
     }, [open]);
+    /**
+     * `close` przychodzi z każdej drogi. Przy `dismissible=false` zamknąć wolno tylko z kodu:
+     * Chromium z CloseWatcherem pozwala anulować `cancel` jedynie po aktywacji użytkownika, więc drugi
+     * Escape z rzędu zamyka okno mimo `preventDefault` - wtedy otwieramy je z powrotem.
+     */
+    const onClose = () => {
+        const el = dialogRef.current;
+        if (!dismissible && open && el && !el.open) {
+            el.showModal();
+            return;
+        }
+        onOpenChange(false);
+    };
     const footers = [];
     const body = [];
-    Children.forEach(children, (child) => {
+    for (const child of slotChildren(children)) {
         const isFooter = isValidElement(child) && child.type?.kptDialogSlot === 'footer';
         (isFooter ? footers : body).push(child);
-    });
+    }
     const onCancel = (event) => {
         // Esc idzie przez `cancel`; blokujemy go, gdy okna nie wolno zamknąć.
         if (!dismissible) {
@@ -52,7 +73,7 @@ export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismis
         }
         onOpenChange(false);
     };
-    return (_jsx(KptOverlayContainerContext.Provider, { value: open ? dialogEl : null, children: _jsxs("dialog", { ref: composeRefs(dialogRef, setDialogEl, ref), className: cn('kpt-dialog', className), "data-size": size, "aria-labelledby": header ? titleId : undefined, onClose: () => onOpenChange(false), onCancel: onCancel, ...rest, children: [header ? (_jsxs("div", { className: "kpt-dialog__header", children: [_jsx("h2", { className: "kpt-dialog__title", id: titleId, children: header }), dismissible ? (_jsx("button", { className: "kpt-dialog__close", type: "button", onClick: () => onOpenChange(false), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-dialog__body", children: body }), footers] }) }));
+    return (_jsx(KptOverlayContainerContext.Provider, { value: open ? dialogEl : null, children: _jsxs("dialog", { ref: composeRefs(dialogRef, setDialogEl, ref), className: cn('kpt-dialog', className), "data-size": size, "aria-labelledby": header ? titleId : undefined, closedby: dismissible ? undefined : 'none', onClose: onClose, onCancel: onCancel, ...rest, children: [header ? (_jsxs("div", { className: "kpt-dialog__header", children: [_jsx("h2", { className: "kpt-dialog__title", id: titleId, children: header }), dismissible ? (_jsx("button", { className: "kpt-dialog__close", type: "button", onClick: () => onOpenChange(false), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-dialog__body", children: body }), footers] }) }));
 }
 /**
  * Stopka okna. Nosi atrybut `kptdialogfooter`, w który celuje wspólny SCSS (nazwy atrybutów