@konce-pt/react 0.9.0 → 0.10.0

package/dist/rating/rating.js

@@ -1,30 +1,105 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
+import { useKptFieldA11y } from "../form-field/form-field-context.js";
 import { KptIcon } from "../icon/icon.js";
+const fillOf = (star, shown) => shown >= star ? 'full' : shown >= star - 0.5 ? 'half' : 'empty';
 /**
  * Ocena gwiazdkami. Kliknięcie zapalonej gwiazdki zeruje ocenę, więc wystawioną można cofnąć
  * bez osobnego przycisku „wyczyść".
  *
+ * Do edycji to grupa radiowa (`role="radiogroup"`, gwiazdki jako `role="radio"`): jeden przystanek
+ * Tab, strzałki zmieniają ocenę o krok (w RTL odwrócone w poziomie), `Home`/`End` ustawiają
+ * skrajne, `Delete`/`Backspace` zeruje. Z `allowHalf` każda gwiazdka ma dwie połówki — dwa osobne
+ * `radio` („3,5 z 5”), a krok strzałek to 0,5. Tylko do odczytu (`readOnly`) to obrazek z nazwą
+ * „4,3 z 5” — bez przycisków, które czytnik ogłaszałby jako wyłączone; gwiazdki pokazują wartość
+ * zaokrągloną do połówki.
+ *
  * @example
- * <KptRating value={score} onValueChange={setScore} count={5} />
- * <KptRating value={4} readOnly />
+ * <KptRating value={score} onValueChange={setScore} count={5} ariaLabel="Ocena" />
+ * <KptRating value={score} onValueChange={setScore} allowHalf ariaLabel="Ocena" />
+ * <KptRating value={4.3} readOnly />
  */
-export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, readOnly = false, disabled = false, onTouch, locale, dictionary, className, ...rest }) {
-    const { t } = useKptMessages({ locale, dictionary });
+export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, allowHalf = false, readOnly = false, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const field = useKptFieldA11y(id, 'kpt-rating');
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [hover, setHover] = useState(0);
-    const locked = readOnly || disabled;
+    const groupRef = useRef(null);
+    /** Prośba o fokus na przystanek Tab po najbliższym renderze (zmiana oceny klawiszem). */
+    const wantFocus = useRef(false);
+    const showInvalid = invalid && (touched ?? true);
+    const stars = Array.from({ length: count }, (_, index) => index + 1);
+    const step = allowHalf ? 0.5 : 1;
     // Podgląd pod kursorem wygrywa z oceną, ale tylko dopóki kursor jest nad gwiazdkami —
     // po `mouseleave` wraca 0 i zapalona zostaje sama wartość.
     const shown = hover || current;
-    const pick = (star) => {
-        if (locked)
+    /** Przystanek Tab: wybrana wartość, a bez oceny — pierwsza możliwa. */
+    const tabStop = current >= step && current <= count ? current : step;
+    /** Liczba w zapisie języka strony („3,5” po polsku). */
+    const numberFormat = new Intl.NumberFormat(activeLocale, { maximumFractionDigits: 2 });
+    const starLabel = (score) => t('rating.star', { value: numberFormat.format(score), max: count });
+    useEffect(() => {
+        if (!wantFocus.current)
+            return;
+        wantFocus.current = false;
+        groupRef.current?.querySelector(`[data-value="${tabStop}"]`)?.focus();
+    });
+    const starVisual = (star, fill, children, hidden = false) => (_jsxs("span", { className: "kpt-rating__star", "data-fill": fill, "aria-hidden": hidden || undefined, children: [_jsx(KptIcon, { name: "star" }), _jsx("span", { className: "kpt-rating__fill", "aria-hidden": "true", children: _jsx(KptIcon, { name: "star" }) }), children] }, star));
+    if (readOnly) {
+        const score = starLabel(current);
+        // Gwiazdki pokazują wartość zaokrągloną do połówki (4,3 → 4,5), nazwa — dokładną.
+        const display = Math.round(current * 2) / 2;
+        return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { className: "kpt-rating kpt-rating--readonly", role: "img", id: field.id, "aria-label": ariaLabel ? `${ariaLabel}: ${score}` : score, "aria-describedby": field.describedBy, children: stars.map((star) => starVisual(star, fillOf(star, display), null, true)) }) }));
+    }
+    const pick = (score) => {
+        if (disabled)
+            return;
+        setCurrent(current === score ? 0 : score);
+    };
+    const onKeyDown = (event) => {
+        if (disabled)
+            return;
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const back = rtl ? 'ArrowRight' : 'ArrowLeft';
+        let next = null;
+        if (event.key === forward || event.key === 'ArrowUp')
+            next = Math.min(count, Math.max(step, current + step));
+        else if (event.key === back || event.key === 'ArrowDown')
+            next = Math.max(step, current - step);
+        else if (event.key === 'Home')
+            next = step;
+        else if (event.key === 'End')
+            next = count;
+        else if (event.key === 'Delete' || event.key === 'Backspace')
+            next = 0;
+        else if (event.key === ' ' || event.key === 'Enter') {
+            // Spacja na gwiazdce wybiera ją (jak radio); ponowna nie zeruje — od tego jest Delete.
+            const score = Number(event.target.dataset['value']);
+            if (score)
+                next = score;
+        }
+        if (next === null)
             return;
-        setCurrent(current === star ? 0 : star);
-        onTouch?.();
+        event.preventDefault();
+        setCurrent(next);
+        wantFocus.current = true;
+    };
+    /** „Dotknięcie” dopiero przy wyjściu fokusu z całej grupy, nie przy przejściu między gwiazdkami. */
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (!next || !event.currentTarget.contains(next))
+            onTouch?.();
     };
-    return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { className: "kpt-rating", role: "slider", "aria-valuenow": current, "aria-valuemax": count, children: Array.from({ length: count }, (_, index) => index + 1).map((star) => (_jsx("button", { type: "button", className: cn('kpt-rating__star', star <= shown && 'is-filled'), disabled: locked, onClick: () => pick(star), onMouseEnter: () => setHover(star), onMouseLeave: () => setHover(0), "aria-label": t('rating.star', { value: star, max: count }), children: _jsx(KptIcon, { name: "star" }) }, star))) }) }));
+    /** Pola wyboru jednej gwiazdki: całość albo — z `allowHalf` — dwie połówki. */
+    const optionsOf = (star) => allowHalf
+        ? [
+            { score: star - 0.5, part: 'start' },
+            { score: star, part: 'end' },
+        ]
+        : [{ score: star, part: 'full' }];
+    return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { ref: groupRef, className: cn('kpt-rating', disabled && 'kpt-rating--disabled'), role: "radiogroup", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-disabled": disabled || undefined, onKeyDown: onKeyDown, onBlur: onBlur, onMouseLeave: () => setHover(0), children: stars.map((star) => starVisual(star, fillOf(star, shown), optionsOf(star).map((option) => (_jsx("button", { type: "button", role: "radio", className: cn('kpt-rating__hit', `kpt-rating__hit--${option.part}`), "aria-checked": option.score === current, tabIndex: !disabled && option.score === tabStop ? 0 : -1, "aria-disabled": disabled || undefined, "data-value": option.score, "aria-label": starLabel(option.score), onClick: () => pick(option.score), onMouseEnter: () => !disabled && setHover(option.score) }, option.part))))) }) }));
 }

package/dist/rich-text/llms.txt

@@ -45,6 +45,11 @@ only when the operation actually changed something — otherwise Tab stays nativ
 never becomes a keyboard trap (WCAG 2.1.2). In a table cell Tab moves to the next cell; a list
 inside the cell takes precedence.
 
+## The toolbar is one Tab stop
+The toolbar is a named `role="toolbar"` ("Formatting", `richText.toolbar`) with a roving tabindex:
+`←`/`→` (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.
+
 ## 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
@@ -69,3 +74,18 @@ Every label comes from the `richText` namespace, including `richText.menu.*` and
 Formatting goes through `document.execCommand`. The API is formally deprecated, but it is the only
 route into the browser's native undo stack (Ctrl+Z); replacing it would mean writing our own
 history, that is, a different editor.
+
+## Screen reader and keyboard
+`link` opens a small dialog instead of the browser's `prompt()`: a labelled URL field (prefilled
+with the current link), `Enter` inserts, `Escape` returns to the text with the selection restored.
+The table context menu is a `role="menu"` of `menuitem`s: it also opens from the keyboard (the menu
+key or `Shift+F10` in a cell), the arrows and `Home`/`End` move, `Escape`/`Tab` close it, and focus
+goes back to the cell. Colour swatches are named ("Dark grey", `richText.swatches.*`) instead of
+their hex codes. The table size grid is still mouse-only.
+
+## 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 `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.

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

@@ -13,6 +13,12 @@ export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     placeholder?: string;
     /** Maksymalna głębokość zagnieżdżenia list (Tab, „Dodaj wcięcie"). */
     maxListLevel?: number;
+    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    id?: string;
+    /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
+    ariaLabel?: string | null;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`. */
+    required?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -35,4 +41,4 @@ export interface KptRichTextProps extends Omit<ComponentPropsWithRef<'div'>, 'on
  * <KptRichText value={html} onValueChange={setHtml} />
  * <KptRichText value={html} onValueChange={setHtml} toolbar={[['bold', 'italic'], ['link']]} />
  */
-export declare function KptRichText({ value, defaultValue, onValueChange, toolbar, placeholder, maxListLevel, 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, invalid, touched, onTouch, mentions, mentionLimit, onMention, locale, dictionary, className, ...rest }: Readonly<KptRichTextProps>): import("react").JSX.Element;

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.