@konce-pt/react 0.12.0 → 0.14.0

package/dist/avatar/avatar.js

@@ -4,12 +4,12 @@ import { useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptIcon } from "../icon/icon.js";
 /**
- * Awatar — obraz, inicjały (z `name`) lub ikona.
+ * Awatar - obraz, inicjały (z `name`) lub ikona.
  *
- * `name` trafia do natywnego `title` (podpowiedź spod kursora — inicjały same w sobie nie mówią,
+ * `name` trafia do natywnego `title` (podpowiedź spod kursora - inicjały same w sobie nie mówią,
  * kto to jest). Bez `src` awatar dostaje dodatkowo `role="img"` i `aria-label`, a same inicjały
- * są `aria-hidden`, żeby czytnik nie przeczytał „AK" litera po literze. Przy `src` etykietę
- * niesie już `alt` obrazu — nie dublujemy jej.
+ * są `aria-hidden`, żeby czytnik nie przeczytał "AK" litera po literze. Przy `src` etykietę
+ * niesie już `alt` obrazu - nie dublujemy jej.
  *
  * @example
  * <KptAvatar src="/u/anna.jpg" />
@@ -18,7 +18,7 @@ import { KptIcon } from "../icon/icon.js";
  */
 export function KptAvatar({ src = null, name = '', icon = null, size = 'md', shape = 'circle', decorative = false, hostProps, className, ...rest }) {
     const { className: hostClassName, ...hostRest } = hostProps ?? {};
-    // Zdjęcie, które się nie wczytało — awatar wraca wtedy do inicjałów (albo ikony). Pamiętamy,
+    // Zdjęcie, które się nie wczytało - awatar wraca wtedy do inicjałów (albo ikony). Pamiętamy,
     // którego `src` dotyczy błąd, więc nowy adres próbuje się wczytać od nowa.
     const [brokenSrc, setBrokenSrc] = useState(null);
     const showImage = !!src && brokenSrc !== src;

package/dist/avatar/llms.txt

@@ -1,32 +1,32 @@
 # KptAvatar (@konce-pt/react)
 
-An avatar — a photo, initials (from `name`) or an icon.
+An avatar - a photo, initials (from `name`) or an icon.
 Import: `import { KptAvatar } from '@konce-pt/react';`
 
 ## DOM
     <span class="kpt-avatar-host">
       <span class="kpt-avatar" data-size="md" data-shape="circle" title="Anna Kowalska">
-        <img class="kpt-avatar__img" src="…" alt="Anna Kowalska">
+        <img class="kpt-avatar__img" src="..." alt="Anna Kowalska">
       </span>
     </span>
 
 ## Props
-- `src`: string | null — a photo; it wins over initials and the icon
-- `name`: string — the source of the initials, the `title` and the accessible label
-- `icon`: string | null — a registry icon name, used when there is neither photo nor name
+- `src`: string | null - a photo; it wins over initials and the icon
+- `name`: string - the source of the initials, the `title` and the accessible label
+- `icon`: string | null - a registry icon name, used when there is neither photo nor name
 - `size`: 'sm' | 'md' | 'lg' | 'xl' (default 'md')
 - `shape`: 'circle' | 'square' (default 'circle')
-- `decorative`: boolean — hides the avatar from screen readers (the name is written next to it)
-- `hostProps` — props for the `.kpt-avatar-host` wrapper
+- `decorative`: boolean - hides the avatar from screen readers (the name is written next to it)
+- `hostProps` - props for the `.kpt-avatar-host` wrapper
 - `className`, `ref` and every other `<span>` prop go to the inner `.kpt-avatar`
 
 ## Fallback order
-`src` → `name` (up to two initials, uppercased) → `icon`. A photo that fails to load drops to the
+`src` -> `name` (up to two initials, uppercased) -> `icon`. A photo that fails to load drops to the
 next step by itself, and a new `src` is tried again. With none of them the avatar renders as an
 empty shape, which is a valid placeholder.
 
 ## Positioning inside a parent
-The host is the layout element, so classes that place the avatar in its parent go to `hostProps` —
+The host is the layout element, so classes that place the avatar in its parent go to `hostProps` -
 the overlapping avatar on a card is `hostProps={{ className: 'kpt-card__avatar' }}`.
 
 ## Examples
@@ -42,5 +42,5 @@ the overlapping avatar on a card is `hostProps={{ className: 'kpt-card__avatar'
 `name` goes into the native `title` (initials alone say nothing). With a photo the name is the
 image's `alt`; without one the avatar is `role="img"` with `aria-label`, and the initials are
 `aria-hidden`. A photo that fails to load falls back to the initials (or the icon); a new `src` is
-tried again. `decorative` removes the avatar from the accessibility tree — use it when the name is
+tried again. `decorative` removes the avatar from the accessibility tree - use it when the name is
 already written next to it.

package/dist/avatar-group/avatar-group.d.ts

@@ -8,15 +8,15 @@ export interface KptAvatarItem {
 }
 export interface KptAvatarGroupProps extends ComponentPropsWithRef<'div'>, KptI18nOverrides {
     avatars?: readonly KptAvatarItem[];
-    /** Ile awatarów pokazać, zanim pojawi się „+N". */
+    /** Ile awatarów pokazać, zanim pojawi się "+N". */
     max?: number;
     size?: KptAvatarSize;
-    /** Nazwa grupy dla czytników ekranu, np. „Członkowie projektu”; bez niej grupa nie ma roli. */
+    /** Nazwa grupy dla czytników ekranu, np. "Członkowie projektu"; bez niej grupa nie ma roli. */
     label?: string;
 }
 /**
- * Grupa nakładających się awatarów z licznikiem „+N". Buduje na `KptAvatar`, więc każdy element
- * dziedziczy jego `title` z imieniem — inicjały same w sobie nie mówią, kto to jest.
+ * Grupa nakładających się awatarów z licznikiem "+N". Buduje na `KptAvatar`, więc każdy element
+ * dziedziczy jego `title` z imieniem - inicjały same w sobie nie mówią, kto to jest.
  *
  * @example
  * <KptAvatarGroup avatars={team} max={4} />

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

@@ -4,8 +4,8 @@ import { cn } from "../internal/cn.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptAvatar } from "../avatar/avatar.js";
 /**
- * Grupa nakładających się awatarów z licznikiem „+N". Buduje na `KptAvatar`, więc każdy element
- * dziedziczy jego `title` z imieniem — inicjały same w sobie nie mówią, kto to jest.
+ * Grupa nakładających się awatarów z licznikiem "+N". Buduje na `KptAvatar`, więc każdy element
+ * dziedziczy jego `title` z imieniem - inicjały same w sobie nie mówią, kto to jest.
  *
  * @example
  * <KptAvatarGroup avatars={team} max={4} />
@@ -14,7 +14,7 @@ export function KptAvatarGroup({ avatars = [], max = 4, size = 'md', label = '',
     const { t } = useKptMessages({ locale, dictionary });
     const shown = avatars.slice(0, max);
     const overflow = Math.max(0, avatars.length - max);
-    // Sam „+2” nic czytnikowi nie mówi — licznik ma nazwę „i 2 więcej” i podpowiedź z imionami.
+    // Sam "+2" nic czytnikowi nie mówi - licznik ma nazwę "i 2 więcej" i podpowiedź z imionami.
     const hiddenNames = avatars
         .slice(max)
         .map((avatar) => avatar.name)

package/dist/avatar-group/llms.txt

@@ -6,22 +6,22 @@ Import: `import { KptAvatarGroup } from '@konce-pt/react';`
 ## DOM
     <div class="kpt-avatar-group-host">
       <div class="kpt-avatar-group" data-size="lg" role="group" aria-label="Project members">
-        <span class="kpt-avatar-group__item">…KptAvatar…</span>…
+        <span class="kpt-avatar-group__item">...KptAvatar...</span>...
         <span class="kpt-avatar-group__item kpt-avatar-group__more" role="img" data-size="lg"
               aria-label="2 more" title="Marta, Tomasz"><span aria-hidden="true">+2</span></span>
       </div>
     </div>
 
 ## Props
-- `avatars`: `KptAvatarItem[]` — `{ name?, src?, icon? }`
-- `max`: number (default 4) — how many to show before "+N"
+- `avatars`: `KptAvatarItem[]` - `{ name?, src?, icon? }`
+- `max`: number (default 4) - how many to show before "+N"
 - `size`: `'sm' | 'md' | 'lg' | 'xl'`
-- `label`: string — the group's name; with it the row is `role="group"`
+- `label`: string - the group's name; with it the row is `role="group"`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## One list, three fallbacks
-Each entry falls back in order: `src` (a photo) → `name` (initials) → `icon`. A team where only
-some people have a photo therefore needs no branching at the call site — which is exactly the
+Each entry falls back in order: `src` (a photo) -> `name` (initials) -> `icon`. A team where only
+some people have a photo therefore needs no branching at the call site - which is exactly the
 common case.
 
 ## The name survives the overlap
@@ -36,6 +36,6 @@ Every avatar keeps the `title` from `KptAvatar`, so hovering tells you who it is
 The overlap ring uses `--kpt-color-surface`, the "+N" chip `--kpt-color-muted`.
 
 ## Accessibility
-Every avatar keeps its own name. With `label` the row is `role="group"` with that name. The “+N”
-counter is `role="img"` named from `avatarGroup.more` (`{count}` — “2 more”), with the hidden names
+Every avatar keeps its own name. With `label` the row is `role="group"` with that name. The "+N"
+counter is `role="img"` named from `avatarGroup.more` (`{count}` - "2 more"), with the hidden names
 in its `title`. The overlap uses `margin-inline-start`, so it mirrors in RTL.

package/dist/backdrop/backdrop.d.ts

@@ -8,22 +8,22 @@ export interface KptBackdropProps extends ComponentPropsWithRef<'div'> {
     background?: string;
     /** Tempo; 1 to spokojne tempo obu efektów, 0 zatrzymuje obraz. */
     speed?: number;
-    /** Ziarno losowania — ta sama wartość daje ten sam układ kwadratów i ten sam przebieg wstęgi. */
+    /** Ziarno losowania - ta sama wartość daje ten sam układ kwadratów i ten sam przebieg wstęgi. */
     seed?: number;
     /** Zatrzymuje animację, zostawiając ostatnią klatkę. */
     paused?: boolean;
     /**
      * Przenosi barwy wpisane na sztywno na powierzchnię bieżącego motywu: czerń dobrana do białego
-     * tła staje się bielą, gdy tło jest ciemne. Rusza wyłącznie jasność — odcień i nasycenie
+     * tła staje się bielą, gdy tło jest ciemne. Rusza wyłącznie jasność - odcień i nasycenie
      * zostają, więc barwa marki nie zmienia się w inną barwę.
      *
      * Dotyczy `color`, `colors` i `background`, ale tylko wtedy, gdy podano je literałem. Prop pusty
-     * bierze token, a zapis z `var()` sam po token sięga — jedno i drugie już idzie za motywem
+     * bierze token, a zapis z `var()` sam po token sięga - jedno i drugie już idzie za motywem
      * i adaptacja odwróciłaby je drugi raz.
      */
     adaptive?: boolean;
     /**
-     * `signal-grid`: kolor kwadratów — dowolny zapis CSS, także sięgający po tokeny, np.
+     * `signal-grid`: kolor kwadratów - dowolny zapis CSS, także sięgający po tokeny, np.
      * `color-mix(in oklab, #5b8af2, var(--kpt-color-surface) 30%)`. Taki zapis przelicza się przy
      * zmianie motywu; literał zostaje literałem. Puste bierze `--kpt-color-primary`.
      */
@@ -34,14 +34,14 @@ export interface KptBackdropProps extends ComponentPropsWithRef<'div'> {
     cell?: number;
     /** `signal-grid`: odstęp między kwadratami (px). */
     gap?: number;
-    /** `signal-grid`: udział zapalonych komórek przy kotwicy, 0–1. */
+    /** `signal-grid`: udział zapalonych komórek przy kotwicy, 0-1. */
     density?: number;
     /** `signal-grid`: jak szybko siatka gaśnie ku przeciwnej krawędzi. */
     falloff?: number;
     /**
-     * `wave`: rampa barw, po której przesuwa się wstęga — każdy przystanek dowolnym zapisem CSS.
+     * `wave`: rampa barw, po której przesuwa się wstęga - każdy przystanek dowolnym zapisem CSS.
      * Zamknięta w pętlę, więc ostatnia barwa wraca do pierwszej. Pusta bierze `--kpt-color-primary`
-     * i dwie barwy wyprowadzone z niego obrotem odcienia — paleta biblioteki jest neutralna, więc
+     * i dwie barwy wyprowadzone z niego obrotem odcienia - paleta biblioteki jest neutralna, więc
      * domyślna wstęga jest jednobarwna i przygaszona. Po kolory sięga się tu, nie do tokenów
      * statusowych. Zapis może sięgać po tokeny i wtedy idzie za motywem. Przystanek, którego
      * przeglądarka nie uznaje za kolor, wypada z rampy; gdy wypadną wszystkie, zostaje rampa

package/dist/backdrop/backdrop.js

@@ -11,11 +11,11 @@ const EMPTY = [];
  * obraz kosztowałyby transfer i nie poszłyby za motywem.
  *
  * Komponent jest opakowaniem: canvas leży pod spodem, a dzieci idą warstwę wyżej i zachowują się
- * zwyczajnie. Rysowanie stoi, gdy nie ma czego oglądać — sekcja poza ekranem, karta w tle,
+ * zwyczajnie. Rysowanie stoi, gdy nie ma czego oglądać - sekcja poza ekranem, karta w tle,
  * `paused`, `speed` równe zeru albo ograniczony ruch w systemie; wtedy zostaje jedna statyczna
  * klatka zamiast pustki, bo efekt jest częścią kompozycji, nie ozdobą.
  *
- * Rysowanie i cała matematyka siedzą w `@konce-pt/backdrop`, wspólnym z portem Angulara —
+ * Rysowanie i cała matematyka siedzą w `@konce-pt/backdrop`, wspólnym z portem Angulara -
  * ten komponent to sam cykl życia.
  *
  * @example
@@ -25,7 +25,7 @@ const EMPTY = [];
  * </KptBackdrop>
  */
 const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
-/** `prefers-reduced-motion` jako zewnętrzny magazyn — bez `setState` w efekcie i bez mignięcia ruchu. */
+/** `prefers-reduced-motion` jako zewnętrzny magazyn - bez `setState` w efekcie i bez mignięcia ruchu. */
 function subscribeReducedMotion(onChange) {
     if (typeof matchMedia === 'undefined')
         return () => undefined;
@@ -42,16 +42,16 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
     const context = useRef(null);
     const renderer = useRef(null);
     const size = useRef({ width: 0, height: 0 });
-    /** Zegar animacji w sekundach — w refie, żeby przebudowa renderera nie cofała obrazu. */
+    /** Zegar animacji w sekundach - w refie, żeby przebudowa renderera nie cofała obrazu. */
     const clock = useRef(0);
-    /** Kolor wiodący, z którym zbudowany jest bieżący renderer — punkt odniesienia dla zmiany motywu. */
+    /** Kolor wiodący, z którym zbudowany jest bieżący renderer - punkt odniesienia dla zmiany motywu. */
     const lead = useRef('');
-    /** Ostatnio zgłoszony zestaw odrzuconych barw — żeby nie powtarzać tego samego ostrzeżenia. */
+    /** Ostatnio zgłoszony zestaw odrzuconych barw - żeby nie powtarzać tego samego ostrzeżenia. */
     const reported = useRef('');
-    /** Tło po adaptacji. Puste znaczy „nie ma czego podmieniać" i wtedy liczy się samo `background`. */
+    /** Tło po adaptacji. Puste znaczy "nie ma czego podmieniać" i wtedy liczy się samo `background`. */
     const [adapted, setAdapted] = useState('');
     /**
-     * Ton i kolor treści dobrane do malowanego tła. Puste znaczy „sekcja nie ma własnego tła"
+     * Ton i kolor treści dobrane do malowanego tła. Puste znaczy "sekcja nie ma własnego tła"
      * i wtedy treść zostaje przy `--kpt-color-on-surface` ze stylu.
      */
     const [ink, setInk] = useState({ tone: '', color: '' });
@@ -81,10 +81,10 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
     // Tablica barw przychodzi nowa przy każdym renderze rodzica, więc do zależności idzie jej treść.
     const ramp = colors.join('|');
     const list = useMemo(() => (ramp === '' ? EMPTY : ramp.split('|')), [ramp]);
-    // Każda zmiana wejść buduje renderer od nowa — zamiast doklejać ścieżki „co się zmieniło".
+    // Każda zmiana wejść buduje renderer od nowa - zamiast doklejać ścieżki "co się zmieniło".
     useEffect(() => {
         // Kolory rozwiązuje się na canvasie, nie na hoście: sonda `var()` pisze inline style, a nasłuch
-        // motywu ogląda `style` hosta i jego przodków — zapis na hoście zapętliłby przebudowy.
+        // motywu ogląda `style` hosta i jego przodków - zapis na hoście zapętliłby przebudowy.
         const scope = canvas.current;
         if (!scope)
             return undefined;
@@ -93,10 +93,10 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
         lead.current = resolved.color;
         const painted = adaptive ? adaptBackdropValue(background, readBackdropSurface(scope)) : background;
         setAdapted(adaptive ? painted : '');
-        // Ton liczymy z tła, które sekcja naprawdę pomaluje — czyli już po adaptacji.
+        // Ton liczymy z tła, które sekcja naprawdę pomaluje - czyli już po adaptacji.
         setInk(readBackdropInk(scope, painted));
         // Efekt chodzi przy każdej zmianie wejść, więc ciągnięcie suwaka nad wadliwą rampą zasypałoby
-        // konsolę tym samym zdaniem — zgłaszamy dopiero zestaw inny niż poprzednio.
+        // konsolę tym samym zdaniem - zgłaszamy dopiero zestaw inny niż poprzednio.
         const rejected = resolved.invalid.join(', ');
         if (rejected !== reported.current) {
             reported.current = rejected;
@@ -126,7 +126,7 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
             renderer.current = null;
         };
     }, [effect, color, list, anchor, cell, gap, density, falloff, rotation, band, amplitude, seed, adaptive, background, theme, measure, paint]);
-    // Sam rozmiar nie zmienia ustawień, więc renderer zostaje — przelicza tylko geometrię.
+    // Sam rozmiar nie zmienia ustawień, więc renderer zostaje - przelicza tylko geometrię.
     useEffect(() => {
         const element = canvas.current;
         if (!element)
@@ -157,7 +157,7 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
             document.removeEventListener('visibilitychange', onTabSwitch);
         };
     }, []);
-    // Zmiana motywu przestawia tokeny, a kolory renderera są już wyliczone — trzeba je odczytać
+    // Zmiana motywu przestawia tokeny, a kolory renderera są już wyliczone - trzeba je odczytać
     // na nowo. Nasłuch trafia też w zmiany niezwiązane z barwą, więc licznik podbija się dopiero
     // wtedy, gdy odczyt naprawdę dał inny kolor.
     useEffect(() => {
@@ -168,7 +168,7 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
             const scope = canvas.current;
             if (!scope)
                 return;
-            // Ten sam rachunek co w efekcie budującym — inaczej strażnik porównywałby wartość sprzed
+            // Ten sam rachunek co w efekcie budującym - inaczej strażnik porównywałby wartość sprzed
             // adaptacji z zapamiętaną po adaptacji i podbijałby licznik bez przerwy.
             const next = adaptive ? adaptBackdropValue(color, readBackdropSurface(scope)) : color;
             if (readBackdropLead(scope, next) === lead.current)
@@ -184,7 +184,7 @@ export function KptBackdrop({ effect = 'signal-grid', background = '', speed = 1
         const tick = (now) => {
             const step = last === 0 ? 0 : Math.min(now - last, KPT_BACKDROP_MAX_STEP);
             last = now;
-            // Prędkość wchodzi w zegar, nie w fazę — suwak przyspiesza obraz zamiast go przeskakiwać. Pętla
+            // Prędkość wchodzi w zegar, nie w fazę - suwak przyspiesza obraz zamiast go przeskakiwać. Pętla
             // restartuje się przy zmianie `speed` (zależność efektu), a zegar żyje w refie, więc nic nie skacze.
             clock.current += (step / 1000) * speed;
             paint();

package/dist/backdrop/llms.txt

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

package/dist/badge/badge.d.ts

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

package/dist/badge/badge.js

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

package/dist/badge/llms.txt

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

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

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

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

@@ -8,13 +8,13 @@ import { useKptMessages } from "../i18n/i18n-context.js";
 /**
  * Arkusz wysuwany z dołu ekranu.
  *
- * Arkusz zostaje w DOM także zamknięty — chowa go `transform` i `visibility`, nigdy
+ * Arkusz zostaje w DOM także zamknięty - chowa go `transform` i `visibility`, nigdy
  * `display: none`, bo inaczej animacje wjazdu i zjazdu nie miałyby od czego wystartować.
  * `visibility` wyjmuje go przy tym z kolejności Tab i z drzewa dostępności bez `inert`,
  * i robi to już na pierwszej klatce.
  *
  * @example
- * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">…</KptBottomSheet>
+ * <KptBottomSheet open={open} onOpenChange={setOpen} header="Udostępnij">...</KptBottomSheet>
  */
 export function KptBottomSheet({ open, onOpenChange, header = '', ariaLabel = '', closeOnBackdrop = true, locale, dictionary, className, children, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });

package/dist/bottom-sheet/llms.txt

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