@konce-pt/react 0.9.1 → 0.11.0

package/dist/meter-group/meter-group.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
+import { useKptMessages } from "../i18n/i18n-context.js";
 const PALETTE = [
     'var(--kpt-color-primary)',
     'var(--kpt-color-info)',
@@ -13,12 +14,17 @@ const PALETTE = [
  * @example
  * <KptMeterGroup values={[{ label: 'Użyte', value: 70 }, { label: 'Wolne', value: 30 }]} />
  */
-export function KptMeterGroup({ values = [], max, showLegend = true, className, ...rest }) {
+export function KptMeterGroup({ values = [], max, showLegend = true, label = '', legendValue = 'percent', unit = '', locale, dictionary, className, ...rest }) {
+    const { t } = useKptMessages({ locale, dictionary });
     const sum = values.reduce((acc, item) => acc + item.value, 0);
     // Bez `max` odniesieniem jest suma wartości; `|| 1` chroni przed dzieleniem przez zero,
     // gdy wszystkie segmenty są zerowe.
     const total = max ?? (sum || 1);
     const percent = (item) => (item.value / total) * 100;
     const color = (item, index) => item.color || PALETTE[index % PALETTE.length];
-    return (_jsx("div", { className: cn('kpt-meter-group-host', className), ...rest, children: _jsxs("div", { className: "kpt-meter-group", children: [_jsx("div", { className: "kpt-meter-group__track", role: "meter", "aria-valuenow": sum, "aria-valuemax": max, children: values.map((item, index) => (_jsx("span", { className: "kpt-meter-group__segment", style: { width: `${percent(item)}%`, backgroundColor: color(item, index) }, title: item.label }, index))) }), showLegend ? (_jsx("ul", { className: "kpt-meter-group__legend", children: values.map((item, index) => (_jsxs("li", { className: "kpt-meter-group__legend-item", children: [_jsx("span", { className: "kpt-meter-group__dot", style: { backgroundColor: color(item, index) } }), _jsx("span", { children: item.label }), _jsxs("span", { className: "kpt-meter-group__val", children: [Math.round(percent(item)), "%"] })] }, index))) })) : null] }) }));
+    const withUnit = (value) => (unit ? `${value} ${unit}` : String(value));
+    const legendText = (item) => legendValue === 'value' ? withUnit(item.value) : `${Math.round(percent(item))}%`;
+    // Podział dla czytnika („Zdjęcia 42 GB, Filmy 28 GB…”) — sam `aria-valuenow` mówi tylko sumę.
+    const valueText = values.map((item) => `${item.label} ${withUnit(item.value)}`).join(', ');
+    return (_jsx("div", { className: cn('kpt-meter-group-host', className), ...rest, children: _jsxs("div", { className: "kpt-meter-group", children: [_jsx("div", { className: "kpt-meter-group__track", role: "meter", "aria-valuemin": 0, "aria-valuenow": sum, "aria-valuemax": total, "aria-valuetext": valueText, "aria-label": label || t('meterGroup.label'), children: values.map((item, index) => (_jsx("span", { className: "kpt-meter-group__segment", style: { width: `${percent(item)}%`, backgroundColor: color(item, index) }, title: item.label }, index))) }), showLegend ? (_jsx("ul", { className: "kpt-meter-group__legend", children: values.map((item, index) => (_jsxs("li", { className: "kpt-meter-group__legend-item", children: [_jsx("span", { className: "kpt-meter-group__dot", style: { backgroundColor: color(item, index) } }), _jsx("span", { children: item.label }), _jsx("span", { className: "kpt-meter-group__val", children: legendText(item) })] }, index))) })) : null] }) }));
 }

package/dist/order-list/llms.txt

@@ -46,7 +46,15 @@ no dictionary keys.
 ## Tokens
 The selection `--kpt-color-primary`, the buttons `--kpt-color-surface-raised`.
 
+## Keyboard
+The list is a `listbox` with a single Tab stop (roving tabindex), and the selection follows focus:
+- `↓` / `↑` select the next / previous item (wrapping), `Home` / `End` the first / last;
+- `Alt`+`↑` / `Alt`+`↓` move the selected item one place up / down — focus travels with it, so
+  repeated presses keep moving the same entry.
+The up / down buttons stay and act on the same selection.
+
 ## Accessibility
-Both buttons are labelled from the dictionary and go disabled while nothing is selected, so the
-control never looks broken. Native HTML5 drag and drop has no keyboard equivalent, so they stay the
-full keyboard path — `dragdrop` never replaces them.
+The list is named after `header` (`aria-label`) and the selected item carries `aria-selected`.
+Both buttons are labelled from the dictionary and go disabled while nothing is selected. Native
+HTML5 drag and drop has no keyboard equivalent — `Alt`+arrows and the buttons cover it, and
+`dragdrop` adds to them, it never replaces them.

package/dist/order-list/order-list.d.ts

@@ -14,7 +14,11 @@ export interface KptOrderListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
  * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
+ * Lista to `listbox` z jednym przystankiem Tab (roving tabindex), w którym zaznaczenie idzie
+ * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+↑/↓ przestawia ją o jedno
+ * miejsce (fokus jedzie razem z nią).
+ *
  * @example
  * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, dragdrop, renderItem, locale, dictionary, className, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;
+export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, dragdrop, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;

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

@@ -1,18 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { nextMenuIndex } from "../menu/menu-keys.js";
 const EMPTY = [];
 /**
  * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
  * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
+ * Lista to `listbox` z jednym przystankiem Tab (roving tabindex), w którym zaznaczenie idzie
+ * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+↑/↓ przestawia ją o jedno
+ * miejsce (fokus jedzie razem z nią).
+ *
  * @example
  * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, renderItem, locale, dictionary, className, ...rest }) {
+export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, renderItem, locale, dictionary, className, ref, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [list, setList] = useControllableState({
         value: items,
@@ -26,18 +32,50 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
     const [overIndex, setOverIndex] = useState(null);
     /** Kursor nad pustym obszarem listy — upuszczenie tam dopina na koniec. */
     const [listOver, setListOver] = useState(false);
-    const move = (dir) => {
-        if (selected === null)
+    /** Pozycja, na którą po renderze trzeba przenieść fokus DOM (klawiatura). */
+    const [focusRequest, setFocusRequest] = useState(null);
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (focusRequest === null)
             return;
-        const target = selected + dir;
+        rootRef.current?.querySelectorAll('[role="option"]')[focusRequest]?.focus();
+        setFocusRequest(null);
+    }, [focusRequest]);
+    /**
+     * Przesuwa pozycję spod `index` o jedno miejsce i zwraca jej nowy indeks. Jawny indeks zamiast
+     * `selected`: klawiatura zaznacza i przesuwa w jednym zdarzeniu, a stan z domknięcia byłby stary.
+     */
+    const moveFrom = (index, dir) => {
+        const target = index + dir;
         if (target < 0 || target >= list.length)
-            return;
+            return index;
         const next = [...list];
-        [next[selected], next[target]] = [next[target], next[selected]];
+        [next[index], next[target]] = [next[target], next[index]];
         setList(next);
         // Zaznaczenie wędruje za elementem, nie zostaje na pozycji — inaczej kolejne kliknięcie
         // przesuwałoby sąsiada zamiast tego samego wpisu.
         setSelected(target);
+        return target;
+    };
+    const move = (dir) => {
+        if (selected !== null)
+            moveFrom(selected, dir);
+    };
+    /** Przystanek Tab: zaznaczona pozycja albo pierwsza. */
+    const tabStop = selected !== null && selected < list.length ? selected : 0;
+    // Strzałki wybierają pozycję (zaznaczenie idzie za fokusem), `Alt`+↑/↓ ją przestawia.
+    const onItemKeyDown = (index, event) => {
+        if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            event.preventDefault();
+            setFocusRequest(moveFrom(index, event.key === 'ArrowUp' ? -1 : 1));
+            return;
+        }
+        const next = nextMenuIndex(list.length, index, event.key);
+        if (next === null)
+            return;
+        event.preventDefault();
+        setSelected(next);
+        setFocusRequest(next);
     };
     const clearDrag = () => {
         setDragIndex(null);
@@ -98,5 +136,5 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         setList(next);
         setSelected(next.length - 1);
     };
-    return (_jsx("div", { className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }) }));
+    return (_jsx("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }) }));
 }

package/dist/panel/llms.txt

@@ -9,9 +9,10 @@ Import: `import { KptPanel } from '@konce-pt/react';`
         <div class="kpt-panel__header">
           <span class="kpt-panel__title">Settings</span>
           <span class="kpt-panel__actions">…actions…</span>
-          <button class="kpt-panel__toggle" aria-expanded="true" aria-label="Collapse / expand">…</button>
+          <button class="kpt-panel__toggle" aria-expanded="true" aria-controls="kpt-panel-body-r1"
+                  aria-label="Collapse / expand Settings">…</button>
         </div>
-        <div class="kpt-panel__collapse is-open">
+        <div class="kpt-panel__collapse is-open" id="kpt-panel-body-r1">
           <div class="kpt-panel__collapse-inner">
             <div class="kpt-panel__body">…children…</div>
           </div>
@@ -36,7 +37,7 @@ nothing inside can take focus or be read out. That is also why a collapsed panel
 whatever lives in it — a half-filled form inside survives a collapse.
 
 ## i18n
-The toggle's label comes from `panel.toggle` in the dictionary.
+The toggle's label comes from `panel.toggleNamed` (with `{header}`) or `panel.toggle` in the dictionary.
 
 ## Examples
     <KptPanel header="Settings" toggleable>Panel content…</KptPanel>
@@ -50,6 +51,8 @@ The toggle's label comes from `panel.toggle` in the dictionary.
 `--kpt-color-surface`, `--kpt-color-border`, `--kpt-radius-lg`, `--kpt-motion-easing-standard`.
 
 ## Accessibility
-The toggle is a native button with `aria-expanded` and a label from the dictionary. The header
-title is a `<span>`, not a heading — give the panel your own heading when it needs one in the
-document outline.
+The toggle is a native button with `aria-expanded` and `aria-controls` pointing at the body. Its
+name says which panel it collapses — `panel.toggleNamed` (“Collapse / expand Settings”) when there
+is a `header`, `panel.toggle` otherwise — so several panels on one page are told apart. A collapsed
+body is `inert` and `aria-hidden`. The header title is not a heading — add your own when the panel
+should appear in the document outline.

package/dist/panel/panel.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, isValidElement } 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";
 import { KptIcon } from "../icon/icon.js";
 /**
@@ -15,6 +16,7 @@ import { KptIcon } from "../icon/icon.js";
  */
 export function KptPanel({ header = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, locale, dictionary, className, style, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
+    const bodyId = useKptId(undefined, 'kpt-panel-body');
     const [isCollapsed, setCollapsed] = useControllableState({
         value: collapsed,
         defaultValue: defaultCollapsed,
@@ -26,7 +28,7 @@ export function KptPanel({ header = '', toggleable = false, collapsed, defaultCo
         const isActions = isValidElement(child) && child.type?.kptPanelSlot === 'actions';
         (isActions ? actions : body).push(child);
     });
-    return (_jsx("div", { className: cn('kpt-panel-host', className), style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsxs("div", { className: "kpt-panel", children: [_jsxs("div", { className: "kpt-panel__header", children: [_jsx("span", { className: "kpt-panel__title", children: header }), _jsx("span", { className: "kpt-panel__actions", children: actions }), toggleable ? (_jsx("button", { type: "button", className: "kpt-panel__toggle", onClick: () => setCollapsed(!isCollapsed), "aria-expanded": !isCollapsed, "aria-label": t('panel.toggle'), children: _jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }) })) : null] }), _jsx("div", { className: cn('kpt-panel__collapse', !isCollapsed && 'is-open'), inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-panel__collapse-inner", children: _jsx("div", { className: "kpt-panel__body", children: body }) }) })] }) }));
+    return (_jsx("div", { className: cn('kpt-panel-host', className), style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsxs("div", { className: "kpt-panel", children: [_jsxs("div", { className: "kpt-panel__header", children: [_jsx("span", { className: "kpt-panel__title", children: header }), _jsx("span", { className: "kpt-panel__actions", children: actions }), toggleable ? (_jsx("button", { type: "button", className: "kpt-panel__toggle", onClick: () => setCollapsed(!isCollapsed), "aria-expanded": !isCollapsed, "aria-controls": bodyId, "aria-label": header ? t('panel.toggleNamed', { header }) : t('panel.toggle'), children: _jsx(KptIcon, { name: isCollapsed ? 'chevron-down' : 'chevron-up' }) })) : null] }), _jsx("div", { className: cn('kpt-panel__collapse', !isCollapsed && 'is-open'), id: bodyId, inert: isCollapsed, "aria-hidden": isCollapsed, children: _jsx("div", { className: "kpt-panel__collapse-inner", children: _jsx("div", { className: "kpt-panel__body", children: body }) }) })] }) }));
 }
 /** Akcje w nagłówku panelu, obok tytułu. */
 export function KptPanelActions({ className, ...rest }) {

package/dist/password/llms.txt

@@ -36,6 +36,14 @@ the dictionary — indexed by the score, so a translation controls the wording w
     <KptPassword value={pass} onValueChange={setPass} feedback />
     <KptPassword value={pass} onValueChange={setPass} autoComplete="new-password" feedback />
 
+## 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 `ariaLabel`. The
+host no longer carries the `id` (it used to, so `label[for]` pointed at `kpt-password` and the same
+id existed twice). New: `ariaLabel`, `required`, `readonly`/`readOnly`, `aria-invalid` after touch;
+with `feedback` the strength label is added to `aria-describedby`.
+
 ## Tokens
 `--kpt-form-field-*` for the field, `--kpt-color-danger` / `-warning` / `-success` for the meter
 bars by score.

package/dist/password/password.d.ts

@@ -14,6 +14,11 @@ export interface KptPasswordProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     autoComplete?: string | null;
     /** Miernik siły pod polem. */
     feedback?: boolean;
+    /** Nazwa dostępna, gdy pola nie opisuje etykieta (`<label for>` albo `KptFormField`). */
+    ariaLabel?: string | null;
+    /** Oznacza pole jako wymagane atrybutem `aria-required`. */
+    required?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -25,4 +30,4 @@ export interface KptPasswordProps extends Omit<ComponentPropsWithRef<'div'>, 'on
  * @example
  * <KptPassword value={password} onValueChange={setPassword} feedback autoComplete="new-password" />
  */
-export declare function KptPassword({ value, defaultValue, onValueChange, placeholder, id, autoComplete, feedback, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptPasswordProps>): import("react").JSX.Element;
+export declare function KptPassword({ value, defaultValue, onValueChange, placeholder, id, autoComplete, feedback, ariaLabel, required, readOnly, disabled, invalid, touched, onTouch, locale, dictionary, className, ...rest }: Readonly<KptPasswordProps>): import("react").JSX.Element;

package/dist/password/password.js

@@ -4,7 +4,7 @@ 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";
-import { useKptFormFieldContext } from "../form-field/form-field-context.js";
+import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
 import { KptIcon } from "../icon/icon.js";
 /** Cztery niezależne kryteria; każde spełnione podnosi wynik o jeden. */
 function scoreOf(password) {
@@ -25,13 +25,14 @@ function scoreOf(password) {
  * @example
  * <KptPassword value={password} onValueChange={setPassword} feedback autoComplete="new-password" />
  */
-export function KptPassword({ value, defaultValue = '', onValueChange, placeholder = '', id, autoComplete = 'current-password', feedback = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
+export function KptPassword({ value, defaultValue = '', onValueChange, placeholder = '', id, autoComplete = 'current-password', feedback = false, ariaLabel = null, required = false, readOnly = false, disabled = false, invalid = false, touched, onTouch, locale, dictionary, className, ...rest }) {
     const { t, messages } = useKptMessages({ locale, dictionary });
-    const field = useKptFormFieldContext();
-    const inputId = useKptId(id ?? field?.controlId, 'kpt-password');
+    const field = useKptFieldA11y(id, 'kpt-password');
+    const inputId = field.id;
+    const meterId = useKptId(undefined, 'kpt-password-strength');
     const [current, setCurrent] = useControllableState({ value, defaultValue, onChange: onValueChange });
     const [visible, setVisible] = useState(false);
     const showInvalid = invalid && (touched ?? true);
     const score = scoreOf(current);
-    return (_jsxs("div", { className: cn('kpt-password-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-password', disabled && 'kpt-password--disabled', showInvalid && 'kpt-password--invalid'), children: [_jsx("input", { className: "kpt-password__input", id: inputId, type: visible ? 'text' : 'password', value: current, disabled: disabled, placeholder: placeholder, autoComplete: autoComplete ?? undefined, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }), _jsx("button", { type: "button", className: "kpt-password__toggle", disabled: disabled, onClick: () => setVisible(!visible), "aria-label": visible ? t('password.hide') : t('password.show'), children: _jsx(KptIcon, { name: visible ? 'eye-off' : 'eye' }) })] }), feedback && current ? (_jsxs("div", { className: "kpt-password__meter", "data-score": score, children: [_jsx("div", { className: "kpt-password__bars", children: [0, 1, 2, 3].map((index) => (_jsx("span", { className: cn('kpt-password__bar', index < score && 'is-on') }, index))) }), _jsx("span", { className: "kpt-password__hint", children: messages.password.strength[score] })] })) : null] }));
+    return (_jsxs("div", { className: cn('kpt-password-host', className), ...rest, children: [_jsxs("div", { className: cn('kpt-password', disabled && 'kpt-password--disabled', showInvalid && 'kpt-password--invalid'), children: [_jsx("input", { className: "kpt-password__input", id: inputId, type: visible ? 'text' : 'password', value: current, disabled: disabled, readOnly: readOnly, "aria-invalid": showInvalid || undefined, "aria-required": required || undefined, "aria-label": ariaLabel ?? undefined, "aria-describedby": joinIds(field.describedBy, feedback && current && meterId), placeholder: placeholder, autoComplete: autoComplete ?? undefined, onChange: (event) => setCurrent(event.target.value), onBlur: () => onTouch?.() }), _jsx("button", { type: "button", className: "kpt-password__toggle", disabled: disabled, onClick: () => setVisible(!visible), "aria-label": visible ? t('password.hide') : t('password.show'), children: _jsx(KptIcon, { name: visible ? 'eye-off' : 'eye' }) })] }), feedback && current ? (_jsxs("div", { className: "kpt-password__meter", id: meterId, "data-score": score, children: [_jsx("div", { className: "kpt-password__bars", "aria-hidden": "true", children: [0, 1, 2, 3].map((index) => (_jsx("span", { className: cn('kpt-password__bar', index < score && 'is-on') }, index))) }), _jsx("span", { className: "kpt-password__hint", children: messages.password.strength[score] })] })) : null] }));
 }

package/dist/pick-list/llms.txt

@@ -60,7 +60,16 @@ double-click carry no visible label, so they add no dictionary keys.
 ## Tokens
 The selection `--kpt-color-primary`, the headers `--kpt-color-surface-variant`.
 
+## Keyboard
+Each list is a `listbox` with `aria-multiselectable` and a single Tab stop (roving tabindex):
+- `↓` / `↑` move between items (wrapping), `Home` / `End` jump to the ends;
+- `Space` toggles the focused item's selection (`aria-selected`), the same as a click;
+- `Enter` moves the focused item to the other list, the same as a double-click — focus stays at
+  that position in the list, on the next item.
+The move buttons act on the same selection, so the whole control works without a mouse.
+
 ## Accessibility
-Every move button is labelled from the dictionary, so "move all right" is distinguishable from
-"move right" without seeing the double chevron. Native HTML5 drag and drop has no keyboard
-equivalent, so those buttons stay the full keyboard path — `dragdrop` never replaces them.
+Each list is named after its header (`aria-label`). The four move buttons are labelled from the
+dictionary, so "move all right" is distinguishable from "move right" without seeing the double
+chevron. Native HTML5 drag and drop has no keyboard equivalent — `Enter` and the buttons cover
+everything it does, and `dragdrop` adds to them, it never replaces them.

package/dist/pick-list/pick-list.d.ts

@@ -22,6 +22,10 @@ export interface KptPickListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  * Z `dragdrop` dochodzi przeciąganie — porządkowanie wewnątrz panelu i przenoszenie na
  * konkretną pozycję drugiego panelu.
  *
+ * Każda lista to `listbox` z wielokrotnym wyborem i jednym przystankiem Tab (roving tabindex):
+ * strzałki / `Home` / `End` przechodzą po pozycjach, spacja zaznacza, `Enter` przenosi pozycję
+ * na drugą stronę (jak dwuklik).
+ *
  * @example
  * <KptPickList
  *   source={available} onSourceChange={setAvailable}
@@ -30,4 +34,4 @@ export interface KptPickListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  *   renderItem={(item) => item.name}
  * />
  */
-export declare function KptPickList<T>({ source, defaultSource, onSourceChange, target, defaultTarget, onTargetChange, sourceHeader, targetHeader, dragdrop, renderItem, locale, dictionary, className, ...rest }: Readonly<KptPickListProps<T>>): import("react").JSX.Element;
+export declare function KptPickList<T>({ source, defaultSource, onSourceChange, target, defaultTarget, onTargetChange, sourceHeader, targetHeader, dragdrop, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptPickListProps<T>>): import("react").JSX.Element;

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
+import { composeRefs } from "../internal/compose-refs.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { nextMenuIndex } from "../menu/menu-keys.js";
 const EMPTY = [];
 /**
  * PickList — transfer elementów między dwiema listami. Klik zaznacza, przyciski pośrodku
@@ -11,6 +13,10 @@ const EMPTY = [];
  * Z `dragdrop` dochodzi przeciąganie — porządkowanie wewnątrz panelu i przenoszenie na
  * konkretną pozycję drugiego panelu.
  *
+ * Każda lista to `listbox` z wielokrotnym wyborem i jednym przystankiem Tab (roving tabindex):
+ * strzałki / `Home` / `End` przechodzą po pozycjach, spacja zaznacza, `Enter` przenosi pozycję
+ * na drugą stronę (jak dwuklik).
+ *
  * @example
  * <KptPickList
  *   source={available} onSourceChange={setAvailable}
@@ -19,7 +25,7 @@ const EMPTY = [];
  *   renderItem={(item) => item.name}
  * />
  */
-export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, target, defaultTarget = EMPTY, onTargetChange, sourceHeader, targetHeader, dragdrop = false, renderItem, locale, dictionary, className, ...rest }) {
+export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, target, defaultTarget = EMPTY, onTargetChange, sourceHeader, targetHeader, dragdrop = false, renderItem, locale, dictionary, className, ref, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [left, setLeft] = useControllableState({
         value: source,
@@ -41,11 +47,33 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
     const [over, setOver] = useState(null);
     /** Panel, nad którego pustym obszarem jest kursor — upuszczenie tam dopina na koniec. */
     const [listOver, setListOver] = useState(null);
+    /** Pozycja, która ostatnio miała fokus w każdej liście — ona jest przystankiem Tab. */
+    const [focusLeft, setFocusLeft] = useState(0);
+    const [focusRight, setFocusRight] = useState(0);
+    /** Pozycja, na którą po renderze trzeba przenieść fokus DOM (klawiatura). */
+    const [focusRequest, setFocusRequest] = useState(null);
+    const rootRef = useRef(null);
     const listOf = (side) => (side === 'source' ? left : right);
     const setListOf = (side) => (side === 'source' ? setLeft : setRight);
     const selectionOf = (side) => (side === 'source' ? selLeft : selRight);
     const setSelectionOf = (side) => side === 'source' ? setSelLeft : setSelRight;
     const other = (side) => (side === 'source' ? 'target' : 'source');
+    const focusOf = (side) => (side === 'source' ? focusLeft : focusRight);
+    const setFocusOf = (side) => (side === 'source' ? setFocusLeft : setFocusRight);
+    /** Przystanek Tab listy — ostatnio skupiona pozycja, przycięta do długości listy. */
+    const tabIndexOf = (side) => Math.min(focusOf(side), listOf(side).length - 1);
+    useEffect(() => {
+        if (!focusRequest)
+            return;
+        const list = rootRef.current?.querySelectorAll('.kpt-pick-list__items')[focusRequest.side === 'source' ? 0 : 1];
+        const options = list?.querySelectorAll('[role="option"]') ?? [];
+        options[Math.min(focusRequest.index, options.length - 1)]?.focus();
+        setFocusRequest(null);
+    }, [focusRequest]);
+    const focusItem = (side, index) => {
+        setFocusOf(side)(index);
+        setFocusRequest({ side, index });
+    };
     const toggle = (side, item) => {
         const next = new Set(selectionOf(side));
         if (next.has(item))
@@ -91,6 +119,25 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
         const to = other(from);
         transfer(from, index, to, listOf(to).length);
     };
+    const onItemKeyDown = (side, index, item, event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            toggle(side, item);
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            moveOne(side, item);
+            // Pozycja zniknęła z listy — fokus zostaje w tym samym miejscu listy, na następnej.
+            focusItem(side, index);
+            return;
+        }
+        const next = nextMenuIndex(listOf(side).length, index, event.key);
+        if (next === null)
+            return;
+        event.preventDefault();
+        focusItem(side, next);
+    };
     const clearDrag = () => {
         setDrag(null);
         setOver(null);
@@ -162,10 +209,10 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
         const items = listOf(side);
         const selection = selectionOf(side);
         const header = side === 'source' ? (sourceHeader ?? t('pickList.available')) : (targetHeader ?? t('pickList.selected'));
-        return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: cn('kpt-pick-list__items', listOver === side && 'is-dragover'), onDragOver: (event) => onListDragOver(side, event), onDragLeave: () => setListOver(null), onDrop: (event) => onListDrop(side, event), children: items.map((item, index) => {
+        return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: cn('kpt-pick-list__items', listOver === side && 'is-dragover'), role: "listbox", "aria-multiselectable": "true", "aria-label": header, onDragOver: (event) => onListDragOver(side, event), onDragLeave: () => setListOver(null), onDrop: (event) => onListDrop(side, event), children: items.map((item, index) => {
                         const dragging = drag?.side === side && drag.index === index;
-                        return (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected', dragging && 'is-dragging', dragdrop && 'kpt-pick-list__item--draggable', over?.side === side && over.index === index && !dragging && 'kpt-pick-list__item--dragover'), draggable: dragdrop || undefined, onClick: () => toggle(side, item), onDoubleClick: () => moveOne(side, item), onDragStart: (event) => onDragStart(side, index, event), onDragOver: (event) => onDragOver(side, index, event), onDragLeave: () => setOver(null), onDrop: (event) => onDrop(side, index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index));
+                        return (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected', dragging && 'is-dragging', dragdrop && 'kpt-pick-list__item--draggable', over?.side === side && over.index === index && !dragging && 'kpt-pick-list__item--dragover'), role: "option", "aria-selected": selection.has(item), tabIndex: index === tabIndexOf(side) ? 0 : -1, onFocus: () => setFocusOf(side)(index), onKeyDown: (event) => onItemKeyDown(side, index, item, event), draggable: dragdrop || undefined, onClick: () => toggle(side, item), onDoubleClick: () => moveOne(side, item), onDragStart: (event) => onDragStart(side, index, event), onDragOver: (event) => onDragOver(side, index, event), onDragLeave: () => setOver(null), onDrop: (event) => onDrop(side, index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index));
                     }) })] }));
     };
-    return (_jsx("div", { className: cn('kpt-pick-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-pick-list", children: [column('source'), _jsxs("div", { className: "kpt-pick-list__controls", children: [_jsxs("button", { type: "button", "aria-label": t('pickList.moveAllRight'), onClick: () => move('source', true), children: [_jsx(KptIcon, { name: "chevron-right" }), _jsx(KptIcon, { name: "chevron-right" })] }), _jsx("button", { type: "button", "aria-label": t('pickList.moveRight'), onClick: () => move('source', false), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("button", { type: "button", "aria-label": t('pickList.moveLeft'), onClick: () => move('target', false), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsxs("button", { type: "button", "aria-label": t('pickList.moveAllLeft'), onClick: () => move('target', true), children: [_jsx(KptIcon, { name: "chevron-left" }), _jsx(KptIcon, { name: "chevron-left" })] })] }), column('target')] }) }));
+    return (_jsx("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-pick-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-pick-list", children: [column('source'), _jsxs("div", { className: "kpt-pick-list__controls", children: [_jsxs("button", { type: "button", "aria-label": t('pickList.moveAllRight'), onClick: () => move('source', true), children: [_jsx(KptIcon, { name: "chevron-right" }), _jsx(KptIcon, { name: "chevron-right" })] }), _jsx("button", { type: "button", "aria-label": t('pickList.moveRight'), onClick: () => move('source', false), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("button", { type: "button", "aria-label": t('pickList.moveLeft'), onClick: () => move('target', false), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsxs("button", { type: "button", "aria-label": t('pickList.moveAllLeft'), onClick: () => move('target', true), children: [_jsx(KptIcon, { name: "chevron-left" }), _jsx(KptIcon, { name: "chevron-left" })] })] }), column('target')] }) }));
 }

package/dist/popover/llms.txt

@@ -14,6 +14,7 @@ Import: `import { KptPopover } from '@konce-pt/react';`
 - `trigger`: ReactNode — the element that opens the bubble, rendered in place
 - `children`: ReactNode — the panel content
 - `open` / `defaultOpen` / `onOpenChange` — controlled or uncontrolled
+- `placement`: 'bottom' (default) | 'top' — the preferred side; it flips when there is no room
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## The panel is a portal
@@ -38,5 +39,11 @@ backdrop takes that click, exactly as the CDK backdrop does.
 `--kpt-z-overlay`.
 
 ## Accessibility
-The panel is `role="dialog"` and Escape closes it. Focus is not trapped — the popover is meant for
-supporting content, so for a real modal reach for a dialog instead.
+The panel is `role="dialog"` with an `id` the trigger points to.
+
+## Focus and keyboard
+The control inside the trigger slot gets `aria-haspopup="dialog"`, a live `aria-expanded` and, while
+open, `aria-controls` — on the real `<button>`, not on the wrapper. Opening moves focus to the first
+interactive element of the bubble; `Escape` or a click outside closes it, and focus returns to the
+trigger when it was inside the bubble. Focus is not trapped — the popover is supporting content, not
+a modal.

package/dist/popover/popover.d.ts

@@ -7,17 +7,23 @@ export interface KptPopoverProps extends Omit<ComponentPropsWithRef<'span'>, 'co
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Preferowana strona dymka; gdy brakuje miejsca, przechodzi na drugą. */
+    placement?: 'bottom' | 'top';
 }
 /**
  * Popover — dowolna treść w dymku przypiętym do wyzwalacza (bogatszy niż tooltip).
  *
  * Port Angulara stoi na CDK Overlay; tutaj panel renderuje się w portalu do `document.body`,
- * z tym samym zachowaniem: pozycja pod wyzwalaczem z odbiciem w górę przy braku miejsca,
- * zamykanie kliknięciem poza panelem i klawiszem Escape.
+ * z tym samym zachowaniem: pozycja pod wyzwalaczem (albo nad nim przy `placement="top"`)
+ * z odbiciem przy braku miejsca, zamykanie kliknięciem poza panelem i klawiszem Escape.
+ *
+ * Dostępność (jak w Angularze): kontrolka w wyzwalaczu dostaje `aria-haspopup="dialog"`,
+ * `aria-expanded` i `aria-controls`; po otwarciu fokus przechodzi do pierwszego interaktywnego
+ * elementu dymka, a po zamknięciu wraca na wyzwalacz, jeśli był w dymku.
  *
  * @example
  * <KptPopover trigger={<KptButton variant="outline">Szczegóły</KptButton>}>
  *   <div>Bogata treść popovera…</div>
  * </KptPopover>
  */
-export declare function KptPopover({ trigger, children, open, defaultOpen, onOpenChange, className, ...rest }: Readonly<KptPopoverProps>): import("react").JSX.Element;
+export declare function KptPopover({ trigger, children, open, defaultOpen, onOpenChange, placement, className, ...rest }: Readonly<KptPopoverProps>): import("react").JSX.Element;

package/dist/popover/popover.js

@@ -1,27 +1,62 @@
 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";
+/** Elementy, które same przyjmują fokus — pierwszy z nich dostaje fokus po otwarciu dymka. */
+const FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select, textarea, [tabindex]:not([tabindex="-1"])';
 /**
  * Popover — dowolna treść w dymku przypiętym do wyzwalacza (bogatszy niż tooltip).
  *
  * Port Angulara stoi na CDK Overlay; tutaj panel renderuje się w portalu do `document.body`,
- * z tym samym zachowaniem: pozycja pod wyzwalaczem z odbiciem w górę przy braku miejsca,
- * zamykanie kliknięciem poza panelem i klawiszem Escape.
+ * z tym samym zachowaniem: pozycja pod wyzwalaczem (albo nad nim przy `placement="top"`)
+ * z odbiciem przy braku miejsca, zamykanie kliknięciem poza panelem i klawiszem Escape.
+ *
+ * Dostępność (jak w Angularze): kontrolka w wyzwalaczu dostaje `aria-haspopup="dialog"`,
+ * `aria-expanded` i `aria-controls`; po otwarciu fokus przechodzi do pierwszego interaktywnego
+ * elementu dymka, a po zamknięciu wraca na wyzwalacz, jeśli był w dymku.
  *
  * @example
  * <KptPopover trigger={<KptButton variant="outline">Szczegóły</KptButton>}>
  *   <div>Bogata treść popovera…</div>
  * </KptPopover>
  */
-export function KptPopover({ trigger, children, open, defaultOpen = false, onOpenChange, className, ...rest }) {
+export function KptPopover({ trigger, children, open, defaultOpen = false, onOpenChange, placement = 'bottom', className, ...rest }) {
     const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const panelId = useKptId(undefined, 'kpt-popover');
     const [isOpen, setOpen] = useControllableState({
         value: open,
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
-    const close = useCallback(() => setOpen(false), [setOpen]);
-    return (_jsxs("span", { className: cn('kpt-popover-host', className), ...rest, children: [_jsx("span", { className: "kpt-popover__trigger", ref: triggerRef, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, offset: 6, children: _jsx("div", { className: "kpt-popover__panel", role: "dialog", children: children }) })] }));
+    const findControl = () => triggerRef.current?.querySelector('button, a, [role="button"]') ?? null;
+    // ARIA na prawdziwej kontrolce w slocie, nie na opakowaniu `<span>` (patrz `KptMenu`).
+    useEffect(() => {
+        const control = findControl();
+        if (!control)
+            return;
+        control.setAttribute('aria-haspopup', 'dialog');
+        control.setAttribute('aria-expanded', String(isOpen));
+        if (isOpen)
+            control.setAttribute('aria-controls', panelId);
+        else
+            control.removeAttribute('aria-controls');
+    }, [isOpen, trigger, panelId]);
+    // Fokus do dymka klatkę później — `KptOverlay` trzyma panel niewidoczny, dopóki go nie zmierzy.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const frame = requestAnimationFrame(() => panelRef.current?.querySelector(FOCUSABLE)?.focus());
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen]);
+    const close = useCallback(() => {
+        const active = document.activeElement;
+        // Fokus wraca na wyzwalacz tylko wtedy, gdy był w dymku (albo przepadł na `<body>`).
+        if (!active || active === document.body || panelRef.current?.contains(active))
+            findControl()?.focus();
+        setOpen(false);
+    }, [setOpen]);
+    return (_jsxs("span", { className: cn('kpt-popover-host', className), ...rest, children: [_jsx("span", { className: "kpt-popover__trigger", ref: triggerRef, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, offset: 6, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-popover__panel", role: "dialog", children: children }) })] }));
 }

package/dist/public-api.d.ts

@@ -90,7 +90,7 @@ export type { KptConfirmOptions, KptConfirmRequest } from './confirm/confirm-sto
 export { KptToastContainer } from './toast/toast-container.tsx';
 export type { KptToastContainerProps } from './toast/toast-container.tsx';
 export { kptToast, useKptToasts } from './toast/toast-store.ts';
-export type { KptToast, KptToastOptions } from './toast/toast-store.ts';
+export type { KptToast, KptToastAction, KptToastOptions } from './toast/toast-store.ts';
 export { KptMenu } from './menu/menu.tsx';
 export { KptMenubar } from './menubar/menubar.tsx';
 export type { KptMenubarProps } from './menubar/menubar.tsx';
@@ -123,8 +123,8 @@ export type { KptSelectProps } from './select/select.tsx';
 export type { KptAlertVariant, KptOption } from './shared/types.ts';
 export { KptFormField } from './form-field/form-field.tsx';
 export type { KptFormFieldLabelType, KptFormFieldProps } from './form-field/form-field.tsx';
-export { useKptFormFieldContext, useKptFormFieldFilled } from './form-field/form-field-context.ts';
-export type { KptFormFieldContextValue } from './form-field/form-field-context.ts';
+export { useKptFieldA11y, useKptFormFieldContext, useKptFormFieldFilled } from './form-field/form-field-context.ts';
+export type { KptFieldA11y, KptFormFieldContextValue } from './form-field/form-field-context.ts';
 export { KptCheckbox } from './checkbox/checkbox.tsx';
 export type { KptCheckboxProps } from './checkbox/checkbox.tsx';
 export { KptAutocomplete } from './autocomplete/autocomplete.tsx';
@@ -156,7 +156,7 @@ export type { KptDateRangeMode, KptDateRangeProps, KptDateRangeValue } from './d
 export { KptClock } from './clock/clock.tsx';
 export type { KptClockProps } from './clock/clock.tsx';
 export { KptColorPicker } from './color-picker/color-picker.tsx';
-export type { KptColorPickerProps } from './color-picker/color-picker.tsx';
+export type { KptColorPickerProps, KptColorPreset } from './color-picker/color-picker.tsx';
 export { KptFileUpload } from './file-upload/file-upload.tsx';
 export type { KptFileUploadProps } from './file-upload/file-upload.tsx';
 export { KptSwitchGroup } from './switch-group/switch-group.tsx';
@@ -175,10 +175,10 @@ export type { KptIconButtonProps } from './icon-button/icon-button.tsx';
 export { KptFab } from './fab/fab.tsx';
 export type { KptFabProps } from './fab/fab.tsx';
 export { KptSplitButton } from './split-button/split-button.tsx';
-export type { KptSplitButtonProps } from './split-button/split-button.tsx';
+export type { KptSplitButtonProps, KptSplitButtonVariant } from './split-button/split-button.tsx';
 export type { KptButtonProps, KptButtonSize, KptButtonVariant } from './button/button.tsx';
 export { KptCard, KptCardActions, KptCardFooter, KptCardHeader, KptCardLead, KptCardMedia, KptCardMeta, KptCardSection, KptCardSubtitle, KptCardTags, KptCardTitle, } from './card/card.tsx';
-export type { KptCardProps, KptCardVariant } from './card/card.tsx';
+export type { KptCardHeadingLevel, KptCardProps, KptCardVariant } from './card/card.tsx';
 export { KptI18nProvider, useKptI18n, useKptMessages } from './i18n/i18n-context.tsx';
 export type { KptI18nContextValue, KptI18nOverrides, KptI18nProviderProps } from './i18n/i18n-context.tsx';
 export { KPT_MESSAGES_EN, KPT_MESSAGES_PL } from '@konce-pt/i18n';