@konce-pt/react 0.11.2 → 0.14.0

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";
@@ -16,11 +17,11 @@ const ICONS = {
  * go. `visible`/`onVisibleChange` pozwalają pokazać go ponownie z zewnątrz.
  *
  * Rola idzie za wagą komunikatu: `info` i `success` to `role="status"` (czytnik ogłosi je uprzejmie,
- * nie przerywając), `warning` i `danger` — `role="alert"` (natychmiast).
+ * nie przerywając), `warning` i `danger` - `role="alert"` (natychmiast).
  *
  * @example
  * <KptAlert variant="success" title="Zapisano">Zmiany zostały zapisane.</KptAlert>
- * <KptAlert variant="warning" dismissible onClosed={onClosed}>Uwaga…</KptAlert>
+ * <KptAlert variant="warning" dismissible onClosed={onClosed}>Uwaga...</KptAlert>
  */
 export function KptAlert({ variant = 'info', title = '', dismissible = false, onClosed, visible, defaultVisible = true, onVisibleChange, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });

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,5 +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.
+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

@@ -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";
@@ -14,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>
@@ -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);
@@ -73,19 +80,19 @@ 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 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,9 +106,9 @@ 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. */
+/** Dostęp do stanu shella. Poza `KptAppShell` rzuca - to zawsze błąd użycia. */
 export function useKptAppShell() {
     const context = useContext(KptAppShellContext);
     if (!context)
@@ -110,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
@@ -130,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">
-        <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>
+        <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,
@@ -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>`
-  itself); closing it returns focus to where it came from — usually the menu button — unless the user
+- 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-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

@@ -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";
@@ -27,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`.
  *
@@ -57,16 +59,16 @@ export function KptAuth({ mode, defaultMode = 'signIn', onModeChange, layout = '
         resetEmail: `${uid}-reset-email`,
     };
     const headingRef = useRef(null);
-    // ── Sloty ──
+    // -- 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 ──
+    }
+    // -- Modele formularzy --
     const [signInModel, setSignInModel] = useState({
         email: '',
         password: '',
@@ -83,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 = {
@@ -100,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,
     };
@@ -124,8 +126,9 @@ 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
-        // pokazałyby błędu i przycisk wyglądałby na zepsuty.
+        // 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) => {
             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

@@ -4,35 +4,36 @@ 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,
 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

@@ -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, 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;