@konce-pt/react 0.11.1 → 0.12.0

package/README.md

@@ -52,7 +52,7 @@ npm i @konce-pt/react @konce-pt/tokens @konce-pt/styles
 # or: pnpm add / yarn add
 ```
 
-`react` and `react-dom` (`>=19`) are peers you already have. Optional extras:
+`react` and `react-dom` (`^19.2`) are peers you already have. Optional extras:
 
 - [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid) — the mobile-first layout system;
   its React components live in `@konce-pt/react/grid`.
@@ -79,6 +79,9 @@ runtime; React has no other source for them, so this import is not optional.
 
 Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
 
+**Next.js App Router / Server Components:** every interactive component module starts with
+`'use client'`, so you can import components directly into a server component — no wrapper file.
+
 > **No CDK here.** Components with a floating panel (`KptSelect`, `KptPopover`, `KptMenu`,
 > `KptAutocomplete`, `KptDatepicker`…) portal into `document.body` through the internal
 > `KptOverlay`, so `@angular/cdk/overlay-prebuilt.css` is **not** needed — positioning lives in the
@@ -314,7 +317,7 @@ MIT © konce.pt
 npm i @konce-pt/react @konce-pt/tokens @konce-pt/styles
 ```
 
-`react` i `react-dom` (`>=19`) to peery, które masz już w aplikacji. Opcjonalnie:
+`react` i `react-dom` (`^19.2`) to peery, które masz już w aplikacji. Opcjonalnie:
 `@konce-pt/grid` (układ; komponenty w `@konce-pt/react/grid`), `@konce-pt/validators`
 (walidatory PL: NIP, REGON, PESEL, IBAN, kod pocztowy) oraz `leaflet` (`^1.9`) — **opcjonalny**
 peer, potrzebny wyłącznie dla `@konce-pt/react/map`.
@@ -338,6 +341,9 @@ nie ma dla nich innego źródła, więc ten import nie jest opcjonalny.
 Motyw ciemny: `<html data-theme="dark">` (albo `prefers-color-scheme`). Nadpisania `--kpt-color-*`
 w arkuszu importowanym **po** `@konce-pt/styles`.
 
+**Next.js App Router / Server Components:** każdy moduł interaktywnego komponentu zaczyna się od
+`'use client'`, więc komponenty importujesz wprost do komponentu serwerowego — bez pliku-opakowania.
+
 > **CDK nie jest tu potrzebny.** Komponenty z panelem (`KptSelect`, `KptPopover`, `KptMenu`,
 > `KptAutocomplete`, `KptDatepicker`…) renderują go przez wewnętrzny `KptOverlay` do portalu na
 > `document.body`, więc `@angular/cdk/overlay-prebuilt.css` nie jest wymagany. W otwartym

package/dist/accordion/accordion.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, createContext, isValidElement, useContext, useState, } from 'react';
+import { cloneElement, createContext, isValidElement, useContext, } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren } from "../internal/slot-children.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
@@ -34,14 +36,13 @@ export function KptAccordion({ multi = false, animated = true, animationDuration
         },
         animMs: `${animated ? animationDuration : 0}ms`,
     };
-    let index = -1;
-    const panels = Children.map(children, (child) => {
-        if (!isValidElement(child) || child.type?.kptAccordionSlot !== 'panel') {
-            return child;
-        }
-        index += 1;
-        return cloneElement(child, { index });
-    });
+    // Indeks panelu = liczba paneli przed nim; fragmenty rozwinięte, więc panel z warunku też się liczy.
+    const items = slotChildren(children);
+    const isPanel = (child) => isValidElement(child) && child.type?.kptAccordionSlot === 'panel';
+    const panelIndex = items.map((_, at) => items.slice(0, at).filter(isPanel).length);
+    const panels = items.map((child, at) => isPanel(child)
+        ? cloneElement(child, { key: child.key ?? `panel-${panelIndex[at]}`, index: panelIndex[at] })
+        : isValidElement(child) ? cloneElement(child, { key: child.key ?? `child-${at}` }) : child);
     return (_jsx(AccordionContext.Provider, { value: context, children: _jsx("div", { className: cn('kpt-accordion-host', className), ...rest, children: panels }) }));
 }
 /** Panel akordeonu. Umieszczaj w `<KptAccordion>` albo używaj samodzielnie. */
@@ -69,7 +70,7 @@ export function KptAccordionPanel({ title, disabled = false, expanded, defaultEx
     };
     return (_jsx("div", { className: cn('kpt-accordion-panel-host', className), style: { ['--kpt-anim-duration']: accordion?.animMs ?? '500ms', ...style }, ...rest, children: _jsxs("div", { className: cn('kpt-accordion-panel', isOpen && 'is-open'), children: [_jsxs("button", { type: "button", className: "kpt-accordion-panel__header", id: headerId, "aria-expanded": isOpen, "aria-controls": bodyId, disabled: disabled, onClick: toggle, children: [_jsx("span", { className: "kpt-accordion-panel__title", children: title }), _jsx(KptIcon, { name: "chevron-down", className: cn('kpt-accordion-panel__chevron', isOpen && 'is-open') })] }), _jsx("div", { className: cn('kpt-accordion-panel__collapse', isOpen && 'is-open'), 
                     // Treść to region nazwany nagłówkiem — czytnik ogłasza nie tylko stan, ale i to, czego dotyczy.
-                    role: "region", id: bodyId, "aria-labelledby": headerId, inert: !isOpen, "aria-hidden": !isOpen, children: _jsx("div", { className: "kpt-accordion-panel__collapse-inner", children: _jsx("div", { className: "kpt-accordion-panel__body", children: children }) }) })] }) }));
+                    role: "region", id: bodyId, "aria-labelledby": headerId, inert: !isOpen, children: _jsx("div", { className: "kpt-accordion-panel__collapse-inner", children: _jsx("div", { className: "kpt-accordion-panel__body", children: children }) }) })] }) }));
 }
 KptAccordionPanel.kptAccordionSlot = 'panel';
 KptAccordion.Panel = KptAccordionPanel;

package/dist/alert/alert.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";

package/dist/alert/llms.txt

@@ -45,3 +45,4 @@ The role follows the weight of the message: `info` and `success` are `role="stat
 politely, without interrupting), `warning` and `danger` are `role="alert"` (read at once). The icon
 is decorative; the × button is labelled from `common.close`. After closing, focus falls back to the
 page — move it yourself in the close handler when the alert was reached with the keyboard.
+A live region announces **changes**: an alert rendered together with the page (or revealed by toggling `hidden`) is not announced reliably. To have it read, add it after the action (`@if` / conditional render) — the inserted element is announced.

package/dist/app-shell/app-shell.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, } from 'react';
 import { cn } from "../internal/cn.js";
@@ -58,9 +59,15 @@ export function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSi
     useEffect(() => {
         if (!isOverlay || !isSidenavOpen)
             return;
+        // Escape zamyka nakładkę nawigacji — ale nie wtedy, gdy zamyka nim coś otwartego nad shellem
+        // (okno, menu, popover): te wołają `preventDefault()` albo trzymają fokus w sobie.
         const onKeyDown = (event) => {
-            if (event.key === 'Escape')
-                closeSidenav();
+            if (event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            const target = event.target instanceof Element ? event.target : null;
+            if (target?.closest('dialog[open], [popover], [role="menu"], [role="listbox"], [role="dialog"]'))
+                return;
+            closeSidenav();
         };
         document.addEventListener('keydown', onKeyDown);
         return () => document.removeEventListener('keydown', onKeyDown);
@@ -79,13 +86,13 @@ export function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSi
     // nie miałby dokąd pójść. Po otwarciu przenosimy go do panelu, po zamknięciu oddajemy tam,
     // skąd przyszedł — chyba że użytkownik zdążył go przenieść gdzie indziej. Stan `null` przed
     // pierwszym renderem: nakładka otwarta już przy starcie nie zabiera fokusu.
-    const asideRef = useRef(null);
+    const navRef = useRef(null);
     const overlayWasOpen = useRef(null);
     const returnFocusTo = useRef(null);
     useEffect(() => {
         const was = overlayWasOpen.current;
         overlayWasOpen.current = contentInert;
-        const panel = asideRef.current;
+        const panel = navRef.current;
         if (was === null || was === contentInert || !panel)
             return;
         const active = document.activeElement;
@@ -99,7 +106,7 @@ export function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSi
             returnFocusTo.current.focus();
         returnFocusTo.current = null;
     }, [contentInert]);
-    return (_jsx(KptAppShellContext.Provider, { value: context, children: _jsxs("div", { className: cn('kpt-app-shell', dockedOpen && 'kpt-app-shell--nav-open', compactOpen && 'kpt-app-shell--nav-compact-open', className), "data-sidenav-mode": sidenavMode, "data-sidenav-breakpoint": sidenavBreakpoint, "data-sidenav-rail": sidenavRailBreakpoint ?? undefined, ...rest, children: [toolbar, _jsxs("div", { className: "kpt-app-shell__body", children: [_jsx("aside", { ref: asideRef, className: "kpt-app-shell__sidenav", role: "navigation", tabIndex: -1, id: sidenavId, "aria-label": sidenavLabel || t('appShell.navigation'), children: sidenav }), _jsx("div", { className: "kpt-app-shell__scrim", "aria-hidden": "true", onClick: closeSidenav }), _jsx("main", { className: "kpt-app-shell__content", inert: contentInert, children: children })] })] }) }));
+    return (_jsx(KptAppShellContext.Provider, { value: context, children: _jsxs("div", { className: cn('kpt-app-shell', dockedOpen && 'kpt-app-shell--nav-open', compactOpen && 'kpt-app-shell--nav-compact-open', className), "data-sidenav-mode": sidenavMode, "data-sidenav-breakpoint": sidenavBreakpoint, "data-sidenav-rail": sidenavRailBreakpoint ?? undefined, ...rest, children: [toolbar, _jsxs("div", { className: "kpt-app-shell__body", children: [_jsx("nav", { ref: navRef, className: "kpt-app-shell__sidenav", tabIndex: -1, id: sidenavId, "aria-label": sidenavLabel || t('appShell.navigation'), children: sidenav }), _jsx("div", { className: "kpt-app-shell__scrim", "aria-hidden": "true", onClick: closeSidenav }), _jsx("main", { className: "kpt-app-shell__content", inert: contentInert, children: children })] })] }) }));
 }
 /** Dostęp do stanu shella. Poza `KptAppShell` rzuca — to zawsze błąd użycia. */
 export function useKptAppShell() {

package/dist/app-shell/llms.txt

@@ -8,7 +8,7 @@ Import: `import { KptAppShell, useKptShellNavToggle } from '@konce-pt/react';`
          data-sidenav-mode="auto" data-sidenav-breakpoint="lg">
       …toolbar…
       <div class="kpt-app-shell__body">
-        <aside class="kpt-app-shell__sidenav" role="navigation" tabindex="-1" id="…">…sidenav…</aside>
+        <nav class="kpt-app-shell__sidenav" tabindex="-1" id="…">…sidenav…</nav>
         <div class="kpt-app-shell__scrim" aria-hidden="true"></div>
         <main class="kpt-app-shell__content">…children…</main>
       </div>
@@ -54,9 +54,10 @@ decides WHICH state the button flips. The scrim is always in the DOM; CSS contro
 `--kpt-color-overlay-scrim`, `--kpt-motion-duration-base`, `--kpt-motion-easing-standard`.
 
 ## Accessibility
-- The panel is an `<aside role="navigation">` with a label and an `id` for `aria-controls`.
+- The panel is a `<nav>` with a label and an `id` for `aria-controls`.
 - A closed docked panel leaves the tab order through `visibility`, correct on the first frame.
-- While the overlay is open the content gets `inert`, and Escape closes the panel.
-- Opening the overlay moves focus into the panel (its first focusable element, or the `<aside>`
+- While the overlay is open the content gets `inert`, and Escape closes the panel — unless something
+  opened above the shell (a dialog, menu or popover) already handled it.
+- Opening the overlay moves focus into the panel (its first focusable element, or the `<nav>`
   itself); closing it returns focus to where it came from — usually the menu button — unless the user
   has already moved it elsewhere. An overlay that is open when the page loads does not take focus.

package/dist/auth/auth.js

@@ -1,6 +1,8 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Children, Fragment, isValidElement, useId, useRef, useState, } from 'react';
+import { Fragment, isValidElement, useId, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
+import { slotChildren } from "../internal/slot-children.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptAlert } from "../alert/alert.js";
@@ -59,13 +61,13 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
     const headingRef = useRef(null);
     // ── Sloty ──
     const slots = {};
-    Children.forEach(children, (child) => {
+    for (const child of slotChildren(children)) {
         if (!isValidElement(child))
-            return;
+            continue;
         const name = child.type?.kptAuthSlot;
         if (name)
             slots[name] = child.props.children;
-    });
+    }
     // ── Modele formularzy ──
     const [signInModel, setSignInModel] = useState({
         email: '',
@@ -125,7 +127,8 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
     const anyError = (kinds) => Object.values(kinds).some((kind) => kind !== null);
     const submitAll = (form, fields) => {
         // Submit dotyka całego formularza — inaczej pola, których użytkownik nie ruszył, nie
-        // pokazałyby błędu i przycisk wyglądałby na zepsuty.
+        // pokazałyby błędu. Dlatego przycisk wysyłki nie jest wyłączany przy błędach: pokazuje,
+        // czego brakuje, zamiast stać martwy (WCAG 3.3.1).
         setTouched((prev) => {
             const next = new Set(prev);
             for (const field of fields)
@@ -152,22 +155,28 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
     const promoBody = promoText === null ? t(`auth.promo.${promoMode}Text`) : promoText;
     return (_jsx("div", { className: cn('kpt-auth-host', className), "data-layout": layout, "data-mode": activeMode, style: { ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`, ...style }, ...rest, children: _jsx("div", { className: "kpt-auth", children: _jsxs("div", { className: "kpt-auth__card", children: [_jsx("div", { className: "kpt-auth__form-side", children: _jsxs("div", { className: "kpt-auth__inner", "data-mode": activeMode, children: [_jsx("div", { className: "kpt-auth__brand", children: slots.brand }), _jsx("h2", { ref: headingRef, className: "kpt-auth__title", id: ids[activeMode], "data-mode": activeMode, tabIndex: -1, children: t(`auth.${activeMode}Title`) }), _jsx("p", { className: "kpt-auth__subtitle", children: t(`auth.${activeMode}Subtitle`) }), error ? _jsx(KptAlert, { variant: "danger", children: error }) : null, notice ? _jsx(KptAlert, { variant: "success", children: notice }) : null, activeMode === 'signIn' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.signIn, onSubmit: (event) => {
                                         event.preventDefault();
+                                        if (busy)
+                                            return;
                                         submitAll('signIn', ['email', 'password']);
                                         if (!anyError(signInErrors))
                                             onSignIn?.({ ...signInModel });
-                                    }, children: [_jsx(KptFormField, { label: t('auth.email'), error: errorFor('signIn', 'email', signInErrors), required: true, controlId: ids.email, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.email, placeholder: t('auth.emailPlaceholder'), value: signInModel.email, onValueChange: (email) => setSignInModel({ ...signInModel, email }), onTouch: () => touch('signIn.email') }) }), _jsx(KptFormField, { label: t('auth.password'), error: errorFor('signIn', 'password', signInErrors), required: true, controlId: ids.password, children: _jsx(KptPassword, { autoComplete: "current-password", id: ids.password, value: signInModel.password, onValueChange: (password) => setSignInModel({ ...signInModel, password }), onTouch: () => touch('signIn.password') }) }), slots.fields, _jsxs("div", { className: "kpt-auth__row", children: [showRemember ? (_jsx(KptCheckbox, { label: t('auth.remember'), checked: signInModel.remember, onCheckedChange: (remember) => setSignInModel({ ...signInModel, remember }) })) : (_jsx("span", {})), _jsx("button", { type: "button", className: "kpt-auth__link", onClick: () => changeMode('forgot'), children: t('auth.forgotLink') })] }), _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, disabled: anyError(signInErrors), children: t('auth.signInSubmit') })] })) : null, activeMode === 'signUp' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.signUp, onSubmit: (event) => {
+                                    }, children: [_jsx(KptFormField, { label: t('auth.email'), error: errorFor('signIn', 'email', signInErrors), required: true, controlId: ids.email, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.email, placeholder: t('auth.emailPlaceholder'), value: signInModel.email, onValueChange: (email) => setSignInModel({ ...signInModel, email }), onTouch: () => touch('signIn.email') }) }), _jsx(KptFormField, { label: t('auth.password'), error: errorFor('signIn', 'password', signInErrors), required: true, controlId: ids.password, children: _jsx(KptPassword, { autoComplete: "current-password", id: ids.password, value: signInModel.password, onValueChange: (password) => setSignInModel({ ...signInModel, password }), onTouch: () => touch('signIn.password') }) }), slots.fields, _jsxs("div", { className: "kpt-auth__row", children: [showRemember ? (_jsx(KptCheckbox, { label: t('auth.remember'), checked: signInModel.remember, onCheckedChange: (remember) => setSignInModel({ ...signInModel, remember }) })) : (_jsx("span", {})), _jsx("button", { type: "button", className: "kpt-auth__link", onClick: () => changeMode('forgot'), children: t('auth.forgotLink') })] }), _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, children: t('auth.signInSubmit') })] })) : null, activeMode === 'signUp' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.signUp, onSubmit: (event) => {
                                         event.preventDefault();
+                                        if (busy)
+                                            return;
                                         submitAll('signUp', ['name', 'email', 'password', 'confirm', 'terms']);
                                         if (!anyError(signUpErrors)) {
                                             const { name, email, password, terms } = signUpModel;
                                             onSignUp?.({ name, email, password, terms });
                                         }
-                                    }, children: [showName ? (_jsx(KptFormField, { label: t('auth.name'), error: errorFor('signUp', 'name', signUpErrors), required: true, controlId: ids.name, children: _jsx(KptInput, { autoComplete: "name", id: ids.name, value: signUpModel.name, onValueChange: (name) => setSignUpModel({ ...signUpModel, name }), onTouch: () => touch('signUp.name') }) })) : null, _jsx(KptFormField, { label: t('auth.email'), error: errorFor('signUp', 'email', signUpErrors), required: true, controlId: ids.regEmail, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.regEmail, placeholder: t('auth.emailPlaceholder'), value: signUpModel.email, onValueChange: (email) => setSignUpModel({ ...signUpModel, email }), onTouch: () => touch('signUp.email') }) }), _jsx(KptFormField, { label: t('auth.password'), error: errorFor('signUp', 'password', signUpErrors), hint: t('auth.passwordHint', { min: KPT_AUTH_MIN_PASSWORD }), required: true, controlId: ids.regPassword, children: _jsx(KptPassword, { autoComplete: "new-password", feedback: true, id: ids.regPassword, value: signUpModel.password, onValueChange: (password) => setSignUpModel({ ...signUpModel, password }), onTouch: () => touch('signUp.password') }) }), _jsx(KptFormField, { label: t('auth.confirmPassword'), error: errorFor('signUp', 'confirm', signUpErrors), required: true, controlId: ids.regConfirm, children: _jsx(KptPassword, { autoComplete: "new-password", id: ids.regConfirm, value: signUpModel.confirm, onValueChange: (confirm) => setSignUpModel({ ...signUpModel, confirm }), onTouch: () => touch('signUp.confirm') }) }), slots.fields, requireTerms ? (_jsx(KptFormField, { error: errorFor('signUp', 'terms', signUpErrors), children: _jsx(KptCheckbox, { label: t('auth.terms'), checked: signUpModel.terms, onCheckedChange: (terms) => setSignUpModel({ ...signUpModel, terms }), onTouch: () => touch('signUp.terms') }) })) : null, _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, disabled: anyError(signUpErrors), children: t('auth.signUpSubmit') })] })) : null, activeMode === 'forgot' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.forgot, onSubmit: (event) => {
+                                    }, children: [showName ? (_jsx(KptFormField, { label: t('auth.name'), error: errorFor('signUp', 'name', signUpErrors), required: true, controlId: ids.name, children: _jsx(KptInput, { autoComplete: "name", id: ids.name, value: signUpModel.name, onValueChange: (name) => setSignUpModel({ ...signUpModel, name }), onTouch: () => touch('signUp.name') }) })) : null, _jsx(KptFormField, { label: t('auth.email'), error: errorFor('signUp', 'email', signUpErrors), required: true, controlId: ids.regEmail, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.regEmail, placeholder: t('auth.emailPlaceholder'), value: signUpModel.email, onValueChange: (email) => setSignUpModel({ ...signUpModel, email }), onTouch: () => touch('signUp.email') }) }), _jsx(KptFormField, { label: t('auth.password'), error: errorFor('signUp', 'password', signUpErrors), hint: t('auth.passwordHint', { min: KPT_AUTH_MIN_PASSWORD }), required: true, controlId: ids.regPassword, children: _jsx(KptPassword, { autoComplete: "new-password", feedback: true, id: ids.regPassword, value: signUpModel.password, onValueChange: (password) => setSignUpModel({ ...signUpModel, password }), onTouch: () => touch('signUp.password') }) }), _jsx(KptFormField, { label: t('auth.confirmPassword'), error: errorFor('signUp', 'confirm', signUpErrors), required: true, controlId: ids.regConfirm, children: _jsx(KptPassword, { autoComplete: "new-password", id: ids.regConfirm, value: signUpModel.confirm, onValueChange: (confirm) => setSignUpModel({ ...signUpModel, confirm }), onTouch: () => touch('signUp.confirm') }) }), slots.fields, requireTerms ? (_jsx(KptFormField, { error: errorFor('signUp', 'terms', signUpErrors), children: _jsx(KptCheckbox, { label: t('auth.terms'), checked: signUpModel.terms, onCheckedChange: (terms) => setSignUpModel({ ...signUpModel, terms }), onTouch: () => touch('signUp.terms') }) })) : null, _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, children: t('auth.signUpSubmit') })] })) : null, activeMode === 'forgot' ? (_jsxs("form", { className: "kpt-auth__form", "aria-labelledby": ids.forgot, onSubmit: (event) => {
                                         event.preventDefault();
+                                        if (busy)
+                                            return;
                                         submitAll('forgot', ['email']);
                                         if (!anyError(resetErrors))
                                             onResetPassword?.({ ...resetModel });
-                                    }, children: [_jsx(KptFormField, { label: t('auth.email'), error: errorFor('forgot', 'email', resetErrors), required: true, controlId: ids.resetEmail, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.resetEmail, placeholder: t('auth.emailPlaceholder'), value: resetModel.email, onValueChange: (email) => setResetModel({ email }), onTouch: () => touch('forgot.email') }) }), _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, disabled: anyError(resetErrors), children: t('auth.resetSubmit') }), _jsx("button", { type: "button", className: "kpt-auth__link kpt-auth__link--center", onClick: () => changeMode('signIn'), children: t('auth.backToSignIn') })] })) : null, activeMode !== 'forgot' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-auth__sso", children: slots.sso }), providers.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-auth__separator", role: "separator", "aria-label": t('auth.orContinueWith'), children: _jsx("span", { className: "kpt-auth__separator-text", children: t('auth.orContinueWith') }) }), _jsx("div", { className: "kpt-auth__providers", "data-layout": providerLayout, children: providers.map((provider) => {
+                                    }, children: [_jsx(KptFormField, { label: t('auth.email'), error: errorFor('forgot', 'email', resetErrors), required: true, controlId: ids.resetEmail, children: _jsx(KptInput, { type: "email", autoComplete: "email", id: ids.resetEmail, placeholder: t('auth.emailPlaceholder'), value: resetModel.email, onValueChange: (email) => setResetModel({ email }), onTouch: () => touch('forgot.email') }) }), _jsx(KptButton, { type: "submit", fullWidth: true, loading: busy, children: t('auth.resetSubmit') }), _jsx("button", { type: "button", className: "kpt-auth__link kpt-auth__link--center", onClick: () => changeMode('signIn'), children: t('auth.backToSignIn') })] })) : null, activeMode !== 'forgot' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-auth__sso", children: slots.sso }), providers.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "kpt-auth__separator", role: "separator", "aria-label": t('auth.orContinueWith'), children: _jsx("span", { className: "kpt-auth__separator-text", children: t('auth.orContinueWith') }) }), _jsx("div", { className: "kpt-auth__providers", "data-layout": providerLayout, children: providers.map((provider) => {
                                                         const custom = renderProvider?.(provider, () => selectProvider(provider));
                                                         // Fragment, nie `<span>`: lista dostawców to grid, więc dodatkowy
                                                         // element stałby się jej dzieckiem i własny przycisk przestałby

package/dist/auth/llms.txt

@@ -31,8 +31,9 @@ Three independent forms, one per mode, validated on every render: e-mail require
 password required (sign up: at least 8 characters), the confirmation matching, consent required
 when `requireTerms`. The validator returns a `kind`, and the message is composed at render time,
 so **changing the language repaints the errors**. The "do not shout at an untouched field" gate
-lives in the presentation, so the submit button's disabled state tells the truth from the start;
-submitting marks the whole form as touched.
+lives in the presentation. The submit button is **not** disabled while the form is invalid:
+submitting marks the whole form as touched and shows what is missing (WCAG 3.3.1), and `onSignIn` /
+`onSignUp` / `onResetPassword` fire only for a valid form.
 
 ## The heading takes focus after a mode change
 Without it a screen reader never announces the change, and focus stays on a button that has just

package/dist/autocomplete/autocomplete.d.ts

@@ -20,4 +20,4 @@ export interface KptAutocompleteProps extends Omit<ComponentPropsWithRef<'input'
  * @example
  * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto…" />
  */
-export declare function KptAutocomplete({ options, value, defaultValue, onValueChange, invalid, touched, onTouch, disabled, className, onBlur, onFocus, onKeyDown, ref, id, 'aria-describedby': ariaDescribedBy, locale, dictionary, ...rest }: Readonly<KptAutocompleteProps>): import("react").JSX.Element;
+export declare function KptAutocomplete({ options, value, defaultValue, onValueChange, invalid, touched, onTouch, disabled, readOnly, className, onBlur, onFocus, onKeyDown, ref, id, 'aria-describedby': ariaDescribedBy, locale, dictionary, ...rest }: Readonly<KptAutocompleteProps>): import("react").JSX.Element;

package/dist/autocomplete/autocomplete.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { cn } from "../internal/cn.js";
@@ -18,10 +19,13 @@ import { useKptMessages } from "../i18n/i18n-context.js";
  * @example
  * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto…" />
  */
-export function KptAutocomplete({ options = [], value, defaultValue = '', onValueChange, invalid = false, touched, onTouch, disabled = false, className, onBlur, onFocus, onKeyDown, ref, id, 'aria-describedby': ariaDescribedBy, locale, dictionary, ...rest }) {
+export function KptAutocomplete({ options = [], value, defaultValue = '', onValueChange, invalid = false, touched, onTouch, disabled = false, readOnly = false, className, onBlur, onFocus, onKeyDown, ref, id, 'aria-describedby': ariaDescribedBy, locale, dictionary, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const field = useKptFieldA11y(id, 'kpt-autocomplete');
     const inputRef = useRef(null);
+    /** Kotwica nakładki w stanie (callback ref), nie `inputRef.current` czytane w renderze. */
+    const [anchor, setAnchor] = useState(null);
+    const setRefs = useMemo(() => composeRefs(inputRef, ref, setAnchor), [ref]);
     const [current, setCurrent] = useControllableState({
         value,
         defaultValue,
@@ -55,6 +59,9 @@ export function KptAutocomplete({ options = [], value, defaultValue = '', onValu
     }, [setCurrent]);
     const handleKeyDown = (event) => {
         onKeyDown?.(event);
+        // Tylko do odczytu: podpowiedzi się nie otwierają, a Escape nie czyści wartości.
+        if (readOnly)
+            return;
         if (event.key === 'ArrowDown') {
             event.preventDefault();
             setOpen(true);
@@ -86,20 +93,21 @@ export function KptAutocomplete({ options = [], value, defaultValue = '', onValu
             }
         }
     };
-    return (_jsxs("span", { className: "kpt-autocomplete-host", children: [_jsx("input", { ref: composeRefs(inputRef, ref), className: cn('kpt-autocomplete__input', className), type: "text", id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), role: "combobox", "aria-autocomplete": "list", autoComplete: "off", "aria-expanded": panelOpen, "aria-controls": panelOpen ? listId : undefined, "aria-activedescendant": activeOptionId, "aria-invalid": showInvalid || undefined, disabled: disabled, value: current, onChange: (event) => {
+    return (_jsxs("span", { className: "kpt-autocomplete-host", children: [_jsx("input", { ref: setRefs, className: cn('kpt-autocomplete__input', className), type: "text", id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), role: "combobox", "aria-autocomplete": "list", autoComplete: "off", "aria-expanded": panelOpen, "aria-controls": panelOpen ? listId : undefined, "aria-activedescendant": activeOptionId, "aria-invalid": showInvalid || undefined, "aria-readonly": readOnly || undefined, disabled: disabled, readOnly: readOnly, value: current, onChange: (event) => {
                     setCurrent(event.target.value);
                     setOpen(true);
                     setTyped(true);
                     setActiveIndex(-1);
                 }, onFocus: (event) => {
                     onFocus?.(event);
-                    setOpen(true);
+                    if (!readOnly)
+                        setOpen(true);
                 }, onBlur: (event) => {
                     onBlur?.(event);
                     setOpen(false);
                     setTyped(false);
                     onTouch?.();
-                }, onKeyDown: handleKeyDown, ...rest }), _jsx(KptOverlay, { open: panelOpen, anchor: inputRef.current, onClose: () => setOpen(false), matchAnchorWidth: true, withBackdrop: false, children: _jsx("ul", { className: "kpt-autocomplete__panel", role: "listbox", id: listId, "aria-label": rest['aria-label'], children: filtered.map((option, index) => (_jsx("li", { id: optionId(index), className: cn('kpt-autocomplete__option', index === activeIndex && 'is-active'), role: "option", "aria-selected": index === activeIndex, 
+                }, onKeyDown: handleKeyDown, ...rest }), _jsx(KptOverlay, { open: panelOpen, anchor: anchor, onClose: () => setOpen(false), matchAnchorWidth: true, withBackdrop: false, children: _jsx("ul", { className: "kpt-autocomplete__panel", role: "listbox", id: listId, "aria-label": rest['aria-label'], children: filtered.map((option, index) => (_jsx("li", { id: optionId(index), className: cn('kpt-autocomplete__option', index === activeIndex && 'is-active'), role: "option", "aria-selected": index === activeIndex, 
                         // `mousedown` z zablokowanym domyślnym zachowaniem: klik w opcję nie może
                         // zabrać fokusu polu, bo `blur` zamknąłby panel przed wyborem.
                         onMouseDown: (event) => {

package/dist/autocomplete/llms.txt

@@ -54,3 +54,6 @@ added to `aria-describedby` (merged with your own). Without a wrapper, name it w
 ## Accessibility
 The input is `role="combobox"` with `aria-expanded`; the panel is `role="listbox"` with
 `role="option"` rows carrying `aria-selected`.
+
+## Read-only and required
+`readOnly` is the native read-only field with `aria-readonly`; the suggestions do not open and Escape does not clear the value.

package/dist/avatar/avatar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { cn } from "../internal/cn.js";

package/dist/avatar-group/avatar-group.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";

package/dist/backdrop/backdrop.d.ts

@@ -57,23 +57,4 @@ export interface KptBackdropProps extends ComponentPropsWithRef<'div'> {
     /** Propsy warstwy z treścią (`.kpt-backdrop__content`). */
     contentProps?: ComponentPropsWithRef<'div'>;
 }
-/**
- * Dekoracyjna warstwa tła dla sekcji: komponent obejmuje treść i maluje pod nią animowany canvas.
- * Sięga się po niego tam, gdzie płaska powierzchnia wygląda na niedokończoną, a wideo albo duży
- * obraz kosztowałyby transfer i nie poszłyby za motywem.
- *
- * Komponent jest opakowaniem: canvas leży pod spodem, a dzieci idą warstwę wyżej i zachowują się
- * zwyczajnie. Rysowanie stoi, gdy nie ma czego oglądać — sekcja poza ekranem, karta w tle,
- * `paused`, `speed` równe zeru albo ograniczony ruch w systemie; wtedy zostaje jedna statyczna
- * klatka zamiast pustki, bo efekt jest częścią kompozycji, nie ozdobą.
- *
- * Rysowanie i cała matematyka siedzą w `@konce-pt/backdrop`, wspólnym z portem Angulara —
- * ten komponent to sam cykl życia.
- *
- * @example
- * <KptBackdrop effect="wave" rotation={18} colors={['#5b8af2', '#a86df2', '#f25b9e']}>
- *   <h1>Build your app from the first prompt</h1>
- *   <KptButton>Get started</KptButton>
- * </KptBackdrop>
- */
 export declare function KptBackdrop({ effect, background, speed, seed, paused, adaptive, color, anchor, cell, gap, density, falloff, colors, rotation, band, amplitude, contentProps, className, style, children, ...rest }: Readonly<KptBackdropProps>): import("react").JSX.Element;

package/dist/backdrop/backdrop.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { KPT_BACKDROP_MAX_DPR, KPT_BACKDROP_MAX_STEP, KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF, KPT_SIGNAL_GRID_GAP, KPT_WAVE_AMPLITUDE, KPT_WAVE_BAND, KPT_WAVE_ROTATION, adaptBackdropValue, createBackdropRenderer, observeBackdropTheme, readBackdropInk, readBackdropLead, readBackdropSurface, resolveBackdropColors, } from '@konce-pt/backdrop';
 import { cn } from "../internal/cn.js";
 import { isDevBuild } from "../internal/dev.js";
@@ -23,6 +24,18 @@ const EMPTY = [];
  *   <KptButton>Get started</KptButton>
  * </KptBackdrop>
  */
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+/** `prefers-reduced-motion` jako zewnętrzny magazyn — bez `setState` w efekcie i bez mignięcia ruchu. */
+function subscribeReducedMotion(onChange) {
+    if (typeof matchMedia === 'undefined')
+        return () => undefined;
+    const query = matchMedia(REDUCED_MOTION);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+}
+function readReducedMotion() {
+    return typeof matchMedia !== 'undefined' && matchMedia(REDUCED_MOTION).matches;
+}
 export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1, seed = 0, paused = false, adaptive = false, color = '', anchor = 'right', cell = KPT_SIGNAL_GRID_CELL, gap = KPT_SIGNAL_GRID_GAP, density = KPT_SIGNAL_GRID_DENSITY, falloff = KPT_SIGNAL_GRID_FALLOFF, colors = EMPTY, rotation = KPT_WAVE_ROTATION, band = KPT_WAVE_BAND, amplitude = KPT_WAVE_AMPLITUDE, contentProps, className, style, children, ...rest }) {
     const host = useRef(null);
     const canvas = useRef(null);
@@ -42,10 +55,8 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
      * i wtedy treść zostaje przy `--kpt-color-on-surface` ze stylu.
      */
     const [ink, setInk] = useState({ tone: '', color: '' });
-    const rate = useRef(speed);
-    rate.current = speed;
     const [onScreen, setOnScreen] = useState(true);
-    const [reduced, setReduced] = useState(false);
+    const reduced = useSyncExternalStore(subscribeReducedMotion, readReducedMotion, () => false);
     /** Licznik zmian motywu; podbicie każe przeliczyć kolory z tokenów na nowo. */
     const [theme, setTheme] = useState(0);
     const paint = useCallback(() => {
@@ -146,13 +157,6 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
             document.removeEventListener('visibilitychange', onTabSwitch);
         };
     }, []);
-    useEffect(() => {
-        const query = matchMedia('(prefers-reduced-motion: reduce)');
-        setReduced(query.matches);
-        const onChange = (event) => setReduced(event.matches);
-        query.addEventListener('change', onChange);
-        return () => query.removeEventListener('change', onChange);
-    }, []);
     // Zmiana motywu przestawia tokeny, a kolory renderera są już wyliczone — trzeba je odczytać
     // na nowo. Nasłuch trafia też w zmiany niezwiązane z barwą, więc licznik podbija się dopiero
     // wtedy, gdy odczyt naprawdę dał inny kolor.
@@ -180,8 +184,9 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
         const tick = (now) => {
             const step = last === 0 ? 0 : Math.min(now - last, KPT_BACKDROP_MAX_STEP);
             last = now;
-            // Prędkość wchodzi w zegar, nie w fazę — suwak przyspiesza obraz zamiast go przeskakiwać.
-            clock.current += (step / 1000) * rate.current;
+            // Prędkość wchodzi w zegar, nie w fazę — suwak przyspiesza obraz zamiast go przeskakiwać. Pętla
+            // restartuje się przy zmianie `speed` (zależność efektu), a zegar żyje w refie, więc nic nie skacze.
+            clock.current += (step / 1000) * speed;
             paint();
             frame = requestAnimationFrame(tick);
         };

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

@@ -4,6 +4,11 @@ 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;
 }
@@ -18,4 +23,4 @@ export interface KptBottomSheetProps extends ComponentPropsWithRef<'div'>, KptI1
  * @example
  * <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";
@@ -15,13 +16,13 @@ import { useKptMessages } from "../i18n/i18n-context.js";
  * @example
  * <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

@@ -47,3 +47,6 @@ The panel `--kpt-color-surface-raised`, the top radius `--kpt-radius-lg`, `--kpt
 ## 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.
+
+## 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,6 +7,11 @@ 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).
@@ -16,4 +22,4 @@ export interface KptBreadcrumbProps extends Omit<ComponentPropsWithRef<'div'>, '
  * @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,4 +1,6 @@
+'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";
@@ -11,10 +13,16 @@ import { KptIcon } from "../icon/icon.js";
  * @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/⌘/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" })] }, item.url ?? `${index}-${item.label}`));
                 }) }) }) }));
 }

package/dist/breadcrumb/llms.txt

@@ -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/⌘/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.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";
@@ -50,7 +51,7 @@ function renderInner(args) {
             // 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 }));
+            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 }));
 }