@konce-pt/react 0.12.0 → 0.14.0

package/dist/public-api.js

@@ -1,27 +1,29 @@
 /*
- * @konce-pt/react — publiczne API.
+ * @konce-pt/react - publiczne API.
  *
  * Komponenty renderują te same klasy `kpt-*` i te same tokeny `--kpt-*`, co port
  * Angulara; warstwa CSS (`@konce-pt/styles`, `@konce-pt/grid`, `@konce-pt/tokens`)
  * jest wspólna i nie ma tu własnych stylów.
  */
-// Komponenty — układ
+// Komponenty - układ
 export { KptAppShell, KptNavLabel, KptNavSection, useKptAppShell, useKptShellNavToggle } from "./app-shell/app-shell.js";
 export { KptToolbar, KptToolbarSpacer } from "./toolbar/toolbar.js";
 export { KptSidenav, KptSidenavFooter } from "./sidenav/sidenav.js";
-// Komponenty — panele
+// Komponenty - panele
 export { KptTabs, KptTab } from "./tabs/tabs.js";
 export { KptAccordion, KptAccordionPanel } from "./accordion/accordion.js";
 export { KptPanel, KptPanelActions } from "./panel/panel.js";
 export { KptStepper, KptStep, useKptStepper } from "./stepper/stepper.js";
 export { KptFieldset } from "./fieldset/fieldset.js";
 export { KptTimeline } from "./timeline/timeline.js";
-// Komponenty — prezentacja
+// Komponenty - prezentacja
 export { KptAlert } from "./alert/alert.js";
 export { KptDivider } from "./divider/divider.js";
 export { KptEmpty } from "./empty/empty.js";
 export { KptProgress } from "./progress/progress.js";
 export { KptSpinner } from "./spinner/spinner.js";
+export { KptLoader } from "./loader/loader.js";
+export { KptUpdate } from "./update/update.js";
 export { KptSkeleton } from "./skeleton/skeleton.js";
 export { KptIcon } from "./icon/icon.js";
 export { getKptIcon, hasKptIcon, registerKptIcons } from "./icon/icon-registry.js";
@@ -30,7 +32,7 @@ export { KptBadge } from "./badge/badge.js";
 export { KptBackdrop } from "./backdrop/backdrop.js";
 export { KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF, KPT_SIGNAL_GRID_GAP, KPT_WAVE_AMPLITUDE, KPT_WAVE_BAND, KPT_WAVE_RESOLUTION, KPT_WAVE_ROTATION, buildSignalGrid, createBackdropRenderer, mixOklch, readCssColor, resolveWave, shiftHue, signalGridAlpha, signalGridDensity, waveIntensity, waveRamp, } from '@konce-pt/backdrop';
 export { KptChip } from "./chip/chip.js";
-// Komponenty — nakładki
+// Komponenty - nakładki
 export { KptDialog, KptDialogFooter } from "./dialog/dialog.js";
 export { KptDrawer } from "./drawer/drawer.js";
 export { KptBottomSheet } from "./bottom-sheet/bottom-sheet.js";
@@ -54,7 +56,7 @@ export { KPT_AUTH_MIN_PASSWORD } from "./auth/auth-types.js";
 export { KptConfirmContainer } from "./confirm/confirm-container.js";
 export { kptConfirm, useKptConfirmRequest } from "./confirm/confirm-store.js";
 export { KptToastContainer } from "./toast/toast-container.js";
-export { kptToast, useKptToasts } from "./toast/toast-store.js";
+export { kptToast, useKptToasts, useKptToastsPaused, resolveKptToast, KPT_TOAST_FALLBACK_DURATION } from "./toast/toast-store.js";
 export { KptMenu } from "./menu/menu.js";
 export { KptMenubar } from "./menubar/menubar.js";
 export { KptMegamenu } from "./megamenu/megamenu.js";
@@ -67,7 +69,7 @@ export { KptMention } from "./mention/mention.js";
 export { KptMentions } from "./mention/mentions.js";
 export { KPT_MENTION_LIMIT, applyMention, collectMentions, filterMentions, foldMentionText, mentionQuery, mentionToken, parseMentionText, } from '@konce-pt/mention';
 export { KptOverlay } from "./internal/overlay.js";
-// Komponenty — formularze
+// Komponenty - formularze
 export { KptButtonGroup } from "./button-group/button-group.js";
 export { KptSelect } from "./select/select.js";
 export { KptFormField } from "./form-field/form-field.js";
@@ -97,6 +99,10 @@ export { KptPaginator } from "./paginator/paginator.js";
 // Komponenty
 export { KptButton } from "./button/button.js";
 export { KptIconButton } from "./icon-button/icon-button.js";
+export { KptSpeechButton } from "./speech/speech-button.js";
+export { KptSpeechWave } from "./speech/speech-wave.js";
+export { useKptSpeechRecognition } from "./speech/use-speech-recognition.js";
+export { defaultSpeechLang, resolveSpeechTarget, speechSupport } from '@konce-pt/speech';
 export { KptFab } from "./fab/fab.js";
 export { KptSplitButton } from "./split-button/split-button.js";
 export { KptCard, KptCardActions, KptCardFooter, KptCardHeader, KptCardLead, KptCardMedia, KptCardMeta, KptCardSection, KptCardSubtitle, KptCardTags, KptCardTitle, } from "./card/card.js";

package/dist/radio-group/llms.txt

@@ -15,14 +15,15 @@ Import: `import { KptRadioGroup } from '@konce-pt/react';`
     </div>
 
 ## Props
-- `options`: `KptOption<T>[]` — `{ label, value, disabled? }`
-- `value` / `defaultValue` / `onValueChange` — controlled or uncontrolled
-- `name`: string — the form group name; omitted means one is generated
+- `options`: `KptOption<T>[]` - `{ label, value, disabled? }`
+- `value` / `defaultValue` / `onValueChange` - controlled or uncontrolled
+- `name`: string - the form group name; omitted means one is generated
 - `disabled`, `invalid`, `touched`, `onTouch()`
+- `toggleMotion`: 'spring' | 'fade' | 'none' (default from `KptMotionProvider`, else `spring`) - see "Toggle motion"
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The shared name does the work
-All inputs share one `name`, and that — not any code in the component — is what makes the browser
+All inputs share one `name`, and that - not any code in the component - is what makes the browser
 treat them as one group: arrow keys move between them, only one can be checked, and a native form
 submits a single value. The generated name is unique per instance, so two groups on one page never
 interfere.
@@ -32,16 +33,22 @@ interfere.
     <KptRadioGroup name="plan" options={plans} defaultValue="pro" />
 
 ## Screen reader and keyboard
-`orientation`: 'vertical' (default) | 'horizontal' — options in a column or in a wrapping row; also
+`orientation`: 'vertical' (default) | 'horizontal' - options in a column or in a wrapping row; also
 sets `aria-orientation`.
 
 ## Label and description
 `id` goes to the focusable element, not the host; without one it comes from `KptFormField` or is
 generated. A `div` with a role is not named by `label[for]`, so inside `KptFormField` it gets
 `aria-labelledby` pointing at the wrapper's label (unless `ariaLabel` is set), and the hint or error
-is added to `aria-describedby`. New: `id`, `ariaLabel` and `required` (→ `aria-required`) on the
+is added to `aria-describedby`. New: `id`, `ariaLabel` and `required` (-> `aria-required`) on the
 `radiogroup`.
 
+## Toggle motion
+`toggleMotion`: `spring` - the dot pops in on a spring and the circle bounces; `fade` - a calm colour and mark transition; `none` - no
+motion. The bounce is started by the change handler, so a control that is checked on load does not
+move. With no value it takes `toggle` from `KptMotionProvider` (default `spring`); `enabled: false` and the
+system "reduce motion" setting always win.
+
 ## Tokens
 `--kpt-color-primary` (the checked dot), `--kpt-form-field-border`,
 `--kpt-form-field-border-error`.

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

@@ -1,13 +1,20 @@
 import type { ComponentPropsWithRef } from 'react';
 import type { KptOption } from '../shared/types.ts';
+import { type KptToggleMotion } from '@konce-pt/motion';
 export interface KptRadioGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+    /**
+     * Ruch przełączania: `spring` - kropka wskakuje na sprężynie, a pole odbija; `fade` - spokojne przejście koloru i znaku; `none` - bez ruchu.
+     * Bez wartości bierze `toggle` z `KptMotionProvider` (domyślnie `spring`); `enabled={false}` i systemowe
+     * "ogranicz ruch" wyłączają go zawsze.
+     */
+    toggleMotion?: KptToggleMotion;
     options?: readonly KptOption<T>[];
     value?: T;
     defaultValue?: T;
     onValueChange?: (value: T) => void;
     /** Nazwa grupy w formularzu; pominięta = generowana. */
     name?: string;
-    /** 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;
@@ -16,7 +23,7 @@ export interface KptRadioGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>
     /** Układ opcji: pod sobą (domyślnie) albo w rzędzie, z zawijaniem. */
     orientation?: 'vertical' | 'horizontal';
     disabled?: boolean;
-    /** Tylko do odczytu — wybór widać, nie da się go zmienić (`aria-readonly`). */
+    /** Tylko do odczytu - wybór widać, nie da się go zmienić (`aria-readonly`). */
     readOnly?: boolean;
     invalid?: boolean;
     touched?: boolean;
@@ -25,10 +32,10 @@ export interface KptRadioGroupProps<T> extends Omit<ComponentPropsWithRef<'div'>
 /**
  * Grupa przycisków opcji (radio). Opcje przez `options`.
  *
- * Wszystkie pola dzielą jedną nazwę `name` — to ona, a nie kod komponentu, sprawia, że
+ * Wszystkie pola dzielą jedną nazwę `name` - to ona, a nie kod komponentu, sprawia, że
  * przeglądarka traktuje je jako jedną grupę i pozwala chodzić po niej strzałkami.
  *
  * @example
  * <KptRadioGroup options={plans} value={plan} onValueChange={setPlan} />
  */
-export declare function KptRadioGroup<T>({ options, value, defaultValue, onValueChange, name, id, ariaLabel, required, orientation, disabled, readOnly, invalid, touched, onTouch, className, ...rest }: Readonly<KptRadioGroupProps<T>>): import("react").JSX.Element;
+export declare function KptRadioGroup<T>({ options, value, defaultValue, onValueChange, name, id, ariaLabel, required, orientation, disabled, readOnly, invalid, touched, onTouch, toggleMotion, className, ...rest }: Readonly<KptRadioGroupProps<T>>): import("react").JSX.Element;

package/dist/radio-group/radio-group.js

@@ -5,17 +5,20 @@ import { optionKey } from "../internal/option-key.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
+import { playPopMotion, resolveToggleMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 /**
  * Grupa przycisków opcji (radio). Opcje przez `options`.
  *
- * Wszystkie pola dzielą jedną nazwę `name` — to ona, a nie kod komponentu, sprawia, że
+ * Wszystkie pola dzielą jedną nazwę `name` - to ona, a nie kod komponentu, sprawia, że
  * przeglądarka traktuje je jako jedną grupę i pozwala chodzić po niej strzałkami.
  *
  * @example
  * <KptRadioGroup options={plans} value={plan} onValueChange={setPlan} />
  */
-export function KptRadioGroup({ options = [], value, defaultValue, onValueChange, name, id, ariaLabel = null, required = false, orientation = 'vertical', disabled = false, readOnly = false, invalid = false, touched, onTouch, className, ...rest }) {
-    /** Grupa nie dostaje nazwy z `label[for]` — stąd `aria-labelledby` na etykietę wrappera. */
+export function KptRadioGroup({ options = [], value, defaultValue, onValueChange, name, id, ariaLabel = null, required = false, orientation = 'vertical', disabled = false, readOnly = false, invalid = false, touched, onTouch, toggleMotion, className, ...rest }) {
+    const motion = resolveToggleMotion(toggleMotion, useKptMotion());
+    /** Grupa nie dostaje nazwy z `label[for]` - stąd `aria-labelledby` na etykietę wrappera. */
     const field = useKptFieldA11y(id, 'kpt-radio-group');
     const groupName = useKptId(name, 'kpt-radio');
     const [current, setCurrent] = useControllableState({
@@ -24,14 +27,19 @@ export function KptRadioGroup({ options = [], value, defaultValue, onValueChange
         onChange: onValueChange,
     });
     const showInvalid = invalid && (touched ?? true);
-    return (_jsx("div", { className: cn('kpt-radio-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-radio-group', orientation === 'horizontal' && 'kpt-radio-group--horizontal'), role: "radiogroup", "aria-orientation": orientation, "aria-invalid": showInvalid || undefined, id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, 
+    return (_jsx("div", { className: cn('kpt-radio-group-host', className), ...rest, children: _jsx("div", { className: cn('kpt-radio-group', orientation === 'horizontal' && 'kpt-radio-group--horizontal'), "data-motion": motion, role: "radiogroup", "aria-orientation": orientation, "aria-invalid": showInvalid || undefined, id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, 
             // Tylko do odczytu: strzałki natywnie przestawiałyby zaznaczenie.
             onKeyDown: (event) => {
                 if (readOnly && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key))
                     event.preventDefault();
-            }, children: options.map((option, index) => (_jsxs("label", { className: cn('kpt-radio', (disabled || option.disabled) && 'kpt-radio--disabled'), children: [_jsx("input", { type: "radio", className: "kpt-radio__input", name: groupName, checked: option.value === current, disabled: disabled || option.disabled, onChange: () => {
+            }, children: options.map((option, index) => (_jsxs("label", { className: cn('kpt-radio', (disabled || option.disabled) && 'kpt-radio--disabled'), children: [_jsx("input", { type: "radio", className: "kpt-radio__input", name: groupName, checked: option.value === current, disabled: disabled || option.disabled, onChange: (event) => {
                             // Pole kontrolowane: bez zmiany stanu React przywraca poprzednie zaznaczenie.
-                            if (!readOnly)
-                                setCurrent(option.value);
+                            if (readOnly)
+                                return;
+                            setCurrent(option.value);
+                            // Wskoczenie po zmianie z ręki - z handlera, nie z CSS, bo reguła na `:checked` grałaby przy starcie.
+                            const dot = event.currentTarget.nextElementSibling;
+                            if (motion === 'spring' && dot instanceof HTMLElement)
+                                playPopMotion(dot);
                         }, onBlur: () => onTouch?.() }), _jsx("span", { className: "kpt-radio__dot", "aria-hidden": "true" }), _jsx("span", { className: "kpt-radio__label", children: option.label })] }, optionKey(option.value, index)))) }) }));
 }

package/dist/rating/llms.txt

@@ -5,32 +5,32 @@ Import: `import { KptRating } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-rating-host">
-      <div class="kpt-rating" role="radiogroup" aria-label="…">
-        <button class="kpt-rating__star is-filled" role="radio" aria-checked="false" tabindex="-1" aria-label="1 of 5">…</button>
-        …count buttons…
+      <div class="kpt-rating" role="radiogroup" aria-label="...">
+        <button class="kpt-rating__star is-filled" role="radio" aria-checked="false" tabindex="-1" aria-label="1 of 5">...</button>
+        ...count buttons...
       </div>
     </div>
 
 ## Props
-- `value` / `defaultValue` / `onValueChange` — the score as a number, `0` means unrated
+- `value` / `defaultValue` / `onValueChange` - the score as a number, `0` means unrated
 - `count`: number (default 5)
-- `allowHalf`: boolean — half stars, the value goes in steps of 0.5
-- `readOnly`: boolean — display only, no clicking and no hover preview
+- `allowHalf`: boolean - half stars, the value goes in steps of 0.5
+- `readOnly`: boolean - display only, no clicking and no hover preview
 - `disabled`: boolean
-- `onTouch()` — when focus leaves the group
+- `onTouch()` - when focus leaves the group
 - `id`, `ariaLabel`, `required`, `invalid`, `touched`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Clicking a lit star clears the score
 Picking the star that already holds the value writes `0`, so a rating can be taken back without a
-separate "clear" button — the same contract as the Angular port.
+separate "clear" button - the same contract as the Angular port.
 
 ## Hover beats the value, but only while the pointer is there
 The lit count comes from `hover || value`, so the row previews the score under the cursor and
 falls back to the real value on `mouseleave`. `readOnly` and `disabled` freeze both.
 
 ## i18n
-Each star is labelled from `rating.star` (`{value}`, `{max}`) — EN `1 of 5`, PL `1 z 5`. Override
+Each star is labelled from `rating.star` (`{value}`, `{max}`) - EN `1 of 5`, PL `1 z 5`. Override
 per instance with the `locale` / `dictionary` props.
 
 ## Examples
@@ -38,19 +38,26 @@ per instance with the `locale` / `dictionary` props.
     <KptRating value={4} readOnly />
 
 ## Half stars
-`allowHalf` splits every star into two halves, each its own `role="radio"` ("3.5 of 5" — the number
+`allowHalf` splits every star into two halves, each its own `role="radio"` ("3.5 of 5" - the number
 follows the page language, PL "3,5 z 5"), so the group keeps the radio pattern: clicking the left half
-gives x.5, and the arrows step by 0.5. Read-only stars show the value rounded to a half (4.3 → four
+gives x.5, and the arrows step by 0.5. Read-only stars show the value rounded to a half (4.3 -> four
 and a half stars) while the name carries the exact score ("4.3 of 5"), so an average can be shown
 as it is.
 
+## Pointer
+Dragging across the stars (mouse or touch) picks a score: the preview follows the pointer and releasing
+commits it - with `allowHalf` to the nearest half, in RTL mirrored; dragging past the first star clears
+the score. A short press without movement stays a click (including a second click that clears the
+score). Stars that light up pop in one after another - the motion follows `toggle` from `KptMotionProvider`
+(`spring` only); `enabled: false` and the system "reduce motion" setting always win.
+
 ## Tokens
 Lit stars `--kpt-color-warning`, empty ones `--kpt-color-border-strong`.
 
 ## Accessibility
 `role="radiogroup"` named by `ariaLabel` or the `KptFormField` label; each star is
-`role="radio"` with `aria-checked`, labelled from `rating.star` (`{value}`, `{max}`) — EN `1 of 5`,
-PL `1 z 5`. One Tab stop: `→`/`↑` raise the score by one, `←`/`↓` lower it (mirrored in RTL),
+`role="radio"` with `aria-checked`, labelled from `rating.star` (`{value}`, `{max}`) - EN `1 of 5`,
+PL `1 z 5`. One Tab stop: `ArrowRight`/`ArrowUp` raise the score by one, `ArrowLeft`/`ArrowDown` lower it (mirrored in RTL),
 `Home`/`End` set the extremes, `Delete`/`Backspace` clear it; clicking the chosen star also clears it.
 `readOnly` renders `role="img"` named "4 of 5" with no buttons, so a screen reader does not announce
 a row of disabled controls. `touch` fires when focus leaves the group.

package/dist/rating/rating-pointer.d.ts

@@ -0,0 +1,16 @@
+interface StarRect {
+    left: number;
+    right: number;
+    width: number;
+}
+/**
+ * Ocena pod wskaźnikiem - z prostokątów gwiazdek w kolejności DOM. Lewa połowa gwiazdki to połówka
+ * oceny (z `allowHalf`), w RTL prawa. Przed pierwszą gwiazdką - 0 (przeciągnięcie wstecz kasuje
+ * ocenę), za ostatnią - maksimum. Przerwa między gwiazdkami należy do gwiazdki przed nią.
+ * Ta sama funkcja jest w porcie Angulara (`rating/rating-pointer.ts`).
+ */
+export declare function ratingValueAt(x: number, stars: readonly StarRect[], options: {
+    allowHalf: boolean;
+    rtl: boolean;
+}): number;
+export {};

package/dist/rating/rating-pointer.js

@@ -0,0 +1,26 @@
+/**
+ * Ocena pod wskaźnikiem - z prostokątów gwiazdek w kolejności DOM. Lewa połowa gwiazdki to połówka
+ * oceny (z `allowHalf`), w RTL prawa. Przed pierwszą gwiazdką - 0 (przeciągnięcie wstecz kasuje
+ * ocenę), za ostatnią - maksimum. Przerwa między gwiazdkami należy do gwiazdki przed nią.
+ * Ta sama funkcja jest w porcie Angulara (`rating/rating-pointer.ts`).
+ */
+export function ratingValueAt(x, stars, options) {
+    if (!stars.length)
+        return 0;
+    // W RTL lustrzane odbicie osi - wtedy liczy się tak samo jak w LTR.
+    const flip = (r) => (options.rtl ? { left: -r.right, right: -r.left, width: r.width } : r);
+    const px = options.rtl ? -x : x;
+    const rects = stars.map(flip);
+    if (px < rects[0].left)
+        return 0;
+    for (let i = 0; i < rects.length; i++) {
+        const r = rects[i];
+        const end = i + 1 < rects.length ? rects[i + 1].left : r.right;
+        if (px >= end)
+            continue;
+        if (!options.allowHalf)
+            return i + 1;
+        return (px - r.left) / r.width < 0.5 ? i + 0.5 : i + 1;
+    }
+    return rects.length;
+}

package/dist/rating/rating.d.ts

@@ -8,9 +8,9 @@ export interface KptRatingProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
     count?: number;
     /** Połówki gwiazdek: wartość co 0,5, każda połówka to osobne `radio`. */
     allowHalf?: boolean;
-    /** Ocena tylko do odczytu — bez klikania i bez podglądu pod kursorem. */
+    /** Ocena tylko do odczytu - bez klikania i bez podglądu pod kursorem. */
     readOnly?: boolean;
-    /** Id grupy (nie hosta); bez niego generowane, w `KptFormField` — z wrappera. */
+    /** Id grupy (nie hosta); bez niego generowane, w `KptFormField` - z wrappera. */
     id?: string;
     /** Nazwa dostępna grupy, gdy nie opisuje jej etykieta (`KptFormField`). */
     ariaLabel?: string | null;
@@ -23,13 +23,13 @@ export interface KptRatingProps extends Omit<ComponentPropsWithRef<'div'>, 'onCh
 }
 /**
  * Ocena gwiazdkami. Kliknięcie zapalonej gwiazdki zeruje ocenę, więc wystawioną można cofnąć
- * bez osobnego przycisku „wyczyść".
+ * bez osobnego przycisku "wyczyść".
  *
  * Do edycji to grupa radiowa (`role="radiogroup"`, gwiazdki jako `role="radio"`): jeden przystanek
  * Tab, strzałki zmieniają ocenę o krok (w RTL odwrócone w poziomie), `Home`/`End` ustawiają
- * skrajne, `Delete`/`Backspace` zeruje. Z `allowHalf` każda gwiazdka ma dwie połówki — dwa osobne
- * `radio` („3,5 z 5”), a krok strzałek to 0,5. Tylko do odczytu (`readOnly`) to obrazek z nazwą
- * „4,3 z 5” — bez przycisków, które czytnik ogłaszałby jako wyłączone; gwiazdki pokazują wartość
+ * skrajne, `Delete`/`Backspace` zeruje. Z `allowHalf` każda gwiazdka ma dwie połówki - dwa osobne
+ * `radio` ("3,5 z 5"), a krok strzałek to 0,5. Tylko do odczytu (`readOnly`) to obrazek z nazwą
+ * "4,3 z 5" - bez przycisków, które czytnik ogłaszałby jako wyłączone; gwiazdki pokazują wartość
  * zaokrągloną do połówki.
  *
  * @example

package/dist/rating/rating.js

@@ -6,16 +6,19 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { useKptFieldA11y } from "../form-field/form-field-context.js";
 import { KptIcon } from "../icon/icon.js";
+import { playPopMotion, resolveToggleMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
+import { ratingValueAt } from "./rating-pointer.js";
 const fillOf = (star, shown) => shown >= star ? 'full' : shown >= star - 0.5 ? 'half' : 'empty';
 /**
  * Ocena gwiazdkami. Kliknięcie zapalonej gwiazdki zeruje ocenę, więc wystawioną można cofnąć
- * bez osobnego przycisku „wyczyść".
+ * bez osobnego przycisku "wyczyść".
  *
  * Do edycji to grupa radiowa (`role="radiogroup"`, gwiazdki jako `role="radio"`): jeden przystanek
  * Tab, strzałki zmieniają ocenę o krok (w RTL odwrócone w poziomie), `Home`/`End` ustawiają
- * skrajne, `Delete`/`Backspace` zeruje. Z `allowHalf` każda gwiazdka ma dwie połówki — dwa osobne
- * `radio` („3,5 z 5”), a krok strzałek to 0,5. Tylko do odczytu (`readOnly`) to obrazek z nazwą
- * „4,3 z 5” — bez przycisków, które czytnik ogłaszałby jako wyłączone; gwiazdki pokazują wartość
+ * skrajne, `Delete`/`Backspace` zeruje. Z `allowHalf` każda gwiazdka ma dwie połówki - dwa osobne
+ * `radio` ("3,5 z 5"), a krok strzałek to 0,5. Tylko do odczytu (`readOnly`) to obrazek z nazwą
+ * "4,3 z 5" - bez przycisków, które czytnik ogłaszałby jako wyłączone; gwiazdki pokazują wartość
  * zaokrągloną do połówki.
  *
  * @example
@@ -31,17 +34,34 @@ export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, a
     const groupRef = useRef(null);
     /** Prośba o fokus na przystanek Tab po najbliższym renderze (zmiana oceny klawiszem). */
     const wantFocus = useRef(false);
+    /** Ocena przeciągana wskaźnikiem (mysz albo dotyk) - podgląd idzie za palcem, puszczenie zatwierdza. */
+    const [dragging, setDragging] = useState(false);
+    const toggleMotion = resolveToggleMotion(undefined, useKptMotion());
     const showInvalid = invalid && (touched ?? true);
     const stars = Array.from({ length: count }, (_, index) => index + 1);
     const step = allowHalf ? 0.5 : 1;
-    // Podgląd pod kursorem wygrywa z oceną, ale tylko dopóki kursor jest nad gwiazdkami —
+    // Podgląd pod kursorem wygrywa z oceną, ale tylko dopóki kursor jest nad gwiazdkami -
     // po `mouseleave` wraca 0 i zapalona zostaje sama wartość.
     const shown = hover || current;
-    /** Przystanek Tab: wybrana wartość, a bez oceny — pierwsza możliwa. */
+    /** Przystanek Tab: wybrana wartość, a bez oceny - pierwsza możliwa. */
     const tabStop = current >= step && current <= count ? current : step;
-    /** Liczba w zapisie języka strony („3,5” po polsku). */
+    /** Liczba w zapisie języka strony ("3,5" po polsku). */
     const numberFormat = new Intl.NumberFormat(activeLocale, { maximumFractionDigits: 2 });
     const starLabel = (score) => t('rating.star', { value: numberFormat.format(score), max: count });
+    // Gwiazdki, które się zapalają (podgląd pod kursorem, przeciąganie, wybór), wskakują po kolei.
+    // Ruch idzie za globalnym `toggle` z `KptMotionProvider`; start strony się nie rusza.
+    const shownBefore = useRef(null);
+    useEffect(() => {
+        const before = shownBefore.current;
+        shownBefore.current = shown;
+        if (before === null || shown <= before || toggleMotion !== 'spring')
+            return;
+        groupRef.current?.querySelectorAll('.kpt-rating__star').forEach((star, i) => {
+            const n = i + 1;
+            if (n > Math.ceil(before) && n <= Math.ceil(shown))
+                playPopMotion(star);
+        });
+    }, [shown, toggleMotion]);
     useEffect(() => {
         if (!wantFocus.current)
             return;
@@ -51,7 +71,7 @@ export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, a
     const starVisual = (star, fill, children, hidden = false) => (_jsxs("span", { className: "kpt-rating__star", "data-fill": fill, "aria-hidden": hidden || undefined, children: [_jsx(KptIcon, { name: "star" }), _jsx("span", { className: "kpt-rating__fill", "aria-hidden": "true", children: _jsx(KptIcon, { name: "star" }) }), children] }, star));
     if (readOnly) {
         const score = starLabel(current);
-        // Gwiazdki pokazują wartość zaokrągloną do połówki (4,3 → 4,5), nazwa — dokładną.
+        // Gwiazdki pokazują wartość zaokrągloną do połówki (4,3 -> 4,5), nazwa - dokładną.
         const display = Math.round(current * 2) / 2;
         return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { className: "kpt-rating kpt-rating--readonly", role: "img", id: field.id, "aria-label": ariaLabel ? `${ariaLabel}: ${score}` : score, "aria-describedby": field.describedBy, children: stars.map((star) => starVisual(star, fillOf(star, display), null, true)) }) }));
     }
@@ -78,7 +98,7 @@ export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, a
         else if (event.key === 'Delete' || event.key === 'Backspace')
             next = 0;
         else if (event.key === ' ' || event.key === 'Enter') {
-            // Spacja na gwiazdce wybiera ją (jak radio); ponowna nie zeruje — od tego jest Delete.
+            // Spacja na gwiazdce wybiera ją (jak radio); ponowna nie zeruje - od tego jest Delete.
             const score = Number(event.target.dataset['value']);
             if (score)
                 next = score;
@@ -89,18 +109,62 @@ export function KptRating({ value, defaultValue = 0, onValueChange, count = 5, a
         setCurrent(next);
         wantFocus.current = true;
     };
-    /** „Dotknięcie” dopiero przy wyjściu fokusu z całej grupy, nie przy przejściu między gwiazdkami. */
+    /**
+     * Przeciąganie po gwiazdkach. Krótkie wciśnięcie bez ruchu zostawia sprawę kliknięciu (zachowanie
+     * jak dotąd, łącznie z ponownym kliknięciem zerującym); ruch o kilka pikseli zamienia gest w wybór
+     * przeciąganiem - także dotykiem, gdzie nie ma podglądu na `mouseenter`.
+     */
+    const onPointerDown = (event) => {
+        if (disabled || event.button !== 0)
+            return;
+        const root = event.currentTarget;
+        const startX = event.clientX;
+        let active = false;
+        const valueAt = (x) => ratingValueAt(x, Array.from(root.querySelectorAll('.kpt-rating__star'), (el) => el.getBoundingClientRect()), { allowHalf, rtl: getComputedStyle(root).direction === 'rtl' });
+        const move = (e) => {
+            if (!active && Math.abs(e.clientX - startX) < 4)
+                return;
+            if (!active) {
+                active = true;
+                setDragging(true);
+                root.setPointerCapture(e.pointerId);
+            }
+            setHover(valueAt(e.clientX));
+        };
+        const up = (e) => {
+            root.removeEventListener('pointermove', move);
+            root.removeEventListener('pointerup', up);
+            root.removeEventListener('pointercancel', up);
+            if (!active)
+                return;
+            setDragging(false);
+            // Klik po przeciągnięciu jest skutkiem tego samego gestu - nie może drugi raz przestawić oceny.
+            // Połykamy go w fazie capture; nasłuch znika w następnej klatce, gdyby klik nie przyszedł.
+            const swallow = (ev) => ev.stopPropagation();
+            root.addEventListener('click', swallow, { capture: true, once: true });
+            requestAnimationFrame(() => root.removeEventListener('click', swallow, { capture: true }));
+            const score = valueAt(e.clientX);
+            setCurrent(score);
+            // Mysz zostaje nad gwiazdkami - podgląd i tak zgadza się z wyborem; palec odchodzi, więc czyścimy.
+            setHover(e.pointerType === 'mouse' ? score : 0);
+            onTouch?.();
+        };
+        root.addEventListener('pointermove', move);
+        root.addEventListener('pointerup', up);
+        root.addEventListener('pointercancel', up);
+    };
+    /** "Dotknięcie" dopiero przy wyjściu fokusu z całej grupy, nie przy przejściu między gwiazdkami. */
     const onBlur = (event) => {
         const next = event.relatedTarget;
         if (!next || !event.currentTarget.contains(next))
             onTouch?.();
     };
-    /** Pola wyboru jednej gwiazdki: całość albo — z `allowHalf` — dwie połówki. */
+    /** Pola wyboru jednej gwiazdki: całość albo - z `allowHalf` - dwie połówki. */
     const optionsOf = (star) => allowHalf
         ? [
             { score: star - 0.5, part: 'start' },
             { score: star, part: 'end' },
         ]
         : [{ score: star, part: 'full' }];
-    return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { ref: groupRef, className: cn('kpt-rating', disabled && 'kpt-rating--disabled'), role: "radiogroup", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-disabled": disabled || undefined, onKeyDown: onKeyDown, onBlur: onBlur, onMouseLeave: () => setHover(0), children: stars.map((star) => starVisual(star, fillOf(star, shown), optionsOf(star).map((option) => (_jsx("button", { type: "button", role: "radio", className: cn('kpt-rating__hit', `kpt-rating__hit--${option.part}`), "aria-checked": option.score === current, tabIndex: !disabled && option.score === tabStop ? 0 : -1, "aria-disabled": disabled || undefined, "data-value": option.score, "aria-label": starLabel(option.score), onClick: () => pick(option.score), onMouseEnter: () => !disabled && setHover(option.score) }, option.part))))) }) }));
+    return (_jsx("div", { className: cn('kpt-rating-host', className), ...rest, children: _jsx("div", { ref: groupRef, className: cn('kpt-rating', disabled && 'kpt-rating--disabled', dragging && 'is-dragging'), role: "radiogroup", id: field.id, "aria-label": ariaLabel ?? undefined, "aria-labelledby": ariaLabel ? undefined : field.labelledBy, "aria-describedby": field.describedBy, "aria-required": required || undefined, "aria-invalid": showInvalid || undefined, "aria-disabled": disabled || undefined, onKeyDown: onKeyDown, onBlur: onBlur, onMouseLeave: () => !dragging && setHover(0), onPointerDown: onPointerDown, children: stars.map((star) => starVisual(star, fillOf(star, shown), optionsOf(star).map((option) => (_jsx("button", { type: "button", role: "radio", className: cn('kpt-rating__hit', `kpt-rating__hit--${option.part}`), "aria-checked": option.score === current, tabIndex: !disabled && option.score === tabStop ? 0 : -1, "aria-disabled": disabled || undefined, "data-value": option.score, "aria-label": starLabel(option.score), onClick: () => pick(option.score), onMouseEnter: () => !disabled && setHover(option.score) }, option.part))))) }) }));
 }

package/dist/rich-text/lists.d.ts

@@ -6,11 +6,11 @@ export declare function canIndentItem(editor: HTMLElement | null, li: HTMLLIElem
 export declare function canOutdentItem(li: HTMLLIElement): boolean;
 /**
  * Punkty listy objęte zaznaczeniem. Przy wielu punktach operujemy na ich wspólnym poziomie
- * zagnieżdżenia — inaczej podpunkt dostałby wcięcie dwa razy: raz sam, raz z rodzicem.
+ * zagnieżdżenia - inaczej podpunkt dostałby wcięcie dwa razy: raz sam, raz z rodzicem.
  */
 export declare function selectedItems(editor: HTMLElement | null): HTMLLIElement[];
 /**
- * Przesuwa zaznaczone punkty o poziom. Zwraca `true`, gdy DOM faktycznie się zmienił — od tego
+ * Przesuwa zaznaczone punkty o poziom. Zwraca `true`, gdy DOM faktycznie się zmienił - od tego
  * zależy, czy Tab dostanie `preventDefault()`, a więc czy edytor nie stanie się pułapką
  * klawiaturową (WCAG 2.1.2).
  */

package/dist/rich-text/lists.js

@@ -1,7 +1,7 @@
 /*
  * Wcięcia list. `execCommand('indent')` daje w Chrome nieprawidłowe `ul > ul` (albo `blockquote`
  * z marginesem, który i tak zdjąłby sanitizer), więc zagnieżdżanie robimy własnym kodem DOM.
- * Plik nie zna Reacta — to czyste operacje na węzłach.
+ * Plik nie zna Reacta - to czyste operacje na węzłach.
  */
 /** Najbliższy punkt listy zawierający węzeł, ale tylko wewnątrz edytora. */
 export function closestItem(editor, node) {
@@ -19,7 +19,7 @@ export function level(editor, li) {
     }
     return depth;
 }
-/** Najgłębszy poziom w poddrzewie punktu — wcięcie przenosi podpunkty razem z rodzicem. */
+/** Najgłębszy poziom w poddrzewie punktu - wcięcie przenosi podpunkty razem z rodzicem. */
 function deepest(editor, li) {
     let max = level(editor, li);
     for (const nested of li.querySelectorAll('li')) {
@@ -35,7 +35,7 @@ export function canOutdentItem(li) {
 }
 /**
  * Punkty listy objęte zaznaczeniem. Przy wielu punktach operujemy na ich wspólnym poziomie
- * zagnieżdżenia — inaczej podpunkt dostałby wcięcie dwa razy: raz sam, raz z rodzicem.
+ * zagnieżdżenia - inaczej podpunkt dostałby wcięcie dwa razy: raz sam, raz z rodzicem.
  */
 export function selectedItems(editor) {
     const selection = window.getSelection();
@@ -68,7 +68,7 @@ export function selectedItems(editor) {
         return [start];
     return siblings.slice(Math.min(from, to), Math.max(from, to) + 1);
 }
-/** Zagnieżdża punkt w podliście poprzedniego punktu — poprawne `li > ul > li`. */
+/** Zagnieżdża punkt w podliście poprzedniego punktu - poprawne `li > ul > li`. */
 function indentItem(editor, li, maxLevel) {
     if (!canIndentItem(editor, li, maxLevel))
         return false;
@@ -104,7 +104,7 @@ function outdentItem(li) {
     return true;
 }
 /**
- * Przesuwa zaznaczone punkty o poziom. Zwraca `true`, gdy DOM faktycznie się zmienił — od tego
+ * Przesuwa zaznaczone punkty o poziom. Zwraca `true`, gdy DOM faktycznie się zmienił - od tego
  * zależy, czy Tab dostanie `preventDefault()`, a więc czy edytor nie stanie się pułapką
  * klawiaturową (WCAG 2.1.2).
  */
@@ -119,7 +119,7 @@ export function shiftItems(editor, dir, maxLevel) {
     const caret = range
         ? { sc: range.startContainer, so: range.startOffset, ec: range.endContainer, eo: range.endOffset }
         : null;
-    // Outdent od końca — inaczej `host.after()` odwróciłby kolejność przenoszonych punktów.
+    // Outdent od końca - inaczej `host.after()` odwróciłby kolejność przenoszonych punktów.
     const order = dir === 'outdent' ? [...items].reverse() : items;
     let changed = false;
     for (const li of order) {
@@ -137,7 +137,7 @@ export function shiftItems(editor, dir, maxLevel) {
             selection.addRange(restored);
         }
         catch {
-            /* offset przestał pasować po przeniesieniu rodzeństwa — zostaw kursor tam, gdzie jest */
+            /* offset przestał pasować po przeniesieniu rodzeństwa - zostaw kursor tam, gdzie jest */
         }
     }
     return true;