@konce-pt/angular 0.7.10 → 0.7.12

package/src/lib/datepicker/llms.txt

@@ -1,16 +1,16 @@
 # KptDatepicker (kpt-datepicker)
 
-Wybór daty/godziny z własnym kalendarzem (CDK Overlay), Signal Forms. Granulacja przez
-`selectionMode`: data (domyślnie), miesiąc+rok, rok, miesiąc, data+godzina, sama godzina.
-Panel jest stosem widoków **dekady → lata → miesiące → dni**: klik w komórkę schodzi poziom niżej,
-klik w tytuł wchodzi poziom wyżej. Poziom startowy ustawia `startView` — do daty urodzenia
-`startView="decade"` (dekada → rok → miesiąc → dzień, cztery kliknięcia zamiast setek strzałek).
-Godzina na tarczy zegara (dwa etapy: godziny → minuty, klik lub przeciąganie), format 12/24h.
-Wyświetlanie wg `displayFormat` ('pl'/'iso'). Tydzień od poniedziałku, dziś zaznaczone, zakres min/max.
-Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
+Picking a date/time with a custom calendar (CDK Overlay), Signal Forms. The granularity comes from
+`selectionMode`: date (the default), month+year, year, month, date+time, time only.
+The panel is a stack of views — **decade → years → months → days**: clicking a cell goes one level down,
+clicking the title goes one level up. The starting level is set by `startView` — for a date of birth use
+`startView="decade"` (decade → year → month → day, four clicks instead of hundreds of arrow presses).
+The time is picked on a clock dial (two stages: hours → minutes, click or drag), in 12/24h format.
+Display follows `displayFormat` ('pl'/'iso'). The week starts on Monday, today is marked, min/max range supported.
+Requires the CDK overlay styles: `import '@angular/cdk/overlay-prebuilt.css';`
 Import: `import { KptDatepicker } from '@konce-pt/angular';`
 
-## Użycie
+## Usage
     <kpt-datepicker [formField]="f.birthDate" startView="decade" minDate="1920-01-01" />
     <kpt-datepicker [formField]="f.date" minDate="1900-01-01" maxDate="2030-12-31" />
     <kpt-datepicker selectionMode="monthYear" [(value)]="period" />
@@ -18,50 +18,50 @@ Import: `import { KptDatepicker } from '@konce-pt/angular';`
     <kpt-datepicker selectionMode="datetime" [hourFormat]="12" [(value)]="meetingAt" />
     <kpt-datepicker selectionMode="time" [(value)]="alarm" />
 
-## Wejścia
+## Inputs
 - `value`: model<string>; `minDate`/`maxDate`: string|null; `placeholder`: string
-- `selectionMode`: 'date' | 'monthYear' | 'year' | 'month' | 'datetime' | 'time' (domyślnie 'date').
-  Format wartości zależny od trybu: 'RRRR-MM-DD' / 'RRRR-MM' / 'RRRR' / 'MM' / 'RRRR-MM-DDTHH:mm' (datetime) / 'HH:mm' (time).
-- `startView`: 'day' | 'month' | 'year' | 'decade' | null (domyślnie null) — poziom, od którego
-  otwiera się panel. `null` = poziom, na którym tryb zatwierdza wartość: 'day' dla 'date'/'datetime',
-  'month' dla 'monthYear'/'month', 'year' dla 'year'. Poniżej tego poziomu nie zejdzie —
-  `startView="day"` w trybie 'year' jest podnoszony do 'year'. Tryb 'month' zostaje na 'month'
-  (wartość to samo 'MM', nie ma po czym nawigować), tryb 'time' ignoruje input.
-- `hourFormat`: 12 | 24 (domyślnie 24) — tarcza z AM/PM (12) lub pierścieniem 13–00 (24); wartość zawsze 24h.
-- `minuteStep`: number (domyślnie 1) — snap minut na tarczy.
-- `monthDisplay`: 'long' | 'number' (domyślnie 'long') — w trybie 'month' i etykietach miesięcy: słownie (styczeń) lub liczbą (01)
-- `displayFormat`: 'pl' | 'iso' (domyślnie 'pl') — format wyświetlania i domyślnego placeholdera
-- `disabled`/`invalid`/`touched`: boolean; output `touch`.
-- `open`: model (dwukierunkowe `[(open)]`, output `(openChange)`) — stan kalendarza. Pozwala otworzyć
-  go z zewnątrz i wiedzieć, kiedy user skończył wybierać. Do tego drugiego **nie używaj `touch`**:
-  leci on także z blur triggera, czyli już przy naciśnięciu myszy na dniu w panelu (panel jest
-  w kontenerze CDK Overlay przy `<body>`, poza DOM-em kontrolki). Tak robi edycja inline
-  w `kpt-data-table` — patrz `data-table/llms.txt`.
-- `ariaLabel`: string|null — nazwa dostępna, gdy pola nie opisuje `<label for>`
-  (np. dwie godziny w jednym wierszu edytora). Bez niej czytnik ekranu ogłasza samą wartość.
-- Ikona w polu: kalendarz, a w trybie 'time' zegar.
-- Panel: przycisk czyszczenia (×), tarcza zegara z „Gotowe".
+- `selectionMode`: 'date' | 'monthYear' | 'year' | 'month' | 'datetime' | 'time' (default 'date').
+  The value format depends on the mode: 'YYYY-MM-DD' / 'YYYY-MM' / 'YYYY' / 'MM' / 'YYYY-MM-DDTHH:mm' (datetime) / 'HH:mm' (time).
+- `startView`: 'day' | 'month' | 'year' | 'decade' | null (default null) — the level the panel
+  opens at. `null` = the level at which the mode commits a value: 'day' for 'date'/'datetime',
+  'month' for 'monthYear'/'month', 'year' for 'year'. It will not go below that level —
+  `startView="day"` in 'year' mode is raised to 'year'. The 'month' mode stays on 'month'
+  (the value is just 'MM', there is nothing to navigate), and the 'time' mode ignores the input.
+- `hourFormat`: 12 | 24 (default 24) — an AM/PM dial (12) or one with a 13–00 ring (24); the value is always 24h.
+- `minuteStep`: number (default 1) — minute snapping on the dial.
+- `monthDisplay`: 'long' | 'number' (default 'long') — in 'month' mode and in month labels: as a word (January) or a number (01)
+- `displayFormat`: 'pl' | 'iso' (default 'pl') — the display format and the default placeholder
+- `disabled`/`invalid`/`touched`: boolean; the `touch` output.
+- `open`: model (two-way `[(open)]`, the `(openChange)` output) — the calendar state. It lets you open
+  it from outside and know when the user is done choosing. For the latter **do not use `touch`**:
+  it also fires on the trigger's blur, that is, the moment the mouse goes down on a day in the panel (the panel
+  lives in a CDK Overlay container next to `<body>`, outside the control's DOM). That is what inline editing
+  in `kpt-data-table` does — see `data-table/llms.txt`.
+- `ariaLabel`: string|null — the accessible name when no `<label for>` describes the field
+  (two times in one editor row, for instance). Without it a screen reader announces the value alone.
+- The icon in the field: a calendar, and a clock in 'time' mode.
+- The panel: a clear button (×), the clock dial with "Done".
 
-## Zachowanie (stos widoków)
-Nagłówek panelu ma zawsze kształt `‹ tytuł ›`; strzałki przesuwają stronę bieżącego poziomu,
-a tytuł jest przyciskiem wchodzącym poziom wyżej:
+## Behavior (the view stack)
+The panel header always has the shape `‹ title ›`; the arrows move the current level's page,
+and the title is a button that goes one level up:
 
-    dzień    ‹ [czerwiec] [1979] ›   strzałki ±1 miesiąc;  chipy → miesiące / lata
-    miesiąc  ‹      [1979]      ›    strzałki ±1 rok;      chip  → lata
-    rok      ‹  [1970 – 1979]   ›    strzałki ±10 lat;     chip  → dekady
-    dekada   ‹   1920 – 2039    ›    strzałki ±120 lat;    szczyt stosu, tytuł nieklikalny
+    day      ‹  [June]  [1979]  ›   arrows ±1 month;  the chips → months / years
+    month    ‹      [1979]      ›   arrows ±1 year;   the chip  → years
+    year     ‹  [1970 – 1979]   ›   arrows ±10 years; the chip  → decades
+    decade   ‹   1920 – 2039    ›   arrows ±120 years; the top of the stack, the title is not clickable
 
-Strona lat to **pełna dekada** (10 komórek, 1970–1979), strona dekad to 12 dekad (1920–2039).
-Klik w komórkę powyżej poziomu zatwierdzania schodzi niżej; na poziomie zatwierdzania ustawia
-wartość i zamyka panel. Komórka obejmująca dziś dostaje obrys (jak „dziś" w siatce dni).
-Strzałka gaśnie (`disabled`), gdy cała sąsiednia strona wypada poza `minDate`/`maxDate`.
+A year page is a **full decade** (10 cells, 1970–1979), a decade page holds 12 decades (1920–2039).
+Clicking a cell above the committing level goes down; on the committing level it sets
+the value and closes the panel. The cell containing today gets an outline (like "today" in the day grid).
+An arrow dims (`disabled`) when the whole neighboring page falls outside `minDate`/`maxDate`.
 
 ## i18n
-Nazwy dni tygodnia i miesięcy są wyliczane z `Intl` wg aktywnego locale i18n (nie ze słownika).
-Etykiety nawigacji/aria („poprzednie dekady", „wybierz rok"…) i „Gotowe" z i18n
-(namespace `datepicker` + `common`). Domyślnie EN;
-konfiguracja przez `provideKptI18n` — patrz `i18n/llms.txt`. Uwaga: `displayFormat` ('pl'/'iso')
-steruje wyłącznie formatem daty i jest niezależny od języka etykiet.
+Weekday and month names are derived from `Intl` per the active i18n locale (not from the dictionary).
+The navigation/aria labels ("previous decades", "choose a year"…) and "Done" come from i18n
+(the `datepicker` + `common` namespaces). English by default;
+configured through `provideKptI18n` — see `i18n/llms.txt`. Note: `displayFormat` ('pl'/'iso')
+controls the date format only and is independent of the label language.
 
-## Tokeny
+## Tokens
 `--kpt-form-field-{bg,text,border,border-focus,border-error,radius}`.

package/src/lib/dialog/llms.txt

@@ -1,68 +1,68 @@
-# KptDialog (kpt-dialog)
-
-Okno modalne na natywnym `<dialog>` (focus trap, Esc, backdrop w standardzie).
-Import: `import { KptDialog } from '@konce-pt/angular';`
-
-## Selektor
-`kpt-dialog`
-
-## Wejścia
-- `open`: model<boolean> — dwukierunkowe `[(open)]`
-- `header`: string; `dismissible`: boolean (Esc/× zamyka; domyślnie true)
-
-## Sloty
-- treść domyślna → body; element z atrybutem `kptDialogFooter` → stopka
-
-## Przykład
-    <kpt-dialog [(open)]="confirmOpen" header="Usunąć?">
-      Nieodwracalne.
-      <div kptDialogFooter>
-        <kpt-button variant="text" (click)="confirmOpen.set(false)">Anuluj</kpt-button>
-        <kpt-button variant="danger" (click)="remove()">Usuń</kpt-button>
-      </div>
-    </kpt-dialog>
-
-## Tokeny
-`--kpt-color-surface-raised`, `--kpt-color-overlay-scrim` (::backdrop), `--kpt-elevation-4`.
-Uwaga: globalny reset zeruje margin — komponent przywraca `margin:auto` (centrowanie).
-
-## Kontrolki na CDK Overlay w środku okna
-
-`kpt-dialog` stoi na natywnym `<dialog>` i otwiera się przez `showModal()`, co wynosi je
-do **warstwy szczytowej** przeglądarki — a ta jest ponad całym drzewem dokumentu i żaden
-`z-index` jej nie przebije. Kontener CDK Overlay wisi domyślnie na `<body>`, więc panele
-`kpt-select`, `kpt-datepicker`, `kpt-autocomplete` i `kpt-menu` otwierałyby się w środku
-okna NIEWIDOCZNE, schowane za jego tłem.
-
-Dlatego `kpt-dialog` na czas otwarcia przenosi kontener overlayów do wnętrza `<dialog>`
-i oddaje go na miejsce przy zamknięciu (również gdy komponent zostanie zniszczony
-z otwartym oknem). Nie trzeba nic konfigurować — kontrolki overlayowe działają w oknie
-tak samo jak poza nim.
+# KptDialog (kpt-dialog)
 
-## Układ i przewijanie
+A modal window on the native `<dialog>` (focus trap, Esc, a backdrop out of the box).
+Import: `import { KptDialog } from '@konce-pt/angular';`
 
-Otwarte okno jest kolumną flex: nagłówek (`.kpt-dialog__header`) i stopka
-(`[kptDialogFooter]`) stoją nieruchomo, a przewija się wyłącznie `.kpt-dialog__body`.
-Pasek przewijania biegnie więc tylko wzdłuż treści, nie wzdłuż całego okna.
+## Selector
+`kpt-dialog`
 
-Treść dostaje `flex: 0 1 auto` (domyślne) + `min-height: 0`, celowo **nie** `flex: 1`
-jak w `kpt-drawer`. Szuflada wypełnia wysokość ekranu, okno ma kurczyć się do treści:
-krótkie (`kpt-confirm` — dwa zdania i dwa przyciski) zostaje krótkie, długie zatrzymuje się
-na `max-height: calc(100vh - 4rem)` i przewija samą treść.
+## Inputs
+- `open`: model<boolean> — two-way `[(open)]`
+- `header`: string; `dismissible`: boolean (Esc/× closes it; default true)
 
-Deklaracja `display: flex` jest scopowana `&[open]` i musi taka zostać. Regułę
-`dialog:not([open]) { display: none }` daje arkusz przeglądarki, a każda deklaracja
-autorska ją bije — także z `@layer`. Niescopowane `display: flex` zostawiłoby wszystkie
-zamknięte okna widoczne na stronie.
+## Slots
+- the default content → the body; an element with the `kptDialogFooter` attribute → the footer
 
-`.kpt-dialog` nie dostaje `overflow: hidden` — kontener CDK Overlay jest na czas otwarcia
-przeniesiony do wnętrza `<dialog>` (patrz sekcja wyżej), więc przycięcie okna ucięłoby
-panele `kpt-select` czy `kpt-datepicker`. Do samego przewijania nie jest potrzebne:
-po przejściu na flex nic nie wystaje poza okno.
+## Example
+    <kpt-dialog [(open)]="confirmOpen" header="Delete this?">
+      This cannot be undone.
+      <div kptDialogFooter>
+        <kpt-button variant="text" (click)="confirmOpen.set(false)">Cancel</kpt-button>
+        <kpt-button variant="danger" (click)="remove()">Delete</kpt-button>
+      </div>
+    </kpt-dialog>
 
-Przypięty pasek akcji wewnątrz treści (np. „Anuluj / Zapisz" w `kpt-map-create-dialog`)
-robi się przez `position: sticky` — kontenerem przewijania jest `.kpt-dialog__body`.
-Ujemne marginesy boczne muszą zgadzać się z jego paddingiem (`--kpt-space-6`),
-a przesunięcie `bottom` musi być lustrem ujemnego marginesu dolnego
-(`bottom: calc(var(--kpt-space-6) * -1)`) — przyklejanie liczy się dla marginesowego
-pudełka, więc przy `bottom: 0` pod paskiem przesuwałby się skrawek treści.
+## Tokens
+`--kpt-color-surface-raised`, `--kpt-color-overlay-scrim` (::backdrop), `--kpt-elevation-4`.
+Note: the global reset zeroes the margin — the component restores `margin:auto` (centering).
+
+## CDK Overlay controls inside the dialog
+
+`kpt-dialog` stands on the native `<dialog>` and opens through `showModal()`, which lifts it
+into the browser's **top layer** — and that sits above the entire document tree, where no
+`z-index` can reach it. The CDK Overlay container hangs off `<body>` by default, so the panels of
+`kpt-select`, `kpt-datepicker`, `kpt-autocomplete` and `kpt-menu` would open inside the
+dialog INVISIBLE, hidden behind its background.
+
+That is why, while it is open, `kpt-dialog` moves the overlay container inside the `<dialog>`
+and puts it back on close (including when the component is destroyed
+with the dialog open). Nothing needs configuring — overlay controls behave inside the dialog
+exactly as they do outside it.
+
+## Layout and scrolling
+
+An open dialog is a flex column: the header (`.kpt-dialog__header`) and the footer
+(`[kptDialogFooter]`) stay put, and only `.kpt-dialog__body` scrolls.
+The scrollbar therefore runs alongside the content, not alongside the whole dialog.
+
+The content gets `flex: 0 1 auto` (the default) + `min-height: 0`, deliberately **not** `flex: 1`
+as in `kpt-drawer`. A drawer fills the height of the screen, a dialog is meant to shrink to its content:
+a short one (`kpt-confirm` — two sentences and two buttons) stays short, a long one stops
+at `max-height: calc(100vh - 4rem)` and scrolls the content alone.
+
+The `display: flex` declaration is scoped with `&[open]` and has to stay that way. The
+`dialog:not([open]) { display: none }` rule comes from the browser stylesheet, and any author
+declaration beats it — including one inside `@layer`. An unscoped `display: flex` would leave every
+closed dialog visible on the page.
+
+`.kpt-dialog` does not get `overflow: hidden` — while it is open the CDK Overlay container is
+moved inside the `<dialog>` (see the section above), so clipping the dialog would cut off the
+panels of `kpt-select` or `kpt-datepicker`. It is not needed for scrolling either:
+once it is a flex column, nothing sticks out of the dialog.
+
+A pinned action bar inside the content (say "Cancel / Save" in `kpt-map-create-dialog`)
+is done with `position: sticky` — the scrolling container is `.kpt-dialog__body`.
+The negative side margins have to match its padding (`--kpt-space-6`),
+and the `bottom` offset has to mirror the negative bottom margin
+(`bottom: calc(var(--kpt-space-6) * -1)`) — stickiness is computed for the margin
+box, so with `bottom: 0` a sliver of content would slide underneath the bar.

package/src/lib/divider/llms.txt

@@ -1,19 +1,19 @@
 # KptDivider (kpt-divider)
 
-Separator (linia pozioma lub pionowa). `role="separator"`.
+A separator (a horizontal or vertical line). `role="separator"`.
 Import: `import { KptDivider } from '@konce-pt/angular';`
 
-## Selektor
+## Selector
 `kpt-divider`
 
-## Wejścia
-- `orientation`: 'horizontal' | 'vertical' (domyślnie 'horizontal')
-- `inset`: boolean — odstęp od krawędzi kontenera
+## Inputs
+- `orientation`: 'horizontal' | 'vertical' (default 'horizontal')
+- `inset`: boolean — inset from the container edges
 
-## Przykład
+## Example
     <kpt-divider />
     <kpt-divider inset />
-    <kpt-divider orientation="vertical" />   <!-- w kontenerze flex -->
+    <kpt-divider orientation="vertical" />   <!-- inside a flex container -->
 
-## Tokeny
-Kolor z `--kpt-color-border`. Pionowy wymaga rodzica flex (align-self: stretch).
+## Tokens
+Color from `--kpt-color-border`. The vertical one needs a flex parent (align-self: stretch).

package/src/lib/drawer/llms.txt

@@ -1,26 +1,26 @@
 # KptDrawer (kpt-drawer)
 
-Panel wysuwany (drawer / off-canvas) sterowany sygnałem `open`. Niezależny od app-shell
-(pozycja fixed + backdrop, animacja transform). Import: `import { KptDrawer } from '@konce-pt/angular';`
+A sliding panel (drawer / off-canvas) driven by the `open` signal. Independent of the app shell
+(fixed position + a backdrop, a transform animation). Import: `import { KptDrawer } from '@konce-pt/angular';`
 
-## Wejścia / model
-- `open`: model<boolean> (dwukierunkowe)
+## Inputs / model
+- `open`: model<boolean> (two-way)
 - `position`: 'left' | 'right' | 'top' | 'bottom' (KptDrawerPosition)
-- `header`: string; `dismissible`: boolean (× i Esc); `closeOnBackdrop`: boolean
-- Treść przez projekcję `<ng-content>`.
+- `header`: string; `dismissible`: boolean (× and Esc); `closeOnBackdrop`: boolean
+- Content through the `<ng-content>` projection.
 
-## Przykład
+## Example
     <kpt-button (click)="menuOpen.set(true)">Menu</kpt-button>
-    <kpt-drawer [(open)]="menuOpen" position="right" header="Filtry">…</kpt-drawer>
+    <kpt-drawer [(open)]="menuOpen" position="right" header="Filters">…</kpt-drawer>
 
-## Stan zamknięty / a11y
-Panel jest zawsze w DOM (bez `@if`), chowany `transform` **i** `visibility: hidden` — bez
-`display: none`, żeby zachować animację wjazdu i wyjazdu. `visibility` wyjmuje zamknięty panel
-z kolejki Tab i z drzewa dostępności bez `inert`, i to już na pierwszej klatce, bez czekania
-na JavaScript. Obie deklaracje stanu zamkniętego siedzą w regule **bazowej**, nie w
-`[data-position]` — atrybut pozycji Angular ustawia dopiero w przebiegu aktualizacji, więc panel
-warunkowany atrybutem mignąłby na ekranie i wyjechał animacją. `prefers-reduced-motion: reduce`
-zdejmuje przejścia.
+## The closed state / a11y
+The panel 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 panel
+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. Both closed-state declarations live in the **base** rule, not in
+`[data-position]` — Angular only sets the position attribute during the update pass, so a panel gated on that
+attribute would flash on screen and then animate away. `prefers-reduced-motion: reduce`
+drops the transitions.
 
-## Tokeny
-Panel `--kpt-color-surface-raised`, `--kpt-elevation-4`; backdrop półprzezroczysty.
+## Tokens
+The panel `--kpt-color-surface-raised`, `--kpt-elevation-4`; a semi-transparent backdrop.

package/src/lib/empty/llms.txt

@@ -1,17 +1,17 @@
 # KptEmpty (kpt-empty)
 
-Stan pusty (empty state) — ikona, tytuł, opis i opcjonalne akcje (projekcja).
+An empty state — an icon, a title, a description and optional actions (content projection).
 Import: `import { KptEmpty } from '@konce-pt/angular';`
 
-## Wejścia
-- `icon`: string | null (domyślnie 'info-circle')
+## Inputs
+- `icon`: string | null (default 'info-circle')
 - `title`: string; `description`: string
-- Akcje: `<ng-content>` (np. przyciski).
+- Actions: `<ng-content>` (buttons, for instance).
 
-## Przykład
-    <kpt-empty icon="search" title="Brak wyników" description="Zmień kryteria.">
-      <kpt-button>Wyczyść filtry</kpt-button>
+## Example
+    <kpt-empty icon="search" title="No results" description="Change your criteria.">
+      <kpt-button>Clear filters</kpt-button>
     </kpt-empty>
 
-## Tokeny
-Ikona w kółku `--kpt-color-muted`; tekst `--kpt-color-on-surface(-muted)`.
+## Tokens
+The icon sits in a `--kpt-color-muted` circle; text `--kpt-color-on-surface(-muted)`.

package/src/lib/fab/llms.txt

@@ -1,18 +1,18 @@
 # KptFab (kpt-fab)
 
-Floating Action Button — okrągły, wyniesiony przycisk akcji. Import: `import { KptFab } from '@konce-pt/angular';`
+A floating action button — a round, raised action button. Import: `import { KptFab } from '@konce-pt/angular';`
 
-## Wejścia
-- `variant`: 'filled' | 'tonal' (domyślnie 'filled')
-- `size`: 'md' | 'mini' (domyślnie 'md')
-- `extended`: boolean (pigułka z tekstem)
+## Inputs
+- `variant`: 'filled' | 'tonal' (default 'filled')
+- `size`: 'md' | 'mini' (default 'md')
+- `extended`: boolean (a pill with text)
 - `disabled`: boolean; `type`: 'button' | 'submit' | 'reset'
-- `ariaLabel`: string (wymagane dla wariantu okrągłego, bez tekstu)
+- `ariaLabel`: string (required for the round, textless variant)
 
-## Przykład
-    <kpt-fab ariaLabel="Dodaj"><kpt-icon name="plus" /></kpt-fab>
-    <kpt-fab extended><kpt-icon name="plus" /> Nowy</kpt-fab>
-    <kpt-fab variant="tonal" size="mini" ariaLabel="Edytuj"><kpt-icon name="copy" /></kpt-fab>
+## Example
+    <kpt-fab ariaLabel="Add"><kpt-icon name="plus" /></kpt-fab>
+    <kpt-fab extended><kpt-icon name="plus" /> New</kpt-fab>
+    <kpt-fab variant="tonal" size="mini" ariaLabel="Edit"><kpt-icon name="copy" /></kpt-fab>
 
-## Tokeny
-Tło `--kpt-color-primary` / `--kpt-color-primary-container` (tonal); cień `--kpt-elevation-3`.
+## Tokens
+Background `--kpt-color-primary` / `--kpt-color-primary-container` (tonal); shadow `--kpt-elevation-3`.

package/src/lib/fieldset/llms.txt

@@ -1,17 +1,17 @@
 # KptFieldset (kpt-fieldset)
 
-Grupa pól z legendą (`<fieldset>`+`<legend>`), opcjonalnie zwijana.
+A group of fields with a legend (`<fieldset>`+`<legend>`), optionally collapsible.
 Import: `import { KptFieldset } from '@konce-pt/angular';`
 
-## Wejścia / model
+## Inputs / model
 - `legend`: string
 - `toggleable`: boolean; `collapsed`: model<boolean>
-- `animated`: boolean (domyślnie true) — animacja zwijania (CSS grid, czysty CSS)
-- `animationDuration`: number (domyślnie 500) — czas animacji w ms
-- Treść: `<ng-content>`.
+- `animated`: boolean (default true) — the collapse animation (CSS grid, pure CSS)
+- `animationDuration`: number (default 500) — animation time in ms
+- Content: `<ng-content>`.
 
-## Przykład
-    <kpt-fieldset legend="Dane osobowe" toggleable>…</kpt-fieldset>
+## Example
+    <kpt-fieldset legend="Personal details" toggleable>…</kpt-fieldset>
 
-## Tokeny
-Ramka `--kpt-color-border`; radius `--kpt-radius-md`.
+## Tokens
+Border `--kpt-color-border`; radius `--kpt-radius-md`.

package/src/lib/file-upload/llms.txt

@@ -1,23 +1,23 @@
 # KptFileUpload (kpt-file-upload)
 
-Wgrywanie plików (drag-drop + wybór) na Signal Forms. Wartość = File[].
+File upload (drag-and-drop + picker) on Signal Forms. The value is a File[].
 Import: `import { KptFileUpload } from '@konce-pt/angular';`
 
-## Wejścia / model
-- `value`: model<File[]> (lub `formField`)
-- `accept`: string (np. 'image/*')
+## Inputs / model
+- `value`: model<File[]> (or `formField`)
+- `accept`: string (e.g. 'image/*')
 - `multiple`: boolean
 - `disabled`/`invalid`/`touched`: boolean; `touch`: output
 
-## Przykład
+## Example
     <kpt-file-upload [formField]="f.files" accept="image/*" multiple />
     <kpt-file-upload [(value)]="files" />
 
     files = signal<File[]>([]);
 
-## Zachowanie
-Strefa reaguje na klik i na przeciągnięcie plików. Przy `multiple=false` przechowuje tylko pierwszy plik.
-Lista plików pokazuje nazwę, rozmiar i przycisk usuwania.
+## Behavior
+The zone responds both to a click and to files dragged onto it. With `multiple=false` it keeps only the first file.
+The file list shows the name, the size and a remove button.
 
-## Tokeny
-Strefa `--kpt-form-field-border` (przerywana), stan dragover `--kpt-color-primary`.
+## Tokens
+The zone uses `--kpt-form-field-border` (dashed), the dragover state `--kpt-color-primary`.

package/src/lib/form-field/llms.txt

@@ -1,40 +1,40 @@
 # KptFormField (kpt-form-field)
 
-Wrapper pola formularza: etykieta, podpowiedź i komunikat błędu wokół dowolnej kontrolki
-(np. `kpt-input`). Prezentacyjny — stan błędu przekazuje się przez `error`.
+A form field wrapper: the label, the hint and the error message around any control
+(`kpt-input`, for instance). Presentational — the error state is passed in through `error`.
 Import: `import { KptFormField } from '@konce-pt/angular';`
 
-## Selektor
+## Selector
 `kpt-form-field`
 
-## Wejścia (input signals)
-- `label`: string — tekst etykiety
-- `hint`: string — podpowiedź (ukrywana, gdy jest błąd)
-- `error`: string | null — komunikat błędu; gdy niepusty, pole jest oznaczone jako nieprawidłowe
-- `required`: boolean — gwiazdka przy etykiecie
-- `controlId`: string — id kontrolki dla powiązania `label[for]`
-- `labelType`: 'fixed' | 'over' | 'in' | 'on' — wariant etykiety (domyślnie `fixed`)
-
-## Warianty etykiety (labelType)
-- `fixed` (domyślny) — statyczna etykieta nad kontrolką (jak dotychczas).
-- `over` — Float Label: etykieta unosi się nad obramowanie pola.
-- `in` — Float Label: etykieta unosi się do górnej części wewnątrz pola (pole wyższe, styl „filled").
-- `on` — Float Label: etykieta siada na górnym obramowaniu (notch, styl „outlined").
-
-Warianty float mają animowane przejście etykiety (pozycja spoczynkowa w miejscu placeholdera →
-uniesiona). Uniesienie następuje przy focusie kontrolki **lub** gdy pole ma wartość. Wykrywanie
-wypełnienia jest po stronie komponentu (zdarzenia `input`/`change` + wartość początkowa) — **nie**
-wymaga ustawiania placeholdera na kontrolce.
+## Inputs (input signals)
+- `label`: string — the label text
+- `hint`: string — a hint (hidden while there is an error)
+- `error`: string | null — the error message; when non-empty, the field is marked invalid
+- `required`: boolean — an asterisk next to the label
+- `controlId`: string — the control's id, for the `label[for]` association
+- `labelType`: 'fixed' | 'over' | 'in' | 'on' — the label variant (default `fixed`)
+
+## Label variants (labelType)
+- `fixed` (the default) — a static label above the control (as before).
+- `over` — a float label: the label rises above the field's border.
+- `in` — a float label: the label rises into the upper part inside the field (a taller field, the "filled" style).
+- `on` — a float label: the label sits on the top border (a notch, the "outlined" style).
+
+The float variants animate the label's transition (from its resting position where the placeholder is →
+raised). It rises when the control takes focus **or** when the field has a value. Detecting whether
+it is filled happens inside the component (`input`/`change` events + the initial value) — it does **not**
+require setting a placeholder on the control.
 
     <kpt-form-field label="E-mail" labelType="over">
       <kpt-input />
     </kpt-form-field>
 
-### Kontrolki bez natywnego `input`/`textarea`
+### Controls with no native `input`/`textarea`
 
-Wartości `kpt-select` nie da się odczytać z DOM (panel żyje w overlayu), więc taka kontrolka
-zgłasza wypełnienie sama — dostarcza token `KPT_FORM_FIELD_CONTROL` z sygnałem `filled`.
-`kpt-select` robi to z pudełka; własna kontrolka wymaga:
+The value of `kpt-select` cannot be read from the DOM (the panel lives in an overlay), so such a control
+reports being filled itself — it provides the `KPT_FORM_FIELD_CONTROL` token with a `filled` signal.
+`kpt-select` does this out of the box; a custom control needs:
 
     import { KPT_FORM_FIELD_CONTROL, type KptFormFieldControl } from '@konce-pt/angular';
 
@@ -45,36 +45,36 @@ zgłasza wypełnienie sama — dostarcza token `KPT_FORM_FIELD_CONTROL` z sygna
       readonly filled = computed(() => this.value() != null);
     }
 
-Gdy kontrolka dostarczy token, `kpt-form-field` przestaje zaglądać do DOM i ufa wyłącznie
-sygnałowi `filled` — dlatego etykieta unosi się natychmiast po zmianie wartości.
+Once a control provides the token, `kpt-form-field` stops looking into the DOM and trusts the
+`filled` signal alone — which is why the label rises the instant the value changes.
 
-## Projekcja
-Kontrolkę umieszcza się w treści (ng-content):
+## Content projection
+The control goes into the content (ng-content):
 
-    <kpt-form-field label="E-mail" [error]="emailError()" hint="Adres firmowy" required controlId="f-email">
+    <kpt-form-field label="E-mail" [error]="emailError()" hint="Your work address" required controlId="f-email">
       <kpt-input [formField]="loginForm.email" type="email" id="f-email" />
     </kpt-form-field>
 
-## Integracja z Signal Forms
-`error` zwykle pochodzi z pola formularza, np.:
+## Integration with Signal Forms
+`error` usually comes from a form field, for example:
 
     emailError = computed(() => {
       const s = loginForm.email();
       return s.touched() && s.invalid() ? s.errors()[0]?.message ?? null : null;
     });
 
-Bramka `touched()` dotyczy wyłącznie komunikatu — walidatorów nie warunkuj (`when:` na
-`state.touched()` sprawia, że `valid()` kłamie na nietkniętym formularzu). Kontrolki `kpt-*`
-same bramkują swój stan wizualny tak samo. Pełny przepływ submit: sekcja
-`## Formularz od zera (Signal Forms)` w głównym llms.txt.
+The `touched()` gate applies to the message only — do not gate the validators (`when:` on
+`state.touched()` makes `valid()` lie on an untouched form). The `kpt-*` controls gate their own
+visual state the same way. The full submit flow: the
+`## A form from scratch (Signal Forms)` section in the root llms.txt.
 
-## Tokeny
+## Tokens
 `--kpt-form-field-label`, `--kpt-form-field-hint`, `--kpt-form-field-error`, `--kpt-color-danger`.
-Warianty float dodatkowo: `--kpt-form-field-placeholder` (etykieta spoczynkowa),
-`--kpt-form-field-border-focus` (uniesiona), `--kpt-form-field-border-error` (stan błędu),
-`--kpt-form-field-bg` (maska notcha w `on`). Animacja: `--kpt-motion-duration-fast`,
-`--kpt-motion-easing-standard`; respektuje `prefers-reduced-motion`.
-
-## Dostępność
-- Komunikat błędu ma `role="alert"`.
-- Powiąż `controlId` z `id` kontrolki, aby etykieta była klikalna (`label[for]`).
+The float variants add: `--kpt-form-field-placeholder` (the resting label),
+`--kpt-form-field-border-focus` (raised), `--kpt-form-field-border-error` (the error state),
+`--kpt-form-field-bg` (the notch mask in `on`). Animation: `--kpt-motion-duration-fast`,
+`--kpt-motion-easing-standard`; it respects `prefers-reduced-motion`.
+
+## Accessibility
+- The error message carries `role="alert"`.
+- Tie `controlId` to the control's `id` so the label is clickable (`label[for]`).