@konce-pt/angular 0.5.0 → 0.6.1

package/README.md

@@ -41,7 +41,7 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
 # or: pnpm add / yarn add
 ```
 
-`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code).
+`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code). Optional: [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid) for the mobile-first layout system — its Angular directives live in `@konce-pt/angular/grid`.
 
 ## Setup
 
@@ -280,6 +280,8 @@ Język UI to domyślnie **angielski** i działa **bez żadnej konfiguracji** —
 
 Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
 
+Układ strony: `@konce-pt/grid` (osobna paczka CSS) plus dyrektywy `[kptGrid]`, `[kptCol]`, `[kptFlex]` z `@konce-pt/angular/grid` — siatka mobile-first, utilities flexbox i opcjonalne container queries.
+
 ### Internacjonalizacja (i18n)
 
 Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Serwis `KptI18n` jest `providedIn: 'root'`, więc **angielski działa od razu, bez providera**. `provideKptI18n(...)` wołasz tylko, by wystartować po polsku (lub w innym języku) albo zarejestrować/nadpisać słowniki. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z tego serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).

package/dist/README.md

@@ -41,7 +41,7 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
 # or: pnpm add / yarn add
 ```
 
-`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code).
+`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code). Optional: [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid) for the mobile-first layout system — its Angular directives live in `@konce-pt/angular/grid`.
 
 ## Setup
 
@@ -280,6 +280,8 @@ Język UI to domyślnie **angielski** i działa **bez żadnej konfiguracji** —
 
 Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
 
+Układ strony: `@konce-pt/grid` (osobna paczka CSS) plus dyrektywy `[kptGrid]`, `[kptCol]`, `[kptFlex]` z `@konce-pt/angular/grid` — siatka mobile-first, utilities flexbox i opcjonalne container queries.
+
 ### Internacjonalizacja (i18n)
 
 Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Serwis `KptI18n` jest `providedIn: 'root'`, więc **angielski działa od razu, bez providera**. `provideKptI18n(...)` wołasz tylko, by wystartować po polsku (lub w innym języku) albo zarejestrować/nadpisać słowniki. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z tego serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).

package/dist/charts/src/lib/llms.txt

@@ -0,0 +1,51 @@
+# KptChart (kpt-chart)
+
+Wykres SVG w czystym Angularze (sygnały, zoneless), bez zależności typu Chart.js/D3.
+Rdzeń obliczeń to czysty TypeScript (przenośny do React w Fazie 2).
+Import: `import { KptChart } from '@konce-pt/angular/charts';`
+
+## Typy wykresów (config.type)
+- `line` — liniowy; interpolacja `linear` | `cubic` | `cubic-monotonic`; `area?: boolean`, `points?: boolean`,
+  `crosshair?: boolean` (hover punktu → pionowa prowadnica + podświetlona pigułka etykiety osi X)
+- `bar` — słupkowy; `orientation: 'vertical' | 'horizontal'`, `borderRadius?: px`
+- `pie` — kołowy
+- `doughnut` — pierścieniowy; `innerRadius?: 0..1` (domyślnie 0.6)
+- `polarArea` — równe kąty, promień ∝ wartość
+- `radar` — osie promieniowe + wielokąt serii
+
+## Wejścia
+- `config: KptChartConfig` (wymagane) — jeden obiekt sterujący całością
+- `width` / `height`: jednostki viewBoxa (600×360); wykres skaluje się do kontenera
+
+## KptChartConfig (skrót)
+- `labels: string[]`, `series: { name; data: number[]; color? }[]`
+- `legend`: `{ display?, position: top|bottom|left|right, align: start|center|end, pointStyle: circle|rect|rectRot|triangle|line, title? }`
+- `title` / `subtitle`: `{ display?, text, align, color?, font?, padding? }`
+- `tooltip`: `{ enabled?, format?(ctx: {series,label,value}): string }`
+- `animation`: `{ enabled?, duration=400, delay=0, stagger=60 }`
+
+## Interakcje
+- Hover na punkcie/słupku/wycinku → tooltip (seria, etykieta, wartość); dymek clampowany do krawędzi.
+- Klik w legendę → ukrycie/pokazanie serii (pie/doughnut/polar: ukrycie wycinka) z przeliczeniem skali.
+- Hover na legendzie → podświetlenie serii, wygaszenie pozostałych.
+
+## Animacje
+Linia: `stroke-dasharray/offset`. Słupki: `scaleY/scaleX` (origin od osi). Wycinki/radar: `scale` od środka.
+Stagger `delay = index * stagger`. Wyłączane przez `animation.enabled=false` i `prefers-reduced-motion`.
+
+## Przykład
+    <kpt-chart [config]="{
+      type: 'line',
+      labels: ['Sty','Lut','Mar'],
+      series: [{ name: 'Sprzedaż', data: [12, 19, 7] }],
+      interpolation: 'cubic-monotonic',
+      legend: { position: 'top' }
+    }" />
+
+## Tokeny / stylowanie
+Paleta z tokenów semantycznych (`--kpt-color-primary|info|success|warning|danger` + skala).
+SCSS w `@layer kpt.components`, klasy `kpt-chart__*`. Kolory serii nadpisywalne przez `series[].color`.
+
+## Rdzeń (pure TS, opcjonalnie)
+Eksport funkcji: `linePath`, `areaPath`, `barLayout`, `pieSlices`, `polarSlices`, `radarGrid`,
+`radarPoints`, `niceScale`, `seriesColor`, `KPT_CHART_PALETTE` — do własnych rozszerzeń/SSR.

package/dist/fesm2022/konce-pt-angular-grid.mjs

@@ -0,0 +1,218 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, Directive } from '@angular/core';
+
+/**
+ * Siatka Koncept UI — CSS Grid sterowany custom properties z `@konce-pt/grid`.
+ * Dyrektywa, nie komponent: nie dokłada elementu do DOM i działa na dowolnym
+ * tagu (`<section>`, `<ul>`, `<main>`). Alias `kpt-grid` dla zgodności.
+ *
+ * Zmiana `columns` nie manipuluje klasami — ustawia zmienną inline, a układ
+ * przelicza natywny silnik CSS.
+ *
+ * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).
+ *
+ * @example
+ * <div kptGrid [columns]="18" gap="1.5rem">
+ *   <div [kptCol]="18" [kptColLg]="5">Sidebar</div>
+ *   <div [kptCol]="18" [kptColLg]="13">Treść</div>
+ * </div>
+ */
+class KptGrid {
+    /** Liczba kolumn — baza mobile-first. Domyślnie 12 (z CSS). */
+    columns = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Liczba kolumn od breakpointa SM (>= 640px). */
+    columnsSm = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsSm" }] : /* istanbul ignore next */ []));
+    /** Liczba kolumn od breakpointa MD (>= 768px). */
+    columnsMd = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsMd" }] : /* istanbul ignore next */ []));
+    /** Liczba kolumn od breakpointa LG (>= 1024px). */
+    columnsLg = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsLg" }] : /* istanbul ignore next */ []));
+    /** Liczba kolumn od breakpointa XL (>= 1280px). */
+    columnsXl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnsXl" }] : /* istanbul ignore next */ []));
+    /** Liczba kolumn od breakpointa 2XL (>= 1536px). */
+    columns2xl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns2xl" }] : /* istanbul ignore next */ []));
+    /** Odstęp w obu osiach, np. `'1.5rem'` albo `'var(--kpt-space-6)'`. */
+    gap = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Odstęp między kolumnami — nadpisuje `gap` w poziomie. */
+    gapX = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gapX" }] : /* istanbul ignore next */ []));
+    /** Odstęp między wierszami — nadpisuje `gap` w pionie. */
+    gapY = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gapY" }] : /* istanbul ignore next */ []));
+    /**
+     * Tryb kontenerowy: spany dzieci reagują na szerokość TEJ siatki, nie okna.
+     * Liczba kolumn i odstępy nadal idą za viewportem — `@container` nie potrafi
+     * odpytać elementu o jego własny kontener.
+     */
+    container = input(false, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: KptGrid, isStandalone: true, selector: "[kptGrid], kpt-grid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnsSm: { classPropertyName: "columnsSm", publicName: "columnsSm", isSignal: true, isRequired: false, transformFunction: null }, columnsMd: { classPropertyName: "columnsMd", publicName: "columnsMd", isSignal: true, isRequired: false, transformFunction: null }, columnsLg: { classPropertyName: "columnsLg", publicName: "columnsLg", isSignal: true, isRequired: false, transformFunction: null }, columnsXl: { classPropertyName: "columnsXl", publicName: "columnsXl", isSignal: true, isRequired: false, transformFunction: null }, columns2xl: { classPropertyName: "columns2xl", publicName: "columns2xl", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, gapX: { classPropertyName: "gapX", publicName: "gapX", isSignal: true, isRequired: false, transformFunction: null }, gapY: { classPropertyName: "gapY", publicName: "gapY", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-container": "container() ? \"\" : null", "style.--kpt-grid-columns": "columns() ?? null", "style.--kpt-grid-columns-sm": "columnsSm() ?? null", "style.--kpt-grid-columns-md": "columnsMd() ?? null", "style.--kpt-grid-columns-lg": "columnsLg() ?? null", "style.--kpt-grid-columns-xl": "columnsXl() ?? null", "style.--kpt-grid-columns-2xl": "columns2xl() ?? null", "style.--kpt-gap": "gap() ?? null", "style.--kpt-gap-x": "gapX() ?? null", "style.--kpt-gap-y": "gapY() ?? null" }, classAttribute: "kpt-grid" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kptGrid], kpt-grid',
+                    host: {
+                        class: 'kpt-grid',
+                        '[attr.data-container]': 'container() ? "" : null',
+                        '[style.--kpt-grid-columns]': 'columns() ?? null',
+                        '[style.--kpt-grid-columns-sm]': 'columnsSm() ?? null',
+                        '[style.--kpt-grid-columns-md]': 'columnsMd() ?? null',
+                        '[style.--kpt-grid-columns-lg]': 'columnsLg() ?? null',
+                        '[style.--kpt-grid-columns-xl]': 'columnsXl() ?? null',
+                        '[style.--kpt-grid-columns-2xl]': 'columns2xl() ?? null',
+                        '[style.--kpt-gap]': 'gap() ?? null',
+                        '[style.--kpt-gap-x]': 'gapX() ?? null',
+                        '[style.--kpt-gap-y]': 'gapY() ?? null',
+                    },
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnsSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsSm", required: false }] }], columnsMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsMd", required: false }] }], columnsLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsLg", required: false }] }], columnsXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsXl", required: false }] }], columns2xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns2xl", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], gapX: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapX", required: false }] }], gapY: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapY", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
+/**
+ * Kolumna siatki `kptGrid` — rozpiętość mobile-first z nadpisaniami per breakpoint.
+ *
+ * Wartość podana dla mniejszego breakpointa obowiązuje aż do następnego, który ją
+ * nadpisze: `[kptCol]="12" [kptColLg]="5"` daje 12 na mobile, tablecie i `md`,
+ * a dopiero od `lg` — 5.
+ *
+ * Dyrektywa ustawia wyłącznie custom properties inline; nie dodaje ani nie usuwa klas.
+ *
+ * @example
+ * <div kptGrid>
+ *   <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
+ * </div>
+ */
+class KptCol {
+    /** Rozpiętość kolumny — baza mobile-first. */
+    span = input(undefined, { ...(ngDevMode ? { debugName: "span" } : /* istanbul ignore next */ {}), alias: 'kptCol' });
+    /** Rozpiętość od breakpointa SM (>= 640px). */
+    spanSm = input(undefined, { ...(ngDevMode ? { debugName: "spanSm" } : /* istanbul ignore next */ {}), alias: 'kptColSm' });
+    /** Rozpiętość od breakpointa MD (>= 768px). */
+    spanMd = input(undefined, { ...(ngDevMode ? { debugName: "spanMd" } : /* istanbul ignore next */ {}), alias: 'kptColMd' });
+    /** Rozpiętość od breakpointa LG (>= 1024px). */
+    spanLg = input(undefined, { ...(ngDevMode ? { debugName: "spanLg" } : /* istanbul ignore next */ {}), alias: 'kptColLg' });
+    /** Rozpiętość od breakpointa XL (>= 1280px). */
+    spanXl = input(undefined, { ...(ngDevMode ? { debugName: "spanXl" } : /* istanbul ignore next */ {}), alias: 'kptColXl' });
+    /** Rozpiętość od breakpointa 2XL (>= 1536px). */
+    span2xl = input(undefined, { ...(ngDevMode ? { debugName: "span2xl" } : /* istanbul ignore next */ {}), alias: 'kptCol2xl' });
+    /** Numer linii, od której zaczyna się kolumna (1-based) — pozwala robić offsety. */
+    start = input(undefined, { ...(ngDevMode ? { debugName: "start" } : /* istanbul ignore next */ {}), alias: 'kptColStart' });
+    /** Kolejność wizualna (`order`). Nie zmienia kolejności w DOM ani dla czytników ekranu. */
+    order = input(undefined, { ...(ngDevMode ? { debugName: "order" } : /* istanbul ignore next */ {}), alias: 'kptColOrder' });
+    /** Wyrównanie w poprzek osi (`align-self`): `start`, `end`, `center`, `stretch`, `baseline`. */
+    self = input(undefined, { ...(ngDevMode ? { debugName: "self" } : /* istanbul ignore next */ {}), alias: 'kptColSelf' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptCol, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: KptCol, isStandalone: true, selector: "[kptCol], [kptColSm], [kptColMd], [kptColLg], [kptColXl], [kptCol2xl], [kptColStart], [kptColOrder], [kptColSelf]", inputs: { span: { classPropertyName: "span", publicName: "kptCol", isSignal: true, isRequired: false, transformFunction: null }, spanSm: { classPropertyName: "spanSm", publicName: "kptColSm", isSignal: true, isRequired: false, transformFunction: null }, spanMd: { classPropertyName: "spanMd", publicName: "kptColMd", isSignal: true, isRequired: false, transformFunction: null }, spanLg: { classPropertyName: "spanLg", publicName: "kptColLg", isSignal: true, isRequired: false, transformFunction: null }, spanXl: { classPropertyName: "spanXl", publicName: "kptColXl", isSignal: true, isRequired: false, transformFunction: null }, span2xl: { classPropertyName: "span2xl", publicName: "kptCol2xl", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "kptColStart", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "kptColOrder", isSignal: true, isRequired: false, transformFunction: null }, self: { classPropertyName: "self", publicName: "kptColSelf", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--kpt-col": "span() ?? null", "style.--kpt-col-sm": "spanSm() ?? null", "style.--kpt-col-md": "spanMd() ?? null", "style.--kpt-col-lg": "spanLg() ?? null", "style.--kpt-col-xl": "spanXl() ?? null", "style.--kpt-col-2xl": "span2xl() ?? null", "style.--kpt-col-start": "start() ?? null", "style.--kpt-order": "order() ?? null", "style.--kpt-self": "self() ?? null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptCol, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kptCol], [kptColSm], [kptColMd], [kptColLg], [kptColXl], [kptCol2xl], [kptColStart], [kptColOrder], [kptColSelf]',
+                    host: {
+                        '[style.--kpt-col]': 'span() ?? null',
+                        '[style.--kpt-col-sm]': 'spanSm() ?? null',
+                        '[style.--kpt-col-md]': 'spanMd() ?? null',
+                        '[style.--kpt-col-lg]': 'spanLg() ?? null',
+                        '[style.--kpt-col-xl]': 'spanXl() ?? null',
+                        '[style.--kpt-col-2xl]': 'span2xl() ?? null',
+                        '[style.--kpt-col-start]': 'start() ?? null',
+                        '[style.--kpt-order]': 'order() ?? null',
+                        '[style.--kpt-self]': 'self() ?? null',
+                    },
+                }]
+        }], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCol", required: false }] }], spanSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColSm", required: false }] }], spanMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColMd", required: false }] }], spanLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColLg", required: false }] }], spanXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColXl", required: false }] }], span2xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCol2xl", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColStart", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColOrder", required: false }] }], self: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptColSelf", required: false }] }] } });
+
+/**
+ * Kontener flexbox Koncept UI — te same zmienne i breakpointy co `kptGrid`.
+ * Dla wartości bez odpowiednika w inputach (`grow`, `shrink`, `order` na dziecku)
+ * używa się klas utility: `kpt-grow-1`, `kpt-order-first`, `kpt-self-end`.
+ *
+ * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).
+ *
+ * @example
+ * <div kptFlex direction="column" directionMd="row" justify="space-between" gap="1rem">
+ *   <span>Lewa</span>
+ *   <span class="kpt-order-first kpt-order-md-none">Prawa</span>
+ * </div>
+ */
+class KptFlex {
+    /** Kierunek osi głównej — baza mobile-first. */
+    direction = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Kierunek od breakpointa MD (>= 768px). */
+    directionMd = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionMd" }] : /* istanbul ignore next */ []));
+    /** Kierunek od breakpointa LG (>= 1024px). */
+    directionLg = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionLg" }] : /* istanbul ignore next */ []));
+    /** Zawijanie elementów. */
+    wrap = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+    /** Rozkład wzdłuż osi głównej (`justify-content`). */
+    justify = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
+    /** Rozkład wzdłuż osi głównej od breakpointa MD. */
+    justifyMd = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "justifyMd" }] : /* istanbul ignore next */ []));
+    /** Wyrównanie w poprzek osi (`align-items`). */
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Wyrównanie w poprzek osi od breakpointa MD. */
+    alignMd = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignMd" }] : /* istanbul ignore next */ []));
+    /** Odstęp w obu osiach. */
+    gap = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Odstęp w poziomie. */
+    gapX = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gapX" }] : /* istanbul ignore next */ []));
+    /** Odstęp w pionie. */
+    gapY = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gapY" }] : /* istanbul ignore next */ []));
+    /** Tryb kontenerowy — zmienne dzieci reagują na szerokość tego kontenera. */
+    container = input(false, { ...(ngDevMode ? { debugName: "container" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptFlex, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: KptFlex, isStandalone: true, selector: "[kptFlex]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, directionMd: { classPropertyName: "directionMd", publicName: "directionMd", isSignal: true, isRequired: false, transformFunction: null }, directionLg: { classPropertyName: "directionLg", publicName: "directionLg", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, justifyMd: { classPropertyName: "justifyMd", publicName: "justifyMd", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignMd: { classPropertyName: "alignMd", publicName: "alignMd", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, gapX: { classPropertyName: "gapX", publicName: "gapX", isSignal: true, isRequired: false, transformFunction: null }, gapY: { classPropertyName: "gapY", publicName: "gapY", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-container": "container() ? \"\" : null", "style.--kpt-flex-direction": "direction() ?? null", "style.--kpt-flex-direction-md": "directionMd() ?? null", "style.--kpt-flex-direction-lg": "directionLg() ?? null", "style.--kpt-flex-wrap": "wrap() ?? null", "style.--kpt-justify": "justify() ?? null", "style.--kpt-justify-md": "justifyMd() ?? null", "style.--kpt-align": "align() ?? null", "style.--kpt-align-md": "alignMd() ?? null", "style.--kpt-gap": "gap() ?? null", "style.--kpt-gap-x": "gapX() ?? null", "style.--kpt-gap-y": "gapY() ?? null" }, classAttribute: "kpt-flex" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptFlex, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kptFlex]',
+                    host: {
+                        class: 'kpt-flex',
+                        '[attr.data-container]': 'container() ? "" : null',
+                        '[style.--kpt-flex-direction]': 'direction() ?? null',
+                        '[style.--kpt-flex-direction-md]': 'directionMd() ?? null',
+                        '[style.--kpt-flex-direction-lg]': 'directionLg() ?? null',
+                        '[style.--kpt-flex-wrap]': 'wrap() ?? null',
+                        '[style.--kpt-justify]': 'justify() ?? null',
+                        '[style.--kpt-justify-md]': 'justifyMd() ?? null',
+                        '[style.--kpt-align]': 'align() ?? null',
+                        '[style.--kpt-align-md]': 'alignMd() ?? null',
+                        '[style.--kpt-gap]': 'gap() ?? null',
+                        '[style.--kpt-gap-x]': 'gapX() ?? null',
+                        '[style.--kpt-gap-y]': 'gapY() ?? null',
+                    },
+                }]
+        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], directionMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "directionMd", required: false }] }], directionLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "directionLg", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], justifyMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyMd", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignMd", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], gapX: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapX", required: false }] }], gapY: [{ type: i0.Input, args: [{ isSignal: true, alias: "gapY", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
+/*
+ * Public API — @konce-pt/angular/grid
+ * Ergonomia Angulara nad arkuszem @konce-pt/grid (sygnały, zoneless).
+ * Dyrektywy ustawiają wyłącznie custom properties — układ liczy natywny CSS.
+ */
+/** Komplet dyrektyw układu — `imports: [...KPT_GRID_IMPORTS]`. */
+const KPT_GRID_IMPORTS = [KptGrid, KptCol, KptFlex];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KPT_GRID_IMPORTS, KptCol, KptFlex, KptGrid };
+//# sourceMappingURL=konce-pt-angular-grid.mjs.map

package/dist/fesm2022/konce-pt-angular-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"konce-pt-angular-grid.mjs","sources":["../../grid/src/lib/grid.directive.ts","../../grid/src/lib/col.directive.ts","../../grid/src/lib/flex.directive.ts","../../grid/src/public-api.ts","../../grid/src/konce-pt-angular-grid.ts"],"sourcesContent":["import { Directive, booleanAttribute, input } from '@angular/core';\n\n/**\n * Siatka Koncept UI — CSS Grid sterowany custom properties z `@konce-pt/grid`.\n * Dyrektywa, nie komponent: nie dokłada elementu do DOM i działa na dowolnym\n * tagu (`<section>`, `<ul>`, `<main>`). Alias `kpt-grid` dla zgodności.\n *\n * Zmiana `columns` nie manipuluje klasami — ustawia zmienną inline, a układ\n * przelicza natywny silnik CSS.\n *\n * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).\n *\n * @example\n * <div kptGrid [columns]=\"18\" gap=\"1.5rem\">\n *   <div [kptCol]=\"18\" [kptColLg]=\"5\">Sidebar</div>\n *   <div [kptCol]=\"18\" [kptColLg]=\"13\">Treść</div>\n * </div>\n */\n@Directive({\n  selector: '[kptGrid], kpt-grid',\n  host: {\n    class: 'kpt-grid',\n    '[attr.data-container]': 'container() ? \"\" : null',\n    '[style.--kpt-grid-columns]': 'columns() ?? null',\n    '[style.--kpt-grid-columns-sm]': 'columnsSm() ?? null',\n    '[style.--kpt-grid-columns-md]': 'columnsMd() ?? null',\n    '[style.--kpt-grid-columns-lg]': 'columnsLg() ?? null',\n    '[style.--kpt-grid-columns-xl]': 'columnsXl() ?? null',\n    '[style.--kpt-grid-columns-2xl]': 'columns2xl() ?? null',\n    '[style.--kpt-gap]': 'gap() ?? null',\n    '[style.--kpt-gap-x]': 'gapX() ?? null',\n    '[style.--kpt-gap-y]': 'gapY() ?? null',\n  },\n})\nexport class KptGrid {\n  /** Liczba kolumn — baza mobile-first. Domyślnie 12 (z CSS). */\n  readonly columns = input<number | undefined>(undefined);\n  /** Liczba kolumn od breakpointa SM (>= 640px). */\n  readonly columnsSm = input<number | undefined>(undefined);\n  /** Liczba kolumn od breakpointa MD (>= 768px). */\n  readonly columnsMd = input<number | undefined>(undefined);\n  /** Liczba kolumn od breakpointa LG (>= 1024px). */\n  readonly columnsLg = input<number | undefined>(undefined);\n  /** Liczba kolumn od breakpointa XL (>= 1280px). */\n  readonly columnsXl = input<number | undefined>(undefined);\n  /** Liczba kolumn od breakpointa 2XL (>= 1536px). */\n  readonly columns2xl = input<number | undefined>(undefined);\n\n  /** Odstęp w obu osiach, np. `'1.5rem'` albo `'var(--kpt-space-6)'`. */\n  readonly gap = input<string | undefined>(undefined);\n  /** Odstęp między kolumnami — nadpisuje `gap` w poziomie. */\n  readonly gapX = input<string | undefined>(undefined);\n  /** Odstęp między wierszami — nadpisuje `gap` w pionie. */\n  readonly gapY = input<string | undefined>(undefined);\n\n  /**\n   * Tryb kontenerowy: spany dzieci reagują na szerokość TEJ siatki, nie okna.\n   * Liczba kolumn i odstępy nadal idą za viewportem — `@container` nie potrafi\n   * odpytać elementu o jego własny kontener.\n   */\n  readonly container = input(false, { transform: booleanAttribute });\n}\n","import { Directive, input } from '@angular/core';\n\n/** Rozpiętość kolumny: liczba, `'full'` (cała szerokość) albo dowolna wartość CSS. */\nexport type KptColSpan = number | string;\n\n/**\n * Kolumna siatki `kptGrid` — rozpiętość mobile-first z nadpisaniami per breakpoint.\n *\n * Wartość podana dla mniejszego breakpointa obowiązuje aż do następnego, który ją\n * nadpisze: `[kptCol]=\"12\" [kptColLg]=\"5\"` daje 12 na mobile, tablecie i `md`,\n * a dopiero od `lg` — 5.\n *\n * Dyrektywa ustawia wyłącznie custom properties inline; nie dodaje ani nie usuwa klas.\n *\n * @example\n * <div kptGrid>\n *   <div [kptCol]=\"12\" [kptColSm]=\"6\" [kptColMd]=\"4\">Karta</div>\n * </div>\n */\n@Directive({\n  selector: '[kptCol], [kptColSm], [kptColMd], [kptColLg], [kptColXl], [kptCol2xl], [kptColStart], [kptColOrder], [kptColSelf]',\n  host: {\n    '[style.--kpt-col]': 'span() ?? null',\n    '[style.--kpt-col-sm]': 'spanSm() ?? null',\n    '[style.--kpt-col-md]': 'spanMd() ?? null',\n    '[style.--kpt-col-lg]': 'spanLg() ?? null',\n    '[style.--kpt-col-xl]': 'spanXl() ?? null',\n    '[style.--kpt-col-2xl]': 'span2xl() ?? null',\n    '[style.--kpt-col-start]': 'start() ?? null',\n    '[style.--kpt-order]': 'order() ?? null',\n    '[style.--kpt-self]': 'self() ?? null',\n  },\n})\nexport class KptCol {\n  /** Rozpiętość kolumny — baza mobile-first. */\n  readonly span = input<KptColSpan | undefined>(undefined, { alias: 'kptCol' });\n  /** Rozpiętość od breakpointa SM (>= 640px). */\n  readonly spanSm = input<KptColSpan | undefined>(undefined, { alias: 'kptColSm' });\n  /** Rozpiętość od breakpointa MD (>= 768px). */\n  readonly spanMd = input<KptColSpan | undefined>(undefined, { alias: 'kptColMd' });\n  /** Rozpiętość od breakpointa LG (>= 1024px). */\n  readonly spanLg = input<KptColSpan | undefined>(undefined, { alias: 'kptColLg' });\n  /** Rozpiętość od breakpointa XL (>= 1280px). */\n  readonly spanXl = input<KptColSpan | undefined>(undefined, { alias: 'kptColXl' });\n  /** Rozpiętość od breakpointa 2XL (>= 1536px). */\n  readonly span2xl = input<KptColSpan | undefined>(undefined, { alias: 'kptCol2xl' });\n\n  /** Numer linii, od której zaczyna się kolumna (1-based) — pozwala robić offsety. */\n  readonly start = input<number | string | undefined>(undefined, { alias: 'kptColStart' });\n  /** Kolejność wizualna (`order`). Nie zmienia kolejności w DOM ani dla czytników ekranu. */\n  readonly order = input<number | string | undefined>(undefined, { alias: 'kptColOrder' });\n  /** Wyrównanie w poprzek osi (`align-self`): `start`, `end`, `center`, `stretch`, `baseline`. */\n  readonly self = input<string | undefined>(undefined, { alias: 'kptColSelf' });\n}\n","import { Directive, booleanAttribute, input } from '@angular/core';\n\nexport type KptFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';\nexport type KptFlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';\nexport type KptAlignment = 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly';\n\n/**\n * Kontener flexbox Koncept UI — te same zmienne i breakpointy co `kptGrid`.\n * Dla wartości bez odpowiednika w inputach (`grow`, `shrink`, `order` na dziecku)\n * używa się klas utility: `kpt-grow-1`, `kpt-order-first`, `kpt-self-end`.\n *\n * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).\n *\n * @example\n * <div kptFlex direction=\"column\" directionMd=\"row\" justify=\"space-between\" gap=\"1rem\">\n *   <span>Lewa</span>\n *   <span class=\"kpt-order-first kpt-order-md-none\">Prawa</span>\n * </div>\n */\n@Directive({\n  selector: '[kptFlex]',\n  host: {\n    class: 'kpt-flex',\n    '[attr.data-container]': 'container() ? \"\" : null',\n    '[style.--kpt-flex-direction]': 'direction() ?? null',\n    '[style.--kpt-flex-direction-md]': 'directionMd() ?? null',\n    '[style.--kpt-flex-direction-lg]': 'directionLg() ?? null',\n    '[style.--kpt-flex-wrap]': 'wrap() ?? null',\n    '[style.--kpt-justify]': 'justify() ?? null',\n    '[style.--kpt-justify-md]': 'justifyMd() ?? null',\n    '[style.--kpt-align]': 'align() ?? null',\n    '[style.--kpt-align-md]': 'alignMd() ?? null',\n    '[style.--kpt-gap]': 'gap() ?? null',\n    '[style.--kpt-gap-x]': 'gapX() ?? null',\n    '[style.--kpt-gap-y]': 'gapY() ?? null',\n  },\n})\nexport class KptFlex {\n  /** Kierunek osi głównej — baza mobile-first. */\n  readonly direction = input<KptFlexDirection | undefined>(undefined);\n  /** Kierunek od breakpointa MD (>= 768px). */\n  readonly directionMd = input<KptFlexDirection | undefined>(undefined);\n  /** Kierunek od breakpointa LG (>= 1024px). */\n  readonly directionLg = input<KptFlexDirection | undefined>(undefined);\n  /** Zawijanie elementów. */\n  readonly wrap = input<KptFlexWrap | undefined>(undefined);\n\n  /** Rozkład wzdłuż osi głównej (`justify-content`). */\n  readonly justify = input<KptAlignment | undefined>(undefined);\n  /** Rozkład wzdłuż osi głównej od breakpointa MD. */\n  readonly justifyMd = input<KptAlignment | undefined>(undefined);\n  /** Wyrównanie w poprzek osi (`align-items`). */\n  readonly align = input<KptAlignment | undefined>(undefined);\n  /** Wyrównanie w poprzek osi od breakpointa MD. */\n  readonly alignMd = input<KptAlignment | undefined>(undefined);\n\n  /** Odstęp w obu osiach. */\n  readonly gap = input<string | undefined>(undefined);\n  /** Odstęp w poziomie. */\n  readonly gapX = input<string | undefined>(undefined);\n  /** Odstęp w pionie. */\n  readonly gapY = input<string | undefined>(undefined);\n\n  /** Tryb kontenerowy — zmienne dzieci reagują na szerokość tego kontenera. */\n  readonly container = input(false, { transform: booleanAttribute });\n}\n","/*\n * Public API — @konce-pt/angular/grid\n * Ergonomia Angulara nad arkuszem @konce-pt/grid (sygnały, zoneless).\n * Dyrektywy ustawiają wyłącznie custom properties — układ liczy natywny CSS.\n */\nexport { KptGrid } from './lib/grid.directive';\nexport { KptCol } from './lib/col.directive';\nexport type { KptColSpan } from './lib/col.directive';\nexport { KptFlex } from './lib/flex.directive';\nexport type { KptFlexDirection, KptFlexWrap, KptAlignment } from './lib/flex.directive';\n\nimport { KptGrid } from './lib/grid.directive';\nimport { KptCol } from './lib/col.directive';\nimport { KptFlex } from './lib/flex.directive';\n\n/** Komplet dyrektyw układu — `imports: [...KPT_GRID_IMPORTS]`. */\nexport const KPT_GRID_IMPORTS = [KptGrid, KptCol, KptFlex] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/dist/grid/src/lib/llms.txt

@@ -0,0 +1,91 @@
+# KptGrid / KptCol / KptFlex (@konce-pt/angular/grid)
+
+Ergonomia Angulara nad arkuszem `@konce-pt/grid`. Dyrektywy ustawiają wyłącznie
+custom properties inline — nie dodają ani nie usuwają klas, układ przelicza
+natywny silnik CSS.
+
+Import: `import { KptGrid, KptCol, KptFlex } from '@konce-pt/angular/grid';`
+Skrót: `import { KPT_GRID_IMPORTS } from '@konce-pt/angular/grid';` → `imports: [...KPT_GRID_IMPORTS]`
+
+Wymaga arkusza: `import '@konce-pt/grid';` (Angular CLI: `angular.json` → `styles[]`).
+
+## Breakpointy (mobile-first)
+`sm` >= 640px, `md` >= 768px, `lg` >= 1024px, `xl` >= 1280px, `2xl` >= 1536px.
+Wartość obowiązuje od swojego breakpointa w górę, dopóki nie nadpisze jej kolejna:
+`[kptCol]="12" [kptColLg]="5"` daje 12 na mobile, `sm` i `md`, a 5 dopiero od `lg`.
+
+## KptGrid — selektor `[kptGrid]`, `kpt-grid`
+Klasa hosta: `kpt-grid`.
+- `columns`: number — liczba kolumn (domyślnie 12 z CSS). Warianty: `columnsSm`,
+  `columnsMd`, `columnsLg`, `columnsXl`, `columns2xl`.
+- `gap`: string — odstęp w obu osiach, np. `'1.5rem'`, `'var(--kpt-space-6)'`.
+- `gapX`, `gapY`: string — odstęp w jednej osi, nadpisuje `gap`.
+- `container`: boolean — tryb container queries (patrz niżej).
+
+## KptCol — selektor `[kptCol]`, `[kptColSm]` … `[kptColSelf]`
+- `kptCol`: number | string — rozpiętość, baza mobile-first.
+- `kptColSm`, `kptColMd`, `kptColLg`, `kptColXl`, `kptCol2xl` — nadpisania per breakpoint.
+- `kptColStart`: number — linia siatki, od której zaczyna się kolumna (1-based); tak robi się offsety.
+- `kptColOrder`: number — kolejność wizualna. Nie zmienia DOM: czytniki ekranu
+  i nawigacja klawiaturą idą za DOM, więc nie przenoś nim treści interaktywnej.
+- `kptColSelf`: string — `align-self` (`start`, `end`, `center`, `stretch`, `baseline`).
+
+## KptFlex — selektor `[kptFlex]`
+Klasa hosta: `kpt-flex`. Te same zmienne i breakpointy co grid, jeden wymiar.
+- `direction`: 'row' | 'row-reverse' | 'column' | 'column-reverse' (+ `directionMd`, `directionLg`)
+- `wrap`: 'wrap' | 'nowrap' | 'wrap-reverse'
+- `justify`, `align` (+ `justifyMd`, `alignMd`): `start` | `end` | `center` | `stretch` |
+  `baseline` | `space-between` | `space-around` | `space-evenly`
+- `gap`, `gapX`, `gapY`: string
+- `container`: boolean
+
+Wartości bez odpowiednika w inputach podaje się klasami utility z `@konce-pt/grid`:
+`kpt-grow-1`, `kpt-shrink-0`, `kpt-order-first`, `kpt-self-end`, `kpt-gap-6`.
+
+## Tryb kontenerowy (`container`)
+Spany dzieci reagują na szerokość TEJ siatki zamiast okna — karta w wąskim
+sidebarze układa się jednokolumnowo, choć viewport jest szeroki.
+
+Ograniczenie CSS, nie paczki: `@container` odpytuje najbliższy kontener przodka,
+więc element nie może odpytać własnego. Responsywne są zmienne dziecka (span,
+start, order, self); liczba kolumn i odstępy nadal idą za viewportem.
+
+## Przykłady
+    <div kptGrid>
+      <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
+      <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
+      <div [kptCol]="12" [kptColMd]="4">Karta</div>
+    </div>
+
+    <!-- 18 kolumn bez rekompilacji SCSS -->
+    <div kptGrid [columns]="18" gap="1.5rem">
+      <div [kptCol]="18" [kptColLg]="5">Sidebar</div>
+      <div [kptCol]="18" [kptColLg]="13">Treść</div>
+    </div>
+
+    <!-- offset i zmiana kolejności na mobile -->
+    <div kptGrid>
+      <div [kptCol]="6" [kptColStart]="4">start 4, span 6</div>
+      <div [kptCol]="12" [kptColMd]="6" class="kpt-order-first kpt-order-md-none">drugi w DOM</div>
+      <div [kptCol]="12" [kptColMd]="6">pierwszy w DOM</div>
+    </div>
+
+    <!-- flexbox -->
+    <div kptFlex direction="column" directionMd="row" justify="space-between" align="center" gap="1rem">
+      <span>Lewa</span>
+      <span>Prawa</span>
+    </div>
+
+    <!-- układ formularza (preset CSS, bez klas na dzieciach) -->
+    <form class="kpt-grid kpt-form-grid">
+      <kpt-form-field label="Imię"><kpt-input [(value)]="firstName" /></kpt-form-field>
+      <kpt-form-field label="Nazwisko"><kpt-input [(value)]="lastName" /></kpt-form-field>
+      <kpt-form-field label="Notatki" class="kpt-col-md-12"><kpt-input [(value)]="notes" /></kpt-form-field>
+    </form>
+
+## Custom properties
+Siatka: `--kpt-grid-columns`, `--kpt-gap`, `--kpt-gap-x`, `--kpt-gap-y`,
+`--kpt-justify`, `--kpt-align`, `--kpt-content`, `--kpt-flex-direction`, `--kpt-flex-wrap`.
+Dziecko: `--kpt-col`, `--kpt-col-start`, `--kpt-order`, `--kpt-self`, `--kpt-flex`,
+`--kpt-grow`, `--kpt-shrink`.
+Każda ma warianty per breakpoint: `--kpt-col` → `--kpt-col-md`.

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "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",
@@ -47,6 +47,10 @@
       "types": "./types/konce-pt-angular-charts.d.ts",
       "default": "./fesm2022/konce-pt-angular-charts.mjs"
     },
+    "./grid": {
+      "types": "./types/konce-pt-angular-grid.d.ts",
+      "default": "./fesm2022/konce-pt-angular-grid.mjs"
+    },
     "./package.json": {
       "default": "./package.json"
     }

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

@@ -0,0 +1,136 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Siatka Koncept UI — CSS Grid sterowany custom properties z `@konce-pt/grid`.
+ * Dyrektywa, nie komponent: nie dokłada elementu do DOM i działa na dowolnym
+ * tagu (`<section>`, `<ul>`, `<main>`). Alias `kpt-grid` dla zgodności.
+ *
+ * Zmiana `columns` nie manipuluje klasami — ustawia zmienną inline, a układ
+ * przelicza natywny silnik CSS.
+ *
+ * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).
+ *
+ * @example
+ * <div kptGrid [columns]="18" gap="1.5rem">
+ *   <div [kptCol]="18" [kptColLg]="5">Sidebar</div>
+ *   <div [kptCol]="18" [kptColLg]="13">Treść</div>
+ * </div>
+ */
+declare class KptGrid {
+    /** Liczba kolumn — baza mobile-first. Domyślnie 12 (z CSS). */
+    readonly columns: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa SM (>= 640px). */
+    readonly columnsSm: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa MD (>= 768px). */
+    readonly columnsMd: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa LG (>= 1024px). */
+    readonly columnsLg: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa XL (>= 1280px). */
+    readonly columnsXl: _angular_core.InputSignal<number | undefined>;
+    /** Liczba kolumn od breakpointa 2XL (>= 1536px). */
+    readonly columns2xl: _angular_core.InputSignal<number | undefined>;
+    /** Odstęp w obu osiach, np. `'1.5rem'` albo `'var(--kpt-space-6)'`. */
+    readonly gap: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp między kolumnami — nadpisuje `gap` w poziomie. */
+    readonly gapX: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp między wierszami — nadpisuje `gap` w pionie. */
+    readonly gapY: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Tryb kontenerowy: spany dzieci reagują na szerokość TEJ siatki, nie okna.
+     * Liczba kolumn i odstępy nadal idą za viewportem — `@container` nie potrafi
+     * odpytać elementu o jego własny kontener.
+     */
+    readonly container: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptGrid, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptGrid, "[kptGrid], kpt-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "columnsSm": { "alias": "columnsSm"; "required": false; "isSignal": true; }; "columnsMd": { "alias": "columnsMd"; "required": false; "isSignal": true; }; "columnsLg": { "alias": "columnsLg"; "required": false; "isSignal": true; }; "columnsXl": { "alias": "columnsXl"; "required": false; "isSignal": true; }; "columns2xl": { "alias": "columns2xl"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "gapX": { "alias": "gapX"; "required": false; "isSignal": true; }; "gapY": { "alias": "gapY"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Rozpiętość kolumny: liczba, `'full'` (cała szerokość) albo dowolna wartość CSS. */
+type KptColSpan = number | string;
+/**
+ * Kolumna siatki `kptGrid` — rozpiętość mobile-first z nadpisaniami per breakpoint.
+ *
+ * Wartość podana dla mniejszego breakpointa obowiązuje aż do następnego, który ją
+ * nadpisze: `[kptCol]="12" [kptColLg]="5"` daje 12 na mobile, tablecie i `md`,
+ * a dopiero od `lg` — 5.
+ *
+ * Dyrektywa ustawia wyłącznie custom properties inline; nie dodaje ani nie usuwa klas.
+ *
+ * @example
+ * <div kptGrid>
+ *   <div [kptCol]="12" [kptColSm]="6" [kptColMd]="4">Karta</div>
+ * </div>
+ */
+declare class KptCol {
+    /** Rozpiętość kolumny — baza mobile-first. */
+    readonly span: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa SM (>= 640px). */
+    readonly spanSm: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa MD (>= 768px). */
+    readonly spanMd: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa LG (>= 1024px). */
+    readonly spanLg: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa XL (>= 1280px). */
+    readonly spanXl: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Rozpiętość od breakpointa 2XL (>= 1536px). */
+    readonly span2xl: _angular_core.InputSignal<KptColSpan | undefined>;
+    /** Numer linii, od której zaczyna się kolumna (1-based) — pozwala robić offsety. */
+    readonly start: _angular_core.InputSignal<string | number | undefined>;
+    /** Kolejność wizualna (`order`). Nie zmienia kolejności w DOM ani dla czytników ekranu. */
+    readonly order: _angular_core.InputSignal<string | number | undefined>;
+    /** Wyrównanie w poprzek osi (`align-self`): `start`, `end`, `center`, `stretch`, `baseline`. */
+    readonly self: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptCol, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptCol, "[kptCol], [kptColSm], [kptColMd], [kptColLg], [kptColXl], [kptCol2xl], [kptColStart], [kptColOrder], [kptColSelf]", never, { "span": { "alias": "kptCol"; "required": false; "isSignal": true; }; "spanSm": { "alias": "kptColSm"; "required": false; "isSignal": true; }; "spanMd": { "alias": "kptColMd"; "required": false; "isSignal": true; }; "spanLg": { "alias": "kptColLg"; "required": false; "isSignal": true; }; "spanXl": { "alias": "kptColXl"; "required": false; "isSignal": true; }; "span2xl": { "alias": "kptCol2xl"; "required": false; "isSignal": true; }; "start": { "alias": "kptColStart"; "required": false; "isSignal": true; }; "order": { "alias": "kptColOrder"; "required": false; "isSignal": true; }; "self": { "alias": "kptColSelf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type KptFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type KptFlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type KptAlignment = 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * Kontener flexbox Koncept UI — te same zmienne i breakpointy co `kptGrid`.
+ * Dla wartości bez odpowiednika w inputach (`grow`, `shrink`, `order` na dziecku)
+ * używa się klas utility: `kpt-grow-1`, `kpt-order-first`, `kpt-self-end`.
+ *
+ * Wymaga arkusza `@konce-pt/grid` (`import '@konce-pt/grid';`).
+ *
+ * @example
+ * <div kptFlex direction="column" directionMd="row" justify="space-between" gap="1rem">
+ *   <span>Lewa</span>
+ *   <span class="kpt-order-first kpt-order-md-none">Prawa</span>
+ * </div>
+ */
+declare class KptFlex {
+    /** Kierunek osi głównej — baza mobile-first. */
+    readonly direction: _angular_core.InputSignal<KptFlexDirection | undefined>;
+    /** Kierunek od breakpointa MD (>= 768px). */
+    readonly directionMd: _angular_core.InputSignal<KptFlexDirection | undefined>;
+    /** Kierunek od breakpointa LG (>= 1024px). */
+    readonly directionLg: _angular_core.InputSignal<KptFlexDirection | undefined>;
+    /** Zawijanie elementów. */
+    readonly wrap: _angular_core.InputSignal<KptFlexWrap | undefined>;
+    /** Rozkład wzdłuż osi głównej (`justify-content`). */
+    readonly justify: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Rozkład wzdłuż osi głównej od breakpointa MD. */
+    readonly justifyMd: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Wyrównanie w poprzek osi (`align-items`). */
+    readonly align: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Wyrównanie w poprzek osi od breakpointa MD. */
+    readonly alignMd: _angular_core.InputSignal<KptAlignment | undefined>;
+    /** Odstęp w obu osiach. */
+    readonly gap: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp w poziomie. */
+    readonly gapX: _angular_core.InputSignal<string | undefined>;
+    /** Odstęp w pionie. */
+    readonly gapY: _angular_core.InputSignal<string | undefined>;
+    /** Tryb kontenerowy — zmienne dzieci reagują na szerokość tego kontenera. */
+    readonly container: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KptFlex, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KptFlex, "[kptFlex]", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "directionMd": { "alias": "directionMd"; "required": false; "isSignal": true; }; "directionLg": { "alias": "directionLg"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "justifyMd": { "alias": "justifyMd"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "alignMd": { "alias": "alignMd"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "gapX": { "alias": "gapX"; "required": false; "isSignal": true; }; "gapY": { "alias": "gapY"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Komplet dyrektyw układu — `imports: [...KPT_GRID_IMPORTS]`. */
+declare const KPT_GRID_IMPORTS: readonly [typeof KptGrid, typeof KptCol, typeof KptFlex];
+
+export { KPT_GRID_IMPORTS, KptCol, KptFlex, KptGrid };
+export type { KptAlignment, KptColSpan, KptFlexDirection, KptFlexWrap };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/angular",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "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,6 +46,10 @@
     "./charts": {
       "types": "./dist/types/konce-pt-angular-charts.d.ts",
       "default": "./dist/fesm2022/konce-pt-angular-charts.mjs"
+    },
+    "./grid": {
+      "types": "./dist/types/konce-pt-angular-grid.d.ts",
+      "default": "./dist/fesm2022/konce-pt-angular-grid.mjs"
     }
   },
   "peerDependencies": {