@konce-pt/react 0.9.1 → 0.11.0

package/dist/rich-text/rich-text.js

@@ -11,6 +11,9 @@ import { KptIcon } from "../icon/icon.js";
 import { sanitizeHtml, sanitizeUrl } from "./sanitize.js";
 import { canIndentItem, canOutdentItem, selectedItems, shiftItems } from "./lists.js";
 import { CELL_SELECTED, deleteColumn, deleteRow, insertColumn, insertRow, mergeCells, regionBetween, splitCell, tableHtml, toggleHeaderColumn, toggleHeaderRow, } from "./tables.js";
+import { useKptFieldA11y } from "../form-field/form-field-context.js";
+import { nextRovingIndex } from "../internal/roving.js";
+import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 const ICON = {
     copy: 'copy',
     paste: 'clipboard',
@@ -49,9 +52,22 @@ const COMMAND = {
     alignJustify: 'justifyFull',
     clear: 'removeFormat',
 };
+/** Paleta kolorów z nazwami (`richText.swatches.*`) — sam kod szesnastkowy nic czytnikowi nie mówi. */
 const SWATCHES = [
-    '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#ffffff',
-    '#e11d48', '#ea580c', '#ca8a04', '#16a34a', '#0891b2', '#2563eb', '#7c3aed',
+    { color: '#000000', name: 'black' },
+    { color: '#434343', name: 'darkGray' },
+    { color: '#666666', name: 'gray' },
+    { color: '#999999', name: 'midGray' },
+    { color: '#b7b7b7', name: 'silver' },
+    { color: '#cccccc', name: 'lightGray' },
+    { color: '#ffffff', name: 'white' },
+    { color: '#e11d48', name: 'red' },
+    { color: '#ea580c', name: 'orange' },
+    { color: '#ca8a04', name: 'yellow' },
+    { color: '#16a34a', name: 'green' },
+    { color: '#0891b2', name: 'cyan' },
+    { color: '#2563eb', name: 'blue' },
+    { color: '#7c3aed', name: 'violet' },
 ];
 const DEFAULT_TOOLBAR = [
     ['copy', 'paste', 'pasteText'],
@@ -86,7 +102,9 @@ function legacyState(cmd) {
  * <KptRichText value={html} onValueChange={setHtml} />
  * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
  */
-export function KptRichText({ value, defaultValue = '', onValueChange, toolbar = DEFAULT_TOOLBAR, placeholder = '', maxListLevel = 6, disabled = false, invalid = false, touched, onTouch, mentions = [], mentionLimit = KPT_MENTION_LIMIT, onMention, locale, dictionary, className, ...rest }) {
+export function KptRichText({ value, defaultValue = '', onValueChange, toolbar = DEFAULT_TOOLBAR, placeholder = '', maxListLevel = 6, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, mentions = [], mentionLimit = KPT_MENTION_LIMIT, onMention, locale, dictionary, className, ...rest }) {
+    /** `contenteditable` nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    const field = useKptFieldA11y(id, 'kpt-rich-text');
     const { t } = useKptMessages({ locale, dictionary });
     const container = useKptOverlayContainer();
     const editorRef = useRef(null);
@@ -98,7 +116,15 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
     const [foreAnchor, setForeAnchor] = useState(null);
     const [backAnchor, setBackAnchor] = useState(null);
     const [tableAnchor, setTableAnchor] = useState(null);
+    const [linkAnchor, setLinkAnchor] = useState(null);
+    /** Okienko adresu linku (zamiast `window.prompt()`) i wpisywany adres. */
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [linkDraft, setLinkDraft] = useState('');
+    /** Menu tabeli otwarte z klawiatury — po zamontowaniu fokus idzie na pierwszą pozycję. */
+    const menuFromKeyboard = useRef(false);
     const [styleOpen, setStyleOpen] = useState(false);
+    /** Narzędzie, na którym ostatnio stał fokus paska — przystanek Tab przy powrocie. */
+    const [lastTool, setLastTool] = useState(null);
     const [colorOpen, setColorOpen] = useState(false);
     const [colorKind, setColorKind] = useState('foreColor');
     const [tableOpen, setTableOpen] = useState(false);
@@ -408,15 +434,9 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         }
         focusEditor();
         switch (item) {
-            case 'link': {
-                const url = window.prompt(t('richText.linkPrompt'));
-                if (url) {
-                    const safe = sanitizeUrl(url);
-                    if (safe)
-                        legacyExec('createLink', safe);
-                }
-                break;
-            }
+            case 'link':
+                openLink();
+                return;
             case 'copy':
                 void copySelection();
                 return;
@@ -482,6 +502,10 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         // co innego niż w samym edytorze.
         if (mentionOpen && onMentionKeyDown(event))
             return;
+        if ((event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10')) && openMenuFromKeyboard()) {
+            event.preventDefault();
+            return;
+        }
         if (event.key !== 'Tab' || event.ctrlKey || event.altKey || event.metaKey)
             return;
         if (shiftItems(editorRef.current, event.shiftKey ? 'outdent' : 'indent', maxListLevel)) {
@@ -556,9 +580,67 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         pushValue();
     };
     const afterTableOp = () => {
+        const fromMenu = !!document.activeElement?.closest('.kpt-rt-menu');
         setMenuOpen(false);
+        // Pozycja wybrana z klawiatury znika razem z menu — fokus wraca do edytora, nie na <body>.
+        if (fromMenu)
+            focusEditor();
         pushValue();
     };
+    /** Zamknięcie menu z powrotem fokusu (i kursora) do komórki, z której je otwarto. */
+    const closeMenuToEditor = () => {
+        setMenuOpen(false);
+        focusEditor();
+        restoreSelection();
+    };
+    /** Klawiatura menu kontekstowego: strzałki, `Home`/`End`; `Escape`/`Tab` zamykają i wracają do tekstu. */
+    const onMenuKeyDown = (event) => {
+        if (handleMenuKeydown(event.currentTarget, event.nativeEvent) === 'close')
+            closeMenuToEditor();
+    };
+    /** Menu tabeli z klawiatury: klawisz menu albo `Shift+F10` w komórce — jak natywne menu kontekstowe. */
+    const openMenuFromKeyboard = () => {
+        const node = window.getSelection()?.anchorNode ?? null;
+        const el = node instanceof Element ? node : (node?.parentElement ?? null);
+        const cell = el?.closest('td, th');
+        if (!cell || !editorRef.current?.contains(cell))
+            return false;
+        const rect = cell.getBoundingClientRect();
+        saveSelection();
+        ctxCell.current = cell;
+        canSplitCtx.current = (cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1;
+        setMenuPoint({ x: rect.left, y: rect.bottom });
+        menuFromKeyboard.current = true;
+        setMenuOpen(true);
+        return true;
+    };
+    /** Okienko adresu zamiast `window.prompt()` — nazwane pole, `Enter` wstawia, `Escape` wraca do tekstu. */
+    const openLink = () => {
+        if (disabled)
+            return;
+        saveSelection();
+        const node = savedRange.current?.commonAncestorContainer ?? null;
+        const el = node instanceof Element ? node : (node?.parentElement ?? null);
+        setLinkDraft(el?.closest('a')?.getAttribute('href') ?? '');
+        setLinkOpen(true);
+    };
+    const applyLink = () => {
+        const safe = sanitizeUrl(linkDraft.trim());
+        setLinkOpen(false);
+        focusEditor();
+        restoreSelection();
+        if (safe) {
+            legacyExec('createLink', safe);
+            pushValue();
+        }
+    };
+    const closeLink = (refocus) => {
+        setLinkOpen(false);
+        if (refocus) {
+            focusEditor();
+            restoreSelection();
+        }
+    };
     const onContextMenu = (event) => {
         if (disabled)
             return;
@@ -566,6 +648,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
         if (!cell || !editorRef.current?.contains(cell))
             return; // poza tabelą zostaje natywne menu
         event.preventDefault();
+        saveSelection();
         ctxCell.current = cell;
         canSplitCtx.current = (cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1;
         setMenuPoint({ x: event.clientX, y: event.clientY });
@@ -655,7 +738,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
             return canOutdent;
         return true;
     };
-    const palette = (onPick, customLabel) => (_jsxs("div", { className: "kpt-rich-text__palette", onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((color) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: color }, "aria-label": color, onClick: () => onPick(color) }, color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: customLabel }), _jsx("input", { type: "color", onInput: (event) => onPick(event.target.value) })] })] }));
+    const palette = (onPick, customLabel) => (_jsxs("div", { className: "kpt-rich-text__palette", onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: swatch.color }, "aria-label": t(`richText.swatches.${swatch.name}`), onClick: () => onPick(swatch.color) }, swatch.color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: customLabel }), _jsx("input", { type: "color", onInput: (event) => onPick(event.target.value) })] })] }));
     /**
      * Panel otwarty przy dolnej albo prawej krawędzi okna wychodziłby poza ekran — CDK robił to
      * w Angularze sam, tutaj przesuwamy go po zamontowaniu, gdy już znać jego rozmiar.
@@ -683,11 +766,35 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                         onClose();
                     } }), _jsx("div", { ref: clampToViewport, style: { position: 'fixed', left: menuPoint.x, top: menuPoint.y, ...layer }, children: content })] }), container);
     };
-    const toolButton = (item) => (_jsx("button", { type: "button", className: cn('kpt-rich-text__tool', isActive(item) && 'is-active'), "aria-label": t(`richText.${item}`), "aria-pressed": pressed(item), title: t(`richText.${item}`), disabled: disabled || !enabled(item), onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
-    const menuItem = (icon, label, onClick, extra) => (_jsxs("button", { type: "button", className: cn('kpt-rt-menu__item', extra), onClick: onClick, children: [_jsx(KptIcon, { name: icon }), " ", label] }));
-    return (_jsxs("div", { className: cn('kpt-rich-text-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-rich-text', showInvalid && 'kpt-rich-text--invalid', disabled && 'kpt-rich-text--disabled'), children: [_jsx("div", { className: "kpt-rich-text__toolbar", role: "toolbar", children: sections.map((section, index) => (_jsxs("span", { style: { display: 'contents' }, children: [index > 0 ? _jsx("span", { className: "kpt-rich-text__divider", "aria-hidden": "true" }) : null, section.map((item) => {
+    /**
+     * Przystanek Tab paska: ostatnio użyte narzędzie, a gdy jest wyłączone albo go nie ma —
+     * pierwsze dostępne. Dzięki temu `Tab` z paska idzie od razu do edytora, a nie przez kilkanaście
+     * przycisków.
+     */
+    const usableTools = sections.flat().filter((item) => !disabled && enabled(item));
+    const toolStop = lastTool && usableTools.includes(lastTool) ? lastTool : (usableTools[0] ?? null);
+    const rovingProps = (item) => ({ 'data-tool': item, tabIndex: item === toolStop ? 0 : -1 });
+    /** Strzałki po pasku (w RTL odwrócone), `Home`/`End` — skrajne; wyłączone narzędzia są pomijane. */
+    const onToolbarKeyDown = (event) => {
+        const bar = event.currentTarget;
+        const buttons = [...bar.querySelectorAll('[data-tool]')];
+        const current = buttons.indexOf(event.target);
+        if (current < 0)
+            return;
+        const rtl = getComputedStyle(bar).direction === 'rtl';
+        const key = rtl && event.key === 'ArrowLeft' ? 'ArrowRight' : rtl && event.key === 'ArrowRight' ? 'ArrowLeft' : event.key;
+        const next = nextRovingIndex(buttons.map((button) => button.disabled), current, key);
+        if (next === null)
+            return;
+        event.preventDefault();
+        setLastTool(buttons[next].dataset['tool']);
+        buttons[next].focus();
+    };
+    const toolButton = (item) => (_jsx("button", { ...rovingProps(item), ref: item === 'link' ? setLinkAnchor : undefined, "aria-haspopup": item === 'link' ? 'dialog' : undefined, "aria-expanded": item === 'link' ? linkOpen : undefined, type: "button", className: cn('kpt-rich-text__tool', isActive(item) && 'is-active'), "aria-label": t(`richText.${item}`), "aria-pressed": pressed(item), title: t(`richText.${item}`), disabled: disabled || !enabled(item), onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
+    const menuItem = (icon, label, onClick, extra) => (_jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, className: cn('kpt-rt-menu__item', extra), "aria-disabled": extra === 'is-disabled' || undefined, onClick: onClick, children: [_jsx(KptIcon, { name: icon }), " ", label] }));
+    return (_jsxs("div", { className: cn('kpt-rich-text-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-rich-text', showInvalid && 'kpt-rich-text--invalid', disabled && 'kpt-rich-text--disabled'), children: [_jsx("div", { className: "kpt-rich-text__toolbar", role: "toolbar", "aria-label": t('richText.toolbar'), "aria-controls": field.id, onKeyDown: onToolbarKeyDown, children: sections.map((section, index) => (_jsxs("span", { style: { display: 'contents' }, children: [index > 0 ? _jsx("span", { className: "kpt-rich-text__divider", "aria-hidden": "true" }) : null, section.map((item) => {
                                     if (item === 'heading') {
-                                        return (_jsxs("button", { ref: setStyleAnchor, type: "button", className: cn('kpt-rich-text__style', styleOpen && 'is-open'), disabled: disabled, "aria-label": t('richText.heading'), "aria-expanded": styleOpen, title: t('richText.heading'), onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                                        return (_jsxs("button", { ref: setStyleAnchor, ...rovingProps(item), type: "button", className: cn('kpt-rich-text__style', styleOpen && 'is-open'), disabled: disabled, "aria-label": t('richText.heading'), "aria-expanded": styleOpen, title: t('richText.heading'), onMouseDown: (event) => event.preventDefault(), onClick: () => {
                                                 if (disabled)
                                                     return;
                                                 saveSelection();
@@ -695,7 +802,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                                             }, children: [_jsx("span", { children: styleLabel }), _jsx(KptIcon, { name: "chevron-down", className: "kpt-rich-text__style-caret" })] }, item));
                                     }
                                     if (item === 'foreColor' || item === 'backColor') {
-                                        return (_jsx("button", { ref: item === 'foreColor' ? setForeAnchor : setBackAnchor, type: "button", className: "kpt-rich-text__tool kpt-rich-text__tool--color", "aria-label": t(`richText.${item}`), title: t(`richText.${item}`), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                                        return (_jsx("button", { ref: item === 'foreColor' ? setForeAnchor : setBackAnchor, ...rovingProps(item), type: "button", className: "kpt-rich-text__tool kpt-rich-text__tool--color", "aria-label": t(`richText.${item}`), title: t(`richText.${item}`), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => {
                                                 if (disabled)
                                                     return;
                                                 saveSelection();
@@ -704,10 +811,10 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                                             }, children: _jsx(KptIcon, { name: ICON[item] }) }, item));
                                     }
                                     if (item === 'table') {
-                                        return (_jsx("button", { ref: setTableAnchor, type: "button", className: cn('kpt-rich-text__tool', tableOpen && 'is-active'), "aria-label": t('richText.table'), title: t('richText.table'), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
+                                        return (_jsx("button", { ref: setTableAnchor, ...rovingProps(item), type: "button", className: cn('kpt-rich-text__tool', tableOpen && 'is-active'), "aria-label": t('richText.table'), title: t('richText.table'), disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => exec(item), children: _jsx(KptIcon, { name: ICON[item] }) }, item));
                                     }
                                     return toolButton(item);
-                                })] }, index))) }), sourceView ? (_jsx("textarea", { className: "kpt-rich-text__source", value: current, disabled: disabled, spellCheck: false, "aria-label": t('richText.htmlSource'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() })) : (_jsx("div", { ref: editorRef, className: "kpt-rich-text__editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "aria-invalid": showInvalid || undefined, role: "textbox", "aria-multiline": "true", onInput: () => {
+                                })] }, index))) }), sourceView ? (_jsx("textarea", { className: "kpt-rich-text__source", value: current, disabled: disabled, spellCheck: false, "aria-label": t('richText.htmlSource'), onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() })) : (_jsx("div", { ref: editorRef, className: "kpt-rich-text__editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, "aria-invalid": showInvalid || undefined, role: "textbox", "aria-multiline": "true", id: field.id, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, onInput: () => {
                             pushValue();
                             syncMention();
                         }, onKeyDown: onKeyDown, onPaste: onPaste, onContextMenu: onContextMenu, onMouseDown: onEditorMouseDown, onMouseMove: onEditorMouseMove, onBlur: () => onTouch?.() }))] }), mentionOpen && container
@@ -722,7 +829,22 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                             event.preventDefault();
                             insertMention(item);
                         }, onMouseEnter: () => setMentionActive(index), children: [_jsx("span", { className: "kpt-rt-mentions__label", children: item.label }), item.kind ? _jsx("span", { className: "kpt-rt-mentions__kind", children: item.kind }) : null] }, item.id))) }), container)
-                : null, _jsx(KptOverlay, { open: styleOpen, anchor: styleAnchor, onClose: () => setStyleOpen(false), offset: 4, children: _jsx("ul", { className: "kpt-rich-text__style-panel", role: "listbox", children: styleOptions.map((option) => (_jsx("li", { className: cn(`kpt-rich-text__style-opt kpt-rich-text__style-opt--${option.tag}`, currentBlock === option.tag && 'is-selected'), role: "option", "aria-selected": currentBlock === option.tag, onClick: () => {
+                : null, _jsx(KptOverlay, { open: linkOpen, anchor: linkAnchor, onClose: () => closeLink(false), offset: 4, children: _jsxs("form", { className: "kpt-rt-link", role: "dialog", 
+                    // Bez walidacji przeglądarki: „example.com” jest poprawnym wpisem — `sanitizeUrl` dopisze https://.
+                    noValidate: true, "aria-label": t('richText.link'), onSubmit: (event) => {
+                        event.preventDefault();
+                        applyLink();
+                    }, onKeyDown: (event) => {
+                        if (event.key !== 'Escape')
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        closeLink(true);
+                    }, children: [_jsx("label", { className: "kpt-rt-link__label", htmlFor: `${field.id}-link`, children: t('richText.linkPrompt') }), _jsx("input", { ref: (el) => {
+                                // Panel jest niewidoczny do pierwszego pomiaru — fokus po klatce.
+                                if (el)
+                                    requestAnimationFrame(() => el.focus());
+                            }, className: "kpt-rt-link__input", id: `${field.id}-link`, type: "url", inputMode: "url", placeholder: "https://", value: linkDraft, onChange: (event) => setLinkDraft(event.target.value) }), _jsx("button", { type: "submit", className: "kpt-rt-link__apply", children: t('richText.linkApply') })] }) }), _jsx(KptOverlay, { open: styleOpen, anchor: styleAnchor, onClose: () => setStyleOpen(false), offset: 4, children: _jsx("ul", { className: "kpt-rich-text__style-panel", role: "listbox", children: styleOptions.map((option) => (_jsx("li", { className: cn(`kpt-rich-text__style-opt kpt-rich-text__style-opt--${option.tag}`, currentBlock === option.tag && 'is-selected'), role: "option", "aria-selected": currentBlock === option.tag, onClick: () => {
                             setStyleOpen(false);
                             focusEditor();
                             restoreSelection();
@@ -733,7 +855,12 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                     setTableOpen(false);
                     setGrid({ r: 0, c: 0 });
                 }, offset: 4, children: _jsxs("div", { className: "kpt-rt-grid-pop", onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rt-grid", onMouseLeave: () => setGrid({ r: 0, c: 0 }), children: GRID_ROWS.map((r) => (_jsx("div", { className: "kpt-rt-grid__row", children: GRID_COLS.map((c) => (_jsx("span", { className: cn('kpt-rt-grid__cell', r <= grid.r && c <= grid.c && 'is-on'), onMouseEnter: () => setGrid({ r, c }), onClick: () => insertTableAt(r, c) }, c))) }, r))) }), _jsxs("div", { className: "kpt-rt-grid__label", children: [grid.r, " \u00D7 ", grid.c] })] }) }), menuOpen
-                ? pointPanel(_jsxs("div", { className: "kpt-rt-menu", onContextMenu: (event) => event.preventDefault(), children: [_jsx("div", { className: "kpt-rt-menu__group", children: t('richText.menu.column') }), menuItem('plus', t('richText.menu.insertLeft'), () => {
+                ? pointPanel(_jsxs("div", { ref: (el) => {
+                        if (el && menuFromKeyboard.current) {
+                            menuFromKeyboard.current = false;
+                            requestAnimationFrame(() => focusMenuEdge(el, 'first'));
+                        }
+                    }, className: "kpt-rt-menu", role: "menu", "aria-label": t('richText.table'), onContextMenu: (event) => event.preventDefault(), onKeyDown: onMenuKeyDown, children: [_jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.column') }), menuItem('plus', t('richText.menu.insertLeft'), () => {
                             if (ctxCell.current)
                                 insertColumn(ctxCell.current, 'left');
                             afterTableOp();
@@ -750,7 +877,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                             if (ctxCell.current)
                                 deleteColumn(ctxCell.current);
                             afterTableOp();
-                        }), _jsx("div", { className: "kpt-rt-menu__sep" }), _jsx("div", { className: "kpt-rt-menu__group", children: t('richText.menu.row') }), menuItem('plus', t('richText.menu.insertAbove'), () => {
+                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), _jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.row') }), menuItem('plus', t('richText.menu.insertAbove'), () => {
                             if (ctxCell.current)
                                 insertRow(ctxCell.current, 'above');
                             afterTableOp();
@@ -767,7 +894,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                             if (ctxCell.current)
                                 deleteRow(ctxCell.current);
                             afterTableOp();
-                        }), _jsx("div", { className: "kpt-rt-menu__sep" }), _jsx("div", { className: "kpt-rt-menu__group", children: t('richText.menu.cell') }), menuItem('palette', t('richText.menu.cellBackground'), () => {
+                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), _jsx("div", { className: "kpt-rt-menu__group", "aria-hidden": "true", children: t('richText.menu.cell') }), menuItem('palette', t('richText.menu.cellBackground'), () => {
                             setMenuOpen(false);
                             setColorKind('cellBg');
                             setColorOpen(true);
@@ -783,7 +910,7 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                             for (const cell of activeCells())
                                 cell.style.textAlign = 'right';
                             afterTableOp();
-                        }), _jsx("div", { className: "kpt-rt-menu__sep" }), menuItem('table', t('richText.menu.mergeCells'), () => {
+                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('table', t('richText.menu.mergeCells'), () => {
                             mergeCells([...selCells.current]);
                             clearCellSelection();
                             afterTableOp();
@@ -791,15 +918,15 @@ export function KptRichText({ value, defaultValue = '', onValueChange, toolbar =
                             if (ctxCell.current)
                                 splitCell(ctxCell.current);
                             afterTableOp();
-                        }, canSplitCtx.current ? undefined : 'is-disabled'), _jsx("div", { className: "kpt-rt-menu__sep" }), menuItem('table', t('richText.menu.border'), () => {
+                        }, canSplitCtx.current ? undefined : 'is-disabled'), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('table', t('richText.menu.border'), () => {
                             setMenuOpen(false);
                             setBorderOpen(true);
-                        }), _jsx("div", { className: "kpt-rt-menu__sep" }), menuItem('trash', t('richText.menu.deleteTable'), () => {
+                        }), _jsx("div", { className: "kpt-rt-menu__sep", role: "separator" }), menuItem('trash', t('richText.menu.deleteTable'), () => {
                             ctxCell.current?.closest('table')?.remove();
                             afterTableOp();
                         }, 'kpt-rt-menu__item--danger')] }), () => setMenuOpen(false))
                 : null, borderOpen
-                ? pointPanel(_jsxs("div", { className: "kpt-rt-border", onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "kpt-rt-border__seg", children: [_jsx("button", { type: "button", className: cn(borderTarget === 'table' && 'is-active'), onClick: () => setBorderTarget('table'), children: t('richText.border.table') }), _jsx("button", { type: "button", className: cn(borderTarget === 'cell' && 'is-active'), onClick: () => setBorderTarget('cell'), children: t('richText.border.cell') })] }), _jsxs("div", { className: "kpt-rt-border__widths", children: [_jsx("button", { type: "button", onClick: () => setBorderWidth('none'), children: t('richText.border.none') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('thin'), children: t('richText.border.thin') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('medium'), children: t('richText.border.medium') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('thick'), children: t('richText.border.thick') })] }), _jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((color) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: color }, "aria-label": color, onClick: () => setBorderColor(color) }, color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: t('richText.border.customColor') }), _jsx("input", { type: "color", onInput: (event) => setBorderColor(event.target.value) })] })] }), () => setBorderOpen(false))
+                ? pointPanel(_jsxs("div", { className: "kpt-rt-border", onMouseDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "kpt-rt-border__seg", children: [_jsx("button", { type: "button", className: cn(borderTarget === 'table' && 'is-active'), onClick: () => setBorderTarget('table'), children: t('richText.border.table') }), _jsx("button", { type: "button", className: cn(borderTarget === 'cell' && 'is-active'), onClick: () => setBorderTarget('cell'), children: t('richText.border.cell') })] }), _jsxs("div", { className: "kpt-rt-border__widths", children: [_jsx("button", { type: "button", onClick: () => setBorderWidth('none'), children: t('richText.border.none') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('thin'), children: t('richText.border.thin') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('medium'), children: t('richText.border.medium') }), _jsx("button", { type: "button", onClick: () => setBorderWidth('thick'), children: t('richText.border.thick') })] }), _jsx("div", { className: "kpt-rich-text__swatches", children: SWATCHES.map((swatch) => (_jsx("button", { type: "button", className: "kpt-rich-text__swatch", style: { background: swatch.color }, "aria-label": t(`richText.swatches.${swatch.name}`), onClick: () => setBorderColor(swatch.color) }, swatch.color))) }), _jsxs("label", { className: "kpt-rich-text__picker", children: [_jsx("span", { children: t('richText.border.customColor') }), _jsx("input", { type: "color", onInput: (event) => setBorderColor(event.target.value) })] })] }), () => setBorderOpen(false))
                 : null, colorOpen && colorKind === 'cellBg'
                 ? pointPanel(palette(applyColor, t('richText.paletteCustom')), () => setColorOpen(false))
                 : null] }));

package/dist/scroll-top/llms.txt

@@ -38,4 +38,8 @@ The label comes from `scrollTop.label`.
 `--kpt-color-primary` / `--kpt-color-on-primary`, `--kpt-elevation-3`.
 
 ## Accessibility
-A real `<button>` with a label from the dictionary; while hidden it is out of the tab order.
+A real `<button>` labelled from `scrollTop.label`; while hidden it is `visibility: hidden`, so it is
+out of the tab order and the accessibility tree. It sits in the bottom-end corner
+(`inset-inline-end`), so it moves to the left in RTL. With `prefers-reduced-motion` the scroll is a
+jump instead of smooth and the button appears without a transition. Focus stays on the button after
+the jump — move it to your page heading if that matters.

package/dist/scroll-top/scroll-top.js

@@ -29,7 +29,9 @@ export function KptScrollTop({ threshold = 300, target = null, locale, dictionar
         const scroller = target
             ? (document.querySelector(target) ?? window)
             : window;
-        scroller.scrollTo({ top: 0, behavior: 'smooth' });
+        // Przy `prefers-reduced-motion` skok zamiast płynnego przewijania.
+        const behavior = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
+        scroller.scrollTo({ top: 0, behavior });
     };
     return (_jsx("div", { className: cn('kpt-scroll-top-host', className), ...rest, children: _jsx("button", { type: "button", className: cn('kpt-scroll-top', visible && 'is-visible'), 
             // Ukryty przycisk zostaje w DOM (animacja pojawiania), więc z kolejności Tab wyjmuje go

package/dist/select/llms.txt

@@ -18,7 +18,8 @@ A select on its own panel. Variants: single, with a search box (`filter`) and mu
 - `value` / `defaultValue` / `onValueChange` — a single `T`, or `T[]` in `multiple` mode
 - `open` / `defaultOpen` / `onOpenChange` — the panel state, so the list can be opened from outside
 - `placeholder`, `multiple`, `filter`, `disabled`, `invalid`, `touched`
-- `onTouch()` — fires when the panel closes or the trigger loses focus
+- `onTouch()` — fires when the panel closes or focus leaves the closed trigger
+- `aria-label` (through the rest props) names the trigger when no `<label for>` describes it
 - `locale`, `dictionary` — i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the trigger
 
@@ -29,9 +30,14 @@ flips above when there is no room, a transparent backdrop that closes on click,
 follows scrolling and resizing, so the panel never drifts away from its trigger.
 
 ## Keyboard
-On the trigger: ArrowDown, Enter or Space open the list; Escape closes it. In the panel: ArrowUp and
-ArrowDown move the active option, Enter picks it, Escape closes. Hovering an option makes it active,
-so the mouse and the keyboard share one highlight.
+The select-only combobox pattern: focus stays on the trigger and the active option is announced
+through `aria-activedescendant` (with `filter`, focus moves to the search field). Closed: ArrowDown,
+ArrowUp, Enter, Space, Home and End open the list, typing letters opens it on the first match, and
+in `multiple` mode Backspace/Delete removes the last chip. Open: ArrowUp/ArrowDown move by one,
+Home/End to the ends, PageUp/PageDown by ten, skipping disabled options without wrapping; Enter (and
+Space on the trigger) picks — a single select closes and returns focus to the trigger; typing jumps
+to the next match, diacritics ignored; Escape and Tab close. Hovering an option makes it active, so
+the mouse and the keyboard share one highlight, and clicking it does not take focus from the trigger.
 
 ## Inside KptFormField
 There is no native field for the wrapper to read, so the select reports its filled state with
@@ -46,11 +52,19 @@ There is no native field for the wrapper to read, so the select reports its fill
     <KptSelect options={roles} value={role} onValueChange={setRole} filter />
     <KptSelect options={tags} value={tags} onValueChange={setTags} multiple filter />
 
+## 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
+`aria-labelledby` pointing at the wrapper's label (unless `aria-label` is set), and the hint or
+error is added to `aria-describedby`. New: `id` and `required` (→ `aria-required`); the list gets
+the same name as the trigger.
+
 ## Tokens
 `--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}`,
 `--kpt-color-surface-raised` and `--kpt-elevation-3` for the panel, `--kpt-z-overlay` for the layer.
 
 ## Accessibility
-The trigger is `role="combobox"` with `aria-expanded` and `tabindex="0"`; the list is
-`role="listbox"` with `aria-multiselectable`, and each option is `role="option"` with
-`aria-selected`.
+The trigger is `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`
+and `aria-activedescendant`; the list is `role="listbox"` with `aria-multiselectable`, and each
+option is `role="option"` with `aria-selected` and `aria-disabled`. Chip remove buttons sit outside
+the Tab order and are named with the option label.

package/dist/select/select.d.ts

@@ -8,6 +8,10 @@ export interface KptSelectProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'c
     multiple?: boolean;
     /** Pole wyszukiwania nad listą. */
     filter?: boolean;
+    /** Id wyzwalacza; bez niego generowane, w `KptFormField` — z wrappera. */
+    id?: string;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`. */
+    required?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -26,6 +30,13 @@ export interface KptSelectProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'c
  * Lista wyboru (select) na własnym panelu. Warianty: pojedynczy, z wyszukiwarką (`filter`)
  * i wielokrotny (`multiple`, chipy).
  *
+ * Klawiatura według wzorca WAI-ARIA „select-only combobox”: fokus zostaje na polu, a aktywna opcja
+ * idzie przez `aria-activedescendant`. `↓`/`↑`/`Enter`/`Spacja` otwierają listę na wybranej opcji,
+ * strzałki, `Home`/`End`, `PageUp`/`PageDown` chodzą po opcjach (z pominięciem wyłączonych),
+ * wpisywane litery skaczą do pasującej opcji (bez polskich znaków), `Enter` wybiera, `Escape`
+ * zamyka. Z `filter` fokus przechodzi do pola wyszukiwania, które obsługuje te same klawisze.
+ * W trybie `multiple` `Backspace` na zamkniętym polu usuwa ostatni wybór.
+ *
  * Wewnątrz `KptFormField` zgłasza wypełnienie hookiem `useKptFormFieldFilled`, więc etykieta
  * Float Label unosi się nad wybraną wartością — natywnego pola, z którego wrapper mógłby to
  * odczytać, tu nie ma.
@@ -34,4 +45,4 @@ export interface KptSelectProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'c
  * <KptSelect options={roles} value={role} onValueChange={setRole} placeholder="Wybierz…" />
  * <KptSelect options={tags} multiple filter value={tags} onValueChange={setTags} />
  */
-export declare function KptSelect<T>({ options, placeholder, multiple, filter, disabled, invalid, touched, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, onTouch, locale, dictionary, className, onBlur, ...rest }: Readonly<KptSelectProps<T>>): import("react").JSX.Element;
+export declare function KptSelect<T>({ options, placeholder, multiple, filter, disabled, invalid, touched, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, onTouch, locale, dictionary, className, onBlur, id, required, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...rest }: Readonly<KptSelectProps<T>>): import("react").JSX.Element;