@konce-pt/react 0.9.0 → 0.10.0

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

@@ -2,8 +2,10 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 import type { KptMenuItem } from '../menu/menu-item.ts';
 import type { KptButtonVariant } from '../button/button.tsx';
+/** Warianty, które mają styl — podzbiór `KptButtonVariant`. */
+export type KptSplitButtonVariant = Extract<KptButtonVariant, 'filled' | 'tonal' | 'outline' | 'text'>;
 export interface KptSplitButtonProps<T> extends Omit<ComponentPropsWithRef<'span'>, 'onSelect'>, KptI18nOverrides {
-    variant?: KptButtonVariant;
+    variant?: KptSplitButtonVariant;
     items?: readonly KptMenuItem<T>[];
     disabled?: boolean;
     /** Kliknięcie akcji głównej. */

package/dist/split-button/split-button.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptId } from "../internal/use-id.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 import { MenuRows } from "../menu/menu-rows.js";
+import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 /**
  * Przycisk dzielony — akcja główna plus rozwijane menu dodatkowych akcji.
  *
@@ -18,17 +20,55 @@ import { MenuRows } from "../menu/menu-rows.js";
 export function KptSplitButton({ variant = 'filled', items = [], disabled = false, onPrimaryClick, onSelect, open, defaultOpen = false, onOpenChange, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const toggleRef = useRef(null);
+    const panelRef = useRef(null);
+    /** Którą pozycję skupić po otwarciu — strzałka w górę na przycisku otwiera „od końca”. */
+    const focusEdge = useRef('first');
+    const panelId = useKptId(undefined, 'kpt-split-button-menu');
     const [isOpen, setOpen] = useControllableState({
         value: open,
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
     const close = useCallback(() => setOpen(false), [setOpen]);
+    // Po otwarciu fokus na pierwszą (albo ostatnią) pozycję. Klatkę później: `KptOverlay` trzyma
+    // panel w `visibility: hidden`, dopóki go nie zmierzy, a niewidocznego elementu nie da się skupić.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const frame = requestAnimationFrame(() => {
+            if (panelRef.current)
+                focusMenuEdge(panelRef.current, focusEdge.current);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen]);
+    /** Fokus wraca na strzałkę — inaczej po zniknięciu panelu spadłby na `<body>`. */
+    const closeAndRestoreFocus = () => {
+        close();
+        toggleRef.current?.focus();
+    };
+    const onToggleKeyDown = (event) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        focusEdge.current = event.key === 'ArrowUp' ? 'last' : 'first';
+        if (isOpen && panelRef.current)
+            focusMenuEdge(panelRef.current, focusEdge.current);
+        else
+            setOpen(true);
+    };
+    const onPanelKeyDown = (event) => {
+        if (panelRef.current && handleMenuKeydown(panelRef.current, event.nativeEvent) === 'close') {
+            closeAndRestoreFocus();
+        }
+    };
     const pick = (item) => {
         if (item.disabled)
             return;
         onSelect?.(item);
-        close();
+        closeAndRestoreFocus();
     };
-    return (_jsxs("span", { className: cn('kpt-split-button-host', className), ...rest, children: [_jsxs("div", { className: "kpt-split-button", "data-variant": variant, children: [_jsx("button", { className: "kpt-split-button__main", type: "button", disabled: disabled, onClick: onPrimaryClick, children: children }), _jsx("button", { ref: toggleRef, className: "kpt-split-button__toggle", type: "button", disabled: disabled, onClick: () => setOpen(!isOpen), "aria-label": t('splitButton.more'), children: _jsx(KptIcon, { name: "chevron-down" }) })] }), _jsx(KptOverlay, { open: isOpen, anchor: toggleRef.current, onClose: close, align: "end", children: _jsx("div", { className: "kpt-split-button__panel", role: "menu", children: _jsx(MenuRows, { items: items, block: "kpt-split-button", onPick: pick }) }) })] }));
+    return (_jsxs("span", { className: cn('kpt-split-button-host', className), ...rest, children: [_jsxs("div", { className: "kpt-split-button", "data-variant": variant, children: [_jsx("button", { className: "kpt-split-button__main", type: "button", disabled: disabled, onClick: onPrimaryClick, children: children }), _jsx("button", { ref: toggleRef, className: "kpt-split-button__toggle", type: "button", disabled: disabled, onClick: () => {
+                            focusEdge.current = 'first';
+                            setOpen(!isOpen);
+                        }, onKeyDown: onToggleKeyDown, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, "aria-label": t('splitButton.more'), children: _jsx(KptIcon, { name: "chevron-down" }) })] }), _jsx(KptOverlay, { open: isOpen, anchor: toggleRef.current, onClose: close, align: "end", children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-split-button__panel", role: "menu", onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-split-button", onPick: pick }) }) })] }));
 }

package/dist/splitter/llms.txt

@@ -6,8 +6,10 @@ Import: `import { KptSplitter } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-splitter-host">
       <div class="kpt-splitter" data-orientation="horizontal">
-        <div class="kpt-splitter__pane" style="flex-basis:40%">…</div>
-        <div class="kpt-splitter__gutter" role="separator" tabindex="0" aria-valuenow="40"></div>
+        <div class="kpt-splitter__pane" id="kpt-splitter-start-r1" style="flex-basis:40%">…</div>
+        <div class="kpt-splitter__gutter" role="separator" tabindex="0" aria-orientation="vertical"
+             aria-valuenow="40" aria-valuemin="10" aria-valuemax="90"
+             aria-controls="kpt-splitter-start-r1" aria-label="Resize panes"></div>
         <div class="kpt-splitter__pane" style="flex-basis:60%">…</div>
       </div>
     </div>
@@ -16,6 +18,10 @@ Import: `import { KptSplitter } from '@konce-pt/react';`
 - `orientation`: `'horizontal'` (default) | `'vertical'`
 - `startSize` / `defaultStartSize` / `onStartSizeChange` — the first pane's size in percent
 - `minSize`: number (percent, default 10) — neither pane goes below it
+- `ariaLabel`: string — the handle's name; empty = `splitter.resize` from the dictionary
+- `ariaLabel`: string — the handle's name; empty = `splitter.resize` from the dictionary
+- `ariaLabel`: string — the handle's name; empty = `splitter.resize` from the dictionary
+- `ariaLabel`: string — the handle's name; empty = `splitter.resize` from the dictionary
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Panes
@@ -40,5 +46,9 @@ The handle `--kpt-color-border` → `--kpt-color-primary` on hover and focus; th
 `--kpt-color-border` with `--kpt-radius-md`.
 
 ## Accessibility
-The handle is `role="separator"` with `aria-orientation` and `aria-valuenow`, reachable with Tab;
-the arrow keys resize by 2% a press, clamped by `minSize`.
+The handle is a focusable `role="separator"` (the WAI-ARIA window splitter): `aria-valuenow`,
+`aria-valuemin`/`aria-valuemax` (from `minSize`), `aria-controls` pointing at the first pane, and a
+name from `ariaLabel` or `splitter.resize` in the dictionary. Arrow keys resize by 2%, `Home`/`End`
+jump to the minimum/maximum. `aria-orientation` describes the handle's line, not the layout —
+side-by-side panes have a vertical handle. The host takes `height: 100%`, so a height set on the
+parent reaches the panes.

package/dist/splitter/splitter.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export type KptSplitterOrientation = 'horizontal' | 'vertical';
 export interface KptSplitterPaneProps {
     children?: ReactNode;
@@ -12,7 +13,7 @@ export declare function KptSplitterEnd(_props: Readonly<KptSplitterPaneProps>):
 export declare namespace KptSplitterEnd {
     var kptSplitterSlot: "end";
 }
-export interface KptSplitterProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+export interface KptSplitterProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
     orientation?: KptSplitterOrientation;
     /** Rozmiar pierwszego panelu w procentach (0–100). */
     startSize?: number;
@@ -20,19 +21,25 @@ export interface KptSplitterProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     onStartSizeChange?: (size: number) => void;
     /** Minimalny rozmiar panelu w procentach. */
     minSize?: number;
+    /** Nazwa uchwytu dla czytników ekranu; domyślnie `splitter.resize` ze słownika. */
+    ariaLabel?: string;
     children?: ReactNode;
 }
 /**
  * Dwa panele z przeciąganym uchwytem. `horizontal` stawia je obok siebie, `vertical` jeden pod
  * drugim.
  *
+ * Uchwyt to `role="separator"` z wartością (wzorzec WAI-ARIA „window splitter”): strzałki
+ * przesuwają go o 2%, `Home`/`End` dosuwają do minimum i maksimum. `aria-orientation` opisuje
+ * linię uchwytu, nie układ — przy panelach obok siebie linia jest pionowa.
+ *
  * @example
  * <KptSplitter startSize={size} onStartSizeChange={setSize}>
  *   <KptSplitter.Start>Lewy</KptSplitter.Start>
  *   <KptSplitter.End>Prawy</KptSplitter.End>
  * </KptSplitter>
  */
-export declare function KptSplitter({ orientation, startSize, defaultStartSize, onStartSizeChange, minSize, className, children, ...rest }: Readonly<KptSplitterProps>): import("react").JSX.Element;
+export declare function KptSplitter({ orientation, startSize, defaultStartSize, onStartSizeChange, minSize, ariaLabel, locale, dictionary, className, children, ...rest }: Readonly<KptSplitterProps>): import("react").JSX.Element;
 export declare namespace KptSplitter {
     var Start: typeof KptSplitterStart;
     var End: typeof KptSplitterEnd;

package/dist/splitter/splitter.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, useRef, } from 'react';
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptId } from "../internal/use-id.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
 /** Panel splittera. Umieszczaj jako `<KptSplitter.Start>` i `<KptSplitter.End>`. */
 export function KptSplitterStart(_props) {
     // Panel jest nośnikiem treści: `KptSplitter` czyta jego dzieci i sam opakowuje je w `__pane`,
@@ -17,14 +19,20 @@ KptSplitterEnd.kptSplitterSlot = 'end';
  * Dwa panele z przeciąganym uchwytem. `horizontal` stawia je obok siebie, `vertical` jeden pod
  * drugim.
  *
+ * Uchwyt to `role="separator"` z wartością (wzorzec WAI-ARIA „window splitter”): strzałki
+ * przesuwają go o 2%, `Home`/`End` dosuwają do minimum i maksimum. `aria-orientation` opisuje
+ * linię uchwytu, nie układ — przy panelach obok siebie linia jest pionowa.
+ *
  * @example
  * <KptSplitter startSize={size} onStartSizeChange={setSize}>
  *   <KptSplitter.Start>Lewy</KptSplitter.Start>
  *   <KptSplitter.End>Prawy</KptSplitter.End>
  * </KptSplitter>
  */
-export function KptSplitter({ orientation = 'horizontal', startSize, defaultStartSize = 50, onStartSizeChange, minSize = 10, className, children, ...rest }) {
+export function KptSplitter({ orientation = 'horizontal', startSize, defaultStartSize = 50, onStartSizeChange, minSize = 10, ariaLabel, locale, dictionary, className, children, ...rest }) {
     const containerRef = useRef(null);
+    const { t } = useKptMessages({ locale, dictionary });
+    const startId = useKptId(undefined, 'kpt-splitter-start');
     const [size, setSize] = useControllableState({
         value: startSize,
         defaultValue: defaultStartSize,
@@ -64,6 +72,11 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
         window.addEventListener('pointerup', up);
     };
     const onKeyDown = (event) => {
+        if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            setSize(clamp(event.key === 'Home' ? 0 : 100));
+            return;
+        }
         const dir = event.key === 'ArrowLeft' || event.key === 'ArrowUp'
             ? -2
             : event.key === 'ArrowRight' || event.key === 'ArrowDown'
@@ -74,7 +87,7 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
         event.preventDefault();
         setSize(clamp(size + dir));
     };
-    return (_jsx("div", { className: cn('kpt-splitter-host', className), ...rest, children: _jsxs("div", { ref: containerRef, className: "kpt-splitter", "data-orientation": orientation, children: [_jsx("div", { className: "kpt-splitter__pane", style: { flexBasis: `${size}%` }, children: start }), _jsx("div", { className: "kpt-splitter__gutter", role: "separator", tabIndex: 0, "aria-orientation": orientation, "aria-valuenow": size, onPointerDown: onPointerDown, onKeyDown: onKeyDown }), _jsx("div", { className: "kpt-splitter__pane", style: { flexBasis: `${100 - size}%` }, children: end })] }) }));
+    return (_jsx("div", { className: cn('kpt-splitter-host', className), ...rest, children: _jsxs("div", { ref: containerRef, className: "kpt-splitter", "data-orientation": orientation, children: [_jsx("div", { className: "kpt-splitter__pane", id: startId, style: { flexBasis: `${size}%` }, children: start }), _jsx("div", { className: "kpt-splitter__gutter", role: "separator", tabIndex: 0, "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": size, "aria-valuemin": minSize, "aria-valuemax": 100 - minSize, "aria-controls": startId, "aria-label": ariaLabel || t('splitter.resize'), onPointerDown: onPointerDown, onKeyDown: onKeyDown }), _jsx("div", { className: "kpt-splitter__pane", style: { flexBasis: `${100 - size}%` }, children: end })] }) }));
 }
 KptSplitter.Start = KptSplitterStart;
 KptSplitter.End = KptSplitterEnd;

package/dist/stepper/llms.txt

@@ -7,8 +7,8 @@ Import: `import { KptStepper, useKptStepper } from '@konce-pt/react';`
     <div class="kpt-stepper-host" style="--kpt-anim-duration:500ms; --kpt-anim-dir:1">
       <ol class="kpt-stepper__header">
         <li class="kpt-stepper__step is-done">
-          <button class="kpt-stepper__marker">✓</button>
-          <span class="kpt-stepper__label">Account</span>
+          <button class="kpt-stepper__marker" aria-label="Step 1: Account, completed">✓</button>
+          <span class="kpt-stepper__label" aria-hidden="true">Account</span>
           <span class="kpt-stepper__connector"></span>
         </li>
         …
@@ -60,5 +60,9 @@ The active and completed step: `--kpt-color-primary` (marker, connector); the re
 `--kpt-color-border-strong` and `--kpt-color-on-surface-muted`.
 
 ## Accessibility
-The header is an `<ol>` of real buttons — every step is reachable with the keyboard; the active
-marker carries `aria-current="step"`.
+The header is an `<ol>` of real buttons, so every step is reachable with the keyboard and the list
+announces how many there are. Each marker is named from the dictionary — `stepper.step`
+(“Step 2: Delivery”) or `stepper.stepDone` (“…, completed”) — because the visible marker is only a
+number or a check; the visible label is `aria-hidden` so it is not read twice. The active marker
+carries `aria-current="step"`. After `next()` focus stays where it was — move it into the new step
+yourself when the step is long.

package/dist/stepper/stepper.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptStepperContextValue {
     activeIndex: number;
     /** Liczba kroków — pozwala treści kroku ukryć „Dalej" na ostatnim. */
@@ -27,7 +28,7 @@ export declare function KptStep(_props: Readonly<KptStepProps>): ReactNode;
 export declare namespace KptStep {
     var kptStepperSlot: "step";
 }
-export interface KptStepperProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+export interface KptStepperProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
     activeIndex?: number;
     defaultActiveIndex?: number;
     onActiveIndexChange?: (index: number) => void;
@@ -45,7 +46,7 @@ export interface KptStepperProps extends Omit<ComponentPropsWithRef<'div'>, 'onC
  *   <KptStepper.Step label="Profil">…</KptStepper.Step>
  * </KptStepper>
  */
-export declare function KptStepper({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptStepperProps>): import("react").JSX.Element;
+export declare function KptStepper({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, locale, dictionary, className, style, children, ...rest }: Readonly<KptStepperProps>): import("react").JSX.Element;
 export declare namespace KptStepper {
     var Step: typeof KptStep;
 }

package/dist/stepper/stepper.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, createContext, isValidElement, useContext, 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 { KptIcon } from "../icon/icon.js";
 const StepperContext = createContext(null);
 /**
@@ -36,7 +37,8 @@ KptStep.kptStepperSlot = 'step';
  *   <KptStepper.Step label="Profil">…</KptStepper.Step>
  * </KptStepper>
  */
-export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, locale, dictionary, className, style, children, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
     const [active, setActive] = useControllableState({
         value: activeIndex,
         defaultValue: defaultActiveIndex,
@@ -66,6 +68,9 @@ export function KptStepper({ activeIndex, defaultActiveIndex = 0, onActiveIndexC
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ['--kpt-anim-dir']: direction,
             ...style,
-        }, ...rest, children: [_jsx("ol", { className: "kpt-stepper__header", children: steps.map((step, index) => (_jsxs("li", { className: cn('kpt-stepper__step', index === active && 'is-active', index < active && 'is-done'), children: [_jsx("button", { type: "button", className: "kpt-stepper__marker", "aria-current": index === active ? 'step' : undefined, onClick: () => goTo(index), children: index < active ? _jsx(KptIcon, { name: "check" }) : index + 1 }), _jsx("span", { className: "kpt-stepper__label", children: step.label }), index < steps.length - 1 ? _jsx("span", { className: "kpt-stepper__connector" }) : null] }, index))) }), _jsx(StepperContext.Provider, { value: context, children: _jsx("div", { className: "kpt-stepper__body", children: steps[active] ? (_jsx("div", { className: "kpt-stepper__panel", children: steps[active].children }, active)) : null }) })] }));
+        }, ...rest, children: [_jsx("ol", { className: "kpt-stepper__header", children: steps.map((step, index) => (_jsxs("li", { className: cn('kpt-stepper__step', index === active && 'is-active', index < active && 'is-done'), children: [_jsx("button", { type: "button", className: "kpt-stepper__marker", "aria-current": index === active ? 'step' : undefined, "aria-label": t(index < active ? 'stepper.stepDone' : 'stepper.step', {
+                                index: index + 1,
+                                label: step.label,
+                            }), onClick: () => goTo(index), children: index < active ? _jsx(KptIcon, { name: "check" }) : index + 1 }), _jsx("span", { className: "kpt-stepper__label", "aria-hidden": "true", children: step.label }), index < steps.length - 1 ? _jsx("span", { className: "kpt-stepper__connector" }) : null] }, index))) }), _jsx(StepperContext.Provider, { value: context, children: _jsx("div", { className: "kpt-stepper__body", children: steps[active] ? (_jsx("div", { className: "kpt-stepper__panel", children: steps[active].children }, active)) : null }) })] }));
 }
 KptStepper.Step = KptStep;

package/dist/switch/llms.txt

@@ -33,6 +33,16 @@ show one.
     <KptSwitch checked={on} onCheckedChange={setOn} onLabel="On" offLabel="Off" />
     <KptSwitch checked={on} onCheckedChange={setOn} label="Dark mode" labelPosition="start" />
 
+## Screen reader and keyboard
+The `onLabel`/`offLabel` text is `aria-hidden`: `role="switch"` already announces the state, and
+text inside the `<label>` would change the switch's name on every toggle.
+
+## Label and description
+`id` goes to the native field, not the host; without one it comes from `KptFormField` or is
+generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the hint or error is
+added to `aria-describedby` (merged with your own). Without a wrapper, name it with `aria-label`.
+Inside `kpt-form-field` the switch gets both names: the wrapper label and its own `label`.
+
 ## Tokens
 `--kpt-color-primary` (the on track), `--kpt-color-muted` (the off track), `--kpt-color-surface`
 (the thumb), `--kpt-motion-duration-fast`.

package/dist/switch/switch.d.ts

@@ -36,4 +36,4 @@ export interface KptSwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'ty
  * <KptSwitch name="notifications" label="Powiadomienia" />
  * <KptSwitch checked={on} onCheckedChange={setOn} onLabel="Włączony" offLabel="Wyłączony" />
  */
-export declare function KptSwitch({ label, labelPosition, onLabel, offLabel, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, ...rest }: Readonly<KptSwitchProps>): import("react").JSX.Element;
+export declare function KptSwitch({ label, labelPosition, onLabel, offLabel, required, invalid, touched, onCheckedChange, onTouch, hostProps, className, disabled, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, ...rest }: Readonly<KptSwitchProps>): import("react").JSX.Element;

package/dist/switch/switch.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { cn } from "../internal/cn.js";
+import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
  * Przełącznik (switch/toggle). Pod spodem natywny `<input type="checkbox" role="switch">`,
  * więc klawiatura i czytniki ekranu działają bez dodatkowej obsługi.
@@ -14,7 +15,8 @@ import { cn } from "../internal/cn.js";
  * <KptSwitch name="notifications" label="Powiadomienia" />
  * <KptSwitch checked={on} onCheckedChange={setOn} onLabel="Włączony" offLabel="Wyłączony" />
  */
-export function KptSwitch({ label = '', labelPosition = 'end', onLabel = '', offLabel = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, ...rest }) {
+export function KptSwitch({ label = '', labelPosition = 'end', onLabel = '', offLabel = '', required = false, invalid = false, touched, onCheckedChange, onTouch, hostProps, className, disabled = false, checked, onChange, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, id, ...rest }) {
+    const field = useKptFieldA11y(id, 'kpt-switch');
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const showInvalid = invalid && (touched ?? true);
     const hasStateLabels = !!(onLabel || offLabel);
@@ -26,5 +28,5 @@ export function KptSwitch({ label = '', labelPosition = 'end', onLabel = '', off
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-switch-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-switch', disabled && 'kpt-switch--disabled', className), children: [label && labelPosition === 'start' ? (_jsx("span", { className: "kpt-switch__label kpt-switch__label--start", children: label })) : null, _jsx("input", { type: "checkbox", role: "switch", className: "kpt-switch__input", checked: checked, disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsx("span", { className: "kpt-switch__track", "aria-hidden": "true", children: _jsx("span", { className: "kpt-switch__thumb" }) }), label && labelPosition === 'end' ? _jsx("span", { className: "kpt-switch__label", children: label }) : null, hasStateLabels ? (_jsx("span", { className: cn('kpt-switch__state', checked && 'kpt-switch__state--on'), children: checked ? onLabel : offLabel })) : null, children] }) }));
+    return (_jsx("span", { className: cn('kpt-switch-host', hostClassName), ...hostRest, children: _jsxs("label", { className: cn('kpt-switch', disabled && 'kpt-switch--disabled', className), children: [label && labelPosition === 'start' ? (_jsx("span", { className: "kpt-switch__label kpt-switch__label--start", children: label })) : null, _jsx("input", { type: "checkbox", role: "switch", className: "kpt-switch__input", id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), checked: checked, disabled: disabled, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), _jsx("span", { className: "kpt-switch__track", "aria-hidden": "true", children: _jsx("span", { className: "kpt-switch__thumb" }) }), label && labelPosition === 'end' ? _jsx("span", { className: "kpt-switch__label", children: label }) : null, hasStateLabels ? (_jsx("span", { className: cn('kpt-switch__state', checked && 'kpt-switch__state--on'), "aria-hidden": "true", children: checked ? onLabel : offLabel })) : null, children] }) }));
 }

package/dist/switch-group/llms.txt

@@ -34,6 +34,17 @@ re-applies the controlled `checked` and the switch snaps back on.
     <KptSwitchGroup multiple value={channels} onValueChange={setChannels} options={options} />
     <KptSwitchGroup orientation="horizontal" value={mode} onValueChange={setMode} options={options} />
 
+## Screen reader and keyboard
+`aria-invalid` is not supported on `role="group"`, so the error state is carried by each switch. In
+single mode the switches are mutually exclusive and nothing announces that turning one on turned
+another off — for a single choice prefer `KptRadioGroup`.
+
+## 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` and `ariaLabel` on the `group`.
+
 ## Tokens
 Layout only: `--kpt-space-2` (vertical gap) and `--kpt-space-4` (horizontal). The look comes from
 `KptSwitch` and its tokens.

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

@@ -11,6 +11,10 @@ export interface KptSwitchGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     orientation?: 'vertical' | 'horizontal';
     /** Czy wyłączenie aktywnej opcji zeruje wartość. Dotyczy tylko trybu pojedynczego. */
     allowDeselect?: boolean;
+    /** 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;
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -26,4 +30,4 @@ export interface KptSwitchGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
  * <KptSwitchGroup options={plans} value={plan} onValueChange={setPlan} />
  * <KptSwitchGroup multiple options={tags} value={selected} onValueChange={setSelected} />
  */
-export declare function KptSwitchGroup<T>({ options, value, defaultValue, onValueChange, multiple, orientation, allowDeselect, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptSwitchGroupProps<T>>): import("react").JSX.Element;
+export declare function KptSwitchGroup<T>({ options, value, defaultValue, onValueChange, multiple, orientation, allowDeselect, id, ariaLabel, disabled, invalid, touched, onTouch, className, ...rest }: Readonly<KptSwitchGroupProps<T>>): import("react").JSX.Element;

package/dist/switch-group/switch-group.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { KptSwitch } from "../switch/switch.js";
+import { useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
  * Grupa przełączników. Domyślnie wzajemnie wykluczających się — włączenie jednego wyłącza
  * pozostałe; z `multiple` wartością jest tablica zaznaczonych opcji.
@@ -12,7 +13,9 @@ import { KptSwitch } from "../switch/switch.js";
  * <KptSwitchGroup options={plans} value={plan} onValueChange={setPlan} />
  * <KptSwitchGroup multiple options={tags} value={selected} onValueChange={setSelected} />
  */
-export function KptSwitchGroup({ options = [], value, defaultValue = null, onValueChange, multiple = false, orientation = 'vertical', allowDeselect = true, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+export function KptSwitchGroup({ options = [], value, defaultValue = null, onValueChange, multiple = false, orientation = 'vertical', allowDeselect = true, id, ariaLabel = null, disabled = false, invalid = false, touched, onTouch, className, ...rest }) {
+    /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    const field = useKptFieldA11y(id, 'kpt-switch-group');
     const [current, setCurrent] = useControllableState({
         value,
         defaultValue,
@@ -43,5 +46,7 @@ export function KptSwitchGroup({ options = [], value, defaultValue = null, onVal
         // Bez `allowDeselect` nie robimy nic: `checked` jest wyliczane z wartości, a ta się nie
         // zmieniła, więc przełącznik sam wraca do włączonego przy najbliższym renderze.
     };
-    return (_jsx("div", { className: cn('kpt-switch-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-switch-group', orientation === 'horizontal' && 'kpt-switch-group--horizontal'), role: "group", "aria-invalid": showInvalid || undefined, children: options.map((option) => (_jsx(KptSwitch, { hostProps: { className: 'kpt-switch-group__item' }, checked: isChecked(option.value), label: option.label, disabled: disabled || option.disabled, onCheckedChange: (checked) => toggle(option, checked), onTouch: onTouch }, String(option.value)))) }) }));
+    return (_jsx("div", { className: cn('kpt-switch-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-switch-group', orientation === 'horizontal' && 'kpt-switch-group--horizontal'), role: "group", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, children: options.map((option) => (_jsx(KptSwitch, { hostProps: { className: 'kpt-switch-group__item' }, checked: isChecked(option.value), label: option.label, disabled: disabled || option.disabled, 
+                // `aria-invalid` nie działa na `role="group"` — stan błędu niesie każdy przełącznik.
+                invalid: showInvalid, onCheckedChange: (checked) => toggle(option, checked), onTouch: onTouch }, String(option.value)))) }) }));
 }

package/dist/tabs/llms.txt

@@ -6,11 +6,14 @@ Import: `import { KptTabs } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-tabs-host" style="--kpt-anim-duration: 500ms; --kpt-anim-dir: 1">
       <div class="kpt-tabs__header" role="tablist">
-        <button class="kpt-tabs__tab is-active" role="tab" aria-selected="true">General</button>
-        <button class="kpt-tabs__tab" role="tab" aria-selected="false">Advanced</button>
+        <button class="kpt-tabs__tab is-active" role="tab" id="kpt-tabs-r1-tab-0"
+                aria-selected="true" aria-controls="kpt-tabs-r1-panel" tabindex="0">General</button>
+        <button class="kpt-tabs__tab" role="tab" id="kpt-tabs-r1-tab-1"
+                aria-selected="false" tabindex="-1">Advanced</button>
         <span class="kpt-tabs__ink" style="width: 95px; transform: translateX(85px)"></span>
       </div>
-      <div class="kpt-tabs__body" role="tabpanel">
+      <div class="kpt-tabs__body" role="tabpanel" tabindex="0" id="kpt-tabs-r1-panel"
+           aria-labelledby="kpt-tabs-r1-tab-0">
         <div class="kpt-tabs__panel">…active tab content…</div>
       </div>
     </div>
@@ -45,4 +48,7 @@ schedule another render and the component would loop.
 
 ## Accessibility
 The header is `role="tablist"` with `role="tab"` buttons carrying `aria-selected`; the body is
-`role="tabpanel"`. A disabled tab is a disabled button, so the keyboard skips it.
+`role="tabpanel"`, named by the active tab (`aria-labelledby`), which points back at it with
+`aria-controls`. The tab row is a single `Tab` stop (roving `tabindex`): `ArrowLeft`/`ArrowRight`
+move between tabs, wrapping at the ends, `Home`/`End` jump to the first/last one, and disabled tabs
+are skipped. Moving activates the tab straight away; the next `Tab` goes to the panel.

package/dist/tabs/tabs.d.ts

@@ -23,6 +23,10 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
 /**
  * Zakładki — przełączanie widoków, treść renderowana leniwie.
  *
+ * Klawiatura według wzorca WAI-ARIA „tabs”: rząd zakładek to jeden przystanek Tab, strzałki
+ * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
+ * aktywują, a kolejny `Tab` prowadzi do panelu.
+ *
  * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
  * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
  *

package/dist/tabs/tabs.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
+import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
+import { useKptId } from "../internal/use-id.js";
 /**
  * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie — dopiero gdy
  * zakładka jest aktywna, tak samo jak szablon `kpt-tab` w porcie Angulara.
@@ -15,6 +17,10 @@ KptTab.kptTabsSlot = 'tab';
 /**
  * Zakładki — przełączanie widoków, treść renderowana leniwie.
  *
+ * Klawiatura według wzorca WAI-ARIA „tabs”: rząd zakładek to jeden przystanek Tab, strzałki
+ * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
+ * aktywują, a kolejny `Tab` prowadzi do panelu.
+ *
  * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
  * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
  *
@@ -33,6 +39,7 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
     const [direction, setDirection] = useState(1);
     const [ink, setInk] = useState({ x: 0, w: 0 });
     const buttonsRef = useRef([]);
+    const baseId = useKptId(undefined, 'kpt-tabs');
     const tabs = [];
     const contents = [];
     Children.forEach(children, (child) => {
@@ -57,18 +64,30 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
         window.addEventListener('resize', measureInk);
         return () => window.removeEventListener('resize', measureInk);
     }, [measureInk]);
+    const disabled = tabs.map((tab) => !!tab.disabled);
+    // Jedyna zakładka w kolejności Tab: aktywna, a gdy ta jest wyłączona — pierwsza dostępna.
+    const tabStop = rovingStop(disabled, active);
     const select = (index) => {
         if (tabs[index]?.disabled)
             return;
         setDirection(index >= active ? 1 : -1);
         setActive(index);
     };
+    const onKeyDown = (event) => {
+        const current = buttonsRef.current.indexOf(document.activeElement);
+        const next = nextRovingIndex(disabled, current < 0 ? tabStop : current, event.key);
+        if (next === null)
+            return;
+        event.preventDefault();
+        select(next);
+        buttonsRef.current[next]?.focus();
+    };
     return (_jsxs("div", { className: cn('kpt-tabs-host', className), style: {
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ['--kpt-anim-dir']: direction,
             ...style,
-        }, ...rest, children: [_jsxs("div", { className: "kpt-tabs__header", role: "tablist", children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
+        }, ...rest, children: [_jsxs("div", { className: "kpt-tabs__header", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
                             buttonsRef.current[index] = el;
-                        }, type: "button", className: cn('kpt-tabs__tab', index === active && 'is-active'), role: "tab", disabled: tab.disabled, "aria-selected": index === active, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", children: contents[active] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[active] }, active)) : null })] }));
+                        }, type: "button", className: cn('kpt-tabs__tab', index === active && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === active, "aria-controls": index === active ? `${baseId}-panel` : undefined, tabIndex: index === tabStop ? 0 : -1, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${active}`, children: contents[active] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[active] }, active)) : null })] }));
 }
 KptTabs.Tab = KptTab;

package/dist/textarea/llms.txt

@@ -31,6 +31,16 @@ height.
       <KptTextarea invalid={!!err} onTouch={markTouched} />
     </KptFormField>
 
+## Screen reader and keyboard
+`counter`: boolean — a "12 / 280" counter under the field (requires the native `maxLength`), read
+together with it through `aria-describedby`.
+
+## Label and description
+`id` goes to the native field, not the host; without one it comes from `KptFormField` or is
+generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the hint or error is
+added to `aria-describedby` (merged with your own). Without a wrapper, name it with `aria-label`.
+New: `id`, `ariaLabel` and `required` (→ `aria-required`); `[formField]` binds `required`.
+
 ## Tokens
 `--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}` —
 the same set as the text field, so both controls stay in step.

package/dist/textarea/textarea.d.ts

@@ -5,6 +5,8 @@ export interface KptTextareaProps extends Omit<ComponentPropsWithRef<'textarea'>
     autoResize?: boolean;
     /** Oznacza pole jako wymagane atrybutem `aria-required`, a NIE natywnym `required`. */
     required?: boolean;
+    /** Licznik „12 / 280” pod polem (wymaga `maxLength`), czytany razem z polem przez `aria-describedby`. */
+    counter?: boolean;
     /** Pole jest nieprawidłowe. Widoczne dopiero, gdy `touched` też jest prawdziwe. */
     invalid?: boolean;
     /** Czy pole było dotknięte; pominięty = stan błędu pokazuje się od razu po `invalid`. */
@@ -25,4 +27,4 @@ export interface KptTextareaProps extends Omit<ComponentPropsWithRef<'textarea'>
  * @example
  * <KptTextarea name="notes" placeholder="Notatki…" autoResize />
  */
-export declare function KptTextarea({ autoResize, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, rows, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, ...rest }: Readonly<KptTextareaProps>): import("react").JSX.Element;
+export declare function KptTextarea({ autoResize, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, rows, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, counter, ...rest }: Readonly<KptTextareaProps>): import("react").JSX.Element;

package/dist/textarea/textarea.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { composeRefs } from "../internal/compose-refs.js";
-import { useKptId } from "../internal/use-id.js";
-import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
 /**
  * Pole wieloliniowe (textarea), z opcjonalnym auto-resize.
  *
@@ -13,11 +12,16 @@ import { useKptFormFieldContext } from "../form-field/form-field-context.js";
  * @example
  * <KptTextarea name="notes" placeholder="Notatki…" autoResize />
  */
-export function KptTextarea({ autoResize = false, required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, rows = 3, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, ...rest }) {
-    const field = useKptFormFieldContext();
+export function KptTextarea({ autoResize = false, required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, rows = 3, onChange, onBlur, ref, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, counter = false, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
-    const textareaId = useKptId(id ?? field?.controlId, 'kpt-textarea');
+    const field = useKptFieldA11y(id, 'kpt-textarea');
+    const textareaId = field.id;
     const innerRef = useRef(null);
+    // Długość tekstu dla licznika: w trybie kontrolowanym z `value`, w niekontrolowanym — z wpisów.
+    const [typedLength, setTypedLength] = useState(() => String(rest.value ?? rest.defaultValue ?? '').length);
+    const length = rest.value !== undefined ? String(rest.value).length : typedLength;
+    const showCounter = counter && !!rest.maxLength;
+    const counterId = `${textareaId}-counter`;
     const showInvalid = invalid && (touched ?? true);
     const resize = useCallback(() => {
         const el = innerRef.current;
@@ -34,11 +38,12 @@ export function KptTextarea({ autoResize = false, required = false, invalid = fa
     const handleChange = useCallback((event) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
+        setTypedLength(event.target.value.length);
         resize();
     }, [onChange, onValueChange, resize]);
     const handleBlur = useCallback((event) => {
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsx("span", { className: cn('kpt-textarea-host', hostClassName), ...hostRest, children: _jsx("textarea", { className: cn('kpt-textarea__field', className), id: textareaId, rows: rows, ref: composeRefs(innerRef, ref), "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }) }));
+    return (_jsxs("span", { className: cn('kpt-textarea-host', hostClassName), ...hostRest, children: [_jsx("textarea", { className: cn('kpt-textarea__field', className), id: textareaId, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy, showCounter && counterId), rows: rows, ref: composeRefs(innerRef, ref), "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ...rest }), showCounter ? (_jsxs("span", { className: "kpt-textarea__counter", id: counterId, children: [length, " / ", rest.maxLength] })) : null] }));
 }