@konce-pt/react 0.12.0 → 0.15.0

package/dist/alert/llms.txt

@@ -6,22 +6,22 @@ Import: `import { KptAlert } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-alert-host">
       <div class="kpt-alert" data-variant="success" role="status">
-        <span class="kpt-icon-host kpt-alert__icon">…</span>
+        <span class="kpt-icon-host kpt-alert__icon">...</span>
         <div class="kpt-alert__content">
           <div class="kpt-alert__title">Saved</div>
-          <div class="kpt-alert__message">…children…</div>
+          <div class="kpt-alert__message">...children...</div>
         </div>
-        <button class="kpt-alert__close" type="button" aria-label="Close">…</button>
+        <button class="kpt-alert__close" type="button" aria-label="Close">...</button>
       </div>
     </div>
 
 ## Props
 - `variant`: 'info' | 'success' | 'warning' | 'danger' (default 'info')
 - `title`: string
-- `dismissible`: boolean — adds the close button
-- `visible` / `defaultVisible` / `onVisibleChange` — controlled or uncontrolled visibility
-- `onClosed()` — fires after the user dismisses it
-- `locale`, `dictionary` — i18n overrides for this component only
+- `dismissible`: boolean - adds the close button
+- `visible` / `defaultVisible` / `onVisibleChange` - controlled or uncontrolled visibility
+- `onClosed()` - fires after the user dismisses it
+- `locale`, `dictionary` - i18n overrides for this component only
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## Dismissal hides, it does not unmount
@@ -43,6 +43,6 @@ The semantic colour pairs of each variant (`--kpt-color-info` / `-success` / `-w
 ## Accessibility
 The role follows the weight of the message: `info` and `success` are `role="status"` (read
 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.
+is decorative; the x 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.d.ts

@@ -3,13 +3,13 @@ import { type KptBreakpoint } from '../internal/use-breakpoint.ts';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 /**
  * Zachowanie panelu bocznego:
- * - `auto` — zależne od szerokości okna (domyślne),
- * - `side` — zawsze zadokowany, rozpycha treść,
- * - `over` — zawsze nakładka nad treścią.
+ * - `auto` - zależne od szerokości okna (domyślne),
+ * - `side` - zawsze zadokowany, rozpycha treść,
+ * - `over` - zawsze nakładka nad treścią.
  */
 export type KptSidenavMode = 'side' | 'over' | 'auto';
 export interface KptAppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, KptI18nOverrides {
-    /** Slot górnego paska — renderowany nad obszarem treści (zwykle `<KptToolbar>`). */
+    /** Slot górnego paska - renderowany nad obszarem treści (zwykle `<KptToolbar>`). */
     toolbar?: ReactNode;
     /** Slot panelu bocznego (zwykle `<KptSidenav>`). */
     sidenav?: ReactNode;
@@ -41,9 +41,9 @@ export interface KptAppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'ch
     /** Etykieta dostępności panelu; puste = `appShell.navigation` ze słownika. */
     sidenavLabel?: string;
 }
-/** Kontrakt kontekstu shella — czytany przez `useKptAppShell()` i przełącznik panelu. */
+/** Kontrakt kontekstu shella - czytany przez `useKptAppShell()` i przełącznik panelu. */
 export interface KptAppShellContextValue {
-    /** Efektywny stan otwarcia — ten, który obowiązuje w bieżącym układzie. */
+    /** Efektywny stan otwarcia - ten, który obowiązuje w bieżącym układzie. */
     isSidenavOpen: boolean;
     /** Czy panel zachowuje się TERAZ jak nakładka nad treścią. */
     isOverlay: boolean;
@@ -59,23 +59,23 @@ export interface KptAppShellContextValue {
  * Domyślny tryb `auto` jest responsywny bez konfiguracji: od `sidenavBreakpoint` w górę panel
  * jest zadokowany, poniżej zachowuje się jak nakładka ze scrimem i startuje zamknięty.
  *
- * O układzie decyduje wyłącznie CSS — nic nie migocze przed hydracją i nic nie zależy od
+ * O układzie decyduje wyłącznie CSS - nic nie migocze przed hydracją i nic nie zależy od
  * `matchMedia`. JavaScript odpowiada tylko za to, KTÓRY stan przełącza przycisk.
  *
  * @example
  * <KptAppShell
- *   toolbar={<KptToolbar>…</KptToolbar>}
- *   sidenav={<KptSidenav>…</KptSidenav>}
+ *   toolbar={<KptToolbar>...</KptToolbar>}
+ *   sidenav={<KptSidenav>...</KptSidenav>}
  * >
  *   <Routes />
  * </KptAppShell>
  */
 export declare function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSidenavOpen, onSidenavOpenChange, sidenavCompactOpen, defaultSidenavCompactOpen, onSidenavCompactOpenChange, sidenavMode, sidenavBreakpoint, sidenavRailBreakpoint, sidenavLabel, locale, dictionary, className, ...rest }: Readonly<KptAppShellProps>): import("react").JSX.Element;
-/** Dostęp do stanu shella. Poza `KptAppShell` rzuca — to zawsze błąd użycia. */
+/** Dostęp do stanu shella. Poza `KptAppShell` rzuca - to zawsze błąd użycia. */
 export declare function useKptAppShell(): KptAppShellContextValue;
 /**
  * Propsy przycisku przełączającego panel boczny. Rozłóż je na natywnym `<button>`
- * (albo na `<KptButton>`, który przekazuje je do swojego wewnętrznego `<button>`) —
+ * (albo na `<KptButton>`, który przekazuje je do swojego wewnętrznego `<button>`) -
  * atrybuty ARIA muszą wylądować na elemencie z rolą, nie na opakowaniu.
  *
  * Trafia w stan właściwy dla bieżącego układu, więc jeden przycisk obsługuje desktop
@@ -93,11 +93,11 @@ export declare function useKptShellNavToggle(options?: {
     readonly onClick: () => void;
 };
 /**
- * Etykieta pozycji nawigacji. W szynie ikon (układ md–xl) shell chowa ją techniką
- * „visually hidden", więc pozycja zwęża się do samego znaku, a czytnik ekranu wciąż
+ * Etykieta pozycji nawigacji. W szynie ikon (układ md-xl) shell chowa ją techniką
+ * "visually hidden", więc pozycja zwęża się do samego znaku, a czytnik ekranu wciąż
  * odczytuje pełny tekst.
  *
- * Nosi atrybut `kptnavlabel` — to po nim celuje wspólny SCSS. Nazwy atrybutów w selektorach
+ * Nosi atrybut `kptnavlabel` - to po nim celuje wspólny SCSS. Nazwy atrybutów w selektorach
  * CSS są w HTML case-insensitive, więc jedna reguła obsługuje oba porty; zapis małymi literami
  * omija przy okazji ostrzeżenie React o nieznanym propie.
  *

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

@@ -15,13 +15,13 @@ const KptAppShellContext = createContext(null);
  * Domyślny tryb `auto` jest responsywny bez konfiguracji: od `sidenavBreakpoint` w górę panel
  * jest zadokowany, poniżej zachowuje się jak nakładka ze scrimem i startuje zamknięty.
  *
- * O układzie decyduje wyłącznie CSS — nic nie migocze przed hydracją i nic nie zależy od
+ * O układzie decyduje wyłącznie CSS - nic nie migocze przed hydracją i nic nie zależy od
  * `matchMedia`. JavaScript odpowiada tylko za to, KTÓRY stan przełącza przycisk.
  *
  * @example
  * <KptAppShell
- *   toolbar={<KptToolbar>…</KptToolbar>}
- *   sidenav={<KptSidenav>…</KptSidenav>}
+ *   toolbar={<KptToolbar>...</KptToolbar>}
+ *   sidenav={<KptSidenav>...</KptSidenav>}
  * >
  *   <Routes />
  * </KptAppShell>
@@ -59,7 +59,7 @@ 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
+        // 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' || event.defaultPrevented)
@@ -80,11 +80,11 @@ export function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSi
         openSidenav: () => setSidenavOpen(true),
         closeSidenav,
     }), [isSidenavOpen, isOverlay, sidenavId, setSidenavOpen, closeSidenav]);
-    // Scrim blokuje wskaźnik, ale nie klawiaturę — treść pod nakładką nie może łapać fokusu.
+    // Scrim blokuje wskaźnik, ale nie klawiaturę - treść pod nakładką nie może łapać fokusu.
     const contentInert = isOverlay && isSidenavOpen;
     // Otwarta nakładka robi treść `inert`, więc fokus zostawiony w niej (albo na przycisku menu)
     // 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
+    // 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 navRef = useRef(null);
     const overlayWasOpen = useRef(null);
@@ -108,7 +108,7 @@ export function KptAppShell({ toolbar, sidenav, children, sidenavOpen, defaultSi
     }, [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("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. */
+/** Dostęp do stanu shella. Poza `KptAppShell` rzuca - to zawsze błąd użycia. */
 export function useKptAppShell() {
     const context = useContext(KptAppShellContext);
     if (!context)
@@ -117,7 +117,7 @@ export function useKptAppShell() {
 }
 /**
  * Propsy przycisku przełączającego panel boczny. Rozłóż je na natywnym `<button>`
- * (albo na `<KptButton>`, który przekazuje je do swojego wewnętrznego `<button>`) —
+ * (albo na `<KptButton>`, który przekazuje je do swojego wewnętrznego `<button>`) -
  * atrybuty ARIA muszą wylądować na elemencie z rolą, nie na opakowaniu.
  *
  * Trafia w stan właściwy dla bieżącego układu, więc jeden przycisk obsługuje desktop
@@ -137,11 +137,11 @@ export function useKptShellNavToggle(options) {
     };
 }
 /**
- * Etykieta pozycji nawigacji. W szynie ikon (układ md–xl) shell chowa ją techniką
- * „visually hidden", więc pozycja zwęża się do samego znaku, a czytnik ekranu wciąż
+ * Etykieta pozycji nawigacji. W szynie ikon (układ md-xl) shell chowa ją techniką
+ * "visually hidden", więc pozycja zwęża się do samego znaku, a czytnik ekranu wciąż
  * odczytuje pełny tekst.
  *
- * Nosi atrybut `kptnavlabel` — to po nim celuje wspólny SCSS. Nazwy atrybutów w selektorach
+ * Nosi atrybut `kptnavlabel` - to po nim celuje wspólny SCSS. Nazwy atrybutów w selektorach
  * CSS są w HTML case-insensitive, więc jedna reguła obsługuje oba porty; zapis małymi literami
  * omija przy okazji ostrzeżenie React o nieznanym propie.
  *

package/dist/app-shell/llms.txt

@@ -6,27 +6,27 @@ Import: `import { KptAppShell, useKptShellNavToggle } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-app-shell kpt-app-shell--nav-open"
          data-sidenav-mode="auto" data-sidenav-breakpoint="lg">
-      …toolbar…
+      ...toolbar...
       <div class="kpt-app-shell__body">
-        <nav class="kpt-app-shell__sidenav" tabindex="-1" id="…">…sidenav…</nav>
+        <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>
+        <main class="kpt-app-shell__content">...children...</main>
       </div>
     </div>
 
 ## Props
-- `toolbar`: ReactNode — the slot above the content area (usually `<KptToolbar>`)
-- `sidenav`: ReactNode — the side panel slot (usually `<KptSidenav>`)
-- `children`: ReactNode — the application content
-- `sidenavOpen` / `defaultSidenavOpen` / `onSidenavOpenChange` — the docked layout's open state
+- `toolbar`: ReactNode - the slot above the content area (usually `<KptToolbar>`)
+- `sidenav`: ReactNode - the side panel slot (usually `<KptSidenav>`)
+- `children`: ReactNode - the application content
+- `sidenavOpen` / `defaultSidenavOpen` / `onSidenavOpenChange` - the docked layout's open state
   (default open)
-- `sidenavCompactOpen` / `defaultSidenavCompactOpen` / `onSidenavCompactOpenChange` — the overlay's
+- `sidenavCompactOpen` / `defaultSidenavCompactOpen` / `onSidenavCompactOpenChange` - the overlay's
   open state (default closed)
 - `sidenavMode`: 'auto' | 'side' | 'over' (default 'auto')
 - `sidenavBreakpoint`: 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default 'lg')
 - `sidenavRailBreakpoint`: the same union or null (default null)
-- `sidenavLabel`: string — empty falls back to `appShell.navigation` from the dictionary
-- `locale`, `dictionary` — i18n overrides for this component only
+- `sidenavLabel`: string - empty falls back to `appShell.navigation` from the dictionary
+- `locale`, `dictionary` - i18n overrides for this component only
 
 ## Two open states, on purpose
 The docked layout and the overlay keep separate state. If they shared one, narrowing the window
@@ -38,7 +38,7 @@ would have to overwrite the consumer's state, and widening it back would have no
     <KptButton variant="text" {...toggle}>Menu</KptButton>
 
 It returns `aria-expanded`, `aria-controls`, `aria-label` and `onClick`. Spread them on a native
-`<button>` or on `<KptButton>` (which forwards them to its inner `<button>`) — ARIA attributes must
+`<button>` or on `<KptButton>` (which forwards them to its inner `<button>`) - ARIA attributes must
 land on the element that carries the role, never on a wrapper.
 
 `useKptAppShell()` exposes the same state directly: `{ isSidenavOpen, isOverlay, sidenavId,
@@ -56,8 +56,8 @@ decides WHICH state the button flips. The scrim is always in the DOM; CSS contro
 ## Accessibility
 - 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 — unless something
+- 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
+  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-types.d.ts

@@ -1,9 +1,9 @@
-/** Tryb ekranu — logowanie, rejestracja, odzyskiwanie hasła. */
+/** Tryb ekranu - logowanie, rejestracja, odzyskiwanie hasła. */
 export type KptAuthMode = 'signIn' | 'signUp' | 'forgot';
 /**
  * Układ ekranu:
- * - `slider` — panel promo przesuwa się nad formularzami przy zmianie trybu,
- * - `split` — panel promo stoi w miejscu, zmienia się tylko formularz.
+ * - `slider` - panel promo przesuwa się nad formularzami przy zmianie trybu,
+ * - `split` - panel promo stoi w miejscu, zmienia się tylko formularz.
  */
 export type KptAuthLayout = 'slider' | 'split';
 /** Układ przycisków dostawców: pełnowymiarowa lista albo siatka ikon z podpisami. */
@@ -12,13 +12,13 @@ export type KptAuthProviderLayout = 'list' | 'grid';
 export interface KptAuthProvider {
     /** Identyfikator zwracany w `onProviderSelect`. */
     id: string;
-    /** Widoczna etykieta — jednocześnie nazwa dostępna przycisku. */
+    /** Widoczna etykieta - jednocześnie nazwa dostępna przycisku. */
     label: string;
     /** Nazwa ikony z rejestru `KptIcon` (np. `brand-google` z pełnego zestawu Tabler). */
     icon?: string;
     /** Alternatywa dla `icon`: adres obrazka (wierne, wielokolorowe logo marki). */
     iconUrl?: string;
-    /** Drugi wiersz opisu — tylko w układzie `list`. */
+    /** Drugi wiersz opisu - tylko w układzie `list`. */
     description?: string;
 }
 /** Wartość formularza logowania. */
@@ -38,7 +38,7 @@ export interface KptAuthSignUpValue {
 export interface KptAuthResetValue {
     email: string;
 }
-/** Rodzaj błędu pola — komunikat składamy z niego dopiero przy renderowaniu. */
+/** Rodzaj błędu pola - komunikat składamy z niego dopiero przy renderowaniu. */
 export type KptAuthErrorKind = 'required' | 'email' | 'minLength' | 'mismatch';
 /** Minimalna długość hasła w rejestracji. */
 export declare const KPT_AUTH_MIN_PASSWORD = 8;

package/dist/auth/auth.d.ts

@@ -15,7 +15,7 @@ export interface KptAuthProps extends Omit<ComponentPropsWithRef<'div'>, 'onSubm
     showName?: boolean;
     requireTerms?: boolean;
     showRemember?: boolean;
-    /** Operacja w toku — przyciski w stanie ładowania, dostawcy zablokowani. */
+    /** Operacja w toku - przyciski w stanie ładowania, dostawcy zablokowani. */
     busy?: boolean;
     error?: string | null;
     notice?: string | null;
@@ -36,7 +36,7 @@ export interface KptAuthProps extends Omit<ComponentPropsWithRef<'div'>, 'onSubm
  * Ekran uwierzytelniania: logowanie, rejestracja i odzyskiwanie hasła w jednym komponencie,
  * z panelem promocyjnym i listą dostawców zewnętrznych.
  *
- * Komponent jest prezentacyjny — nie woła API ani nie nawiguje. Wywołania backendu podpina
+ * Komponent jest prezentacyjny - nie woła API ani nie nawiguje. Wywołania backendu podpina
  * aplikacja pod `onSignIn` / `onSignUp` / `onResetPassword` / `onProviderSelect`, a stan
  * operacji podaje z powrotem przez `busy`, `error` i `notice`.
  *

package/dist/auth/auth.js

@@ -29,7 +29,7 @@ const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  * Ekran uwierzytelniania: logowanie, rejestracja i odzyskiwanie hasła w jednym komponencie,
  * z panelem promocyjnym i listą dostawców zewnętrznych.
  *
- * Komponent jest prezentacyjny — nie woła API ani nie nawiguje. Wywołania backendu podpina
+ * Komponent jest prezentacyjny - nie woła API ani nie nawiguje. Wywołania backendu podpina
  * aplikacja pod `onSignIn` / `onSignUp` / `onResetPassword` / `onProviderSelect`, a stan
  * operacji podaje z powrotem przez `busy`, `error` i `notice`.
  *
@@ -59,7 +59,7 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
         resetEmail: `${uid}-reset-email`,
     };
     const headingRef = useRef(null);
-    // ── Sloty ──
+    // -- Sloty --
     const slots = {};
     for (const child of slotChildren(children)) {
         if (!isValidElement(child))
@@ -68,7 +68,7 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
         if (name)
             slots[name] = child.props.children;
     }
-    // ── Modele formularzy ──
+    // -- Modele formularzy --
     const [signInModel, setSignInModel] = useState({
         email: '',
         password: '',
@@ -85,9 +85,9 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
     const [touched, setTouched] = useState(new Set());
     const touch = (field) => setTouched((prev) => new Set(prev).add(field));
     /*
-     * Walidacja jest bezwarunkowa i zwraca sam `kind` — komunikat składamy dopiero przy
+     * Walidacja jest bezwarunkowa i zwraca sam `kind` - komunikat składamy dopiero przy
      * renderowaniu, dzięki czemu zmiana języka w runtime przerysowuje błędy. Bramka
-     * „nie strasz czerwienią świeżego pola" (`touched`) żyje w prezentacji, nie w walidatorze,
+     * "nie strasz czerwienią świeżego pola" (`touched`) żyje w prezentacji, nie w walidatorze,
      * więc `invalid` mówi prawdę także wtedy, gdy pola nikt jeszcze nie dotknął.
      */
     const signInErrors = {
@@ -102,7 +102,7 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
             : signUpModel.password.length < KPT_AUTH_MIN_PASSWORD
                 ? 'minLength'
                 : null,
-        // Puste „powtórz hasło" nie jest jeszcze niezgodnością — dopiero wpisana, inna wartość.
+        // Puste "powtórz hasło" nie jest jeszcze niezgodnością - dopiero wpisana, inna wartość.
         confirm: signUpModel.confirm && signUpModel.confirm !== signUpModel.password ? 'mismatch' : null,
         terms: requireTerms && !signUpModel.terms ? 'required' : null,
     };
@@ -126,7 +126,7 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
     const errorFor = (form, field, kinds) => touched.has(`${form}.${field}`) ? message(kinds[field] ?? null) : null;
     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
+        // Submit dotyka całego formularza - inaczej pola, których użytkownik nie ruszył, nie
         // 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) => {

package/dist/auth/llms.txt

@@ -4,27 +4,27 @@ An authentication screen: sign in, sign up and password recovery in one componen
 panel and a list of external providers.
 Import: `import { KptAuth, type KptAuthProvider } from '@konce-pt/react';`
 
-The component is **presentational** — it calls no API and does not navigate; the app does that in
+The component is **presentational** - it calls no API and does not navigate; the app does that in
 the handlers.
 
 ## Props
-- `mode` / `defaultMode` / `onModeChange` — `'signIn' | 'signUp' | 'forgot'`
-- `layout`: `'slider'` (default) | `'split'` — the promo panel slides to the other side, or stays put
-- `providers`: `KptAuthProvider[]` — `{ id, label, icon?, iconUrl?, description? }`
+- `mode` / `defaultMode` / `onModeChange` - `'signIn' | 'signUp' | 'forgot'`
+- `layout`: `'slider'` (default) | `'split'` - the promo panel slides to the other side, or stays put
+- `providers`: `KptAuthProvider[]` - `{ id, label, icon?, iconUrl?, description? }`
 - `providerLayout`: `'list'` (default) | `'grid'`
 - `showName`, `requireTerms`, `showRemember`: boolean (default true)
-- `busy`: boolean — the buttons show a loading state, providers are blocked
-- `error` / `notice`: string | null — a server message (a `danger` / `success` alert)
+- `busy`: boolean - the buttons show a loading state, providers are blocked
+- `error` / `notice`: string | null - a server message (a `danger` / `success` alert)
 - `promoTitle` / `promoText`: `null` = mode-dependent text from i18n, `''` = hidden
 - `animated` (true), `animationDuration` (320 ms)
 - `onSignIn`, `onSignUp`, `onResetPassword`, `onProviderSelect`
-- `renderProvider(provider, select)` — custom markup for one provider; return `null` for the rest
+- `renderProvider(provider, select)` - custom markup for one provider; return `null` for the rest
 
 ## Slots
-`KptAuth.Brand`, `KptAuth.Promo`, `KptAuth.Sso`, `KptAuth.Fields`, `KptAuth.Footer` — the
+`KptAuth.Brand`, `KptAuth.Promo`, `KptAuth.Sso`, `KptAuth.Fields`, `KptAuth.Footer` - the
 equivalents of the `[kptAuthBrand]`, `[kptAuthPromo]`, `[kptAuthSso]`, `[kptAuthFields]` and
 `[kptAuthFooter]` projections. **Fields from the `Fields` slot are not part of the component's
-model** — bind them to your own state and read them in the handler.
+model** - bind them to your own state and read them in the handler.
 
 ## Validation without a form library
 Three independent forms, one per mode, validated on every render: e-mail required and valid,

package/dist/autocomplete/autocomplete.d.ts

@@ -1,5 +1,7 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
+import type { KptSpeechMode } from '@konce-pt/speech';
+import { type KptSpeechColor } from '../speech/speech-button.tsx';
 export interface KptAutocompleteProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange'>, KptI18nOverrides {
     options?: readonly string[];
     value?: string;
@@ -8,16 +10,27 @@ export interface KptAutocompleteProps extends Omit<ComponentPropsWithRef<'input'
     invalid?: boolean;
     touched?: boolean;
     onTouch?: () => void;
+    /** Mikrofon w polu (Web Speech API). Bez wsparcia przeglądarki się nie pokazuje. */
+    speech?: boolean;
+    /** Język dyktowania (BCP 47); bez niego z `KptI18nProvider`. */
+    speechLang?: string;
+    /** Kolor "stop" i fali w trakcie nasłuchu; domyślnie kolor motywu. */
+    speechColor?: KptSpeechColor;
+    /**
+     * Domyślnie `replace`: podyktowana wartość zastępuje poprzednią, a nasłuch kończy się po jednej
+     * wypowiedzi - to pole wybiera jedną wartość, nie zbiera tekstu.
+     */
+    speechMode?: KptSpeechMode;
 }
 /**
- * Pole z podpowiedziami. Wartością jest wpisany tekst, nie wybrana opcja — podpowiedzi
+ * Pole z podpowiedziami. Wartością jest wpisany tekst, nie wybrana opcja - podpowiedzi
  * skracają pisanie, ale nie ograniczają wpisu, więc pole nadaje się też do wartości spoza listy.
  *
- * Wzorzec WAI-ARIA „combobox z listą”: fokus zostaje w polu, aktywną podpowiedź ogłasza
- * `aria-activedescendant`, a liczbę podpowiedzi (albo ich brak) — region `polite`. Dopasowanie
- * pomija wielkość liter i diakrytyki („lodz” znajduje „Łódź”).
+ * Wzorzec WAI-ARIA "combobox z listą": fokus zostaje w polu, aktywną podpowiedź ogłasza
+ * `aria-activedescendant`, a liczbę podpowiedzi (albo ich brak) - region `polite`. Dopasowanie
+ * pomija wielkość liter i diakrytyki ("lodz" znajduje "Łódź").
  *
  * @example
- * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto…" />
+ * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto..." />
  */
-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;
+export declare function KptAutocomplete({ options, value, defaultValue, onValueChange, invalid, touched, onTouch, disabled, readOnly, className, onBlur, onFocus, onKeyDown, ref, id, 'aria-describedby': ariaDescribedBy, locale, dictionary, speech, speechLang, speechColor, speechMode, ...rest }: Readonly<KptAutocompleteProps>): import("react").JSX.Element;

package/dist/autocomplete/autocomplete.js

@@ -8,24 +8,37 @@ import { useControllableState } from "../internal/use-controllable-state.js";
 import { foldMentionText } from '@konce-pt/mention';
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptSpeechButton } from "../speech/speech-button.js";
+import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 /**
- * Pole z podpowiedziami. Wartością jest wpisany tekst, nie wybrana opcja — podpowiedzi
+ * Pole z podpowiedziami. Wartością jest wpisany tekst, nie wybrana opcja - podpowiedzi
  * skracają pisanie, ale nie ograniczają wpisu, więc pole nadaje się też do wartości spoza listy.
  *
- * Wzorzec WAI-ARIA „combobox z listą”: fokus zostaje w polu, aktywną podpowiedź ogłasza
- * `aria-activedescendant`, a liczbę podpowiedzi (albo ich brak) — region `polite`. Dopasowanie
- * pomija wielkość liter i diakrytyki („lodz” znajduje „Łódź”).
+ * Wzorzec WAI-ARIA "combobox z listą": fokus zostaje w polu, aktywną podpowiedź ogłasza
+ * `aria-activedescendant`, a liczbę podpowiedzi (albo ich brak) - region `polite`. Dopasowanie
+ * pomija wielkość liter i diakrytyki ("lodz" znajduje "Łódź").
  *
  * @example
- * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto…" />
+ * <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="Miasto..." />
  */
-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 }) {
+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, speech = false, speechLang, speechColor, speechMode = 'replace', ...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]);
+    // Podyktowana wartość wchodzi przez `onChange` pola, więc lista otwiera się jak po wpisaniu;
+    // słowa tymczasowe nie filtrują - nie ma ich w stanie. Bez `speech` kontroler nie tworzy sesji.
+    const mic = useKptSpeechRecognition({
+        enabled: speech,
+        target: inputRef,
+        lang: speechLang,
+        mode: speechMode,
+        continuous: speechMode !== 'replace',
+        disabled: disabled || readOnly,
+    });
+    const speechState = speech && mic.available ? (mic.listening ? 'listening' : 'idle') : undefined;
     const [current, setCurrent] = useControllableState({
         value,
         defaultValue,
@@ -33,7 +46,7 @@ export function KptAutocomplete({ options = [], value, defaultValue = '', onValu
     });
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
-    /** Wpisano coś od ostatniego otwarcia — dopiero wtedy ogłaszamy liczbę podpowiedzi. */
+    /** Wpisano coś od ostatniego otwarcia - dopiero wtedy ogłaszamy liczbę podpowiedzi. */
     const [typed, setTyped] = useState(false);
     const showInvalid = invalid && (touched ?? true);
     const filtered = useMemo(() => {
@@ -70,7 +83,7 @@ export function KptAutocomplete({ options = [], value, defaultValue = '', onValu
         else if (event.key === 'ArrowUp') {
             event.preventDefault();
             setOpen(true);
-            // Z pola (bez aktywnej) `↑` idzie na ostatnią podpowiedź.
+            // Z pola (bez aktywnej) `ArrowUp` idzie na ostatnią podpowiedź.
             setActiveIndex((index) => (index <= 0 ? filtered.length - 1 : index - 1));
         }
         else if (event.key === 'Enter') {
@@ -93,7 +106,7 @@ export function KptAutocomplete({ options = [], value, defaultValue = '', onValu
             }
         }
     };
-    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) => {
+    return (_jsxs("span", { className: "kpt-autocomplete-host", "data-speech": speechState, 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);
@@ -107,7 +120,7 @@ export function KptAutocomplete({ options = [], value, defaultValue = '', onValu
                     setOpen(false);
                     setTyped(false);
                     onTouch?.();
-                }, 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, 
+                }, onKeyDown: handleKeyDown, ...rest }), speech ? (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: disabled || readOnly, hostProps: { className: 'kpt-autocomplete__speech' } })) : null, _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

@@ -12,14 +12,14 @@ A text field with suggestions. Import: `import { KptAutocomplete } from '@konce-
     </ul>
 
 ## Props
-- `options`: string[] — the suggestions
-- `value` / `defaultValue` / `onValueChange` — the typed text
+- `options`: string[] - the suggestions
+- `value` / `defaultValue` / `onValueChange` - the typed text
 - `invalid`, `touched`, `onTouch()`
 - `className`, `ref` and every other `<input>` prop go to the input
 
 ## The value is the text, not the option
 Whatever is typed becomes the value; the suggestions only shorten the typing. That makes the field
-usable for values outside the list — a city nobody put in `options` still submits. When the value
+usable for values outside the list - a city nobody put in `options` still submits. When the value
 must come from the list, reach for `KptSelect` instead.
 
 ## No backdrop
@@ -33,13 +33,13 @@ ArrowDown opens the list and moves the active option, ArrowUp moves back, Enter
 one, Escape closes.
 
 ## Examples
-    <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="City…" />
+    <KptAutocomplete options={cities} value={city} onValueChange={setCity} placeholder="City..." />
 
 ## Screen reader and keyboard
 The WAI-ARIA combobox-with-list pattern: focus stays in the field, `aria-autocomplete="list"`,
 `aria-controls` and `aria-activedescendant` point at the active suggestion, and a polite live region
 says how many suggestions there are (`autocomplete.results`) or that there are none
-(`autocomplete.noResults`). Matching ignores case and diacritics ("lodz" finds "Łódź"). `↑` from the
+(`autocomplete.noResults`). Matching ignores case and diacritics ("lodz" finds "Łódź"). `ArrowUp` from the
 field goes to the last suggestion; the first `Escape` closes the list, the second clears the field.
 
 ## Label and description
@@ -57,3 +57,14 @@ The input is `role="combobox"` with `aria-expanded`; the panel is `role="listbox
 
 ## 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.
+
+## Dictation
+- `speech`: boolean = false - a microphone at the end of the field (`KptSpeechButton`). Hidden without
+  browser support.
+- `speechLang`: string - BCP 47 tag; without it from `KptI18nProvider`.
+- `speechColor`: `'primary' | 'danger' | 'success' | 'warning' | 'info'` = `'primary'` - colour of "stop" and the wave while listening.
+- `speechMode`: `'insert' | 'append' | 'replace'` = `'replace'` - the field picks one value, so a click
+  clears it and one utterance replaces it; the suggestion list opens for the spoken text like for typed
+  text. Interim words are visible but do not filter the list - only final text reaches the state.
+
+    <KptAutocomplete options={cities} value={city} onValueChange={setCity} speech />

package/dist/avatar/avatar.d.ts

@@ -5,7 +5,7 @@ export type KptAvatarShape = 'circle' | 'square';
 export interface KptAvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
     /** Adres obrazu; ma pierwszeństwo przed inicjałami i ikoną. */
     src?: string | null;
-    /** Imię i nazwisko — źródło inicjałów, `title` oraz etykiety dostępności. */
+    /** Imię i nazwisko - źródło inicjałów, `title` oraz etykiety dostępności. */
     name?: string;
     /** Nazwa ikony z rejestru, gdy nie ma obrazu ani nazwy. */
     icon?: string | null;
@@ -15,17 +15,17 @@ export interface KptAvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'chi
     decorative?: boolean;
     /**
      * Propsy wrappera hosta (`.kpt-avatar-host`). To on jest elementem układu, więc klasy
-     * pozycjonujące awatar w rodzicu — jak `kpt-card__avatar` — idą właśnie tutaj.
+     * pozycjonujące awatar w rodzicu - jak `kpt-card__avatar` - idą właśnie tutaj.
      */
     hostProps?: KptHostProps<'span'>;
 }
 /**
- * Awatar — obraz, inicjały (z `name`) lub ikona.
+ * Awatar - obraz, inicjały (z `name`) lub ikona.
  *
- * `name` trafia do natywnego `title` (podpowiedź spod kursora — inicjały same w sobie nie mówią,
+ * `name` trafia do natywnego `title` (podpowiedź spod kursora - inicjały same w sobie nie mówią,
  * kto to jest). Bez `src` awatar dostaje dodatkowo `role="img"` i `aria-label`, a same inicjały
- * są `aria-hidden`, żeby czytnik nie przeczytał „AK" litera po literze. Przy `src` etykietę
- * niesie już `alt` obrazu — nie dublujemy jej.
+ * są `aria-hidden`, żeby czytnik nie przeczytał "AK" litera po literze. Przy `src` etykietę
+ * niesie już `alt` obrazu - nie dublujemy jej.
  *
  * @example
  * <KptAvatar src="/u/anna.jpg" />