@konce-pt/angular 0.8.3 → 0.8.5

package/fesm2022/konce-pt-angular.mjs

@@ -7,10 +7,14 @@ import { KPT_MESSAGES_EN, KPT_MESSAGES_PL, deepMerge, translate, weekdayNames, m
 export { KPT_MESSAGES_EN, KPT_MESSAGES_PL } from '@konce-pt/i18n';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { pad, hourMarks, minuteMarks, handAngle, handIsInner, parseTime, from12h, hourFromAngle, minuteFromAngle, commitLevelFor, decadeStart, centuryStart, canPageBack, canPageForward, formatTime, buildDayGrid, toIso, selectedYearMonth, buildMonthCells, buildYearCells, buildDecadeCells, initialPage, resolveStartView, parseDateTime, formatDate, KPT_CALENDAR_LEVELS, pageBy, clampVisibleMonths, datePart, timePart, buildRangeGrid, pickRangeDay } from '@konce-pt/datetime';
+import { KPT_MENTION_LIMIT, mentionQuery, filterMentions, parseMentionText } from '@konce-pt/mention';
+export { KPT_MENTION_LIMIT, applyMention, collectMentions, filterMentions, foldMentionText, mentionQuery, mentionToken, parseMentionText } from '@konce-pt/mention';
+import { KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_GAP, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF, KPT_WAVE_ROTATION, KPT_WAVE_BAND, KPT_WAVE_AMPLITUDE, KPT_BACKDROP_MAX_STEP, resolveBackdropColors, adaptBackdropValue, readBackdropSurface, readBackdropInk, createBackdropRenderer, KPT_BACKDROP_MAX_DPR, observeBackdropTheme, readBackdropLead } from '@konce-pt/backdrop';
+export { KPT_SIGNAL_GRID_CELL, KPT_SIGNAL_GRID_DENSITY, KPT_SIGNAL_GRID_FALLOFF, KPT_SIGNAL_GRID_GAP, KPT_WAVE_AMPLITUDE, KPT_WAVE_BAND, KPT_WAVE_RESOLUTION, KPT_WAVE_ROTATION, buildSignalGrid, createBackdropRenderer, mixOklch, readCssColor, resolveWave, shiftHue, signalGridAlpha, signalGridDensity, waveIntensity, waveRamp } from '@konce-pt/backdrop';
 import { form, required, email, minLength, validateTree, submit, FormField, FormRoot } from '@angular/forms/signals';
 import { toText, aggregate, escapeCsvCell, isEmptyFilterValue, matchesColumnFilter } from '@konce-pt/table';
 
-const _c0$F = ["*"];
+const _c0$J = ["*"];
 function KptButton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElement(0, "span", 1);
 } }
@@ -45,7 +49,7 @@ class KptButton {
     static { this.ɵfac = function KptButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptButton)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptButton, selectors: [["kpt-button"]], hostAttrs: [1, "kpt-button-host"], hostVars: 2, hostBindings: function KptButton_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassProp("kpt-button-host--full", ctx.fullWidth());
-        } }, inputs: { variant: [1, "variant"], size: [1, "size"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], fullWidth: [1, "fullWidth"] }, ngContentSelectors: _c0$F, decls: 4, vars: 8, consts: [[1, "kpt-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-button__spinner"], [1, "kpt-button__content"]], template: function KptButton_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { variant: [1, "variant"], size: [1, "size"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], fullWidth: [1, "fullWidth"] }, ngContentSelectors: _c0$J, decls: 4, vars: 8, consts: [[1, "kpt-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-button__spinner"], [1, "kpt-button__content"]], template: function KptButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "button", 0);
             i0.ɵɵconditionalCreate(1, KptButton_Conditional_1_Template, 1, 0, "span", 1);
@@ -69,7 +73,7 @@ class KptButton {
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButton, { className: "KptButton", filePath: "lib/button/button.component.ts", lineNumber: 32 }); })();
 
-const _c0$E = ["*"];
+const _c0$I = ["*"];
 function KptIconButton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElement(0, "span", 1);
 } }
@@ -106,18 +110,25 @@ class KptIconButton {
          */
         this.ariaPressed = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaPressed" }] : /* istanbul ignore next */ []));
+        /**
+         * Stan rozwinięcia dla przycisku otwierającego panel (wybierak, menu). Z tego samego powodu
+         * co `ariaPressed` musi zjechać na wewnętrzny `<button>` — host nie ma roli przycisku, więc
+         * atrybut postawiony na nim nie znaczy dla czytnika nic. `null` (domyślnie) go nie wypisuje.
+         */
+        this.ariaExpanded = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptIconButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconButton)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIconButton, selectors: [["kpt-icon-button"]], hostAttrs: [1, "kpt-icon-button-host"], inputs: { variant: [1, "variant"], size: [1, "size"], shape: [1, "shape"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], ariaLabel: [1, "ariaLabel"], ariaPressed: [1, "ariaPressed"] }, ngContentSelectors: _c0$E, decls: 3, vars: 9, consts: [[1, "kpt-icon-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-icon-button__spinner"]], template: function KptIconButton_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIconButton, selectors: [["kpt-icon-button"]], hostAttrs: [1, "kpt-icon-button-host"], inputs: { variant: [1, "variant"], size: [1, "size"], shape: [1, "shape"], type: [1, "type"], disabled: [1, "disabled"], loading: [1, "loading"], ariaLabel: [1, "ariaLabel"], ariaPressed: [1, "ariaPressed"], ariaExpanded: [1, "ariaExpanded"] }, ngContentSelectors: _c0$I, decls: 3, vars: 10, consts: [[1, "kpt-icon-button", 3, "type", "disabled"], ["aria-hidden", "true", 1, "kpt-icon-button__spinner"]], template: function KptIconButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "button", 0);
             i0.ɵɵconditionalCreate(1, KptIconButton_Conditional_1_Template, 1, 0, "span", 1)(2, KptIconButton_Conditional_2_Template, 1, 0);
             i0.ɵɵdomElementEnd();
         } if (rf & 2) {
             i0.ɵɵdomProperty("type", ctx.type())("disabled", ctx.isDisabled());
-            i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("data-shape", ctx.shape())("aria-label", ctx.ariaLabel())("aria-pressed", ctx.ariaPressed())("aria-busy", ctx.loading() ? "true" : null);
+            i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("data-shape", ctx.shape())("aria-label", ctx.ariaLabel())("aria-pressed", ctx.ariaPressed())("aria-expanded", ctx.ariaExpanded())("aria-busy", ctx.loading() ? "true" : null);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loading() ? 1 : 2);
         } }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-color-on-surface);--%NS%_bg-hover: var(--%NS%kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--%NS%kpt-border-width-thin, 1px) solid transparent;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--%NS%kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"], encapsulation: 2 }); }
@@ -134,6 +145,7 @@ class KptIconButton {
       [disabled]="isDisabled()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-pressed]="ariaPressed()"
+      [attr.aria-expanded]="ariaExpanded()"
       [attr.aria-busy]="loading() ? 'true' : null"
     >
       @if (loading()) {
@@ -143,8 +155,8 @@ class KptIconButton {
       }
     </button>
   `, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--kpt-border-width-thin, 1px) solid transparent;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black)}@media(prefers-reduced-motion:reduce){.kpt-icon-button:after{transition:none}}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"] }]
-    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIconButton, { className: "KptIconButton", filePath: "lib/icon-button/icon-button.component.ts", lineNumber: 37 }); })();
+    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], ariaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaPressed", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIconButton, { className: "KptIconButton", filePath: "lib/icon-button/icon-button.component.ts", lineNumber: 38 }); })();
 
 const _forTrack0$e = ($index, $item) => $item.value;
 function KptButtonGroup_For_2_Template(rf, ctx) { if (rf & 1) {
@@ -218,7 +230,7 @@ class KptButtonGroup {
     }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButtonGroup, { className: "KptButtonGroup", filePath: "lib/button-group/button-group.component.ts", lineNumber: 41 }); })();
 
-const _c0$D = ["*"];
+const _c0$H = ["*"];
 /**
  * Floating Action Button (FAB) — okrągły, wyniesiony przycisk akcji. Wariant `extended` = pigułka z tekstem.
  *
@@ -241,7 +253,7 @@ class KptFab {
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptFab_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptFab)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFab, selectors: [["kpt-fab"]], hostAttrs: [1, "kpt-fab-host"], inputs: { variant: [1, "variant"], size: [1, "size"], extended: [1, "extended"], disabled: [1, "disabled"], type: [1, "type"], ariaLabel: [1, "ariaLabel"] }, ngContentSelectors: _c0$D, decls: 2, vars: 7, consts: [[1, "kpt-fab", 3, "type", "disabled"]], template: function KptFab_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFab, selectors: [["kpt-fab"]], hostAttrs: [1, "kpt-fab-host"], inputs: { variant: [1, "variant"], size: [1, "size"], extended: [1, "extended"], disabled: [1, "disabled"], type: [1, "type"], ariaLabel: [1, "ariaLabel"] }, ngContentSelectors: _c0$H, decls: 2, vars: 7, consts: [[1, "kpt-fab", 3, "type", "disabled"]], template: function KptFab_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "button", 0);
             i0.ɵɵprojection(1);
@@ -441,7 +453,7 @@ class KptAvatar {
     }], null, { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatar, { className: "KptAvatar", filePath: "lib/avatar/avatar.component.ts", lineNumber: 46 }); })();
 
-const _c0$C = ["*"];
+const _c0$G = ["*"];
 /**
  * Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
  *
@@ -473,7 +485,7 @@ class KptBadge {
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptBadge_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBadge)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBadge, selectors: [["kpt-badge"]], hostAttrs: [1, "kpt-badge-host"], inputs: { value: [1, "value"], variant: [1, "variant"], size: [1, "size"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$C, decls: 3, vars: 7, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBadge, selectors: [["kpt-badge"]], hostAttrs: [1, "kpt-badge-host"], inputs: { value: [1, "value"], variant: [1, "variant"], size: [1, "size"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$G, decls: 3, vars: 7, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
             i0.ɵɵdomElementStart(1, "span", 0);
@@ -566,7 +578,7 @@ class KptI18n {
         args: [{ providedIn: 'root' }]
     }], () => [], null); })();
 
-const _c0$B = ["*"];
+const _c0$F = ["*"];
 function KptSplitButton_ng_template_6_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 7);
 } }
@@ -708,7 +720,7 @@ class KptSplitButton {
         this.open.set(false);
     }
     static { this.ɵfac = function KptSplitButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSplitButton)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitButton, selectors: [["kpt-split-button"]], hostAttrs: [1, "kpt-split-button-host"], inputs: { variant: [1, "variant"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { primaryClick: "primaryClick", selected: "selected" }, ngContentSelectors: _c0$B, decls: 7, vars: 8, consts: [["origin", "cdkOverlayOrigin"], [1, "kpt-split-button"], ["type", "button", 1, "kpt-split-button__main", 3, "click", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-split-button__toggle", 3, "click", "disabled"], ["name", "chevron-down"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-split-button__panel"], ["role", "separator", 1, "kpt-split-button__separator"], ["role", "presentation", 1, "kpt-split-button__header"], ["type", "button", 1, "kpt-split-button__item", 3, "kpt-split-button__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-split-button__text"], [1, "kpt-split-button__label"], [1, "kpt-split-button__description"], ["type", "button", 1, "kpt-split-button__item", 3, "click", "disabled"], [1, "kpt-split-button__badge", 3, "value", "variant"]], template: function KptSplitButton_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitButton, selectors: [["kpt-split-button"]], hostAttrs: [1, "kpt-split-button-host"], inputs: { variant: [1, "variant"], items: [1, "items"], disabled: [1, "disabled"] }, outputs: { primaryClick: "primaryClick", selected: "selected" }, ngContentSelectors: _c0$F, decls: 7, vars: 8, consts: [["origin", "cdkOverlayOrigin"], [1, "kpt-split-button"], ["type", "button", 1, "kpt-split-button__main", 3, "click", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-split-button__toggle", 3, "click", "disabled"], ["name", "chevron-down"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-split-button__panel"], ["role", "separator", 1, "kpt-split-button__separator"], ["role", "presentation", 1, "kpt-split-button__header"], ["type", "button", 1, "kpt-split-button__item", 3, "kpt-split-button__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-split-button__text"], [1, "kpt-split-button__label"], [1, "kpt-split-button__description"], ["type", "button", 1, "kpt-split-button__item", 3, "click", "disabled"], [1, "kpt-split-button__badge", 3, "value", "variant"]], template: function KptSplitButton_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1)(1, "button", 2);
             i0.ɵɵlistener("click", function KptSplitButton_Template_button_click_1_listener() { return ctx.primaryClick.emit(); });
@@ -941,7 +953,7 @@ function provideKptI18n(config = {}) {
  * dzięki czemu komponenty i `public-api.ts` nie musiały się zmieniać.
  */
 
-const _c0$A = ["*"];
+const _c0$E = ["*"];
 function KptChip_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -959,18 +971,26 @@ function KptChip_Conditional_2_Template(rf, ctx) { if (rf & 1) {
  * @example
  * <kpt-chip>Angular</kpt-chip>
  * <kpt-chip variant="success" removable (removed)="onRemove()">UI</kpt-chip>
+ * <kpt-chip textTransform="capitalize">nowość · zestaw startowy</kpt-chip>
  */
 class KptChip {
     constructor() {
         this.variant = input('neutral', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /**
+         * Wielkość liter etykiety. `capitalize` podnosi pierwszą literę każdego słowa — także po
+         * dywizie („Agent-Ready"), bo CSS nie wie, gdzie kończy się wyraz złożony; przy takich
+         * napisach pewniejszy jest zapis wprost w treści.
+         */
+        this.textTransform = input('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textTransform" }] : /* istanbul ignore next */ []));
         this.removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.removed = output();
         this.i18n = inject(KptI18n);
     }
     static { this.ɵfac = function KptChip_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptChip)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChip, selectors: [["kpt-chip"]], hostAttrs: [1, "kpt-chip-host"], inputs: { variant: [1, "variant"], removable: [1, "removable"], disabled: [1, "disabled"] }, outputs: { removed: "removed" }, ngContentSelectors: _c0$A, decls: 3, vars: 4, consts: [[1, "kpt-chip"], ["type", "button", 1, "kpt-chip__remove", 3, "disabled"], ["type", "button", 1, "kpt-chip__remove", 3, "click", "disabled"], ["name", "x"]], template: function KptChip_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptChip, selectors: [["kpt-chip"]], hostAttrs: [1, "kpt-chip-host"], inputs: { variant: [1, "variant"], textTransform: [1, "textTransform"], removable: [1, "removable"], disabled: [1, "disabled"] }, outputs: { removed: "removed" }, ngContentSelectors: _c0$E, decls: 3, vars: 5, consts: [[1, "kpt-chip"], ["type", "button", 1, "kpt-chip__remove", 3, "disabled"], ["type", "button", 1, "kpt-chip__remove", 3, "click", "disabled"], ["name", "x"]], template: function KptChip_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "span", 0);
             i0.ɵɵprojection(1);
@@ -978,15 +998,20 @@ class KptChip {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassProp("kpt-chip--disabled", ctx.disabled());
-            i0.ɵɵattribute("data-variant", ctx.variant());
+            i0.ɵɵattribute("data-variant", ctx.variant())("data-text-transform", ctx.textTransform() === "none" ? null : ctx.textTransform());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.removable() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-primary) 14%, var(--%NS%kpt-color-surface));--%NS%_fg: var(--%NS%kpt-color-primary)}.kpt-chip[data-variant=success]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-success) 18%, transparent);--%NS%_fg: var(--%NS%kpt-color-success)}.kpt-chip[data-variant=danger]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-danger) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-danger)}.kpt-chip[data-variant=warning]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-warning) 20%, transparent);--%NS%_fg: var(--%NS%kpt-color-warning)}.kpt-chip[data-variant=info]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-info) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-info)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-primary) 14%, var(--%NS%kpt-color-surface));--%NS%_fg: var(--%NS%kpt-color-primary)}.kpt-chip[data-variant=success]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-success) 18%, transparent);--%NS%_fg: var(--%NS%kpt-color-success)}.kpt-chip[data-variant=danger]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-danger) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-danger)}.kpt-chip[data-variant=warning]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-warning) 20%, transparent);--%NS%_fg: var(--%NS%kpt-color-warning)}.kpt-chip[data-variant=info]{--%NS%_bg: color-mix(in oklch, var(--%NS%kpt-color-info) 16%, transparent);--%NS%_fg: var(--%NS%kpt-color-info)}.kpt-chip[data-text-transform=capitalize]{text-transform:capitalize;font-size:var(--%NS%kpt-font-size-sm, .85rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=uppercase]{text-transform:uppercase;font-size:var(--%NS%kpt-font-size-sm, .85rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=lowercase]{text-transform:lowercase;font-size:var(--%NS%kpt-font-size-sm, .75rem);font-weight:var(--%NS%kpt-font-weight-light, 100)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptChip, [{
         type: Component,
         args: [{ selector: 'kpt-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <span class="kpt-chip" [attr.data-variant]="variant()" [class.kpt-chip--disabled]="disabled()">
+    <span
+      class="kpt-chip"
+      [attr.data-variant]="variant()"
+      [attr.data-text-transform]="textTransform() === 'none' ? null : textTransform()"
+      [class.kpt-chip--disabled]="disabled()"
+    >
       <ng-content />
       @if (removable()) {
         <button
@@ -998,9 +1023,9 @@ class KptChip {
         ><kpt-icon name="x" /></button>
       }
     </span>
-  `, host: { class: 'kpt-chip-host' }, styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--_bg: color-mix(in oklch, var(--kpt-color-primary) 14%, var(--kpt-color-surface));--_fg: var(--kpt-color-primary)}.kpt-chip[data-variant=success]{--_bg: color-mix(in oklch, var(--kpt-color-success) 18%, transparent);--_fg: var(--kpt-color-success)}.kpt-chip[data-variant=danger]{--_bg: color-mix(in oklch, var(--kpt-color-danger) 16%, transparent);--_fg: var(--kpt-color-danger)}.kpt-chip[data-variant=warning]{--_bg: color-mix(in oklch, var(--kpt-color-warning) 20%, transparent);--_fg: var(--kpt-color-warning)}.kpt-chip[data-variant=info]{--_bg: color-mix(in oklch, var(--kpt-color-info) 16%, transparent);--_fg: var(--kpt-color-info)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"] }]
-    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptChip, { className: "KptChip", filePath: "lib/chip/chip.component.ts", lineNumber: 36 }); })();
+  `, host: { class: 'kpt-chip-host' }, styles: ["@layer kpt.components{.kpt-chip-host{display:inline-flex;vertical-align:middle}.kpt-chip{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);display:inline-flex;align-items:center;gap:.35rem;height:1.6rem;padding-inline:.6rem;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:var(--kpt-font-size-xs, .75rem);font-weight:var(--kpt-font-weight-medium, 500);white-space:nowrap}.kpt-chip[data-variant=primary]{--_bg: color-mix(in oklch, var(--kpt-color-primary) 14%, var(--kpt-color-surface));--_fg: var(--kpt-color-primary)}.kpt-chip[data-variant=success]{--_bg: color-mix(in oklch, var(--kpt-color-success) 18%, transparent);--_fg: var(--kpt-color-success)}.kpt-chip[data-variant=danger]{--_bg: color-mix(in oklch, var(--kpt-color-danger) 16%, transparent);--_fg: var(--kpt-color-danger)}.kpt-chip[data-variant=warning]{--_bg: color-mix(in oklch, var(--kpt-color-warning) 20%, transparent);--_fg: var(--kpt-color-warning)}.kpt-chip[data-variant=info]{--_bg: color-mix(in oklch, var(--kpt-color-info) 16%, transparent);--_fg: var(--kpt-color-info)}.kpt-chip[data-text-transform=capitalize]{text-transform:capitalize;font-size:var(--kpt-font-size-sm, .85rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=uppercase]{text-transform:uppercase;font-size:var(--kpt-font-size-sm, .85rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip[data-text-transform=lowercase]{text-transform:lowercase;font-size:var(--kpt-font-size-sm, .75rem);font-weight:var(--kpt-font-weight-light, 100)}.kpt-chip--disabled{opacity:.55}.kpt-chip__remove{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;color:inherit;opacity:.7;padding:0;margin-inline-end:-.2rem}.kpt-chip__remove:hover:not(:disabled){opacity:1}.kpt-chip__remove:disabled{cursor:not-allowed}}\n"] }]
+    }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], textTransform: [{ type: i0.Input, args: [{ isSignal: true, alias: "textTransform", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptChip, { className: "KptChip", filePath: "lib/chip/chip.component.ts", lineNumber: 45 }); })();
 
 /**
  * Wskaźnik ładowania (spinner). Kolor z `currentColor`.
@@ -1191,7 +1216,7 @@ class KptSkeleton {
 /** Token DI, przez który kontrolka zgłasza `kpt-form-field` swój stan wypełnienia. */
 const KPT_FORM_FIELD_CONTROL = new InjectionToken('KPT_FORM_FIELD_CONTROL');
 
-const _c0$z = ["*"];
+const _c0$D = ["*"];
 function KptFormField_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 6);
     i0.ɵɵtext(1, "*");
@@ -1300,7 +1325,7 @@ class KptFormField {
             i0.ɵɵqueryAdvance();
         } }, hostAttrs: [1, "kpt-form-field-host"], hostBindings: function KptFormField_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("input", function KptFormField_input_HostBindingHandler() { return ctx.updateFilled(); })("change", function KptFormField_change_HostBindingHandler() { return ctx.updateFilled(); });
-        } }, inputs: { label: [1, "label"], hint: [1, "hint"], error: [1, "error"], required: [1, "required"], controlId: [1, "controlId"], labelType: [1, "labelType"] }, ngContentSelectors: _c0$z, decls: 7, vars: 10, consts: [[1, "kpt-form-field"], [1, "kpt-form-field__box"], [1, "kpt-form-field__label"], [1, "kpt-form-field__control"], ["role", "alert", 1, "kpt-form-field__message", "kpt-form-field__message--error"], [1, "kpt-form-field__message", "kpt-form-field__message--hint"], ["aria-hidden", "true", 1, "kpt-form-field__required"]], template: function KptFormField_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { label: [1, "label"], hint: [1, "hint"], error: [1, "error"], required: [1, "required"], controlId: [1, "controlId"], labelType: [1, "labelType"] }, ngContentSelectors: _c0$D, decls: 7, vars: 10, consts: [[1, "kpt-form-field"], [1, "kpt-form-field__box"], [1, "kpt-form-field__label"], [1, "kpt-form-field__control"], ["role", "alert", 1, "kpt-form-field__message", "kpt-form-field__message--error"], [1, "kpt-form-field__message", "kpt-form-field__message--hint"], ["aria-hidden", "true", 1, "kpt-form-field__required"]], template: function KptFormField_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵconditionalCreate(2, KptFormField_Conditional_2_Template, 3, 3, "label", 2);
@@ -1401,7 +1426,7 @@ class KptInput {
     }], null, { 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInput, { className: "KptInput", filePath: "lib/input/input.component.ts", lineNumber: 49 }); })();
 
-const _c0$y = ["*"];
+const _c0$C = ["*"];
 function KptCheckbox_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -1432,7 +1457,7 @@ class KptCheckbox {
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptCheckbox_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptCheckbox)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptCheckbox, selectors: [["kpt-checkbox"]], hostAttrs: [1, "kpt-checkbox-host"], inputs: { checked: [1, "checked"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], label: [1, "label"] }, outputs: { checked: "checkedChange", touch: "touch" }, ngContentSelectors: _c0$y, decls: 7, vars: 6, consts: [[1, "kpt-checkbox"], ["type", "checkbox", 1, "kpt-checkbox__input", 3, "change", "blur", "checked", "disabled"], ["aria-hidden", "true", 1, "kpt-checkbox__box"], ["viewBox", "0 0 16 16", 1, "kpt-checkbox__check"], ["d", "M13 4.5 6.5 11 3 7.5"], [1, "kpt-checkbox__label"]], template: function KptCheckbox_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptCheckbox, selectors: [["kpt-checkbox"]], hostAttrs: [1, "kpt-checkbox-host"], inputs: { checked: [1, "checked"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], label: [1, "label"] }, outputs: { checked: "checkedChange", touch: "touch" }, ngContentSelectors: _c0$C, decls: 7, vars: 6, consts: [[1, "kpt-checkbox"], ["type", "checkbox", 1, "kpt-checkbox__input", 3, "change", "blur", "checked", "disabled"], ["aria-hidden", "true", 1, "kpt-checkbox__box"], ["viewBox", "0 0 16 16", 1, "kpt-checkbox__check"], ["d", "M13 4.5 6.5 11 3 7.5"], [1, "kpt-checkbox__label"]], template: function KptCheckbox_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "label", 0)(1, "input", 1);
             i0.ɵɵdomListener("change", function KptCheckbox_Template_input_change_1_listener($event) { return ctx.checked.set($event.target.checked); })("blur", function KptCheckbox_Template_input_blur_1_listener() { return ctx.touch.emit(); });
@@ -1479,7 +1504,7 @@ class KptCheckbox {
     }], null, { 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptCheckbox, { className: "KptCheckbox", filePath: "lib/checkbox/checkbox.component.ts", lineNumber: 44 }); })();
 
-const _c0$x = ["*"];
+const _c0$B = ["*"];
 function KptSwitch_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 1);
     i0.ɵɵtext(1);
@@ -1545,7 +1570,7 @@ class KptSwitch {
         ...(ngDevMode ? [{ debugName: "stateLabel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptSwitch_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSwitch)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSwitch, selectors: [["kpt-switch"]], hostAttrs: [1, "kpt-switch-host"], inputs: { checked: [1, "checked"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], label: [1, "label"], labelPosition: [1, "labelPosition"], onLabel: [1, "onLabel"], offLabel: [1, "offLabel"] }, outputs: { checked: "checkedChange", touch: "touch" }, ngContentSelectors: _c0$x, decls: 8, vars: 8, consts: [[1, "kpt-switch"], [1, "kpt-switch__label", "kpt-switch__label--start"], ["type", "checkbox", "role", "switch", 1, "kpt-switch__input", 3, "change", "blur", "checked", "disabled"], ["aria-hidden", "true", 1, "kpt-switch__track"], [1, "kpt-switch__thumb"], [1, "kpt-switch__label"], [1, "kpt-switch__state", 3, "kpt-switch__state--on"], [1, "kpt-switch__state"]], template: function KptSwitch_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSwitch, selectors: [["kpt-switch"]], hostAttrs: [1, "kpt-switch-host"], inputs: { checked: [1, "checked"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], label: [1, "label"], labelPosition: [1, "labelPosition"], onLabel: [1, "onLabel"], offLabel: [1, "offLabel"] }, outputs: { checked: "checkedChange", touch: "touch" }, ngContentSelectors: _c0$B, decls: 8, vars: 8, consts: [[1, "kpt-switch"], [1, "kpt-switch__label", "kpt-switch__label--start"], ["type", "checkbox", "role", "switch", 1, "kpt-switch__input", 3, "change", "blur", "checked", "disabled"], ["aria-hidden", "true", 1, "kpt-switch__track"], [1, "kpt-switch__thumb"], [1, "kpt-switch__label"], [1, "kpt-switch__state", 3, "kpt-switch__state--on"], [1, "kpt-switch__state"]], template: function KptSwitch_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomElementStart(0, "label", 0);
             i0.ɵɵconditionalCreate(1, KptSwitch_Conditional_1_Template, 2, 1, "span", 1);
@@ -2338,7 +2363,7 @@ class KptClock {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptClock, { className: "KptClock", filePath: "lib/datepicker/clock.component.ts", lineNumber: 93 }); })();
 
 const _forTrack0$9 = ($index, $item) => $item.iso;
-const _forTrack1$2 = ($index, $item) => $item.label;
+const _forTrack1$3 = ($index, $item) => $item.label;
 function KptDatepicker_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 2);
     i0.ɵɵtext(1);
@@ -2545,7 +2570,7 @@ function KptDatepicker_ng_template_7_Conditional_2_Case_9_For_2_Template(rf, ctx
 } }
 function KptDatepicker_ng_template_7_Conditional_2_Case_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 30);
-    i0.ɵɵrepeaterCreate(1, KptDatepicker_ng_template_7_Conditional_2_Case_9_For_2_Template, 2, 7, "button", 31, _forTrack1$2);
+    i0.ɵɵrepeaterCreate(1, KptDatepicker_ng_template_7_Conditional_2_Case_9_For_2_Template, 2, 7, "button", 31, _forTrack1$3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -3007,7 +3032,7 @@ class KptDatepicker {
     }], () => [], { 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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", 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 }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 83 }); })();
 
-const _c0$w = ["ta"];
+const _c0$A = ["ta"];
 /**
  * Pole wieloliniowe (textarea) na Signal Forms, z opcjonalnym auto-resize.
  *
@@ -3052,7 +3077,7 @@ class KptTextarea {
     }
     static { this.ɵfac = function KptTextarea_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptTextarea)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptTextarea, selectors: [["kpt-textarea"]], viewQuery: function KptTextarea_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.ta, _c0$w, 5);
+            i0.ɵɵviewQuerySignal(ctx.ta, _c0$A, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, hostAttrs: [1, "kpt-textarea-host"], inputs: { value: [1, "value"], placeholder: [1, "placeholder"], rows: [1, "rows"], autoResize: [1, "autoResize"], disabled: [1, "disabled"], readonly: [1, "readonly"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 2, vars: 6, consts: [["ta", ""], [1, "kpt-textarea__field", 3, "input", "blur", "value", "placeholder", "disabled", "readOnly", "rows"]], template: function KptTextarea_Template(rf, ctx) { if (rf & 1) {
@@ -3204,14 +3229,15 @@ class KptTooltip {
             }]
     }], null, { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltip", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltipPosition", required: false }] }], onlyWhenTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptTooltipOnlyWhenTruncated", required: false }] }] }); })();
 
-const _c0$v = ["editor"];
+const _c0$z = ["editor"];
 const _forTrack0$8 = ($index, $item) => $item.tag;
+const _forTrack1$2 = ($index, $item) => $item.id;
 function KptRichText_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 11);
+    i0.ɵɵelement(0, "span", 12);
 } }
 function KptRichText_For_3_For_2_Case_0_ng_template_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 18);
+    i0.ɵɵelementStart(0, "li", 19);
     i0.ɵɵlistener("click", function KptRichText_For_3_For_2_Case_0_ng_template_5_For_2_Template_li_click_0_listener() { const o_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.pickStyle(o_r4.tag)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -3225,8 +3251,8 @@ function KptRichText_For_3_For_2_Case_0_ng_template_5_For_2_Template(rf, ctx) {
     i0.ɵɵtextInterpolate(o_r4.label);
 } }
 function KptRichText_For_3_For_2_Case_0_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 16);
-    i0.ɵɵrepeaterCreate(1, KptRichText_For_3_For_2_Case_0_ng_template_5_For_2_Template, 2, 6, "li", 17, _forTrack0$8);
+    i0.ɵɵelementStart(0, "ul", 17);
+    i0.ɵɵrepeaterCreate(1, KptRichText_For_3_For_2_Case_0_ng_template_5_For_2_Template, 2, 6, "li", 18, _forTrack0$8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -3235,14 +3261,14 @@ function KptRichText_For_3_For_2_Case_0_ng_template_5_Template(rf, ctx) { if (rf
 } }
 function KptRichText_For_3_For_2_Case_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 13, 1);
+    i0.ɵɵelementStart(0, "button", 14, 1);
     i0.ɵɵlistener("mousedown", function KptRichText_For_3_For_2_Case_0_Template_button_mousedown_0_listener($event) { return $event.preventDefault(); })("click", function KptRichText_For_3_For_2_Case_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openStyle()); });
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "kpt-icon", 14);
+    i0.ɵɵelement(4, "kpt-icon", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, KptRichText_For_3_For_2_Case_0_ng_template_5_Template, 3, 0, "ng-template", 15);
+    i0.ɵɵtemplate(5, KptRichText_For_3_For_2_Case_0_ng_template_5_Template, 3, 0, "ng-template", 16);
     i0.ɵɵlistener("backdropClick", function KptRichText_For_3_For_2_Case_0_Template_ng_template_backdropClick_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeStyle()); })("detach", function KptRichText_For_3_For_2_Case_0_Template_ng_template_detach_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeStyle()); });
 } if (rf & 2) {
     const styleOrigin_r5 = i0.ɵɵreference(1);
@@ -3257,19 +3283,19 @@ function KptRichText_For_3_For_2_Case_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", styleOrigin_r5)("cdkConnectedOverlayOpen", ctx_r1.styleOpen())("cdkConnectedOverlayPositions", ctx_r1.positions)("cdkConnectedOverlayHasBackdrop", true);
 } }
 function KptRichText_For_3_For_2_Case_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 21);
+    i0.ɵɵelementContainer(0, 22);
 } if (rf & 2) {
     i0.ɵɵnextContext(4);
-    const paletteTpl_r8 = i0.ɵɵreference(10);
+    const paletteTpl_r8 = i0.ɵɵreference(11);
     i0.ɵɵproperty("ngTemplateOutlet", paletteTpl_r8);
 } }
 function KptRichText_For_3_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19, 2);
+    i0.ɵɵelementStart(0, "button", 20, 2);
     i0.ɵɵlistener("mousedown", function KptRichText_For_3_For_2_Case_1_Template_button_mousedown_0_listener($event) { return $event.preventDefault(); })("click", function KptRichText_For_3_For_2_Case_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openColor("foreColor")); });
-    i0.ɵɵelement(2, "kpt-icon", 20);
+    i0.ɵɵelement(2, "kpt-icon", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, KptRichText_For_3_For_2_Case_1_ng_template_3_Template, 1, 1, "ng-template", 15);
+    i0.ɵɵtemplate(3, KptRichText_For_3_For_2_Case_1_ng_template_3_Template, 1, 1, "ng-template", 16);
     i0.ɵɵlistener("backdropClick", function KptRichText_For_3_For_2_Case_1_Template_ng_template_backdropClick_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeColor()); })("detach", function KptRichText_For_3_For_2_Case_1_Template_ng_template_detach_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeColor()); });
 } if (rf & 2) {
     const foreOrigin_r9 = i0.ɵɵreference(1);
@@ -3283,19 +3309,19 @@ function KptRichText_For_3_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("cdkConnectedOverlayOrigin", foreOrigin_r9)("cdkConnectedOverlayOpen", ctx_r1.colorOpen() && ctx_r1.colorKind() === "foreColor")("cdkConnectedOverlayPositions", ctx_r1.positions)("cdkConnectedOverlayHasBackdrop", true);
 } }
 function KptRichText_For_3_For_2_Case_2_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 21);
+    i0.ɵɵelementContainer(0, 22);
 } if (rf & 2) {
     i0.ɵɵnextContext(4);
-    const paletteTpl_r8 = i0.ɵɵreference(10);
+    const paletteTpl_r8 = i0.ɵɵreference(11);
     i0.ɵɵproperty("ngTemplateOutlet", paletteTpl_r8);
 } }
 function KptRichText_For_3_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19, 3);
+    i0.ɵɵelementStart(0, "button", 20, 3);
     i0.ɵɵlistener("mousedown", function KptRichText_For_3_For_2_Case_2_Template_button_mousedown_0_listener($event) { return $event.preventDefault(); })("click", function KptRichText_For_3_For_2_Case_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openColor("backColor")); });
-    i0.ɵɵelement(2, "kpt-icon", 20);
+    i0.ɵɵelement(2, "kpt-icon", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, KptRichText_For_3_For_2_Case_2_ng_template_3_Template, 1, 1, "ng-template", 15);
+    i0.ɵɵtemplate(3, KptRichText_For_3_For_2_Case_2_ng_template_3_Template, 1, 1, "ng-template", 16);
     i0.ɵɵlistener("backdropClick", function KptRichText_For_3_For_2_Case_2_Template_ng_template_backdropClick_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeColor()); })("detach", function KptRichText_For_3_For_2_Case_2_Template_ng_template_detach_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeColor()); });
 } if (rf & 2) {
     const backOrigin_r11 = i0.ɵɵreference(1);
@@ -3310,7 +3336,7 @@ function KptRichText_For_3_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 28);
+    i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵlistener("mouseenter", function KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_For_2_Template_span_mouseenter_0_listener() { const c_r15 = i0.ɵɵrestoreView(_r14).$implicit; const r_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.gridHover(r_r16, c_r15)); })("click", function KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_For_2_Template_span_click_0_listener() { const c_r15 = i0.ɵɵrestoreView(_r14).$implicit; const r_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.insertTable(r_r16, c_r15)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -3320,8 +3346,8 @@ function KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_For_2_Template(rf, c
     i0.ɵɵclassProp("is-on", r_r16 <= ctx_r1.gridR() && c_r15 <= ctx_r1.gridC());
 } }
 function KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵrepeaterCreate(1, KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_For_2_Template, 1, 2, "span", 27, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵrepeaterCreate(1, KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_For_2_Template, 1, 2, "span", 28, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -3330,13 +3356,13 @@ function KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_Template(rf, ctx) {
 } }
 function KptRichText_For_3_For_2_Case_3_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelementStart(0, "div", 24);
     i0.ɵɵlistener("mousedown", function KptRichText_For_3_For_2_Case_3_ng_template_3_Template_div_mousedown_0_listener($event) { return $event.preventDefault(); });
-    i0.ɵɵelementStart(1, "div", 24);
+    i0.ɵɵelementStart(1, "div", 25);
     i0.ɵɵlistener("mouseleave", function KptRichText_For_3_For_2_Case_3_ng_template_3_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.gridHover(0, 0)); });
-    i0.ɵɵrepeaterCreate(2, KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_Template, 3, 0, "div", 25, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(2, KptRichText_For_3_For_2_Case_3_ng_template_3_For_3_Template, 3, 0, "div", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 26);
+    i0.ɵɵelementStart(4, "div", 27);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -3348,11 +3374,11 @@ function KptRichText_For_3_For_2_Case_3_ng_template_3_Template(rf, ctx) { if (rf
 } }
 function KptRichText_For_3_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22, 4);
+    i0.ɵɵelementStart(0, "button", 23, 4);
     i0.ɵɵlistener("mousedown", function KptRichText_For_3_For_2_Case_3_Template_button_mousedown_0_listener($event) { return $event.preventDefault(); })("click", function KptRichText_For_3_For_2_Case_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const item_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.exec(item_r6)); });
-    i0.ɵɵelement(2, "kpt-icon", 20);
+    i0.ɵɵelement(2, "kpt-icon", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, KptRichText_For_3_For_2_Case_3_ng_template_3_Template, 6, 2, "ng-template", 15);
+    i0.ɵɵtemplate(3, KptRichText_For_3_For_2_Case_3_ng_template_3_Template, 6, 2, "ng-template", 16);
     i0.ɵɵlistener("backdropClick", function KptRichText_For_3_For_2_Case_3_Template_ng_template_backdropClick_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeTable()); })("detach", function KptRichText_For_3_For_2_Case_3_Template_ng_template_detach_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeTable()); });
 } if (rf & 2) {
     const tableOrigin_r17 = i0.ɵɵreference(1);
@@ -3368,9 +3394,9 @@ function KptRichText_For_3_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
 } }
 function KptRichText_For_3_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵelementStart(0, "button", 30);
     i0.ɵɵlistener("mousedown", function KptRichText_For_3_For_2_Case_4_Template_button_mousedown_0_listener($event) { return $event.preventDefault(); })("click", function KptRichText_For_3_For_2_Case_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const item_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.exec(item_r6)); });
-    i0.ɵɵelement(1, "kpt-icon", 20);
+    i0.ɵɵelement(1, "kpt-icon", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r6 = i0.ɵɵnextContext().$implicit;
@@ -3382,14 +3408,14 @@ function KptRichText_For_3_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("name", ctx_r1.icon(item_r6));
 } }
 function KptRichText_For_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptRichText_For_3_For_2_Case_0_Template, 6, 11)(1, KptRichText_For_3_For_2_Case_1_Template, 4, 8)(2, KptRichText_For_3_For_2_Case_2_Template, 4, 8)(3, KptRichText_For_3_For_2_Case_3_Template, 4, 10)(4, KptRichText_For_3_For_2_Case_4_Template, 2, 7, "button", 12);
+    i0.ɵɵconditionalCreate(0, KptRichText_For_3_For_2_Case_0_Template, 6, 11)(1, KptRichText_For_3_For_2_Case_1_Template, 4, 8)(2, KptRichText_For_3_For_2_Case_2_Template, 4, 8)(3, KptRichText_For_3_For_2_Case_3_Template, 4, 10)(4, KptRichText_For_3_For_2_Case_4_Template, 2, 7, "button", 13);
 } if (rf & 2) {
     let tmp_22_0;
     const item_r6 = ctx.$implicit;
     i0.ɵɵconditional((tmp_22_0 = item_r6) === "heading" ? 0 : tmp_22_0 === "foreColor" ? 1 : tmp_22_0 === "backColor" ? 2 : tmp_22_0 === "table" ? 3 : 4);
 } }
 function KptRichText_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptRichText_For_3_Conditional_0_Template, 1, 0, "span", 11);
+    i0.ɵɵconditionalCreate(0, KptRichText_For_3_Conditional_0_Template, 1, 0, "span", 12);
     i0.ɵɵrepeaterCreate(1, KptRichText_For_3_For_2_Template, 5, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const section_r19 = ctx.$implicit;
@@ -3400,7 +3426,7 @@ function KptRichText_For_3_Template(rf, ctx) { if (rf & 1) {
 } }
 function KptRichText_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 30);
+    i0.ɵɵelementStart(0, "textarea", 31);
     i0.ɵɵlistener("input", function KptRichText_Conditional_4_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSource($event)); })("blur", function KptRichText_Conditional_4_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.touch.emit()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -3410,109 +3436,147 @@ function KptRichText_Conditional_4_Template(rf, ctx) { if (rf & 1) {
 } }
 function KptRichText_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31, 5);
+    i0.ɵɵelementStart(0, "div", 32, 5);
     i0.ɵɵlistener("input", function KptRichText_Conditional_5_Template_div_input_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onInput()); })("keydown", function KptRichText_Conditional_5_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeydown($event)); })("paste", function KptRichText_Conditional_5_Template_div_paste_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPaste($event)); })("contextmenu", function KptRichText_Conditional_5_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextMenu($event)); })("mousedown", function KptRichText_Conditional_5_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEditorMouseDown($event)); })("mousemove", function KptRichText_Conditional_5_Template_div_mousemove_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEditorMouseMove($event)); })("blur", function KptRichText_Conditional_5_Template_div_blur_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.touch.emit()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵattribute("contenteditable", ctx_r1.disabled() ? "false" : "true")("data-placeholder", ctx_r1.placeholder())("aria-invalid", ctx_r1.showInvalid() ? "true" : null);
 } }
-function KptRichText_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+function KptRichText_ng_template_6_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r24 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r24.kind);
+} }
+function KptRichText_ng_template_6_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵlistener("contextmenu", function KptRichText_ng_template_6_Template_div_contextmenu_0_listener($event) { return $event.preventDefault(); });
-    i0.ɵɵelementStart(1, "div", 33);
+    i0.ɵɵelementStart(0, "li", 35);
+    i0.ɵɵlistener("mousedown", function KptRichText_ng_template_6_For_2_Template_li_mousedown_0_listener($event) { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.insertMention(item_r24)); })("mouseenter", function KptRichText_ng_template_6_For_2_Template_li_mouseenter_0_listener() { const ɵ$index_79_r25 = i0.ɵɵrestoreView(_r23).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.mentionActive.set(ɵ$index_79_r25)); });
+    i0.ɵɵelementStart(1, "span", 36);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, KptRichText_ng_template_6_For_2_Conditional_3_Template, 2, 1, "span", 37);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r24 = ctx.$implicit;
+    const ɵ$index_79_r25 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("aria-selected", ɵ$index_79_r25 === ctx_r1.mentionActive())("data-active", ɵ$index_79_r25 === ctx_r1.mentionActive() ? "" : null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r24.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r24.kind ? 3 : -1);
+} }
+function KptRichText_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 33);
+    i0.ɵɵrepeaterCreate(1, KptRichText_ng_template_6_For_2_Template, 4, 4, "li", 34, _forTrack1$2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r1.i18n.t("richText.mentions"));
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.mentionMatches());
+} }
+function KptRichText_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵlistener("contextmenu", function KptRichText_ng_template_7_Template_div_contextmenu_0_listener($event) { return $event.preventDefault(); });
+    i0.ɵɵelementStart(1, "div", 39);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertColumn("left")); });
-    i0.ɵɵelement(4, "kpt-icon", 35);
+    i0.ɵɵelementStart(3, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertColumn("left")); });
+    i0.ɵɵelement(4, "kpt-icon", 41);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertColumn("right")); });
-    i0.ɵɵelement(7, "kpt-icon", 35);
+    i0.ɵɵelementStart(6, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertColumn("right")); });
+    i0.ɵɵelement(7, "kpt-icon", 41);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderColumn()); });
-    i0.ɵɵelement(10, "kpt-icon", 36);
+    i0.ɵɵelementStart(9, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderColumn()); });
+    i0.ɵɵelement(10, "kpt-icon", 42);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteColumn()); });
-    i0.ɵɵelement(13, "kpt-icon", 37);
+    i0.ɵɵelementStart(12, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteColumn()); });
+    i0.ɵɵelement(13, "kpt-icon", 43);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(15, "div", 38);
-    i0.ɵɵelementStart(16, "div", 33);
+    i0.ɵɵelement(15, "div", 44);
+    i0.ɵɵelementStart(16, "div", 39);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertRow("above")); });
-    i0.ɵɵelement(19, "kpt-icon", 35);
+    i0.ɵɵelementStart(18, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertRow("above")); });
+    i0.ɵɵelement(19, "kpt-icon", 41);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertRow("below")); });
-    i0.ɵɵelement(22, "kpt-icon", 35);
+    i0.ɵɵelementStart(21, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.insertRow("below")); });
+    i0.ɵɵelement(22, "kpt-icon", 41);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderRow()); });
-    i0.ɵɵelement(25, "kpt-icon", 36);
+    i0.ɵɵelementStart(24, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderRow()); });
+    i0.ɵɵelement(25, "kpt-icon", 42);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteRow()); });
-    i0.ɵɵelement(28, "kpt-icon", 37);
+    i0.ɵɵelementStart(27, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteRow()); });
+    i0.ɵɵelement(28, "kpt-icon", 43);
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(30, "div", 38);
-    i0.ɵɵelementStart(31, "div", 33);
+    i0.ɵɵelement(30, "div", 44);
+    i0.ɵɵelementStart(31, "div", 39);
     i0.ɵɵtext(32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCellBg()); });
-    i0.ɵɵelement(34, "kpt-icon", 39);
+    i0.ɵɵelementStart(33, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCellBg()); });
+    i0.ɵɵelement(34, "kpt-icon", 45);
     i0.ɵɵtext(35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.alignCell("left")); });
-    i0.ɵɵelement(37, "kpt-icon", 40);
+    i0.ɵɵelementStart(36, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.alignCell("left")); });
+    i0.ɵɵelement(37, "kpt-icon", 46);
     i0.ɵɵtext(38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.alignCell("center")); });
-    i0.ɵɵelement(40, "kpt-icon", 41);
+    i0.ɵɵelementStart(39, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.alignCell("center")); });
+    i0.ɵɵelement(40, "kpt-icon", 47);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.alignCell("right")); });
-    i0.ɵɵelement(43, "kpt-icon", 42);
+    i0.ɵɵelementStart(42, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.alignCell("right")); });
+    i0.ɵɵelement(43, "kpt-icon", 48);
     i0.ɵɵtext(44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(45, "div", 38);
-    i0.ɵɵelementStart(46, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_46_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.mergeCells()); });
-    i0.ɵɵelement(47, "kpt-icon", 36);
+    i0.ɵɵelement(45, "div", 44);
+    i0.ɵɵelementStart(46, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_46_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.mergeCells()); });
+    i0.ɵɵelement(47, "kpt-icon", 42);
     i0.ɵɵtext(48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.splitCell()); });
-    i0.ɵɵelement(50, "kpt-icon", 43);
+    i0.ɵɵelementStart(49, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.splitCell()); });
+    i0.ɵɵelement(50, "kpt-icon", 49);
     i0.ɵɵtext(51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(52, "div", 38);
-    i0.ɵɵelementStart(53, "button", 34);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_53_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openBorder()); });
-    i0.ɵɵelement(54, "kpt-icon", 36);
+    i0.ɵɵelement(52, "div", 44);
+    i0.ɵɵelementStart(53, "button", 40);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_53_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openBorder()); });
+    i0.ɵɵelement(54, "kpt-icon", 42);
     i0.ɵɵtext(55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(56, "div", 38);
-    i0.ɵɵelementStart(57, "button", 44);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_6_Template_button_click_57_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteTable()); });
-    i0.ɵɵelement(58, "kpt-icon", 37);
+    i0.ɵɵelement(56, "div", 44);
+    i0.ɵɵelementStart(57, "button", 50);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_57_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteTable()); });
+    i0.ɵɵelement(58, "kpt-icon", 43);
     i0.ɵɵtext(59);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -3560,52 +3624,52 @@ function KptRichText_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.i18n.t("richText.menu.deleteTable"));
 } }
-function KptRichText_ng_template_7_For_17_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_For_17_Template_button_click_0_listener() { const c_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setBorderColor(c_r26)); });
+function KptRichText_ng_template_8_For_17_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_For_17_Template_button_click_0_listener() { const c_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setBorderColor(c_r29)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const c_r26 = ctx.$implicit;
-    i0.ɵɵstyleProp("background", c_r26);
-    i0.ɵɵattribute("aria-label", c_r26);
+    const c_r29 = ctx.$implicit;
+    i0.ɵɵstyleProp("background", c_r29);
+    i0.ɵɵattribute("aria-label", c_r29);
 } }
-function KptRichText_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵlistener("mousedown", function KptRichText_ng_template_7_Template_div_mousedown_0_listener($event) { return $event.preventDefault(); });
-    i0.ɵɵelementStart(1, "div", 46)(2, "button", 47);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.borderTarget.set("table")); });
+function KptRichText_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵlistener("mousedown", function KptRichText_ng_template_8_Template_div_mousedown_0_listener($event) { return $event.preventDefault(); });
+    i0.ɵɵelementStart(1, "div", 52)(2, "button", 53);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.borderTarget.set("table")); });
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 47);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.borderTarget.set("cell")); });
+    i0.ɵɵelementStart(4, "button", 53);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.borderTarget.set("cell")); });
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 48)(7, "button", 47);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("none")); });
+    i0.ɵɵelementStart(6, "div", 54)(7, "button", 53);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("none")); });
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 47);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("thin")); });
+    i0.ɵɵelementStart(9, "button", 53);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("thin")); });
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 47);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("medium")); });
+    i0.ɵɵelementStart(11, "button", 53);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("medium")); });
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 47);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_7_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("thick")); });
+    i0.ɵɵelementStart(13, "button", 53);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_8_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setBorderWidth("thick")); });
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 49);
-    i0.ɵɵrepeaterCreate(16, KptRichText_ng_template_7_For_17_Template, 1, 3, "button", 50, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(15, "div", 55);
+    i0.ɵɵrepeaterCreate(16, KptRichText_ng_template_8_For_17_Template, 1, 3, "button", 56, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "label", 51)(19, "span");
+    i0.ɵɵelementStart(18, "label", 57)(19, "span");
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "input", 52);
-    i0.ɵɵlistener("input", function KptRichText_ng_template_7_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBorderColorInput($event)); });
+    i0.ɵɵelementStart(21, "input", 58);
+    i0.ɵɵlistener("input", function KptRichText_ng_template_8_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBorderColorInput($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -3630,35 +3694,35 @@ function KptRichText_ng_template_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.i18n.t("richText.border.customColor"));
 } }
-function KptRichText_ng_template_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 21);
+function KptRichText_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 22);
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const paletteTpl_r8 = i0.ɵɵreference(10);
+    const paletteTpl_r8 = i0.ɵɵreference(11);
     i0.ɵɵproperty("ngTemplateOutlet", paletteTpl_r8);
 } }
-function KptRichText_ng_template_9_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function KptRichText_ng_template_9_For_3_Template_button_click_0_listener() { const c_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applyColor(c_r29)); });
+function KptRichText_ng_template_10_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function KptRichText_ng_template_10_For_3_Template_button_click_0_listener() { const c_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applyColor(c_r32)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const c_r29 = ctx.$implicit;
-    i0.ɵɵstyleProp("background", c_r29);
-    i0.ɵɵattribute("aria-label", c_r29);
+    const c_r32 = ctx.$implicit;
+    i0.ɵɵstyleProp("background", c_r32);
+    i0.ɵɵattribute("aria-label", c_r32);
 } }
-function KptRichText_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵlistener("mousedown", function KptRichText_ng_template_9_Template_div_mousedown_0_listener($event) { return $event.preventDefault(); });
-    i0.ɵɵelementStart(1, "div", 49);
-    i0.ɵɵrepeaterCreate(2, KptRichText_ng_template_9_For_3_Template, 1, 3, "button", 50, i0.ɵɵrepeaterTrackByIdentity);
+function KptRichText_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("mousedown", function KptRichText_ng_template_10_Template_div_mousedown_0_listener($event) { return $event.preventDefault(); });
+    i0.ɵɵelementStart(1, "div", 55);
+    i0.ɵɵrepeaterCreate(2, KptRichText_ng_template_10_For_3_Template, 1, 3, "button", 56, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "label", 51)(5, "span");
+    i0.ɵɵelementStart(4, "label", 57)(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "input", 52);
-    i0.ɵɵlistener("input", function KptRichText_ng_template_9_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColorInput($event)); });
+    i0.ɵɵelementStart(7, "input", 58);
+    i0.ɵɵlistener("input", function KptRichText_ng_template_10_Template_input_input_7_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColorInput($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -3726,7 +3790,16 @@ 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', 'target', 'rel', 'title']);
+/*
+ * `data-mention` i `contenteditable` są tu dla wzmianek: identyfikator musi przeżyć zapis treści,
+ * a `contenteditable="false"` trzyma wzmiankę jako jeden kawałek, w którego środku nie da się
+ * pisać. Oba atrybuty są bierne — nie wykonują niczego i nie wskazują zasobów, więc wpuszczenie
+ * ich nie otwiera nowej furtki.
+ */
+const ALLOWED_ATTRS = new Set([
+    'colspan', 'rowspan', 'span', 'width', 'class', 'target', 'rel', 'title',
+    'data-mention', 'contenteditable',
+]);
 // Schematy URL dopuszczone w `href` wstawianym narzędziem „link" (blocklista jest obchodzalna).
 const SAFE_URL_SCHEME = /^(https?:|mailto:|tel:)/i;
 const HAS_URL_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
@@ -3757,12 +3830,34 @@ class KptRichText {
         /** Stan nieprawidłowy pokazujemy dopiero po dotknięciu pola — jak natywne `:user-invalid`. */
         this.showInvalid = computed(() => this.invalid() && this.touched(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []));
+        /**
+         * Pozycje do podpowiedzi wzmianek. Pusta lista wyłącza mechanizm: `@` zostaje wtedy zwykłym
+         * znakiem, bo nie ma czego podpowiadać.
+         */
+        this.mentions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentions" }] : /* istanbul ignore next */ []));
+        /** Ile podpowiedzi naraz. */
+        this.mentionLimit = input(KPT_MENTION_LIMIT, { ...(ngDevMode ? { debugName: "mentionLimit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         this.touch = output();
+        /** Wstawiona wzmianka — moment na powiadomienie osoby albo dopięcie powiązania. */
+        this.mentioned = output();
         this.i18n = inject(KptI18n);
         this.swatches = SWATCHES;
         this.editor = viewChild('editor', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
         this.savedRange = null;
+        // ── Wzmianki (`@`) ──
+        this.mentionOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentionOpen" }] : /* istanbul ignore next */ []));
+        this.mentionMatches = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentionMatches" }] : /* istanbul ignore next */ []));
+        this.mentionActive = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentionActive" }] : /* istanbul ignore next */ []));
+        /** Zaczepienie listy w miejscu kursora — punkt, nie element, bo `@` nie ma własnego elementu. */
+        this.mentionPoint = signal({ x: 0, y: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentionPoint" }] : /* istanbul ignore next */ []));
+        /** Węzeł tekstowy i zakres zapytania `@…`, który podmieni wybrana pozycja. */
+        this.mentionRange = null;
         this.colorOpen = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "colorOpen" }] : /* istanbul ignore next */ []));
         this.colorKind = signal('foreColor', /* @ts-ignore */
@@ -3840,7 +3935,12 @@ class KptRichText {
                 el.innerHTML = this.sanitizeHtml(v);
         });
         // Odzwierciedlenie stanu aktywnego narzędzi na podstawie zaznaczenia.
-        const onSel = () => this.refreshState();
+        const onSel = () => {
+            this.refreshState();
+            // Kursor może odjechać od `@` także bez pisania (klik, strzałki) — wtedy podpowiedzi
+            // muszą zniknąć, inaczej Enter wstawiłby wzmiankę w zupełnie innym miejscu.
+            this.syncMention();
+        };
         const onMove = (e) => this.onResizeMove(e);
         const onUp = () => this.onResizeEnd();
         document.addEventListener('selectionchange', onSel);
@@ -3932,6 +4032,7 @@ class KptRichText {
         const el = this.editor()?.nativeElement;
         if (el)
             this.value.set(el.innerHTML);
+        this.syncMention();
     }
     onSource(event) {
         this.value.set(event.target.value);
@@ -4144,7 +4245,13 @@ class KptRichText {
      * natywny — inaczej edytor byłby pułapką klawiaturową (WCAG 2.1.2).
      */
     onKeydown(event) {
-        if (this.disabled() || event.key !== 'Tab' || event.ctrlKey || event.altKey || event.metaKey)
+        if (this.disabled())
+            return;
+        // Podpowiedzi wzmianek przechwytują klawiaturę jako pierwsze: Tab i Enter znaczą w nich
+        // co innego niż w samym edytorze.
+        if (this.mentionOpen() && this.onMentionKeydown(event))
+            return;
+        if (event.key !== 'Tab' || event.ctrlKey || event.altKey || event.metaKey)
             return;
         if (this.shiftItems(event.shiftKey ? 'outdent' : 'indent')) {
             event.preventDefault();
@@ -4754,6 +4861,117 @@ class KptRichText {
      * Brak schematu → dopisz `https://` (spójne z zachowaniem `normalizeUrl` w mapie); `#`/`/`
      * przechodzą bez zmian; schemat spoza `SAFE_URL_SCHEME` → `null` (link nie zostaje wstawiony).
      */
+    // ── Wzmianki (`@`) ──
+    /**
+     * Sprawdza, czy kursor stoi w zapytaniu `@…`, i ustawia listę podpowiedzi.
+     *
+     * Zapytanie liczymy z **węzła tekstowego**, nie z całego HTML-a: w treści siedzą tagi, a `@`
+     * ma widzieć tylko to, co użytkownik naprawdę napisał w tym miejscu. Rozpoznanie zostawiamy
+     * `mentionQuery()` z `@konce-pt/mention` — te same reguły działają w obu portach i w zwykłym
+     * polu tekstowym.
+     */
+    syncMention() {
+        if (this.disabled() || !this.mentions().length)
+            return this.closeMention();
+        const selection = window.getSelection();
+        const node = selection?.anchorNode;
+        if (!selection?.isCollapsed || !(node instanceof Text) || !this.inEditor())
+            return this.closeMention();
+        const query = mentionQuery(node.data, selection.anchorOffset);
+        if (!query)
+            return this.closeMention();
+        const matches = filterMentions(this.mentions(), query.query, this.mentionLimit());
+        if (!matches.length)
+            return this.closeMention();
+        this.mentionRange = { node, start: query.start, end: query.end };
+        this.mentionMatches.set(matches);
+        this.mentionActive.set(0);
+        this.mentionPoint.set(this.caretPoint(node, query.end));
+        this.mentionOpen.set(true);
+    }
+    /** Punkt pod kursorem — lista podpowiedzi zaczepia się o niego, bo `@` nie ma swojego elementu. */
+    caretPoint(node, offset) {
+        const range = document.createRange();
+        range.setStart(node, Math.min(offset, node.length));
+        range.collapse(true);
+        const rect = range.getBoundingClientRect();
+        // Zwinięty zakres na początku wiersza potrafi dać zerowy prostokąt — wtedy bierzemy
+        // krawędź samego edytora, żeby lista nie wylądowała w rogu ekranu.
+        if (rect.width === 0 && rect.height === 0) {
+            const fallback = this.editor()?.nativeElement.getBoundingClientRect();
+            return { x: fallback?.left ?? 0, y: fallback?.top ?? 0 };
+        }
+        return { x: rect.left, y: rect.bottom };
+    }
+    /** Klawiatura listy podpowiedzi; `true` = zdarzenie obsłużone i edytor go już nie zobaczy. */
+    onMentionKeydown(event) {
+        const count = this.mentionMatches().length;
+        if (!count)
+            return false;
+        switch (event.key) {
+            case 'ArrowDown':
+                this.mentionActive.update((index) => (index + 1) % count);
+                break;
+            case 'ArrowUp':
+                this.mentionActive.update((index) => (index - 1 + count) % count);
+                break;
+            case 'Enter':
+            case 'Tab': {
+                const item = this.mentionMatches()[this.mentionActive()];
+                if (!item)
+                    return false;
+                this.insertMention(item);
+                break;
+            }
+            case 'Escape':
+                this.closeMention();
+                break;
+            default:
+                return false;
+        }
+        event.preventDefault();
+        return true;
+    }
+    /**
+     * Wstawia wzmiankę w miejsce zapytania `@…`.
+     *
+     * Wzmianka jest elementem, nie samym tekstem: `data-mention` niesie identyfikator, który
+     * przeżyje zmianę nazwy, a `contenteditable="false"` trzyma ją w jednym kawałku — bez tego
+     * kursor wchodziłby w środek nazwiska i psuł zapis. Spacja po wzmiance daje gdzie postawić
+     * kursor: bez niej nie da się wyjść poza element, który nie jest edytowalny.
+     */
+    insertMention(item) {
+        const target = this.mentionRange;
+        if (!target)
+            return;
+        const range = document.createRange();
+        range.setStart(target.node, target.start);
+        range.setEnd(target.node, Math.min(target.end, target.node.length));
+        range.deleteContents();
+        const element = document.createElement('span');
+        element.className = 'kpt-mention';
+        element.dataset['mention'] = item.id;
+        element.setAttribute('contenteditable', 'false');
+        element.textContent = '@' + item.label;
+        const space = document.createTextNode(' ');
+        range.insertNode(space);
+        range.insertNode(element);
+        const after = document.createRange();
+        after.setStartAfter(space);
+        after.collapse(true);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(after);
+        this.closeMention();
+        this.onInput();
+        this.mentioned.emit(item);
+    }
+    closeMention() {
+        this.mentionRange = null;
+        this.mentionMatches.set([]);
+        if (this.mentionOpen())
+            this.mentionOpen.set(false);
+    }
     sanitizeUrl(url) {
         const trimmed = url.trim().replace(/[\x00-\x1f]/g, '');
         if (!trimmed)
@@ -4812,22 +5030,24 @@ class KptRichText {
     }
     static { this.ɵfac = function KptRichText_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptRichText)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptRichText, selectors: [["kpt-rich-text"]], viewQuery: function KptRichText_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.editor, _c0$v, 5);
+            i0.ɵɵviewQuerySignal(ctx.editor, _c0$z, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-rich-text-host"], inputs: { value: [1, "value"], toolbar: [1, "toolbar"], placeholder: [1, "placeholder"], maxListLevel: [1, "maxListLevel"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 11, vars: 14, consts: [["paletteTpl", ""], ["styleOrigin", "cdkOverlayOrigin"], ["foreOrigin", "cdkOverlayOrigin"], ["backOrigin", "cdkOverlayOrigin"], ["tableOrigin", "cdkOverlayOrigin"], ["editor", ""], [1, "kpt-rich-text"], ["role", "toolbar", 1, "kpt-rich-text__toolbar"], ["spellcheck", "false", 1, "kpt-rich-text__source", 3, "value", "disabled"], ["role", "textbox", "aria-multiline", "true", 1, "kpt-rich-text__editor"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop"], ["aria-hidden", "true", 1, "kpt-rich-text__divider"], ["type", "button", 1, "kpt-rich-text__tool", 3, "is-active", "kptTooltip", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-rich-text__style", 3, "mousedown", "click", "disabled", "kptTooltip"], ["name", "chevron-down", 1, "kpt-rich-text__style-caret"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "listbox", 1, "kpt-rich-text__style-panel"], ["role", "option", 1, "kpt-rich-text__style-opt", 3, "class", "is-selected"], ["role", "option", 1, "kpt-rich-text__style-opt", 3, "click"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-rich-text__tool", "kpt-rich-text__tool--color", 3, "mousedown", "click", "kptTooltip", "disabled"], [3, "name"], [3, "ngTemplateOutlet"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-rich-text__tool", 3, "mousedown", "click", "kptTooltip", "disabled"], [1, "kpt-rt-grid-pop", 3, "mousedown"], [1, "kpt-rt-grid", 3, "mouseleave"], [1, "kpt-rt-grid__row"], [1, "kpt-rt-grid__label"], [1, "kpt-rt-grid__cell", 3, "is-on"], [1, "kpt-rt-grid__cell", 3, "mouseenter", "click"], ["type", "button", 1, "kpt-rich-text__tool", 3, "mousedown", "click", "kptTooltip", "disabled"], ["spellcheck", "false", 1, "kpt-rich-text__source", 3, "input", "blur", "value", "disabled"], ["role", "textbox", "aria-multiline", "true", 1, "kpt-rich-text__editor", 3, "input", "keydown", "paste", "contextmenu", "mousedown", "mousemove", "blur"], [1, "kpt-rt-menu", 3, "contextmenu"], [1, "kpt-rt-menu__group"], ["type", "button", 1, "kpt-rt-menu__item", 3, "click"], ["name", "plus"], ["name", "table"], ["name", "trash"], [1, "kpt-rt-menu__sep"], ["name", "palette"], ["name", "align-left"], ["name", "align-center"], ["name", "align-right"], ["name", "grip-vertical"], ["type", "button", 1, "kpt-rt-menu__item", "kpt-rt-menu__item--danger", 3, "click"], [1, "kpt-rt-border", 3, "mousedown"], [1, "kpt-rt-border__seg"], ["type", "button", 3, "click"], [1, "kpt-rt-border__widths"], [1, "kpt-rich-text__swatches"], ["type", "button", 1, "kpt-rich-text__swatch", 3, "background"], [1, "kpt-rich-text__picker"], ["type", "color", 3, "input"], ["type", "button", 1, "kpt-rich-text__swatch", 3, "click"], [1, "kpt-rich-text__palette", 3, "mousedown"]], template: function KptRichText_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [1, "kpt-rich-text-host"], inputs: { value: [1, "value"], toolbar: [1, "toolbar"], placeholder: [1, "placeholder"], maxListLevel: [1, "maxListLevel"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], mentions: [1, "mentions"], mentionLimit: [1, "mentionLimit"] }, outputs: { value: "valueChange", touch: "touch", mentioned: "mentioned" }, decls: 12, vars: 16, consts: [["paletteTpl", ""], ["styleOrigin", "cdkOverlayOrigin"], ["foreOrigin", "cdkOverlayOrigin"], ["backOrigin", "cdkOverlayOrigin"], ["tableOrigin", "cdkOverlayOrigin"], ["editor", ""], [1, "kpt-rich-text"], ["role", "toolbar", 1, "kpt-rich-text__toolbar"], ["spellcheck", "false", 1, "kpt-rich-text__source", 3, "value", "disabled"], ["role", "textbox", "aria-multiline", "true", 1, "kpt-rich-text__editor"], ["cdkConnectedOverlay", "", 3, "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop"], ["aria-hidden", "true", 1, "kpt-rich-text__divider"], ["type", "button", 1, "kpt-rich-text__tool", 3, "is-active", "kptTooltip", "disabled"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-rich-text__style", 3, "mousedown", "click", "disabled", "kptTooltip"], ["name", "chevron-down", 1, "kpt-rich-text__style-caret"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "listbox", 1, "kpt-rich-text__style-panel"], ["role", "option", 1, "kpt-rich-text__style-opt", 3, "class", "is-selected"], ["role", "option", 1, "kpt-rich-text__style-opt", 3, "click"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-rich-text__tool", "kpt-rich-text__tool--color", 3, "mousedown", "click", "kptTooltip", "disabled"], [3, "name"], [3, "ngTemplateOutlet"], ["type", "button", "cdkOverlayOrigin", "", 1, "kpt-rich-text__tool", 3, "mousedown", "click", "kptTooltip", "disabled"], [1, "kpt-rt-grid-pop", 3, "mousedown"], [1, "kpt-rt-grid", 3, "mouseleave"], [1, "kpt-rt-grid__row"], [1, "kpt-rt-grid__label"], [1, "kpt-rt-grid__cell", 3, "is-on"], [1, "kpt-rt-grid__cell", 3, "mouseenter", "click"], ["type", "button", 1, "kpt-rich-text__tool", 3, "mousedown", "click", "kptTooltip", "disabled"], ["spellcheck", "false", 1, "kpt-rich-text__source", 3, "input", "blur", "value", "disabled"], ["role", "textbox", "aria-multiline", "true", 1, "kpt-rich-text__editor", 3, "input", "keydown", "paste", "contextmenu", "mousedown", "mousemove", "blur"], ["role", "listbox", 1, "kpt-rt-mentions"], ["role", "option", 1, "kpt-rt-mentions__item"], ["role", "option", 1, "kpt-rt-mentions__item", 3, "mousedown", "mouseenter"], [1, "kpt-rt-mentions__label"], [1, "kpt-rt-mentions__kind"], [1, "kpt-rt-menu", 3, "contextmenu"], [1, "kpt-rt-menu__group"], ["type", "button", 1, "kpt-rt-menu__item", 3, "click"], ["name", "plus"], ["name", "table"], ["name", "trash"], [1, "kpt-rt-menu__sep"], ["name", "palette"], ["name", "align-left"], ["name", "align-center"], ["name", "align-right"], ["name", "grip-vertical"], ["type", "button", 1, "kpt-rt-menu__item", "kpt-rt-menu__item--danger", 3, "click"], [1, "kpt-rt-border", 3, "mousedown"], [1, "kpt-rt-border__seg"], ["type", "button", 3, "click"], [1, "kpt-rt-border__widths"], [1, "kpt-rich-text__swatches"], ["type", "button", 1, "kpt-rich-text__swatch", 3, "background"], [1, "kpt-rich-text__picker"], ["type", "color", 3, "input"], ["type", "button", 1, "kpt-rich-text__swatch", 3, "click"], [1, "kpt-rich-text__palette", 3, "mousedown"]], template: function KptRichText_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
             i0.ɵɵrepeaterCreate(2, KptRichText_For_3_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(4, KptRichText_Conditional_4_Template, 1, 3, "textarea", 8)(5, KptRichText_Conditional_5_Template, 2, 3, "div", 9);
-            i0.ɵɵtemplate(6, KptRichText_ng_template_6_Template, 60, 23, "ng-template", 10);
-            i0.ɵɵlistener("backdropClick", function KptRichText_Template_ng_template_backdropClick_6_listener() { return ctx.closeMenu(); })("detach", function KptRichText_Template_ng_template_detach_6_listener() { return ctx.closeMenu(); });
-            i0.ɵɵtemplate(7, KptRichText_ng_template_7_Template, 22, 11, "ng-template", 10);
-            i0.ɵɵlistener("backdropClick", function KptRichText_Template_ng_template_backdropClick_7_listener() { return ctx.closeBorder(); })("detach", function KptRichText_Template_ng_template_detach_7_listener() { return ctx.closeBorder(); });
-            i0.ɵɵtemplate(8, KptRichText_ng_template_8_Template, 1, 1, "ng-template", 10);
-            i0.ɵɵlistener("backdropClick", function KptRichText_Template_ng_template_backdropClick_8_listener() { return ctx.closeColor(); })("detach", function KptRichText_Template_ng_template_detach_8_listener() { return ctx.closeColor(); });
+            i0.ɵɵtemplate(6, KptRichText_ng_template_6_Template, 3, 1, "ng-template", 10);
+            i0.ɵɵlistener("detach", function KptRichText_Template_ng_template_detach_6_listener() { return ctx.closeMention(); });
+            i0.ɵɵtemplate(7, KptRichText_ng_template_7_Template, 60, 23, "ng-template", 11);
+            i0.ɵɵlistener("backdropClick", function KptRichText_Template_ng_template_backdropClick_7_listener() { return ctx.closeMenu(); })("detach", function KptRichText_Template_ng_template_detach_7_listener() { return ctx.closeMenu(); });
+            i0.ɵɵtemplate(8, KptRichText_ng_template_8_Template, 22, 11, "ng-template", 11);
+            i0.ɵɵlistener("backdropClick", function KptRichText_Template_ng_template_backdropClick_8_listener() { return ctx.closeBorder(); })("detach", function KptRichText_Template_ng_template_detach_8_listener() { return ctx.closeBorder(); });
+            i0.ɵɵtemplate(9, KptRichText_ng_template_9_Template, 1, 1, "ng-template", 11);
+            i0.ɵɵlistener("backdropClick", function KptRichText_Template_ng_template_backdropClick_9_listener() { return ctx.closeColor(); })("detach", function KptRichText_Template_ng_template_detach_9_listener() { return ctx.closeColor(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(9, KptRichText_ng_template_9_Template, 8, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(10, KptRichText_ng_template_10_Template, 8, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵclassProp("kpt-rich-text--invalid", ctx.showInvalid())("kpt-rich-text--disabled", ctx.disabled());
             i0.ɵɵadvance(2);
@@ -4835,18 +5055,20 @@ class KptRichText {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.sourceView() ? 4 : 5);
             i0.ɵɵadvance(2);
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.mentionPoint())("cdkConnectedOverlayOpen", ctx.mentionOpen());
+            i0.ɵɵadvance();
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.menuPoint())("cdkConnectedOverlayOpen", ctx.menuOpen())("cdkConnectedOverlayHasBackdrop", true);
             i0.ɵɵadvance();
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.menuPoint())("cdkConnectedOverlayOpen", ctx.borderOpen())("cdkConnectedOverlayHasBackdrop", true);
             i0.ɵɵadvance();
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.menuPoint())("cdkConnectedOverlayOpen", ctx.colorOpen() && ctx.colorKind() === "cellBg")("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], styles: ["@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);overflow:hidden;background:var(--%NS%kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:var(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-primary)}.kpt-rich-text__divider{width:var(--%NS%kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--%NS%kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font:inherit;font-size:var(--%NS%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(--%NS%kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--%NS%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(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5);color:var(--%NS%kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--%NS%kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--%NS%kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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(--%NS%kpt-color-border-strong);color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%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(--%NS%kpt-color-surface-variant);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%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(--%NS%kpt-space-3, .75rem);border:0;background:var(--%NS%kpt-color-surface-variant);color:var(--%NS%kpt-form-field-text);font-family:var(--%NS%kpt-font-family-mono, ui-monospace, monospace);font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%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(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--%NS%kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--%NS%kpt-color-muted);color:var(--%NS%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(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%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(--%NS%kpt-space-2, .5rem);margin-top:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--%NS%kpt-space-2, .5rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--%NS%kpt-space-2, .5rem);text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-rt-menu__item .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger,.kpt-rt-menu__item--danger .kpt-icon-host{color:var(--%NS%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(--%NS%kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--%NS%kpt-color-muted)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon, CdkOverlayOrigin, CdkConnectedOverlay, NgTemplateOutlet, KptTooltip], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-rich-text-host{display:block}.kpt-rich-text{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);overflow:hidden;background:var(--%NS%kpt-form-field-bg)}.kpt-rich-text:focus-within{border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-rich-text--invalid{border-color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:var(--%NS%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(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font-size:1.05rem}.kpt-rich-text__tool:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-rich-text__tool:disabled{opacity:.5;cursor:not-allowed}.kpt-rich-text__tool.is-active{background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-primary)}.kpt-rich-text__divider{width:var(--%NS%kpt-border-width-thin, 1px);align-self:stretch;margin-inline:.2rem;background:var(--%NS%kpt-color-border)}.kpt-rich-text__style{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-1, .25rem);height:2rem;min-width:8rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font:inherit;font-size:var(--%NS%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(--%NS%kpt-form-field-border-hover)}.kpt-rich-text__style.is-open{border-color:var(--%NS%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(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5);color:var(--%NS%kpt-form-field-text);outline:none;overflow-y:auto}.kpt-rich-text__editor:empty:before{content:attr(data-placeholder);color:var(--%NS%kpt-form-field-placeholder)}.kpt-rich-text__editor a{color:var(--%NS%kpt-color-primary)}.kpt-rich-text__editor ul,.kpt-rich-text__editor ol{padding-inline-start:1.5rem}.kpt-rich-text__editor ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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(--%NS%kpt-color-border-strong);color:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%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(--%NS%kpt-color-surface-variant);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-rich-text__editor .kpt-rt-table .kpt-rt-cell-sel{box-shadow:inset 0 0 0 2px var(--%NS%kpt-color-primary);background:color-mix(in oklch,var(--%NS%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(--%NS%kpt-space-3, .75rem);border:0;background:var(--%NS%kpt-color-surface-variant);color:var(--%NS%kpt-form-field-text);font-family:var(--%NS%kpt-font-family-mono, ui-monospace, monospace);font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%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(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);max-height:20rem;overflow-y:auto}.kpt-rich-text__style-opt{padding:.35rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);cursor:pointer;line-height:1.2}.kpt-rich-text__style-opt:hover{background:var(--%NS%kpt-color-muted)}.kpt-rich-text__style-opt.is-selected{background:var(--%NS%kpt-color-muted);color:var(--%NS%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(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%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(--%NS%kpt-space-2, .5rem);margin-top:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rich-text__picker input[type=color]{width:2rem;height:1.6rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;cursor:pointer}.kpt-rt-grid-pop{padding:var(--%NS%kpt-space-2, .5rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%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(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:2px;cursor:pointer}.kpt-rt-grid__cell.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-rt-grid__label{margin-top:var(--%NS%kpt-space-2, .5rem);text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-mentions{min-inline-size:12rem;max-inline-size:20rem;margin:0;padding:.25rem;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);list-style:none;box-shadow:var(--%NS%kpt-elevation-3)}.kpt-rt-mentions__item{display:flex;align-items:baseline;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-1, .25rem) var(--%NS%kpt-space-2, .5rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-mentions__item[data-active]{background:var(--%NS%kpt-color-surface-hover)}.kpt-rt-mentions__kind{margin-inline-start:auto;color:var(--%NS%kpt-color-text-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-rt-menu{min-width:12rem;padding:.25rem;background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-rt-menu__group{padding:.3rem .6rem .15rem;font-size:var(--%NS%kpt-font-size-xs, .75rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.03em;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.4rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;text-align:start;cursor:pointer}.kpt-rt-menu__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-rt-menu__item .kpt-icon-host{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger,.kpt-rt-menu__item--danger .kpt-icon-host{color:var(--%NS%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(--%NS%kpt-color-border)}.kpt-rt-border{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-rt-border__seg{display:flex;gap:2px;padding:2px;background:var(--%NS%kpt-color-surface-variant);border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-rt-border__seg button{flex:1;border:0;background:none;padding:.25rem .5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface-muted);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-border__seg button.is-active{background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500);box-shadow:var(--%NS%kpt-elevation-1)}.kpt-rt-border__widths{display:flex;gap:.25rem}.kpt-rt-border__widths button{flex:1;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);background:none;padding:.25rem .3rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-xs, .75rem);cursor:pointer}.kpt-rt-border__widths button:hover{background:var(--%NS%kpt-color-muted)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptRichText, [{
         type: Component,
-        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]=\"showInvalid()\" [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]=\"pressed(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled() || !enabled(item)\"\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      [attr.aria-label]=\"i18n.t('richText.htmlSource')\"\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]=\"showInvalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (keydown)=\"onKeydown($event)\"\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\">{{ i18n.t('richText.menu.column') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertRight') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerColumn') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteColumn') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.row') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertAbove') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertBelow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerRow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteRow') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.cell') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> {{ i18n.t('richText.menu.cellBackground') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> {{ i18n.t('richText.menu.alignLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> {{ i18n.t('richText.menu.alignCenter') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> {{ i18n.t('richText.menu.alignRight') }}</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\" /> {{ i18n.t('richText.menu.mergeCells') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> {{ i18n.t('richText.menu.splitCell') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.border') }}</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\" /> {{ i18n.t('richText.menu.deleteTable') }}</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')\">{{ i18n.t('richText.border.table') }}</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">{{ i18n.t('richText.border.cell') }}</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">{{ i18n.t('richText.border.none') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">{{ i18n.t('richText.border.thin') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">{{ i18n.t('richText.border.medium') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">{{ i18n.t('richText.border.thick') }}</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>{{ i18n.t('richText.border.customColor') }}</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>{{ i18n.t('richText.paletteCustom') }}</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 ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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-host{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger,.kpt-rt-menu__item--danger .kpt-icon-host{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"] }]
-    }], () => [], { 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 }] }], maxListLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxListLevel", 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 }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber: 135 }); })();
+        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]=\"showInvalid()\" [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]=\"pressed(item)\"\n              [kptTooltip]=\"aria(item)\"\n              [disabled]=\"disabled() || !enabled(item)\"\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      [attr.aria-label]=\"i18n.t('richText.htmlSource')\"\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]=\"showInvalid() ? 'true' : null\"\n      role=\"textbox\"\n      aria-multiline=\"true\"\n      (input)=\"onInput()\"\n      (keydown)=\"onKeydown($event)\"\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  <!-- Podpowiedzi wzmianek (origin punktowy = miejsce kursora, bo `@` nie ma swojego elementu) -->\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"mentionPoint()\"\n    [cdkConnectedOverlayOpen]=\"mentionOpen()\"\n    (detach)=\"closeMention()\"\n  >\n    <ul class=\"kpt-rt-mentions\" role=\"listbox\" [attr.aria-label]=\"i18n.t('richText.mentions')\">\n      @for (item of mentionMatches(); track item.id; let index = $index) {\n        <li\n          class=\"kpt-rt-mentions__item\"\n          role=\"option\"\n          [attr.aria-selected]=\"index === mentionActive()\"\n          [attr.data-active]=\"index === mentionActive() ? '' : null\"\n          (mousedown)=\"$event.preventDefault(); insertMention(item)\"\n          (mouseenter)=\"mentionActive.set(index)\"\n        >\n          <span class=\"kpt-rt-mentions__label\">{{ item.label }}</span>\n          @if (item.kind) {\n            <span class=\"kpt-rt-mentions__kind\">{{ item.kind }}</span>\n          }\n        </li>\n      }\n    </ul>\n  </ng-template>\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\">{{ i18n.t('richText.menu.column') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('left')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertColumn('right')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertRight') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderColumn()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerColumn') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteColumn()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteColumn') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.row') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('above')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertAbove') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"insertRow('below')\"><kpt-icon name=\"plus\" /> {{ i18n.t('richText.menu.insertBelow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"toggleHeaderRow()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.headerRow') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"deleteRow()\"><kpt-icon name=\"trash\" /> {{ i18n.t('richText.menu.deleteRow') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <div class=\"kpt-rt-menu__group\">{{ i18n.t('richText.menu.cell') }}</div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openCellBg()\"><kpt-icon name=\"palette\" /> {{ i18n.t('richText.menu.cellBackground') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('left')\"><kpt-icon name=\"align-left\" /> {{ i18n.t('richText.menu.alignLeft') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('center')\"><kpt-icon name=\"align-center\" /> {{ i18n.t('richText.menu.alignCenter') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"alignCell('right')\"><kpt-icon name=\"align-right\" /> {{ i18n.t('richText.menu.alignRight') }}</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\" /> {{ i18n.t('richText.menu.mergeCells') }}</button>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" [class.is-disabled]=\"!canSplit()\" (click)=\"splitCell()\"><kpt-icon name=\"grip-vertical\" /> {{ i18n.t('richText.menu.splitCell') }}</button>\n      <div class=\"kpt-rt-menu__sep\"></div>\n      <button type=\"button\" class=\"kpt-rt-menu__item\" (click)=\"openBorder()\"><kpt-icon name=\"table\" /> {{ i18n.t('richText.menu.border') }}</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\" /> {{ i18n.t('richText.menu.deleteTable') }}</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')\">{{ i18n.t('richText.border.table') }}</button>\n        <button type=\"button\" [class.is-active]=\"borderTarget() === 'cell'\" (click)=\"borderTarget.set('cell')\">{{ i18n.t('richText.border.cell') }}</button>\n      </div>\n      <div class=\"kpt-rt-border__widths\">\n        <button type=\"button\" (click)=\"setBorderWidth('none')\">{{ i18n.t('richText.border.none') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thin')\">{{ i18n.t('richText.border.thin') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('medium')\">{{ i18n.t('richText.border.medium') }}</button>\n        <button type=\"button\" (click)=\"setBorderWidth('thick')\">{{ i18n.t('richText.border.thick') }}</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>{{ i18n.t('richText.border.customColor') }}</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>{{ i18n.t('richText.paletteCustom') }}</span>\n      <input type=\"color\" (input)=\"onColorInput($event)\" />\n    </label>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@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 ul{list-style-type:disc}.kpt-rich-text__editor ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul{list-style-type:square}.kpt-rich-text__editor ul ul ul ul{list-style-type:disc}.kpt-rich-text__editor ul ul ul ul ul{list-style-type:circle}.kpt-rich-text__editor ul ul ul ul ul ul{list-style-type:square}.kpt-rich-text__editor ol{list-style-type:decimal}.kpt-rich-text__editor ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol{list-style-type:lower-roman}.kpt-rich-text__editor ol ol ol ol{list-style-type:decimal}.kpt-rich-text__editor ol ol ol ol ol{list-style-type:lower-alpha}.kpt-rich-text__editor ol ol ol ol ol ol{list-style-type:lower-roman}.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-mentions{min-inline-size:12rem;max-inline-size:20rem;margin:0;padding:.25rem;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);list-style:none;box-shadow:var(--kpt-elevation-3)}.kpt-rt-mentions__item{display:flex;align-items:baseline;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-1, .25rem) var(--kpt-space-2, .5rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-rt-mentions__item[data-active]{background:var(--kpt-color-surface-hover)}.kpt-rt-mentions__kind{margin-inline-start:auto;color:var(--kpt-color-text-muted);font-size:var(--kpt-font-size-xs, .75rem)}.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-host{color:var(--kpt-color-on-surface-muted)}.kpt-rt-menu__item--danger,.kpt-rt-menu__item--danger .kpt-icon-host{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"] }]
+    }], () => [], { 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 }] }], maxListLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxListLevel", 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 }] }], mentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentions", required: false }] }], mentionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionLimit", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], mentioned: [{ type: i0.Output, args: ["mentioned"] }], editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRichText, { className: "KptRichText", filePath: "lib/rich-text/rich-text.component.ts", lineNumber: 145 }); })();
 
 function KptSlider_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 5);
@@ -5042,7 +5264,7 @@ class KptSlider {
     }], null, { 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"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSlider, { className: "KptSlider", filePath: "lib/slider/slider.component.ts", lineNumber: 87 }); })();
 
-const _c0$u = (a0, a1) => ({ value: a0, max: a1 });
+const _c0$y = (a0, a1) => ({ value: a0, max: a1 });
 function KptRating_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -5054,7 +5276,7 @@ function KptRating_For_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("is-filled", star_r2 <= (ctx_r2.hover() || ctx_r2.value()));
     i0.ɵɵproperty("disabled", ctx_r2.readonly() || ctx_r2.disabled());
-    i0.ɵɵattribute("aria-label", ctx_r2.i18n.t("rating.star", i0.ɵɵpureFunction2(4, _c0$u, star_r2, ctx_r2.count())));
+    i0.ɵɵattribute("aria-label", ctx_r2.i18n.t("rating.star", i0.ɵɵpureFunction2(4, _c0$y, star_r2, ctx_r2.count())));
 } }
 /**
  * Ocena gwiazdkami (rating) na Signal Forms.
@@ -5987,7 +6209,7 @@ class KptInputNumber {
     }], null, { 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInputNumber, { className: "KptInputNumber", filePath: "lib/input-number/input-number.component.ts", lineNumber: 53 }); })();
 
-const _c0$t = () => [0, 1, 2, 3];
+const _c0$x = () => [0, 1, 2, 3];
 function KptPassword_Conditional_4_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 8);
 } if (rf & 2) {
@@ -6006,7 +6228,7 @@ function KptPassword_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵattribute("data-score", ctx_r1.strength().score);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(2, _c0$t));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(2, _c0$x));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.strength().label);
 } }
@@ -6729,8 +6951,8 @@ class KptKnob {
     }], null, { 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", 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"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptKnob, { className: "KptKnob", filePath: "lib/knob/knob.component.ts", lineNumber: 45 }); })();
 
-const _c0$s = ["*", [["", "kptCardFooter", ""]]];
-const _c1$b = ["*", "[kptCardFooter]"];
+const _c0$w = ["*", [["", "kptCardFooter", ""]]];
+const _c1$e = ["*", "[kptCardFooter]"];
 function KptCard_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "div", 0);
     i0.ɵɵtext(1);
@@ -6767,8 +6989,8 @@ class KptCard {
     static { this.ɵfac = function KptCard_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptCard)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptCard, selectors: [["kpt-card"]], hostAttrs: [1, "kpt-card"], hostVars: 1, hostBindings: function KptCard_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-variant", ctx.variant());
-        } }, inputs: { variant: [1, "variant"], header: [1, "header"], flush: [1, "flush"] }, ngContentSelectors: _c1$b, decls: 4, vars: 3, consts: [[1, "kpt-card__header"], [1, "kpt-card__body"]], template: function KptCard_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$s);
+        } }, inputs: { variant: [1, "variant"], header: [1, "header"], flush: [1, "flush"] }, ngContentSelectors: _c1$e, decls: 4, vars: 3, consts: [[1, "kpt-card__header"], [1, "kpt-card__body"]], template: function KptCard_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$w);
             i0.ɵɵconditionalCreate(0, KptCard_Conditional_0_Template, 2, 1, "div", 0);
             i0.ɵɵdomElementStart(1, "div", 1);
             i0.ɵɵprojection(2);
@@ -6823,7 +7045,7 @@ class KptDivider {
     }], null, { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDivider, { className: "KptDivider", filePath: "lib/divider/divider.component.ts", lineNumber: 27 }); })();
 
-const _c0$r = ["*"];
+const _c0$v = ["*"];
 /**
  * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
  * Elementowi z atrybutem `kptToolbarSpacer` nadaj elastyczny odstęp, aby rozepchnąć zawartość.
@@ -6851,7 +7073,7 @@ class KptToolbar {
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptToolbar, selectors: [["kpt-toolbar"]], hostAttrs: [1, "kpt-toolbar"], hostVars: 3, hostBindings: function KptToolbar_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-wrap", ctx.wrap() ? "" : null);
             i0.ɵɵclassProp("kpt-toolbar--elevated", ctx.elevated());
-        } }, inputs: { elevated: [1, "elevated"], wrap: [1, "wrap"] }, ngContentSelectors: _c0$r, decls: 1, vars: 0, template: function KptToolbar_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { elevated: [1, "elevated"], wrap: [1, "wrap"] }, ngContentSelectors: _c0$v, decls: 1, vars: 0, template: function KptToolbar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, styles: ["@layer kpt.components{.kpt-toolbar{--%NS%_kpt-toolbar-height: var(--%NS%kpt-toolbar-height, 3.5rem);--%NS%_kpt-toolbar-padding-inline: var(--%NS%kpt-space-4, 1rem);--%NS%_kpt-toolbar-gap: var(--%NS%kpt-space-3, .75rem);display:flex;align-items:center;gap:var(--%NS%_kpt-toolbar-gap);min-height:var(--%NS%_kpt-toolbar-height);padding-inline:var(--%NS%_kpt-toolbar-padding-inline);background:var(--%NS%kpt-toolbar-bg);color:var(--%NS%kpt-toolbar-fg);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-toolbar-border);min-inline-size:0}.kpt-toolbar--elevated{box-shadow:var(--%NS%kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto;min-inline-size:0}.kpt-toolbar[data-wrap]{flex-wrap:wrap;row-gap:var(--%NS%kpt-space-2, .5rem);padding-block:var(--%NS%kpt-space-2, .5rem)}@media(max-width:639.98px){.kpt-toolbar{--%NS%_kpt-toolbar-height: var(--%NS%kpt-toolbar-height-compact, 3rem);--%NS%_kpt-toolbar-padding-inline: var(--%NS%kpt-space-3, .75rem);--%NS%_kpt-toolbar-gap: var(--%NS%kpt-space-2, .5rem)}}}\n"], encapsulation: 2 }); }
@@ -6866,8 +7088,8 @@ class KptToolbar {
     }], null, { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToolbar, { className: "KptToolbar", filePath: "lib/toolbar/toolbar.component.ts", lineNumber: 27 }); })();
 
-const _c0$q = ["*", [["", "kptSidenavFooter", ""]]];
-const _c1$a = ["*", "[kptSidenavFooter]"];
+const _c0$u = ["*", [["", "kptSidenavFooter", ""]]];
+const _c1$d = ["*", "[kptSidenavFooter]"];
 /**
  * Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle umieszczany w slocie
  * `kptShellSidenav` komponentu `kpt-app-shell`.
@@ -6887,8 +7109,8 @@ const _c1$a = ["*", "[kptSidenavFooter]"];
  */
 class KptSidenav {
     static { this.ɵfac = function KptSidenav_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSidenav)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSidenav, selectors: [["kpt-sidenav"]], hostAttrs: [1, "kpt-sidenav"], ngContentSelectors: _c1$a, decls: 3, vars: 0, consts: [[1, "kpt-sidenav__scroll"]], template: function KptSidenav_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$q);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSidenav, selectors: [["kpt-sidenav"]], hostAttrs: [1, "kpt-sidenav"], ngContentSelectors: _c1$d, decls: 3, vars: 0, consts: [[1, "kpt-sidenav__scroll"]], template: function KptSidenav_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$u);
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵdomElementEnd();
@@ -6901,8 +7123,8 @@ class KptSidenav {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSidenav, { className: "KptSidenav", filePath: "lib/sidenav/sidenav.component.ts", lineNumber: 30 }); })();
 
-const _c0$p = [[["", "kptShellToolbar", ""]], [["", "kptShellSidenav", ""]], "*"];
-const _c1$9 = ["[kptShellToolbar]", "[kptShellSidenav]", "*"];
+const _c0$t = [[["", "kptShellToolbar", ""]], [["", "kptShellSidenav", ""]], "*"];
+const _c1$c = ["[kptShellToolbar]", "[kptShellSidenav]", "*"];
 /**
  * Szkielet aplikacji: pasek u góry, panel boczny i treść. Sloty projekcji:
  * `[kptShellToolbar]`, `[kptShellSidenav]` oraz treść domyślna.
@@ -7022,8 +7244,8 @@ class KptAppShell {
         } if (rf & 2) {
             i0.ɵɵattribute("data-sidenav-mode", ctx.sidenavMode())("data-sidenav-breakpoint", ctx.sidenavBreakpoint())("data-sidenav-rail", ctx.sidenavRailBreakpoint());
             i0.ɵɵclassProp("kpt-app-shell--nav-open", ctx.sidenavOpen())("kpt-app-shell--nav-compact-open", ctx.sidenavCompactOpen());
-        } }, inputs: { sidenavOpen: [1, "sidenavOpen"], sidenavCompactOpen: [1, "sidenavCompactOpen"], sidenavMode: [1, "sidenavMode"], sidenavBreakpoint: [1, "sidenavBreakpoint"], sidenavRailBreakpoint: [1, "sidenavRailBreakpoint"], sidenavLabel: [1, "sidenavLabel"] }, outputs: { sidenavOpen: "sidenavOpenChange", sidenavCompactOpen: "sidenavCompactOpenChange" }, ngContentSelectors: _c1$9, decls: 7, vars: 3, consts: [[1, "kpt-app-shell__body"], ["role", "navigation", "tabindex", "-1", 1, "kpt-app-shell__sidenav", 3, "id"], ["aria-hidden", "true", 1, "kpt-app-shell__scrim", 3, "click"], [1, "kpt-app-shell__content"]], template: function KptAppShell_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$p);
+        } }, inputs: { sidenavOpen: [1, "sidenavOpen"], sidenavCompactOpen: [1, "sidenavCompactOpen"], sidenavMode: [1, "sidenavMode"], sidenavBreakpoint: [1, "sidenavBreakpoint"], sidenavRailBreakpoint: [1, "sidenavRailBreakpoint"], sidenavLabel: [1, "sidenavLabel"] }, outputs: { sidenavOpen: "sidenavOpenChange", sidenavCompactOpen: "sidenavCompactOpenChange" }, ngContentSelectors: _c1$c, decls: 7, vars: 3, consts: [[1, "kpt-app-shell__body"], ["role", "navigation", "tabindex", "-1", 1, "kpt-app-shell__sidenav", 3, "id"], ["aria-hidden", "true", 1, "kpt-app-shell__scrim", 3, "click"], [1, "kpt-app-shell__content"]], template: function KptAppShell_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$t);
             i0.ɵɵprojection(0);
             i0.ɵɵdomElementStart(1, "div", 0)(2, "aside", 1);
             i0.ɵɵprojection(3, 1);
@@ -7121,7 +7343,359 @@ class KptShellNavToggle {
             }]
     }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptShellNavToggle", required: false }] }] }); })();
 
-const _c0$o = ["*"];
+const _c0$s = ["canvas"];
+const _c1$b = ["*"];
+/**
+ * Dekoracyjna warstwa tła dla sekcji: komponent obejmuje treść i maluje pod nią animowany canvas.
+ * Sięga się po niego tam, gdzie płaska powierzchnia wygląda na niedokończoną, a wideo albo duży
+ * obraz kosztowałyby transfer i nie poszłyby za motywem.
+ *
+ * Komponent jest opakowaniem: canvas leży pod spodem, a treść z `ng-content` idzie warstwę wyżej
+ * i zachowuje się zwyczajnie. Rysowanie stoi, gdy nie ma czego oglądać — sekcja poza ekranem,
+ * karta w tle, `paused`, `speed` równe zeru albo ograniczony ruch w systemie; wtedy zostaje jedna
+ * statyczna klatka zamiast pustki, bo efekt jest częścią kompozycji, nie ozdobą.
+ *
+ * Dwa efekty: `signal-grid` (drobna siatka migoczących kwadratów, gęsta przy jednej krawędzi)
+ * i `wave` (jedna miękka wstęga światła z barwami przesuwającymi się wzdłuż niej). Każdy czyta
+ * własny zestaw wejść — pozostałe po prostu go nie dotyczą.
+ *
+ * Sam komponent to cykl życia; rysowanie i cała matematyka siedzą w `@konce-pt/backdrop`,
+ * wspólnym z portem Reacta.
+ *
+ * @example
+ * <kpt-backdrop effect="wave" [rotation]="18" [colors]="['#5b8af2', '#a86df2', '#f25b9e']">
+ *   <h1>Zbuduj aplikację od pierwszego promptu</h1>
+ *   <kpt-button>Zacznij</kpt-button>
+ * </kpt-backdrop>
+ */
+class KptBackdrop {
+    constructor() {
+        /** Rysowany efekt. */
+        this.effect = input('signal-grid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effect" }] : /* istanbul ignore next */ []));
+        /** Tło sekcji. Puste bierze `--kpt-color-surface`. */
+        this.background = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
+        /** Tempo; 1 to spokojne tempo obu efektów, 0 zatrzymuje obraz. */
+        this.speed = input(1, { ...(ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Ziarno losowania — ta sama wartość daje ten sam układ kwadratów i ten sam przebieg wstęgi. */
+        this.seed = input(0, { ...(ngDevMode ? { debugName: "seed" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Zatrzymuje animację, zostawiając ostatnią klatkę. */
+        this.paused = input(false, { ...(ngDevMode ? { debugName: "paused" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Przenosi barwy wpisane na sztywno na powierzchnię bieżącego motywu: czerń dobrana do białego
+         * tła staje się bielą, gdy tło jest ciemne. Rusza wyłącznie jasność — odcień i nasycenie
+         * zostają, więc barwa marki nie zmienia się w inną barwę.
+         *
+         * Dotyczy `color`, `colors` i `background`, ale tylko wtedy, gdy podano je literałem. Wejście
+         * puste bierze token, a zapis z `var()` sam po token sięga — jedno i drugie już idzie za motywem
+         * i adaptacja odwróciłaby je drugi raz.
+         */
+        this.adaptive = input(false, { ...(ngDevMode ? { debugName: "adaptive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * `signal-grid`: kolor kwadratów — dowolny zapis CSS, także sięgający po tokeny, np.
+         * `color-mix(in oklab, #5b8af2, var(--kpt-color-surface) 30%)`. Taki zapis przelicza się przy
+         * zmianie motywu; literał zostaje literałem. Puste bierze `--kpt-color-primary`.
+         */
+        this.color = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** `signal-grid`: przy której krawędzi siatka jest najgęstsza. */
+        this.anchor = input('right', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+        /** `signal-grid`: bok kwadratu (px). */
+        this.cell = input(KPT_SIGNAL_GRID_CELL, { ...(ngDevMode ? { debugName: "cell" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** `signal-grid`: odstęp między kwadratami (px). */
+        this.gap = input(KPT_SIGNAL_GRID_GAP, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** `signal-grid`: udział zapalonych komórek przy kotwicy, 0–1. */
+        this.density = input(KPT_SIGNAL_GRID_DENSITY, { ...(ngDevMode ? { debugName: "density" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** `signal-grid`: jak szybko siatka gaśnie ku przeciwnej krawędzi. */
+        this.falloff = input(KPT_SIGNAL_GRID_FALLOFF, { ...(ngDevMode ? { debugName: "falloff" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * `wave`: rampa barw, po której przesuwa się wstęga — każdy przystanek dowolnym zapisem CSS.
+         * Zamknięta w pętlę, więc ostatnia barwa wraca do pierwszej. Pusta bierze `--kpt-color-primary`
+         * i dwie barwy wyprowadzone z niego obrotem odcienia — paleta biblioteki jest neutralna, więc
+         * domyślna wstęga jest jednobarwna i przygaszona. Po kolory sięga się tu, nie do tokenów
+         * statusowych. Zapis może sięgać po tokeny i wtedy idzie za motywem. Przystanek, którego
+         * przeglądarka nie uznaje za kolor, wypada z rampy; gdy wypadną wszystkie, zostaje rampa
+         * domyślna.
+         */
+        this.colors = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+        /** `wave`: kąt, pod jakim prąd przecina kadr (stopnie); 0 to poziomo w prawo. */
+        this.rotation = input(KPT_WAVE_ROTATION, { ...(ngDevMode ? { debugName: "rotation" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** `wave`: szerokość wstęgi jako ułamek wysokości kadru. */
+        this.band = input(KPT_WAVE_BAND, { ...(ngDevMode ? { debugName: "band" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** `wave`: jak mocno faluje linia środkowa. Zero zatrzymuje falowanie, nie barwy. */
+        this.amplitude = input(KPT_WAVE_AMPLITUDE, { ...(ngDevMode ? { debugName: "amplitude" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.canvas = viewChild.required('canvas', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        this.context = null;
+        this.renderer = null;
+        this.width = 0;
+        this.height = 0;
+        /**
+         * Czas animacji w sekundach. Rośnie o krok przemnożony przez `speed`, więc ruch suwaka
+         * prędkości przyspiesza obraz zamiast go przeskakiwać.
+         */
+        this.clock = 0;
+        this.last = 0;
+        this.raf = 0;
+        this.onScreen = true;
+        this.reduced = false;
+        this.ready = false;
+        /** Kolor wiodący, z którym zbudowany jest bieżący renderer — punkt odniesienia dla zmiany motywu. */
+        this.lead = '';
+        /** Ostatnio zgłoszony zestaw odrzuconych barw — żeby nie powtarzać tego samego ostrzeżenia. */
+        this.reported = '';
+        /** Tło po adaptacji. Puste znaczy „nie ma czego podmieniać" i wtedy liczy się samo `background`. */
+        this.adapted = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "adapted" }] : /* istanbul ignore next */ []));
+        /** Tło malowane na hoście: po adaptacji, jeśli jest, inaczej to, co podano. */
+        this.surface = computed(() => (this.adapted() || this.background()) || null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+        /**
+         * Ton i kolor treści dobrane do malowanego tła. Puste znaczy „sekcja nie ma własnego tła"
+         * i wtedy treść zostaje przy `--kpt-color-on-surface` ze stylu.
+         */
+        this.ink = signal({ tone: '', color: '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []));
+        this.tick = (now) => {
+            const step = this.last === 0 ? 0 : Math.min(now - this.last, KPT_BACKDROP_MAX_STEP);
+            this.last = now;
+            this.clock += (step / 1000) * this.speed();
+            this.paint();
+            this.raf = requestAnimationFrame(this.tick);
+        };
+        this.onTabSwitch = () => {
+            this.onScreen = !document.hidden;
+            this.sync();
+        };
+        this.onMotionChange = (event) => {
+            this.reduced = event.matches;
+            this.sync();
+            this.paint();
+        };
+        this.refreshColors = () => {
+            if (!this.ready)
+                return;
+            if (this.leadNow() === this.lead)
+                return;
+            this.build();
+            this.paint();
+        };
+        // Każda zmiana wejść buduje renderer od nowa — zamiast doklejać do istniejącego ścieżki
+        // „co się zmieniło". Przed pierwszym renderem wystarczy, że sygnały zostaną odczytane;
+        // sama budowa dzieje się w afterNextRender.
+        effect(() => {
+            this.effect();
+            this.color();
+            this.anchor();
+            this.cell();
+            this.gap();
+            this.density();
+            this.falloff();
+            this.colors();
+            this.rotation();
+            this.band();
+            this.amplitude();
+            this.seed();
+            // Tło nie jest wejściem renderera, ale adaptacja je przelicza — stąd odczyt obu.
+            this.adaptive();
+            this.background();
+            if (!this.ready)
+                return;
+            this.build();
+            this.paint();
+        });
+        // Prędkość i pauza nie ruszają renderera, decydują tylko o tym, czy pętla ma chodzić.
+        effect(() => {
+            this.speed();
+            this.paused();
+            if (this.ready)
+                this.sync();
+        });
+        afterNextRender(() => {
+            const canvas = this.canvas().nativeElement;
+            this.context = canvas.getContext('2d');
+            if (!this.context)
+                return;
+            this.ready = true;
+            this.watchSize(canvas);
+            this.watchVisibility();
+            this.watchMotion();
+            this.watchTheme();
+            this.measure();
+            this.build();
+            this.paint();
+            this.sync();
+        });
+        inject(DestroyRef).onDestroy(() => this.teardown());
+    }
+    /** Nowy przebieg efektu przy tym samym rozmiarze i tych samych wejściach. */
+    reseed() {
+        if (!this.ready)
+            return;
+        this.measure();
+        this.build();
+        this.paint();
+    }
+    paint() {
+        if (this.context)
+            this.renderer?.draw(this.context, this.clock);
+    }
+    build() {
+        this.renderer?.dispose();
+        const scope = this.canvas().nativeElement;
+        const adaptive = this.adaptive();
+        const { color, colors, invalid } = resolveBackdropColors(scope, this.color(), this.colors(), adaptive);
+        this.lead = color;
+        this.adapted.set(adaptive ? adaptBackdropValue(this.background(), readBackdropSurface(scope)) : '');
+        // Ton liczymy z tła, które sekcja naprawdę pomaluje — czyli już po adaptacji.
+        this.ink.set(readBackdropInk(scope, this.adapted() || this.background()));
+        this.reportInvalid(invalid);
+        this.renderer = createBackdropRenderer({
+            effect: this.effect(),
+            color,
+            colors,
+            anchor: this.anchor(),
+            cell: this.cell(),
+            gap: this.gap(),
+            density: this.density(),
+            falloff: this.falloff(),
+            rotation: this.rotation(),
+            band: this.band(),
+            amplitude: this.amplitude(),
+            seed: this.seed(),
+        });
+        this.renderer.resize(this.width, this.height);
+    }
+    /**
+     * Ostrzeżenie o przystankach rampy, których przeglądarka nie uznała za kolor.
+     *
+     * `build()` chodzi przy każdej zmianie wejść, więc ciągnięcie suwaka nad wadliwą rampą zasypałoby
+     * konsolę tym samym zdaniem — zgłaszamy dopiero zestaw inny niż poprzednio.
+     */
+    reportInvalid(invalid) {
+        const key = invalid.join(', ');
+        if (key === this.reported)
+            return;
+        this.reported = key;
+        if (key !== '' && typeof ngDevMode !== 'undefined' && ngDevMode) {
+            console.warn(`[kpt-backdrop] Pominięto barwy, których przeglądarka nie rozpoznaje: ${key}`);
+        }
+    }
+    measure() {
+        const canvas = this.canvas().nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        const dpr = Math.min(globalThis.devicePixelRatio || 1, KPT_BACKDROP_MAX_DPR);
+        this.width = Math.round(rect.width);
+        this.height = Math.round(rect.height);
+        canvas.width = Math.round(this.width * dpr);
+        canvas.height = Math.round(this.height * dpr);
+        // Zapis width/height zeruje kontekst, więc skala musi wrócić po każdym pomiarze.
+        this.context?.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    sync() {
+        const running = this.raf !== 0;
+        const should = this.ready && this.onScreen && !this.paused() && !this.reduced && this.speed() > 0;
+        if (should && !running) {
+            this.last = 0;
+            this.raf = requestAnimationFrame(this.tick);
+        }
+        else if (!should && running) {
+            cancelAnimationFrame(this.raf);
+            this.raf = 0;
+        }
+    }
+    watchSize(canvas) {
+        this.resize = new ResizeObserver(() => {
+            const rect = canvas.getBoundingClientRect();
+            if (Math.round(rect.width) === this.width && Math.round(rect.height) === this.height)
+                return;
+            this.measure();
+            // Sam rozmiar nie zmienia ustawień, więc renderer zostaje — przelicza tylko geometrię.
+            this.renderer?.resize(this.width, this.height);
+            this.paint();
+        });
+        this.resize.observe(canvas);
+    }
+    /** Sekcja poza ekranem i karta w tle to ten sam przypadek: nie ma czego oglądać. */
+    watchVisibility() {
+        this.intersect = new IntersectionObserver((entries) => {
+            this.onScreen = entries.some((entry) => entry.isIntersecting) && !document.hidden;
+            this.sync();
+        });
+        this.intersect.observe(this.host.nativeElement);
+        document.addEventListener('visibilitychange', this.onTabSwitch);
+    }
+    watchMotion() {
+        this.motion = matchMedia('(prefers-reduced-motion: reduce)');
+        this.reduced = this.motion.matches;
+        this.motion.addEventListener('change', this.onMotionChange);
+    }
+    watchTheme() {
+        this.unwatchTheme = observeBackdropTheme(this.host.nativeElement, this.refreshColors);
+    }
+    /**
+     * Zmiana motywu przestawia tokeny, a kolory renderera są już wyliczone — trzeba je odczytać
+     * na nowo. Nasłuch trafia też w zmiany niezwiązane z barwą (klasa nakładki na `<html>`, dowolne
+     * nadpisanie inline u przodka), więc renderer przebudowuje się dopiero wtedy, gdy odczyt
+     * naprawdę dał inny kolor.
+     */
+    /**
+     * Kolor wiodący liczony dokładnie tak, jak liczy go `build()` — inaczej strażnik porównywałby
+     * wartość sprzed adaptacji z zapamiętaną po adaptacji i przebudowywałby renderer bez przerwy.
+     */
+    leadNow() {
+        const scope = this.canvas().nativeElement;
+        const color = this.adaptive() ? adaptBackdropValue(this.color(), readBackdropSurface(scope)) : this.color();
+        return readBackdropLead(scope, color);
+    }
+    teardown() {
+        if (this.raf)
+            cancelAnimationFrame(this.raf);
+        this.raf = 0;
+        this.renderer?.dispose();
+        this.renderer = null;
+        this.resize?.disconnect();
+        this.intersect?.disconnect();
+        this.unwatchTheme?.();
+        this.motion?.removeEventListener('change', this.onMotionChange);
+        document.removeEventListener('visibilitychange', this.onTabSwitch);
+    }
+    static { this.ɵfac = function KptBackdrop_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBackdrop)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptBackdrop, selectors: [["kpt-backdrop"]], viewQuery: function KptBackdrop_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.canvas, _c0$s, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: [1, "kpt-backdrop-host"], hostVars: 6, hostBindings: function KptBackdrop_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-effect", ctx.effect())("data-tone", ctx.ink().tone || null);
+            i0.ɵɵstyleProp("background", ctx.surface())("color", ctx.ink().color || null);
+        } }, inputs: { effect: [1, "effect"], background: [1, "background"], speed: [1, "speed"], seed: [1, "seed"], paused: [1, "paused"], adaptive: [1, "adaptive"], color: [1, "color"], anchor: [1, "anchor"], cell: [1, "cell"], gap: [1, "gap"], density: [1, "density"], falloff: [1, "falloff"], colors: [1, "colors"], rotation: [1, "rotation"], band: [1, "band"], amplitude: [1, "amplitude"] }, ngContentSelectors: _c1$b, decls: 4, vars: 0, consts: [["canvas", ""], ["aria-hidden", "true", 1, "kpt-backdrop__canvas"], [1, "kpt-backdrop__content"]], template: function KptBackdrop_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵdomElement(0, "canvas", 1, 0);
+            i0.ɵɵdomElementStart(2, "div", 2);
+            i0.ɵɵprojection(3);
+            i0.ɵɵdomElementEnd();
+        } }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-backdrop-host{--%NS%_dot: var(--%NS%kpt-backdrop-color, var(--%NS%kpt-color-primary));position:relative;display:block;overflow:hidden;isolation:isolate;background:var(--%NS%kpt-backdrop-surface, var(--%NS%kpt-color-surface));color:var(--%NS%kpt-color-on-surface)}.kpt-backdrop__canvas{position:absolute;inset:0;z-index:0;display:block;inline-size:100%;block-size:100%;pointer-events:none}.kpt-backdrop__content{position:relative;z-index:1;block-size:100%}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBackdrop, [{
+        type: Component,
+        args: [{ selector: 'kpt-backdrop', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <canvas #canvas class="kpt-backdrop__canvas" aria-hidden="true"></canvas>
+    <div class="kpt-backdrop__content"><ng-content /></div>
+  `, host: {
+                    class: 'kpt-backdrop-host',
+                    '[attr.data-effect]': 'effect()',
+                    '[style.background]': 'surface()',
+                    '[style.color]': 'ink().color || null',
+                    '[attr.data-tone]': 'ink().tone || null',
+                }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-backdrop-host{--_dot: var(--kpt-backdrop-color, var(--kpt-color-primary));position:relative;display:block;overflow:hidden;isolation:isolate;background:var(--kpt-backdrop-surface, var(--kpt-color-surface));color:var(--kpt-color-on-surface)}.kpt-backdrop__canvas{position:absolute;inset:0;z-index:0;display:block;inline-size:100%;block-size:100%;pointer-events:none}.kpt-backdrop__content{position:relative;z-index:1;block-size:100%}}\n"] }]
+    }], () => [], { effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], seed: [{ type: i0.Input, args: [{ isSignal: true, alias: "seed", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], adaptive: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptive", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], falloff: [{ type: i0.Input, args: [{ isSignal: true, alias: "falloff", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }], band: [{ type: i0.Input, args: [{ isSignal: true, alias: "band", required: false }] }], amplitude: [{ type: i0.Input, args: [{ isSignal: true, alias: "amplitude", required: false }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBackdrop, { className: "KptBackdrop", filePath: "lib/backdrop/backdrop.component.ts", lineNumber: 82 }); })();
+
+const _c0$r = ["*"];
 function KptAlert_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵtext(1);
@@ -7169,7 +7743,7 @@ class KptAlert {
     static { this.ɵfac = function KptAlert_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAlert)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAlert, selectors: [["kpt-alert"]], hostAttrs: [1, "kpt-alert-host"], hostVars: 1, hostBindings: function KptAlert_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵdomProperty("hidden", !ctx.visible());
-        } }, inputs: { variant: [1, "variant"], title: [1, "title"], dismissible: [1, "dismissible"] }, outputs: { closed: "closed" }, ngContentSelectors: _c0$o, decls: 7, vars: 4, consts: [["role", "alert", 1, "kpt-alert"], [1, "kpt-alert__icon", 3, "name"], [1, "kpt-alert__content"], [1, "kpt-alert__title"], [1, "kpt-alert__message"], ["type", "button", 1, "kpt-alert__close"], ["type", "button", 1, "kpt-alert__close", 3, "click"], ["name", "x"]], template: function KptAlert_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { variant: [1, "variant"], title: [1, "title"], dismissible: [1, "dismissible"] }, outputs: { closed: "closed" }, ngContentSelectors: _c0$r, decls: 7, vars: 4, consts: [["role", "alert", 1, "kpt-alert"], [1, "kpt-alert__icon", 3, "name"], [1, "kpt-alert__content"], [1, "kpt-alert__title"], [1, "kpt-alert__message"], ["type", "button", 1, "kpt-alert__close"], ["type", "button", 1, "kpt-alert__close", 3, "click"], ["name", "x"]], template: function KptAlert_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "kpt-icon", 1);
@@ -7242,9 +7816,9 @@ class KptAuthProviderDef {
             }]
     }], null, { kptAuthProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptAuthProvider", required: true }] }] }); })();
 
-const _c0$n = ["heading"];
-const _c1$8 = [[["", "kptAuthBrand", ""]], [["", "kptAuthFooter", ""]], [["", "kptAuthPromo", ""]], [["", "kptAuthFields", ""]], [["", "kptAuthFields", ""]], [["", "kptAuthSso", ""]]];
-const _c2$3 = ["[kptAuthBrand]", "[kptAuthFooter]", "[kptAuthPromo]", "[kptAuthFields]", "[kptAuthFields]", "[kptAuthSso]"];
+const _c0$q = ["heading"];
+const _c1$a = [[["", "kptAuthBrand", ""]], [["", "kptAuthFooter", ""]], [["", "kptAuthPromo", ""]], [["", "kptAuthFields", ""]], [["", "kptAuthFields", ""]], [["", "kptAuthSso", ""]]];
+const _c2$4 = ["[kptAuthBrand]", "[kptAuthFooter]", "[kptAuthPromo]", "[kptAuthFields]", "[kptAuthFields]", "[kptAuthSso]"];
 const _c3$1 = () => ({ min: 8 });
 const _c4$1 = a0 => ({ provider: a0 });
 const _forTrack0$4 = ($index, $item) => $item.id;
@@ -7799,14 +8373,14 @@ class KptAuth {
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, viewQuery: function KptAuth_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.headings, _c0$n, 5);
+            i0.ɵɵviewQuerySignal(ctx.headings, _c0$q, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, hostAttrs: [1, "kpt-auth-host"], hostVars: 4, hostBindings: function KptAuth_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-layout", ctx.layout())("data-mode", ctx.mode());
             i0.ɵɵstyleProp("--%NS%kpt-anim-duration", (ctx.animated() ? ctx.animationDuration() : 0) + "ms");
-        } }, inputs: { mode: [1, "mode"], layout: [1, "layout"], providers: [1, "providers"], providerLayout: [1, "providerLayout"], showName: [1, "showName"], requireTerms: [1, "requireTerms"], showRemember: [1, "showRemember"], busy: [1, "busy"], error: [1, "error"], notice: [1, "notice"], promoTitle: [1, "promoTitle"], promoText: [1, "promoText"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, outputs: { mode: "modeChange", signIn: "signIn", signUp: "signUp", resetPassword: "resetPassword", providerSelect: "providerSelect" }, ngContentSelectors: _c2$3, decls: 25, vars: 12, consts: [["heading", ""], [1, "kpt-auth"], [1, "kpt-auth__card"], [1, "kpt-auth__form-side"], [1, "kpt-auth__inner"], [1, "kpt-auth__brand"], ["tabindex", "-1", 1, "kpt-auth__title", 3, "id"], [1, "kpt-auth__subtitle"], ["variant", "danger"], ["variant", "success"], [1, "kpt-auth__form", 3, "formRoot"], [1, "kpt-auth__footer"], [1, "kpt-auth__promo"], [1, "kpt-auth__promo-inner"], [1, "kpt-auth__promo-title"], [1, "kpt-auth__promo-text"], ["variant", "outline", 1, "kpt-auth__promo-cta"], [1, "kpt-auth__form", 3, "submit", "formRoot"], ["required", "", 3, "label", "error", "controlId"], ["type", "email", "autocomplete", "email", 3, "formField", "id", "placeholder"], ["autocomplete", "current-password", 3, "formField", "id"], [1, "kpt-auth__row"], [3, "formField", "label"], ["type", "button", 1, "kpt-auth__link", 3, "click"], ["type", "submit", "fullWidth", "", 3, "loading", "disabled"], ["required", "", 3, "label", "error", "hint", "controlId"], ["autocomplete", "new-password", "feedback", "", 3, "formField", "id"], ["autocomplete", "new-password", 3, "formField", "id"], [3, "error"], ["autocomplete", "name", 3, "formField", "id"], ["type", "button", 1, "kpt-auth__link", "kpt-auth__link--center", 3, "click"], [1, "kpt-auth__sso"], [1, "kpt-auth__switch"], ["role", "separator", 1, "kpt-auth__separator"], [1, "kpt-auth__separator-text"], [1, "kpt-auth__providers"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "button", 1, "kpt-auth__provider", 3, "disabled"], ["type", "button", 1, "kpt-auth__provider", 3, "click", "disabled"], ["alt", "", 1, "kpt-auth__provider-logo", 3, "src"], [1, "kpt-auth__provider-logo", 3, "name"], [1, "kpt-auth__provider-label"], [1, "kpt-auth__provider-desc"], ["variant", "outline", 1, "kpt-auth__promo-cta", 3, "click"]], template: function KptAuth_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c1$8);
+        } }, inputs: { mode: [1, "mode"], layout: [1, "layout"], providers: [1, "providers"], providerLayout: [1, "providerLayout"], showName: [1, "showName"], requireTerms: [1, "requireTerms"], showRemember: [1, "showRemember"], busy: [1, "busy"], error: [1, "error"], notice: [1, "notice"], promoTitle: [1, "promoTitle"], promoText: [1, "promoText"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, outputs: { mode: "modeChange", signIn: "signIn", signUp: "signUp", resetPassword: "resetPassword", providerSelect: "providerSelect" }, ngContentSelectors: _c2$4, decls: 25, vars: 12, consts: [["heading", ""], [1, "kpt-auth"], [1, "kpt-auth__card"], [1, "kpt-auth__form-side"], [1, "kpt-auth__inner"], [1, "kpt-auth__brand"], ["tabindex", "-1", 1, "kpt-auth__title", 3, "id"], [1, "kpt-auth__subtitle"], ["variant", "danger"], ["variant", "success"], [1, "kpt-auth__form", 3, "formRoot"], [1, "kpt-auth__footer"], [1, "kpt-auth__promo"], [1, "kpt-auth__promo-inner"], [1, "kpt-auth__promo-title"], [1, "kpt-auth__promo-text"], ["variant", "outline", 1, "kpt-auth__promo-cta"], [1, "kpt-auth__form", 3, "submit", "formRoot"], ["required", "", 3, "label", "error", "controlId"], ["type", "email", "autocomplete", "email", 3, "formField", "id", "placeholder"], ["autocomplete", "current-password", 3, "formField", "id"], [1, "kpt-auth__row"], [3, "formField", "label"], ["type", "button", 1, "kpt-auth__link", 3, "click"], ["type", "submit", "fullWidth", "", 3, "loading", "disabled"], ["required", "", 3, "label", "error", "hint", "controlId"], ["autocomplete", "new-password", "feedback", "", 3, "formField", "id"], ["autocomplete", "new-password", 3, "formField", "id"], [3, "error"], ["autocomplete", "name", 3, "formField", "id"], ["type", "button", 1, "kpt-auth__link", "kpt-auth__link--center", 3, "click"], [1, "kpt-auth__sso"], [1, "kpt-auth__switch"], ["role", "separator", 1, "kpt-auth__separator"], [1, "kpt-auth__separator-text"], [1, "kpt-auth__providers"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "button", 1, "kpt-auth__provider", 3, "disabled"], ["type", "button", 1, "kpt-auth__provider", 3, "click", "disabled"], ["alt", "", 1, "kpt-auth__provider-logo", 3, "src"], [1, "kpt-auth__provider-logo", 3, "name"], [1, "kpt-auth__provider-label"], [1, "kpt-auth__provider-desc"], ["variant", "outline", 1, "kpt-auth__promo-cta", 3, "click"]], template: function KptAuth_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1$a);
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5);
             i0.ɵɵprojection(5);
             i0.ɵɵelementEnd();
@@ -7887,8 +8461,8 @@ class KptAuth {
     }], null, { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], providerLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "providerLayout", required: false }] }], showName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showName", required: false }] }], requireTerms: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireTerms", required: false }] }], showRemember: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRemember", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], notice: [{ type: i0.Input, args: [{ isSignal: true, alias: "notice", required: false }] }], promoTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "promoTitle", required: false }] }], promoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "promoText", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], signIn: [{ type: i0.Output, args: ["signIn"] }], signUp: [{ type: i0.Output, args: ["signUp"] }], resetPassword: [{ type: i0.Output, args: ["resetPassword"] }], providerSelect: [{ type: i0.Output, args: ["providerSelect"] }], headings: [{ type: i0.ViewChildren, args: ['heading', { isSignal: true }] }], providerDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptAuthProviderDef), { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAuth, { className: "KptAuth", filePath: "lib/auth/auth.component.ts", lineNumber: 94 }); })();
 
-const _c0$m = [[["", "kptPanelActions", ""]], "*"];
-const _c1$7 = ["[kptPanelActions]", "*"];
+const _c0$p = [[["", "kptPanelActions", ""]], "*"];
+const _c1$9 = ["[kptPanelActions]", "*"];
 function KptPanel_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 8);
@@ -7922,8 +8496,8 @@ class KptPanel {
     static { this.ɵfac = function KptPanel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptPanel)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptPanel, selectors: [["kpt-panel"]], hostAttrs: [1, "kpt-panel-host"], hostVars: 2, hostBindings: function KptPanel_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("--%NS%kpt-anim-duration", (ctx.animated() ? ctx.animationDuration() : 0) + "ms");
-        } }, inputs: { header: [1, "header"], toggleable: [1, "toggleable"], collapsed: [1, "collapsed"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, outputs: { collapsed: "collapsedChange" }, ngContentSelectors: _c1$7, decls: 11, vars: 6, consts: [[1, "kpt-panel"], [1, "kpt-panel__header"], [1, "kpt-panel__title"], [1, "kpt-panel__actions"], ["type", "button", 1, "kpt-panel__toggle"], [1, "kpt-panel__collapse"], [1, "kpt-panel__collapse-inner"], [1, "kpt-panel__body"], ["type", "button", 1, "kpt-panel__toggle", 3, "click"], [3, "name"]], template: function KptPanel_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$m);
+        } }, inputs: { header: [1, "header"], toggleable: [1, "toggleable"], collapsed: [1, "collapsed"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, outputs: { collapsed: "collapsedChange" }, ngContentSelectors: _c1$9, decls: 11, vars: 6, consts: [[1, "kpt-panel"], [1, "kpt-panel__header"], [1, "kpt-panel__title"], [1, "kpt-panel__actions"], ["type", "button", 1, "kpt-panel__toggle"], [1, "kpt-panel__collapse"], [1, "kpt-panel__collapse-inner"], [1, "kpt-panel__body"], ["type", "button", 1, "kpt-panel__toggle", 3, "click"], [3, "name"]], template: function KptPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$p);
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
@@ -7976,7 +8550,7 @@ class KptPanel {
     }], null, { 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPanel, { className: "KptPanel", filePath: "lib/panel/panel.component.ts", lineNumber: 45 }); })();
 
-const _c0$l = ["*"];
+const _c0$o = ["*"];
 function KptFieldset_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 6);
@@ -8022,7 +8596,7 @@ class KptFieldset {
     static { this.ɵfac = function KptFieldset_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptFieldset)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFieldset, selectors: [["kpt-fieldset"]], hostAttrs: [1, "kpt-fieldset-host"], hostVars: 2, hostBindings: function KptFieldset_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("--%NS%kpt-anim-duration", (ctx.animated() ? ctx.animationDuration() : 0) + "ms");
-        } }, inputs: { legend: [1, "legend"], toggleable: [1, "toggleable"], collapsed: [1, "collapsed"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, outputs: { collapsed: "collapsedChange" }, ngContentSelectors: _c0$l, decls: 8, vars: 5, consts: [[1, "kpt-fieldset"], [1, "kpt-fieldset__legend"], ["type", "button", 1, "kpt-fieldset__toggle"], [1, "kpt-fieldset__collapse"], [1, "kpt-fieldset__collapse-inner"], [1, "kpt-fieldset__body"], ["type", "button", 1, "kpt-fieldset__toggle", 3, "click"], [3, "name"]], template: function KptFieldset_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { legend: [1, "legend"], toggleable: [1, "toggleable"], collapsed: [1, "collapsed"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, outputs: { collapsed: "collapsedChange" }, ngContentSelectors: _c0$o, decls: 8, vars: 5, consts: [[1, "kpt-fieldset"], [1, "kpt-fieldset__legend"], ["type", "button", 1, "kpt-fieldset__toggle"], [1, "kpt-fieldset__collapse"], [1, "kpt-fieldset__collapse-inner"], [1, "kpt-fieldset__body"], ["type", "button", 1, "kpt-fieldset__toggle", 3, "click"], [3, "name"]], template: function KptFieldset_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "fieldset", 0)(1, "legend", 1);
             i0.ɵɵconditionalCreate(2, KptFieldset_Conditional_2_Template, 4, 3, "button", 2)(3, KptFieldset_Conditional_3_Template, 2, 1, "span");
@@ -8070,8 +8644,8 @@ class KptFieldset {
     }], null, { 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFieldset, { className: "KptFieldset", filePath: "lib/fieldset/fieldset.component.ts", lineNumber: 45 }); })();
 
-const _c0$k = [[["", "kptSplitStart", ""]], [["", "kptSplitEnd", ""]]];
-const _c1$6 = ["[kptSplitStart]", "[kptSplitEnd]"];
+const _c0$n = [[["", "kptSplitStart", ""]], [["", "kptSplitEnd", ""]]];
+const _c1$8 = ["[kptSplitStart]", "[kptSplitEnd]"];
 /**
  * Splitter — dwa panele z przeciąganym uchwytem. Panele przez sloty `[kptSplitStart]` i `[kptSplitEnd]`.
  * `horizontal` = panele obok siebie, `vertical` = jeden pod drugim.
@@ -8124,8 +8698,8 @@ class KptSplitter {
         this.startSize.set(Math.min(100 - min, Math.max(min, Math.round(pct))));
     }
     static { this.ɵfac = function KptSplitter_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSplitter)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitter, selectors: [["kpt-splitter"]], hostAttrs: [1, "kpt-splitter-host"], inputs: { orientation: [1, "orientation"], startSize: [1, "startSize"], minSize: [1, "minSize"] }, outputs: { startSize: "startSizeChange" }, ngContentSelectors: _c1$6, decls: 6, vars: 7, consts: [[1, "kpt-splitter"], [1, "kpt-splitter__pane"], ["role", "separator", "tabindex", "0", 1, "kpt-splitter__gutter", 3, "pointerdown", "keydown"]], template: function KptSplitter_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$k);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSplitter, selectors: [["kpt-splitter"]], hostAttrs: [1, "kpt-splitter-host"], inputs: { orientation: [1, "orientation"], startSize: [1, "startSize"], minSize: [1, "minSize"] }, outputs: { startSize: "startSizeChange" }, ngContentSelectors: _c1$8, decls: 6, vars: 7, consts: [[1, "kpt-splitter"], [1, "kpt-splitter__pane"], ["role", "separator", "tabindex", "0", 1, "kpt-splitter__gutter", 3, "pointerdown", "keydown"]], template: function KptSplitter_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$n);
             i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵprojection(2);
             i0.ɵɵdomElementEnd();
@@ -8497,7 +9071,7 @@ class KptAvatarGroup {
     }], null, { avatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatars", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAvatarGroup, { className: "KptAvatarGroup", filePath: "lib/avatar-group/avatar-group.component.ts", lineNumber: 36 }); })();
 
-const _c0$j = ["*"];
+const _c0$m = ["*"];
 function KptEmpty_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "kpt-icon", 5);
@@ -8543,7 +9117,7 @@ class KptEmpty {
         ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = function KptEmpty_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptEmpty)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptEmpty, selectors: [["kpt-empty"]], hostAttrs: [1, "kpt-empty-host"], inputs: { icon: [1, "icon"], title: [1, "title"], description: [1, "description"] }, ngContentSelectors: _c0$j, decls: 6, vars: 3, consts: [[1, "kpt-empty"], [1, "kpt-empty__icon"], [1, "kpt-empty__title"], [1, "kpt-empty__desc"], [1, "kpt-empty__actions"], [3, "name"]], template: function KptEmpty_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptEmpty, selectors: [["kpt-empty"]], hostAttrs: [1, "kpt-empty-host"], inputs: { icon: [1, "icon"], title: [1, "title"], description: [1, "description"] }, ngContentSelectors: _c0$m, decls: 6, vars: 3, consts: [[1, "kpt-empty"], [1, "kpt-empty__icon"], [1, "kpt-empty__title"], [1, "kpt-empty__desc"], [1, "kpt-empty__actions"], [3, "name"]], template: function KptEmpty_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, KptEmpty_Conditional_1_Template, 2, 1, "div", 1);
@@ -8574,7 +9148,7 @@ class KptEmpty {
     }], null, { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptEmpty, { className: "KptEmpty", filePath: "lib/empty/empty.component.ts", lineNumber: 28 }); })();
 
-const _c0$i = ["*"];
+const _c0$l = ["*"];
 function KptTab_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
@@ -8597,7 +9171,7 @@ class KptTab {
             i0.ɵɵviewQuerySignal(ctx.content, TemplateRef, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, inputs: { label: [1, "label"], disabled: [1, "disabled"] }, ngContentSelectors: _c0$i, decls: 1, vars: 0, template: function KptTab_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { label: [1, "label"], disabled: [1, "disabled"] }, ngContentSelectors: _c0$l, decls: 1, vars: 0, template: function KptTab_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomTemplate(0, KptTab_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 }); }
@@ -8612,7 +9186,7 @@ class KptTab {
     }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptTab, { className: "KptTab", filePath: "lib/tabs/tab.component.ts", lineNumber: 14 }); })();
 
-const _c0$h = ["tabBtn"];
+const _c0$k = ["tabBtn"];
 function _forTrack0$3($index, $item) { /* @ts-ignore */
 return this.activeIndex(); }
 function KptTabs_For_2_Template(rf, ctx) { if (rf & 1) {
@@ -8694,7 +9268,7 @@ class KptTabs {
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, viewQuery: function KptTabs_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.tabBtns, _c0$h, 5);
+            i0.ɵɵviewQuerySignal(ctx.tabBtns, _c0$k, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, hostAttrs: [1, "kpt-tabs-host"], hostVars: 4, hostBindings: function KptTabs_HostBindings(rf, ctx) { if (rf & 1) {
@@ -8750,7 +9324,7 @@ class KptTabs {
     }], () => [], { 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptTabs, { className: "KptTabs", filePath: "lib/tabs/tabs.component.ts", lineNumber: 62 }); })();
 
-const _c0$g = ["*"];
+const _c0$j = ["*"];
 /**
  * Panel akordeonu. Umieszczaj w `kpt-accordion`. Stan `expanded` jest dwukierunkowy.
  */
@@ -8780,7 +9354,7 @@ class KptAccordionPanel {
     static { this.ɵfac = function KptAccordionPanel_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAccordionPanel)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAccordionPanel, selectors: [["kpt-accordion-panel"]], hostAttrs: [1, "kpt-accordion-panel-host"], hostVars: 2, hostBindings: function KptAccordionPanel_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵstyleProp("--%NS%kpt-anim-duration", ctx.animMs());
-        } }, inputs: { title: [1, "title"], disabled: [1, "disabled"], expanded: [1, "expanded"] }, outputs: { expanded: "expandedChange" }, ngContentSelectors: _c0$g, decls: 9, vars: 11, consts: [[1, "kpt-accordion-panel"], ["type", "button", 1, "kpt-accordion-panel__header", 3, "click", "disabled"], [1, "kpt-accordion-panel__title"], ["name", "chevron-down", 1, "kpt-accordion-panel__chevron"], [1, "kpt-accordion-panel__collapse"], [1, "kpt-accordion-panel__collapse-inner"], [1, "kpt-accordion-panel__body"]], template: function KptAccordionPanel_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { title: [1, "title"], disabled: [1, "disabled"], expanded: [1, "expanded"] }, outputs: { expanded: "expandedChange" }, ngContentSelectors: _c0$j, decls: 9, vars: 11, consts: [[1, "kpt-accordion-panel"], ["type", "button", 1, "kpt-accordion-panel__header", 3, "click", "disabled"], [1, "kpt-accordion-panel__title"], ["name", "chevron-down", 1, "kpt-accordion-panel__chevron"], [1, "kpt-accordion-panel__collapse"], [1, "kpt-accordion-panel__collapse-inner"], [1, "kpt-accordion-panel__body"]], template: function KptAccordionPanel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
             i0.ɵɵlistener("click", function KptAccordionPanel_Template_button_click_1_listener() { return ctx.toggle(); });
@@ -8838,7 +9412,7 @@ class KptAccordionPanel {
     }], null, { 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"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAccordionPanel, { className: "KptAccordionPanel", filePath: "lib/accordion/accordion-panel.component.ts", lineNumber: 52 }); })();
 
-const _c0$f = ["*"];
+const _c0$i = ["*"];
 /**
  * Akordeon — grupa rozwijanych paneli. `multi` pozwala otworzyć wiele naraz.
  *
@@ -8871,7 +9445,7 @@ class KptAccordion {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.panels, KptAccordionPanel, 4);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-accordion-host"], inputs: { multi: [1, "multi"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, ngContentSelectors: _c0$f, decls: 1, vars: 0, template: function KptAccordion_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [1, "kpt-accordion-host"], inputs: { multi: [1, "multi"], animated: [1, "animated"], animationDuration: [1, "animationDuration"] }, ngContentSelectors: _c0$i, decls: 1, vars: 0, template: function KptAccordion_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, styles: ["@layer kpt.components{.kpt-accordion-host{display:block;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);overflow:hidden}}\n"], encapsulation: 2 }); }
@@ -8961,7 +9535,7 @@ class KptBreadcrumb {
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBreadcrumb, { className: "KptBreadcrumb", filePath: "lib/breadcrumb/breadcrumb.component.ts", lineNumber: 38 }); })();
 
-const _c0$e = ["*"];
+const _c0$h = ["*"];
 function KptStep_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
@@ -8983,7 +9557,7 @@ class KptStep {
             i0.ɵɵviewQuerySignal(ctx.content, TemplateRef, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, inputs: { label: [1, "label"] }, ngContentSelectors: _c0$e, decls: 1, vars: 0, template: function KptStep_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { label: [1, "label"] }, ngContentSelectors: _c0$h, decls: 1, vars: 0, template: function KptStep_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵdomTemplate(0, KptStep_ng_template_0_Template, 1, 0, "ng-template");
         } }, encapsulation: 2 }); }
@@ -9336,9 +9910,9 @@ class KptRowDetailDef {
             }]
     }], null, null); })();
 
-const _c0$d = ["scrollEl"];
-const _c1$5 = ["theadEl"];
-const _c2$2 = ["editorHost"];
+const _c0$g = ["scrollEl"];
+const _c1$7 = ["theadEl"];
+const _c2$3 = ["editorHost"];
 const _c3 = [[["", "kptPaginatorActions", ""]]];
 const _c4 = ["[kptPaginatorActions]"];
 const _c5 = a0 => ({ $implicit: a0 });
@@ -10575,7 +11149,7 @@ class KptDataTable {
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(3);
         } }, viewQuery: function KptDataTable_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.scrollEl, _c0$d, 5)(ctx.theadEl, _c1$5, 5)(ctx.editorHost, _c2$2, 5);
+            i0.ɵɵviewQuerySignal(ctx.scrollEl, _c0$g, 5)(ctx.theadEl, _c1$7, 5)(ctx.editorHost, _c2$3, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(3);
         } }, hostAttrs: [1, "kpt-data-table"], hostVars: 2, hostBindings: function KptDataTable_HostBindings(rf, ctx) { if (rf & 2) {
@@ -10654,8 +11228,8 @@ class KptDataTable {
     }], () => [], { 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 }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], summaryValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryValues", 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"] }], hiddenFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenFields", required: false }] }, { type: i0.Output, args: ["hiddenFieldsChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], theadEl: [{ type: i0.ViewChild, args: ['theadEl', { isSignal: true }] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { isSignal: true }] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellDef), { isSignal: true }] }], cellEditDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KptCellEditDef), { isSignal: true }] }], rowDetailDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KptRowDetailDef), { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataTable, { className: "KptDataTable", filePath: "lib/data-table/data-table.component.ts", lineNumber: 164 }); })();
 
-const _c0$c = a0 => ({ $implicit: a0, level: 0 });
-const _c1$4 = (a0, a1) => ({ $implicit: a0, level: a1 });
+const _c0$f = a0 => ({ $implicit: a0, level: 0 });
+const _c1$6 = (a0, a1) => ({ $implicit: a0, level: a1 });
 function KptTree_ng_template_2_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 10);
@@ -10688,7 +11262,7 @@ function KptTree_ng_template_2_For_1_Conditional_7_Template(rf, ctx) { if (rf &
     i0.ɵɵnextContext();
     const nodeTpl_r6 = i0.ɵɵreference(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", nodeTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1$4, node_r2.children, level_r5 + 1));
+    i0.ɵɵproperty("ngTemplateOutlet", nodeTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1$6, node_r2.children, level_r5 + 1));
 } }
 function KptTree_ng_template_2_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -10777,7 +11351,7 @@ class KptTree {
         } if (rf & 2) {
             const nodeTpl_r6 = i0.ɵɵreference(3);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", nodeTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$c, ctx.nodes()));
+            i0.ɵɵproperty("ngTemplateOutlet", nodeTpl_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$f, ctx.nodes()));
         } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-tree-host{display:block}.kpt-tree,.kpt-tree ul{list-style:none;margin:0;padding:0}.kpt-tree__row{display:flex;align-items:center;gap:.35rem;padding-block:.3rem;padding-inline-end:.5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-tree__row:hover{background:var(--%NS%kpt-color-surface-variant)}.kpt-tree__row.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 14%,var(--%NS%kpt-color-surface));color:var(--%NS%kpt-color-primary)}.kpt-tree__row.is-disabled{opacity:.5;cursor:not-allowed}.kpt-tree__toggle{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;flex-shrink:0;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-tree__spacer{display:inline-block;width:1.25rem;flex-shrink:0}.kpt-tree__chevron{transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-tree__chevron.is-open{transform:rotate(90deg)}.kpt-tree__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptTree, [{
@@ -10911,8 +11485,8 @@ class KptTimeline {
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptTimeline, { className: "KptTimeline", filePath: "lib/timeline/timeline.component.ts", lineNumber: 44 }); })();
 
-const _c0$b = (a0, a1) => ({ $implicit: a0, index: a1 });
-const _c1$3 = a0 => ({ index: a0 });
+const _c0$e = (a0, a1) => ({ $implicit: a0, index: a1 });
+const _c1$5 = a0 => ({ index: a0 });
 function KptCarousel_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵelementContainer(1, 10);
@@ -10922,7 +11496,7 @@ function KptCarousel_For_4_Template(rf, ctx) { if (rf & 1) {
     const $index_r2 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.slideTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0$b, item_r1, $index_r2));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.slideTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0$e, item_r1, $index_r2));
 } }
 function KptCarousel_For_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -10933,7 +11507,7 @@ function KptCarousel_For_11_Template(rf, ctx) { if (rf & 1) {
     const ɵ$index_22_r5 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("is-active", ɵ$index_22_r5 === ctx_r2.activeIndex());
-    i0.ɵɵattribute("aria-label", ctx_r2.i18n.t("carousel.slide", i0.ɵɵpureFunction1(3, _c1$3, ɵ$index_22_r5 + 1)));
+    i0.ɵɵattribute("aria-label", ctx_r2.i18n.t("carousel.slide", i0.ɵɵpureFunction1(3, _c1$5, ɵ$index_22_r5 + 1)));
 } }
 /**
  * Karuzela slajdów. Dane przez `items`, szablon slajdu przez projekcję `<ng-template let-item>`.
@@ -11034,39 +11608,63 @@ class KptCarousel {
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], slideTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptCarousel, { className: "KptCarousel", filePath: "lib/carousel/carousel.component.ts", lineNumber: 54 }); })();
 
-const _c0$a = a0 => ({ count: a0 });
-const _c1$2 = (a0, a1) => ({ $implicit: a0, index: a1 });
-const _c2$1 = a0 => [a0];
-function KptDataView_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelementContainer(1, 11);
+const _c0$d = a0 => ({ count: a0 });
+const _c1$4 = (a0, a1) => ({ $implicit: a0, index: a1 });
+function KptDataView_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function KptDataView_Conditional_5_For_2_Template_button_click_0_listener() { const n_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.gridColumns.set(n_r2)); });
+    i0.ɵɵelement(1, "kpt-icon", 14);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    const $index_r3 = ctx.$index;
-    const ctx_r0 = i0.ɵɵnextContext();
+    const n_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("is-active", ctx_r2.gridColumns() === n_r2);
+    i0.ɵɵattribute("aria-pressed", ctx_r2.gridColumns() === n_r2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(n_r2);
+} }
+function KptDataView_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵrepeaterCreate(1, KptDataView_Conditional_5_For_2_Template, 3, 4, "button", 13, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-label", ctx_r2.i18n.t("dataView.columns"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1$2, item_r2, $index_r3));
+    i0.ɵɵrepeater(ctx_r2.gridColumnsOptions());
 } }
-function KptDataView_ForEmpty_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
+function KptDataView_For_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelementContainer(1, 15);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const $index_r5 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1$4, item_r4, $index_r5));
+} }
+function KptDataView_ForEmpty_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.i18n.t("dataView.empty"));
+    i0.ɵɵtextInterpolate(ctx_r2.i18n.t("dataView.empty"));
 } }
-function KptDataView_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kpt-paginator", 12);
-    i0.ɵɵtwoWayListener("pageIndexChange", function KptDataView_Conditional_13_Template_kpt_paginator_pageIndexChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.pageIndex, $event) || (ctx_r0.pageIndex = $event); return i0.ɵɵresetView($event); });
+function KptDataView_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kpt-paginator", 16);
+    i0.ɵɵtwoWayListener("pageIndexChange", function KptDataView_Conditional_15_Template_kpt_paginator_pageIndexChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.pageIndex, $event) || (ctx_r2.pageIndex = $event); return i0.ɵɵresetView($event); })("pageSizeChange", function KptDataView_Conditional_15_Template_kpt_paginator_pageSizeChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.pageSize, $event) || (ctx_r2.pageSize = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("length", ctx_r0.items().length);
-    i0.ɵɵtwoWayProperty("pageIndex", ctx_r0.pageIndex);
-    i0.ɵɵproperty("pageSize", ctx_r0.pageSize())("pageSizeOptions", i0.ɵɵpureFunction1(4, _c2$1, ctx_r0.pageSize()));
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("length", ctx_r2.items().length);
+    i0.ɵɵtwoWayProperty("pageIndex", ctx_r2.pageIndex)("pageSize", ctx_r2.pageSize);
+    i0.ɵɵproperty("pageSizeOptions", ctx_r2.pagerSizeOptions());
 } }
 /**
  * DataView — prezentacja listy elementów w układzie lista/siatka, z opcjonalną paginacją.
@@ -11083,15 +11681,47 @@ class KptDataView {
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.layout = model('grid', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-        this.pageSize = input(0, /* @ts-ignore */
+        /** Rozmiar strony (dwukierunkowy — select paginatora go zmienia); 0 wyłącza stronicowanie. */
+        this.pageSize = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        /** Rozmiary do wyboru w paginatorze. Pusta lista = select z jedną, bieżącą wartością. */
+        this.pageSizeOptions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Liczba kolumn siatki jako SUFIT, nie sztywna liczba; 0 = tyle, ile się zmieści.
+         * Dwukierunkowa, bo pasek gęstości w toolbarze ją zmienia.
+         */
+        this.gridColumns = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridColumns" }] : /* istanbul ignore next */ []));
+        /** Wartości w pasku gęstości. Mniej niż dwie = paska nie ma po co pokazywać. */
+        this.gridColumnsOptions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridColumnsOptions" }] : /* istanbul ignore next */ []));
+        /** Najwęższa sensowna karta — poniżej tego siatka zdejmuje kolumnę, zamiast ściskać. */
+        this.gridMinWidth = input('10rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridMinWidth" }] : /* istanbul ignore next */ []));
         this.paginated = input(true, { ...(ngDevMode ? { debugName: "paginated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.i18n = inject(KptI18n);
         this.itemTpl = contentChild.required(TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
         this.pageIndex = model(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
-        this.showPager = computed(() => this.paginated() && this.pageSize() > 0 && this.items().length > this.pageSize(), /* @ts-ignore */
+        /** Pasek gęstości ma sens tylko w siatce i tylko wtedy, gdy jest w czym wybierać. */
+        this.showColumns = computed(() => this.layout() === 'grid' && this.gridColumnsOptions().length > 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showColumns" }] : /* istanbul ignore next */ []));
+        /** Opcje selecta: własna lista albo — gdy pusta — sam bieżący rozmiar. */
+        this.pagerSizeOptions = computed(() => {
+            const options = this.pageSizeOptions();
+            return options.length ? options : [this.pageSize()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerSizeOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Pager zostaje na ekranie także wtedy, gdy wszystko mieści się na jednej stronie, o ile jest
+         * w czym wybierać. Bez tego wybranie największego rozmiaru chowa select, którym użytkownik
+         * właśnie się posłużył — i nie ma jak wrócić do mniejszego.
+         */
+        this.showPager = computed(() => this.paginated() &&
+            this.pageSize() > 0 &&
+            (this.items().length > this.pageSize() || this.pagerSizeOptions().length > 1), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showPager" }] : /* istanbul ignore next */ []));
         this.pageItems = computed(() => {
             const size = this.pageSize();
@@ -11107,39 +11737,44 @@ class KptDataView {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.itemTpl, TemplateRef, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-data-view-host"], inputs: { items: [1, "items"], layout: [1, "layout"], pageSize: [1, "pageSize"], paginated: [1, "paginated"], pageIndex: [1, "pageIndex"] }, outputs: { layout: "layoutChange", pageIndex: "pageIndexChange" }, decls: 14, vars: 12, consts: [[1, "kpt-data-view"], [1, "kpt-data-view__toolbar"], [1, "kpt-data-view__count"], [1, "kpt-data-view__switch"], ["type", "button", 3, "click"], ["name", "list"], ["name", "menu"], [1, "kpt-data-view__content"], [1, "kpt-data-view__item"], [1, "kpt-data-view__empty"], [3, "length", "pageIndex", "pageSize", "pageSizeOptions"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "pageIndexChange", "length", "pageIndex", "pageSize", "pageSizeOptions"]], template: function KptDataView_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [1, "kpt-data-view-host"], inputs: { items: [1, "items"], layout: [1, "layout"], pageSize: [1, "pageSize"], pageSizeOptions: [1, "pageSizeOptions"], gridColumns: [1, "gridColumns"], gridColumnsOptions: [1, "gridColumnsOptions"], gridMinWidth: [1, "gridMinWidth"], paginated: [1, "paginated"], pageIndex: [1, "pageIndex"] }, outputs: { layout: "layoutChange", pageSize: "pageSizeChange", gridColumns: "gridColumnsChange", pageIndex: "pageIndexChange" }, decls: 16, vars: 20, consts: [[1, "kpt-data-view"], [1, "kpt-data-view__toolbar"], [1, "kpt-data-view__count"], [1, "kpt-data-view__controls"], ["role", "group", 1, "kpt-data-view__columns"], [1, "kpt-data-view__switch"], ["type", "button", 3, "click"], ["name", "list"], ["name", "layout-grid"], [1, "kpt-data-view__content"], [1, "kpt-data-view__item"], [1, "kpt-data-view__empty"], [3, "length", "pageIndex", "pageSize", "pageSizeOptions"], ["type", "button", 3, "is-active"], ["name", "grid-dots"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "pageIndexChange", "pageSizeChange", "length", "pageIndex", "pageSize", "pageSizeOptions"]], template: function KptDataView_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 3)(5, "button", 4);
-            i0.ɵɵlistener("click", function KptDataView_Template_button_click_5_listener() { return ctx.layout.set("list"); });
-            i0.ɵɵelement(6, "kpt-icon", 5);
+            i0.ɵɵelementStart(4, "div", 3);
+            i0.ɵɵconditionalCreate(5, KptDataView_Conditional_5_Template, 3, 1, "div", 4);
+            i0.ɵɵelementStart(6, "div", 5)(7, "button", 6);
+            i0.ɵɵlistener("click", function KptDataView_Template_button_click_7_listener() { return ctx.layout.set("list"); });
+            i0.ɵɵelement(8, "kpt-icon", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "button", 4);
-            i0.ɵɵlistener("click", function KptDataView_Template_button_click_7_listener() { return ctx.layout.set("grid"); });
-            i0.ɵɵelement(8, "kpt-icon", 6);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(9, "div", 7);
-            i0.ɵɵrepeaterCreate(10, KptDataView_For_11_Template, 2, 5, "div", 8, i0.ɵɵrepeaterTrackByIndex, false, KptDataView_ForEmpty_12_Template, 2, 1, "div", 9);
+            i0.ɵɵelementStart(9, "button", 6);
+            i0.ɵɵlistener("click", function KptDataView_Template_button_click_9_listener() { return ctx.layout.set("grid"); });
+            i0.ɵɵelement(10, "kpt-icon", 8);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(11, "div", 9);
+            i0.ɵɵrepeaterCreate(12, KptDataView_For_13_Template, 2, 5, "div", 10, i0.ɵɵrepeaterTrackByIndex, false, KptDataView_ForEmpty_14_Template, 2, 1, "div", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, KptDataView_Conditional_13_Template, 1, 6, "kpt-paginator", 10);
+            i0.ɵɵconditionalCreate(15, KptDataView_Conditional_15_Template, 1, 4, "kpt-paginator", 12);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.i18n.t("dataView.count", i0.ɵɵpureFunction1(10, _c0$a, ctx.items().length)));
+            i0.ɵɵtextInterpolate(ctx.i18n.t("dataView.count", i0.ɵɵpureFunction1(18, _c0$d, ctx.items().length)));
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showColumns() ? 5 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("is-active", ctx.layout() === "list");
-            i0.ɵɵattribute("aria-label", ctx.i18n.t("dataView.list"));
+            i0.ɵɵattribute("aria-pressed", ctx.layout() === "list")("aria-label", ctx.i18n.t("dataView.list"));
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("is-active", ctx.layout() === "grid");
-            i0.ɵɵattribute("aria-label", ctx.i18n.t("dataView.grid"));
+            i0.ɵɵattribute("aria-pressed", ctx.layout() === "grid")("aria-label", ctx.i18n.t("dataView.grid"));
             i0.ɵɵadvance(2);
-            i0.ɵɵattribute("data-layout", ctx.layout());
+            i0.ɵɵstyleProp("--%NS%_min", ctx.gridMinWidth())("--%NS%_cols", ctx.gridColumns() || null);
+            i0.ɵɵattribute("data-layout", ctx.layout())("data-columns", ctx.gridColumns() ? "" : null);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.pageItems());
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.showPager() ? 13 : -1);
-        } }, dependencies: [NgTemplateOutlet, KptIcon, KptPaginator], styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-view__switch{display:inline-flex;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active{background:var(--%NS%kpt-color-primary);color:var(--%NS%kpt-color-on-primary)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__item{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--%NS%kpt-space-6, 1.5rem);text-align:center;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-view .kpt-paginator{margin-top:var(--%NS%kpt-space-3, .75rem);display:block}}\n"], encapsulation: 2 }); }
+            i0.ɵɵconditional(ctx.showPager() ? 15 : -1);
+        } }, dependencies: [NgTemplateOutlet, KptIcon, KptPaginator], styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-data-view__controls{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-view__switch,.kpt-data-view__columns{display:inline-flex;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button,.kpt-data-view__columns button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active,.kpt-data-view__columns button.is-active{background:var(--%NS%kpt-color-primary);color:var(--%NS%kpt-color-on-primary)}.kpt-data-view__columns button{gap:var(--%NS%kpt-space-1, .25rem);width:auto;padding-inline:var(--%NS%kpt-space-2, .5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500)}.kpt-data-view__content{--%NS%_gap: var(--%NS%kpt-space-3, .75rem)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;gap:var(--%NS%_gap);grid-template-columns:repeat(auto-fill,minmax(var(--%NS%_min, 10rem),1fr))}.kpt-data-view__content[data-layout=grid][data-columns]{grid-template-columns:repeat(auto-fill,minmax(max(var(--%NS%_min, 10rem),(100% - (var(--%NS%_cols) - 1) * var(--%NS%_gap)) / var(--%NS%_cols)),1fr))}.kpt-data-view__item{border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--%NS%kpt-space-6, 1.5rem);text-align:center;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-data-view .kpt-paginator{margin-top:var(--%NS%kpt-space-3, .75rem);flex-wrap:wrap}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDataView, [{
         type: Component,
@@ -11147,13 +11782,28 @@ class KptDataView {
     <div class="kpt-data-view">
       <div class="kpt-data-view__toolbar">
         <div class="kpt-data-view__count">{{ i18n.t('dataView.count', { count: items().length }) }}</div>
-        <div class="kpt-data-view__switch">
-          <button type="button" [class.is-active]="layout() === 'list'" (click)="layout.set('list')" [attr.aria-label]="i18n.t('dataView.list')"><kpt-icon name="list" /></button>
-          <button type="button" [class.is-active]="layout() === 'grid'" (click)="layout.set('grid')" [attr.aria-label]="i18n.t('dataView.grid')"><kpt-icon name="menu" /></button>
+        <div class="kpt-data-view__controls">
+          @if (showColumns()) {
+            <div class="kpt-data-view__columns" role="group" [attr.aria-label]="i18n.t('dataView.columns')">
+              @for (n of gridColumnsOptions(); track n) {
+                <button type="button" [class.is-active]="gridColumns() === n" [attr.aria-pressed]="gridColumns() === n" (click)="gridColumns.set(n)"><kpt-icon name="grid-dots" />{{ n }}</button>
+              }
+            </div>
+          }
+          <div class="kpt-data-view__switch">
+            <button type="button" [class.is-active]="layout() === 'list'" [attr.aria-pressed]="layout() === 'list'" (click)="layout.set('list')" [attr.aria-label]="i18n.t('dataView.list')"><kpt-icon name="list" /></button>
+            <button type="button" [class.is-active]="layout() === 'grid'" [attr.aria-pressed]="layout() === 'grid'" (click)="layout.set('grid')" [attr.aria-label]="i18n.t('dataView.grid')"><kpt-icon name="layout-grid" /></button>
+          </div>
         </div>
       </div>
 
-      <div class="kpt-data-view__content" [attr.data-layout]="layout()">
+      <div
+        class="kpt-data-view__content"
+        [attr.data-layout]="layout()"
+        [attr.data-columns]="gridColumns() ? '' : null"
+        [style.--_min]="gridMinWidth()"
+        [style.--_cols]="gridColumns() || null"
+      >
         @for (item of pageItems(); track $index) {
           <div class="kpt-data-view__item">
             <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" />
@@ -11164,46 +11814,59 @@ class KptDataView {
       </div>
 
       @if (showPager()) {
-        <kpt-paginator [length]="items().length" [(pageIndex)]="pageIndex" [pageSize]="pageSize()" [pageSizeOptions]="[pageSize()]" />
+        <kpt-paginator [length]="items().length" [(pageIndex)]="pageIndex" [(pageSize)]="pageSize" [pageSizeOptions]="pagerSizeOptions()" />
       }
     </div>
-  `, host: { class: 'kpt-data-view-host' }, styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-view__switch{display:inline-flex;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active{background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--kpt-space-3, .75rem)}.kpt-data-view__item{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--kpt-space-6, 1.5rem);text-align:center;color:var(--kpt-color-on-surface-muted)}.kpt-data-view .kpt-paginator{margin-top:var(--kpt-space-3, .75rem);display:block}}\n"] }]
-    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataView, { className: "KptDataView", filePath: "lib/data-view/data-view.component.ts", lineNumber: 49 }); })();
+  `, host: { class: 'kpt-data-view-host' }, styles: ["@layer kpt.components{.kpt-data-view-host{display:block}.kpt-data-view__toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-3, .75rem)}.kpt-data-view__count{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-data-view__controls{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem)}.kpt-data-view__switch,.kpt-data-view__columns{display:inline-flex;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-data-view__switch button,.kpt-data-view__columns button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface-muted);cursor:pointer}.kpt-data-view__switch button.is-active,.kpt-data-view__columns button.is-active{background:var(--kpt-color-primary);color:var(--kpt-color-on-primary)}.kpt-data-view__columns button{gap:var(--kpt-space-1, .25rem);width:auto;padding-inline:var(--kpt-space-2, .5rem);font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-data-view__content{--_gap: var(--kpt-space-3, .75rem)}.kpt-data-view__content[data-layout=list]{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-data-view__content[data-layout=grid]{display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fill,minmax(var(--_min, 10rem),1fr))}.kpt-data-view__content[data-layout=grid][data-columns]{grid-template-columns:repeat(auto-fill,minmax(max(var(--_min, 10rem),(100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols)),1fr))}.kpt-data-view__item{border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised)}.kpt-data-view__empty{padding:var(--kpt-space-6, 1.5rem);text-align:center;color:var(--kpt-color-on-surface-muted)}.kpt-data-view .kpt-paginator{margin-top:var(--kpt-space-3, .75rem);flex-wrap:wrap}}\n"] }]
+    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], gridColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumns", required: false }] }, { type: i0.Output, args: ["gridColumnsChange"] }], gridColumnsOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumnsOptions", required: false }] }], gridMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridMinWidth", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDataView, { className: "KptDataView", filePath: "lib/data-view/data-view.component.ts", lineNumber: 64 }); })();
 
-const _c0$9 = a0 => ({ $implicit: a0 });
-function KptPickList_For_6_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 9);
-    i0.ɵɵlistener("click", function KptPickList_For_6_Template_li_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggle("source", item_r2)); });
-    i0.ɵɵelementContainer(1, 10);
+const _c0$c = () => ({ side: "source" });
+const _c1$3 = () => ({ side: "target" });
+const _c2$2 = a0 => ({ $implicit: a0 });
+function KptPickList_ng_template_14_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 11);
+    i0.ɵɵlistener("click", function KptPickList_ng_template_14_For_5_Template_li_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const side_r2 = i0.ɵɵnextContext().side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggle(side_r2, item_r5)); })("dblclick", function KptPickList_ng_template_14_For_5_Template_li_dblclick_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const side_r2 = i0.ɵɵnextContext().side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.moveOne(side_r2, item_r5)); })("dragstart", function KptPickList_ng_template_14_For_5_Template_li_dragstart_0_listener($event) { const ɵ$index_38_r6 = i0.ɵɵrestoreView(_r4).$index; const side_r2 = i0.ɵɵnextContext().side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragStart(side_r2, ɵ$index_38_r6, $event)); })("dragover", function KptPickList_ng_template_14_For_5_Template_li_dragover_0_listener($event) { const ɵ$index_38_r6 = i0.ɵɵrestoreView(_r4).$index; const side_r2 = i0.ɵɵnextContext().side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDragOver(side_r2, ɵ$index_38_r6, $event)); })("dragleave", function KptPickList_ng_template_14_For_5_Template_li_dragleave_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.over.set(null)); })("drop", function KptPickList_ng_template_14_For_5_Template_li_drop_0_listener($event) { const ɵ$index_38_r6 = i0.ɵɵrestoreView(_r4).$index; const side_r2 = i0.ɵɵnextContext().side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDrop(side_r2, ɵ$index_38_r6, $event)); })("dragend", function KptPickList_ng_template_14_For_5_Template_li_dragend_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clearDrag()); });
+    i0.ɵɵelementContainer(1, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
+    const item_r5 = ctx.$implicit;
+    const ɵ$index_38_r6 = ctx.$index;
+    const side_r2 = i0.ɵɵnextContext().side;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-selected", ctx_r2.selSource().has(item_r2));
+    i0.ɵɵclassProp("is-selected", ctx_r2.selectionOf(side_r2).has(item_r5))("is-dragging", ctx_r2.isDragging(side_r2, ɵ$index_38_r6))("kpt-pick-list__item--draggable", ctx_r2.dragdrop())("kpt-pick-list__item--dragover", ctx_r2.isOver(side_r2, ɵ$index_38_r6));
+    i0.ɵɵattribute("draggable", ctx_r2.dragdrop() ? true : null);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(4, _c0$9, item_r2));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(11, _c2$2, item_r5));
 } }
-function KptPickList_For_23_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 9);
-    i0.ɵɵlistener("click", function KptPickList_For_23_Template_li_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggle("target", item_r5)); });
-    i0.ɵɵelementContainer(1, 10);
+function KptPickList_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "ul", 9);
+    i0.ɵɵlistener("dragover", function KptPickList_ng_template_14_Template_ul_dragover_3_listener($event) { const side_r2 = i0.ɵɵrestoreView(_r1).side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onListDragOver(side_r2, $event)); })("dragleave", function KptPickList_ng_template_14_Template_ul_dragleave_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.listOver.set(null)); })("drop", function KptPickList_ng_template_14_Template_ul_drop_3_listener($event) { const side_r2 = i0.ɵɵrestoreView(_r1).side; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onListDrop(side_r2, $event)); });
+    i0.ɵɵrepeaterCreate(4, KptPickList_ng_template_14_For_5_Template, 2, 13, "li", 10, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r5 = ctx.$implicit;
+    const side_r2 = ctx.side;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-selected", ctx_r2.selTarget().has(item_r5));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.headerOf(side_r2));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("is-dragover", ctx_r2.listOver() === side_r2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction1(4, _c0$9, item_r5));
+    i0.ɵɵrepeater(ctx_r2.listOf(side_r2));
 } }
 /**
  * PickList — transfer elementów między dwiema listami (źródło ↔ cel).
  * Szablon elementu przez projekcję `<ng-template let-item>`.
+ * Dwuklik przerzuca pojedynczy element na drugą stronę; z `dragdrop` dochodzi przeciąganie
+ * (porządkowanie wewnątrz panelu i przenoszenie na konkretną pozycję drugiego panelu).
  *
  * @example
- * <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Dostępne" targetHeader="Wybrane">
+ * <kpt-pick-list [(source)]="available" [(target)]="selected" sourceHeader="Dostępne" targetHeader="Wybrane" dragdrop>
  *   <ng-template let-item>{{ item.name }}</ng-template>
  * </kpt-pick-list>
  */
@@ -11219,6 +11882,8 @@ class KptPickList {
         /** Nagłówek listy docelowej; bez wartości używa i18n (`pickList.selected`). */
         this.targetHeader = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "targetHeader" }] : /* istanbul ignore next */ []));
+        /** Umożliwia porządkowanie i przenoszenie elementów metodą przeciągnij-i-upuść. */
+        this.dragdrop = input(false, { ...(ngDevMode ? { debugName: "dragdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.itemTpl = contentChild.required(TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
         this.i18n = inject(KptI18n);
@@ -11230,9 +11895,44 @@ class KptPickList {
         ...(ngDevMode ? [{ debugName: "selSource" }] : /* istanbul ignore next */ []));
         this.selTarget = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selTarget" }] : /* istanbul ignore next */ []));
+        /** Przeciągany element — strona i pozycja w jej tablicy. */
+        this.drag = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+        /** Element pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+        this.over = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "over" }] : /* istanbul ignore next */ []));
+        /** Panel, nad którego pustym obszarem jest kursor — upuszczenie tam dopina na koniec. */
+        this.listOver = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listOver" }] : /* istanbul ignore next */ []));
+    }
+    listOf(side) {
+        return side === 'source' ? this.source() : this.target();
+    }
+    selectionOf(side) {
+        return side === 'source' ? this.selSource() : this.selTarget();
+    }
+    headerOf(side) {
+        return side === 'source' ? this.effectiveSourceHeader() : this.effectiveTargetHeader();
+    }
+    isDragging(side, index) {
+        const d = this.drag();
+        return d !== null && d.side === side && d.index === index;
+    }
+    isOver(side, index) {
+        const o = this.over();
+        return o !== null && o.side === side && o.index === index && !this.isDragging(side, index);
+    }
+    modelOf(side) {
+        return side === 'source' ? this.source : this.target;
+    }
+    selectionSignal(side) {
+        return side === 'source' ? this.selSource : this.selTarget;
+    }
+    other(side) {
+        return side === 'source' ? 'target' : 'source';
     }
     toggle(side, item) {
-        const sig = side === 'source' ? this.selSource : this.selTarget;
+        const sig = this.selectionSignal(side);
         const next = new Set(sig());
         if (next.has(item))
             next.delete(item);
@@ -11241,9 +11941,9 @@ class KptPickList {
         sig.set(next);
     }
     move(from, all) {
-        const fromModel = from === 'source' ? this.source : this.target;
-        const toModel = from === 'source' ? this.target : this.source;
-        const sel = from === 'source' ? this.selSource : this.selTarget;
+        const fromModel = this.modelOf(from);
+        const toModel = this.modelOf(this.other(from));
+        const sel = this.selectionSignal(from);
         const moving = all ? fromModel() : fromModel().filter((i) => sel().has(i));
         if (!moving.length)
             return;
@@ -11251,46 +11951,128 @@ class KptPickList {
         toModel.set([...toModel(), ...moving]);
         sel.set(new Set());
     }
+    /** Dwuklik: przenosi wyłącznie klikniętą pozycję, niezależnie od zaznaczenia. */
+    moveOne(from, item) {
+        const index = this.listOf(from).indexOf(item);
+        if (index === -1)
+            return;
+        const to = this.other(from);
+        this.transfer(from, index, to, this.listOf(to).length);
+    }
+    onDragStart(side, index, event) {
+        if (!this.dragdrop())
+            return;
+        this.drag.set({ side, index });
+        event.dataTransfer?.setData('text/plain', String(index));
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    onDragOver(side, index, event) {
+        if (this.drag() === null)
+            return;
+        // Zatrzymujemy propagację, żeby `<ul>` nie uznał, że kursor jest nad pustym obszarem.
+        event.preventDefault();
+        event.stopPropagation();
+        this.over.set({ side, index });
+        this.listOver.set(null);
+    }
+    onDrop(side, index, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const from = this.drag();
+        this.clearDrag();
+        if (from === null)
+            return;
+        if (from.side !== side) {
+            this.transfer(from.side, from.index, side, index);
+            return;
+        }
+        if (from.index === index)
+            return;
+        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // na który go upuszczono (ten sam wzór co przestawianie kolumn w kpt-data-table).
+        const arr = [...this.listOf(side)];
+        const [moved] = arr.splice(from.index, 1);
+        arr.splice(index, 0, moved);
+        this.modelOf(side).set(arr);
+    }
+    onListDragOver(side, event) {
+        if (this.drag() === null)
+            return;
+        event.preventDefault();
+        this.listOver.set(side);
+        this.over.set(null);
+    }
+    onListDrop(side, event) {
+        event.preventDefault();
+        const from = this.drag();
+        this.clearDrag();
+        if (from === null)
+            return;
+        if (from.side !== side) {
+            this.transfer(from.side, from.index, side, this.listOf(side).length);
+            return;
+        }
+        const arr = [...this.listOf(side)];
+        const [moved] = arr.splice(from.index, 1);
+        arr.push(moved);
+        this.modelOf(side).set(arr);
+    }
+    clearDrag() {
+        this.drag.set(null);
+        this.over.set(null);
+        this.listOver.set(null);
+    }
+    /** Przenosi jeden element między panelami, wstawiając go pod wskazanym indeksem. */
+    transfer(fromSide, fromIndex, toSide, toIndex) {
+        const fromArr = [...this.listOf(fromSide)];
+        const [moved] = fromArr.splice(fromIndex, 1);
+        if (moved === undefined)
+            return;
+        const toArr = [...this.listOf(toSide)];
+        toArr.splice(toIndex, 0, moved);
+        this.modelOf(fromSide).set(fromArr);
+        this.modelOf(toSide).set(toArr);
+        // Element opuszcza panel — jego zaznaczenie po tamtej stronie przestaje cokolwiek znaczyć.
+        const sel = this.selectionSignal(fromSide);
+        if (sel().has(moved)) {
+            const next = new Set(sel());
+            next.delete(moved);
+            sel.set(next);
+        }
+    }
     static { this.ɵfac = function KptPickList_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptPickList)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptPickList, selectors: [["kpt-pick-list"]], contentQueries: function KptPickList_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.itemTpl, TemplateRef, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-pick-list-host"], inputs: { source: [1, "source"], target: [1, "target"], sourceHeader: [1, "sourceHeader"], targetHeader: [1, "targetHeader"] }, outputs: { source: "sourceChange", target: "targetChange" }, decls: 24, vars: 6, consts: [[1, "kpt-pick-list"], [1, "kpt-pick-list__col"], [1, "kpt-pick-list__header"], [1, "kpt-pick-list__items"], [1, "kpt-pick-list__item", 3, "is-selected"], [1, "kpt-pick-list__controls"], ["type", "button", 3, "click"], ["name", "chevron-right"], ["name", "chevron-left"], [1, "kpt-pick-list__item", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function KptPickList_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵtext(3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "ul", 3);
-            i0.ɵɵrepeaterCreate(5, KptPickList_For_6_Template, 2, 6, "li", 4, i0.ɵɵrepeaterTrackByIndex);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "div", 5)(8, "button", 6);
-            i0.ɵɵlistener("click", function KptPickList_Template_button_click_8_listener() { return ctx.move("source", true); });
-            i0.ɵɵelement(9, "kpt-icon", 7)(10, "kpt-icon", 7);
+        } }, hostAttrs: [1, "kpt-pick-list-host"], inputs: { source: [1, "source"], target: [1, "target"], sourceHeader: [1, "sourceHeader"], targetHeader: [1, "targetHeader"], dragdrop: [1, "dragdrop"] }, outputs: { source: "sourceChange", target: "targetChange" }, decls: 16, vars: 10, consts: [["col", ""], [1, "kpt-pick-list"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "kpt-pick-list__controls"], ["type", "button", 3, "click"], ["name", "chevron-right"], ["name", "chevron-left"], [1, "kpt-pick-list__col"], [1, "kpt-pick-list__header"], [1, "kpt-pick-list__items", 3, "dragover", "dragleave", "drop"], [1, "kpt-pick-list__item", 3, "is-selected", "is-dragging", "kpt-pick-list__item--draggable", "kpt-pick-list__item--dragover"], [1, "kpt-pick-list__item", 3, "click", "dblclick", "dragstart", "dragover", "dragleave", "drop", "dragend"]], template: function KptPickList_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵelementContainer(1, 2);
+            i0.ɵɵelementStart(2, "div", 3)(3, "button", 4);
+            i0.ɵɵlistener("click", function KptPickList_Template_button_click_3_listener() { return ctx.move("source", true); });
+            i0.ɵɵelement(4, "kpt-icon", 5)(5, "kpt-icon", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "button", 6);
-            i0.ɵɵlistener("click", function KptPickList_Template_button_click_11_listener() { return ctx.move("source", false); });
-            i0.ɵɵelement(12, "kpt-icon", 7);
+            i0.ɵɵelementStart(6, "button", 4);
+            i0.ɵɵlistener("click", function KptPickList_Template_button_click_6_listener() { return ctx.move("source", false); });
+            i0.ɵɵelement(7, "kpt-icon", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "button", 6);
-            i0.ɵɵlistener("click", function KptPickList_Template_button_click_13_listener() { return ctx.move("target", false); });
-            i0.ɵɵelement(14, "kpt-icon", 8);
+            i0.ɵɵelementStart(8, "button", 4);
+            i0.ɵɵlistener("click", function KptPickList_Template_button_click_8_listener() { return ctx.move("target", false); });
+            i0.ɵɵelement(9, "kpt-icon", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "button", 6);
-            i0.ɵɵlistener("click", function KptPickList_Template_button_click_15_listener() { return ctx.move("target", true); });
-            i0.ɵɵelement(16, "kpt-icon", 8)(17, "kpt-icon", 8);
+            i0.ɵɵelementStart(10, "button", 4);
+            i0.ɵɵlistener("click", function KptPickList_Template_button_click_10_listener() { return ctx.move("target", true); });
+            i0.ɵɵelement(11, "kpt-icon", 6)(12, "kpt-icon", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(18, "div", 1)(19, "div", 2);
-            i0.ɵɵtext(20);
+            i0.ɵɵelementContainer(13, 2);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "ul", 3);
-            i0.ɵɵrepeaterCreate(22, KptPickList_For_23_Template, 2, 6, "li", 4, i0.ɵɵrepeaterTrackByIndex);
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(14, KptPickList_ng_template_14_Template, 6, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.effectiveSourceHeader());
+            const col_r7 = i0.ɵɵreference(15);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngTemplateOutlet", col_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction0(8, _c0$c));
             i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.source());
-            i0.ɵɵadvance(3);
             i0.ɵɵattribute("aria-label", ctx.i18n.t("pickList.moveAllRight"));
             i0.ɵɵadvance(3);
             i0.ɵɵattribute("aria-label", ctx.i18n.t("pickList.moveRight"));
@@ -11298,26 +12080,15 @@ class KptPickList {
             i0.ɵɵattribute("aria-label", ctx.i18n.t("pickList.moveLeft"));
             i0.ɵɵadvance(2);
             i0.ɵɵattribute("aria-label", ctx.i18n.t("pickList.moveAllLeft"));
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.effectiveTargetHeader());
-            i0.ɵɵadvance(2);
-            i0.ɵɵrepeater(ctx.target());
-        } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-variant);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--%NS%kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__item{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 16%,transparent);color:var(--%NS%kpt-color-primary)}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__controls button .kpt-icon-host+.kpt-icon-host{margin-left:-.5rem}}\n"], encapsulation: 2 }); }
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngTemplateOutlet", col_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction0(9, _c1$3));
+        } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-variant);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--%NS%kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__items.is-dragover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__item{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 16%,transparent);color:var(--%NS%kpt-color-primary)}.kpt-pick-list__item--draggable{cursor:grab;-webkit-user-select:none;user-select:none}.kpt-pick-list__item--%NS%draggable:active{cursor:grabbing}.kpt-pick-list__item--dragover{box-shadow:inset 0 2px 0 0 var(--%NS%kpt-color-primary)}.kpt-pick-list__item.is-dragging{opacity:.5}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--%NS%kpt-color-muted)}.kpt-pick-list__controls button .kpt-icon-host+.kpt-icon-host{margin-left:-.5rem}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptPickList, [{
         type: Component,
         args: [{ selector: 'kpt-pick-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptIcon], template: `
     <div class="kpt-pick-list">
-      <div class="kpt-pick-list__col">
-        <div class="kpt-pick-list__header">{{ effectiveSourceHeader() }}</div>
-        <ul class="kpt-pick-list__items">
-          @for (item of source(); track $index) {
-            <li class="kpt-pick-list__item" [class.is-selected]="selSource().has(item)" (click)="toggle('source', item)">
-              <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item }" />
-            </li>
-          }
-        </ul>
-      </div>
+      <ng-container [ngTemplateOutlet]="col" [ngTemplateOutletContext]="{ side: 'source' }" />
 
       <div class="kpt-pick-list__controls">
         <button type="button" (click)="move('source', true)" [attr.aria-label]="i18n.t('pickList.moveAllRight')"><kpt-icon name="chevron-right" /><kpt-icon name="chevron-right" /></button>
@@ -11326,22 +12097,46 @@ class KptPickList {
         <button type="button" (click)="move('target', true)" [attr.aria-label]="i18n.t('pickList.moveAllLeft')"><kpt-icon name="chevron-left" /><kpt-icon name="chevron-left" /></button>
       </div>
 
+      <ng-container [ngTemplateOutlet]="col" [ngTemplateOutletContext]="{ side: 'target' }" />
+    </div>
+
+    <ng-template #col let-side="side">
       <div class="kpt-pick-list__col">
-        <div class="kpt-pick-list__header">{{ effectiveTargetHeader() }}</div>
-        <ul class="kpt-pick-list__items">
-          @for (item of target(); track $index) {
-            <li class="kpt-pick-list__item" [class.is-selected]="selTarget().has(item)" (click)="toggle('target', item)">
+        <div class="kpt-pick-list__header">{{ headerOf(side) }}</div>
+        <ul
+          class="kpt-pick-list__items"
+          [class.is-dragover]="listOver() === side"
+          (dragover)="onListDragOver(side, $event)"
+          (dragleave)="listOver.set(null)"
+          (drop)="onListDrop(side, $event)"
+        >
+          @for (item of listOf(side); track $index; let i = $index) {
+            <li
+              class="kpt-pick-list__item"
+              [class.is-selected]="selectionOf(side).has(item)"
+              [class.is-dragging]="isDragging(side, i)"
+              [class.kpt-pick-list__item--draggable]="dragdrop()"
+              [class.kpt-pick-list__item--dragover]="isOver(side, i)"
+              [attr.draggable]="dragdrop() ? true : null"
+              (click)="toggle(side, item)"
+              (dblclick)="moveOne(side, item)"
+              (dragstart)="onDragStart(side, i, $event)"
+              (dragover)="onDragOver(side, i, $event)"
+              (dragleave)="over.set(null)"
+              (drop)="onDrop(side, i, $event)"
+              (dragend)="clearDrag()"
+            >
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item }" />
             </li>
           }
         </ul>
       </div>
-    </div>
-  `, host: { class: 'kpt-pick-list-host' }, styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);font-weight:var(--kpt-font-weight-semibold, 600);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__item{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--kpt-color-primary) 16%,transparent);color:var(--kpt-color-primary)}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;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);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--kpt-color-muted)}.kpt-pick-list__controls button .kpt-icon-host+.kpt-icon-host{margin-left:-.5rem}}\n"] }]
-    }], null, { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPickList, { className: "KptPickList", filePath: "lib/pick-list/pick-list.component.ts", lineNumber: 55 }); })();
+    </ng-template>
+  `, host: { class: 'kpt-pick-list-host' }, styles: ["@layer kpt.components{.kpt-pick-list-host{display:block}.kpt-pick-list{display:flex;align-items:stretch;gap:var(--kpt-space-3, .75rem)}.kpt-pick-list__col{flex:1;min-width:0;display:flex;flex-direction:column;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-pick-list__header{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);font-weight:var(--kpt-font-weight-semibold, 600);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-pick-list__items{list-style:none;margin:0;padding:var(--kpt-space-1, .25rem);min-height:8rem;max-height:14rem;overflow-y:auto;flex:1}.kpt-pick-list__items.is-dragover{background:var(--kpt-color-muted)}.kpt-pick-list__item{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-pick-list__item:hover{background:var(--kpt-color-muted)}.kpt-pick-list__item.is-selected{background:color-mix(in oklch,var(--kpt-color-primary) 16%,transparent);color:var(--kpt-color-primary)}.kpt-pick-list__item--draggable{cursor:grab;-webkit-user-select:none;user-select:none}.kpt-pick-list__item--draggable:active{cursor:grabbing}.kpt-pick-list__item--dragover{box-shadow:inset 0 2px 0 0 var(--kpt-color-primary)}.kpt-pick-list__item.is-dragging{opacity:.5}.kpt-pick-list__controls{display:flex;flex-direction:column;justify-content:center;gap:var(--kpt-space-2, .5rem)}.kpt-pick-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;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);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-pick-list__controls button:hover{background:var(--kpt-color-muted)}.kpt-pick-list__controls button .kpt-icon-host+.kpt-icon-host{margin-left:-.5rem}}\n"] }]
+    }], null, { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }, { type: i0.Output, args: ["sourceChange"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }, { type: i0.Output, args: ["targetChange"] }], sourceHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceHeader", required: false }] }], targetHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetHeader", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPickList, { className: "KptPickList", filePath: "lib/pick-list/pick-list.component.ts", lineNumber: 75 }); })();
 
-const _c0$8 = (a0, a1) => ({ $implicit: a0, index: a1 });
+const _c0$b = (a0, a1) => ({ $implicit: a0, index: a1 });
 function KptOrderList_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
@@ -11354,23 +12149,25 @@ function KptOrderList_Conditional_7_Template(rf, ctx) { if (rf & 1) {
 function KptOrderList_For_10_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 9);
-    i0.ɵɵlistener("click", function KptOrderList_For_10_Template_li_click_0_listener() { const ɵ$index_21_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selected.set(ɵ$index_21_r3)); });
+    i0.ɵɵlistener("click", function KptOrderList_For_10_Template_li_click_0_listener() { const ɵ$index_21_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selected.set(ɵ$index_21_r3)); })("dragstart", function KptOrderList_For_10_Template_li_dragstart_0_listener($event) { const ɵ$index_21_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDragStart(ɵ$index_21_r3, $event)); })("dragover", function KptOrderList_For_10_Template_li_dragover_0_listener($event) { const ɵ$index_21_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDragOver(ɵ$index_21_r3, $event)); })("dragleave", function KptOrderList_For_10_Template_li_dragleave_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.overIndex.set(null)); })("drop", function KptOrderList_For_10_Template_li_drop_0_listener($event) { const ɵ$index_21_r3 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDrop(ɵ$index_21_r3, $event)); })("dragend", function KptOrderList_For_10_Template_li_dragend_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.clearDrag()); });
     i0.ɵɵelementContainer(1, 10);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
     const ɵ$index_21_r3 = ctx.$index;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("is-selected", ctx_r0.selected() === ɵ$index_21_r3);
+    i0.ɵɵclassProp("is-selected", ctx_r0.selected() === ɵ$index_21_r3)("is-dragging", ctx_r0.dragIndex() === ɵ$index_21_r3)("kpt-order-list__item--draggable", ctx_r0.dragdrop())("kpt-order-list__item--dragover", ctx_r0.overIndex() === ɵ$index_21_r3 && ctx_r0.dragIndex() !== ɵ$index_21_r3);
+    i0.ɵɵattribute("draggable", ctx_r0.dragdrop() ? true : null);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction2(4, _c0$8, item_r4, ɵ$index_21_r3));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.itemTpl())("ngTemplateOutletContext", i0.ɵɵpureFunction2(11, _c0$b, item_r4, ɵ$index_21_r3));
 } }
 /**
  * OrderList — lista z ręcznym porządkowaniem elementów (w górę/dół).
  * Szablon elementu przez projekcję `<ng-template let-item>`.
+ * Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * @example
- * <kpt-order-list [(items)]="tasks" header="Kolejność">
+ * <kpt-order-list [(items)]="tasks" header="Kolejność" dragdrop>
  *   <ng-template let-item>{{ item.name }}</ng-template>
  * </kpt-order-list>
  */
@@ -11380,11 +12177,22 @@ class KptOrderList {
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.header = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        /** Umożliwia przestawianie pozycji metodą przeciągnij-i-upuść. */
+        this.dragdrop = input(false, { ...(ngDevMode ? { debugName: "dragdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.i18n = inject(KptI18n);
         this.itemTpl = contentChild.required(TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
         this.selected = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** Indeks przeciąganej pozycji; `null` gdy nic nie jest przeciągane. */
+        this.dragIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []));
+        /** Indeks pozycji pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+        this.overIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overIndex" }] : /* istanbul ignore next */ []));
+        /** Kursor nad pustym obszarem listy — upuszczenie tam dopina na koniec. */
+        this.listOver = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listOver" }] : /* istanbul ignore next */ []));
     }
     moveSelected(dir) {
         const i = this.selected();
@@ -11398,12 +12206,68 @@ class KptOrderList {
         this.items.set(arr);
         this.selected.set(j);
     }
+    onDragStart(index, event) {
+        if (!this.dragdrop())
+            return;
+        this.dragIndex.set(index);
+        event.dataTransfer?.setData('text/plain', String(index));
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    }
+    onDragOver(index, event) {
+        if (this.dragIndex() === null)
+            return;
+        // Zatrzymujemy propagację, żeby `<ul>` nie uznał, że kursor jest nad pustym obszarem.
+        event.preventDefault();
+        event.stopPropagation();
+        this.overIndex.set(index);
+        this.listOver.set(false);
+    }
+    onDrop(index, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const from = this.dragIndex();
+        this.clearDrag();
+        if (from === null || from === index)
+            return;
+        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // na który go upuszczono (ten sam wzór co przestawianie kolumn w kpt-data-table).
+        const arr = [...this.items()];
+        const [moved] = arr.splice(from, 1);
+        arr.splice(index, 0, moved);
+        this.items.set(arr);
+        this.selected.set(index);
+    }
+    onListDragOver(event) {
+        if (this.dragIndex() === null)
+            return;
+        event.preventDefault();
+        this.listOver.set(true);
+        this.overIndex.set(null);
+    }
+    onListDrop(event) {
+        event.preventDefault();
+        const from = this.dragIndex();
+        this.clearDrag();
+        if (from === null)
+            return;
+        const arr = [...this.items()];
+        const [moved] = arr.splice(from, 1);
+        arr.push(moved);
+        this.items.set(arr);
+        this.selected.set(arr.length - 1);
+    }
+    clearDrag() {
+        this.dragIndex.set(null);
+        this.overIndex.set(null);
+        this.listOver.set(false);
+    }
     static { this.ɵfac = function KptOrderList_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptOrderList)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptOrderList, selectors: [["kpt-order-list"]], contentQueries: function KptOrderList_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.itemTpl, TemplateRef, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-order-list-host"], inputs: { items: [1, "items"], header: [1, "header"] }, outputs: { items: "itemsChange" }, decls: 11, vars: 5, consts: [[1, "kpt-order-list"], [1, "kpt-order-list__controls"], ["type", "button", 3, "click", "disabled"], ["name", "arrow-up"], ["name", "arrow-down"], [1, "kpt-order-list__panel"], [1, "kpt-order-list__header"], [1, "kpt-order-list__items"], [1, "kpt-order-list__item", 3, "is-selected"], [1, "kpt-order-list__item", 3, "click"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function KptOrderList_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [1, "kpt-order-list-host"], inputs: { items: [1, "items"], header: [1, "header"], dragdrop: [1, "dragdrop"] }, outputs: { items: "itemsChange" }, decls: 11, vars: 7, consts: [[1, "kpt-order-list"], [1, "kpt-order-list__controls"], ["type", "button", 3, "click", "disabled"], ["name", "arrow-up"], ["name", "arrow-down"], [1, "kpt-order-list__panel"], [1, "kpt-order-list__header"], [1, "kpt-order-list__items", 3, "dragover", "dragleave", "drop"], [1, "kpt-order-list__item", 3, "is-selected", "is-dragging", "kpt-order-list__item--draggable", "kpt-order-list__item--dragover"], [1, "kpt-order-list__item", 3, "click", "dragstart", "dragover", "dragleave", "drop", "dragend"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function KptOrderList_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
             i0.ɵɵlistener("click", function KptOrderList_Template_button_click_2_listener() { return ctx.moveSelected(-1); });
             i0.ɵɵelement(3, "kpt-icon", 3);
@@ -11415,7 +12279,8 @@ class KptOrderList {
             i0.ɵɵelementStart(6, "div", 5);
             i0.ɵɵconditionalCreate(7, KptOrderList_Conditional_7_Template, 2, 1, "div", 6);
             i0.ɵɵelementStart(8, "ul", 7);
-            i0.ɵɵrepeaterCreate(9, KptOrderList_For_10_Template, 2, 7, "li", 8, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵlistener("dragover", function KptOrderList_Template_ul_dragover_8_listener($event) { return ctx.onListDragOver($event); })("dragleave", function KptOrderList_Template_ul_dragleave_8_listener() { return ctx.listOver.set(false); })("drop", function KptOrderList_Template_ul_drop_8_listener($event) { return ctx.onListDrop($event); });
+            i0.ɵɵrepeaterCreate(9, KptOrderList_For_10_Template, 2, 14, "li", 8, i0.ɵɵrepeaterTrackByIndex);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -11426,9 +12291,11 @@ class KptOrderList {
             i0.ɵɵattribute("aria-label", ctx.i18n.t("orderList.down"));
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.header() ? 7 : -1);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("is-dragover", ctx.listOver());
+            i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.items());
-        } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-order-list-host{display:block}.kpt-order-list{display:flex;align-items:center;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-order-list__controls{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-order-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-order-list__controls button:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-order-list__controls button:disabled{opacity:.5;cursor:not-allowed}.kpt-order-list__panel{flex:1;min-width:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-order-list__header{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-variant);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-order-list__items{list-style:none;margin:0;padding:var(--%NS%kpt-space-1, .25rem);max-height:16rem;overflow-y:auto}.kpt-order-list__item{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-order-list__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-order-list__item.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 16%,transparent);color:var(--%NS%kpt-color-primary)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [NgTemplateOutlet, KptIcon], styles: ["@layer kpt.components{.kpt-order-list-host{display:block}.kpt-order-list{display:flex;align-items:center;gap:var(--%NS%kpt-space-3, .75rem)}.kpt-order-list__controls{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-order-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-order-list__controls button:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-order-list__controls button:disabled{opacity:.5;cursor:not-allowed}.kpt-order-list__panel{flex:1;min-width:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);overflow:hidden}.kpt-order-list__header{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-variant);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-order-list__items{list-style:none;margin:0;padding:var(--%NS%kpt-space-1, .25rem);max-height:16rem;overflow-y:auto}.kpt-order-list__items.is-dragover{background:var(--%NS%kpt-color-muted)}.kpt-order-list__item{padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-sm, .25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-order-list__item:hover{background:var(--%NS%kpt-color-muted)}.kpt-order-list__item.is-selected{background:color-mix(in oklch,var(--%NS%kpt-color-primary) 16%,transparent);color:var(--%NS%kpt-color-primary)}.kpt-order-list__item--draggable{cursor:grab;-webkit-user-select:none;user-select:none}.kpt-order-list__item--%NS%draggable:active{cursor:grabbing}.kpt-order-list__item--dragover{box-shadow:inset 0 2px 0 0 var(--%NS%kpt-color-primary)}.kpt-order-list__item.is-dragging{opacity:.5}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptOrderList, [{
         type: Component,
@@ -11440,20 +12307,39 @@ class KptOrderList {
       </div>
       <div class="kpt-order-list__panel">
         @if (header()) { <div class="kpt-order-list__header">{{ header() }}</div> }
-        <ul class="kpt-order-list__items">
+        <ul
+          class="kpt-order-list__items"
+          [class.is-dragover]="listOver()"
+          (dragover)="onListDragOver($event)"
+          (dragleave)="listOver.set(false)"
+          (drop)="onListDrop($event)"
+        >
           @for (item of items(); track $index; let i = $index) {
-            <li class="kpt-order-list__item" [class.is-selected]="selected() === i" (click)="selected.set(i)">
+            <li
+              class="kpt-order-list__item"
+              [class.is-selected]="selected() === i"
+              [class.is-dragging]="dragIndex() === i"
+              [class.kpt-order-list__item--draggable]="dragdrop()"
+              [class.kpt-order-list__item--dragover]="overIndex() === i && dragIndex() !== i"
+              [attr.draggable]="dragdrop() ? true : null"
+              (click)="selected.set(i)"
+              (dragstart)="onDragStart(i, $event)"
+              (dragover)="onDragOver(i, $event)"
+              (dragleave)="overIndex.set(null)"
+              (drop)="onDrop(i, $event)"
+              (dragend)="clearDrag()"
+            >
               <ng-container [ngTemplateOutlet]="itemTpl()" [ngTemplateOutletContext]="{ $implicit: item, index: i }" />
             </li>
           }
         </ul>
       </div>
     </div>
-  `, host: { class: 'kpt-order-list-host' }, styles: ["@layer kpt.components{.kpt-order-list-host{display:block}.kpt-order-list{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-order-list__controls{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-order-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;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);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-order-list__controls button:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-order-list__controls button:disabled{opacity:.5;cursor:not-allowed}.kpt-order-list__panel{flex:1;min-width:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-order-list__header{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);font-weight:var(--kpt-font-weight-semibold, 600);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-order-list__items{list-style:none;margin:0;padding:var(--kpt-space-1, .25rem);max-height:16rem;overflow-y:auto}.kpt-order-list__item{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-order-list__item:hover{background:var(--kpt-color-muted)}.kpt-order-list__item.is-selected{background:color-mix(in oklch,var(--kpt-color-primary) 16%,transparent);color:var(--kpt-color-primary)}}\n"] }]
-    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptOrderList, { className: "KptOrderList", filePath: "lib/order-list/order-list.component.ts", lineNumber: 41 }); })();
+  `, host: { class: 'kpt-order-list-host' }, styles: ["@layer kpt.components{.kpt-order-list-host{display:block}.kpt-order-list{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem)}.kpt-order-list__controls{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-order-list__controls button{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;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);color:var(--kpt-color-on-surface);cursor:pointer}.kpt-order-list__controls button:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-order-list__controls button:disabled{opacity:.5;cursor:not-allowed}.kpt-order-list__panel{flex:1;min-width:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);overflow:hidden}.kpt-order-list__header{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-variant);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);font-weight:var(--kpt-font-weight-semibold, 600);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-order-list__items{list-style:none;margin:0;padding:var(--kpt-space-1, .25rem);max-height:16rem;overflow-y:auto}.kpt-order-list__items.is-dragover{background:var(--kpt-color-muted)}.kpt-order-list__item{padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-sm, .25rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-order-list__item:hover{background:var(--kpt-color-muted)}.kpt-order-list__item.is-selected{background:color-mix(in oklch,var(--kpt-color-primary) 16%,transparent);color:var(--kpt-color-primary)}.kpt-order-list__item--draggable{cursor:grab;-webkit-user-select:none;user-select:none}.kpt-order-list__item--draggable:active{cursor:grabbing}.kpt-order-list__item--dragover{box-shadow:inset 0 2px 0 0 var(--kpt-color-primary)}.kpt-order-list__item.is-dragging{opacity:.5}}\n"] }]
+    }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptOrderList, { className: "KptOrderList", filePath: "lib/order-list/order-list.component.ts", lineNumber: 61 }); })();
 
-const _c0$7 = a0 => ({ index: a0 });
+const _c0$a = a0 => ({ index: a0 });
 function KptGalleria_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 4);
 } if (rf & 2) {
@@ -11471,7 +12357,7 @@ function KptGalleria_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const ɵ$index_19_r3 = ctx.$index;
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("is-active", ɵ$index_19_r3 === ctx_r3.activeIndex());
-    i0.ɵɵattribute("aria-label", ctx_r3.i18n.t("galleria.image", i0.ɵɵpureFunction1(5, _c0$7, ɵ$index_19_r3 + 1)));
+    i0.ɵɵattribute("aria-label", ctx_r3.i18n.t("galleria.image", i0.ɵɵpureFunction1(5, _c0$a, ɵ$index_19_r3 + 1)));
     i0.ɵɵadvance();
     i0.ɵɵproperty("src", item_r5.thumbnail || item_r5.src, i0.ɵɵsanitizeUrl)("alt", item_r5.alt || "");
 } }
@@ -11560,9 +12446,9 @@ class KptGalleria {
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptGalleria, { className: "KptGalleria", filePath: "lib/galleria/galleria.component.ts", lineNumber: 46 }); })();
 
-const _c0$6 = ["dlg"];
-const _c1$1 = ["*", [["", "kptDialogFooter", ""]]];
-const _c2 = ["*", "[kptDialogFooter]"];
+const _c0$9 = ["dlg"];
+const _c1$2 = ["*", [["", "kptDialogFooter", ""]]];
+const _c2$1 = ["*", "[kptDialogFooter]"];
 function KptDialog_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 6);
@@ -11662,11 +12548,11 @@ class KptDialog {
     }
     static { this.ɵfac = function KptDialog_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDialog)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDialog, selectors: [["kpt-dialog"]], viewQuery: function KptDialog_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.dialogRef, _c0$6, 5);
+            i0.ɵɵviewQuerySignal(ctx.dialogRef, _c0$9, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, hostAttrs: [1, "kpt-dialog-host"], inputs: { open: [1, "open"], header: [1, "header"], dismissible: [1, "dismissible"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 6, vars: 1, consts: [["dlg", ""], [1, "kpt-dialog", 3, "close", "cancel"], [1, "kpt-dialog__header"], [1, "kpt-dialog__body"], [1, "kpt-dialog__title"], ["type", "button", 1, "kpt-dialog__close"], ["type", "button", 1, "kpt-dialog__close", 3, "click"], ["name", "x"]], template: function KptDialog_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c1$1);
+        } }, hostAttrs: [1, "kpt-dialog-host"], inputs: { open: [1, "open"], header: [1, "header"], dismissible: [1, "dismissible"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2$1, decls: 6, vars: 1, consts: [["dlg", ""], [1, "kpt-dialog", 3, "close", "cancel"], [1, "kpt-dialog__header"], [1, "kpt-dialog__body"], [1, "kpt-dialog__title"], ["type", "button", 1, "kpt-dialog__close"], ["type", "button", 1, "kpt-dialog__close", 3, "click"], ["name", "x"]], template: function KptDialog_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1$2);
             i0.ɵɵelementStart(0, "dialog", 1, 0);
             i0.ɵɵlistener("close", function KptDialog_Template_dialog_close_0_listener() { return ctx.open.set(false); })("cancel", function KptDialog_Template_dialog_cancel_0_listener($event) { return ctx.onCancel($event); });
             i0.ɵɵconditionalCreate(2, KptDialog_Conditional_2_Template, 4, 2, "div", 2);
@@ -11828,7 +12714,7 @@ class KptToastContainer {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToastContainer, { className: "KptToastContainer", filePath: "lib/toast/toast-container.component.ts", lineNumber: 36 }); })();
 
-const _c0$5 = ["*"];
+const _c0$8 = ["*"];
 function KptMenu_ng_template_3_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 4);
 } }
@@ -11991,7 +12877,7 @@ class KptMenu {
         this.close();
     }
     static { this.ɵfac = function KptMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMenu)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMenu, selectors: [["kpt-menu"]], hostAttrs: [1, "kpt-menu-host"], inputs: { items: [1, "items"], open: [1, "open"] }, outputs: { selected: "selected", open: "openChange" }, ngContentSelectors: _c0$5, decls: 4, vars: 4, consts: [["origin", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", 1, "kpt-menu__trigger", 3, "click"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-menu__panel"], ["role", "separator", 1, "kpt-menu__separator"], ["role", "presentation", 1, "kpt-menu__header"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "kpt-menu__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-menu__text"], [1, "kpt-menu__label"], [1, "kpt-menu__description"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "click", "disabled"], [1, "kpt-menu__badge", 3, "value", "variant"]], template: function KptMenu_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMenu, selectors: [["kpt-menu"]], hostAttrs: [1, "kpt-menu-host"], inputs: { items: [1, "items"], open: [1, "open"] }, outputs: { selected: "selected", open: "openChange" }, ngContentSelectors: _c0$8, decls: 4, vars: 4, consts: [["origin", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", 1, "kpt-menu__trigger", 3, "click"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "menu", 1, "kpt-menu__panel"], ["role", "separator", 1, "kpt-menu__separator"], ["role", "presentation", 1, "kpt-menu__header"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "kpt-menu__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-menu__text"], [1, "kpt-menu__label"], [1, "kpt-menu__description"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "click", "disabled"], [1, "kpt-menu__badge", 3, "value", "variant"]], template: function KptMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "span", 1, 0);
             i0.ɵɵlistener("click", function KptMenu_Template_span_click_0_listener() { return ctx.toggle(); });
@@ -12069,8 +12955,8 @@ class KptMenu {
     }], () => [], { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber: 126 }); })();
 
-const _c0$4 = [[["", "kptPopoverTrigger", ""]], "*"];
-const _c1 = ["[kptPopoverTrigger]", "*"];
+const _c0$7 = [[["", "kptPopoverTrigger", ""]], "*"];
+const _c1$1 = ["[kptPopoverTrigger]", "*"];
 function KptPopover_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
     i0.ɵɵprojection(1, 1);
@@ -12105,8 +12991,8 @@ class KptPopover {
         this.open.set(false);
     }
     static { this.ɵfac = function KptPopover_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptPopover)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptPopover, selectors: [["kpt-popover"]], hostAttrs: [1, "kpt-popover-host"], inputs: { placement: [1, "placement"] }, ngContentSelectors: _c1, decls: 4, vars: 4, consts: [["origin", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", 1, "kpt-popover__trigger", 3, "click"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "dialog", 1, "kpt-popover__panel"]], template: function KptPopover_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$4);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptPopover, selectors: [["kpt-popover"]], hostAttrs: [1, "kpt-popover-host"], inputs: { placement: [1, "placement"] }, ngContentSelectors: _c1$1, decls: 4, vars: 4, consts: [["origin", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", 1, "kpt-popover__trigger", 3, "click"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["role", "dialog", 1, "kpt-popover__panel"]], template: function KptPopover_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$7);
             i0.ɵɵelementStart(0, "span", 1, 0);
             i0.ɵɵlistener("click", function KptPopover_Template_span_click_0_listener() { return ctx.toggle(); });
             i0.ɵɵprojection(2);
@@ -12144,6 +13030,477 @@ class KptPopover {
     }], null, { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPopover, { className: "KptPopover", filePath: "lib/popover/popover.component.ts", lineNumber: 43 }); })();
 
+const _c0$6 = ["panel"];
+const _c1 = [[["", "kptPeekTrigger", ""]], "*"];
+const _c2 = ["[kptPeekTrigger]", "*"];
+function KptPeek_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4, 1);
+    i0.ɵɵlistener("mouseenter", function KptPeek_ng_template_3_Template_div_mouseenter_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.hoverIn()); })("mouseleave", function KptPeek_ng_template_3_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.hoverOut()); })("focusin", function KptPeek_ng_template_3_Template_div_focusin_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusIn()); })("focusout", function KptPeek_ng_template_3_Template_div_focusout_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusOut()); })("keydown.escape", function KptPeek_ng_template_3_Template_div_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.dismiss()); });
+    i0.ɵɵprojection(2, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("id", ctx_r1.panelId);
+    i0.ɵɵattribute("aria-label", ctx_r1.label() || ctx_r1.triggerText())("data-pinned", ctx_r1.pinned() ? "" : null);
+} }
+/** Licznik identyfikatorów paneli — `aria-controls` musi wskazywać unikatowy element. */
+let nextId = 0;
+const BELOW = { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 };
+const ABOVE = { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 };
+/**
+ * Trigger karty podglądu. Kładzie się na tym, co ma być zaczepieniem — najczęściej na wzmiance
+ * w tekście, ale równie dobrze na awatarze, chipie czy zwykłym linku.
+ *
+ * Nasłuch siedzi tutaj, a nie na hoście `kpt-peek`: host obejmuje po otwarciu także panel,
+ * więc opóźnienia liczyłyby się od złego elementu.
+ */
+class KptPeekTrigger {
+    constructor() {
+        this.element = inject(ElementRef);
+        this.peek = inject(forwardRef(() => KptPeek));
+    }
+    static { this.ɵfac = function KptPeekTrigger_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptPeekTrigger)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: KptPeekTrigger, selectors: [["", "kptPeekTrigger", ""]], hostAttrs: [1, "kpt-peek__trigger"], hostVars: 2, hostBindings: function KptPeekTrigger_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mouseenter", function KptPeekTrigger_mouseenter_HostBindingHandler() { return ctx.peek.hoverIn(); })("mouseleave", function KptPeekTrigger_mouseleave_HostBindingHandler() { return ctx.peek.hoverOut(); })("focus", function KptPeekTrigger_focus_HostBindingHandler() { return ctx.peek.focusIn(); })("blur", function KptPeekTrigger_blur_HostBindingHandler() { return ctx.peek.focusOut(); })("click", function KptPeekTrigger_click_HostBindingHandler() { return ctx.peek.pin(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-expanded", ctx.peek.isOpen())("aria-controls", ctx.peek.isOpen() ? ctx.peek.panelId : null);
+        } } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptPeekTrigger, [{
+        type: Directive,
+        args: [{
+                selector: '[kptPeekTrigger]',
+                host: {
+                    class: 'kpt-peek__trigger',
+                    '(mouseenter)': 'peek.hoverIn()',
+                    '(mouseleave)': 'peek.hoverOut()',
+                    '(focus)': 'peek.focusIn()',
+                    '(blur)': 'peek.focusOut()',
+                    '(click)': 'peek.pin()',
+                    '[attr.aria-expanded]': 'peek.isOpen()',
+                    '[attr.aria-controls]': 'peek.isOpen() ? peek.panelId : null',
+                },
+            }]
+    }], null, null); })();
+/**
+ * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Tym różni się od sąsiadów: `kptTooltip` niesie sam tekst i nie da się w nim kliknąć,
+ * a `kpt-popover` otwiera dopiero klik i zasłania stronę backdropem.
+ *
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * czas przejechać z triggera na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
+ * kartę od razu (klawiatura nie przejeżdża po elementach przypadkiem), a klik, Enter albo dotyk
+ * **przypina** ją: karta zostaje mimo zjazdu kursora, a fokus wchodzi do środka. To jedyna droga
+ * do treści karty tam, gdzie hovera nie ma w ogóle.
+ *
+ * Wymaga stylów overlay CDK: `import '@angular/cdk/overlay-prebuilt.css';`
+ *
+ * @example
+ * <kpt-peek>
+ *   <a kptPeekTrigger href="/ludzie/anna">@Anna Kowalska</a>
+ *   <kpt-card>Profil, projekty, kontakt…</kpt-card>
+ * </kpt-peek>
+ */
+class KptPeek {
+    constructor() {
+        /** Z której strony wychodzi karta; przy braku miejsca CDK i tak ją odwróci. */
+        this.placement = input('bottom', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        /** Zwłoka otwarcia po najechaniu (ms) — bez niej karty mrugają przy przejeżdżaniu przez tekst. */
+        this.openDelay = input(300, { ...(ngDevMode ? { debugName: "openDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Zwłoka zamknięcia po zjeździe kursora (ms) — tyle jest na przejazd z triggera na kartę. */
+        this.closeDelay = input(200, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Wyłączona karta nie otwiera się wcale; trigger zostaje zwykłym linkiem czy przyciskiem. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Nazwa karty dla czytnika ekranu; bez niej bierze się tekst triggera. */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Otwarcie i zamknięcie karty — na `opened` aplikacja może dociągnąć dane. */
+        this.opened = output();
+        this.closed = output();
+        this.panelId = `kpt-peek-${(nextId += 1)}`;
+        this.panel = viewChild('panel', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        this.open = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Przypięta karta zostaje po zjeździe kursora — przypina ją klik, Enter albo dotyk. */
+        this.pinnedState = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinnedState" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.open(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.pinned = computed(() => this.pinnedState(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+        this.positions = computed(() => this.placement() === 'top' ? [ABOVE, BELOW] : [BELOW, ABOVE], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []));
+        inject(DestroyRef).onDestroy(() => this.stopTimer());
+    }
+    /** Najazd kursora — na trigger albo na samą kartę. */
+    hoverIn() {
+        if (this.disabled())
+            return;
+        this.schedule(() => this.show(), this.open() ? 0 : this.openDelay());
+    }
+    /** Zjazd kursora; przypiętej karty nie rusza, bo tę zamyka dopiero Escape albo klik obok. */
+    hoverOut() {
+        if (this.pinnedState())
+            return;
+        this.schedule(() => this.close(), this.closeDelay());
+    }
+    /** Fokus otwiera bez zwłoki — klawiatura nie przejeżdża po elementach przypadkiem. */
+    focusIn() {
+        if (this.disabled())
+            return;
+        this.schedule(() => this.show(), 0);
+    }
+    /** Wyjście fokusu poza kartę i trigger zamyka ją także wtedy, gdy była przypięta. */
+    focusOut() {
+        // Sprawdzenie po klatce: w chwili `blur` `document.activeElement` to jeszcze `body`,
+        // więc przejście Tabem z triggera do karty wyglądałoby jak wyjście na zewnątrz.
+        this.schedule(() => {
+            const active = document.activeElement;
+            if (this.host.nativeElement.contains(active))
+                return;
+            if (this.panel()?.nativeElement.contains(active))
+                return;
+            this.close();
+        }, 0);
+    }
+    /** Klik, Enter albo dotyk: karta zostaje i przyjmuje fokus. */
+    pin() {
+        if (this.disabled())
+            return;
+        this.pinnedState.set(true);
+        this.show();
+        // Panel powstaje dopiero po przerysowaniu overlaya, więc fokus idzie w następnej klatce.
+        setTimeout(() => this.panel()?.nativeElement.focus({ preventScroll: true }));
+    }
+    /** Escape: zamyka i oddaje fokus tam, skąd karta wyszła. */
+    dismiss() {
+        const trigger = this.host.nativeElement.querySelector('.kpt-peek__trigger');
+        this.close();
+        trigger?.focus({ preventScroll: true });
+    }
+    close() {
+        this.stopTimer();
+        this.pinnedState.set(false);
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.closed.emit();
+    }
+    /** Tekst triggera jako nazwa karty — `role="dialog"` bez nazwy nic czytnikowi nie mówi. */
+    triggerText() {
+        return this.host.nativeElement.querySelector('.kpt-peek__trigger')?.textContent?.trim() ?? '';
+    }
+    show() {
+        if (this.open())
+            return;
+        this.open.set(true);
+        this.opened.emit();
+    }
+    schedule(action, delay) {
+        this.stopTimer();
+        if (delay <= 0) {
+            action();
+            return;
+        }
+        this.timer = setTimeout(action, delay);
+    }
+    stopTimer() {
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.timer = undefined;
+    }
+    static { this.ɵfac = function KptPeek_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptPeek)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptPeek, selectors: [["kpt-peek"]], viewQuery: function KptPeek_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.panel, _c0$6, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: [1, "kpt-peek-host"], inputs: { placement: [1, "placement"], openDelay: [1, "openDelay"], closeDelay: [1, "closeDelay"], disabled: [1, "disabled"], label: [1, "label"] }, outputs: { opened: "opened", closed: "closed" }, ngContentSelectors: _c2, decls: 4, vars: 3, consts: [["origin", "cdkOverlayOrigin"], ["panel", ""], ["cdkOverlayOrigin", "", 1, "kpt-peek__origin"], ["cdkConnectedOverlay", "", 3, "overlayOutsideClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions"], ["role", "dialog", "tabindex", "-1", 1, "kpt-peek__panel", 3, "mouseenter", "mouseleave", "focusin", "focusout", "keydown.escape", "id"]], template: function KptPeek_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1);
+            i0.ɵɵelementStart(0, "span", 2, 0);
+            i0.ɵɵprojection(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, KptPeek_ng_template_3_Template, 3, 3, "ng-template", 3);
+            i0.ɵɵlistener("overlayOutsideClick", function KptPeek_Template_ng_template_overlayOutsideClick_3_listener() { return ctx.close(); })("detach", function KptPeek_Template_ng_template_detach_3_listener() { return ctx.close(); });
+        } if (rf & 2) {
+            const origin_r3 = i0.ɵɵreference(1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r3)("cdkConnectedOverlayOpen", ctx.isOpen())("cdkConnectedOverlayPositions", ctx.positions());
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-peek-host,.kpt-peek__origin{display:inline}.kpt-peek__panel{max-inline-size:22rem;padding:var(--%NS%kpt-space-4, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-peek__panel:focus{outline:none}.kpt-peek__panel[data-pinned]:focus-visible{outline:2px solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptPeek, [{
+        type: Component,
+        args: [{ selector: 'kpt-peek', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay], template: `
+    <span class="kpt-peek__origin" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <ng-content select="[kptPeekTrigger]" />
+    </span>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen()"
+      [cdkConnectedOverlayPositions]="positions()"
+      (overlayOutsideClick)="close()"
+      (detach)="close()"
+    >
+      <div
+        #panel
+        class="kpt-peek__panel"
+        role="dialog"
+        tabindex="-1"
+        [id]="panelId"
+        [attr.aria-label]="label() || triggerText()"
+        [attr.data-pinned]="pinned() ? '' : null"
+        (mouseenter)="hoverIn()"
+        (mouseleave)="hoverOut()"
+        (focusin)="focusIn()"
+        (focusout)="focusOut()"
+        (keydown.escape)="dismiss()"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `, host: { class: 'kpt-peek-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-peek-host,.kpt-peek__origin{display:inline}.kpt-peek__panel{max-inline-size:22rem;padding:var(--kpt-space-4, 1rem);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);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);box-shadow:var(--kpt-elevation-3)}.kpt-peek__panel:focus{outline:none}.kpt-peek__panel[data-pinned]:focus-visible{outline:2px solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
+    }], () => [], { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptPeek, { className: "KptPeek", filePath: "lib/peek/peek.component.ts", lineNumber: 112 }); })();
+
+const _c0$5 = ["*"];
+function KptMention_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("data-kind", ctx_r0.resolvedKind() || null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.display());
+} }
+function KptMention_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("href", ctx, i0.ɵɵsanitizeUrl)("data-kind", ctx_r0.resolvedKind() || null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.display(), " ");
+} }
+function KptMention_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵattribute("data-kind", ctx_r0.resolvedKind() || null);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.display(), " ");
+} }
+function KptMention_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kpt-peek", 1);
+    i0.ɵɵconditionalCreate(1, KptMention_Conditional_1_Conditional_1_Template, 2, 3, "a", 2)(2, KptMention_Conditional_1_Conditional_2_Template, 2, 2, "button", 3);
+    i0.ɵɵprojection(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("placement", ctx_r0.placement())("openDelay", ctx_r0.openDelay())("label", ctx_r0.display());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_4_0 = ctx_r0.href()) ? 1 : 2, tmp_4_0);
+} }
+/**
+ * Wzmianka w tekście — `@ktoś` albo `@coś` jako element, na który da się najechać i zobaczyć
+ * kartę podglądu z resztą powiązań. Treść karty daje aplikacja przez projekcję: biblioteka
+ * nie wie, czym jest wzmiankowana rzecz, a osoba, zadanie i dokument wyglądają inaczej.
+ *
+ * Bez rzutowanej treści wzmianka zostaje samym napisem z podkreśleniem: nie ma czego pokazać,
+ * więc trigger nie udaje, że coś się pod nim kryje.
+ *
+ * Trigger jest `<button>`, a nie `<span>`: karta otwiera się też z klawiatury i dotyku
+ * (przypięcie), a to wymaga elementu, na który da się wejść Tabem. Z `href` staje się linkiem,
+ * bo wtedy klik prowadzi gdzieś naprawdę.
+ *
+ * @example
+ * <kpt-mention id="anna.k" label="Anna Kowalska">
+ *   <kpt-card>Profil, projekty, kontakt…</kpt-card>
+ * </kpt-mention>
+ */
+class KptMention {
+    constructor() {
+        /** Cała pozycja naraz. Pojedyncze inputy poniżej mają nad nią priorytet. */
+        this.item = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        /** Identyfikator zapisany w treści — nie zmienia się przy zmianie nazwy. */
+        this.id = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** Nazwa do pokazania; bez niej bierze się ją z `item`, a w ostateczności z `id`. */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Rodzaj (osoba, zadanie, dokument) — ląduje w `data-kind`, więc da się go ostylować. */
+        this.kind = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        /** Znak przed nazwą. Pusty łańcuch zostawia samą nazwę. */
+        this.prefix = input('@', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        /** Adres, pod który prowadzi klik. Bez niego wzmianka jest przyciskiem otwierającym kartę. */
+        this.href = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+        this.placement = input('bottom', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        this.openDelay = input(300, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+        /** Wyłączona wzmianka nie otwiera karty — zostaje samym napisem. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.resolvedKind = computed(() => this.kind() || this.item()?.kind || '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedKind" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => this.prefix() + (this.label() || this.item()?.label || this.id() || this.item()?.id || ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function KptMention_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMention)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMention, selectors: [["kpt-mention"]], hostAttrs: [1, "kpt-mention-host"], inputs: { item: [1, "item"], id: [1, "id"], label: [1, "label"], kind: [1, "kind"], prefix: [1, "prefix"], href: [1, "href"], placement: [1, "placement"], openDelay: [1, "openDelay"], disabled: [1, "disabled"] }, ngContentSelectors: _c0$5, decls: 2, vars: 1, consts: [["data-plain", "", 1, "kpt-mention"], [3, "placement", "openDelay", "label"], ["kptPeekTrigger", "", 1, "kpt-mention"], ["type", "button", "kptPeekTrigger", "", 1, "kpt-mention"]], template: function KptMention_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵconditionalCreate(0, KptMention_Conditional_0_Template, 2, 2, "span", 0)(1, KptMention_Conditional_1_Template, 4, 4, "kpt-peek", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.disabled() ? 0 : 1);
+        } }, dependencies: [KptPeek, KptPeekTrigger], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-mention-host,.kpt-mentions-host,.kpt-mentions__text{display:inline}.kpt-mention{display:inline;margin:0;padding:0;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:transparent;color:var(--%NS%kpt-color-primary);font:inherit;text-decoration:underline dotted var(--%NS%kpt-color-primary-border);text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer;transition:text-decoration-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard, ease)}.kpt-mention:hover,.kpt-mention[aria-expanded=true]{text-decoration-color:var(--%NS%kpt-color-primary)}.kpt-mention:focus-visible{outline:2px solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-mention{transition:none}}.kpt-mention[data-plain]{color:var(--%NS%kpt-color-text);font-weight:var(--%NS%kpt-font-weight-medium, 500);text-decoration:none;cursor:inherit}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptMention, [{
+        type: Component,
+        args: [{ selector: 'kpt-mention', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptPeek, KptPeekTrigger], template: `
+    @if (disabled()) {
+      <!-- Bez karty wzmianka nie udaje kontrolki: zostaje wyróżnionym napisem, którego nie ma
+           po co dotykać Tabem. -->
+      <span class="kpt-mention" data-plain [attr.data-kind]="resolvedKind() || null">{{ display() }}</span>
+    } @else {
+      <kpt-peek [placement]="placement()" [openDelay]="openDelay()" [label]="display()">
+        @if (href(); as url) {
+          <a kptPeekTrigger class="kpt-mention" [attr.href]="url" [attr.data-kind]="resolvedKind() || null">
+            {{ display() }}
+          </a>
+        } @else {
+          <button type="button" kptPeekTrigger class="kpt-mention" [attr.data-kind]="resolvedKind() || null">
+            {{ display() }}
+          </button>
+        }
+
+        <ng-content />
+      </kpt-peek>
+    }
+  `, host: { class: 'kpt-mention-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-mention-host,.kpt-mentions-host,.kpt-mentions__text{display:inline}.kpt-mention{display:inline;margin:0;padding:0;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-primary);font:inherit;text-decoration:underline dotted var(--kpt-color-primary-border);text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer;transition:text-decoration-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard, ease)}.kpt-mention:hover,.kpt-mention[aria-expanded=true]{text-decoration-color:var(--kpt-color-primary)}.kpt-mention:focus-visible{outline:2px solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-mention{transition:none}}.kpt-mention[data-plain]{color:var(--kpt-color-text);font-weight:var(--kpt-font-weight-medium, 500);text-decoration:none;cursor:inherit}}\n"] }]
+    }], null, { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMention, { className: "KptMention", filePath: "lib/mention/mention.component.ts", lineNumber: 51 }); })();
+
+const _c0$4 = (a0, a1, a2) => ({ $implicit: a0, id: a1, label: a2 });
+function KptMentions_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const segment_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(segment_r1.text);
+} }
+function KptMentions_For_1_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 2);
+} if (rf & 2) {
+    const segment_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c0$4, segment_r1.item, segment_r1.id, segment_r1.label));
+} }
+function KptMentions_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kpt-mention", 1);
+    i0.ɵɵconditionalCreate(1, KptMentions_For_1_Conditional_1_Conditional_1_Template, 1, 6, "ng-container", 2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_17_0;
+    const segment_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("id", segment_r1.id)("label", segment_r1.label)("kind", segment_r1.item?.kind ?? "")("prefix", ctx_r1.prefix())("placement", ctx_r1.placement())("disabled", !ctx_r1.cardTpl());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_17_0 = ctx_r1.cardTpl()) ? 1 : -1, tmp_17_0);
+} }
+function KptMentions_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, KptMentions_For_1_Conditional_0_Template, 2, 1, "span", 0)(1, KptMentions_For_1_Conditional_1_Template, 2, 7, "kpt-mention", 1);
+} if (rf & 2) {
+    const segment_r1 = ctx.$implicit;
+    i0.ɵɵconditional(segment_r1.kind === "text" ? 0 : 1);
+} }
+/**
+ * Akapit ze wzmiankami — tekst wchodzi jako zwykły napis, a `@wzmianki` wychodzą z niego jako
+ * elementy z kartą podglądu. Rozbiciem zajmuje się `parseMentionText()` z `@konce-pt/mention`
+ * (czysty TS z testami), więc oba porty czytają tę samą treść tak samo.
+ *
+ * Wzmianek nie renderujemy z HTML-a: treść zostaje tekstem, a wzmianka jest elementem, który
+ * biblioteka sama zbudowała. Aplikacja nie musi więc przepuszczać przez sanitizer czegoś,
+ * co i tak pochodzi od jej użytkowników.
+ *
+ * Kartę daje szablon w środku — kontekst dostaje pozycję jako `$implicit` oraz `id` i `label`,
+ * bo wzmianka do czegoś, czego nie ma już na liście, też musi się wyrenderować.
+ *
+ * @example
+ * <kpt-mentions [text]="note" [items]="people">
+ *   <ng-template let-item let-label="label">
+ *     <kpt-card>{{ item?.data?.role ?? label }}</kpt-card>
+ *   </ng-template>
+ * </kpt-mentions>
+ */
+class KptMentions {
+    constructor() {
+        /** Treść z wzmiankami: `@id` albo `@[Nazwa ze spacją](id)`. */
+        this.text = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Pozycje, po których rozwiązują się identyfikatory. Nieznane `id` zostaje etykietą. */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Znak przed nazwą we wzmiance. */
+        this.prefix = input('@', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+        this.placement = input('bottom', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        /** Szablon karty; bez niego wzmianki są samym napisem, bo nie ma czego pokazać. */
+        this.cardTpl = contentChild(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardTpl" }] : /* istanbul ignore next */ []));
+        this.segments = computed(() => parseMentionText(this.text(), this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function KptMentions_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptMentions)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptMentions, selectors: [["kpt-mentions"]], contentQueries: function KptMentions_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.cardTpl, TemplateRef, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: [1, "kpt-mentions-host"], inputs: { text: [1, "text"], items: [1, "items"], prefix: [1, "prefix"], placement: [1, "placement"] }, decls: 2, vars: 0, consts: [[1, "kpt-mentions__text"], [3, "id", "label", "kind", "prefix", "placement", "disabled"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function KptMentions_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵrepeaterCreate(0, KptMentions_For_1_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+        } if (rf & 2) {
+            i0.ɵɵrepeater(ctx.segments());
+        } }, dependencies: [NgTemplateOutlet, KptMention], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-mention-host,.kpt-mentions-host,.kpt-mentions__text{display:inline}.kpt-mention{display:inline;margin:0;padding:0;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:transparent;color:var(--%NS%kpt-color-primary);font:inherit;text-decoration:underline dotted var(--%NS%kpt-color-primary-border);text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer;transition:text-decoration-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard, ease)}.kpt-mention:hover,.kpt-mention[aria-expanded=true]{text-decoration-color:var(--%NS%kpt-color-primary)}.kpt-mention:focus-visible{outline:2px solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-mention{transition:none}}.kpt-mention[data-plain]{color:var(--%NS%kpt-color-text);font-weight:var(--%NS%kpt-font-weight-medium, 500);text-decoration:none;cursor:inherit}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptMentions, [{
+        type: Component,
+        args: [{ selector: 'kpt-mentions', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, KptMention], template: `@for (segment of segments(); track $index) {
+      @if (segment.kind === 'text') {
+        <span class="kpt-mentions__text">{{ segment.text }}</span>
+      } @else {
+        <kpt-mention
+          [id]="segment.id"
+          [label]="segment.label"
+          [kind]="segment.item?.kind ?? ''"
+          [prefix]="prefix()"
+          [placement]="placement()"
+          [disabled]="!cardTpl()"
+        >
+          @if (cardTpl(); as tpl) {
+            <ng-container
+              [ngTemplateOutlet]="tpl"
+              [ngTemplateOutletContext]="{ $implicit: segment.item, id: segment.id, label: segment.label }"
+            />
+          }
+        </kpt-mention>
+      }
+    }`, host: { class: 'kpt-mentions-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-mention-host,.kpt-mentions-host,.kpt-mentions__text{display:inline}.kpt-mention{display:inline;margin:0;padding:0;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:transparent;color:var(--kpt-color-primary);font:inherit;text-decoration:underline dotted var(--kpt-color-primary-border);text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer;transition:text-decoration-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard, ease)}.kpt-mention:hover,.kpt-mention[aria-expanded=true]{text-decoration-color:var(--kpt-color-primary)}.kpt-mention:focus-visible{outline:2px solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-mention{transition:none}}.kpt-mention[data-plain]{color:var(--kpt-color-text);font-weight:var(--kpt-font-weight-medium, 500);text-decoration:none;cursor:inherit}}\n"] }]
+    }], null, { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], cardTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMentions, { className: "KptMentions", filePath: "lib/mention/mentions.component.ts", lineNumber: 55 }); })();
+
 function KptAutocomplete_ng_template_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 5);
@@ -13300,5 +14657,5 @@ class KptSpeedDial {
  * Generated bundle index. Do not edit.
  */
 
-export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, provideKptIcons };
+export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAuth, KptAuthProviderDef, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBackdrop, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCellEditDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMention, KptMentions, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPeek, KptPeekTrigger, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, provideKptIcons };
 //# sourceMappingURL=konce-pt-angular.mjs.map