@konce-pt/angular 0.2.0 → 0.4.0

package/README.md

@@ -1,5 +1,7 @@
 <div align="center">
 
+<img src="https://ui.konce.pt/images/koncept_ui_lib.png" alt="Koncept UI — Angular component library" width="100%" />
+
 # Koncept UI — Angular
 
 **Open-source Angular 22 component library built on Signals & Signal Forms.**
@@ -30,6 +32,7 @@
 - 🎨 **100% tokenized** — every style is a `var(--kpt-*)` CSS custom property. Light/dark theme, neutral OKLCH palette. Swap the brand by swapping one token layer.
 - 🧩 **Standalone components** — no NgModules. Import only what you use; tree-shakeable.
 - ♿ **Built on Angular CDK** — overlays, a11y, focus management, virtual scrolling.
+- 🌍 **i18n built in** — English (default) & Polish out of the box, runtime locale switch, add any language with one JSON.
 
 ## Installation
 
@@ -153,7 +156,7 @@ All visuals are driven by `var(--kpt-*)` tokens (three tiers: primitives → sem
 }
 ```
 
-**Common token names:** surfaces `--kpt-color-surface`, `--kpt-color-surface-sunken|raised|variant`; text `--kpt-color-on-surface`, `--kpt-color-on-surface-muted`; borders `--kpt-color-border`, `--kpt-color-border-strong`; radii `--kpt-radius-sm|md|lg|xl|full|none`; elevation `--kpt-elevation-1..4`. (There is **no** `--kpt-color-text`, `--kpt-color-bg` or `--kpt-shadow-*`.)
+**Common token names:** surfaces `--kpt-color-surface`, `--kpt-color-surface-sunken|raised|variant|hover|selected`; text `--kpt-color-on-surface`, `--kpt-color-on-surface-muted` (aliases `--kpt-color-text`, `--kpt-color-text-muted|subtle|inverse`); borders `--kpt-color-border`, `--kpt-color-border-strong`; accent roles in full — `{primary,danger,success,warning,info}` each with `-hover`, `-contrast`, `-subtle`, `-border`; radii `--kpt-radius-sm|md|lg|xl|full|none`; elevation `--kpt-elevation-1..4` (aliases `--kpt-shadow-sm|md|lg`). There is no `--kpt-color-bg`.
 
 ## Icons
 
@@ -164,6 +167,40 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
 // providers: [provideKptTablerIcons()]
 ```
 
+## Internationalization (i18n)
+
+Component labels ship in **English (default)** and **Polish**. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from a signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
+
+```ts
+import { provideKptI18n } from '@konce-pt/angular';
+// providers: [provideKptI18n({ locale: 'pl' })]   // Polish UI
+```
+
+Switch at runtime:
+
+```ts
+import { inject } from '@angular/core';
+import { KptI18n } from '@konce-pt/angular';
+
+const i18n = inject(KptI18n);
+i18n.setLocale('en');
+```
+
+**Add any language with one JSON** (shape = the `KptMessages` contract; missing keys fall back to English):
+
+```ts
+import de from './i18n/de.json';
+provideKptI18n({ locale: 'de', messages: { de } });
+```
+
+**Override individual labels** of an existing language:
+
+```ts
+provideKptI18n({ messages: { en: { paginator: { rowsPerPage: 'Rows per page:' } } } });
+```
+
+Calendar weekday/month names come from the browser's `Intl` API for the active locale. Per-component label inputs (e.g. `emptyMessage`, `acceptLabel`) still take precedence over the dictionary.
+
 ## Documentation
 
 - **Storybook** — interactive docs for every component.
@@ -190,6 +227,7 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
 - 📊 **Flagowa tabela danych** — sortowanie, filtr, paginacja, virtual scroll, zaznaczanie, przestawianie/zamrażanie kolumn, eksport CSV, szablony komórek.
 - 🎨 **100% na tokenach** — każdy styl to `var(--kpt-*)`. Motyw jasny/ciemny, neutralna paleta OKLCH.
 - 🧩 **Standalone** — bez NgModules, tree-shaking.
+- 🌍 **Wbudowane i18n** — angielski (domyślny) i polski, przełączanie języka w runtime, dowolny język jednym plikiem JSON.
 
 ### Instalacja
 
@@ -215,6 +253,27 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
 
 Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
 
+### Internacjonalizacja (i18n)
+
+Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
+
+```ts
+import { provideKptI18n } from '@konce-pt/angular';
+// providers: [provideKptI18n({ locale: 'pl' })]   // polski interfejs
+```
+
+Przełączanie w runtime: `inject(KptI18n).setLocale('en')`.
+
+**Własny język jednym plikiem JSON** (kształt = kontrakt `KptMessages`; brakujące klucze spadają na EN):
+
+```ts
+import de from './i18n/de.json';
+provideKptI18n({ locale: 'de', messages: { de } });
+```
+
+Nadpisanie pojedynczych etykiet: `provideKptI18n({ messages: { pl: { paginator: { rowsPerPage: 'Na stronie:' } } } })`.
+Nazwy dni/miesięcy w kalendarzach pochodzą z `Intl` wg locale. Inputy etykiet per-komponent (np. `emptyMessage`) mają priorytet nad słownikiem.
+
 ### Komponenty (70+)
 
 Formularze (Signal Forms), przyciski i akcje, layout, nawigacja, dane (z flagową `kpt-data-table`), feedback i overlay — pełna lista w tabeli powyżej. Każdy komponent ma plik `llms.txt` z opisem API obok źródła.

package/dist/README.md

@@ -1,5 +1,7 @@
 <div align="center">
 
+<img src="https://ui.konce.pt/images/koncept_ui_lib.png" alt="Koncept UI — Angular component library" width="100%" />
+
 # Koncept UI — Angular
 
 **Open-source Angular 22 component library built on Signals & Signal Forms.**
@@ -30,6 +32,7 @@
 - 🎨 **100% tokenized** — every style is a `var(--kpt-*)` CSS custom property. Light/dark theme, neutral OKLCH palette. Swap the brand by swapping one token layer.
 - 🧩 **Standalone components** — no NgModules. Import only what you use; tree-shakeable.
 - ♿ **Built on Angular CDK** — overlays, a11y, focus management, virtual scrolling.
+- 🌍 **i18n built in** — English (default) & Polish out of the box, runtime locale switch, add any language with one JSON.
 
 ## Installation
 
@@ -153,7 +156,7 @@ All visuals are driven by `var(--kpt-*)` tokens (three tiers: primitives → sem
 }
 ```
 
-**Common token names:** surfaces `--kpt-color-surface`, `--kpt-color-surface-sunken|raised|variant`; text `--kpt-color-on-surface`, `--kpt-color-on-surface-muted`; borders `--kpt-color-border`, `--kpt-color-border-strong`; radii `--kpt-radius-sm|md|lg|xl|full|none`; elevation `--kpt-elevation-1..4`. (There is **no** `--kpt-color-text`, `--kpt-color-bg` or `--kpt-shadow-*`.)
+**Common token names:** surfaces `--kpt-color-surface`, `--kpt-color-surface-sunken|raised|variant|hover|selected`; text `--kpt-color-on-surface`, `--kpt-color-on-surface-muted` (aliases `--kpt-color-text`, `--kpt-color-text-muted|subtle|inverse`); borders `--kpt-color-border`, `--kpt-color-border-strong`; accent roles in full — `{primary,danger,success,warning,info}` each with `-hover`, `-contrast`, `-subtle`, `-border`; radii `--kpt-radius-sm|md|lg|xl|full|none`; elevation `--kpt-elevation-1..4` (aliases `--kpt-shadow-sm|md|lg`). There is no `--kpt-color-bg`.
 
 ## Icons
 
@@ -164,6 +167,40 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
 // providers: [provideKptTablerIcons()]
 ```
 
+## Internationalization (i18n)
+
+Component labels ship in **English (default)** and **Polish**. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from a signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
+
+```ts
+import { provideKptI18n } from '@konce-pt/angular';
+// providers: [provideKptI18n({ locale: 'pl' })]   // Polish UI
+```
+
+Switch at runtime:
+
+```ts
+import { inject } from '@angular/core';
+import { KptI18n } from '@konce-pt/angular';
+
+const i18n = inject(KptI18n);
+i18n.setLocale('en');
+```
+
+**Add any language with one JSON** (shape = the `KptMessages` contract; missing keys fall back to English):
+
+```ts
+import de from './i18n/de.json';
+provideKptI18n({ locale: 'de', messages: { de } });
+```
+
+**Override individual labels** of an existing language:
+
+```ts
+provideKptI18n({ messages: { en: { paginator: { rowsPerPage: 'Rows per page:' } } } });
+```
+
+Calendar weekday/month names come from the browser's `Intl` API for the active locale. Per-component label inputs (e.g. `emptyMessage`, `acceptLabel`) still take precedence over the dictionary.
+
 ## Documentation
 
 - **Storybook** — interactive docs for every component.
@@ -190,6 +227,7 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
 - 📊 **Flagowa tabela danych** — sortowanie, filtr, paginacja, virtual scroll, zaznaczanie, przestawianie/zamrażanie kolumn, eksport CSV, szablony komórek.
 - 🎨 **100% na tokenach** — każdy styl to `var(--kpt-*)`. Motyw jasny/ciemny, neutralna paleta OKLCH.
 - 🧩 **Standalone** — bez NgModules, tree-shaking.
+- 🌍 **Wbudowane i18n** — angielski (domyślny) i polski, przełączanie języka w runtime, dowolny język jednym plikiem JSON.
 
 ### Instalacja
 
@@ -215,6 +253,27 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
 
 Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
 
+### Internacjonalizacja (i18n)
+
+Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
+
+```ts
+import { provideKptI18n } from '@konce-pt/angular';
+// providers: [provideKptI18n({ locale: 'pl' })]   // polski interfejs
+```
+
+Przełączanie w runtime: `inject(KptI18n).setLocale('en')`.
+
+**Własny język jednym plikiem JSON** (kształt = kontrakt `KptMessages`; brakujące klucze spadają na EN):
+
+```ts
+import de from './i18n/de.json';
+provideKptI18n({ locale: 'de', messages: { de } });
+```
+
+Nadpisanie pojedynczych etykiet: `provideKptI18n({ messages: { pl: { paginator: { rowsPerPage: 'Na stronie:' } } } })`.
+Nazwy dni/miesięcy w kalendarzach pochodzą z `Intl` wg locale. Inputy etykiet per-komponent (np. `emptyMessage`) mają priorytet nad słownikiem.
+
 ### Komponenty (70+)
 
 Formularze (Signal Forms), przyciski i akcje, layout, nawigacja, dane (z flagową `kpt-data-table`), feedback i overlay — pełna lista w tabeli powyżej. Każdy komponent ma plik `llms.txt` z opisem API obok źródła.