@konce-pt/react 0.12.0 → 0.15.0

package/dist/breadcrumb/breadcrumb.d.ts

@@ -8,7 +8,7 @@ export interface KptBreadcrumbItem {
 export interface KptBreadcrumbProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     items?: readonly KptBreadcrumbItem[];
     /**
-     * Zwykły klik w odnośnik. Aplikacja z routerem woła `event.preventDefault()` i nawiguje sama —
+     * Zwykły klik w odnośnik. Aplikacja z routerem woła `event.preventDefault()` i nawiguje sama -
      * bez tego `<a href>` przeładowuje stronę.
      */
     onNavigate?: (event: KptNavigateEvent<KptBreadcrumbItem>) => void;
@@ -16,7 +16,7 @@ export interface KptBreadcrumbProps extends Omit<ComponentPropsWithRef<'div'>, '
 /**
  * Ścieżka nawigacji (breadcrumbs).
  *
- * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` — to bieżąca strona, a link
+ * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` - to bieżąca strona, a link
  * prowadzący w to samo miejsce, w którym już jesteś, tylko myli.
  *
  * @example

package/dist/breadcrumb/breadcrumb.js

@@ -7,7 +7,7 @@ import { KptIcon } from "../icon/icon.js";
 /**
  * Ścieżka nawigacji (breadcrumbs).
  *
- * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` — to bieżąca strona, a link
+ * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` - to bieżąca strona, a link
  * prowadzący w to samo miejsce, w którym już jesteś, tylko myli.
  *
  * @example
@@ -15,7 +15,7 @@ import { KptIcon } from "../icon/icon.js";
  */
 export function KptBreadcrumb({ items = [], onNavigate, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
-    /** Zwykły klik w odnośnik → `onNavigate` (Ctrl/⌘/Shift, środkowy przycisk i `_blank` zostają natywne). */
+    /** Zwykły klik w odnośnik -> `onNavigate` (Ctrl/Cmd/Shift, środkowy przycisk i `_blank` zostają natywne). */
     const linkClick = (event, item) => {
         if (item.url && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
             onNavigate({ item, url: item.url, event: event.nativeEvent });
@@ -23,6 +23,6 @@ export function KptBreadcrumb({ items = [], onNavigate, locale, dictionary, clas
     };
     return (_jsx("div", { className: cn('kpt-breadcrumb-host', className), ...rest, children: _jsx("nav", { className: "kpt-breadcrumb", "aria-label": t('breadcrumb.label'), children: _jsx("ol", { className: "kpt-breadcrumb__list", children: items.map((item, index) => {
                     const last = index === items.length - 1;
-                    return (_jsxs("li", { className: "kpt-breadcrumb__item", children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, onClick: (event) => linkClick(event, item), children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, item.url ?? `${index}-${item.label}`));
+                    return (_jsxs("li", { className: "kpt-breadcrumb__item", children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, onClick: (event) => linkClick(event, item), children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, `${index}-${item.url ?? item.label}`));
                 }) }) }) }));
 }

package/dist/breadcrumb/llms.txt

@@ -8,7 +8,7 @@ A breadcrumb trail. Import: `import { KptBreadcrumb } from '@konce-pt/react';`
         <ol class="kpt-breadcrumb__list">
           <li class="kpt-breadcrumb__item">
             <a class="kpt-breadcrumb__link" href="/">Home</a>
-            <span class="kpt-icon-host kpt-breadcrumb__sep">…</span>
+            <span class="kpt-icon-host kpt-breadcrumb__sep">...</span>
           </li>
           <li class="kpt-breadcrumb__item">
             <span class="kpt-breadcrumb__current" aria-current="page">Showcase</span>
@@ -19,7 +19,7 @@ A breadcrumb trail. Import: `import { KptBreadcrumb } from '@konce-pt/react';`
 
 ## Props
 - `items`: `{ label, url? }[]`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The last item is never a link
@@ -43,7 +43,7 @@ screen reader announces how many levels the trail has. The current page carries
 
 ## Router
 Links are plain `<a href>`, so without a router a click reloads the page. `onNavigate` fires on a plain
-click (left button, no Ctrl/⌘/Shift, no `target="_blank"`) with `{ item, url, event }`: call
+click (left button, no Ctrl/Cmd/Shift, no `target="_blank"`) with `{ item, url, event }`: call
 `event.preventDefault()` and navigate with your router. Modified clicks stay native (a new tab, a new
 window). The library depends on no router.
 

package/dist/button/button.d.ts

@@ -13,7 +13,7 @@ export interface KptButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'h
     fullWidth?: boolean;
     /** Nazwa ikony wiodącej z rejestru (`KptIconRegistry`). */
     icon?: string;
-    /** Nazwa ikony zamykającej — zwykle znacznik kierunku, nie akcja. */
+    /** Nazwa ikony zamykającej - zwykle znacznik kierunku, nie akcja. */
     iconEnd?: string;
     /** Klasa dokładana do ikony wiodącej; obok stałego haka `.kpt-button__icon`. */
     iconClassName?: string;
@@ -27,10 +27,10 @@ export interface KptButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'h
 }
 /**
  * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
- * albo `<a>`, gdy podasz `href` — w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
+ * albo `<a>`, gdy podasz `href` - w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
  * dokładnie jak w porcie Angulara, bo host niesie własne style.
  *
- * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` — oba sposoby
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` - oba sposoby
  * dostają ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example

package/dist/button/button.js

@@ -6,10 +6,10 @@ import { renderAsChild } from "../internal/slot.js";
 import { KptIcon } from "../icon/icon.js";
 /**
  * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
- * albo `<a>`, gdy podasz `href` — w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
+ * albo `<a>`, gdy podasz `href` - w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
  * dokładnie jak w porcie Angulara, bo host niesie własne style.
  *
- * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` — oba sposoby
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` - oba sposoby
  * dostają ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
@@ -22,14 +22,14 @@ import { KptIcon } from "../icon/icon.js";
 export function KptButton({ variant = 'filled', size = 'md', type = 'button', loading = false, fullWidth = false, disabled = false, asChild = false, icon, iconEnd, iconClassName, iconEndClassName, href, target, rel, hostProps, className, children, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const isDisabled = disabled || loading;
-    // Zawartość jest identyczna we wszystkich trybach — w `asChild` podmieniamy tylko element
+    // Zawartość jest identyczna we wszystkich trybach - w `asChild` podmieniamy tylko element
     // zewnętrzny, nie strukturę środka, żeby SCSS (`__spinner`, `__content`) dalej działał.
     const content = (_jsxs(_Fragment, { children: [loading ? (_jsx("span", { className: "kpt-button__spinner", "aria-hidden": "true" })) : icon ? (_jsx(KptIcon, { className: cn('kpt-button__icon', iconClassName), name: icon })) : null, _jsx("span", { className: "kpt-button__content", children: asChildContent(asChild, children) }), iconEnd ? (_jsx(KptIcon, { className: cn('kpt-button__icon', 'kpt-button__icon--end', iconEndClassName), name: iconEnd })) : null] }));
     const buttonProps = {
         className: cn('kpt-button', loading && 'kpt-button--loading', className),
         'data-variant': variant,
         'data-size': size,
-        // React serializuje atrybuty aria-* z booleana na "true"/"false" — wynikowy DOM
+        // React serializuje atrybuty aria-* z booleana na "true"/"false" - wynikowy DOM
         // ma `aria-busy="true"`, tak jak port Angulara.
         'aria-busy': loading || undefined,
         ...rest,
@@ -37,7 +37,7 @@ export function KptButton({ variant = 'filled', size = 'md', type = 'button', lo
     return (_jsx("span", { className: cn('kpt-button-host', fullWidth && 'kpt-button-host--full', hostClassName), ...hostRest, children: renderInner({ asChild, children, buttonProps, content, href, target, rel, type, isDisabled }) }));
 }
 /**
- * Element wewnętrzny. `asChild` ma pierwszeństwo przed `href` — kto podstawia własny
+ * Element wewnętrzny. `asChild` ma pierwszeństwo przed `href` - kto podstawia własny
  * element, ten decyduje o znaczniku.
  */
 function renderInner(args) {
@@ -47,17 +47,17 @@ function renderInner(args) {
     }
     if (href !== undefined) {
         return (_jsx("a", { 
-            // Wyłączony odnośnik traci `href`, a nie tylko dostaje atrybut — inaczej dałoby się go
+            // Wyłączony odnośnik traci `href`, a nie tylko dostaje atrybut - inaczej dałoby się go
             // kliknąć i wejść na niego z klawiatury.
             href: isDisabled ? undefined : href, target: target, 
-            // `target="_blank"` bez `rel` to wektor na `window.opener` — dokładamy domyślne.
+            // `target="_blank"` bez `rel` to wektor na `window.opener` - dokładamy domyślne.
             rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, ...(buttonProps), children: content }));
     }
     return (_jsx("button", { type: type, disabled: isDisabled, ...buttonProps, children: content }));
 }
 /**
  * Stan wyłączenia dla podstawionego elementu. Natywny `<button>` dostaje `disabled`
- * (SCSS stylizuje `:disabled`); każdy inny element — `aria-disabled`, bo `disabled`
+ * (SCSS stylizuje `:disabled`); każdy inny element - `aria-disabled`, bo `disabled`
  * nie ma tam znaczenia.
  */
 function disabledProps(child, isDisabled) {

package/dist/button/llms.txt

@@ -1,15 +1,15 @@
 # KptButton (@konce-pt/react)
 
-The Koncept UI button. It renders a native `<button>` (semantics + form submit) — or an `<a>` when
-you pass `href` — inside a `.kpt-button-host` wrapper: two DOM levels, exactly like the Angular port,
+The Koncept UI button. It renders a native `<button>` (semantics + form submit) - or an `<a>` when
+you pass `href` - inside a `.kpt-button-host` wrapper: two DOM levels, exactly like the Angular port,
 because the host carries its own styles. Import: `import { KptButton } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-button-host">
       <button class="kpt-button" type="button" data-variant="filled" data-size="md">
-        <span class="kpt-button__icon kpt-icon-host">…</span>
-        <span class="kpt-button__content">…</span>
-        <span class="kpt-button__icon kpt-button__icon--end kpt-icon-host">…</span>
+        <span class="kpt-button__icon kpt-icon-host">...</span>
+        <span class="kpt-button__content">...</span>
+        <span class="kpt-button__icon kpt-button__icon--end kpt-icon-host">...</span>
       </button>
     </span>
 
@@ -18,39 +18,39 @@ because the host carries its own styles. Import: `import { KptButton } from '@ko
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (default 'md')
 - `type`: 'button' | 'submit' | 'reset' (default 'button')
 - `disabled`: boolean
-- `loading`: boolean — a spinner + blocked interaction, sets `aria-busy`
-- `fullWidth`: boolean — the full width of the container
-- `icon` / `iconEnd`: string — a name from the icon registry
-- `iconClassName` / `iconEndClassName`: string — an extra class on that icon
-- `href`, `target`, `rel`: string — render an `<a>` instead of a `<button>`
-- `asChild`: boolean — render the single child instead of `<button>`, keeping every class
+- `loading`: boolean - a spinner + blocked interaction, sets `aria-busy`
+- `fullWidth`: boolean - the full width of the container
+- `icon` / `iconEnd`: string - a name from the icon registry
+- `iconClassName` / `iconEndClassName`: string - an extra class on that icon
+- `href`, `target`, `rel`: string - render an `<a>` instead of a `<button>`
+- `asChild`: boolean - render the single child instead of `<button>`, keeping every class
 - `hostProps`: props for the `.kpt-button-host` wrapper
 - `className`, `ref` and every other `<button>` prop go to the INNER element
 
 ## Events
-No events of its own — bind `onClick` and it lands on the native `<button>`.
+No events of its own - bind `onClick` and it lands on the native `<button>`.
 
 ## Icons
 Two ways in, one result. `icon` and `iconEnd` take a name from the icon registry and the component
 renders it; anything put in `children` is laid out the same way. Both get the gap from
-`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) — the
+`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) - the
 content box is a flex container, so an icon sits on the centre line rather than on the text baseline.
 
 `loading` replaces the leading icon with the spinner instead of standing next to it, and the
 spinner takes that icon's size, so the label does not jump when loading starts. The trailing icon
-stays put — it usually marks direction rather than the action.
+stays put - it usually marks direction rather than the action.
 
 `iconClassName` / `iconEndClassName` add a class next to the permanent `.kpt-button__icon` hook, for
 the cases where one instance needs a different colour or a rotation.
 
 ## Link and the `link` variant
-Two different things. `variant="link"` only changes the looks — underline, transparent background,
+Two different things. `variant="link"` only changes the looks - underline, transparent background,
 no side padding, so it sits inside a sentence. `href` changes the element: the component renders
 `<a class="kpt-button">` instead of `<button>`, and the two combine freely (a filled button can be
 a link, a `link` variant can be a plain button). `asChild` wins over `href`: whoever substitutes
 their own element decides the tag.
 
-A disabled link loses its `href` rather than just gaining an attribute — otherwise it would stay
+A disabled link loses its `href` rather than just gaining an attribute - otherwise it would stay
 clickable and reachable with the keyboard; it also gets `aria-disabled="true"` and `tabindex="-1"`.
 `target="_blank"` without an explicit `rel` gets `rel="noopener noreferrer"`.
 
@@ -68,9 +68,17 @@ clickable and reachable with the keyboard; it also gets `aria-disabled="true"` a
 ## asChild
 The wrapper is still rendered; only the inner element is swapped. The content stays wrapped in
 `.kpt-button__content`, so the spinner and the layout keep working. A disabled substituted
-element gets `disabled` when it is a native `<button>`, and `aria-disabled` otherwise — an
+element gets `disabled` when it is a native `<button>`, and `aria-disabled` otherwise - an
 element with no `:disabled` state therefore does not get the dimmed look.
 
+## Motion
+Pressed, it squeezes slightly and springs back on release (shared mixin `styles/_press.scss`). Entering `loading` pops the spinner in where the leading icon was
+and dims the label. `link` does not squeeze (text in a sentence would jitter): its colour and
+underline change smoothly and it dims while pressed. `elevated` lifts on hover and is pressed down
+(the shadow shrinks smoothly). A pressed button uses its own variant's hover colour - only `filled` has
+a separate pressed colour. Pure CSS; durations follow `--kpt-motion-scale`, so `enabled: false` turns it off, and it drops out
+under "reduce motion".
+
 ## Tokens (styling)
 `--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`, and one group per variant:
 `--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-elevated-{bg,fg,bg-hover}`,
@@ -80,13 +88,13 @@ element with no `:disabled` state therefore does not get the dimmed look.
 The elevated variant also reaches for `--kpt-shadow-sm` and `--kpt-shadow-md`.
 
 ## The state layer (hover / active)
-Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 → 1), not by
+Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 -> 1), not by
 animating the button's own `background-color`. The CSS is shared with the Angular port, where
 the pattern was introduced to stop the variant flicker on first paint; here it simply comes
 along with the stylesheet.
 
 ## Accessibility
-- A native `<button>` — full keyboard and screen reader support.
+- A native `<button>` - full keyboard and screen reader support.
 - `loading` sets `aria-busy="true"` and disables the button.
 - An `<a>` matches no `:disabled`, so the disabled look keys off `[aria-disabled='true']` as well.
 - The focus ring comes from `@konce-pt/styles` (`--kpt-color-focus-ring`).

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

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef } from 'react';
 import type { KptHostProps } from '../internal/types.ts';
 import type { KptOption } from '../shared/types.ts';
 export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange' | 'defaultValue'> {
@@ -8,32 +8,32 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     onValueChange?: (value: T) => void;
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
-    /** Tylko do odczytu — wybór widać, nie da się go zmienić (`aria-readonly`). */
+    /** Tylko do odczytu - wybór widać, nie da się go zmienić (`aria-readonly`). */
     readOnly?: boolean;
-    /** Pole wymagane — `aria-required`. */
+    /** Pole wymagane - `aria-required`. */
     required?: boolean;
-    /** Id grupy; bez niego generowane, w `KptFormField` — z wrappera. */
+    /** Id grupy; bez niego generowane, w `KptFormField` - z wrappera. */
     id?: string;
     /** Nazwa dostępna grupy, gdy nie opisuje jej etykieta (`KptFormField`). */
     ariaLabel?: string | null;
     invalid?: boolean;
     touched?: boolean;
-    /** Wywoływane po wyborze — moment, w którym kontrolka staje się dotknięta. */
+    /** Wywoływane po wyborze - moment, w którym kontrolka staje się dotknięta. */
     onTouch?: () => void;
-    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i dymek `KptTooltip`. */
+    /** Chowa etykiety - zostaje sama ikona, a `label` zasila `aria-label` i dymek `KptTooltip`. */
     iconOnly?: boolean;
     /** Propsy wrappera hosta (`.kpt-button-group-host`). */
     hostProps?: KptHostProps<'span'>;
 }
 /**
- * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
+ * Segmentowana grupa przycisków (toggle) - pojedynczy wybór z opcji.
  *
  * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
  * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
  * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
- * Wybór jest wyłączny, więc grupa to `role="radiogroup"` z pozycjami `role="radio"` (APG) —
- * czytnik ogłasza „2 z 3”. Jeden przystanek Tab, strzałki przenoszą wybór, `Home`/`End` na skrajne.
+ * Wybór jest wyłączny, więc grupa to `role="radiogroup"` z pozycjami `role="radio"` (APG) -
+ * czytnik ogłasza "2 z 3". Jeden przystanek Tab, strzałki przenoszą wybór, `Home`/`End` na skrajne.
  *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}

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

@@ -1,5 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { playIndicatorMotion, resolveToggleMotion } 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 { KptIcon } from "../icon/icon.js";
@@ -7,14 +10,14 @@ import { KptTooltip } from "../tooltip/tooltip.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 /**
- * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
+ * Segmentowana grupa przycisków (toggle) - pojedynczy wybór z opcji.
  *
  * Działa kontrolowana (`value` + `onValueChange`) i niekontrolowana (`defaultValue`).
  * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
  * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
  *
- * Wybór jest wyłączny, więc grupa to `role="radiogroup"` z pozycjami `role="radio"` (APG) —
- * czytnik ogłasza „2 z 3”. Jeden przystanek Tab, strzałki przenoszą wybór, `Home`/`End` na skrajne.
+ * Wybór jest wyłączny, więc grupa to `role="radiogroup"` z pozycjami `role="radio"` (APG) -
+ * czytnik ogłasza "2 z 3". Jeden przystanek Tab, strzałki przenoszą wybór, `Home`/`End` na skrajne.
  *
  * @example
  * <KptButtonGroup value={view} onValueChange={setView}
@@ -29,19 +32,38 @@ export function KptButtonGroup({ options = [], value, defaultValue, onValueChang
         defaultValue,
         onChange: onValueChange,
     });
-    /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    /** Grupa nie dostaje nazwy z `label[for]` - stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-button-group');
     const showInvalid = invalid && (touched ?? true);
     const disabledMap = options.map((option) => disabled || !!option.disabled);
     /** Jedyny przystanek Tab: wybrana pozycja, a bez wyboru pierwsza dozwolona. */
     const tabStop = rovingStop(disabledMap, options.findIndex((option) => option.value === current));
-    const select = (option) => {
+    const toggleMotion = resolveToggleMotion(undefined, useKptMotion());
+    /** Tło wyboru zmierzone przed zmianą - przejeżdża z niego na nową pozycję po renderze. */
+    const pendingIndicator = useRef(null);
+    // Przed malowaniem - inaczej mignęłaby klatka z tłem już na nowej pozycji.
+    useLayoutEffect(() => {
+        const pending = pendingIndicator.current;
+        pendingIndicator.current = null;
+        const active = pending?.group.querySelector('.kpt-button-group__item.is-active');
+        if (pending && active)
+            playIndicatorMotion(pending.before, active);
+    });
+    /**
+     * Wybór pozycji. Tło wyboru przejeżdża z poprzedniej pozycji na nową (za `toggle` z
+     * `KptMotionProvider`, tylko `spring`).
+     */
+    const select = (option, from) => {
         if (option.disabled || disabled || readOnly)
             return;
+        const group = from.closest('.kpt-button-group');
+        const before = group?.querySelector('.kpt-button-group__item.is-active')?.getBoundingClientRect();
+        if (group && before && toggleMotion === 'spring')
+            pendingIndicator.current = { group, before };
         setCurrent(option.value);
         onTouch?.();
     };
-    /** Strzałki (pion traktowany jak poziom), `Home`/`End`: fokus i wybór idą razem — wzorzec radia. */
+    /** Strzałki (pion traktowany jak poziom), `Home`/`End`: fokus i wybór idą razem - wzorzec radia. */
     const onKeyDown = (event) => {
         const vertical = { ArrowDown: 'ArrowRight', ArrowUp: 'ArrowLeft' };
         const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
@@ -53,10 +75,10 @@ export function KptButtonGroup({ options = [], value, defaultValue, onValueChang
             return;
         event.preventDefault();
         event.currentTarget.querySelectorAll('[role="radio"]')[next]?.focus();
-        select(options[next]);
+        select(options[next], event.currentTarget);
     };
     return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', showInvalid && 'kpt-button-group--invalid', className), role: "radiogroup", id: field.id, "data-size": size, "data-icon-only": iconOnly ? '' : undefined, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-invalid": showInvalid || undefined, onKeyDown: onKeyDown, ...rest, children: options.map((option, index) => {
                 const active = option.value === current;
-                return (_jsx(KptTooltip, { text: iconOnly ? option.label : '', children: _jsxs("button", { type: "button", role: "radio", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-checked": active, "aria-label": iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }) }, typeof option.value === 'object' && option.value !== null ? `#${index}` : String(option.value)));
+                return (_jsx(KptTooltip, { text: iconOnly ? option.label : '', children: _jsxs("button", { type: "button", role: "radio", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-checked": active, "aria-label": iconOnly ? option.label : undefined, onClick: (event) => select(option, event.currentTarget), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }) }, typeof option.value === 'object' && option.value !== null ? `#${index}` : String(option.value)));
             }) }) }));
 }

package/dist/button-group/llms.txt

@@ -1,13 +1,13 @@
 # KptButtonGroup (@konce-pt/react)
 
-A segmented button group (toggle) — a single choice out of the options.
+A segmented button group (toggle) - a single choice out of the options.
 Import: `import { KptButtonGroup } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-button-group-host">
       <div class="kpt-button-group" role="radiogroup" data-size="md">
         <button type="button" role="radio" class="kpt-button-group__item is-active" aria-checked="true" tabindex="0">
-          <span class="kpt-button-group__icon kpt-icon-host">…</span>
+          <span class="kpt-button-group__icon kpt-icon-host">...</span>
           <span class="kpt-button-group__label">List</span>
         </button>
         <button type="button" role="radio" class="kpt-button-group__item" aria-checked="false" tabindex="-1">
@@ -17,31 +17,31 @@ Import: `import { KptButtonGroup } from '@konce-pt/react';`
     </span>
 
 ## Props
-- `options`: `KptOption<T>[]` — `{ label, value, disabled?, icon? }`
-- `value` / `defaultValue` / `onValueChange` — controlled or uncontrolled
+- `options`: `KptOption<T>[]` - `{ label, value, disabled?, icon? }`
+- `value` / `defaultValue` / `onValueChange` - controlled or uncontrolled
 - `size`: 'sm' | 'md' | 'lg' (default 'md')
-- `disabled`: boolean — disables the whole group; a single option disables itself
-- `iconOnly`: boolean — hides the labels and leaves the icons alone
-- `onTouch()` — fires on a pick, the moment the control becomes touched
-- `hostProps` — props for the `.kpt-button-group-host` wrapper
+- `disabled`: boolean - disables the whole group; a single option disables itself
+- `iconOnly`: boolean - hides the labels and leaves the icons alone
+- `onTouch()` - fires on a pick, the moment the control becomes touched
+- `hostProps` - props for the `.kpt-button-group-host` wrapper
 - `className`, `ref` and every other `<div>` prop go to `.kpt-button-group`
 
 ## Icons
 An option carries its icon by name: `KptOption.icon` is a key from the icon registry, and the group
 renders it before the label. The item is a flex box, so the icon gets the `--kpt-button-gap` spacing
-and a size that follows `size` (1rem at `sm` up to 1.25rem at `lg`) — the same scale as `KptButton`,
+and a size that follows `size` (1rem at `sm` up to 1.25rem at `lg`) - the same scale as `KptButton`,
 so a group standing next to a button matches it.
 
 `iconOnly` drops the label from the page but keeps it as the accessible name: the item gets both
 `aria-label` and `title`, so a screen reader still says "Grid" and a mouse user gets a tooltip.
 Each item also becomes a square, because a lone icon inside a 1rem side padding looks adrift.
 
-The icon takes its colour from `currentColor`, so the active item — filled with
-`--kpt-color-primary` — flips the icon to `--kpt-color-on-primary` with no extra rule.
+The icon takes its colour from `currentColor`, so the active item - filled with
+`--kpt-color-primary` - flips the icon to `--kpt-color-on-primary` with no extra rule.
 
 ## Values of any type
 The value is generic, so options can carry objects, not just strings. Keys come from
-`String(option.value)`, so distinct options need distinct string forms — for object values give
+`String(option.value)`, so distinct options need distinct string forms - for object values give
 each one a stable id and map back to the object yourself.
 
 ## Examples
@@ -55,14 +55,20 @@ each one a stable id and map back to the object yourself.
 
     <KptButtonGroup size="sm" defaultValue="M" options={sizeOptions} />
 
+## Motion
+The selection background slides from the previously selected option to the new one on a spring (a FLIP
+of the `::before` layer, `playIndicatorMotion` from `@konce-pt/motion`), the label colour crossfades,
+and a pressed option squeezes slightly. The slide follows `toggle` from `KptMotionProvider` (`spring` only);
+`enabled: false` and the system "reduce motion" setting always win.
+
 ## Tokens
 `--kpt-color-surface`, `--kpt-color-muted`, `--kpt-color-primary` (the active segment),
 `--kpt-color-border-strong`, `--kpt-radius-md`, `--kpt-button-gap`.
 
 ## Accessibility
-A `role="radiogroup"` of native buttons with `role="radio"` and `aria-checked` — a screen reader
+A `role="radiogroup"` of native buttons with `role="radio"` and `aria-checked` - a screen reader
 announces which segment is on and "2 of 3"; one Tab stop, arrows move the choice. With `iconOnly`
 the name comes from `aria-label`, so the announcement does not degrade to a bare "radio button".
 
 ## Read-only and required
-The group is `role="radiogroup"` with `role="radio"` items (`aria-checked`) instead of `aria-pressed` buttons — the choice is exclusive, so a screen reader announces "2 of 3". One Tab stop, arrows move the selection, `Home`/`End` jump to the ends. New: `id`, `ariaLabel`, `readOnly`, `required`, and the error state (`invalid` + `touched`) visible on the group itself.
+The group is `role="radiogroup"` with `role="radio"` items (`aria-checked`) instead of `aria-pressed` buttons - the choice is exclusive, so a screen reader announces "2 of 3". One Tab stop, arrows move the selection, `Home`/`End` jump to the ends. New: `id`, `ariaLabel`, `readOnly`, `required`, and the error state (`invalid` + `touched`) visible on the group itself.

package/dist/card/card.d.ts

@@ -9,15 +9,15 @@ export interface KptCardProps extends ComponentPropsWithRef<'div'> {
     header?: string;
     /**
      * Robi z `header` nagłówek strony (`role="heading"` z `aria-level`), żeby karta pojawiła się
-     * w strukturze dokumentu. Bez tego `header` to sam tekst — część kart (np. kafelki statystyk)
+     * w strukturze dokumentu. Bez tego `header` to sam tekst - część kart (np. kafelki statystyk)
      * nie powinna zaśmiecać spisu nagłówków.
      */
     headingLevel?: KptCardHeadingLevel;
-    /** Body bez wewnętrznego paddingu — dla układów zarządzających własnymi sekcjami. */
+    /** Body bez wewnętrznego paddingu - dla układów zarządzających własnymi sekcjami. */
     flush?: boolean;
 }
 /**
- * Karta Koncept UI — powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
+ * Karta Koncept UI - powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
  *
  * Ciało karty renderuje sama karta; `flush` zdejmuje jego padding. Do bogatych układów
  * służą komponenty składane: `KptCard.Media`, `.Lead`, `.Title`, `.Subtitle`, `.Section`,
@@ -25,7 +25,7 @@ export interface KptCardProps extends ComponentPropsWithRef<'div'> {
  *
  * @example
  * <KptCard header="Ustawienia" variant="outlined">
- *   <p>Treść…</p>
+ *   <p>Treść...</p>
  *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
  * </KptCard>
  */
@@ -42,13 +42,13 @@ export declare namespace KptCard {
     var Meta: typeof KptCardMeta;
     var Actions: typeof KptCardActions;
 }
-/** Nagłówek karty — alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
+/** Nagłówek karty - alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
 export declare function KptCardHeader({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
 export declare namespace KptCardHeader {
     var kptCardSlot: "header";
 }
 /**
- * Stopka karty. Nosi atrybut `kptcardfooter` — to po nim celuje wspólny SCSS
+ * Stopka karty. Nosi atrybut `kptcardfooter` - to po nim celuje wspólny SCSS
  * (nazwy atrybutów w selektorach CSS są w HTML case-insensitive, więc ta sama
  * reguła `[kptCardFooter]` obsługuje oba porty).
  */
@@ -64,11 +64,11 @@ export declare function KptCardLead({ className, ...rest }: Readonly<ComponentPr
 export declare function KptCardTitle({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
 /** Typografia podtytułu (kolor przygaszony). */
 export declare function KptCardSubtitle({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
-/** Sekcja z paddingiem — kolumna z odstępami. */
+/** Sekcja z paddingiem - kolumna z odstępami. */
 export declare function KptCardSection({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
 /** Wiersz chipów/tagów. */
 export declare function KptCardTags({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
-/** Wiersz „ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
+/** Wiersz "ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
 export declare function KptCardMeta({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;
 /** Wiersz przycisków o równych szerokościach. */
 export declare function KptCardActions({ className, ...rest }: Readonly<ComponentPropsWithRef<'div'>>): import("react").JSX.Element;

package/dist/card/card.js

@@ -9,7 +9,7 @@ import { slotChildren } from "../internal/slot-children.js";
  * (`[kptCardFooter]` poza body) trafia we właściwe węzły.
  */
 /**
- * Karta Koncept UI — powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
+ * Karta Koncept UI - powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
  *
  * Ciało karty renderuje sama karta; `flush` zdejmuje jego padding. Do bogatych układów
  * służą komponenty składane: `KptCard.Media`, `.Lead`, `.Title`, `.Subtitle`, `.Section`,
@@ -17,7 +17,7 @@ import { slotChildren } from "../internal/slot-children.js";
  *
  * @example
  * <KptCard header="Ustawienia" variant="outlined">
- *   <p>Treść…</p>
+ *   <p>Treść...</p>
  *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
  * </KptCard>
  */
@@ -39,13 +39,13 @@ export function KptCard({ variant = 'elevated', header, headingLevel, flush = fa
 function slotOf(child) {
     return child.type?.kptCardSlot ?? 'body';
 }
-/** Nagłówek karty — alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
+/** Nagłówek karty - alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
 export function KptCardHeader({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__header', className), ...rest });
 }
 KptCardHeader.kptCardSlot = 'header';
 /**
- * Stopka karty. Nosi atrybut `kptcardfooter` — to po nim celuje wspólny SCSS
+ * Stopka karty. Nosi atrybut `kptcardfooter` - to po nim celuje wspólny SCSS
  * (nazwy atrybutów w selektorach CSS są w HTML case-insensitive, więc ta sama
  * reguła `[kptCardFooter]` obsługuje oba porty).
  */
@@ -69,7 +69,7 @@ export function KptCardTitle({ className, ...rest }) {
 export function KptCardSubtitle({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__subtitle', className), ...rest });
 }
-/** Sekcja z paddingiem — kolumna z odstępami. */
+/** Sekcja z paddingiem - kolumna z odstępami. */
 export function KptCardSection({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__section', className), ...rest });
 }
@@ -77,7 +77,7 @@ export function KptCardSection({ className, ...rest }) {
 export function KptCardTags({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__tags', className), ...rest });
 }
-/** Wiersz „ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
+/** Wiersz "ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
 export function KptCardMeta({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__meta', className), ...rest });
 }