@konce-pt/angular 0.7.0 → 0.7.6

package/fesm2022/konce-pt-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, InjectionToken, signal, inject, Injectable, ElementRef, effect, makeEnvironmentProviders, afterNextRender, numberAttribute, viewChild, Directive, DestroyRef, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
-import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
-import { NgTemplateOutlet } from '@angular/common';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, signal, Injectable, inject, ElementRef, effect, InjectionToken, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, forwardRef, numberAttribute, viewChild, Directive, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal } from '@angular/core';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 
 const _c0$D = ["*"];
 function KptButton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -51,14 +51,14 @@ class KptButton {
             i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("aria-busy", ctx.loading() ? "true" : null);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loading() ? 1 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--%NS%_bg: var(--%NS%kpt-button-filled-bg);--%NS%_fg: var(--%NS%kpt-button-filled-fg);--%NS%_bg-hover: var(--%NS%kpt-button-filled-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-filled-bg-active);--%NS%_border: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--%NS%_h, 2.5rem);padding-inline:var(--%NS%_px, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%_border);border-radius:var(--%NS%kpt-button-radius, .5rem);font-family:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--%NS%_bg);color:var(--%NS%_fg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){background-color:var(--%NS%_bg-hover)}.kpt-button:active:not(:disabled){background-color:var(--%NS%_bg-active, var(--%NS%_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--%NS%_h: 2rem;--%NS%_px: .75rem;--%NS%_fs: .8125rem}.kpt-button[data-size=md]{--%NS%_h: 2.5rem;--%NS%_px: 1rem;--%NS%_fs: .875rem}.kpt-button[data-size=lg]{--%NS%_h: 3rem;--%NS%_px: 1.5rem;--%NS%_fs: 1rem}.kpt-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-button-tonal-bg);--%NS%_fg: var(--%NS%kpt-button-tonal-fg);--%NS%_bg-hover: var(--%NS%kpt-button-tonal-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-outline-fg);--%NS%_border: var(--%NS%kpt-button-outline-border);--%NS%_bg-hover: var(--%NS%kpt-button-outline-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-text-fg);--%NS%_bg-hover: var(--%NS%kpt-button-text-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black);--%NS%_bg-active: color-mix(in oklch, var(--%NS%kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--%NS%_bg: var(--%NS%kpt-button-filled-bg);--%NS%_fg: var(--%NS%kpt-button-filled-fg);--%NS%_bg-hover: var(--%NS%kpt-button-filled-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-filled-bg-active);--%NS%_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--%NS%_h, 2.5rem);padding-inline:var(--%NS%_px, 1rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%_border);border-radius:var(--%NS%kpt-button-radius, .5rem);font-family:inherit;font-size:var(--%NS%_fs, .875rem);font-weight:var(--%NS%kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--%NS%_bg);color:var(--%NS%_fg);transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){--%NS%_state: var(--%NS%_bg-hover)}.kpt-button:hover:not(:disabled):after{opacity:1}.kpt-button:active:not(:disabled){--%NS%_state: var(--%NS%_bg-active, var(--%NS%_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--%NS%_h: 2rem;--%NS%_px: .75rem;--%NS%_fs: .8125rem}.kpt-button[data-size=md]{--%NS%_h: 2.5rem;--%NS%_px: 1rem;--%NS%_fs: .875rem}.kpt-button[data-size=lg]{--%NS%_h: 3rem;--%NS%_px: 1.5rem;--%NS%_fs: 1rem}.kpt-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-button-tonal-bg);--%NS%_fg: var(--%NS%kpt-button-tonal-fg);--%NS%_bg-hover: var(--%NS%kpt-button-tonal-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-outline-fg);--%NS%_border: var(--%NS%kpt-button-outline-border);--%NS%_bg-hover: var(--%NS%kpt-button-outline-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-button-text-fg);--%NS%_bg-hover: var(--%NS%kpt-button-text-bg-hover);--%NS%_bg-active: var(--%NS%kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in oklch, var(--%NS%kpt-color-danger) 88%, black);--%NS%_bg-active: color-mix(in oklch, var(--%NS%kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptButton, [{
         type: Component,
         args: [{ selector: 'kpt-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                     class: 'kpt-button-host',
                     '[class.kpt-button-host--full]': 'fullWidth()',
-                }, template: "<button\n  class=\"kpt-button\"\n  [type]=\"type()\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-size]=\"size()\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [class.kpt-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n>\n  @if (loading()) {\n    <span class=\"kpt-button__spinner\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"kpt-button__content\"><ng-content /></span>\n</button>\n", styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--_bg: var(--kpt-button-filled-bg);--_fg: var(--kpt-button-filled-fg);--_bg-hover: var(--kpt-button-filled-bg-hover);--_bg-active: var(--kpt-button-filled-bg-active);--_border: transparent;display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--_h, 2.5rem);padding-inline:var(--_px, 1rem);border:var(--kpt-border-width-thin, 1px) solid var(--_border);border-radius:var(--kpt-button-radius, .5rem);font-family:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--_bg);color:var(--_fg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){background-color:var(--_bg-hover)}.kpt-button:active:not(:disabled){background-color:var(--_bg-active, var(--_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--_h: 2rem;--_px: .75rem;--_fs: .8125rem}.kpt-button[data-size=md]{--_h: 2.5rem;--_px: 1rem;--_fs: .875rem}.kpt-button[data-size=lg]{--_h: 3rem;--_px: 1.5rem;--_fs: 1rem}.kpt-button[data-variant=tonal]{--_bg: var(--kpt-button-tonal-bg);--_fg: var(--kpt-button-tonal-fg);--_bg-hover: var(--kpt-button-tonal-bg-hover);--_bg-active: var(--kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--_bg: transparent;--_fg: var(--kpt-button-outline-fg);--_border: var(--kpt-button-outline-border);--_bg-hover: var(--kpt-button-outline-bg-hover);--_bg-active: var(--kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--_bg: transparent;--_fg: var(--kpt-button-text-fg);--_bg-hover: var(--kpt-button-text-bg-hover);--_bg-active: var(--kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);--_bg-active: color-mix(in oklch, var(--kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"] }]
+                }, template: "<button\n  class=\"kpt-button\"\n  [type]=\"type()\"\n  [attr.data-variant]=\"variant()\"\n  [attr.data-size]=\"size()\"\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\n  [class.kpt-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n>\n  @if (loading()) {\n    <span class=\"kpt-button__spinner\" aria-hidden=\"true\"></span>\n  }\n  <span class=\"kpt-button__content\"><ng-content /></span>\n</button>\n", styles: ["@layer kpt.components{.kpt-button-host{display:inline-flex}.kpt-button-host--full{display:flex;width:100%}.kpt-button{--_bg: var(--kpt-button-filled-bg);--_fg: var(--kpt-button-filled-fg);--_bg-hover: var(--kpt-button-filled-bg-hover);--_bg-active: var(--kpt-button-filled-bg-active);--_border: transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-button-gap, .5rem);width:100%;box-sizing:border-box;height:var(--_h, 2.5rem);padding-inline:var(--_px, 1rem);border:var(--kpt-border-width-thin, 1px) solid var(--_border);border-radius:var(--kpt-button-radius, .5rem);font-family:inherit;font-size:var(--_fs, .875rem);font-weight:var(--kpt-button-font-weight, 500);line-height:1;white-space:nowrap;cursor:pointer;background-color:var(--_bg);color:var(--_fg);transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_state, transparent);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-button:hover:not(:disabled){--_state: var(--_bg-hover)}.kpt-button:hover:not(:disabled):after{opacity:1}.kpt-button:active:not(:disabled){--_state: var(--_bg-active, var(--_bg-hover))}.kpt-button:disabled{cursor:not-allowed;opacity:.5}.kpt-button[data-size=sm]{--_h: 2rem;--_px: .75rem;--_fs: .8125rem}.kpt-button[data-size=md]{--_h: 2.5rem;--_px: 1rem;--_fs: .875rem}.kpt-button[data-size=lg]{--_h: 3rem;--_px: 1.5rem;--_fs: 1rem}.kpt-button[data-variant=tonal]{--_bg: var(--kpt-button-tonal-bg);--_fg: var(--kpt-button-tonal-fg);--_bg-hover: var(--kpt-button-tonal-bg-hover);--_bg-active: var(--kpt-button-tonal-bg-hover)}.kpt-button[data-variant=outline]{--_bg: transparent;--_fg: var(--kpt-button-outline-fg);--_border: var(--kpt-button-outline-border);--_bg-hover: var(--kpt-button-outline-bg-hover);--_bg-active: var(--kpt-button-outline-bg-hover)}.kpt-button[data-variant=text]{--_bg: transparent;--_fg: var(--kpt-button-text-fg);--_bg-hover: var(--kpt-button-text-bg-hover);--_bg-active: var(--kpt-button-text-bg-hover)}.kpt-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);--_bg-active: color-mix(in oklch, var(--kpt-color-danger) 78%, black)}.kpt-button--loading .kpt-button__content{opacity:.75}.kpt-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-button-spin .6s linear infinite}@media(prefers-reduced-motion:reduce){.kpt-button{transition:none}.kpt-button:after{transition:none}.kpt-button__spinner{animation-duration:1.4s}}@keyframes kpt-button-spin{to{transform:rotate(360deg)}}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptButton, { className: "KptButton", filePath: "lib/button/button.component.ts", lineNumber: 32 }); })();
 
@@ -105,7 +105,7 @@ class KptIconButton {
             i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("data-shape", ctx.shape())("aria-label", ctx.ariaLabel())("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);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;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled){background:var(--%NS%_bg-hover)}.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)}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--%NS%_bg: transparent;--%NS%_fg: var(--%NS%kpt-color-on-surface);--%NS%_bg-hover: var(--%NS%kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--%NS%kpt-border-width-thin, 1px) solid transparent;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--%NS%_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted);--%NS%_bg-hover: var(--%NS%kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--%NS%kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger);--%NS%_bg-hover: color-mix(in 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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconButton, [{
         type: Component,
@@ -126,7 +126,7 @@ class KptIconButton {
         <ng-content />
       }
     </button>
-  `, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);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;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled){background:var(--_bg-hover)}.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)}.kpt-icon-button__spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kpt-spinner-rotate .6s linear infinite}}\n"] }]
+  `, host: { class: 'kpt-icon-button-host' }, styles: ["@layer kpt.components{.kpt-icon-button-host{display:inline-flex}.kpt-icon-button{--_bg: transparent;--_fg: var(--kpt-color-on-surface);--_bg-hover: var(--kpt-color-muted);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:var(--kpt-border-width-thin, 1px) solid transparent;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);cursor:pointer;font-size:1.25rem}.kpt-icon-button:after{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-icon-button:hover:not(:disabled):after{opacity:1}.kpt-icon-button:disabled{cursor:not-allowed;opacity:.5}.kpt-icon-button[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-icon-button[data-size=sm]{width:2rem;height:2rem;font-size:1rem}.kpt-icon-button[data-size=lg]{width:3rem;height:3rem;font-size:1.5rem}.kpt-icon-button[data-variant=filled]{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover)}.kpt-icon-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-icon-button[data-variant=outline]{border-color:var(--kpt-color-border-strong)}.kpt-icon-button[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger);--_bg-hover: color-mix(in 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIconButton, { className: "KptIconButton", filePath: "lib/icon-button/icon-button.component.ts", lineNumber: 36 }); })();
 
@@ -234,7 +234,7 @@ class KptFab {
             i0.ɵɵclassProp("kpt-fab--extended", ctx.extended());
             i0.ɵɵdomProperty("type", ctx.type())("disabled", ctx.disabled());
             i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size())("aria-label", ctx.extended() ? null : ctx.ariaLabel());
-        } }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%_bg);color:var(--%NS%_fg);box-shadow:var(--%NS%kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--%NS%kpt-font-weight-medium, 500);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),box-shadow var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-fab:hover:not(:disabled){background:var(--%NS%_bg-hover);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.kpt-fab[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-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--%NS%kpt-space-5, 1.25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);border-radius:var(--%NS%kpt-radius-full, 9999px)}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%_bg);color:var(--%NS%_fg);box-shadow:var(--%NS%kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--%NS%kpt-font-weight-medium, 500);position:relative;isolation:isolate;transition:box-shadow var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-fab: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-fab:hover:not(:disabled){box-shadow:var(--%NS%kpt-elevation-4)}.kpt-fab:hover:not(:disabled):after{opacity:1}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media(prefers-reduced-motion:reduce){.kpt-fab{transition:none}.kpt-fab:after{transition:none}}.kpt-fab[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-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--%NS%kpt-space-5, 1.25rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);border-radius:var(--%NS%kpt-radius-full, 9999px)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFab, [{
         type: Component,
@@ -248,10 +248,296 @@ class KptFab {
       [disabled]="disabled()"
       [attr.aria-label]="extended() ? null : ariaLabel()"
     ><ng-content /></button>
-  `, host: { class: 'kpt-fab-host' }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--kpt-radius-lg, .75rem);background:var(--_bg);color:var(--_fg);box-shadow:var(--kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--kpt-font-weight-medium, 500);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),box-shadow var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-fab:hover:not(:disabled){background:var(--_bg-hover);box-shadow:var(--kpt-elevation-4)}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.kpt-fab[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--kpt-space-5, 1.25rem);font-size:var(--kpt-font-size-sm, .875rem);border-radius:var(--kpt-radius-full, 9999px)}}\n"] }]
+  `, host: { class: 'kpt-fab-host' }, styles: ["@layer kpt.components{.kpt-fab-host{display:inline-flex}.kpt-fab{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:3.5rem;height:3.5rem;border:0;border-radius:var(--kpt-radius-lg, .75rem);background:var(--_bg);color:var(--_fg);box-shadow:var(--kpt-elevation-3);cursor:pointer;font:inherit;font-size:1.5rem;font-weight:var(--kpt-font-weight-medium, 500);position:relative;isolation:isolate;transition:box-shadow var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-fab: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-fab:hover:not(:disabled){box-shadow:var(--kpt-elevation-4)}.kpt-fab:hover:not(:disabled):after{opacity:1}.kpt-fab:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}@media(prefers-reduced-motion:reduce){.kpt-fab{transition:none}.kpt-fab:after{transition:none}}.kpt-fab[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-fab[data-size=mini]{width:2.5rem;height:2.5rem;font-size:1.15rem;border-radius:var(--kpt-radius-md, .5rem)}.kpt-fab--extended{width:auto;padding-inline:var(--kpt-space-5, 1.25rem);font-size:var(--kpt-font-size-sm, .875rem);border-radius:var(--kpt-radius-full, 9999px)}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFab, { className: "KptFab", filePath: "lib/fab/fab.component.ts", lineNumber: 28 }); })();
 
+const KPT_ICONS = {
+    'menu': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" />',
+    'x': '<path d="M18 6l-12 12" /> <path d="M6 6l12 12" />',
+    'chevron-up': '<path d="M6 15l6 -6l6 6" />',
+    'chevron-down': '<path d="M6 9l6 6l6 -6" />',
+    'chevron-left': '<path d="M15 6l-6 6l6 6" />',
+    'chevron-right': '<path d="M9 6l6 6l-6 6" />',
+    'check': '<path d="M5 12l5 5l10 -10" />',
+    'search': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" />',
+    'grip-vertical': '<path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
+    'info': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
+    'alert-triangle': '<path d="M12 9v4" /> <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0" /> <path d="M12 16h.01" />',
+    'circle-check': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 12l2 2l4 -4" />',
+    'circle-x': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M10 10l4 4m0 -4l-4 4" />',
+    'calendar': '<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" /> <path d="M16 3v4" /> <path d="M8 3v4" /> <path d="M4 11h16" /> <path d="M11 15h1" /> <path d="M12 15v3" />',
+    'copy': '<path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />',
+    'link': '<path d="M9 15l6 -6" /> <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /> <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />',
+    'code': '<path d="M7 8l-4 4l4 4" /> <path d="M17 8l4 4l-4 4" /> <path d="M14 4l-4 16" />',
+    'bold': '<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /> <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />',
+    'italic': '<path d="M11 5l6 0" /> <path d="M7 19l6 0" /> <path d="M14 5l-4 14" />',
+    'underline': '<path d="M7 5v5a5 5 0 0 0 10 0v-5" /> <path d="M5 19h14" />',
+    'strikethrough': '<path d="M5 12l14 0" /> <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />',
+    'list': '<path d="M9 6l11 0" /> <path d="M9 12l11 0" /> <path d="M9 18l11 0" /> <path d="M5 6l0 .01" /> <path d="M5 12l0 .01" /> <path d="M5 18l0 .01" />',
+    'list-numbers': '<path d="M11 6h9" /> <path d="M11 12h9" /> <path d="M12 18h8" /> <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /> <path d="M6 10v-6l-2 2" />',
+    'clear-formatting': '<path d="M17 15l4 4m0 -4l-4 4" /> <path d="M7 6v-1h11v1" /> <path d="M7 19l4 0" /> <path d="M13 5l-4 14" />',
+    'star': '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />',
+    'plus': '<path d="M12 5l0 14" /> <path d="M5 12l14 0" />',
+    'upload': '<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /> <path d="M7 9l5 -5l5 5" /> <path d="M12 4l0 12" />',
+    'dots-vertical': '<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
+    'photo': '<path d="M15 8h.01" /> <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /> <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /> <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />',
+    'trash': '<path d="M4 7l16 0" /> <path d="M10 11l0 6" /> <path d="M14 11l0 6" /> <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /> <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />',
+    'pencil': '<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M13.5 6.5l4 4" />',
+    'eye': '<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />',
+    'eye-off': '<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" />',
+    'minus': '<path d="M5 12l14 0" />',
+    'arrow-up': '<path d="M12 5l0 14" /> <path d="M18 11l-6 -6" /> <path d="M6 11l6 -6" />',
+    'arrow-down': '<path d="M12 5l0 14" /> <path d="M18 13l-6 6" /> <path d="M6 13l6 6" />',
+    'zoom-in': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M7 10l6 0" /> <path d="M10 7l0 6" /> <path d="M21 21l-6 -6" />',
+    'info-circle': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
+    'phone': '<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />',
+    'map-pin': '<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />',
+    'world': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M3.6 9h16.8" /> <path d="M3.6 15h16.8" /> <path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" />',
+    'clock': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 7v5l3 3" />',
+    'align-left': '<path d="M4 6l16 0" /> <path d="M4 12l10 0" /> <path d="M4 18l14 0" />',
+    'align-center': '<path d="M4 6l16 0" /> <path d="M8 12l8 0" /> <path d="M6 18l12 0" />',
+    'align-right': '<path d="M4 6l16 0" /> <path d="M10 12l10 0" /> <path d="M6 18l14 0" />',
+    'align-justified': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l12 0" />',
+    'palette': '<path d="M12 21a9 9 0 0 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M12.5 7.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M16.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />',
+    'highlight': '<path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M12.5 5.5l4 4" /> <path d="M4.5 13.5l4 4" /> <path d="M21 15v4h-8" />',
+    'clipboard': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />',
+    'clipboard-text': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /> <path d="M9 12h6" /> <path d="M9 16h6" />',
+    'table': '<path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /> <path d="M3 10h18" /> <path d="M10 3v18" />',
+    'mail': '<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /> <path d="M3 7l9 6l9 -6" />',
+    'share': '<path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /> <path d="M8.7 10.7l6.6 -3.4" /> <path d="M8.7 13.3l6.6 3.4" />',
+    'external-link': '<path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" /> <path d="M11 13l9 -9" /> <path d="M15 4h5v5" />',
+    'crosshair': '<path d="M4 12h4" /> <path d="M16 12h4" /> <path d="M12 4v4" /> <path d="M12 16v4" /> <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />',
+};
+
+/**
+ * Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
+ * Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
+ * z `@konce-pt/angular/icons` lub zarejestruj własne przez `register()`.
+ */
+class KptIconRegistry {
+    constructor() {
+        this.icons = new Map(Object.entries(KPT_ICONS));
+        this._version = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
+        /** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
+        this.version = this._version.asReadonly();
+    }
+    /** Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`. */
+    register(icons) {
+        for (const [name, svg] of Object.entries(icons)) {
+            this.icons.set(name, svg);
+        }
+        this._version.update((v) => v + 1);
+    }
+    /** Zwraca wewnętrzny SVG ikony lub undefined. */
+    get(name) {
+        return this.icons.get(name);
+    }
+    has(name) {
+        return this.icons.has(name);
+    }
+    static { this.ɵfac = function KptIconRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconRegistry)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptIconRegistry, factory: KptIconRegistry.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconRegistry, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+/**
+ * Składa pełny znacznik `<svg>` z wewnętrznego SVG z rejestru.
+ *
+ * Wydzielone z `kpt-icon`, bo tego samego stringa potrzebują znaczniki mapy —
+ * ich HTML powstaje poza Angularem, w DOM zarządzanym przez silnik mapy.
+ * Pusty `inner` daje pusty string, żeby wołający nie musiał tego sprawdzać.
+ */
+function renderKptIconSvg(inner, cssClass = 'kpt-icon') {
+    if (!inner)
+        return '';
+    return (`<svg class="${cssClass}" viewBox="0 0 24 24" fill="none" stroke="currentColor"` +
+        ' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+        inner +
+        '</svg>');
+}
+
+/**
+ * Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
+ * (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze
+ * ([[KptIconRegistry]]) — wbudowany zestaw działa od razu, pełny zestaw dodaje
+ * `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
+ *
+ * @example
+ * <kpt-icon name="menu" />
+ * <kpt-icon name="check" size="1.25rem" />
+ */
+class KptIcon {
+    constructor() {
+        /** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z font-size. */
+        this.size = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        this.registry = inject(KptIconRegistry);
+        effect(() => {
+            this.registry.version(); // reaguj na późną rejestrację ikon
+            // Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
+            this.host.nativeElement.innerHTML = renderKptIconSvg(this.registry.get(this.name()));
+        });
+    }
+    static { this.ɵfac = function KptIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIcon)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIcon, selectors: [["kpt-icon"]], hostAttrs: ["aria-hidden", "true", 1, "kpt-icon-host"], hostVars: 2, hostBindings: function KptIcon_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵstyleProp("font-size", ctx.size() || null);
+        } }, inputs: { name: [1, "name"], size: [1, "size"] }, decls: 0, vars: 0, template: function KptIcon_Template(rf, ctx) { }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIcon, [{
+        type: Component,
+        args: [{ selector: 'kpt-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
+                    class: 'kpt-icon-host',
+                    'aria-hidden': 'true',
+                    '[style.font-size]': 'size() || null',
+                }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"] }]
+    }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIcon, { className: "KptIcon", filePath: "lib/icon/icon.component.ts", lineNumber: 26 }); })();
+
+function KptAvatar_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("src", ctx_r0.src(), i0.ɵɵsanitizeUrl)("alt", ctx_r0.name() || "");
+} }
+function KptAvatar_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.initials());
+} }
+function KptAvatar_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("name", ctx_r0.icon());
+} }
+/**
+ * Awatar — obraz, inicjały (z `name`) lub ikona.
+ *
+ * @example
+ * <kpt-avatar src="/u/anna.jpg" />
+ * <kpt-avatar name="Anna Kowalska" size="lg" />
+ * <kpt-avatar icon="user" shape="square" />
+ */
+class KptAvatar {
+    constructor() {
+        this.src = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.shape = input('circle', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+        this.initials = computed(() => this.name()
+            .trim()
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((w) => w[0]?.toUpperCase() ?? '')
+            .join(''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function KptAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAvatar)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAvatar, selectors: [["kpt-avatar"]], hostAttrs: [1, "kpt-avatar-host"], inputs: { src: [1, "src"], name: [1, "name"], icon: [1, "icon"], size: [1, "size"], shape: [1, "shape"] }, decls: 4, vars: 3, consts: [[1, "kpt-avatar"], [1, "kpt-avatar__img", 3, "src", "alt"], [1, "kpt-avatar__initials"], [3, "name"]], template: function KptAvatar_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "span", 0);
+            i0.ɵɵconditionalCreate(1, KptAvatar_Conditional_1_Template, 1, 2, "img", 1)(2, KptAvatar_Conditional_2_Template, 2, 1, "span", 2)(3, KptAvatar_Conditional_3_Template, 1, 1, "kpt-icon", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-size", ctx.size())("data-shape", ctx.shape());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.src() ? 1 : ctx.name() ? 2 : ctx.icon() ? 3 : -1);
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--%NS%_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--%NS%_size);height:var(--%NS%_size);border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:calc(var(--%NS%_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--%NS%_size: 2rem}.kpt-avatar[data-size=md]{--%NS%_size: 2.5rem}.kpt-avatar[data-size=lg]{--%NS%_size: 3rem}.kpt-avatar[data-size=xl]{--%NS%_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAvatar, [{
+        type: Component,
+        args: [{ selector: 'kpt-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
+    <span class="kpt-avatar" [attr.data-size]="size()" [attr.data-shape]="shape()">
+      @if (src()) {
+        <img class="kpt-avatar__img" [src]="src()" [alt]="name() || ''" />
+      } @else if (name()) {
+        <span class="kpt-avatar__initials">{{ initials() }}</span>
+      } @else if (icon()) {
+        <kpt-icon [name]="icon()!" />
+      }
+    </span>
+  `, host: { class: 'kpt-avatar-host' }, styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-weight:var(--kpt-font-weight-semibold, 600);font-size:calc(var(--_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--_size: 2rem}.kpt-avatar[data-size=md]{--_size: 2.5rem}.kpt-avatar[data-size=lg]{--_size: 3rem}.kpt-avatar[data-size=xl]{--_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"] }]
+    }], 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: 34 }); })();
+
+const _c0$A = ["*"];
+/**
+ * Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
+ *
+ * @example
+ * <kpt-badge [value]="3" variant="danger" />
+ * <kpt-badge [value]="4" size="sm" variant="success" />
+ * <kpt-badge [value]="128" overlay><kpt-icon name="menu" /></kpt-badge>
+ * <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
+ */
+class KptBadge {
+    constructor() {
+        this.value = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.variant = input('primary', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        /** Rozmiar — `sm` mieści się w wierszu tekstu, `md` to domyślny licznik. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.max = input(99, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => {
+            const v = this.value();
+            if (typeof v === 'number' && v > this.max())
+                return `${this.max()}+`;
+            return v ?? '';
+        }, /* @ts-ignore */
+        ...(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$A, 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);
+            i0.ɵɵtext(2);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("kpt-badge--overlay", ctx.overlay())("kpt-badge--dot", ctx.dot());
+            i0.ɵɵattribute("data-variant", ctx.variant())("data-size", ctx.size());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(ctx.dot() ? "" : ctx.display());
+        } }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_size: 1.25rem;--%NS%_padding: .35rem;display:inline-flex;align-items:center;justify-content:center;min-width:var(--%NS%_size);height:var(--%NS%_size);padding-inline:var(--%NS%_padding);box-sizing:border-box;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%_bg);color:var(--%NS%_fg);font-size:calc(var(--%NS%_size) * .6);font-weight:var(--%NS%kpt-font-weight-semibold, 600);line-height:1}.kpt-badge[data-size=sm]{--%NS%_size: 1rem;--%NS%_padding: .28rem}.kpt-badge[data-size=md]{--%NS%_size: 1.25rem;--%NS%_padding: .35rem}.kpt-badge[data-size=lg]{--%NS%_size: 1.5rem;--%NS%_padding: .45rem}.kpt-badge[data-variant=neutral]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted)}.kpt-badge[data-variant=success]{--%NS%_bg: var(--%NS%kpt-color-success);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--%NS%_bg: var(--%NS%kpt-color-warning);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=info]{--%NS%_bg: var(--%NS%kpt-color-info);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge--dot{min-width:0;width:calc(var(--%NS%_size) * .52);height:calc(var(--%NS%_size) * .52);padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--%NS%kpt-color-surface)}}\n"], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBadge, [{
+        type: Component,
+        args: [{ selector: 'kpt-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <ng-content />
+    <span
+      class="kpt-badge"
+      [attr.data-variant]="variant()"
+      [attr.data-size]="size()"
+      [class.kpt-badge--overlay]="overlay()"
+      [class.kpt-badge--dot]="dot()"
+    >{{ dot() ? '' : display() }}</span>
+  `, host: { class: 'kpt-badge-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_size: 1.25rem;--_padding: .35rem;display:inline-flex;align-items:center;justify-content:center;min-width:var(--_size);height:var(--_size);padding-inline:var(--_padding);box-sizing:border-box;border-radius:var(--kpt-radius-full, 9999px);background:var(--_bg);color:var(--_fg);font-size:calc(var(--_size) * .6);font-weight:var(--kpt-font-weight-semibold, 600);line-height:1}.kpt-badge[data-size=sm]{--_size: 1rem;--_padding: .28rem}.kpt-badge[data-size=md]{--_size: 1.25rem;--_padding: .35rem}.kpt-badge[data-size=lg]{--_size: 1.5rem;--_padding: .45rem}.kpt-badge[data-variant=neutral]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted)}.kpt-badge[data-variant=success]{--_bg: var(--kpt-color-success);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--_bg: var(--kpt-color-warning);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=info]{--_bg: var(--kpt-color-info);--_fg: var(--kpt-color-surface)}.kpt-badge--dot{min-width:0;width:calc(var(--_size) * .52);height:calc(var(--_size) * .52);padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--kpt-color-surface)}}\n"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBadge, { className: "KptBadge", filePath: "lib/badge/badge.component.ts", lineNumber: 32 }); })();
+
 /** Token konfiguracji i18n. Konsumowany przez `KptI18n`. */
 const KPT_I18N_CONFIG = new InjectionToken('KPT_I18N_CONFIG');
 
@@ -305,6 +591,75 @@ const KPT_MESSAGES_EN = {
         expandGroup: 'Expand group',
         collapseGroup: 'Collapse group',
     },
+    map: {
+        addLocation: 'Add location',
+        chooseCategory: 'Choose a category',
+        myLocation: 'My location',
+        locateMe: 'Centre on my location',
+        locationDenied: 'Location access denied',
+        locationUnavailable: 'Location unavailable',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        legend: 'Legend',
+        showCategory: 'Show {category}',
+        hideCategory: 'Hide {category}',
+        cluster: 'Group of {count} locations',
+        clusterItems: 'Locations in this group',
+        fieldRequired: '{label} is required',
+        lookingUpAddress: 'Looking up the address…',
+        addressNotFound: 'No address found for this point',
+        latitude: 'Latitude',
+        longitude: 'Longitude',
+        empty: 'No locations',
+        save: 'Save',
+        cancel: 'Cancel',
+        poi: {
+            distanceAway: '{distance} away',
+            openNow: 'Open',
+            closedNow: 'Closed',
+            opensAt: 'opens at {time}',
+            closesAt: 'closes at {time}',
+            alwaysOpen: 'Open 24/7',
+            openingHours: 'Opening hours',
+            closedDay: 'Closed',
+            call: 'Call',
+            sendEmail: 'Send an e-mail',
+            openWebsite: 'Open the website',
+            coordinates: 'Coordinates',
+            copy: 'Copy',
+            copied: 'Copied',
+            share: 'Share',
+            addFavourite: 'Add to favourites',
+            removeFavourite: 'Remove from favourites',
+            noPhoto: 'No photo',
+        },
+        search: {
+            placeholder: 'Search for an address…',
+            label: 'Search for an address',
+            results: 'Address suggestions',
+            clear: 'Clear the search',
+            noResults: 'No matching places',
+            minLength: 'Type at least {count} characters',
+            searching: 'Searching…',
+            found: '{count} suggestions',
+        },
+        field: {
+            invalidEmail: 'Enter a valid e-mail address',
+            invalidUrl: 'Enter an address starting with http:// or https://',
+            imageTooLarge: 'The picture must be no larger than {max}',
+            pickImage: 'Pick a picture',
+            orPasteUrl: 'or paste a picture address',
+            removeImage: 'Remove the picture',
+            imagePreview: 'Picture preview',
+            hoursClosed: 'Closed',
+            hoursFrom: 'From',
+            hoursTo: 'To',
+            hoursSameAllWeek: 'Same all week',
+            hoursAddRange: 'Add a second range',
+            hoursRemoveRange: 'Remove the range',
+            hoursIncomplete: 'Set both times for {day} or mark the day as closed',
+        },
+    },
     dataTable: {
         search: 'Search…',
         exportCsv: 'Export CSV',
@@ -387,6 +742,10 @@ const KPT_MESSAGES_EN = {
     panel: {
         toggle: 'Collapse / expand',
     },
+    appShell: {
+        toggleNavigation: 'Toggle navigation',
+        navigation: 'Main navigation',
+    },
     breadcrumb: {
         label: 'breadcrumb',
     },
@@ -493,6 +852,75 @@ const KPT_MESSAGES_PL = {
         expandGroup: 'Rozwiń grupę',
         collapseGroup: 'Zwiń grupę',
     },
+    map: {
+        addLocation: 'Dodaj lokalizację',
+        chooseCategory: 'Wybierz kategorię',
+        myLocation: 'Moje położenie',
+        locateMe: 'Wyśrodkuj na moim położeniu',
+        locationDenied: 'Brak zgody na dostęp do lokalizacji',
+        locationUnavailable: 'Położenie niedostępne',
+        zoomIn: 'Przybliż',
+        zoomOut: 'Oddal',
+        legend: 'Legenda',
+        showCategory: 'Pokaż: {category}',
+        hideCategory: 'Ukryj: {category}',
+        cluster: 'Grupa {count} lokalizacji',
+        clusterItems: 'Lokalizacje w tej grupie',
+        fieldRequired: 'Pole „{label}" jest wymagane',
+        lookingUpAddress: 'Szukam adresu…',
+        addressNotFound: 'Nie znaleziono adresu dla tego punktu',
+        latitude: 'Szerokość',
+        longitude: 'Długość',
+        empty: 'Brak lokalizacji',
+        save: 'Zapisz',
+        cancel: 'Anuluj',
+        poi: {
+            distanceAway: '{distance} od Ciebie',
+            openNow: 'Otwarte',
+            closedNow: 'Zamknięte',
+            opensAt: 'otwarcie o {time}',
+            closesAt: 'zamknięcie o {time}',
+            alwaysOpen: 'Czynne całą dobę',
+            openingHours: 'Godziny otwarcia',
+            closedDay: 'Zamknięte',
+            call: 'Zadzwoń',
+            sendEmail: 'Napisz wiadomość',
+            openWebsite: 'Otwórz stronę',
+            coordinates: 'Współrzędne',
+            copy: 'Kopiuj',
+            copied: 'Skopiowano',
+            share: 'Udostępnij',
+            addFavourite: 'Dodaj do ulubionych',
+            removeFavourite: 'Usuń z ulubionych',
+            noPhoto: 'Brak zdjęcia',
+        },
+        search: {
+            placeholder: 'Szukaj adresu…',
+            label: 'Szukaj adresu',
+            results: 'Podpowiedzi adresów',
+            clear: 'Wyczyść wyszukiwanie',
+            noResults: 'Brak pasujących miejsc',
+            minLength: 'Wpisz więcej znaków (minimum: {count})',
+            searching: 'Szukam…',
+            found: 'Podpowiedzi: {count}',
+        },
+        field: {
+            invalidEmail: 'Podaj poprawny adres e-mail',
+            invalidUrl: 'Podaj adres zaczynający się od http:// albo https://',
+            imageTooLarge: 'Zdjęcie może mieć najwyżej {max}',
+            pickImage: 'Wybierz zdjęcie',
+            orPasteUrl: 'albo wklej adres zdjęcia',
+            removeImage: 'Usuń zdjęcie',
+            imagePreview: 'Podgląd zdjęcia',
+            hoursClosed: 'Zamknięte',
+            hoursFrom: 'Od',
+            hoursTo: 'Do',
+            hoursSameAllWeek: 'Tak samo przez cały tydzień',
+            hoursAddRange: 'Dodaj drugi przedział',
+            hoursRemoveRange: 'Usuń przedział',
+            hoursIncomplete: 'Podaj obie godziny dla dnia {day} albo oznacz go jako zamknięty',
+        },
+    },
     dataTable: {
         search: 'Szukaj…',
         exportCsv: 'Eksport CSV',
@@ -575,6 +1003,10 @@ const KPT_MESSAGES_PL = {
     panel: {
         toggle: 'Zwiń / rozwiń',
     },
+    appShell: {
+        toggleNavigation: 'Przełącz nawigację',
+        navigation: 'Nawigacja główna',
+    },
     breadcrumb: {
         label: 'breadcrumb',
     },
@@ -710,198 +1142,131 @@ class KptI18n {
             return raw;
         return raw.replace(/\{(\w+)\}/g, (_, name) => String(params[name] ?? `{${name}}`));
     }
-    lookup(dict, key) {
-        let node = dict;
-        for (const part of key.split('.')) {
-            if (node && typeof node === 'object' && part in node) {
-                node = node[part];
-            }
-            else {
-                return undefined;
-            }
-        }
-        return typeof node === 'string' ? node : undefined;
-    }
-    static { this.ɵfac = function KptI18n_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptI18n)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptI18n, factory: KptI18n.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptI18n, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], () => [], null); })();
-
-const KPT_ICONS = {
-    'menu': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l16 0" />',
-    'x': '<path d="M18 6l-12 12" /> <path d="M6 6l12 12" />',
-    'chevron-up': '<path d="M6 15l6 -6l6 6" />',
-    'chevron-down': '<path d="M6 9l6 6l6 -6" />',
-    'chevron-left': '<path d="M15 6l-6 6l6 6" />',
-    'chevron-right': '<path d="M9 6l6 6l-6 6" />',
-    'check': '<path d="M5 12l5 5l10 -10" />',
-    'search': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M21 21l-6 -6" />',
-    'grip-vertical': '<path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
-    'info': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
-    'alert-triangle': '<path d="M12 9v4" /> <path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0" /> <path d="M12 16h.01" />',
-    'circle-check': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 12l2 2l4 -4" />',
-    'circle-x': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M10 10l4 4m0 -4l-4 4" />',
-    'calendar': '<path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" /> <path d="M16 3v4" /> <path d="M8 3v4" /> <path d="M4 11h16" /> <path d="M11 15h1" /> <path d="M12 15v3" />',
-    'copy': '<path d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666" /> <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />',
-    'link': '<path d="M9 15l6 -6" /> <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /> <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />',
-    'code': '<path d="M7 8l-4 4l4 4" /> <path d="M17 8l4 4l-4 4" /> <path d="M14 4l-4 16" />',
-    'bold': '<path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /> <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />',
-    'italic': '<path d="M11 5l6 0" /> <path d="M7 19l6 0" /> <path d="M14 5l-4 14" />',
-    'underline': '<path d="M7 5v5a5 5 0 0 0 10 0v-5" /> <path d="M5 19h14" />',
-    'strikethrough': '<path d="M5 12l14 0" /> <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />',
-    'list': '<path d="M9 6l11 0" /> <path d="M9 12l11 0" /> <path d="M9 18l11 0" /> <path d="M5 6l0 .01" /> <path d="M5 12l0 .01" /> <path d="M5 18l0 .01" />',
-    'list-numbers': '<path d="M11 6h9" /> <path d="M11 12h9" /> <path d="M12 18h8" /> <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /> <path d="M6 10v-6l-2 2" />',
-    'clear-formatting': '<path d="M17 15l4 4m0 -4l-4 4" /> <path d="M7 6v-1h11v1" /> <path d="M7 19l4 0" /> <path d="M13 5l-4 14" />',
-    'star': '<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />',
-    'plus': '<path d="M12 5l0 14" /> <path d="M5 12l14 0" />',
-    'upload': '<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /> <path d="M7 9l5 -5l5 5" /> <path d="M12 4l0 12" />',
-    'dots-vertical': '<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />',
-    'photo': '<path d="M15 8h.01" /> <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /> <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /> <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />',
-    'trash': '<path d="M4 7l16 0" /> <path d="M10 11l0 6" /> <path d="M14 11l0 6" /> <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /> <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />',
-    'pencil': '<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M13.5 6.5l4 4" />',
-    'eye': '<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /> <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />',
-    'eye-off': '<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" /> <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" /> <path d="M3 3l18 18" />',
-    'minus': '<path d="M5 12l14 0" />',
-    'arrow-up': '<path d="M12 5l0 14" /> <path d="M18 11l-6 -6" /> <path d="M6 11l6 -6" />',
-    'arrow-down': '<path d="M12 5l0 14" /> <path d="M18 13l-6 6" /> <path d="M6 13l6 6" />',
-    'zoom-in': '<path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /> <path d="M7 10l6 0" /> <path d="M10 7l0 6" /> <path d="M21 21l-6 -6" />',
-    'info-circle': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 9h.01" /> <path d="M11 12h1v4h1" />',
-    'phone': '<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />',
-    'map-pin': '<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /> <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />',
-    'world': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M3.6 9h16.8" /> <path d="M3.6 15h16.8" /> <path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" />',
-    'clock': '<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <path d="M12 7v5l3 3" />',
-    'align-left': '<path d="M4 6l16 0" /> <path d="M4 12l10 0" /> <path d="M4 18l14 0" />',
-    'align-center': '<path d="M4 6l16 0" /> <path d="M8 12l8 0" /> <path d="M6 18l12 0" />',
-    'align-right': '<path d="M4 6l16 0" /> <path d="M10 12l10 0" /> <path d="M6 18l14 0" />',
-    'align-justified': '<path d="M4 6l16 0" /> <path d="M4 12l16 0" /> <path d="M4 18l12 0" />',
-    'palette': '<path d="M12 21a9 9 0 0 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M12.5 7.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /> <path d="M16.5 10.5a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />',
-    'highlight': '<path d="M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" /> <path d="M12.5 5.5l4 4" /> <path d="M4.5 13.5l4 4" /> <path d="M21 15v4h-8" />',
-    'clipboard': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />',
-    'clipboard-text': '<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /> <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /> <path d="M9 12h6" /> <path d="M9 16h6" />',
-    'table': '<path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /> <path d="M3 10h18" /> <path d="M10 3v18" />',
-};
-
-/**
- * Rejestr ikon dla `kpt-icon`. Zawiera wbudowany zestaw (używany przez komponenty).
- * Aby dodać pełny zestaw Tabler (5130 ikon), użyj `provideKptTablerIcons()`
- * z `@konce-pt/angular/icons` lub zarejestruj własne przez `register()`.
- */
-class KptIconRegistry {
-    constructor() {
-        this.icons = new Map(Object.entries(KPT_ICONS));
-        this._version = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
-        /** Rośnie po każdej rejestracji — pozwala `kpt-icon` reagować na późne dodanie ikon. */
-        this.version = this._version.asReadonly();
-    }
-    /** Rejestruje (lub nadpisuje) ikony: `{ nazwa: 'inner svg' }`. */
-    register(icons) {
-        for (const [name, svg] of Object.entries(icons)) {
-            this.icons.set(name, svg);
-        }
-        this._version.update((v) => v + 1);
-    }
-    /** Zwraca wewnętrzny SVG ikony lub undefined. */
-    get(name) {
-        return this.icons.get(name);
-    }
-    has(name) {
-        return this.icons.has(name);
-    }
-    static { this.ɵfac = function KptIconRegistry_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIconRegistry)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptIconRegistry, factory: KptIconRegistry.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIconRegistry, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
-    }], null, null); })();
-
-/**
- * Ikona Koncept UI (inline SVG, zestaw Tabler Icons — MIT). Rozmiar dziedziczy z `font-size`
- * (1em) lub ustaw `size`; kolor z `currentColor`. Ikona musi być w rejestrze
- * ([[KptIconRegistry]]) — wbudowany zestaw działa od razu, pełny zestaw dodaje
- * `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
- *
- * @example
- * <kpt-icon name="menu" />
- * <kpt-icon name="check" size="1.25rem" />
- */
-class KptIcon {
-    constructor() {
-        /** Nazwa ikony z rejestru (wbudowana lub zarejestrowana). */
-        this.name = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        /** Rozmiar jako długość CSS (np. '1.25rem'); domyślnie dziedziczy z font-size. */
-        this.size = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.host = inject(ElementRef);
-        this.registry = inject(KptIconRegistry);
-        effect(() => {
-            this.registry.version(); // reaguj na późną rejestrację ikon
-            const inner = this.registry.get(this.name()) ?? '';
-            // Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
-            this.host.nativeElement.innerHTML = inner
-                ? '<svg class="kpt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
-                    ' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-                    inner +
-                    '</svg>'
-                : '';
-        });
-    }
-    static { this.ɵfac = function KptIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIcon)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptIcon, selectors: [["kpt-icon"]], hostAttrs: ["aria-hidden", "true", 1, "kpt-icon-host"], hostVars: 2, hostBindings: function KptIcon_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵstyleProp("font-size", ctx.size() || null);
-        } }, inputs: { name: [1, "name"], size: [1, "size"] }, decls: 0, vars: 0, template: function KptIcon_Template(rf, ctx) { }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"], encapsulation: 2 }); }
+    lookup(dict, key) {
+        let node = dict;
+        for (const part of key.split('.')) {
+            if (node && typeof node === 'object' && part in node) {
+                node = node[part];
+            }
+            else {
+                return undefined;
+            }
+        }
+        return typeof node === 'string' ? node : undefined;
+    }
+    static { this.ɵfac = function KptI18n_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptI18n)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptI18n, factory: KptI18n.ɵfac, providedIn: 'root' }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptIcon, [{
-        type: Component,
-        args: [{ selector: 'kpt-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
-                    class: 'kpt-icon-host',
-                    'aria-hidden': 'true',
-                    '[style.font-size]': 'size() || null',
-                }, styles: ["@layer kpt.components{.kpt-icon-host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}.kpt-icon{width:1em;height:1em}}\n"] }]
-    }], () => [], { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptIcon, { className: "KptIcon", filePath: "lib/icon/icon.component.ts", lineNumber: 26 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptI18n, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();
 
-const _c0$A = ["*"];
+const _c0$z = ["*"];
 function KptSplitButton_ng_template_6_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 7);
 } }
 function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kpt-icon", 10);
+    i0.ɵɵelement(0, "kpt-avatar", 10);
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵproperty("name", item_r2.icon);
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("src", item_r1.avatar.src ?? null)("name", item_r1.avatar.name ?? "")("icon", item_r1.avatar.icon ?? null);
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 11);
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("name", item_r1.icon);
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r1.label);
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r1.description);
 } }
 function KptSplitButton_ng_template_6_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function KptSplitButton_ng_template_6_For_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const item_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pick(item_r2)); });
-    i0.ɵɵconditionalCreate(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_1_Template, 1, 1, "kpt-icon", 10);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵconditionalCreate(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_1_Template, 1, 3, "kpt-avatar", 10)(2, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_2_Template, 1, 1, "kpt-icon", 11);
+    i0.ɵɵelementStart(3, "span", 12);
+    i0.ɵɵconditionalCreate(4, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_4_Template, 2, 1, "span", 13);
+    i0.ɵɵconditionalCreate(5, KptSplitButton_ng_template_6_For_2_Conditional_1_Conditional_5_Template, 2, 1, "span", 14);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassProp("kpt-split-button__item--danger", item_r2.danger);
-    i0.ɵɵproperty("disabled", item_r2.disabled);
+    const item_r1 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r2.icon ? 1 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r2.label);
+    i0.ɵɵconditional(item_r1.avatar ? 1 : item_r1.icon ? 2 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r1.label ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.description ? 5 : -1);
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 11);
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("name", item_r1.icon);
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r1.description);
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-badge", 16);
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", item_r1.badge)("variant", item_r1.badgeVariant ?? "primary");
+} }
+function KptSplitButton_ng_template_6_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function KptSplitButton_ng_template_6_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const item_r1 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pick(item_r1)); });
+    i0.ɵɵconditionalCreate(1, KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_1_Template, 1, 1, "kpt-icon", 11);
+    i0.ɵɵelementStart(2, "span", 12)(3, "span", 13);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_5_Template, 2, 1, "span", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, KptSplitButton_ng_template_6_For_2_Conditional_2_Conditional_6_Template, 1, 2, "kpt-badge", 16);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("kpt-split-button__item--danger", item_r1.danger);
+    i0.ɵɵproperty("disabled", item_r1.disabled);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.icon ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r1.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.description ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.badge !== undefined && item_r1.badge !== null ? 6 : -1);
 } }
 function KptSplitButton_ng_template_6_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptSplitButton_ng_template_6_For_2_Conditional_0_Template, 1, 0, "div", 7)(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Template, 4, 5, "button", 8);
+    i0.ɵɵconditionalCreate(0, KptSplitButton_ng_template_6_For_2_Conditional_0_Template, 1, 0, "div", 7)(1, KptSplitButton_ng_template_6_For_2_Conditional_1_Template, 6, 3, "div", 8)(2, KptSplitButton_ng_template_6_For_2_Conditional_2_Template, 7, 7, "button", 9);
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    i0.ɵɵconditional(item_r2.separator ? 0 : 1);
+    const item_r1 = ctx.$implicit;
+    i0.ɵɵconditional(item_r1.separator ? 0 : item_r1.header ? 1 : 2);
 } }
 function KptSplitButton_ng_template_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵrepeaterCreate(1, KptSplitButton_ng_template_6_For_2_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(1, KptSplitButton_ng_template_6_For_2_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -939,7 +1304,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", select: "select" }, ngContentSelectors: _c0$A, 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"], ["type", "button", 1, "kpt-split-button__item", 3, "kpt-split-button__item--danger", "disabled"], ["type", "button", 1, "kpt-split-button__item", 3, "click", "disabled"], [3, "name"]], 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", select: "select" }, ngContentSelectors: _c0$z, 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(); });
@@ -961,11 +1326,11 @@ class KptSplitButton {
             i0.ɵɵattribute("aria-label", ctx.i18n.t("splitButton.more"));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r4)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;border-radius:var(--%NS%kpt-button-radius, .5rem);overflow:hidden}.kpt-split-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-split-button__main,.kpt-split-button__toggle{border:0;background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);height:2.5rem;transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-split-button__main:hover:not(:disabled),.kpt-split-button__toggle:hover:not(:disabled){background:var(--%NS%_bg-hover)}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}.kpt-split-button__main{padding-inline:var(--%NS%kpt-space-4, 1rem)}.kpt-split-button__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border-inline-start:1px solid color-mix(in oklch,var(--%NS%_fg) 25%,transparent)}.kpt-split-button__panel{min-width:11rem;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)}.kpt-split-button__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-split-button__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-split-button__item:disabled{opacity:.45;cursor:not-allowed}.kpt-split-button__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-split-button__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-split-button__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);--%NS%_bg-hover: var(--%NS%kpt-color-primary-hover);display:inline-flex;border-radius:var(--%NS%kpt-button-radius, .5rem);overflow:hidden}.kpt-split-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-split-button__main,.kpt-split-button__toggle{border:0;background:var(--%NS%_bg);color:var(--%NS%_fg);cursor:pointer;font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);height:2.5rem;position:relative;isolation:isolate}.kpt-split-button__main:after,.kpt-split-button__toggle:after{content:\"\";position:absolute;inset:0;z-index:-1;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-split-button__main:hover:not(:disabled):after,.kpt-split-button__toggle:hover:not(:disabled):after{opacity:1}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.kpt-split-button__main:after,.kpt-split-button__toggle:after{transition:none}}.kpt-split-button__main{padding-inline:var(--%NS%kpt-space-4, 1rem)}.kpt-split-button__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border-inline-start:1px solid color-mix(in oklch,var(--%NS%_fg) 25%,transparent)}.kpt-split-button__panel{min-width:11rem;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)}.kpt-split-button__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-split-button__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-split-button__item:disabled{opacity:.45;cursor:not-allowed}.kpt-split-button__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-split-button__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-split-button__header{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:default}.kpt-split-button__header .kpt-split-button__label{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-split-button__header kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-split-button__text{display:flex;flex-direction:column;min-width:0}.kpt-split-button__label,.kpt-split-button__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-split-button__description{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-split-button__badge{margin-inline-start:auto}.kpt-split-button__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSplitButton, [{
         type: Component,
-        args: [{ selector: 'kpt-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], template: `
+        args: [{ selector: 'kpt-split-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], template: `
     <div class="kpt-split-button" [attr.data-variant]="variant()">
       <button class="kpt-split-button__main" type="button" [disabled]="disabled()" (click)="primaryClick.emit()">
         <ng-content />
@@ -994,6 +1359,25 @@ class KptSplitButton {
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div class="kpt-split-button__separator" role="separator"></div>
+          } @else if (item.header) {
+            <div class="kpt-split-button__header" role="presentation">
+              @if (item.avatar) {
+                <kpt-avatar
+                  [src]="item.avatar.src ?? null"
+                  [name]="item.avatar.name ?? ''"
+                  [icon]="item.avatar.icon ?? null"
+                  size="sm"
+                />
+              } @else if (item.icon) {
+                <kpt-icon [name]="item.icon" />
+              }
+              <span class="kpt-split-button__text">
+                @if (item.label) { <span class="kpt-split-button__label">{{ item.label }}</span> }
+                @if (item.description) {
+                  <span class="kpt-split-button__description">{{ item.description }}</span>
+                }
+              </span>
+            </div>
           } @else {
             <button
               type="button"
@@ -1003,15 +1387,97 @@ class KptSplitButton {
               (click)="pick(item)"
             >
               @if (item.icon) { <kpt-icon [name]="item.icon" /> }
-              <span>{{ item.label }}</span>
+              <span class="kpt-split-button__text">
+                <span class="kpt-split-button__label">{{ item.label }}</span>
+                @if (item.description) {
+                  <span class="kpt-split-button__description">{{ item.description }}</span>
+                }
+              </span>
+              @if (item.badge !== undefined && item.badge !== null) {
+                <kpt-badge
+                  class="kpt-split-button__badge"
+                  [value]="item.badge"
+                  [variant]="item.badgeVariant ?? 'primary'"
+                />
+              }
             </button>
           }
         }
       </div>
     </ng-template>
-  `, host: { class: 'kpt-split-button-host' }, styles: ["@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;border-radius:var(--kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--_bg);color:var(--_fg);cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);height:2.5rem;transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-split-button__main:hover:not(:disabled),.kpt-split-button__toggle:hover:not(:disabled){background:var(--_bg-hover)}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}.kpt-split-button__main{padding-inline:var(--kpt-space-4, 1rem)}.kpt-split-button__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border-inline-start:1px solid color-mix(in oklch,var(--_fg) 25%,transparent)}.kpt-split-button__panel{min-width:11rem;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)}.kpt-split-button__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-split-button__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-split-button__item:disabled{opacity:.45;cursor:not-allowed}.kpt-split-button__item--danger{color:var(--kpt-color-danger)}.kpt-split-button__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-split-button__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
+  `, host: { class: 'kpt-split-button-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-split-button-host{display:inline-flex}.kpt-split-button{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);--_bg-hover: var(--kpt-color-primary-hover);display:inline-flex;border-radius:var(--kpt-button-radius, .5rem);overflow:hidden}.kpt-split-button[data-variant=tonal]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted);--_bg-hover: var(--kpt-color-muted-hover)}.kpt-split-button__main,.kpt-split-button__toggle{border:0;background:var(--_bg);color:var(--_fg);cursor:pointer;font:inherit;font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);height:2.5rem;position:relative;isolation:isolate}.kpt-split-button__main:after,.kpt-split-button__toggle:after{content:\"\";position:absolute;inset:0;z-index:-1;background-color:var(--_bg-hover);opacity:0;pointer-events:none;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-split-button__main:hover:not(:disabled):after,.kpt-split-button__toggle:hover:not(:disabled):after{opacity:1}.kpt-split-button__main:disabled,.kpt-split-button__toggle:disabled{opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion:reduce){.kpt-split-button__main:after,.kpt-split-button__toggle:after{transition:none}}.kpt-split-button__main{padding-inline:var(--kpt-space-4, 1rem)}.kpt-split-button__toggle{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border-inline-start:1px solid color-mix(in oklch,var(--_fg) 25%,transparent)}.kpt-split-button__panel{min-width:11rem;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)}.kpt-split-button__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-split-button__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-split-button__item:disabled{opacity:.45;cursor:not-allowed}.kpt-split-button__item--danger{color:var(--kpt-color-danger)}.kpt-split-button__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-split-button__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--kpt-font-size-sm, .875rem);cursor:default}.kpt-split-button__header .kpt-split-button__label{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-split-button__header kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-split-button__text{display:flex;flex-direction:column;min-width:0}.kpt-split-button__label,.kpt-split-button__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-split-button__description{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-split-button__badge{margin-inline-start:auto}.kpt-split-button__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], primaryClick: [{ type: i0.Output, args: ["primaryClick"] }], select: [{ type: i0.Output, args: ["select"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSplitButton, { className: "KptSplitButton", filePath: "lib/split-button/split-button.component.ts", lineNumber: 68 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSplitButton, { className: "KptSplitButton", filePath: "lib/split-button/split-button.component.ts", lineNumber: 101 }); })();
+
+// Do not edit directly — generated by scripts/gen-tokens.mjs
+// from @konce-pt/tokens (tokens/primitives/breakpoint.json).
+/** Progi breakpointów w pikselach — te same wartości, z których korzystają `@media` biblioteki. */
+const KPT_BREAKPOINTS = {
+    'sm': 640,
+    'md': 768,
+    'lg': 1024,
+    'xl': 1280,
+    '2xl': 1536,
+};
+
+/**
+ * Obserwator breakpointów oparty na `matchMedia`, spięty z tokenami `--kpt-breakpoint-*`.
+ * Zwraca sygnały, więc czyta się go tak samo w `computed`, w szablonie i w `effect`.
+ *
+ * Zapytania są memoizowane per string: `up('lg')` wywołane w wielu komponentach dzieli
+ * jeden `MediaQueryList` i jeden nasłuch.
+ *
+ * Poza przeglądarką (SSR, prerender) każdy sygnał to stałe `false`. Dlatego **układ**
+ * komponentów biblioteki nigdy nie zależy od tego serwisu — o tym, jak wygląda strona,
+ * decyduje CSS, żeby nic nie migotało przed hydracją. Serwis odpowiada za zachowania,
+ * których CSS nie wyrazi (np. w którą stronę ma zadziałać przycisk).
+ *
+ * @example
+ * private readonly breakpoints = inject(KptBreakpointObserver);
+ * readonly isDesktop = this.breakpoints.up('lg');
+ */
+class KptBreakpointObserver {
+    constructor() {
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.destroyRef = inject(DestroyRef);
+        this.cache = new Map();
+    }
+    /** Dowolne media query jako sygnał. */
+    matches(query) {
+        const cached = this.cache.get(query);
+        if (cached)
+            return cached;
+        const result = this.isBrowser ? this.observe(query) : signal(false).asReadonly();
+        this.cache.set(query, result);
+        return result;
+    }
+    /** Czy viewport ma szerokość co najmniej danego breakpointa (mobile-first). */
+    up(breakpoint) {
+        return this.matches(`(min-width: ${KPT_BREAKPOINTS[breakpoint]}px)`);
+    }
+    /**
+     * Czy viewport jest węższy niż dany breakpoint. Próg schodzi o 0.02px, żeby pasma
+     * `up`/`down` nie nakładały się na ułamkowych szerokościach okna (zoom, DPI).
+     */
+    down(breakpoint) {
+        return this.matches(`(max-width: ${KPT_BREAKPOINTS[breakpoint] - 0.02}px)`);
+    }
+    observe(query) {
+        const list = window.matchMedia(query);
+        const state = signal(list.matches, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        const onChange = (event) => state.set(event.matches);
+        list.addEventListener('change', onChange);
+        this.destroyRef.onDestroy(() => list.removeEventListener('change', onChange));
+        return state.asReadonly();
+    }
+    static { this.ɵfac = function KptBreakpointObserver_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBreakpointObserver)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptBreakpointObserver, factory: KptBreakpointObserver.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBreakpointObserver, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
 
 /**
  * Konfiguruje i18n Koncept UI. Ustawia język początkowy i rejestruje/nadpisuje
@@ -1036,62 +1502,6 @@ function provideKptI18n(config = {}) {
     return makeEnvironmentProviders([{ provide: KPT_I18N_CONFIG, useValue: config }]);
 }
 
-const _c0$z = ["*"];
-/**
- * Znacznik (badge) — licznik lub kropka statusu. Standalone lub nałożony na treść (`overlay`).
- *
- * @example
- * <kpt-badge [value]="3" variant="danger" />
- * <kpt-badge [value]="128" overlay><kpt-icon name="menu" /></kpt-badge>
- * <kpt-badge dot variant="success" overlay><kpt-avatar name="AK" /></kpt-badge>
- */
-class KptBadge {
-    constructor() {
-        this.value = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.variant = input('primary', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.overlay = input(false, { ...(ngDevMode ? { debugName: "overlay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.max = input(99, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-        this.display = computed(() => {
-            const v = this.value();
-            if (typeof v === 'number' && v > this.max())
-                return `${this.max()}+`;
-            return v ?? '';
-        }, /* @ts-ignore */
-        ...(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"], dot: [1, "dot"], overlay: [1, "overlay"], max: [1, "max"] }, ngContentSelectors: _c0$z, decls: 3, vars: 6, consts: [[1, "kpt-badge"]], template: function KptBadge_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵprojection(0);
-            i0.ɵɵdomElementStart(1, "span", 0);
-            i0.ɵɵtext(2);
-            i0.ɵɵdomElementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("kpt-badge--overlay", ctx.overlay())("kpt-badge--dot", ctx.dot());
-            i0.ɵɵattribute("data-variant", ctx.variant());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(ctx.dot() ? "" : ctx.display());
-        } }, styles: ["@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--%NS%_bg: var(--%NS%kpt-color-primary);--%NS%_fg: var(--%NS%kpt-color-on-primary);display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding-inline:.35rem;box-sizing:border-box;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-semibold, 600);line-height:1}.kpt-badge[data-variant=neutral]{--%NS%_bg: var(--%NS%kpt-color-muted);--%NS%_fg: var(--%NS%kpt-color-on-muted)}.kpt-badge[data-variant=success]{--%NS%_bg: var(--%NS%kpt-color-success);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=danger]{--%NS%_bg: var(--%NS%kpt-color-danger);--%NS%_fg: var(--%NS%kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--%NS%_bg: var(--%NS%kpt-color-warning);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge[data-variant=info]{--%NS%_bg: var(--%NS%kpt-color-info);--%NS%_fg: var(--%NS%kpt-color-surface)}.kpt-badge--dot{min-width:0;width:.65rem;height:.65rem;padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--%NS%kpt-color-surface)}}\n"], encapsulation: 2 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBadge, [{
-        type: Component,
-        args: [{ selector: 'kpt-badge', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <ng-content />
-    <span
-      class="kpt-badge"
-      [attr.data-variant]="variant()"
-      [class.kpt-badge--overlay]="overlay()"
-      [class.kpt-badge--dot]="dot()"
-    >{{ dot() ? '' : display() }}</span>
-  `, host: { class: 'kpt-badge-host' }, styles: ["@layer kpt.components{.kpt-badge-host{position:relative;display:inline-flex;vertical-align:middle}.kpt-badge{--_bg: var(--kpt-color-primary);--_fg: var(--kpt-color-on-primary);display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding-inline:.35rem;box-sizing:border-box;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-semibold, 600);line-height:1}.kpt-badge[data-variant=neutral]{--_bg: var(--kpt-color-muted);--_fg: var(--kpt-color-on-muted)}.kpt-badge[data-variant=success]{--_bg: var(--kpt-color-success);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=danger]{--_bg: var(--kpt-color-danger);--_fg: var(--kpt-color-on-danger)}.kpt-badge[data-variant=warning]{--_bg: var(--kpt-color-warning);--_fg: var(--kpt-color-surface)}.kpt-badge[data-variant=info]{--_bg: var(--kpt-color-info);--_fg: var(--kpt-color-surface)}.kpt-badge--dot{min-width:0;width:.65rem;height:.65rem;padding:0}.kpt-badge--overlay{position:absolute;top:0;inset-inline-end:0;transform:translate(35%,-35%);box-shadow:0 0 0 2px var(--kpt-color-surface)}}\n"] }]
-    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBadge, { className: "KptBadge", filePath: "lib/badge/badge.component.ts", lineNumber: 29 }); })();
-
 const _c0$y = ["*"];
 function KptChip_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -1107,127 +1517,51 @@ function KptChip_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 /**
  * Chip / tag — etykieta, opcjonalnie usuwalna.
  *
- * @example
- * <kpt-chip>Angular</kpt-chip>
- * <kpt-chip variant="success" removable (removed)="onRemove()">UI</kpt-chip>
- */
-class KptChip {
-    constructor() {
-        this.variant = input('neutral', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "variant" }] : /* 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$y, 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) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "span", 0);
-            i0.ɵɵprojection(1);
-            i0.ɵɵconditionalCreate(2, KptChip_Conditional_2_Template, 2, 2, "button", 1);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassProp("kpt-chip--disabled", ctx.disabled());
-            i0.ɵɵattribute("data-variant", ctx.variant());
-            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 }); }
-}
-(() => { (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()">
-      <ng-content />
-      @if (removable()) {
-        <button
-          type="button"
-          class="kpt-chip__remove"
-          [disabled]="disabled()"
-          (click)="removed.emit()"
-          [attr.aria-label]="i18n.t('common.remove')"
-        ><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 }); })();
-
-function KptAvatar_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 1);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", ctx_r0.src(), i0.ɵɵsanitizeUrl)("alt", ctx_r0.name() || "");
-} }
-function KptAvatar_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 2);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.initials());
-} }
-function KptAvatar_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kpt-icon", 3);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("name", ctx_r0.icon());
-} }
-/**
- * Awatar — obraz, inicjały (z `name`) lub ikona.
- *
- * @example
- * <kpt-avatar src="/u/anna.jpg" />
- * <kpt-avatar name="Anna Kowalska" size="lg" />
- * <kpt-avatar icon="user" shape="square" />
- */
-class KptAvatar {
-    constructor() {
-        this.src = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-        this.name = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.icon = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        this.size = input('md', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.shape = input('circle', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
-        this.initials = computed(() => this.name()
-            .trim()
-            .split(/\s+/)
-            .slice(0, 2)
-            .map((w) => w[0]?.toUpperCase() ?? '')
-            .join(''), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+ * @example
+ * <kpt-chip>Angular</kpt-chip>
+ * <kpt-chip variant="success" removable (removed)="onRemove()">UI</kpt-chip>
+ */
+class KptChip {
+    constructor() {
+        this.variant = input('neutral', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* 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 KptAvatar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAvatar)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAvatar, selectors: [["kpt-avatar"]], hostAttrs: [1, "kpt-avatar-host"], inputs: { src: [1, "src"], name: [1, "name"], icon: [1, "icon"], size: [1, "size"], shape: [1, "shape"] }, decls: 4, vars: 3, consts: [[1, "kpt-avatar"], [1, "kpt-avatar__img", 3, "src", "alt"], [1, "kpt-avatar__initials"], [3, "name"]], template: function KptAvatar_Template(rf, ctx) { if (rf & 1) {
+    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$y, 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) {
+            i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "span", 0);
-            i0.ɵɵconditionalCreate(1, KptAvatar_Conditional_1_Template, 1, 2, "img", 1)(2, KptAvatar_Conditional_2_Template, 2, 1, "span", 2)(3, KptAvatar_Conditional_3_Template, 1, 1, "kpt-icon", 3);
+            i0.ɵɵprojection(1);
+            i0.ɵɵconditionalCreate(2, KptChip_Conditional_2_Template, 2, 2, "button", 1);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵattribute("data-size", ctx.size())("data-shape", ctx.shape());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.src() ? 1 : ctx.name() ? 2 : ctx.icon() ? 3 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--%NS%_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--%NS%_size);height:var(--%NS%_size);border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-weight:var(--%NS%kpt-font-weight-semibold, 600);font-size:calc(var(--%NS%_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--%NS%_size: 2rem}.kpt-avatar[data-size=md]{--%NS%_size: 2.5rem}.kpt-avatar[data-size=lg]{--%NS%_size: 3rem}.kpt-avatar[data-size=xl]{--%NS%_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--%NS%kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"], encapsulation: 2 }); }
+            i0.ɵɵclassProp("kpt-chip--disabled", ctx.disabled());
+            i0.ɵɵattribute("data-variant", ctx.variant());
+            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 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAvatar, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptChip, [{
         type: Component,
-        args: [{ selector: 'kpt-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
-    <span class="kpt-avatar" [attr.data-size]="size()" [attr.data-shape]="shape()">
-      @if (src()) {
-        <img class="kpt-avatar__img" [src]="src()" [alt]="name() || ''" />
-      } @else if (name()) {
-        <span class="kpt-avatar__initials">{{ initials() }}</span>
-      } @else if (icon()) {
-        <kpt-icon [name]="icon()!" />
+        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()">
+      <ng-content />
+      @if (removable()) {
+        <button
+          type="button"
+          class="kpt-chip__remove"
+          [disabled]="disabled()"
+          (click)="removed.emit()"
+          [attr.aria-label]="i18n.t('common.remove')"
+        ><kpt-icon name="x" /></button>
       }
     </span>
-  `, host: { class: 'kpt-avatar-host' }, styles: ["@layer kpt.components{.kpt-avatar-host{display:inline-flex;vertical-align:middle}.kpt-avatar{--_size: 2.5rem;display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-weight:var(--kpt-font-weight-semibold, 600);font-size:calc(var(--_size) * .4);overflow:hidden;-webkit-user-select:none;user-select:none}.kpt-avatar[data-size=sm]{--_size: 2rem}.kpt-avatar[data-size=md]{--_size: 2.5rem}.kpt-avatar[data-size=lg]{--_size: 3rem}.kpt-avatar[data-size=xl]{--_size: 4rem}.kpt-avatar[data-shape=square]{border-radius:var(--kpt-radius-md, .5rem)}.kpt-avatar__img{width:100%;height:100%;object-fit:cover}}\n"] }]
-    }], 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: 34 }); })();
+  `, 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 }); })();
 
 /**
  * Wskaźnik ładowania (spinner). Kolor z `currentColor`.
@@ -1415,6 +1749,9 @@ class KptSkeleton {
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSkeleton, { className: "KptSkeleton", filePath: "lib/skeleton/skeleton.component.ts", lineNumber: 29 }); })();
 
+/** 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$x = ["*"];
 function KptFormField_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 6);
@@ -1461,7 +1798,8 @@ function KptFormField_Conditional_6_Template(rf, ctx) { if (rf & 1) {
  * unoszącej się etykiety (Float Label) z animowanym przejściem: `over` (nad obramowaniem),
  * `in` (u góry wewnątrz pola) i `on` (na obramowaniu, notch). Uniesienie następuje przy focusie
  * (CSS `:focus-within`) lub gdy pole jest wypełnione (wykrywane po zdarzeniach `input`/`change`
- * oraz wartości początkowej) — bez wymogu placeholdera na kontrolce.
+ * oraz wartości początkowej) — bez wymogu placeholdera na kontrolce. Kontrolki bez natywnego
+ * `input`/`textarea` (np. `kpt-select`) zgłaszają wypełnienie tokenem `KPT_FORM_FIELD_CONTROL`.
  *
  * @example
  * <kpt-form-field label="E-mail" [error]="emailError()" hint="Firmowy adres">
@@ -1497,8 +1835,16 @@ class KptFormField {
         this.labelType = input('fixed', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelType" }] : /* istanbul ignore next */ []));
         this.host = inject(ElementRef);
+        /**
+         * Kontrolka bez natywnego `input`/`textarea` (np. `kpt-select`) zgłasza wypełnienie sama,
+         * przez token `KPT_FORM_FIELD_CONTROL` — jej wartość nie da się odczytać z DOM.
+         */
+        this.control = contentChild(KPT_FORM_FIELD_CONTROL, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), descendants: true });
+        /** Wypełnienie odczytane z natywnej kontrolki (zdarzenia `input`/`change` + wartość początkowa). */
+        this.nativeFilled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeFilled" }] : /* istanbul ignore next */ []));
         /** Czy projektowana kontrolka ma wartość — steruje uniesieniem etykiety w wariantach float. */
-        this.filled = signal(false, /* @ts-ignore */
+        this.filled = computed(() => this.control()?.filled() ?? this.nativeFilled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
         // Wartość początkowa (np. pole prefill) — po pierwszym renderze projekcji.
         afterNextRender(() => this.updateFilled());
@@ -1506,10 +1852,14 @@ class KptFormField {
     /** Odczytuje wartość projektowanego `input`/`textarea` i aktualizuje stan `filled`. */
     updateFilled() {
         const el = this.host.nativeElement.querySelector('.kpt-form-field__control input, .kpt-form-field__control textarea');
-        this.filled.set(!!el && el.value !== '');
+        this.nativeFilled.set(!!el && el.value !== '');
     }
     static { this.ɵfac = function KptFormField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptFormField)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFormField, selectors: [["kpt-form-field"]], hostAttrs: [1, "kpt-form-field-host"], hostBindings: function KptFormField_HostBindings(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFormField, selectors: [["kpt-form-field"]], contentQueries: function KptFormField_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.control, KPT_FORM_FIELD_CONTROL, 5);
+        } if (rf & 2) {
+            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$x, 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();
@@ -1529,7 +1879,7 @@ class KptFormField {
             i0.ɵɵconditional(ctx.label() ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.error() ? 5 : ctx.hint() ? 6 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-form-field-label)}.kpt-form-field__required{color:var(--%NS%kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--%NS%kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--%NS%kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--%NS%kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--%NS%kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--%NS%kpt-font-weight-normal, 400);color:var(--%NS%kpt-form-field-placeholder);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--%NS%kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--%NS%kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-form-field-label)}.kpt-form-field__required{color:var(--%NS%kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--%NS%kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--%NS%kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--%NS%kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--%NS%kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--%NS%kpt-font-weight-normal, 400);color:var(--%NS%kpt-form-field-placeholder);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--%NS%kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--%NS%kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFormField, [{
         type: Component,
@@ -1537,9 +1887,9 @@ class KptFormField {
                     class: 'kpt-form-field-host',
                     '(input)': 'updateFilled()',
                     '(change)': 'updateFilled()',
-                }, template: "<div\n  class=\"kpt-form-field\"\n  [class]=\"'kpt-form-field--' + labelType()\"\n  [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n  [class.kpt-form-field--invalid]=\"!!error()\"\n>\n  <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n    @if (label()) {\n      <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <div class=\"kpt-form-field__control\">\n      <ng-content />\n    </div>\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
-    }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFormField, { className: "KptFormField", filePath: "lib/form-field/form-field.component.ts", lineNumber: 46 }); })();
+                }, template: "<div\n  class=\"kpt-form-field\"\n  [class]=\"'kpt-form-field--' + labelType()\"\n  [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n  [class.kpt-form-field--invalid]=\"!!error()\"\n>\n  <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n    @if (label()) {\n      <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <div class=\"kpt-form-field__control\">\n      <ng-content />\n    </div>\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
+    }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KPT_FORM_FIELD_CONTROL), { ...{ descendants: true }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFormField, { className: "KptFormField", filePath: "lib/form-field/form-field.component.ts", lineNumber: 50 }); })();
 
 let nextUniqueId = 0;
 /**
@@ -1607,7 +1957,7 @@ class KptInput {
                     '[attr.id]': 'null',
                 }, template: "<input\n  class=\"kpt-input__field\"\n  [id]=\"id()\"\n  [type]=\"type()\"\n  [value]=\"value()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readOnly]=\"readonly()\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-invalid]=\"showInvalid() ? 'true' : null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"touch.emit()\"\n/>\n", styles: ["@layer kpt.components{.kpt-input-host{display:block}.kpt-input__field{display:block;width:100%;box-sizing:border-box;height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);font-family:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-form-field-text);background-color:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),box-shadow var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-input__field::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-input__field:hover:not(:disabled):not([aria-invalid=true]){border-color:var(--kpt-form-field-border-hover)}.kpt-input__field:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-input__field[aria-invalid=true]{border-color:var(--kpt-form-field-border-error)}.kpt-input__field[aria-invalid=true]:focus-visible{box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-error) 30%,transparent)}.kpt-input__field:disabled{cursor:not-allowed;opacity:.6;background-color:var(--kpt-color-surface-variant)}}\n"] }]
     }], 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 }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInput, { className: "KptInput", filePath: "lib/input/input.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInput, { className: "KptInput", filePath: "lib/input/input.component.ts", lineNumber: 49 }); })();
 
 const _c0$w = ["*"];
 function KptCheckbox_Conditional_5_Template(rf, ctx) { if (rf & 1) {
@@ -1660,7 +2010,7 @@ class KptCheckbox {
             i0.ɵɵattribute("aria-invalid", ctx.showInvalid() ? "true" : null);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.label() ? 5 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--%NS%kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--%NS%kpt-form-field-border-error)}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;position:relative;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--%NS%kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--%NS%kpt-form-field-border-error)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptCheckbox, [{
         type: Component,
@@ -1683,7 +2033,7 @@ class KptCheckbox {
       }
       <ng-content />
     </label>
-  `, host: { class: 'kpt-checkbox-host' }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--kpt-form-field-border-error)}}\n"] }]
+  `, host: { class: 'kpt-checkbox-host' }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;position:relative;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--kpt-form-field-border-error)}}\n"] }]
     }], 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 }); })();
 
@@ -1778,7 +2128,7 @@ class KptSwitch {
             i0.ɵɵconditional(ctx.label() && ctx.labelPosition() === "end" ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasStateLabels() ? 6 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-border-strong);transition:background-color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--%NS%kpt-color-surface);box-shadow:var(--%NS%kpt-elevation-1);transition:transform var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--%NS%kpt-color-on-surface-muted);transition:color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;position:relative;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-border-strong);transition:background-color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--%NS%kpt-color-surface);box-shadow:var(--%NS%kpt-elevation-1);transition:transform var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--%NS%kpt-color-on-surface-muted);transition:color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSwitch, [{
         type: Component,
@@ -1806,7 +2156,7 @@ class KptSwitch {
       }
       <ng-content />
     </label>
-  `, host: { class: 'kpt-switch-host' }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface-muted);transition:color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"] }]
+  `, host: { class: 'kpt-switch-host' }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;position:relative;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface-muted);transition:color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"] }]
     }], 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 }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSwitch, { className: "KptSwitch", filePath: "lib/switch/switch.component.ts", lineNumber: 53 }); })();
 
@@ -1980,7 +2330,7 @@ class KptRadioGroup {
             i0.ɵɵattribute("aria-invalid", ctx.showInvalid() ? "true" : null);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:50%;background:var(--%NS%kpt-form-field-bg);transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--%NS%kpt-color-primary);transform:scale(0);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--%NS%kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;position:relative;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:50%;background:var(--%NS%kpt-form-field-bg);transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--%NS%kpt-color-primary);transform:scale(0);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--%NS%kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptRadioGroup, [{
         type: Component,
@@ -2002,7 +2352,7 @@ class KptRadioGroup {
         </label>
       }
     </div>
-  `, host: { class: 'kpt-radio-group-host' }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
+  `, host: { class: 'kpt-radio-group-host' }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;position:relative;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRadioGroup, { className: "KptRadioGroup", filePath: "lib/radio-group/radio-group.component.ts", lineNumber: 46 }); })();
 
@@ -2179,8 +2529,12 @@ class KptSelect {
             return this.multiple() ? '' : (sel[0]?.label ?? '');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "singleLabel" }] : /* istanbul ignore next */ []));
-        this.hasValue = computed(() => this.selectedOptions().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Czy wybrano jakąkolwiek opcję. Publiczne — `kpt-form-field` czyta to przez
+         * `KPT_FORM_FIELD_CONTROL`, żeby unieść etykietę Float Label nad wybraną wartość.
+         */
+        this.filled = computed(() => this.selectedOptions().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
     }
     isSelected(opt) {
         return this.selectedValues().includes(opt.value);
@@ -2255,7 +2609,7 @@ class KptSelect {
         }
     }
     static { this.ɵfac = function KptSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSelect)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"] }, outputs: { value: "valueChange", touch: "touch" }, features: [i0.ɵɵProvidersFeature([{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }])], decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptSelect_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown", function KptSelect_Template_div_keydown_0_listener($event) { return ctx.onTriggerKeydown($event); })("blur", function KptSelect_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵelementStart(2, "div", 2);
@@ -2270,16 +2624,16 @@ class KptSelect {
             i0.ɵɵclassProp("kpt-select--open", ctx.open())("kpt-select--disabled", ctx.disabled())("kpt-select--invalid", ctx.showInvalid());
             i0.ɵɵattribute("aria-expanded", ctx.open())("aria-disabled", ctx.disabled() || null);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.multiple() && ctx.selectedOptions().length ? 3 : !ctx.multiple() && ctx.hasValue() ? 4 : 5);
+            i0.ɵɵconditional(ctx.multiple() && ctx.selectedOptions().length ? 3 : !ctx.multiple() && ctx.filled() ? 4 : 5);
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r9)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayWidth", trigger_r9.elementRef.nativeElement.offsetWidth);
         } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;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-select.kpt-select--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--%NS%kpt-color-on-surface-muted);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{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);overflow:hidden;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--%NS%kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--%NS%kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--%NS%kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--%NS%kpt-color-on-surface-muted);text-align:center}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSelect, [{
         type: Component,
-        args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, template: "<div\n  class=\"kpt-select\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [class.kpt-select--open]=\"open()\"\n  [class.kpt-select--disabled]=\"disabled()\"\n  [class.kpt-select--invalid]=\"showInvalid()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\n>\n  <div class=\"kpt-select__value\">\n    @if (multiple() && selectedOptions().length) {\n      @for (opt of selectedOptions(); track opt.value) {\n        <span class=\"kpt-select__chip\">\n          {{ opt.label }}\n          <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" [attr.aria-label]=\"i18n.t('select.removeChip')\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && hasValue()) {\n      <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n    } @else {\n      <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </div>\n  <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n    @if (filter()) {\n      <div class=\"kpt-select__search\">\n        <kpt-icon name=\"search\" />\n        <input\n          type=\"text\"\n          class=\"kpt-select__search-input\"\n          [value]=\"filterText()\"\n          (input)=\"onFilterInput($event)\"\n          [attr.placeholder]=\"i18n.t('select.search')\"\n        />\n      </div>\n    }\n    <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n      @for (opt of filteredOptions(); track opt.value; let i = $index) {\n        <li\n          class=\"kpt-select__option\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--active]=\"i === activeIndex()\"\n          [class.kpt-select__option--disabled]=\"opt.disabled\"\n          (click)=\"pick(opt)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n        >\n          @if (multiple()) {\n            <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n          }\n          <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n          @if (!multiple() && isSelected(opt)) {\n            <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n          }\n        </li>\n      } @empty {\n        <li class=\"kpt-select__empty\">{{ i18n.t('select.noResults') }}</li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
+        args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, providers: [{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }], template: "<div\n  class=\"kpt-select\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [class.kpt-select--open]=\"open()\"\n  [class.kpt-select--disabled]=\"disabled()\"\n  [class.kpt-select--invalid]=\"showInvalid()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\n>\n  <div class=\"kpt-select__value\">\n    @if (multiple() && selectedOptions().length) {\n      @for (opt of selectedOptions(); track opt.value) {\n        <span class=\"kpt-select__chip\">\n          {{ opt.label }}\n          <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" [attr.aria-label]=\"i18n.t('select.removeChip')\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && filled()) {\n      <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n    } @else {\n      <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </div>\n  <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n    @if (filter()) {\n      <div class=\"kpt-select__search\">\n        <kpt-icon name=\"search\" />\n        <input\n          type=\"text\"\n          class=\"kpt-select__search-input\"\n          [value]=\"filterText()\"\n          (input)=\"onFilterInput($event)\"\n          [attr.placeholder]=\"i18n.t('select.search')\"\n        />\n      </div>\n    }\n    <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n      @for (opt of filteredOptions(); track opt.value; let i = $index) {\n        <li\n          class=\"kpt-select__option\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--active]=\"i === activeIndex()\"\n          [class.kpt-select__option--disabled]=\"opt.disabled\"\n          (click)=\"pick(opt)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n        >\n          @if (multiple()) {\n            <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n          }\n          <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n          @if (!multiple() && isSelected(opt)) {\n            <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n          }\n        </li>\n      } @empty {\n        <li class=\"kpt-select__empty\">{{ i18n.t('select.noResults') }}</li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
     }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 37 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 40 }); })();
 
 /*
  * Pomocniki nazw dni/miesięcy wyliczane z `Intl` — sterowane bieżącym locale i18n.
@@ -2981,6 +3335,9 @@ class KptDatepicker {
         this.touch = output();
         this.placeholder = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Nazwa dostępna, gdy pola nie opisuje `<label for>` (np. dwa pola w jednym wierszu). */
+        this.ariaLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.displayFormat = input('pl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
         /** Granulacja wyboru. */
@@ -3309,7 +3666,7 @@ class KptDatepicker {
         this.pendingDate.set('');
     }
     static { this.ɵfac = function KptDatepicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDatepicker)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 13, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], ["name", "calendar", 1, "kpt-datepicker__icon"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 15, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], [1, "kpt-datepicker__icon", 3, "name"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptDatepicker_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown.enter", function KptDatepicker_Template_div_keydown_enter_0_listener() { return ctx.toggleOpen(); })("blur", function KptDatepicker_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵconditionalCreate(2, KptDatepicker_Conditional_2_Template, 2, 1, "span", 2)(3, KptDatepicker_Conditional_3_Template, 2, 1, "span", 3);
@@ -3322,19 +3679,21 @@ class KptDatepicker {
         } if (rf & 2) {
             const trigger_r25 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("kpt-datepicker--open", ctx.open())("kpt-datepicker--disabled", ctx.disabled())("kpt-datepicker--invalid", ctx.showInvalid());
-            i0.ɵɵattribute("aria-disabled", ctx.disabled() || null);
+            i0.ɵɵattribute("aria-disabled", ctx.disabled() || null)("aria-label", ctx.ariaLabel());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.display() ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.display() ? 5 : -1);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("name", ctx.selectionMode() === "time" ? "clock" : "calendar");
+            i0.ɵɵadvance();
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r25)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
         } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;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-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;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);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDatepicker, [{
         type: Component,
-        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
-    }], 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] }); })();
+        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon\n    class=\"kpt-datepicker__icon\"\n    [name]=\"selectionMode() === 'time' ? 'clock' : 'calendar'\"\n  />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
+    }], 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 }] }], 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 }] }], 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 }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 66 }); })();
 
 const _c0$u = ["ta"];
@@ -6733,7 +7092,7 @@ class KptKnob {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptKnob, { className: "KptKnob", filePath: "lib/knob/knob.component.ts", lineNumber: 41 }); })();
 
 const _c0$r = ["*", [["", "kptCardFooter", ""]]];
-const _c1$9 = ["*", "[kptCardFooter]"];
+const _c1$a = ["*", "[kptCardFooter]"];
 function KptCard_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "div", 0);
     i0.ɵɵtext(1);
@@ -6770,7 +7129,7 @@ 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$9, decls: 4, vars: 3, consts: [[1, "kpt-card__header"], [1, "kpt-card__body"]], template: function KptCard_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { variant: [1, "variant"], header: [1, "header"], flush: [1, "flush"] }, ngContentSelectors: _c1$a, 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$r);
             i0.ɵɵconditionalCreate(0, KptCard_Conditional_0_Template, 2, 1, "div", 0);
             i0.ɵɵdomElementStart(1, "div", 1);
@@ -6830,6 +7189,7 @@ const _c0$q = ["*"];
 /**
  * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
  * Elementowi z atrybutem `kptToolbarSpacer` nadaj elastyczny odstęp, aby rozepchnąć zawartość.
+ * Poniżej breakpointa `sm` pasek sam zbiega się do niższej wysokości i węższych marginesów.
  *
  * @example
  * <kpt-toolbar elevated>
@@ -6842,109 +7202,271 @@ class KptToolbar {
     constructor() {
         /** Dodaje cień (wyniesienie) pod paskiem. */
         this.elevated = input(false, { ...(ngDevMode ? { debugName: "elevated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Pozwala zawartości paska zawinąć się do kolejnych wierszy, gdy zabraknie miejsca.
+         * Opcjonalne, bo zawijanie zmienia zachowanie `kptToolbarSpacer` — w jednowierszowym
+         * pasku rozpycha on treść, a w zawijanym potrafi zepchnąć resztę do nowego wiersza.
+         */
+        this.wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = function KptToolbar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptToolbar)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptToolbar, selectors: [["kpt-toolbar"]], hostAttrs: [1, "kpt-toolbar"], hostVars: 2, hostBindings: function KptToolbar_HostBindings(rf, ctx) { if (rf & 2) {
+    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"] }, ngContentSelectors: _c0$q, decls: 1, vars: 0, template: function KptToolbar_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { elevated: [1, "elevated"], wrap: [1, "wrap"] }, ngContentSelectors: _c0$q, decls: 1, vars: 0, template: function KptToolbar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["@layer kpt.components{.kpt-toolbar{display:flex;align-items:center;gap:var(--%NS%kpt-space-3, .75rem);min-height:var(--%NS%kpt-toolbar-height, 3.5rem);padding-inline:var(--%NS%kpt-space-4, 1rem);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)}.kpt-toolbar--elevated{box-shadow:var(--%NS%kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto}}\n"], encapsulation: 2 }); }
+        } }, 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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptToolbar, [{
         type: Component,
         args: [{ selector: 'kpt-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content />', host: {
                     class: 'kpt-toolbar',
                     '[class.kpt-toolbar--elevated]': 'elevated()',
-                }, styles: ["@layer kpt.components{.kpt-toolbar{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem);min-height:var(--kpt-toolbar-height, 3.5rem);padding-inline:var(--kpt-space-4, 1rem);background:var(--kpt-toolbar-bg);color:var(--kpt-toolbar-fg);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-toolbar-border)}.kpt-toolbar--elevated{box-shadow:var(--kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto}}\n"] }]
-    }], null, { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToolbar, { className: "KptToolbar", filePath: "lib/toolbar/toolbar.component.ts", lineNumber: 25 }); })();
+                    '[attr.data-wrap]': "wrap() ? '' : null",
+                }, styles: ["@layer kpt.components{.kpt-toolbar{--_kpt-toolbar-height: var(--kpt-toolbar-height, 3.5rem);--_kpt-toolbar-padding-inline: var(--kpt-space-4, 1rem);--_kpt-toolbar-gap: var(--kpt-space-3, .75rem);display:flex;align-items:center;gap:var(--_kpt-toolbar-gap);min-height:var(--_kpt-toolbar-height);padding-inline:var(--_kpt-toolbar-padding-inline);background:var(--kpt-toolbar-bg);color:var(--kpt-toolbar-fg);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-toolbar-border);min-inline-size:0}.kpt-toolbar--elevated{box-shadow:var(--kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto;min-inline-size:0}.kpt-toolbar[data-wrap]{flex-wrap:wrap;row-gap:var(--kpt-space-2, .5rem);padding-block:var(--kpt-space-2, .5rem)}@media(max-width:639.98px){.kpt-toolbar{--_kpt-toolbar-height: var(--kpt-toolbar-height-compact, 3rem);--_kpt-toolbar-padding-inline: var(--kpt-space-3, .75rem);--_kpt-toolbar-gap: var(--kpt-space-2, .5rem)}}}\n"] }]
+    }], 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$p = ["*"];
+const _c0$p = ["*", [["", "kptSidenavFooter", ""]]];
+const _c1$9 = ["*", "[kptSidenavFooter]"];
 /**
  * Panel boczny (sidenav) — stylowany kontener nawigacji, zwykle umieszczany w slocie
  * `kptShellSidenav` komponentu `kpt-app-shell`.
  *
+ * Treść domyślna ląduje w obszarze przewijanym. Element opatrzony atrybutem `kptSidenavFooter`
+ * trafia do stopki stojącej **poza** tym obszarem, więc zostaje przyklejony do dołu panelu
+ * niezależnie od długości nawigacji (blok użytkownika, wersja aplikacji, przełącznik motywu).
+ *
  * @example
  * <kpt-sidenav kptShellSidenav>
  *   <a href="#">Pulpit</a>
  *   <a href="#">Ustawienia</a>
+ *   <div kptSidenavFooter>
+ *     <kpt-avatar name="Anna Kowalska" size="sm" />
+ *   </div>
  * </kpt-sidenav>
  */
 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: _c0$p, decls: 1, vars: 0, template: function KptSidenav_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵprojection(0);
-        } }, styles: ["@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem);width:100%;height:100%;box-sizing:border-box;padding:var(--%NS%kpt-space-3, .75rem);overflow-y:auto;background:var(--%NS%kpt-sidenav-bg);color:var(--%NS%kpt-sidenav-fg);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-sidenav-border)}.kpt-sidenav a{display:block;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-md, .5rem);color:inherit;text-decoration:none;font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-sidenav a:hover{background:var(--%NS%kpt-color-muted)}}\n"], encapsulation: 2 }); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSidenav, selectors: [["kpt-sidenav"]], hostAttrs: [1, "kpt-sidenav"], ngContentSelectors: _c1$9, decls: 3, vars: 0, consts: [[1, "kpt-sidenav__scroll"]], template: function KptSidenav_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c0$p);
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵprojection(1);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵprojection(2, 1);
+        } }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;background:var(--%NS%kpt-sidenav-bg);color:var(--%NS%kpt-sidenav-fg);border-inline-end:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-sidenav-border)}.kpt-sidenav__scroll{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem);flex:1 1 auto;min-block-size:0;box-sizing:border-box;padding:var(--%NS%kpt-space-3, .75rem);overflow-y:auto}.kpt-sidenav__scroll a{display:block;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-radius:var(--%NS%kpt-radius-md, .5rem);color:inherit;text-decoration:none;font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-sidenav__scroll a:hover{background:var(--%NS%kpt-color-muted)}.kpt-sidenav [kptSidenavFooter]{flex:0 0 auto;box-sizing:border-box;padding:var(--%NS%kpt-space-3, .75rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-sidenav-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSidenav, [{
         type: Component,
-        args: [{ selector: 'kpt-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content />', host: { class: 'kpt-sidenav' }, styles: ["@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem);width:100%;height:100%;box-sizing:border-box;padding:var(--kpt-space-3, .75rem);overflow-y:auto;background:var(--kpt-sidenav-bg);color:var(--kpt-sidenav-fg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border)}.kpt-sidenav a{display:block;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-md, .5rem);color:inherit;text-decoration:none;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-sidenav a:hover{background:var(--kpt-color-muted)}}\n"] }]
+        args: [{ selector: 'kpt-sidenav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<div class="kpt-sidenav__scroll"><ng-content /></div><ng-content select="[kptSidenavFooter]" />', host: { class: 'kpt-sidenav' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-sidenav{display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box;background:var(--kpt-sidenav-bg);color:var(--kpt-sidenav-fg);border-inline-end:var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border)}.kpt-sidenav__scroll{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem);flex:1 1 auto;min-block-size:0;box-sizing:border-box;padding:var(--kpt-space-3, .75rem);overflow-y:auto}.kpt-sidenav__scroll a{display:block;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-radius:var(--kpt-radius-md, .5rem);color:inherit;text-decoration:none;font-size:var(--kpt-font-size-sm, .875rem)}.kpt-sidenav__scroll a:hover{background:var(--kpt-color-muted)}.kpt-sidenav [kptSidenavFooter]{flex:0 0 auto;box-sizing:border-box;padding:var(--kpt-space-3, .75rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-sidenav-border)}}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSidenav, { className: "KptSidenav", filePath: "lib/sidenav/sidenav.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSidenav, { className: "KptSidenav", filePath: "lib/sidenav/sidenav.component.ts", lineNumber: 30 }); })();
 
 const _c0$o = [[["", "kptShellToolbar", ""]], [["", "kptShellSidenav", ""]], "*"];
 const _c1$8 = ["[kptShellToolbar]", "[kptShellSidenav]", "*"];
-function KptAppShell_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 4);
-    i0.ɵɵdomListener("click", function KptAppShell_Conditional_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onScrimClick()); });
-    i0.ɵɵdomElementEnd();
-} }
 /**
- * Szkielet aplikacji (app shell) w stylu Material: toolbar u góry, panel boczny i treść.
- * Sloty projekcji: `[kptShellToolbar]`, `[kptShellSidenav]`, oraz treść domyślna.
+ * Szkielet aplikacji: pasek u góry, panel boczny i treść. Sloty projekcji:
+ * `[kptShellToolbar]`, `[kptShellSidenav]` oraz treść domyślna.
+ *
+ * Domyślny tryb `auto` jest responsywny bez konfiguracji: od `sidenavBreakpoint` w górę
+ * panel jest zadokowany, poniżej zachowuje się jak nakładka ze scrimem i startuje zamknięty.
+ * Opcjonalny `sidenavRailBreakpoint` wstawia między te pasma szynę ikon.
+ *
+ * O układzie decyduje wyłącznie CSS — nic nie migocze przed hydracją i nic nie zależy od
+ * `matchMedia`. JavaScript odpowiada tylko za to, KTÓRY stan przełącza przycisk.
+ *
+ * Panel ma dwa niezależne stany otwarcia (`sidenavOpen` dla układu zadokowanego,
+ * `sidenavCompactOpen` dla nakładki), więc intencja z desktopu przeżywa zwężenie
+ * i ponowne rozszerzenie okna.
  *
  * @example
- * <kpt-app-shell [(sidenavOpen)]="navOpen" sidenavMode="side">
- *   <kpt-toolbar kptShellToolbar>…</kpt-toolbar>
+ * <kpt-app-shell [(sidenavOpen)]="navOpen">
+ *   <kpt-toolbar kptShellToolbar>
+ *     <button kptShellNavToggle type="button"><kpt-icon name="menu" /></button>
+ *   </kpt-toolbar>
  *   <kpt-sidenav kptShellSidenav>…</kpt-sidenav>
  *   <router-outlet />
  * </kpt-app-shell>
  */
 class KptAppShell {
+    static { this.nextId = 0; }
     constructor() {
-        /** Czy panel boczny jest otwarty (dwukierunkowe). */
+        this.breakpoints = inject(KptBreakpointObserver);
+        this.i18n = inject(KptI18n);
+        /** Czy panel jest otwarty w układzie zadokowanym (oraz w wymuszonym trybie `over`). */
         this.sidenavOpen = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sidenavOpen" }] : /* istanbul ignore next */ []));
-        /** Tryb panelu: 'side' rozpycha treść, 'over' nakłada się ze scrimem. */
-        this.sidenavMode = input('side', /* @ts-ignore */
+        /**
+         * Czy nakładka jest wysunięta w trybie `auto` poniżej `sidenavBreakpoint`.
+         *
+         * Celowo osobny od `sidenavOpen`: gdyby oba układy dzieliły jeden model, wejście na wąski
+         * ekran musiałoby nadpisać stan konsumenta, a powrót na szeroki nie miałby czego przywrócić.
+         */
+        this.sidenavCompactOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavCompactOpen" }] : /* istanbul ignore next */ []));
+        /** `auto` przełącza układ na breakpoincie; `side`/`over` wymuszają go niezależnie od szerokości. */
+        this.sidenavMode = input('auto', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sidenavMode" }] : /* istanbul ignore next */ []));
+        /** Od tego breakpointa w górę tryb `auto` dokuje panel; poniżej robi z niego nakładkę. */
+        this.sidenavBreakpoint = input('lg', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavBreakpoint" }] : /* istanbul ignore next */ []));
+        /**
+         * Włącza szynę ikon w paśmie od `sidenavBreakpoint` do tego breakpointa: zamknięty panel
+         * nie chowa się wtedy całkowicie, tylko zwęża do `--kpt-sidenav-rail-width`. Powyżej tego
+         * progu zamknięcie znów chowa panel w całości. Wartość musi być wyższa niż `sidenavBreakpoint`.
+         * `null` (domyślnie) wyłącza szynę.
+         */
+        this.sidenavRailBreakpoint = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavRailBreakpoint" }] : /* istanbul ignore next */ []));
+        /** Etykieta dostępności panelu; puste = `appShell.navigation` ze słownika. */
+        this.sidenavLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavLabel" }] : /* istanbul ignore next */ []));
+        /** Identyfikator panelu dla `aria-controls` przycisku przełączającego. */
+        this.sidenavId = `kpt-app-shell-nav-${KptAppShell.nextId++}`;
+        /** Czy panel zachowuje się TERAZ jak nakładka nad treścią. */
+        this.isOverlay = computed(() => {
+            const mode = this.sidenavMode();
+            if (mode === 'over')
+                return true;
+            if (mode === 'side')
+                return false;
+            return !this.breakpoints.up(this.sidenavBreakpoint())();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+        /** Efektywny stan otwarcia — ten, który obowiązuje w bieżącym układzie. */
+        this.isSidenavOpen = computed(() => this.usesCompactState() ? this.sidenavCompactOpen() : this.sidenavOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSidenavOpen" }] : /* istanbul ignore next */ []));
+        this.navLabel = computed(() => this.sidenavLabel() || this.i18n.t('appShell.navigation'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
+        /** Scrim blokuje wskaźnik, ale nie klawiaturę — treść pod nakładką nie może łapać fokusu. */
+        this.contentInert = computed(() => this.isOverlay() && this.isSidenavOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentInert" }] : /* istanbul ignore next */ []));
+        // Wyjście z nakładki chowa ją na wejściu: inaczej wróciłaby otwarta przy kolejnym
+        // zwężeniu okna, mimo że użytkownik jej wtedy nie otwierał.
+        effect(() => {
+            if (!this.isOverlay())
+                this.sidenavCompactOpen.set(false);
+        });
+    }
+    /** Przełącza panel — trafia w stan właściwy dla bieżącego układu. */
+    toggleSidenav() {
+        this.setSidenavOpen(!this.isSidenavOpen());
+    }
+    /** Otwiera panel w bieżącym układzie. */
+    openSidenav() {
+        this.setSidenavOpen(true);
+    }
+    /** Zamyka panel w bieżącym układzie. */
+    closeSidenav() {
+        this.setSidenavOpen(false);
     }
     onScrimClick() {
-        if (this.sidenavMode() === 'over') {
-            this.sidenavOpen.set(false);
-        }
+        // Scrim jest klikalny tylko wtedy, gdy CSS uczynił go widocznym — nie trzeba sprawdzać trybu.
+        this.closeSidenav();
+    }
+    onEscape() {
+        if (this.isOverlay() && this.isSidenavOpen())
+            this.closeSidenav();
+    }
+    usesCompactState() {
+        return this.sidenavMode() === 'auto' && this.isOverlay();
+    }
+    setSidenavOpen(open) {
+        if (this.usesCompactState())
+            this.sidenavCompactOpen.set(open);
+        else
+            this.sidenavOpen.set(open);
     }
     static { this.ɵfac = function KptAppShell_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAppShell)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAppShell, selectors: [["kpt-app-shell"]], hostAttrs: [1, "kpt-app-shell"], hostVars: 3, hostBindings: function KptAppShell_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵattribute("data-sidenav-mode", ctx.sidenavMode());
-            i0.ɵɵclassProp("kpt-app-shell--nav-open", ctx.sidenavOpen());
-        } }, inputs: { sidenavOpen: [1, "sidenavOpen"], sidenavMode: [1, "sidenavMode"] }, outputs: { sidenavOpen: "sidenavOpenChange" }, ngContentSelectors: _c1$8, decls: 7, vars: 1, consts: [[1, "kpt-app-shell__body"], [1, "kpt-app-shell__sidenav"], [1, "kpt-app-shell__scrim"], [1, "kpt-app-shell__content"], [1, "kpt-app-shell__scrim", 3, "click"]], template: function KptAppShell_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAppShell, selectors: [["kpt-app-shell"]], hostAttrs: [1, "kpt-app-shell"], hostVars: 7, hostBindings: function KptAppShell_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function KptAppShell_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
+        } 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$8, 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$o);
             i0.ɵɵprojection(0);
             i0.ɵɵdomElementStart(1, "div", 0)(2, "aside", 1);
             i0.ɵɵprojection(3, 1);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(4, KptAppShell_Conditional_4_Template, 1, 0, "div", 2);
+            i0.ɵɵdomElementStart(4, "div", 2);
+            i0.ɵɵdomListener("click", function KptAppShell_Template_div_click_4_listener() { return ctx.onScrimClick(); });
+            i0.ɵɵdomElementEnd();
             i0.ɵɵdomElementStart(5, "main", 3);
             i0.ɵɵprojection(6, 2);
             i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.sidenavMode() === "over" && ctx.sidenavOpen() ? 4 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--%NS%kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard),transform var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--%NS%kpt-color-overlay-scrim);z-index:calc(var(--%NS%kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--%NS%kpt-z-overlay, 1100);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"], encapsulation: 2 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵdomProperty("id", ctx.sidenavId);
+            i0.ɵɵattribute("aria-label", ctx.navLabel());
+            i0.ɵɵadvance(3);
+            i0.ɵɵattribute("inert", ctx.contentInert() ? "" : null);
+        } }, styles: ["@layer kpt.components{.kpt-app-shell{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-z: var(--%NS%kpt-z-overlay, 1100);--%NS%_kpt-shell-duration: var(--%NS%kpt-motion-duration-base, .2s);--%NS%_kpt-shell-easing: var(--%NS%kpt-motion-easing-standard);--%NS%_kpt-shell-out: -100%;display:flex;flex-direction:column;block-size:100vh;block-size:100dvh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-block-size:0}.kpt-app-shell__sidenav{inline-size:var(--%NS%_kpt-shell-sidenav-width);flex-shrink:0;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;transition:margin-inline-start var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),inline-size var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),translate var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),visibility 0s linear var(--%NS%_kpt-shell-vis-delay, 0s)}.kpt-app-shell__content{flex:1;min-inline-size:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--%NS%kpt-color-overlay-scrim);z-index:calc(var(--%NS%_kpt-shell-z) - 1);opacity:0;visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration);transition:opacity var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),visibility 0s linear var(--%NS%_kpt-shell-vis-delay, 0s)}.kpt-app-shell__sidenav [kptNavLabel],.kpt-app-shell__sidenav [kptNavSection]{position:var(--%NS%_kpt-shell-label-position, static);inline-size:var(--%NS%_kpt-shell-label-size, auto);block-size:var(--%NS%_kpt-shell-label-size, auto);overflow:var(--%NS%_kpt-shell-label-overflow, visible);clip-path:var(--%NS%_kpt-shell-label-clip, none);white-space:var(--%NS%_kpt-shell-label-wrap, normal)}:where(.kpt-app-shell__sidenav) :where(a,button){text-align:var(--%NS%_kpt-shell-item-align, start)}[dir=rtl] .kpt-app-shell,.kpt-app-shell[dir=rtl]{--%NS%_kpt-shell-out: 100%}.kpt-app-shell[data-sidenav-mode=side]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__scrim{display:none}.kpt-app-shell[data-sidenav-mode=over]{--%NS%_kpt-shell-sidenav-width: min(var(--%NS%kpt-sidenav-width, 16rem), 85vw);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--%NS%_kpt-shell-z);box-shadow:var(--%NS%kpt-elevation-3);--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{translate:var(--%NS%_kpt-shell-out) 0;visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=over].kpt-app-shell--nav-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]{--%NS%_kpt-shell-sidenav-width: min(var(--%NS%kpt-sidenav-width, 16rem), 85vw);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--%NS%_kpt-shell-z);box-shadow:var(--%NS%kpt-elevation-3);--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]:not(.kpt-app-shell--nav-compact-open) .kpt-app-shell__sidenav{translate:var(--%NS%_kpt-shell-out) 0;visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=auto].kpt-app-shell--nav-compact-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--%NS%_kpt-shell-vis-delay: 0s}@media(min-width:640px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:640px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__scrim{display:none}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__scrim{display:none}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__scrim{display:none}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__scrim{display:none}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__scrim{display:none}}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav,.kpt-app-shell__scrim{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAppShell, [{
         type: Component,
         args: [{ selector: 'kpt-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                     class: 'kpt-app-shell',
                     '[attr.data-sidenav-mode]': 'sidenavMode()',
+                    '[attr.data-sidenav-breakpoint]': 'sidenavBreakpoint()',
+                    '[attr.data-sidenav-rail]': 'sidenavRailBreakpoint()',
                     '[class.kpt-app-shell--nav-open]': 'sidenavOpen()',
-                }, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside class=\"kpt-app-shell__sidenav\">\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  @if (sidenavMode() === 'over' && sidenavOpen()) {\n    <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n  }\n\n  <main class=\"kpt-app-shell__content\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"] }]
-    }], null, { sidenavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavOpen", required: false }] }, { type: i0.Output, args: ["sidenavOpenChange"] }], sidenavMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMode", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAppShell, { className: "KptAppShell", filePath: "lib/app-shell/app-shell.component.ts", lineNumber: 28 }); })();
+                    '[class.kpt-app-shell--nav-compact-open]': 'sidenavCompactOpen()',
+                    '(document:keydown.escape)': 'onEscape()',
+                }, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside\n    class=\"kpt-app-shell__sidenav\"\n    role=\"navigation\"\n    tabindex=\"-1\"\n    [id]=\"sidenavId\"\n    [attr.aria-label]=\"navLabel()\"\n  >\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  <!--\n    Scrim jest zawsze w DOM, a jego widoczno\u015Bci\u0105 steruje wy\u0142\u0105cznie CSS. Dzi\u0119ki temu nak\u0142adka\n    wygl\u0105da poprawnie ju\u017C na pierwszej klatce \u2014 tak\u017Ce przed hydracj\u0105 i przy wy\u0142\u0105czonym JS.\n  -->\n  <div class=\"kpt-app-shell__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n\n  <main class=\"kpt-app-shell__content\" [attr.inert]=\"contentInert() ? '' : null\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-z: var(--kpt-z-overlay, 1100);--_kpt-shell-duration: var(--kpt-motion-duration-base, .2s);--_kpt-shell-easing: var(--kpt-motion-easing-standard);--_kpt-shell-out: -100%;display:flex;flex-direction:column;block-size:100vh;block-size:100dvh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-block-size:0}.kpt-app-shell__sidenav{inline-size:var(--_kpt-shell-sidenav-width);flex-shrink:0;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;transition:margin-inline-start var(--_kpt-shell-duration) var(--_kpt-shell-easing),inline-size var(--_kpt-shell-duration) var(--_kpt-shell-easing),translate var(--_kpt-shell-duration) var(--_kpt-shell-easing),visibility 0s linear var(--_kpt-shell-vis-delay, 0s)}.kpt-app-shell__content{flex:1;min-inline-size:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--_kpt-shell-z) - 1);opacity:0;visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration);transition:opacity var(--_kpt-shell-duration) var(--_kpt-shell-easing),visibility 0s linear var(--_kpt-shell-vis-delay, 0s)}.kpt-app-shell__sidenav [kptNavLabel],.kpt-app-shell__sidenav [kptNavSection]{position:var(--_kpt-shell-label-position, static);inline-size:var(--_kpt-shell-label-size, auto);block-size:var(--_kpt-shell-label-size, auto);overflow:var(--_kpt-shell-label-overflow, visible);clip-path:var(--_kpt-shell-label-clip, none);white-space:var(--_kpt-shell-label-wrap, normal)}:where(.kpt-app-shell__sidenav) :where(a,button){text-align:var(--_kpt-shell-item-align, start)}[dir=rtl] .kpt-app-shell,.kpt-app-shell[dir=rtl]{--_kpt-shell-out: 100%}.kpt-app-shell[data-sidenav-mode=side]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__scrim{display:none}.kpt-app-shell[data-sidenav-mode=over]{--_kpt-shell-sidenav-width: min(var(--kpt-sidenav-width, 16rem), 85vw);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--_kpt-shell-z);box-shadow:var(--kpt-elevation-3);--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{translate:var(--_kpt-shell-out) 0;visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=over].kpt-app-shell--nav-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]{--_kpt-shell-sidenav-width: min(var(--kpt-sidenav-width, 16rem), 85vw);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--_kpt-shell-z);box-shadow:var(--kpt-elevation-3);--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]:not(.kpt-app-shell--nav-compact-open) .kpt-app-shell__sidenav{translate:var(--_kpt-shell-out) 0;visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=auto].kpt-app-shell--nav-compact-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--_kpt-shell-vis-delay: 0s}@media(min-width:640px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:640px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__scrim{display:none}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__scrim{display:none}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__scrim{display:none}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__scrim{display:none}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__scrim{display:none}}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav,.kpt-app-shell__scrim{transition:none}}}\n"] }]
+    }], () => [], { sidenavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavOpen", required: false }] }, { type: i0.Output, args: ["sidenavOpenChange"] }], sidenavCompactOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavCompactOpen", required: false }] }, { type: i0.Output, args: ["sidenavCompactOpenChange"] }], sidenavMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMode", required: false }] }], sidenavBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavBreakpoint", required: false }] }], sidenavRailBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavRailBreakpoint", required: false }] }], sidenavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavLabel", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAppShell, { className: "KptAppShell", filePath: "lib/app-shell/app-shell.component.ts", lineNumber: 63 }); })();
+
+/**
+ * Przycisk przełączający panel boczny `kpt-app-shell`. Umieść go w slocie
+ * `[kptShellToolbar]` — dyrektywa sama odnajdzie shell w drzewie deklaracji.
+ *
+ * Trafia w stan właściwy dla bieżącego układu (zadokowany albo nakładka), więc jeden
+ * przycisk obsługuje desktop i wąski ekran. Bez tej dyrektywy aplikacja musiałaby sama
+ * wstrzyknąć `KptBreakpointObserver` i rozstrzygnąć, który z dwóch modeli przełączyć.
+ *
+ * Atrybuty ARIA nakłada wyłącznie na natywny `<button>`/`<a>`. Na komponencie opakowującym
+ * (np. `kpt-icon-button`) trafiłyby na zewnętrzny element bez roli, co jest naruszeniem
+ * `aria-allowed-attr` — tam etykietę podaj samemu komponentowi.
+ *
+ * @example
+ * <button kptShellNavToggle type="button"><kpt-icon name="menu" /></button>
+ * <kpt-icon-button kptShellNavToggle ariaLabel="Menu"><kpt-icon name="menu" /></kpt-icon-button>
+ */
+class KptShellNavToggle {
+    constructor() {
+        /** Własna etykieta przycisku; puste = `appShell.toggleNavigation` ze słownika. */
+        this.label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'kptShellNavToggle' });
+        this.shell = inject(KptAppShell);
+        this.i18n = inject(KptI18n);
+        this.isNativeControl = /^(?:BUTTON|A)$/.test(inject(ElementRef).nativeElement.tagName);
+        this.ariaExpanded = computed(() => this.isNativeControl ? String(this.shell.isSidenavOpen()) : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+        this.ariaControls = computed(() => (this.isNativeControl ? this.shell.sidenavId : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => this.isNativeControl ? this.label() || this.i18n.t('appShell.toggleNavigation') : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function KptShellNavToggle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptShellNavToggle)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: KptShellNavToggle, selectors: [["", "kptShellNavToggle", ""]], hostVars: 3, hostBindings: function KptShellNavToggle_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function KptShellNavToggle_click_HostBindingHandler() { return ctx.shell.toggleSidenav(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-expanded", ctx.ariaExpanded())("aria-controls", ctx.ariaControls())("aria-label", ctx.ariaLabel());
+        } }, inputs: { label: [1, "kptShellNavToggle", "label"] } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptShellNavToggle, [{
+        type: Directive,
+        args: [{
+                selector: '[kptShellNavToggle]',
+                host: {
+                    '(click)': 'shell.toggleSidenav()',
+                    '[attr.aria-expanded]': 'ariaExpanded()',
+                    '[attr.aria-controls]': 'ariaControls()',
+                    '[attr.aria-label]': 'ariaLabel()',
+                },
+            }]
+    }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptShellNavToggle", required: false }] }] }); })();
 
 const _c0$n = [[["", "kptPanelActions", ""]], "*"];
 const _c1$7 = ["[kptPanelActions]", "*"];
@@ -10417,15 +10939,47 @@ class KptDialog {
         this.i18n = inject(KptI18n);
         this.dialogRef = viewChild('dlg', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []));
+        this.overlayContainer = inject(OverlayContainer);
+        /** Miejsce, z którego zabraliśmy kontener overlayów — żeby go tam oddać. */
+        this.overlayHome = null;
         effect(() => {
             const el = this.dialogRef()?.nativeElement;
             if (!el)
                 return;
-            if (this.open() && !el.open)
+            if (this.open() && !el.open) {
                 el.showModal();
-            else if (!this.open() && el.open)
+                this.adoptOverlayContainer(el);
+            }
+            else if (!this.open() && el.open) {
                 el.close();
+                this.releaseOverlayContainer();
+            }
         });
+        // Zamknięcie przez `close`/`cancel` też przechodzi tędy, ale zniszczenie komponentu
+        // z otwartym oknem już nie — kontener musi wrócić na miejsce niezależnie od drogi.
+        inject(DestroyRef).onDestroy(() => this.releaseOverlayContainer());
+    }
+    /**
+     * Przenosi kontener CDK Overlay do wnętrza `<dialog>` na czas, gdy okno jest otwarte.
+     *
+     * `showModal()` wynosi okno do **warstwy szczytowej** przeglądarki, a ta jest ponad
+     * całym drzewem dokumentu — żaden `z-index` tego nie przebije. Kontener overlayów
+     * wisi na `<body>`, więc panele `kpt-select`, `kpt-datepicker`, `kpt-autocomplete`
+     * czy `kpt-menu` otwierałyby się NIEWIDOCZNE, schowane za tłem okna.
+     */
+    adoptOverlayContainer(dialog) {
+        const container = this.overlayContainer.getContainerElement();
+        if (container.parentElement === dialog)
+            return;
+        this.overlayHome = container.parentElement;
+        dialog.appendChild(container);
+    }
+    releaseOverlayContainer() {
+        if (!this.overlayHome)
+            return;
+        // `getContainerElement()` nie tworzy nowego kontenera — zwraca ten sam, który zabraliśmy.
+        this.overlayHome.appendChild(this.overlayContainer.getContainerElement());
+        this.overlayHome = null;
     }
     onCancel(event) {
         if (!this.dismissible()) {
@@ -10452,7 +11006,7 @@ class KptDialog {
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.header() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--%NS%kpt-color-overlay-scrim)}.kpt-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-5, 1.25rem) var(--%NS%kpt-space-6, 1.5rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-dialog__title{font-size:var(--%NS%kpt-font-size-lg, 1.125rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-dialog__body{padding:var(--%NS%kpt-space-6, 1.5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);overflow-y:auto}.kpt-dialog [kptDialogFooter]{display:flex;justify-content:flex-end;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-6, 1.5rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--%NS%kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-5, 1.25rem) var(--%NS%kpt-space-6, 1.5rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-dialog__title{font-size:var(--%NS%kpt-font-size-lg, 1.125rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--%NS%kpt-space-6, 1.5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;justify-content:flex-end;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-6, 1.5rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDialog, [{
         type: Component,
@@ -10469,9 +11023,9 @@ class KptDialog {
       <div class="kpt-dialog__body"><ng-content /></div>
       <ng-content select="[kptDialogFooter]" />
     </dialog>
-  `, host: { class: 'kpt-dialog-host' }, styles: ["@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--kpt-color-overlay-scrim)}.kpt-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-5, 1.25rem) var(--kpt-space-6, 1.5rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-dialog__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--kpt-color-on-surface)}.kpt-dialog__body{padding:var(--kpt-space-6, 1.5rem);font-size:var(--kpt-font-size-sm, .875rem);overflow-y:auto}.kpt-dialog [kptDialogFooter]{display:flex;justify-content:flex-end;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}}\n"] }]
+  `, host: { class: 'kpt-dialog-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-5, 1.25rem) var(--kpt-space-6, 1.5rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-dialog__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--kpt-space-6, 1.5rem);font-size:var(--kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;justify-content:flex-end;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}}\n"] }]
     }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialogRef: [{ type: i0.ViewChild, args: ['dlg', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDialog, { className: "KptDialog", filePath: "lib/dialog/dialog.component.ts", lineNumber: 51 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDialog, { className: "KptDialog", filePath: "lib/dialog/dialog.component.ts", lineNumber: 53 }); })();
 
 /**
  * Serwis powiadomień (toastów). Wstrzyknij i wywołuj `show`/`success`/`error`/...;
@@ -10607,37 +11161,106 @@ function KptMenu_ng_template_3_For_2_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(0, "div", 4);
 } }
 function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kpt-icon", 7);
+    i0.ɵɵelement(0, "kpt-avatar", 7);
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵproperty("name", item_r2.icon);
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("src", item_r1.avatar.src ?? null)("name", item_r1.avatar.name ?? "")("icon", item_r1.avatar.icon ?? null);
+} }
+function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 8);
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("name", item_r1.icon);
+} }
+function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r1.label);
+} }
+function KptMenu_ng_template_3_For_2_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r1.description);
 } }
 function KptMenu_ng_template_3_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 6);
-    i0.ɵɵlistener("click", function KptMenu_ng_template_3_For_2_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const item_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pick(item_r2)); });
-    i0.ɵɵconditionalCreate(1, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_1_Template, 1, 1, "kpt-icon", 7);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵconditionalCreate(1, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_1_Template, 1, 3, "kpt-avatar", 7)(2, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_2_Template, 1, 1, "kpt-icon", 8);
+    i0.ɵɵelementStart(3, "span", 9);
+    i0.ɵɵconditionalCreate(4, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_4_Template, 2, 1, "span", 10);
+    i0.ɵɵconditionalCreate(5, KptMenu_ng_template_3_For_2_Conditional_1_Conditional_5_Template, 2, 1, "span", 11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r2 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassProp("kpt-menu__item--danger", item_r2.danger);
-    i0.ɵɵproperty("disabled", item_r2.disabled);
+    const item_r1 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r2.icon ? 1 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r2.label);
+    i0.ɵɵconditional(item_r1.avatar ? 1 : item_r1.icon ? 2 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r1.label ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.description ? 5 : -1);
+} }
+function KptMenu_ng_template_3_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 8);
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("name", item_r1.icon);
+} }
+function KptMenu_ng_template_3_For_2_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r1.description);
+} }
+function KptMenu_ng_template_3_For_2_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-badge", 13);
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", item_r1.badge)("variant", item_r1.badgeVariant ?? "primary");
+} }
+function KptMenu_ng_template_3_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 12);
+    i0.ɵɵlistener("click", function KptMenu_ng_template_3_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const item_r1 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.pick(item_r1)); });
+    i0.ɵɵconditionalCreate(1, KptMenu_ng_template_3_For_2_Conditional_2_Conditional_1_Template, 1, 1, "kpt-icon", 8);
+    i0.ɵɵelementStart(2, "span", 9)(3, "span", 10);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, KptMenu_ng_template_3_For_2_Conditional_2_Conditional_5_Template, 2, 1, "span", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, KptMenu_ng_template_3_For_2_Conditional_2_Conditional_6_Template, 1, 2, "kpt-badge", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("kpt-menu__item--danger", item_r1.danger);
+    i0.ɵɵproperty("disabled", item_r1.disabled);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.icon ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r1.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.description ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r1.badge !== undefined && item_r1.badge !== null ? 6 : -1);
 } }
 function KptMenu_ng_template_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptMenu_ng_template_3_For_2_Conditional_0_Template, 1, 0, "div", 4)(1, KptMenu_ng_template_3_For_2_Conditional_1_Template, 4, 5, "button", 5);
+    i0.ɵɵconditionalCreate(0, KptMenu_ng_template_3_For_2_Conditional_0_Template, 1, 0, "div", 4)(1, KptMenu_ng_template_3_For_2_Conditional_1_Template, 6, 3, "div", 5)(2, KptMenu_ng_template_3_For_2_Conditional_2_Template, 7, 7, "button", 6);
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
-    i0.ɵɵconditional(item_r2.separator ? 0 : 1);
+    const item_r1 = ctx.$implicit;
+    i0.ɵɵconditional(item_r1.separator ? 0 : item_r1.header ? 1 : 2);
 } }
 function KptMenu_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵrepeaterCreate(1, KptMenu_ng_template_3_For_2_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(1, KptMenu_ng_template_3_For_2_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -10679,7 +11302,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"] }, outputs: { select: "select" }, 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"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "kpt-menu__item--danger", "disabled"], ["type", "button", "role", "menuitem", 1, "kpt-menu__item", 3, "click", "disabled"], [3, "name"]], 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"] }, outputs: { select: "select" }, 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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "span", 1, 0);
             i0.ɵɵlistener("click", function KptMenu_Template_span_click_0_listener() { return ctx.toggle(); });
@@ -10691,11 +11314,11 @@ class KptMenu {
             const origin_r4 = i0.ɵɵreference(1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", origin_r4)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
-        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;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)}.kpt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--%NS%kpt-color-danger)}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;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)}.kpt-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--%NS%kpt-color-danger)}.kpt-menu__header{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:default}.kpt-menu__header .kpt-menu__label{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-menu__header kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-menu__label,.kpt-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-menu__description{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-menu__badge{margin-inline-start:auto}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptMenu, [{
         type: Component,
-        args: [{ selector: 'kpt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], template: `
+        args: [{ selector: 'kpt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptAvatar, KptBadge, KptIcon], template: `
     <span class="kpt-menu__trigger" cdkOverlayOrigin #origin="cdkOverlayOrigin" (click)="toggle()">
       <ng-content />
     </span>
@@ -10714,6 +11337,23 @@ class KptMenu {
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div class="kpt-menu__separator" role="separator"></div>
+          } @else if (item.header) {
+            <div class="kpt-menu__header" role="presentation">
+              @if (item.avatar) {
+                <kpt-avatar
+                  [src]="item.avatar.src ?? null"
+                  [name]="item.avatar.name ?? ''"
+                  [icon]="item.avatar.icon ?? null"
+                  size="sm"
+                />
+              } @else if (item.icon) {
+                <kpt-icon [name]="item.icon" />
+              }
+              <span class="kpt-menu__text">
+                @if (item.label) { <span class="kpt-menu__label">{{ item.label }}</span> }
+                @if (item.description) { <span class="kpt-menu__description">{{ item.description }}</span> }
+              </span>
+            </div>
           } @else {
             <button
               type="button"
@@ -10724,15 +11364,21 @@ class KptMenu {
               (click)="pick(item)"
             >
               @if (item.icon) { <kpt-icon [name]="item.icon" /> }
-              <span>{{ item.label }}</span>
+              <span class="kpt-menu__text">
+                <span class="kpt-menu__label">{{ item.label }}</span>
+                @if (item.description) { <span class="kpt-menu__description">{{ item.description }}</span> }
+              </span>
+              @if (item.badge !== undefined && item.badge !== null) {
+                <kpt-badge class="kpt-menu__badge" [value]="item.badge" [variant]="item.badgeVariant ?? 'primary'" />
+              }
             </button>
           }
         }
       </div>
     </ng-template>
-  `, host: { class: 'kpt-menu-host' }, styles: ["@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;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)}.kpt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
+  `, host: { class: 'kpt-menu-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-menu-host{display:inline-flex}.kpt-menu__trigger{display:inline-flex;cursor:pointer}.kpt-menu__panel{min-width:11rem;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)}.kpt-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:.5rem .6rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-size:var(--kpt-font-size-sm, .875rem);text-align:start;cursor:pointer}.kpt-menu__item:hover:not(:disabled){background:var(--kpt-color-surface-variant)}.kpt-menu__item:disabled{opacity:.45;cursor:not-allowed}.kpt-menu__item--danger{color:var(--kpt-color-danger)}.kpt-menu__item kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-menu__item--danger kpt-icon{color:var(--kpt-color-danger)}.kpt-menu__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.5rem .6rem;font-size:var(--kpt-font-size-sm, .875rem);cursor:default}.kpt-menu__header .kpt-menu__label{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-menu__header kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-menu__label,.kpt-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-menu__description{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-menu__badge{margin-inline-start:auto}.kpt-menu__separator{height:1px;margin:.25rem 0;background:var(--kpt-color-border)}}\n"] }]
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber: 71 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptMenu, { className: "KptMenu", filePath: "lib/menu/menu.component.ts", lineNumber: 116 }); })();
 
 const _c0$4 = [[["", "kptPopoverTrigger", ""]], "*"];
 const _c1 = ["[kptPopoverTrigger]", "*"];
@@ -11034,7 +11680,7 @@ class KptDrawer {
             i0.ɵɵattribute("data-position", ctx.position());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.header() || ctx.dismissible() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);display:flex;flex-direction:column;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4);transition:transform .25s ease;outline:none}.kpt-drawer__panel[data-position=left]{inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-4, 1rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-drawer__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--%NS%kpt-space-4, 1rem)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4);outline:none;inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%);visibility:hidden;--%NS%_kpt-drawer-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--%NS%_kpt-drawer-vis-delay, 0s)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;width:auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;width:auto;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none;visibility:visible;--%NS%_kpt-drawer-vis-delay: 0s}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-4, 1rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-drawer__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--%NS%kpt-space-4, 1rem)}@media(prefers-reduced-motion:reduce){.kpt-drawer__backdrop,.kpt-drawer__panel{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDrawer, [{
         type: Component,
@@ -11059,7 +11705,7 @@ class KptDrawer {
       }
       <div class="kpt-drawer__body"><ng-content /></div>
     </aside>
-  `, host: { class: 'kpt-drawer-host' }, styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1000) + 1);display:flex;flex-direction:column;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4);transition:transform .25s ease;outline:none}.kpt-drawer__panel[data-position=left]{inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-drawer__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--kpt-space-4, 1rem)}}\n"] }]
+  `, host: { class: 'kpt-drawer-host' }, styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4);outline:none;inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%);visibility:hidden;--_kpt-drawer-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--_kpt-drawer-vis-delay, 0s)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;width:auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;width:auto;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none;visibility:visible;--_kpt-drawer-vis-delay: 0s}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-drawer__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--kpt-space-4, 1rem)}@media(prefers-reduced-motion:reduce){.kpt-drawer__backdrop,.kpt-drawer__panel{transition:none}}}\n"] }]
     }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDrawer, { className: "KptDrawer", filePath: "lib/drawer/drawer.component.ts", lineNumber: 45 }); })();
 
@@ -11068,33 +11714,102 @@ function KptContextMenu_Conditional_2_For_3_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵelement(0, "div", 3);
 } }
 function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kpt-icon", 6);
+    i0.ɵɵelement(0, "kpt-avatar", 6);
 } if (rf & 2) {
-    const item_r4 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵproperty("name", item_r4.icon);
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("src", item_r3.avatar.src ?? null)("name", item_r3.avatar.name ?? "")("icon", item_r3.avatar.icon ?? null);
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 7);
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("name", item_r3.icon);
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r3.label);
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r3.description);
 } }
 function KptContextMenu_Conditional_2_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵlistener("click", function KptContextMenu_Conditional_2_For_3_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.pick(item_r4)); });
-    i0.ɵɵconditionalCreate(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_1_Template, 1, 1, "kpt-icon", 6);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵconditionalCreate(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_1_Template, 1, 3, "kpt-avatar", 6)(2, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_2_Template, 1, 1, "kpt-icon", 7);
+    i0.ɵɵelementStart(3, "span", 8);
+    i0.ɵɵconditionalCreate(4, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_4_Template, 2, 1, "span", 9);
+    i0.ɵɵconditionalCreate(5, KptContextMenu_Conditional_2_For_3_Conditional_1_Conditional_5_Template, 2, 1, "span", 10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassProp("kpt-context-menu__item--danger", item_r4.danger);
-    i0.ɵɵproperty("disabled", item_r4.disabled);
+    const item_r3 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r4.icon ? 1 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r4.label);
+    i0.ɵɵconditional(item_r3.avatar ? 1 : item_r3.icon ? 2 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r3.label ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r3.description ? 5 : -1);
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-icon", 7);
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("name", item_r3.icon);
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r3.description);
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kpt-badge", 12);
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", item_r3.badge)("variant", item_r3.badgeVariant ?? "primary");
+} }
+function KptContextMenu_Conditional_2_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function KptContextMenu_Conditional_2_For_3_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const item_r3 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.pick(item_r3)); });
+    i0.ɵɵconditionalCreate(1, KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_1_Template, 1, 1, "kpt-icon", 7);
+    i0.ɵɵelementStart(2, "span", 8)(3, "span", 9);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_5_Template, 2, 1, "span", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, KptContextMenu_Conditional_2_For_3_Conditional_2_Conditional_6_Template, 1, 2, "kpt-badge", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("kpt-context-menu__item--danger", item_r3.danger);
+    i0.ɵɵproperty("disabled", item_r3.disabled);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r3.icon ? 1 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r3.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r3.description ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r3.badge !== undefined && item_r3.badge !== null ? 6 : -1);
 } }
 function KptContextMenu_Conditional_2_For_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, KptContextMenu_Conditional_2_For_3_Conditional_0_Template, 1, 0, "div", 3)(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Template, 4, 5, "button", 4);
+    i0.ɵɵconditionalCreate(0, KptContextMenu_Conditional_2_For_3_Conditional_0_Template, 1, 0, "div", 3)(1, KptContextMenu_Conditional_2_For_3_Conditional_1_Template, 6, 3, "div", 4)(2, KptContextMenu_Conditional_2_For_3_Conditional_2_Template, 7, 7, "button", 5);
 } if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    i0.ɵɵconditional(item_r4.separator ? 0 : 1);
+    const item_r3 = ctx.$implicit;
+    i0.ɵɵconditional(item_r3.separator ? 0 : item_r3.header ? 1 : 2);
 } }
 function KptContextMenu_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -11102,7 +11817,7 @@ function KptContextMenu_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function KptContextMenu_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); })("contextmenu", function KptContextMenu_Conditional_2_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(1, "div", 2);
-    i0.ɵɵrepeaterCreate(2, KptContextMenu_Conditional_2_For_3_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(2, KptContextMenu_Conditional_2_For_3_Template, 3, 1, null, null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -11147,7 +11862,7 @@ class KptContextMenu {
         this.close();
     }
     static { this.ɵfac = function KptContextMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptContextMenu)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptContextMenu, selectors: [["kpt-context-menu"]], hostAttrs: [1, "kpt-context-menu-host"], inputs: { items: [1, "items"] }, outputs: { select: "select" }, ngContentSelectors: _c0$2, decls: 3, vars: 1, consts: [[1, "kpt-context-menu__area", 3, "contextmenu"], [1, "kpt-context-menu__backdrop", 3, "click", "contextmenu"], ["role", "menu", 1, "kpt-context-menu__panel"], ["role", "separator", 1, "kpt-context-menu__separator"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "kpt-context-menu__item--danger", "disabled"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "click", "disabled"], [3, "name"]], template: function KptContextMenu_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptContextMenu, selectors: [["kpt-context-menu"]], hostAttrs: [1, "kpt-context-menu-host"], inputs: { items: [1, "items"] }, outputs: { select: "select" }, ngContentSelectors: _c0$2, decls: 3, vars: 1, consts: [[1, "kpt-context-menu__area", 3, "contextmenu"], [1, "kpt-context-menu__backdrop", 3, "click", "contextmenu"], ["role", "menu", 1, "kpt-context-menu__panel"], ["role", "separator", 1, "kpt-context-menu__separator"], ["role", "presentation", 1, "kpt-context-menu__header"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "kpt-context-menu__item--danger", "disabled"], ["size", "sm", 3, "src", "name", "icon"], [3, "name"], [1, "kpt-context-menu__text"], [1, "kpt-context-menu__label"], [1, "kpt-context-menu__description"], ["type", "button", "role", "menuitem", 1, "kpt-context-menu__item", 3, "click", "disabled"], [1, "kpt-context-menu__badge", 3, "value", "variant"]], template: function KptContextMenu_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("contextmenu", function KptContextMenu_Template_div_contextmenu_0_listener($event) { return ctx.onContext($event); });
@@ -11157,11 +11872,11 @@ class KptContextMenu {
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.open() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--%NS%kpt-space-1, .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)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-context-menu__separator{height:1px;margin:var(--%NS%kpt-space-1, .25rem) 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptAvatar, KptBadge, KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--%NS%kpt-space-1, .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)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--%NS%kpt-color-danger)}.kpt-context-menu__header{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:default}.kpt-context-menu__header .kpt-context-menu__label{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-context-menu__header kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-context-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-context-menu__label,.kpt-context-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-context-menu__description{color:var(--%NS%kpt-color-on-surface-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-context-menu__badge{margin-inline-start:auto}.kpt-context-menu__separator{height:1px;margin:var(--%NS%kpt-space-1, .25rem) 0;background:var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptContextMenu, [{
         type: Component,
-        args: [{ selector: 'kpt-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptIcon], template: `
+        args: [{ selector: 'kpt-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [KptAvatar, KptBadge, KptIcon], template: `
     <div class="kpt-context-menu__area" (contextmenu)="onContext($event)">
       <ng-content />
     </div>
@@ -11172,6 +11887,25 @@ class KptContextMenu {
         @for (item of items(); track $index) {
           @if (item.separator) {
             <div class="kpt-context-menu__separator" role="separator"></div>
+          } @else if (item.header) {
+            <div class="kpt-context-menu__header" role="presentation">
+              @if (item.avatar) {
+                <kpt-avatar
+                  [src]="item.avatar.src ?? null"
+                  [name]="item.avatar.name ?? ''"
+                  [icon]="item.avatar.icon ?? null"
+                  size="sm"
+                />
+              } @else if (item.icon) {
+                <kpt-icon [name]="item.icon" />
+              }
+              <span class="kpt-context-menu__text">
+                @if (item.label) { <span class="kpt-context-menu__label">{{ item.label }}</span> }
+                @if (item.description) {
+                  <span class="kpt-context-menu__description">{{ item.description }}</span>
+                }
+              </span>
+            </div>
           } @else {
             <button
               type="button"
@@ -11182,15 +11916,27 @@ class KptContextMenu {
               (click)="pick(item)"
             >
               @if (item.icon) { <kpt-icon [name]="item.icon" /> }
-              <span>{{ item.label }}</span>
+              <span class="kpt-context-menu__text">
+                <span class="kpt-context-menu__label">{{ item.label }}</span>
+                @if (item.description) {
+                  <span class="kpt-context-menu__description">{{ item.description }}</span>
+                }
+              </span>
+              @if (item.badge !== undefined && item.badge !== null) {
+                <kpt-badge
+                  class="kpt-context-menu__badge"
+                  [value]="item.badge"
+                  [variant]="item.badgeVariant ?? 'primary'"
+                />
+              }
             </button>
           }
         }
       </div>
     }
-  `, host: { class: 'kpt-context-menu-host' }, styles: ["@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--kpt-color-danger)}.kpt-context-menu__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}}\n"] }]
+  `, host: { class: 'kpt-context-menu-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-context-menu-host{display:block}.kpt-context-menu__area{display:contents}.kpt-context-menu__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000)}.kpt-context-menu__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1000) + 1);min-width:11rem;padding:var(--kpt-space-1, .25rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3)}.kpt-context-menu__item{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);width:100%;padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem);text-align:left;cursor:pointer}.kpt-context-menu__item:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-context-menu__item:disabled{opacity:.5;cursor:not-allowed}.kpt-context-menu__item--danger{color:var(--kpt-color-danger)}.kpt-context-menu__header{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);font-size:var(--kpt-font-size-sm, .875rem);cursor:default}.kpt-context-menu__header .kpt-context-menu__label{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-context-menu__header kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-context-menu__text{display:flex;flex-direction:column;min-width:0}.kpt-context-menu__label,.kpt-context-menu__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-context-menu__description{color:var(--kpt-color-on-surface-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-context-menu__badge{margin-inline-start:auto}.kpt-context-menu__separator{height:1px;margin:var(--kpt-space-1, .25rem) 0;background:var(--kpt-color-border)}}\n"] }]
     }], null, { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptContextMenu, { className: "KptContextMenu", filePath: "lib/context-menu/context-menu.component.ts", lineNumber: 49 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptContextMenu, { className: "KptContextMenu", filePath: "lib/context-menu/context-menu.component.ts", lineNumber: 82 }); })();
 
 function KptMenubar_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "kpt-icon", 4);
@@ -11723,7 +12469,7 @@ class KptBottomSheet {
             i0.ɵɵattribute("aria-label", ctx.i18n.t("common.close"));
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.header() ? 3 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);border-radius:var(--%NS%kpt-radius-lg, .75rem) var(--%NS%kpt-radius-lg, .75rem) 0 0;box-shadow:var(--%NS%kpt-elevation-4);transform:translateY(100%);transition:transform .25s ease}.kpt-bottom-sheet__panel.is-open{transform:none}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--%NS%kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--%NS%kpt-color-border-strong, var(--%NS%kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--%NS%kpt-font-weight-semibold, 600);margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);border-radius:var(--%NS%kpt-radius-lg, .75rem) var(--%NS%kpt-radius-lg, .75rem) 0 0;box-shadow:var(--%NS%kpt-elevation-4);transform:translateY(100%);visibility:hidden;--%NS%_kpt-bottom-sheet-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--%NS%_kpt-bottom-sheet-vis-delay, 0s)}.kpt-bottom-sheet__panel.is-open{transform:none;visibility:visible;--%NS%_kpt-bottom-sheet-vis-delay: 0s}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--%NS%kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--%NS%kpt-color-border-strong, var(--%NS%kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--%NS%kpt-font-weight-semibold, 600);margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}@media(prefers-reduced-motion:reduce){.kpt-bottom-sheet__backdrop,.kpt-bottom-sheet__panel{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBottomSheet, [{
         type: Component,
@@ -11734,7 +12480,7 @@ class KptBottomSheet {
       @if (header()) { <div class="kpt-bottom-sheet__header">{{ header() }}</div> }
       <div class="kpt-bottom-sheet__body"><ng-content /></div>
     </div>
-  `, host: { class: 'kpt-bottom-sheet-host' }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--kpt-space-2, .5rem) var(--kpt-space-4, 1rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);border-radius:var(--kpt-radius-lg, .75rem) var(--kpt-radius-lg, .75rem) 0 0;box-shadow:var(--kpt-elevation-4);transform:translateY(100%);transition:transform .25s ease}.kpt-bottom-sheet__panel.is-open{transform:none}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--kpt-color-border-strong, var(--kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:var(--kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}}\n"] }]
+  `, host: { class: 'kpt-bottom-sheet-host' }, styles: ["@layer kpt.components{.kpt-bottom-sheet-host{display:contents}.kpt-bottom-sheet__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-bottom-sheet__backdrop.is-open{opacity:1;visibility:visible}.kpt-bottom-sheet__panel{position:fixed;inset:auto 0 0;z-index:calc(var(--kpt-z-overlay, 1000) + 1);max-height:85vh;display:flex;flex-direction:column;padding:var(--kpt-space-2, .5rem) var(--kpt-space-4, 1rem) var(--kpt-space-4, 1rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);border-radius:var(--kpt-radius-lg, .75rem) var(--kpt-radius-lg, .75rem) 0 0;box-shadow:var(--kpt-elevation-4);transform:translateY(100%);visibility:hidden;--_kpt-bottom-sheet-vis-delay: .25s;transition:transform .25s ease,visibility 0s linear var(--_kpt-bottom-sheet-vis-delay, 0s)}.kpt-bottom-sheet__panel.is-open{transform:none;visibility:visible;--_kpt-bottom-sheet-vis-delay: 0s}.kpt-bottom-sheet__handle{align-self:center;width:2.5rem;height:.25rem;margin:var(--kpt-space-2, .5rem) 0;padding:0;border:0;border-radius:999px;background:var(--kpt-color-border-strong, var(--kpt-color-border));cursor:pointer}.kpt-bottom-sheet__header{font-weight:var(--kpt-font-weight-semibold, 600);margin-bottom:var(--kpt-space-2, .5rem)}.kpt-bottom-sheet__body{overflow:auto}@media(prefers-reduced-motion:reduce){.kpt-bottom-sheet__backdrop,.kpt-bottom-sheet__panel{transition:none}}}\n"] }]
     }], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptBottomSheet, { className: "KptBottomSheet", filePath: "lib/bottom-sheet/bottom-sheet.component.ts", lineNumber: 27 }); })();
 
@@ -11865,5 +12611,5 @@ class KptSpeedDial {
  * Generated bundle index. Do not edit.
  */
 
-export { KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, 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, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n };
+export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, 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, renderKptIconSvg };
 //# sourceMappingURL=konce-pt-angular.mjs.map