@konce-pt/angular 0.7.10 → 0.7.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.7.10",
+  "version": "0.7.11",
   "description": "Open-source Angular 22 component library on Signals & Signal Forms — 70+ components, rich data table, zoneless, fully tokenized. Selektory kpt-*, klasy Kpt*.",
   "license": "MIT",
   "author": "konce.pt",

package/src/lib/auth/llms.txt

@@ -0,0 +1,104 @@
+# 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.
+Import: `import { KptAuth, KptAuthProviderDef } from '@konce-pt/angular';`
+
+## Selektor
+`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
+- `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]`)
+- `animated`: boolean = true; `animationDuration`: number = 320 (ms)
+
+## Wyjścia
+- `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`
+
+## 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
+
+**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.
+
+## 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.
+
+## Ikony dostawców
+Rdzeń nie zawiera ikon marek. Trzy drogi:
+1. `provideKptTablerIcons()` z `@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.
+
+Ikona jest dekoracyjna (`kpt-icon` ma `aria-hidden`), więc nazwa dostępna przycisku zawsze
+pochodzi z `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`,
+  `new-password`, `name`.
+- Przełączniki trybu to `<button>` z tekstem, nie `<a href="#">`.
+- `prefers-reduced-motion` wyłącza przejazdy i wjazd treści.
+
+## 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),
+`--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):
+
+    kpt-auth {
+      --kpt-auth-padding: 0;
+      --kpt-auth-width: 100%;
+      --kpt-auth-card-height: 100dvh;
+      --kpt-auth-card-radius: 0;
+      --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).
+
+## Przykład
+    <kpt-auth
+      [providers]="[{ id: 'google', label: 'Google', icon: 'brand-google' }]"
+      [busy]="loading()"
+      [error]="serverError()"
+      (signIn)="login($event)"
+      (signUp)="register($event)"
+      (resetPassword)="sendLink($event.email)"
+      (providerSelect)="oauth($event.id)"
+    >
+      <img kptAuthBrand src="/logo.svg" alt="Konce" />
+      <small kptAuthFooter>© 2026 Konce</small>
+    </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`.

package/src/lib/i18n/llms.txt

@@ -27,8 +27,8 @@ Import: `import { provideKptI18n, KptI18n } from '@konce-pt/angular';`
 Namespace'y: `common` (close/remove/previous/next/clear/done/all), `paginator` (rowsPerPage/range/prevPage/nextPage),
 `select`, `listbox`, `dataView`, `dataTable`, `confirm`, `fileUpload`, `chipsInput`, `dateRange`, `datepicker`,
 `pickList`, `orderList`, `inputNumber`, `password`, `spinner`, `speedDial`, `scrollTop`, `splitButton`, `panel`,
-`breadcrumb`, `richText`. Interpolacje: `paginator.range` ({start},{end},{total}), `dataTable.filter*` ({column}),
-`richText.styleHeading` ({level}). Nazwy dni/miesięcy w kalendarzach są wyliczane z `Intl` wg locale (nie ze słownika).
+`breadcrumb`, `richText`, `auth` (w tym `auth.promo.*`). Interpolacje: `paginator.range` ({start},{end},{total}), `dataTable.filter*` ({column}),
+`richText.styleHeading` ({level}), `auth.continueWith` ({provider}), `auth.passwordHint` i `auth.errorMinLength` ({min}). Nazwy dni/miesięcy w kalendarzach są wyliczane z `Intl` wg locale (nie ze słownika).
 
 ## Uwaga
 Pojedyncze etykiety można też nadpisać per-komponent przez odpowiedni `input()` (np. `emptyMessage`, `acceptLabel`) —

package/src/lib/input/llms.txt

@@ -32,6 +32,8 @@ Pełny przepływ: sekcja `## Formularz od zera (Signal Forms)` w głównym llms.
 - `placeholder`: string
 - `id`: string — trafia na wewnętrzny `<input>` (do `label[for]`); host go nie nosi
 - `ariaLabel`: string | null
+- `autocomplete`: string | null — podpowiedź dla przeglądarki i menedżera haseł
+  (np. `email`, `username`, `one-time-code`); bez niej autouzupełnianie nie działa
 
 ## Stan wiązany automatycznie przez FormField
 `value` (model, wymagane), `disabled`, `readonly`, `required`, `invalid`, `errors`,

package/src/lib/password/llms.txt

@@ -7,6 +7,9 @@ Import: `import { KptPassword } from '@konce-pt/angular';`
 - `value`: model<string> (lub `formField`)
 - `feedback`: boolean — pokazuje miernik siły (4 paski + etykieta)
 - `placeholder`: string
+- `id`: string — id natywnego pola; wiąże etykietę z `kpt-form-field [controlId]`
+- `autocomplete`: string | null = 'current-password' — w rejestracji i resecie ustaw
+  `new-password`, inaczej menedżer haseł podstawi stare hasło zamiast zaproponować nowe
 - `disabled`/`invalid`/`touched`: boolean; `touch`: output
 
 ## Siła hasła

package/src/lib/rich-text/llms.txt

@@ -10,11 +10,20 @@ Import: `import { KptRichText, KptRichTool, KptRichToolbar } from '@konce-pt/ang
 - `toolbar`: KptRichToolbar = KptRichTool[] | KptRichTool[][] (płaska lista lub grupy=sekcje).
   Pominięcie narzędzia/grupy je wyłącza; między grupami separator. Domyślnie pełny pasek w 5 sekcjach.
 - `placeholder`: string; `disabled`/`invalid`/`touched`: boolean; `touch`: output
+- `maxListLevel`: number = 6 — maksymalna głębokość zagnieżdżenia list. Limit dotyczy interakcji
+  (Tab i narzędzia `indent`/`outdent`); wklejonej treści nie spłaszczamy, żeby nie gubić danych.
 
 ## Narzędzia (KptRichTool)
 - Schowek: `copy`, `paste` (z formatowaniem, oczyszczone), `pasteText` (bez formatowania)
 - Styl: `heading` (select: Normalny/paragraf + Nagłówek 1–6)
 - Format: `bold`, `italic`, `underline`, `strike`, `ul`, `ol`
+- Wcięcia list: `indent` (dodaj wcięcie), `outdent` (usuń wcięcie) — działają wyłącznie w `li`,
+  zagnieżdżają zgodnie ze specyfikacją (`li > ul/ol > li`, podlista dziedziczy typ listy rodzica).
+  Aktywne tylko tam, gdzie coś zrobią (poza listą i przy limicie przycisk jest wyszarzony).
+  Znaczniki poziomów cyklują co 3 (jak w edytorach tekstu): `ol` 1. → a. → i., `ul` • → ○ → ▪.
+  Reguły `list-style-type` obowiązują w widoku edytora (`.kpt-rich-text__editor`) do 6. poziomu.
+  Zapisany HTML nie niesie klas — renderując `value` poza edytorem opakuj go w `.kpt-rich-content`
+  z `@konce-pt/styles`, żeby listy wyglądały tak samo.
 - Kolory: `foreColor` (kolor tekstu), `backColor` (kolor tła) — popover z próbkami + `input type=color`
 - Wyrównanie: `alignLeft`, `alignCenter`, `alignRight`, `alignJustify`
 - `table` (wstaw tabelę: popover z siatką NxM). W komórce prawy klik = menu kontekstowe
@@ -26,6 +35,15 @@ Import: `import { KptRichText, KptRichTool, KptRichToolbar } from '@konce-pt/ang
   Odłożone: selekcja nieregularna, Ctrl+Backspace, zbiorcze formatowanie z górnego paska.
 - `link` (prompt URL), `clear` (usuń formatowanie), `html` (przełącznik podglądu źródła HTML — edycja surowego HTML)
 
+## Klawiatura
+- Tab / Shift+Tab w punkcie listy = wcięcie / poziom wyżej (to samo co `indent`/`outdent`).
+- Tab / Shift+Tab w komórce tabeli = następna / poprzednia komórka (z zaznaczeniem jej treści).
+  Lista wewnątrz komórki ma pierwszeństwo — dopiero gdy nie da się już wciąć, Tab zmienia komórkę.
+- Wszędzie indziej — a także na pierwszym punkcie listy, na poziomie najwyższym, przy `maxListLevel`
+  i w ostatniej komórce tabeli — Tab zostaje **natywny** i wyprowadza fokus z edytora. To celowe:
+  edytor nie może być pułapką klawiaturową (WCAG 2.1.2), więc `preventDefault()` wołamy wyłącznie
+  wtedy, gdy operacja faktycznie zmieniła treść.
+
 ## Przykład
     <kpt-rich-text [formField]="f.body" />  <!-- pełny pasek -->
     <kpt-rich-text [(value)]="v" [toolbar]="[['bold','italic'],['ul','ol'],['link']]" />
@@ -42,4 +60,5 @@ Sanityzacja obejmuje **każdy** zapis do DOM edytora, nie tylko paste — w tym
 zewnątrz (`[(value)]`/`formField` z aplikacji, tryb źródła HTML). Traktuj `value` na wejściu jako
 potencjalnie niezaufane (DB, inny użytkownik, CMS); na wyjściu z komponentu jest sanityzowane.
 Schowek „wklej"/„wklej bez formatowania" używa async Clipboard API (wymaga uprawnień przeglądarki).
-Tabele: odłożone na osobne zadanie.
+Wyjątek od execCommand: wcięcia list robimy własnym kodem na DOM — `execCommand('indent')` produkuje
+w Chrome niepoprawne `ul > ul` (albo `blockquote` z marginesem, który i tak zdjąłby sanityzator).