@konce-pt/react 0.11.2 → 0.14.0

package/dist/menubar/menubar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,33 +6,36 @@ import { KptOverlay } from "../internal/overlay.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
+import { kptIsPlainClick } from "../shared/types.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 /**
  * Pozioma belka menu z rozwijanymi pod-menu. Pozycja bez `items` działa jak akcja lub link.
  *
- * Pod-menu renderuje się w portalu, więc rodzic z `overflow: hidden` go nie przycina — to ta sama
+ * Pod-menu renderuje się w portalu, więc rodzic z `overflow: hidden` go nie przycina - to ta sama
  * korzyść, dla której port Angulara sięga po CDK Overlay, tylko bez CDK.
  *
- * Klawiatura według wzorca WAI-ARIA „menubar”: belka to jeden przystanek Tab, strzałki w lewo/prawo
+ * Klawiatura według wzorca WAI-ARIA "menubar": belka to jeden przystanek Tab, strzałki w lewo/prawo
  * i `Home`/`End` chodzą po pozycjach górnych, strzałka w dół (albo `Enter`/spacja) otwiera
- * pod-menu z fokusem na pierwszej pozycji, w górę — na ostatniej. W otwartym pod-menu strzałki
+ * pod-menu z fokusem na pierwszej pozycji, w górę - na ostatniej. W otwartym pod-menu strzałki
  * w lewo/prawo przechodzą do sąsiedniego, a `Escape` zamyka je i oddaje fokus belce.
  *
  * @example
  * <KptMenubar items={items} onSelect={onSelect} />
  */
-export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest }) {
+export function KptMenubar({ items = [], onSelect, onNavigate, ariaLabel, className, ...rest }) {
     const [openIndex, setOpenIndex] = useState(null);
-    // Ostatnio skupiona pozycja górna — ona jest przystankiem Tab belki.
+    /** Przycisk otwartego pod-menu - w stanie, bo render podaje go nakładce jako kotwicę. */
+    const [anchorEl, setAnchorEl] = useState(null);
+    // Ostatnio skupiona pozycja górna - ona jest przystankiem Tab belki.
     const [focusIndex, setFocusIndex] = useState(0);
     const buttonsRef = useRef([]);
     const panelRef = useRef(null);
-    // Którą pozycję pod-menu skupić po otwarciu — strzałka w górę otwiera „od końca”.
+    // Którą pozycję pod-menu skupić po otwarciu - strzałka w górę otwiera "od końca".
     const focusEdge = useRef('first');
     const baseId = useKptId(undefined, 'kpt-menubar');
     const panelId = (index) => `${baseId}-menu-${index}`;
     const disabled = items.map((item) => !!item.disabled);
-    // Pozycja z `url` (bez pod-menu, niewyłączona) to `<a href>` — nawigację robi przeglądarka,
+    // Pozycja z `url` (bez pod-menu, niewyłączona) to `<a href>` - nawigację robi przeglądarka,
     // więc działa nowa karta i podgląd adresu. `onSelect` i tak jest wołane.
     const isLink = (item) => !!item.url && !item.items?.length && !item.disabled;
     const tabStop = rovingStop(disabled, focusIndex);
@@ -59,6 +63,7 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             focusMenuEdge(panelRef.current, edge);
             return;
         }
+        setAnchorEl(buttonsRef.current[index] ?? null);
         setOpenIndex(hasMenu ? index : null);
         focusTop(index);
     };
@@ -67,6 +72,7 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             return;
         if (item.items?.length) {
             focusEdge.current = 'first';
+            setAnchorEl(buttonsRef.current[index] ?? null);
             setOpenIndex((current) => (current === index ? null : index));
         }
         else {
@@ -79,7 +85,7 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             return;
         onSelect?.(item);
         closeAll();
-        // Fokus wraca na pozycję górną — inaczej po zniknięciu pod-menu spadłby na `<body>`.
+        // Fokus wraca na pozycję górną - inaczej po zniknięciu pod-menu spadłby na `<body>`.
         focusTop(index);
     };
     const onTopKeyDown = (event, index) => {
@@ -94,7 +100,7 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
         if (next === null)
             return;
         event.preventDefault();
-        // Przy otwartym pod-menu przejście w bok otwiera pod-menu sąsiada — jak w menu aplikacji.
+        // Przy otwartym pod-menu przejście w bok otwiera pod-menu sąsiada - jak w menu aplikacji.
         if (openIndex === null)
             focusTop(next);
         else
@@ -114,12 +120,18 @@ export function KptMenubar({ items = [], onSelect, ariaLabel, className, ...rest
             focusTop(index);
         }
     };
+    /** 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 });
+        }
+    };
     return (_jsx("div", { className: cn('kpt-menubar-host', className), ...rest, children: _jsx("div", { className: "kpt-menubar", role: "menubar", "aria-orientation": "horizontal", "aria-label": ariaLabel || undefined, children: items.map((item, index) => {
                 const hasMenu = !!item.items?.length;
                 return (_jsxs("div", { className: "kpt-menubar__group", role: "none", children: [isLink(item) ? (_jsxs("a", { ref: (el) => {
                                 buttonsRef.current[index] = el;
-                            }, className: "kpt-menubar__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: () => pick(item, index), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] })) : (_jsxs("button", { ref: (el) => {
+                            }, className: "kpt-menubar__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: (event) => { linkClick(event, item); pick(item, index); }, onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] })) : (_jsxs("button", { ref: (el) => {
                                 buttonsRef.current[index] = el;
-                            }, type: "button", className: cn('kpt-menubar__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? openIndex === index : undefined, "aria-controls": openIndex === index ? panelId(index) : undefined, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), hasMenu ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-menubar__caret" }) : null] })), _jsx(KptOverlay, { open: openIndex === index && hasMenu, anchor: buttonsRef.current[index] ?? null, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-menubar__dropdown", role: "menu", id: panelId(index), "aria-label": item.label, onKeyDown: (event) => onPanelKeyDown(event, index), children: (item.items ?? []).map((sub, subIndex) => sub.separator ? (_jsx("div", { className: "kpt-menubar__separator", role: "separator" }, subIndex)) : isLink(sub) ? (_jsxs("a", { className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, href: sub.url, onClick: () => pick(sub, index), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex)) : (_jsxs("button", { type: "button", className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, disabled: sub.disabled, onClick: () => pick(sub, index), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex))) }) })] }, index));
+                            }, type: "button", className: cn('kpt-menubar__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? openIndex === index : undefined, "aria-controls": openIndex === index ? panelId(index) : undefined, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), hasMenu ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-menubar__caret" }) : null] })), _jsx(KptOverlay, { open: openIndex === index && hasMenu, anchor: openIndex === index ? anchorEl : null, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-menubar__dropdown", role: "menu", tabIndex: -1, id: panelId(index), "aria-label": item.label, onKeyDown: (event) => onPanelKeyDown(event, index), children: (item.items ?? []).map((sub, subIndex) => sub.separator ? (_jsx("div", { className: "kpt-menubar__separator", role: "separator" }, subIndex)) : isLink(sub) ? (_jsxs("a", { className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, href: sub.url, onClick: (event) => { linkClick(event, sub); pick(sub, index); }, children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex)) : (_jsxs("button", { type: "button", className: cn('kpt-menubar__item', sub.danger && 'kpt-menubar__item--danger'), role: "menuitem", tabIndex: -1, disabled: sub.disabled, onClick: () => pick(sub, index), children: [sub.icon ? _jsx(KptIcon, { name: sub.icon }) : null, _jsx("span", { children: sub.label })] }, subIndex))) }) })] }, index));
             }) }) }));
 }

package/dist/meter-group/llms.txt

@@ -7,35 +7,35 @@ Import: `import { KptMeterGroup } from '@konce-pt/react';`
     <div class="kpt-meter-group-host">
       <div class="kpt-meter-group">
         <div class="kpt-meter-group__track" role="meter" aria-label="Usage" aria-valuemin="0"
-             aria-valuenow="100" aria-valuemax="100" aria-valuetext="Documents 45, …">
-          <span class="kpt-meter-group__segment" style="width:45%" title="Documents"></span>…
+             aria-valuenow="100" aria-valuemax="100" aria-valuetext="Documents 45, ...">
+          <span class="kpt-meter-group__segment" style="width:45%" title="Documents"></span>...
         </div>
         <ul class="kpt-meter-group__legend">
           <li class="kpt-meter-group__legend-item">
             <span class="kpt-meter-group__dot"></span><span>Documents</span>
             <span class="kpt-meter-group__val">45%</span>
-          </li>…
+          </li>...
         </ul>
       </div>
     </div>
 
 ## Props
-- `values`: `KptMeterItem[]` — `{ label, value, color? }`
-- `max`: number — the reference total; without it the values' sum is 100%
+- `values`: `KptMeterItem[]` - `{ label, value, color? }`
+- `max`: number - the reference total; without it the values' sum is 100%
 - `showLegend`: boolean (default true)
-- `label`: string — the meter's name; empty = `meterGroup.label`
-- `legendValue`: 'percent' | 'value' (default 'percent') — what the legend shows next to each label
-- `unit`: string — appended to the values in the legend and in `aria-valuetext` (e.g. 'GB')
+- `label`: string - the meter's name; empty = `meterGroup.label`
+- `legendValue`: 'percent' | 'value' (default 'percent') - what the legend shows next to each label
+- `unit`: string - appended to the values in the legend and in `aria-valuetext` (e.g. 'GB')
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Percentages come from the sum, not from 100
 Without `max` the reference is the sum of the values, so `[45, 25, 15, 15]` and `[9, 5, 3, 3]`
-draw the same picture. Pass `max` when the segments are meant to leave a gap — a quota that is
+draw the same picture. Pass `max` when the segments are meant to leave a gap - a quota that is
 not full yet. All-zero values fall back to a divisor of 1 instead of producing `NaN%`.
 
 ## Colours
 `color` per item, otherwise the next one from the semantic palette
-(`primary → info → success → warning → danger`, cycled), so a group of any length stays readable
+(`primary -> info -> success -> warning -> danger`, cycled), so a group of any length stays readable
 without picking colours by hand.
 
 ## Examples
@@ -48,7 +48,7 @@ The palette `--kpt-color-{primary,info,success,warning,danger}`, the track
 
 ## Accessibility
 The track is `role="meter"` named by `label` (or `meterGroup.label`), with `aria-valuemin="0"`,
-`aria-valuenow` set to the sum and `aria-valuemax` set to the real total — `max`, or the sum without
-it. `aria-valuetext` spells out the split (“Photos 42 GB, Videos 28 GB, …”), so the segments reach
+`aria-valuenow` set to the sum and `aria-valuemax` set to the real total - `max`, or the sum without
+it. `aria-valuetext` spells out the split ("Photos 42 GB, Videos 28 GB, ..."), so the segments reach
 the screen reader even with the legend hidden. Keep the legend visible anyway: it is the text
 alternative to the colours.

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

@@ -11,11 +11,11 @@ export interface KptMeterGroupProps extends ComponentPropsWithRef<'div'>, KptI18
     /** Suma odniesienia; domyślnie suma wartości, czyli segmenty wypełniają całość. */
     max?: number;
     showLegend?: boolean;
-    /** Nazwa paska dla czytników ekranu, np. „Miejsce na dysku”; domyślnie `meterGroup.label`. */
+    /** Nazwa paska dla czytników ekranu, np. "Miejsce na dysku"; domyślnie `meterGroup.label`. */
     label?: string;
     /** Co pokazuje legenda przy etykiecie: udział procentowy albo samą wartość (z `unit`). */
     legendValue?: 'percent' | 'value';
-    /** Jednostka dopisywana do wartości — w legendzie (`legendValue="value"`) i w `aria-valuetext`. */
+    /** Jednostka dopisywana do wartości - w legendzie (`legendValue="value"`) i w `aria-valuetext`. */
     unit?: string;
 }
 /**

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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -24,7 +25,7 @@ export function KptMeterGroup({ values = [], max, showLegend = true, label = '',
     const color = (item, index) => item.color || PALETTE[index % PALETTE.length];
     const withUnit = (value) => (unit ? `${value} ${unit}` : String(value));
     const legendText = (item) => legendValue === 'value' ? withUnit(item.value) : `${Math.round(percent(item))}%`;
-    // Podział dla czytnika („Zdjęcia 42 GB, Filmy 28 GB…”) — sam `aria-valuenow` mówi tylko sumę.
+    // Podział dla czytnika ("Zdjęcia 42 GB, Filmy 28 GB...") - sam `aria-valuenow` mówi tylko sumę.
     const valueText = values.map((item) => `${item.label} ${withUnit(item.value)}`).join(', ');
     return (_jsx("div", { className: cn('kpt-meter-group-host', className), ...rest, children: _jsxs("div", { className: "kpt-meter-group", children: [_jsx("div", { className: "kpt-meter-group__track", role: "meter", "aria-valuemin": 0, "aria-valuenow": sum, "aria-valuemax": total, "aria-valuetext": valueText, "aria-label": label || t('meterGroup.label'), children: values.map((item, index) => (_jsx("span", { className: "kpt-meter-group__segment", style: { width: `${percent(item)}%`, backgroundColor: color(item, index) }, title: item.label }, index))) }), showLegend ? (_jsx("ul", { className: "kpt-meter-group__legend", children: values.map((item, index) => (_jsxs("li", { className: "kpt-meter-group__legend-item", children: [_jsx("span", { className: "kpt-meter-group__dot", style: { backgroundColor: color(item, index) } }), _jsx("span", { children: item.label }), _jsx("span", { className: "kpt-meter-group__val", children: legendText(item) })] }, index))) })) : null] }) }));
 }

package/dist/motion/motion-context.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import { type KptLayoutMotion, type KptMotionConfig } from '@konce-pt/motion';
+export interface KptMotionProviderProps extends KptMotionConfig {
+    children?: ReactNode;
+}
+/**
+ * Globalne ustawienie ruchu Koncept UI: czy ruch jest włączony i jaki rodzaj ruchu dostają
+ * komponenty, które pozwalają go wybrać. Bez providera ruch jest włączony z domyślnymi
+ * wartościami; systemowe "ogranicz ruch" jest respektowane zawsze.
+ *
+ * `enabled={false}` gasi przejścia CSS wszystkich komponentów (atrybut `data-kpt-motion="off"`
+ * i zmienne na `:root` - nakładki w portalach też) oraz ruch sterowany z kodu; wskaźniki
+ * ładowania zwalniają zamiast stanąć.
+ *
+ * @example
+ * <KptMotionProvider layout="arc" collapse="fade"><App /></KptMotionProvider>
+ * <KptMotionProvider enabled={false}><App /></KptMotionProvider>
+ */
+export declare function KptMotionProvider({ enabled, layout, collapse, enter, toggle, children }: Readonly<KptMotionProviderProps>): import("react").JSX.Element;
+/** Konfiguracja ruchu z najbliższego providera; poza providerem `null` (wartości domyślne). */
+export declare function useKptMotion(): KptMotionConfig | null;
+export type { KptLayoutMotion, KptMotionConfig };

package/dist/motion/motion-context.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo } from 'react';
+import { applyMotionConfig } from '@konce-pt/motion';
+const KptMotionContext = createContext(null);
+/**
+ * Globalne ustawienie ruchu Koncept UI: czy ruch jest włączony i jaki rodzaj ruchu dostają
+ * komponenty, które pozwalają go wybrać. Bez providera ruch jest włączony z domyślnymi
+ * wartościami; systemowe "ogranicz ruch" jest respektowane zawsze.
+ *
+ * `enabled={false}` gasi przejścia CSS wszystkich komponentów (atrybut `data-kpt-motion="off"`
+ * i zmienne na `:root` - nakładki w portalach też) oraz ruch sterowany z kodu; wskaźniki
+ * ładowania zwalniają zamiast stanąć.
+ *
+ * @example
+ * <KptMotionProvider layout="arc" collapse="fade"><App /></KptMotionProvider>
+ * <KptMotionProvider enabled={false}><App /></KptMotionProvider>
+ */
+export function KptMotionProvider({ enabled, layout, collapse, enter, toggle, children }) {
+    const config = useMemo(() => ({ enabled, layout, collapse, enter, toggle }), [enabled, layout, collapse, enter, toggle]);
+    // Korzeń dokumentu, nie wrapper: przejścia w portalach (dialog, drawer) też muszą zgasnąć.
+    useLayoutEffect(() => applyMotionConfig(document.documentElement, config), [config]);
+    return _jsx(KptMotionContext.Provider, { value: config, children: children });
+}
+/** Konfiguracja ruchu z najbliższego providera; poza providerem `null` (wartości domyślne). */
+export function useKptMotion() {
+    return useContext(KptMotionContext);
+}

package/dist/order-list/llms.txt

@@ -7,26 +7,27 @@ Import: `import { KptOrderList } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-order-list-host">
       <div class="kpt-order-list">
-        <div class="kpt-order-list__controls">…up, down…</div>
+        <div class="kpt-order-list__controls">...up, down...</div>
         <div class="kpt-order-list__panel">
           <div class="kpt-order-list__header">Order</div>
           <ul class="kpt-order-list__items">
-            <li class="kpt-order-list__item is-selected">…</li>…
+            <li class="kpt-order-list__item is-selected">...</li>...
           </ul>
         </div>
       </div>
     </div>
 
 ## Props
-- `items` / `defaultItems` / `onItemsChange` — the list; the callback receives the new order
+- `items` / `defaultItems` / `onItemsChange` - the list; the callback receives the new order
 - `header`: string
-- `dragdrop` — `false` by default; enables dragging (opt-in, nothing changes without it)
-- `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
+- `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 follows the item
 After a move the selection jumps to the new index, so pressing the button again moves the same
-entry — with the selection pinned to a position, the second press would move its neighbour. A drop
+entry - with the selection pinned to a position, the second press would move its neighbour. A drop
 does the same.
 
 ## Where a dragged item lands
@@ -43,18 +44,32 @@ dragged one `is-dragging`.
 The buttons use `orderList.up` and `orderList.down`. Dragging carries no visible label, so it adds
 no dictionary keys.
 
+## Reorder motion
+`layoutMotion` animates a reorder made by the user (buttons, `Alt`+ArrowUp/ArrowDown, dragging):
+- `spring` - the moved item glides to its new place on a spring;
+- `arc` - the moved item lifts (shadow) and lands, above its neighbours;
+- `morph` - the browser's own morph (View Transitions); without support the change is instant;
+- `none` - no motion.
+
+Neighbours always make room with a calm spring, and the list scrolls to keep the moved item in
+view. With no value it takes `layout` from `KptMotionProvider` (default `spring`); `enabled: false` and the
+system "reduce motion" setting always win. A list replaced from outside (`items`) switches instantly.
+
 ## Tokens
 The selection `--kpt-color-primary`, the buttons `--kpt-color-surface-raised`.
 
 ## Keyboard
 The list is a `listbox` with a single Tab stop (roving tabindex), and the selection follows focus:
-- `↓` / `↑` select the next / previous item (wrapping), `Home` / `End` the first / last;
-- `Alt`+`↑` / `Alt`+`↓` move the selected item one place up / down — focus travels with it, so
+- `ArrowDown` / `ArrowUp` select the next / previous item (wrapping), `Home` / `End` the first / last;
+- `Alt`+`ArrowUp` / `Alt`+`ArrowDown` move the selected item one place up / down - focus travels with it, so
   repeated presses keep moving the same entry.
 The up / down buttons stay and act on the same selection.
 
 ## Accessibility
 The list is named after `header` (`aria-label`) and the selected item carries `aria-selected`.
 Both buttons are labelled from the dictionary and go disabled while nothing is selected. Native
-HTML5 drag and drop has no keyboard equivalent — `Alt`+arrows and the buttons cover it, and
+HTML5 drag and drop has no keyboard equivalent - `Alt`+arrows and the buttons cover it, and
 `dragdrop` adds to them, it never replaces them.
+
+## Announcements
+Every reorder (buttons, Alt+ArrowUp/ArrowDown, drag and drop) is announced in a polite live region: `orderList.moved` with `{position}` and `{total}` - focus does not move, so a screen reader would not hear the new place otherwise.

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

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptLayoutMotion } from '@konce-pt/motion';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptOrderListProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'children'>, KptI18nOverrides {
     items?: T[];
@@ -7,18 +8,25 @@ export interface KptOrderListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     header?: string;
     /** Włącza przestawianie pozycji metodą przeciągnij-i-upuść. */
     dragdrop?: boolean;
-    /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
+    /**
+     * Ruch przestawiania: `spring` - pozycja płynie na nowe miejsce na sprężynie, `arc` - unosi się
+     * z cieniem i ląduje, `morph` - natywny morf przeglądarki (View Transitions), `none` - bez ruchu.
+     * Sąsiedzi zawsze robią miejsce spokojną sprężyną. Bez wartości bierze `layout` z `KptMotionProvider`
+     * (domyślnie `spring`); `enabled={false}` i systemowe "ogranicz ruch" wyłączają go zawsze.
+     */
+    layoutMotion?: KptLayoutMotion;
+    /** Szablon elementu - odpowiednik `<ng-template let-item>` z Angulara. */
     renderItem: (item: T, index: number) => ReactNode;
 }
 /**
- * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
+ * OrderList - lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
  * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * Lista to `listbox` z jednym przystankiem Tab (roving tabindex), w którym zaznaczenie idzie
- * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+↑/↓ przestawia ją o jedno
+ * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+ArrowUp/ArrowDown przestawia ją o jedno
  * miejsce (fokus jedzie razem z nią).
  *
  * @example
  * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, dragdrop, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;
+export declare function KptOrderList<T>({ items, defaultItems, onItemsChange, header, dragdrop, layoutMotion, renderItem, locale, dictionary, className, ref, ...rest }: Readonly<KptOrderListProps<T>>): import("react").JSX.Element;

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

@@ -1,24 +1,40 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { flushSync } from 'react-dom';
+import { isVisibleInScroller, layoutMotionAllowed, morphKeyed, playKeyedMotion, resolveLayoutMotion, revealInScroller, snapshotKeyed, stopKeyedMotion, } from '@konce-pt/motion';
 import { cn } from "../internal/cn.js";
 import { composeRefs } from "../internal/compose-refs.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 import { nextMenuIndex } from "../menu/menu-keys.js";
+import { useKptMotion } from "../motion/motion-context.js";
+/** Klasy ruchu przestawiania - reguły we wspólnym CSS komponentu (duchów tu nie ma: jedna lista). */
+const MOTION_CLASSES = {
+    ghostClass: 'kpt-order-list__ghost',
+    hiddenClass: 'kpt-order-list__item--waiting',
+    movingClass: 'kpt-order-list__item--moving',
+};
+/** Klasa View Transitions dla morfu. */
+const MORPH_CLASS = 'kpt-order-list-morph';
+/** Przewijany pojemnik wiersza. */
+function scrollerOf(element) {
+    return element.closest('.kpt-order-list__items');
+}
 const EMPTY = [];
 /**
- * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
+ * OrderList - lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
  * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * Lista to `listbox` z jednym przystankiem Tab (roving tabindex), w którym zaznaczenie idzie
- * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+↑/↓ przestawia ją o jedno
+ * za fokusem: strzałki / `Home` / `End` wybierają pozycję, `Alt`+ArrowUp/ArrowDown przestawia ją o jedno
  * miejsce (fokus jedzie razem z nią).
  *
  * @example
  * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, renderItem, locale, dictionary, className, ref, ...rest }) {
+export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, layoutMotion, renderItem, locale, dictionary, className, ref, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [list, setList] = useControllableState({
         value: items,
@@ -28,46 +44,119 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
     const [selected, setSelected] = useState(null);
     /** Indeks przeciąganej pozycji; `null` gdy nic nie jest przeciągane. */
     const [dragIndex, setDragIndex] = useState(null);
-    /** Indeks pozycji pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    /** Indeks pozycji pod kursorem - rysuje wskaźnik miejsca upuszczenia. */
     const [overIndex, setOverIndex] = useState(null);
-    /** Kursor nad pustym obszarem listy — upuszczenie tam dopina na koniec. */
+    /** Kursor nad pustym obszarem listy - upuszczenie tam dopina na koniec. */
     const [listOver, setListOver] = useState(false);
     /** Pozycja, na którą po renderze trzeba przenieść fokus DOM (klawiatura). */
     const [focusRequest, setFocusRequest] = useState(null);
     const rootRef = useRef(null);
+    const motionConfig = useKptMotion();
+    // `view-transition-name` musi być poprawnym identyfikatorem CSS - `useId` daje dwukropki.
+    const morphPrefix = `kpt-order-list-${useId().replaceAll(/[^a-zA-Z0-9-]/g, '')}`;
+    /** Który element danych pokazuje każdy wiersz - wiersze mają klucz po indeksie, więc go zmieniają. */
+    const keyOf = useRef(new WeakMap());
+    /** Stan sprzed zmiany, czekający na commit nowej kolejności. */
+    const pending = useRef(null);
+    /** Indeks przestawionej pozycji - lista przewija się do niej po zmianie. */
+    const revealIndex = useRef(null);
+    const stage = () => rootRef.current?.querySelector('.kpt-order-list') ?? null;
+    const nodes = () => {
+        const root = stage();
+        if (!root)
+            return [];
+        return Array.from(root.querySelectorAll('.kpt-order-list__items > .kpt-order-list__item')).flatMap((element) => keyOf.current.has(element) ? [{ key: keyOf.current.get(element), element }] : []);
+    };
+    const reveal = () => {
+        const row = revealIndex.current === null ? undefined : nodes()[revealIndex.current];
+        if (row)
+            revealInScroller(row.element, scrollerOf(row.element));
+    };
+    /**
+     * Przestawienie z ruchem. Stan sprzed zmiany mierzymy, zanim React zmieni DOM - dlatego animujemy
+     * zmiany z interakcji (przyciski, `Alt`+strzałki, przeciąganie), a lista podmieniona z zewnątrz
+     * przełącza się od razu.
+     */
+    const withMotion = (apply, lead, target, origin) => {
+        const motion = resolveLayoutMotion(layoutMotion, motionConfig);
+        revealIndex.current = target;
+        const root = stage();
+        if (motion === 'none' || !root || !layoutMotionAllowed()) {
+            apply();
+            return;
+        }
+        if (motion === 'morph') {
+            morphKeyed(nodes(), nodes, morphPrefix, MORPH_CLASS, () => {
+                flushSync(apply);
+                reveal();
+            }, (el) => isVisibleInScroller(el, scrollerOf(el)));
+            return;
+        }
+        pending.current = { first: snapshotKeyed(root, nodes(), scrollerOf), motion, lead, origin };
+        stopKeyedMotion(root, MOTION_CLASSES);
+        apply();
+    };
+    // Nowa kolejność jest już w DOM (a `keyOf` zaktualizowany refami) - gramy loty od zapamiętanego stanu.
+    const playPending = useEffectEvent(() => {
+        const job = pending.current;
+        pending.current = null;
+        const root = stage();
+        if (!job || !root)
+            return;
+        reveal();
+        playKeyedMotion(root, job.first, nodes(), { motion: job.motion, scrollerOf, ...MOTION_CLASSES, lead: new Set([job.lead]) }, job.origin);
+    });
+    useLayoutEffect(() => {
+        playPending();
+    }, [list]);
+    // Żądanie nie jest zerowane w efekcie (setState w efekcie = dodatkowy przebieg renderu): każde jest
+    // nowym obiektem, więc efekt rusza raz na żądanie, także o ten sam indeks.
     useEffect(() => {
-        if (focusRequest === null)
+        if (!focusRequest)
             return;
-        rootRef.current?.querySelectorAll('[role="option"]')[focusRequest]?.focus();
-        setFocusRequest(null);
+        rootRef.current?.querySelectorAll('[role="option"]')[focusRequest.index]?.focus();
     }, [focusRequest]);
     /**
      * Przesuwa pozycję spod `index` o jedno miejsce i zwraca jej nowy indeks. Jawny indeks zamiast
      * `selected`: klawiatura zaznacza i przesuwa w jednym zdarzeniu, a stan z domknięcia byłby stary.
      */
-    const moveFrom = (index, dir) => {
+    /** Treść regionu `aria-live` po przestawieniu. */
+    const [announcement, setAnnouncement] = useState('');
+    /**
+     * Ogłasza nową pozycję. Ten sam tekst drugi raz pod rząd nie zostałby przeczytany (region reaguje
+     * na zmianę), więc naprzemiennie dokładamy niewidoczną spację.
+     */
+    const announce = (index, total) => {
+        const text = t('orderList.moved', { position: index + 1, total });
+        setAnnouncement((current) => (current === text ? text + '\u00a0' : text));
+    };
+    const moveFrom = (index, dir, origin) => {
         const target = index + dir;
         if (target < 0 || target >= list.length)
             return index;
         const next = [...list];
+        const moved = next[index];
         [next[index], next[target]] = [next[target], next[index]];
-        setList(next);
-        // Zaznaczenie wędruje za elementem, nie zostaje na pozycji — inaczej kolejne kliknięcie
-        // przesuwałoby sąsiada zamiast tego samego wpisu.
-        setSelected(target);
+        withMotion(() => {
+            setList(next);
+            // Zaznaczenie wędruje za elementem, nie zostaje na pozycji - inaczej kolejne kliknięcie
+            // przesuwałoby sąsiada zamiast tego samego wpisu.
+            setSelected(target);
+        }, moved, target, origin);
+        announce(target, next.length);
         return target;
     };
-    const move = (dir) => {
+    const move = (dir, origin) => {
         if (selected !== null)
-            moveFrom(selected, dir);
+            moveFrom(selected, dir, origin);
     };
     /** Przystanek Tab: zaznaczona pozycja albo pierwsza. */
     const tabStop = selected !== null && selected < list.length ? selected : 0;
-    // Strzałki wybierają pozycję (zaznaczenie idzie za fokusem), `Alt`+↑/↓ ją przestawia.
+    // Strzałki wybierają pozycję (zaznaczenie idzie za fokusem), `Alt`+ArrowUp/ArrowDown ją przestawia.
     const onItemKeyDown = (index, event) => {
         if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
             event.preventDefault();
-            setFocusRequest(moveFrom(index, event.key === 'ArrowUp' ? -1 : 1));
+            setFocusRequest({ index: moveFrom(index, event.key === 'ArrowUp' ? -1 : 1, event.currentTarget) });
             return;
         }
         const next = nextMenuIndex(list.length, index, event.key);
@@ -75,7 +164,7 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
             return;
         event.preventDefault();
         setSelected(next);
-        setFocusRequest(next);
+        setFocusRequest({ index: next });
     };
     const clearDrag = () => {
         setDragIndex(null);
@@ -105,15 +194,18 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         clearDrag();
         if (from === null || from === index)
             return;
-        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // Indeks celu liczony na tablicy sprzed usunięcia - element ląduje na pozycji tego,
         // na który go upuszczono (ten sam wzór co przestawianie kolumn w KptDataTable).
         const next = [...list];
         const [moved] = next.splice(from, 1);
         if (moved === undefined)
             return;
         next.splice(index, 0, moved);
-        setList(next);
-        setSelected(index);
+        withMotion(() => {
+            setList(next);
+            setSelected(index);
+        }, moved, index, event.currentTarget);
+        announce(index, next.length);
     };
     const onListDragOver = (event) => {
         if (dragIndex === null)
@@ -133,8 +225,14 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         if (moved === undefined)
             return;
         next.push(moved);
-        setList(next);
-        setSelected(next.length - 1);
+        withMotion(() => {
+            setList(next);
+            setSelected(next.length - 1);
+        }, moved, next.length - 1, event.currentTarget);
+        announce(next.length - 1, next.length);
     };
-    return (_jsx("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }) }));
+    return (_jsxs("div", { ref: composeRefs(rootRef, ref), className: cn('kpt-order-list-host', className), ...rest, children: [_jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: (event) => move(-1, event.currentTarget), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: (event) => move(1, event.currentTarget), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), role: "listbox", "aria-label": header || undefined, onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { ref: (element) => {
+                                        if (element)
+                                            keyOf.current.set(element, item);
+                                    }, className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), role: "option", "aria-selected": selected === index, tabIndex: index === tabStop ? 0 : -1, onFocus: () => setSelected(index), onKeyDown: (event) => onItemKeyDown(index, event), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }), _jsx("p", { className: "kpt-visually-hidden", "aria-live": "polite", children: announcement })] }));
 }

package/dist/paginator/llms.txt

@@ -5,22 +5,22 @@ Import: `import { KptPaginator } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-paginator">
-      <div class="kpt-paginator__size"><label>Rows: <select class="kpt-paginator__select">…</select></label></div>
-      <span class="kpt-paginator__range">1–10 of 120</span>
-      <div class="kpt-paginator__nav">…two KptButton…</div>
+      <div class="kpt-paginator__size"><label>Rows: <select class="kpt-paginator__select">...</select></label></div>
+      <span class="kpt-paginator__range">1-10 of 120</span>
+      <div class="kpt-paginator__nav">...two KptButton...</div>
     </div>
 
 ## Props
-- `length`: number — the total number of items (required)
-- `pageIndex` / `defaultPageIndex` / `onPageIndexChange` — the 0-based page
-- `pageSize` / `defaultPageSize` / `onPageSizeChange` — the page size (default 10)
+- `length`: number - the total number of items (required)
+- `pageIndex` / `defaultPageIndex` / `onPageIndexChange` - the 0-based page
+- `pageSize` / `defaultPageSize` / `onPageSizeChange` - the page size (default 10)
 - `pageSizeOptions`: readonly number[] (default [5, 10, 20, 50])
 
   The select always offers the current `pageSize` even when it is absent from this list: without
   that, `pageSize={8}` against the defaults left no matching option, so the control displayed the
   first entry while the table paged by eight.
-- `prevIcon`, `nextIcon`: ReactNode — the navigation button content
-- `locale`, `dictionary` — i18n overrides for this component only
+- `prevIcon`, `nextIcon`: ReactNode - the navigation button content
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the paginator root
 
 ## Behaviour