@konce-pt/react 0.11.2 → 0.12.0

package/dist/order-list/order-list.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -35,16 +36,27 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
     /** Pozycja, na którą po renderze trzeba przenieść fokus DOM (klawiatura). */
     const [focusRequest, setFocusRequest] = useState(null);
     const rootRef = useRef(null);
+    // Żądanie nie jest zerowane w efekcie (setState w efekcie = dodatkowy przebieg renderu): każde jest
+    // nowym obiektem, więc efekt rusza raz na żądanie, także o ten sam indeks.
     useEffect(() => {
-        if (focusRequest === null)
+        if (!focusRequest)
             return;
-        rootRef.current?.querySelectorAll('[role="option"]')[focusRequest]?.focus();
-        setFocusRequest(null);
+        rootRef.current?.querySelectorAll('[role="option"]')[focusRequest.index]?.focus();
     }, [focusRequest]);
     /**
      * Przesuwa pozycję spod `index` o jedno miejsce i zwraca jej nowy indeks. Jawny indeks zamiast
      * `selected`: klawiatura zaznacza i przesuwa w jednym zdarzeniu, a stan z domknięcia byłby stary.
      */
+    /** Treść regionu `aria-live` po przestawieniu. */
+    const [announcement, setAnnouncement] = useState('');
+    /**
+     * Ogłasza nową pozycję. Ten sam tekst drugi raz pod rząd nie zostałby przeczytany (region reaguje
+     * na zmianę), więc naprzemiennie dokładamy niewidoczną spację.
+     */
+    const announce = (index, total) => {
+        const text = t('orderList.moved', { position: index + 1, total });
+        setAnnouncement((current) => (current === text ? text + '\u00a0' : text));
+    };
     const moveFrom = (index, dir) => {
         const target = index + dir;
         if (target < 0 || target >= list.length)
@@ -55,6 +67,7 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         // Zaznaczenie wędruje za elementem, nie zostaje na pozycji — inaczej kolejne kliknięcie
         // przesuwałoby sąsiada zamiast tego samego wpisu.
         setSelected(target);
+        announce(target, next.length);
         return target;
     };
     const move = (dir) => {
@@ -67,7 +80,7 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
     const onItemKeyDown = (index, event) => {
         if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
             event.preventDefault();
-            setFocusRequest(moveFrom(index, event.key === 'ArrowUp' ? -1 : 1));
+            setFocusRequest({ index: moveFrom(index, event.key === 'ArrowUp' ? -1 : 1) });
             return;
         }
         const next = nextMenuIndex(list.length, index, event.key);
@@ -75,7 +88,7 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
             return;
         event.preventDefault();
         setSelected(next);
-        setFocusRequest(next);
+        setFocusRequest({ index: next });
     };
     const clearDrag = () => {
         setDragIndex(null);
@@ -114,6 +127,7 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         next.splice(index, 0, moved);
         setList(next);
         setSelected(index);
+        announce(index, next.length);
     };
     const onListDragOver = (event) => {
         if (dragIndex === null)
@@ -135,6 +149,7 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         next.push(moved);
         setList(next);
         setSelected(next.length - 1);
+        announce(next.length - 1, next.length);
     };
-    return (_jsx("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }) }));
+    return (_jsxs("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: [_jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }), _jsx("p", { className: "kpt-visually-hidden", "aria-live": "polite", children: announcement })] }));
 }

package/dist/paginator/paginator.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { KptButton } from "../button/button.js";
@@ -26,9 +27,11 @@ export function KptPaginator({ length, pageSize, defaultPageSize = 10, onPageSiz
         defaultValue: defaultPageIndex,
         onChange: onPageIndexChange,
     });
-    const totalPages = Math.max(1, Math.ceil(length / size));
-    const rangeStart = length === 0 ? 0 : index * size + 1;
-    const rangeEnd = Math.min(length, (index + 1) * size);
+    // Rozmiar strony do rachunków — `0` albo ujemny dawałby `Infinity` stron i wieczne „dalej”.
+    const step = Math.max(1, size);
+    const totalPages = Math.max(1, Math.ceil(length / step));
+    const rangeStart = length === 0 ? 0 : index * step + 1;
+    const rangeEnd = Math.min(length, (index + 1) * step);
     const canPrev = index > 0;
     const canNext = index < totalPages - 1;
     // Utrzymuj poprawny indeks, gdy zmieni się długość lub rozmiar strony.
@@ -47,5 +50,5 @@ export function KptPaginator({ length, pageSize, defaultPageSize = 10, onPageSiz
     const sizeOptions = pageSizeOptions.includes(size)
         ? pageSizeOptions
         : [...pageSizeOptions, size].sort((a, b) => a - b);
-    return (_jsxs("div", { className: cn('kpt-paginator', className), ...rest, children: [_jsx("div", { className: "kpt-paginator__size", children: _jsxs("label", { children: [t('paginator.rowsPerPage'), _jsx("select", { className: "kpt-paginator__select", value: size, onChange: onSizeChange, children: sizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }) }), _jsx("span", { className: "kpt-paginator__range", children: t('paginator.range', { start: rangeStart, end: rangeEnd, total: length }) }), _jsxs("div", { className: "kpt-paginator__nav", children: [_jsx(KptButton, { variant: "outline", size: "sm", disabled: !canPrev, onClick: () => setIndex(index - 1), "aria-label": t('paginator.prevPage'), children: prevIcon }), _jsx(KptButton, { variant: "outline", size: "sm", disabled: !canNext, onClick: () => setIndex(index + 1), "aria-label": t('paginator.nextPage'), children: nextIcon })] })] }));
+    return (_jsxs("div", { className: cn('kpt-paginator', className), ...rest, children: [_jsx("div", { className: "kpt-paginator__size", children: _jsxs("label", { children: [t('paginator.rowsPerPage'), _jsx("select", { className: "kpt-paginator__select", value: size, onChange: onSizeChange, children: sizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }) }), _jsx("span", { className: "kpt-paginator__range", "aria-live": "polite", children: t('paginator.range', { start: rangeStart, end: rangeEnd, total: length }) }), _jsxs("div", { className: "kpt-paginator__nav", children: [_jsx(KptButton, { variant: "outline", size: "sm", disabled: !canPrev, onClick: () => setIndex(index - 1), "aria-label": t('paginator.prevPage'), children: prevIcon }), _jsx(KptButton, { variant: "outline", size: "sm", disabled: !canNext, onClick: () => setIndex(index + 1), "aria-label": t('paginator.nextPage'), children: nextIcon })] })] }));
 }

package/dist/panel/panel.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from 'react';
+import { isValidElement } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren } from "../internal/slot-children.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -24,10 +26,10 @@ export function KptPanel({ header = '', toggleable = false, collapsed, defaultCo
     });
     const actions = [];
     const body = [];
-    Children.forEach(children, (child) => {
+    for (const child of slotChildren(children)) {
         const isActions = isValidElement(child) && child.type?.kptPanelSlot === 'actions';
         (isActions ? actions : body).push(child);
-    });
+    }
     return (_jsx("div", { className: cn('kpt-panel-host', className), style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsxs("div", { className: "kpt-panel", children: [_jsxs("div", { className: "kpt-panel__header", children: [_jsx("span", { className: "kpt-panel__title", children: header }), _jsx("span", { className: "kpt-panel__actions", children: actions }), toggleable ? (_jsx("button", { type: "button", className: "kpt-panel__toggle", onClick: () => setCollapsed(!isCollapsed), "aria-expanded": !isCollapsed, "aria-controls": bodyId, "aria-label": header ? t('panel.toggleNamed', { header }) : t('panel.toggle'), children: _jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }) })) : null] }), _jsx("div", { className: cn('kpt-panel__collapse', !isCollapsed && 'is-open'), id: bodyId, inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-panel__collapse-inner", children: _jsx("div", { className: "kpt-panel__body", children: body }) }) })] }) }));
 }
 /** Akcje w nagłówku panelu, obok tytułu. */

package/dist/password/llms.txt

@@ -28,8 +28,12 @@ fills in the OLD password instead of offering a new one, and the user ends up sa
 thing.
 
 ## How the score is computed
-Four independent criteria, one point each: at least 8 characters, both letter cases, a digit, a
-non-alphanumeric character. The label comes from `password.strength` — the only array-valued key in
+A 0–4 score. The score follows length first, not composition rules (NIST SP 800-63B advises against them): an
+approximate entropy over the character classes actually used, cut for repeats (`aaaa`), sequences
+(`abcd`, `1234`, `qwerty`) and the "Word + digits + symbol" shape. `Password1!` is weak, thirty
+lowercase letters are strong, and `ą`/`ż` are letters, not special characters. There is no
+dictionary — it is a hint, not a security control.
+The label comes from `password.strength` — the only array-valued key in
 the dictionary — indexed by the score, so a translation controls the wording without touching code.
 
 ## Examples

package/dist/password/password.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,20 +6,8 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
+import { kptPasswordScore } from "../internal/password-strength.js";
 import { KptIcon } from "../icon/icon.js";
-/** Cztery niezależne kryteria; każde spełnione podnosi wynik o jeden. */
-function scoreOf(password) {
-    let score = 0;
-    if (password.length >= 8)
-        score++;
-    if (/[A-Z]/.test(password) && /[a-z]/.test(password))
-        score++;
-    if (/\d/.test(password))
-        score++;
-    if (/[^A-Za-z0-9]/.test(password))
-        score++;
-    return Math.min(score, 4);
-}
 /**
  * Pole hasła z przełącznikiem widoczności i opcjonalnym miernikiem siły.
  *
@@ -33,6 +22,7 @@ export function KptPassword({ value, defaultValue = '', onValueChange, placehold
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [visible, setVisible] = useState(false);
     const showInvalid = invalid && (touched ?? true);
-    const score = scoreOf(current);
+    // Długość i różnorodność zamiast reguł składu — szczegóły w `internal/password-strength.ts`.
+    const score = kptPasswordScore(current);
     return (_jsxs("div", { className: cn('kpt-password-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-password', disabled && 'kpt-password--disabled', showInvalid && 'kpt-password--invalid'), children: [_jsx("input", { className: "kpt-password__input", id: inputId, type: visible ? 'text' : 'password', value: current, disabled: disabled, readOnly: readOnly, "aria-invalid": showInvalid || undefined, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-describedby": joinIds(field.describedBy, feedback && current && meterId), placeholder: placeholder, autoComplete: autoComplete ?? undefined, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }), _jsx("button", { type: "button", className: "kpt-password__toggle", disabled: disabled, onClick: () => setVisible(!visible), "aria-label": visible ? t('password.hide') : t('password.show'), children: _jsx(KptIcon, { name: visible ? 'eye-off' : 'eye' }) })] }), feedback && current ? (_jsxs("div", { className: "kpt-password__meter", id: meterId, "data-score": score, children: [_jsx("div", { className: "kpt-password__bars", "aria-hidden": "true", children: [0, 1, 2, 3].map((index) => (_jsx("span", { className: cn('kpt-password__bar', index < score && 'is-on') }, index))) }), _jsx("span", { className: "kpt-password__hint", children: messages.password.strength[score] })] })) : null] }));
 }

package/dist/peek/llms.txt

@@ -31,7 +31,7 @@ Hover opens after `openDelay` and leaving closes after `closeDelay` — the poin
 travel from the trigger to the card, so entering the card cancels the close. Focus opens it with no
 delay. A click, Enter or a tap **pins** the card: it stays after the pointer leaves and focus moves
 inside it. That is the only route to the card's content where there is no hover at all. Escape
-closes it and hands focus back to the trigger; so does a pointer press outside.
+closes it and hands focus back to the trigger; so does a pointer press outside. Escape on the trigger itself closes a card opened by hover or focus without moving focus (WCAG 1.4.13); with the card closed the key passes through to an enclosing dialog.
 
 ## Which of the three
 `KptTooltip` carries plain text and cannot be clicked. `KptPopover` opens on click and puts a

package/dist/peek/peek.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { cloneElement, isValidElement, useCallback, useEffect, useEffectEvent, useId, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { mergeSlotProps } from "../internal/slot.js";
@@ -24,6 +25,14 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
     const panelRef = useRef(null);
     const timer = useRef(undefined);
     const [open, setOpen] = useState(false);
+    /** Kotwica nakładki w stanie (callback ref), nie `triggerRef.current` czytane w renderze. */
+    const [anchor, setAnchor] = useState(null);
+    const setTriggerRef = useCallback((el) => {
+        triggerRef.current = el;
+        setAnchor(el);
+    }, []);
+    /** Tekst wyzwalacza jako nazwa karty — odczytany przy otwarciu, nie w renderze. */
+    const [triggerName, setTriggerName] = useState('');
     /** Przypięta karta zostaje po zjeździe kursora — przypina ją klik, Enter albo dotyk. */
     const [pinned, setPinned] = useState(false);
     const panelId = useId();
@@ -40,21 +49,24 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
             timer.current = setTimeout(action, delay);
     }, [stop]);
     const show = useCallback(() => {
-        setOpen((was) => {
-            if (!was)
-                onOpenChange?.(true);
-            return true;
-        });
-    }, [onOpenChange]);
+        setTriggerName(triggerRef.current?.textContent?.trim() ?? '');
+        setOpen(true);
+    }, []);
+    // `onOpenChange` po zmianie stanu, a nie wewnątrz funkcji aktualizującej `setOpen` — ta musi być
+    // czysta (StrictMode woła ją dwa razy, a React może ją powtórzyć przy przerwanym renderze).
+    const notifyOpen = useEffectEvent((value) => onOpenChange?.(value));
+    const reportedOpen = useRef(false);
+    useEffect(() => {
+        if (reportedOpen.current === open)
+            return;
+        reportedOpen.current = open;
+        notifyOpen(open);
+    }, [open]);
     const close = useCallback(() => {
         stop();
         setPinned(false);
-        setOpen((was) => {
-            if (was)
-                onOpenChange?.(false);
-            return false;
-        });
-    }, [onOpenChange, stop]);
+        setOpen(false);
+    }, [stop]);
     const hoverIn = useCallback(() => {
         if (disabled)
             return;
@@ -106,19 +118,29 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
     }, [close, open]);
     const triggerProps = {
         className: 'kpt-peek__trigger',
-        ref: triggerRef,
+        ref: setTriggerRef,
         onMouseEnter: hoverIn,
         onMouseLeave: hoverOut,
         onFocus: focusIn,
         onBlur: focusOut,
         onClick: pin,
+        // Escape na wyzwalaczu odprawia kartę bez przenoszenia fokusu (WCAG 1.4.13). Zamknięta karta
+        // przepuszcza klawisz dalej — Escape nadal zamyka otaczające okno.
+        onKeyDown: (event) => {
+            if (event.key !== 'Escape' || !open)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+        },
         'aria-expanded': open,
         'aria-controls': open ? panelId : undefined,
     };
     return (_jsxs("span", { ref: hostRef, className: cn('kpt-peek-host', className), ...rest, children: [isValidElement(trigger) ? (
             // Propsy idą na sam wyzwalacz, nie na opakowanie: `aria-expanded` ma siedzieć na tym
             // elemencie, po którym jeździ czytnik ekranu, a nie na obojętnym `<span>` obok.
-            cloneElement(trigger, mergeSlotProps(triggerProps, trigger.props))) : (_jsx("span", { ...triggerProps, children: trigger })), _jsx(KptOverlay, { open: open, anchor: triggerRef.current, onClose: close, offset: 8, withBackdrop: false, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-peek__panel", role: "dialog", tabIndex: -1, "aria-label": label || triggerRef.current?.textContent?.trim() || undefined, "data-pinned": pinned ? '' : undefined, onMouseEnter: hoverIn, onMouseLeave: hoverOut, onFocus: focusIn, onBlur: focusOut, onKeyDown: (event) => {
+            // eslint-disable-next-line react-hooks/refs -- mergeSlotProps tylko składa handlery; refy czytają one dopiero w zdarzeniach
+            cloneElement(trigger, mergeSlotProps(triggerProps, trigger.props))) : (_jsx("span", { ...triggerProps, children: trigger })), _jsx(KptOverlay, { open: open, anchor: anchor, onClose: close, offset: 8, withBackdrop: false, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-peek__panel", role: "dialog", tabIndex: -1, "aria-label": label || triggerName || undefined, "data-pinned": pinned ? '' : undefined, onMouseEnter: hoverIn, onMouseLeave: hoverOut, onFocus: focusIn, onBlur: focusOut, onKeyDown: (event) => {
                         if (event.key !== 'Escape')
                             return;
                         close();

package/dist/pick-list/llms.txt

@@ -73,3 +73,6 @@ Each list is named after its header (`aria-label`). The four move buttons are la
 dictionary, so "move all right" is distinguishable from "move right" without seeing the double
 chevron. Native HTML5 drag and drop has no keyboard equivalent — `Enter` and the buttons cover
 everything it does, and `dragdrop` adds to them, it never replaces them.
+
+## Announcements and buttons
+A transfer between the lists is announced in a polite live region: `pickList.moved` with `{count}` and `{list}` (the target header). The move buttons carry `aria-disabled` when there is nothing to move (no selection, empty list) — they stay focusable, so focus does not drop to `<body>` when the selection clears after a move.

package/dist/pick-list/pick-list.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -62,13 +63,14 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
     const setFocusOf = (side) => (side === 'source' ? setFocusLeft : setFocusRight);
     /** Przystanek Tab listy — ostatnio skupiona pozycja, przycięta do długości listy. */
     const tabIndexOf = (side) => Math.min(focusOf(side), listOf(side).length - 1);
+    // Żądanie nie jest zerowane w efekcie (setState w efekcie = dodatkowy przebieg renderu): każde jest
+    // nowym obiektem, więc efekt rusza raz na żądanie, także o ten sam indeks.
     useEffect(() => {
         if (!focusRequest)
             return;
         const list = rootRef.current?.querySelectorAll('.kpt-pick-list__items')[focusRequest.side === 'source' ? 0 : 1];
         const options = list?.querySelectorAll('[role="option"]') ?? [];
         options[Math.min(focusRequest.index, options.length - 1)]?.focus();
-        setFocusRequest(null);
     }, [focusRequest]);
     const focusItem = (side, index) => {
         setFocusOf(side)(index);
@@ -82,6 +84,17 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
             next.add(item);
         setSelectionOf(side)(next);
     };
+    const headerOf = (side) => side === 'source' ? (sourceHeader ?? t('pickList.available')) : (targetHeader ?? t('pickList.selected'));
+    /** Treść regionu `aria-live` po przeniesieniu. */
+    const [announcement, setAnnouncement] = useState('');
+    /**
+     * Ogłasza przeniesienie. Ten sam tekst drugi raz pod rząd nie zostałby przeczytany (region
+     * reaguje na zmianę), więc naprzemiennie dokładamy niewidoczną spację.
+     */
+    const announce = (count, to) => {
+        const text = t('pickList.moved', { count, list: headerOf(to) });
+        setAnnouncement((current) => (current === text ? text + '\u00a0' : text));
+    };
     const move = (from, all) => {
         const to = other(from);
         const fromItems = listOf(from);
@@ -92,6 +105,7 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
         setListOf(from)(fromItems.filter((item) => !moving.includes(item)));
         setListOf(to)([...listOf(to), ...moving]);
         setSelectionOf(from)(new Set());
+        announce(moving.length, to);
     };
     /** Przenosi jeden element między panelami, wstawiając go pod wskazanym indeksem. */
     const transfer = (fromSide, fromIndex, toSide, toIndex) => {
@@ -103,6 +117,8 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
         toItems.splice(toIndex, 0, moved);
         setListOf(fromSide)(fromItems);
         setListOf(toSide)(toItems);
+        if (fromSide !== toSide)
+            announce(1, toSide);
         // Element opuszcza panel — jego zaznaczenie po tamtej stronie przestaje cokolwiek znaczyć.
         const selection = selectionOf(fromSide);
         if (selection.has(moved)) {
@@ -208,11 +224,11 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
     const column = (side) => {
         const items = listOf(side);
         const selection = selectionOf(side);
-        const header = side === 'source' ? (sourceHeader ?? t('pickList.available')) : (targetHeader ?? t('pickList.selected'));
+        const header = headerOf(side);
         return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: cn('kpt-pick-list__items', listOver === side && 'is-dragover'), role: "listbox", "aria-multiselectable": "true", "aria-label": header, onDragOver: (event) => onListDragOver(side, event), onDragLeave: () => setListOver(null), onDrop: (event) => onListDrop(side, event), children: items.map((item, index) => {
                         const dragging = drag?.side === side && drag.index === index;
                         return (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected', dragging && 'is-dragging', dragdrop && 'kpt-pick-list__item--draggable', over?.side === side && over.index === index && !dragging && 'kpt-pick-list__item--dragover'), role: "option", "aria-selected": selection.has(item), tabIndex: index === tabIndexOf(side) ? 0 : -1, onFocus: () => setFocusOf(side)(index), onKeyDown: (event) => onItemKeyDown(side, index, item, event), draggable: dragdrop || undefined, onClick: () => toggle(side, item), onDoubleClick: () => moveOne(side, item), onDragStart: (event) => onDragStart(side, index, event), onDragOver: (event) => onDragOver(side, index, event), onDragLeave: () => setOver(null), onDrop: (event) => onDrop(side, index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index));
                     }) })] }));
     };
-    return (_jsx("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-pick-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-pick-list", children: [column('source'), _jsxs("div", { className: "kpt-pick-list__controls", children: [_jsxs("button", { type: "button", "aria-label": t('pickList.moveAllRight'), onClick: () => move('source', true), children: [_jsx(KptIcon, { name: "chevron-right" }), _jsx(KptIcon, { name: "chevron-right" })] }), _jsx("button", { type: "button", "aria-label": t('pickList.moveRight'), onClick: () => move('source', false), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("button", { type: "button", "aria-label": t('pickList.moveLeft'), onClick: () => move('target', false), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsxs("button", { type: "button", "aria-label": t('pickList.moveAllLeft'), onClick: () => move('target', true), children: [_jsx(KptIcon, { name: "chevron-left" }), _jsx(KptIcon, { name: "chevron-left" })] })] }), column('target')] }) }));
+    return (_jsxs("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-pick-list-host', className), ...rest, children: [_jsxs("div", { className: "kpt-pick-list", children: [column('source'), _jsxs("div", { className: "kpt-pick-list__controls", children: [_jsxs("button", { type: "button", "aria-label": t('pickList.moveAllRight'), "aria-disabled": !left.length || undefined, onClick: () => move('source', true), children: [_jsx(KptIcon, { name: "chevron-right" }), _jsx(KptIcon, { name: "chevron-right" })] }), _jsx("button", { type: "button", "aria-label": t('pickList.moveRight'), "aria-disabled": !selLeft.size || undefined, onClick: () => move('source', false), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("button", { type: "button", "aria-label": t('pickList.moveLeft'), "aria-disabled": !selRight.size || undefined, onClick: () => move('target', false), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsxs("button", { type: "button", "aria-label": t('pickList.moveAllLeft'), "aria-disabled": !right.length || undefined, onClick: () => move('target', true), children: [_jsx(KptIcon, { name: "chevron-left" }), _jsx(KptIcon, { name: "chevron-left" })] })] }), column('target')] }), _jsx("p", { className: "kpt-visually-hidden", "aria-live": "polite", children: announcement })] }));
 }

package/dist/popover/llms.txt

@@ -47,3 +47,6 @@ open, `aria-controls` — on the real `<button>`, not on the wrapper. Opening mo
 interactive element of the bubble; `Escape` or a click outside closes it, and focus returns to the
 trigger when it was inside the bubble. Focus is not trapped — the popover is supporting content, not
 a modal.
+
+## Name and Escape
+Give the panel `ariaLabel` — it is a `role="dialog"`. Escape closes only the top-most panel and does not reach an enclosing `<dialog>`, so a popover inside a dialog closes alone.

package/dist/popover/popover.d.ts

@@ -9,6 +9,8 @@ export interface KptPopoverProps extends Omit<ComponentPropsWithRef<'span'>, 'co
     onOpenChange?: (open: boolean) => void;
     /** Preferowana strona dymka; gdy brakuje miejsca, przechodzi na drugą. */
     placement?: 'bottom' | 'top';
+    /** Nazwa panelu (`role="dialog"`) — okno bez nazwy czytnik ogłasza jako samo „okno dialogowe”. */
+    ariaLabel?: string;
 }
 /**
  * Popover — dowolna treść w dymku przypiętym do wyzwalacza (bogatszy niż tooltip).
@@ -26,4 +28,4 @@ export interface KptPopoverProps extends Omit<ComponentPropsWithRef<'span'>, 'co
  *   <div>Bogata treść popovera…</div>
  * </KptPopover>
  */
-export declare function KptPopover({ trigger, children, open, defaultOpen, onOpenChange, placement, className, ...rest }: Readonly<KptPopoverProps>): import("react").JSX.Element;
+export declare function KptPopover({ trigger, children, open, defaultOpen, onOpenChange, placement, ariaLabel, className, ...rest }: Readonly<KptPopoverProps>): import("react").JSX.Element;

package/dist/popover/popover.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -22,8 +23,14 @@ const FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select,
  *   <div>Bogata treść popovera…</div>
  * </KptPopover>
  */
-export function KptPopover({ trigger, children, open, defaultOpen = false, onOpenChange, placement = 'bottom', className, ...rest }) {
+export function KptPopover({ trigger, children, open, defaultOpen = false, onOpenChange, placement = 'bottom', ariaLabel = '', className, ...rest }) {
     const triggerRef = useRef(null);
+    /** Kotwica panelu — w stanie, bo czyta ją render; ref zostaje dla handlerów. */
+    const [anchor, setAnchor] = useState(null);
+    const setTrigger = useCallback((element) => {
+        triggerRef.current = element;
+        setAnchor(element);
+    }, []);
     const panelRef = useRef(null);
     const panelId = useKptId(undefined, 'kpt-popover');
     const [isOpen, setOpen] = useControllableState({
@@ -58,5 +65,5 @@ export function KptPopover({ trigger, children, open, defaultOpen = false, onOpe
             findControl()?.focus();
         setOpen(false);
     }, [setOpen]);
-    return (_jsxs("span", { className: cn('kpt-popover-host', className), ...rest, children: [_jsx("span", { className: "kpt-popover__trigger", ref: triggerRef, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, offset: 6, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-popover__panel", role: "dialog", children: children }) })] }));
+    return (_jsxs("span", { className: cn('kpt-popover-host', className), ...rest, children: [_jsx("span", { className: "kpt-popover__trigger", ref: setTrigger, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 6, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-popover__panel", role: "dialog", "aria-label": ariaLabel || undefined, children: children }) })] }));
 }

package/dist/progress/progress.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";

package/dist/public-api.d.ts

@@ -120,7 +120,7 @@ export { KptButtonGroup } from './button-group/button-group.tsx';
 export type { KptButtonGroupProps } from './button-group/button-group.tsx';
 export { KptSelect } from './select/select.tsx';
 export type { KptSelectProps } from './select/select.tsx';
-export type { KptAlertVariant, KptOption } from './shared/types.ts';
+export type { KptAlertVariant, KptNavigateEvent, KptOption } from './shared/types.ts';
 export { KptFormField } from './form-field/form-field.tsx';
 export type { KptFormFieldLabelType, KptFormFieldProps } from './form-field/form-field.tsx';
 export { useKptFieldA11y, useKptFormFieldContext, useKptFormFieldFilled } from './form-field/form-field-context.ts';

package/dist/radio-group/llms.txt

@@ -49,3 +49,6 @@ is added to `aria-describedby`. New: `id`, `ariaLabel` and `required` (→ `aria
 ## Accessibility
 The container is `role="radiogroup"` with `aria-invalid` when the error shows; every option is a
 native radio inside a `<label>`, so the label text is clickable and is the accessible name.
+
+## Read-only and required
+`readOnly` blocks the click and the arrow keys (natively they move the selection); the group gets `aria-readonly`.

package/dist/radio-group/radio-group.d.ts

@@ -16,6 +16,8 @@ export interface KptRadioGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>
     /** Układ opcji: pod sobą (domyślnie) albo w rzędzie, z zawijaniem. */
     orientation?: 'vertical' | 'horizontal';
     disabled?: boolean;
+    /** Tylko do odczytu — wybór widać, nie da się go zmienić (`aria-readonly`). */
+    readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -29,4 +31,4 @@ export interface KptRadioGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>
  * @example
  * <KptRadioGroup options={plans} value={plan} onValueChange={setPlan} />
  */
-export declare function KptRadioGroup<T>({ options, value, defaultValue, onValueChange, name, id, ariaLabel, required, orientation, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptRadioGroupProps<T>>): import("react").JSX.Element;
+export declare function KptRadioGroup<T>({ options, value, defaultValue, onValueChange, name, id, ariaLabel, required, orientation, disabled, readOnly, invalid, touched, onTouch, className, ...rest }: Readonly<KptRadioGroupProps<T>>): import("react").JSX.Element;

package/dist/radio-group/radio-group.js

@@ -1,5 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
+import { optionKey } from "../internal/option-key.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
@@ -12,7 +14,7 @@ import { useKptFieldA11y } from "../form-field/form-field-context.js";
  * @example
  * <KptRadioGroup options={plans} value={plan} onValueChange={setPlan} />
  */
-export function KptRadioGroup({ options = [], value, defaultValue, onValueChange, name, id, ariaLabel = null, required = false, orientation = 'vertical', disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+export function KptRadioGroup({ options = [], value, defaultValue, onValueChange, name, id, ariaLabel = null, required = false, orientation = 'vertical', disabled = false, readOnly = false, invalid = false, touched, onTouch, className, ...rest }) {
     /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-radio-group');
     const groupName = useKptId(name, 'kpt-radio');
@@ -22,5 +24,14 @@ export function KptRadioGroup({ options = [], value, defaultValue, onValueChange
         onChange: onValueChange,
     });
     const showInvalid = invalid && (touched ?? true);
-    return (_jsx("div", { className: cn('kpt-radio-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-radio-group', orientation === 'horizontal' && 'kpt-radio-group--horizontal'), role: "radiogroup", "aria-orientation": orientation, "aria-invalid": showInvalid || undefined, id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, children: options.map((option) => (_jsxs("label", { className: cn('kpt-radio', (disabled || option.disabled) && 'kpt-radio--disabled'), children: [_jsx("input", { type: "radio", className: "kpt-radio__input", name: groupName, checked: option.value === current, disabled: disabled || option.disabled, onChange: () => setCurrent(option.value), onBlur: () => onTouch?.() }), _jsx("span", { className: "kpt-radio__dot", "aria-hidden": "true" }), _jsx("span", { className: "kpt-radio__label", children: option.label })] }, String(option.value)))) }) }));
+    return (_jsx("div", { className: cn('kpt-radio-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-radio-group', orientation === 'horizontal' && 'kpt-radio-group--horizontal'), role: "radiogroup", "aria-orientation": orientation, "aria-invalid": showInvalid || undefined, id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, 
+            // Tylko do odczytu: strzałki natywnie przestawiałyby zaznaczenie.
+            onKeyDown: (event) => {
+                if (readOnly && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key))
+                    event.preventDefault();
+            }, children: options.map((option, index) => (_jsxs("label", { className: cn('kpt-radio', (disabled || option.disabled) && 'kpt-radio--disabled'), children: [_jsx("input", { type: "radio", className: "kpt-radio__input", name: groupName, checked: option.value === current, disabled: disabled || option.disabled, onChange: () => {
+                            // Pole kontrolowane: bez zmiany stanu React przywraca poprzednie zaznaczenie.
+                            if (!readOnly)
+                                setCurrent(option.value);
+                        }, onBlur: () => onTouch?.() }), _jsx("span", { className: "kpt-radio__dot", "aria-hidden": "true" }), _jsx("span", { className: "kpt-radio__label", children: option.label })] }, optionKey(option.value, index)))) }) }));
 }

package/dist/rating/rating.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";

package/dist/rich-text/llms.txt

@@ -37,6 +37,11 @@ coming from the application or the HTML source view.
 Not just paste: a `value` from a database, a CMS or another user is untrusted too. Tags outside the
 allowlist are unwrapped (the text survives), `on*` handlers and `javascript:` URLs are dropped,
 `style` is filtered declaration by declaration. `sanitize.ts` knows nothing about React.
+Links keep only relative addresses and `http(s):`, `mailto:`, `tel:` — the same allowlist as the link tool, so
+`data:`, `vbscript:` or `blob:` from a paste are dropped. `class` keeps only the editor's own classes
+(`kpt-rt-*`, `kpt-mention`), a link with `target` always gets `rel="noopener noreferrer"`, and when the
+sanitizer removed something, the cleaned HTML is written back to `value` — the model never holds the
+unsafe original (a pure formatting difference does not touch it, so a clean value does not dirty a form).
 
 ## Lists are indented by our own DOM code
 `execCommand('indent')` produces invalid `ul > ul` in Chrome, so nesting goes through `lists.ts`
@@ -50,6 +55,12 @@ The toolbar is a named `role="toolbar"` ("Formatting", `richText.toolbar`) with
 `←`/`→` (mirrored in RTL) and `Home`/`End` move between tools, skipping disabled ones; the stop
 remembers the last tool, so Tab from the toolbar goes straight to the editor.
 
+Tool panels open in the overlay container at the end of `<body>`, so focus moves into them:
+the paragraph style list is a `listbox` (`↑`/`↓`, `Home`/`End`, `Enter`/`Space` picks, `Escape`/`Tab` close);
+the table grid is one stop (arrows change the size 1–8, the size is announced, `Enter` inserts);
+the colour palette starts on the first swatch (`←`/`→` between swatches, `Tab` cycles inside the
+panel). `Escape` closes any of them and returns focus to the tool.
+
 ## Tables
 Insert from an 8×8 grid popover. Dragging across cells makes a rectangular selection that grows
 until it fully covers merged cells on its edges. Right-click opens the menu: insert and delete rows
@@ -89,3 +100,6 @@ generated. A `div` with a role is not named by `label[for]`, so inside `KptFormF
 `aria-labelledby` pointing at the wrapper's label (unless `ariaLabel` is set), and the hint or error
 is added to `aria-describedby`. New: `id`, `ariaLabel` and `required` (→ `aria-required`) on the
 `role="textbox"` area.
+
+## Read-only and required
+`readOnly` keeps the content selectable and copyable but not editable (`aria-readonly`); the toolbar is disabled.

package/dist/rich-text/rich-text.d.ts

@@ -20,6 +20,8 @@ export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     /** Oznacza pole jako wymagane atrybutem `aria-required`. */
     required?: boolean;
     disabled?: boolean;
+    /** Tylko do odczytu — treść da się zaznaczyć i skopiować, nie edytować (`aria-readonly`). */
+    readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -33,12 +35,4 @@ export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     /** Wstawiona wzmianka — moment na powiadomienie osoby albo dopięcie powiązania. */
     onMention?: (item: KptMentionItem) => void;
 }
-/**
- * Lekki edytor tekstu sformatowanego na `contenteditable`, z konfigurowalnym paskiem sekcji
- * i edycją tabel. Wartością jest HTML.
- *
- * @example
- * <KptRichText value={html} onValueChange={setHtml} />
- * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
- */
-export declare function KptRichText({ value, defaultValue, onValueChange, toolbar, placeholder, maxListLevel, id, ariaLabel, required, disabled, invalid, touched, onTouch, mentions, mentionLimit, onMention, locale, dictionary, className, ...rest }: Readonly<KptRichTextProps>): import("react").JSX.Element;
+export declare function KptRichText({ value, defaultValue, onValueChange, toolbar, placeholder, maxListLevel, id, ariaLabel, required, disabled: disabledProp, readOnly, invalid, touched, onTouch, mentions, mentionLimit, onMention, locale, dictionary, className, ...rest }: Readonly<KptRichTextProps>): import("react").JSX.Element;