@konce-pt/angular 0.8.5 → 0.9.0

package/fesm2022/konce-pt-angular.mjs

@@ -1,11 +1,11 @@
+import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, InjectionToken, provideAppInitializer, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, untracked, forwardRef, numberAttribute, viewChild, Directive, afterRenderEffect, TemplateRef, Injector, viewChildren, contentChildren, linkedSignal } from '@angular/core';
-import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
+import { signal, Injectable, input, inject, ElementRef, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, computed, model, output, InjectionToken, provideAppInitializer, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, untracked, forwardRef, numberAttribute, viewChild, Directive, afterRenderEffect, TemplateRef, Injector, viewChildren, contentChildren, linkedSignal } from '@angular/core';
 import { KPT_ICONS, toKptIconRecord, sanitizeSvgFragment, renderKptIconSvg } from '@konce-pt/icons';
 export { renderKptIconSvg } from '@konce-pt/icons';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
 import { KPT_MESSAGES_EN, KPT_MESSAGES_PL, deepMerge, translate, weekdayNames, monthNames } from '@konce-pt/i18n';
 export { KPT_MESSAGES_EN, KPT_MESSAGES_PL } from '@konce-pt/i18n';
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { pad, hourMarks, minuteMarks, handAngle, handIsInner, parseTime, from12h, hourFromAngle, minuteFromAngle, commitLevelFor, decadeStart, centuryStart, canPageBack, canPageForward, formatTime, buildDayGrid, toIso, selectedYearMonth, buildMonthCells, buildYearCells, buildDecadeCells, initialPage, resolveStartView, parseDateTime, formatDate, KPT_CALENDAR_LEVELS, pageBy, clampVisibleMonths, datePart, timePart, buildRangeGrid, pickRangeDay } from '@konce-pt/datetime';
 import { KPT_MENTION_LIMIT, mentionQuery, filterMentions, parseMentionText } from '@konce-pt/mention';
 export { KPT_MENTION_LIMIT, applyMention, collectMentions, filterMentions, foldMentionText, mentionQuery, mentionToken, parseMentionText } from '@konce-pt/mention';
@@ -14,66 +14,227 @@ export { KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF,
 import { form, required, email, minLength, validateTree, submit, FormField, FormRoot } from '@angular/forms/signals';
 import { toText, aggregate, escapeCsvCell, isEmptyFilterValue, matchesColumnFilter } from '@konce-pt/table';
 
-const _c0$J = ["*"];
-function KptButton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElement(0, "span", 1);
+/**
+ * Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
+ * Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
+ * z `@konce-pt/angular/icons` lub zarejestruj własne przez `register()`.
+ */
+class KptIconRegistry {
+    constructor() {
+        this.icons = new Map(Object.entries(KPT_ICONS));
+        this._version = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
+        /** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
+        this.version = this._version.asReadonly();
+    }
+    /**
+     * 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) {
+        for (const [name, svg] of Object.entries(toKptIconRecord(icons))) {
+            this.icons.set(name, sanitizeSvgFragment(svg));
+        }
+        this._version.update((v) => v + 1);
+    }
+    /** Zwraca wewnętrzny SVG ikony lub undefined. */
+    get(name) {
+        return this.icons.get(name);
+    }
+    has(name) {
+        return this.icons.has(name);
+    }
+    static { this.ɵfac = function KptIconRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconRegistry)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptIconRegistry, factory: KptIconRegistry.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconRegistry, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
+/**
+ * Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
+ * (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze
+ * ([[KptIconRegistry]]) — wbudowany zestaw działa od razu, pełny zestaw dodaje
+ * `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
+ *
+ * @example
+ * <kpt-icon name="menu" />
+ * <kpt-icon name="check" size="1.25rem" />
+ */
+class KptIcon {
+    constructor() {
+        /** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z font-size. */
+        this.size = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        this.registry = inject(KptIconRegistry);
+        effect(() => {
+            this.registry.version(); // reaguj na późną rejestrację ikon
+            // Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
+            this.host.nativeElement.innerHTML = renderKptIconSvg(this.registry.get(this.name()));
+        });
+    }
+    static { this.ɵfac = function KptIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIcon)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIcon, selectors: [["kpt-icon"]], hostAttrs: ["aria-hidden", "true", 1, "kpt-icon-host"], hostVars: 2, hostBindings: function KptIcon_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("font-size", ctx.size() || null);
+        } }, inputs: { name: [1, "name"], size: [1, "size"] }, decls: 0, vars: 0, template: function KptIcon_Template(rf, ctx) { }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIcon, [{
+        type: Component,
+        args: [{ selector: 'kpt-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
+                    class: 'kpt-icon-host',
+                    'aria-hidden': 'true',
+                    '[style.font-size]': 'size() || null',
+                }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"] }]
+    }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIcon, { className: "KptIcon", filePath: "lib/icon/icon.component.ts", lineNumber: 26 }); })();
+
+const _c0$K = ["*"];
+function KptButton_ng_template_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 3);
+} }
+function KptButton_ng_template_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 6);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.leadingIconClass());
+    i0.ɵɵproperty("name", ctx_r0.icon());
+} }
+function KptButton_ng_template_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 6);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.trailingIconClass());
+    i0.ɵɵproperty("name", ctx_r0.iconEnd());
+} }
+function KptButton_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptButton_ng_template_0_Conditional_0_Template, 1, 0, "span", 3)(1, KptButton_ng_template_0_Conditional_1_Template, 1, 3, "kpt-icon", 4);
+    i0.ɵɵelementStart(2, "span", 5);
+    i0.ɵɵprojection(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, KptButton_ng_template_0_Conditional_4_Template, 1, 3, "kpt-icon", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.loading() ? 0 : ctx_r0.showLeadingIcon() ? 1 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.iconEnd() ? 4 : -1);
+} }
+function KptButton_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 7);
+    i0.ɵɵelementContainer(1, 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    const body_r2 = i0.ɵɵreference(1);
+    i0.ɵɵclassProp("kpt-button--loading", ctx_r0.loading());
+    i0.ɵɵattribute("href", ctx_r0.isDisabled() ? null : ctx_r0.href(), i0.ɵɵsanitizeUrl)("target", ctx_r0.target())("rel", ctx_r0.effectiveRel())("data-variant", ctx_r0.variant())("data-size", ctx_r0.size())("aria-busy", ctx_r0.loading() ? "true" : null)("aria-disabled", ctx_r0.isDisabled() ? "true" : null)("tabindex", ctx_r0.isDisabled() ? -1 : null);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", body_r2);
+} }
+function KptButton_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵelementContainer(1, 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    const body_r2 = i0.ɵɵreference(1);
+    i0.ɵɵclassProp("kpt-button--loading", ctx_r0.loading());
+    i0.ɵɵproperty("type", ctx_r0.type())("disabled", ctx_r0.isDisabled());
+    i0.ɵɵattribute("data-variant", ctx_r0.variant())("data-size", ctx_r0.size())("aria-busy", ctx_r0.loading() ? "true" : null);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", body_r2);
 } }
 /**
- * Przycisk Koncept UI. Renderuje natywny `<button>` (zachowana semantyka i submit
- * formularza). Wygląd sterowany tokenami `--kpt-button-*`.
+ * Przycisk Koncept UI. Renderuje natywny `<button>` (semantyka + submit formularza)
+ * albo `<a>`, gdy podasz `href`.
+ *
+ * Ikonę można podać nazwą (`icon`/`iconEnd`) albo wstawić do slotu — oba sposoby dostają
+ * ten sam odstęp i tę samą skalę. Przy `loading` spinner zajmuje miejsce ikony wiodącej.
  *
  * @example
- * <kpt-button variant="filled" (click)="save()">Zapisz</kpt-button>
- * <kpt-button variant="outline" size="sm" [disabled]="busy()">Anuluj</kpt-button>
+ * <kpt-button (click)="save()">Zapisz</kpt-button>
+ * <kpt-button icon="device-floppy" (click)="save()">Zapisz</kpt-button>
+ * <kpt-button iconEnd="chevron-right" variant="outline">Dalej</kpt-button>
+ * <kpt-button variant="link" href="/docs">Dokumentacja</kpt-button>
+ * <kpt-button variant="danger" [loading]="deleting()">Usuń</kpt-button>
  */
 class KptButton {
     constructor() {
-        /** Wariant wizualny. */
         this.variant = input('filled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        /** Rozmiar. */
         this.size = input('md', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        /** Typ natywnego przycisku (istotne w formularzach). */
         this.type = input('button', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        /** Wyłączony. */
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Stan ładowania — pokazuje spinner i blokuje interakcję. */
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Rozciągnięcie na całą szerokość kontenera. */
         this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nazwa ikony wiodącej z rejestru (`KptIconRegistry`). */
+        this.icon = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Nazwa ikony zamykającej — zwykle znacznik kierunku, nie akcja. */
+        this.iconEnd = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconEnd" }] : /* istanbul ignore next */ []));
+        /** Klasa dokładana do ikony wiodącej; obok stałego haka `.kpt-button__icon`. */
+        this.iconClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        this.iconEndClass = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "iconEndClass" }] : /* istanbul ignore next */ []));
+        /** Podany adres zamienia `<button>` na `<a>`. */
+        this.href = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+        this.target = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
+        this.rel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rel" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** Spinner zajmuje miejsce ikony wiodącej, więc przy ładowaniu jej nie renderujemy. */
+        this.showLeadingIcon = computed(() => !!this.icon() && !this.loading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLeadingIcon" }] : /* istanbul ignore next */ []));
+        this.leadingIconClass = computed(() => this.iconClasses('kpt-button__icon', this.iconClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leadingIconClass" }] : /* istanbul ignore next */ []));
+        this.trailingIconClass = computed(() => this.iconClasses('kpt-button__icon kpt-button__icon--end', this.iconEndClass()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trailingIconClass" }] : /* istanbul ignore next */ []));
+        /** `target="_blank"` bez `rel` to wektor na `window.opener` — dokładamy domyślne. */
+        this.effectiveRel = computed(() => this.rel() ?? (this.target() === '_blank' ? 'noopener noreferrer' : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveRel" }] : /* istanbul ignore next */ []));
+    }
+    iconClasses(base, extra) {
+        return extra ? `${base} ${extra}` : base;
     }
     static { this.ɵfac = function KptButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptButton)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptButton, selectors: [["kpt-button"]], hostAttrs: [1, "kpt-button-host"], hostVars: 2, hostBindings: function KptButton_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("kpt-button-host--full", ctx.fullWidth());
-        } }, inputs: { variant: [1, "variant"], size: [1, "size"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], fullWidth: [1, "fullWidth"] }, ngContentSelectors: _c0$J, decls: 4, vars: 8, consts: [[1, "kpt-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-button__spinner"], [1, "kpt-button__content"]], template: function KptButton_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { variant: [1, "variant"], size: [1, "size"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], fullWidth: [1, "fullWidth"], icon: [1, "icon"], iconEnd: [1, "iconEnd"], iconClass: [1, "iconClass"], iconEndClass: [1, "iconEndClass"], href: [1, "href"], target: [1, "target"], rel: [1, "rel"] }, ngContentSelectors: _c0$K, decls: 4, vars: 1, consts: [["body", ""], [1, "kpt-button", 3, "kpt-button--loading"], [1, "kpt-button", 3, "type", "kpt-button--loading", "disabled"], ["aria-hidden", "true", 1, "kpt-button__spinner"], [3, "class", "name"], [1, "kpt-button__content"], [3, "name"], [1, "kpt-button"], [3, "ngTemplateOutlet"], [1, "kpt-button", 3, "type", "disabled"]], template: function KptButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵdomElementStart(0, "button", 0);
-            i0.ɵɵconditionalCreate(1, KptButton_Conditional_1_Template, 1, 0, "span", 1);
-            i0.ɵɵdomElementStart(2, "span", 2);
-            i0.ɵɵprojection(3);
-            i0.ɵɵdomElementEnd()();
+            i0.ɵɵtemplate(0, KptButton_ng_template_0_Template, 5, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(2, KptButton_Conditional_2_Template, 2, 11, "a", 1)(3, KptButton_Conditional_3_Template, 2, 8, "button", 2);
         } if (rf & 2) {
-            i0.ɵɵclassProp("kpt-button--loading", ctx.loading());
-            i0.ɵɵdomProperty("type", ctx.type())("disabled", ctx.isDisabled());
-            i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("aria-busy", ctx.loading() ? "true" : null);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.loading() ? 1 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--%NS%_bg: var(--%NS%kpt-button-filled-bg);--%NS%_fg: var(--%NS%kpt-button-filled-fg);--%NS%_bg-hover: var(--%NS%kpt-button-filled-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-filled-bg-active);--%NS%_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--%NS%_h, 2.5rem);padding-inline:var(--%NS%_px, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%_border);border-radius:var(--%NS%kpt-button-radius, .5rem);font-family:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--%NS%_bg);color:var(--%NS%_fg);transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){--%NS%_state: var(--%NS%_bg-hover)}.kpt-button:hover:not(:disabled):after{opacity:1}.kpt-button:active:not(:disabled){--%NS%_state: var(--%NS%_bg-active, var(--%NS%_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--%NS%_h: 2rem;--%NS%_px: .75rem;--%NS%_fs: .8125rem}.kpt-button[data-size=md]{--%NS%_h: 2.5rem;--%NS%_px: 1rem;--%NS%_fs: .875rem}.kpt-button[data-size=lg]{--%NS%_h: 3rem;--%NS%_px: 1.5rem;--%NS%_fs: 1rem}.kpt-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-button-tonal-bg);--%NS%_fg: var(--%NS%kpt-button-tonal-fg);--%NS%_bg-hover: var(--%NS%kpt-button-tonal-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-outline-fg);--%NS%_border: var(--%NS%kpt-button-outline-border);--%NS%_bg-hover: var(--%NS%kpt-button-outline-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-text-fg);--%NS%_bg-hover: var(--%NS%kpt-button-text-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black);--%NS%_bg-active: color-mix(in oklch, var(--%NS%kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"], encapsulation: 2 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.href() ? 2 : 3);
+        } }, dependencies: [KptIcon, NgTemplateOutlet], styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--%NS%_bg: var(--%NS%kpt-button-filled-bg);--%NS%_fg: var(--%NS%kpt-button-filled-fg);--%NS%_bg-hover: var(--%NS%kpt-button-filled-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-filled-bg-active);--%NS%_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--%NS%_h, 2.5rem);padding-inline:var(--%NS%_px, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%_border);border-radius:var(--%NS%kpt-button-radius, .5rem);font-family:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--%NS%_bg);color:var(--%NS%_fg);text-decoration:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled):not([aria-disabled=true]){--%NS%_state: var(--%NS%_bg-hover)}.kpt-button:hover:not(:disabled):not([aria-disabled=true]):after{opacity:1}.kpt-button:active:not(:disabled):not([aria-disabled=true]){--%NS%_state: var(--%NS%_bg-active, var(--%NS%_bg-hover))}.kpt-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:.5}.kpt-button__content{display:inline-flex;align-items:center;gap:var(--%NS%kpt-button-gap, .5rem)}.kpt-button :is(.kpt-button__icon,.kpt-button__content .kpt-icon-host){font-size:var(--%NS%_icon, 1.125rem)}.kpt-button[data-size=xs]{--%NS%_h: 1.75rem;--%NS%_px: .5rem;--%NS%_fs: .75rem;--%NS%_icon: .875rem}.kpt-button[data-size=sm]{--%NS%_h: 2rem;--%NS%_px: .75rem;--%NS%_fs: .8125rem;--%NS%_icon: 1rem}.kpt-button[data-size=md]{--%NS%_h: 2.5rem;--%NS%_px: 1rem;--%NS%_fs: .875rem;--%NS%_icon: 1.125rem}.kpt-button[data-size=lg]{--%NS%_h: 3rem;--%NS%_px: 1.5rem;--%NS%_fs: 1rem;--%NS%_icon: 1.25rem}.kpt-button[data-size=xl]{--%NS%_h: 3.5rem;--%NS%_px: 2rem;--%NS%_fs: 1.125rem;--%NS%_icon: 1.5rem}.kpt-button[data-variant=elevated]{--%NS%_bg: var(--%NS%kpt-button-elevated-bg);--%NS%_fg: var(--%NS%kpt-button-elevated-fg);--%NS%_bg-hover: var(--%NS%kpt-button-elevated-bg-hover);box-shadow:var(--%NS%kpt-shadow-sm)}.kpt-button[data-variant=elevated]:hover:not(:disabled):not([aria-disabled=true]){box-shadow:var(--%NS%kpt-shadow-md)}.kpt-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-button-tonal-bg);--%NS%_fg: var(--%NS%kpt-button-tonal-fg);--%NS%_bg-hover: var(--%NS%kpt-button-tonal-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-outline-fg);--%NS%_border: var(--%NS%kpt-button-outline-border);--%NS%_bg-hover: var(--%NS%kpt-button-outline-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-text-fg);--%NS%_bg-hover: var(--%NS%kpt-button-text-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-text-bg-hover)}.kpt-button[data-variant=link]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-link-fg);--%NS%_bg-hover: transparent;--%NS%_px: 0;text-decoration:underline;text-underline-offset:.2em}.kpt-button[data-variant=link]:hover:not(:disabled):not([aria-disabled=true]){--%NS%_fg: var(--%NS%kpt-button-link-fg-hover)}.kpt-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-button-danger-bg);--%NS%_fg: var(--%NS%kpt-button-danger-fg);--%NS%_bg-hover: var(--%NS%kpt-button-danger-bg-hover)}.kpt-button[data-variant=success]{--%NS%_bg: var(--%NS%kpt-button-success-bg);--%NS%_fg: var(--%NS%kpt-button-success-fg);--%NS%_bg-hover: var(--%NS%kpt-button-success-bg-hover)}.kpt-button[data-variant=warning]{--%NS%_bg: var(--%NS%kpt-button-warning-bg);--%NS%_fg: var(--%NS%kpt-button-warning-fg);--%NS%_bg-hover: var(--%NS%kpt-button-warning-bg-hover)}.kpt-button[data-variant=info]{--%NS%_bg: var(--%NS%kpt-button-info-bg);--%NS%_fg: var(--%NS%kpt-button-info-fg);--%NS%_bg-hover: var(--%NS%kpt-button-info-bg-hover)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:var(--%NS%_icon, 1.125rem);height:var(--%NS%_icon, 1.125rem);flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptButton, [{
         type: Component,
-        args: [{ selector: 'kpt-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+        args: [{ selector: 'kpt-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon, NgTemplateOutlet], host: {
                     class: 'kpt-button-host',
                     '[class.kpt-button-host--full]': 'fullWidth()',
-                }, template: "<button\n  class=\"kpt-button\"\n  [type]=\"type()\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-size]=\"size()\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [class.kpt-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n>\n  @if (loading()) {\n    <span class=\"kpt-button__spinner\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"kpt-button__content\"><ng-content /></span>\n</button>\n", styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--_bg: var(--kpt-button-filled-bg);--_fg: var(--kpt-button-filled-fg);--_bg-hover: var(--kpt-button-filled-bg-hover);--_bg-active: var(--kpt-button-filled-bg-active);--_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--_h, 2.5rem);padding-inline:var(--_px, 1rem);border:var(--kpt-border-width-thin, 1px) solid var(--_border);border-radius:var(--kpt-button-radius, .5rem);font-family:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--_bg);color:var(--_fg);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){--_state: var(--_bg-hover)}.kpt-button:hover:not(:disabled):after{opacity:1}.kpt-button:active:not(:disabled){--_state: var(--_bg-active, var(--_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--_h: 2rem;--_px: .75rem;--_fs: .8125rem}.kpt-button[data-size=md]{--_h: 2.5rem;--_px: 1rem;--_fs: .875rem}.kpt-button[data-size=lg]{--_h: 3rem;--_px: 1.5rem;--_fs: 1rem}.kpt-button[data-variant=tonal]{--_bg: var(--kpt-button-tonal-bg);--_fg: var(--kpt-button-tonal-fg);--_bg-hover: var(--kpt-button-tonal-bg-hover);--_bg-active: var(--kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--_bg: transparent;--_fg: var(--kpt-button-outline-fg);--_border: var(--kpt-button-outline-border);--_bg-hover: var(--kpt-button-outline-bg-hover);--_bg-active: var(--kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--_bg: transparent;--_fg: var(--kpt-button-text-fg);--_bg-hover: var(--kpt-button-text-bg-hover);--_bg-active: var(--kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);--_bg-active: color-mix(in oklch, var(--kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"] }]
-    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButton, { className: "KptButton", filePath: "lib/button/button.component.ts", lineNumber: 32 }); })();
+                }, template: "<!--\n  Tre\u015B\u0107 siedzi w jednym `ng-template`, bo `<ng-content>` wolno w szablonie umie\u015Bci\u0107 tylko raz \u2014\n  ga\u0142\u0119zie `<a>` i `<button>` nie mog\u0105 mie\u0107 w\u0142asnej kopii, wi\u0119c obie stempluj\u0105 ten sam szablon.\n-->\n<ng-template #body>\n  @if (loading()) {\n    <span class=\"kpt-button__spinner\" aria-hidden=\"true\"></span>\n  } @else if (showLeadingIcon()) {\n    <kpt-icon [class]=\"leadingIconClass()\" [name]=\"icon()!\" />\n  }\n  <span class=\"kpt-button__content\"><ng-content /></span>\n  @if (iconEnd()) {\n    <kpt-icon [class]=\"trailingIconClass()\" [name]=\"iconEnd()!\" />\n  }\n</ng-template>\n\n@if (href()) {\n  <!-- Wy\u0142\u0105czony odno\u015Bnik traci `href`, a nie tylko dostaje atrybut \u2014 inaczej da\u0142oby si\u0119 go\n       klikn\u0105\u0107 i wej\u015B\u0107 na niego z klawiatury. -->\n  <a\n    class=\"kpt-button\"\n    [attr.href]=\"isDisabled() ? null : href()\"\n    [attr.target]=\"target()\"\n    [attr.rel]=\"effectiveRel()\"\n    [attr.data-variant]=\"variant()\"\n    [attr.data-size]=\"size()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n    [attr.tabindex]=\"isDisabled() ? -1 : null\"\n    [class.kpt-button--loading]=\"loading()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </a>\n} @else {\n  <button\n    class=\"kpt-button\"\n    [type]=\"type()\"\n    [attr.data-variant]=\"variant()\"\n    [attr.data-size]=\"size()\"\n    [attr.aria-busy]=\"loading() ? 'true' : null\"\n    [class.kpt-button--loading]=\"loading()\"\n    [disabled]=\"isDisabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"body\" />\n  </button>\n}\n", styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--_bg: var(--kpt-button-filled-bg);--_fg: var(--kpt-button-filled-fg);--_bg-hover: var(--kpt-button-filled-bg-hover);--_bg-active: var(--kpt-button-filled-bg-active);--_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--_h, 2.5rem);padding-inline:var(--_px, 1rem);border:var(--kpt-border-width-thin, 1px) solid var(--_border);border-radius:var(--kpt-button-radius, .5rem);font-family:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--_bg);color:var(--_fg);text-decoration:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled):not([aria-disabled=true]){--_state: var(--_bg-hover)}.kpt-button:hover:not(:disabled):not([aria-disabled=true]):after{opacity:1}.kpt-button:active:not(:disabled):not([aria-disabled=true]){--_state: var(--_bg-active, var(--_bg-hover))}.kpt-button:is(:disabled,[aria-disabled=true]){cursor:not-allowed;opacity:.5}.kpt-button__content{display:inline-flex;align-items:center;gap:var(--kpt-button-gap, .5rem)}.kpt-button :is(.kpt-button__icon,.kpt-button__content .kpt-icon-host){font-size:var(--_icon, 1.125rem)}.kpt-button[data-size=xs]{--_h: 1.75rem;--_px: .5rem;--_fs: .75rem;--_icon: .875rem}.kpt-button[data-size=sm]{--_h: 2rem;--_px: .75rem;--_fs: .8125rem;--_icon: 1rem}.kpt-button[data-size=md]{--_h: 2.5rem;--_px: 1rem;--_fs: .875rem;--_icon: 1.125rem}.kpt-button[data-size=lg]{--_h: 3rem;--_px: 1.5rem;--_fs: 1rem;--_icon: 1.25rem}.kpt-button[data-size=xl]{--_h: 3.5rem;--_px: 2rem;--_fs: 1.125rem;--_icon: 1.5rem}.kpt-button[data-variant=elevated]{--_bg: var(--kpt-button-elevated-bg);--_fg: var(--kpt-button-elevated-fg);--_bg-hover: var(--kpt-button-elevated-bg-hover);box-shadow:var(--kpt-shadow-sm)}.kpt-button[data-variant=elevated]:hover:not(:disabled):not([aria-disabled=true]){box-shadow:var(--kpt-shadow-md)}.kpt-button[data-variant=tonal]{--_bg: var(--kpt-button-tonal-bg);--_fg: var(--kpt-button-tonal-fg);--_bg-hover: var(--kpt-button-tonal-bg-hover);--_bg-active: var(--kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--_bg: transparent;--_fg: var(--kpt-button-outline-fg);--_border: var(--kpt-button-outline-border);--_bg-hover: var(--kpt-button-outline-bg-hover);--_bg-active: var(--kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--_bg: transparent;--_fg: var(--kpt-button-text-fg);--_bg-hover: var(--kpt-button-text-bg-hover);--_bg-active: var(--kpt-button-text-bg-hover)}.kpt-button[data-variant=link]{--_bg: transparent;--_fg: var(--kpt-button-link-fg);--_bg-hover: transparent;--_px: 0;text-decoration:underline;text-underline-offset:.2em}.kpt-button[data-variant=link]:hover:not(:disabled):not([aria-disabled=true]){--_fg: var(--kpt-button-link-fg-hover)}.kpt-button[data-variant=danger]{--_bg: var(--kpt-button-danger-bg);--_fg: var(--kpt-button-danger-fg);--_bg-hover: var(--kpt-button-danger-bg-hover)}.kpt-button[data-variant=success]{--_bg: var(--kpt-button-success-bg);--_fg: var(--kpt-button-success-fg);--_bg-hover: var(--kpt-button-success-bg-hover)}.kpt-button[data-variant=warning]{--_bg: var(--kpt-button-warning-bg);--_fg: var(--kpt-button-warning-fg);--_bg-hover: var(--kpt-button-warning-bg-hover)}.kpt-button[data-variant=info]{--_bg: var(--kpt-button-info-bg);--_fg: var(--kpt-button-info-fg);--_bg-hover: var(--kpt-button-info-bg-hover)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:var(--_icon, 1.125rem);height:var(--_icon, 1.125rem);flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"] }]
+    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEnd", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], iconEndClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconEndClass", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], rel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rel", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButton, { className: "KptButton", filePath: "lib/button/button.component.ts", lineNumber: 51 }); })();
 
-const _c0$I = ["*"];
+const _c0$J = ["*"];
 function KptIconButton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElement(0, "span", 1);
 } }
@@ -121,7 +282,7 @@ class KptIconButton {
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptIconButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconButton)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIconButton, selectors: [["kpt-icon-button"]], hostAttrs: [1, "kpt-icon-button-host"], inputs: { variant: [1, "variant"], size: [1, "size"], shape: [1, "shape"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], ariaLabel: [1, "ariaLabel"], ariaPressed: [1, "ariaPressed"], ariaExpanded: [1, "ariaExpanded"] }, ngContentSelectors: _c0$I, decls: 3, vars: 10, consts: [[1, "kpt-icon-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-icon-button__spinner"]], template: function KptIconButton_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIconButton, selectors: [["kpt-icon-button"]], hostAttrs: [1, "kpt-icon-button-host"], inputs: { variant: [1, "variant"], size: [1, "size"], shape: [1, "shape"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], ariaLabel: [1, "ariaLabel"], ariaPressed: [1, "ariaPressed"], ariaExpanded: [1, "ariaExpanded"] }, ngContentSelectors: _c0$J, decls: 3, vars: 10, consts: [[1, "kpt-icon-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-icon-button__spinner"]], template: function KptIconButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "button", 0);
             i0.ɵɵconditionalCreate(1, KptIconButton_Conditional_1_Template, 1, 0, "span", 1)(2, KptIconButton_Conditional_2_Template, 1, 0);
@@ -131,7 +292,7 @@ class KptIconButton {
             i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("data-shape", ctx.shape())("aria-label", ctx.ariaLabel())("aria-pressed", ctx.ariaPressed())("aria-expanded", ctx.ariaExpanded())("aria-busy", ctx.loading() ? "true" : null);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loading() ? 1 : 2);
-        } }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-color-on-surface);--%NS%_bg-hover: var(--%NS%kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--%NS%kpt-border-width-thin, 1px) solid transparent;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--%NS%kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-color-on-surface);--%NS%_bg-hover: var(--%NS%kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--%NS%kpt-border-width-thin, 1px) solid transparent;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--%NS%kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklab, var(--%NS%kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconButton, [{
         type: Component,
@@ -154,31 +315,53 @@ class KptIconButton {
         <ng-content />
       }
     </button>
-  `, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--kpt-border-width-thin, 1px) solid transparent;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"] }]
+  `, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--kpt-border-width-thin, 1px) solid transparent;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklab, var(--kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIconButton, { className: "KptIconButton", filePath: "lib/icon-button/icon-button.component.ts", lineNumber: 38 }); })();
 
 const _forTrack0$e = ($index, $item) => $item.value;
+function KptButtonGroup_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 3);
+} if (rf & 2) {
+    const opt_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("name", opt_r2.icon);
+} }
+function KptButtonGroup_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const opt_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(opt_r2.label);
+} }
 function KptButtonGroup_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "button", 2);
-    i0.ɵɵdomListener("click", function KptButtonGroup_For_2_Template_button_click_0_listener() { const opt_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.select(opt_r2)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function KptButtonGroup_For_2_Template_button_click_0_listener() { const opt_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.select(opt_r2)); });
+    i0.ɵɵconditionalCreate(1, KptButtonGroup_For_2_Conditional_1_Template, 1, 1, "kpt-icon", 3);
+    i0.ɵɵconditionalCreate(2, KptButtonGroup_For_2_Conditional_2_Template, 2, 1, "span", 4);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const opt_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("is-active", opt_r2.value === ctx_r2.value());
-    i0.ɵɵdomProperty("disabled", ctx_r2.disabled() || opt_r2.disabled);
-    i0.ɵɵattribute("aria-pressed", opt_r2.value === ctx_r2.value());
+    i0.ɵɵproperty("disabled", ctx_r2.disabled() || opt_r2.disabled);
+    i0.ɵɵattribute("aria-pressed", opt_r2.value === ctx_r2.value())("aria-label", ctx_r2.iconOnly() ? opt_r2.label : null)("title", ctx_r2.iconOnly() ? opt_r2.label : null);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(opt_r2.label);
+    i0.ɵɵconditional(opt_r2.icon ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.iconOnly() ? 2 : -1);
 } }
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji. Signal Forms.
  *
+ * Pozycja może mieć ikonę (`KptOption.icon`); `iconOnly` chowa etykietę, ale zostawia ją
+ * w nazwie dostępnej, więc czytnik ekranu dalej wie, co wybiera.
+ *
  * @example
  * <kpt-button-group [(value)]="view" [options]="[{label:'Lista',value:'list'},{label:'Siatka',value:'grid'}]" />
+ * <kpt-button-group [(value)]="view" [options]="[{icon:'list',label:'Lista',value:'list'}]" iconOnly />
  * <kpt-button-group [formField]="f.period" [options]="periods" />
  */
 class KptButtonGroup {
@@ -192,6 +375,8 @@ class KptButtonGroup {
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i `title`. */
+        this.iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.touch = output();
     }
     select(opt) {
@@ -201,20 +386,20 @@ class KptButtonGroup {
         this.touch.emit();
     }
     static { this.ɵfac = function KptButtonGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptButtonGroup)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptButtonGroup, selectors: [["kpt-button-group"]], hostAttrs: [1, "kpt-button-group-host"], inputs: { options: [1, "options"], value: [1, "value"], size: [1, "size"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 3, vars: 1, consts: [["role", "group", 1, "kpt-button-group"], ["type", "button", 1, "kpt-button-group__item", 3, "is-active", "disabled"], ["type", "button", 1, "kpt-button-group__item", 3, "click", "disabled"]], template: function KptButtonGroup_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, KptButtonGroup_For_2_Template, 2, 5, "button", 1, _forTrack0$e);
-            i0.ɵɵdomElementEnd();
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptButtonGroup, selectors: [["kpt-button-group"]], hostAttrs: [1, "kpt-button-group-host"], inputs: { options: [1, "options"], value: [1, "value"], size: [1, "size"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], iconOnly: [1, "iconOnly"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 3, vars: 2, consts: [["role", "group", 1, "kpt-button-group"], ["type", "button", 1, "kpt-button-group__item", 3, "is-active", "disabled"], ["type", "button", 1, "kpt-button-group__item", 3, "click", "disabled"], [1, "kpt-button-group__icon", 3, "name"], [1, "kpt-button-group__label"]], template: function KptButtonGroup_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵrepeaterCreate(1, KptButtonGroup_For_2_Template, 3, 8, "button", 1, _forTrack0$e);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵattribute("data-size", ctx.size());
+            i0.ɵɵattribute("data-size", ctx.size())("data-icon-only", ctx.iconOnly() ? "" : null);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, styles: ["@layer kpt.components{.kpt-button-group-host{display:inline-flex}.kpt-button-group{display:inline-flex;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border-strong);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden;background:var(--%NS%kpt-color-surface)}.kpt-button-group__item{appearance:none;border:0;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:none;color:var(--%NS%kpt-color-on-surface);padding:0 var(--%NS%kpt-space-4, 1rem);height:2.5rem;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button-group__item:first-child{border-inline-start:0}.kpt-button-group__item:hover:not(:disabled):not(.is-active){background:var(--%NS%kpt-color-muted)}.kpt-button-group__item.is-active{background:var(--%NS%kpt-color-primary);color:var(--%NS%kpt-color-on-primary)}.kpt-button-group__item:disabled{opacity:.5;cursor:not-allowed}.kpt-button-group[data-size=sm] .kpt-button-group__item{height:2rem;padding-inline:.75rem;font-size:.8125rem}.kpt-button-group[data-size=lg] .kpt-button-group__item{height:3rem;padding-inline:1.5rem;font-size:1rem}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-button-group-host{display:inline-flex}.kpt-button-group{display:inline-flex;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border-strong);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden;background:var(--%NS%kpt-color-surface)}.kpt-button-group__item{appearance:none;border:0;border-inline-start:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:none;color:var(--%NS%kpt-color-on-surface);display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);padding:0 var(--%NS%_px, 1rem);height:var(--%NS%_h, 2.5rem);font:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);cursor:pointer;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button-group__item:first-child{border-inline-start:0}.kpt-button-group__item:hover:not(:disabled):not(.is-active){background:var(--%NS%kpt-color-muted)}.kpt-button-group__item.is-active{background:var(--%NS%kpt-color-primary);color:var(--%NS%kpt-color-on-primary)}.kpt-button-group__item:disabled{opacity:.5;cursor:not-allowed}.kpt-button-group__icon{font-size:var(--%NS%_icon, 1.125rem)}.kpt-button-group{--%NS%_h: 2.5rem;--%NS%_px: 1rem;--%NS%_fs: .875rem;--%NS%_icon: 1.125rem}.kpt-button-group[data-size=sm]{--%NS%_h: 2rem;--%NS%_px: .75rem;--%NS%_fs: .8125rem;--%NS%_icon: 1rem}.kpt-button-group[data-size=lg]{--%NS%_h: 3rem;--%NS%_px: 1.5rem;--%NS%_fs: 1rem;--%NS%_icon: 1.25rem}.kpt-button-group[data-icon-only] .kpt-button-group__item{--%NS%_px: 0;width:var(--%NS%_h)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptButtonGroup, [{
         type: Component,
-        args: [{ selector: 'kpt-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="kpt-button-group" role="group" [attr.data-size]="size()">
+        args: [{ selector: 'kpt-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
+    <div class="kpt-button-group" role="group" [attr.data-size]="size()" [attr.data-icon-only]="iconOnly() ? '' : null">
       @for (opt of options(); track opt.value) {
         <button
           type="button"
@@ -222,15 +407,24 @@ class KptButtonGroup {
           [class.is-active]="opt.value === value()"
           [disabled]="disabled() || opt.disabled"
           [attr.aria-pressed]="opt.value === value()"
+          [attr.aria-label]="iconOnly() ? opt.label : null"
+          [attr.title]="iconOnly() ? opt.label : null"
           (click)="select(opt)"
-        >{{ opt.label }}</button>
+        >
+          @if (opt.icon) {
+            <kpt-icon class="kpt-button-group__icon" [name]="opt.icon" />
+          }
+          @if (!iconOnly()) {
+            <span class="kpt-button-group__label">{{ opt.label }}</span>
+          }
+        </button>
       }
     </div>
-  `, host: { class: 'kpt-button-group-host' }, styles: ["@layer kpt.components{.kpt-button-group-host{display:inline-flex}.kpt-button-group{display:inline-flex;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border-strong);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden;background:var(--kpt-color-surface)}.kpt-button-group__item{appearance:none;border:0;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;color:var(--kpt-color-on-surface);padding:0 var(--kpt-space-4, 1rem);height:2.5rem;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button-group__item:first-child{border-inline-start:0}.kpt-button-group__item:hover:not(:disabled):not(.is-active){background:var(--kpt-color-muted)}.kpt-button-group__item.is-active{background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-button-group__item:disabled{opacity:.5;cursor:not-allowed}.kpt-button-group[data-size=sm] .kpt-button-group__item{height:2rem;padding-inline:.75rem;font-size:.8125rem}.kpt-button-group[data-size=lg] .kpt-button-group__item{height:3rem;padding-inline:1.5rem;font-size:1rem}}\n"] }]
-    }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButtonGroup, { className: "KptButtonGroup", filePath: "lib/button-group/button-group.component.ts", lineNumber: 41 }); })();
+  `, host: { class: 'kpt-button-group-host' }, styles: ["@layer kpt.components{.kpt-button-group-host{display:inline-flex}.kpt-button-group{display:inline-flex;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border-strong);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden;background:var(--kpt-color-surface)}.kpt-button-group__item{appearance:none;border:0;border-inline-start:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;color:var(--kpt-color-on-surface);display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);padding:0 var(--_px, 1rem);height:var(--_h, 2.5rem);font:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-font-weight-medium, 500);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button-group__item:first-child{border-inline-start:0}.kpt-button-group__item:hover:not(:disabled):not(.is-active){background:var(--kpt-color-muted)}.kpt-button-group__item.is-active{background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-button-group__item:disabled{opacity:.5;cursor:not-allowed}.kpt-button-group__icon{font-size:var(--_icon, 1.125rem)}.kpt-button-group{--_h: 2.5rem;--_px: 1rem;--_fs: .875rem;--_icon: 1.125rem}.kpt-button-group[data-size=sm]{--_h: 2rem;--_px: .75rem;--_fs: .8125rem;--_icon: 1rem}.kpt-button-group[data-size=lg]{--_h: 3rem;--_px: 1.5rem;--_fs: 1rem;--_icon: 1.25rem}.kpt-button-group[data-icon-only] .kpt-button-group__item{--_px: 0;width:var(--_h)}}\n"] }]
+    }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButtonGroup, { className: "KptButtonGroup", filePath: "lib/button-group/button-group.component.ts", lineNumber: 56 }); })();
 
-const _c0$H = ["*"];
+const _c0$I = ["*"];
 /**
  * Floating Action Button (FAB) — okrągły, wyniesiony przycisk akcji. Wariant `extended` = pigułka z tekstem.
  *
@@ -253,7 +447,7 @@ class KptFab {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptFab_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptFab)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFab, selectors: [["kpt-fab"]], hostAttrs: [1, "kpt-fab-host"], inputs: { variant: [1, "variant"], size: [1, "size"], extended: [1, "extended"], disabled: [1, "disabled"], type: [1, "type"], ariaLabel: [1, "ariaLabel"] }, ngContentSelectors: _c0$H, decls: 2, vars: 7, consts: [[1, "kpt-fab", 3, "type", "disabled"]], template: function KptFab_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFab, selectors: [["kpt-fab"]], hostAttrs: [1, "kpt-fab-host"], inputs: { variant: [1, "variant"], size: [1, "size"], extended: [1, "extended"], disabled: [1, "disabled"], type: [1, "type"], ariaLabel: [1, "ariaLabel"] }, ngContentSelectors: _c0$I, decls: 2, vars: 7, consts: [[1, "kpt-fab", 3, "type", "disabled"]], template: function KptFab_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "button", 0);
             i0.ɵɵprojection(1);
@@ -280,91 +474,6 @@ class KptFab {
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFab, { className: "KptFab", filePath: "lib/fab/fab.component.ts", lineNumber: 28 }); })();
 
-/**
- * Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
- * Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
- * z `@konce-pt/angular/icons` lub zarejestruj własne przez `register()`.
- */
-class KptIconRegistry {
-    constructor() {
-        this.icons = new Map(Object.entries(KPT_ICONS));
-        this._version = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
-        /** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
-        this.version = this._version.asReadonly();
-    }
-    /**
-     * 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) {
-        for (const [name, svg] of Object.entries(toKptIconRecord(icons))) {
-            this.icons.set(name, sanitizeSvgFragment(svg));
-        }
-        this._version.update((v) => v + 1);
-    }
-    /** Zwraca wewnętrzny SVG ikony lub undefined. */
-    get(name) {
-        return this.icons.get(name);
-    }
-    has(name) {
-        return this.icons.has(name);
-    }
-    static { this.ɵfac = function KptIconRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconRegistry)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptIconRegistry, factory: KptIconRegistry.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconRegistry, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
-
-/**
- * Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
- * (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze
- * ([[KptIconRegistry]]) — wbudowany zestaw działa od razu, pełny zestaw dodaje
- * `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
- *
- * @example
- * <kpt-icon name="menu" />
- * <kpt-icon name="check" size="1.25rem" />
- */
-class KptIcon {
-    constructor() {
-        /** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
-        this.name = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        /** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z font-size. */
-        this.size = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.host = inject(ElementRef);
-        this.registry = inject(KptIconRegistry);
-        effect(() => {
-            this.registry.version(); // reaguj na późną rejestrację ikon
-            // Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
-            this.host.nativeElement.innerHTML = renderKptIconSvg(this.registry.get(this.name()));
-        });
-    }
-    static { this.ɵfac = function KptIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIcon)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIcon, selectors: [["kpt-icon"]], hostAttrs: ["aria-hidden", "true", 1, "kpt-icon-host"], hostVars: 2, hostBindings: function KptIcon_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵstyleProp("font-size", ctx.size() || null);
-        } }, inputs: { name: [1, "name"], size: [1, "size"] }, decls: 0, vars: 0, template: function KptIcon_Template(rf, ctx) { }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIcon, [{
-        type: Component,
-        args: [{ selector: 'kpt-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
-                    class: 'kpt-icon-host',
-                    'aria-hidden': 'true',
-                    '[style.font-size]': 'size() || null',
-                }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"] }]
-    }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIcon, { className: "KptIcon", filePath: "lib/icon/icon.component.ts", lineNumber: 26 }); })();
-
 function KptAvatar_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 1);
 } if (rf & 2) {
@@ -453,7 +562,7 @@ class KptAvatar {
     }], null, { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatar, { className: "KptAvatar", filePath: "lib/avatar/avatar.component.ts", lineNumber: 46 }); })();
 
-const _c0$G = ["*"];
+const _c0$H = ["*"];
 /**
  * Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
  *
@@ -485,7 +594,7 @@ class KptBadge {
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptBadge_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBadge)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBadge, selectors: [["kpt-badge"]], hostAttrs: [1, "kpt-badge-host"], inputs: { value: [1, "value"], variant: [1, "variant"], size: [1, "size"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$G, decls: 3, vars: 7, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBadge, selectors: [["kpt-badge"]], hostAttrs: [1, "kpt-badge-host"], inputs: { value: [1, "value"], variant: [1, "variant"], size: [1, "size"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$H, decls: 3, vars: 7, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
             i0.ɵɵdomElementStart(1, "span", 0);
@@ -578,7 +687,7 @@ class KptI18n {
         args: [{ providedIn: 'root' }]
     }], () => [], null); })();
 
-const _c0$F = ["*"];
+const _c0$G = ["*"];
 function KptSplitButton_ng_template_6_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 7);
 } }
@@ -720,7 +829,7 @@ class KptSplitButton {
         this.open.set(false);
     }
     static { this.ɵfac = function KptSplitButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSplitButton)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitButton, selectors: [["kpt-split-button"]], hostAttrs: [1, "kpt-split-button-host"], inputs: { variant: [1, "variant"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { primaryClick: "primaryClick", selected: "selected" }, ngContentSelectors: _c0$F, decls: 7, vars: 8, consts: [["origin", "cdkOverlayOrigin"], [1, "kpt-split-button"], ["type", "button", 1, "kpt-split-button__main", 3, "click", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-split-button__toggle", 3, "click", "disabled"], ["name", "chevron-down"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-split-button__panel"], ["role", "separator", 1, "kpt-split-button__separator"], ["role", "presentation", 1, "kpt-split-button__header"], ["type", "button", 1, "kpt-split-button__item", 3, "kpt-split-button__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-split-button__text"], [1, "kpt-split-button__label"], [1, "kpt-split-button__description"], ["type", "button", 1, "kpt-split-button__item", 3, "click", "disabled"], [1, "kpt-split-button__badge", 3, "value", "variant"]], template: function KptSplitButton_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitButton, selectors: [["kpt-split-button"]], hostAttrs: [1, "kpt-split-button-host"], inputs: { variant: [1, "variant"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { primaryClick: "primaryClick", selected: "selected" }, ngContentSelectors: _c0$G, decls: 7, vars: 8, consts: [["origin", "cdkOverlayOrigin"], [1, "kpt-split-button"], ["type", "button", 1, "kpt-split-button__main", 3, "click", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-split-button__toggle", 3, "click", "disabled"], ["name", "chevron-down"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-split-button__panel"], ["role", "separator", 1, "kpt-split-button__separator"], ["role", "presentation", 1, "kpt-split-button__header"], ["type", "button", 1, "kpt-split-button__item", 3, "kpt-split-button__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-split-button__text"], [1, "kpt-split-button__label"], [1, "kpt-split-button__description"], ["type", "button", 1, "kpt-split-button__item", 3, "click", "disabled"], [1, "kpt-split-button__badge", 3, "value", "variant"]], template: function KptSplitButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1)(1, "button", 2);
             i0.ɵɵlistener("click", function KptSplitButton_Template_button_click_1_listener() { return ctx.primaryClick.emit(); });
@@ -953,7 +1062,7 @@ function provideKptI18n(config = {}) {
  * dzięki czemu komponenty i `public-api.ts` nie musiały się zmieniać.
  */
 
-const _c0$E = ["*"];
+const _c0$F = ["*"];
 function KptChip_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -990,7 +1099,7 @@ class KptChip {
         this.i18n = inject(KptI18n);
     }
     static { this.ɵfac = function KptChip_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptChip)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChip, selectors: [["kpt-chip"]], hostAttrs: [1, "kpt-chip-host"], inputs: { variant: [1, "variant"], textTransform: [1, "textTransform"], removable: [1, "removable"], disabled: [1, "disabled"] }, outputs: { removed: "removed" }, ngContentSelectors: _c0$E, decls: 3, vars: 5, consts: [[1, "kpt-chip"], ["type", "button", 1, "kpt-chip__remove", 3, "disabled"], ["type", "button", 1, "kpt-chip__remove", 3, "click", "disabled"], ["name", "x"]], template: function KptChip_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChip, selectors: [["kpt-chip"]], hostAttrs: [1, "kpt-chip-host"], inputs: { variant: [1, "variant"], textTransform: [1, "textTransform"], removable: [1, "removable"], disabled: [1, "disabled"] }, outputs: { removed: "removed" }, ngContentSelectors: _c0$F, decls: 3, vars: 5, consts: [[1, "kpt-chip"], ["type", "button", 1, "kpt-chip__remove", 3, "disabled"], ["type", "button", 1, "kpt-chip__remove", 3, "click", "disabled"], ["name", "x"]], template: function KptChip_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "span", 0);
             i0.ɵɵprojection(1);
@@ -1001,7 +1110,7 @@ class KptChip {
             i0.ɵɵattribute("data-variant", ctx.variant())("data-text-transform", ctx.textTransform() === "none" ? null : ctx.textTransform());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.removable() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-primary) 14%, var(--%NS%kpt-color-surface));--%NS%_fg: var(--%NS%kpt-color-primary)}.kpt-chip[data-variant=success]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-success) 18%, transparent);--%NS%_fg: var(--%NS%kpt-color-success)}.kpt-chip[data-variant=danger]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-danger) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-danger)}.kpt-chip[data-variant=warning]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-warning) 20%, transparent);--%NS%_fg: var(--%NS%kpt-color-warning)}.kpt-chip[data-variant=info]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-info) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-info)}.kpt-chip[data-text-transform=capitalize]{text-transform:capitalize;font-size:var(--%NS%kpt-font-size-sm, .85rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=uppercase]{text-transform:uppercase;font-size:var(--%NS%kpt-font-size-sm, .85rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=lowercase]{text-transform:lowercase;font-size:var(--%NS%kpt-font-size-sm, .75rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--%NS%_bg: color-mix(in oklab, var(--%NS%kpt-color-primary) 14%, var(--%NS%kpt-color-surface));--%NS%_fg: var(--%NS%kpt-color-primary)}.kpt-chip[data-variant=success]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-success) 18%, transparent);--%NS%_fg: var(--%NS%kpt-color-success)}.kpt-chip[data-variant=danger]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-danger) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-danger)}.kpt-chip[data-variant=warning]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-warning) 20%, transparent);--%NS%_fg: var(--%NS%kpt-color-warning)}.kpt-chip[data-variant=info]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-info) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-info)}.kpt-chip[data-text-transform=capitalize]{text-transform:capitalize;font-size:var(--%NS%kpt-font-size-sm, .85rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=uppercase]{text-transform:uppercase;font-size:var(--%NS%kpt-font-size-sm, .85rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=lowercase]{text-transform:lowercase;font-size:var(--%NS%kpt-font-size-sm, .75rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptChip, [{
         type: Component,
@@ -1023,7 +1132,7 @@ class KptChip {
         ><kpt-icon name="x" /></button>
       }
     </span>
-  `, host: { class: 'kpt-chip-host' }, styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--_bg: color-mix(in oklch, var(--kpt-color-primary) 14%, var(--kpt-color-surface));--_fg: var(--kpt-color-primary)}.kpt-chip[data-variant=success]{--_bg: color-mix(in oklch, var(--kpt-color-success) 18%, transparent);--_fg: var(--kpt-color-success)}.kpt-chip[data-variant=danger]{--_bg: color-mix(in oklch, var(--kpt-color-danger) 16%, transparent);--_fg: var(--kpt-color-danger)}.kpt-chip[data-variant=warning]{--_bg: color-mix(in oklch, var(--kpt-color-warning) 20%, transparent);--_fg: var(--kpt-color-warning)}.kpt-chip[data-variant=info]{--_bg: color-mix(in oklch, var(--kpt-color-info) 16%, transparent);--_fg: var(--kpt-color-info)}.kpt-chip[data-text-transform=capitalize]{text-transform:capitalize;font-size:var(--kpt-font-size-sm, .85rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=uppercase]{text-transform:uppercase;font-size:var(--kpt-font-size-sm, .85rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=lowercase]{text-transform:lowercase;font-size:var(--kpt-font-size-sm, .75rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"] }]
+  `, host: { class: 'kpt-chip-host' }, styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--_bg: color-mix(in oklab, var(--kpt-color-primary) 14%, var(--kpt-color-surface));--_fg: var(--kpt-color-primary)}.kpt-chip[data-variant=success]{--_bg: color-mix(in oklch, var(--kpt-color-success) 18%, transparent);--_fg: var(--kpt-color-success)}.kpt-chip[data-variant=danger]{--_bg: color-mix(in oklch, var(--kpt-color-danger) 16%, transparent);--_fg: var(--kpt-color-danger)}.kpt-chip[data-variant=warning]{--_bg: color-mix(in oklch, var(--kpt-color-warning) 20%, transparent);--_fg: var(--kpt-color-warning)}.kpt-chip[data-variant=info]{--_bg: color-mix(in oklch, var(--kpt-color-info) 16%, transparent);--_fg: var(--kpt-color-info)}.kpt-chip[data-text-transform=capitalize]{text-transform:capitalize;font-size:var(--kpt-font-size-sm, .85rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=uppercase]{text-transform:uppercase;font-size:var(--kpt-font-size-sm, .85rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=lowercase]{text-transform:lowercase;font-size:var(--kpt-font-size-sm, .75rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], textTransform: [{ type: i0.Input, args: [{ isSignal: true, alias: "textTransform", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptChip, { className: "KptChip", filePath: "lib/chip/chip.component.ts", lineNumber: 45 }); })();
 
@@ -1059,6 +1168,7 @@ class KptSpinner {
     }], null, { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSpinner, { className: "KptSpinner", filePath: "lib/spinner/spinner.component.ts", lineNumber: 19 }); })();
 
+const _c0$E = ["*"];
 function KptProgress_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵdomElementStart(0, "svg", 2);
@@ -1066,89 +1176,168 @@ function KptProgress_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("kpt-progress--indeterminate", ctx_r0.value() == null);
-    i0.ɵɵattribute("data-variant", ctx_r0.variant())("width", ctx_r0.diameter())("height", ctx_r0.diameter())("aria-valuenow", ctx_r0.value());
+    i0.ɵɵclassProp("kpt-progress--indeterminate", ctx_r0.indeterminate());
+    i0.ɵɵattribute("width", ctx_r0.diameter())("height", ctx_r0.diameter())("aria-label", ctx_r0.ariaLabel())("aria-valuemin", ctx_r0.min())("aria-valuemax", ctx_r0.max())("aria-valuenow", ctx_r0.indeterminate() ? null : ctx_r0.value())("aria-valuetext", ctx_r0.ariaValueText());
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("stroke-dasharray", ctx_r0.circumference)("stroke-dashoffset", ctx_r0.offset());
+    i0.ɵɵstyleProp("stroke-dasharray", ctx_r0.indeterminate() ? null : ctx_r0.circumference)("stroke-dashoffset", ctx_r0.indeterminate() ? null : ctx_r0.offset());
+} }
+function KptProgress_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.label());
+} }
+function KptProgress_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "div", 9);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("width", ctx_r0.bufferRatio() * 100, "%");
 } }
 function KptProgress_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "div", 1);
-    i0.ɵɵdomElement(1, "div", 5);
+    i0.ɵɵconditionalCreate(0, KptProgress_Conditional_1_Conditional_0_Template, 2, 1, "span", 5);
+    i0.ɵɵdomElementStart(1, "div", 6);
+    i0.ɵɵconditionalCreate(2, KptProgress_Conditional_1_Conditional_2_Template, 1, 2, "div", 7);
+    i0.ɵɵdomElement(3, "div", 8);
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵattribute("data-variant", ctx_r0.variant())("aria-valuenow", ctx_r0.value());
+    i0.ɵɵconditional(ctx_r0.label() ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", ctx_r0.ariaLabel())("aria-valuemin", ctx_r0.min())("aria-valuemax", ctx_r0.max())("aria-valuenow", ctx_r0.indeterminate() ? null : ctx_r0.value())("aria-valuetext", ctx_r0.ariaValueText());
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r0.value() ?? 0, "%");
-    i0.ɵɵclassProp("kpt-progress--indeterminate", ctx_r0.value() == null);
+    i0.ɵɵconditional(ctx_r0.bufferValue() != null && !ctx_r0.indeterminate() ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r0.indeterminate() ? null : ctx_r0.ratio() * 100, "%");
+    i0.ɵɵclassProp("kpt-progress--indeterminate", ctx_r0.indeterminate());
 } }
+function KptProgress_Conditional_2_ProjectionFallback_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate(ctx_r0.valueText());
+} }
+function KptProgress_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 1);
+    i0.ɵɵprojection(1, 0, null, KptProgress_Conditional_2_ProjectionFallback_1_Template, 1, 1);
+    i0.ɵɵdomElementEnd();
+} }
+/** Promień okręgu w viewBox 0 0 40 40 — obwód liczymy z niego, nie ze średnicy w pikselach. */
+const RADIUS = 16;
 /**
- * Wskaźnik postępu — liniowy lub kołowy, określony (0–100) lub nieokreślony (`value` = null).
+ * Wskaźnik postępu — liniowy lub kołowy, określony (`min`–`max`) lub nieokreślony (`value` = null).
+ *
+ * Etykietę wartości włącza `showValue`; rzutowana treść zastępuje sformatowaną wartość,
+ * więc w środku koła można pokazać cokolwiek.
  *
  * @example
  * <kpt-progress [value]="60" />
- * <kpt-progress type="circular" [value]="75" variant="success" />
+ * <kpt-progress [value]="80" label="Ładowanie…" showValue />
+ * <kpt-progress [value]="152" [max]="160" showValue valueFormat="fraction" labelPosition="bottom" />
+ * <kpt-progress [value]="38" [bufferValue]="62" />
+ * <kpt-progress type="circular" [value]="75" variant="success" showValue />
  * <kpt-progress [value]="null" />  <!-- indeterminate -->
  */
 class KptProgress {
     constructor() {
-        /** 0–100 lub null = nieokreślony. */
+        /** Wartość w skali `min`–`max` albo null = postęp nieokreślony. */
         this.value = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.min = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
         this.variant = input('primary', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         this.type = input('linear', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Grubość toru: `sm` 0.25rem, `md` 0.5rem, `lg` 0.75rem. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Średnica wariantu kołowego w pikselach. */
         this.diameter = input(40, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
-        this.circumference = 2 * Math.PI * 16;
-        this.offset = computed(() => {
-            const v = this.value();
-            if (v == null)
-                return this.circumference * 0.75;
-            return this.circumference * (1 - Math.min(100, Math.max(0, v)) / 100);
-        }, /* @ts-ignore */
+        /** Postęp buforowania — drugi, przygaszony pasek pod głównym (tylko liniowy). */
+        this.bufferValue = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bufferValue" }] : /* istanbul ignore next */ []));
+        /** Włącza obszar etykiety wartości — razem z nim renderuje się rzutowana treść. */
+        this.showValue = input(false, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.valueFormat = input('percent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+        /** Tekst opisowy obok paska; służy też za `aria-label`. */
+        this.label = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.labelPosition = input('top', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        this.i18n = inject(KptI18n);
+        this.circumference = 2 * Math.PI * RADIUS;
+        this.indeterminate = computed(() => this.value() == null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        /** Ułamek 0–1. Odporny na `max` ≤ `min` i na wartości spoza zakresu. */
+        this.ratio = computed(() => this.toRatio(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+        this.percent = computed(() => Math.round(this.ratio() * 100), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+        /** Bufor nigdy nie cofa się za pasek główny — inaczej wyglądałby jak błąd renderowania. */
+        this.bufferRatio = computed(() => Math.max(this.ratio(), this.toRatio(this.bufferValue())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bufferRatio" }] : /* istanbul ignore next */ []));
+        this.offset = computed(() => this.circumference * (1 - this.ratio()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        /** Tekst widoczny w etykiecie; pusty dla postępu nieokreślonego i `valueFormat="none"`. */
+        this.valueText = computed(() => {
+            if (this.indeterminate() || this.valueFormat() === 'none')
+                return '';
+            if (this.valueFormat() === 'fraction')
+                return this.fractionText();
+            return this.i18n.t('progress.percent', { value: this.percent() });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+        /**
+         * Czytnik ekranu domyślnie odczytuje `aria-valuenow` jako procent, więc przy formacie „ile z ilu"
+         * podajemy mu ten sam napis, który widzi użytkownik.
+         */
+        this.ariaValueText = computed(() => this.indeterminate() || this.valueFormat() !== 'fraction' ? null : this.fractionText(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueText" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => this.label() ?? this.i18n.t(this.indeterminate() ? 'progress.loading' : 'progress.label'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    toRatio(value) {
+        if (value == null)
+            return 0;
+        const span = this.max() - this.min();
+        if (span <= 0)
+            return 0;
+        return Math.min(1, Math.max(0, (value - this.min()) / span));
+    }
+    fractionText() {
+        return this.i18n.t('progress.fraction', { value: this.value() ?? 0, max: this.max() });
     }
     static { this.ɵfac = function KptProgress_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptProgress)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptProgress, selectors: [["kpt-progress"]], hostAttrs: [1, "kpt-progress-host"], inputs: { value: [1, "value"], variant: [1, "variant"], type: [1, "type"], diameter: [1, "diameter"] }, decls: 2, vars: 1, consts: [["viewBox", "0 0 40 40", "role", "progressbar", 1, "kpt-progress__circular", 3, "kpt-progress--indeterminate"], ["role", "progressbar", 1, "kpt-progress__linear"], ["viewBox", "0 0 40 40", "role", "progressbar", 1, "kpt-progress__circular"], ["cx", "20", "cy", "20", "r", "16", 1, "kpt-progress__track"], ["cx", "20", "cy", "20", "r", "16", 1, "kpt-progress__bar"], [1, "kpt-progress__bar"]], template: function KptProgress_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, KptProgress_Conditional_0_Template, 3, 10, ":svg:svg", 0)(1, KptProgress_Conditional_1_Template, 2, 6, "div", 1);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptProgress, selectors: [["kpt-progress"]], hostAttrs: [1, "kpt-progress-host"], hostVars: 4, hostBindings: function KptProgress_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-type", ctx.type())("data-size", ctx.size())("data-variant", ctx.variant())("data-label-position", ctx.labelPosition());
+        } }, inputs: { value: [1, "value"], min: [1, "min"], max: [1, "max"], variant: [1, "variant"], type: [1, "type"], size: [1, "size"], diameter: [1, "diameter"], bufferValue: [1, "bufferValue"], showValue: [1, "showValue"], valueFormat: [1, "valueFormat"], label: [1, "label"], labelPosition: [1, "labelPosition"] }, ngContentSelectors: _c0$E, decls: 3, vars: 2, consts: [["viewBox", "0 0 40 40", "role", "progressbar", 1, "kpt-progress__circular", 3, "kpt-progress--indeterminate"], ["aria-hidden", "true", 1, "kpt-progress__value"], ["viewBox", "0 0 40 40", "role", "progressbar", 1, "kpt-progress__circular"], ["cx", "20", "cy", "20", "r", "16", 1, "kpt-progress__track"], ["cx", "20", "cy", "20", "r", "16", 1, "kpt-progress__bar"], [1, "kpt-progress__label"], ["role", "progressbar", 1, "kpt-progress__linear"], [1, "kpt-progress__buffer", 3, "width"], [1, "kpt-progress__bar"], [1, "kpt-progress__buffer"]], template: function KptProgress_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, KptProgress_Conditional_0_Template, 3, 13, ":svg:svg", 0)(1, KptProgress_Conditional_1_Template, 4, 11);
+            i0.ɵɵconditionalCreate(2, KptProgress_Conditional_2_Template, 3, 0, "span", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.type() === "circular" ? 0 : 1);
-        } }, styles: ["@layer kpt.components{.kpt-progress-host{display:block;--%NS%_color: var(--%NS%kpt-color-primary)}.kpt-progress__linear[data-variant=success],.kpt-progress__circular[data-variant=success]{--%NS%_color: var(--%NS%kpt-color-success)}.kpt-progress__linear[data-variant=danger],.kpt-progress__circular[data-variant=danger]{--%NS%_color: var(--%NS%kpt-color-danger)}.kpt-progress__linear[data-variant=warning],.kpt-progress__circular[data-variant=warning]{--%NS%_color: var(--%NS%kpt-color-warning)}.kpt-progress__linear[data-variant=info],.kpt-progress__circular[data-variant=info]{--%NS%_color: var(--%NS%kpt-color-info)}.kpt-progress__linear{height:.5rem;width:100%;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-surface-variant);overflow:hidden}.kpt-progress__linear .kpt-progress__bar{height:100%;background:var(--%NS%_color);border-radius:inherit;transition:width var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-progress__linear .kpt-progress--indeterminate{width:40%!important;animation:kpt-progress-slide 1.2s ease-in-out infinite}.kpt-progress__circular{transform:rotate(-90deg)}.kpt-progress__circular .kpt-progress__track{fill:none;stroke:var(--%NS%kpt-color-surface-variant);stroke-width:4}.kpt-progress__circular .kpt-progress__bar{fill:none;stroke:var(--%NS%_color);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-progress__circular.kpt-progress--indeterminate{animation:kpt-spinner-rotate 1s linear infinite}@keyframes kpt-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}}\n"], encapsulation: 2 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showValue() ? 2 : -1);
+        } }, styles: ["@layer kpt.components{.kpt-progress-host{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--%NS%kpt-progress-gap, .5rem);row-gap:.25rem;--%NS%_color: var(--%NS%kpt-color-primary);--%NS%_thickness: var(--%NS%kpt-progress-thickness-md, .5rem);--%NS%_stroke: 4}.kpt-progress-host[data-variant=success]{--%NS%_color: var(--%NS%kpt-color-success)}.kpt-progress-host[data-variant=danger]{--%NS%_color: var(--%NS%kpt-color-danger)}.kpt-progress-host[data-variant=warning]{--%NS%_color: var(--%NS%kpt-color-warning)}.kpt-progress-host[data-variant=info]{--%NS%_color: var(--%NS%kpt-color-info)}.kpt-progress-host[data-size=sm]{--%NS%_thickness: var(--%NS%kpt-progress-thickness-sm, .25rem);--%NS%_stroke: 3}.kpt-progress-host[data-size=lg]{--%NS%_thickness: var(--%NS%kpt-progress-thickness-lg, .75rem);--%NS%_stroke: 6}.kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__label{order:1}.kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__value{order:2;margin-inline-start:auto}.kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__linear{order:3;flex:1 1 100%}.kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__linear{order:1;flex:1 1 100%}.kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__label{order:2}.kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__value{order:3;margin-inline-start:auto}.kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__label{order:1;flex:1 1 100%}.kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__linear{order:2;flex:1 1 0}.kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__value{order:3;flex:0 0 auto}.kpt-progress__label{color:var(--%NS%kpt-progress-label-fg, var(--%NS%kpt-color-on-surface-muted));font-size:var(--%NS%kpt-font-size-sm)}.kpt-progress__value{color:var(--%NS%kpt-progress-value-fg, var(--%NS%kpt-color-on-surface));font-size:var(--%NS%kpt-font-size-sm);font-variant-numeric:tabular-nums;text-align:center;line-height:1.2}.kpt-progress__linear{position:relative;height:var(--%NS%_thickness);width:100%;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-progress-track-bg, var(--%NS%kpt-color-surface-variant));overflow:hidden}.kpt-progress__linear .kpt-progress__buffer,.kpt-progress__linear .kpt-progress__bar{position:absolute;inset-block:0;inset-inline-start:0;border-radius:inherit;background:var(--%NS%_color);transition:width var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-progress__linear .kpt-progress__buffer{opacity:var(--%NS%kpt-progress-buffer-opacity, .32)}.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate{width:40%;transition:none;animation:kpt-progress-slide 1.6s var(--%NS%kpt-motion-easing-standard, ease-in-out) infinite}.kpt-progress-host[data-type=circular]{display:inline-grid;place-items:center;column-gap:0;row-gap:0}.kpt-progress-host[data-type=circular]>*{grid-area:1/1}.kpt-progress__circular{transform:rotate(-90deg)}.kpt-progress__circular .kpt-progress__track{fill:none;stroke:var(--%NS%kpt-progress-track-bg, var(--%NS%kpt-color-surface-variant));stroke-width:var(--%NS%_stroke)}.kpt-progress__circular .kpt-progress__bar{fill:none;stroke:var(--%NS%_color);stroke-width:var(--%NS%_stroke);stroke-linecap:round;transition:stroke-dashoffset var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-progress__circular.kpt-progress--indeterminate{animation:kpt-progress-rotate 1.6s linear infinite}.kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar{transition:none;animation:kpt-progress-dash 1.4s ease-in-out infinite}@keyframes kpt-progress-slide{0%{transform:translate(-110%) scaleX(.6)}50%{transform:translate(90%) scaleX(1.6)}to{transform:translate(280%) scaleX(.6)}}@keyframes kpt-progress-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes kpt-progress-dash{0%{stroke-dasharray:1 100.5;stroke-dashoffset:0}50%{stroke-dasharray:70 100.5;stroke-dashoffset:-15}to{stroke-dasharray:1 100.5;stroke-dashoffset:-99}}@media(prefers-reduced-motion:reduce){.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,.kpt-progress__circular.kpt-progress--indeterminate,.kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar{animation-duration:3.2s}.kpt-progress__linear .kpt-progress__buffer,.kpt-progress__linear .kpt-progress__bar,.kpt-progress__circular .kpt-progress__bar{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptProgress, [{
         type: Component,
-        args: [{ selector: 'kpt-progress', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    @if (type() === 'circular') {
-      <svg
-        class="kpt-progress__circular"
-        [class.kpt-progress--indeterminate]="value() == null"
-        [attr.data-variant]="variant()"
-        [attr.width]="diameter()"
-        [attr.height]="diameter()"
-        viewBox="0 0 40 40"
-        role="progressbar"
-        [attr.aria-valuenow]="value()"
-      >
-        <circle class="kpt-progress__track" cx="20" cy="20" r="16" />
-        <circle
-          class="kpt-progress__bar"
-          cx="20"
-          cy="20"
-          r="16"
-          [style.stroke-dasharray]="circumference"
-          [style.stroke-dashoffset]="offset()"
-        />
-      </svg>
-    } @else {
-      <div class="kpt-progress__linear" [attr.data-variant]="variant()" role="progressbar" [attr.aria-valuenow]="value()">
-        <div class="kpt-progress__bar" [class.kpt-progress--indeterminate]="value() == null" [style.width.%]="value() ?? 0"></div>
-      </div>
-    }
-  `, host: { class: 'kpt-progress-host' }, styles: ["@layer kpt.components{.kpt-progress-host{display:block;--_color: var(--kpt-color-primary)}.kpt-progress__linear[data-variant=success],.kpt-progress__circular[data-variant=success]{--_color: var(--kpt-color-success)}.kpt-progress__linear[data-variant=danger],.kpt-progress__circular[data-variant=danger]{--_color: var(--kpt-color-danger)}.kpt-progress__linear[data-variant=warning],.kpt-progress__circular[data-variant=warning]{--_color: var(--kpt-color-warning)}.kpt-progress__linear[data-variant=info],.kpt-progress__circular[data-variant=info]{--_color: var(--kpt-color-info)}.kpt-progress__linear{height:.5rem;width:100%;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant);overflow:hidden}.kpt-progress__linear .kpt-progress__bar{height:100%;background:var(--_color);border-radius:inherit;transition:width var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-progress__linear .kpt-progress--indeterminate{width:40%!important;animation:kpt-progress-slide 1.2s ease-in-out infinite}.kpt-progress__circular{transform:rotate(-90deg)}.kpt-progress__circular .kpt-progress__track{fill:none;stroke:var(--kpt-color-surface-variant);stroke-width:4}.kpt-progress__circular .kpt-progress__bar{fill:none;stroke:var(--_color);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-progress__circular.kpt-progress--indeterminate{animation:kpt-spinner-rotate 1s linear infinite}@keyframes kpt-progress-slide{0%{transform:translate(-100%)}to{transform:translate(350%)}}}\n"] }]
-    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptProgress, { className: "KptProgress", filePath: "lib/progress/progress.component.ts", lineNumber: 48 }); })();
+        args: [{ selector: 'kpt-progress', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                    class: 'kpt-progress-host',
+                    '[attr.data-type]': 'type()',
+                    '[attr.data-size]': 'size()',
+                    '[attr.data-variant]': 'variant()',
+                    '[attr.data-label-position]': 'labelPosition()',
+                }, template: "@if (type() === 'circular') {\n  <svg\n    class=\"kpt-progress__circular\"\n    [class.kpt-progress--indeterminate]=\"indeterminate()\"\n    [attr.width]=\"diameter()\"\n    [attr.height]=\"diameter()\"\n    viewBox=\"0 0 40 40\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : value()\"\n    [attr.aria-valuetext]=\"ariaValueText()\"\n  >\n    <circle class=\"kpt-progress__track\" cx=\"20\" cy=\"20\" r=\"16\" />\n    <circle\n      class=\"kpt-progress__bar\"\n      cx=\"20\"\n      cy=\"20\"\n      r=\"16\"\n      [style.stroke-dasharray]=\"indeterminate() ? null : circumference\"\n      [style.stroke-dashoffset]=\"indeterminate() ? null : offset()\"\n    />\n  </svg>\n} @else {\n  @if (label()) {\n    <span class=\"kpt-progress__label\">{{ label() }}</span>\n  }\n  <div\n    class=\"kpt-progress__linear\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"max()\"\n    [attr.aria-valuenow]=\"indeterminate() ? null : value()\"\n    [attr.aria-valuetext]=\"ariaValueText()\"\n  >\n    @if (bufferValue() != null && !indeterminate()) {\n      <div class=\"kpt-progress__buffer\" [style.width.%]=\"bufferRatio() * 100\"></div>\n    }\n    <div\n      class=\"kpt-progress__bar\"\n      [class.kpt-progress--indeterminate]=\"indeterminate()\"\n      [style.width.%]=\"indeterminate() ? null : ratio() * 100\"\n    ></div>\n  </div>\n}\n@if (showValue()) {\n  <span class=\"kpt-progress__value\" aria-hidden=\"true\"><ng-content>{{ valueText() }}</ng-content></span>\n}\n", styles: ["@layer kpt.components{.kpt-progress-host{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--kpt-progress-gap, .5rem);row-gap:.25rem;--_color: var(--kpt-color-primary);--_thickness: var(--kpt-progress-thickness-md, .5rem);--_stroke: 4}.kpt-progress-host[data-variant=success]{--_color: var(--kpt-color-success)}.kpt-progress-host[data-variant=danger]{--_color: var(--kpt-color-danger)}.kpt-progress-host[data-variant=warning]{--_color: var(--kpt-color-warning)}.kpt-progress-host[data-variant=info]{--_color: var(--kpt-color-info)}.kpt-progress-host[data-size=sm]{--_thickness: var(--kpt-progress-thickness-sm, .25rem);--_stroke: 3}.kpt-progress-host[data-size=lg]{--_thickness: var(--kpt-progress-thickness-lg, .75rem);--_stroke: 6}.kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__label{order:1}.kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__value{order:2;margin-inline-start:auto}.kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__linear{order:3;flex:1 1 100%}.kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__linear{order:1;flex:1 1 100%}.kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__label{order:2}.kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__value{order:3;margin-inline-start:auto}.kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__label{order:1;flex:1 1 100%}.kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__linear{order:2;flex:1 1 0}.kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__value{order:3;flex:0 0 auto}.kpt-progress__label{color:var(--kpt-progress-label-fg, var(--kpt-color-on-surface-muted));font-size:var(--kpt-font-size-sm)}.kpt-progress__value{color:var(--kpt-progress-value-fg, var(--kpt-color-on-surface));font-size:var(--kpt-font-size-sm);font-variant-numeric:tabular-nums;text-align:center;line-height:1.2}.kpt-progress__linear{position:relative;height:var(--_thickness);width:100%;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-progress-track-bg, var(--kpt-color-surface-variant));overflow:hidden}.kpt-progress__linear .kpt-progress__buffer,.kpt-progress__linear .kpt-progress__bar{position:absolute;inset-block:0;inset-inline-start:0;border-radius:inherit;background:var(--_color);transition:width var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-progress__linear .kpt-progress__buffer{opacity:var(--kpt-progress-buffer-opacity, .32)}.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate{width:40%;transition:none;animation:kpt-progress-slide 1.6s var(--kpt-motion-easing-standard, ease-in-out) infinite}.kpt-progress-host[data-type=circular]{display:inline-grid;place-items:center;column-gap:0;row-gap:0}.kpt-progress-host[data-type=circular]>*{grid-area:1/1}.kpt-progress__circular{transform:rotate(-90deg)}.kpt-progress__circular .kpt-progress__track{fill:none;stroke:var(--kpt-progress-track-bg, var(--kpt-color-surface-variant));stroke-width:var(--_stroke)}.kpt-progress__circular .kpt-progress__bar{fill:none;stroke:var(--_color);stroke-width:var(--_stroke);stroke-linecap:round;transition:stroke-dashoffset var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-progress__circular.kpt-progress--indeterminate{animation:kpt-progress-rotate 1.6s linear infinite}.kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar{transition:none;animation:kpt-progress-dash 1.4s ease-in-out infinite}@keyframes kpt-progress-slide{0%{transform:translate(-110%) scaleX(.6)}50%{transform:translate(90%) scaleX(1.6)}to{transform:translate(280%) scaleX(.6)}}@keyframes kpt-progress-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes kpt-progress-dash{0%{stroke-dasharray:1 100.5;stroke-dashoffset:0}50%{stroke-dasharray:70 100.5;stroke-dashoffset:-15}to{stroke-dasharray:1 100.5;stroke-dashoffset:-99}}@media(prefers-reduced-motion:reduce){.kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,.kpt-progress__circular.kpt-progress--indeterminate,.kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar{animation-duration:3.2s}.kpt-progress__linear .kpt-progress__buffer,.kpt-progress__linear .kpt-progress__bar,.kpt-progress__circular .kpt-progress__bar{transition:none}}}\n"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], bufferValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferValue", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptProgress, { className: "KptProgress", filePath: "lib/progress/progress.component.ts", lineNumber: 51 }); })();
 
 function KptSkeleton_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElement(0, "span", 2);
@@ -1197,7 +1386,7 @@ class KptSkeleton {
             i0.ɵɵconditionalCreate(0, KptSkeleton_Conditional_0_Template, 2, 0)(1, KptSkeleton_Conditional_1_Template, 1, 5, "span", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.variant() === "text" ? 0 : 1);
-        } }, styles: ["@layer kpt.components{.kpt-skeleton-host{display:block}.kpt-skeleton{display:block;background:linear-gradient(90deg,var(--%NS%kpt-color-surface-variant) 25%,color-mix(in oklch,var(--%NS%kpt-color-surface-variant) 60%,var(--%NS%kpt-color-surface)) 50%,var(--%NS%kpt-color-surface-variant) 75%);background-size:200% 100%;border-radius:var(--%NS%kpt-radius-md, .5rem);animation:kpt-skeleton-shimmer 1.4s ease-in-out infinite}.kpt-skeleton--text{height:.85rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);margin-block:.3rem}.kpt-skeleton[data-variant=circle]{border-radius:50%}@keyframes kpt-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.kpt-skeleton{animation:none}}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-skeleton-host{display:block}.kpt-skeleton{display:block;background:linear-gradient(90deg,var(--%NS%kpt-color-surface-variant) 25%,color-mix(in oklab,var(--%NS%kpt-color-surface-variant) 60%,var(--%NS%kpt-color-surface)) 50%,var(--%NS%kpt-color-surface-variant) 75%);background-size:200% 100%;border-radius:var(--%NS%kpt-radius-md, .5rem);animation:kpt-skeleton-shimmer 1.4s ease-in-out infinite}.kpt-skeleton--text{height:.85rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);margin-block:.3rem}.kpt-skeleton[data-variant=circle]{border-radius:50%}@keyframes kpt-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.kpt-skeleton{animation:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSkeleton, [{
         type: Component,
@@ -1209,7 +1398,7 @@ class KptSkeleton {
     } @else {
       <span class="kpt-skeleton" [attr.data-variant]="variant()" [style.width]="width()" [style.height]="height()"></span>
     }
-  `, host: { class: 'kpt-skeleton-host', 'aria-hidden': 'true' }, styles: ["@layer kpt.components{.kpt-skeleton-host{display:block}.kpt-skeleton{display:block;background:linear-gradient(90deg,var(--kpt-color-surface-variant) 25%,color-mix(in oklch,var(--kpt-color-surface-variant) 60%,var(--kpt-color-surface)) 50%,var(--kpt-color-surface-variant) 75%);background-size:200% 100%;border-radius:var(--kpt-radius-md, .5rem);animation:kpt-skeleton-shimmer 1.4s ease-in-out infinite}.kpt-skeleton--text{height:.85rem;border-radius:var(--kpt-radius-sm, .25rem);margin-block:.3rem}.kpt-skeleton[data-variant=circle]{border-radius:50%}@keyframes kpt-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.kpt-skeleton{animation:none}}}\n"] }]
+  `, host: { class: 'kpt-skeleton-host', 'aria-hidden': 'true' }, styles: ["@layer kpt.components{.kpt-skeleton-host{display:block}.kpt-skeleton{display:block;background:linear-gradient(90deg,var(--kpt-color-surface-variant) 25%,color-mix(in oklab,var(--kpt-color-surface-variant) 60%,var(--kpt-color-surface)) 50%,var(--kpt-color-surface-variant) 75%);background-size:200% 100%;border-radius:var(--kpt-radius-md, .5rem);animation:kpt-skeleton-shimmer 1.4s ease-in-out infinite}.kpt-skeleton--text{height:.85rem;border-radius:var(--kpt-radius-sm, .25rem);margin-block:.3rem}.kpt-skeleton[data-variant=circle]{border-radius:50%}@keyframes kpt-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.kpt-skeleton{animation:none}}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSkeleton, { className: "KptSkeleton", filePath: "lib/skeleton/skeleton.component.ts", lineNumber: 29 }); })();
 
@@ -5457,7 +5646,7 @@ class KptFileUpload {
             i0.ɵɵconditional(ctx.accept() ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.value().length ? 6 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--%NS%kpt-space-6, 1.5rem);border:2px dashed var(--%NS%kpt-color-border-strong);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%kpt-color-primary) 6%,var(--%NS%kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--%NS%kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__file .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--%NS%kpt-color-danger)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--%NS%kpt-space-6, 1.5rem);border:2px dashed var(--%NS%kpt-color-border-strong);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--%NS%kpt-color-primary);background:color-mix(in oklab,var(--%NS%kpt-color-primary) 6%,var(--%NS%kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--%NS%kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-file-upload__file .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--%NS%kpt-color-danger)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFileUpload, [{
         type: Component,
@@ -5489,7 +5678,7 @@ class KptFileUpload {
         }
       </ul>
     }
-  `, host: { class: 'kpt-file-upload-host' }, styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--kpt-space-6, 1.5rem);border:2px dashed var(--kpt-color-border-strong);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 6%,var(--kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__file .kpt-icon-host{color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--kpt-color-danger)}}\n"] }]
+  `, host: { class: 'kpt-file-upload-host' }, styles: ["@layer kpt.components{.kpt-file-upload-host{display:block}.kpt-file-upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:var(--kpt-space-6, 1.5rem);border:2px dashed var(--kpt-color-border-strong);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);cursor:pointer;text-align:center;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-file-upload__zone:hover:not(.is-disabled),.kpt-file-upload__zone.is-dragover{border-color:var(--kpt-color-primary);background:color-mix(in oklab,var(--kpt-color-primary) 6%,var(--kpt-color-surface))}.kpt-file-upload__zone.is-disabled{opacity:.6;cursor:not-allowed}.kpt-file-upload__icon{font-size:1.75rem;color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__text{font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__text strong{color:var(--kpt-color-primary)}.kpt-file-upload__hint{font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.4rem}.kpt-file-upload__file{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.4rem .6rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-file-upload__file .kpt-icon-host{color:var(--kpt-color-on-surface-muted)}.kpt-file-upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-file-upload__size{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-file-upload__remove{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-file-upload__remove:hover{color:var(--kpt-color-danger)}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFileUpload, { className: "KptFileUpload", filePath: "lib/file-upload/file-upload.component.ts", lineNumber: 49 }); })();
 
@@ -7762,7 +7951,7 @@ class KptAlert {
             i0.ɵɵconditional(ctx.title() ? 3 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.dismissible() ? 6 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-alert{--%NS%_accent: var(--%NS%kpt-color-info);display:flex;align-items:flex-start;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-4, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--%NS%_accent) 35%,transparent);border-inline-start:3px solid var(--%NS%_accent);border-radius:var(--%NS%kpt-radius-md, .5rem);background:color-mix(in oklch,var(--%NS%_accent) 10%,var(--%NS%kpt-color-surface));color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-alert[data-variant=success]{--%NS%_accent: var(--%NS%kpt-color-success)}.kpt-alert[data-variant=warning]{--%NS%_accent: var(--%NS%kpt-color-warning)}.kpt-alert[data-variant=danger]{--%NS%_accent: var(--%NS%kpt-color-danger)}.kpt-alert__icon{color:var(--%NS%_accent);font-weight:700;line-height:1.5}.kpt-alert__content{flex:1;min-width:0}.kpt-alert__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);margin-bottom:.15rem}.kpt-alert__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-alert__close:hover{color:var(--%NS%kpt-color-on-surface)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-alert{--%NS%_accent: var(--%NS%kpt-color-info);display:flex;align-items:flex-start;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-4, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--%NS%_accent) 35%,transparent);border-inline-start:3px solid var(--%NS%_accent);border-radius:var(--%NS%kpt-radius-md, .5rem);background:color-mix(in oklab,var(--%NS%_accent) 10%,var(--%NS%kpt-color-surface));color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-alert[data-variant=success]{--%NS%_accent: var(--%NS%kpt-color-success)}.kpt-alert[data-variant=warning]{--%NS%_accent: var(--%NS%kpt-color-warning)}.kpt-alert[data-variant=danger]{--%NS%_accent: var(--%NS%kpt-color-danger)}.kpt-alert__icon{color:var(--%NS%_accent);font-weight:700;line-height:1.5}.kpt-alert__content{flex:1;min-width:0}.kpt-alert__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);margin-bottom:.15rem}.kpt-alert__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-alert__close:hover{color:var(--%NS%kpt-color-on-surface)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAlert, [{
         type: Component,
@@ -7779,7 +7968,7 @@ class KptAlert {
         <button class="kpt-alert__close" type="button" (click)="dismiss()" [attr.aria-label]="i18n.t('common.close')"><kpt-icon name="x" /></button>
       }
     </div>
-  `, host: { class: 'kpt-alert-host', '[hidden]': '!visible()' }, styles: ["@layer kpt.components{.kpt-alert{--_accent: var(--kpt-color-info);display:flex;align-items:flex-start;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border:var(--kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--_accent) 35%,transparent);border-inline-start:3px solid var(--_accent);border-radius:var(--kpt-radius-md, .5rem);background:color-mix(in oklch,var(--_accent) 10%,var(--kpt-color-surface));color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-alert[data-variant=success]{--_accent: var(--kpt-color-success)}.kpt-alert[data-variant=warning]{--_accent: var(--kpt-color-warning)}.kpt-alert[data-variant=danger]{--_accent: var(--kpt-color-danger)}.kpt-alert__icon{color:var(--_accent);font-weight:700;line-height:1.5}.kpt-alert__content{flex:1;min-width:0}.kpt-alert__title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:.15rem}.kpt-alert__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-alert__close:hover{color:var(--kpt-color-on-surface)}}\n"] }]
+  `, host: { class: 'kpt-alert-host', '[hidden]': '!visible()' }, styles: ["@layer kpt.components{.kpt-alert{--_accent: var(--kpt-color-info);display:flex;align-items:flex-start;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border:var(--kpt-border-width-thin, 1px) solid color-mix(in oklch,var(--_accent) 35%,transparent);border-inline-start:3px solid var(--_accent);border-radius:var(--kpt-radius-md, .5rem);background:color-mix(in oklab,var(--_accent) 10%,var(--kpt-color-surface));color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-alert[data-variant=success]{--_accent: var(--kpt-color-success)}.kpt-alert[data-variant=warning]{--_accent: var(--kpt-color-warning)}.kpt-alert[data-variant=danger]{--_accent: var(--kpt-color-danger)}.kpt-alert__icon{color:var(--_accent);font-weight:700;line-height:1.5}.kpt-alert__content{flex:1;min-width:0}.kpt-alert__title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:.15rem}.kpt-alert__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-alert__close:hover{color:var(--kpt-color-on-surface)}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAlert, { className: "KptAlert", filePath: "lib/alert/alert.component.ts", lineNumber: 45 }); })();
 
@@ -12492,6 +12681,13 @@ class KptDialog {
         ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         this.header = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        /**
+         * Szerokość okna: `sm` 24rem, `md` 32rem (domyślna), `lg` 48rem — zawsze przycięta do szerokości
+         * okna przeglądarki. `lg` jest dla treści, której nie da się sensownie zwęzić: kodu, tabeli,
+         * porównania dwóch kolumn.
+         */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /** Pozwala zamknąć klawiszem Esc / przyciskiem ×. */
         this.dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.i18n = inject(KptI18n);
@@ -12551,7 +12747,7 @@ class KptDialog {
             i0.ɵɵviewQuerySignal(ctx.dialogRef, _c0$9, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-dialog-host"], inputs: { open: [1, "open"], header: [1, "header"], dismissible: [1, "dismissible"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2$1, decls: 6, vars: 1, consts: [["dlg", ""], [1, "kpt-dialog", 3, "close", "cancel"], [1, "kpt-dialog__header"], [1, "kpt-dialog__body"], [1, "kpt-dialog__title"], ["type", "button", 1, "kpt-dialog__close"], ["type", "button", 1, "kpt-dialog__close", 3, "click"], ["name", "x"]], template: function KptDialog_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [1, "kpt-dialog-host"], inputs: { open: [1, "open"], header: [1, "header"], size: [1, "size"], dismissible: [1, "dismissible"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2$1, decls: 6, vars: 2, consts: [["dlg", ""], [1, "kpt-dialog", 3, "close", "cancel"], [1, "kpt-dialog__header"], [1, "kpt-dialog__body"], [1, "kpt-dialog__title"], ["type", "button", 1, "kpt-dialog__close"], ["type", "button", 1, "kpt-dialog__close", 3, "click"], ["name", "x"]], template: function KptDialog_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c1$2);
             i0.ɵɵelementStart(0, "dialog", 1, 0);
             i0.ɵɵlistener("close", function KptDialog_Template_dialog_close_0_listener() { return ctx.open.set(false); })("cancel", function KptDialog_Template_dialog_cancel_0_listener($event) { return ctx.onCancel($event); });
@@ -12562,14 +12758,15 @@ class KptDialog {
             i0.ɵɵprojection(5, 1);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
+            i0.ɵɵattribute("data-size", ctx.size());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.header() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--%NS%kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-5, 1.25rem) var(--%NS%kpt-space-6, 1.5rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-dialog__title{font-size:var(--%NS%kpt-font-size-lg, 1.125rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--%NS%kpt-space-6, 1.5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;justify-content:flex-end;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-6, 1.5rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;--%NS%_width: 32rem;width:min(var(--%NS%_width),100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-dialog[data-size=sm]{--%NS%_width: 24rem}.kpt-dialog[data-size=lg]{--%NS%_width: 48rem}.kpt-dialog::backdrop{background:var(--%NS%kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-5, 1.25rem) var(--%NS%kpt-space-6, 1.5rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-dialog__title{font-size:var(--%NS%kpt-font-size-lg, 1.125rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--%NS%kpt-space-6, 1.5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-6, 1.5rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDialog, [{
         type: Component,
         args: [{ selector: 'kpt-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <dialog #dlg class="kpt-dialog" (close)="open.set(false)" (cancel)="onCancel($event)">
+    <dialog #dlg class="kpt-dialog" [attr.data-size]="size()" (close)="open.set(false)" (cancel)="onCancel($event)">
       @if (header()) {
         <div class="kpt-dialog__header">
           <h2 class="kpt-dialog__title">{{ header() }}</h2>
@@ -12581,9 +12778,9 @@ class KptDialog {
       <div class="kpt-dialog__body"><ng-content /></div>
       <ng-content select="[kptDialogFooter]" />
     </dialog>
-  `, host: { class: 'kpt-dialog-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-5, 1.25rem) var(--kpt-space-6, 1.5rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-dialog__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--kpt-space-6, 1.5rem);font-size:var(--kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;justify-content:flex-end;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}}\n"] }]
-    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialogRef: [{ type: i0.ViewChild, args: ['dlg', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDialog, { className: "KptDialog", filePath: "lib/dialog/dialog.component.ts", lineNumber: 53 }); })();
+  `, host: { class: 'kpt-dialog-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;--_width: 32rem;width:min(var(--_width),100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4)}.kpt-dialog[data-size=sm]{--_width: 24rem}.kpt-dialog[data-size=lg]{--_width: 48rem}.kpt-dialog::backdrop{background:var(--kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-5, 1.25rem) var(--kpt-space-6, 1.5rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-dialog__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--kpt-space-6, 1.5rem);font-size:var(--kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}}\n"] }]
+    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialogRef: [{ type: i0.ViewChild, args: ['dlg', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDialog, { className: "KptDialog", filePath: "lib/dialog/dialog.component.ts", lineNumber: 56 }); })();
 
 /**
  * Serwis powiadomień (toastów). Wstrzyknij i wywołuj `show`/`success`/`error`/...;