@konce-pt/angular 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "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",
@@ -46,13 +46,13 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@konce-pt/chart": "0.8.1",
-    "@konce-pt/i18n": "0.8.1",
-    "@konce-pt/datetime": "0.8.1",
-    "@konce-pt/map": "0.8.1",
-    "@konce-pt/table": "0.8.1",
-    "@konce-pt/roadmap": "0.8.1",
-    "@konce-pt/icons": "0.8.1"
+    "@konce-pt/i18n": "0.8.2",
+    "@konce-pt/table": "0.8.2",
+    "@konce-pt/chart": "0.8.2",
+    "@konce-pt/datetime": "0.8.2",
+    "@konce-pt/map": "0.8.2",
+    "@konce-pt/icons": "0.8.2",
+    "@konce-pt/roadmap": "0.8.2"
   },
   "module": "fesm2022/konce-pt-angular.mjs",
   "typings": "types/konce-pt-angular.d.ts",

package/src/lib/app-shell/llms.txt

@@ -54,6 +54,12 @@ Keeping them apart means the desktop intent survives narrowing and widening the
 The `kptShellNavToggle` button hits the right state on its own — do not write `navOpen.set(...)` by hand,
 because on a narrow screen you would be setting the wrong model.
 
+It also supplies `aria-expanded`, `aria-controls` and `aria-label`, and it puts them where a screen
+reader can use them. On a native `<button>`/`<a>` host that is the host itself. On a wrapping
+component such as `kpt-icon-button` the attributes go down to the inner `<button>` instead — placing
+state attributes on a roleless wrapper would violate `aria-allowed-attr`. In that case the label
+stays with the component (`ariaLabel`), which the directive does not overwrite.
+
 ## The menu content convention (needed only for the rail)
 - `[kptNavLabel]` — the entry's text; in the rail it is hidden with the "visually hidden" technique, so the entry
   keeps an accessible name for a screen reader.

package/src/lib/card/llms.txt

@@ -15,6 +15,12 @@ Import: `import { KptCard } from '@konce-pt/angular';`
 - the default content → the card body
 - an element carrying the `kptCardFooter` attribute (a direct child of `kpt-card`) → the footer
 
+`kptCardFooter` must be a DIRECT child. Angular's content projection matches direct children only,
+so a footer nested inside a `<form>` (or any other wrapper) inside the card is never projected into
+the footer slot — it falls into the body instead, picking up the body's padding. Nothing warns about
+it, and the footer's own styling still applies, which makes the symptom read as a spacing bug rather
+than a placement one. Put the wrapper inside the footer, not the footer inside the wrapper.
+
 ## 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

package/src/lib/icon/llms.txt

@@ -7,22 +7,50 @@ the color from `currentColor`. Import: `import { KptIcon } from '@konce-pt/angul
 `kpt-icon`
 
 ## Inputs
-- `name`: KptIconName (required) — an icon name from the registry
+- `name`: string (required) — an icon name from the registry. Deliberately not a union of the
+  built-in names: once the Tabler set is registered there are 5130 legal names, so a closed
+  union would reject icons that work at runtime.
 - `size`: string (optional, e.g. '1.25rem') — otherwise inherited from font-size
 
-## Available names (built in)
-menu, x, chevron-up, chevron-down, chevron-left, chevron-right, check, search,
-grip-vertical, info, alert-triangle, circle-check, circle-x, calendar, copy, link, code,
-star, phone, map-pin, world, clock, align-left, align-center, align-right, align-justified,
-palette, highlight, clipboard, clipboard-text, table, mail, share, external-link, crosshair
-(the full list lives in `icons.ts`).
+## Available names (built in, no configuration)
+menu, x, chevron-up, chevron-down, chevron-left, chevron-right, check, search
+grip-vertical, info, alert-triangle, circle-check, circle-x, calendar, copy, link, code
+bold, italic, underline, strikethrough, list, list-numbers, indent-increase
+indent-decrease, clear-formatting, star, plus, upload, dots-vertical, photo, trash, pencil
+eye, eye-off, minus, arrow-up, arrow-down, zoom-in, info-circle, phone, map-pin, world
+clock, align-left, align-center, align-right, align-justified, palette, highlight
+clipboard, clipboard-text, table, mail, share, external-link, crosshair
+adjustments-horizontal, sun, moon, bell, settings, users, user-circle, logout, login
+layout-dashboard, home, activity, cube, shopping-cart, currency-dollar, arrow-left
+arrow-right, arrow-up-right, arrow-down-right, chart-bar, chart-line, filter, download
+refresh, dots, brand-github, brand-google
+
+These cover both what the components themselves draw and the staples of an application shell
+(theme, notifications, account, navigation, KPI). A typical admin panel needs nothing else.
 
 ## The full set (5130 Tabler icons)
-An optional entry point `@konce-pt/angular/icons` (downloaded only when imported):
+Two paths, and the difference is the bundle. `@konce-pt/angular/icons` exposes every icon as its own export,
+so importing by name lets the bundler keep only what you used:
+
+    // Production: two icons reach the bundle.
+    import { LayoutDashboard, Rocket } from '@konce-pt/angular/icons';
+    import { provideKptIcons } from '@konce-pt/angular';
+
+    bootstrapApplication(App, { providers: [provideKptIcons([LayoutDashboard, Rocket])] });
 
+    // Prototype: every icon, about 1.2 MB.
     import { provideKptTablerIcons } from '@konce-pt/angular/icons';
+
     bootstrapApplication(App, { providers: [provideKptTablerIcons()] });
-    // then: <kpt-icon name="rocket" />, <kpt-icon name="arrow-left" /> …
+
+`provideKptIcons` lives in the core entry point on purpose: `@konce-pt/angular/icons` imports the whole set
+statically, so a subset parameter there could not shrink anything. Passing the namespace object
+(`import * as tabler`) also registers everything — a namespace handed to a function blocks static
+analysis, so it is the explicit form of the prototype path, not a smaller one.
+
+Export names are PascalCase because `kebab-case` is not a legal identifier and camelCase would
+collide with keywords (`function`, `package`, `switch`). Each icon carries its own registry name,
+so `BrandHtml5` registers as `brand-html5`.
 
 You can also register your own through `KptIconRegistry.register({ name: 'inner svg' })` — the content is
 sanitized down to an allowlist of SVG geometry (`path`/`circle`/`rect`/`g`/`line`/`polygon`/`polyline`/

package/src/lib/menu/llms.txt

@@ -5,7 +5,10 @@ Requires `import '@angular/cdk/overlay-prebuilt.css';`
 Import: `import { KptMenu, KptMenuItem } from '@konce-pt/angular';`
 
 ## Inputs / outputs
-- `items`: KptMenuItem[]
+- `items`: readonly KptMenuItem[]
+- `open`: model<boolean> (default false) — two-way; the panel's open state. Public so the
+  application can own it: closing the menu after navigation, or opening it from a keyboard
+  shortcut, cannot be expressed through `(selected)` alone.
 - `selected`: output<KptMenuItem> — emitted only for regular entries (not for headers)
 
 ## KptMenuItem
@@ -44,3 +47,8 @@ descriptions and icons `--kpt-color-on-surface-muted`, `--kpt-font-size-xs`.
 The panel is `role="menu"`, entries are `role="menuitem"` (native `<button>` elements — keyboard support with no
 extra code). The header sits outside keyboard navigation. The badge value becomes part of the entry's accessible
 name ("Notifications 4").
+
+The trigger gets `aria-haspopup="menu"` and a live `aria-expanded`. They are placed on the
+interactive control INSIDE the slot (the projected `<button>`/`<a>`), never on the
+`.kpt-menu__trigger` wrapper — giving that wrapper a role would create a nested control and a second
+tab stop, and state attributes on a roleless element violate `aria-allowed-attr`.

package/src/lib/paginator/llms.txt

@@ -9,7 +9,11 @@ A paginator driven by signals. Import: `import { KptPaginator } from '@konce-pt/
 - `length`: number (required) — the total number of items
 - `pageSize`: model<number> (default 10) — two-way
 - `pageIndex`: model<number> from 0 (default 0) — two-way
-- `pageSizeOptions`: number[] (default [5,10,20,50])
+- `pageSizeOptions`: readonly number[] (default [5,10,20,50])
+
+  The select always offers the current `pageSize` even when it is absent from this list: without
+  that, `pageSize={8}` against the defaults left no matching option, so the control displayed the
+  first entry while the table paged by eight.
 
 ## Example
     <kpt-paginator [length]="total()" [(pageIndex)]="page" [(pageSize)]="size" />

package/types/konce-pt-angular-icons.d.ts

@@ -1,15 +1,28 @@
-export { KPT_TABLER_ICONS, KPT_TABLER_ICON_NAMES } from '@konce-pt/icons/tabler';
+export * from '@konce-pt/icons/tabler';
 import { EnvironmentProviders } from '@angular/core';
 
 /**
  * Rejestruje pełny zestaw Tabler Icons (5130) w `KptIconRegistry`, dzięki czemu
  * `kpt-icon` może użyć dowolnej ikony po nazwie.
  *
+ * Wciąga komplet (~1,2 MB), więc to ścieżka prototypowa. W produkcji zaimportuj ikony
+ * po nazwie i podaj je do `provideKptIcons([...])` z rdzenia `@konce-pt/angular` — tamta
+ * funkcja nie importuje pełnego zestawu, więc bundler zostawia wyłącznie użyte ikony.
+ *
  * @example
- * // main.ts
+ * // main.ts — prototyp: wszystkie ikony
  * bootstrapApplication(App, {
  *   providers: [provideKptTablerIcons()],
  * });
+ *
+ * @example
+ * // main.ts — produkcja: tylko to, czego używasz
+ * import { LayoutDashboard, Rocket } from '@konce-pt/angular/icons';
+ * import { provideKptIcons } from '@konce-pt/angular';
+ *
+ * bootstrapApplication(App, {
+ *   providers: [provideKptIcons([LayoutDashboard, Rocket])],
+ * });
  */
 declare function provideKptTablerIcons(): EnvironmentProviders;
 

package/types/konce-pt-angular-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"konce-pt-angular-icons.d.ts","sources":["../../icons/src/provider.ts"],"mappings":";;;AAIA;;;;;;;;;AASG;AACH,iBAAgB,qBAAqB,IAAI,oBAAoB;;;;","names":[]}
+{"version":3,"file":"konce-pt-angular-icons.d.ts","sources":["../../icons/src/provider.ts"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH,iBAAgB,qBAAqB,IAAI,oBAAoB;;;;","names":[]}

package/types/konce-pt-angular.d.ts

@@ -1,12 +1,12 @@
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, EnvironmentProviders, TemplateRef, OnDestroy } from '@angular/core';
+import { EnvironmentProviders, Signal, InjectionToken, TemplateRef, OnDestroy } from '@angular/core';
 import * as _angular_forms_signals from '@angular/forms/signals';
 import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import { KptLocale, KptMessages, DeepPartial, KptI18nConfig } from '@konce-pt/i18n';
 export { DeepPartial, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptI18nConfig, KptLocale, KptMessages } from '@konce-pt/i18n';
-import { KptIconName } from '@konce-pt/icons';
-export { KptIconName, renderKptIconSvg } from '@konce-pt/icons';
+import { KptIconInput, KptIconName } from '@konce-pt/icons';
+export { KptIconDef, KptIconInput, KptIconName, renderKptIconSvg } from '@konce-pt/icons';
 import { KptDateSelectionMode, KptCalendarView, KptDayCell, KptGridCell, KptClockMark, KptDateRangeValue, KptDateRangeMode, KptMonthPanel, KptRangeDayCell } from '@konce-pt/datetime';
 export { KptDateRangeValue } from '@konce-pt/datetime';
 import { KptColumnFilter, KptColumnSummary } from '@konce-pt/table';
@@ -84,7 +84,7 @@ interface KptOption<T = unknown> {
  * <kpt-button-group [formField]="f.period" [options]="periods" />
  */
 declare class KptButtonGroup<T = unknown> implements FormValueControl<T> {
-    readonly options: _angular_core.InputSignal<KptOption<T>[]>;
+    readonly options: _angular_core.InputSignal<readonly KptOption<T>[]>;
     readonly value: _angular_core.ModelSignal<T>;
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -202,7 +202,7 @@ interface KptMenuItem<T = unknown> {
     danger?: boolean;
     separator?: boolean;
     /** Pozycje podrzędne (menubar / megamenu). */
-    items?: KptMenuItem<T>[];
+    items?: readonly KptMenuItem<T>[];
     /** Adres odnośnika (menubar / megamenu). */
     url?: string;
 }
@@ -216,15 +216,22 @@ interface KptMenuItem<T = unknown> {
  * </kpt-menu>
  */
 declare class KptMenu<T = unknown> {
-    readonly items: _angular_core.InputSignal<KptMenuItem<T>[]>;
+    readonly items: _angular_core.InputSignal<readonly KptMenuItem<T>[]>;
     readonly selected: _angular_core.OutputEmitterRef<KptMenuItem<T>>;
-    protected readonly open: _angular_core.WritableSignal<boolean>;
+    /**
+     * Czy panel jest otwarty (dwukierunkowe). Publiczne, bo aplikacja bywa właścicielem tego
+     * stanu — zamknięcie menu po nawigacji albo otwarcie go skrótem klawiaturowym nie da się
+     * wyrazić przez samo `(selected)`. Port React ma tu `open`/`defaultOpen`/`onOpenChange`.
+     */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    private readonly host;
     protected readonly positions: ConnectedPosition[];
+    constructor();
     protected toggle(): void;
     protected close(): void;
     protected pick(item: KptMenuItem<T>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptMenu<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptMenu<any>, "kpt-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptMenu<any>, "kpt-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "open": "openChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -236,7 +243,7 @@ declare class KptMenu<T = unknown> {
  */
 declare class KptSplitButton<T = unknown> {
     readonly variant: _angular_core.InputSignal<KptButtonVariant>;
-    readonly items: _angular_core.InputSignal<KptMenuItem<T>[]>;
+    readonly items: _angular_core.InputSignal<readonly KptMenuItem<T>[]>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly primaryClick: _angular_core.OutputEmitterRef<void>;
     readonly selected: _angular_core.OutputEmitterRef<KptMenuItem<T>>;
@@ -281,14 +288,16 @@ declare class KptIconRegistry {
     /** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
     readonly version: _angular_core.Signal<number>;
     /**
-     * Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`.
+     * Rejestruje (lub nadpisuje) ikony. Przyjmuje listę definicji z subpathu Tablera
+     * (`[Rocket, LayoutDashboard]`), obiekt definicji (np. `import * as tabler`) albo
+     * mapę `{ nazwa: 'inner svg' }` — patrz [[KptIconInput]].
      *
      * Treść jest sanityzowana do allowlisty geometrii SVG (`path`/`circle`/`rect`/`g`/`line`/
      * `polygon`/`polyline`/`ellipse` i ich atrybutów kształtu/stylu) — mimo to `register()` wolno
      * wołać wyłącznie z treścią kontrolowaną przez developera (build-time), nigdy bezpośrednio
      * z danych runtime/CMS/uploadu bez własnej walidacji domenowej wyżej w stosie.
      */
-    register(icons: Record<string, string>): void;
+    register(icons: KptIconInput): void;
     /** Zwraca wewnętrzny SVG ikony lub undefined. */
     get(name: string): string | undefined;
     has(name: string): boolean;
@@ -296,6 +305,26 @@ declare class KptIconRegistry {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<KptIconRegistry>;
 }
 
+/**
+ * Rejestruje wskazane ikony w [[KptIconRegistry]] — jedno wywołanie, jeden parametr.
+ *
+ * Stoi w rdzeniu, a nie w subpathu `@konce-pt/angular/icons`, i to jest cała różnica:
+ * tamten moduł importuje `KPT_TABLER_ICONS` statycznie, więc każde jego użycie wciąga
+ * komplet 5130 ikon (~1,2 MB). Tutaj dane przychodzą argumentem, czyli o zawartości bundla
+ * decyduje `import` w aplikacji — a ikony Tablera są osobnymi eksportami, więc bundler
+ * zostawia dokładnie te, po które sięgnięto.
+ *
+ * @example
+ * // Produkcja: do bundla wchodzą dwie ikony.
+ * import { LayoutDashboard, Rocket } from '@konce-pt/icons/tabler';
+ * bootstrapApplication(App, { providers: [provideKptIcons([LayoutDashboard, Rocket])] });
+ *
+ * @example
+ * // Własne ikony aplikacji, dotychczasowy kształt mapy.
+ * provideKptIcons({ logo: '<path d="…" />' });
+ */
+declare function provideKptIcons(icons: KptIconInput): EnvironmentProviders;
+
 /** Nazwa breakpointa z tokenów `--kpt-breakpoint-*` (mobile-first). */
 type KptBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 /** Progi breakpointów w pikselach — te same wartości, z których korzystają `@media` biblioteki. */
@@ -318,7 +347,7 @@ declare const KPT_BREAKPOINTS: Record<KptBreakpoint, number>;
  * readonly isDesktop = this.breakpoints.up('lg');
  */
 declare class KptBreakpointObserver {
-    private readonly isBrowser;
+    private readonly canObserve;
     private readonly destroyRef;
     private readonly cache;
     /** Dowolne media query jako sygnał. */
@@ -630,7 +659,7 @@ declare class KptSwitch implements FormCheckboxControl {
  */
 declare class KptSwitchGroup<T = unknown> implements FormValueControl<unknown> {
     readonly value: _angular_core.ModelSignal<unknown>;
-    readonly options: _angular_core.InputSignal<KptOption<T>[]>;
+    readonly options: _angular_core.InputSignal<readonly KptOption<T>[]>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -660,7 +689,7 @@ declare class KptSwitchGroup<T = unknown> implements FormValueControl<unknown> {
  */
 declare class KptRadioGroup<T = unknown> implements FormValueControl<T> {
     readonly value: _angular_core.ModelSignal<T>;
-    readonly options: _angular_core.InputSignal<KptOption<T>[]>;
+    readonly options: _angular_core.InputSignal<readonly KptOption<T>[]>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -682,7 +711,7 @@ declare class KptRadioGroup<T = unknown> implements FormValueControl<T> {
  * <kpt-select [formField]="f.tags" [options]="tags" multiple filter placeholder="Tagi…" />
  */
 declare class KptSelect<T = unknown> implements FormValueControl<unknown>, KptFormFieldControl {
-    readonly options: _angular_core.InputSignal<KptOption<T>[]>;
+    readonly options: _angular_core.InputSignal<readonly KptOption<T>[]>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -706,7 +735,7 @@ declare class KptSelect<T = unknown> implements FormValueControl<unknown>, KptFo
     constructor();
     private readonly selectedValues;
     protected readonly selectedOptions: _angular_core.Signal<KptOption<T>[]>;
-    protected readonly filteredOptions: _angular_core.Signal<KptOption<T>[]>;
+    protected readonly filteredOptions: _angular_core.Signal<readonly KptOption<T>[]>;
     protected readonly singleLabel: _angular_core.Signal<string>;
     /**
      * Czy wybrano jakąkolwiek opcję. Publiczne — `kpt-form-field` czyta to przez
@@ -920,7 +949,7 @@ declare class KptTextarea implements FormValueControl<string> {
 
 type KptRichTool = 'copy' | 'paste' | 'pasteText' | 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'indent' | 'outdent' | 'foreColor' | 'backColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'link' | 'table' | 'clear' | 'html';
 /** Pasek: płaska lista narzędzi lub grupy (sekcje rozdzielone separatorem). */
-type KptRichToolbar = KptRichTool[] | KptRichTool[][];
+type KptRichToolbar = readonly KptRichTool[] | readonly (readonly KptRichTool[])[];
 /**
  * Lekki edytor tekstu sformatowanego (contenteditable) z konfigurowalnym paskiem sekcji.
  * Narzędzia: schowek (kopiuj / wklej / wklej bez formatowania), styl (nagłówki H1–H6 / paragraf),
@@ -1213,7 +1242,7 @@ declare class KptFileUpload implements FormValueControl<File[]> {
  */
 declare class KptColorPicker implements FormValueControl<string> {
     readonly value: _angular_core.ModelSignal<string>;
-    readonly presets: _angular_core.InputSignal<string[]>;
+    readonly presets: _angular_core.InputSignal<readonly string[]>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1450,7 +1479,7 @@ declare class KptInputMask implements FormValueControl<string> {
  */
 declare class KptListbox<T = unknown> implements FormValueControl<T | T[] | null> {
     readonly value: _angular_core.ModelSignal<T | T[] | null>;
-    readonly options: _angular_core.InputSignal<KptOption<T>[]>;
+    readonly options: _angular_core.InputSignal<readonly KptOption<T>[]>;
     readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1461,7 +1490,7 @@ declare class KptListbox<T = unknown> implements FormValueControl<T | T[] | null
     readonly touch: _angular_core.OutputEmitterRef<void>;
     protected readonly i18n: KptI18n;
     protected readonly query: _angular_core.WritableSignal<string>;
-    protected readonly visible: _angular_core.Signal<KptOption<T>[]>;
+    protected readonly visible: _angular_core.Signal<readonly KptOption<T>[]>;
     protected isSelected(v: T): boolean;
     protected toggle(v: T): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptListbox<any>, never>;
@@ -1685,9 +1714,11 @@ declare class KptAppShell {
  * przycisk obsługuje desktop i wąski ekran. Bez tej dyrektywy aplikacja musiałaby sama
  * wstrzyknąć `KptBreakpointObserver` i rozstrzygnąć, który z dwóch modeli przełączyć.
  *
- * Atrybuty ARIA nakłada wyłącznie na natywny `<button>`/`<a>`. Na komponencie opakowującym
- * (np. `kpt-icon-button`) trafiłyby na zewnętrzny element bez roli, co jest naruszeniem
- * `aria-allowed-attr` — tam etykietę podaj samemu komponentowi.
+ * Atrybuty ARIA nigdy nie lądują na hoście komponentu opakowującego — na elemencie bez roli
+ * naruszałyby `aria-allowed-attr`. Na natywnym `<button>`/`<a>` nakłada je wiązanie hosta;
+ * gdy hostem jest komponent (np. `kpt-icon-button`), dyrektywa schodzi z nimi na jego
+ * wewnętrzną kontrolkę. Etykietę w tym drugim przypadku podaje sam komponent (`ariaLabel`),
+ * więc jej tutaj nie ruszamy, żeby nie nadpisać wyboru aplikacji.
  *
  * @example
  * <button kptShellNavToggle type="button"><kpt-icon name="menu" /></button>
@@ -1698,10 +1729,12 @@ declare class KptShellNavToggle {
     readonly label: _angular_core.InputSignal<string>;
     protected readonly shell: KptAppShell;
     private readonly i18n;
+    private readonly host;
     private readonly isNativeControl;
     protected readonly ariaExpanded: _angular_core.Signal<string | null>;
     protected readonly ariaControls: _angular_core.Signal<string | null>;
     protected readonly ariaLabel: _angular_core.Signal<string | null>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptShellNavToggle, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptShellNavToggle, "[kptShellNavToggle]", never, { "label": { "alias": "kptShellNavToggle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -1777,7 +1810,7 @@ declare class KptAuth {
     /** Układ: przesuwany panel promocyjny albo nieruchomy split-screen. */
     readonly layout: _angular_core.InputSignal<KptAuthLayout>;
     /** Dostawcy logowania zewnętrznego. */
-    readonly providers: _angular_core.InputSignal<KptAuthProvider[]>;
+    readonly providers: _angular_core.InputSignal<readonly KptAuthProvider[]>;
     /** Układ przycisków dostawców: lista pełnej szerokości albo siatka ikon. */
     readonly providerLayout: _angular_core.InputSignal<KptAuthProviderLayout>;
     /** Pole „imię i nazwisko" w rejestracji. */
@@ -2011,7 +2044,7 @@ interface KptMeterItem {
  * <kpt-meter-group [values]="[{label:'Użyte', value:70}, {label:'Wolne', value:30}]" />
  */
 declare class KptMeterGroup {
-    readonly values: _angular_core.InputSignal<KptMeterItem[]>;
+    readonly values: _angular_core.InputSignal<readonly KptMeterItem[]>;
     /** Suma odniesienia; domyślnie suma wartości (100%). */
     readonly max: _angular_core.InputSignal<number | undefined>;
     readonly showLegend: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2037,7 +2070,7 @@ interface KptAvatarItem {
  * <kpt-avatar-group [avatars]="team" [max]="4" />
  */
 declare class KptAvatarGroup {
-    readonly avatars: _angular_core.InputSignal<KptAvatarItem[]>;
+    readonly avatars: _angular_core.InputSignal<readonly KptAvatarItem[]>;
     readonly max: _angular_core.InputSignal<number>;
     readonly size: _angular_core.InputSignal<KptAvatarSize>;
     protected readonly shown: _angular_core.Signal<KptAvatarItem[]>;
@@ -2148,7 +2181,7 @@ interface KptBreadcrumbItem {
  * <kpt-breadcrumb [items]="[{label:'Start',url:'/'},{label:'Ustawienia'}]" />
  */
 declare class KptBreadcrumb {
-    readonly items: _angular_core.InputSignal<KptBreadcrumbItem[]>;
+    readonly items: _angular_core.InputSignal<readonly KptBreadcrumbItem[]>;
     protected readonly i18n: KptI18n;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptBreadcrumb, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptBreadcrumb, "kpt-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -2206,8 +2239,14 @@ declare class KptPaginator {
     /** Indeks strony od 0 (dwukierunkowe). */
     readonly pageIndex: _angular_core.ModelSignal<number>;
     /** Dostępne rozmiary strony. */
-    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
     protected readonly i18n: KptI18n;
+    /**
+     * Opcje selecta: `pageSizeOptions` uzupełnione o bieżący `pageSize`. Bez tego rozmiar spoza
+     * listy (np. `[pageSize]="8"` przy domyślnych opcjach) nie ma odpowiadającej opcji — select
+     * pokazuje pierwszą pozycję i cicho kłamie o stanie, po którym tabela naprawdę stronicuje.
+     */
+    protected readonly sizeOptions: _angular_core.Signal<readonly number[]>;
     readonly totalPages: _angular_core.Signal<number>;
     readonly rangeStart: _angular_core.Signal<number>;
     readonly rangeEnd: _angular_core.Signal<number>;
@@ -2227,7 +2266,7 @@ type KptColumnEditType = 'text' | 'number' | 'date' | 'select' | 'multiselect';
 interface KptColumnEdit {
     type: KptColumnEditType;
     /** Opcje dla `type: 'select'` / `'multiselect'`. */
-    options?: KptOption<unknown>[];
+    options?: readonly KptOption<unknown>[];
     placeholder?: string;
     /** Dla `type: 'number'`. */
     min?: number;
@@ -2283,8 +2322,9 @@ interface KptTableLazyState {
  * @example
  * <kpt-data-table [columns]="cols" [data]="rows" filterable [pageSize]="10"
  *                 selectable="multiple" rowKey="id" [(selection)]="picked">
- *   <ng-template kptCell="status" let-value="value">
- *     <span class="badge">{{ value }}</span>
+ *   <!-- Kontekst szablonu komórki: $implicit = wiersz, value = wartość pola. -->
+ *   <ng-template kptCell="status" let-row let-value="value">
+ *     <span class="badge" [title]="row.name">{{ value }}</span>
  *   </ng-template>
  * </kpt-data-table>
  */
@@ -2296,7 +2336,7 @@ declare class KptDataTable<T = Record<string, unknown>> {
     readonly filterRowPosition: _angular_core.InputSignal<"bottom" | "top">;
     /** Rozmiar strony; 0 wyłącza paginację. */
     readonly pageSize: _angular_core.InputSignal<number>;
-    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
     readonly selectable: _angular_core.InputSignal<"none" | "single" | "multiple">;
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Komunikat pustej tabeli; bez wartości używa i18n (`dataTable.empty`). */
@@ -2560,7 +2600,7 @@ interface KptTreeNode<T = unknown> {
     label: string;
     value?: T;
     icon?: string;
-    children?: KptTreeNode<T>[];
+    children?: readonly KptTreeNode<T>[];
     expanded?: boolean;
     disabled?: boolean;
 }
@@ -2571,7 +2611,7 @@ interface KptTreeNode<T = unknown> {
  * <kpt-tree [nodes]="tree" selectable [(selected)]="node" (nodeClick)="open($event)" />
  */
 declare class KptTree<T = unknown> {
-    readonly nodes: _angular_core.InputSignal<KptTreeNode<T>[]>;
+    readonly nodes: _angular_core.InputSignal<readonly KptTreeNode<T>[]>;
     readonly selectable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly selected: _angular_core.ModelSignal<KptTreeNode<T> | null>;
     readonly nodeClick: _angular_core.OutputEmitterRef<KptTreeNode<T>>;
@@ -2600,7 +2640,7 @@ interface KptTimelineItem {
  * <kpt-timeline [items]="[{title:'Utworzono', time:'10:00', variant:'success', icon:'check'}]" />
  */
 declare class KptTimeline {
-    readonly items: _angular_core.InputSignal<KptTimelineItem[]>;
+    readonly items: _angular_core.InputSignal<readonly KptTimelineItem[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptTimeline, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptTimeline, "kpt-timeline", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -2614,7 +2654,7 @@ declare class KptTimeline {
  * </kpt-carousel>
  */
 declare class KptCarousel<T = unknown> {
-    readonly items: _angular_core.InputSignal<T[]>;
+    readonly items: _angular_core.InputSignal<readonly T[]>;
     readonly activeIndex: _angular_core.ModelSignal<number>;
     protected readonly i18n: KptI18n;
     protected readonly slideTpl: _angular_core.Signal<TemplateRef<any>>;
@@ -2635,7 +2675,7 @@ declare class KptCarousel<T = unknown> {
  * </kpt-data-view>
  */
 declare class KptDataView<T = unknown> {
-    readonly items: _angular_core.InputSignal<T[]>;
+    readonly items: _angular_core.InputSignal<readonly T[]>;
     readonly layout: _angular_core.ModelSignal<"list" | "grid">;
     readonly pageSize: _angular_core.InputSignal<number>;
     readonly paginated: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2643,7 +2683,7 @@ declare class KptDataView<T = unknown> {
     protected readonly itemTpl: _angular_core.Signal<TemplateRef<any>>;
     protected readonly pageIndex: _angular_core.ModelSignal<number>;
     protected readonly showPager: _angular_core.Signal<boolean>;
-    protected readonly pageItems: _angular_core.Signal<T[]>;
+    protected readonly pageItems: _angular_core.Signal<readonly T[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptDataView<any>, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptDataView<any>, "kpt-data-view", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "paginated": { "alias": "paginated"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "pageIndex": "pageIndexChange"; }, ["itemTpl"], never, true, never>;
 }
@@ -2708,7 +2748,7 @@ interface KptGalleriaItem {
  * <kpt-galleria [items]="photos" [(activeIndex)]="idx" />
  */
 declare class KptGalleria {
-    readonly items: _angular_core.InputSignal<KptGalleriaItem[]>;
+    readonly items: _angular_core.InputSignal<readonly KptGalleriaItem[]>;
     readonly activeIndex: _angular_core.ModelSignal<number>;
     readonly showThumbnails: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly i18n: KptI18n;
@@ -2889,7 +2929,7 @@ declare class KptPopover {
  */
 declare class KptAutocomplete implements FormValueControl<string> {
     readonly value: _angular_core.ModelSignal<string>;
-    readonly options: _angular_core.InputSignal<string[]>;
+    readonly options: _angular_core.InputSignal<readonly string[]>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -2900,7 +2940,7 @@ declare class KptAutocomplete implements FormValueControl<string> {
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
     protected readonly positions: ConnectedPosition[];
-    protected readonly filtered: _angular_core.Signal<string[]>;
+    protected readonly filtered: _angular_core.Signal<readonly string[]>;
     protected onInput(event: Event): void;
     protected onFocus(): void;
     protected onBlur(): void;
@@ -2941,7 +2981,7 @@ declare class KptDrawer {
  * </kpt-context-menu>
  */
 declare class KptContextMenu<T = unknown> {
-    readonly items: _angular_core.InputSignal<KptMenuItem<T>[]>;
+    readonly items: _angular_core.InputSignal<readonly KptMenuItem<T>[]>;
     readonly selected: _angular_core.OutputEmitterRef<KptMenuItem<T>>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly x: _angular_core.WritableSignal<number>;
@@ -2963,7 +3003,7 @@ declare class KptContextMenu<T = unknown> {
  * <kpt-menubar [items]="items" (selected)="onSelect($event)" />
  */
 declare class KptMenubar<T = unknown> {
-    readonly items: _angular_core.InputSignal<KptMenuItem<T>[]>;
+    readonly items: _angular_core.InputSignal<readonly KptMenuItem<T>[]>;
     readonly selected: _angular_core.OutputEmitterRef<KptMenuItem<T>>;
     protected readonly openIndex: _angular_core.WritableSignal<number | null>;
     protected readonly positions: ConnectedPosition[];
@@ -2985,11 +3025,11 @@ declare class KptMenubar<T = unknown> {
  * <kpt-megamenu [items]="items" (selected)="onSelect($event)" />
  */
 declare class KptMegamenu<T = unknown> {
-    readonly items: _angular_core.InputSignal<KptMenuItem<T>[]>;
+    readonly items: _angular_core.InputSignal<readonly KptMenuItem<T>[]>;
     readonly selected: _angular_core.OutputEmitterRef<KptMenuItem<T>>;
     protected readonly openIndex: _angular_core.WritableSignal<number | null>;
     protected readonly positions: ConnectedPosition[];
-    protected activeColumns(): KptMenuItem<T>[];
+    protected activeColumns(): readonly KptMenuItem<T>[];
     protected toggle(i: number): void;
     protected pick(link: KptMenuItem<T>): void;
     protected closeAll(): void;
@@ -3069,7 +3109,7 @@ type KptSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
  * <kpt-speed-dial [items]="actions" direction="up" (selected)="onAction($event)" />
  */
 declare class KptSpeedDial<T = unknown> {
-    readonly items: _angular_core.InputSignal<KptMenuItem<T>[]>;
+    readonly items: _angular_core.InputSignal<readonly KptMenuItem<T>[]>;
     readonly direction: _angular_core.InputSignal<KptSpeedDialDirection>;
     readonly icon: _angular_core.InputSignal<string>;
     /** Etykieta a11y FAB (stan zamknięty); bez wartości używa i18n (`speedDial.actions`). */
@@ -3085,6 +3125,6 @@ declare class KptSpeedDial<T = unknown> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KptSpeedDial<any>, "kpt-speed-dial", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, never, true, never>;
 }
 
-export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n };
+export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, provideKptIcons };
 export type { KptAlertVariant, KptAuthLayout, KptAuthMode, KptAuthProvider, KptAuthProviderLayout, KptAuthResetValue, KptAuthSignInValue, KptAuthSignUpValue, KptAvatarItem, KptAvatarShape, KptAvatarSize, KptBadgeSize, KptBadgeVariant, KptBreadcrumbItem, KptBreakpoint, KptButtonSize, KptButtonVariant, KptCardVariant, KptCellEditEvent, KptChipVariant, KptColumn, KptColumnEdit, KptColumnEditType, KptConfirmOptions, KptConfirmRequest, KptDatepickerMode, KptDatepickerView, KptDividerOrientation, KptDrawerPosition, KptFormFieldControl, KptGalleriaItem, KptInputType, KptMenuItem, KptMeterItem, KptOption, KptProgressVariant, KptRichTool, KptRichToolbar, KptSidenavMode, KptSkeletonVariant, KptSliderValue, KptSpeedDialDirection, KptSplitterOrientation, KptTableLazyState, KptTimelineItem, KptToast, KptToastOptions, KptTooltipPosition, KptTreeNode };
 //# sourceMappingURL=konce-pt-angular.d.ts.map