@konce-pt/react 0.11.2 → 0.12.0

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

@@ -8,6 +8,16 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     onValueChange?: (value: T) => void;
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
+    /** Tylko do odczytu — wybór widać, nie da się go zmienić (`aria-readonly`). */
+    readOnly?: boolean;
+    /** Pole wymagane — `aria-required`. */
+    required?: boolean;
+    /** Id grupy; bez niego generowane, w `KptFormField` — z wrappera. */
+    id?: string;
+    /** Nazwa dostępna grupy, gdy nie opisuje jej etykieta (`KptFormField`). */
+    ariaLabel?: string | null;
+    invalid?: boolean;
+    touched?: boolean;
     /** Wywoływane po wyborze — moment, w którym kontrolka staje się dotknięta. */
     onTouch?: () => void;
     /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i dymek `KptTooltip`. */
@@ -22,10 +32,13 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
  * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
  * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
+ * Wybór jest wyłączny, więc grupa to `role="radiogroup"` z pozycjami `role="radio"` (APG) —
+ * czytnik ogłasza „2 z 3”. Jeden przystanek Tab, strzałki przenoszą wybór, `Home`/`End` na skrajne.
+ *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
  *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
  * <KptButtonGroup value={view} onValueChange={setView} iconOnly
  *   options={[{ icon: 'list', label: 'Lista', value: 'list' }]} />
  */
-export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, onTouch, iconOnly, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;
+export declare function KptButtonGroup<T>({ options, value, defaultValue, onValueChange, size, disabled, readOnly, required, id, ariaLabel, invalid, touched, onTouch, iconOnly, hostProps, className, ...rest }: Readonly<KptButtonGroupProps<T>>): import("react").JSX.Element;

package/dist/button-group/button-group.js

@@ -1,8 +1,11 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { KptIcon } from "../icon/icon.js";
 import { KptTooltip } from "../tooltip/tooltip.js";
+import { useKptFieldA11y } from "../form-field/form-field-context.js";
+import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
  *
@@ -10,27 +13,50 @@ import { KptTooltip } from "../tooltip/tooltip.js";
  * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
  * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
+ * Wybór jest wyłączny, więc grupa to `role="radiogroup"` z pozycjami `role="radio"` (APG) —
+ * czytnik ogłasza „2 z 3”. Jeden przystanek Tab, strzałki przenoszą wybór, `Home`/`End` na skrajne.
+ *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
  *   options={[{ label: 'Lista', value: 'list' }, { label: 'Siatka', value: 'grid' }]} />
  * <KptButtonGroup value={view} onValueChange={setView} iconOnly
  *   options={[{ icon: 'list', label: 'Lista', value: 'list' }]} />
  */
-export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, onTouch, iconOnly = false, hostProps, className, ...rest }) {
+export function KptButtonGroup({ options = [], value, defaultValue, onValueChange, size = 'md', disabled = false, readOnly = false, required = false, id, ariaLabel = null, invalid = false, touched, onTouch, iconOnly = false, hostProps, className, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const [current, setCurrent] = useControllableState({
         value,
         defaultValue,
         onChange: onValueChange,
     });
+    /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    const field = useKptFieldA11y(id, 'kpt-button-group');
+    const showInvalid = invalid && (touched ?? true);
+    const disabledMap = options.map((option) => disabled || !!option.disabled);
+    /** Jedyny przystanek Tab: wybrana pozycja, a bez wyboru pierwsza dozwolona. */
+    const tabStop = rovingStop(disabledMap, options.findIndex((option) => option.value === current));
     const select = (option) => {
-        if (option.disabled || disabled)
+        if (option.disabled || disabled || readOnly)
             return;
         setCurrent(option.value);
         onTouch?.();
     };
-    return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', className), role: "group", "data-size": size, "data-icon-only": iconOnly ? '' : undefined, ...rest, children: options.map((option) => {
+    /** Strzałki (pion traktowany jak poziom), `Home`/`End`: fokus i wybór idą razem — wzorzec radia. */
+    const onKeyDown = (event) => {
+        const vertical = { ArrowDown: 'ArrowRight', ArrowUp: 'ArrowLeft' };
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        let key = vertical[event.key] ?? event.key;
+        if (rtl && (key === 'ArrowLeft' || key === 'ArrowRight'))
+            key = key === 'ArrowLeft' ? 'ArrowRight' : 'ArrowLeft';
+        const next = nextRovingIndex(disabledMap, tabStop, key);
+        if (next === null)
+            return;
+        event.preventDefault();
+        event.currentTarget.querySelectorAll('[role="radio"]')[next]?.focus();
+        select(options[next]);
+    };
+    return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', showInvalid && 'kpt-button-group--invalid', className), role: "radiogroup", id: field.id, "data-size": size, "data-icon-only": iconOnly ? '' : undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-invalid": showInvalid || undefined, onKeyDown: onKeyDown, ...rest, children: options.map((option, index) => {
                 const active = option.value === current;
-                return (_jsx(KptTooltip, { text: iconOnly ? option.label : '', children: _jsxs("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, "aria-label": iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }) }, String(option.value)));
+                return (_jsx(KptTooltip, { text: iconOnly ? option.label : '', children: _jsxs("button", { type: "button", role: "radio", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-checked": active, "aria-label": iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }) }, typeof option.value === 'object' && option.value !== null ? `#${index}` : String(option.value)));
             }) }) }));
 }

package/dist/button-group/llms.txt

@@ -5,12 +5,12 @@ Import: `import { KptButtonGroup } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-button-group-host">
-      <div class="kpt-button-group" role="group" data-size="md">
-        <button type="button" class="kpt-button-group__item is-active" aria-pressed="true">
+      <div class="kpt-button-group" role="radiogroup" data-size="md">
+        <button type="button" role="radio" class="kpt-button-group__item is-active" aria-checked="true" tabindex="0">
           <span class="kpt-button-group__icon kpt-icon-host">…</span>
           <span class="kpt-button-group__label">List</span>
         </button>
-        <button type="button" class="kpt-button-group__item" aria-pressed="false">
+        <button type="button" role="radio" class="kpt-button-group__item" aria-checked="false" tabindex="-1">
           <span class="kpt-button-group__label">Grid</span>
         </button>
       </div>
@@ -60,6 +60,9 @@ each one a stable id and map back to the object yourself.
 `--kpt-color-border-strong`, `--kpt-radius-md`, `--kpt-button-gap`.
 
 ## Accessibility
-A `role="group"` of native buttons, each with `aria-pressed` — a screen reader announces which
-segment is on, and the keyboard walks them like any other buttons. With `iconOnly` the name comes
-from `aria-label`, so the announcement does not degrade to a bare "button".
+A `role="radiogroup"` of native buttons with `role="radio"` and `aria-checked` — a screen reader
+announces which segment is on and "2 of 3"; one Tab stop, arrows move the choice. With `iconOnly`
+the name comes from `aria-label`, so the announcement does not degrade to a bare "radio button".
+
+## Read-only and required
+The group is `role="radiogroup"` with `role="radio"` items (`aria-checked`) instead of `aria-pressed` buttons — the choice is exclusive, so a screen reader announces "2 of 3". One Tab stop, arrows move the selection, `Home`/`End` jump to the ends. New: `id`, `ariaLabel`, `readOnly`, `required`, and the error state (`invalid` + `touched`) visible on the group itself.

package/dist/card/card.js

@@ -1,6 +1,7 @@
 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";
 /*
  * Karta odtwarza projekcję treści z Angulara: nagłówek i stopka są wyjmowane
  * z dzieci i renderowane poza `.kpt-card__body`, dokładnie tam, gdzie stawia je
@@ -24,7 +25,7 @@ export function KptCard({ variant = 'elevated', header, headingLevel, flush = fa
     const headers = [];
     const footers = [];
     const body = [];
-    Children.forEach(children, (child) => {
+    for (const child of slotChildren(children)) {
         const bucket = isValidElement(child) ? slotOf(child) : 'body';
         if (bucket === 'header')
             headers.push(child);
@@ -32,7 +33,7 @@ export function KptCard({ variant = 'elevated', header, headingLevel, flush = fa
             footers.push(child);
         else
             body.push(child);
-    });
+    }
     return (_jsxs("div", { className: cn('kpt-card', className), "data-variant": variant, ...rest, children: [header ? (_jsx("div", { className: "kpt-card__header", role: headingLevel ? 'heading' : undefined, "aria-level": headingLevel, children: header })) : null, headers, _jsx("div", { className: cn('kpt-card__body', flush && 'kpt-card__body--flush'), children: body }), footers] }));
 }
 function slotOf(child) {

package/dist/carousel/carousel.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -19,11 +20,13 @@ import { KptIcon } from "../icon/icon.js";
  */
 export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
-    const [active, setActive] = useControllableState({
+    const [requested, setActive] = useControllableState({
         value: activeIndex,
         defaultValue: defaultActiveIndex,
         onChange: onActiveIndexChange,
     });
+    // Indeks przycięty do listy: po skróceniu `items` (filtr) widok nie zostaje pusty.
+    const active = Math.min(Math.max(requested, 0), Math.max(items.length - 1, 0));
     const goTo = (index) => setActive(Math.min(Math.max(index, 0), items.length - 1));
     const atStart = active <= 0;
     const atEnd = active >= items.length - 1;

package/dist/charts/chart-legend.js

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

package/dist/charts/chart.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type KptChartConfig } from '@konce-pt/chart';
-export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     config: KptChartConfig;
     /** Szerokość viewBoxa w jednostkach SVG; wykres skaluje się do kontenera. */
     width?: number;
@@ -15,4 +16,4 @@ export interface KptChartProps extends Omit<ComponentPropsWithRef<'div'>, 'child
  * @example
  * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
  */
-export declare function KptChart({ config, width, height, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;
+export declare function KptChart({ config, width, height, locale, dictionary, className, style, ...rest }: Readonly<KptChartProps>): import("react").JSX.Element;

package/dist/charts/chart.js

@@ -1,7 +1,9 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { areaPath, bandScale, barLayout, extent, formatNumber, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, seriesColor, } from '@konce-pt/chart';
+import { useId, useState } from 'react';
+import { areaPath, bandScale, barLayout, chartAccessibleName, chartDataTable, extent, formatNumber, linePath, linearScale, niceScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, seriesColor, } from '@konce-pt/chart';
 import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptChartLegend } from "./chart-legend.js";
 import { KptChartTooltip } from "./chart-tooltip.js";
 const VERTICAL_INSETS = { top: 12, right: 16, bottom: 28, left: 46 };
@@ -21,7 +23,13 @@ function styleFor(align) {
  * @example
  * <KptChart config={{ type: 'line', labels: ['Sty', 'Lut'], series: [{ name: 'Sprzedaż', data: [12, 19] }] }} />
  */
-export function KptChart({ config, width = 600, height = 360, className, style, ...rest }) {
+export function KptChart({ config, width = 600, height = 360, locale, dictionary, className, style, ...rest }) {
+    const { t, locale: activeLocale } = useKptMessages({ locale, dictionary });
+    const descId = `${useId()}-desc`;
+    // Alternatywa tekstowa (WCAG 1.1.1): nazwa SVG (`ariaLabel` → tytuł → i18n) i dane w ukrytej
+    // wizualnie tabeli — dymek na najechanie jest dostępny tylko myszą.
+    const accessibleName = chartAccessibleName(config, t('chart.label'));
+    const dataTable = chartDataTable(config, activeLocale);
     const [hidden, setHidden] = useState(new Set());
     const [highlighted, setHighlighted] = useState(null);
     const [tooltip, setTooltip] = useState(null);
@@ -227,5 +235,5 @@ export function KptChart({ config, width = 600, height = 360, className, style,
                         fontWeight: config.subtitle.font?.weight,
                         paddingTop: config.subtitle.padding?.top,
                         paddingBottom: config.subtitle.padding?.bottom,
-                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", preserveAspectRatio: "xMidYMid meet", children: [lineVm, barVm, radarVm, pieVm] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
+                    }, children: config.subtitle.text })) : null, _jsxs("div", { className: "kpt-chart__body", children: [_jsxs("div", { className: "kpt-chart__canvas", children: [_jsxs("svg", { className: "kpt-chart__svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": accessibleName, "aria-describedby": config.description ? descId : undefined, preserveAspectRatio: "xMidYMid meet", children: [lineVm, barVm, radarVm, pieVm] }), config.description ? (_jsx("p", { className: "kpt-chart__sr", id: descId, children: config.description })) : null, _jsxs("table", { className: "kpt-chart__sr", children: [_jsxs("caption", { children: [t('chart.dataTable'), ": ", accessibleName] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: t('chart.category') }), dataTable.columns.map((col, i) => (_jsx("th", { scope: "col", children: col }, i)))] }) }), _jsx("tbody", { children: dataTable.rows.map((row, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), row.values.map((value, j) => (_jsx("td", { children: value }, j)))] }, i))) })] }), _jsx(KptChartTooltip, { state: tooltip })] }), legendOpts.display ? (_jsx(KptChartLegend, { items: legendItems, position: legendOpts.position, align: legendOpts.align, pointStyle: legendOpts.pointStyle, title: legendOpts.title, onToggle: toggle, onHighlight: setHighlighted })) : null] })] }) }));
 }

package/dist/charts/llms.txt

@@ -19,7 +19,7 @@ proportionally (`width={300} height={180}`) instead of letting a 600-unit chart
 
 ## The config is the API
 `{ type, labels, series, points?, area?, interpolation?, orientation?, borderRadius?, innerRadius?,
-crosshair?, tooltip?, legend?, title?, subtitle?, animation? }` — the same shape the Angular port
+crosshair?, tooltip?, legend?, title?, subtitle?, animation?, ariaLabel?, description? }` — the same shape the Angular port
 takes, because both read it from `@konce-pt/chart`.
 
 ## The geometry lives in a package
@@ -53,5 +53,8 @@ stays a plain object the caller owns, and nothing is written back into it.
 `KPT_CHART_PALETTE` or `series.color`.
 
 ## Accessibility
-The `<svg>` carries `role="img"`; the legend is a list of real buttons, so series can be toggled
-from the keyboard.
+The `<svg>` is `role="img"` with a name: `config.ariaLabel`, else the title text, else `chart.label`
+from i18n. `config.description` (one sentence with the takeaway) is tied to it through
+`aria-describedby`. The data itself sits in a visually hidden `<table>` (categories in rows, series in
+columns, numbers in the active language), so a screen reader can walk the values — the tooltip is
+pointer-only. The legend is a list of real buttons, so series can be toggled from the keyboard.

package/dist/chat/chat.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from 'react';
 import { KPT_CHAT_GROUP_GAP_MS, KPT_CHAT_REACTIONS, buildChatRows, chatDayIndicator, pendingCount } from '@konce-pt/chat';
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -77,22 +78,42 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         const reduced = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
         element.scrollTo({ top: element.scrollHeight, behavior: behavior ?? (reduced ? 'auto' : 'smooth') });
     };
+    const firstIdRef = useRef(null);
+    const prevScrollHeight = useRef(0);
+    const dayFrame = useRef(0);
+    // Wartości czytane w efekcie listy, ale nieuruchamiające go — przez zdarzenia efektu.
+    const autoScrollOnNew = useEffectEvent(() => autoScroll);
+    const pinnedNow = useEffectEvent(() => pinned);
+    const bumpNewCount = useEffectEvent((added) => setNewCount((value) => value + added));
     // Dosunięcie liczone po ułożeniu, nie po malowaniu — inaczej widać skok listy.
     useLayoutEffect(() => {
         if (!viewportRef.current)
             return;
+        const element = viewportRef.current;
         const count = messages.length;
-        const grew = count > lastCount.current;
+        const added = count - lastCount.current;
         const first = lastCount.current === 0;
+        const firstId = messages[0]?.id ?? null;
+        // Starsze wiadomości doklejone na górze (`onLoadMore`) — nie są nowe, a widok ma zostać w miejscu.
+        const prepended = !first && added > 0 && firstId !== firstIdRef.current;
         lastCount.current = count;
-        if (!grew)
+        firstIdRef.current = firstId;
+        if (prepended) {
+            // Przeglądarki z `overflow-anchor` kotwiczą same; Safari go nie ma i bez tego lista skacze.
+            if (!globalThis.CSS?.supports('overflow-anchor', 'auto'))
+                element.scrollTop += element.scrollHeight - prevScrollHeight.current;
+            prevScrollHeight.current = element.scrollHeight;
+            return;
+        }
+        prevScrollHeight.current = element.scrollHeight;
+        if (added <= 0)
             return;
         // Pierwsze wejście zawsze ląduje na dole — rozmowę czyta się od końca.
-        if (first || (autoScroll && pinned))
+        if (first || (autoScrollOnNew() && pinnedNow()))
             scrollToBottom(first ? 'auto' : undefined);
+        // Tyle, ile naprawdę przyszło — paczka pięciu wiadomości to „5 nowych”, nie „1”.
         else
-            setNewCount((value) => value + 1);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+            bumpNewCount(added);
     }, [messages]);
     // Po każdej zmianie listy wiersze stoją gdzie indziej — pigułkę trzeba przeliczyć, inaczej
     // pokazywałaby dzień sprzed dojścia nowej wiadomości.
@@ -120,7 +141,13 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
         if (atTop && !wasAtTop.current)
             onLoadMore?.();
         wasAtTop.current = atTop;
-        syncDay();
+        // Pomiary pigułki raz na klatkę, nie przy każdym zdarzeniu `scroll` (wymuszony układ).
+        if (dayFrame.current)
+            return;
+        dayFrame.current = requestAnimationFrame(() => {
+            dayFrame.current = 0;
+            syncDay();
+        });
     };
     const jumpToLatest = () => {
         setPinned(true);
@@ -147,7 +174,10 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
                 }).format(label.date);
         }
     };
-    return (_jsxs("div", { className: cn('kpt-chat-host', className), ...rest, children: [offline ? (_jsxs("p", { className: "kpt-chat__offline", role: "status", children: [_jsx(KptIcon, { name: "alert-triangle" }), _jsx("span", { children: t('chat.offline') }), pending ? (_jsx("span", { className: "kpt-chat__offline-count", children: t('chat.pending', { count: pending }) })) : null] })) : null, _jsxs("div", { className: "kpt-chat__body", children: [_jsxs("div", { ref: viewportRef, className: "kpt-chat__viewport", role: "log", "aria-live": "polite", "aria-relevant": "additions", onScroll: (event) => onScroll(event.currentTarget), children: [rows.length === 0 ? (_jsx("p", { className: "kpt-chat__empty", children: emptyLabel || t('chat.empty') })) : null, rows.map((row) => {
+    return (_jsxs("div", { className: cn('kpt-chat-host', className), ...rest, children: [offline ? (_jsxs("p", { className: "kpt-chat__offline", role: "status", children: [_jsx(KptIcon, { name: "alert-triangle" }), _jsx("span", { children: t('chat.offline') }), pending ? (_jsx("span", { className: "kpt-chat__offline-count", children: t('chat.pending', { count: pending }) })) : null] })) : null, _jsxs("div", { className: "kpt-chat__body", children: [_jsxs("div", { ref: viewportRef, className: "kpt-chat__viewport", role: "log", "aria-live": "polite", "aria-relevant": "additions", 
+                        // Przewijana historia musi być osiągalna z klawiatury także bez fokusowalnych bąbli.
+                        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- przewijany region musi być osiągalny z klawiatury (WCAG 2.1.1) — role="log" nie jest interaktywna, przewijanie tak
+                        tabIndex: 0, "aria-label": t('chat.history'), onScroll: (event) => onScroll(event.currentTarget), children: [rows.length === 0 ? (_jsx("p", { className: "kpt-chat__empty", children: emptyLabel || t('chat.empty') })) : null, rows.map((row) => {
                                 if (row.kind === 'date') {
                                     const label = dateText(row.label);
                                     return (_jsx("p", { className: "kpt-chat__date", role: "separator", "aria-label": label, children: label }, row.key));
@@ -156,5 +186,5 @@ export function KptChat({ messages = [], currentUser = '', groupGapMs = KPT_CHAT
                                     return (_jsx("p", { className: "kpt-chat__unread", role: "separator", "aria-label": t('chat.newMessages', { count: row.count }), children: _jsx("span", { children: t('chat.unread') }) }, row.key));
                                 }
                                 return (_jsx(KptChatMessage, { message: row.message, text: renderMessage ? '' : null, align: row.own ? 'end' : 'start', position: row.position, showAuthor: row.showAuthor, showAvatar: row.showAvatar, showMeta: row.showMeta, actions: actions, reactionOptions: reactionOptions, locale: locale, dictionary: dictionary, onRetry: () => onRetry?.(row.message), onReply: () => onReply?.(row.message), onReact: (emoji) => onReact?.({ message: row.message, emoji }), onQuoted: (quote) => onQuoted?.(quote), children: renderMessage ? renderMessage(row.message, row) : null }, row.key));
-                            }), typing.length ? _jsx(KptChatTyping, { authors: typing, locale: locale, dictionary: dictionary }) : null] }), _jsx("p", { ref: dayRef, className: "kpt-chat__day", "aria-hidden": "true", "data-hidden": dayVisible ? undefined : '', children: dayLabel }), newCount ? (_jsxs("button", { type: "button", className: "kpt-chat__jump", onClick: jumpToLatest, children: [_jsx(KptIcon, { name: "arrow-down" }), t('chat.newMessages', { count: newCount })] })) : null] })] }));
+                            }), typing.length ? (_jsx("div", { "aria-live": "off", children: _jsx(KptChatTyping, { authors: typing, locale: locale, dictionary: dictionary }) })) : null] }), _jsx("p", { ref: dayRef, className: "kpt-chat__day", "aria-hidden": "true", "data-hidden": dayVisible ? undefined : '', children: dayLabel }), newCount ? (_jsxs("button", { type: "button", className: "kpt-chat__jump", onClick: jumpToLatest, children: [_jsx(KptIcon, { name: "arrow-down" }), t('chat.newMessages', { count: newCount })] })) : null] })] }));
 }

package/dist/chat/llms.txt

@@ -76,3 +76,12 @@ pill `--kpt-color-primary-border` + `--kpt-elevation-2`.
 `role="log"` with `aria-live="polite"` announces a new message without cutting off what is being
 read. Separators are `role="separator"` with a label. Auto-scroll uses `behavior: 'auto'` under
 `prefers-reduced-motion`.
+
+## Keyboard, counters and history
+The scrolling history (`role="log"`) is a Tab stop named "Conversation history" (`chat.history`), so the
+keyboard can scroll it even when no bubble holds a focusable element. The "new messages" button counts
+the messages that actually arrived (a batch of five gives "5"). The typing indicator sits inside the log
+but with `aria-live="off"`, so "X is typing…" is not announced like a message. Older messages loaded at
+the top keep the view on the same message, also in Safari (no `overflow-anchor`). The composer reports
+typing on the first keystroke and then at most every 3 s (`KPT_CHAT_TYPING_THROTTLE_MS`). A custom
+reaction option may carry `label` — its accessible name.

package/dist/chat-composer/chat-composer.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef } from 'react';
-import type { KptChatReplyRef } from '@konce-pt/chat';
+import { type KptChatReplyRef } from '@konce-pt/chat';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 /** Ładunek wysyłki. Kompozytor niczego nie wysyła — pakuje dane i oddaje aplikacji. */
 export interface KptChatComposerSubmit {
@@ -25,7 +25,10 @@ export interface KptChatComposerProps extends Omit<ComponentPropsWithRef<'div'>,
     defaultReplyTo?: KptChatReplyRef | null;
     onReplyToChange?: (replyTo: KptChatReplyRef | null) => void;
     onSend?: (payload: KptChatComposerSubmit) => void;
-    /** Uderzenie w klawiaturę — sygnał „piszę" dla drugiej strony. */
+    /**
+     * Sygnał „piszę” dla drugiej strony: przy pierwszym znaku, a w trakcie pisania najwyżej raz na
+     * `KPT_CHAT_TYPING_THROTTLE_MS` (3 s) — nie przy każdym znaku.
+     */
     onTyping?: () => void;
 }
 /**

package/dist/chat-composer/chat-composer.js

@@ -1,5 +1,7 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, } from 'react';
+import { KPT_CHAT_TYPING_THROTTLE_MS } from '@konce-pt/chat';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -30,6 +32,8 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
     const [files, setFiles] = useState([]);
     const fieldRef = useRef(null);
     const pickerRef = useRef(null);
+    /** Kiedy ostatnio zgłoszono „piszę” — dławienie `onTyping`. */
+    const lastTyping = useRef(0);
     const canSend = !disabled && (text.trim().length > 0 || files.length > 0);
     const sendLabel = offline ? t('chat.queue') : t('chat.send');
     /**
@@ -76,6 +80,11 @@ export function KptChatComposer({ value, defaultValue = '', onValueChange, place
                                 } }), _jsx(KptIconButton, { size: "sm", disabled: disabled, "aria-label": t('chat.attach'), onClick: () => pickerRef.current?.click(), children: _jsx(KptIcon, { name: "paperclip" }) })] })) : null, _jsx("textarea", { ref: fieldRef, className: "kpt-chat-composer__field", rows: 1, style: { '--_max-rows': maxRows }, value: text, disabled: disabled, placeholder: placeholder || t('chat.placeholder'), "aria-label": placeholder || t('chat.placeholder'), onChange: (event) => {
                             setText(event.currentTarget.value);
                             grow(event.currentTarget);
-                            onTyping?.();
+                            // „Piszę” przy pierwszym znaku i potem najwyżej raz na KPT_CHAT_TYPING_THROTTLE_MS — nie przy każdym.
+                            const now = Date.now();
+                            if (now - lastTyping.current >= KPT_CHAT_TYPING_THROTTLE_MS) {
+                                lastTyping.current = now;
+                                onTyping?.();
+                            }
                         }, onKeyDown: onKeyDown }), _jsx(KptIconButton, { variant: "filled", disabled: !canSend, "aria-label": sendLabel, onClick: submit, children: _jsx(KptIcon, { name: offline ? 'clock' : 'send' }) })] })] }));
 }

package/dist/chat-dock/chat-dock.js

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

package/dist/chat-message/chat-message.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { KPT_CHAT_REACTIONS, canRetry, toDate } from '@konce-pt/chat';
@@ -94,7 +95,7 @@ export function KptChatMessage({ message = null, author = null, text = null, tim
                                     if (!event.currentTarget.contains(event.relatedTarget))
                                         setPickerOpen(false);
                                 }, children: [_jsx(KptIconButton, { size: "sm", "aria-label": t('chat.react'), "aria-expanded": pickerOpen, onClick: () => setPickerOpen((open) => !open), children: _jsx(KptIcon, { name: "mood-smile" }) }), pickerOpen ? (_jsx("span", { className: "kpt-chat-message__picker", role: "group", "aria-label": t('chat.react'), children: reactionOptions.map((option) => {
-                                            const label = t('chat.react' + option.kind[0].toUpperCase() + option.kind.slice(1));
+                                            const label = option.label ?? t('chat.react' + option.kind[0].toUpperCase() + option.kind.slice(1));
                                             const reacted = resolvedReactions.some((item) => item.emoji === option.emoji && item.reacted);
                                             return (_jsx("button", { type: "button", className: "kpt-chat-message__pick", "aria-label": label, title: label, "aria-pressed": reacted, onClick: () => {
                                                     onReact?.(option.emoji);

package/dist/chat-typing/chat-typing.js

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

package/dist/checkbox/checkbox.d.ts

@@ -35,4 +35,4 @@ export interface KptCheckboxProps extends Omit<ComponentPropsWithRef<'input'>, '
  * <KptCheckbox name="terms" label="Akceptuję regulamin" />
  * <KptCheckbox checked={on} onCheckedChange={setOn} />
  */
-export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate, ref, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;
+export declare function KptCheckbox({ label, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, readOnly, onClick, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate, ref, ...rest }: Readonly<KptCheckboxProps>): import("react").JSX.Element;

package/dist/checkbox/checkbox.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { composeRefs } from "../internal/compose-refs.js";
@@ -16,7 +17,7 @@ import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptCheckbox name="terms" label="Akceptuję regulamin" />
  * <KptCheckbox checked={on} onCheckedChange={setOn} />
  */
-export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate = false, ref, ...rest }) {
+export function KptCheckbox({ label = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, readOnly = false, onClick, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, indeterminate = false, ref, ...rest }) {
     const inputRef = useRef(null);
     useEffect(() => {
         if (inputRef.current)
@@ -33,5 +34,11 @@ export function KptCheckbox({ label = '', required = false, invalid = false, tou
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", ref: composeRefs(inputRef, ref), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsxs("span", { className: "kpt-checkbox__box", "aria-hidden": "true", children: [_jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5" }) }), _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__dash", children: _jsx("path", { d: "M4 8h8" }) })] }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
+    return (_jsx("span", { className: cn('kpt-checkbox-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-checkbox', disabled && 'kpt-checkbox--disabled', className), children: [_jsx("input", { type: "checkbox", className: "kpt-checkbox__input", ref: composeRefs(inputRef, ref), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), disabled: disabled, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, 
+                    // Natywne `readonly` nie działa na polach wyboru — klik (i Spacja) jest blokowany ręcznie.
+                    onClick: (event) => {
+                        if (readOnly)
+                            event.preventDefault();
+                        onClick?.(event);
+                    }, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsxs("span", { className: "kpt-checkbox__box", "aria-hidden": "true", children: [_jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__check", children: _jsx("path", { d: "M13 4.5 6.5 11 3 7.5" }) }), _jsx("svg", { viewBox: "0 0 16 16", className: "kpt-checkbox__dash", children: _jsx("path", { d: "M4 8h8" }) })] }), label ? _jsx("span", { className: "kpt-checkbox__label", children: label }) : null, children] }) }));
 }

package/dist/checkbox/llms.txt

@@ -48,3 +48,6 @@ Inside `kpt-form-field` the box gets both names: the wrapper label and its own `
 A native `<input type="checkbox">` inside a `<label>` — the label is the accessible name and the
 whole row is clickable. The box and the tick are `aria-hidden`, being pure decoration over the real
 control.
+
+## Read-only and required
+`readOnly` keeps the box focusable but blocks the click and Space (`aria-readonly`) — the native attribute does not work on checkboxes.

package/dist/chip/chip.js

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

package/dist/chips-input/chips-input.d.ts

@@ -14,6 +14,8 @@ export interface KptChipsInputProps extends Omit<ComponentPropsWithRef<'div'>, '
     /** Oznacza pole jako wymagane atrybutem `aria-required`. */
     required?: boolean;
     disabled?: boolean;
+    /** Tylko do odczytu — tagi widać, nie da się ich dodać ani usunąć. */
+    readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
@@ -28,4 +30,4 @@ export interface KptChipsInputProps extends Omit<ComponentPropsWithRef<'div'>, '
  * @example
  * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
  */
-export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, id, ariaLabel, required, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;
+export declare function KptChipsInput({ value, defaultValue, onValueChange, placeholder, allowDuplicates, id, ariaLabel, required, disabled, readOnly, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptChipsInputProps>): import("react").JSX.Element;

package/dist/chips-input/chips-input.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -15,7 +16,7 @@ import { useKptFieldA11y } from "../form-field/form-field-context.js";
  * @example
  * <KptChipsInput value={tags} onValueChange={setTags} placeholder="Dodaj tag…" />
  */
-export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, id, ariaLabel = null, required = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptChipsInput({ value, defaultValue = [], onValueChange, placeholder, allowDuplicates = false, id, ariaLabel = null, required = false, disabled = false, readOnly = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-chips-input');
     const inputRef = useRef(null);
@@ -26,10 +27,15 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
     });
     const showInvalid = invalid && (touched ?? true);
     /** Komunikat regionu `polite`: dodanie, usunięcie albo odrzucony duplikat. */
-    const [announcement, setAnnouncement] = useState('');
+    const [announcement, setAnnouncementState] = useState('');
+    /**
+     * Ten sam komunikat dwa razy z rzędu (drugi odrzucony duplikat) nie zmieniłby treści regionu
+     * i czytnik by go nie ogłosił — doklejamy niewidoczną spację, żeby tekst się różnił.
+     */
+    const setAnnouncement = (message) => setAnnouncementState((current) => (current === message ? `${message}\u00A0` : message));
     const commit = (el) => {
         const text = el.value.trim();
-        if (!text)
+        if (!text || readOnly)
             return;
         if (!allowDuplicates && chips.includes(text)) {
             // Duplikat zostaje w polu (do poprawy), a czytnik słyszy, dlaczego nic nie przybyło.
@@ -49,6 +55,9 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
     };
     const onKeyDown = (event) => {
         const el = event.currentTarget;
+        // W trakcie kompozycji IME (CJK) Enter zatwierdza znak, nie tag.
+        if (readOnly || event.nativeEvent.isComposing)
+            return;
         if (event.key === 'Enter' || event.key === ',') {
             event.preventDefault();
             commit(el);
@@ -62,9 +71,9 @@ export function KptChipsInput({ value, defaultValue = [], onValueChange, placeho
         commit(event.currentTarget);
         onTouch?.();
     };
-    return (_jsx("div", { className: cn('kpt-chips-input-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [_jsx("span", { className: "kpt-chips-input__list", role: "list", children: chips.map((chip, index) => (_jsx("span", { className: "kpt-chips-input__item", role: "listitem", children: _jsx(KptChip, { variant: "primary", removable: !disabled, onRemove: () => {
+    return (_jsx("div", { className: cn('kpt-chips-input-host', className), ...rest, children: _jsxs("div", { className: cn('kpt-chips-input', disabled && 'kpt-chips-input--disabled', showInvalid && 'kpt-chips-input--invalid'), children: [_jsx("span", { className: "kpt-chips-input__list", role: "list", children: chips.map((chip, index) => (_jsx("span", { className: "kpt-chips-input__item", role: "listitem", children: _jsx(KptChip, { variant: "primary", removable: !disabled && !readOnly, onRemove: () => {
                                 removeAt(index);
                                 // Przycisk usuwania znika razem z tagiem — fokus wraca do pola, nie na <body>.
                                 inputRef.current?.focus();
-                            }, children: chip }) }, index))) }), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur }), _jsx("span", { className: "kpt-chips-input__live", "aria-live": "polite", children: announcement })] }) }));
+                            }, children: chip }) }, index))) }), _jsx("input", { ref: inputRef, className: "kpt-chips-input__field", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-describedby": field.describedBy, type: "text", placeholder: chips.length ? '' : (placeholder ?? t('chipsInput.placeholder')), disabled: disabled, readOnly: readOnly, onKeyDown: onKeyDown, onBlur: onBlur }), _jsx("span", { className: "kpt-chips-input__live", "aria-live": "polite", children: announcement })] }) }));
 }

package/dist/chips-input/llms.txt

@@ -50,3 +50,6 @@ New: `id`, `ariaLabel`, `required` and `aria-invalid` on the text field.
 ## Accessibility
 Each chip is a `KptChip` with a labelled remove button, and the field itself is a native input, so
 tags are reachable and removable from the keyboard alone.
+
+## Read-only and required
+`readOnly` shows the tags without the remove buttons and ignores Enter, comma and Backspace. Enter during IME composition (CJK) confirms the character, not a tag. A repeated message (a second rejected duplicate) is announced again.