@konce-pt/angular 0.7.11 → 0.8.0

package/src/lib/auth/llms.txt

@@ -1,78 +1,78 @@
 # KptAuth (kpt-auth)
 
-Ekran uwierzytelniania: logowanie, rejestracja i odzyskiwanie hasła w jednym komponencie,
-z panelem promocyjnym i listą dostawców zewnętrznych (OAuth/SSO). Signal Forms.
-Komponent jest **prezentacyjny** — nie woła API i nie nawiguje; robi to aplikacja w handlerach.
+An authentication screen: sign in, sign up and password recovery in one component,
+with a promo panel and a list of external providers (OAuth/SSO). Signal Forms.
+The component is **presentational** — it does not call an API and does not navigate; the app does that in the handlers.
 Import: `import { KptAuth, KptAuthProviderDef } from '@konce-pt/angular';`
 
-## Selektor
+## Selector
 `kpt-auth`
 
-## Wejścia
-- `mode`: model<'signIn' | 'signUp' | 'forgot'> = 'signIn' — dwukierunkowy (aplikacja może wymusić tryb)
-- `layout`: 'slider' | 'split' = 'slider' — panel promocyjny przejeżdża na drugą stronę / stoi w miejscu
+## Inputs
+- `mode`: model<'signIn' | 'signUp' | 'forgot'> = 'signIn' — two-way (the app can force a mode)
+- `layout`: 'slider' | 'split' = 'slider' — the promo panel slides to the other side / stays put
 - `providers`: KptAuthProvider[] = [] — `{ id, label, icon?, iconUrl?, description? }`
-- `providerLayout`: 'list' | 'grid' = 'list' — lista pełnej szerokości / siatka ikon z podpisami
-- `showName`, `requireTerms`, `showRemember`: boolean = true — obecność pól
-- `busy`: boolean — przyciski w stanie ładowania, dostawcy zablokowani
-- `error` / `notice`: string | null — komunikat serwera (kpt-alert `danger` / `success`)
-- `promoTitle` / `promoText`: string | null — `null` = tekst z i18n zależny od trybu,
-  `''` = ukryj (miejsce na slot `[kptAuthPromo]`)
+- `providerLayout`: 'list' | 'grid' = 'list' — a full-width list / a grid of icons with captions
+- `showName`, `requireTerms`, `showRemember`: boolean = true — whether the fields are present
+- `busy`: boolean — the buttons go into a loading state, the providers are blocked
+- `error` / `notice`: string | null — a server message (a `danger` / `success` kpt-alert)
+- `promoTitle` / `promoText`: string | null — `null` = mode-dependent text from i18n,
+  `''` = hide it (making room for the `[kptAuthPromo]` slot)
 - `animated`: boolean = true; `animationDuration`: number = 320 (ms)
 
-## Wyjścia
+## Outputs
 - `signIn`: { email, password, remember }
 - `signUp`: { name, email, password, terms }
 - `resetPassword`: { email }
-- `providerSelect`: KptAuthProvider — wybrany dostawca (pełny obiekt, nie samo `id`)
-- `modeChange` — z `model` `mode`
+- `providerSelect`: KptAuthProvider — the chosen provider (the whole object, not just the `id`)
+- `modeChange` — from the `mode` model
 
-## Projekcja
-- `[kptAuthBrand]` — logo/nazwa nad nagłówkiem
-- `[kptAuthPromo]` — treść panelu promocyjnego (pod tytułem/tekstem, nad CTA)
-- `[kptAuthSso]` — przycisk logowania firmowego **nad** separatorem dostawców
-- `[kptAuthFields]` — dodatkowe pola wewnątrz `<form>` (logowanie i rejestracja)
-- `[kptAuthFooter]` — stopka (regulamin, prawa autorskie)
-- `ng-template[kptAuthProvider]="id"` (`KptAuthProviderDef`) — własny markup jednego dostawcy;
-  kontekst: `$implicit` = dostawca, `select` = funkcja zgłaszająca wybór
+## Content projection
+- `[kptAuthBrand]` — a logo/name above the heading
+- `[kptAuthPromo]` — the promo panel's content (below the title/text, above the CTA)
+- `[kptAuthSso]` — an enterprise sign-in button **above** the provider separator
+- `[kptAuthFields]` — extra fields inside the `<form>` (sign in and sign up)
+- `[kptAuthFooter]` — the footer (terms, copyright)
+- `ng-template[kptAuthProvider]="id"` (`KptAuthProviderDef`) — custom markup for a single provider;
+  context: `$implicit` = the provider, `select` = the function that reports the choice
 
-**Pola ze slotu `[kptAuthFields]` nie wchodzą do modelu komponentu.** Konsument wiąże je do
-własnego formularza i czyta w handlerze `signIn`/`signUp` — w emitowanej wartości ich nie ma.
+**Fields from the `[kptAuthFields]` slot do not enter the component's model.** The consumer binds them to
+their own form and reads them in the `signIn`/`signUp` handler — they are not part of the emitted value.
 
-## Walidacja
-Trzy niezależne formularze (po jednym na tryb), walidatory bezwarunkowe: e-mail wymagany
-i poprawny, hasło wymagane (rejestracja: min. 8 znaków), zgodność hasła i powtórzenia
-(`validateTree`), zgoda wymagana gdy `requireTerms`. Komunikaty składane są z `kind` błędu
-w czasie renderowania, więc **zmiana języka w runtime przerysowuje je** (walidatory tworzą się raz).
-Błąd pokazuje się dopiero po dotknięciu pola; `submit()` sam oznacza całe drzewo jako dotknięte.
+## Validation
+Three independent forms (one per mode), with unconditional validators: e-mail required
+and valid, password required (sign up: at least 8 characters), the password and its confirmation matching
+(`validateTree`), consent required when `requireTerms`. Messages are composed from the error's `kind`
+at render time, so **changing the language at runtime repaints them** (the validators are created once).
+An error appears only once the field has been touched; `submit()` marks the whole tree as touched itself.
 
-## Ikony dostawców
-Rdzeń nie zawiera ikon marek. Trzy drogi:
-1. `provideKptTablerIcons()` z `@konce-pt/angular/icons` → `icon: 'brand-google'`,
+## Provider icons
+The core carries no brand icons. Three ways around it:
+1. `provideKptTablerIcons()` from `@konce-pt/angular/icons` → `icon: 'brand-google'`,
    `'brand-facebook'`, `'brand-linkedin'`, `'brand-windows'`, `'brand-apple'`, `'brand-github'`, `'key'`.
-2. `KptIconRegistry.register({ google: '<path …/>' })` — uwaga: sanityzator przepuszcza
-   `fill`/`stroke`/`opacity`, ale wycina `defs`/gradienty i `fill-rule`, a `viewBox` jest ustalony
-   na `0 0 24 24`. Wielokolorowe logo wymaga jawnego `fill` na każdej ścieżce.
-3. `iconUrl` (zwykły `<img alt="">`) albo szablon `kptAuthProvider` — dla logo z gradientem.
+2. `KptIconRegistry.register({ google: '<path …/>' })` — note: the sanitizer lets
+   `fill`/`stroke`/`opacity` through, but strips `defs`/gradients and `fill-rule`, and the `viewBox` is fixed
+   at `0 0 24 24`. A multi-color logo needs an explicit `fill` on every path.
+3. `iconUrl` (a plain `<img alt="">`) or the `kptAuthProvider` template — for a logo with a gradient.
 
-Ikona jest dekoracyjna (`kpt-icon` ma `aria-hidden`), więc nazwa dostępna przycisku zawsze
-pochodzi z `label`.
+The icon is decorative (`kpt-icon` carries `aria-hidden`), so the button's accessible name always
+comes from `label`.
 
-## Dostępność
-- W drzewie żyje **wyłącznie formularz aktywnego trybu** — nie ma elementów niewidocznych,
-  ale wciąż fokusowalnych.
-- Nagłówek panelu ma `tabindex="-1"` i dostaje fokus po zmianie trybu (inaczej zmiana nie
-  zostaje ogłoszona, a fokus zostaje na przycisku, który zjechał z ekranu).
-- Etykiety przez `kpt-form-field` + `controlId`; `autocomplete`: `email`, `current-password`,
+## Accessibility
+- Only the **active mode's form** lives in the DOM — there are no invisible but still
+  focusable elements.
+- The panel heading carries `tabindex="-1"` and takes focus after a mode change (otherwise the change is not
+  announced, and focus stays on a button that has slid off screen).
+- Labels through `kpt-form-field` + `controlId`; `autocomplete`: `email`, `current-password`,
   `new-password`, `name`.
-- Przełączniki trybu to `<button>` z tekstem, nie `<a href="#">`.
-- `prefers-reduced-motion` wyłącza przejazdy i wjazd treści.
+- The mode switches are `<button>` elements with text, not `<a href="#">`.
+- `prefers-reduced-motion` disables the slide and the content's entrance.
 
-## Stylowanie
-Publiczne zmienne: `--kpt-auth-width` (64rem), `--kpt-auth-card-height` (34rem),
-`--kpt-auth-min-height` (100dvh), `--kpt-auth-promo-bg` (własny gradient marki),
+## Styling
+Public variables: `--kpt-auth-width` (64rem), `--kpt-auth-card-height` (34rem),
+`--kpt-auth-min-height` (100dvh), `--kpt-auth-promo-bg` (your own brand gradient),
 `--kpt-auth-padding`, `--kpt-auth-card-radius` / `--kpt-auth-card-border` / `--kpt-auth-card-shadow`.
-Wariant na całe okno (karta bez ramki, od krawędzi do krawędzi):
+The full-window variant (a borderless card, edge to edge):
 
     kpt-auth {
       --kpt-auth-padding: 0;
@@ -82,9 +82,9 @@ Wariant na całe okno (karta bez ramki, od krawędzi do krawędzi):
       --kpt-auth-card-border: 0;
       --kpt-auth-card-shadow: none;
     }
-Poniżej breakpointu `md` układ schodzi do jednej kolumny (promo nad formularzem, bez przejazdu).
+Below the `md` breakpoint the layout drops to a single column (promo above the form, no sliding).
 
-## Przykład
+## Example
     <kpt-auth
       [providers]="[{ id: 'google', label: 'Google', icon: 'brand-google' }]"
       [busy]="loading()"
@@ -99,6 +99,6 @@ Poniżej breakpointu `md` układ schodzi do jednej kolumny (promo nad formularze
     </kpt-auth>
 
 ## i18n
-Wszystkie napisy pochodzą z namespace `auth` (EN/PL), w tym `auth.promo.*` i interpolacje
-`auth.continueWith` ({provider}), `auth.passwordHint` / `auth.errorMinLength` ({min}).
-Patrz `i18n/llms.txt`.
+Every string comes from the `auth` namespace (EN/PL), including `auth.promo.*` and the
+`auth.continueWith` ({provider}), `auth.passwordHint` / `auth.errorMinLength` ({min}) interpolations.
+See `i18n/llms.txt`.

package/src/lib/autocomplete/llms.txt

@@ -1,16 +1,16 @@
 # KptAutocomplete (kpt-autocomplete)
 
-Pole z podpowiedziami na CDK Overlay, Signal Forms. Wartość = wpisany tekst.
-Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
+A field with suggestions on CDK Overlay, Signal Forms. The value is the typed text.
+Requires `import '@angular/cdk/overlay-prebuilt.css';`
 Import: `import { KptAutocomplete } from '@konce-pt/angular';`
 
-## Wejścia
+## Inputs
 - `value`: model<string>; `options`: string[]; `placeholder`: string
 - `disabled`/`invalid`/`touched`: boolean; `touch`: output
-- Klawiatura: ↑/↓ nawigacja, Enter wybiera, Esc zamyka.
+- Keyboard: ↑/↓ to navigate, Enter selects, Esc closes.
 
-## Przykład
-    <kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="Miasto…" />
+## Example
+    <kpt-autocomplete [formField]="f.city" [options]="cities" placeholder="City…" />
 
-## Tokeny
-`--kpt-form-field-*`, panel `--kpt-color-surface-raised`.
+## Tokens
+`--kpt-form-field-*`, the panel `--kpt-color-surface-raised`.

package/src/lib/avatar/llms.txt

@@ -1,20 +1,20 @@
 # KptAvatar (kpt-avatar)
 
-Awatar — obraz, inicjały (z `name`) lub ikona. Import: `import { KptAvatar } from '@konce-pt/angular';`
+An avatar — an image, initials (from `name`) or an icon. Import: `import { KptAvatar } from '@konce-pt/angular';`
 
-## Wejścia
-- `src`: string|null (obraz); `name`: string (inicjały, do 2 liter); `icon`: string|null
+## Inputs
+- `src`: string|null (an image); `name`: string (initials, up to 2 letters); `icon`: string|null
 - `size`: 'sm'|'md'|'lg'|'xl'; `shape`: 'circle'|'square'
 
-## Przykłady
+## Examples
     <kpt-avatar src="/u/anna.jpg" />
     <kpt-avatar name="Anna Kowalska" size="lg" />
     <kpt-avatar icon="user" shape="square" />
 
-## Dostępność
-`name` trafia do natywnego `title` (podpowiedź z pełną nazwą — inicjały same nic nie mówią).
-Bez `src`: `role="img"` + `aria-label="name"`, a inicjały są `aria-hidden`. Ze `src` etykietę
-niesie `alt` obrazu — nie dubluje się z `aria-label`.
+## Accessibility
+`name` goes into the native `title` (a tooltip with the full name — initials on their own say nothing).
+Without `src`: `role="img"` + `aria-label="name"`, and the initials are `aria-hidden`. With `src` the label
+is carried by the image's `alt` — it is not duplicated in `aria-label`.
 
-## Tokeny
+## Tokens
 `--kpt-color-muted`, `--kpt-color-on-muted`, `--kpt-radius-full`/`--kpt-radius-md`.

package/src/lib/avatar-group/llms.txt

@@ -1,18 +1,18 @@
 # KptAvatarGroup (kpt-avatar-group)
 
-Grupa nakładających się awatarów z licznikiem „+N". Buduje na `kpt-avatar`.
+A group of overlapping avatars with a "+N" counter. Built on `kpt-avatar`.
 Import: `import { KptAvatarGroup } from '@konce-pt/angular';`
 
-## Wejścia
+## Inputs
 - `avatars`: KptAvatarItem[] — { name?, src?, icon? }
-- `max`: number (domyślnie 4) — ile pokazać przed „+N"
+- `max`: number (default 4) — how many to show before "+N"
 - `size`: 'sm' | 'md' | 'lg' | 'xl'
 
-Każdy awatar w grupie pokazuje swoje `name` w tooltipie (`title` z `kpt-avatar`), więc
-inicjały pozostają czytelne także przy `size="sm"`.
+Every avatar in the group shows its `name` in a tooltip (the `title` from `kpt-avatar`), so
+the initials stay readable even at `size="sm"`.
 
-## Przykład
+## Example
     <kpt-avatar-group [avatars]="team" [max]="4" />
 
-## Tokeny
-Nakładka z obwódką `--kpt-color-surface`; „+N" `--kpt-color-muted`.
+## Tokens
+The overlap uses a `--kpt-color-surface` ring; "+N" uses `--kpt-color-muted`.

package/src/lib/badge/llms.txt

@@ -1,20 +1,20 @@
 # KptBadge (kpt-badge)
 
-Znacznik — licznik lub kropka statusu; standalone lub nałożony na treść (`overlay`).
+A badge — a counter or a status dot; standalone or overlaid on content (`overlay`).
 Import: `import { KptBadge } from '@konce-pt/angular';`
 
-## Wejścia
+## Inputs
 - `value`: string|number|null; `variant`: 'neutral'|'primary'|'success'|'danger'|'warning'|'info'
-- `size`: 'sm'|'md'|'lg' (domyślnie 'md') — wysokość 1rem / 1.25rem / 1.5rem. Krój, wcięcie boczne
-  i średnica kropki liczą się z wysokości, więc proporcje trzymają się na każdym rozmiarze.
-  `sm` służy do wstawiania odznaki w wiersz tekstu (pozycja menu, etykieta, komórka tabeli).
-- `dot`: boolean (kropka bez liczby); `overlay`: boolean (róg treści); `max`: number (domyślnie 99 → '99+')
+- `size`: 'sm'|'md'|'lg' (default 'md') — height 1rem / 1.25rem / 1.5rem. The type size, the side inset
+  and the dot diameter are derived from the height, so the proportions hold at every size.
+  `sm` is meant for a badge sitting inside a line of text (a menu entry, a label, a table cell).
+- `dot`: boolean (a dot with no number); `overlay`: boolean (the corner of the content); `max`: number (default 99 → '99+')
 
-## Przykłady
+## Examples
     <kpt-badge [value]="3" variant="danger" />
     <kpt-badge [value]="4" size="sm" variant="success" />
     <kpt-badge [value]="128" overlay><kpt-icon name="menu" /></kpt-badge>
     <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
 
-## Tokeny
-`--kpt-color-{primary,muted,success,danger,warning,info}`, obwódka overlay z `--kpt-color-surface`.
+## Tokens
+`--kpt-color-{primary,muted,success,danger,warning,info}`, the overlay ring from `--kpt-color-surface`.

package/src/lib/bottom-sheet/llms.txt

@@ -1,22 +1,22 @@
 # KptBottomSheet (kpt-bottom-sheet)
 
-Arkusz wysuwany z dołu ekranu. Sterowany sygnałem `open`, z uchwytem i backdrop.
+A sheet that slides up from the bottom of the screen. Driven by the `open` signal, with a handle and a backdrop.
 Import: `import { KptBottomSheet } from '@konce-pt/angular';`
 
-## Wejścia / model
-- `open`: model<boolean> (dwukierunkowe)
+## Inputs / model
+- `open`: model<boolean> (two-way)
 - `header`: string; `closeOnBackdrop`: boolean
-- Treść przez projekcję.
+- Content through projection.
 
-## Przykład
-    <kpt-button (click)="sheetOpen.set(true)">Udostępnij</kpt-button>
-    <kpt-bottom-sheet [(open)]="sheetOpen" header="Udostępnij">…</kpt-bottom-sheet>
+## Example
+    <kpt-button (click)="sheetOpen.set(true)">Share</kpt-button>
+    <kpt-bottom-sheet [(open)]="sheetOpen" header="Share">…</kpt-bottom-sheet>
 
-## Stan zamknięty / a11y
-Arkusz jest zawsze w DOM (bez `@if`), chowany `transform` **i** `visibility: hidden` — bez
-`display: none`, żeby zachować animację wjazdu i zjazdu. `visibility` wyjmuje zamknięty arkusz
-z kolejki Tab i z drzewa dostępności bez `inert`, i to już na pierwszej klatce, bez czekania
-na JavaScript. `prefers-reduced-motion: reduce` zdejmuje przejścia.
+## The closed state / a11y
+The sheet is always in the DOM (no `@if`), hidden with `transform` **and** `visibility: hidden` — never
+`display: none`, so that the slide-in and slide-out animations survive. `visibility` takes the closed sheet
+out of the tab order and out of the accessibility tree without `inert`, and it does so on the very first frame,
+without waiting for JavaScript. `prefers-reduced-motion: reduce` drops the transitions.
 
-## Tokeny
-Panel `--kpt-color-surface-raised`, zaokrąglenie górne `--kpt-radius-lg`, `--kpt-elevation-4`.
+## Tokens
+The panel `--kpt-color-surface-raised`, the top radius `--kpt-radius-lg`, `--kpt-elevation-4`.

package/src/lib/breadcrumb/llms.txt

@@ -1,12 +1,12 @@
 # KptBreadcrumb (kpt-breadcrumb)
 
-Ścieżka nawigacji. Import: `import { KptBreadcrumb, KptBreadcrumbItem } from '@konce-pt/angular';`
+A navigation trail. Import: `import { KptBreadcrumb, KptBreadcrumbItem } from '@konce-pt/angular';`
 
-## Wejścia
-- `items`: KptBreadcrumbItem[] `{ label: string; url?: string }` (element bez `url` lub ostatni = bieżąca strona)
+## Inputs
+- `items`: KptBreadcrumbItem[] `{ label: string; url?: string }` (an item without `url`, or the last one, = the current page)
 
-## Przykład
-    <kpt-breadcrumb [items]="[{label:'Start',url:'/'},{label:'Ustawienia',url:'/s'},{label:'Profil'}]" />
+## Example
+    <kpt-breadcrumb [items]="[{label:'Home',url:'/'},{label:'Settings',url:'/s'},{label:'Profile'}]" />
 
-## Tokeny
-Separator ikoną `chevron-right`; linki `--kpt-color-on-surface-muted` → hover `--kpt-color-primary`.
+## Tokens
+The separator is a `chevron-right` icon; links `--kpt-color-on-surface-muted` → hover `--kpt-color-primary`.

package/src/lib/breakpoint/llms.txt

@@ -1,35 +1,35 @@
 # KptBreakpointObserver
 
-Serwis (root) zamieniający media query na sygnały. Jedyny w bibliotece sposób na zapytanie
-„jak szerokie jest okno" z poziomu TypeScriptu.
+A root service that turns media queries into signals. The only way in the library to ask
+"how wide is the window" from TypeScript.
 
 ## API
 
     inject(KptBreakpointObserver)
 
-- `up(bp: KptBreakpoint): Signal<boolean>` — `(min-width: <próg>px)`, mobile-first.
-- `down(bp: KptBreakpoint): Signal<boolean>` — `(max-width: <próg - 0.02>px)`; odjęcie 0.02px
-  sprawia, że pasma `up`/`down` nie nakładają się na ułamkowych szerokościach (zoom, DPI).
-- `matches(query: string): Signal<boolean>` — dowolne media query.
+- `up(bp: KptBreakpoint): Signal<boolean>` — `(min-width: <threshold>px)`, mobile-first.
+- `down(bp: KptBreakpoint): Signal<boolean>` — `(max-width: <threshold - 0.02>px)`; subtracting 0.02px
+  keeps the `up`/`down` bands from overlapping at fractional widths (zoom, DPI).
+- `matches(query: string): Signal<boolean>` — any media query.
 
-`KptBreakpoint` = `'sm' | 'md' | 'lg' | 'xl' | '2xl'`; progi w `KPT_BREAKPOINTS`
+`KptBreakpoint` = `'sm' | 'md' | 'lg' | 'xl' | '2xl'`; the thresholds live in `KPT_BREAKPOINTS`
 (640 / 768 / 1024 / 1280 / 1536 px).
 
-## Skąd biorą się wartości
+## Where the values come from
 
-Z tokenów: `packages/tokens/tokens/primitives/breakpoint.json` → `scripts/gen-tokens.mjs`
-generuje `breakpoint/breakpoints.generated.ts` (dla JS) i `styles/_breakpoints.generated.scss`
-(dla `@media` w SCSS komponentów). Oba pliki są commitowane i **nie edytuje się ich ręcznie** —
-zmiana progu idzie przez token i `pnpm nx build angular`. Dzięki jednemu źródłu CSS biblioteki
-i jej JavaScript nie mogą rozjechać się cicho.
+From tokens: `packages/tokens/tokens/primitives/breakpoint.json` → `scripts/gen-tokens.mjs`
+generates `breakpoint/breakpoints.generated.ts` (for JS) and `styles/_breakpoints.generated.scss`
+(for `@media` in component SCSS). Both files are committed and **must not be edited by hand** —
+a threshold change goes through the token plus `pnpm nx build angular`. With a single source, the library's
+CSS and its JavaScript cannot drift apart silently.
 
 ## SSR
 
-Poza przeglądarką każdy sygnał to stałe `false`. Nie buduj na nim układu strony — od tego jest
-CSS (`@media`), inaczej dostaniesz migotanie przed hydracją. Serwis służy do zachowań:
-w którą stronę ma zadziałać przycisk, czy zamykać panel po nawigacji, co odłożyć na później.
+Outside the browser every signal is a constant `false`. Do not build page layout on it — that is what
+CSS (`@media`) is for, otherwise you get flicker before hydration. The service is for behavior:
+which way a button should act, whether to close a panel after navigation, what to defer.
 
-## Przykład
+## Example
 
     @Component({ /* … */ })
     export class Header {
@@ -38,8 +38,8 @@ w którą stronę ma zadziałać przycisk, czy zamykać panel po nawigacji, co o
       readonly isCompact = this.breakpoints.down('md');
     }
 
-## Uwagi
+## Notes
 
-- Zapytania są memoizowane per string — `up('lg')` w dziesięciu komponentach to jeden
-  `MediaQueryList` i jeden nasłuch; nie trzeba tego cache'ować u siebie.
-- Sprzątanie idzie przez `DestroyRef` root injectora, więc nie ma czego odsubskrybować.
+- Queries are memoized per string — `up('lg')` across ten components is one
+  `MediaQueryList` and one listener; there is no need to cache it yourself.
+- Cleanup goes through the root injector's `DestroyRef`, so there is nothing to unsubscribe.

package/src/lib/button/llms.txt

@@ -1,46 +1,46 @@
 # KptButton (kpt-button)
 
-Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza).
-Standalone, OnPush, sygnały. Import: `import { KptButton } from '@konce-pt/angular';`
+The Koncept UI button. It renders a native `<button>` (semantics + form submit).
+Standalone, OnPush, signals. Import: `import { KptButton } from '@konce-pt/angular';`
 
-## Selektor
+## Selector
 `kpt-button`
 
-## Wejścia (input signals)
-- `variant`: 'filled' | 'tonal' | 'outline' | 'text' | 'danger' (domyślnie 'filled')
-- `size`: 'sm' | 'md' | 'lg' (domyślnie 'md')
-- `type`: 'button' | 'submit' | 'reset' (domyślnie 'button')
+## Inputs (input signals)
+- `variant`: 'filled' | 'tonal' | 'outline' | 'text' | 'danger' (default 'filled')
+- `size`: 'sm' | 'md' | 'lg' (default 'md')
+- `type`: 'button' | 'submit' | 'reset' (default 'button')
 - `disabled`: boolean (booleanAttribute)
-- `loading`: boolean — spinner + blokada interakcji, ustawia aria-busy
-- `fullWidth`: boolean — pełna szerokość kontenera
+- `loading`: boolean — a spinner + blocked interaction, sets aria-busy
+- `fullWidth`: boolean — the full width of the container
 
-## Zdarzenia
-Brak własnych — natywny `click` bąbelkuje z wewnętrznego `<button>`; wiąż `(click)` na `<kpt-button>`.
+## Events
+None of its own — the native `click` bubbles out of the inner `<button>`; bind `(click)` on `<kpt-button>`.
 
-## Przykłady
-    <kpt-button (click)="save()">Zapisz</kpt-button>
-    <kpt-button variant="outline" size="sm">Anuluj</kpt-button>
-    <kpt-button variant="danger" [loading]="deleting()">Usuń</kpt-button>
-    <form (submit)="onSubmit()"><kpt-button type="submit">Wyślij</kpt-button></form>
+## Examples
+    <kpt-button (click)="save()">Save</kpt-button>
+    <kpt-button variant="outline" size="sm">Cancel</kpt-button>
+    <kpt-button variant="danger" [loading]="deleting()">Delete</kpt-button>
+    <form (submit)="onSubmit()"><kpt-button type="submit">Send</kpt-button></form>
 
-## Tokeny (stylowanie)
+## Tokens (styling)
 `--kpt-button-radius`, `--kpt-button-font-weight`, `--kpt-button-gap`,
 `--kpt-button-filled-{bg,fg,bg-hover,bg-active}`, `--kpt-button-tonal-{bg,fg,bg-hover}`,
 `--kpt-button-outline-{border,fg,bg-hover}`, `--kpt-button-text-{fg,bg-hover}`.
-Wariant 'danger' korzysta z `--kpt-color-danger` / `--kpt-color-on-danger`.
-
-## Warstwa stanu (hover / active)
-Sprzężenie zwrotne hovera i aktywności niesie pseudoelement `::after` (`opacity` 0 → 1),
-a nie animowany `background-color` samego przycisku. Powód: kolory wariantu (`--_bg`,
-`--_border`) przyjeżdżają z `[attr.data-variant]`, które Angular ustawia dopiero
-w przebiegu aktualizacji — animowane przejście pokazywało przez moment wariant bazowy
-(`filled`) i przefarbowywało go na docelowy, co dawało migotanie przy starcie aplikacji.
-Warstwa startuje z `opacity: 0`, więc zmiana jej koloru przy pierwszym renderze jest
-niewidoczna. Przycisk ma przez to `position: relative` i `isolation: isolate`
-(kontekst układania, żeby `z-index: -1` warstwy trafił nad tło, a pod treść).
-Ten sam wzorzec mają `kpt-icon-button`, `kpt-fab` i `kpt-split-button`.
-
-## Dostępność
-- Natywny `<button>` — pełna obsługa klawiatury i czytników.
-- `loading` ustawia `aria-busy="true"` i blokuje przycisk (`disabled`).
-- Pierścień fokusa z `@konce-pt/styles` (`--kpt-color-focus-ring`).
+The 'danger' variant uses `--kpt-color-danger` / `--kpt-color-on-danger`.
+
+## The state layer (hover / active)
+Hover and active feedback is carried by an `::after` pseudo-element (`opacity` 0 → 1),
+not by animating the button's own `background-color`. The reason: the variant colors (`--_bg`,
+`--_border`) arrive through `[attr.data-variant]`, which Angular only sets
+during the update pass — an animated transition briefly showed the base variant
+(`filled`) and then repainted it into the target one, which produced flicker at application start.
+The layer starts at `opacity: 0`, so changing its color on the first render is
+invisible. That is why the button carries `position: relative` and `isolation: isolate`
+(a stacking context, so that the layer's `z-index: -1` lands above the background but below the content).
+`kpt-icon-button`, `kpt-fab` and `kpt-split-button` follow the same pattern.
+
+## Accessibility
+- A native `<button>` — full keyboard and screen reader support.
+- `loading` sets `aria-busy="true"` and disables the button (`disabled`).
+- The focus ring comes from `@konce-pt/styles` (`--kpt-color-focus-ring`).

package/src/lib/button-group/llms.txt

@@ -1,14 +1,14 @@
 # KptButtonGroup (kpt-button-group)
 
-Segmentowana grupa przycisków (toggle, pojedynczy wybór). Signal Forms.
+A segmented button group (toggle, single choice). Signal Forms.
 Import: `import { KptButtonGroup, KptOption } from '@konce-pt/angular';`
 
-## Wejścia
+## Inputs
 - `options`: KptOption<T>[]; `value`: model<T>; `size`: 'sm'|'md'|'lg'; `disabled`/`invalid`/`touched`; `touch`
 
-## Przykłady
-    <kpt-button-group [(value)]="view" [options]="[{label:'Lista',value:'list'},{label:'Siatka',value:'grid'}]" />
+## Examples
+    <kpt-button-group [(value)]="view" [options]="[{label:'List',value:'list'},{label:'Grid',value:'grid'}]" />
     <kpt-button-group [formField]="f.period" [options]="periods" />
 
-## Tokeny
+## Tokens
 `--kpt-color-primary`, `--kpt-color-border-strong`, `--kpt-color-muted`.

package/src/lib/card/llms.txt

@@ -1,33 +1,33 @@
 # KptCard (kpt-card)
 
-Karta — powierzchnia z wyniesieniem (elevated) lub obramowaniem (outlined).
+A card — a surface with elevation (elevated) or a border (outlined).
 Import: `import { KptCard } from '@konce-pt/angular';`
 
-## Selektor
+## Selector
 `kpt-card`
 
-## Wejścia
-- `variant`: 'elevated' | 'outlined' (domyślnie 'elevated')
-- `header`: string — opcjonalny tekst nagłówka
-- `flush`: boolean — body bez paddingu (dla bogatych układów zarządzających sekcjami)
-
-## Projekcja
-- treść domyślna → body karty
-- element z atrybutem `kptCardFooter` (bezpośrednie dziecko `kpt-card`) → stopka
-
-## Reużywalne klasy układu (media / profil)
-- `kpt-card__media` — obraz na całą szerokość (przycięty do promienia; ustaw `aspect-ratio`/`height` inline)
-- `kpt-card__lead` — wiersz nagłówka (awatar + tytuły), padding
-- `kpt-card__title`, `kpt-card__subtitle` — typografia tytułu/podtytułu
-- `kpt-card__section` — sekcja z paddingiem (kolumna z odstępami)
-- `kpt-card__tags` — wiersz chipów; `kpt-card__meta` — wiersz ikona+tekst (ocena/lokalizacja)
-- `kpt-card__avatar` — nachodzący awatar z ringiem (na okładce)
-- `kpt-card__actions` — wiersz przycisków (równe szerokości)
-
-## Przykład
-    <kpt-card header="Ustawienia" variant="outlined">
-      <p>Treść…</p>
-      <div kptCardFooter><kpt-button>Zapisz</kpt-button></div>
+## Inputs
+- `variant`: 'elevated' | 'outlined' (default 'elevated')
+- `header`: string — optional header text
+- `flush`: boolean — a body with no padding (for rich layouts that manage their own sections)
+
+## Content projection
+- the default content → the card body
+- an element carrying the `kptCardFooter` attribute (a direct child of `kpt-card`) → the footer
+
+## Reusable layout classes (media / profile)
+- `kpt-card__media` — a full-width image (clipped to the radius; set `aspect-ratio`/`height` inline)
+- `kpt-card__lead` — the header row (avatar + titles), with padding
+- `kpt-card__title`, `kpt-card__subtitle` — title/subtitle typography
+- `kpt-card__section` — a padded section (a column with gaps)
+- `kpt-card__tags` — a row of chips; `kpt-card__meta` — an icon+text row (rating/location)
+- `kpt-card__avatar` — an overlapping avatar with a ring (on the cover)
+- `kpt-card__actions` — a row of buttons (equal widths)
+
+## Example
+    <kpt-card header="Settings" variant="outlined">
+      <p>Content…</p>
+      <div kptCardFooter><kpt-button>Save</kpt-button></div>
     </kpt-card>
 
     <!-- media card -->
@@ -36,10 +36,10 @@ Import: `import { KptCard } from '@konce-pt/angular';`
         <kpt-avatar src="/u.jpg" />
         <div><div class="kpt-card__title">Shiba Inu</div><div class="kpt-card__subtitle">Dog Breed</div></div>
       </div>
-      <img class="kpt-card__media" src="/foto.jpg" alt="" style="aspect-ratio: 4/3" />
-      <div class="kpt-card__section">Opis…</div>
+      <img class="kpt-card__media" src="/photo.jpg" alt="" style="aspect-ratio: 4/3" />
+      <div class="kpt-card__section">Description…</div>
       <div kptCardFooter><kpt-button variant="text" size="sm">LIKE</kpt-button></div>
     </kpt-card>
 
-## Tokeny
+## Tokens
 `--kpt-card-{bg,fg,border,radius,padding,shadow}`.