@konce-pt/react 0.11.2 → 0.14.0

package/dist/backdrop/llms.txt

@@ -9,33 +9,33 @@ Import: `import { KptBackdrop } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-backdrop-host" data-effect="wave">
       <canvas class="kpt-backdrop__canvas" aria-hidden="true"></canvas>
-      <div class="kpt-backdrop__content">…</div>
+      <div class="kpt-backdrop__content">...</div>
     </div>
 
 ## Props (shared)
 - `effect`: 'signal-grid' | 'wave' (default 'signal-grid')
-- `background`: string — the section background; empty takes `--kpt-color-surface`
-- `speed`: number (default 1) — 1 is the calm pace of either effect, 0 freezes the picture
-- `seed`: number (default 0) — the same value gives the same layout and the same sway
-- `paused`: boolean — stops the animation, leaving the last frame
-- `adaptive`: boolean — carries hardcoded colours onto the current theme's surface
-- `contentProps` — props for the `.kpt-backdrop__content` layer
+- `background`: string - the section background; empty takes `--kpt-color-surface`
+- `speed`: number (default 1) - 1 is the calm pace of either effect, 0 freezes the picture
+- `seed`: number (default 0) - the same value gives the same layout and the same sway
+- `paused`: boolean - stops the animation, leaving the last frame
+- `adaptive`: boolean - carries hardcoded colours onto the current theme's surface
+- `contentProps` - props for the `.kpt-backdrop__content` layer
 - `className`, `ref` and every other `<div>` prop go to `.kpt-backdrop-host`
 
 ## Props (signal-grid)
-- `color`: string — the square colour, any CSS notation, tokens included; empty takes
+- `color`: string - the square colour, any CSS notation, tokens included; empty takes
   `--kpt-color-primary`
-- `anchor`: 'left' | 'right' (default 'right') — the edge the grid is densest at
-- `cell`: number (default 5), `gap`: number (default 11) — the square and the space between, in px
-- `density`: number (default 0.8) — the share of lit cells at the anchor, 0–1
-- `falloff`: number (default 1.4) — how fast the grid fades towards the far edge
+- `anchor`: 'left' | 'right' (default 'right') - the edge the grid is densest at
+- `cell`: number (default 5), `gap`: number (default 11) - the square and the space between, in px
+- `density`: number (default 0.8) - the share of lit cells at the anchor, 0-1
+- `falloff`: number (default 1.4) - how fast the grid fades towards the far edge
 
 ## Props (wave)
-- `colors`: string[] — the colour ramp the current slides along, closed into a loop; every
+- `colors`: string[] - the colour ramp the current slides along, closed into a loop; every
   stop takes any CSS notation, `color`'s rules exactly
-- `rotation`: number (default 12) — the angle the current crosses the frame at, in degrees
-- `band`: number (default 0.34) — the band's width as a fraction of the frame's height
-- `amplitude`: number (default 0.16) — how far the centre line sways
+- `rotation`: number (default 12) - the angle the current crosses the frame at, in degrees
+- `band`: number (default 0.34) - the band's width as a fraction of the frame's height
+- `amplitude`: number (default 0.16) - how far the centre line sways
 
 A prop that does not belong to the current effect is simply not read.
 
@@ -56,12 +56,12 @@ rotation. The library's palette is neutral, so that default current is single-hu
 
 Every stop is put to the browser, so `oklch()`, `color-mix()`, `rgb()` and named colours are read
 the same as hex; alpha is dropped. A stop the browser refuses falls out of the ramp, and if every
-one of them falls out the default ramp takes over rather than the section going blank — a dev
+one of them falls out the default ramp takes over rather than the section going blank - a dev
 build says in the console which stops it dropped.
 
 ## The same picture in both ports
-Everything that decides how it looks — the grid layout, the density ramp, the twinkle, the current
-and the colour ramp, plus the renderers themselves — lives in `@konce-pt/backdrop`, shared with
+Everything that decides how it looks - the grid layout, the density ramp, the twinkle, the current
+and the colour ramp, plus the renderers themselves - lives in `@konce-pt/backdrop`, shared with
 the Angular port. This component is the lifecycle: `rAF`, `ResizeObserver`, `IntersectionObserver`,
 the reduced-motion query and the theme watch. The same props therefore give the
 same frame in either port.
@@ -74,7 +74,7 @@ slider accelerates the picture instead of jumping it. A change of `colors` is tr
 not by array identity, so a fresh array from a parent render does not rebuild the renderer.
 
 ## Accessibility
-The canvas carries `aria-hidden="true"` and `pointer-events: none` — it is decoration with no
+The canvas carries `aria-hidden="true"` and `pointer-events: none` - it is decoration with no
 content and nothing to hit. Children keep their own roles and tab order.
 
 ## Tokens
@@ -86,24 +86,24 @@ A literal stays put by design, which is right for a brand colour and wrong for a
 read in both themes. `adaptive` closes that gap: it carries `color`, `colors` and `background`
 onto the surface of the current theme, keeping each one's distance from that surface. Black picked
 for a white section comes out white on a near-black ground, and that white background comes out at
-the surface's own lightness. Only lightness moves — hue and chroma stay, so a brand colour keeps
+the surface's own lightness. Only lightness moves - hue and chroma stay, so a brand colour keeps
 being that colour and only changes how light it is.
 
 It touches literals only. An empty input takes a token, and a value reaching through `var()`
 reaches a token too; both already follow the theme, and adapting them would turn them back again.
-Values written for the light theme are the assumption — the library keeps light in `:root` and
+Values written for the light theme are the assumption - the library keeps light in `:root` and
 dark as the override.
 
 ## Content on a custom background
 The host paints `--kpt-color-surface` and lets content inherit `--kpt-color-on-surface`, which is
-right until the section gets a `background` of its own — then that token describes the page around
+right until the section gets a `background` of its own - then that token describes the page around
 it, not the ground the content actually sits on. A dark section in a light theme would come out
 black on black.
 
 So a section with its own background works out its own ink: the host sets `color` to match what it
 paints, and announces the result as `data-tone` (`light` for a light background, `dark` for a dark
-one). Text follows by inheritance; anything needing more than a text colour — buttons in the
-section, say — can hang its own tokens off the attribute:
+one). Text follows by inheritance; anything needing more than a text colour - buttons in the
+section, say - can hang its own tokens off the attribute:
 
     :where(div.kpt-backdrop-host[data-tone='light']) .hero { --kpt-button-filled-bg: #15181a; }
 
@@ -112,7 +112,7 @@ matches the adapted value, not the one written in the template. A section withou
 background announces nothing and content stays on `--kpt-color-on-surface`.
 
 ## Theme
-Canvas does not expand `var()`, so the colour is read once and baked into the renderer — the
+Canvas does not expand `var()`, so the colour is read once and baked into the renderer - the
 component therefore watches for anything that can restyle the tokens under it and reads them
 again. `[data-theme="dark"]` is not tied to `:root`, so the watch covers `data-theme`, `class`
 and `style` on every ancestor from the host up to `<html>`, plus the `prefers-color-scheme` query
@@ -122,7 +122,7 @@ when the colour actually came out different, so an unrelated class landing on `<
 cheap read and nothing else.
 
 Whether an explicit `color` or `colors` follows the theme is up to how it is written. A literal
-stays put — `#5b8af2` is `#5b8af2` in either theme, which is what someone spelling out a brand
+stays put - `#5b8af2` is `#5b8af2` in either theme, which is what someone spelling out a brand
 colour wants. An expression reaching for a token is resolved against the tree on every rebuild, so
 it moves with the theme on its own:
 

package/dist/badge/badge.d.ts

@@ -4,7 +4,7 @@ export type KptBadgeSize = 'sm' | 'md' | 'lg';
 export interface KptBadgeProps extends ComponentPropsWithRef<'span'> {
     value?: string | number | null;
     variant?: KptBadgeVariant;
-    /** Rozmiar — `sm` mieści się w wierszu tekstu, `md` to domyślny licznik. */
+    /** Rozmiar - `sm` mieści się w wierszu tekstu, `md` to domyślny licznik. */
     size?: KptBadgeSize;
     /** Sama kropka statusu, bez liczby. */
     dot?: boolean;
@@ -13,7 +13,7 @@ export interface KptBadgeProps extends ComponentPropsWithRef<'span'> {
     /** Powyżej tej wartości licznik pokazuje `99+`. */
     max?: number;
     /**
-     * Znaczenie plakietki dla czytnika ekranu, np. „3 nieprzeczytane”. Sama liczba („3”) albo kropka
+     * Znaczenie plakietki dla czytnika ekranu, np. "3 nieprzeczytane". Sama liczba ("3") albo kropka
      * nic nie mówią; z `label` widoczny tekst jest ukryty przed czytnikiem, a odczytywana jest etykieta.
      */
     label?: string;
@@ -22,7 +22,7 @@ export interface KptBadgeProps extends ComponentPropsWithRef<'span'> {
     children?: ReactNode;
 }
 /**
- * Znacznik (badge) — licznik lub kropka statusu. Samodzielny albo nałożony na treść (`overlay`).
+ * Znacznik (badge) - licznik lub kropka statusu. Samodzielny albo nałożony na treść (`overlay`).
  *
  * @example
  * <KptBadge value={3} variant="danger" />

package/dist/badge/badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 /**
- * Znacznik (badge) — licznik lub kropka statusu. Samodzielny albo nałożony na treść (`overlay`).
+ * Znacznik (badge) - licznik lub kropka statusu. Samodzielny albo nałożony na treść (`overlay`).
  *
  * @example
  * <KptBadge value={3} variant="danger" />

package/dist/badge/llms.txt

@@ -1,25 +1,25 @@
 # KptBadge (@konce-pt/react)
 
-A badge — a counter or a status dot. Standalone, or laid over content (`overlay`).
+A badge - a counter or a status dot. Standalone, or laid over content (`overlay`).
 Import: `import { KptBadge } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-badge-host">
-      …children…
+      ...children...
       <span class="kpt-badge kpt-badge--overlay" data-variant="danger" data-size="md">
         <span aria-hidden="true">8</span><span class="kpt-badge__label">8 unread</span>
       </span>
     </span>
 
 ## Props
-- `value`: string | number | null — the counter content
+- `value`: string | number | null - the counter content
 - `variant`: 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' (default 'primary')
-- `size`: 'sm' | 'md' | 'lg' (default 'md') — `sm` fits inside a line of text
-- `dot`: boolean — a bare status dot, no number
-- `overlay`: boolean — laid over the `children`
-- `max`: number (default 99) — above it the counter reads `99+`
-- `label`: string — the meaning for screen readers (“3 unread”, “online”); the visible text is then `aria-hidden`
-- `hideZero`: boolean — hides the badge when `value` is `0` or `null` (not with `dot`)
+- `size`: 'sm' | 'md' | 'lg' (default 'md') - `sm` fits inside a line of text
+- `dot`: boolean - a bare status dot, no number
+- `overlay`: boolean - laid over the `children`
+- `max`: number (default 99) - above it the counter reads `99+`
+- `label`: string - the meaning for screen readers ("3 unread", "online"); the visible text is then `aria-hidden`
+- `hideZero`: boolean - hides the badge when `value` is `0` or `null` (not with `dot`)
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## Overlay
@@ -34,10 +34,10 @@ it on the host rather than on the badge.
     <span>Notifications <KptBadge value={4} size="sm" variant="success" /></span>
 
 ## Tokens
-Background `--kpt-color-{primary,success,danger,warning,info}` with the text in the matching `*-contrast` token (`--kpt-color-on-primary` for `primary`) — the same pairs as `kpt-button`; `neutral` is `--kpt-color-muted` / `--kpt-color-on-muted`; the overlay ring comes from `--kpt-color-surface`.
+Background `--kpt-color-{primary,success,danger,warning,info}` with the text in the matching `*-contrast` token (`--kpt-color-on-primary` for `primary`) - the same pairs as `kpt-button`; `neutral` is `--kpt-color-muted` / `--kpt-color-on-muted`; the overlay ring comes from `--kpt-color-surface`.
 
 ## Accessibility
-On its own a badge is just a number, and a `dot` is nothing. `label` gives it a meaning — a visually
+On its own a badge is just a number, and a `dot` is nothing. `label` gives it a meaning - a visually
 hidden `.kpt-badge__label` that screen readers read instead of the visible text. Without `label`, put
 the meaning into the name of the control the badge sits on. Count changes are not announced. The
 `success`, `warning` and `info` variants draw the text in `--kpt-color-surface`; check the contrast

package/dist/bottom-sheet/bottom-sheet.d.ts

@@ -4,18 +4,23 @@ export interface KptBottomSheetProps extends ComponentPropsWithRef<'div'>, KptI1
     open: boolean;
     onOpenChange: (open: boolean) => void;
     header?: string;
+    /**
+     * Nazwa panelu bez `header` - okno dialogowe bez nazwy czytnik ogłasza jako samo "okno
+     * dialogowe" (WCAG 4.1.2). Z nagłówkiem nazwą jest nagłówek (`aria-labelledby`).
+     */
+    ariaLabel?: string;
     closeOnBackdrop?: boolean;
     children?: ReactNode;
 }
 /**
  * Arkusz wysuwany z dołu ekranu.
  *
- * Arkusz zostaje w DOM także zamknięty — chowa go `transform` i `visibility`, nigdy
+ * Arkusz zostaje w DOM także zamknięty - chowa go `transform` i `visibility`, nigdy
  * `display: none`, bo inaczej animacje wjazdu i zjazdu nie miałyby od czego wystartować.
  * `visibility` wyjmuje go przy tym z kolejności Tab i z drzewa dostępności bez `inert`,
  * i robi to już na pierwszej klatce.
  *
  * @example
- * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">…</KptBottomSheet>
+ * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">...</KptBottomSheet>
  */
-export declare function KptBottomSheet({ open, onOpenChange, header, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptBottomSheetProps>): import("react").JSX.Element;
+export declare function KptBottomSheet({ open, onOpenChange, header, ariaLabel, closeOnBackdrop, locale, dictionary, className, children, ...rest }: Readonly<KptBottomSheetProps>): import("react").JSX.Element;

package/dist/bottom-sheet/bottom-sheet.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { cn } from "../internal/cn.js";
@@ -7,21 +8,21 @@ import { useKptMessages } from "../i18n/i18n-context.js";
 /**
  * Arkusz wysuwany z dołu ekranu.
  *
- * Arkusz zostaje w DOM także zamknięty — chowa go `transform` i `visibility`, nigdy
+ * Arkusz zostaje w DOM także zamknięty - chowa go `transform` i `visibility`, nigdy
  * `display: none`, bo inaczej animacje wjazdu i zjazdu nie miałyby od czego wystartować.
  * `visibility` wyjmuje go przy tym z kolejności Tab i z drzewa dostępności bez `inert`,
  * i robi to już na pierwszej klatce.
  *
  * @example
- * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">…</KptBottomSheet>
+ * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">...</KptBottomSheet>
  */
-export function KptBottomSheet({ open, onOpenChange, header = '', closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
+export function KptBottomSheet({ open, onOpenChange, header = '', ariaLabel = '', closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const close = () => onOpenChange(false);
     const panelRef = useRef(null);
     const titleId = useKptId(undefined, 'kpt-bottom-sheet-title');
     useModalFocus(open, panelRef);
-    return (_jsxs("div", { className: cn('kpt-bottom-sheet-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-bottom-sheet__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("div", { ref: panelRef, className: cn('kpt-bottom-sheet__panel', open && 'is-open'), role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, onKeyDown: (event) => {
+    return (_jsxs("div", { className: cn('kpt-bottom-sheet-host', className), ...rest, children: [_jsx("div", { className: cn('kpt-bottom-sheet__backdrop', open && 'is-open'), onClick: () => closeOnBackdrop && close() }), _jsxs("div", { ref: panelRef, className: cn('kpt-bottom-sheet__panel', open && 'is-open'), role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, "aria-label": header ? undefined : ariaLabel || undefined, tabIndex: -1, onKeyDown: (event) => {
                     if (event.key === 'Escape')
                         close();
                 }, children: [_jsx("button", { type: "button", className: "kpt-bottom-sheet__handle", onClick: close, "aria-label": t('common.close') }), header ? (_jsx("div", { className: "kpt-bottom-sheet__header", id: titleId, children: header })) : null, _jsx("div", { className: "kpt-bottom-sheet__body", children: children })] })] }));

package/dist/bottom-sheet/llms.txt

@@ -9,41 +9,44 @@ Import: `import { KptBottomSheet } from '@konce-pt/react';`
       <div class="kpt-bottom-sheet__panel is-open" role="dialog" aria-modal="true" tabindex="-1">
         <button class="kpt-bottom-sheet__handle"></button>
         <div class="kpt-bottom-sheet__header">Share</div>
-        <div class="kpt-bottom-sheet__body">…</div>
+        <div class="kpt-bottom-sheet__body">...</div>
       </div>
     </div>
 
 ## Props
-- `open`, `onOpenChange` — controlled, like `KptDialog`
+- `open`, `onOpenChange` - controlled, like `KptDialog`
 - `header`: string
 - `closeOnBackdrop`: boolean (default true)
-- `children` — the sheet's content
+- `children` - the sheet's content
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The closed sheet stays in the DOM
-It is hidden with `transform` and `visibility`, never `display: none` — the slide-in and slide-out
+It is hidden with `transform` and `visibility`, never `display: none` - the slide-in and slide-out
 animations need something to run on. `visibility` also takes it out of the tab order and out of the
 accessibility tree without `inert`, and does so on the very first frame, with no JavaScript.
 `prefers-reduced-motion: reduce` drops the transitions.
 
 ## No portal
 The panel and the backdrop are `position: fixed` and the host is `display: contents`, so the sheet
-needs no portal — the same DOM as the Angular port. A transformed ancestor would break the fixed
+needs no portal - the same DOM as the Angular port. A transformed ancestor would break the fixed
 positioning there too.
 
 ## Focus and keyboard
 Opening moves focus into the panel (its first focusable element, else the panel
-itself) and traps it there — `Tab` / `Shift+Tab` wrap inside, as `aria-modal="true"` promises.
+itself) and traps it there - `Tab` / `Shift+Tab` wrap inside, as `aria-modal="true"` promises.
 Closing returns focus to the element that had it before. `Escape` closes the panel. The panel
 is named by its `header` through `aria-labelledby`. The shared helper is `internal/use-modal-focus.ts` (the Angular port has a twin on the CDK focus trap).
 
 ## Examples
     <KptButton onClick={() => setOpen(true)}>Share</KptButton>
-    <KptBottomSheet open={open} onOpenChange={setOpen} header="Share">…</KptBottomSheet>
+    <KptBottomSheet open={open} onOpenChange={setOpen} header="Share">...</KptBottomSheet>
 
 ## Tokens
 The panel `--kpt-color-surface-raised`, the top radius `--kpt-radius-lg`, `--kpt-elevation-4`.
 
 ## Accessibility
 `role="dialog"`, `aria-modal` and `aria-labelledby` pointing at the header; the handle is a real button
-labelled from `common.close`. Focus handling — see "Focus and keyboard" above.
+labelled from `common.close`. Focus handling - see "Focus and keyboard" above.
+
+## Name and scrolling
+Without `header` give the sheet `ariaLabel` - a `role="dialog"` without a name is announced as a bare "dialog". An open sheet locks page scrolling underneath.

package/dist/breadcrumb/breadcrumb.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef } from 'react';
+import { type KptNavigateEvent } from '../shared/types.ts';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 export interface KptBreadcrumbItem {
     label: string;
@@ -6,14 +7,19 @@ export interface KptBreadcrumbItem {
 }
 export interface KptBreadcrumbProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
     items?: readonly KptBreadcrumbItem[];
+    /**
+     * Zwykły klik w odnośnik. Aplikacja z routerem woła `event.preventDefault()` i nawiguje sama -
+     * bez tego `<a href>` przeładowuje stronę.
+     */
+    onNavigate?: (event: KptNavigateEvent<KptBreadcrumbItem>) => void;
 }
 /**
  * Ścieżka nawigacji (breadcrumbs).
  *
- * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` — to bieżąca strona, a link
+ * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` - to bieżąca strona, a link
  * prowadzący w to samo miejsce, w którym już jesteś, tylko myli.
  *
  * @example
  * <KptBreadcrumb items={[{ label: 'Start', url: '/' }, { label: 'Ustawienia' }]} />
  */
-export declare function KptBreadcrumb({ items, locale, dictionary, className, ...rest }: Readonly<KptBreadcrumbProps>): import("react").JSX.Element;
+export declare function KptBreadcrumb({ items, onNavigate, locale, dictionary, className, ...rest }: Readonly<KptBreadcrumbProps>): import("react").JSX.Element;

package/dist/breadcrumb/breadcrumb.js

@@ -1,20 +1,28 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { kptIsPlainClick } from "../shared/types.js";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptIcon } from "../icon/icon.js";
 /**
  * Ścieżka nawigacji (breadcrumbs).
  *
- * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` — to bieżąca strona, a link
+ * Ostatnia pozycja nigdy nie jest odnośnikiem, nawet gdy ma `url` - to bieżąca strona, a link
  * prowadzący w to samo miejsce, w którym już jesteś, tylko myli.
  *
  * @example
  * <KptBreadcrumb items={[{ label: 'Start', url: '/' }, { label: 'Ustawienia' }]} />
  */
-export function KptBreadcrumb({ items = [], locale, dictionary, className, ...rest }) {
+export function KptBreadcrumb({ items = [], onNavigate, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
+    /** Zwykły klik w odnośnik -> `onNavigate` (Ctrl/Cmd/Shift, środkowy przycisk i `_blank` zostają natywne). */
+    const linkClick = (event, item) => {
+        if (item.url && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
+            onNavigate({ item, url: item.url, event: event.nativeEvent });
+        }
+    };
     return (_jsx("div", { className: cn('kpt-breadcrumb-host', className), ...rest, children: _jsx("nav", { className: "kpt-breadcrumb", "aria-label": t('breadcrumb.label'), children: _jsx("ol", { className: "kpt-breadcrumb__list", children: items.map((item, index) => {
                     const last = index === items.length - 1;
-                    return (_jsxs("li", { className: "kpt-breadcrumb__item", children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, index));
+                    return (_jsxs("li", { className: "kpt-breadcrumb__item", children: [item.url && !last ? (_jsx("a", { className: "kpt-breadcrumb__link", href: item.url, onClick: (event) => linkClick(event, item), children: item.label })) : (_jsx("span", { className: "kpt-breadcrumb__current", "aria-current": last ? 'page' : undefined, children: item.label })), last ? null : _jsx(KptIcon, { name: "chevron-right", className: "kpt-breadcrumb__sep" })] }, `${index}-${item.url ?? item.label}`));
                 }) }) }) }));
 }

package/dist/breadcrumb/llms.txt

@@ -8,7 +8,7 @@ A breadcrumb trail. Import: `import { KptBreadcrumb } from '@konce-pt/react';`
         <ol class="kpt-breadcrumb__list">
           <li class="kpt-breadcrumb__item">
             <a class="kpt-breadcrumb__link" href="/">Home</a>
-            <span class="kpt-icon-host kpt-breadcrumb__sep">…</span>
+            <span class="kpt-icon-host kpt-breadcrumb__sep">...</span>
           </li>
           <li class="kpt-breadcrumb__item">
             <span class="kpt-breadcrumb__current" aria-current="page">Showcase</span>
@@ -19,7 +19,7 @@ A breadcrumb trail. Import: `import { KptBreadcrumb } from '@konce-pt/react';`
 
 ## Props
 - `items`: `{ label, url? }[]`
-- `locale`, `dictionary` — i18n overrides for this component only
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The last item is never a link
@@ -40,3 +40,11 @@ The nav label comes from `breadcrumb.label` in the dictionary.
 A `<nav>` landmark labelled from `breadcrumb.label`, holding an ordered list (`<ol>`/`<li>`), so a
 screen reader announces how many levels the trail has. The current page carries
 `aria-current="page"`; separators are icons hidden from assistive technology.
+
+## Router
+Links are plain `<a href>`, so without a router a click reloads the page. `onNavigate` fires on a plain
+click (left button, no Ctrl/Cmd/Shift, no `target="_blank"`) with `{ item, url, event }`: call
+`event.preventDefault()` and navigate with your router. Modified clicks stay native (a new tab, a new
+window). The library depends on no router.
+
+    <KptBreadcrumb items={items} onNavigate={({ event, url }) => { event.preventDefault(); navigate(url); }} />

package/dist/button/button.d.ts

@@ -13,7 +13,7 @@ export interface KptButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'h
     fullWidth?: boolean;
     /** Nazwa ikony wiodącej z rejestru (`KptIconRegistry`). */
     icon?: string;
-    /** Nazwa ikony zamykającej — zwykle znacznik kierunku, nie akcja. */
+    /** Nazwa ikony zamykającej - zwykle znacznik kierunku, nie akcja. */
     iconEnd?: string;
     /** Klasa dokładana do ikony wiodącej; obok stałego haka `.kpt-button__icon`. */
     iconClassName?: string;
@@ -27,10 +27,10 @@ export interface KptButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'h
 }
 /**
  * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
- * albo `<a>`, gdy podasz `href` — w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
+ * albo `<a>`, gdy podasz `href` - w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
  * dokładnie jak w porcie Angulara, bo host niesie własne style.
  *
- * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` — oba sposoby
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` - oba sposoby
  * dostają ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example

package/dist/button/button.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,10 +6,10 @@ import { renderAsChild } from "../internal/slot.js";
 import { KptIcon } from "../icon/icon.js";
 /**
  * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
- * albo `<a>`, gdy podasz `href` — w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
+ * albo `<a>`, gdy podasz `href` - w hoście `.kpt-button-host`, czyli dwa poziomy DOM,
  * dokładnie jak w porcie Angulara, bo host niesie własne style.
  *
- * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` — oba sposoby
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić w `children` - oba sposoby
  * dostają ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
@@ -21,14 +22,14 @@ import { KptIcon } from "../icon/icon.js";
 export function KptButton({ variant = 'filled', size = 'md', type = 'button', loading = false, fullWidth = false, disabled = false, asChild = false, icon, iconEnd, iconClassName, iconEndClassName, href, target, rel, hostProps, className, children, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const isDisabled = disabled || loading;
-    // Zawartość jest identyczna we wszystkich trybach — w `asChild` podmieniamy tylko element
+    // Zawartość jest identyczna we wszystkich trybach - w `asChild` podmieniamy tylko element
     // zewnętrzny, nie strukturę środka, żeby SCSS (`__spinner`, `__content`) dalej działał.
     const content = (_jsxs(_Fragment, { children: [loading ? (_jsx("span", { className: "kpt-button__spinner", "aria-hidden": "true" })) : icon ? (_jsx(KptIcon, { className: cn('kpt-button__icon', iconClassName), name: icon })) : null, _jsx("span", { className: "kpt-button__content", children: asChildContent(asChild, children) }), iconEnd ? (_jsx(KptIcon, { className: cn('kpt-button__icon', 'kpt-button__icon--end', iconEndClassName), name: iconEnd })) : null] }));
     const buttonProps = {
         className: cn('kpt-button', loading && 'kpt-button--loading', className),
         'data-variant': variant,
         'data-size': size,
-        // React serializuje atrybuty aria-* z booleana na "true"/"false" — wynikowy DOM
+        // React serializuje atrybuty aria-* z booleana na "true"/"false" - wynikowy DOM
         // ma `aria-busy="true"`, tak jak port Angulara.
         'aria-busy': loading || undefined,
         ...rest,
@@ -36,7 +37,7 @@ export function KptButton({ variant = 'filled', size = 'md', type = 'button', lo
     return (_jsx("span", { className: cn('kpt-button-host', fullWidth && 'kpt-button-host--full', hostClassName), ...hostRest, children: renderInner({ asChild, children, buttonProps, content, href, target, rel, type, isDisabled }) }));
 }
 /**
- * Element wewnętrzny. `asChild` ma pierwszeństwo przed `href` — kto podstawia własny
+ * Element wewnętrzny. `asChild` ma pierwszeństwo przed `href` - kto podstawia własny
  * element, ten decyduje o znaczniku.
  */
 function renderInner(args) {
@@ -46,17 +47,17 @@ function renderInner(args) {
     }
     if (href !== undefined) {
         return (_jsx("a", { 
-            // Wyłączony odnośnik traci `href`, a nie tylko dostaje atrybut — inaczej dałoby się go
+            // Wyłączony odnośnik traci `href`, a nie tylko dostaje atrybut - inaczej dałoby się go
             // kliknąć i wejść na niego z klawiatury.
             href: isDisabled ? undefined : href, target: target, 
-            // `target="_blank"` bez `rel` to wektor na `window.opener` — dokładamy domyślne.
-            rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, ...buttonProps, children: content }));
+            // `target="_blank"` bez `rel` to wektor na `window.opener` - dokładamy domyślne.
+            rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, ...(buttonProps), children: content }));
     }
     return (_jsx("button", { type: type, disabled: isDisabled, ...buttonProps, children: content }));
 }
 /**
  * Stan wyłączenia dla podstawionego elementu. Natywny `<button>` dostaje `disabled`
- * (SCSS stylizuje `:disabled`); każdy inny element — `aria-disabled`, bo `disabled`
+ * (SCSS stylizuje `:disabled`); każdy inny element - `aria-disabled`, bo `disabled`
  * nie ma tam znaczenia.
  */
 function disabledProps(child, isDisabled) {

package/dist/button/llms.txt

@@ -1,15 +1,15 @@
 # KptButton (@konce-pt/react)
 
-The Koncept UI button. It renders a native `<button>` (semantics + form submit) — or an `<a>` when
-you pass `href` — inside a `.kpt-button-host` wrapper: two DOM levels, exactly like the Angular port,
+The Koncept UI button. It renders a native `<button>` (semantics + form submit) - or an `<a>` when
+you pass `href` - inside a `.kpt-button-host` wrapper: two DOM levels, exactly like the Angular port,
 because the host carries its own styles. Import: `import { KptButton } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-button-host">
       <button class="kpt-button" type="button" data-variant="filled" data-size="md">
-        <span class="kpt-button__icon kpt-icon-host">…</span>
-        <span class="kpt-button__content">…</span>
-        <span class="kpt-button__icon kpt-button__icon--end kpt-icon-host">…</span>
+        <span class="kpt-button__icon kpt-icon-host">...</span>
+        <span class="kpt-button__content">...</span>
+        <span class="kpt-button__icon kpt-button__icon--end kpt-icon-host">...</span>
       </button>
     </span>
 
@@ -18,39 +18,39 @@ because the host carries its own styles. Import: `import { KptButton } from '@ko
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (default 'md')
 - `type`: 'button' | 'submit' | 'reset' (default 'button')
 - `disabled`: boolean
-- `loading`: boolean — a spinner + blocked interaction, sets `aria-busy`
-- `fullWidth`: boolean — the full width of the container
-- `icon` / `iconEnd`: string — a name from the icon registry
-- `iconClassName` / `iconEndClassName`: string — an extra class on that icon
-- `href`, `target`, `rel`: string — render an `<a>` instead of a `<button>`
-- `asChild`: boolean — render the single child instead of `<button>`, keeping every class
+- `loading`: boolean - a spinner + blocked interaction, sets `aria-busy`
+- `fullWidth`: boolean - the full width of the container
+- `icon` / `iconEnd`: string - a name from the icon registry
+- `iconClassName` / `iconEndClassName`: string - an extra class on that icon
+- `href`, `target`, `rel`: string - render an `<a>` instead of a `<button>`
+- `asChild`: boolean - render the single child instead of `<button>`, keeping every class
 - `hostProps`: props for the `.kpt-button-host` wrapper
 - `className`, `ref` and every other `<button>` prop go to the INNER element
 
 ## Events
-No events of its own — bind `onClick` and it lands on the native `<button>`.
+No events of its own - bind `onClick` and it lands on the native `<button>`.
 
 ## Icons
 Two ways in, one result. `icon` and `iconEnd` take a name from the icon registry and the component
 renders it; anything put in `children` is laid out the same way. Both get the gap from
-`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) — the
+`--kpt-button-gap` and a size that follows `size` (0.875rem at `xs` up to 1.5rem at `xl`) - the
 content box is a flex container, so an icon sits on the centre line rather than on the text baseline.
 
 `loading` replaces the leading icon with the spinner instead of standing next to it, and the
 spinner takes that icon's size, so the label does not jump when loading starts. The trailing icon
-stays put — it usually marks direction rather than the action.
+stays put - it usually marks direction rather than the action.
 
 `iconClassName` / `iconEndClassName` add a class next to the permanent `.kpt-button__icon` hook, for
 the cases where one instance needs a different colour or a rotation.
 
 ## Link and the `link` variant
-Two different things. `variant="link"` only changes the looks — underline, transparent background,
+Two different things. `variant="link"` only changes the looks - underline, transparent background,
 no side padding, so it sits inside a sentence. `href` changes the element: the component renders
 `<a class="kpt-button">` instead of `<button>`, and the two combine freely (a filled button can be
 a link, a `link` variant can be a plain button). `asChild` wins over `href`: whoever substitutes
 their own element decides the tag.
 
-A disabled link loses its `href` rather than just gaining an attribute — otherwise it would stay
+A disabled link loses its `href` rather than just gaining an attribute - otherwise it would stay
 clickable and reachable with the keyboard; it also gets `aria-disabled="true"` and `tabindex="-1"`.
 `target="_blank"` without an explicit `rel` gets `rel="noopener noreferrer"`.
 
@@ -68,9 +68,17 @@ clickable and reachable with the keyboard; it also gets `aria-disabled="true"` a
 ## asChild
 The wrapper is still rendered; only the inner element is swapped. The content stays wrapped in
 `.kpt-button__content`, so the spinner and the layout keep working. A disabled substituted
-element gets `disabled` when it is a native `<button>`, and `aria-disabled` otherwise — an
+element gets `disabled` when it is a native `<button>`, and `aria-disabled` otherwise - an
 element with no `:disabled` state therefore does not get the dimmed look.
 
+## Motion
+Pressed, it squeezes slightly and springs back on release (shared mixin `styles/_press.scss`). Entering `loading` pops the spinner in where the leading icon was
+and dims the label. `link` does not squeeze (text in a sentence would jitter): its colour and
+underline change smoothly and it dims while pressed. `elevated` lifts on hover and is pressed down
+(the shadow shrinks smoothly). A pressed button uses its own variant's hover colour - only `filled` has
+a separate pressed colour. Pure CSS; durations follow `--kpt-motion-scale`, so `enabled: false` turns it off, and it drops out
+under "reduce motion".
+
 ## Tokens (styling)
 `--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`, and one group per variant:
 `--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-elevated-{bg,fg,bg-hover}`,
@@ -80,13 +88,13 @@ element with no `:disabled` state therefore does not get the dimmed look.
 The elevated variant also reaches for `--kpt-shadow-sm` and `--kpt-shadow-md`.
 
 ## The state layer (hover / active)
-Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 → 1), not by
+Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 -> 1), not by
 animating the button's own `background-color`. The CSS is shared with the Angular port, where
 the pattern was introduced to stop the variant flicker on first paint; here it simply comes
 along with the stylesheet.
 
 ## Accessibility
-- A native `<button>` — full keyboard and screen reader support.
+- A native `<button>` - full keyboard and screen reader support.
 - `loading` sets `aria-busy="true"` and disables the button.
 - An `<a>` matches no `:disabled`, so the disabled look keys off `[aria-disabled='true']` as well.
 - The focus ring comes from `@konce-pt/styles` (`--kpt-color-focus-ring`).