@konce-pt/react 0.11.2 → 0.14.0

package/dist/paginator/paginator.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { KptButton } from "../button/button.js";
@@ -26,9 +27,11 @@ export function KptPaginator({ length, pageSize, defaultPageSize = 10, onPageSiz
         defaultValue: defaultPageIndex,
         onChange: onPageIndexChange,
     });
-    const totalPages = Math.max(1, Math.ceil(length / size));
-    const rangeStart = length === 0 ? 0 : index * size + 1;
-    const rangeEnd = Math.min(length, (index + 1) * size);
+    // Rozmiar strony do rachunków - `0` albo ujemny dawałby `Infinity` stron i wieczne "dalej".
+    const step = Math.max(1, size);
+    const totalPages = Math.max(1, Math.ceil(length / step));
+    const rangeStart = length === 0 ? 0 : index * step + 1;
+    const rangeEnd = Math.min(length, (index + 1) * step);
     const canPrev = index > 0;
     const canNext = index < totalPages - 1;
     // Utrzymuj poprawny indeks, gdy zmieni się długość lub rozmiar strony.
@@ -47,5 +50,5 @@ export function KptPaginator({ length, pageSize, defaultPageSize = 10, onPageSiz
     const sizeOptions = pageSizeOptions.includes(size)
         ? pageSizeOptions
         : [...pageSizeOptions, size].sort((a, b) => a - b);
-    return (_jsxs("div", { className: cn('kpt-paginator', className), ...rest, children: [_jsx("div", { className: "kpt-paginator__size", children: _jsxs("label", { children: [t('paginator.rowsPerPage'), _jsx("select", { className: "kpt-paginator__select", value: size, onChange: onSizeChange, children: sizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }) }), _jsx("span", { className: "kpt-paginator__range", children: t('paginator.range', { start: rangeStart, end: rangeEnd, total: length }) }), _jsxs("div", { className: "kpt-paginator__nav", children: [_jsx(KptButton, { variant: "outline", size: "sm", disabled: !canPrev, onClick: () => setIndex(index - 1), "aria-label": t('paginator.prevPage'), children: prevIcon }), _jsx(KptButton, { variant: "outline", size: "sm", disabled: !canNext, onClick: () => setIndex(index + 1), "aria-label": t('paginator.nextPage'), children: nextIcon })] })] }));
+    return (_jsxs("div", { className: cn('kpt-paginator', className), ...rest, children: [_jsx("div", { className: "kpt-paginator__size", children: _jsxs("label", { children: [t('paginator.rowsPerPage'), _jsx("select", { className: "kpt-paginator__select", value: size, onChange: onSizeChange, children: sizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] }) }), _jsx("span", { className: "kpt-paginator__range", "aria-live": "polite", children: t('paginator.range', { start: rangeStart, end: rangeEnd, total: length }) }), _jsxs("div", { className: "kpt-paginator__nav", children: [_jsx(KptButton, { variant: "outline", size: "sm", disabled: !canPrev, onClick: () => setIndex(index - 1), "aria-label": t('paginator.prevPage'), children: prevIcon }), _jsx(KptButton, { variant: "outline", size: "sm", disabled: !canNext, onClick: () => setIndex(index + 1), "aria-label": t('paginator.nextPage'), children: nextIcon })] })] }));
 }

package/dist/panel/llms.txt

@@ -8,13 +8,13 @@ Import: `import { KptPanel } from '@konce-pt/react';`
       <div class="kpt-panel">
         <div class="kpt-panel__header">
           <span class="kpt-panel__title">Settings</span>
-          <span class="kpt-panel__actions">…actions…</span>
+          <span class="kpt-panel__actions">...actions...</span>
           <button class="kpt-panel__toggle" aria-expanded="true" aria-controls="kpt-panel-body-r1"
-                  aria-label="Collapse / expand Settings">…</button>
+                  aria-label="Collapse / expand Settings">...</button>
         </div>
         <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 class="kpt-panel__body">...children...</div>
           </div>
         </div>
       </div>
@@ -22,37 +22,49 @@ Import: `import { KptPanel } from '@konce-pt/react';`
 
 ## Props
 - `header`: string
-- `toggleable`: boolean — adds the collapse button to the header
-- `collapsed` / `defaultCollapsed` / `onCollapsedChange` — controlled or uncontrolled
+- `toggleable`: boolean - adds the collapse button to the header
+- `collapsed` / `defaultCollapsed` / `onCollapsedChange` - controlled or uncontrolled
 - `animated`: boolean (default true), `animationDuration`: number (ms, default 500)
-- `locale`, `dictionary` — i18n overrides for this component only
+- `collapseMotion`: `'spring' | 'fade' | 'none'` (default from `KptMotionProvider`, else `spring`) - see "Collapse motion"
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Sub-components
-- `KptPanel.Actions` — lifted into the header, next to the title, before the collapse button.
+- `KptPanel.Actions` - lifted into the header, next to the title, before the collapse button.
 
 ## Collapsed content stays mounted
 It gets `inert` and `aria-hidden` rather than being removed, so the height is animatable while
 nothing inside can take focus or be read out. That is also why a collapsed panel keeps the state of
-whatever lives in it — a half-filled form inside survives a collapse.
+whatever lives in it - a half-filled form inside survives a collapse.
 
 ## i18n
 The toggle's label comes from `panel.toggleNamed` (with `{header}`) or `panel.toggle` in the dictionary.
 
 ## Examples
-    <KptPanel header="Settings" toggleable>Panel content…</KptPanel>
+    <KptPanel header="Settings" toggleable>Panel content...</KptPanel>
 
     <KptPanel header="Filters" toggleable collapsed={collapsed} onCollapsedChange={setCollapsed}>
       <KptPanel.Actions><KptIconButton aria-label="Reset"><KptIcon name="x" /></KptIconButton></KptPanel.Actions>
-      …
+      ...
     </KptPanel>
 
+## Collapse motion
+- `spring` - the height opens on a soft spring, the content slides in from above and sharpens out
+  of a blur; when collapsing, the content fades first and only then the section closes. The chevron
+  turns on a spring.
+- `fade` - the height on the standard curve, the content cross-fades.
+- `none` - the state changes without motion.
+
+With no value it takes `collapse` from `KptMotionProvider` (default `spring`). `animated={false}`, `enabled: false`
+in the config and the system "reduce motion" setting always turn it off. `animationDuration` sets
+the time of every kind. Pure CSS: the kind sits in `data-motion` on the component root.
+
 ## Tokens
 `--kpt-color-surface`, `--kpt-color-border`, `--kpt-radius-lg`, `--kpt-motion-easing-standard`.
 
 ## Accessibility
 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
+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.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import { type KptCollapseMotion } from '@konce-pt/motion';
 export interface KptPanelProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
     header?: string;
     /** Dokłada przycisk zwijania w nagłówku. */
@@ -9,18 +10,25 @@ export interface KptPanelProps extends ComponentPropsWithRef<'div'>, KptI18nOver
     onCollapsedChange?: (collapsed: boolean) => void;
     animated?: boolean;
     animationDuration?: number;
+    /**
+     * Ruch zwijania: `spring` - wysokość na sprężynie, treść wjeżdża i wyostrza się, przy zwijaniu
+     * najpierw gaśnie; `fade` - treść się przenika; `none` - bez ruchu. Bez wartości bierze `collapse`
+     * z `KptMotionProvider` (domyślnie `spring`); `animated={false}`, `enabled={false}` i systemowe
+     * "ogranicz ruch" wyłączają go zawsze.
+     */
+    collapseMotion?: KptCollapseMotion;
     children?: ReactNode;
 }
 /**
  * Panel z nagłówkiem i opcjonalnym zwijaniem. Akcje nagłówka wstaw przez `<KptPanel.Actions>`.
  *
- * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` — dzięki temu wysokość da się
+ * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` - dzięki temu wysokość da się
  * animować, a mimo to nic z jej wnętrza nie łapie fokusu ani nie trafia do czytnika ekranu.
  *
  * @example
- * <KptPanel header="Ustawienia" toggleable>Treść…</KptPanel>
+ * <KptPanel header="Ustawienia" toggleable>Treść...</KptPanel>
  */
-export declare function KptPanel({ header, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, locale, dictionary, className, style, children, ...rest }: Readonly<KptPanelProps>): import("react").JSX.Element;
+export declare function KptPanel({ header, toggleable, collapsed, defaultCollapsed, onCollapsedChange, animated, animationDuration, collapseMotion, locale, dictionary, className, style, children, ...rest }: Readonly<KptPanelProps>): import("react").JSX.Element;
 export declare namespace KptPanel {
     var Actions: typeof KptPanelActions;
 }

package/dist/panel/panel.js

@@ -1,22 +1,27 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from 'react';
+import { isValidElement } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren } from "../internal/slot-children.js";
 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 { resolveCollapseMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
  * Panel z nagłówkiem i opcjonalnym zwijaniem. Akcje nagłówka wstaw przez `<KptPanel.Actions>`.
  *
- * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` — dzięki temu wysokość da się
+ * Zwinięta treść zostaje w DOM, ale dostaje `inert` i `aria-hidden` - dzięki temu wysokość da się
  * animować, a mimo to nic z jej wnętrza nie łapie fokusu ani nie trafia do czytnika ekranu.
  *
  * @example
- * <KptPanel header="Ustawienia" toggleable>Treść…</KptPanel>
+ * <KptPanel header="Ustawienia" toggleable>Treść...</KptPanel>
  */
-export function KptPanel({ header = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, locale, dictionary, className, style, children, ...rest }) {
+export function KptPanel({ header = '', toggleable = false, collapsed, defaultCollapsed = false, onCollapsedChange, animated = true, animationDuration = 500, collapseMotion, locale, dictionary, className, style, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const bodyId = useKptId(undefined, 'kpt-panel-body');
+    const motion = resolveCollapseMotion(collapseMotion, useKptMotion(), animated);
     const [isCollapsed, setCollapsed] = useControllableState({
         value: collapsed,
         defaultValue: defaultCollapsed,
@@ -24,11 +29,11 @@ export function KptPanel({ header = '', toggleable = false, collapsed, defaultCo
     });
     const actions = [];
     const body = [];
-    Children.forEach(children, (child) => {
+    for (const child of slotChildren(children)) {
         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-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 }) }) })] }) }));
+    }
+    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", "data-motion": motion, 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: "chevron-down", className: cn('kpt-panel__chevron', !isCollapsed && 'is-open') }) })) : 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

@@ -7,20 +7,20 @@ Import: `import { KptPassword } from '@konce-pt/react';`
     <div class="kpt-password-host">
       <div class="kpt-password">
         <input class="kpt-password__input" type="password" autocomplete="current-password">
-        <button class="kpt-password__toggle" type="button" aria-label="Show password">…</button>
+        <button class="kpt-password__toggle" type="button" aria-label="Show password">...</button>
       </div>
       <div class="kpt-password__meter" data-score="3">
-        <div class="kpt-password__bars"><span class="kpt-password__bar is-on"></span>…</div>
+        <div class="kpt-password__bars"><span class="kpt-password__bar is-on"></span>...</div>
         <span class="kpt-password__hint">Good</span>
       </div>
     </div>
 
 ## Props
 - `value` / `defaultValue` / `onValueChange`
-- `feedback`: boolean — shows the strength meter once something is typed
+- `feedback`: boolean - shows the strength meter once something is typed
 - `autoComplete`: string | null (default 'current-password')
 - `placeholder`, `id`, `disabled`, `invalid`, `touched`, `onTouch()`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `locale`, `dictionary` - i18n overrides for this component only
 
 ## autoComplete is not a detail
 Sign-up and password reset need `autoComplete="new-password"`. With the default, a password manager
@@ -28,9 +28,13 @@ fills in the OLD password instead of offering a new one, and the user ends up sa
 thing.
 
 ## How the score is computed
-Four independent criteria, one point each: at least 8 characters, both letter cases, a digit, a
-non-alphanumeric character. The label comes from `password.strength` — the only array-valued key in
-the dictionary — indexed by the score, so a translation controls the wording without touching code.
+A 0-4 score. The score follows length first, not composition rules (NIST SP 800-63B advises against them): an
+approximate entropy over the character classes actually used, cut for repeats (`aaaa`), sequences
+(`abcd`, `1234`, `qwerty`) and the "Word + digits + symbol" shape. `Password1!` is weak, thirty
+lowercase letters are strong, and `ą`/`ż` are letters, not special characters. There is no
+dictionary - it is a hint, not a security control.
+The label comes from `password.strength` - the only array-valued key in
+the dictionary - indexed by the score, so a translation controls the wording without touching code.
 
 ## Examples
     <KptPassword value={pass} onValueChange={setPass} feedback />
@@ -44,6 +48,14 @@ host no longer carries the `id` (it used to, so `label[for]` pointed at `kpt-pas
 id existed twice). New: `ariaLabel`, `required`, `readonly`/`readOnly`, `aria-invalid` after touch;
 with `feedback` the strength label is added to `aria-describedby`.
 
+## Motion
+The strength meter fades in when the first character appears; lit segments fill from the start in
+a wave and empty from the end when the score drops, in the colour of the current score; the score label
+enters anew on every change. Turning invalid (after touch) flashes an error ring and shakes the field -
+inside an invalid `kpt-form-field` only the ring, because the wrapper shakes. Follows `enter` from `KptMotionProvider`
+(`spring` / `fade` / `none`); nothing moves on first render; `enabled: false` and the system
+"reduce motion" setting always win.
+
 ## Tokens
 `--kpt-form-field-*` for the field, `--kpt-color-danger` / `-warning` / `-success` for the meter
 bars by score.

package/dist/password/password.d.ts

@@ -5,10 +5,10 @@ export interface KptPasswordProps extends Omit<ComponentPropsWithRef<'div'>, 'on
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     placeholder?: string;
-    /** Id natywnego pola — pozwala związać etykietę `KptFormField`. */
+    /** Id natywnego pola - pozwala związać etykietę `KptFormField`. */
     id?: string;
     /**
-     * Podpowiedź autouzupełniania. Rejestracja i reset hasła wymagają `new-password` — inaczej
+     * Podpowiedź autouzupełniania. Rejestracja i reset hasła wymagają `new-password` - inaczej
      * menedżer haseł podstawia stare hasło zamiast zaproponować nowe.
      */
     autoComplete?: string | null;

package/dist/password/password.js

@@ -1,24 +1,15 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { playInvalidMotion, resolveEnterMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 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 { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
+import { kptPasswordScore } from "../internal/password-strength.js";
 import { KptIcon } from "../icon/icon.js";
-/** Cztery niezależne kryteria; każde spełnione podnosi wynik o jeden. */
-function scoreOf(password) {
-    let score = 0;
-    if (password.length >= 8)
-        score++;
-    if (/[A-Z]/.test(password) && /[a-z]/.test(password))
-        score++;
-    if (/\d/.test(password))
-        score++;
-    if (/[^A-Za-z0-9]/.test(password))
-        score++;
-    return Math.min(score, 4);
-}
 /**
  * Pole hasła z przełącznikiem widoczności i opcjonalnym miernikiem siły.
  *
@@ -33,6 +24,26 @@ export function KptPassword({ value, defaultValue = '', onValueChange, placehold
     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, 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] }));
+    // Długość i różnorodność zamiast reguł składu - szczegóły w `internal/password-strength.ts`.
+    const score = kptPasswordScore(current);
+    /** Ruch miernika i błędu idzie za `enter` z `KptMotionProvider` (domyślnie `spring`). */
+    const motion = resolveEnterMotion(undefined, useKptMotion());
+    const boxRef = useRef(null);
+    // Po pierwszym renderze - dopiero wtedy wejścia z `@starting-style` mają prawo zagrać. Atrybut idzie
+    // prosto do DOM-u: host niesie `className` z propsów, a React nadpisałby klasę dopisaną z boku.
+    useEffect(() => {
+        boxRef.current?.parentElement?.setAttribute('data-live', '');
+    }, []);
+    const wasInvalid = useRef(null);
+    // Sygnał błędu przy przejściu "poprawne -> błędne" (nie przy błędzie obecnym od startu): pierścień
+    // w kolorze błędu i krótkie potrząśnięcie. W błędnym `KptFormField` potrząsa już on - tu sam pierścień.
+    useEffect(() => {
+        const before = wasInvalid.current;
+        wasInvalid.current = showInvalid;
+        const el = boxRef.current;
+        if (!showInvalid || before !== false || motion !== 'spring' || !el)
+            return;
+        playInvalidMotion(el, { shake: !el.closest('.kpt-form-field--invalid') });
+    }, [showInvalid, motion]);
+    return (_jsxs("div", { className: cn('kpt-password-host', className), "data-motion": motion, ...rest, children: [_jsxs("div", { ref: boxRef, 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'), style: { ['--_i']: index } }, index))) }), _jsx("span", { className: "kpt-password__hint", children: messages.password.strength[score] }, score)] })) : null] }));
 }

package/dist/peek/llms.txt

@@ -1,37 +1,37 @@
 # KptPeek (@konce-pt/react)
 
-A peek card — content tied to what you are looking at, shown without leaving the text. Hover opens
+A peek card - content tied to what you are looking at, shown without leaving the text. Hover opens
 it, the card itself is interactive, and a click pins it.
 Import: `import { KptPeek } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-peek-host">
-      <a class="kpt-peek__trigger" aria-expanded="true" aria-controls="…">…trigger…</a>
+      <a class="kpt-peek__trigger" aria-expanded="true" aria-controls="...">...trigger...</a>
     </span>
     <!-- while open, in a portal on document.body: -->
-    <div class="kpt-peek__panel" role="dialog" tabindex="-1" data-pinned>…children…</div>
+    <div class="kpt-peek__panel" role="dialog" tabindex="-1" data-pinned>...children...</div>
 
 ## Props
-- `trigger`: ReactNode — the element the card hangs on; a mention, an avatar, a chip, a link
-- `children`: ReactNode — the card content
+- `trigger`: ReactNode - the element the card hangs on; a mention, an avatar, a chip, a link
+- `children`: ReactNode - the card content
 - `placement`: 'top' | 'bottom' (default 'bottom')
 - `openDelay`: number (default 300), `closeDelay`: number (default 200)
-- `disabled`: boolean — the card never opens; the trigger stays a plain link or button
-- `label`: string — the card's accessible name; without it the trigger's text is used
-- `onOpenChange`: `(open: boolean) => void` — the moment to fetch the card's data
+- `disabled`: boolean - the card never opens; the trigger stays a plain link or button
+- `label`: string - the card's accessible name; without it the trigger's text is used
+- `onOpenChange`: `(open: boolean) => void` - the moment to fetch the card's data
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## The props land on the trigger itself
 A valid element passed as `trigger` is cloned with the handlers and `aria-expanded` merged in, so
-the state sits on the element a screen reader actually reads — not on some `<span>` next to it.
+the state sits on the element a screen reader actually reads - not on some `<span>` next to it.
 Anything else (a bare string) gets wrapped in a `<span>`.
 
 ## Hover is not the only way in
-Hover opens after `openDelay` and leaving closes after `closeDelay` — the pointer needs time to
+Hover opens after `openDelay` and leaving closes after `closeDelay` - the pointer needs time to
 travel from the trigger to the card, so entering the card cancels the close. Focus opens it with no
 delay. A click, Enter or a tap **pins** the card: it stays after the pointer leaves and focus moves
 inside it. That is the only route to the card's content where there is no hover at all. Escape
-closes it and hands focus back to the trigger; so does a pointer press outside.
+closes it and hands focus back to the trigger; so does a pointer press outside. Escape on the trigger itself closes a card opened by hover or focus without moving focus (WCAG 1.4.13); with the card closed the key passes through to an enclosing dialog.
 
 ## Which of the three
 `KptTooltip` carries plain text and cannot be clicked. `KptPopover` opens on click and puts a

package/dist/peek/peek.d.ts

@@ -2,14 +2,14 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 /** Z której strony wyzwalacza wychodzi karta. */
 export type KptPeekPlacement = 'top' | 'bottom';
 export interface KptPeekProps extends Omit<ComponentPropsWithRef<'span'>, 'content'> {
-    /** Element, na którym wisi karta — wzmianka, awatar, chip albo zwykły link. */
+    /** Element, na którym wisi karta - wzmianka, awatar, chip albo zwykły link. */
     trigger: ReactNode;
     /** Treść karty. */
     children?: ReactNode;
     placement?: KptPeekPlacement;
-    /** Zwłoka otwarcia po najechaniu (ms) — bez niej karty mrugają przy przejeżdżaniu przez tekst. */
+    /** Zwłoka otwarcia po najechaniu (ms) - bez niej karty mrugają przy przejeżdżaniu przez tekst. */
     openDelay?: number;
-    /** Zwłoka zamknięcia po zjeździe kursora (ms) — tyle jest na przejazd z wyzwalacza na kartę. */
+    /** Zwłoka zamknięcia po zjeździe kursora (ms) - tyle jest na przejazd z wyzwalacza na kartę. */
     closeDelay?: number;
     /** Wyłączona karta nie otwiera się wcale; wyzwalacz zostaje zwykłym linkiem czy przyciskiem. */
     disabled?: boolean;
@@ -18,18 +18,18 @@ export interface KptPeekProps extends Omit<ComponentPropsWithRef<'span'>, 'conte
     onOpenChange?: (open: boolean) => void;
 }
 /**
- * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Karta podglądu pod kursorem - treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
  * Tym różni się od sąsiadów: `KptTooltip` niesie sam tekst i nie da się w nim kliknąć,
  * a `KptPopover` otwiera dopiero klik i zasłania stronę backdropem.
  *
- * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` - kursor musi mieć
  * czas przejechać z wyzwalacza na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
  * kartę od razu, a klik, Enter albo dotyk **przypina** ją: karta zostaje mimo zjazdu kursora,
  * a fokus wchodzi do środka. To jedyna droga do treści karty tam, gdzie hovera nie ma w ogóle.
  *
  * @example
  * <KptPeek trigger={<a href="/ludzie/anna">@Anna Kowalska</a>}>
- *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ *   <KptCard>Profil, projekty, kontakt...</KptCard>
  * </KptPeek>
  */
 export declare function KptPeek({ trigger, children, placement, openDelay, closeDelay, disabled, label, onOpenChange, className, ...rest }: Readonly<KptPeekProps>): import("react").JSX.Element;

package/dist/peek/peek.js

@@ -1,21 +1,22 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { cloneElement, isValidElement, useCallback, useEffect, useEffectEvent, useId, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { mergeSlotProps } from "../internal/slot.js";
 /**
- * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Karta podglądu pod kursorem - treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
  * Tym różni się od sąsiadów: `KptTooltip` niesie sam tekst i nie da się w nim kliknąć,
  * a `KptPopover` otwiera dopiero klik i zasłania stronę backdropem.
  *
- * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` - kursor musi mieć
  * czas przejechać z wyzwalacza na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
  * kartę od razu, a klik, Enter albo dotyk **przypina** ją: karta zostaje mimo zjazdu kursora,
  * a fokus wchodzi do środka. To jedyna droga do treści karty tam, gdzie hovera nie ma w ogóle.
  *
  * @example
  * <KptPeek trigger={<a href="/ludzie/anna">@Anna Kowalska</a>}>
- *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ *   <KptCard>Profil, projekty, kontakt...</KptCard>
  * </KptPeek>
  */
 export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 300, closeDelay = 200, disabled = false, label, onOpenChange, className, ...rest }) {
@@ -24,7 +25,15 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
     const panelRef = useRef(null);
     const timer = useRef(undefined);
     const [open, setOpen] = useState(false);
-    /** Przypięta karta zostaje po zjeździe kursora — przypina ją klik, Enter albo dotyk. */
+    /** Kotwica nakładki w stanie (callback ref), nie `triggerRef.current` czytane w renderze. */
+    const [anchor, setAnchor] = useState(null);
+    const setTriggerRef = useCallback((el) => {
+        triggerRef.current = el;
+        setAnchor(el);
+    }, []);
+    /** Tekst wyzwalacza jako nazwa karty - odczytany przy otwarciu, nie w renderze. */
+    const [triggerName, setTriggerName] = useState('');
+    /** Przypięta karta zostaje po zjeździe kursora - przypina ją klik, Enter albo dotyk. */
     const [pinned, setPinned] = useState(false);
     const panelId = useId();
     const stop = useCallback(() => {
@@ -40,21 +49,24 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
             timer.current = setTimeout(action, delay);
     }, [stop]);
     const show = useCallback(() => {
-        setOpen((was) => {
-            if (!was)
-                onOpenChange?.(true);
-            return true;
-        });
-    }, [onOpenChange]);
+        setTriggerName(triggerRef.current?.textContent?.trim() ?? '');
+        setOpen(true);
+    }, []);
+    // `onOpenChange` po zmianie stanu, a nie wewnątrz funkcji aktualizującej `setOpen` - ta musi być
+    // czysta (StrictMode woła ją dwa razy, a React może ją powtórzyć przy przerwanym renderze).
+    const notifyOpen = useEffectEvent((value) => onOpenChange?.(value));
+    const reportedOpen = useRef(false);
+    useEffect(() => {
+        if (reportedOpen.current === open)
+            return;
+        reportedOpen.current = open;
+        notifyOpen(open);
+    }, [open]);
     const close = useCallback(() => {
         stop();
         setPinned(false);
-        setOpen((was) => {
-            if (was)
-                onOpenChange?.(false);
-            return false;
-        });
-    }, [onOpenChange, stop]);
+        setOpen(false);
+    }, [stop]);
     const hoverIn = useCallback(() => {
         if (disabled)
             return;
@@ -106,19 +118,29 @@ export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 3
     }, [close, open]);
     const triggerProps = {
         className: 'kpt-peek__trigger',
-        ref: triggerRef,
+        ref: setTriggerRef,
         onMouseEnter: hoverIn,
         onMouseLeave: hoverOut,
         onFocus: focusIn,
         onBlur: focusOut,
         onClick: pin,
+        // Escape na wyzwalaczu odprawia kartę bez przenoszenia fokusu (WCAG 1.4.13). Zamknięta karta
+        // przepuszcza klawisz dalej - Escape nadal zamyka otaczające okno.
+        onKeyDown: (event) => {
+            if (event.key !== 'Escape' || !open)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+        },
         'aria-expanded': open,
         'aria-controls': open ? panelId : undefined,
     };
     return (_jsxs("span", { ref: hostRef, className: cn('kpt-peek-host', className), ...rest, children: [isValidElement(trigger) ? (
             // Propsy idą na sam wyzwalacz, nie na opakowanie: `aria-expanded` ma siedzieć na tym
             // elemencie, po którym jeździ czytnik ekranu, a nie na obojętnym `<span>` obok.
-            cloneElement(trigger, mergeSlotProps(triggerProps, trigger.props))) : (_jsx("span", { ...triggerProps, children: trigger })), _jsx(KptOverlay, { open: open, anchor: triggerRef.current, onClose: close, offset: 8, withBackdrop: false, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-peek__panel", role: "dialog", tabIndex: -1, "aria-label": label || triggerRef.current?.textContent?.trim() || undefined, "data-pinned": pinned ? '' : undefined, onMouseEnter: hoverIn, onMouseLeave: hoverOut, onFocus: focusIn, onBlur: focusOut, onKeyDown: (event) => {
+            // eslint-disable-next-line react-hooks/refs -- mergeSlotProps tylko składa handlery; refy czytają one dopiero w zdarzeniach
+            cloneElement(trigger, mergeSlotProps(triggerProps, trigger.props))) : (_jsx("span", { ...triggerProps, children: trigger })), _jsx(KptOverlay, { open: open, anchor: anchor, onClose: close, offset: 8, withBackdrop: false, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-peek__panel", role: "dialog", tabIndex: -1, "aria-label": label || triggerName || undefined, "data-pinned": pinned ? '' : undefined, onMouseEnter: hoverIn, onMouseLeave: hoverOut, onFocus: focusIn, onBlur: focusOut, onKeyDown: (event) => {
                         if (event.key !== 'Escape')
                             return;
                         close();

package/dist/pick-list/llms.txt

@@ -10,20 +10,21 @@ Import: `import { KptPickList } from '@konce-pt/react';`
         <div class="kpt-pick-list__col">
           <div class="kpt-pick-list__header">Available</div>
           <ul class="kpt-pick-list__items">
-            <li class="kpt-pick-list__item is-selected">…</li>…
+            <li class="kpt-pick-list__item is-selected">...</li>...
           </ul>
         </div>
-        <div class="kpt-pick-list__controls">…four buttons…</div>
-        <div class="kpt-pick-list__col">…</div>
+        <div class="kpt-pick-list__controls">...four buttons...</div>
+        <div class="kpt-pick-list__col">...</div>
       </div>
     </div>
 
 ## Props
-- `source` / `defaultSource` / `onSourceChange` — the left list
-- `target` / `defaultTarget` / `onTargetChange` — the right list
-- `sourceHeader`, `targetHeader` — without them `pickList.available` / `pickList.selected`
-- `dragdrop` — `false` by default; enables dragging (opt-in, nothing changes without it)
-- `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
+- `source` / `defaultSource` / `onSourceChange` - the left list
+- `target` / `defaultTarget` / `onTargetChange` - the right list
+- `sourceHeader`, `targetHeader` - without them `pickList.available` / `pickList.selected`
+- `dragdrop` - `false` by default; enables dragging (opt-in, nothing changes without it)
+- `layoutMotion` - `'spring' | 'arc' | 'morph' | 'none'` (default from `KptMotionProvider`, else `spring`) - see below
+- `renderItem(item, index)` - required; the equivalent of `<ng-template let-item>`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The selection is kept by reference
@@ -33,7 +34,7 @@ they empty; a double-click or a drag only drops the one item that left.
 
 ## A double-click moves one item
 It sends exactly the row you clicked to the other panel and appends it at the end, whatever else is
-selected. It does not need `dragdrop` — the two clicks underneath cancel each other out, so the rest
+selected. It does not need `dragdrop` - the two clicks underneath cancel each other out, so the rest
 of the selection is left alone.
 
 ## Where a dragged item lands
@@ -57,19 +58,41 @@ half-controlled, or fully controlled by the form.
 The headers and the four move buttons come from the `pickList` namespace. Dragging and the
 double-click carry no visible label, so they add no dictionary keys.
 
+## Move motion
+`layoutMotion` animates moves and reorders made by the user (buttons, double-click, `Enter`,
+dragging):
+- `spring` - the row glides to its new place on a spring;
+- `arc` - the row lifts (shadow) and flies along an arc, tilted toward the move;
+- `morph` - the browser's own morph (View Transitions); without browser support the move is
+  instant, and the transition blocks clicks on the page for ~0.5 s;
+- `none` - no motion.
+
+A row crossing to the other list flies as a ghost - a copy above both panels, because the panel's
+`overflow` would clip the real row; the real row waits invisible where it lands. Neighbours close
+the gap or make room with a calm spring. The receiving list scrolls to the last moved row, so the
+landing is visible; rows scrolled out of view do not fly. A click in the middle of a flight starts
+the next one from where the rows are on screen.
+
+With no value it takes `layout` from `KptMotionProvider` (default `spring`); `enabled: false` there and
+the system "reduce motion" setting always win. Lists replaced from outside (`source`, `target`) switch
+instantly - the old state has to be measured before the DOM changes.
+
 ## 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;
+- `ArrowDown` / `ArrowUp` 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
+- `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
 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
+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.
+
+## Announcements and buttons
+A transfer between the lists is announced in a polite live region: `pickList.moved` with `{count}` and `{list}` (the target header). The move buttons carry `aria-disabled` when there is nothing to move (no selection, empty list) - they stay focusable, so focus does not drop to `<body>` when the selection clears after a move.