@konce-pt/react 0.12.0 → 0.14.0

package/dist/speed-dial/llms.txt

@@ -1,25 +1,25 @@
 # KptSpeedDial (@konce-pt/react)
 
-A speed dial — a FAB that fans out a set of actions. Built on `KptFab`.
+A speed dial - a FAB that fans out a set of actions. Built on `KptFab`.
 Import: `import { KptSpeedDial } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-speed-dial-host">
       <div class="kpt-speed-dial is-open" data-direction="up">
         <div class="kpt-speed-dial__actions">
-          <button class="kpt-speed-dial__action" aria-label="Upload file">…</button>…
+          <button class="kpt-speed-dial__action" aria-label="Upload file">...</button>...
         </div>
-        <span class="kpt-fab-host"><button class="kpt-fab">…</button></span>
+        <span class="kpt-fab-host"><button class="kpt-fab">...</button></span>
       </div>
       <div class="kpt-speed-dial__backdrop"></div>
     </div>
 
 ## Props
-- `items`: `KptMenuItem<T>[]` — the actions (`label`, `icon`, `disabled`)
+- `items`: `KptMenuItem<T>[]` - the actions (`label`, `icon`, `disabled`)
 - `direction`: `'up'` (default) | `'down'` | `'left'` | `'right'`
-- `icon`: string (default `'plus'`) — the SCSS rotates it 45° when open
-- `ariaLabel`: string — the closed-state label; without it `speedDial.actions`
-- `onSelect(item)` — fired on pick; a disabled item fires nothing
+- `icon`: string (default `'plus'`) - the SCSS rotates it 45° when open
+- `ariaLabel`: string - the closed-state label; without it `speedDial.actions`
+- `onSelect(item)` - fired on pick; a disabled item fires nothing
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The label follows the state
@@ -37,6 +37,12 @@ present would swallow clicks meant for the page underneath.
 ## i18n
 `speedDial.actions` and `common.close`; `locale` and `dictionary` override them per instance.
 
+## Motion
+The actions fan out from the button in a cascade - the nearest first, on a spring, from the side of the
+button - and fold back in reverse order; the trigger icon turns on a spring. The container hides
+(`visibility`) only after the last action, so the closing cascade is not cut off. Pressed, it squeezes slightly and springs back on release (shared mixin `styles/_press.scss`). Pure CSS; durations follow `--kpt-motion-scale`, so `enabled: false` turns it off, and it drops out
+under "reduce motion".
+
 ## Tokens
 The main button comes from `KptFab`; the actions use `--kpt-color-surface-raised` and
 `--kpt-elevation-2`.
@@ -44,7 +50,7 @@ The main button comes from `KptFab`; the actions use `--kpt-color-surface-raised
 ## Accessibility
 - The main button carries `aria-expanded` and `aria-controls` pointing at the actions container.
 - Closed actions are `visibility: hidden` (switched after the fade-out), so they are out of the Tab
-  order and the accessibility tree — not just transparent.
+  order and the accessibility tree - not just transparent.
 - `Escape` anywhere in the dial closes it and returns focus to the main button.
 - Every action is a `<button>` labelled with its own `label`, so the fan works from the keyboard even
   when the actions show icons only.

package/dist/speed-dial/speed-dial.d.ts

@@ -12,7 +12,7 @@ export interface KptSpeedDialProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     onSelect?: (item: KptMenuItem<T>) => void;
 }
 /**
- * Speed dial — FAB rozwijający zestaw akcji wachlarzem. Buduje na `KptFab`.
+ * Speed dial - FAB rozwijający zestaw akcji wachlarzem. Buduje na `KptFab`.
  *
  * @example
  * <KptSpeedDial items={actions} direction="up" onSelect={onAction} />

package/dist/speed-dial/speed-dial.js

@@ -7,7 +7,7 @@ import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptFab } from "../fab/fab.js";
 import { KptIcon } from "../icon/icon.js";
 /**
- * Speed dial — FAB rozwijający zestaw akcji wachlarzem. Buduje na `KptFab`.
+ * Speed dial - FAB rozwijający zestaw akcji wachlarzem. Buduje na `KptFab`.
  *
  * @example
  * <KptSpeedDial items={actions} direction="up" onSelect={onAction} />

package/dist/spinner/llms.txt

@@ -9,13 +9,13 @@ A loading indicator. Import: `import { KptSpinner } from '@konce-pt/react';`
     </span>
 
 ## Props
-- `size`: string (default '1.5rem') — a CSS length, applied to width and height
-- `label`: string — the accessibility label; omitted falls back to `spinner.label`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `size`: string (default '1.5rem') - a CSS length, applied to width and height
+- `label`: string - the accessibility label; omitted falls back to `spinner.label`
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## The colour is inherited
-The host sets `color: var(--kpt-color-primary)`, and the ring is drawn in `currentColor` — so the
+The host sets `color: var(--kpt-color-primary)`, and the ring is drawn in `currentColor` - so the
 spinner is primary by default, and anything that sets `color` on the host changes it. Pass
 `style={{ color: 'inherit' }}` (or a class) to take the colour of the text around it, e.g. inside a
 filled chip. There is no colour prop, on purpose.
@@ -23,15 +23,15 @@ filled chip. There is no colour prop, on purpose.
 ## Examples
     <KptSpinner />
     <KptSpinner size="2rem" label="Loading data" />
-    <KptButton disabled><KptSpinner size="1em" /> Saving…</KptButton>
+    <KptButton disabled><KptSpinner size="1em" /> Saving...</KptButton>
 
 ## Tokens
-None of its own — the colour is `--kpt-color-primary` on the host (drawn in `currentColor`), the
+None of its own - the colour is `--kpt-color-primary` on the host (drawn in `currentColor`), the
 size comes from the prop, the ring width is 8% of the size (at least 2px), the speed from
 `--kpt-motion-duration-*`.
 
 ## Accessibility
 The ring is `aria-hidden`; next to it sits a visually hidden `.kpt-spinner__label` with
-`role="status"`. Its text — `label`, or `spinner.label` — is written a frame after the spinner
+`role="status"`. Its text - `label`, or `spinner.label` - is written a frame after the spinner
 appears, because a status region that is born already filled in is skipped by most screen readers.
 Under `prefers-reduced-motion` the rotation slows down instead of stopping.

package/dist/spinner/spinner.d.ts

@@ -10,7 +10,7 @@ export interface KptSpinnerProps extends Omit<ComponentPropsWithRef<'span'>, 'ch
  *
  * Pierścień jest dekoracją (`aria-hidden`); dla czytnika jest osobny, wizualnie ukryty region
  * `role="status"` z etykietą. Tekst trafia do regionu klatkę po pojawieniu się spinnera: region,
- * który powstaje od razu z treścią, większość czytników przemilcza — ogłaszają dopiero zmianę.
+ * który powstaje od razu z treścią, większość czytników przemilcza - ogłaszają dopiero zmianę.
  *
  * @example
  * <KptSpinner />

package/dist/spinner/spinner.js

@@ -8,7 +8,7 @@ import { useKptMessages } from "../i18n/i18n-context.js";
  *
  * Pierścień jest dekoracją (`aria-hidden`); dla czytnika jest osobny, wizualnie ukryty region
  * `role="status"` z etykietą. Tekst trafia do regionu klatkę po pojawieniu się spinnera: region,
- * który powstaje od razu z treścią, większość czytników przemilcza — ogłaszają dopiero zmianę.
+ * który powstaje od razu z treścią, większość czytników przemilcza - ogłaszają dopiero zmianę.
  *
  * @example
  * <KptSpinner />

package/dist/split-button/llms.txt

@@ -1,37 +1,37 @@
 # KptSplitButton (@konce-pt/react)
 
-A split button — a primary action plus a dropdown of further actions.
+A split button - a primary action plus a dropdown of further actions.
 Import: `import { KptSplitButton } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-split-button-host">
       <div class="kpt-split-button" data-variant="filled">
         <button class="kpt-split-button__main" type="button">Save</button>
-        <button class="kpt-split-button__toggle" type="button" aria-label="More actions">…chevron…</button>
+        <button class="kpt-split-button__toggle" type="button" aria-label="More actions">...chevron...</button>
       </div>
     </span>
     <!-- while open, in a portal: -->
-    <div class="kpt-split-button__panel" role="menu">…rows…</div>
+    <div class="kpt-split-button__panel" role="menu">...rows...</div>
 
 ## Props
-- `variant`: `KptSplitButtonVariant` = 'filled' | 'tonal' | 'outline' | 'text' (default 'filled') —
+- `variant`: `KptSplitButtonVariant` = 'filled' | 'tonal' | 'outline' | 'text' (default 'filled') -
   the subset of `KptButtonVariant` that has a style; `outline` and `text` use the `--kpt-button-outline-*`
   and `--kpt-button-text-*` tokens, so they match `kpt-button` in the same row
-- `items`: `KptMenuItem<T>[]` — the same shape as `KptMenu`
-- `disabled`: boolean — disables both buttons
-- `onPrimaryClick()` — the main action
-- `onSelect(item)` — a pick from the menu
-- `open` / `defaultOpen` / `onOpenChange` — the panel state
-- `children` — the content of the main action
-- `locale`, `dictionary` — i18n overrides for this component only
+- `items`: `KptMenuItem<T>[]` - the same shape as `KptMenu`
+- `disabled`: boolean - disables both buttons
+- `onPrimaryClick()` - the main action
+- `onSelect(item)` - a pick from the menu
+- `open` / `defaultOpen` / `onOpenChange` - the panel state
+- `children` - the content of the main action
+- `locale`, `dictionary` - i18n overrides for this component only
 
 ## The panel aligns to the right
 The toggle sits on the right-hand side of the control, so the panel is anchored by its RIGHT edge
 (`align="end"` on the overlay). Anchored to the left it would hang off the control instead of under
-it — the same reasoning the Angular port encodes in its CDK position list.
+it - the same reasoning the Angular port encodes in its CDK position list.
 
 ## Shared rows
-The panel renders the same rows as `KptMenu` — icons, descriptions, badges, separators, headers and
+The panel renders the same rows as `KptMenu` - icons, descriptions, badges, separators, headers and
 the `danger` modifier all behave identically, only the BEM block differs.
 
 ## i18n
@@ -39,9 +39,9 @@ The toggle's label comes from `splitButton.more` in the dictionary.
 
 ## Keyboard
 The toggle is a menu button: `aria-haspopup="menu"`, a live `aria-expanded`, `aria-controls` while
-open. `↓` / `↑` on it open the menu on the first / last item; inside, `↓` / `↑` wrap, `Home` / `End`
+open. `ArrowDown` / `ArrowUp` on it open the menu on the first / last item; inside, `ArrowDown` / `ArrowUp` wrap, `Home` / `End`
 jump, `Escape` / `Tab` close, and closing or picking returns focus to the toggle. Same rules as the
-menu — see the `KptMenu` docs.
+menu - see the `KptMenu` docs.
 
 ## Examples
     <KptSplitButton items={items} onPrimaryClick={save} onSelect={onItem}>Save</KptSplitButton>
@@ -53,6 +53,12 @@ menu — see the `KptMenu` docs.
       { label: 'Discard', value: 'discard', danger: true },
     ];
 
+## Motion
+Pressing either part squeezes the whole pill (one part alone would come apart from the other inside
+the clipped container); the arrow turns over when the menu opens and the menu slides out from under the
+button. Pure CSS; durations follow `--kpt-motion-scale`, so `enabled: false` turns it off, and it drops out
+under "reduce motion".
+
 ## Tokens
 The `--kpt-button-*` tokens of the chosen variant, plus `--kpt-color-surface-raised` and
 `--kpt-elevation-3` for the panel.

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

@@ -2,7 +2,7 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 import type { KptMenuItem } from '../menu/menu-item.ts';
 import type { KptButtonVariant } from '../button/button.tsx';
-/** Warianty, które mają styl — podzbiór `KptButtonVariant`. */
+/** Warianty, które mają styl - podzbiór `KptButtonVariant`. */
 export type KptSplitButtonVariant = Extract<KptButtonVariant, 'filled' | 'tonal' | 'outline' | 'text'>;
 export interface KptSplitButtonProps<T> extends Omit<ComponentPropsWithRef<'span'>, 'onSelect'>, KptI18nOverrides {
     variant?: KptSplitButtonVariant;
@@ -19,7 +19,7 @@ export interface KptSplitButtonProps<T> extends Omit<ComponentPropsWithRef<'span
     children?: ReactNode;
 }
 /**
- * Przycisk dzielony — akcja główna plus rozwijane menu dodatkowych akcji.
+ * Przycisk dzielony - akcja główna plus rozwijane menu dodatkowych akcji.
  *
  * Panel wyrównuje się do PRAWEJ krawędzi przycisku, nie do lewej: rozwijacz siedzi po prawej
  * stronie kontrolki, więc menu otwierające się w lewo nie wychodzi poza nią.

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

@@ -10,7 +10,7 @@ import { KptIcon } from "../icon/icon.js";
 import { MenuRows } from "../menu/menu-rows.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 /**
- * Przycisk dzielony — akcja główna plus rozwijane menu dodatkowych akcji.
+ * Przycisk dzielony - akcja główna plus rozwijane menu dodatkowych akcji.
  *
  * Panel wyrównuje się do PRAWEJ krawędzi przycisku, nie do lewej: rozwijacz siedzi po prawej
  * stronie kontrolki, więc menu otwierające się w lewo nie wychodzi poza nią.
@@ -21,14 +21,14 @@ import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 export function KptSplitButton({ variant = 'filled', items = [], disabled = false, onPrimaryClick, onSelect, open, defaultOpen = false, onOpenChange, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const toggleRef = useRef(null);
-    /** Kotwica panelu — w stanie, bo czyta ją render; ref zostaje dla przywracania fokusu. */
+    /** Kotwica panelu - w stanie, bo czyta ją render; ref zostaje dla przywracania fokusu. */
     const [toggleEl, setToggleEl] = useState(null);
     const setToggle = useCallback((element) => {
         toggleRef.current = element;
         setToggleEl(element);
     }, []);
     const panelRef = useRef(null);
-    /** Którą pozycję skupić po otwarciu — strzałka w górę na przycisku otwiera „od końca”. */
+    /** Którą pozycję skupić po otwarciu - strzałka w górę na przycisku otwiera "od końca". */
     const focusEdge = useRef('first');
     const panelId = useKptId(undefined, 'kpt-split-button-menu');
     const [isOpen, setOpen] = useControllableState({
@@ -48,7 +48,7 @@ export function KptSplitButton({ variant = 'filled', items = [], disabled = fals
         });
         return () => cancelAnimationFrame(frame);
     }, [isOpen]);
-    /** Fokus wraca na strzałkę — inaczej po zniknięciu panelu spadłby na `<body>`. */
+    /** Fokus wraca na strzałkę - inaczej po zniknięciu panelu spadłby na `<body>`. */
     const closeAndRestoreFocus = () => {
         close();
         toggleRef.current?.focus();

package/dist/splitter/llms.txt

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

package/dist/splitter/splitter.d.ts

@@ -15,7 +15,7 @@ export declare namespace KptSplitterEnd {
 }
 export interface KptSplitterProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'>, KptI18nOverrides {
     orientation?: KptSplitterOrientation;
-    /** Rozmiar pierwszego panelu w procentach (0–100). */
+    /** Rozmiar pierwszego panelu w procentach (0-100). */
     startSize?: number;
     defaultStartSize?: number;
     onStartSizeChange?: (size: number) => void;
@@ -29,9 +29,9 @@ export interface KptSplitterProps extends Omit<ComponentPropsWithRef<'div'>, 'on
  * Dwa panele z przeciąganym uchwytem. `horizontal` stawia je obok siebie, `vertical` jeden pod
  * drugim.
  *
- * Uchwyt to `role="separator"` z wartością (wzorzec WAI-ARIA „window splitter”): strzałki
+ * Uchwyt to `role="separator"` z wartością (wzorzec WAI-ARIA "window splitter"): strzałki
  * przesuwają go o 2%, `Home`/`End` dosuwają do minimum i maksimum. `aria-orientation` opisuje
- * linię uchwytu, nie układ — przy panelach obok siebie linia jest pionowa.
+ * linię uchwytu, nie układ - przy panelach obok siebie linia jest pionowa.
  *
  * @example
  * <KptSplitter startSize={size} onStartSizeChange={setSize}>

package/dist/splitter/splitter.js

@@ -21,9 +21,9 @@ KptSplitterEnd.kptSplitterSlot = 'end';
  * Dwa panele z przeciąganym uchwytem. `horizontal` stawia je obok siebie, `vertical` jeden pod
  * drugim.
  *
- * Uchwyt to `role="separator"` z wartością (wzorzec WAI-ARIA „window splitter”): strzałki
+ * Uchwyt to `role="separator"` z wartością (wzorzec WAI-ARIA "window splitter"): strzałki
  * przesuwają go o 2%, `Home`/`End` dosuwają do minimum i maksimum. `aria-orientation` opisuje
- * linię uchwytu, nie układ — przy panelach obok siebie linia jest pionowa.
+ * linię uchwytu, nie układ - przy panelach obok siebie linia jest pionowa.
  *
  * @example
  * <KptSplitter startSize={size} onStartSizeChange={setSize}>
@@ -62,7 +62,7 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
             return;
         // Nasłuch na oknie, nie na uchwycie: przy szybkim ruchu kursor wyprzedza wąski pasek
         // i bez tego przeciąganie urywałoby się po kilku pikselach.
-        // W RTL panel „start” stoi po prawej (flex idzie za kierunkiem pisma), więc mierzymy od prawej.
+        // W RTL panel "start" stoi po prawej (flex idzie za kierunkiem pisma), więc mierzymy od prawej.
         const rtl = getComputedStyle(container).direction === 'rtl';
         const move = (e) => {
             const rect = container.getBoundingClientRect();
@@ -70,7 +70,7 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
                 ? ((rtl ? rect.right - e.clientX : e.clientX - rect.left) / rect.width) * 100
                 : ((e.clientY - rect.top) / rect.height) * 100));
         };
-        // `pointercancel`: dotyk przerwany przez system nie wysyła `pointerup` — bez sprzątania
+        // `pointercancel`: dotyk przerwany przez system nie wysyła `pointerup` - bez sprzątania
         // `pointermove` dalej przesuwałby uchwyt.
         const up = () => {
             window.removeEventListener('pointermove', move);
@@ -95,7 +95,7 @@ export function KptSplitter({ orientation = 'horizontal', startSize, defaultStar
         if (!dir)
             return;
         event.preventDefault();
-        // W RTL ← przesuwa uchwyt w lewo, czyli powiększa prawy panel „start” — odwrotnie niż w LTR.
+        // W RTL <- przesuwa uchwyt w lewo, czyli powiększa prawy panel "start" - odwrotnie niż w LTR.
         const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
         const rtl = horizontal && getComputedStyle(event.currentTarget).direction === 'rtl';
         setSize(clamp(size + (rtl ? -dir : dir)));

package/dist/stepper/llms.txt

@@ -1,38 +1,42 @@
 # KptStepper + KptStep (@konce-pt/react)
 
-A step wizard — a header of numbered steps plus the active step's content.
+A step wizard - a header of numbered steps plus the active step's content.
 Import: `import { KptStepper, useKptStepper } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-stepper-host" style="--kpt-anim-duration:500ms; --kpt-anim-dir:1">
       <ol class="kpt-stepper__header">
         <li class="kpt-stepper__step is-done">
-          <button class="kpt-stepper__marker" aria-label="Step 1: Account, completed">✓</button>
+          <button class="kpt-stepper__marker" aria-label="Step 1: Account, completed">
+            <span class="kpt-stepper__num">1</span><span class="kpt-icon-host kpt-stepper__check"><!-- check --></span>
+          </button>
           <span class="kpt-stepper__label" aria-hidden="true">Account</span>
-          <span class="kpt-stepper__connector"></span>
+          <span class="kpt-stepper__connector" style="--kpt-stepper-line-delay:60ms; --kpt-stepper-line-dur:420ms"></span>
         </li>
-        …
+        ...
       </ol>
-      <div class="kpt-stepper__body"><div class="kpt-stepper__panel">…</div></div>
+      <span class="kpt-stepper__comet" aria-hidden="true"></span>
+      <div class="kpt-stepper__body"><div class="kpt-stepper__panel">...</div></div>
     </div>
 
 ## KptStepper props
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange`
-- `animated`: boolean (default true), `animationDuration`: ms (default 500)
+- `animated`: boolean (default true), `animationDuration`: ms (default 500) - the pace of the whole motion:
+  the content enter, and the line (a segment takes 0.84x, a multi-step jump fits in 1.8x)
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## KptStepper.Step props
-- `label`: string (required); `children` — the step's content
+- `label`: string (required); `children` - the step's content
 
 ## useKptStepper()
-`{ activeIndex, count, next, prev, goTo }` — the replacement for Angular's `#s` + `s.next()`.
+`{ activeIndex, count, next, prev, goTo }` - the replacement for Angular's `#s` + `s.next()`.
 It reads a context the stepper provides around the panel, so it works only in a component
 rendered inside a step (a hook cannot be called in the parent's body) and throws elsewhere.
 `count` lets a step hide "Next" on the last one.
 
 ## The step is a config carrier
 `KptStep` renders `null`; `KptStepper` reads its props and decides what to show, so only the
-active step's content is ever mounted — the same laziness as the `kpt-step` template in Angular.
+active step's content is ever mounted - the same laziness as the `kpt-step` template in Angular.
 
 ## The panel is keyed by index
 `key={active}` forces a remount on every change, otherwise the enter animation would have nothing
@@ -42,7 +46,7 @@ an earlier step animates from the other side.
 ## Examples
     <KptStepper>
       <KptStepper.Step label="Account"><StepNav /></KptStepper.Step>
-      <KptStepper.Step label="Profile">…</KptStepper.Step>
+      <KptStepper.Step label="Profile">...</KptStepper.Step>
     </KptStepper>
 
     function StepNav() {
@@ -55,17 +59,32 @@ an earlier step animates from the other side.
       );
     }
 
+## Motion
+Switching steps reads as colour flowing: the state changes at once (classes, `aria-current`,
+the marker names), but the connector fills from grey to `--kpt-color-primary` with a glowing comet
+running along it, and a marker turns "done" (fills from the centre, the check pops in) only when the
+colour reaches it; the new active step sends out a ring and keeps a soft glow. A jump over several
+steps runs the segments one after another within ~0.9 s; going back retracts them from the end.
+The content of the new step slides in from the side of the move and sharpens out of a blur, the old
+one leaves as a ghost the other way, and the body height changes smoothly.
+
+The timings come from `stepperSchedule` in `@konce-pt/motion` (CSS variables
+`--kpt-stepper-mark-delay`, `--kpt-stepper-line-delay`, `--kpt-stepper-line-dur` on the steps), the comet
+and the ring from `playStepperLight`, the ghost from `preparePanelSwap`. Follows `animated` and `enter`
+from `KptMotionProvider` (`none` - everything switches at once, `fade` - no comet and ring); `enabled: false` and the
+system "reduce motion" setting always win.
+
 ## Tokens
 The active and completed step: `--kpt-color-primary` (marker, connector); the rest
 `--kpt-color-border-strong` and `--kpt-color-on-surface-muted`.
 
 ## Accessibility
 The header is an `<ol>` of real buttons, so every step is reachable with the keyboard and the list
-announces how many there are. Each marker is named from the dictionary — `stepper.step`
-(“Step 2: Delivery”) or `stepper.stepDone` (“…, completed”) — because the visible marker is only a
+announces how many there are. Each marker is named from the dictionary - `stepper.step`
+("Step 2: Delivery") or `stepper.stepDone` ("..., completed") - because the visible marker is only a
 number or a check; the visible label is `aria-hidden` so it is not read twice. The active marker
-carries `aria-current="step"`. After `next()` focus stays where it was — move it into the new step
+carries `aria-current="step"`. After `next()` focus stays where it was - move it into the new step
 yourself when the step is long.
 
 ## Inactive content is destroyed
-Switching renders the new panel from scratch (that is what the enter animation starts from), so local state inside the previous one — an unsent file upload, expanded sections, scroll position — is lost. Keep such state in your own model, outside the panel.
+Switching renders the new panel from scratch (that is what the enter animation starts from), so local state inside the previous one - an unsent file upload, expanded sections, scroll position - is lost. Keep such state in your own model, outside the panel.

package/dist/stepper/stepper.d.ts

@@ -2,14 +2,14 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptStepperContextValue {
     activeIndex: number;
-    /** Liczba kroków — pozwala treści kroku ukryć „Dalej" na ostatnim. */
+    /** Liczba kroków - pozwala treści kroku ukryć "Dalej" na ostatnim. */
     count: number;
     next: () => void;
     prev: () => void;
     goTo: (index: number) => void;
 }
 /**
- * Sterowanie kreatorem z wnętrza kroku — odpowiednik `#s` + `s.next()` z portu Angulara.
+ * Sterowanie kreatorem z wnętrza kroku - odpowiednik `#s` + `s.next()` z portu Angulara.
  * Poza `<KptStepper>` rzuca błąd, bo bez kreatora nie ma czym sterować.
  *
  * @example
@@ -21,7 +21,7 @@ export interface KptStepProps {
     children?: ReactNode;
 }
 /**
- * Pojedynczy krok. Umieszczaj w `<KptStepper>`. Treść renderuje się leniwie — dopiero gdy krok
+ * Pojedynczy krok. Umieszczaj w `<KptStepper>`. Treść renderuje się leniwie - dopiero gdy krok
  * jest aktywny, tak samo jak szablon `kpt-step` w porcie Angulara.
  */
 export declare function KptStep(_props: Readonly<KptStepProps>): ReactNode;
@@ -37,13 +37,13 @@ export interface KptStepperProps extends Omit<ComponentPropsWithRef<'div'>, 'onC
     children?: ReactNode;
 }
 /**
- * Kreator kroków — nagłówek z numerowanymi krokami i treść aktywnego kroku.
+ * Kreator kroków - nagłówek z numerowanymi krokami i treść aktywnego kroku.
  * Treścią sterują `next()`/`prev()`/`goTo()` z hooka `useKptStepper()`.
  *
  * @example
  * <KptStepper>
- *   <KptStepper.Step label="Konto">…</KptStepper.Step>
- *   <KptStepper.Step label="Profil">…</KptStepper.Step>
+ *   <KptStepper.Step label="Konto">...</KptStepper.Step>
+ *   <KptStepper.Step label="Profil">...</KptStepper.Step>
  * </KptStepper>
  */
 export declare function KptStepper({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, locale, dictionary, className, style, children, ...rest }: Readonly<KptStepperProps>): import("react").JSX.Element;