@konce-pt/react 0.12.0 → 0.15.0

package/dist/select/select.js

@@ -1,7 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { foldMentionText } from '@konce-pt/mention';
+import { flowChangeOf, prepareFlowMotion, resolveEnterMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 import { cn } from "../internal/cn.js";
 import { optionKey } from "../internal/option-key.js";
 import { KptOverlay } from "../internal/overlay.js";
@@ -11,7 +13,7 @@ import { KptTypeahead, OPTION_NAV_KEYS, isTypeaheadKey, nextOptionIndex, typeahe
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { joinIds, useKptFieldA11y, useKptFormFieldFilled } from "../form-field/form-field-context.js";
 import { KptIcon } from "../icon/icon.js";
-/** Filtr opcji bez wielkości liter i diakrytyków, jak w `KptListbox`: „lodz” znajduje „Łódź”. */
+/** Filtr opcji bez wielkości liter i diakrytyków, jak w `KptListbox`: "lodz" znajduje "Łódź". */
 function filterSelectOptions(options, text) {
     const q = foldMentionText(text.trim());
     return q ? options.filter((option) => foldMentionText(option.label).includes(q)) : options;
@@ -20,23 +22,23 @@ function filterSelectOptions(options, text) {
  * Lista wyboru (select) na własnym panelu. Warianty: pojedynczy, z wyszukiwarką (`filter`)
  * i wielokrotny (`multiple`, chipy).
  *
- * Klawiatura według wzorca WAI-ARIA „select-only combobox”: fokus zostaje na polu, a aktywna opcja
- * idzie przez `aria-activedescendant`. `↓`/`↑`/`Enter`/`Spacja` otwierają listę na wybranej opcji,
+ * Klawiatura według wzorca WAI-ARIA "select-only combobox": fokus zostaje na polu, a aktywna opcja
+ * idzie przez `aria-activedescendant`. `ArrowDown`/`ArrowUp`/`Enter`/`Spacja` otwierają listę na wybranej opcji,
  * strzałki, `Home`/`End`, `PageUp`/`PageDown` chodzą po opcjach (z pominięciem wyłączonych),
  * wpisywane litery skaczą do pasującej opcji (bez polskich znaków), `Enter` wybiera, `Escape`
  * zamyka. Z `filter` fokus przechodzi do pola wyszukiwania, które obsługuje te same klawisze.
  * W trybie `multiple` `Backspace` na zamkniętym polu usuwa ostatni wybór.
  *
  * Wewnątrz `KptFormField` zgłasza wypełnienie hookiem `useKptFormFieldFilled`, więc etykieta
- * Float Label unosi się nad wybraną wartością — natywnego pola, z którego wrapper mógłby to
+ * Float Label unosi się nad wybraną wartością - natywnego pola, z którego wrapper mógłby to
  * odczytać, tu nie ma.
  *
  * @example
- * <KptSelect options={roles} value={role} onValueChange={setRole} placeholder="Wybierz…" />
+ * <KptSelect options={roles} value={role} onValueChange={setRole} placeholder="Wybierz..." />
  * <KptSelect options={tags} multiple filter value={tags} onValueChange={setTags} />
  */
 export function KptSelect({ options = [], placeholder = '', multiple = false, filter = false, disabled = false, readOnly = false, invalid = false, touched, value, defaultValue = null, onValueChange, open, defaultOpen = false, onOpenChange, onTouch, locale, dictionary, className, onBlur, id, required = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, ...rest }) {
-    /** `div` z rolą nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+    /** `div` z rolą nie dostaje nazwy z `label[for]` - stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-select-trigger');
     const { t } = useKptMessages({ locale, dictionary });
     const triggerRef = useRef(null);
@@ -71,11 +73,11 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
     const filled = selectedOptions.length > 0;
     useKptFormFieldFilled(filled);
     const isSelected = (option) => selectedValues.includes(option.value);
-    /** Skrajna opcja, na której ma się otworzyć lista (`Home`/`End`/`↑` na zamkniętym polu). */
+    /** Skrajna opcja, na której ma się otworzyć lista (`Home`/`End`/`ArrowUp` na zamkniętym polu). */
     const [openEdge, setOpenEdge] = useState(null);
-    // Panel może zostać otwarty także z zewnątrz (`open`), nie tylko z pola — filtr i aktywną
-    // pozycję ustawiamy więc przy każdym przejściu w stan otwarty, wzorcem „poprzednia wartość
-    // w stanie” (w tym samym renderze, bez efektu). Lista otwiera się na wybranej opcji; zmiana
+    // Panel może zostać otwarty także z zewnątrz (`open`), nie tylko z pola - filtr i aktywną
+    // pozycję ustawiamy więc przy każdym przejściu w stan otwarty, wzorcem "poprzednia wartość
+    // w stanie" (w tym samym renderze, bez efektu). Lista otwiera się na wybranej opcji; zmiana
     // wyboru w trybie `multiple` przy otwartym panelu nie przesuwa aktywnej opcji.
     const [wasOpen, setWasOpen] = useState(isOpen);
     if (wasOpen !== isOpen) {
@@ -89,7 +91,7 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
             setOpenEdge(null);
         }
     }
-    // Z `filter` fokus idzie do wyszukiwarki — klatkę później, bo `KptOverlay` mierzy panel
+    // Z `filter` fokus idzie do wyszukiwarki - klatkę później, bo `KptOverlay` mierzy panel
     // w `visibility: hidden`.
     useEffect(() => {
         if (!isOpen || !filter)
@@ -108,16 +110,40 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
         setOpen(false);
         onTouch?.();
     }, [isOpen, setOpen, onTouch]);
-    /** Zamknięcie z powrotem fokusu na pole — po wyborze, `Escape`, `Tab` w wyszukiwarce. */
+    /** Zamknięcie z powrotem fokusu na pole - po wyborze, `Escape`, `Tab` w wyszukiwarce. */
     const closeAndFocus = () => {
         close();
         triggerRef.current?.focus();
     };
+    const enterMotion = resolveEnterMotion(undefined, useKptMotion());
+    const valueRef = useRef(null);
+    /** Ruch chipów przygotowany przed zmianą wyboru, odtwarzany po jej wyrenderowaniu. */
+    const pendingFlow = useRef(null);
+    const chipElements = () => Array.from(valueRef.current?.querySelectorAll('.kpt-select__chip') ?? []);
+    // Przed malowaniem - inaczej mignęłaby klatka z nowym układem, zanim FLIP cofnie chipy.
+    useLayoutEffect(() => {
+        const play = pendingFlow.current;
+        pendingFlow.current = null;
+        play?.(chipElements());
+    });
+    /**
+     * Nowy wybór w trybie `multiple` z ruchem chipów: dodany wskakuje, usunięty gaśnie, reszta się
+     * dosuwa (`prepareFlowMotion`, za `enter` z `KptMotionProvider`). Chipy stoją w kolejności opcji,
+     * więc pozycję zmiany liczymy z list przed i po; kilka zmian naraz idzie bez ruchu.
+     */
+    const setSelected = (next) => {
+        const box = valueRef.current;
+        const order = (values) => options.filter((o) => values.includes(o.value)).map((o) => o.value);
+        const change = flowChangeOf(order(selectedValues), order(next));
+        if (enterMotion !== 'none' && box && change)
+            pendingFlow.current = prepareFlowMotion(box, chipElements(), change, enterMotion);
+        setCurrent(next);
+    };
     const pick = (option) => {
         if (option.disabled)
             return;
         if (multiple) {
-            setCurrent(isSelected(option) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value]);
+            setSelected(isSelected(option) ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value]);
         }
         else {
             setCurrent(option.value);
@@ -130,7 +156,7 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
         if (found !== null)
             setActiveIndex(found);
     };
-    /** Jeden obsługiwacz dla pola i dla wyszukiwarki w panelu — różnią się tylko `Spacją` i `Tab`. */
+    /** Jeden obsługiwacz dla pola i dla wyszukiwarki w panelu - różnią się tylko `Spacją` i `Tab`. */
     const onKeyDown = (event, source) => {
         if (disabled || readOnly)
             return;
@@ -145,7 +171,7 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
             }
             else if ((key === 'Backspace' || key === 'Delete') && multiple && selectedValues.length) {
                 event.preventDefault();
-                setCurrent(selectedValues.slice(0, -1));
+                setSelected(selectedValues.slice(0, -1));
             }
             else if (isTypeaheadKey(event.nativeEvent) && !filter) {
                 setOpen(true);
@@ -158,7 +184,7 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
             closeAndFocus();
         }
         else if (key === 'Tab') {
-            // Z wyszukiwarki (w portalu na końcu strony) Tab uciekłby w próżnię — wracamy na pole.
+            // Z wyszukiwarki (w portalu na końcu strony) Tab uciekłby w próżnię - wracamy na pole.
             if (source === 'search') {
                 event.preventDefault();
                 closeAndFocus();
@@ -188,15 +214,15 @@ export function KptSelect({ options = [], placeholder = '', multiple = false, fi
                     setAnchor(el);
                 }, className: cn('kpt-select', isOpen && 'kpt-select--open', disabled && 'kpt-select--disabled', readOnly && 'kpt-select--readonly', showInvalid && 'kpt-select--invalid', className), role: "combobox", id: field.id, tabIndex: 0, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-expanded": isOpen, "aria-controls": isOpen ? listId : undefined, "aria-activedescendant": isOpen && !filter && activeIndex >= 0 ? optionId(activeIndex) : undefined, "aria-disabled": disabled || undefined, "aria-invalid": showInvalid || undefined, onClick: () => !disabled && !readOnly && setOpen(!isOpen), onKeyDown: (event) => onKeyDown(event, 'trigger'), onBlur: (event) => {
                     onBlur?.(event);
-                    // Przy otwartym panelu fokus idzie do pola szukania — „dotknięcie” wyśle dopiero zamknięcie.
+                    // Przy otwartym panelu fokus idzie do pola szukania - "dotknięcie" wyśle dopiero zamknięcie.
                     if (!isOpen)
                         onTouch?.();
-                }, ...rest, children: [_jsx("div", { className: "kpt-select__value", children: multiple && selectedOptions.length ? (selectedOptions.map((option, index) => (_jsxs("span", { className: "kpt-select__chip", children: [option.label, readOnly ? null : (_jsx("button", { type: "button", className: "kpt-select__chip-remove", tabIndex: -1, "aria-label": `${t('select.removeChip')}: ${option.label}`, onClick: (event) => {
+                }, ...rest, children: [_jsx("div", { className: "kpt-select__value", ref: valueRef, children: multiple && selectedOptions.length ? (selectedOptions.map((option, index) => (_jsxs("span", { className: "kpt-select__chip", children: [option.label, readOnly ? null : (_jsx("button", { type: "button", className: "kpt-select__chip-remove", tabIndex: -1, "aria-label": `${t('select.removeChip')}: ${option.label}`, onClick: (event) => {
                                         event.stopPropagation();
-                                        setCurrent(selectedValues.filter((v) => v !== option.value));
+                                        setSelected(selectedValues.filter((v) => v !== option.value));
                                     }, children: _jsx(KptIcon, { name: "x" }) }))] }, optionKey(option.value, index))))) : !multiple && filled ? (_jsx("span", { className: "kpt-select__single", children: selectedOptions[0]?.label })) : (_jsx("span", { className: "kpt-select__placeholder", children: placeholder })) }), _jsx(KptIcon, { className: "kpt-select__chevron", name: "chevron-down" })] }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, minAnchorWidth: true, children: _jsxs("div", { className: "kpt-select__panel", children: [filter ? (_jsxs("div", { className: "kpt-select__search", children: [_jsx(KptIcon, { name: "search" }), _jsx("input", { ref: searchRef, type: "text", className: "kpt-select__search-input", role: "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listId, "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : undefined, "aria-label": t('select.search'), value: filterText, placeholder: t('select.search'), onKeyDown: (event) => onKeyDown(event, 'search'), onChange: (event) => {
                                         setFilterText(event.target.value);
-                                        // Po zawężeniu aktywna jest pierwsza pasująca opcja — `Enter` wybiera ją od razu.
+                                        // Po zawężeniu aktywna jest pierwsza pasująca opcja - `Enter` wybiera ją od razu.
                                         const narrowed = filterSelectOptions(options, event.target.value).map((o) => !!o.disabled);
                                         setActiveIndex(nextOptionIndex(narrowed, -1, 'ArrowDown') ?? -1);
                                     } })] })) : null, _jsx("ul", { className: "kpt-select__list", role: "listbox", id: listId, "aria-multiselectable": multiple, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, children: filteredOptions.map((option, index) => (_jsxs("li", { id: optionId(index), className: cn('kpt-select__option', isSelected(option) && 'kpt-select__option--selected', index === activeIndex && 'kpt-select__option--active', option.disabled && 'kpt-select__option--disabled'), role: "option", "aria-selected": isSelected(option), "aria-disabled": option.disabled || undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => pick(option), onMouseEnter: () => setActiveIndex(index), children: [multiple ? (_jsx("span", { className: cn('kpt-select__check', isSelected(option) && 'is-on'), children: _jsx(KptIcon, { name: "check" }) })) : null, _jsx("span", { className: "kpt-select__option-label", children: option.label }), !multiple && isSelected(option) ? (_jsx(KptIcon, { className: "kpt-select__option-tick", name: "check" })) : null] }, optionKey(option.value, index)))) }), filteredOptions.length === 0 ? (_jsx("div", { className: "kpt-select__empty", role: "status", children: t('select.noResults') })) : null] }) })] }));

package/dist/shared/types.d.ts

@@ -6,13 +6,13 @@ export interface KptOption<T = unknown> {
     /** Nazwa ikony z rejestru. Renderuje ją dziś wyłącznie `kpt-button-group`. */
     icon?: string;
 }
-/** Wariant komunikatu — wspólny dla alertu i toastów. */
+/** Wariant komunikatu - wspólny dla alertu i toastów. */
 export type KptAlertVariant = 'info' | 'success' | 'warning' | 'danger';
 /**
  * Klik w odnośnik komponentu nawigacji (`kpt-breadcrumb`, `kpt-menubar`, `kpt-megamenu`). Linki
  * są zwykłym `<a href>`, więc bez routera klik przeładowuje stronę. Aplikacja z routerem łapie to
- * zdarzenie, woła `event.preventDefault()` i nawiguje sama — biblioteka nie zależy od żadnego routera.
- * Zdarzenie leci tylko dla zwykłego kliku: Ctrl/⌘/Shift/środkowy przycisk i `target="_blank"`
+ * zdarzenie, woła `event.preventDefault()` i nawiguje sama - biblioteka nie zależy od żadnego routera.
+ * Zdarzenie leci tylko dla zwykłego kliku: Ctrl/Cmd/Shift/środkowy przycisk i `target="_blank"`
  * zostają natywne (nowa karta, nowe okno).
  */
 export interface KptNavigateEvent<T = unknown> {
@@ -20,12 +20,12 @@ export interface KptNavigateEvent<T = unknown> {
     item: T;
     /** Adres z `href`. */
     url: string;
-    /** Oryginalne zdarzenie — `preventDefault()` zatrzymuje przeładowanie strony. */
+    /** Oryginalne zdarzenie - `preventDefault()` zatrzymuje przeładowanie strony. */
     event: MouseEvent;
 }
 /**
  * Czy klik to zwykła nawigacja w tej samej karcie: lewy przycisk, bez modyfikatorów, a odnośnik
- * nie ma `target` innego niż `_self`. `target` podaje wołający — w React `currentTarget`
+ * nie ma `target` innego niż `_self`. `target` podaje wołający - w React `currentTarget`
  * zdarzenia natywnego to korzeń aplikacji, nie kliknięty odnośnik.
  */
 export declare function kptIsPlainClick(event: Pick<MouseEvent, 'button' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'altKey'>, target?: string): boolean;

package/dist/shared/types.js

@@ -1,6 +1,6 @@
 /**
  * Czy klik to zwykła nawigacja w tej samej karcie: lewy przycisk, bez modyfikatorów, a odnośnik
- * nie ma `target` innego niż `_self`. `target` podaje wołający — w React `currentTarget`
+ * nie ma `target` innego niż `_self`. `target` podaje wołający - w React `currentTarget`
  * zdarzenia natywnego to korzeń aplikacji, nie kliknięty odnośnik.
  */
 export function kptIsPlainClick(event, target = '') {

package/dist/sidenav/llms.txt

@@ -1,24 +1,24 @@
 # KptSidenav (@konce-pt/react)
 
-The side panel — a styled navigation container, usually handed to the `sidenav` slot of
+The side panel - a styled navigation container, usually handed to the `sidenav` slot of
 `<KptAppShell>`. Import: `import { KptSidenav } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-sidenav">
-      <div class="kpt-sidenav__scroll">…children…</div>
-      <div kptsidenavfooter="">…footer…</div>
+      <div class="kpt-sidenav__scroll">...children...</div>
+      <div kptsidenavfooter="">...footer...</div>
     </div>
 
 ## Props
 - `className`, `ref` and every other `<div>` prop go to the panel root
 
 ## Sub-components
-- `KptSidenav.Footer` — lifted OUT of the scrolling area, so it stays pinned to the bottom of the
+- `KptSidenav.Footer` - lifted OUT of the scrolling area, so it stays pinned to the bottom of the
   panel however long the navigation gets (a user block, an app version, a theme switch). It carries
   the `kptsidenavfooter` attribute the shared SCSS targets.
 
 Default children land in the scrolling area. Plain `<a>` elements inside it are styled by the
-stylesheet already — padding, radius, a hover background — so a simple link list needs no classes.
+stylesheet already - padding, radius, a hover background - so a simple link list needs no classes.
 
 ## Examples
     <KptSidenav>
@@ -27,7 +27,7 @@ stylesheet already — padding, radius, a hover background — so a simple link
       <KptSidenav.Footer>v0.7.12</KptSidenav.Footer>
     </KptSidenav>
 
-    <KptAppShell sidenav={<KptSidenav>…</KptSidenav>} toolbar={…}>…</KptAppShell>
+    <KptAppShell sidenav={<KptSidenav>...</KptSidenav>} toolbar={...}>...</KptAppShell>
 
 ## Rail mode
 When `<KptAppShell sidenavRailBreakpoint>` is on, a closed panel narrows instead of hiding. Mark the
@@ -41,13 +41,13 @@ the shell will clip them the accessible way (visually hidden, still in the acces
 
 Both render the lowercase attribute the shared SCSS targets (`kptnavlabel` / `kptnavsection`);
 attribute names in CSS selectors are case-insensitive in HTML, so one rule serves both ports. Use
-the components rather than writing the attribute by hand — JSX rejects an unknown camelCase
+the components rather than writing the attribute by hand - JSX rejects an unknown camelCase
 attribute, and a hand-written one is easy to misspell.
 
 ## Links
 Links in the scroll area are `display: flex` with a gap, so an icon and a label never glue together
 even when the template compiler drops the whitespace between them. A link with
-`aria-current="page"` gets the muted background and a medium weight — mark the current page
+`aria-current="page"` gets the muted background and a medium weight - mark the current page
 yourself, the component does not know which one it is.
 
 ## Tokens
@@ -55,5 +55,5 @@ yourself, the component does not know which one it is.
 `--kpt-sidenav-rail-width`, which are read by `KptAppShell`.
 
 ## Accessibility
-The panel itself is a plain container — the `role="navigation"` and the label live on the shell's
+The panel itself is a plain container - the `role="navigation"` and the label live on the shell's
 `<aside>` around it, so a sidenav used outside `KptAppShell` needs its own landmark.

package/dist/sidenav/sidenav.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef } from 'react';
 export type KptSidenavProps = ComponentPropsWithRef<'div'>;
 /**
- * Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle podawany do slotu
+ * Panel boczny (sidenav) - stylowany kontener nawigacji, zwykle podawany do slotu
  * `sidenav` komponentu `<KptAppShell>`.
  *
  * @example

package/dist/sidenav/sidenav.js

@@ -8,7 +8,7 @@ import { slotChildren } from "../internal/slot-children.js";
  * przyklejona do dołu panelu niezależnie od długości nawigacji.
  */
 /**
- * Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle podawany do slotu
+ * Panel boczny (sidenav) - stylowany kontener nawigacji, zwykle podawany do slotu
  * `sidenav` komponentu `<KptAppShell>`.
  *
  * @example

package/dist/skeleton/llms.txt

@@ -12,13 +12,13 @@ Import: `import { KptSkeleton } from '@konce-pt/react';`
 ## Props
 - `variant`: 'text' | 'circle' | 'rect' (default 'rect')
 - `width`: string (default '100%'), `height`: string (default '1rem')
-- `lines`: number (default 3) — the number of lines in the `text` variant
+- `lines`: number (default 3) - the number of lines in the `text` variant
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## The last line is shorter
 In the `text` variant the last line is 60% wide. A stack of full-width rectangles does not read as
 a paragraph, and a paragraph is exactly what it stands in for. A single line (`lines={1}`) keeps
-the full `width` — there is no paragraph to imitate.
+the full `width` - there is no paragraph to imitate.
 
 ## Examples
     <KptSkeleton variant="text" lines={3} />
@@ -29,6 +29,6 @@ the full `width` — there is no paragraph to imitate.
 The base `--kpt-color-muted`; the shimmer is a lighter band mixed with `--kpt-color-surface`; corners `--kpt-radius-md` (blocks) / `--kpt-radius-sm` (text lines).
 
 ## Accessibility
-The host is `aria-hidden="true"` — a placeholder has nothing to announce, and reading out empty
+The host is `aria-hidden="true"` - a placeholder has nothing to announce, and reading out empty
 boxes only adds noise. Announce the wait with `KptSpinner` or `KptProgress` next to it when it
 matters.

package/dist/skeleton/skeleton.d.ts

@@ -10,7 +10,7 @@ export interface KptSkeletonProps extends Omit<ComponentPropsWithRef<'span'>, 'c
 /**
  * Placeholder ładowania z animacją shimmer.
  *
- * Wariant `text` skraca ostatnią linię do 60% — pełny prostokąt nie wygląda jak akapit, a to
+ * Wariant `text` skraca ostatnią linię do 60% - pełny prostokąt nie wygląda jak akapit, a to
  * właśnie akapit ma udawać. Przy jednej linii nie ma czego udawać, więc ta ma pełną szerokość.
  *
  * @example

package/dist/skeleton/skeleton.js

@@ -3,7 +3,7 @@ import { cn } from "../internal/cn.js";
 /**
  * Placeholder ładowania z animacją shimmer.
  *
- * Wariant `text` skraca ostatnią linię do 60% — pełny prostokąt nie wygląda jak akapit, a to
+ * Wariant `text` skraca ostatnią linię do 60% - pełny prostokąt nie wygląda jak akapit, a to
  * właśnie akapit ma udawać. Przy jednej linii nie ma czego udawać, więc ta ma pełną szerokość.
  *
  * @example

package/dist/slider/llms.txt

@@ -6,33 +6,39 @@ Import: `import { KptSlider } from '@konce-pt/react';`
 ## DOM
     <!-- single -->
     <div class="kpt-slider-host">
-      <input class="kpt-slider__input" type="range" style="--_pct: 40%">
+      <div class="kpt-slider__track" style="--_p: 0.4">
+        <input class="kpt-slider__input" type="range">
+        <span class="kpt-slider__bar" aria-hidden="true"><span class="kpt-slider__bar-fill"></span></span>
+        <span class="kpt-slider__knob" aria-hidden="true"></span>
+      </div>
       <span class="kpt-slider__value">40</span>
     </div>
 
     <!-- range -->
     <div class="kpt-slider-host">
-      <div class="kpt-slider__range">
-        <div class="kpt-slider__rail"></div>
-        <div class="kpt-slider__fill" style="left: 20%; right: 20%"></div>
+      <div class="kpt-slider__track kpt-slider__track--range" style="--_lo: 0.2; --_hi: 0.8">
         <input class="kpt-slider__thumb kpt-slider__thumb--low" type="range" aria-label="Minimum">
         <input class="kpt-slider__thumb kpt-slider__thumb--high" type="range" aria-label="Maximum">
+        <span class="kpt-slider__bar" aria-hidden="true"><span class="kpt-slider__bar-fill"></span></span>
+        <span class="kpt-slider__knob kpt-slider__knob--low" aria-hidden="true"></span>
+        <span class="kpt-slider__knob kpt-slider__knob--high" aria-hidden="true"></span>
       </div>
-      <span class="kpt-slider__value">20–80</span>
+      <span class="kpt-slider__value">20-80</span>
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — `number`, or `[number, number]` in `range` mode
-- `range`: boolean — two handles
+- `value` / `defaultValue` / `onValueChange` - `number`, or `[number, number]` in `range` mode
+- `range`: boolean - two handles
 - `min` (default 0), `max` (default 100), `step` (default 1)
-- `showValue`: boolean — prints the current value next to the slider
+- `showValue`: boolean - prints the current value next to the slider
 - `disabled`, `onTouch()`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Native inputs all the way down
 Both handles are native `<input type="range">` stacked on each other, so the keyboard, touch
-gestures and screen readers work with no handling of our own — there is no custom drag logic to get
-wrong. The rail and the fill are decoration underneath them.
+gestures and screen readers work with no handling of our own. The only custom pointer logic is the
+press on the track next to the handles (see "Pointer"). The track, fill and handles you see are
+decoration drawn under the transparent inputs.
 
 ## The handles cannot cross
 Moving the low handle above the high one clamps it to the high value, and the other way round. The
@@ -43,7 +49,7 @@ pair therefore always stays ordered, so the fill never inverts.
     <KptSlider range value={span} onValueChange={(v) => setSpan(v as [number, number])} showValue />
 
 ## Screen reader and keyboard
-`suffix`: string (" zł", "%", " km") — shown after the value and put into `aria-valuetext` ("40
+`suffix`: string (" zł", "%", " km") - shown after the value and put into `aria-valuetext` ("40
 zł"), so the unit is read too. `aria-invalid` after touch.
 
 ## Label and description
@@ -55,12 +61,25 @@ previously hard-coded and mixed-language); inside `kpt-form-field` each thumb re
 Minimum" through `aria-labelledby`, without one `ariaLabel` gives "<ariaLabel>, Minimum". `id` goes
 to the single input or the lower thumb.
 
+## Pointer
+The handle reacts to the pointer: it grows on hover, and while held it grows more on a spring with
+a soft halo in the primary colour and a `grabbing` cursor. A click on the track (and a key press) glides
+the handle and the fill to the new value instead of jumping; while dragging they follow the pointer with
+no delay. The native `input[type=range]` stays transparent on top (keyboard, screen reader, dragging) and
+the track, fill and handle are drawn next to it from `--_p` (0..1); `range` draws two handles from
+`--_lo`/`--_hi`. The glide is pure CSS and drops out under "reduce motion".
+
+In `range` mode a press on the track outside the handles - before the range, after it or inside it -
+moves the nearest handle there, focuses it (arrow keys keep working) and keeps dragging it until
+release. The handles themselves are dragged natively. When both handles sit in the upper half, the
+lower one is stacked on top, so two handles pushed against `max` can still be pulled apart.
+
 ## Tokens
-`--kpt-color-primary` (the fill and the handles), `--kpt-color-muted` (the rail).
+`--kpt-color-primary` (the fill and the handles), `--kpt-color-surface-variant` (the track).
 
 ## Accessibility
 Native range inputs carry their own role and value semantics. In `range` mode each handle gets an
 `aria-label` telling the two apart, because "slider" twice would say nothing.
 
 ## Read-only and required
-`readOnly` keeps the thumb focusable but undoes every move (`aria-readonly`). The range thumbs can no longer cross: the clamped value is written back to the native input, so the thumb stops at the other one. `slider` does not accept `aria-required` — the field asterisk and the validator carry it.
+`readOnly` keeps the thumb focusable but undoes every move (`aria-readonly`). The range thumbs can no longer cross: the clamped value is written back to the native input, so the thumb stops at the other one. `slider` does not accept `aria-required` - the field asterisk and the validator carry it.

package/dist/slider/slider-drag.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Oznacza tor suwaka jako przeciągany (`data-dragging`) od pierwszego ruchu wskaźnika o kilka pikseli
+ * do puszczenia. Samo kliknięcie zostawia tor bez znacznika, więc skok wartości jedzie przejściem CSS.
+ * Ta sama funkcja jest w porcie Angulara (`slider/slider-drag.ts`).
+ */
+export declare function kptTrackDrag(track: HTMLElement, startX: number): void;
+/** Koniec zakresu: dolny albo górny uchwyt. */
+export type KptRangeEnd = 'low' | 'high';
+export interface KptRangePressOptions {
+    min: number;
+    max: number;
+    step: number;
+    low: number;
+    high: number;
+    /** Ustawia wybrany koniec. Pilnowanie, by uchwyty się nie minęły, zostaje w komponencie. */
+    set: (end: KptRangeEnd, value: number) => void;
+    /** Puszczenie wskaźnika. */
+    release?: () => void;
+}
+/**
+ * Wciśnięcie toru zakresu poza uchwytem. Najbliższy uchwyt skacze w to miejsce (wewnątrz zakresu
+ * też - ten bliższy), dostaje fokus, żeby dalej działały strzałki, i idzie za wskaźnikiem aż do
+ * puszczenia. Natywne suwaki tego nie zrobią: przy dwóch nałożonych inputach wskaźnik łapią tylko
+ * kciuki, a kliknięcie w tor trafiłoby w jeden z nich zawsze, niezależnie od odległości.
+ */
+export declare function kptRangePress(track: HTMLElement, event: PointerEvent, opts: KptRangePressOptions): void;

package/dist/slider/slider-drag.js

@@ -0,0 +1,79 @@
+/**
+ * Oznacza tor suwaka jako przeciągany (`data-dragging`) od pierwszego ruchu wskaźnika o kilka pikseli
+ * do puszczenia. Samo kliknięcie zostawia tor bez znacznika, więc skok wartości jedzie przejściem CSS.
+ * Ta sama funkcja jest w porcie Angulara (`slider/slider-drag.ts`).
+ */
+export function kptTrackDrag(track, startX) {
+    const move = (e) => {
+        if (Math.abs(e.clientX - startX) >= 3)
+            track.setAttribute('data-dragging', '');
+    };
+    const up = () => {
+        window.removeEventListener('pointermove', move);
+        window.removeEventListener('pointerup', up);
+        window.removeEventListener('pointercancel', up);
+        track.removeAttribute('data-dragging');
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+    window.addEventListener('pointercancel', up);
+}
+/**
+ * Wciśnięcie toru zakresu poza uchwytem. Najbliższy uchwyt skacze w to miejsce (wewnątrz zakresu
+ * też - ten bliższy), dostaje fokus, żeby dalej działały strzałki, i idzie za wskaźnikiem aż do
+ * puszczenia. Natywne suwaki tego nie zrobią: przy dwóch nałożonych inputach wskaźnik łapią tylko
+ * kciuki, a kliknięcie w tor trafiłoby w jeden z nich zawsze, niezależnie od odległości.
+ */
+export function kptRangePress(track, event, opts) {
+    if (event.button !== 0)
+        return;
+    // Bez tego przeglądarka zaznacza tekst w trakcie ciągnięcia i zabiera fokus z uchwytu.
+    event.preventDefault();
+    const first = rangeValueAt(track, event.clientX, opts);
+    const end = first < opts.low ? 'low' : first > opts.high ? 'high' : first - opts.low <= opts.high - first ? 'low' : 'high';
+    let last = first;
+    opts.set(end, first);
+    track.querySelector(`.kpt-slider__thumb--${end}`)?.focus({ preventScroll: true });
+    track.setAttribute('data-pressed', end);
+    const move = (e) => {
+        const next = rangeValueAt(track, e.clientX, opts);
+        if (next === last)
+            return;
+        last = next;
+        opts.set(end, next);
+    };
+    const up = () => {
+        window.removeEventListener('pointermove', move);
+        window.removeEventListener('pointerup', up);
+        window.removeEventListener('pointercancel', up);
+        track.removeAttribute('data-pressed');
+        opts.release?.();
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+    window.addEventListener('pointercancel', up);
+}
+/**
+ * Wartość pod wskaźnikiem, przyciągnięta do kroku tak jak natywny suwak. Środek uchwytu jeździ
+ * od połowy jego szerokości do szerokości toru minus połowa - stąd odjęcie szerokości uchwytu.
+ */
+function rangeValueAt(track, clientX, { min, max, step }) {
+    const rect = track.getBoundingClientRect();
+    const thumb = track.querySelector('.kpt-slider__knob')?.offsetWidth ?? 0;
+    const usable = rect.width - thumb;
+    let frac = usable > 0 ? (clientX - rect.left - thumb / 2) / usable : 0;
+    frac = Math.min(1, Math.max(0, frac));
+    if (getComputedStyle(track).direction === 'rtl')
+        frac = 1 - frac;
+    if (max <= min)
+        return min;
+    if (!(step > 0))
+        return min + frac * (max - min);
+    let steps = Math.round((frac * (max - min)) / step);
+    // Jak natywny suwak: ostatni krok nie wychodzi za `max`, gdy zakres nie dzieli się przez krok.
+    if (min + steps * step > max)
+        steps -= 1;
+    // Ułamkowy krok (0.1) zostawia ogon zmiennoprzecinkowy - przycięcie do liczby miejsc kroku.
+    const decimals = String(step).split('.')[1]?.length ?? 0;
+    return Number((min + steps * step).toFixed(decimals));
+}

package/dist/slider/slider.d.ts

@@ -13,24 +13,25 @@ export interface KptSliderProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
     step?: number;
     /** Pokazuje bieżącą wartość obok suwaka. */
     showValue?: boolean;
-    /** Jednostka za liczbą („ zł”, „%”, „ km”) — w pokazanej wartości i w `aria-valuetext`. */
+    /** Jednostka za liczbą (" zł", "%", " km") - w pokazanej wartości i w `aria-valuetext`. */
     suffix?: string;
     invalid?: boolean;
     touched?: boolean;
-    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    /** Id elementu fokusowalnego (nie hosta); bez niego generowane, w `KptFormField` - z wrappera. */
     id?: string;
     /** Nazwa dostępna, gdy kontrolki nie opisuje etykieta (`<label for>` albo `KptFormField`). */
     ariaLabel?: string | null;
     disabled?: boolean;
-    /** Tylko do odczytu — uchwyt można skupić, ale nie przesunąć (`aria-readonly`). */
+    /** Tylko do odczytu - uchwyt można skupić, ale nie przesunąć (`aria-readonly`). */
     readOnly?: boolean;
     onTouch?: () => void;
 }
 /**
  * Suwak wartości. W trybie `range` udostępnia dwa uchwyty, a wartością jest para `[min, max]`.
  *
- * Oba uchwyty to natywne `<input type="range">` leżące na sobie — dzięki temu klawiatura,
- * gesty dotykowe i czytniki ekranu działają bez ani jednej linii własnej obsługi.
+ * Oba uchwyty to natywne `<input type="range">` leżące na sobie - klawiatura, gesty dotykowe
+ * i czytniki ekranu działają bez własnej obsługi. Własna jest tylko jedna rzecz: wciśnięcie toru
+ * obok kciuków przesuwa najbliższy uchwyt (`kptRangePress`).
  *
  * @example
  * <KptSlider value={volume} onValueChange={setVolume} min={0} max={100} step={5} showValue />