@konce-pt/angular 0.1.2 → 0.3.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, viewChild, afterNextRender, TemplateRef, contentChildren, Directive, linkedSignal, contentChild } from '@angular/core';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, afterNextRender, numberAttribute, viewChild, Directive, DestroyRef, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
 import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 
@@ -241,6 +241,7 @@ const KPT_ICONS = {
     'dots-vertical': '<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
     'photo': '<path d="M15 8h.01" /> <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /> <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /> <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />',
     'trash': '<path d="M4 7l16 0" /> <path d="M10 11l0 6" /> <path d="M14 11l0 6" /> <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /> <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />',
+    'pencil': '<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M13.5 6.5l4 4" />',
     'eye': '<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />',
     'eye-off': '<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" />',
     'minus': '<path d="M5 12l14 0" />',
@@ -248,6 +249,19 @@ const KPT_ICONS = {
     'arrow-down': '<path d="M12 5l0 14" /> <path d="M18 13l-6 6" /> <path d="M6 13l6 6" />',
     'zoom-in': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M7 10l6 0" /> <path d="M10 7l0 6" /> <path d="M21 21l-6 -6" />',
     'info-circle': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
+    'phone': '<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />',
+    'map-pin': '<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />',
+    'world': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M3.6 9h16.8" /> <path d="M3.6 15h16.8" /> <path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" />',
+    'clock': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 7v5l3 3" />',
+    'align-left': '<path d="M4 6l16 0" /> <path d="M4 12l10 0" /> <path d="M4 18l14 0" />',
+    'align-center': '<path d="M4 6l16 0" /> <path d="M8 12l8 0" /> <path d="M6 18l12 0" />',
+    'align-right': '<path d="M4 6l16 0" /> <path d="M10 12l10 0" /> <path d="M6 18l14 0" />',
+    'align-justified': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l12 0" />',
+    'palette': '<path d="M12 21a9 9 0 0 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M12.5 7.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M16.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />',
+    'highlight': '<path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M12.5 5.5l4 4" /> <path d="M4.5 13.5l4 4" /> <path d="M21 15v4h-8" />',
+    'clipboard': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />',
+    'clipboard-text': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /> <path d="M9 12h6" /> <path d="M9 16h6" />',
+    'table': '<path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /> <path d="M3 10h18" /> <path d="M10 3v18" />',
 };
 
 /**
@@ -755,10 +769,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * kontrolki (np. `kpt-input`). Prezentacyjny — stan błędu przekazuje się przez `error`
  * (zwykle z pola Signal Forms). Wygląd sterowany tokenami `--kpt-form-field-*`.
  *
+ * Etykieta ma 4 warianty (`labelType`): `fixed` (domyślny, nad kontrolką) oraz trzy warianty
+ * unoszącej się etykiety (Float Label) z animowanym przejściem: `over` (nad obramowaniem),
+ * `in` (u góry wewnątrz pola) i `on` (na obramowaniu, notch). Uniesienie następuje przy focusie
+ * (CSS `:focus-within`) lub gdy pole jest wypełnione (wykrywane po zdarzeniach `input`/`change`
+ * oraz wartości początkowej) — bez wymogu placeholdera na kontrolce.
+ *
  * @example
  * <kpt-form-field label="E-mail" [error]="emailError()" hint="Firmowy adres">
  *   <kpt-input [control]="f.email" type="email" />
  * </kpt-form-field>
+ *
+ * @example
+ * <kpt-form-field label="E-mail" labelType="over">
+ *   <kpt-input />
+ * </kpt-form-field>
  */
 class KptFormField {
     /** Tekst etykiety. */
@@ -775,13 +800,37 @@ class KptFormField {
     /** Id kontrolki dla powiązania `label[for]`. */
     controlId = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    /**
+     * Wariant etykiety: `fixed` (domyślnie, statyczna nad kontrolką) lub Float Label —
+     * `over` (nad obramowaniem), `in` (u góry wewnątrz pola), `on` (na obramowaniu, notch).
+     * Uniesienie następuje przy focusie lub wypełnieniu pola.
+     */
+    labelType = input('fixed', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelType" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    /** Czy projektowana kontrolka ma wartość — steruje uniesieniem etykiety w wariantach float. */
+    filled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Wartość początkowa (np. pole prefill) — po pierwszym renderze projekcji.
+        afterNextRender(() => this.updateFilled());
+    }
+    /** Odczytuje wartość projektowanego `input`/`textarea` i aktualizuje stan `filled`. */
+    updateFilled() {
+        const el = this.host.nativeElement.querySelector('.kpt-form-field__control input, .kpt-form-field__control textarea');
+        this.filled.set(!!el && el.value !== '');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptFormField, isStandalone: true, selector: "kpt-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-form-field-host" }, ngImport: i0, template: "<div class=\"kpt-form-field\" [class.kpt-form-field--invalid]=\"!!error()\">\n  @if (label()) {\n    <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"kpt-form-field__control\">\n    <ng-content />\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptFormField, isStandalone: true, selector: "kpt-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "updateFilled()", "change": "updateFilled()" }, classAttribute: "kpt-form-field-host" }, ngImport: i0, template: "<div\n  class=\"kpt-form-field\"\n  [class]=\"'kpt-form-field--' + labelType()\"\n  [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n  [class.kpt-form-field--invalid]=\"!!error()\"\n>\n  <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n    @if (label()) {\n      <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <div class=\"kpt-form-field__control\">\n      <ng-content />\n    </div>\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptFormField, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'kpt-form-field-host' }, template: "<div class=\"kpt-form-field\" [class.kpt-form-field--invalid]=\"!!error()\">\n  @if (label()) {\n    <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"kpt-form-field__control\">\n    <ng-content />\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }] } });
+            args: [{ selector: 'kpt-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'kpt-form-field-host',
+                        '(input)': 'updateFilled()',
+                        '(change)': 'updateFilled()',
+                    }, template: "<div\n  class=\"kpt-form-field\"\n  [class]=\"'kpt-form-field--' + labelType()\"\n  [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n  [class.kpt-form-field--invalid]=\"!!error()\"\n>\n  <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n    @if (label()) {\n      <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <div class=\"kpt-form-field__control\">\n      <ng-content />\n    </div>\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }] } });
 
 let nextUniqueId = 0;
 /**
@@ -900,6 +949,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 /**
  * Przełącznik (switch/toggle) zintegrowany z Signal Forms (`FormCheckboxControl`).
  * `<kpt-switch [formField]="f.notifications" label="Powiadomienia" />`
+ *
+ * Wariant z tekstem stanu: `onLabel`/`offLabel` — wyświetlany tekst zmienia się
+ * przy przełączaniu (np. „Włączony”/„Wyłączony”).
+ * `<kpt-switch [(checked)]="on" onLabel="Włączony" offLabel="Wyłączony" />`
  */
 class KptSwitch {
     checked = model(false, /* @ts-ignore */
@@ -910,9 +963,26 @@ class KptSwitch {
     touch = output();
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Pozycja etykiety `label` względem przełącznika: 'end' (prawo, domyślnie) lub 'start' (lewo). */
+    labelPosition = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    /** Tekst stanu włączonego (wyświetlany, gdy `checked`). */
+    onLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
+    /** Tekst stanu wyłączonego (wyświetlany, gdy nie `checked`). */
+    offLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
+    hasStateLabels = computed(() => !!(this.onLabel() || this.offLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasStateLabels" }] : /* istanbul ignore next */ []));
+    /** Tekst zależny od stanu przełącznika. */
+    stateLabel = computed(() => (this.checked() ? this.onLabel() : this.offLabel()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSwitch, isStandalone: true, selector: "kpt-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { classAttribute: "kpt-switch-host" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSwitch, isStandalone: true, selector: "kpt-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { classAttribute: "kpt-switch-host" }, ngImport: i0, template: `
     <label class="kpt-switch" [class.kpt-switch--disabled]="disabled()">
+      @if (label() && labelPosition() === 'start') {
+        <span class="kpt-switch__label kpt-switch__label--start">{{ label() }}</span>
+      }
       <input
         type="checkbox"
         role="switch"
@@ -924,17 +994,23 @@ class KptSwitch {
         (blur)="touch.emit()"
       />
       <span class="kpt-switch__track" aria-hidden="true"><span class="kpt-switch__thumb"></span></span>
-      @if (label()) {
+      @if (label() && labelPosition() === 'end') {
         <span class="kpt-switch__label">{{ label() }}</span>
       }
+      @if (hasStateLabels()) {
+        <span class="kpt-switch__state" [class.kpt-switch__state--on]="checked()">{{ stateLabel() }}</span>
+      }
       <ng-content />
     </label>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface-muted);transition:color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSwitch, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <label class="kpt-switch" [class.kpt-switch--disabled]="disabled()">
+      @if (label() && labelPosition() === 'start') {
+        <span class="kpt-switch__label kpt-switch__label--start">{{ label() }}</span>
+      }
       <input
         type="checkbox"
         role="switch"
@@ -946,13 +1022,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         (blur)="touch.emit()"
       />
       <span class="kpt-switch__track" aria-hidden="true"><span class="kpt-switch__thumb"></span></span>
-      @if (label()) {
+      @if (label() && labelPosition() === 'end') {
         <span class="kpt-switch__label">{{ label() }}</span>
       }
+      @if (hasStateLabels()) {
+        <span class="kpt-switch__state" [class.kpt-switch__state--on]="checked()">{{ stateLabel() }}</span>
+      }
       <ng-content />
     </label>
-  `, host: { class: 'kpt-switch-host' }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"] }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+  `, host: { class: 'kpt-switch-host' }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface-muted);transition:color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }] } });
+
+/**
+ * Grupa przełączników. Domyślnie pojedynczy wybór (wzajemnie wykluczające się) —
+ * włączenie jednego wyłącza pozostałe, a wartość to `value` wybranej opcji (lub `null`).
+ * Z `multiple` przechodzi w tryb wielokrotny — wartość to tablica `T[]` zaznaczonych opcji.
+ * Zintegrowana z Signal Forms (`FormValueControl<T | T[] | null>`).
+ *
+ * @example
+ * <kpt-switch-group [(value)]="plan" [options]="plans" />
+ * <kpt-switch-group multiple [(value)]="tags" [options]="tagOptions" />
+ */
+class KptSwitchGroup {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touch = output();
+    /** Układ: 'vertical' (domyślnie) lub 'horizontal'. */
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Tryb wielokrotnego wyboru — wartość to tablica `T[]` zaznaczonych opcji. Domyślnie false (pojedynczy wybór). */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Czy ponowne kliknięcie aktywnej opcji ją odznacza (value = null). Dotyczy tylko trybu pojedynczego —
+     * w trybie `multiple` odznaczanie jest zawsze dozwolone. Domyślnie tak.
+     */
+    allowDeselect = input(true, { ...(ngDevMode ? { debugName: "allowDeselect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Aktualna wartość jako tablica (tryb multiple) — normalizuje `null`/pojedynczą wartość. */
+    selectedValues = computed(() => {
+        const v = this.value();
+        if (Array.isArray(v))
+            return v;
+        return v == null ? [] : [v];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    isChecked(optValue) {
+        if (this.multiple())
+            return this.selectedValues().includes(optValue);
+        return optValue === this.value();
+    }
+    onToggle(opt, checked) {
+        if (this.multiple()) {
+            const current = this.selectedValues();
+            if (checked) {
+                if (!current.includes(opt.value))
+                    this.value.set([...current, opt.value]);
+            }
+            else {
+                this.value.set(current.filter((v) => v !== opt.value));
+            }
+            return;
+        }
+        if (checked) {
+            this.value.set(opt.value);
+            return;
+        }
+        // Wyłączono aktywną opcję.
+        if (this.allowDeselect()) {
+            this.value.set(null);
+        }
+        else {
+            // Odznaczanie niedozwolone — przywróć zaznaczenie (wymusza ponowne wypchnięcie [checked]).
+            const current = opt.value;
+            this.value.set(null);
+            this.value.set(current);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSwitchGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSwitchGroup, isStandalone: true, selector: "kpt-switch-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowDeselect: { classPropertyName: "allowDeselect", publicName: "allowDeselect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-switch-group-host" }, ngImport: i0, template: `
+    <div
+      class="kpt-switch-group"
+      [class.kpt-switch-group--horizontal]="orientation() === 'horizontal'"
+      role="group"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
+      @for (opt of options(); track opt.value) {
+        <kpt-switch
+          class="kpt-switch-group__item"
+          [checked]="isChecked(opt.value)"
+          [label]="opt.label"
+          [disabled]="disabled() || opt.disabled"
+          (checkedChange)="onToggle(opt, $event)"
+          (touch)="touch.emit()"
+        />
+      }
+    </div>
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-switch-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-switch-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--kpt-space-4, 1rem)}}\n"], dependencies: [{ kind: "component", type: KptSwitch, selector: "kpt-switch", inputs: ["checked", "disabled", "invalid", "touched", "label", "labelPosition", "onLabel", "offLabel"], outputs: ["checkedChange", "touch"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSwitchGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'kpt-switch-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptSwitch], template: `
+    <div
+      class="kpt-switch-group"
+      [class.kpt-switch-group--horizontal]="orientation() === 'horizontal'"
+      role="group"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+    >
+      @for (opt of options(); track opt.value) {
+        <kpt-switch
+          class="kpt-switch-group__item"
+          [checked]="isChecked(opt.value)"
+          [label]="opt.label"
+          [disabled]="disabled() || opt.disabled"
+          (checkedChange)="onToggle(opt, $event)"
+          (touch)="touch.emit()"
+        />
+      }
+    </div>
+  `, host: { class: 'kpt-switch-group-host' }, styles: ["@layer kpt.components{.kpt-switch-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-switch-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--kpt-space-4, 1rem)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", 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"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowDeselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDeselect", required: false }] }] } });
 
 let nextGroupId = 0;
 /**
@@ -989,7 +1181,7 @@ class KptRadioGroup {
         </label>
       }
     </div>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{position:relative;display:inline-block;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";position:absolute;inset:0;margin:auto;width:.6rem;height:.6rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRadioGroup, decorators: [{
             type: Component,
@@ -1011,7 +1203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         </label>
       }
     </div>
-  `, host: { class: 'kpt-radio-group-host' }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{position:relative;display:inline-block;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";position:absolute;inset:0;margin:auto;width:.6rem;height:.6rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
+  `, host: { class: 'kpt-radio-group-host' }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", 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"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 /**
@@ -1149,6 +1341,287 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, template: "<div\n  class=\"kpt-select\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [class.kpt-select--open]=\"open()\"\n  [class.kpt-select--disabled]=\"disabled()\"\n  [class.kpt-select--invalid]=\"invalid()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\n>\n  <div class=\"kpt-select__value\">\n    @if (multiple() && selectedOptions().length) {\n      @for (opt of selectedOptions(); track opt.value) {\n        <span class=\"kpt-select__chip\">\n          {{ opt.label }}\n          <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" aria-label=\"Usu\u0144\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && hasValue()) {\n      <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n    } @else {\n      <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </div>\n  <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n    @if (filter()) {\n      <div class=\"kpt-select__search\">\n        <kpt-icon name=\"search\" />\n        <input\n          type=\"text\"\n          class=\"kpt-select__search-input\"\n          [value]=\"filterText()\"\n          (input)=\"onFilterInput($event)\"\n          placeholder=\"Szukaj\u2026\"\n        />\n      </div>\n    }\n    <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n      @for (opt of filteredOptions(); track opt.value; let i = $index) {\n        <li\n          class=\"kpt-select__option\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--active]=\"i === activeIndex()\"\n          [class.kpt-select__option--disabled]=\"opt.disabled\"\n          (click)=\"pick(opt)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n        >\n          @if (multiple()) {\n            <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n          }\n          <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n          @if (!multiple() && isSelected(opt)) {\n            <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n          }\n        </li>\n      } @empty {\n        <li class=\"kpt-select__empty\">Brak wynik\u00F3w</li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] } });
 
+const R_OUTER = 40;
+const R_INNER = 26;
+const pad$2 = (n) => String(n).padStart(2, '0');
+/**
+ * Tarcza zegara (wybór godziny) — dwa etapy: godziny → minuty, klik lub przeciąganie.
+ * Format 12/24h (`hourFormat`); w 24h dodatkowy wewnętrzny pierścień 13–00, w 12h AM/PM.
+ * Wartość `HH:mm` (zawsze 24h). Używana przez `kpt-datepicker` i `kpt-date-range`.
+ *
+ * @example
+ * <kpt-clock [(value)]="time" [hourFormat]="12" [minuteStep]="5" />
+ */
+class KptClock {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    hourFormat = input(24, { ...(ngDevMode ? { debugName: "hourFormat" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    minuteStep = input(1, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    hour = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hour" }] : /* istanbul ignore next */ []));
+    minute = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minute" }] : /* istanbul ignore next */ []));
+    clockPhase = signal('hours', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clockPhase" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Synchronizacja wartości zewnętrznej → stan tarczy (zapis idempotentny, bez pętli).
+        effect(() => {
+            const t = this.parse(this.value());
+            this.hour.set(t?.h ?? 0);
+            this.minute.set(t?.m ?? 0);
+        });
+    }
+    parse(v) {
+        const m = /^(\d{2}):(\d{2})$/.exec(v ?? '');
+        return m ? { h: +m[1], m: +m[2] } : null;
+    }
+    emit() {
+        this.value.set(`${pad$2(this.hour())}:${pad$2(this.minute())}`);
+    }
+    ampm = computed(() => (this.hour() < 12 ? 'AM' : 'PM'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ampm" }] : /* istanbul ignore next */ []));
+    hour12 = computed(() => {
+        const h = this.hour() % 12;
+        return h === 0 ? 12 : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hour12" }] : /* istanbul ignore next */ []));
+    hourLabel = computed(() => this.hourFormat() === 12 ? String(this.hour12()) : pad$2(this.hour()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourLabel" }] : /* istanbul ignore next */ []));
+    minuteLabel = computed(() => pad$2(this.minute()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteLabel" }] : /* istanbul ignore next */ []));
+    from12h(h12, ap) {
+        const base = h12 % 12; // 12 → 0
+        return ap === 'PM' ? base + 12 : base;
+    }
+    hourMarks = computed(() => {
+        const marks = [];
+        if (this.hourFormat() === 12) {
+            const ap = this.ampm();
+            const curH12 = this.hour12();
+            for (let i = 0; i < 12; i++) {
+                const theta = (i / 12) * 2 * Math.PI;
+                const h12 = i === 0 ? 12 : i;
+                marks.push({
+                    label: String(h12),
+                    hour24: this.from12h(h12, ap),
+                    x: 50 + R_OUTER * Math.sin(theta),
+                    y: 50 - R_OUTER * Math.cos(theta),
+                    inner: false,
+                    selected: curH12 === h12,
+                });
+            }
+            return marks;
+        }
+        const cur = this.hour();
+        for (let i = 0; i < 12; i++) {
+            const theta = (i / 12) * 2 * Math.PI;
+            const hour24 = i === 0 ? 12 : i;
+            marks.push({
+                label: i === 0 ? '12' : String(i),
+                hour24,
+                x: 50 + R_OUTER * Math.sin(theta),
+                y: 50 - R_OUTER * Math.cos(theta),
+                inner: false,
+                selected: cur === hour24,
+            });
+        }
+        for (let i = 0; i < 12; i++) {
+            const theta = (i / 12) * 2 * Math.PI;
+            const hour24 = i === 0 ? 0 : i + 12;
+            marks.push({
+                label: i === 0 ? '00' : String(i + 12),
+                hour24,
+                x: 50 + R_INNER * Math.sin(theta),
+                y: 50 - R_INNER * Math.cos(theta),
+                inner: true,
+                selected: cur === hour24,
+            });
+        }
+        return marks;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourMarks" }] : /* istanbul ignore next */ []));
+    minuteMarks = computed(() => {
+        const cur = this.minute();
+        return Array.from({ length: 12 }, (_, i) => {
+            const val = i * 5;
+            const theta = (i / 12) * 2 * Math.PI;
+            return {
+                label: pad$2(val),
+                hour24: val,
+                x: 50 + R_OUTER * Math.sin(theta),
+                y: 50 - R_OUTER * Math.cos(theta),
+                inner: false,
+                selected: cur === val,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteMarks" }] : /* istanbul ignore next */ []));
+    handAngle = computed(() => this.clockPhase() === 'hours' ? (this.hour() % 12) * 30 : this.minute() * 6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handAngle" }] : /* istanbul ignore next */ []));
+    handInner = computed(() => this.clockPhase() === 'hours' && this.hourFormat() === 24 && (this.hour() === 0 || this.hour() >= 13), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handInner" }] : /* istanbul ignore next */ []));
+    setPhase(phase) {
+        this.clockPhase.set(phase);
+    }
+    setAmpm(target) {
+        this.hour.set(this.from12h(this.hour12(), target));
+        this.emit();
+    }
+    pickHour(mark) {
+        this.hour.set(mark.hour24);
+        this.clockPhase.set('minutes');
+        this.emit();
+    }
+    pickMinute(mark) {
+        this.minute.set(mark.hour24);
+        this.emit();
+    }
+    onDialPointer(event, face) {
+        if (event.type === 'pointerdown')
+            face.setPointerCapture(event.pointerId);
+        else if (!(event.buttons & 1))
+            return;
+        const rect = face.getBoundingClientRect();
+        const dx = event.clientX - (rect.left + rect.width / 2);
+        const dy = event.clientY - (rect.top + rect.height / 2);
+        let deg = (Math.atan2(dx, -dy) * 180) / Math.PI;
+        if (deg < 0)
+            deg += 360;
+        if (this.clockPhase() === 'hours') {
+            const idx = Math.round(deg / 30) % 12;
+            if (this.hourFormat() === 12) {
+                const h12 = idx === 0 ? 12 : idx;
+                this.hour.set(this.from12h(h12, this.ampm()));
+            }
+            else {
+                const radius = Math.hypot(dx, dy) / (rect.width / 2);
+                const inner = radius < (R_OUTER + R_INNER) / 2 / 50;
+                this.hour.set(inner ? (idx === 0 ? 0 : idx + 12) : idx === 0 ? 12 : idx);
+            }
+        }
+        else {
+            const step = Math.max(1, this.minuteStep());
+            const raw = Math.round(deg / 6) % 60;
+            this.minute.set((Math.round(raw / step) * step) % 60);
+        }
+        this.emit();
+    }
+    onDialUp() {
+        if (this.clockPhase() === 'hours')
+            this.clockPhase.set('minutes');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptClock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptClock, isStandalone: true, selector: "kpt-clock", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "kpt-clock-host" }, ngImport: i0, template: `
+    <div class="kpt-clock">
+      <div class="kpt-clock__time">
+        <button type="button" class="kpt-clock__seg" [class.is-active]="clockPhase() === 'hours'" (click)="setPhase('hours')">{{ hourLabel() }}</button>
+        <span class="kpt-clock__colon">:</span>
+        <button type="button" class="kpt-clock__seg" [class.is-active]="clockPhase() === 'minutes'" (click)="setPhase('minutes')">{{ minuteLabel() }}</button>
+        @if (hourFormat() === 12) {
+          <div class="kpt-clock__ampm">
+            <button type="button" [class.is-active]="ampm() === 'AM'" (click)="setAmpm('AM')">AM</button>
+            <button type="button" [class.is-active]="ampm() === 'PM'" (click)="setAmpm('PM')">PM</button>
+          </div>
+        }
+      </div>
+      <div
+        class="kpt-clock__face"
+        #face
+        (pointerdown)="onDialPointer($event, face)"
+        (pointermove)="onDialPointer($event, face)"
+        (pointerup)="onDialUp()"
+      >
+        <span class="kpt-clock__center"></span>
+        <span
+          class="kpt-clock__hand"
+          [class.kpt-clock__hand--inner]="handInner()"
+          [style.transform]="'rotate(' + handAngle() + 'deg)'"
+        ></span>
+        @if (clockPhase() === 'hours') {
+          @for (mark of hourMarks(); track mark.hour24) {
+            <button
+              type="button"
+              class="kpt-clock__num"
+              [class.kpt-clock__num--inner]="mark.inner"
+              [class.kpt-clock__num--selected]="mark.selected"
+              [style.left.%]="mark.x"
+              [style.top.%]="mark.y"
+              (click)="pickHour(mark)"
+            >{{ mark.label }}</button>
+          }
+        } @else {
+          @for (mark of minuteMarks(); track mark.hour24) {
+            <button
+              type="button"
+              class="kpt-clock__num"
+              [class.kpt-clock__num--selected]="mark.selected"
+              [style.left.%]="mark.x"
+              [style.top.%]="mark.y"
+              (click)="pickMinute(mark)"
+            >{{ mark.label }}</button>
+          }
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-clock-host{display:block}.kpt-clock__time{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-1, .25rem);margin-bottom:var(--kpt-space-3, .75rem);font-variant-numeric:tabular-nums}.kpt-clock__seg{border:0;background:none;padding:.1rem .4rem;border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-2xl, 1.5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-clock__seg.is-active{color:var(--kpt-color-primary);background:var(--kpt-color-muted)}.kpt-clock__colon{font-size:var(--kpt-font-size-2xl, 1.5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted)}.kpt-clock__ampm{display:flex;flex-direction:column;gap:2px;margin-inline-start:var(--kpt-space-2, .5rem)}.kpt-clock__ampm button{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.1rem .4rem;border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-clock__ampm button.is-active{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-clock__face{position:relative;width:13rem;max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:50%;background:var(--kpt-color-surface-variant);touch-action:none;-webkit-user-select:none;user-select:none}.kpt-clock__center{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--kpt-color-primary);z-index:2}.kpt-clock__hand{position:absolute;left:50%;bottom:50%;width:2px;height:40%;margin-left:-1px;transform-origin:bottom center;background:var(--kpt-color-primary);z-index:1}.kpt-clock__hand--inner{height:26%}.kpt-clock__hand:before{content:\"\";position:absolute;top:-3px;left:50%;width:8px;height:8px;transform:translate(-50%);border-radius:50%;background:var(--kpt-color-primary)}.kpt-clock__num{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:50%;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;z-index:2}.kpt-clock__num:hover{background:var(--kpt-color-muted)}.kpt-clock__num--inner{width:1.6rem;height:1.6rem;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-clock__num--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptClock, decorators: [{
+            type: Component,
+            args: [{ selector: 'kpt-clock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="kpt-clock">
+      <div class="kpt-clock__time">
+        <button type="button" class="kpt-clock__seg" [class.is-active]="clockPhase() === 'hours'" (click)="setPhase('hours')">{{ hourLabel() }}</button>
+        <span class="kpt-clock__colon">:</span>
+        <button type="button" class="kpt-clock__seg" [class.is-active]="clockPhase() === 'minutes'" (click)="setPhase('minutes')">{{ minuteLabel() }}</button>
+        @if (hourFormat() === 12) {
+          <div class="kpt-clock__ampm">
+            <button type="button" [class.is-active]="ampm() === 'AM'" (click)="setAmpm('AM')">AM</button>
+            <button type="button" [class.is-active]="ampm() === 'PM'" (click)="setAmpm('PM')">PM</button>
+          </div>
+        }
+      </div>
+      <div
+        class="kpt-clock__face"
+        #face
+        (pointerdown)="onDialPointer($event, face)"
+        (pointermove)="onDialPointer($event, face)"
+        (pointerup)="onDialUp()"
+      >
+        <span class="kpt-clock__center"></span>
+        <span
+          class="kpt-clock__hand"
+          [class.kpt-clock__hand--inner]="handInner()"
+          [style.transform]="'rotate(' + handAngle() + 'deg)'"
+        ></span>
+        @if (clockPhase() === 'hours') {
+          @for (mark of hourMarks(); track mark.hour24) {
+            <button
+              type="button"
+              class="kpt-clock__num"
+              [class.kpt-clock__num--inner]="mark.inner"
+              [class.kpt-clock__num--selected]="mark.selected"
+              [style.left.%]="mark.x"
+              [style.top.%]="mark.y"
+              (click)="pickHour(mark)"
+            >{{ mark.label }}</button>
+          }
+        } @else {
+          @for (mark of minuteMarks(); track mark.hour24) {
+            <button
+              type="button"
+              class="kpt-clock__num"
+              [class.kpt-clock__num--selected]="mark.selected"
+              [style.left.%]="mark.x"
+              [style.top.%]="mark.y"
+              (click)="pickMinute(mark)"
+            >{{ mark.label }}</button>
+          }
+        }
+      </div>
+    </div>
+  `, host: { class: 'kpt-clock-host' }, styles: ["@layer kpt.components{.kpt-clock-host{display:block}.kpt-clock__time{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-1, .25rem);margin-bottom:var(--kpt-space-3, .75rem);font-variant-numeric:tabular-nums}.kpt-clock__seg{border:0;background:none;padding:.1rem .4rem;border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-2xl, 1.5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-clock__seg.is-active{color:var(--kpt-color-primary);background:var(--kpt-color-muted)}.kpt-clock__colon{font-size:var(--kpt-font-size-2xl, 1.5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted)}.kpt-clock__ampm{display:flex;flex-direction:column;gap:2px;margin-inline-start:var(--kpt-space-2, .5rem)}.kpt-clock__ampm button{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.1rem .4rem;border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-clock__ampm button.is-active{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-clock__face{position:relative;width:13rem;max-width:100%;aspect-ratio:1;margin:0 auto;border-radius:50%;background:var(--kpt-color-surface-variant);touch-action:none;-webkit-user-select:none;user-select:none}.kpt-clock__center{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--kpt-color-primary);z-index:2}.kpt-clock__hand{position:absolute;left:50%;bottom:50%;width:2px;height:40%;margin-left:-1px;transform-origin:bottom center;background:var(--kpt-color-primary);z-index:1}.kpt-clock__hand--inner{height:26%}.kpt-clock__hand:before{content:\"\";position:absolute;top:-3px;left:50%;width:8px;height:8px;transform:translate(-50%);border-radius:50%;background:var(--kpt-color-primary)}.kpt-clock__num{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:50%;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;z-index:2}.kpt-clock__num:hover{background:var(--kpt-color-muted)}.kpt-clock__num--inner{width:1.6rem;height:1.6rem;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-clock__num--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] } });
+
 const WEEKDAYS$1 = ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'];
 const MONTHS$1 = [
     'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec',
@@ -1157,11 +1630,17 @@ const MONTHS$1 = [
 const pad$1 = (n) => String(n).padStart(2, '0');
 const toIso$1 = (d) => `${d.getFullYear()}-${pad$1(d.getMonth() + 1)}-${pad$1(d.getDate())}`;
 /**
- * Wybór daty z własnym kalendarzem (CDK Overlay), Signal Forms. Wartość ISO 'RRRR-MM-DD'.
+ * Wybór daty/godziny z własnym kalendarzem (CDK Overlay), Signal Forms.
+ * Granulacja przez `selectionMode`: data, miesiąc+rok, rok, miesiąc, data+godzina, sama godzina.
+ * Godzina na tarczy zegara (dwa etapy: godziny → minuty), format 12/24h przez `hourFormat`.
+ * Format wartości zależy od trybu: 'RRRR-MM-DD' / 'RRRR-MM' / 'RRRR' / 'MM'
+ * / 'RRRR-MM-DDTHH:mm' (datetime) / 'HH:mm' (time). Czas przechowywany zawsze 24h.
  * Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
  * <kpt-datepicker [formField]="f.birthDate" minDate="1900-01-01" />
+ * <kpt-datepicker selectionMode="datetime" [hourFormat]="12" [(value)]="meetingAt" />
+ * <kpt-datepicker selectionMode="time" [(value)]="alarm" />
  */
 class KptDatepicker {
     value = model('', /* @ts-ignore */
@@ -1170,38 +1649,132 @@ class KptDatepicker {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
-    placeholder = input('RRRR-MM-DD', /* @ts-ignore */
+    placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    displayFormat = input('pl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    /** Granulacja wyboru. */
+    selectionMode = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /** Prezentacja miesiąca w trybie 'month': słownie ('long') lub liczbą ('number'). */
+    monthDisplay = input('long', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthDisplay" }] : /* istanbul ignore next */ []));
+    /** Format godziny: 24 lub 12 (z AM/PM). */
+    hourFormat = input(24, { ...(ngDevMode ? { debugName: "hourFormat" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Krok minut (snap na tarczy). */
+    minuteStep = input(1, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     minDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    effectivePlaceholder = computed(() => {
+        if (this.placeholder())
+            return this.placeholder();
+        const iso = this.displayFormat() === 'iso';
+        const time = this.hourFormat() === 12 ? '--:-- --' : '--:--';
+        switch (this.selectionMode()) {
+            case 'monthYear': return iso ? 'RRRR-MM' : 'MM.RRRR';
+            case 'year': return 'RRRR';
+            case 'month': return this.monthDisplay() === 'number' ? 'MM' : 'Miesiąc';
+            case 'time': return time;
+            case 'datetime': return `${iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR'} ${time}`;
+            default: return iso ? 'RRRR-MM-DD' : 'DD.MM.RRRR';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
     weekdays = WEEKDAYS$1;
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     today = new Date();
     view = signal({ y: this.today.getFullYear(), m: this.today.getMonth() }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    // ── Stan czasu (bufor 'HH:mm', 24h) ──
+    timeStr = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeStr" }] : /* istanbul ignore next */ []));
+    dtView = signal('calendar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dtView" }] : /* istanbul ignore next */ []));
+    pendingDate = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []));
     positions = [
         { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
         { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
     ];
+    viewYear = computed(() => this.view().y, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
     monthLabel = computed(() => {
         const { y, m } = this.view();
         return `${MONTHS$1[m]} ${y}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    yearPageStart = computed(() => {
+        const y = this.view().y;
+        return y - (((y % 12) + 12) % 12);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearPageStart" }] : /* istanbul ignore next */ []));
+    yearRangeLabel = computed(() => `${this.yearPageStart()} – ${this.yearPageStart() + 11}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearRangeLabel" }] : /* istanbul ignore next */ []));
+    // ── Prezentacja czasu ──
+    formatTime(h, m) {
+        if (this.hourFormat() === 12) {
+            const h12 = h % 12 === 0 ? 12 : h % 12;
+            return `${h12}:${pad$1(m)} ${h < 12 ? 'AM' : 'PM'}`;
+        }
+        return `${pad$1(h)}:${pad$1(m)}`;
+    }
+    /** Etykieta czasu na pasku trybu datetime (uwzględnia AM/PM). */
+    timeBarLabel = computed(() => {
+        const t = this.parseTime(this.timeStr());
+        return this.formatTime(t?.h ?? 0, t?.m ?? 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeBarLabel" }] : /* istanbul ignore next */ []));
     display = computed(() => {
-        const d = this.parse(this.value());
-        return d ? `${pad$1(d.getDate())}.${pad$1(d.getMonth() + 1)}.${d.getFullYear()}` : '';
+        const v = this.value();
+        if (!v)
+            return '';
+        const iso = this.displayFormat() === 'iso';
+        switch (this.selectionMode()) {
+            case 'monthYear': {
+                const m = /^(\d{4})-(\d{2})$/.exec(v);
+                return m ? (iso ? v : `${m[2]}.${m[1]}`) : '';
+            }
+            case 'year':
+                return /^\d{4}$/.test(v) ? v : '';
+            case 'month': {
+                const m = /^(\d{2})$/.exec(v);
+                if (!m)
+                    return '';
+                return this.monthDisplay() === 'number' ? m[1] : (MONTHS$1[+m[1] - 1] ?? '');
+            }
+            case 'time': {
+                const t = this.parseTime(v);
+                return t ? this.formatTime(t.h, t.m) : '';
+            }
+            case 'datetime': {
+                const dt = this.parseDateTime(v);
+                if (!dt)
+                    return '';
+                const datePart = iso ? dt.date : `${dt.date.slice(8, 10)}.${dt.date.slice(5, 7)}.${dt.date.slice(0, 4)}`;
+                const sep = iso ? 'T' : ' ';
+                return `${datePart}${sep}${this.formatTime(dt.h, dt.m)}`;
+            }
+            default: {
+                const d = this.parseDate(v);
+                if (!d)
+                    return '';
+                return iso ? toIso$1(d) : `${pad$1(d.getDate())}.${pad$1(d.getMonth() + 1)}.${d.getFullYear()}`;
+            }
+        }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    // ── Siatka dni (tryby 'date' / 'datetime') ──
+    selectedDateIso = computed(() => this.selectionMode() === 'datetime' ? this.pendingDate() : this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedDateIso" }] : /* istanbul ignore next */ []));
     weeks = computed(() => {
         const { y, m } = this.view();
         const first = new Date(y, m, 1);
         const startOffset = (first.getDay() + 6) % 7; // poniedziałek = 0
         const start = new Date(y, m, 1 - startOffset);
-        const sel = this.value();
+        const sel = this.selectedDateIso();
         const min = this.minDate();
         const max = this.maxDate();
         const todayIso = toIso$1(this.today);
@@ -1225,18 +1798,113 @@ class KptDatepicker {
         return weeks;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
-    parse(iso) {
+    // ── Siatka miesięcy (tryby 'monthYear' / 'month') ──
+    monthCells = computed(() => {
+        const { y } = this.view();
+        const sel = this.value();
+        const isMonthOnly = this.selectionMode() === 'month';
+        const numeric = this.monthDisplay() === 'number';
+        return MONTHS$1.map((name, i) => {
+            const mm = pad$1(i + 1);
+            const value = isMonthOnly ? mm : `${y}-${mm}`;
+            return {
+                label: numeric ? mm : name,
+                value,
+                selected: sel === value,
+                disabled: isMonthOnly ? false : this.isMonthYearDisabled(y, i),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthCells" }] : /* istanbul ignore next */ []));
+    // ── Siatka lat (tryb 'year') ──
+    yearCells = computed(() => {
+        const start = this.yearPageStart();
+        const sel = this.value();
+        return Array.from({ length: 12 }, (_, i) => {
+            const year = start + i;
+            const value = String(year);
+            return { label: value, value, selected: sel === value, disabled: this.isYearDisabled(year) };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearCells" }] : /* istanbul ignore next */ []));
+    // ── Parsowanie ──
+    parseDate(iso) {
         const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso ?? '');
         if (!match)
             return null;
         return new Date(+match[1], +match[2] - 1, +match[3]);
     }
+    parseTime(v) {
+        const m = /^(\d{2}):(\d{2})$/.exec(v ?? '');
+        return m ? { h: +m[1], m: +m[2] } : null;
+    }
+    parseDateTime(v) {
+        const m = /^(\d{4}-\d{2}-\d{2})[T ](\d{2}):(\d{2})$/.exec(v ?? '');
+        return m ? { date: m[1], h: +m[2], m: +m[3] } : null;
+    }
+    isYearDisabled(year) {
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (min && year < +min.slice(0, 4))
+            return true;
+        if (max && year > +max.slice(0, 4))
+            return true;
+        return false;
+    }
+    isMonthYearDisabled(y, monthIndex) {
+        const ym = `${y}-${pad$1(monthIndex + 1)}`;
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (min && ym < min.slice(0, 7))
+            return true;
+        if (max && ym > max.slice(0, 7))
+            return true;
+        return false;
+    }
+    initialView() {
+        const v = this.value();
+        switch (this.selectionMode()) {
+            case 'monthYear': {
+                const m = /^(\d{4})-(\d{2})$/.exec(v);
+                return m ? { y: +m[1], m: +m[2] - 1 } : { y: this.today.getFullYear(), m: this.today.getMonth() };
+            }
+            case 'year':
+                return { y: /^\d{4}$/.test(v) ? +v : this.today.getFullYear(), m: 0 };
+            case 'month':
+                return { y: this.today.getFullYear(), m: 0 };
+            case 'datetime': {
+                const dt = this.parseDateTime(v);
+                if (dt) {
+                    const d = this.parseDate(dt.date);
+                    return { y: d.getFullYear(), m: d.getMonth() };
+                }
+                return { y: this.today.getFullYear(), m: this.today.getMonth() };
+            }
+            default: {
+                const d = this.parseDate(v) ?? this.today;
+                return { y: d.getFullYear(), m: d.getMonth() };
+            }
+        }
+    }
+    syncTimeFromValue() {
+        const mode = this.selectionMode();
+        if (mode === 'time') {
+            const t = this.parseTime(this.value());
+            this.timeStr.set(t ? `${pad$1(t.h)}:${pad$1(t.m)}` : '00:00');
+        }
+        else if (mode === 'datetime') {
+            const dt = this.parseDateTime(this.value());
+            this.timeStr.set(dt ? `${pad$1(dt.h)}:${pad$1(dt.m)}` : '00:00');
+            this.pendingDate.set(dt?.date ?? '');
+        }
+    }
     toggleOpen() {
         if (this.disabled())
             return;
         if (!this.open()) {
-            const d = this.parse(this.value()) ?? this.today;
-            this.view.set({ y: d.getFullYear(), m: d.getMonth() });
+            this.view.set(this.initialView());
+            this.syncTimeFromValue();
+            this.dtView.set(this.selectionMode() === 'time' ? 'clock' : 'calendar');
         }
         this.open.update((o) => !o);
     }
@@ -1246,29 +1914,72 @@ class KptDatepicker {
         this.open.set(false);
         this.touch.emit();
     }
+    // ── Wybór data/miesiąc/rok ──
     selectDay(cell) {
         if (cell.disabled)
             return;
+        if (this.selectionMode() === 'datetime') {
+            this.pendingDate.set(cell.iso);
+            return; // czas jeszcze do wyboru
+        }
         this.value.set(cell.iso);
         this.close();
     }
+    selectCell(cell) {
+        if (cell.disabled)
+            return;
+        this.value.set(cell.value);
+        this.close();
+    }
+    // ── Zegar (delegowany do kpt-clock przez timeStr) ──
+    openClock() {
+        this.dtView.set('clock');
+    }
+    backToCalendar() {
+        this.dtView.set('calendar');
+    }
+    commit() {
+        const time = this.timeStr() || '00:00';
+        if (this.selectionMode() === 'time') {
+            this.value.set(time);
+        }
+        else {
+            const dt = this.parseDateTime(this.value());
+            const date = this.pendingDate() || dt?.date || toIso$1(this.today);
+            this.value.set(`${date}T${time}`);
+        }
+        this.close();
+    }
     prevMonth() {
         this.view.update(({ y, m }) => (m === 0 ? { y: y - 1, m: 11 } : { y, m: m - 1 }));
     }
     nextMonth() {
         this.view.update(({ y, m }) => (m === 11 ? { y: y + 1, m: 0 } : { y, m: m + 1 }));
     }
+    prevYear() {
+        this.view.update(({ y, m }) => ({ y: y - 1, m }));
+    }
+    nextYear() {
+        this.view.update(({ y, m }) => ({ y: y + 1, m }));
+    }
+    prevYearPage() {
+        this.view.update(({ y, m }) => ({ y: y - 12, m }));
+    }
+    nextYearPage() {
+        this.view.update(({ y, m }) => ({ y: y + 12, m }));
+    }
     clear(event) {
         event.stopPropagation();
         this.value.set('');
+        this.pendingDate.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDatepicker, isStandalone: true, selector: "kpt-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-datepicker-host" }, ngImport: i0, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" (keydown.escape)=\"close()\">\n    <div class=\"kpt-calendar__header\">\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n      <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n    </div>\n    <div class=\"kpt-calendar__weekdays\">\n      @for (wd of weekdays; track wd) {\n        <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n      }\n    </div>\n    <div class=\"kpt-calendar__grid\">\n      @for (week of weeks(); track $index) {\n        @for (cell of week; track cell.iso) {\n          <button\n            type=\"button\"\n            class=\"kpt-calendar__day\"\n            [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n            [class.kpt-calendar__day--today]=\"cell.today\"\n            [class.kpt-calendar__day--selected]=\"cell.selected\"\n            [disabled]=\"cell.disabled\"\n            [attr.aria-pressed]=\"cell.selected\"\n            (click)=\"selectDay(cell)\"\n          >{{ cell.day }}</button>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDatepicker, isStandalone: true, selector: "kpt-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, monthDisplay: { classPropertyName: "monthDisplay", publicName: "monthDisplay", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-datepicker-host" }, ngImport: i0, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays; track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" aria-label=\"Kalendarz\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">Godzina</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" aria-label=\"Poprzedni rok\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" aria-label=\"Nast\u0119pny rok\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" aria-label=\"Poprzednie lata\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" aria-label=\"Nast\u0119pne lata\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">Miesi\u0105c</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays; track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptClock, selector: "kpt-clock", inputs: ["value", "hourFormat", "minuteStep"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDatepicker, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" (keydown.escape)=\"close()\">\n    <div class=\"kpt-calendar__header\">\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n      <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n    </div>\n    <div class=\"kpt-calendar__weekdays\">\n      @for (wd of weekdays; track wd) {\n        <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n      }\n    </div>\n    <div class=\"kpt-calendar__grid\">\n      @for (week of weeks(); track $index) {\n        @for (cell of week; track cell.iso) {\n          <button\n            type=\"button\"\n            class=\"kpt-calendar__day\"\n            [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n            [class.kpt-calendar__day--today]=\"cell.today\"\n            [class.kpt-calendar__day--selected]=\"cell.selected\"\n            [disabled]=\"cell.disabled\"\n            [attr.aria-pressed]=\"cell.selected\"\n            (click)=\"selectDay(cell)\"\n          >{{ cell.day }}</button>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] } });
+            args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"invalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays; track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" aria-label=\"Kalendarz\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">Godzina</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" aria-label=\"Poprzedni rok\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" aria-label=\"Nast\u0119pny rok\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" aria-label=\"Poprzednie lata\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" aria-label=\"Nast\u0119pne lata\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">Miesi\u0105c</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays; track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] } });
 
 /**
  * Pole wieloliniowe (textarea) na Signal Forms, z opcjonalnym auto-resize.
@@ -1343,16 +2054,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, host: { class: 'kpt-textarea-host' }, styles: ["@layer kpt.components{.kpt-textarea-host{display:block}.kpt-textarea__field{display:block;width:100%;box-sizing:border-box;min-height:3rem;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);font-family:inherit;font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);background:var(--kpt-form-field-bg);resize:vertical}.kpt-textarea__field::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-textarea__field:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-textarea__field:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-textarea__field[aria-invalid=true]{border-color:var(--kpt-form-field-border-error)}.kpt-textarea__field:disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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"] }], ta: [{ type: i0.ViewChild, args: ['ta', { isSignal: true }] }] } });
 
+/**
+ * Dymek podpowiedzi (tooltip) pokazywany na hover/focus hosta. Lekki — element dodawany
+ * do `body` i pozycjonowany względem hosta (działa w trybie zoneless).
+ *
+ * @example
+ * <kpt-button kptTooltip="Zapisz zmiany" kptTooltipPosition="bottom">Zapisz</kpt-button>
+ */
+class KptTooltip {
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'kptTooltip' });
+    position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'kptTooltipPosition' });
+    host = inject(ElementRef);
+    tip;
+    show() {
+        if (this.tip || !this.text())
+            return;
+        const tip = document.createElement('div');
+        tip.className = 'kpt-tooltip';
+        tip.setAttribute('role', 'tooltip');
+        tip.textContent = this.text();
+        tip.style.cssText =
+            'position:fixed;z-index:1400;max-width:16rem;padding:0.35rem 0.6rem;' +
+                'border-radius:var(--kpt-radius-sm,0.25rem);font-size:var(--kpt-font-size-xs,0.75rem);' +
+                'line-height:1.4;background:var(--kpt-color-on-surface);color:var(--kpt-color-surface);' +
+                'box-shadow:var(--kpt-elevation-2);pointer-events:none;opacity:0;transition:opacity 120ms;';
+        document.body.appendChild(tip);
+        this.tip = tip;
+        this.reposition();
+        requestAnimationFrame(() => {
+            if (this.tip)
+                this.tip.style.opacity = '1';
+        });
+    }
+    hide() {
+        this.tip?.remove();
+        this.tip = undefined;
+    }
+    reposition() {
+        const tip = this.tip;
+        if (!tip)
+            return;
+        const r = this.host.nativeElement.getBoundingClientRect();
+        const t = tip.getBoundingClientRect();
+        const gap = 8;
+        let top;
+        let left;
+        switch (this.position()) {
+            case 'bottom':
+                top = r.bottom + gap;
+                left = r.left + r.width / 2 - t.width / 2;
+                break;
+            case 'left':
+                top = r.top + r.height / 2 - t.height / 2;
+                left = r.left - t.width - gap;
+                break;
+            case 'right':
+                top = r.top + r.height / 2 - t.height / 2;
+                left = r.right + gap;
+                break;
+            default:
+                top = r.top - t.height - gap;
+                left = r.left + r.width / 2 - t.width / 2;
+        }
+        tip.style.top = `${Math.max(4, top)}px`;
+        tip.style.left = `${Math.max(4, left)}px`;
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: KptTooltip, isStandalone: true, selector: "[kptTooltip]", inputs: { text: { classPropertyName: "text", publicName: "kptTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "kptTooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kptTooltip]',
+                    host: {
+                        '(mouseenter)': 'show()',
+                        '(mouseleave)': 'hide()',
+                        '(focus)': 'show()',
+                        '(blur)': 'hide()',
+                    },
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltipPosition", required: false }] }] } });
+
 const ICON = {
+    copy: 'copy',
+    paste: 'clipboard',
+    pasteText: 'clipboard-text',
+    heading: 'code', // nieużywane (heading renderuje select)
     bold: 'bold',
     italic: 'italic',
     underline: 'underline',
     strike: 'strikethrough',
     ul: 'list',
     ol: 'list-numbers',
+    foreColor: 'palette',
+    backColor: 'highlight',
+    alignLeft: 'align-left',
+    alignCenter: 'align-center',
+    alignRight: 'align-right',
+    alignJustify: 'align-justified',
     link: 'link',
+    table: 'table',
     clear: 'clear-formatting',
+    html: 'code',
 };
+/** Narzędzia zwykłe → komenda execCommand + nazwa queryCommandState (dla stanu aktywnego). */
 const COMMAND = {
     bold: 'bold',
     italic: 'italic',
@@ -1360,19 +2168,71 @@ const COMMAND = {
     strike: 'strikeThrough',
     ul: 'insertUnorderedList',
     ol: 'insertOrderedList',
+    alignLeft: 'justifyLeft',
+    alignCenter: 'justifyCenter',
+    alignRight: 'justifyRight',
+    alignJustify: 'justifyFull',
     clear: 'removeFormat',
 };
+const ARIA = {
+    copy: 'Kopiuj',
+    paste: 'Wklej z formatowaniem',
+    pasteText: 'Wklej bez formatowania',
+    heading: 'Styl',
+    bold: 'Pogrubienie',
+    italic: 'Kursywa',
+    underline: 'Podkreślenie',
+    strike: 'Przekreślenie',
+    ul: 'Lista punktowana',
+    ol: 'Lista numerowana',
+    foreColor: 'Kolor tekstu',
+    backColor: 'Kolor tła tekstu',
+    alignLeft: 'Wyrównaj do lewej',
+    alignCenter: 'Wyśrodkuj',
+    alignRight: 'Wyrównaj do prawej',
+    alignJustify: 'Wyjustuj',
+    link: 'Wstaw link',
+    table: 'Tabela',
+    clear: 'Usuń formatowanie',
+    html: 'Podgląd HTML',
+};
+const SWATCHES = [
+    '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#ffffff',
+    '#e11d48', '#ea580c', '#ca8a04', '#16a34a', '#0891b2', '#2563eb', '#7c3aed',
+];
+const DEFAULT_TOOLBAR = [
+    ['copy', 'paste', 'pasteText'],
+    ['heading', 'bold', 'italic', 'underline', 'strike', 'ul', 'ol'],
+    ['foreColor', 'backColor'],
+    ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
+    ['link', 'table', 'clear', 'html'],
+];
+// Allowlisty sanityzacji wklejanego HTML.
+const ALLOWED_TAGS = new Set([
+    'P', 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'B', 'STRONG', 'I', 'EM', 'U', 'S', 'STRIKE',
+    'UL', 'OL', 'LI', 'A', 'SPAN', 'DIV', 'BLOCKQUOTE', 'FONT',
+    'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'TD', 'TH', 'COLGROUP', 'COL', 'CAPTION',
+]);
+const ALLOWED_STYLES = new Set([
+    'color', 'background-color', 'text-align', 'font-weight', 'font-style', 'text-decoration',
+    'width', 'height', 'border', 'border-color', 'border-width', 'border-style', 'vertical-align',
+]);
+const ALLOWED_ATTRS = new Set(['colspan', 'rowspan', 'span', 'width', 'class']);
 /**
- * Lekki edytor tekstu sformatowanego (contenteditable) z konfigurowalnym paskiem przycisków.
- * Wartość = HTML. Bez zależności zewnętrznych. Signal Forms.
+ * Lekki edytor tekstu sformatowanego (contenteditable) z konfigurowalnym paskiem sekcji.
+ * Narzędzia: schowek (kopiuj / wklej / wklej bez formatowania), styl (nagłówki H1–H6 / paragraf),
+ * bold/italic/underline/strike/ul/ol, kolor tekstu i tła (popover), wyrównania, link, czyszczenie.
+ * `toolbar` przyjmuje płaską listę lub grupy (sekcje). Wartość = HTML. Signal Forms.
+ * Wymaga stylów overlay CDK (popover kolorów): `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
- * <kpt-rich-text [formField]="f.body" [toolbar]="['bold','italic','ul','link']" />
+ * <kpt-rich-text [formField]="f.body" />
+ * <kpt-rich-text [(value)]="v" [toolbar]="[['bold','italic'],['ul','ol'],['link']]" />
  */
 class KptRichText {
     value = model('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    toolbar = input(['bold', 'italic', 'underline', 'strike', 'ul', 'ol', 'link', 'clear'], /* @ts-ignore */
+    toolbar = input(DEFAULT_TOOLBAR, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -1380,8 +2240,71 @@ class KptRichText {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
+    swatches = SWATCHES;
     editor = viewChild('editor', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    savedRange = null;
+    colorOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorOpen" }] : /* istanbul ignore next */ []));
+    colorKind = signal('foreColor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorKind" }] : /* istanbul ignore next */ []));
+    sourceView = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceView" }] : /* istanbul ignore next */ []));
+    styleOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleOpen" }] : /* istanbul ignore next */ []));
+    // ── Tabele ──
+    tableOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableOpen" }] : /* istanbul ignore next */ [])); // popover siatki wstawiania
+    gridR = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridR" }] : /* istanbul ignore next */ []));
+    gridC = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridC" }] : /* istanbul ignore next */ []));
+    gridRows = Array.from({ length: 8 }, (_, i) => i + 1);
+    gridCols = Array.from({ length: 8 }, (_, i) => i + 1);
+    menuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ [])); // menu kontekstowe
+    menuPoint = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuPoint" }] : /* istanbul ignore next */ []));
+    borderOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "borderOpen" }] : /* istanbul ignore next */ []));
+    borderTarget = signal('table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "borderTarget" }] : /* istanbul ignore next */ []));
+    ctxCell = null;
+    resize = null;
+    // Zaznaczanie wielu komórek
+    selCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selCount" }] : /* istanbul ignore next */ []));
+    selCells = new Set();
+    selAnchor = null;
+    selecting = false;
+    canSplitCtx = false;
+    styleOptions = [
+        { tag: 'p', label: 'Normalny' },
+        { tag: 'h1', label: 'Nagłówek 1' },
+        { tag: 'h2', label: 'Nagłówek 2' },
+        { tag: 'h3', label: 'Nagłówek 3' },
+        { tag: 'h4', label: 'Nagłówek 4' },
+        { tag: 'h5', label: 'Nagłówek 5' },
+        { tag: 'h6', label: 'Nagłówek 6' },
+    ];
+    styleLabel = computed(() => this.styleOptions.find((o) => o.tag === this.currentBlock())?.label ?? 'Normalny', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleLabel" }] : /* istanbul ignore next */ []));
+    activeCmds = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeCmds" }] : /* istanbul ignore next */ []));
+    currentBlock = signal('p', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentBlock" }] : /* istanbul ignore next */ []));
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
+    /** Sekcje paska (normalizacja płaskiej listy do jednej grupy). */
+    sections = computed(() => {
+        const t = this.toolbar();
+        if (t.length === 0)
+            return [];
+        return Array.isArray(t[0]) ? t : [t];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     constructor() {
         // Synchronizuj tylko przy zmianie zewnętrznej (bez resetu kursora podczas pisania).
         effect(() => {
@@ -1390,99 +2313,729 @@ class KptRichText {
             if (el && el.innerHTML !== v)
                 el.innerHTML = v;
         });
+        // Odzwierciedlenie stanu aktywnego narzędzi na podstawie zaznaczenia.
+        const onSel = () => this.refreshState();
+        const onMove = (e) => this.onResizeMove(e);
+        const onUp = () => this.onResizeEnd();
+        document.addEventListener('selectionchange', onSel);
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        inject(DestroyRef).onDestroy(() => {
+            document.removeEventListener('selectionchange', onSel);
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        });
     }
     icon(item) {
         return ICON[item];
     }
+    aria(item) {
+        return ARIA[item];
+    }
+    isActive(item) {
+        if (item === 'html')
+            return this.sourceView();
+        const cmd = COMMAND[item];
+        return !!cmd && this.activeCmds().has(cmd);
+    }
+    inEditor() {
+        const el = this.editor()?.nativeElement;
+        const sel = window.getSelection();
+        return !!el && !!sel && sel.rangeCount > 0 && el.contains(sel.anchorNode);
+    }
+    refreshState() {
+        if (this.disabled() || !this.inEditor())
+            return;
+        const active = new Set();
+        for (const cmd of Object.values(COMMAND)) {
+            if (cmd && cmd !== 'removeFormat') {
+                try {
+                    if (document.queryCommandState(cmd))
+                        active.add(cmd);
+                }
+                catch {
+                    /* nieobsługiwana komenda */
+                }
+            }
+        }
+        this.activeCmds.set(active);
+        // Bieżący blok (dla selecta stylu).
+        const sel = window.getSelection();
+        let node = sel?.anchorNode;
+        while (node && node !== this.editor()?.nativeElement) {
+            const tag = node.tagName?.toLowerCase();
+            if (tag && /^(h[1-6]|p|blockquote)$/.test(tag)) {
+                this.currentBlock.set(tag);
+                return;
+            }
+            node = node.parentElement;
+        }
+        this.currentBlock.set('p');
+    }
     onInput() {
         const el = this.editor()?.nativeElement;
         if (el)
             this.value.set(el.innerHTML);
     }
+    onSource(event) {
+        this.value.set(event.target.value);
+    }
+    focusEditor() {
+        this.editor()?.nativeElement.focus();
+    }
+    saveSelection() {
+        const sel = window.getSelection();
+        this.savedRange = sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
+    }
+    restoreSelection() {
+        const sel = window.getSelection();
+        if (this.savedRange && sel) {
+            sel.removeAllRanges();
+            sel.addRange(this.savedRange);
+        }
+    }
     exec(item) {
         if (this.disabled())
             return;
-        this.editor()?.nativeElement.focus();
-        if (item === 'link') {
-            const url = window.prompt('Adres URL:');
-            if (url)
-                document.execCommand('createLink', false, url);
+        if (item === 'html') {
+            this.sourceView.update((v) => !v);
+            return;
+        }
+        if (item === 'table') {
+            this.saveSelection();
+            this.tableOpen.set(true);
+            return;
+        }
+        this.focusEditor();
+        switch (item) {
+            case 'link': {
+                const url = window.prompt('Adres URL:');
+                if (url)
+                    document.execCommand('createLink', false, url);
+                break;
+            }
+            case 'copy':
+                document.execCommand('copy');
+                break;
+            case 'paste':
+                void this.pasteRich();
+                return;
+            case 'pasteText':
+                void this.pastePlain();
+                return;
+            default: {
+                const cmd = COMMAND[item];
+                if (cmd)
+                    document.execCommand(cmd);
+            }
+        }
+        this.onInput();
+        this.refreshState();
+    }
+    // ── Styl bloku (dropdown w stylu kpt-select, z podglądem wielkości) ──
+    openStyle() {
+        if (this.disabled())
+            return;
+        this.saveSelection();
+        this.styleOpen.set(true);
+    }
+    closeStyle() {
+        this.styleOpen.set(false);
+    }
+    pickStyle(tag) {
+        this.styleOpen.set(false);
+        this.focusEditor();
+        this.restoreSelection();
+        document.execCommand('formatBlock', false, `<${tag}>`);
+        this.onInput();
+        this.refreshState();
+    }
+    // ── Kolory ──
+    openColor(kind) {
+        if (this.disabled())
+            return;
+        this.saveSelection();
+        this.colorKind.set(kind);
+        this.colorOpen.set(true);
+    }
+    closeColor() {
+        this.colorOpen.set(false);
+    }
+    applyColor(color) {
+        this.colorOpen.set(false);
+        if (this.colorKind() === 'cellBg') {
+            for (const cell of this.activeCells())
+                cell.style.backgroundColor = color;
+            this.onInput();
+            return;
+        }
+        this.focusEditor();
+        this.restoreSelection();
+        if (this.colorKind() === 'foreColor') {
+            document.execCommand('foreColor', false, color);
+        }
+        else if (!document.execCommand('hiliteColor', false, color)) {
+            document.execCommand('backColor', false, color);
+        }
+        this.onInput();
+    }
+    onColorInput(event) {
+        this.applyColor(event.target.value);
+    }
+    // ── Schowek ──
+    async pasteRich() {
+        try {
+            const items = await navigator.clipboard.read();
+            for (const it of items) {
+                if (it.types.includes('text/html')) {
+                    const blob = await it.getType('text/html');
+                    const html = this.sanitizeHtml(await blob.text());
+                    this.focusEditor();
+                    document.execCommand('insertHTML', false, html);
+                    this.onInput();
+                    return;
+                }
+            }
+            const text = await navigator.clipboard.readText();
+            this.focusEditor();
+            document.execCommand('insertText', false, text);
+            this.onInput();
+        }
+        catch {
+            /* brak uprawnień / brak API — ignoruj */
+        }
+    }
+    async pastePlain() {
+        try {
+            const text = await navigator.clipboard.readText();
+            this.focusEditor();
+            document.execCommand('insertText', false, text);
+            this.onInput();
+        }
+        catch {
+            /* brak uprawnień / brak API — ignoruj */
+        }
+    }
+    /** Natywne wklejanie — oczyść (bez śmieci z Worda/WWW). */
+    onPaste(event) {
+        if (this.disabled())
+            return;
+        const html = event.clipboardData?.getData('text/html');
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        event.preventDefault();
+        if (html) {
+            document.execCommand('insertHTML', false, this.sanitizeHtml(html));
         }
         else {
-            document.execCommand(COMMAND[item]);
+            document.execCommand('insertText', false, text);
         }
         this.onInput();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRichText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptRichText, isStandalone: true, selector: "kpt-rich-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-rich-text-host" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="kpt-rich-text" [class.kpt-rich-text--invalid]="invalid()" [class.kpt-rich-text--disabled]="disabled()">
-      <div class="kpt-rich-text__toolbar" role="toolbar">
-        @for (item of toolbar(); track item) {
-          <button
-            type="button"
-            class="kpt-rich-text__tool"
-            [attr.aria-label]="item"
-            [disabled]="disabled()"
-            (mousedown)="$event.preventDefault()"
-            (click)="exec(item)"
-          ><kpt-icon [name]="icon(item)" /></button>
+    // ── Tabele: wstawianie ──
+    closeTable() {
+        this.tableOpen.set(false);
+        this.gridR.set(0);
+        this.gridC.set(0);
+    }
+    gridHover(r, c) {
+        this.gridR.set(r);
+        this.gridC.set(c);
+    }
+    insertTable(rows, cols) {
+        this.closeTable();
+        this.focusEditor();
+        this.restoreSelection();
+        const w = (100 / cols).toFixed(4);
+        const colgroup = `<colgroup>${Array.from({ length: cols }, () => `<col style="width:${w}%">`).join('')}</colgroup>`;
+        const row = `<tr>${Array.from({ length: cols }, () => '<td><br></td>').join('')}</tr>`;
+        const body = `<tbody>${Array.from({ length: rows }, () => row).join('')}</tbody>`;
+        const table = `<table class="kpt-rt-table">${colgroup}${body}</table>`;
+        document.execCommand('insertHTML', false, `${table}<p><br></p>`);
+        this.onInput();
+    }
+    // ── Tabele: menu kontekstowe ──
+    onContextMenu(event) {
+        if (this.disabled())
+            return;
+        const cell = event.target.closest('td, th');
+        const editor = this.editor()?.nativeElement;
+        if (!cell || !editor?.contains(cell))
+            return; // poza tabelą → natywne menu
+        event.preventDefault();
+        this.ctxCell = cell;
+        this.canSplitCtx = (cell.colSpan || 1) > 1 || (cell.rowSpan || 1) > 1;
+        this.menuPoint.set({ x: event.clientX, y: event.clientY });
+        this.menuOpen.set(true);
+    }
+    closeMenu() {
+        this.menuOpen.set(false);
+    }
+    ctxTable() {
+        return this.ctxCell?.closest('table') ?? null;
+    }
+    afterTableOp() {
+        this.menuOpen.set(false);
+        this.onInput();
+    }
+    insertColumn(dir) {
+        const cell = this.ctxCell;
+        const table = this.ctxTable();
+        if (!cell || !table)
+            return;
+        const idx = cell.cellIndex + (dir === 'right' ? 1 : 0);
+        for (const tr of Array.from(table.rows)) {
+            const td = document.createElement('td');
+            td.innerHTML = '<br>';
+            tr.insertBefore(td, tr.cells[idx] ?? null);
         }
-      </div>
-      <div
-        #editor
-        class="kpt-rich-text__editor"
-        [attr.contenteditable]="disabled() ? 'false' : 'true'"
-        [attr.data-placeholder]="placeholder()"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        role="textbox"
-        aria-multiline="true"
-        (input)="onInput()"
-        (blur)="touch.emit()"
-      ></div>
-    </div>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        const colgroup = table.querySelector('colgroup');
+        if (colgroup) {
+            const col = document.createElement('col');
+            colgroup.insertBefore(col, colgroup.children[idx] ?? null);
+            this.normalizeColWidths(table);
+        }
+        this.afterTableOp();
+    }
+    deleteColumn() {
+        const cell = this.ctxCell;
+        const table = this.ctxTable();
+        if (!cell || !table)
+            return;
+        const idx = cell.cellIndex;
+        if ((table.rows[0]?.cells.length ?? 0) <= 1) {
+            table.remove();
+            this.afterTableOp();
+            return;
+        }
+        for (const tr of Array.from(table.rows))
+            tr.cells[idx]?.remove();
+        table.querySelector('colgroup')?.children[idx]?.remove();
+        this.normalizeColWidths(table);
+        this.afterTableOp();
+    }
+    insertRow(dir) {
+        const cell = this.ctxCell;
+        const table = this.ctxTable();
+        if (!cell || !table)
+            return;
+        const tr = cell.parentElement;
+        const cols = tr.cells.length;
+        const newRow = document.createElement('tr');
+        newRow.innerHTML = Array.from({ length: cols }, () => '<td><br></td>').join('');
+        tr.parentElement?.insertBefore(newRow, dir === 'below' ? tr.nextSibling : tr);
+        this.afterTableOp();
+    }
+    deleteRow() {
+        const cell = this.ctxCell;
+        const table = this.ctxTable();
+        if (!cell || !table)
+            return;
+        if (table.rows.length <= 1) {
+            table.remove();
+            this.afterTableOp();
+            return;
+        }
+        cell.parentElement.remove();
+        this.afterTableOp();
+    }
+    /** Zamień komórki wiersza między `<td>` a `<th>` (wiersz nagłówka). */
+    toggleHeaderRow() {
+        const cell = this.ctxCell;
+        if (!cell)
+            return;
+        const tr = cell.parentElement;
+        const toHeader = tr.cells[0]?.tagName !== 'TH';
+        for (const c of Array.from(tr.cells))
+            this.swapCellTag(c, toHeader ? 'th' : 'td');
+        this.ctxCell = null; // komórki zostały podmienione
+        this.afterTableOp();
+    }
+    /** Zamień komórki kolumny między `<td>` a `<th>` (kolumna nagłówka). */
+    toggleHeaderColumn() {
+        const cell = this.ctxCell;
+        const table = this.ctxTable();
+        if (!cell || !table)
+            return;
+        const idx = cell.cellIndex;
+        const toHeader = cell.tagName !== 'TH';
+        for (const tr of Array.from(table.rows)) {
+            const c = tr.cells[idx];
+            if (c)
+                this.swapCellTag(c, toHeader ? 'th' : 'td');
+        }
+        this.ctxCell = null;
+        this.afterTableOp();
+    }
+    swapCellTag(cell, tag) {
+        if (cell.tagName.toLowerCase() === tag)
+            return;
+        const el = document.createElement(tag);
+        for (const a of Array.from(cell.attributes))
+            el.setAttribute(a.name, a.value);
+        el.append(...Array.from(cell.childNodes));
+        cell.replaceWith(el);
+    }
+    deleteTable() {
+        this.ctxTable()?.remove();
+        this.afterTableOp();
+    }
+    alignCell(a) {
+        for (const cell of this.activeCells())
+            cell.style.textAlign = a;
+        this.afterTableOp();
+    }
+    /** Komórki objęte operacją: zaznaczenie (jeśli jest) lub bieżąca komórka menu. */
+    activeCells() {
+        if (this.selCells.size)
+            return [...this.selCells];
+        return this.ctxCell ? [this.ctxCell] : [];
+    }
+    openCellBg() {
+        this.menuOpen.set(false);
+        this.colorKind.set('cellBg');
+        this.colorOpen.set(true);
+    }
+    // ── Obramowanie (tabela / komórka) ──
+    openBorder() {
+        this.menuOpen.set(false);
+        this.borderOpen.set(true);
+    }
+    closeBorder() {
+        this.borderOpen.set(false);
+    }
+    borderCells() {
+        if (this.borderTarget() === 'cell')
+            return this.activeCells();
+        const table = this.ctxTable();
+        return table ? Array.from(table.querySelectorAll('td, th')) : [];
+    }
+    setBorderWidth(w) {
+        const px = { thin: '1px', medium: '2px', thick: '3px' };
+        for (const cell of this.borderCells()) {
+            if (w === 'none') {
+                cell.style.borderStyle = 'none';
+                cell.style.borderWidth = '';
+            }
+            else {
+                cell.style.borderStyle = 'solid';
+                cell.style.borderWidth = px[w];
+            }
+        }
+        this.onInput();
+    }
+    setBorderColor(color) {
+        for (const cell of this.borderCells()) {
+            cell.style.borderColor = color;
+            if (!cell.style.borderStyle || cell.style.borderStyle === 'none')
+                cell.style.borderStyle = 'solid';
+            if (!cell.style.borderWidth)
+                cell.style.borderWidth = '1px';
+        }
+        this.onInput();
+    }
+    onBorderColorInput(event) {
+        this.setBorderColor(event.target.value);
+    }
+    normalizeColWidths(table) {
+        const cols = Array.from(table.querySelectorAll('col'));
+        const w = (100 / cols.length).toFixed(4);
+        for (const col of cols)
+            col.style.width = `${w}%`;
+    }
+    // ── Tabele: resize kolumn + zaznaczanie komórek ──
+    onEditorMouseDown(event) {
+        if (this.disabled() || event.button !== 0)
+            return; // tylko lewy przycisk
+        const cell = event.target.closest('td, th');
+        if (!cell) {
+            this.clearSelection();
+            return;
+        }
+        const rect = cell.getBoundingClientRect();
+        if (event.clientX >= rect.right - 6) {
+            // Strefa przy prawej krawędzi → resize kolumny.
+            const table = cell.closest('table');
+            const col = table?.querySelectorAll('col')[cell.cellIndex];
+            if (col) {
+                event.preventDefault();
+                this.resize = { col, startX: event.clientX, startW: col.getBoundingClientRect().width };
+                return;
+            }
+        }
+        // Start zaznaczania (potwierdzone dopiero przy ruchu).
+        this.clearSelection();
+        this.selAnchor = cell;
+        this.selecting = false;
+    }
+    onEditorMouseMove(event) {
+        const cell = event.target.closest('td, th');
+        const editor = this.editor()?.nativeElement;
+        if (!editor)
+            return;
+        const near = !!cell && event.clientX >= cell.getBoundingClientRect().right - 6;
+        editor.classList.toggle('is-col-resize', near || !!this.resize);
+    }
+    onResizeMove(event) {
+        if (this.resize) {
+            const w = Math.max(32, this.resize.startW + (event.clientX - this.resize.startX));
+            this.resize.col.style.width = `${w}px`;
+            return;
+        }
+        // Przeciąganie zaznaczenia komórek.
+        if (!this.selAnchor || !(event.buttons & 1))
+            return;
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const focus = target.closest('td, th');
+        if (!focus || focus.closest('table') !== this.selAnchor.closest('table'))
+            return;
+        if (focus === this.selAnchor && !this.selecting)
+            return;
+        this.selecting = true;
+        event.preventDefault();
+        window.getSelection()?.removeAllRanges();
+        this.selectRegion(this.selAnchor, focus);
+    }
+    onResizeEnd() {
+        if (this.resize) {
+            this.resize = null;
+            this.onInput();
+        }
+        if (this.selAnchor && !this.selecting)
+            this.clearSelection(); // zwykły klik
+        this.selAnchor = null;
+        this.selecting = false;
+    }
+    // ── Macierz siatki (uwzględnia colspan/rowspan) ──
+    buildGrid(table) {
+        const grid = [];
+        const pos = new Map();
+        const rows = Array.from(table.rows);
+        rows.forEach((tr, r) => {
+            grid[r] ??= [];
+            let c = 0;
+            for (const cell of Array.from(tr.cells)) {
+                while (grid[r][c])
+                    c++; // pomiń zajęte przez rowspan wyżej
+                const colspan = cell.colSpan || 1;
+                const rowspan = cell.rowSpan || 1;
+                pos.set(cell, { r, c, rowspan, colspan });
+                for (let dr = 0; dr < rowspan; dr++) {
+                    grid[r + dr] ??= [];
+                    for (let dc = 0; dc < colspan; dc++)
+                        grid[r + dr][c + dc] = cell;
+                }
+                c += colspan;
+            }
+        });
+        return { grid, pos };
+    }
+    selectRegion(anchor, focus) {
+        const table = anchor.closest('table');
+        if (!table)
+            return;
+        const { grid, pos } = this.buildGrid(table);
+        const a = pos.get(anchor);
+        const f = pos.get(focus);
+        if (!a || !f)
+            return;
+        let r0 = Math.min(a.r, f.r);
+        let c0 = Math.min(a.c, f.c);
+        let r1 = Math.max(a.r + a.rowspan - 1, f.r + f.rowspan - 1);
+        let c1 = Math.max(a.c + a.colspan - 1, f.c + f.colspan - 1);
+        // Rozszerz region, by w pełni objąć scalone komórki na brzegach.
+        for (let changed = true; changed;) {
+            changed = false;
+            for (let r = r0; r <= r1; r++) {
+                for (let c = c0; c <= c1; c++) {
+                    const cell = grid[r]?.[c];
+                    if (!cell)
+                        continue;
+                    const p = pos.get(cell);
+                    if (p.r < r0) {
+                        r0 = p.r;
+                        changed = true;
+                    }
+                    if (p.c < c0) {
+                        c0 = p.c;
+                        changed = true;
+                    }
+                    if (p.r + p.rowspan - 1 > r1) {
+                        r1 = p.r + p.rowspan - 1;
+                        changed = true;
+                    }
+                    if (p.c + p.colspan - 1 > c1) {
+                        c1 = p.c + p.colspan - 1;
+                        changed = true;
+                    }
+                }
+            }
+        }
+        const set = new Set();
+        for (let r = r0; r <= r1; r++) {
+            for (let c = c0; c <= c1; c++) {
+                const cell = grid[r]?.[c];
+                if (cell)
+                    set.add(cell);
+            }
+        }
+        this.clearSelection();
+        for (const cell of set)
+            cell.classList.add('kpt-rt-cell-sel');
+        this.selCells = set;
+        this.selCount.set(set.size);
+    }
+    clearSelection() {
+        for (const cell of this.selCells)
+            cell.classList.remove('kpt-rt-cell-sel');
+        this.selCells = new Set();
+        this.selCount.set(0);
+    }
+    // ── Scalanie / dzielenie ──
+    mergeCells() {
+        if (this.selCells.size < 2)
+            return;
+        const cells = [...this.selCells];
+        const table = cells[0].closest('table');
+        const { pos } = this.buildGrid(table);
+        let r0 = Infinity, c0 = Infinity, r1 = -1, c1 = -1;
+        for (const cell of cells) {
+            const p = pos.get(cell);
+            r0 = Math.min(r0, p.r);
+            c0 = Math.min(c0, p.c);
+            r1 = Math.max(r1, p.r + p.rowspan - 1);
+            c1 = Math.max(c1, p.c + p.colspan - 1);
+        }
+        const topLeft = cells.find((cell) => { const p = pos.get(cell); return p.r === r0 && p.c === c0; }) ?? cells[0];
+        // Przenieś niepustą treść pozostałych komórek do górnej-lewej.
+        for (const cell of cells) {
+            if (cell === topLeft)
+                continue;
+            const html = cell.innerHTML.trim();
+            if (html && html !== '<br>')
+                topLeft.innerHTML += ` ${html}`;
+            cell.remove();
+        }
+        const colspan = c1 - c0 + 1;
+        const rowspan = r1 - r0 + 1;
+        if (colspan > 1)
+            topLeft.colSpan = colspan;
+        else
+            topLeft.removeAttribute('colspan');
+        if (rowspan > 1)
+            topLeft.rowSpan = rowspan;
+        else
+            topLeft.removeAttribute('rowspan');
+        this.clearSelection();
+        this.menuOpen.set(false);
+        this.onInput();
+    }
+    splitCell() {
+        const cell = this.ctxCell;
+        if (!cell)
+            return;
+        const table = cell.closest('table');
+        const { pos } = this.buildGrid(table);
+        const p = pos.get(cell);
+        if (!p || (p.colspan <= 1 && p.rowspan <= 1))
+            return;
+        const tag = cell.tagName.toLowerCase();
+        cell.removeAttribute('colspan');
+        cell.removeAttribute('rowspan');
+        // Uzupełnij brakujące pozycje siatki pustymi komórkami (dla każdego pokrytego wiersza).
+        for (let dr = 0; dr < p.rowspan; dr++) {
+            const startCol = dr === 0 ? p.c + 1 : p.c; // origin zostaje w pierwszym wierszu
+            const count = dr === 0 ? p.colspan - 1 : p.colspan;
+            if (count <= 0)
+                continue;
+            const row = table.rows[p.r + dr];
+            const before = this.cellBeforeGridCol(row, p.c, table);
+            for (let i = 0; i < count; i++) {
+                const el = document.createElement(tag);
+                el.innerHTML = '<br>';
+                row.insertBefore(el, before);
+            }
+        }
+        this.menuOpen.set(false);
+        this.onInput();
+    }
+    /** Komórka w wierszu, przed którą wstawić (pierwsza o origin-col > gridCol), lub null (na koniec). */
+    cellBeforeGridCol(row, gridCol, table) {
+        const { pos } = this.buildGrid(table);
+        for (const cell of Array.from(row.cells)) {
+            const p = pos.get(cell);
+            if (p && p.c > gridCol)
+                return cell;
+        }
+        return null;
+    }
+    canMerge() {
+        return this.selCells.size >= 2;
+    }
+    canSplit() {
+        return this.canSplitCtx;
+    }
+    sanitizeHtml(html) {
+        const tpl = document.createElement('template');
+        tpl.innerHTML = html;
+        const walk = (root) => {
+            for (const el of Array.from(root.querySelectorAll('*'))) {
+                if (!ALLOWED_TAGS.has(el.tagName)) {
+                    el.replaceWith(...Array.from(el.childNodes));
+                    continue;
+                }
+                for (const attr of Array.from(el.attributes)) {
+                    const name = attr.name.toLowerCase();
+                    if (name.startsWith('on')) {
+                        el.removeAttribute(attr.name);
+                    }
+                    else if (name === 'href' || name === 'src') {
+                        if (/^\s*javascript:/i.test(attr.value))
+                            el.removeAttribute(attr.name);
+                    }
+                    else if (name === 'style') {
+                        const kept = attr.value
+                            .split(';')
+                            .map((s) => s.trim())
+                            .filter((s) => ALLOWED_STYLES.has(s.split(':')[0]?.trim().toLowerCase()));
+                        if (kept.length)
+                            el.setAttribute('style', kept.join('; '));
+                        else
+                            el.removeAttribute('style');
+                    }
+                    else if (!ALLOWED_ATTRS.has(name) && name !== 'color' && el.tagName !== 'A') {
+                        el.removeAttribute(attr.name);
+                    }
+                }
+            }
+        };
+        walk(tpl.content);
+        return tpl.innerHTML;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRichText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptRichText, isStandalone: true, selector: "kpt-rich-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-rich-text-host" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kpt-rich-text\" [class.kpt-rich-text--invalid]=\"invalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions; track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      aria-label=\"\u0179r\u00F3d\u0142o HTML\"\n      (input)=\"onSource($event)\"\n      (blur)=\"touch.emit()\"\n    ></textarea>\n  } @else {\n    <div\n      #editor\n      class=\"kpt-rich-text__editor\"\n      [attr.contenteditable]=\"disabled() ? 'false' : 'true'\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">Kolumna</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> Wstaw z lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> Wstaw z prawej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek kolumny</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> Usu\u0144 kolumn\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Wiersz</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> Wstaw powy\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> Wstaw poni\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek wiersza</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> Usu\u0144 wiersz</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Kom\u00F3rka</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> Kolor t\u0142a</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> Do lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> Wy\u015Brodkuj</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> Do prawej</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canMerge()\" (click)=\"mergeCells()\"><kpt-icon name=\"table\" /> Scal kom\u00F3rki</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> Podziel kom\u00F3rk\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> Obramowanie\u2026</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item kpt-rt-menu__item--danger\" (click)=\"deleteTable()\"><kpt-icon name=\"trash\" /> Usu\u0144 tabel\u0119</button>\n    </div>\n  </ng-template>\n\n  <!-- Popover obramowania (tabela / kom\u00F3rka) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"borderOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeBorder()\"\n    (detach)=\"closeBorder()\"\n  >\n    <div class=\"kpt-rt-border\" (mousedown)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-border__seg\">\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'table'\" (click)=\"borderTarget.set('table')\">Tabela</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">Kom\u00F3rka</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">Bez</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">Cienkie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">\u015Arednie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">Grube</button>\n      </div>\n      <div class=\"kpt-rich-text__swatches\">\n        @for (c of swatches; track c) {\n          <button type=\"button\" class=\"kpt-rich-text__swatch\" [style.background]=\"c\" [attr.aria-label]=\"c\" (click)=\"setBorderColor(c)\"></button>\n        }\n      </div>\n      <label class=\"kpt-rich-text__picker\">\n        <span>Kolor\u2026</span>\n        <input type=\"color\" (input)=\"onBorderColorInput($event)\" />\n      </label>\n    </div>\n  </ng-template>\n\n  <!-- Popover koloru t\u0142a kom\u00F3rki (z menu kontekstowego) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'cellBg'\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeColor()\"\n    (detach)=\"closeColor()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n  </ng-template>\n</div>\n\n<ng-template #paletteTpl>\n  <div class=\"kpt-rich-text__palette\" (mousedown)=\"$event.preventDefault()\">\n    <div class=\"kpt-rich-text__swatches\">\n      @for (c of swatches; track c) {\n        <button\n          type=\"button\"\n          class=\"kpt-rich-text__swatch\"\n          [style.background]=\"c\"\n          [attr.aria-label]=\"c\"\n          (click)=\"applyColor(c)\"\n        ></button>\n      }\n    </div>\n    <label class=\"kpt-rich-text__picker\">\n      <span>W\u0142asny\u2026</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KptTooltip, selector: "[kptTooltip]", inputs: ["kptTooltip", "kptTooltipPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRichText, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <div class="kpt-rich-text" [class.kpt-rich-text--invalid]="invalid()" [class.kpt-rich-text--disabled]="disabled()">
-      <div class="kpt-rich-text__toolbar" role="toolbar">
-        @for (item of toolbar(); track item) {
-          <button
-            type="button"
-            class="kpt-rich-text__tool"
-            [attr.aria-label]="item"
-            [disabled]="disabled()"
-            (mousedown)="$event.preventDefault()"
-            (click)="exec(item)"
-          ><kpt-icon [name]="icon(item)" /></button>
-        }
-      </div>
-      <div
-        #editor
-        class="kpt-rich-text__editor"
-        [attr.contenteditable]="disabled() ? 'false' : 'true'"
-        [attr.data-placeholder]="placeholder()"
-        [attr.aria-invalid]="invalid() ? 'true' : null"
-        role="textbox"
-        aria-multiline="true"
-        (input)="onInput()"
-        (blur)="touch.emit()"
-      ></div>
-    </div>
-  `, host: { class: 'kpt-rich-text-host' }, styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}}\n"] }]
+            args: [{ selector: 'kpt-rich-text', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], host: { class: 'kpt-rich-text-host' }, template: "<div class=\"kpt-rich-text\" [class.kpt-rich-text--invalid]=\"invalid()\" [class.kpt-rich-text--disabled]=\"disabled()\">\n  <div class=\"kpt-rich-text__toolbar\" role=\"toolbar\">\n    @for (section of sections(); track $index; let firstSection = $first) {\n      @if (!firstSection) {\n        <span class=\"kpt-rich-text__divider\" aria-hidden=\"true\"></span>\n      }\n      @for (item of section; track item) {\n        @switch (item) {\n          @case ('heading') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__style\"\n              cdkOverlayOrigin\n              #styleOrigin=\"cdkOverlayOrigin\"\n              [class.is-open]=\"styleOpen()\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-expanded]=\"styleOpen()\"\n              [kptTooltip]=\"aria(item)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openStyle()\"\n            >\n              <span>{{ styleLabel() }}</span>\n              <kpt-icon name=\"chevron-down\" class=\"kpt-rich-text__style-caret\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"styleOrigin\"\n              [cdkConnectedOverlayOpen]=\"styleOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeStyle()\"\n              (detach)=\"closeStyle()\"\n            >\n              <ul class=\"kpt-rich-text__style-panel\" role=\"listbox\">\n                @for (o of styleOptions; track o.tag) {\n                  <li\n                    class=\"kpt-rich-text__style-opt\"\n                    [class]=\"'kpt-rich-text__style-opt kpt-rich-text__style-opt--' + o.tag\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"currentBlock() === o.tag\"\n                    [class.is-selected]=\"currentBlock() === o.tag\"\n                    (click)=\"pickStyle(o.tag)\"\n                  >{{ o.label }}</li>\n                }\n              </ul>\n            </ng-template>\n          }\n          @case ('foreColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #foreOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('foreColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"foreOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'foreColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('backColor') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool kpt-rich-text__tool--color\"\n              cdkOverlayOrigin\n              #backOrigin=\"cdkOverlayOrigin\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"openColor('backColor')\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"backOrigin\"\n              [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'backColor'\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeColor()\"\n              (detach)=\"closeColor()\"\n            >\n              <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n            </ng-template>\n          }\n          @case ('table') {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              cdkOverlayOrigin\n              #tableOrigin=\"cdkOverlayOrigin\"\n              [class.is-active]=\"tableOpen()\"\n              [attr.aria-label]=\"aria(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"tableOrigin\"\n              [cdkConnectedOverlayOpen]=\"tableOpen()\"\n              [cdkConnectedOverlayPositions]=\"positions\"\n              [cdkConnectedOverlayHasBackdrop]=\"true\"\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n              (backdropClick)=\"closeTable()\"\n              (detach)=\"closeTable()\"\n            >\n              <div class=\"kpt-rt-grid-pop\" (mousedown)=\"$event.preventDefault()\">\n                <div class=\"kpt-rt-grid\" (mouseleave)=\"gridHover(0, 0)\">\n                  @for (r of gridRows; track r) {\n                    <div class=\"kpt-rt-grid__row\">\n                      @for (c of gridCols; track c) {\n                        <span\n                          class=\"kpt-rt-grid__cell\"\n                          [class.is-on]=\"r <= gridR() && c <= gridC()\"\n                          (mouseenter)=\"gridHover(r, c)\"\n                          (click)=\"insertTable(r, c)\"\n                        ></span>\n                      }\n                    </div>\n                  }\n                </div>\n                <div class=\"kpt-rt-grid__label\">{{ gridR() }} \u00D7 {{ gridC() }}</div>\n              </div>\n            </ng-template>\n          }\n          @default {\n            <button\n              type=\"button\"\n              class=\"kpt-rich-text__tool\"\n              [class.is-active]=\"isActive(item)\"\n              [attr.aria-label]=\"aria(item)\"\n              [attr.aria-pressed]=\"isActive(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled()\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"exec(item)\"\n            >\n              <kpt-icon [name]=\"icon(item)\" />\n            </button>\n          }\n        }\n      }\n    }\n  </div>\n  @if (sourceView()) {\n    <textarea\n      class=\"kpt-rich-text__source\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      spellcheck=\"false\"\n      aria-label=\"\u0179r\u00F3d\u0142o HTML\"\n      (input)=\"onSource($event)\"\n      (blur)=\"touch.emit()\"\n    ></textarea>\n  } @else {\n    <div\n      #editor\n      class=\"kpt-rich-text__editor\"\n      [attr.contenteditable]=\"disabled() ? 'false' : 'true'\"\n      [attr.data-placeholder]=\"placeholder()\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (paste)=\"onPaste($event)\"\n      (contextmenu)=\"onContextMenu($event)\"\n      (mousedown)=\"onEditorMouseDown($event)\"\n      (mousemove)=\"onEditorMouseMove($event)\"\n      (blur)=\"touch.emit()\"\n    ></div>\n  }\n\n  <!-- Menu kontekstowe tabeli (origin punktowy = pozycja kursora) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"menuOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeMenu()\"\n    (detach)=\"closeMenu()\"\n  >\n    <div class=\"kpt-rt-menu\" (contextmenu)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-menu__group\">Kolumna</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> Wstaw z lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> Wstaw z prawej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek kolumny</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> Usu\u0144 kolumn\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Wiersz</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> Wstaw powy\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> Wstaw poni\u017Cej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> Nag\u0142\u00F3wek wiersza</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> Usu\u0144 wiersz</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">Kom\u00F3rka</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> Kolor t\u0142a</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> Do lewej</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> Wy\u015Brodkuj</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> Do prawej</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canMerge()\" (click)=\"mergeCells()\"><kpt-icon name=\"table\" /> Scal kom\u00F3rki</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> Podziel kom\u00F3rk\u0119</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> Obramowanie\u2026</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item kpt-rt-menu__item--danger\" (click)=\"deleteTable()\"><kpt-icon name=\"trash\" /> Usu\u0144 tabel\u0119</button>\n    </div>\n  </ng-template>\n\n  <!-- Popover obramowania (tabela / kom\u00F3rka) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"borderOpen()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeBorder()\"\n    (detach)=\"closeBorder()\"\n  >\n    <div class=\"kpt-rt-border\" (mousedown)=\"$event.preventDefault()\">\n      <div class=\"kpt-rt-border__seg\">\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'table'\" (click)=\"borderTarget.set('table')\">Tabela</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">Kom\u00F3rka</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">Bez</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">Cienkie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">\u015Arednie</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">Grube</button>\n      </div>\n      <div class=\"kpt-rich-text__swatches\">\n        @for (c of swatches; track c) {\n          <button type=\"button\" class=\"kpt-rich-text__swatch\" [style.background]=\"c\" [attr.aria-label]=\"c\" (click)=\"setBorderColor(c)\"></button>\n        }\n      </div>\n      <label class=\"kpt-rich-text__picker\">\n        <span>Kolor\u2026</span>\n        <input type=\"color\" (input)=\"onBorderColorInput($event)\" />\n      </label>\n    </div>\n  </ng-template>\n\n  <!-- Popover koloru t\u0142a kom\u00F3rki (z menu kontekstowego) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"menuPoint()\"\n    [cdkConnectedOverlayOpen]=\"colorOpen() && colorKind() === 'cellBg'\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (backdropClick)=\"closeColor()\"\n    (detach)=\"closeColor()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"paletteTpl\" />\n  </ng-template>\n</div>\n\n<ng-template #paletteTpl>\n  <div class=\"kpt-rich-text__palette\" (mousedown)=\"$event.preventDefault()\">\n    <div class=\"kpt-rich-text__swatches\">\n      @for (c of swatches; track c) {\n        <button\n          type=\"button\"\n          class=\"kpt-rich-text__swatch\"\n          [style.background]=\"c\"\n          [attr.aria-label]=\"c\"\n          (click)=\"applyColor(c)\"\n        ></button>\n      }\n    </div>\n    <label class=\"kpt-rich-text__picker\">\n      <span>W\u0142asny\u2026</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);overflow:hidden;background:var(--kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-rich-text--disabled{opacity:.6}.kpt-rich-text__toolbar{display:flex;flex-wrap:wrap;gap:.15rem;padding:.3rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:var(--kpt-color-surface-variant)}.kpt-rich-text__tool{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__divider{width:var(--kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);padding-inline:.5rem;cursor:pointer}.kpt-rich-text__style span{flex:1;text-align:start}.kpt-rich-text__style:hover:not(:disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--kpt-form-field-border-focus)}.kpt-rich-text__style:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__style-caret{opacity:.6}.kpt-rich-text__editor{min-height:6rem;padding:var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);line-height:var(--kpt-font-line-height-normal, 1.5);color:var(--kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor h1{font-size:1.6em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h2{font-size:1.4em;font-weight:700;margin:.4em 0}.kpt-rich-text__editor h3{font-size:1.2em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h4{font-size:1.05em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h5{font-size:.95em;font-weight:600;margin:.4em 0}.kpt-rich-text__editor h6{font-size:.85em;font-weight:600;margin:.4em 0;text-transform:uppercase}.kpt-rich-text__editor blockquote{margin:.4em 0;padding-inline-start:.75rem;border-inline-start:3px solid var(--kpt-color-border-strong);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__editor .kpt-rt-table{border-collapse:collapse;table-layout:fixed;width:100%;margin:.5em 0}.kpt-rich-text__editor .kpt-rt-table td,.kpt-rich-text__editor .kpt-rt-table th{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);padding:.35rem .5rem;min-width:2rem;vertical-align:top;overflow-wrap:anywhere}.kpt-rich-text__editor .kpt-rt-table th{background:var(--kpt-color-surface-variant);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--kpt-color-primary);background:color-mix(in oklch,var(--kpt-color-primary) 12%,transparent)}.kpt-rich-text__editor.is-col-resize{cursor:col-resize}.kpt-rich-text__source{display:block;width:100%;box-sizing:border-box;min-height:6rem;padding:var(--kpt-space-3, .75rem);border:0;background:var(--kpt-color-surface-variant);color:var(--kpt-form-field-text);font-family:var(--kpt-font-family-mono, ui-monospace, monospace);font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5);resize:vertical;outline:none}.kpt-rich-text__style-panel{min-width:11rem;margin:0;padding:.25rem;list-style:none;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--kpt-color-muted);color:var(--kpt-color-primary)}.kpt-rich-text__style-opt--p{font-size:.95rem}.kpt-rich-text__style-opt--h1{font-size:1.7rem;font-weight:700}.kpt-rich-text__style-opt--h2{font-size:1.45rem;font-weight:700}.kpt-rich-text__style-opt--h3{font-size:1.25rem;font-weight:600}.kpt-rich-text__style-opt--h4{font-size:1.1rem;font-weight:600}.kpt-rich-text__style-opt--h5{font-size:1rem;font-weight:600}.kpt-rich-text__style-opt--h6{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpt-rich-text__palette{padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rich-text__swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.kpt-rich-text__swatch{width:1.4rem;height:1.4rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-rich-text__swatch:hover{transform:scale(1.1)}.kpt-rich-text__picker{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-2, .5rem);margin-top:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--kpt-space-2, .5rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-grid{display:flex;flex-direction:column;gap:3px}.kpt-rt-grid__row{display:flex;gap:3px}.kpt-rt-grid__cell{width:1rem;height:1rem;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--kpt-space-2, .5rem);text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--kpt-color-muted)}.kpt-rt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-rt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-rt-menu__item.is-disabled{opacity:.4;pointer-events:none}.kpt-rt-menu__sep{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--kpt-color-muted)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
 
 /**
  * Suwak wartości (slider) na Signal Forms.
+ * W trybie `range` udostępnia dwa uchwyty, a wartość jest parą `[min, max]`.
  *
  * @example
  * <kpt-slider [formField]="f.volume" [min]="0" [max]="100" [step]="5" showValue />
+ * <kpt-slider range [(value)]="zakres" [min]="0" [max]="100" showValue />
  */
 class KptSlider {
     value = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    // Typ zgodny z FormValueControl (FormField może zsync-ować z walidatorami min/max).
+    /** Tryb zakresu: dwa uchwyty; wartość jako para `[min, max]`. */
+    range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Typ zgodny z FormValueControl<KptSliderValue> (FormField może zsync-ować walidatory min/max).
+    // W praktyce zawsze liczby — do matematyki/szablonu używamy skalarnych `minN`/`maxN`.
     min = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(100, /* @ts-ignore */
@@ -1494,52 +3047,156 @@ class KptSlider {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     touch = output();
-    percent = computed(() => {
-        const mn = this.min() ?? 0;
-        const mx = this.max() ?? 100;
-        const range = mx - mn;
-        return range <= 0 ? 0 : ((this.value() - mn) / range) * 100;
+    // Skalarne granice do szablonu i obliczeń (min/max są typowane szeroko dla FormValueControl).
+    toNum(v, fallback) {
+        return typeof v === 'number' ? v : fallback;
+    }
+    minN = computed(() => this.toNum(this.min(), 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minN" }] : /* istanbul ignore next */ []));
+    maxN = computed(() => this.toNum(this.max(), 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxN" }] : /* istanbul ignore next */ []));
+    /** Bieżąca para `[low, high]` — również dla trybu pojedynczego (low = min). */
+    pair = computed(() => {
+        const v = this.value();
+        if (Array.isArray(v))
+            return [v[0], v[1]];
+        return [this.minN(), v];
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "pair" }] : /* istanbul ignore next */ []));
+    single = computed(() => {
+        const v = this.value();
+        return Array.isArray(v) ? v[1] : v;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "single" }] : /* istanbul ignore next */ []));
+    low = computed(() => this.pair()[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
+    high = computed(() => this.pair()[1], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
+    setLow(v) {
+        const [, hi] = this.pair();
+        this.value.set([Math.min(v, hi), hi]);
+    }
+    setHigh(v) {
+        const [lo] = this.pair();
+        this.value.set([lo, Math.max(v, lo)]);
+    }
+    pct(val) {
+        const mn = this.minN();
+        const mx = this.maxN();
+        const range = mx - mn;
+        return range <= 0 ? 0 : ((val - mn) / range) * 100;
+    }
+    lowPct = computed(() => this.pct(this.low()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lowPct" }] : /* istanbul ignore next */ []));
+    highPct = computed(() => this.pct(this.high()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highPct" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSlider, isStandalone: true, selector: "kpt-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-slider-host" }, ngImport: i0, template: `
-    <input
-      class="kpt-slider__input"
-      type="range"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [value]="value()"
-      [disabled]="disabled()"
-      [style.--_pct.%]="percent()"
-      (input)="value.set(+$any($event.target).value)"
-      (change)="touch.emit()"
-    />
-    @if (showValue()) {
-      <span class="kpt-slider__value">{{ value() }}</span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptSlider, isStandalone: true, selector: "kpt-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-slider-host" }, ngImport: i0, template: `
+    @if (range()) {
+      <div class="kpt-slider__range">
+        <div class="kpt-slider__rail"></div>
+        <div class="kpt-slider__fill" [style.left.%]="lowPct()" [style.right.%]="100 - highPct()"></div>
+        <input
+          class="kpt-slider__thumb kpt-slider__thumb--low"
+          type="range"
+          [min]="minN()"
+          [max]="maxN()"
+          [step]="step()"
+          [value]="low()"
+          [disabled]="disabled()"
+          [attr.aria-label]="'Minimum'"
+          (input)="setLow(+$any($event.target).value)"
+          (change)="touch.emit()"
+        />
+        <input
+          class="kpt-slider__thumb kpt-slider__thumb--high"
+          type="range"
+          [min]="minN()"
+          [max]="maxN()"
+          [step]="step()"
+          [value]="high()"
+          [disabled]="disabled()"
+          [attr.aria-label]="'Maksimum'"
+          (input)="setHigh(+$any($event.target).value)"
+          (change)="touch.emit()"
+        />
+      </div>
+      @if (showValue()) {
+        <span class="kpt-slider__value">{{ low() }}–{{ high() }}</span>
+      }
+    } @else {
+      <input
+        class="kpt-slider__input"
+        type="range"
+        [min]="minN()"
+        [max]="maxN()"
+        [step]="step()"
+        [value]="single()"
+        [disabled]="disabled()"
+        [style.--_pct.%]="highPct()"
+        (input)="value.set(+$any($event.target).value)"
+        (change)="touch.emit()"
+      />
+      @if (showValue()) {
+        <span class="kpt-slider__value">{{ single() }}</span>
+      }
     }
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-slider-host{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-slider__input{--_pct: 0%;flex:1;height:1.25rem;appearance:none;background:none;cursor:pointer}.kpt-slider__input::-webkit-slider-runnable-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:linear-gradient(to right,var(--kpt-color-primary) var(--_pct),var(--kpt-color-surface-variant) var(--_pct))}.kpt-slider__input::-moz-range-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__input::-moz-range-progress{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__input::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input::-moz-range-thumb{width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input:focus-visible{outline:none}.kpt-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:disabled{opacity:.5;cursor:not-allowed}.kpt-slider__value{min-width:2.5rem;text-align:end;font-size:var(--kpt-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-slider-host{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-slider__input{--_pct: 0%;flex:1;height:1.25rem;appearance:none;background:none;cursor:pointer}.kpt-slider__input::-webkit-slider-runnable-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:linear-gradient(to right,var(--kpt-color-primary) var(--_pct),var(--kpt-color-surface-variant) var(--_pct))}.kpt-slider__input::-moz-range-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__input::-moz-range-progress{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__input::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input::-moz-range-thumb{width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input:focus-visible{outline:none}.kpt-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:disabled{opacity:.5;cursor:not-allowed}.kpt-slider__value{min-width:2.5rem;text-align:end;font-size:var(--kpt-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface)}.kpt-slider__range{position:relative;flex:1;height:1.25rem;display:flex;align-items:center}.kpt-slider__rail{position:absolute;inset-inline:0;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__fill{position:absolute;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__thumb{position:absolute;inset-inline:0;width:100%;height:1.25rem;margin:0;appearance:none;background:none;pointer-events:none}.kpt-slider__thumb::-webkit-slider-runnable-track{height:.4rem;background:none}.kpt-slider__thumb::-moz-range-track{height:.4rem;background:none}.kpt-slider__thumb::-webkit-slider-thumb{pointer-events:auto;appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb::-moz-range-thumb{pointer-events:auto;width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb:focus-visible{outline:none}.kpt-slider__thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb--high{z-index:1}.kpt-slider__thumb:disabled{opacity:.5;cursor:not-allowed}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptSlider, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-slider', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <input
-      class="kpt-slider__input"
-      type="range"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [value]="value()"
-      [disabled]="disabled()"
-      [style.--_pct.%]="percent()"
-      (input)="value.set(+$any($event.target).value)"
-      (change)="touch.emit()"
-    />
-    @if (showValue()) {
-      <span class="kpt-slider__value">{{ value() }}</span>
+    @if (range()) {
+      <div class="kpt-slider__range">
+        <div class="kpt-slider__rail"></div>
+        <div class="kpt-slider__fill" [style.left.%]="lowPct()" [style.right.%]="100 - highPct()"></div>
+        <input
+          class="kpt-slider__thumb kpt-slider__thumb--low"
+          type="range"
+          [min]="minN()"
+          [max]="maxN()"
+          [step]="step()"
+          [value]="low()"
+          [disabled]="disabled()"
+          [attr.aria-label]="'Minimum'"
+          (input)="setLow(+$any($event.target).value)"
+          (change)="touch.emit()"
+        />
+        <input
+          class="kpt-slider__thumb kpt-slider__thumb--high"
+          type="range"
+          [min]="minN()"
+          [max]="maxN()"
+          [step]="step()"
+          [value]="high()"
+          [disabled]="disabled()"
+          [attr.aria-label]="'Maksimum'"
+          (input)="setHigh(+$any($event.target).value)"
+          (change)="touch.emit()"
+        />
+      </div>
+      @if (showValue()) {
+        <span class="kpt-slider__value">{{ low() }}–{{ high() }}</span>
+      }
+    } @else {
+      <input
+        class="kpt-slider__input"
+        type="range"
+        [min]="minN()"
+        [max]="maxN()"
+        [step]="step()"
+        [value]="single()"
+        [disabled]="disabled()"
+        [style.--_pct.%]="highPct()"
+        (input)="value.set(+$any($event.target).value)"
+        (change)="touch.emit()"
+      />
+      @if (showValue()) {
+        <span class="kpt-slider__value">{{ single() }}</span>
+      }
     }
-  `, host: { class: 'kpt-slider-host' }, styles: ["@layer kpt.components{.kpt-slider-host{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-slider__input{--_pct: 0%;flex:1;height:1.25rem;appearance:none;background:none;cursor:pointer}.kpt-slider__input::-webkit-slider-runnable-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:linear-gradient(to right,var(--kpt-color-primary) var(--_pct),var(--kpt-color-surface-variant) var(--_pct))}.kpt-slider__input::-moz-range-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__input::-moz-range-progress{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__input::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input::-moz-range-thumb{width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input:focus-visible{outline:none}.kpt-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:disabled{opacity:.5;cursor:not-allowed}.kpt-slider__value{min-width:2.5rem;text-align:end;font-size:var(--kpt-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface)}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", 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"] }] } });
+  `, host: { class: 'kpt-slider-host' }, styles: ["@layer kpt.components{.kpt-slider-host{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-slider__input{--_pct: 0%;flex:1;height:1.25rem;appearance:none;background:none;cursor:pointer}.kpt-slider__input::-webkit-slider-runnable-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:linear-gradient(to right,var(--kpt-color-primary) var(--_pct),var(--kpt-color-surface-variant) var(--_pct))}.kpt-slider__input::-moz-range-track{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__input::-moz-range-progress{height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__input::-webkit-slider-thumb{appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input::-moz-range-thumb{width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1)}.kpt-slider__input:focus-visible{outline:none}.kpt-slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__input:disabled{opacity:.5;cursor:not-allowed}.kpt-slider__value{min-width:2.5rem;text-align:end;font-size:var(--kpt-font-size-sm, .875rem);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface)}.kpt-slider__range{position:relative;flex:1;height:1.25rem;display:flex;align-items:center}.kpt-slider__rail{position:absolute;inset-inline:0;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-surface-variant)}.kpt-slider__fill{position:absolute;height:.4rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-primary)}.kpt-slider__thumb{position:absolute;inset-inline:0;width:100%;height:1.25rem;margin:0;appearance:none;background:none;pointer-events:none}.kpt-slider__thumb::-webkit-slider-runnable-track{height:.4rem;background:none}.kpt-slider__thumb::-moz-range-track{height:.4rem;background:none}.kpt-slider__thumb::-webkit-slider-thumb{pointer-events:auto;appearance:none;width:1.1rem;height:1.1rem;margin-top:-.35rem;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb::-moz-range-thumb{pointer-events:auto;width:1.1rem;height:1.1rem;border:0;border-radius:50%;background:var(--kpt-color-primary);box-shadow:var(--kpt-elevation-1);cursor:pointer}.kpt-slider__thumb:focus-visible{outline:none}.kpt-slider__thumb:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklch,var(--kpt-color-focus-ring) 30%,transparent)}.kpt-slider__thumb--high{z-index:1}.kpt-slider__thumb:disabled{opacity:.5;cursor:not-allowed}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", 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"] }] } });
 
 /**
  * Ocena gwiazdkami (rating) na Signal Forms.
@@ -1822,17 +3479,16 @@ const MONTHS = [
 ];
 const pad = (n) => String(n).padStart(2, '0');
 const toIso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-const fmt = (iso) => {
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-    return m ? `${m[3]}.${m[2]}.${m[1]}` : '';
-};
 /**
  * Wybór zakresu dat z kalendarzem (CDK Overlay), Signal Forms.
- * Wartość: `{ start: 'RRRR-MM-DD', end: 'RRRR-MM-DD' }`.
+ * `mode`: 'date' (domyślnie), 'datetime' (data+godzina, tarcza zegara), 'time' (sama godzina).
+ * Wartość: `{ start, end }` — daty 'RRRR-MM-DD', datetime 'RRRR-MM-DDTHH:mm', godziny 'HH:mm'.
  * Wymaga `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
  * <kpt-date-range [formField]="f.period" />
+ * <kpt-date-range mode="datetime" [hourFormat]="12" [(value)]="span" />
+ * <kpt-date-range mode="time" [(value)]="hours" />
  */
 class KptDateRange {
     value = model({ start: '', end: '' }, /* @ts-ignore */
@@ -1843,12 +3499,30 @@ class KptDateRange {
     touch = output();
     placeholder = input('Wybierz zakres', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    displayFormat = input('pl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
+    mode = input('date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    hourFormat = input(24, { ...(ngDevMode ? { debugName: "hourFormat" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    minuteStep = input(1, { ...(ngDevMode ? { debugName: "minuteStep" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     weekdays = WEEKDAYS;
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     today = new Date();
     view = signal({ y: this.today.getFullYear(), m: this.today.getMonth() }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    // ── Bufory czasu (tryby datetime/time) ──
+    startTime = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startTime" }] : /* istanbul ignore next */ []));
+    endTime = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endTime" }] : /* istanbul ignore next */ []));
+    timeEnd = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeEnd" }] : /* istanbul ignore next */ [])); // który koniec edytuje tarcza
+    // Daty zakresu (część kalendarzowa dla datetime — bez czasu)
+    startDate = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
+    endDate = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
     positions = [
         { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
         { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
@@ -1858,16 +3532,53 @@ class KptDateRange {
         return `${MONTHS[m]} ${y}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    datePart(v) {
+        return v ? v.slice(0, 10) : '';
+    }
+    timePart(v) {
+        const m = /[T ](\d{2}:\d{2})$/.exec(v);
+        return m ? m[1] : '';
+    }
+    fmtDate(iso) {
+        const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+        if (!m)
+            return '';
+        return this.displayFormat() === 'iso' ? `${m[1]}-${m[2]}-${m[3]}` : `${m[3]}.${m[2]}.${m[1]}`;
+    }
+    fmtTime(hhmm) {
+        const m = /^(\d{2}):(\d{2})$/.exec(hhmm);
+        if (!m)
+            return '';
+        if (this.hourFormat() === 12) {
+            const h = +m[1];
+            const h12 = h % 12 === 0 ? 12 : h % 12;
+            return `${h12}:${m[2]} ${h < 12 ? 'AM' : 'PM'}`;
+        }
+        return hhmm;
+    }
     display = computed(() => {
         const { start, end } = this.value();
         if (!start)
             return '';
-        return end ? `${fmt(start)} – ${fmt(end)}` : `${fmt(start)} – …`;
+        const mode = this.mode();
+        if (mode === 'time') {
+            return end ? `${this.fmtTime(start)} – ${this.fmtTime(end)}` : `${this.fmtTime(start)} – …`;
+        }
+        if (mode === 'datetime') {
+            const one = (v) => {
+                const d = this.fmtDate(this.datePart(v));
+                const t = this.fmtTime(this.timePart(v));
+                return t ? `${d} ${t}` : d;
+            };
+            return end ? `${one(start)} – ${one(end)}` : `${one(start)} – …`;
+        }
+        return end ? `${this.fmtDate(start)} – ${this.fmtDate(end)}` : `${this.fmtDate(start)} – …`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     weeks = computed(() => {
         const { y, m } = this.view();
-        const { start, end } = this.value();
+        const start = this.mode() === 'datetime' ? this.startDate() : this.value().start;
+        const end = this.mode() === 'datetime' ? this.endDate() : this.value().end;
         const first = new Date(y, m, 1);
         const startOffset = (first.getDay() + 6) % 7;
         const gridStart = new Date(y, m, 1 - startOffset);
@@ -1896,9 +3607,21 @@ class KptDateRange {
         if (this.disabled())
             return;
         if (!this.open()) {
-            const start = this.value().start;
-            const d = start ? new Date(start) : this.today;
+            const { start, end } = this.value();
+            const base = this.datePart(start) || toIso(this.today);
+            const d = new Date(base);
             this.view.set({ y: d.getFullYear(), m: d.getMonth() });
+            if (this.mode() === 'datetime') {
+                this.startDate.set(this.datePart(start));
+                this.endDate.set(this.datePart(end));
+                this.startTime.set(this.timePart(start) || '00:00');
+                this.endTime.set(this.timePart(end) || '00:00');
+            }
+            else if (this.mode() === 'time') {
+                this.startTime.set(/^\d{2}:\d{2}$/.test(start) ? start : '00:00');
+                this.endTime.set(/^\d{2}:\d{2}$/.test(end) ? end : '00:00');
+            }
+            this.timeEnd.set('start');
         }
         this.open.update((o) => !o);
     }
@@ -1909,6 +3632,22 @@ class KptDateRange {
         this.touch.emit();
     }
     selectDay(cell) {
+        if (this.mode() === 'datetime') {
+            const start = this.startDate();
+            const end = this.endDate();
+            if (!start || (start && end)) {
+                this.startDate.set(cell.iso);
+                this.endDate.set('');
+            }
+            else if (cell.iso < start) {
+                this.endDate.set(start);
+                this.startDate.set(cell.iso);
+            }
+            else {
+                this.endDate.set(cell.iso);
+            }
+            return; // czas do wyboru → zamknięcie przez „Gotowe"
+        }
         const { start, end } = this.value();
         if (!start || (start && end)) {
             this.value.set({ start: cell.iso, end: '' });
@@ -1921,6 +3660,26 @@ class KptDateRange {
             this.close();
         }
     }
+    commit() {
+        if (this.mode() === 'time') {
+            const s = this.startTime() || '00:00';
+            const e = this.endTime() || '00:00';
+            // Normalizacja kolejności (start ≤ end).
+            this.value.set(s <= e ? { start: s, end: e } : { start: e, end: s });
+        }
+        else if (this.mode() === 'datetime') {
+            const sd = this.startDate();
+            const ed = this.endDate() || sd;
+            if (!sd) {
+                this.close();
+                return;
+            }
+            const start = `${sd}T${this.startTime() || '00:00'}`;
+            const end = `${ed}T${this.endTime() || '00:00'}`;
+            this.value.set(start <= end ? { start, end } : { start: end, end: start });
+        }
+        this.close();
+    }
     prevMonth() {
         this.view.update(({ y, m }) => (m === 0 ? { y: y - 1, m: 11 } : { y, m: m - 1 }));
     }
@@ -1930,14 +3689,16 @@ class KptDateRange {
     clear(event) {
         event.stopPropagation();
         this.value.set({ start: '', end: '' });
+        this.startDate.set('');
+        this.endDate.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDateRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDateRange, isStandalone: true, selector: "kpt-date-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-date-range-host" }, ngImport: i0, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" (keydown.escape)=\"close()\">\n    <div class=\"kpt-calendar__header\">\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n      <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n    </div>\n    <div class=\"kpt-calendar__weekdays\">\n      @for (wd of weekdays; track wd) {\n        <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n      }\n    </div>\n    <div class=\"kpt-calendar__grid\">\n      @for (week of weeks(); track $index) {\n        @for (cell of week; track cell.iso) {\n          <button\n            type=\"button\"\n            class=\"kpt-calendar__day\"\n            [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n            [class.kpt-calendar__day--range]=\"cell.inRange\"\n            [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n            (click)=\"selectDay(cell)\"\n          >{{ cell.day }}</button>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDateRange, isStandalone: true, selector: "kpt-date-range", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, host: { classAttribute: "kpt-date-range-host" }, ngImport: i0, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays; track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od (godzina)</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec (godzina)</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptClock, selector: "kpt-clock", inputs: ["value", "hourFormat", "minuteStep"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDateRange, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" (keydown.escape)=\"close()\">\n    <div class=\"kpt-calendar__header\">\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n      <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n      <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n    </div>\n    <div class=\"kpt-calendar__weekdays\">\n      @for (wd of weekdays; track wd) {\n        <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n      }\n    </div>\n    <div class=\"kpt-calendar__grid\">\n      @for (week of weeks(); track $index) {\n        @for (cell of week; track cell.iso) {\n          <button\n            type=\"button\"\n            class=\"kpt-calendar__day\"\n            [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n            [class.kpt-calendar__day--range]=\"cell.inRange\"\n            [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n            (click)=\"selectDay(cell)\"\n          >{{ cell.day }}</button>\n        }\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+            args: [{ selector: 'kpt-date-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-date-range-host' }, template: "<div\n  class=\"kpt-date-range\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-date-range--open]=\"open()\"\n  [class.kpt-date-range--disabled]=\"disabled()\"\n  [class.kpt-date-range--invalid]=\"invalid()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-date-range__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-date-range__placeholder\">{{ placeholder() }}</span>\n  }\n  <span class=\"kpt-date-range__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-date-range__clear\" (click)=\"clear($event)\" aria-label=\"Wyczy\u015B\u0107\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-date-range__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"mode() === 'time'\" (keydown.escape)=\"close()\">\n    @if (mode() === 'time') {\n      <div class=\"kpt-range-tabs\">\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od</button>\n        <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec</button>\n      </div>\n      @if (timeEnd() === 'start') {\n        <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      } @else {\n        <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n      }\n      <div class=\"kpt-calendar__footer\">\n        <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n      </div>\n    } @else {\n      <div class=\"kpt-calendar__header\">\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" aria-label=\"Poprzedni miesi\u0105c\"><kpt-icon name=\"chevron-left\" /></button>\n        <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n        <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" aria-label=\"Nast\u0119pny miesi\u0105c\"><kpt-icon name=\"chevron-right\" /></button>\n      </div>\n      <div class=\"kpt-calendar__weekdays\">\n        @for (wd of weekdays; track wd) {\n          <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n        }\n      </div>\n      <div class=\"kpt-calendar__grid\">\n        @for (week of weeks(); track $index) {\n          @for (cell of week; track cell.iso) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__day\"\n              [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n              [class.kpt-calendar__day--range]=\"cell.inRange\"\n              [class.kpt-calendar__day--selected]=\"cell.isStart || cell.isEnd\"\n              (click)=\"selectDay(cell)\"\n            >{{ cell.day }}</button>\n          }\n        }\n      </div>\n\n      @if (mode() === 'datetime') {\n        <div class=\"kpt-range-tabs\">\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'start'\" (click)=\"timeEnd.set('start')\">Od (godzina)</button>\n          <button type=\"button\" [class.is-active]=\"timeEnd() === 'end'\" (click)=\"timeEnd.set('end')\">Koniec (godzina)</button>\n        </div>\n        @if (timeEnd() === 'start') {\n          <kpt-clock [value]=\"startTime()\" (valueChange)=\"startTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        } @else {\n          <kpt-clock [value]=\"endTime()\" (valueChange)=\"endTime.set($event)\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">Gotowe</kpt-button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-date-range-host{display:block}.kpt-date-range{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-date-range:hover:not(.kpt-date-range--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-date-range:focus-visible,.kpt-date-range.kpt-date-range--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-date-range.kpt-date-range--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-date-range.kpt-date-range--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-date-range__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-date-range__spacer{flex:1}.kpt-date-range__icon{color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear{display:inline-flex;border:0;background:none;cursor:pointer;padding:0;color:var(--kpt-color-on-surface-muted)}.kpt-date-range__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--range{background:color-mix(in oklch,var(--kpt-color-primary) 14%,transparent);border-radius:0}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}.kpt-range-tabs{display:flex;gap:var(--kpt-space-1, .25rem);margin-block:var(--kpt-space-3, .75rem) var(--kpt-space-2, .5rem);padding:2px;background:var(--kpt-color-surface-variant);border-radius:var(--kpt-radius-md, .5rem)}.kpt-range-tabs button{flex:1;border:0;background:none;padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-range-tabs button.is-active{background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500);box-shadow:var(--kpt-elevation-1)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], 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"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }] } });
 
 /**
  * Pole liczbowe ze strzałkami krokowania na Signal Forms. Wartość = number | null.
@@ -2163,6 +3924,7 @@ class KptInputOtp {
         if (this.integerOnly() && !/\d/.test(ch))
             ch = '';
         this.setChar(i, ch);
+        el.value = this.charAt(i); // sync DOM z modelem — kasuje odrzucony/znormalizowany znak
         if (ch)
             this.focusSibling(el, 1);
     }
@@ -2663,7 +4425,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 /**
  * Karta Koncept UI — powierzchnia z wyniesieniem (elevated) lub obramowaniem (outlined).
  * Opcjonalny nagłówek przez `header`; treść przez projekcję. Stopkę wstaw z atrybutem
- * `kptCardFooter`.
+ * `kptCardFooter`. Dla bogatych układów (media/profil) ustaw `flush` (body bez paddingu)
+ * i użyj reużywalnych klas: `kpt-card__media`, `__lead`, `__title`, `__subtitle`,
+ * `__section`, `__tags`, `__meta`, `__avatar`, `__actions`.
  *
  * @example
  * <kpt-card header="Ustawienia">
@@ -2678,16 +4442,18 @@ class KptCard {
     /** Opcjonalny tekst nagłówka. */
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    /** Body bez wewnętrznego paddingu — dla układów zarządzających własnymi sekcjami. */
+    flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptCard, isStandalone: true, selector: "kpt-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "kpt-card" }, ngImport: i0, template: "@if (header()) {\n  <div class=\"kpt-card__header\">{{ header() }}</div>\n}\n<div class=\"kpt-card__body\">\n  <ng-content />\n</div>\n<ng-content select=\"[kptCardFooter]\" />\n", styles: ["@layer kpt.components{.kpt-card{display:block;background:var(--kpt-card-bg);color:var(--kpt-card-fg);border-radius:var(--kpt-card-radius, .75rem);border:var(--kpt-border-width-thin, 1px) solid transparent}.kpt-card[data-variant=elevated]{box-shadow:var(--kpt-card-shadow);border-color:var(--kpt-card-border)}.kpt-card[data-variant=outlined]{border-color:var(--kpt-card-border)}.kpt-card__header{padding:var(--kpt-card-padding, 1.5rem);padding-bottom:0;font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-card__body{padding:var(--kpt-card-padding, 1.5rem)}.kpt-card [kptCardFooter]{display:flex;gap:var(--kpt-space-3, .75rem);align-items:center;padding:var(--kpt-card-padding, 1.5rem);padding-top:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptCard, isStandalone: true, selector: "kpt-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "kpt-card" }, ngImport: i0, template: "@if (header()) {\n  <div class=\"kpt-card__header\">{{ header() }}</div>\n}\n<div class=\"kpt-card__body\" [class.kpt-card__body--flush]=\"flush()\">\n  <ng-content />\n</div>\n<ng-content select=\"[kptCardFooter]\" />\n", styles: ["@layer kpt.components{.kpt-card{display:block;background:var(--kpt-card-bg);color:var(--kpt-card-fg);border-radius:var(--kpt-card-radius, .75rem);border:var(--kpt-border-width-thin, 1px) solid transparent;overflow:clip}.kpt-card[data-variant=elevated]{box-shadow:var(--kpt-card-shadow);border-color:var(--kpt-card-border)}.kpt-card[data-variant=outlined]{border-color:var(--kpt-card-border)}.kpt-card__header{padding:var(--kpt-card-padding, 1.5rem);padding-bottom:0;font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-card__body{padding:var(--kpt-card-padding, 1.5rem)}.kpt-card__body--flush{padding:0}.kpt-card__media{display:block;width:100%;object-fit:cover}.kpt-card__lead{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-card-padding, 1.5rem)}.kpt-card__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-card__subtitle{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-card__section{display:flex;flex-direction:column;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-card-padding, 1.5rem)}.kpt-card__tags{display:flex;flex-wrap:wrap;gap:var(--kpt-space-2, .5rem)}.kpt-card__meta{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-card__avatar{align-self:flex-start;margin-top:-2.5rem;border-radius:50%;box-shadow:0 0 0 4px var(--kpt-card-bg)}.kpt-card__actions{display:flex;gap:var(--kpt-space-3, .75rem)}.kpt-card__actions>*{flex:1 1 0}.kpt-card [kptCardFooter]{display:flex;gap:var(--kpt-space-3, .75rem);align-items:center;padding:var(--kpt-card-padding, 1.5rem);padding-top:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptCard, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-card', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kpt-card',
                         '[attr.data-variant]': 'variant()',
-                    }, template: "@if (header()) {\n  <div class=\"kpt-card__header\">{{ header() }}</div>\n}\n<div class=\"kpt-card__body\">\n  <ng-content />\n</div>\n<ng-content select=\"[kptCardFooter]\" />\n", styles: ["@layer kpt.components{.kpt-card{display:block;background:var(--kpt-card-bg);color:var(--kpt-card-fg);border-radius:var(--kpt-card-radius, .75rem);border:var(--kpt-border-width-thin, 1px) solid transparent}.kpt-card[data-variant=elevated]{box-shadow:var(--kpt-card-shadow);border-color:var(--kpt-card-border)}.kpt-card[data-variant=outlined]{border-color:var(--kpt-card-border)}.kpt-card__header{padding:var(--kpt-card-padding, 1.5rem);padding-bottom:0;font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-card__body{padding:var(--kpt-card-padding, 1.5rem)}.kpt-card [kptCardFooter]{display:flex;gap:var(--kpt-space-3, .75rem);align-items:center;padding:var(--kpt-card-padding, 1.5rem);padding-top:0}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }] } });
+                    }, template: "@if (header()) {\n  <div class=\"kpt-card__header\">{{ header() }}</div>\n}\n<div class=\"kpt-card__body\" [class.kpt-card__body--flush]=\"flush()\">\n  <ng-content />\n</div>\n<ng-content select=\"[kptCardFooter]\" />\n", styles: ["@layer kpt.components{.kpt-card{display:block;background:var(--kpt-card-bg);color:var(--kpt-card-fg);border-radius:var(--kpt-card-radius, .75rem);border:var(--kpt-border-width-thin, 1px) solid transparent;overflow:clip}.kpt-card[data-variant=elevated]{box-shadow:var(--kpt-card-shadow);border-color:var(--kpt-card-border)}.kpt-card[data-variant=outlined]{border-color:var(--kpt-card-border)}.kpt-card__header{padding:var(--kpt-card-padding, 1.5rem);padding-bottom:0;font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-card__body{padding:var(--kpt-card-padding, 1.5rem)}.kpt-card__body--flush{padding:0}.kpt-card__media{display:block;width:100%;object-fit:cover}.kpt-card__lead{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-card-padding, 1.5rem)}.kpt-card__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-card__subtitle{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-card__section{display:flex;flex-direction:column;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-card-padding, 1.5rem)}.kpt-card__tags{display:flex;flex-wrap:wrap;gap:var(--kpt-space-2, .5rem)}.kpt-card__meta{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted)}.kpt-card__avatar{align-self:flex-start;margin-top:-2.5rem;border-radius:50%;box-shadow:0 0 0 4px var(--kpt-card-bg)}.kpt-card__actions{display:flex;gap:var(--kpt-space-3, .75rem)}.kpt-card__actions>*{flex:1 1 0}.kpt-card [kptCardFooter]{display:flex;gap:var(--kpt-space-3, .75rem);align-items:center;padding:var(--kpt-card-padding, 1.5rem);padding-top:0}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
 
 /**
  * Separator Koncept UI (linia pozioma lub pionowa). Kolor z `--kpt-color-border`.
@@ -2785,7 +4551,7 @@ class KptAppShell {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptAppShell, isStandalone: true, selector: "kpt-app-shell", inputs: { sidenavOpen: { classPropertyName: "sidenavOpen", publicName: "sidenavOpen", isSignal: true, isRequired: false, transformFunction: null }, sidenavMode: { classPropertyName: "sidenavMode", publicName: "sidenavMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpen: "sidenavOpenChange" }, host: { properties: { "attr.data-sidenav-mode": "sidenavMode()", "class.kpt-app-shell--nav-open": "sidenavOpen()" }, classAttribute: "kpt-app-shell" }, ngImport: i0, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside class=\"kpt-app-shell__sidenav\">\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  @if (sidenavMode() === 'over' && sidenavOpen()) {\n    <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n  }\n\n  <main class=\"kpt-app-shell__content\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;min-height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptAppShell, isStandalone: true, selector: "kpt-app-shell", inputs: { sidenavOpen: { classPropertyName: "sidenavOpen", publicName: "sidenavOpen", isSignal: true, isRequired: false, transformFunction: null }, sidenavMode: { classPropertyName: "sidenavMode", publicName: "sidenavMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sidenavOpen: "sidenavOpenChange" }, host: { properties: { "attr.data-sidenav-mode": "sidenavMode()", "class.kpt-app-shell--nav-open": "sidenavOpen()" }, classAttribute: "kpt-app-shell" }, ngImport: i0, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside class=\"kpt-app-shell__sidenav\">\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  @if (sidenavMode() === 'over' && sidenavOpen()) {\n    <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n  }\n\n  <main class=\"kpt-app-shell__content\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAppShell, decorators: [{
             type: Component,
@@ -2793,7 +4559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         class: 'kpt-app-shell',
                         '[attr.data-sidenav-mode]': 'sidenavMode()',
                         '[class.kpt-app-shell--nav-open]': 'sidenavOpen()',
-                    }, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside class=\"kpt-app-shell__sidenav\">\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  @if (sidenavMode() === 'over' && sidenavOpen()) {\n    <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n  }\n\n  <main class=\"kpt-app-shell__content\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;min-height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"] }]
+                    }, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside class=\"kpt-app-shell__sidenav\">\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  @if (sidenavMode() === 'over' && sidenavOpen()) {\n    <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n  }\n\n  <main class=\"kpt-app-shell__content\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"] }]
         }], propDecorators: { sidenavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavOpen", required: false }] }, { type: i0.Output, args: ["sidenavOpenChange"] }], sidenavMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMode", required: false }] }] } });
 
 /**
@@ -2808,8 +4574,11 @@ class KptPanel {
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapsed = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input(500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptPanel, isStandalone: true, selector: "kpt-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { classAttribute: "kpt-panel-host" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptPanel, isStandalone: true, selector: "kpt-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "style.--kpt-anim-duration": "(animated() ? animationDuration() : 0) + 'ms'" }, classAttribute: "kpt-panel-host" }, ngImport: i0, template: `
     <div class="kpt-panel">
       <div class="kpt-panel__header">
         <span class="kpt-panel__title">{{ header() }}</span>
@@ -2820,11 +4589,18 @@ class KptPanel {
           </button>
         }
       </div>
-      @if (!collapsed()) {
-        <div class="kpt-panel__body"><ng-content /></div>
-      }
+      <div
+        class="kpt-panel__collapse"
+        [class.is-open]="!collapsed()"
+        [attr.inert]="collapsed() ? '' : null"
+        [attr.aria-hidden]="collapsed()"
+      >
+        <div class="kpt-panel__collapse-inner">
+          <div class="kpt-panel__body"><ng-content /></div>
+        </div>
+      </div>
     </div>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-panel-host{display:block}.kpt-panel{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);overflow:hidden}.kpt-panel__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-panel__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-panel__actions{margin-left:auto;display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-panel__toggle{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-panel__toggle:hover{color:var(--kpt-color-on-surface)}.kpt-panel__body{padding:var(--kpt-space-4, 1rem)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-panel-host{display:block}.kpt-panel{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);overflow:hidden}.kpt-panel__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-panel__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-panel__actions{margin-left:auto;display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-panel__toggle{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-panel__toggle:hover{color:var(--kpt-color-on-surface)}.kpt-panel__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-panel__collapse.is-open{grid-template-rows:1fr}.kpt-panel__collapse-inner{overflow:hidden;min-height:0}.kpt-panel__body{padding:var(--kpt-space-4, 1rem)}@media(prefers-reduced-motion:reduce){.kpt-panel__collapse{transition:none}}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptPanel, decorators: [{
             type: Component,
@@ -2839,12 +4615,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           </button>
         }
       </div>
-      @if (!collapsed()) {
-        <div class="kpt-panel__body"><ng-content /></div>
-      }
+      <div
+        class="kpt-panel__collapse"
+        [class.is-open]="!collapsed()"
+        [attr.inert]="collapsed() ? '' : null"
+        [attr.aria-hidden]="collapsed()"
+      >
+        <div class="kpt-panel__collapse-inner">
+          <div class="kpt-panel__body"><ng-content /></div>
+        </div>
+      </div>
     </div>
-  `, host: { class: 'kpt-panel-host' }, styles: ["@layer kpt.components{.kpt-panel-host{display:block}.kpt-panel{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);overflow:hidden}.kpt-panel__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-panel__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-panel__actions{margin-left:auto;display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-panel__toggle{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-panel__toggle:hover{color:var(--kpt-color-on-surface)}.kpt-panel__body{padding:var(--kpt-space-4, 1rem)}}\n"] }]
-        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+  `, host: {
+                        'class': 'kpt-panel-host',
+                        '[style.--kpt-anim-duration]': "(animated() ? animationDuration() : 0) + 'ms'",
+                    }, styles: ["@layer kpt.components{.kpt-panel-host{display:block}.kpt-panel{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);overflow:hidden}.kpt-panel__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-panel__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-panel__actions{margin-left:auto;display:inline-flex;align-items:center;gap:var(--kpt-space-1, .25rem)}.kpt-panel__toggle{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-panel__toggle:hover{color:var(--kpt-color-on-surface)}.kpt-panel__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-panel__collapse.is-open{grid-template-rows:1fr}.kpt-panel__collapse-inner{overflow:hidden;min-height:0}.kpt-panel__body{padding:var(--kpt-space-4, 1rem)}@media(prefers-reduced-motion:reduce){.kpt-panel__collapse{transition:none}}}\n"] }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
 
 /**
  * Grupa pól z legendą (fieldset), opcjonalnie zwijana.
@@ -2858,8 +4644,11 @@ class KptFieldset {
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     collapsed = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input(500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptFieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptFieldset, isStandalone: true, selector: "kpt-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { classAttribute: "kpt-fieldset-host" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptFieldset, isStandalone: true, selector: "kpt-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "style.--kpt-anim-duration": "(animated() ? animationDuration() : 0) + 'ms'" }, classAttribute: "kpt-fieldset-host" }, ngImport: i0, template: `
     <fieldset class="kpt-fieldset">
       <legend class="kpt-fieldset__legend">
         @if (toggleable()) {
@@ -2871,11 +4660,18 @@ class KptFieldset {
           <span>{{ legend() }}</span>
         }
       </legend>
-      @if (!collapsed()) {
-        <div class="kpt-fieldset__body"><ng-content /></div>
-      }
+      <div
+        class="kpt-fieldset__collapse"
+        [class.is-open]="!collapsed()"
+        [attr.inert]="collapsed() ? '' : null"
+        [attr.aria-hidden]="collapsed()"
+      >
+        <div class="kpt-fieldset__collapse-inner">
+          <div class="kpt-fieldset__body"><ng-content /></div>
+        </div>
+      </div>
     </fieldset>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-fieldset-host{display:block}.kpt-fieldset{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-4, 1rem);margin:0;min-inline-size:0}.kpt-fieldset__legend{padding-inline:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface)}.kpt-fieldset__toggle{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-fieldset__body{padding-top:var(--kpt-space-2, .5rem)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-fieldset-host{display:block}.kpt-fieldset{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-4, 1rem);margin:0;min-inline-size:0}.kpt-fieldset__legend{padding-inline:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface)}.kpt-fieldset__toggle{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-fieldset__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-fieldset__collapse.is-open{grid-template-rows:1fr}.kpt-fieldset__collapse-inner{overflow:hidden;min-height:0}.kpt-fieldset__body{padding-top:var(--kpt-space-2, .5rem)}@media(prefers-reduced-motion:reduce){.kpt-fieldset__collapse{transition:none}}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptFieldset, decorators: [{
             type: Component,
@@ -2891,12 +4687,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           <span>{{ legend() }}</span>
         }
       </legend>
-      @if (!collapsed()) {
-        <div class="kpt-fieldset__body"><ng-content /></div>
-      }
+      <div
+        class="kpt-fieldset__collapse"
+        [class.is-open]="!collapsed()"
+        [attr.inert]="collapsed() ? '' : null"
+        [attr.aria-hidden]="collapsed()"
+      >
+        <div class="kpt-fieldset__collapse-inner">
+          <div class="kpt-fieldset__body"><ng-content /></div>
+        </div>
+      </div>
     </fieldset>
-  `, host: { class: 'kpt-fieldset-host' }, styles: ["@layer kpt.components{.kpt-fieldset-host{display:block}.kpt-fieldset{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-4, 1rem);margin:0;min-inline-size:0}.kpt-fieldset__legend{padding-inline:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface)}.kpt-fieldset__toggle{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-fieldset__body{padding-top:var(--kpt-space-2, .5rem)}}\n"] }]
-        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+  `, host: {
+                        'class': 'kpt-fieldset-host',
+                        '[style.--kpt-anim-duration]': "(animated() ? animationDuration() : 0) + 'ms'",
+                    }, styles: ["@layer kpt.components{.kpt-fieldset-host{display:block}.kpt-fieldset{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-4, 1rem);margin:0;min-inline-size:0}.kpt-fieldset__legend{padding-inline:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-semibold, 600);color:var(--kpt-color-on-surface)}.kpt-fieldset__toggle{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-fieldset__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-fieldset__collapse.is-open{grid-template-rows:1fr}.kpt-fieldset__collapse-inner{overflow:hidden;min-height:0}.kpt-fieldset__body{padding-top:var(--kpt-space-2, .5rem)}@media(prefers-reduced-motion:reduce){.kpt-fieldset__collapse{transition:none}}}\n"] }]
+        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
 
 /**
  * Splitter — dwa panele z przeciąganym uchwytem. Panele przez sloty `[kptSplitStart]` i `[kptSplitEnd]`.
@@ -3307,17 +5113,46 @@ class KptTabs {
     ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     activeIndex = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input(500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+    tabBtns = viewChildren('tabBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabBtns" }] : /* istanbul ignore next */ []));
+    inkX = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inkX" }] : /* istanbul ignore next */ []));
+    inkW = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inkW" }] : /* istanbul ignore next */ []));
+    direction = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     activeTab = computed(() => this.tabs()[this.activeIndex()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    activePanels = computed(() => {
+        const tab = this.activeTab();
+        return tab ? [tab] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanels" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => this.measureInk());
+    }
+    measureInk() {
+        const btn = this.tabBtns()[this.activeIndex()]?.nativeElement;
+        if (!btn)
+            return;
+        this.inkX.set(btn.offsetLeft);
+        this.inkW.set(btn.offsetWidth);
+    }
     select(index) {
-        if (!this.tabs()[index]?.disabled())
-            this.activeIndex.set(index);
+        if (this.tabs()[index]?.disabled())
+            return;
+        this.direction.set(index >= this.activeIndex() ? 1 : -1);
+        this.activeIndex.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptTabs, isStandalone: true, selector: "kpt-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "kpt-tabs-host" }, queries: [{ propertyName: "tabs", predicate: KptTab, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptTabs, isStandalone: true, selector: "kpt-tabs", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { listeners: { "window:resize": "measureInk()" }, properties: { "style.--kpt-anim-duration": "(animated() ? animationDuration() : 0) + 'ms'", "style.--kpt-anim-dir": "direction()" }, classAttribute: "kpt-tabs-host" }, queries: [{ propertyName: "tabs", predicate: KptTab, isSignal: true }], viewQueries: [{ propertyName: "tabBtns", predicate: ["tabBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="kpt-tabs__header" role="tablist">
       @for (tab of tabs(); track $index; let i = $index) {
         <button
+          #tabBtn
           type="button"
           class="kpt-tabs__tab"
           role="tab"
@@ -3327,13 +5162,14 @@ class KptTabs {
           (click)="select(i)"
         >{{ tab.label() }}</button>
       }
+      <span class="kpt-tabs__ink" [style.width.px]="inkW()" [style.transform]="'translateX(' + inkX() + 'px)'"></span>
     </div>
     <div class="kpt-tabs__body" role="tabpanel">
-      @if (activeTab(); as tab) {
-        <ng-container [ngTemplateOutlet]="tab.content()" />
+      @for (tab of activePanels(); track activeIndex()) {
+        <div class="kpt-tabs__panel"><ng-container [ngTemplateOutlet]="tab.content()" /></div>
       }
     </div>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-tabs-host{display:block}.kpt-tabs__header{display:flex;gap:.25rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-tabs__tab{appearance:none;border:0;background:none;padding:.65rem 1rem;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);cursor:pointer;transition:color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-tabs__tab:hover:not(:disabled):not(.is-active){color:var(--kpt-color-on-surface)}.kpt-tabs__tab.is-active{color:var(--kpt-color-primary);border-bottom-color:var(--kpt-color-primary)}.kpt-tabs__tab:disabled{opacity:.45;cursor:not-allowed}.kpt-tabs__body{padding-block:var(--kpt-space-4, 1rem)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-tabs-host{display:block}.kpt-tabs__header{position:relative;display:flex;gap:.25rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-tabs__tab{appearance:none;border:0;background:none;padding:.65rem 1rem;color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);cursor:pointer;transition:color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-tabs__tab:hover:not(:disabled):not(.is-active){color:var(--kpt-color-on-surface)}.kpt-tabs__tab.is-active{color:var(--kpt-color-primary)}.kpt-tabs__tab:disabled{opacity:.45;cursor:not-allowed}.kpt-tabs__ink{position:absolute;bottom:-1px;left:0;height:2px;background:var(--kpt-color-primary);pointer-events:none;transition:transform var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard),width var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-tabs__body{padding-block:var(--kpt-space-4, 1rem);overflow-x:clip}@keyframes kpt-tabs-enter{0%{opacity:0;transform:translate(calc(var(--kpt-anim-dir, 1) * 1.5rem))}to{opacity:1;transform:none}}.kpt-tabs__panel{animation:kpt-tabs-enter var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}@media(prefers-reduced-motion:reduce){.kpt-tabs__panel{animation:none}.kpt-tabs__ink{transition:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptTabs, decorators: [{
             type: Component,
@@ -3341,6 +5177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     <div class="kpt-tabs__header" role="tablist">
       @for (tab of tabs(); track $index; let i = $index) {
         <button
+          #tabBtn
           type="button"
           class="kpt-tabs__tab"
           role="tab"
@@ -3350,14 +5187,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           (click)="select(i)"
         >{{ tab.label() }}</button>
       }
+      <span class="kpt-tabs__ink" [style.width.px]="inkW()" [style.transform]="'translateX(' + inkX() + 'px)'"></span>
     </div>
     <div class="kpt-tabs__body" role="tabpanel">
-      @if (activeTab(); as tab) {
-        <ng-container [ngTemplateOutlet]="tab.content()" />
+      @for (tab of activePanels(); track activeIndex()) {
+        <div class="kpt-tabs__panel"><ng-container [ngTemplateOutlet]="tab.content()" /></div>
       }
     </div>
-  `, host: { class: 'kpt-tabs-host' }, styles: ["@layer kpt.components{.kpt-tabs-host{display:block}.kpt-tabs__header{display:flex;gap:.25rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-tabs__tab{appearance:none;border:0;background:none;padding:.65rem 1rem;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);cursor:pointer;transition:color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-tabs__tab:hover:not(:disabled):not(.is-active){color:var(--kpt-color-on-surface)}.kpt-tabs__tab.is-active{color:var(--kpt-color-primary);border-bottom-color:var(--kpt-color-primary)}.kpt-tabs__tab:disabled{opacity:.45;cursor:not-allowed}.kpt-tabs__body{padding-block:var(--kpt-space-4, 1rem)}}\n"] }]
-        }], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptTab), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }] } });
+  `, host: {
+                        'class': 'kpt-tabs-host',
+                        '[style.--kpt-anim-duration]': "(animated() ? animationDuration() : 0) + 'ms'",
+                        '[style.--kpt-anim-dir]': 'direction()',
+                        '(window:resize)': 'measureInk()',
+                    }, styles: ["@layer kpt.components{.kpt-tabs-host{display:block}.kpt-tabs__header{position:relative;display:flex;gap:.25rem;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-tabs__tab{appearance:none;border:0;background:none;padding:.65rem 1rem;color:var(--kpt-color-on-surface-muted);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);cursor:pointer;transition:color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-tabs__tab:hover:not(:disabled):not(.is-active){color:var(--kpt-color-on-surface)}.kpt-tabs__tab.is-active{color:var(--kpt-color-primary)}.kpt-tabs__tab:disabled{opacity:.45;cursor:not-allowed}.kpt-tabs__ink{position:absolute;bottom:-1px;left:0;height:2px;background:var(--kpt-color-primary);pointer-events:none;transition:transform var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard),width var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-tabs__body{padding-block:var(--kpt-space-4, 1rem);overflow-x:clip}@keyframes kpt-tabs-enter{0%{opacity:0;transform:translate(calc(var(--kpt-anim-dir, 1) * 1.5rem))}to{opacity:1;transform:none}}.kpt-tabs__panel{animation:kpt-tabs-enter var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}@media(prefers-reduced-motion:reduce){.kpt-tabs__panel{animation:none}.kpt-tabs__ink{transition:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptTab), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], tabBtns: [{ type: i0.ViewChildren, args: ['tabBtn', { isSignal: true }] }] } });
 
 /**
  * Panel akordeonu. Umieszczaj w `kpt-accordion`. Stan `expanded` jest dwukierunkowy.
@@ -3369,6 +5212,12 @@ class KptAccordionPanel {
     expanded = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     accordion = inject(KptAccordion, { optional: true });
+    animMs = computed(() => {
+        const on = this.accordion?.animated() ?? true;
+        const d = this.accordion?.animationDuration() ?? 500;
+        return (on ? d : 0) + 'ms';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animMs" }] : /* istanbul ignore next */ []));
     toggle() {
         if (this.disabled())
             return;
@@ -3378,7 +5227,7 @@ class KptAccordionPanel {
             this.accordion?.onOpen(this);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAccordionPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptAccordionPanel, isStandalone: true, selector: "kpt-accordion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "kpt-accordion-panel-host" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: KptAccordionPanel, isStandalone: true, selector: "kpt-accordion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "style.--kpt-anim-duration": "animMs()" }, classAttribute: "kpt-accordion-panel-host" }, ngImport: i0, template: `
     <div class="kpt-accordion-panel" [class.is-open]="expanded()">
       <button
         type="button"
@@ -3390,11 +5239,18 @@ class KptAccordionPanel {
         <span class="kpt-accordion-panel__title">{{ title() }}</span>
         <kpt-icon name="chevron-down" class="kpt-accordion-panel__chevron" [class.is-open]="expanded()" />
       </button>
-      @if (expanded()) {
-        <div class="kpt-accordion-panel__body"><ng-content /></div>
-      }
+      <div
+        class="kpt-accordion-panel__collapse"
+        [class.is-open]="expanded()"
+        [attr.inert]="expanded() ? null : ''"
+        [attr.aria-hidden]="!expanded()"
+      >
+        <div class="kpt-accordion-panel__collapse-inner">
+          <div class="kpt-accordion-panel__body"><ng-content /></div>
+        </div>
+      </div>
     </div>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-accordion-panel-host{display:block}.kpt-accordion-panel-host:not(:last-child) .kpt-accordion-panel{border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-accordion-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);width:100%;padding:var(--kpt-space-4, 1rem) var(--kpt-space-5, 1.25rem);border:0;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);text-align:start;cursor:pointer}.kpt-accordion-panel__header:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-accordion-panel__header:disabled{opacity:.5;cursor:not-allowed}.kpt-accordion-panel__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-accordion-panel__chevron.is-open{transform:rotate(180deg)}.kpt-accordion-panel__body{padding:0 var(--kpt-space-5, 1.25rem) var(--kpt-space-4, 1rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-accordion-panel-host{display:block}.kpt-accordion-panel-host:not(:last-child) .kpt-accordion-panel{border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-accordion-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);width:100%;padding:var(--kpt-space-4, 1rem) var(--kpt-space-5, 1.25rem);border:0;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);text-align:start;cursor:pointer}.kpt-accordion-panel__header:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-accordion-panel__header:disabled{opacity:.5;cursor:not-allowed}.kpt-accordion-panel__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-accordion-panel__chevron.is-open{transform:rotate(180deg)}.kpt-accordion-panel__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-accordion-panel__collapse.is-open{grid-template-rows:1fr}.kpt-accordion-panel__collapse-inner{overflow:hidden;min-height:0}.kpt-accordion-panel__body{padding:0 var(--kpt-space-5, 1.25rem) var(--kpt-space-4, 1rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}@media(prefers-reduced-motion:reduce){.kpt-accordion-panel__collapse{transition:none}}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAccordionPanel, decorators: [{
             type: Component,
@@ -3410,11 +5266,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         <span class="kpt-accordion-panel__title">{{ title() }}</span>
         <kpt-icon name="chevron-down" class="kpt-accordion-panel__chevron" [class.is-open]="expanded()" />
       </button>
-      @if (expanded()) {
-        <div class="kpt-accordion-panel__body"><ng-content /></div>
-      }
+      <div
+        class="kpt-accordion-panel__collapse"
+        [class.is-open]="expanded()"
+        [attr.inert]="expanded() ? null : ''"
+        [attr.aria-hidden]="!expanded()"
+      >
+        <div class="kpt-accordion-panel__collapse-inner">
+          <div class="kpt-accordion-panel__body"><ng-content /></div>
+        </div>
+      </div>
     </div>
-  `, host: { class: 'kpt-accordion-panel-host' }, styles: ["@layer kpt.components{.kpt-accordion-panel-host{display:block}.kpt-accordion-panel-host:not(:last-child) .kpt-accordion-panel{border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-accordion-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);width:100%;padding:var(--kpt-space-4, 1rem) var(--kpt-space-5, 1.25rem);border:0;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);text-align:start;cursor:pointer}.kpt-accordion-panel__header:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-accordion-panel__header:disabled{opacity:.5;cursor:not-allowed}.kpt-accordion-panel__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-accordion-panel__chevron.is-open{transform:rotate(180deg)}.kpt-accordion-panel__body{padding:0 var(--kpt-space-5, 1.25rem) var(--kpt-space-4, 1rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}}\n"] }]
+  `, host: {
+                        'class': 'kpt-accordion-panel-host',
+                        '[style.--kpt-anim-duration]': 'animMs()',
+                    }, styles: ["@layer kpt.components{.kpt-accordion-panel-host{display:block}.kpt-accordion-panel-host:not(:last-child) .kpt-accordion-panel{border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-accordion-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);width:100%;padding:var(--kpt-space-4, 1rem) var(--kpt-space-5, 1.25rem);border:0;background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);text-align:start;cursor:pointer}.kpt-accordion-panel__header:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-accordion-panel__header:disabled{opacity:.5;cursor:not-allowed}.kpt-accordion-panel__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-accordion-panel__chevron.is-open{transform:rotate(180deg)}.kpt-accordion-panel__collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}.kpt-accordion-panel__collapse.is-open{grid-template-rows:1fr}.kpt-accordion-panel__collapse-inner{overflow:hidden;min-height:0}.kpt-accordion-panel__body{padding:0 var(--kpt-space-5, 1.25rem) var(--kpt-space-4, 1rem);font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}@media(prefers-reduced-motion:reduce){.kpt-accordion-panel__collapse{transition:none}}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 
 /**
@@ -3428,6 +5294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class KptAccordion {
     multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input(500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
     panels = contentChildren(KptAccordionPanel, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
     /** Wywoływane przez panel przy otwarciu — zamyka pozostałe, gdy nie `multi`. */
@@ -3440,12 +5309,12 @@ class KptAccordion {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: KptAccordion, isStandalone: true, selector: "kpt-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-accordion-host" }, queries: [{ propertyName: "panels", predicate: KptAccordionPanel, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kpt.components{.kpt-accordion-host{display:block;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);overflow:hidden}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: KptAccordion, isStandalone: true, selector: "kpt-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kpt-accordion-host" }, queries: [{ propertyName: "panels", predicate: KptAccordionPanel, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer kpt.components{.kpt-accordion-host{display:block;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);overflow:hidden}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptAccordion, decorators: [{
             type: Component,
             args: [{ selector: 'kpt-accordion', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'kpt-accordion-host' }, styles: ["@layer kpt.components{.kpt-accordion-host{display:block;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);overflow:hidden}}\n"] }]
-        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptAccordionPanel), { isSignal: true }] }] } });
+        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptAccordionPanel), { isSignal: true }] }] } });
 
 /**
  * Ścieżka nawigacji (breadcrumbs).
@@ -3528,19 +5397,33 @@ class KptStepper {
     ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     activeIndex = model(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input(500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+    direction = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     activeStep = computed(() => this.steps()[this.activeIndex()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+    activePanels = computed(() => {
+        const step = this.activeStep();
+        return step ? [step] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePanels" }] : /* istanbul ignore next */ []));
     goTo(index) {
-        this.activeIndex.set(Math.max(0, Math.min(index, this.steps().length - 1)));
+        const next = Math.max(0, Math.min(index, this.steps().length - 1));
+        this.direction.set(next >= this.activeIndex() ? 1 : -1);
+        this.activeIndex.set(next);
     }
     next() {
+        this.direction.set(1);
         this.activeIndex.update((i) => Math.min(i + 1, this.steps().length - 1));
     }
     prev() {
+        this.direction.set(-1);
         this.activeIndex.update((i) => Math.max(i - 1, 0));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptStepper, isStandalone: true, selector: "kpt-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "kpt-stepper-host" }, queries: [{ propertyName: "steps", predicate: KptStep, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptStepper, isStandalone: true, selector: "kpt-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { properties: { "style.--kpt-anim-duration": "(animated() ? animationDuration() : 0) + 'ms'", "style.--kpt-anim-dir": "direction()" }, classAttribute: "kpt-stepper-host" }, queries: [{ propertyName: "steps", predicate: KptStep, isSignal: true }], ngImport: i0, template: `
     <ol class="kpt-stepper__header">
       @for (step of steps(); track $index; let i = $index, last = $last) {
         <li class="kpt-stepper__step" [class.is-active]="i === activeIndex()" [class.is-done]="i < activeIndex()">
@@ -3553,11 +5436,11 @@ class KptStepper {
       }
     </ol>
     <div class="kpt-stepper__body">
-      @if (activeStep(); as step) {
-        <ng-container [ngTemplateOutlet]="step.content()" />
+      @for (step of activePanels(); track activeIndex()) {
+        <div class="kpt-stepper__panel"><ng-container [ngTemplateOutlet]="step.content()" /></div>
       }
     </div>
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-stepper-host{display:block}.kpt-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.kpt-stepper__step{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);flex:1}.kpt-stepper__step:last-child{flex:0 0 auto}.kpt-stepper__marker{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong);border-radius:50%;background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-semibold, 600);cursor:pointer}.kpt-stepper__label{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted);white-space:nowrap}.kpt-stepper__connector{flex:1;height:2px;margin-inline:var(--kpt-space-2, .5rem);background:var(--kpt-color-border)}.kpt-stepper__step.is-active .kpt-stepper__marker{border-color:var(--kpt-color-primary);color:var(--kpt-color-primary)}.kpt-stepper__step.is-active .kpt-stepper__label{color:var(--kpt-color-on-surface);font-weight:500}.kpt-stepper__step.is-done .kpt-stepper__marker{border-color:var(--kpt-color-primary);background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-stepper__step.is-done .kpt-stepper__connector{background:var(--kpt-color-primary)}.kpt-stepper__body{padding-block:var(--kpt-space-5, 1.25rem)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-stepper-host{display:block}.kpt-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.kpt-stepper__step{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);flex:1}.kpt-stepper__step:last-child{flex:0 0 auto}.kpt-stepper__marker{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong);border-radius:50%;background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-semibold, 600);cursor:pointer}.kpt-stepper__label{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted);white-space:nowrap}.kpt-stepper__connector{flex:1;height:2px;margin-inline:var(--kpt-space-2, .5rem);background:var(--kpt-color-border)}.kpt-stepper__step.is-active .kpt-stepper__marker{border-color:var(--kpt-color-primary);color:var(--kpt-color-primary)}.kpt-stepper__step.is-active .kpt-stepper__label{color:var(--kpt-color-on-surface);font-weight:500}.kpt-stepper__step.is-done .kpt-stepper__marker{border-color:var(--kpt-color-primary);background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-stepper__step.is-done .kpt-stepper__connector{background:var(--kpt-color-primary)}.kpt-stepper__body{padding-block:var(--kpt-space-5, 1.25rem);overflow-x:clip}@keyframes kpt-stepper-enter{0%{opacity:0;transform:translate(calc(var(--kpt-anim-dir, 1) * 1.5rem))}to{opacity:1;transform:none}}.kpt-stepper__panel{animation:kpt-stepper-enter var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}@media(prefers-reduced-motion:reduce){.kpt-stepper__panel{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptStepper, decorators: [{
             type: Component,
@@ -3574,12 +5457,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       }
     </ol>
     <div class="kpt-stepper__body">
-      @if (activeStep(); as step) {
-        <ng-container [ngTemplateOutlet]="step.content()" />
+      @for (step of activePanels(); track activeIndex()) {
+        <div class="kpt-stepper__panel"><ng-container [ngTemplateOutlet]="step.content()" /></div>
       }
     </div>
-  `, host: { class: 'kpt-stepper-host' }, styles: ["@layer kpt.components{.kpt-stepper-host{display:block}.kpt-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.kpt-stepper__step{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);flex:1}.kpt-stepper__step:last-child{flex:0 0 auto}.kpt-stepper__marker{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong);border-radius:50%;background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-semibold, 600);cursor:pointer}.kpt-stepper__label{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted);white-space:nowrap}.kpt-stepper__connector{flex:1;height:2px;margin-inline:var(--kpt-space-2, .5rem);background:var(--kpt-color-border)}.kpt-stepper__step.is-active .kpt-stepper__marker{border-color:var(--kpt-color-primary);color:var(--kpt-color-primary)}.kpt-stepper__step.is-active .kpt-stepper__label{color:var(--kpt-color-on-surface);font-weight:500}.kpt-stepper__step.is-done .kpt-stepper__marker{border-color:var(--kpt-color-primary);background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-stepper__step.is-done .kpt-stepper__connector{background:var(--kpt-color-primary)}.kpt-stepper__body{padding-block:var(--kpt-space-5, 1.25rem)}}\n"] }]
-        }], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptStep), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }] } });
+  `, host: {
+                        'class': 'kpt-stepper-host',
+                        '[style.--kpt-anim-duration]': "(animated() ? animationDuration() : 0) + 'ms'",
+                        '[style.--kpt-anim-dir]': 'direction()',
+                    }, styles: ["@layer kpt.components{.kpt-stepper-host{display:block}.kpt-stepper__header{display:flex;align-items:center;list-style:none;margin:0;padding:0}.kpt-stepper__step{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);flex:1}.kpt-stepper__step:last-child{flex:0 0 auto}.kpt-stepper__marker{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-border-strong);border-radius:50%;background:var(--kpt-color-surface);color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-semibold, 600);cursor:pointer}.kpt-stepper__label{font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface-muted);white-space:nowrap}.kpt-stepper__connector{flex:1;height:2px;margin-inline:var(--kpt-space-2, .5rem);background:var(--kpt-color-border)}.kpt-stepper__step.is-active .kpt-stepper__marker{border-color:var(--kpt-color-primary);color:var(--kpt-color-primary)}.kpt-stepper__step.is-active .kpt-stepper__label{color:var(--kpt-color-on-surface);font-weight:500}.kpt-stepper__step.is-done .kpt-stepper__marker{border-color:var(--kpt-color-primary);background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-stepper__step.is-done .kpt-stepper__connector{background:var(--kpt-color-primary)}.kpt-stepper__body{padding-block:var(--kpt-space-5, 1.25rem);overflow-x:clip}@keyframes kpt-stepper-enter{0%{opacity:0;transform:translate(calc(var(--kpt-anim-dir, 1) * 1.5rem))}to{opacity:1;transform:none}}.kpt-stepper__panel{animation:kpt-stepper-enter var(--kpt-anim-duration, .5s) var(--kpt-motion-easing-standard)}@media(prefers-reduced-motion:reduce){.kpt-stepper__panel{animation:none}}}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptStep), { isSignal: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
 
 /**
  * Paginator Koncept UI. Sterowany sygnałami; `pageIndex` i `pageSize` są dwukierunkowe.
@@ -3665,8 +5552,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }], propDecorators: { kptCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptCell", required: true }] }] } });
 
+/**
+ * Szablon rozwijanego wiersza (row detail) dla `kpt-data-table`. Renderowany pod
+ * wierszem po rozwinięciu. Kontekst: `$implicit` = wiersz. Wymaga `expandable`.
+ *
+ * @example
+ * <kpt-data-table [columns]="cols" [data]="rows" expandable>
+ *   <ng-template kptRowDetail let-row>
+ *     <div class="szczegoly">{{ row.opis }}</div>
+ *   </ng-template>
+ * </kpt-data-table>
+ */
+class KptRowDetailDef {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRowDetailDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: KptRowDetailDef, isStandalone: true, selector: "ng-template[kptRowDetail]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptRowDetailDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[kptRowDetail]',
+                }]
+        }] });
+
 const REM_PX = 16;
 const CHECKBOX_FROZEN_W = 3; // rem
+const EXPANDER_FROZEN_W = 2.5; // rem
 /**
  * Flagowa tabela danych Koncept UI: kolumny konfiguracją, sortowanie,
  * filtr globalny, paginacja, zaznaczanie wierszy i własne szablony komórek (`kptCell`).
@@ -3687,6 +5598,9 @@ class KptDataTable {
     data = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     filterable = input(false, { ...(ngDevMode ? { debugName: "filterable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Pozycja wiersza filtrów kolumn względem etykiet: nad ('top') lub pod ('bottom'). */
+    filterRowPosition = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRowPosition" }] : /* istanbul ignore next */ []));
     /** Rozmiar strony; 0 wyłącza paginację. */
     pageSize = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
@@ -3720,9 +5634,16 @@ class KptDataTable {
     /** Łączna liczba rekordów (wymagane w trybie lazy dla paginacji). */
     totalRecords = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+    /** Rozwijane wiersze: dodaje kolumnę z przełącznikiem i renderuje szablon `kptRowDetail`. */
+    expandable = input(false, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Zezwala na rozwinięcie wielu wierszy naraz (domyślnie tak). */
+    multiExpand = input(true, { ...(ngDevMode ? { debugName: "multiExpand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     // ── Model / zdarzenia ──
     selection = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Rozwinięte wiersze (dwukierunkowo). */
+    expandedRows = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedRows" }] : /* istanbul ignore next */ []));
     rowClick = output();
     /** Emitowane w trybie lazy przy zmianie sortowania/filtra/strony. */
     lazyLoad = output();
@@ -3737,6 +5658,11 @@ class KptDataTable {
     viewportHeight = signal(400, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
     buffer = 6;
+    // ── Sticky offset drugiego wiersza nagłówka (etykiety + filtry) ──
+    theadEl = viewChild('theadEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theadEl" }] : /* istanbul ignore next */ []));
+    theadOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theadOffset" }] : /* istanbul ignore next */ []));
     constructor() {
         // Tryb lazy: przy każdej zmianie stanu poproś rodzica o dane.
         effect(() => {
@@ -3748,6 +5674,7 @@ class KptDataTable {
                 sortField: this.sortField(),
                 sortDir: this.sortDir(),
                 filter: this.filterText(),
+                columnFilters: this.columnFilters(),
             });
         });
         // Zmierz wysokość viewportu dla wirtualizacji.
@@ -3756,6 +5683,15 @@ class KptDataTable {
             if (el)
                 this.viewportHeight.set(el.clientHeight);
         });
+        // Zmierz wysokość pierwszego wiersza nagłówka → offset sticky drugiego wiersza.
+        afterRenderEffect(() => {
+            this.filterRowPosition();
+            this.hasColumnFilters();
+            this.orderedColumns();
+            const first = this.theadEl()?.nativeElement?.rows?.[0];
+            if (first)
+                this.theadOffset.set(first.offsetHeight);
+        });
     }
     onScroll(event) {
         if (!this.virtualScroll())
@@ -3781,14 +5717,32 @@ class KptDataTable {
     // ── Przestawianie kolumn (natywny HTML5 drag-and-drop; działa w trybie zoneless) ──
     dragIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
+    /** Kolumna przeciągalna tylko gdy `reorderable` i nie jest zamrożona (frozen musi zostać wiodąca). */
+    isColDraggable(col) {
+        return this.reorderable() && !col.frozen;
+    }
+    /** Liczba wiodących kolumn zamrożonych — poza nie wolno upuszczać ani ich przesuwać. */
+    frozenLeadCount() {
+        let n = 0;
+        for (const col of this.orderedColumns()) {
+            if (col.frozen)
+                n++;
+            else
+                break;
+        }
+        return n;
+    }
     onColDragStart(index, event) {
+        if (this.orderedColumns()[index]?.frozen)
+            return; // frozen nieprzeciągalne
         this.dragIndex.set(index);
         event.dataTransfer?.setData('text/plain', String(index));
         if (event.dataTransfer)
             event.dataTransfer.effectAllowed = 'move';
     }
-    onColDragOver(event) {
-        if (this.dragIndex() !== null)
+    onColDragOver(index, event) {
+        // Zezwól na upuszczenie tylko poza obszarem kolumn zamrożonych.
+        if (this.dragIndex() !== null && index >= this.frozenLeadCount())
             event.preventDefault();
     }
     onColDrop(index, event) {
@@ -3796,6 +5750,8 @@ class KptDataTable {
         const from = this.dragIndex();
         if (from === null || from === index)
             return;
+        if (index < this.frozenLeadCount())
+            return; // nie wsuwaj przed/pomiędzy kolumny zamrożone
         const cols = [...this.orderedColumns()];
         const [moved] = cols.splice(from, 1);
         cols.splice(index, 0, moved);
@@ -3839,9 +5795,30 @@ class KptDataTable {
     cellTemplate(field) {
         return this.cellMap().get(field) ?? null;
     }
+    // ── Rozwijane wiersze ──
+    rowDetailDef = contentChild(KptRowDetailDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowDetailDef" }] : /* istanbul ignore next */ []));
+    rowDetailTpl = computed(() => this.rowDetailDef()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowDetailTpl" }] : /* istanbul ignore next */ []));
+    /** Kolumna z przełącznikiem widoczna, gdy włączono `expandable` i podano szablon `kptRowDetail`. */
+    hasRowDetail = computed(() => this.expandable() && !!this.rowDetailDef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasRowDetail" }] : /* istanbul ignore next */ []));
+    isExpanded(row) {
+        return this.expandedRows().some((r) => this.sameRow(r, row));
+    }
+    toggleExpand(row) {
+        if (this.isExpanded(row)) {
+            this.expandedRows.set(this.expandedRows().filter((r) => !this.sameRow(r, row)));
+        }
+        else {
+            this.expandedRows.set(this.multiExpand() ? [...this.expandedRows(), row] : [row]);
+        }
+    }
     // ── Stan ──
     filterText = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterText" }] : /* istanbul ignore next */ []));
+    columnFilters = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnFilters" }] : /* istanbul ignore next */ []));
     sortField = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
     sortDir = signal(null, /* @ts-ignore */
@@ -3850,14 +5827,118 @@ class KptDataTable {
     ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
     pageSizeState = linkedSignal(() => this.pageSize() || 10, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSizeState" }] : /* istanbul ignore next */ []));
+    hasColumnFilters = computed(() => this.columns().some((c) => c.filter), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasColumnFilters" }] : /* istanbul ignore next */ []));
+    // ── Filtry kolumn ──
+    setColumnFilter(field, value) {
+        this.columnFilters.update((cur) => ({ ...cur, [field]: value }));
+        this.pageIndex.set(0);
+    }
+    /** Input liczbowy — pozostaw tylko cyfry i zsynchronizuj DOM z wartością. */
+    onNumberFilter(field, event) {
+        const el = event.target;
+        const digits = el.value.replace(/\D/g, '');
+        el.value = digits;
+        this.setColumnFilter(field, digits);
+    }
+    /** Bieżąca wartość filtra zakresu liczbowego (min/max) dla kolumny. */
+    rangeVal(field) {
+        const v = this.columnFilters()[field];
+        return { min: v?.min ?? '', max: v?.max ?? '' };
+    }
+    /** Aktualizuj jedną granicę zakresu (min/max), pozostawiając tylko cyfry. */
+    setRangeFilter(field, bound, event) {
+        const el = event.target;
+        const digits = el.value.replace(/\D/g, '');
+        el.value = digits;
+        this.setColumnFilter(field, { ...this.rangeVal(field), [bound]: digits });
+    }
+    /** Bieżąca para `[lo, hi]` filtra suwakowego dla kolumny (domyślnie pełen zakres). */
+    sliderVal(col) {
+        const mn = col.filter?.min ?? 0;
+        const mx = col.filter?.max ?? 100;
+        const v = this.columnFilters()[col.field];
+        return v ?? [mn, mx];
+    }
+    static toIso(value) {
+        if (value instanceof Date) {
+            const p = (n) => String(n).padStart(2, '0');
+            return `${value.getFullYear()}-${p(value.getMonth() + 1)}-${p(value.getDate())}`;
+        }
+        return String(value ?? '');
+    }
+    matchesColumnFilters(row) {
+        const filters = this.columnFilters();
+        return this.columns().every((col) => {
+            const f = col.filter;
+            if (!f)
+                return true;
+            const fv = filters[col.field];
+            if (fv == null || fv === '' || (Array.isArray(fv) && fv.length === 0))
+                return true;
+            const cell = row[col.field];
+            switch (f.type) {
+                case 'text':
+                    return String(cell ?? '').toLowerCase().includes(String(fv).toLowerCase());
+                case 'number':
+                    return String(cell ?? '').includes(String(fv));
+                case 'select': {
+                    const vals = Array.isArray(fv) ? fv : [fv];
+                    // Komórka-tablica (np. lista tagów/członków) → dopasuj, gdy zawiera dowolną z wybranych wartości.
+                    if (Array.isArray(cell))
+                        return cell.some((c) => vals.includes(c));
+                    return vals.includes(cell);
+                }
+                case 'numberRange': {
+                    const { min, max } = fv ?? {};
+                    const hasMin = min != null && min !== '';
+                    const hasMax = max != null && max !== '';
+                    if (!hasMin && !hasMax)
+                        return true;
+                    const num = typeof cell === 'number' ? cell : parseFloat(String(cell ?? ''));
+                    if (Number.isNaN(num))
+                        return false;
+                    if (hasMin && num < parseFloat(min))
+                        return false;
+                    if (hasMax && num > parseFloat(max))
+                        return false;
+                    return true;
+                }
+                case 'slider': {
+                    const [lo, hi] = fv;
+                    const num = typeof cell === 'number' ? cell : parseFloat(String(cell ?? ''));
+                    if (Number.isNaN(num))
+                        return false;
+                    return num >= lo && num <= hi;
+                }
+                case 'dateRange': {
+                    const { start, end } = fv ?? { start: '', end: '' };
+                    if (!start && !end)
+                        return true;
+                    const iso = KptDataTable.toIso(cell);
+                    if (start && iso < start)
+                        return false;
+                    if (end && iso > end)
+                        return false;
+                    return true;
+                }
+                default:
+                    return true;
+            }
+        });
+    }
     // ── Potok przetwarzania danych ──
     filtered = computed(() => {
         const query = this.filterText().trim().toLowerCase();
-        const rows = this.data();
-        if (!query)
-            return rows;
         const cols = this.columns();
-        return rows.filter((row) => cols.some((col) => String(row[col.field] ?? '').toLowerCase().includes(query)));
+        let rows = this.data();
+        if (query) {
+            rows = rows.filter((row) => cols.some((col) => String(row[col.field] ?? '').toLowerCase().includes(query)));
+        }
+        if (this.hasColumnFilters()) {
+            rows = rows.filter((row) => this.matchesColumnFilters(row));
+        }
+        return rows;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
     sorted = computed(() => {
@@ -3893,7 +5974,9 @@ class KptDataTable {
         return rows.slice(start, start + size);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paged" }] : /* istanbul ignore next */ []));
-    colspan = computed(() => this.columns().length + (this.selectable() !== 'none' ? 1 : 0), /* @ts-ignore */
+    colspan = computed(() => this.columns().length +
+        (this.selectable() !== 'none' ? 1 : 0) +
+        (this.hasRowDetail() ? 1 : 0), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
     displayCount = computed(() => this.virtualScroll() ? this.sorted().length : this.paged().length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
@@ -3907,9 +5990,19 @@ class KptDataTable {
         return width.trim().endsWith('px') ? n : n * REM_PX;
     }
     /** Mapa pole → przesunięcie left (px) dla wiodących zamrożonych kolumn. */
+    /** Suma szerokości wiodących kolumn systemowych (rozwijanie + zaznaczanie) w px. */
+    leadingStickyWidth = computed(() => {
+        let acc = 0;
+        if (this.hasRowDetail())
+            acc += EXPANDER_FROZEN_W * REM_PX;
+        if (this.selectable() !== 'none')
+            acc += CHECKBOX_FROZEN_W * REM_PX;
+        return acc;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingStickyWidth" }] : /* istanbul ignore next */ []));
     frozenOffsets = computed(() => {
         const map = new Map();
-        let acc = this.selectable() !== 'none' ? CHECKBOX_FROZEN_W * REM_PX : 0;
+        let acc = this.leadingStickyWidth();
         for (const col of this.orderedColumns()) {
             if (!col.frozen)
                 break; // tylko wiodące, sąsiadujące
@@ -3921,6 +6014,16 @@ class KptDataTable {
     ...(ngDevMode ? [{ debugName: "frozenOffsets" }] : /* istanbul ignore next */ []));
     hasFrozen = computed(() => this.frozenOffsets().size > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasFrozen" }] : /* istanbul ignore next */ []));
+    /** Sticky-left kolumny rozwijania (px) — 0, gdy tabela ma kolumny zamrożone. */
+    expanderStickyLeft = computed(() => (this.hasFrozen() ? 0 : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanderStickyLeft" }] : /* istanbul ignore next */ []));
+    /** Sticky-left kolumny zaznaczania (px) — za kolumną rozwijania, jeśli obecna. */
+    checkboxStickyLeft = computed(() => {
+        if (!this.hasFrozen())
+            return null;
+        return this.hasRowDetail() ? EXPANDER_FROZEN_W * REM_PX : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxStickyLeft" }] : /* istanbul ignore next */ []));
     frozenLeft(field) {
         return this.frozenOffsets().get(field) ?? null;
     }
@@ -3985,6 +6088,11 @@ class KptDataTable {
         return page.length > 0 && page.every((r) => this.isSelected(r));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageAllSelected" }] : /* istanbul ignore next */ []));
+    pageSomeSelected = computed(() => {
+        const page = this.paged();
+        return page.some((r) => this.isSelected(r)) && !this.pageAllSelected();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSomeSelected" }] : /* istanbul ignore next */ []));
     toggleAllOnPage() {
         const page = this.paged();
         if (this.pageAllSelected()) {
@@ -4007,12 +6115,15 @@ class KptDataTable {
         return key ? row[key] : row;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDataTable, isStandalone: true, selector: "kpt-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", rowClick: "rowClick", lazyLoad: "lazyLoad" }, host: { classAttribute: "kpt-data-table" }, queries: [{ propertyName: "cellDefs", predicate: KptCellDef, isSignal: true }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        placeholder=\"Szukaj\u2026\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">Eksport CSV</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead>\n      <tr>\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"hasFrozen() ? 0 : null\">\n            <input type=\"checkbox\" [checked]=\"pageAllSelected()\" (change)=\"toggleAllOnPage()\" aria-label=\"Zaznacz wszystkie\" />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"hasFrozen() ? 0 : null\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"reorderable() ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"reorderable()\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"reorderable() ? onColDragStart(i, $event) : null\"\n            (dragover)=\"reorderable() ? onColDragOver($event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (reorderable()) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">\u0141adowanie\u2026</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"hasFrozen() ? 0 : null\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          aria-label=\"Zaznacz wiersz\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptPaginator, selector: "kpt-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptDataTable, isStandalone: true, selector: "kpt-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterRowPosition: { classPropertyName: "filterRowPosition", publicName: "filterRowPosition", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportFilename: { classPropertyName: "exportFilename", publicName: "exportFilename", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, multiExpand: { classPropertyName: "multiExpand", publicName: "multiExpand", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, expandedRows: { classPropertyName: "expandedRows", publicName: "expandedRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", expandedRows: "expandedRowsChange", rowClick: "rowClick", lazyLoad: "lazyLoad" }, host: { properties: { "style.--kpt-thead-offset": "theadOffset() + 'px'" }, classAttribute: "kpt-data-table" }, queries: [{ propertyName: "cellDefs", predicate: KptCellDef, isSignal: true }, { propertyName: "rowDetailDef", first: true, predicate: KptRowDetailDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }, { propertyName: "theadEl", first: true, predicate: ["theadEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        placeholder=\"Szukaj\u2026\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">Eksport CSV</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead #theadEl>\n      @if (hasColumnFilters() && filterRowPosition() === 'top') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n      <tr>\n        @if (hasRowDetail()) {\n          <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n        }\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"pageAllSelected()\"\n              [indeterminate]=\"pageSomeSelected()\"\n              (change)=\"toggleAllOnPage()\"\n              aria-label=\"Zaznacz wszystkie\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">\u0141adowanie\u2026</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          aria-label=\"Rozwi\u0144 wiersz\"\n          (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n        >\n          <kpt-icon name=\"chevron-right\" />\n        </button>\n      </td>\n    }\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          aria-label=\"Zaznacz wiersz\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"'Filtr: ' + col.header\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('number') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"'Filtr: ' + col.header\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"onNumberFilter(col.field, $event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('select') {\n            <kpt-select\n              [options]=\"col.filter?.options || []\"\n              [multiple]=\"!!col.filter?.multiple\"\n              filter\n              [placeholder]=\"col.filter?.placeholder || 'Wszystkie'\"\n              [value]=\"columnFilters()[col.field] ?? null\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n          @case ('numberRange') {\n            <div class=\"kpt-data-table__frange\">\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                placeholder=\"min\"\n                [attr.aria-label]=\"'Filtr min: ' + col.header\"\n                [value]=\"rangeVal(col.field).min\"\n                (input)=\"setRangeFilter(col.field, 'min', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                placeholder=\"max\"\n                [attr.aria-label]=\"'Filtr max: ' + col.header\"\n                [value]=\"rangeVal(col.field).max\"\n                (input)=\"setRangeFilter(col.field, 'max', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n            </div>\n          }\n          @case ('slider') {\n            <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n              <kpt-slider\n                range\n                [min]=\"col.filter?.min ?? 0\"\n                [max]=\"col.filter?.max ?? 100\"\n                [step]=\"col.filter?.step ?? 1\"\n                [value]=\"sliderVal(col)\"\n                (valueChange)=\"setColumnFilter(col.field, $event)\"\n                showValue\n              />\n            </div>\n          }\n          @case ('dateRange') {\n            <kpt-date-range\n              [placeholder]=\"col.filter?.placeholder || 'Zakres dat'\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KptButton, selector: "kpt-button", inputs: ["variant", "size", "type", "disabled", "loading", "fullWidth"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }, { kind: "component", type: KptPaginator, selector: "kpt-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions"], outputs: ["pageSizeChange", "pageIndexChange"] }, { kind: "component", type: KptSelect, selector: "kpt-select", inputs: ["options", "placeholder", "multiple", "filter", "disabled", "invalid", "touched", "value"], outputs: ["valueChange", "touch"] }, { kind: "component", type: KptDateRange, selector: "kpt-date-range", inputs: ["value", "disabled", "invalid", "touched", "placeholder", "displayFormat", "mode", "hourFormat", "minuteStep"], outputs: ["valueChange", "touch"] }, { kind: "component", type: KptSlider, selector: "kpt-slider", inputs: ["value", "range", "min", "max", "step", "showValue", "disabled", "invalid", "touched"], outputs: ["valueChange", "touch"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptDataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptButton, KptIcon, KptPaginator], host: { class: 'kpt-data-table' }, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        placeholder=\"Szukaj\u2026\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">Eksport CSV</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead>\n      <tr>\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"hasFrozen() ? 0 : null\">\n            <input type=\"checkbox\" [checked]=\"pageAllSelected()\" (change)=\"toggleAllOnPage()\" aria-label=\"Zaznacz wszystkie\" />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"hasFrozen() ? 0 : null\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"reorderable() ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"reorderable()\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"reorderable() ? onColDragStart(i, $event) : null\"\n            (dragover)=\"reorderable() ? onColDragOver($event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (reorderable()) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">\u0141adowanie\u2026</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"hasFrozen() ? 0 : null\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          aria-label=\"Zaznacz wiersz\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }] } });
+            args: [{ selector: 'kpt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptButton, KptIcon, KptPaginator, KptSelect, KptDateRange, KptSlider], host: {
+                        'class': 'kpt-data-table',
+                        '[style.--kpt-thead-offset]': "theadOffset() + 'px'",
+                    }, template: "@if (filterable() || exportable()) {\n  <div class=\"kpt-data-table__toolbar\">\n    @if (filterable()) {\n      <input\n        class=\"kpt-data-table__filter\"\n        type=\"search\"\n        placeholder=\"Szukaj\u2026\"\n        [value]=\"filterText()\"\n        (input)=\"onFilter($event)\"\n      />\n    }\n    @if (exportable()) {\n      <kpt-button variant=\"outline\" size=\"sm\" (click)=\"exportCsv()\">Eksport CSV</kpt-button>\n    }\n  </div>\n}\n\n<div class=\"kpt-data-table__scroll\" #scrollEl [style.max-height]=\"scrollHeight()\" (scroll)=\"onScroll($event)\">\n  <table\n    class=\"kpt-data-table__table\"\n    [class.kpt-data-table__table--frozen]=\"hasFrozen()\"\n    [class.kpt-data-table__table--virtual]=\"virtualScroll()\"\n  >\n    <thead #theadEl>\n      @if (hasColumnFilters() && filterRowPosition() === 'top') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n      <tr>\n        @if (hasRowDetail()) {\n          <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n        }\n        @if (selectable() === 'multiple') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"pageAllSelected()\"\n              [indeterminate]=\"pageSomeSelected()\"\n              (change)=\"toggleAllOnPage()\"\n              aria-label=\"Zaznacz wszystkie\"\n            />\n          </th>\n        } @else if (selectable() === 'single') {\n          <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n        }\n        @for (col of orderedColumns(); track col.field; let i = $index) {\n          <th\n            [attr.draggable]=\"isColDraggable(col) ? true : null\"\n            [style.width]=\"col.width\"\n            [style.left.px]=\"frozenLeft(col.field)\"\n            [attr.data-align]=\"col.align ?? 'start'\"\n            [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n            [class.kpt-data-table__th--sortable]=\"col.sortable\"\n            [class.kpt-data-table__th--draggable]=\"isColDraggable(col)\"\n            [class.kpt-data-table__th--dragover]=\"dragIndex() !== null && dragIndex() !== i && !col.frozen\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            (click)=\"toggleSort(col)\"\n            (dragstart)=\"onColDragStart(i, $event)\"\n            (dragover)=\"reorderable() ? onColDragOver(i, $event) : null\"\n            (drop)=\"reorderable() ? onColDrop(i, $event) : null\"\n            (dragend)=\"onColDragEnd()\"\n          >\n            @if (isColDraggable(col)) {\n              <kpt-icon class=\"kpt-data-table__grip\" name=\"grip-vertical\" />\n            }\n            <span>{{ col.header }}</span>\n            @if (col.sortable) {\n              <kpt-icon\n                class=\"kpt-data-table__sort\"\n                [class.kpt-data-table__sort--active]=\"ariaSort(col) !== 'none'\"\n                [name]=\"sortIconName(col)\"\n              />\n            }\n          </th>\n        }\n      </tr>\n      @if (hasColumnFilters() && filterRowPosition() === 'bottom') {\n        <ng-container [ngTemplateOutlet]=\"filterRowTpl\" />\n      }\n    </thead>\n    <tbody>\n      @if (loading()) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">\u0141adowanie\u2026</td></tr>\n      } @else if (displayCount() === 0) {\n        <tr><td class=\"kpt-data-table__state\" [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td></tr>\n      } @else if (virtualScroll()) {\n        @if (topPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"topPad()\"></td></tr>\n        }\n        @for (row of virtualRows(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n        @if (bottomPad() > 0) {\n          <tr class=\"kpt-data-table__spacer\" aria-hidden=\"true\"><td [attr.colspan]=\"colspan()\" [style.height.px]=\"bottomPad()\"></td></tr>\n        }\n      } @else {\n        @for (row of paged(); track trackRow(row)) {\n          <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<ng-template #rowTpl let-row>\n  <tr\n    [class.kpt-data-table__row--selected]=\"isSelected(row)\"\n    [class.kpt-data-table__row--expanded]=\"hasRowDetail() && isExpanded(row)\"\n    [style.height.px]=\"virtualScroll() ? rowHeight() : null\"\n    (click)=\"onRowClick(row)\"\n  >\n    @if (hasRowDetail()) {\n      <td class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\">\n        <button\n          type=\"button\"\n          class=\"kpt-data-table__expander-btn\"\n          [class.kpt-data-table__expander-btn--open]=\"isExpanded(row)\"\n          [attr.aria-expanded]=\"isExpanded(row)\"\n          aria-label=\"Rozwi\u0144 wiersz\"\n          (click)=\"$event.stopPropagation(); toggleExpand(row)\"\n        >\n          <kpt-icon name=\"chevron-right\" />\n        </button>\n      </td>\n    }\n    @if (selectable() !== 'none') {\n      <td class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\">\n        <input\n          type=\"checkbox\"\n          [checked]=\"isSelected(row)\"\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"toggleRow(row)\"\n          aria-label=\"Zaznacz wiersz\"\n        />\n      </td>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <td\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @if (cellTemplate(col.field); as tpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: row, value: getValue(row, col.field) }\"\n          />\n        } @else {\n          {{ getValue(row, col.field) }}\n        }\n      </td>\n    }\n  </tr>\n  @if (hasRowDetail() && isExpanded(row) && !virtualScroll()) {\n    <tr class=\"kpt-data-table__detail-row\">\n      <td class=\"kpt-data-table__detail\" [attr.colspan]=\"colspan()\">\n        <ng-container [ngTemplateOutlet]=\"rowDetailTpl()\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n      </td>\n    </tr>\n  }\n</ng-template>\n\n<ng-template #filterRowTpl>\n  <tr class=\"kpt-data-table__filter-row\">\n    @if (hasRowDetail()) {\n      <th class=\"kpt-data-table__expander\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"expanderStickyLeft()\"></th>\n    }\n    @if (selectable() !== 'none') {\n      <th class=\"kpt-data-table__checkbox\" [class.kpt-data-table__cell--frozen]=\"hasFrozen()\" [style.left.px]=\"checkboxStickyLeft()\"></th>\n    }\n    @for (col of orderedColumns(); track col.field) {\n      <th\n        [style.width]=\"col.width\"\n        [style.left.px]=\"frozenLeft(col.field)\"\n        [attr.data-align]=\"col.align ?? 'start'\"\n        [class.kpt-data-table__cell--frozen]=\"isFrozen(col.field)\"\n      >\n        @switch (col.filter?.type) {\n          @case ('text') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"search\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"'Filtr: ' + col.header\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"setColumnFilter(col.field, $any($event.target).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('number') {\n            <input\n              class=\"kpt-data-table__fcell\"\n              type=\"text\"\n              inputmode=\"numeric\"\n              [attr.placeholder]=\"col.filter?.placeholder || ''\"\n              [attr.aria-label]=\"'Filtr: ' + col.header\"\n              [value]=\"$any(columnFilters()[col.field]) || ''\"\n              (input)=\"onNumberFilter(col.field, $event)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          }\n          @case ('select') {\n            <kpt-select\n              [options]=\"col.filter?.options || []\"\n              [multiple]=\"!!col.filter?.multiple\"\n              filter\n              [placeholder]=\"col.filter?.placeholder || 'Wszystkie'\"\n              [value]=\"columnFilters()[col.field] ?? null\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n          @case ('numberRange') {\n            <div class=\"kpt-data-table__frange\">\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                placeholder=\"min\"\n                [attr.aria-label]=\"'Filtr min: ' + col.header\"\n                [value]=\"rangeVal(col.field).min\"\n                (input)=\"setRangeFilter(col.field, 'min', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n              <input\n                class=\"kpt-data-table__fcell\"\n                type=\"text\"\n                inputmode=\"numeric\"\n                placeholder=\"max\"\n                [attr.aria-label]=\"'Filtr max: ' + col.header\"\n                [value]=\"rangeVal(col.field).max\"\n                (input)=\"setRangeFilter(col.field, 'max', $event)\"\n                (click)=\"$event.stopPropagation()\"\n              />\n            </div>\n          }\n          @case ('slider') {\n            <div class=\"kpt-data-table__fslider\" (click)=\"$event.stopPropagation()\">\n              <kpt-slider\n                range\n                [min]=\"col.filter?.min ?? 0\"\n                [max]=\"col.filter?.max ?? 100\"\n                [step]=\"col.filter?.step ?? 1\"\n                [value]=\"sliderVal(col)\"\n                (valueChange)=\"setColumnFilter(col.field, $event)\"\n                showValue\n              />\n            </div>\n          }\n          @case ('dateRange') {\n            <kpt-date-range\n              [placeholder]=\"col.filter?.placeholder || 'Zakres dat'\"\n              [value]=\"$any(columnFilters()[col.field]) || { start: '', end: '' }\"\n              (valueChange)=\"setColumnFilter(col.field, $event)\"\n            />\n          }\n        }\n      </th>\n    }\n  </tr>\n</ng-template>\n\n@if (pageSize() > 0 && !virtualScroll()) {\n  <kpt-paginator\n    [length]=\"filteredCount()\"\n    [pageIndex]=\"pageIndex()\"\n    (pageIndexChange)=\"pageIndex.set($event)\"\n    [pageSize]=\"pageSizeState()\"\n    (pageSizeChange)=\"pageSizeState.set($event)\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n  />\n}\n", styles: ["@layer kpt.components{.kpt-data-table{display:flex;flex-direction:column;background:var(--kpt-table-bg);color:var(--kpt-table-fg);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);border-radius:var(--kpt-table-radius, .75rem);overflow:hidden}.kpt-data-table__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__filter{width:100%;max-width:20rem;height:2.25rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text)}.kpt-data-table__filter:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__scroll{overflow:auto}.kpt-data-table__table{width:100%;border-collapse:collapse;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-table__table--frozen{width:max-content;min-width:100%}.kpt-data-table__table th,.kpt-data-table__table td{padding:var(--kpt-table-cell-padding, .75rem);text-align:start;border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table__table th[data-align=center],.kpt-data-table__table td[data-align=center]{text-align:center}.kpt-data-table__table th[data-align=end],.kpt-data-table__table td[data-align=end]{text-align:end}.kpt-data-table__table thead th{position:sticky;top:0;z-index:1;background:var(--kpt-table-header-bg);color:var(--kpt-table-header-fg);font-weight:var(--kpt-font-weight-semibold, 600);white-space:nowrap;-webkit-user-select:none;user-select:none}.kpt-data-table__table thead tr:nth-child(2) th{top:var(--kpt-thead-offset, 0px)}.kpt-data-table__filter-row th{padding:var(--kpt-space-2, .5rem);font-weight:var(--kpt-font-weight-normal, 400);cursor:auto}.kpt-data-table__fcell{width:100%;height:2rem;padding-inline:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font:inherit}.kpt-data-table__fcell:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-data-table__filter-row kpt-select,.kpt-data-table__filter-row kpt-date-range{display:block;width:100%;font-weight:var(--kpt-font-weight-normal, 400)}.kpt-data-table__frange{display:flex;gap:var(--kpt-space-2, .5rem)}.kpt-data-table__frange .kpt-data-table__fcell{min-width:0}.kpt-data-table__fslider .kpt-slider-host{width:100%}.kpt-data-table__fslider .kpt-slider__value{min-width:auto;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted)}.kpt-data-table__th--sortable{cursor:pointer}.kpt-data-table__th--sortable:hover{color:var(--kpt-color-on-surface)}.kpt-data-table__sort{margin-inline-start:.35em;opacity:.35}.kpt-data-table__sort--active{opacity:1}.kpt-data-table__th--draggable{cursor:grab}.kpt-data-table__th--draggable:active{cursor:grabbing}.kpt-data-table__th--dragover{box-shadow:inset 2px 0 0 0 var(--kpt-color-primary)}.kpt-data-table__grip{margin-inline-end:.4em;opacity:.45}.kpt-data-table__checkbox{width:1px;white-space:nowrap;text-align:center}.kpt-data-table__checkbox input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;display:inline-block;width:1.15rem;height:1.15rem;margin:0;vertical-align:middle;cursor:pointer;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__checkbox input[type=checkbox]:after{content:\"\";position:absolute;inset:0;opacity:0;background-color:var(--kpt-color-on-primary);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard);-webkit-mask:no-repeat center/.85rem;mask:no-repeat center/.85rem}.kpt-data-table__checkbox input[type=checkbox]:checked,.kpt-data-table__checkbox input[type=checkbox]:indeterminate{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-data-table__checkbox input[type=checkbox]:checked:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:indeterminate:after{opacity:1;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8h9' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E\")}.kpt-data-table__checkbox input[type=checkbox]:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander{width:2.5rem;min-width:2.5rem;text-align:center;white-space:nowrap}.kpt-data-table__expander-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-on-surface-muted);cursor:pointer;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn kpt-icon{display:inline-flex;transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table__expander-btn:hover{background:var(--kpt-table-row-hover);color:var(--kpt-color-on-surface)}.kpt-data-table__expander-btn:focus-visible{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-data-table__expander-btn--open{color:var(--kpt-color-primary)}.kpt-data-table__expander-btn--open kpt-icon{transform:rotate(90deg)}.kpt-data-table__detail-row>.kpt-data-table__detail{padding:var(--kpt-space-4, 1rem);background:var(--kpt-table-detail-bg, var(--kpt-color-surface-variant, var(--kpt-table-row-hover)));border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border);box-shadow:inset 3px 0 0 0 var(--kpt-color-primary)}.kpt-data-table tbody tr{transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-data-table tbody tr:hover{background:var(--kpt-table-row-hover)}.kpt-data-table tbody tr.kpt-data-table__detail-row:hover{background:transparent}.kpt-data-table__row--selected{background:var(--kpt-table-row-selected)!important}.kpt-data-table__row--expanded{background:var(--kpt-table-row-hover)}.kpt-data-table__table--frozen .kpt-data-table__checkbox{width:3rem;min-width:3rem}.kpt-data-table__table--frozen .kpt-data-table__expander{width:2.5rem;min-width:2.5rem}.kpt-data-table__cell--frozen{position:sticky;z-index:1;background:var(--kpt-table-bg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-table-border)}.kpt-data-table thead th.kpt-data-table__cell--frozen{z-index:3;background:var(--kpt-table-header-bg)}.kpt-data-table tbody tr:hover .kpt-data-table__cell--frozen{background:var(--kpt-table-row-hover)}.kpt-data-table__row--selected.kpt-data-table__row--selected .kpt-data-table__cell--frozen,.kpt-data-table tbody tr.kpt-data-table__row--selected .kpt-data-table__cell--frozen{background:var(--kpt-table-row-selected)}.kpt-data-table__state{padding:var(--kpt-space-8, 2rem)!important;text-align:center!important;color:var(--kpt-color-on-surface-muted)}.kpt-data-table__table--virtual td{padding-block:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kpt-data-table__spacer td{padding:0!important;border:0!important}.kpt-data-table tbody tr:last-child td{border-bottom:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterRowPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRowPosition", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportFilename: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFilename", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], multiExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiExpand", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], expandedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRows", required: false }] }, { type: i0.Output, args: ["expandedRowsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] } });
 
 /**
  * Drzewo hierarchiczne (rozwijanie, zaznaczanie, ikony). Dane przez `nodes`.
@@ -4841,90 +6952,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, host: { class: 'kpt-toast-container-host' }, styles: ["@layer kpt.components{.kpt-toast-container{position:fixed;inset-block-end:var(--kpt-space-4, 1rem);inset-inline-end:var(--kpt-space-4, 1rem);z-index:var(--kpt-z-toast, 1300);display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem);max-width:min(24rem,100vw - 2rem);pointer-events:none}.kpt-toast{--_accent: var(--kpt-color-info);pointer-events:auto;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 var(--kpt-color-border);border-inline-start:3px solid var(--_accent);border-radius:var(--kpt-radius-md, .5rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-3);font-size:var(--kpt-font-size-sm, .875rem);animation:kpt-toast-in var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-emphasized)}.kpt-toast[data-variant=success]{--_accent: var(--kpt-color-success)}.kpt-toast[data-variant=warning]{--_accent: var(--kpt-color-warning)}.kpt-toast[data-variant=danger]{--_accent: var(--kpt-color-danger)}.kpt-toast__icon{color:var(--_accent);font-weight:700}.kpt-toast__content{flex:1;min-width:0}.kpt-toast__title{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:.1rem}.kpt-toast__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.15rem;line-height:1;padding:0}.kpt-toast__close:hover{color:var(--kpt-color-on-surface)}@keyframes kpt-toast-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.kpt-toast{animation:none}}}\n"] }]
         }] });
 
-/**
- * Dymek podpowiedzi (tooltip) pokazywany na hover/focus hosta. Lekki — element dodawany
- * do `body` i pozycjonowany względem hosta (działa w trybie zoneless).
- *
- * @example
- * <kpt-button kptTooltip="Zapisz zmiany" kptTooltipPosition="bottom">Zapisz</kpt-button>
- */
-class KptTooltip {
-    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'kptTooltip' });
-    position = input('top', { ...(ngDevMode ? { debugName: "position" } : /* istanbul ignore next */ {}), alias: 'kptTooltipPosition' });
-    host = inject(ElementRef);
-    tip;
-    show() {
-        if (this.tip || !this.text())
-            return;
-        const tip = document.createElement('div');
-        tip.className = 'kpt-tooltip';
-        tip.setAttribute('role', 'tooltip');
-        tip.textContent = this.text();
-        tip.style.cssText =
-            'position:fixed;z-index:1400;max-width:16rem;padding:0.35rem 0.6rem;' +
-                'border-radius:var(--kpt-radius-sm,0.25rem);font-size:var(--kpt-font-size-xs,0.75rem);' +
-                'line-height:1.4;background:var(--kpt-color-on-surface);color:var(--kpt-color-surface);' +
-                'box-shadow:var(--kpt-elevation-2);pointer-events:none;opacity:0;transition:opacity 120ms;';
-        document.body.appendChild(tip);
-        this.tip = tip;
-        this.reposition();
-        requestAnimationFrame(() => {
-            if (this.tip)
-                this.tip.style.opacity = '1';
-        });
-    }
-    hide() {
-        this.tip?.remove();
-        this.tip = undefined;
-    }
-    reposition() {
-        const tip = this.tip;
-        if (!tip)
-            return;
-        const r = this.host.nativeElement.getBoundingClientRect();
-        const t = tip.getBoundingClientRect();
-        const gap = 8;
-        let top;
-        let left;
-        switch (this.position()) {
-            case 'bottom':
-                top = r.bottom + gap;
-                left = r.left + r.width / 2 - t.width / 2;
-                break;
-            case 'left':
-                top = r.top + r.height / 2 - t.height / 2;
-                left = r.left - t.width - gap;
-                break;
-            case 'right':
-                top = r.top + r.height / 2 - t.height / 2;
-                left = r.right + gap;
-                break;
-            default:
-                top = r.top - t.height - gap;
-                left = r.left + r.width / 2 - t.width / 2;
-        }
-        tip.style.top = `${Math.max(4, top)}px`;
-        tip.style.left = `${Math.max(4, left)}px`;
-    }
-    ngOnDestroy() {
-        this.hide();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: KptTooltip, isStandalone: true, selector: "[kptTooltip]", inputs: { text: { classPropertyName: "text", publicName: "kptTooltip", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "kptTooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "focus": "show()", "blur": "hide()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptTooltip, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kptTooltip]',
-                    host: {
-                        '(mouseenter)': 'show()',
-                        '(mouseleave)': 'hide()',
-                        '(focus)': 'show()',
-                        '(blur)': 'hide()',
-                    },
-                }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltipPosition", required: false }] }] } });
-
 /**
  * Menu rozwijane (dropdown) na CDK Overlay. Trigger przez projekcję, pozycje przez `items`.
  * Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
@@ -5430,6 +7457,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 /**
  * Pozioma belka menu z rozwijanymi pod-menu. Pozycje bez `items` działają jak akcje/linki.
+ * Pod-menu renderowane przez CDK Overlay (doczepiane do `body`), więc nie są przycinane
+ * przez rodzica z `overflow: hidden`. Wymaga stylów overlay CDK:
+ * `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
  * <kpt-menubar [items]="items" (select)="onSelect($event)" />
@@ -5440,6 +7470,10 @@ class KptMenubar {
     select = output();
     openIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openIndex" }] : /* istanbul ignore next */ []));
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
     toggle(i, item) {
         if (item.disabled)
             return;
@@ -5469,6 +7503,8 @@ class KptMenubar {
             type="button"
             class="kpt-menubar__top"
             role="menuitem"
+            cdkOverlayOrigin
+            #origin="cdkOverlayOrigin"
             [class.is-open]="openIndex() === i"
             [disabled]="item.disabled"
             (click)="toggle(i, item)"
@@ -5478,7 +7514,16 @@ class KptMenubar {
             @if (item.items?.length) { <kpt-icon name="chevron-down" class="kpt-menubar__caret" /> }
           </button>
 
-          @if (openIndex() === i && item.items?.length) {
+          <ng-template
+            cdkConnectedOverlay
+            [cdkConnectedOverlayOrigin]="origin"
+            [cdkConnectedOverlayOpen]="openIndex() === i && !!item.items?.length"
+            [cdkConnectedOverlayPositions]="positions"
+            [cdkConnectedOverlayHasBackdrop]="true"
+            cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+            (backdropClick)="closeAll()"
+            (detach)="closeAll()"
+          >
             <div class="kpt-menubar__dropdown" role="menu">
               @for (sub of item.items; track $index) {
                 @if (sub.separator) {
@@ -5498,18 +7543,15 @@ class KptMenubar {
                 }
               }
             </div>
-          }
+          </ng-template>
         </div>
       }
     </nav>
-    @if (openIndex() !== null) {
-      <div class="kpt-menubar__backdrop" (click)="closeAll()"></div>
-    }
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-menubar-host{display:block}.kpt-menubar{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-menubar__group{position:relative}.kpt-menubar__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-menubar__top:hover:not(:disabled),.kpt-menubar__top.is-open{background:var(--kpt-color-muted)}.kpt-menubar__top:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__caret{opacity:.6}.kpt-menubar__dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);min-width:12rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-menubar__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-menubar__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-menubar__item:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__item--danger{color:var(--kpt-color-danger)}.kpt-menubar__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}.kpt-menubar__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-menubar-host{display:block}.kpt-menubar{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-menubar__group{display:inline-flex}.kpt-menubar__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-menubar__top:hover:not(:disabled),.kpt-menubar__top.is-open{background:var(--kpt-color-muted)}.kpt-menubar__top:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__caret{opacity:.6}.kpt-menubar__dropdown{min-width:12rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-menubar__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-menubar__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-menubar__item:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__item--danger{color:var(--kpt-color-danger)}.kpt-menubar__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptMenubar, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-menubar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
+            args: [{ selector: 'kpt-menubar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], template: `
     <nav class="kpt-menubar" role="menubar">
       @for (item of items(); track $index; let i = $index) {
         <div class="kpt-menubar__group">
@@ -5517,6 +7559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             type="button"
             class="kpt-menubar__top"
             role="menuitem"
+            cdkOverlayOrigin
+            #origin="cdkOverlayOrigin"
             [class.is-open]="openIndex() === i"
             [disabled]="item.disabled"
             (click)="toggle(i, item)"
@@ -5526,7 +7570,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             @if (item.items?.length) { <kpt-icon name="chevron-down" class="kpt-menubar__caret" /> }
           </button>
 
-          @if (openIndex() === i && item.items?.length) {
+          <ng-template
+            cdkConnectedOverlay
+            [cdkConnectedOverlayOrigin]="origin"
+            [cdkConnectedOverlayOpen]="openIndex() === i && !!item.items?.length"
+            [cdkConnectedOverlayPositions]="positions"
+            [cdkConnectedOverlayHasBackdrop]="true"
+            cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+            (backdropClick)="closeAll()"
+            (detach)="closeAll()"
+          >
             <div class="kpt-menubar__dropdown" role="menu">
               @for (sub of item.items; track $index) {
                 @if (sub.separator) {
@@ -5546,19 +7599,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }
               }
             </div>
-          }
+          </ng-template>
         </div>
       }
     </nav>
-    @if (openIndex() !== null) {
-      <div class="kpt-menubar__backdrop" (click)="closeAll()"></div>
-    }
-  `, host: { class: 'kpt-menubar-host' }, styles: ["@layer kpt.components{.kpt-menubar-host{display:block}.kpt-menubar{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-menubar__group{position:relative}.kpt-menubar__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-menubar__top:hover:not(:disabled),.kpt-menubar__top.is-open{background:var(--kpt-color-muted)}.kpt-menubar__top:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__caret{opacity:.6}.kpt-menubar__dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);min-width:12rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-menubar__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-menubar__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-menubar__item:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__item--danger{color:var(--kpt-color-danger)}.kpt-menubar__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}.kpt-menubar__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}}\n"] }]
+  `, host: { class: 'kpt-menubar-host' }, styles: ["@layer kpt.components{.kpt-menubar-host{display:block}.kpt-menubar{display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-menubar__group{display:inline-flex}.kpt-menubar__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-menubar__top:hover:not(:disabled),.kpt-menubar__top.is-open{background:var(--kpt-color-muted)}.kpt-menubar__top:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__caret{opacity:.6}.kpt-menubar__dropdown{min-width:12rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-menubar__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-menubar__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-menubar__item:disabled{opacity:.5;cursor:not-allowed}.kpt-menubar__item--danger{color:var(--kpt-color-danger)}.kpt-menubar__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 /**
  * Mega-menu — pozioma belka z szerokim, wielokolumnowym panelem.
  * Struktura: pozycja górna → `items` (kolumny) → każda kolumna `items` (odnośniki).
+ * Panel renderowany przez CDK Overlay (doczepiony do `body`), więc nie jest przycinany
+ * przez rodzica z `overflow: hidden`. Wymaga stylów overlay CDK:
+ * `import '@angular/cdk/overlay-prebuilt.css';`
  *
  * @example
  * <kpt-megamenu [items]="items" (select)="onSelect($event)" />
@@ -5569,6 +7622,10 @@ class KptMegamenu {
     select = output();
     openIndex = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openIndex" }] : /* istanbul ignore next */ []));
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
     activeColumns() {
         const i = this.openIndex();
         return i === null ? [] : this.items()[i]?.items ?? [];
@@ -5587,7 +7644,7 @@ class KptMegamenu {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptMegamenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: KptMegamenu, isStandalone: true, selector: "kpt-megamenu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "kpt-megamenu-host" }, ngImport: i0, template: `
-    <nav class="kpt-megamenu" role="menubar">
+    <nav class="kpt-megamenu" role="menubar" cdkOverlayOrigin #origin="cdkOverlayOrigin">
       @for (item of items(); track $index; let i = $index) {
         <button
           type="button"
@@ -5601,32 +7658,38 @@ class KptMegamenu {
           <kpt-icon name="chevron-down" class="kpt-megamenu__caret" />
         </button>
       }
-
-      @if (activeColumns().length) {
-        <div class="kpt-megamenu__panel" role="menu">
-          @for (col of activeColumns(); track $index) {
-            <div class="kpt-megamenu__column">
-              @if (col.label) { <div class="kpt-megamenu__col-title">{{ col.label }}</div> }
-              @for (link of col.items ?? []; track $index) {
-                <button type="button" class="kpt-megamenu__link" [disabled]="link.disabled" (click)="pick(link)">
-                  @if (link.icon) { <kpt-icon [name]="link.icon" /> }
-                  <span>{{ link.label }}</span>
-                </button>
-              }
-            </div>
-          }
-        </div>
-      }
     </nav>
-    @if (openIndex() !== null) {
-      <div class="kpt-megamenu__backdrop" (click)="closeAll()"></div>
-    }
-  `, isInline: true, styles: ["@layer kpt.components{.kpt-megamenu-host{display:block}.kpt-megamenu{position:relative;display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-megamenu__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-megamenu__top:hover,.kpt-megamenu__top.is-open{background:var(--kpt-color-muted)}.kpt-megamenu__caret{opacity:.6}.kpt-megamenu__panel{position:absolute;top:calc(100% + 4px);left:0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);display:flex;gap:var(--kpt-space-6, 1.5rem);min-width:min(40rem,90vw);padding:var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-megamenu__column{min-width:9rem}.kpt-megamenu__col-title{margin-bottom:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--kpt-color-on-surface-muted)}.kpt-megamenu__link{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-megamenu__link:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-megamenu__link:disabled{opacity:.5;cursor:not-allowed}.kpt-megamenu__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}}\n"], dependencies: [{ kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="openIndex() !== null"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      (backdropClick)="closeAll()"
+      (detach)="closeAll()"
+    >
+      <div class="kpt-megamenu__panel" role="menu">
+        @for (col of activeColumns(); track $index) {
+          <div class="kpt-megamenu__column">
+            @if (col.label) { <div class="kpt-megamenu__col-title">{{ col.label }}</div> }
+            @for (link of col.items ?? []; track $index) {
+              <button type="button" class="kpt-megamenu__link" [disabled]="link.disabled" (click)="pick(link)">
+                @if (link.icon) { <kpt-icon [name]="link.icon" /> }
+                <span>{{ link.label }}</span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@layer kpt.components{.kpt-megamenu-host{display:block}.kpt-megamenu{position:relative;display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-megamenu__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-megamenu__top:hover,.kpt-megamenu__top.is-open{background:var(--kpt-color-muted)}.kpt-megamenu__caret{opacity:.6}.kpt-megamenu__panel{display:flex;gap:var(--kpt-space-6, 1.5rem);min-width:min(40rem,90vw);padding:var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-megamenu__column{min-width:9rem}.kpt-megamenu__col-title{margin-bottom:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--kpt-color-on-surface-muted)}.kpt-megamenu__link{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-megamenu__link:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-megamenu__link:disabled{opacity:.5;cursor:not-allowed}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: KptIcon, selector: "kpt-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: KptMegamenu, decorators: [{
             type: Component,
-            args: [{ selector: 'kpt-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <nav class="kpt-megamenu" role="menubar">
+            args: [{ selector: 'kpt-megamenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], template: `
+    <nav class="kpt-megamenu" role="menubar" cdkOverlayOrigin #origin="cdkOverlayOrigin">
       @for (item of items(); track $index; let i = $index) {
         <button
           type="button"
@@ -5640,27 +7703,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           <kpt-icon name="chevron-down" class="kpt-megamenu__caret" />
         </button>
       }
-
-      @if (activeColumns().length) {
-        <div class="kpt-megamenu__panel" role="menu">
-          @for (col of activeColumns(); track $index) {
-            <div class="kpt-megamenu__column">
-              @if (col.label) { <div class="kpt-megamenu__col-title">{{ col.label }}</div> }
-              @for (link of col.items ?? []; track $index) {
-                <button type="button" class="kpt-megamenu__link" [disabled]="link.disabled" (click)="pick(link)">
-                  @if (link.icon) { <kpt-icon [name]="link.icon" /> }
-                  <span>{{ link.label }}</span>
-                </button>
-              }
-            </div>
-          }
-        </div>
-      }
     </nav>
-    @if (openIndex() !== null) {
-      <div class="kpt-megamenu__backdrop" (click)="closeAll()"></div>
-    }
-  `, host: { class: 'kpt-megamenu-host' }, styles: ["@layer kpt.components{.kpt-megamenu-host{display:block}.kpt-megamenu{position:relative;display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-megamenu__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-megamenu__top:hover,.kpt-megamenu__top.is-open{background:var(--kpt-color-muted)}.kpt-megamenu__caret{opacity:.6}.kpt-megamenu__panel{position:absolute;top:calc(100% + 4px);left:0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);display:flex;gap:var(--kpt-space-6, 1.5rem);min-width:min(40rem,90vw);padding:var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-megamenu__column{min-width:9rem}.kpt-megamenu__col-title{margin-bottom:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--kpt-color-on-surface-muted)}.kpt-megamenu__link{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-megamenu__link:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-megamenu__link:disabled{opacity:.5;cursor:not-allowed}.kpt-megamenu__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}}\n"] }]
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="openIndex() !== null"
+      [cdkConnectedOverlayPositions]="positions"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+      (backdropClick)="closeAll()"
+      (detach)="closeAll()"
+    >
+      <div class="kpt-megamenu__panel" role="menu">
+        @for (col of activeColumns(); track $index) {
+          <div class="kpt-megamenu__column">
+            @if (col.label) { <div class="kpt-megamenu__col-title">{{ col.label }}</div> }
+            @for (link of col.items ?? []; track $index) {
+              <button type="button" class="kpt-megamenu__link" [disabled]="link.disabled" (click)="pick(link)">
+                @if (link.icon) { <kpt-icon [name]="link.icon" /> }
+                <span>{{ link.label }}</span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, host: { class: 'kpt-megamenu-host' }, styles: ["@layer kpt.components{.kpt-megamenu-host{display:block}.kpt-megamenu{position:relative;display:flex;align-items:center;gap:var(--kpt-space-1, .25rem);padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem)}.kpt-megamenu__top{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-megamenu__top:hover,.kpt-megamenu__top.is-open{background:var(--kpt-color-muted)}.kpt-megamenu__caret{opacity:.6}.kpt-megamenu__panel{display:flex;gap:var(--kpt-space-6, 1.5rem);min-width:min(40rem,90vw);padding:var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-megamenu__column{min-width:9rem}.kpt-megamenu__col-title{margin-bottom:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em;color:var(--kpt-color-on-surface-muted)}.kpt-megamenu__link{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-megamenu__link:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-megamenu__link:disabled{opacity:.5;cursor:not-allowed}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 /**
@@ -5859,5 +7928,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptScrollTop, KptSelect, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree };
+export { KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree };
 //# sourceMappingURL=konce-pt-angular.mjs.map