@konce-pt/react 0.11.2 → 0.14.0

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

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

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

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

package/dist/button-group/llms.txt

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

package/dist/card/card.d.ts

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

package/dist/card/card.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement } from 'react';
+import { isValidElement } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren } from "../internal/slot-children.js";
 /*
  * Karta odtwarza projekcję treści z Angulara: nagłówek i stopka są wyjmowane
  * z dzieci i renderowane poza `.kpt-card__body`, dokładnie tam, gdzie stawia je
@@ -8,7 +9,7 @@ import { cn } from "../internal/cn.js";
  * (`[kptCardFooter]` poza body) trafia we właściwe węzły.
  */
 /**
- * Karta Koncept UI — powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
+ * Karta Koncept UI - powierzchnia z wyniesieniem (`elevated`) albo obramowaniem (`outlined`).
  *
  * Ciało karty renderuje sama karta; `flush` zdejmuje jego padding. Do bogatych układów
  * służą komponenty składane: `KptCard.Media`, `.Lead`, `.Title`, `.Subtitle`, `.Section`,
@@ -16,7 +17,7 @@ import { cn } from "../internal/cn.js";
  *
  * @example
  * <KptCard header="Ustawienia" variant="outlined">
- *   <p>Treść…</p>
+ *   <p>Treść...</p>
  *   <KptCard.Footer><KptButton>Zapisz</KptButton></KptCard.Footer>
  * </KptCard>
  */
@@ -24,7 +25,7 @@ export function KptCard({ variant = 'elevated', header, headingLevel, flush = fa
     const headers = [];
     const footers = [];
     const body = [];
-    Children.forEach(children, (child) => {
+    for (const child of slotChildren(children)) {
         const bucket = isValidElement(child) ? slotOf(child) : 'body';
         if (bucket === 'header')
             headers.push(child);
@@ -32,19 +33,19 @@ export function KptCard({ variant = 'elevated', header, headingLevel, flush = fa
             footers.push(child);
         else
             body.push(child);
-    });
+    }
     return (_jsxs("div", { className: cn('kpt-card', className), "data-variant": variant, ...rest, children: [header ? (_jsx("div", { className: "kpt-card__header", role: headingLevel ? 'heading' : undefined, "aria-level": headingLevel, children: header })) : null, headers, _jsx("div", { className: cn('kpt-card__body', flush && 'kpt-card__body--flush'), children: body }), footers] }));
 }
 function slotOf(child) {
     return child.type?.kptCardSlot ?? 'body';
 }
-/** Nagłówek karty — alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
+/** Nagłówek karty - alternatywa dla propa `header`, gdy potrzebna jest bogatsza treść. */
 export function KptCardHeader({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__header', className), ...rest });
 }
 KptCardHeader.kptCardSlot = 'header';
 /**
- * Stopka karty. Nosi atrybut `kptcardfooter` — to po nim celuje wspólny SCSS
+ * Stopka karty. Nosi atrybut `kptcardfooter` - to po nim celuje wspólny SCSS
  * (nazwy atrybutów w selektorach CSS są w HTML case-insensitive, więc ta sama
  * reguła `[kptCardFooter]` obsługuje oba porty).
  */
@@ -68,7 +69,7 @@ export function KptCardTitle({ className, ...rest }) {
 export function KptCardSubtitle({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__subtitle', className), ...rest });
 }
-/** Sekcja z paddingiem — kolumna z odstępami. */
+/** Sekcja z paddingiem - kolumna z odstępami. */
 export function KptCardSection({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__section', className), ...rest });
 }
@@ -76,7 +77,7 @@ export function KptCardSection({ className, ...rest }) {
 export function KptCardTags({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__tags', className), ...rest });
 }
-/** Wiersz „ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
+/** Wiersz "ikona + tekst" (ocena, lokalizacja) w przygaszonym kolorze. */
 export function KptCardMeta({ className, ...rest }) {
     return _jsx("div", { className: cn('kpt-card__meta', className), ...rest });
 }

package/dist/card/llms.txt

@@ -1,43 +1,43 @@
 # KptCard (@konce-pt/react)
 
-A card — a surface with elevation (`elevated`) or a border (`outlined`). The card renders its own
+A card - a surface with elevation (`elevated`) or a border (`outlined`). The card renders its own
 body; the header and the footer are lifted out of the children and placed outside that body,
 exactly where the Angular template puts them, so the DOM tree matches node for node.
 Import: `import { KptCard } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-card" data-variant="elevated">
-      <div class="kpt-card__header">…</div>
-      <div class="kpt-card__body">…</div>
-      <div kptcardfooter="">…</div>
+      <div class="kpt-card__header">...</div>
+      <div class="kpt-card__body">...</div>
+      <div kptcardfooter="">...</div>
     </div>
 
 ## Props
 - `variant`: 'elevated' | 'outlined' (default 'elevated')
-- `header`: string — optional header text; use `<KptCard.Header>` for richer content
-- `headingLevel`: 1–6 — makes `header` a heading of that level (`role="heading"` + `aria-level`)
-- `headingLevel`: 1–6 — makes `header` a heading of that level (`role="heading"` + `aria-level`)
-- `flush`: boolean — a body with no padding (for rich layouts that manage their own sections)
+- `header`: string - optional header text; use `<KptCard.Header>` for richer content
+- `headingLevel`: 1-6 - makes `header` a heading of that level (`role="heading"` + `aria-level`)
+- `headingLevel`: 1-6 - makes `header` a heading of that level (`role="heading"` + `aria-level`)
+- `flush`: boolean - a body with no padding (for rich layouts that manage their own sections)
 - `className`, `ref` and every other `<div>` prop go to the card root
 
 ## Sub-components
-- `KptCard.Header` — lifted above the body, `.kpt-card__header`
-- `KptCard.Footer` — lifted below the body; carries the `kptcardfooter` attribute the shared
+- `KptCard.Header` - lifted above the body, `.kpt-card__header`
+- `KptCard.Footer` - lifted below the body; carries the `kptcardfooter` attribute the shared
   SCSS targets (attribute names in CSS selectors are case-insensitive in HTML, so one rule
   serves both ports)
-- `KptCard.Media` — an `<img>` on the full width, clipped to the radius; set `aspect-ratio`/`height`
-- `KptCard.Lead` — the header row (avatar + titles), with padding
-- `KptCard.Title`, `KptCard.Subtitle` — title/subtitle typography
-- `KptCard.Section` — a padded section (a column with gaps)
-- `KptCard.Tags` — a row of chips; `KptCard.Meta` — an icon+text row (rating/location)
-- `KptCard.Actions` — a row of buttons (equal widths)
+- `KptCard.Media` - an `<img>` on the full width, clipped to the radius; set `aspect-ratio`/`height`
+- `KptCard.Lead` - the header row (avatar + titles), with padding
+- `KptCard.Title`, `KptCard.Subtitle` - title/subtitle typography
+- `KptCard.Section` - a padded section (a column with gaps)
+- `KptCard.Tags` - a row of chips; `KptCard.Meta` - an icon+text row (rating/location)
+- `KptCard.Actions` - a row of buttons (equal widths)
 
 There is no `KptCard.Body`: the body belongs to the card itself, and `flush` removes its padding.
 An overlapping avatar is a class you apply to your own element: `className="kpt-card__avatar"`.
 
 ## Examples
     <KptCard header="Settings" variant="outlined">
-      <p>Content…</p>
+      <p>Content...</p>
       <KptCard.Footer><KptButton>Save</KptButton></KptCard.Footer>
     </KptCard>
 
@@ -50,7 +50,7 @@ An overlapping avatar is a class you apply to your own element: `className="kpt-
         </div>
       </KptCard.Lead>
       <KptCard.Media src="/photo.jpg" style={{ aspectRatio: '4 / 3' }} />
-      <KptCard.Section>Description…</KptCard.Section>
+      <KptCard.Section>Description...</KptCard.Section>
       <KptCard.Footer><KptButton variant="text" size="sm">LIKE</KptButton></KptCard.Footer>
     </KptCard>
 
@@ -58,7 +58,7 @@ An overlapping avatar is a class you apply to your own element: `className="kpt-
 `--kpt-card-{bg,fg,border,radius,padding,shadow}`.
 
 ## Accessibility
-The card is a plain container with no role of its own. `header` is styled text by default — set
-`headingLevel` (1–6) to make it a heading (`role="heading"` + `aria-level`) when the card should
+The card is a plain container with no role of its own. `header` is styled text by default - set
+`headingLevel` (1-6) to make it a heading (`role="heading"` + `aria-level`) when the card should
 appear in the page outline; leave it off for tiles that would only clutter it. Give media images a
 meaningful `alt`, or `alt=""` when decorative.

package/dist/carousel/carousel.d.ts

@@ -5,20 +5,20 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     activeIndex?: number;
     defaultActiveIndex?: number;
     onActiveIndexChange?: (index: number) => void;
-    /** Szablon slajdu — odpowiednik `<ng-template let-item let-i="index">` z Angulara. */
+    /** Szablon slajdu - odpowiednik `<ng-template let-item let-i="index">` z Angulara. */
     renderSlide: (item: T, index: number) => ReactNode;
-    /** Nazwa regionu dla czytników ekranu, np. „Nowości”; domyślnie `carousel.label`. */
+    /** Nazwa regionu dla czytników ekranu, np. "Nowości"; domyślnie `carousel.label`. */
     label?: string;
 }
 /**
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
  *
  * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
- * zostaje zamontowany — przewijanie nie gubi stanu treści.
+ * zostaje zamontowany - przewijanie nie gubi stanu treści.
  *
- * Semantyka według wzorca WAI-ARIA „carousel” (bez autoodtwarzania): region z
- * `aria-roledescription="karuzela"`, każdy slajd to grupa „Slajd 2 z 4”, a slajdy poza widokiem są
- * `inert` — `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
+ * Semantyka według wzorca WAI-ARIA "carousel" (bez autoodtwarzania): region z
+ * `aria-roledescription="karuzela"`, każdy slajd to grupa "Slajd 2 z 4", a slajdy poza widokiem są
+ * `inert` - `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
  * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example

package/dist/carousel/carousel.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 { useControllableState } from "../internal/use-controllable-state.js";
@@ -7,11 +8,11 @@ import { KptIcon } from "../icon/icon.js";
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
  *
  * Tor przesuwa się jednym `translateX` o wielokrotność 100%, więc slajdy jadą płynnie, a każdy
- * zostaje zamontowany — przewijanie nie gubi stanu treści.
+ * zostaje zamontowany - przewijanie nie gubi stanu treści.
  *
- * Semantyka według wzorca WAI-ARIA „carousel” (bez autoodtwarzania): region z
- * `aria-roledescription="karuzela"`, każdy slajd to grupa „Slajd 2 z 4”, a slajdy poza widokiem są
- * `inert` — `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
+ * Semantyka według wzorca WAI-ARIA "carousel" (bez autoodtwarzania): region z
+ * `aria-roledescription="karuzela"`, każdy slajd to grupa "Slajd 2 z 4", a slajdy poza widokiem są
+ * `inert` - `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
  * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example
@@ -19,11 +20,13 @@ import { KptIcon } from "../icon/icon.js";
  */
 export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
-    const [active, setActive] = useControllableState({
+    const [requested, setActive] = useControllableState({
         value: activeIndex,
         defaultValue: defaultActiveIndex,
         onChange: onActiveIndexChange,
     });
+    // Indeks przycięty do listy: po skróceniu `items` (filtr) widok nie zostaje pusty.
+    const active = Math.min(Math.max(requested, 0), Math.max(items.length - 1, 0));
     const goTo = (index) => setActive(Math.min(Math.max(index, 0), items.length - 1));
     const atStart = active <= 0;
     const atEnd = active >= items.length - 1;

package/dist/carousel/llms.txt

@@ -10,15 +10,15 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
           <div class="kpt-carousel__track" aria-live="polite"
                style="transform:translateX(calc(var(--_kpt-carousel-dir, 1) * -100%))">
             <div class="kpt-carousel__slide" role="group" aria-roledescription="slide"
-                 aria-label="Slide 1 of 3" inert aria-hidden="true">…</div>
+                 aria-label="Slide 1 of 3" inert aria-hidden="true">...</div>
             <div class="kpt-carousel__slide" role="group" aria-roledescription="slide"
-                 aria-label="Slide 2 of 3">…</div>…
+                 aria-label="Slide 2 of 3">...</div>...
           </div>
         </div>
-        <button class="kpt-carousel__nav kpt-carousel__nav--prev" aria-label="Previous">…</button>
-        <button class="kpt-carousel__nav kpt-carousel__nav--next" aria-label="Next">…</button>
+        <button class="kpt-carousel__nav kpt-carousel__nav--prev" aria-label="Previous">...</button>
+        <button class="kpt-carousel__nav kpt-carousel__nav--next" aria-label="Next">...</button>
         <div class="kpt-carousel__dots">
-          <button class="kpt-carousel__dot is-active" aria-current="true" aria-label="Slide 2"></button>…
+          <button class="kpt-carousel__dot is-active" aria-current="true" aria-label="Slide 2"></button>...
         </div>
       </div>
     </div>
@@ -26,8 +26,8 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
 ## Props
 - `items`: `T[]`
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange`
-- `renderSlide(item, index)` — required
-- `label`: string — the region name; empty = `carousel.label`
+- `renderSlide(item, index)` - required
+- `label`: string - the region name; empty = `carousel.label`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The render prop replaces the template
@@ -36,7 +36,7 @@ carousel owns the layout and the navigation, the caller owns what a slide looks
 guessed about the item's shape, so the component stays generic in `T`.
 
 ## One transform, every slide mounted
-The track slides with a single `translateX` of a multiple of 100%, so every slide stays mounted —
+The track slides with a single `translateX` of a multiple of 100%, so every slide stays mounted -
 paging does not lose state inside a slide (a form, a playing video, a scroll position).
 
 ## Examples
@@ -51,9 +51,9 @@ The active dot `--kpt-color-primary`; the arrows `--kpt-color-surface` (80% via
 
 ## Accessibility
 The WAI-ARIA carousel pattern without autoplay. The root is `role="region"` with
-`aria-roledescription` from `carousel.roleCarousel` (“carousel”) and a name from `label` or
+`aria-roledescription` from `carousel.roleCarousel` ("carousel") and a name from `label` or
 `carousel.label`. Each slide is `role="group"` with `aria-roledescription` from `carousel.roleSlide`
-and a name from `carousel.slideOf` (“Slide 2 of 4”); slides outside the view are `inert` and
+and a name from `carousel.slideOf` ("Slide 2 of 4"); slides outside the view are `inert` and
 `aria-hidden`, so Tab never lands on an invisible link. The track is `aria-live="polite"`, so the
 slide that comes in is announced. The arrows use `aria-disabled` at the ends instead of `disabled`,
 so they keep the focus; the active dot carries `aria-current`, and every dot has a 24 px target

package/dist/charts/chart-legend.d.ts

@@ -11,13 +11,13 @@ export interface KptChartLegendProps {
     align?: KptAlign;
     pointStyle?: KptPointStyle;
     title?: KptLegendTitle;
-    /** Kliknięcie elementu — przełącz widoczność serii albo wycinka. */
+    /** Kliknięcie elementu - przełącz widoczność serii albo wycinka. */
     onToggle?: (key: string) => void;
-    /** Wejście i wyjście kursora — podświetl serię albo wyczyść podświetlenie. */
+    /** Wejście i wyjście kursora - podświetl serię albo wyczyść podświetlenie. */
     onHighlight?: (key: string | null) => void;
 }
 /**
- * Legenda wykresu — klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
+ * Legenda wykresu - klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
  * punktu. Element wewnętrzny biblioteki, nie część publicznego API.
  */
 export declare function KptChartLegend({ items, position, align, pointStyle, title, onToggle, onHighlight, }: Readonly<KptChartLegendProps>): import("react").JSX.Element;

package/dist/charts/chart-legend.js

@@ -1,7 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Legenda wykresu — klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
+ * Legenda wykresu - klikalne elementy, podświetlanie pod kursorem, pozycja, wyrównanie i styl
  * punktu. Element wewnętrzny biblioteki, nie część publicznego API.
  */
 export function KptChartLegend({ items = [], position = 'bottom', align = 'center', pointStyle = 'circle', title, onToggle, onHighlight, }) {

package/dist/charts/chart-tooltip.d.ts

@@ -4,9 +4,9 @@ export interface KptChartTooltipRow {
     color: string;
 }
 export interface KptChartTooltipState {
-    /** Pozycja pozioma w % szerokości kontenera (0–100). */
+    /** Pozycja pozioma w % szerokości kontenera (0-100). */
     x: number;
-    /** Pozycja pionowa w % wysokości kontenera (0–100). */
+    /** Pozycja pionowa w % wysokości kontenera (0-100). */
     y: number;
     label: string;
     rows: KptChartTooltipRow[];
@@ -15,7 +15,7 @@ export interface KptChartTooltipProps {
     state: KptChartTooltipState | null;
 }
 /**
- * Dymek wykresu — pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
+ * Dymek wykresu - pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
  * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
  */
 export declare function KptChartTooltip({ state }: Readonly<KptChartTooltipProps>): import("react").JSX.Element | null;

package/dist/charts/chart-tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Dymek wykresu — pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
+ * Dymek wykresu - pozycjonowany procentowo względem kontenera, niezależnie od skali SVG, więc
  * nie trzeba przeliczać jednostek viewBoxa na piksele. Element wewnętrzny biblioteki.
  */
 export function KptChartTooltip({ state }) {