@konce-pt/react 0.16.0 → 0.17.0

package/README.md

@@ -77,14 +77,14 @@ import '@konce-pt/grid';              // optional - only if you use the layout c
 bundle, which is why both ports render identically. The Angular package injects those styles at
 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`).
+Dark theme: set `<html data-theme="dark">`. It is not switched automatically - toggle the attribute yourself, e.g. from `matchMedia('(prefers-color-scheme: dark)')`.
 
 **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
+> `KptAutocomplete`, `KptDatepicker`...) portal into `document.body` through `KptOverlay`
+> (also exported for your own floating panels), so `@angular/cdk/overlay-prebuilt.css` is **not** needed - positioning lives in the
 > component, the look in `@konce-pt/styles/components`. Inside an open `KptDialog` those panels
 > portal into the `<dialog>` instead, because `showModal()` moves it to the browser top layer.
 
@@ -120,6 +120,7 @@ export function Login() {
           onValueChange={setEmail}
           onTouch={() => setTouched((t) => ({ ...t, email: true }))}
           invalid={Boolean(emailError)}
+          touched={touched.email}
         />
       </KptFormField>
 
@@ -131,6 +132,7 @@ export function Login() {
           onValueChange={setPassword}
           onTouch={() => setTouched((t) => ({ ...t, password: true }))}
           invalid={Boolean(passwordError)}
+          touched={touched.password}
         />
       </KptFormField>
 
@@ -141,7 +143,8 @@ export function Login() {
 ```
 
 `KptFormField` generates the control id and publishes it through context, so `label[for]` and
-`input[id]` match with no configuration. Drop `value`/`onValueChange` and the field becomes
+`input[id]` match with no configuration. `touched` gates the invalid state (`aria-invalid`, red border)
+until the field is blurred; leave it out and `invalid` shows right away. Drop `value`/`onValueChange` and the field becomes
 uncontrolled - the value lives in the DOM, and a native `<form action={...}>` or React Hook Form's
 `register()` picks it up as-is.
 
@@ -166,13 +169,13 @@ Data table with sorting, filtering, pagination and a custom cell:
 
 | Category | Components |
 | --- | --- |
-| **Forms** | `KptInput`, `KptTextarea`, `KptSelect`, `KptAutocomplete`, `KptCheckbox`, `KptSwitch`, `KptSwitchGroup`, `KptRadioGroup`, `KptSlider`, `KptRating`, `KptDatepicker`, `KptDateRange`, `KptClock`, `KptColorPicker`, `KptFileUpload`, `KptInputNumber`, `KptPassword`, `KptInputOtp`, `KptChipsInput`, `KptInputMask`, `KptListbox`, `KptKnob`, `KptRichText`, `KptFormField` |
+| **Forms** | `KptInput`, `KptTextarea`, `KptSelect`, `KptAutocomplete`, `KptCheckbox`, `KptSwitch`, `KptSwitchGroup`, `KptRadioGroup`, `KptSlider`, `KptRating`, `KptDatepicker`, `KptDateRange`, `KptClock`, `KptColorPicker`, `KptFileUpload`, `KptInputNumber`, `KptPassword`, `KptInputOtp`, `KptChipsInput`, `KptInputMask`, `KptListbox`, `KptKnob`, `KptRichText`, `KptFormField`, `KptSpeechButton` + `KptSpeechWave` (dictation) |
 | **Buttons & actions** | `KptButton`, `KptIconButton`, `KptButtonGroup`, `KptFab`, `KptSplitButton`, `KptSpeedDial` |
-| **Layout** | `KptAppShell`, `KptToolbar`, `KptSidenav`, `KptCard` (+ `Header`, `Footer`, `Media`, `Title`...), `KptDivider`, `KptPanel`, `KptFieldset`, `KptSplitter`, `KptScrollTop` |
+| **Layout** | `KptAppShell`, `KptToolbar`, `KptSidenav`, `KptCard` (+ `Header`, `Footer`, `Media`, `Title`...), `KptDivider`, `KptPanel`, `KptFieldset`, `KptSplitter`, `KptScrollTop`, `KptBackdrop` |
 | **Navigation** | `KptTabs`, `KptAccordion`, `KptBreadcrumb`, `KptStepper`, `KptMenu`, `KptMenubar`, `KptMegamenu`, `KptContextMenu` |
 | **Data** | `KptDataTable`, `KptPaginator`, `KptTree`, `KptTimeline`, `KptCarousel`, `KptDataView`, `KptPickList`, `KptOrderList`, `KptGalleria`, `KptMeterGroup` |
-| **Feedback & overlay** | `KptAlert`, `KptDialog`, `kptToast` + `KptToastContainer`, `KptTooltip`, `KptPopover`, `KptDrawer`, `KptBottomSheet`, `kptConfirm`, `KptBadge`, `KptChip`, `KptAvatar`, `KptAvatarGroup`, `KptSpinner`, `KptProgress`, `KptSkeleton`, `KptEmpty`, `KptImage`, `KptAuth` |
-| **Subpaths** | `@konce-pt/react/charts` (`KptChart`), `/chat` (`KptChat`, `KptChatMessage`, `KptChatTyping`, `KptChatComposer`, `KptChatDock`), `/roadmap` (`KptRoadmap`), `/grid` (`KptGrid`, `KptCol`, `KptFlex`), `/map` (`KptMap` + legend, POI card, search), `/icons` (full Tabler set) |
+| **Feedback & overlay** | `KptAlert`, `KptDialog`, `kptToast` + `KptToastContainer`, `KptTooltip`, `KptPopover`, `KptPeek`, `KptDrawer`, `KptBottomSheet`, `kptConfirm`, `KptBadge`, `KptChip`, `KptAvatar`, `KptAvatarGroup`, `KptIcon`, `KptSpinner`, `KptLoader`, `KptUpdate`, `KptProgress`, `KptSkeleton`, `KptEmpty`, `KptImage`, `KptAuth`, `KptMention`, `KptMentions` |
+| **Subpaths** | `@konce-pt/react/charts` (`KptChart`), `/chat` (`KptChat`, `KptChatMessage`, `KptChatTyping`, `KptChatComposer`, `KptChatDock`), `/roadmap` (`KptRoadmap`), `/grid` (`KptGrid`, `KptCol`, `KptFlex`), `/map` (`KptMap` + `KptMapLegend`, `KptMapPoiCard`, `KptMapSearch`, `KptMapCreateDialog`, `KptMapHoursField`, `KptMapImageField`), `/icons` (full Tabler set) |
 
 The heavy pieces (charts, chat, roadmap, maps, the full icon set) live in subpaths on purpose, so the core
 entry point stays small. Every component ships an `llms.txt` API sheet next to its source.
@@ -199,7 +202,7 @@ classes - that is what the SCSS reads.
 
 ## Icons
 
-**84 icons are built in and need no configuration** - what the components themselves draw plus the
+**98 icons are built in and need no configuration** - what the components themselves draw plus the
 staples of an application shell (`sun`, `moon`, `bell`, `settings`, `users`, `logout`,
 `layout-dashboard`, `home`, `activity`, `chart-bar`, `brand-github` ...). A typical admin panel needs
 nothing else.
@@ -286,12 +289,12 @@ export function App() {
 // <KptMotionProvider enabled={false}> - no motion at all (visual tests, kiosk)
 ```
 
-| Key | Values | Components (per-component input) |
+| Key | Values | Components (per-component prop) |
 | --- | --- | --- |
 | `enabled` | `true` \| `false` | All. `false` also zeroes CSS durations (`data-kpt-motion="off"`, `--kpt-motion-scale: 0` on `<html>`); loading indicators slow down instead of stopping |
 | `layout` | `spring` \| `arc` \| `morph` \| `none` | DataView, PickList, OrderList (`layoutMotion`) |
 | `collapse` | `spring` \| `fade` \| `none` | Accordion, Fieldset, Panel, Tree (`collapseMotion`) |
-| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); Password meter, ChipsInput and Select chips |
+| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); Password meter, ChipsInput and Select chips, Stepper panels, the Image preview, the Galleria slide |
 | `toggle` | `spring` \| `fade` \| `none` | Checkbox, RadioGroup, Switch (`toggleMotion`); Rating stars, ButtonGroup selection |
 
 Precedence: `enabled: false` always wins, then the component's own prop, then the provider value,
@@ -307,7 +310,7 @@ are available for your own views in [`@konce-pt/motion`](https://www.npmjs.com/p
 
 ## Documentation
 
-- **Playground** - live demos with copyable code: [ui.konce.pt/react](https://ui.konce.pt/react).
+- **Playground** - live demos with copyable code: [ui.konce.pt/react](https://ui.konce.pt/react/).
 - **`llms.txt`** - LLM-friendly API sheets per component, shipped inside the package; the
   package-wide sheet lives at [ui.konce.pt/llms/react/llms.txt](https://ui.konce.pt/llms/react/llms.txt)
   (PL mirror: [llms-pl.txt](https://ui.konce.pt/llms/react/llms-pl.txt)).
@@ -371,20 +374,21 @@ import '@konce-pt/grid';              // opcjonalnie - klasy układu
 własnego bundla - stąd identyczny wygląd obu portów. Angular wstrzykuje te style w runtime, React
 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-*`
+Motyw ciemny: `<html data-theme="dark">` - nie włącza się sam, atrybut przełączasz samodzielnie
+(np. z `matchMedia('(prefers-color-scheme: dark)')`). 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
+> `KptAutocomplete`, `KptDatepicker`...) renderują go przez `KptOverlay` (eksportowany także dla
+> własnych paneli) do portalu na `document.body`, więc `@angular/cdk/overlay-prebuilt.css` nie jest wymagany. W otwartym
 > `KptDialog` panel trafia do `<dialog>`, bo `showModal()` przenosi go do górnej warstwy przeglądarki.
 
 ### Ikony
 
-**84 ikony są wbudowane i nie wymagają konfiguracji** - to, co rysują same komponenty, plus staple
+**98 ikon jest wbudowanych i nie wymaga konfiguracji** - to, co rysują same komponenty, plus staple
 powłoki aplikacji (`sun`, `moon`, `bell`, `settings`, `users`, `logout`, `layout-dashboard`,
 `home`, `activity`, `chart-bar`, `brand-github`...). Typowy panel administracyjny nie potrzebuje nic
 więcej.
@@ -441,12 +445,12 @@ nakładki w portalach też go słuchają.
 <KptMotionProvider enabled={false}>...</KptMotionProvider>   {/* bez ruchu (testy wizualne, kiosk) */}
 ```
 
-| Klucz | Wartości | Komponenty (input per komponent) |
+| Klucz | Wartości | Komponenty (prop per komponent) |
 | --- | --- | --- |
 | `enabled` | `true` \| `false` | Wszystkie. `false` zeruje też czasy w CSS (`data-kpt-motion="off"`, `--kpt-motion-scale: 0` na `<html>`); wskaźniki ładowania zwalniają zamiast stanąć |
 | `layout` | `spring` \| `arc` \| `morph` \| `none` | DataView, PickList, OrderList (`layoutMotion`) |
 | `collapse` | `spring` \| `fade` \| `none` | Accordion, Fieldset, Panel, Tree (`collapseMotion`) |
-| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); miernik hasła, chipy ChipsInput i Select |
+| `enter` | `spring` \| `fade` \| `none` | Chat, ChatMessage, ChatDock, FormField (`enterMotion`); miernik hasła, chipy ChipsInput i Select, panele Steppera, podgląd Image, slajd Galleria |
 | `toggle` | `spring` \| `fade` \| `none` | Checkbox, RadioGroup, Switch (`toggleMotion`); gwiazdki Rating, wybór ButtonGroup |
 
 Pierwszeństwo: `enabled: false` wygrywa zawsze, potem prop samego komponentu, potem wartość z providera,
@@ -463,7 +467,7 @@ Każdy komponent ma obok źródła plik `llms.txt` z opisem API.
 
 ### Dokumentacja
 
-Playground z demami: [ui.konce.pt/react](https://ui.konce.pt/react). Opisy API dla modeli:
+Playground z demami: [ui.konce.pt/react](https://ui.konce.pt/react/). Opisy API dla modeli:
 [`llms.txt`](https://ui.konce.pt/llms/react/llms.txt) (EN) i
 [`llms-pl.txt`](https://ui.konce.pt/llms/react/llms-pl.txt) (PL). Repozytorium:
 [gitlab.com/konce-pt/koncept-ui](https://gitlab.com/konce-pt/koncept-ui).

package/dist/carousel/carousel.d.ts

@@ -9,6 +9,12 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     renderSlide: (item: T, index: number) => ReactNode;
     /** Nazwa regionu dla czytników ekranu, np. "Nowości"; domyślnie `carousel.label`. */
     label?: string;
+    /**
+     * Zawijanie strzałek: za ostatnim slajdem "dalej" wraca do pierwszego, przed pierwszym "wstecz" -
+     * do ostatniego. `false` - strzałki stają na końcach (np. kroki, które mają początek i koniec).
+     * Domyślnie `true`.
+     */
+    loop?: boolean;
 }
 /**
  * Karuzela slajdów. Dane przez `items`, wygląd slajdu przez `renderSlide`.
@@ -19,9 +25,11 @@ export interface KptCarouselProps<T> extends Omit<ComponentPropsWithRef<'div'>,
  * Semantyka według wzorca WAI-ARIA "carousel" (bez autoodtwarzania): region z
  * `aria-roledescription="karuzela"`, każdy slajd to grupa "Slajd 2 z 4", a slajdy poza widokiem są
  * `inert` - `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
- * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
+ * na torze). Domyślnie strzałki zawijają: za ostatnim slajdem "dalej" wraca do pierwszego, przed
+ * pierwszym "wstecz" - do ostatniego. Z `loop={false}` strzałki stają na końcach i dostają
+ * `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example
  * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
  */
-export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;
+export declare function KptCarousel<T>({ items, activeIndex, defaultActiveIndex, onActiveIndexChange, renderSlide, label, loop, locale, dictionary, className, ...rest }: Readonly<KptCarouselProps<T>>): import("react").JSX.Element;

package/dist/carousel/carousel.js

@@ -13,12 +13,14 @@ import { KptIcon } from "../icon/icon.js";
  * Semantyka według wzorca WAI-ARIA "carousel" (bez autoodtwarzania): region z
  * `aria-roledescription="karuzela"`, każdy slajd to grupa "Slajd 2 z 4", a slajdy poza widokiem są
  * `inert` - `Tab` i czytnik ich nie widzą. Zmiana slajdu jest ogłaszana uprzejmie (`aria-live`
- * na torze). Strzałki na końcach dostają `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
+ * na torze). Domyślnie strzałki zawijają: za ostatnim slajdem "dalej" wraca do pierwszego, przed
+ * pierwszym "wstecz" - do ostatniego. Z `loop={false}` strzałki stają na końcach i dostają
+ * `aria-disabled` zamiast `disabled`, żeby nie zgubić fokusu.
  *
  * @example
  * <KptCarousel items={photos} renderSlide={(photo) => <img src={photo} style={{ width: '100%' }} />} />
  */
-export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, locale, dictionary, className, ...rest }) {
+export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, onActiveIndexChange, renderSlide, label, loop = true, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [requested, setActive] = useControllableState({
         value: activeIndex,
@@ -28,7 +30,21 @@ export function KptCarousel({ items = [], activeIndex, defaultActiveIndex = 0, o
     // Indeks przycięty do listy: po skróceniu `items` (filtr) widok nie zostaje pusty.
     const active = Math.min(Math.max(requested, 0), Math.max(items.length - 1, 0));
     const goTo = (index) => setActive(Math.min(Math.max(index, 0), items.length - 1));
-    const atStart = active <= 0;
-    const atEnd = active >= items.length - 1;
-    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", role: "region", "aria-roledescription": t('carousel.roleCarousel'), "aria-label": label || t('carousel.label'), children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", "aria-live": "polite", style: { transform: `translateX(calc(var(--_kpt-carousel-dir, 1) * -${active * 100}%))` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", role: "group", "aria-roledescription": t('carousel.roleSlide'), "aria-label": t('carousel.slideOf', { index: index + 1, total: items.length }), inert: index !== active, "aria-hidden": index === active ? undefined : true, children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", "aria-disabled": atStart || undefined, "aria-label": t('common.previous'), onClick: () => goTo(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", "aria-disabled": atEnd || undefined, "aria-label": t('common.next'), onClick: () => goTo(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
+    // Zawijanie ma sens od dwóch slajdów - przy jednym strzałki zostają wyłączone.
+    const wraps = loop && items.length > 1;
+    // Krok o jeden slajd; poza końcem - zawinięcie albo zatrzymanie, zależnie od `loop`.
+    const step = (delta) => {
+        const count = items.length;
+        if (count === 0)
+            return;
+        const target = active + delta;
+        if (target >= 0 && target < count)
+            setActive(target);
+        else if (wraps)
+            setActive((target + count) % count);
+    };
+    // Koniec, na którym strzałka staje - tylko bez zawijania.
+    const atStart = !wraps && active <= 0;
+    const atEnd = !wraps && active >= items.length - 1;
+    return (_jsx("div", { className: cn('kpt-carousel-host', className), ...rest, children: _jsxs("div", { className: "kpt-carousel", role: "region", "aria-roledescription": t('carousel.roleCarousel'), "aria-label": label || t('carousel.label'), children: [_jsx("div", { className: "kpt-carousel__viewport", children: _jsx("div", { className: "kpt-carousel__track", "aria-live": "polite", style: { transform: `translateX(calc(var(--_kpt-carousel-dir, 1) * -${active * 100}%))` }, children: items.map((item, index) => (_jsx("div", { className: "kpt-carousel__slide", role: "group", "aria-roledescription": t('carousel.roleSlide'), "aria-label": t('carousel.slideOf', { index: index + 1, total: items.length }), inert: index !== active, "aria-hidden": index === active ? undefined : true, children: renderSlide(item, index) }, index))) }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--prev", "aria-disabled": atStart || undefined, "aria-label": t('common.previous'), onClick: () => step(-1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("button", { type: "button", className: "kpt-carousel__nav kpt-carousel__nav--next", "aria-disabled": atEnd || undefined, "aria-label": t('common.next'), onClick: () => step(1), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("div", { className: "kpt-carousel__dots", children: items.map((_, index) => (_jsx("button", { type: "button", className: cn('kpt-carousel__dot', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": t('carousel.slide', { index: index + 1 }), onClick: () => goTo(index) }, index))) })] }) }));
 }

package/dist/carousel/llms.txt

@@ -28,6 +28,7 @@ Import: `import { KptCarousel } from '@konce-pt/react';`
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange`
 - `renderSlide(item, index)` - required
 - `label`: string - the region name; empty = `carousel.label`
+- `loop`: boolean (default true) - the arrows wrap from the last slide to the first and back
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The render prop replaces the template
@@ -49,13 +50,18 @@ The arrows use `common.previous` / `common.next`, the dots `carousel.slide` (`{i
 ## Tokens
 The active dot `--kpt-color-primary`; the arrows `--kpt-color-surface` (80% via `color-mix`, solid on hover) with `--kpt-elevation-2`; the slide transition `--kpt-motion-duration-base`.
 
+## Looping
+By default the arrows wrap: "next" on the last slide goes to the first one and "previous" on the first
+goes to the last; the track rewinds across the slides in between. `loop={false}` stops the arrows at the
+ends instead - for steps that have a beginning and an end (onboarding). There is no autoplay either way.
+
 ## Accessibility
 The WAI-ARIA carousel pattern without autoplay. The root is `role="region"` with
 `aria-roledescription` from `carousel.roleCarousel` ("carousel") and a name from `label` or
 `carousel.label`. Each slide is `role="group"` with `aria-roledescription` from `carousel.roleSlide`
 and a name from `carousel.slideOf` ("Slide 2 of 4"); slides outside the view are `inert` and
 `aria-hidden`, so Tab never lands on an invisible link. The track is `aria-live="polite"`, so the
-slide that comes in is announced. The arrows use `aria-disabled` at the ends instead of `disabled`,
+slide that comes in is announced. With `loop` off the arrows use `aria-disabled` at the ends instead of `disabled`,
 so they keep the focus; the active dot carries `aria-current`, and every dot has a 24 px target
 (WCAG 2.5.8) with an 8 px visible dot. The transition is off under `prefers-reduced-motion`; in RTL
 the track and the chevrons follow the reading direction (`:dir(rtl)`).

package/dist/galleria/galleria.d.ts

@@ -21,6 +21,12 @@ export interface KptGalleriaProps extends Omit<ComponentPropsWithRef<'div'>, 'on
  * aktywną. Miniatura ma nazwę z `alt` obrazu i `aria-current` na aktywnej, a zmiana obrazu jest
  * ogłaszana uprzejmie ("Obraz 2 z 4: ...") - dopiero po działaniu użytkownika, nie przy starcie.
  *
+ * Ruch: nowe zdjęcie wjeżdża w kierunku zmiany na sprężynie, a poprzednie cofa się wolniej
+ * i przygasa (paralaksa); rodzaj z `enter` w `KptMotionProvider`, przy "ogranicz ruch" - przenikanie.
+ * Pasek miniatur nie ma paska przewijania: przewija się przeciąganiem (mysz, pióro, palec)
+ * albo strzałkami paska, krawędzie gasną tam, gdzie jest coś dalej, a aktywna miniatura
+ * zawsze wraca do widoku.
+ *
  * @example
  * <KptGalleria items={photos} activeIndex={index} onActiveIndexChange={setIndex} />
  */

package/dist/galleria/galleria.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { attachDragScroll, playGallerySlide, resolveEnterMotion, revealThumb, scrollStrip, stopGallerySlide, trackStripEdges, } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -15,6 +17,12 @@ const NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End']);
  * aktywną. Miniatura ma nazwę z `alt` obrazu i `aria-current` na aktywnej, a zmiana obrazu jest
  * ogłaszana uprzejmie ("Obraz 2 z 4: ...") - dopiero po działaniu użytkownika, nie przy starcie.
  *
+ * Ruch: nowe zdjęcie wjeżdża w kierunku zmiany na sprężynie, a poprzednie cofa się wolniej
+ * i przygasa (paralaksa); rodzaj z `enter` w `KptMotionProvider`, przy "ogranicz ruch" - przenikanie.
+ * Pasek miniatur nie ma paska przewijania: przewija się przeciąganiem (mysz, pióro, palec)
+ * albo strzałkami paska, krawędzie gasną tam, gdzie jest coś dalej, a aktywna miniatura
+ * zawsze wraca do widoku.
+ *
  * @example
  * <KptGalleria items={photos} activeIndex={index} onActiveIndexChange={setIndex} />
  */
@@ -31,8 +39,66 @@ export function KptGalleria({ items = [], activeIndex, defaultActiveIndex = 0, o
     const [userMoved, setUserMoved] = useState(false);
     const thumbsRef = useRef([]);
     const rootRef = useRef(null);
+    const stageRef = useRef(null);
+    const imageRef = useRef(null);
+    const stripRef = useRef(null);
+    const stripWrapRef = useRef(null);
+    const edgesRef = useRef(null);
+    /** Co było pokazane przy poprzednim renderze - z tego wynika kierunek i duch poprzedniego zdjęcia. */
+    const shownRef = useRef(null);
+    const motion = resolveEnterMotion(undefined, useKptMotion());
     const current = items[active] ?? null;
     const last = items.length - 1;
+    const currentSrc = current?.src ?? '';
+    // Zmiana zdjęcia: po wpisaniu nowego `src` do DOM, przed malowaniem. Pierwszy render i wymiana
+    // listy bez zmiany indeksu nie grają ruchu - przesuw ilustruje przejście, nie ładowanie.
+    useLayoutEffect(() => {
+        const prev = shownRef.current;
+        shownRef.current = { index: active, src: currentSrc };
+        const strip = stripRef.current;
+        const thumb = thumbsRef.current[active];
+        // Start na dalekim zdjęciu: pasek od razu pokazuje aktywną miniaturę, bez przewijania na oczach.
+        if (!prev) {
+            if (strip && thumb)
+                revealThumb(strip, thumb, false);
+            return;
+        }
+        if (prev.index === active)
+            return;
+        const stage = stageRef.current;
+        const image = imageRef.current;
+        if (stage && image && prev.src && prev.src !== currentSrc) {
+            playGallerySlide({ stage, image, previousSrc: prev.src, direction: active > prev.index ? 1 : -1, motion });
+        }
+        if (strip && thumb)
+            revealThumb(strip, thumb);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- ruch czyta konfigurację z chwili zmiany; sama zmiana konfiguracji nie przesuwa zdjęcia
+    }, [active, currentSrc]);
+    // Pasek: krawędzie i przeciąganie - podpinane, gdy pasek istnieje, i odpinane razem z nim.
+    useEffect(() => {
+        const strip = stripRef.current;
+        const wrap = stripWrapRef.current;
+        if (!strip || !wrap)
+            return;
+        const edges = trackStripEdges(strip, wrap);
+        edgesRef.current = edges;
+        const detach = attachDragScroll(strip);
+        return () => {
+            edges.dispose();
+            detach();
+            edgesRef.current = null;
+        };
+    }, [showThumbnails]);
+    // Nowa lista miniatur zmienia szerokość paska bez zmiany jego rozmiaru - krawędzie liczymy na nowo.
+    useEffect(() => edgesRef.current?.update(), [items]);
+    useEffect(() => {
+        const stage = stageRef.current;
+        const image = imageRef;
+        return () => {
+            if (stage)
+                stopGallerySlide(stage, image.current);
+        };
+    }, []);
     const select = (index) => {
         if (last < 0)
             return active;
@@ -57,7 +123,7 @@ export function KptGalleria({ items = [], activeIndex, defaultActiveIndex = 0, o
     };
     const position = t('galleria.position', { index: active + 1, total: items.length });
     const announcement = userMoved ? (current?.alt ? `${position}: ${current.alt}` : position) : '';
-    return (_jsx("div", { className: cn('kpt-galleria-host', className), ...rest, children: _jsxs("div", { ref: rootRef, className: "kpt-galleria", onKeyDown: onKeyDown, children: [_jsxs("div", { className: "kpt-galleria__stage", children: [_jsx("button", { type: "button", className: "kpt-galleria__nav kpt-galleria__nav--prev", "aria-disabled": active <= 0 || undefined, "aria-label": t('common.previous'), onClick: () => select(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), current ? _jsx("img", { className: "kpt-galleria__image", src: current.src, alt: current.alt || '' }) : null, _jsx("button", { type: "button", className: "kpt-galleria__nav kpt-galleria__nav--next", "aria-disabled": active >= last || undefined, "aria-label": t('common.next'), onClick: () => select(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) })] }), showThumbnails ? (_jsx("div", { className: "kpt-galleria__thumbs", children: items.map((item, index) => (_jsx("button", { ref: (el) => {
-                            thumbsRef.current[index] = el;
-                        }, type: "button", className: cn('kpt-galleria__thumb', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": item.alt || t('galleria.image', { index: index + 1 }), onClick: () => select(index), children: _jsx("img", { src: item.thumbnail || item.src, alt: "" }) }, index))) })) : null, _jsx("span", { className: "kpt-galleria__live", "aria-live": "polite", children: announcement })] }) }));
+    return (_jsx("div", { className: cn('kpt-galleria-host', className), ...rest, children: _jsxs("div", { ref: rootRef, className: "kpt-galleria", onKeyDown: onKeyDown, children: [_jsxs("div", { ref: stageRef, className: "kpt-galleria__stage", children: [_jsx("button", { type: "button", className: "kpt-galleria__nav kpt-galleria__nav--prev", "aria-disabled": active <= 0 || undefined, "aria-label": t('common.previous'), onClick: () => select(active - 1), children: _jsx(KptIcon, { name: "chevron-left" }) }), current ? _jsx("img", { ref: imageRef, className: "kpt-galleria__image", src: current.src, alt: current.alt || '' }) : null, _jsx("button", { type: "button", className: "kpt-galleria__nav kpt-galleria__nav--next", "aria-disabled": active >= last || undefined, "aria-label": t('common.next'), onClick: () => select(active + 1), children: _jsx(KptIcon, { name: "chevron-right" }) })] }), showThumbnails ? (_jsxs("div", { ref: stripWrapRef, className: "kpt-galleria__strip", children: [_jsx("button", { type: "button", className: "kpt-galleria__scroll kpt-galleria__scroll--back", tabIndex: -1, "aria-label": t('galleria.scrollBack'), onClick: () => stripRef.current && scrollStrip(stripRef.current, -1), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsx("div", { ref: stripRef, className: "kpt-galleria__thumbs", children: items.map((item, index) => (_jsx("button", { ref: (el) => {
+                                    thumbsRef.current[index] = el;
+                                }, type: "button", className: cn('kpt-galleria__thumb', index === active && 'is-active'), "aria-current": index === active ? 'true' : undefined, "aria-label": item.alt || t('galleria.image', { index: index + 1 }), onClick: () => select(index), children: _jsx("img", { src: item.thumbnail || item.src, alt: "", draggable: false }) }, index))) }), _jsx("button", { type: "button", className: "kpt-galleria__scroll kpt-galleria__scroll--forward", tabIndex: -1, "aria-label": t('galleria.scrollForward'), onClick: () => stripRef.current && scrollStrip(stripRef.current, 1), children: _jsx(KptIcon, { name: "chevron-right" }) })] })) : null, _jsx("span", { className: "kpt-galleria__live", "aria-live": "polite", children: announcement })] }) }));
 }

package/dist/galleria/llms.txt

@@ -11,8 +11,12 @@ Import: `import { KptGalleria, type KptGalleriaItem } from '@konce-pt/react';`
           <img class="kpt-galleria__image" src="..." alt="Mountain lake">
           <button class="kpt-galleria__nav kpt-galleria__nav--next" aria-label="Next">...</button>
         </div>
-        <div class="kpt-galleria__thumbs">
-          <button class="kpt-galleria__thumb is-active" aria-current="true" aria-label="Mountain lake"><img src="..." alt=""></button>...
+        <div class="kpt-galleria__strip" data-scroll-end>
+          <button class="kpt-galleria__scroll kpt-galleria__scroll--back" tabindex="-1" aria-label="Scroll thumbnails back">...</button>
+          <div class="kpt-galleria__thumbs">
+            <button class="kpt-galleria__thumb is-active" aria-current="true" aria-label="Mountain lake"><img src="..." alt="" draggable="false"></button>...
+          </div>
+          <button class="kpt-galleria__scroll kpt-galleria__scroll--forward" tabindex="-1" aria-label="Scroll thumbnails forward">...</button>
         </div>
         <span class="kpt-galleria__live" aria-live="polite">Image 2 of 4: Pine forest</span>
       </div>
@@ -43,6 +47,29 @@ The arrows use `common.previous` / `common.next`, the thumbnails without `alt` `
 Anywhere inside the gallery, `ArrowLeft`/`ArrowRight` move to the neighbouring image (reversed in
 RTL) and `Home`/`End` to the first/last. When focus is on a thumbnail, it follows the active one.
 
+## Motion and the thumbnail strip
+Changing the image slides the new one in from the side of travel on a soft spring, while the
+previous one - a temporary `<img class="kpt-galleria__ghost">` under it - drifts back slower and
+dims (parallax). The kind comes from `enter` in `KptMotionProvider`: `spring` (default), `fade` (a short
+cross-fade) or `none`; with the system "reduce motion" setting it only cross-fades. The first
+render and a new `items` list at the same index do not animate.
+
+The strip has no scrollbar. It scrolls by dragging (mouse and pen; a touch screen scrolls natively),
+with the wheel or with two small strip arrows that appear only on the side there is more to see -
+the strip fades out on that edge too (`data-scroll-start` / `data-scroll-end` on
+`.kpt-galleria__strip`). A move under 5 px is still a click on a thumbnail; after a real drag the
+click is swallowed and the strip glides on with inertia. The active thumbnail always returns into
+view, and only as far as needed. The strip arrows are `tabindex="-1"`: from the keyboard the gallery
+arrows drive the strip. All of it lives in `@konce-pt/motion` (`playGallerySlide`, `attachDragScroll`,
+`revealThumb`, `trackStripEdges`), shared by both ports.
+
+## Size
+The stage has a fixed aspect ratio and the image fills it, so the gallery takes the full width of
+its container and does not jump in height between images. An image with different proportions is
+cropped (`object-fit: cover`). Two custom properties change it, set on the gallery or any ancestor:
+- `--kpt-galleria-aspect-ratio` (default `16 / 9`), e.g. `4 / 3` or `1`
+- `--kpt-galleria-fit` (default `cover`); `contain` shows the whole image with the stage colour around it
+
 ## Tokens
 The stage `--kpt-color-muted`; the active thumbnail `--kpt-color-primary`; the arrows `--kpt-color-surface` (85% via `color-mix`, solid on hover) / `--kpt-color-on-surface` with `--kpt-elevation-2`.
 

package/dist/i18n/i18n-context.js

@@ -15,8 +15,8 @@ const warnedKeys = new Set();
  * `translate` z ostrzeżeniem w buildzie deweloperskim, gdy klucza nie ma w żadnym słowniku -
  * inaczej literówka daje po cichu sam klucz zamiast tekstu.
  */
-function translateChecked(dict, key, params) {
-    const text = translate(dict, key, params);
+function translateChecked(dict, key, params, locale) {
+    const text = translate(dict, key, params, locale);
     if (text === key && isDevBuild() && !warnedKeys.has(key)) {
         warnedKeys.add(key);
         console.warn(`KptI18n: brak tłumaczenia dla klucza "${key}".`);
@@ -28,7 +28,7 @@ const FALLBACK = {
     setLocale: () => { },
     messages: KPT_MESSAGES_EN,
     messagesFor: () => KPT_MESSAGES_EN,
-    t: (key, params) => translateChecked(KPT_MESSAGES_EN, key, params),
+    t: (key, params) => translateChecked(KPT_MESSAGES_EN, key, params, 'en'),
 };
 const KptI18nContext = createContext(null);
 /**
@@ -55,7 +55,7 @@ export function KptI18nProvider({ locale = 'en', messages, children }) {
             setLocale: setCurrent,
             messages: active,
             messagesFor,
-            t: (key, params) => translateChecked(active, key, params),
+            t: (key, params) => translateChecked(active, key, params, current),
         };
     }, [current, messagesFor]);
     return _jsx(KptI18nContext.Provider, { value: value, children: children });
@@ -81,7 +81,7 @@ export function useKptMessages(overrides) {
             ...context,
             locale: effectiveLocale,
             messages: merged,
-            t: (key, params) => translateChecked(merged, key, params),
+            t: (key, params) => translateChecked(merged, key, params, effectiveLocale),
         };
     }, [context, locale, dictionary]);
 }

package/dist/image/image.d.ts

@@ -16,6 +16,10 @@ export interface KptImageProps extends Omit<ComponentPropsWithRef<'div'>, 'onCli
  * stronę i górną warstwę. Na czas podglądu blokujemy przewijanie dokumentu, a po zamknięciu
  * fokus wraca na miniaturę.
  *
+ * Ruch: zdjęcie wylatuje z miniatury i ląduje na środku na sprężynie, a przy zamknięciu (`x`,
+ * `Escape`, tło) wraca do niej, zanim okno się zamknie. Rodzaj ruchu bierze z `enter`
+ * w `KptMotionProvider` (`spring` / `fade` / `none`); przy "ogranicz ruch" podgląd tylko się przenika.
+ *
  * @example
  * <KptImage src="/foto.jpg" alt="Zdjęcie" preview width="240px" />
  */

package/dist/image/image.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
+import { playZoomClose, playZoomOpen, resolveEnterMotion, stopZoomMotion } from '@konce-pt/motion';
+import { useKptMotion } from "../motion/motion-context.js";
 import { cn } from "../internal/cn.js";
 import { kptLockScroll } from "../internal/scroll-lock.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
@@ -13,6 +15,10 @@ import { KptIcon } from "../icon/icon.js";
  * stronę i górną warstwę. Na czas podglądu blokujemy przewijanie dokumentu, a po zamknięciu
  * fokus wraca na miniaturę.
  *
+ * Ruch: zdjęcie wylatuje z miniatury i ląduje na środku na sprężynie, a przy zamknięciu (`x`,
+ * `Escape`, tło) wraca do niej, zanim okno się zamknie. Rodzaj ruchu bierze z `enter`
+ * w `KptMotionProvider` (`spring` / `fade` / `none`); przy "ogranicz ruch" podgląd tylko się przenika.
+ *
  * @example
  * <KptImage src="/foto.jpg" alt="Zdjęcie" preview width="240px" />
  */
@@ -21,32 +27,77 @@ export function KptImage({ src, alt = '', width = null, preview = false, locale,
     const [open, setOpen] = useState(false);
     const dialogRef = useRef(null);
     const triggerRef = useRef(null);
+    const fullRef = useRef(null);
+    const closeRef = useRef(null);
+    const closeTimer = useRef(null);
+    const motion = resolveEnterMotion(undefined, useKptMotion());
+    const zoomElements = () => {
+        const thumb = triggerRef.current, image = fullRef.current, dialog = dialogRef.current;
+        return thumb && image && dialog ? { thumb, image, dialog, close: closeRef.current } : null;
+    };
     useEffect(() => {
         const el = dialogRef.current;
         if (!el || !open)
             return;
-        if (!el.open)
+        if (!el.open) {
             el.showModal();
+            // Tuż po showModal(), przed malowaniem - pierwsza klatka stoi już na miniaturze.
+            const els = zoomElements();
+            if (els)
+                playZoomOpen(els, motion);
+        }
         const releaseScroll = kptLockScroll();
         return () => {
             releaseScroll();
             if (el.open)
                 el.close();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- ruch czyta stan z chwili otwarcia; zmiana konfiguracji nie otwiera okna ponownie
     }, [open]);
+    // Zegar zamknięcia nie może przeżyć komponentu.
+    useEffect(() => () => {
+        if (closeTimer.current)
+            clearTimeout(closeTimer.current);
+    }, []);
     const style = width ? { width } : undefined;
     if (!preview) {
         return (_jsx("div", { className: cn('kpt-image-host', className), ...rest, children: _jsx("div", { className: "kpt-image", style: style, children: _jsx("img", { className: "kpt-image__img", src: src, alt: alt }) }) }));
     }
-    // `close` przychodzi z każdej drogi: `x`, `Escape`, tło.
+    // Zamknięcie z `x`, `Escape` i tła: najpierw powrót zdjęcia do miniatury, potem okno.
+    const requestClose = () => {
+        if (closeTimer.current)
+            return;
+        const els = zoomElements();
+        const ms = els ? playZoomClose(els, motion) : 0;
+        if (ms === 0) {
+            dialogRef.current?.close();
+            return;
+        }
+        closeTimer.current = setTimeout(() => {
+            closeTimer.current = null;
+            dialogRef.current?.close();
+        }, ms);
+    };
+    // `Escape` zamknąłby okno od razu - przejmujemy je, żeby zdjęcie zdążyło wrócić.
+    const onCancel = (event) => {
+        event.preventDefault();
+        requestClose();
+    };
+    // `close` przychodzi z każdej drogi (także wymuszonej przez przeglądarkę) - tu sprzątamy.
     const onClosed = () => {
+        if (closeTimer.current)
+            clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+        const els = zoomElements();
+        if (els)
+            stopZoomMotion(els);
         setOpen(false);
         triggerRef.current?.focus();
     };
     // Okno wypełnia cały ekran, więc kliknięcie w nie samo (a nie w zdjęcie) to kliknięcie w tło.
     const onDialogClick = (event) => {
         if (event.target === event.currentTarget)
-            event.currentTarget.close();
+            requestClose();
     };
-    return (_jsxs("div", { className: cn('kpt-image-host', className), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "kpt-image kpt-image--preview", "aria-haspopup": "dialog", "aria-label": alt ? t('image.previewOf', { alt }) : t('image.preview'), style: style, onClick: () => setOpen(true), children: [_jsx("img", { className: "kpt-image__img", src: src, alt: "" }), _jsx("span", { className: "kpt-image__mask", "aria-hidden": "true", children: _jsx(KptIcon, { name: "zoom-in" }) })] }), _jsxs("dialog", { ref: dialogRef, className: "kpt-image__overlay", "aria-label": alt || t('image.preview'), onClose: onClosed, onClick: onDialogClick, children: [_jsx("button", { type: "button", className: "kpt-image__close", onClick: () => dialogRef.current?.close(), "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) }), _jsx("img", { className: "kpt-image__full", src: src, alt: alt, loading: "lazy" })] })] }));
+    return (_jsxs("div", { className: cn('kpt-image-host', className), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "kpt-image kpt-image--preview", "aria-haspopup": "dialog", "aria-label": alt ? t('image.previewOf', { alt }) : t('image.preview'), style: style, onClick: () => setOpen(true), children: [_jsx("img", { className: "kpt-image__img", src: src, alt: "" }), _jsx("span", { className: "kpt-image__mask", "aria-hidden": "true", children: _jsx(KptIcon, { name: "zoom-in" }) })] }), _jsxs("dialog", { ref: dialogRef, className: "kpt-image__overlay", "aria-label": alt || t('image.preview'), onClose: onClosed, onCancel: onCancel, onClick: onDialogClick, children: [_jsx("button", { ref: closeRef, type: "button", className: "kpt-image__close", onClick: requestClose, "aria-label": t('common.close'), children: _jsx(KptIcon, { name: "x" }) }), _jsx("img", { ref: fullRef, className: "kpt-image__full", src: src, alt: alt })] })] }));
 }

package/dist/image/llms.txt

@@ -40,6 +40,21 @@ only add noise for a screen reader.
 ## i18n
 The thumbnail is named from `image.previewOf` (`{alt}`) or `image.preview`; the close button from `common.close`.
 
+## Motion
+The preview flies out of the thumbnail and lands in the middle on a soft spring; the corners keep the
+thumbnail radius in flight and the thumbnail is empty while the photo is out. Closing - the x button,
+`Escape` or a click on the backdrop - sends it back into the thumbnail before the dialog closes
+(`Escape` is taken over through the dialog's `cancel` event). The kind comes from `enter` in the
+motion config: `spring` (default), `fade` (cross-fade) or `none`. With the system "reduce motion"
+setting the preview only cross-fades. The flight lives in `@konce-pt/motion` (`playZoomOpen`,
+`playZoomClose`), shared by both ports.
+
+## Preview size
+The full-size photo keeps its proportions and is limited to 80% of the window height and 90% of its
+width, so a portrait photo fits whole with a margin above and below, and the x button does not cover
+it. Change the limits with `--kpt-image-preview-max-height` (default `80vh`) and
+`--kpt-image-preview-max-width` (default `90vw`).
+
 ## Tokens
 The radius `--kpt-radius-md`; the backdrop and the hover mask `--kpt-color-overlay-scrim`; the x button and the magnifier disc `--kpt-color-surface` / `--kpt-color-on-surface` with `--kpt-elevation-2`.
 

package/dist/input/input.d.ts

@@ -1,9 +1,10 @@
 import { type ComponentPropsWithRef } from 'react';
 import type { KptSpeechMode } from '@konce-pt/speech';
+import { type KptI18nOverrides } from '../i18n/i18n-context.tsx';
 import { type KptSpeechColor } from '../speech/speech-button.tsx';
 import type { KptHostProps } from '../internal/types.ts';
 export type KptInputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'time';
-export interface KptInputProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'> {
+export interface KptInputProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'required'>, KptI18nOverrides {
     /** Typ pola. */
     type?: KptInputType;
     /**
@@ -36,6 +37,11 @@ export interface KptInputProps extends Omit<ComponentPropsWithRef<'input'>, 'typ
      * mikrofonu, a dyktowanie kończy się po jednej wypowiedzi (wzorzec wyszukiwarki).
      */
     speechMode?: KptSpeechMode;
+    /**
+     * Przycisk czyszczenia na końcu pola. Bez ustawienia - włączony tylko dla `type="search"`,
+     * gdzie zastępuje systemowe "x" (ukryte zawsze, także przy `clearable={false}`).
+     */
+    clearable?: boolean;
 }
 /**
  * Pole tekstowe Koncept UI. Renderuje natywny `<input>` w hoście `.kpt-input-host`.
@@ -51,4 +57,4 @@ export interface KptInputProps extends Omit<ComponentPropsWithRef<'input'>, 'typ
  * <KptInput name="email" type="email" defaultValue="" />
  * <KptInput value={email} onValueChange={setEmail} invalid={!ok} touched={blurred} />
  */
-export declare function KptInput({ type, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, ref, speech, speechLang, speechColor, speechMode, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rest }: Readonly<KptInputProps>): import("react").JSX.Element;
+export declare function KptInput({ type, required, invalid, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, ref, speech, speechLang, speechColor, speechMode, clearable, onKeyDown, locale, dictionary, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rest }: Readonly<KptInputProps>): import("react").JSX.Element;

package/dist/input/input.js

@@ -1,11 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useKptMessages } from "../i18n/i18n-context.js";
+import { KptIcon } from "../icon/icon.js";
 import { cn } from "../internal/cn.js";
 import { composeRefs } from "../internal/compose-refs.js";
 import { KptSpeechButton } from "../speech/speech-button.js";
 import { useKptSpeechRecognition } from "../speech/use-speech-recognition.js";
 import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
+/**
+ * Wpisuje wartość setterem z prototypu i wysyła `input`. Samo `el.value = ''` React by połknął:
+ * jego tracker wartości uznałby zdarzenie za echo i nie wywołałby `onChange`.
+ */
+function setFieldValue(field, value) {
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(field, value);
+    field.dispatchEvent(new Event('input', { bubbles: true }));
+}
 /**
  * Pole tekstowe Koncept UI. Renderuje natywny `<input>` w hoście `.kpt-input-host`.
  *
@@ -20,7 +30,7 @@ import { joinIds, useKptFieldA11y } from "../form-field/form-field-context.js";
  * <KptInput name="email" type="email" defaultValue="" />
  * <KptInput value={email} onValueChange={setEmail} invalid={!ok} touched={blurred} />
  */
-export function KptInput({ type = 'text', required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, ref, speech = false, speechLang, speechColor, speechMode = 'insert', 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rest }) {
+export function KptInput({ type = 'text', required = false, invalid = false, touched, onValueChange, onTouch, hostProps, className, id, onChange, onBlur, ref, speech = false, speechLang, speechColor, speechMode = 'insert', clearable, onKeyDown, locale, dictionary, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
     const field = useKptFieldA11y(id, 'kpt-input');
     const innerRef = useRef(null);
@@ -38,13 +48,49 @@ export function KptInput({ type = 'text', required = false, invalid = false, tou
     // Stan nieprawidłowy pokazujemy dopiero po dotknięciu pola - jak natywne `:user-invalid`.
     // Bez `touched` nie ma czego bramkować, więc decyduje samo `invalid`.
     const showInvalid = invalid && (touched ?? true);
+    const { t } = useKptMessages({ locale, dictionary });
+    // W trybie niekontrolowanym wartość należy do DOM i React jej nie widzi - to, czy jest co
+    // czyścić, trzymamy osobno. W kontrolowanym decyduje `value`.
+    const [filledUncontrolled, setFilledUncontrolled] = useState(() => String(rest.defaultValue ?? '') !== '');
+    const filled = rest.value === undefined ? filledUncontrolled : String(rest.value) !== '';
+    const showClear = (clearable ?? type === 'search') && filled && !rest.disabled && !rest.readOnly;
+    // Reset formularza (`form.reset()`, a w React 19 także po `<form action>`) przywraca wartość bez
+    // zdarzenia `input` - stan "jest co czyścić" odczytujemy wtedy z pola, gdy reset już się wykona.
+    useEffect(() => {
+        const form = innerRef.current?.form;
+        if (!form)
+            return;
+        const onReset = () => {
+            queueMicrotask(() => setFilledUncontrolled((innerRef.current?.value ?? '') !== ''));
+        };
+        form.addEventListener('reset', onReset);
+        return () => form.removeEventListener('reset', onReset);
+    }, []);
     const handleChange = useCallback((event) => {
+        setFilledUncontrolled(event.target.value !== '');
         onChange?.(event);
         onValueChange?.(event.target.value);
     }, [onChange, onValueChange]);
+    /** Czyści zdarzeniem `input` - przechodzi przez `onChange` jak wpisane, w obu trybach. */
+    const clear = () => {
+        const field = innerRef.current;
+        if (!field)
+            return;
+        setFieldValue(field, '');
+        field.focus();
+    };
+    /** Escape czyści pełne pole i nie idzie dalej - pierwszy nie zamyka okna, w którym pole stoi. */
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.key !== 'Escape' || !showClear)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        clear();
+    };
     const handleBlur = useCallback((event) => {
         onBlur?.(event);
         onTouch?.();
     }, [onBlur, onTouch]);
-    return (_jsxs("span", { className: cn('kpt-input-host', hostClassName), "data-speech": speechState, ...hostRest, children: [_jsx("input", { className: cn('kpt-input__field', className), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), type: type, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, ref: composeRefs(innerRef, ref), ...rest }), speech ? (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: !!rest.disabled || !!rest.readOnly, hostProps: { className: 'kpt-input__speech' } })) : null] }));
+    return (_jsxs("span", { className: cn('kpt-input-host', hostClassName), "data-speech": speechState, "data-clear": showClear ? '' : undefined, ...hostRest, children: [_jsx("input", { className: cn('kpt-input__field', className), id: field.id, "aria-describedby": joinIds(ariaDescribedBy, field.describedBy), type: type, "aria-required": required || undefined, "aria-invalid": ariaInvalid ?? (showInvalid || undefined), onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, ref: composeRefs(innerRef, ref), ...rest }), showClear ? (_jsx("button", { type: "button", className: "kpt-input__clear", tabIndex: -1, "aria-label": t('input.clear'), onMouseDown: (event) => event.preventDefault(), onClick: clear, children: _jsx(KptIcon, { name: "x" }) })) : null, speech ? (_jsx(KptSpeechButton, { listeningColor: speechColor, speech: mic, size: "sm", unsupported: "hide", disabled: !!rest.disabled || !!rest.readOnly, hostProps: { className: 'kpt-input__speech' } })) : null] }));
 }

package/dist/input/llms.txt

@@ -15,6 +15,7 @@ Import: `import { KptInput } from '@konce-pt/react';`
 - `onTouch()` - fires on blur, the moment the field becomes touched
 - `required`: boolean - see the note below
 - `invalid`: boolean, `touched`: boolean - the error state
+- `clearable`: boolean (default: `true` only for `type="search"`) - a clear button, see "Clear button"
 - `hostProps` - props for the `.kpt-input-host` wrapper
 - `className`, `ref`, `name`, `placeholder`, `autoComplete` and every other `<input>` prop go to
   the inner `<input>`
@@ -51,6 +52,21 @@ configuration. An explicit `id` prop still wins.
 generated. Inside `KptFormField` the wrapper's `label[for]` points at it and the hint or error is
 added to `aria-describedby` (merged with your own). Without a wrapper, name it with `aria-label`.
 
+## Clear button
+`type="search"` gets a clear button at the end of the field as soon as it has a value; `clearable`
+turns it on for any other type, `clearable={false}` turns it off. The browser's own "x"
+(`::-webkit-search-cancel-button`) is always hidden - Chromium and Safari draw it differently and
+Firefox not at all. The button is hidden while the field is empty, disabled or read-only.
+
+Clearing dispatches a real `input` event, so the value goes through the same path as typed text,
+and the focus stays in the field. The button is `tabindex="-1"` (like the `KptInputNumber`
+steppers); from the keyboard `Escape` clears a filled field and stops the event, so the first
+`Escape` does not close the dialog the field sits in. Its name comes from `input.clear` in the
+dictionary. The host gets `data-clear` while the button is visible.
+
+    <KptInput type="search" value={query} onValueChange={setQuery} />
+    <KptInput clearable value={coupon} onValueChange={setCoupon} />
+
 ## Tokens
 `--kpt-form-field-{bg,text,placeholder,border,border-hover,border-focus,border-error,radius}`.
 

package/dist/popover/llms.txt

@@ -15,6 +15,8 @@ Import: `import { KptPopover } from '@konce-pt/react';`
 - `children`: ReactNode - the panel content
 - `open` / `defaultOpen` / `onOpenChange` - controlled or uncontrolled
 - `placement`: 'bottom' (default) | 'top' - the preferred side; it flips when there is no room
+- `maxWidth`: string - the panel's maximum width, any CSS length (`'24rem'`; default `20rem`). The panel is
+  never wider than the window minus the 8 px overlay margin
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## The panel is a portal

package/dist/popover/popover.d.ts

@@ -11,6 +11,11 @@ export interface KptPopoverProps extends Omit<ComponentPropsWithRef<'span'>, 'co
     placement?: 'bottom' | 'top';
     /** Nazwa panelu (`role="dialog"`) - okno bez nazwy czytnik ogłasza jako samo "okno dialogowe". */
     ariaLabel?: string;
+    /**
+     * Maksymalna szerokość panelu (dowolna długość CSS, np. `'24rem'`); brak = `20rem`.
+     * Panel i tak nie wyjdzie poza okno - ogranicza go szerokość okna minus margines nakładek.
+     */
+    maxWidth?: string;
 }
 /**
  * Popover - dowolna treść w dymku przypiętym do wyzwalacza (bogatszy niż tooltip).
@@ -28,4 +33,4 @@ export interface KptPopoverProps extends Omit<ComponentPropsWithRef<'span'>, 'co
  *   <div>Bogata treść popovera...</div>
  * </KptPopover>
  */
-export declare function KptPopover({ trigger, children, open, defaultOpen, onOpenChange, placement, ariaLabel, className, ...rest }: Readonly<KptPopoverProps>): import("react").JSX.Element;
+export declare function KptPopover({ trigger, children, open, defaultOpen, onOpenChange, placement, ariaLabel, maxWidth, className, ...rest }: Readonly<KptPopoverProps>): import("react").JSX.Element;

package/dist/popover/popover.js

@@ -23,7 +23,7 @@ const FOCUSABLE = 'a[href], button:not(:disabled), input:not(:disabled), select,
  *   <div>Bogata treść popovera...</div>
  * </KptPopover>
  */
-export function KptPopover({ trigger, children, open, defaultOpen = false, onOpenChange, placement = 'bottom', ariaLabel = '', className, ...rest }) {
+export function KptPopover({ trigger, children, open, defaultOpen = false, onOpenChange, placement = 'bottom', ariaLabel = '', maxWidth, className, ...rest }) {
     const triggerRef = useRef(null);
     /** Kotwica panelu - w stanie, bo czyta ją render; ref zostaje dla handlerów. */
     const [anchor, setAnchor] = useState(null);
@@ -65,5 +65,5 @@ export function KptPopover({ trigger, children, open, defaultOpen = false, onOpe
             findControl()?.focus();
         setOpen(false);
     }, [setOpen]);
-    return (_jsxs("span", { className: cn('kpt-popover-host', className), ...rest, children: [_jsx("span", { className: "kpt-popover__trigger", ref: setTrigger, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 6, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-popover__panel", role: "dialog", "aria-label": ariaLabel || undefined, children: children }) })] }));
+    return (_jsxs("span", { className: cn('kpt-popover-host', className), ...rest, children: [_jsx("span", { className: "kpt-popover__trigger", ref: setTrigger, onClick: () => setOpen(!isOpen), children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, offset: 6, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-popover__panel", role: "dialog", "aria-label": ariaLabel || undefined, style: maxWidth ? { '--_max-width': maxWidth } : undefined, children: children }) })] }));
 }

package/dist/public-api.d.ts

@@ -5,7 +5,7 @@ export type { KptToolbarProps } from './toolbar/toolbar.tsx';
 export { KptSidenav, KptSidenavFooter } from './sidenav/sidenav.tsx';
 export type { KptSidenavProps } from './sidenav/sidenav.tsx';
 export { KptTabs, KptTab } from './tabs/tabs.tsx';
-export type { KptTabProps, KptTabsProps } from './tabs/tabs.tsx';
+export type { KptTabIconColor, KptTabProps, KptTabsProps } from './tabs/tabs.tsx';
 export { KptAccordion, KptAccordionPanel } from './accordion/accordion.tsx';
 export type { KptAccordionPanelProps, KptAccordionProps } from './accordion/accordion.tsx';
 export { KptPanel, KptPanelActions } from './panel/panel.tsx';
@@ -194,6 +194,8 @@ export type { KptCardHeadingLevel, KptCardProps, KptCardVariant } from './card/c
 export { KptI18nProvider, useKptI18n, useKptMessages } from './i18n/i18n-context.tsx';
 export type { KptI18nContextValue, KptI18nOverrides, KptI18nProviderProps } from './i18n/i18n-context.tsx';
 export { KPT_MESSAGES_EN, KPT_MESSAGES_PL } from '@konce-pt/i18n';
+export { KptMotionProvider, useKptMotion } from './motion/motion-context.tsx';
+export type { KptMotionProviderProps, KptMotionConfig, KptLayoutMotion } from './motion/motion-context.tsx';
 export type { DeepPartial, KptLocale, KptMessages } from '@konce-pt/i18n';
 export { cn } from './internal/cn.ts';
 export type { ClassValue } from './internal/cn.ts';

package/dist/public-api.js

@@ -109,6 +109,7 @@ export { KptCard, KptCardActions, KptCardFooter, KptCardHeader, KptCardLead, Kpt
 // i18n
 export { KptI18nProvider, useKptI18n, useKptMessages } from "./i18n/i18n-context.js";
 export { KPT_MESSAGES_EN, KPT_MESSAGES_PL } from '@konce-pt/i18n';
+export { KptMotionProvider, useKptMotion } from "./motion/motion-context.js";
 // Prymitywy pomocnicze
 export { cn } from "./internal/cn.js";
 export { composeRefs } from "./internal/compose-refs.js";

package/dist/tabs/llms.txt

@@ -5,12 +5,15 @@ Import: `import { KptTabs } from '@konce-pt/react';`
 
 ## DOM
     <div class="kpt-tabs-host" style="--kpt-anim-duration: 500ms; --kpt-anim-dir: 1">
-      <div class="kpt-tabs__header" role="tablist">
-        <button class="kpt-tabs__tab is-active" role="tab" id="kpt-tabs-r1-tab-0"
-                aria-selected="true" aria-controls="kpt-tabs-r1-panel" tabindex="0">General</button>
-        <button class="kpt-tabs__tab" role="tab" id="kpt-tabs-r1-tab-1"
-                aria-selected="false" tabindex="-1">Advanced</button>
-        <span class="kpt-tabs__ink" style="width: 95px; transform: translateX(85px)"></span>
+      <div class="kpt-tabs__header">
+        <div class="kpt-tabs__list" role="tablist">
+          <button class="kpt-tabs__tab is-active" role="tab" id="kpt-tabs-r1-tab-0"
+                  aria-selected="true" aria-controls="kpt-tabs-r1-panel" tabindex="0">General</button>
+          <button class="kpt-tabs__tab" role="tab" id="kpt-tabs-r1-tab-1"
+                  aria-selected="false" tabindex="-1">Advanced</button>
+          <span class="kpt-tabs__ink" style="width: 95px; transform: translateX(85px)"></span>
+        </div>
+        <div class="kpt-tabs__links"><a class="kpt-tabs__tab kpt-tabs__link" href="...">Docs</a></div>
       </div>
       <div class="kpt-tabs__body" role="tabpanel" tabindex="0" id="kpt-tabs-r1-panel"
            aria-labelledby="kpt-tabs-r1-tab-0">
@@ -21,13 +24,42 @@ Import: `import { KptTabs } from '@konce-pt/react';`
 ## Props
 - `activeIndex` / `defaultActiveIndex` / `onActiveIndexChange` - controlled or uncontrolled
 - `animated`: boolean (default true), `animationDuration`: number (ms, default 500)
+- `onNavigate`: (event: KptNavigateEvent<KptTabProps>) => void - a plain click on a link tab
 - `children` - `<KptTabs.Tab>` elements
 
 ## KptTabs.Tab
-`label` (required), `disabled`, `children`. The tab component never renders itself - `KptTabs`
+`label` (required), `disabled`, `icon`, `iconEnd`, `iconColor`, `iconEndColor`, `href`, `target`, `rel`, `children`. The tab component never renders itself - `KptTabs`
 reads its props and decides what to show, exactly as the Angular version reads the `kpt-tab`
 template. Only the active tab's content is in the DOM.
 
+## Icons
+`icon` goes before the label, `iconEnd` after it - either, both or none. `iconColor` /
+`iconEndColor` take a `KptTabIconColor` (`'primary' | 'success' | 'warning' | 'danger' | 'info'`),
+set as `data-color` and mapped to `--kpt-color-<name>`, or any CSS color (`var(--brand-accent)`),
+set inline as `color`. Without a color the icon inherits the tab's text color. Same markup as
+Angular: `<span class="kpt-icon-host kpt-tabs__icon" data-color="success">` inside the button.
+
+    <KptTabs.Tab label="Checks" icon="circle-check" iconColor="success">...</KptTabs.Tab>
+    <KptTabs.Tab label="Issues" icon="bell" iconEnd="alert-triangle" iconEndColor="warning">...</KptTabs.Tab>
+
+## Link tabs
+A tab with `href` is a link to another page or an external service, not a tab: it has no panel
+(its content is ignored), it does not count towards `activeIndex`, and it renders **after** the
+tabs, outside `role="tablist"` - a tablist may only contain tabs, and a link announced as a tab would
+promise a panel that does not exist. In the keyboard order the links come after the tab row and
+before the panel. `target="_blank"` gets `rel="noopener noreferrer"` unless you pass `rel`.
+A disabled link renders as `<span aria-disabled="true">` without `href`.
+
+A plain click (left button, no modifier keys, no `target`) also emits `onNavigate` with
+`{ item, url, event }`; an app with a router calls `event.preventDefault()` and navigates itself,
+without a page reload.
+
+    <KptTabs onNavigate={({ event, url }) => { event.preventDefault(); navigate(url); }}>
+      <KptTabs.Tab label="Overview">...</KptTabs.Tab>
+      <KptTabs.Tab label="Settings" href="/settings" />
+      <KptTabs.Tab label="npm" href="https://www.npmjs.com/package/@konce-pt/react" target="_blank" iconEnd="external-link" />
+    </KptTabs>
+
 ## The underline is measured, not computed
 `__ink` takes its width and offset from the active button in the DOM, not from the index: tabs have
 different widths and the labels change with the language. The measurement runs after every render,
@@ -47,7 +79,7 @@ schedule another render and the component would loop.
 `--kpt-color-border`, `--kpt-motion-easing-standard`.
 
 ## Accessibility
-The header is `role="tablist"` with `role="tab"` buttons carrying `aria-selected`; the body is
+The tab list (`__list`) is `role="tablist"` with `role="tab"` buttons carrying `aria-selected`; the body is
 `role="tabpanel"`, named by the active tab (`aria-labelledby`), which points back at it with
 `aria-controls`. The tab row is a single `Tab` stop (roving `tabindex`): `ArrowLeft`/`ArrowRight`
 move between tabs, wrapping at the ends, `Home`/`End` jump to the first/last one, and disabled tabs

package/dist/tabs/tabs.d.ts

@@ -1,7 +1,27 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KptNavigateEvent } from '../shared/types.ts';
+/** Barwa semantyczna ikony zakładki - nazwa tokenu `--kpt-color-*`. */
+export type KptTabIconColor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 export interface KptTabProps {
     label: string;
     disabled?: boolean;
+    /** Ikona przed etykietą - nazwa z rejestru ikon. */
+    icon?: string;
+    /** Ikona za etykietą - nazwa z rejestru ikon. */
+    iconEnd?: string;
+    /** Kolor ikony przed etykietą: nazwa semantyczna albo dowolna wartość CSS (`var(--brand)`). */
+    iconColor?: KptTabIconColor | (string & {});
+    /** Kolor ikony za etykietą: nazwa semantyczna albo dowolna wartość CSS (`var(--brand)`). */
+    iconEndColor?: KptTabIconColor | (string & {});
+    /**
+     * Adres - zakładka staje się odnośnikiem do strony albo serwisu zewnętrznego. Nie ma panelu
+     * (`children` są pomijane), nie liczy się do `activeIndex` i stoi za zakładkami, poza `tablist`.
+     */
+    href?: string;
+    /** `target` odnośnika, np. `_blank`. */
+    target?: string;
+    /** `rel` odnośnika; przy `target="_blank"` domyślnie `noopener noreferrer`. */
+    rel?: string;
     children?: ReactNode;
 }
 /**
@@ -13,11 +33,17 @@ export declare namespace KptTab {
     var kptTabsSlot: "tab";
 }
 export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    /** Indeks wśród zakładek z panelem - odnośniki (`href`) się nie liczą. */
     activeIndex?: number;
     defaultActiveIndex?: number;
     onActiveIndexChange?: (index: number) => void;
     animated?: boolean;
     animationDuration?: number;
+    /**
+     * Zwykły klik w zakładkę-odnośnik bez `target`. Aplikacja z routerem woła
+     * `event.preventDefault()` i nawiguje sama, bez przeładowania strony.
+     */
+    onNavigate?: (event: KptNavigateEvent<KptTabProps>) => void;
     children?: ReactNode;
 }
 /**
@@ -25,7 +51,10 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
  *
  * Klawiatura według wzorca WAI-ARIA "tabs": rząd zakładek to jeden przystanek Tab, strzałki
  * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
- * aktywują, a kolejny `Tab` prowadzi do panelu.
+ * aktywują, a kolejny `Tab` prowadzi do odnośników (jeśli są) i dalej do panelu.
+ *
+ * Zakładka z `href` jest odnośnikiem: stoi za zakładkami, poza `tablist` (ta może zawierać wyłącznie
+ * zakładki), nie ma panelu i nie liczy się do `activeIndex`.
  *
  * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
  * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
@@ -33,10 +62,10 @@ export interface KptTabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChan
  * @example
  * <KptTabs>
  *   <KptTabs.Tab label="Ogólne">...</KptTabs.Tab>
- *   <KptTabs.Tab label="Zaawansowane">...</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane" iconEnd="settings">...</KptTabs.Tab>
  * </KptTabs>
  */
-export declare function KptTabs({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, className, style, children, ...rest }: Readonly<KptTabsProps>): import("react").JSX.Element;
+export declare function KptTabs({ activeIndex, defaultActiveIndex, onActiveIndexChange, animated, animationDuration, onNavigate, className, style, children, ...rest }: Readonly<KptTabsProps>): import("react").JSX.Element;
 export declare namespace KptTabs {
     var Tab: typeof KptTab;
 }

package/dist/tabs/tabs.js

@@ -1,11 +1,27 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { KptIcon } from "../icon/icon.js";
 import { cn } from "../internal/cn.js";
 import { slotChildren, warnUnslottedChild } from "../internal/slot-children.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { useKptId } from "../internal/use-id.js";
+import { kptIsPlainClick } from "../shared/types.js";
+const ICON_TONES = new Set(['primary', 'success', 'warning', 'danger', 'info']);
+/** Etykieta z ikonami - wspólna dla zakładki i odnośnika. */
+function TabInner({ tab }) {
+    return (_jsxs(_Fragment, { children: [tab.icon && _jsx(TabIcon, { name: tab.icon, color: tab.iconColor }), tab.label, tab.iconEnd && _jsx(TabIcon, { name: tab.iconEnd, color: tab.iconEndColor })] }));
+}
+/**
+ * Ikona zakładki. Nazwa semantyczna idzie w `data-color` (barwa z tokenu, zmienia się z motywem),
+ * a każdy inny napis - np. `var(--brand-accent)` - trafia wprost do `color`. Bez koloru ikona
+ * dziedziczy barwę tekstu zakładki.
+ */
+function TabIcon({ name, color }) {
+    const tone = color && ICON_TONES.has(color) ? color : undefined;
+    return (_jsx(KptIcon, { className: "kpt-tabs__icon", name: name, "data-color": tone, style: color && !tone ? { color } : undefined }));
+}
 /**
  * Pojedyncza zakładka. Umieszczaj w `<KptTabs>`. Treść renderuje się leniwie - dopiero gdy
  * zakładka jest aktywna, tak samo jak szablon `kpt-tab` w porcie Angulara.
@@ -21,7 +37,10 @@ KptTab.kptTabsSlot = 'tab';
  *
  * Klawiatura według wzorca WAI-ARIA "tabs": rząd zakładek to jeden przystanek Tab, strzałki
  * w lewo/prawo oraz `Home`/`End` przechodzą po zakładkach (z pominięciem wyłączonych) i od razu je
- * aktywują, a kolejny `Tab` prowadzi do panelu.
+ * aktywują, a kolejny `Tab` prowadzi do odnośników (jeśli są) i dalej do panelu.
+ *
+ * Zakładka z `href` jest odnośnikiem: stoi za zakładkami, poza `tablist` (ta może zawierać wyłącznie
+ * zakładki), nie ma panelu i nie liczy się do `activeIndex`.
  *
  * Podkreślenie aktywnej zakładki (`__ink`) jest mierzone z DOM przycisku, nie liczone z indeksu:
  * zakładki mają różne szerokości, a etykiety zmieniają się z językiem.
@@ -29,10 +48,10 @@ KptTab.kptTabsSlot = 'tab';
  * @example
  * <KptTabs>
  *   <KptTabs.Tab label="Ogólne">...</KptTabs.Tab>
- *   <KptTabs.Tab label="Zaawansowane">...</KptTabs.Tab>
+ *   <KptTabs.Tab label="Zaawansowane" iconEnd="settings">...</KptTabs.Tab>
  * </KptTabs>
  */
-export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, className, style, children, ...rest }) {
+export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChange, animated = true, animationDuration = 500, onNavigate, className, style, children, ...rest }) {
     const [active, setActive] = useControllableState({
         value: activeIndex,
         defaultValue: defaultActiveIndex,
@@ -43,6 +62,7 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
     const buttonsRef = useRef([]);
     const baseId = useKptId(undefined, 'kpt-tabs');
     const tabs = [];
+    const links = [];
     const contents = [];
     for (const child of slotChildren(children)) {
         if (!isValidElement(child) || child.type?.kptTabsSlot !== 'tab') {
@@ -50,9 +70,18 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
             continue;
         }
         const props = child.props;
+        if (props.href) {
+            links.push(props);
+            continue;
+        }
         tabs.push(props);
         contents.push(props.children);
     }
+    const onLinkClick = (event, link) => {
+        if (link.href && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
+            onNavigate({ item: link, url: link.href, event: event.nativeEvent });
+        }
+    };
     const disabled = tabs.map((tab) => !!tab.disabled);
     /**
      * Zakładka pokazywana i jedyna w kolejności Tab: aktywna, a gdy ta jest wyłączona - pierwsza
@@ -102,8 +131,11 @@ export function KptTabs({ activeIndex, defaultActiveIndex = 0, onActiveIndexChan
             ['--kpt-anim-duration']: `${animated ? animationDuration : 0}ms`,
             ['--kpt-anim-dir']: direction,
             ...style,
-        }, ...rest, children: [_jsxs("div", { ref: headerRef, className: "kpt-tabs__header", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
-                            buttonsRef.current[index] = el;
-                        }, type: "button", className: cn('kpt-tabs__tab', index === shown && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === shown, "aria-controls": index === shown ? `${baseId}-panel` : undefined, tabIndex: index === shown ? 0 : -1, onClick: () => select(index), children: tab.label }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${shown}`, children: contents[shown] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[shown] }, shown)) : null })] }));
+        }, ...rest, children: [_jsxs("div", { ref: headerRef, className: "kpt-tabs__header", children: [_jsxs("div", { className: "kpt-tabs__list", role: "tablist", onKeyDown: onKeyDown, children: [tabs.map((tab, index) => (_jsx("button", { ref: (el) => {
+                                    buttonsRef.current[index] = el;
+                                }, type: "button", className: cn('kpt-tabs__tab', index === shown && 'is-active'), role: "tab", id: `${baseId}-tab-${index}`, disabled: tab.disabled, "aria-selected": index === shown, "aria-controls": index === shown ? `${baseId}-panel` : undefined, tabIndex: index === shown ? 0 : -1, onClick: () => select(index), children: _jsx(TabInner, { tab: tab }) }, index))), _jsx("span", { className: "kpt-tabs__ink", style: { width: ink.w, transform: `translateX(${ink.x}px)` } })] }), links.length > 0 && (_jsx("div", { className: "kpt-tabs__links", children: links.map((link, index) => 
+                        // Wyłączony odnośnik nie jest `<a>` - z `href` dałoby się go otworzyć klawiaturą albo
+                        // środkowym przyciskiem, a `<a>` bez `href` i tak nie jest już odnośnikiem.
+                        link.disabled ? (_jsx("span", { className: "kpt-tabs__tab kpt-tabs__link", role: "link", "aria-disabled": "true", children: _jsx(TabInner, { tab: link }) }, index)) : (_jsx("a", { className: "kpt-tabs__tab kpt-tabs__link", href: link.href, target: link.target, rel: link.rel ?? (link.target === '_blank' ? 'noopener noreferrer' : undefined), onClick: (event) => onLinkClick(event, link), children: _jsx(TabInner, { tab: link }) }, index))) }))] }), _jsx("div", { className: "kpt-tabs__body", role: "tabpanel", tabIndex: 0, id: `${baseId}-panel`, "aria-labelledby": `${baseId}-tab-${shown}`, children: contents[shown] !== undefined ? (_jsx("div", { className: "kpt-tabs__panel", children: contents[shown] }, shown)) : null })] }));
 }
 KptTabs.Tab = KptTab;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Open-source React 19 component library on the Koncept UI design system - the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,19 +65,19 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/chart": "0.16.0",
-    "@konce-pt/icons": "0.16.0",
-    "@konce-pt/chat": "0.16.0",
-    "@konce-pt/datetime": "0.16.0",
-    "@konce-pt/roadmap": "0.16.0",
-    "@konce-pt/speech": "0.16.0",
-    "@konce-pt/table": "0.16.0",
-    "@konce-pt/backdrop": "0.16.0",
-    "@konce-pt/map": "0.16.0",
-    "@konce-pt/motion": "0.16.0",
-    "@konce-pt/tokens": "0.16.0",
-    "@konce-pt/i18n": "0.16.0",
-    "@konce-pt/mention": "0.16.0"
+    "@konce-pt/chart": "0.17.0",
+    "@konce-pt/chat": "0.17.0",
+    "@konce-pt/backdrop": "0.17.0",
+    "@konce-pt/mention": "0.17.0",
+    "@konce-pt/motion": "0.17.0",
+    "@konce-pt/roadmap": "0.17.0",
+    "@konce-pt/icons": "0.17.0",
+    "@konce-pt/datetime": "0.17.0",
+    "@konce-pt/table": "0.17.0",
+    "@konce-pt/speech": "0.17.0",
+    "@konce-pt/i18n": "0.17.0",
+    "@konce-pt/tokens": "0.17.0",
+    "@konce-pt/map": "0.17.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",