@konce-pt/react 0.11.2 → 0.12.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";
@@ -23,11 +24,15 @@ import { focusCalendarActive, trapTab } from "../internal/calendar-focus.js";
  * 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. */
     const field = useKptFieldA11y(id, 'kpt-datepicker');
@@ -35,8 +40,13 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
     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));
@@ -49,17 +59,30 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
     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';
@@ -100,48 +120,42 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
         triggerRef.current?.focus();
     };
     // 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);
-    });
+    }, [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. */
     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 ──
     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 })
@@ -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. */
     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ą. */
     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 });
+            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':
@@ -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();
@@ -322,7 +354,7 @@ export function KptDatepicker({ value, defaultValue = '', onValueChange, selecti
                     }
                 }, 
                 // 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) => {
+                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,7 +5,7 @@ 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>
@@ -22,7 +22,7 @@ Import: `import { KptDatepicker } from '@konce-pt/react';`
   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'`
+- `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
@@ -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.js

@@ -1,6 +1,9 @@
+'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";
@@ -31,19 +34,37 @@ export function KptDialog({ open, onOpenChange, header = '', size = 'md', dismis
     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

package/dist/dialog/llms.txt

@@ -51,3 +51,6 @@ page becomes inert, and Escape closes it — all from the browser. With `dismiss
 `cancel` event is prevented, so Escape stops working; give the user another way out.
 With `header` the dialog is named by its title (`aria-labelledby`); without one pass `aria-label`.
 `role="alertdialog"` and `aria-describedby` go straight through as `<dialog>` props.
+
+## Scrolling and non-dismissible windows
+An open window locks page scrolling underneath (a shared counter with drawers and bottom sheets, so nested windows do not release each other). With `dismissible` off the window gets `closedby="none"`, and if a browser still closes it on a gesture (Chromium lets the second Escape in a row through `cancel`), it is reopened — only code can close it.

package/dist/divider/divider.d.ts

@@ -4,6 +4,11 @@ export interface KptDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
     orientation?: KptDividerOrientation;
     /** Wcięcie (odstęp od krawędzi kontenera). */
     inset?: boolean;
+    /**
+     * Linia czysto ozdobna (np. między kartami, które i tak są osobnymi regionami) — bez
+     * `role="separator"`, ukryta przed czytnikiem. Domyślnie separator jest ogłaszany.
+     */
+    decorative?: boolean;
 }
 /**
  * Separator (linia pozioma lub pionowa). Kolor z `--kpt-color-border`.
@@ -12,5 +17,6 @@ export interface KptDividerProps extends Omit<ComponentPropsWithRef<'div'>, 'chi
  * <KptDivider />
  * <KptDivider orientation="vertical" />
  * <KptDivider inset />
+ * <KptDivider decorative />
  */
-export declare function KptDivider({ orientation, inset, className, ...rest }: Readonly<KptDividerProps>): import("react").JSX.Element;
+export declare function KptDivider({ orientation, inset, decorative, className, ...rest }: Readonly<KptDividerProps>): import("react").JSX.Element;

package/dist/divider/divider.js

@@ -7,7 +7,8 @@ import { cn } from "../internal/cn.js";
  * <KptDivider />
  * <KptDivider orientation="vertical" />
  * <KptDivider inset />
+ * <KptDivider decorative />
  */
-export function KptDivider({ orientation = 'horizontal', inset = false, className, ...rest }) {
-    return (_jsx("div", { className: cn('kpt-divider', inset && 'kpt-divider--inset', className), role: "separator", "aria-orientation": orientation, "data-orientation": orientation, ...rest }));
+export function KptDivider({ orientation = 'horizontal', inset = false, decorative = false, className, ...rest }) {
+    return (_jsx("div", { className: cn('kpt-divider', inset && 'kpt-divider--inset', className), role: decorative ? 'none' : 'separator', "aria-orientation": decorative ? undefined : orientation, "aria-hidden": decorative || undefined, "data-orientation": orientation, ...rest }));
 }

package/dist/divider/llms.txt

@@ -9,6 +9,7 @@ Import: `import { KptDivider } from '@konce-pt/react';`
 ## Props
 - `orientation`: 'horizontal' | 'vertical' (default 'horizontal')
 - `inset`: boolean — an indent from the container edges
+- `decorative`: boolean — a purely ornamental line: no `role="separator"`, hidden from screen readers
 - `className`, `ref` and every other `<div>` prop go to the divider
 
 ## Vertical needs a flex parent

package/dist/drawer/drawer.d.ts

@@ -6,6 +6,11 @@ export interface KptDrawerProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
     onOpenChange: (open: boolean) => void;
     position?: KptDrawerPosition;
     header?: string;
+    /**
+     * Nazwa panelu bez `header` — okno dialogowe bez nazwy czytnik ogłasza jako samo „okno
+     * dialogowe” (WCAG 4.1.2). Z nagłówkiem nazwą jest nagłówek (`aria-labelledby`).
+     */
+    ariaLabel?: string;
     /** Pokazuje przycisk × i pozwala zamknąć klawiszem Escape. */
     dismissible?: boolean;
     closeOnBackdrop?: boolean;
@@ -22,4 +27,4 @@ export interface KptDrawerProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
  *   Treść panelu…
  * </KptDrawer>
  */
-export declare function KptDrawer({ open, onOpenChange, position, header, dismissible, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptDrawerProps>): import("react").JSX.Element;
+export declare function KptDrawer({ open, onOpenChange, position, header, ariaLabel, dismissible, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptDrawerProps>): import("react").JSX.Element;

package/dist/drawer/drawer.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
 import { cn } from "../internal/cn.js";
@@ -16,7 +17,7 @@ import { KptIcon } from "../icon/icon.js";
  *   Treść panelu…
  * </KptDrawer>
  */
-export function KptDrawer({ open, onOpenChange, position = 'left', header = '', dismissible = true, closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
+export function KptDrawer({ open, onOpenChange, position = 'left', header = '', ariaLabel = '', dismissible = true, closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const close = useCallback(() => onOpenChange(false), [onOpenChange]);
     const panelRef = useRef(null);
@@ -26,5 +27,5 @@ export function KptDrawer({ open, onOpenChange, position = 'left', header = '',
         if (event.key === 'Escape' && dismissible)
             close();
     };
-    return (_jsxs("div", { className: cn('kpt-drawer-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-drawer__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("aside", { ref: panelRef, className: cn('kpt-drawer__panel', open && 'is-open'), "data-position": position, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, onKeyDown: onKeyDown, children: [header || dismissible ? (_jsxs("div", { className: "kpt-drawer__header", children: [_jsx("span", { className: "kpt-drawer__title", id: titleId, children: header }), dismissible ? (_jsx("button", { type: "button", className: "kpt-drawer__close", onClick: close, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-drawer__body", children: children })] })] }));
+    return (_jsxs("div", { className: cn('kpt-drawer-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-drawer__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("aside", { ref: panelRef, className: cn('kpt-drawer__panel', open && 'is-open'), "data-position": position, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, "aria-label": header ? undefined : ariaLabel || undefined, tabIndex: -1, onKeyDown: onKeyDown, children: [header || dismissible ? (_jsxs("div", { className: "kpt-drawer__header", children: [_jsx("span", { className: "kpt-drawer__title", id: titleId, children: header }), dismissible ? (_jsx("button", { type: "button", className: "kpt-drawer__close", onClick: close, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) })) : null] })) : null, _jsx("div", { className: "kpt-drawer__body", children: children })] })] }));
 }

package/dist/drawer/llms.txt

@@ -50,3 +50,6 @@ is named by its `header` through `aria-labelledby`. The shared helper is `intern
 ## Accessibility
 `role="dialog"`, `aria-modal="true"` and `aria-labelledby` pointing at the title; the close button gets
 its label from `common.close`. Focus handling — see "Focus and keyboard" above.
+
+## Name and scrolling
+Without `header` give the panel `ariaLabel` — a `role="dialog"` without a name is announced as a bare "dialog". An open drawer locks page scrolling underneath.

package/dist/fieldset/fieldset.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
 /**
  * Grupa pól z legendą (`<fieldset>` + `<legend>`), opcjonalnie zwijana.
@@ -12,6 +14,7 @@ import { KptIcon } from "../icon/icon.js";
  * <KptFieldset legend="Dane osobowe" toggleable>…</KptFieldset>
  */
 export function KptFieldset({ legend = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+    const bodyId = useKptId(undefined, 'kpt-fieldset-body');
     const [isCollapsed, setCollapsed] = useControllableState({
         value: collapsed,
         defaultValue: defaultCollapsed,
@@ -20,5 +23,5 @@ export function KptFieldset({ legend = '', toggleable = false, collapsed, defaul
     return (_jsx("div", { className: cn('kpt-fieldset-host', className), style: {
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ...style,
-        }, ...rest, children: _jsxs("fieldset", { className: "kpt-fieldset", children: [_jsx("legend", { className: "kpt-fieldset__legend", children: toggleable ? (_jsxs("button", { type: "button", className: "kpt-fieldset__toggle", "aria-expanded": !isCollapsed, onClick: () => setCollapsed(!isCollapsed), children: [_jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }), _jsx("span", { children: legend })] })) : (_jsx("span", { children: legend })) }), _jsx("div", { className: cn('kpt-fieldset__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-fieldset__collapse-inner", children: _jsx("div", { className: "kpt-fieldset__body", children: children }) }) })] }) }));
+        }, ...rest, children: _jsxs("fieldset", { className: "kpt-fieldset", children: [_jsx("legend", { className: "kpt-fieldset__legend", children: toggleable ? (_jsxs("button", { type: "button", className: "kpt-fieldset__toggle", "aria-expanded": !isCollapsed, "aria-controls": bodyId, onClick: () => setCollapsed(!isCollapsed), children: [_jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }), _jsx("span", { children: legend })] })) : (_jsx("span", { children: legend })) }), _jsx("div", { id: bodyId, className: cn('kpt-fieldset__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, children: _jsx("div", { className: "kpt-fieldset__collapse-inner", children: _jsx("div", { className: "kpt-fieldset__body", children: children }) }) })] }) }));
 }

package/dist/file-upload/file-upload.d.ts

@@ -8,6 +8,12 @@ export interface KptFileUploadProps extends Omit<ComponentPropsWithRef<'div'>, '
     accept?: string;
     multiple?: boolean;
     disabled?: boolean;
+    /** Tylko do odczytu — listę plików widać, nie da się jej zmienić. */
+    readOnly?: boolean;
+    /** Id strefy; bez niego generowane, w `KptFormField` — z wrappera. */
+    id?: string;
+    /** Nazwa dostępna, gdy strefy nie opisuje etykieta (`KptFormField`). */
+    ariaLabel?: string | null;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -24,4 +30,4 @@ export interface KptFileUploadProps extends Omit<ComponentPropsWithRef<'div'>, '
  * @example
  * <KptFileUpload value={files} onValueChange={setFiles} accept="image/*" multiple />
  */
-export declare function KptFileUpload({ value, defaultValue, onValueChange, accept, multiple, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptFileUploadProps>): import("react").JSX.Element;
+export declare function KptFileUpload({ value, defaultValue, onValueChange, accept, multiple, disabled, readOnly, id, ariaLabel, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptFileUploadProps>): import("react").JSX.Element;