npm - @konce-pt/angular - Versions diffs - 0.7.5 → 0.7.6 - Mend

@konce-pt/angular 0.7.5 → 0.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/CHANGELOG.md +64 -0
package/fesm2022/konce-pt-angular.mjs +691 -383
package/fesm2022/konce-pt-angular.mjs.map +1 -1
package/package.json +1 -1
package/src/lib/badge/llms.txt +4 -0
package/src/lib/bottom-sheet/llms.txt +6 -0
package/src/lib/button/llms.txt +11 -0
package/src/lib/context-menu/llms.txt +2 -0
package/src/lib/drawer/llms.txt +9 -0
package/src/lib/menu/llms.txt +33 -4
package/src/lib/sidenav/llms.txt +43 -29
package/src/lib/split-button/llms.txt +2 -0
package/types/konce-pt-angular.d.ts +52 -22
package/types/konce-pt-angular.d.ts.map +1 -1

package/fesm2022/konce-pt-angular.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, InjectionToken, signal, inject, Injectable, ElementRef, effect, PLATFORM_ID, DestroyRef, makeEnvironmentProviders, contentChild, afterNextRender, forwardRef, numberAttribute, viewChild, Directive, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal } from '@angular/core';
+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';
@@ -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');
@@ -876,191 +1162,111 @@ class KptI18n {
         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" />',
-    '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 }); })();
-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();
@@ -1098,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(); });
@@ -1120,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 />
@@ -1153,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"
@@ -1162,15 +1387,27 @@ 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).
@@ -1254,72 +1491,16 @@ class KptBreakpointObserver {
  *
  * @example
  * // Własny język jednym plikiem JSON (brakujące klucze → EN)
- * import de from './i18n/de.json';
- * provideKptI18n({ locale: 'de', messages: { de } });
- *
- * @example
- * // Nadpisanie pojedynczych etykiet istniejącego języka
- * provideKptI18n({ messages: { en: { paginator: { rowsPerPage: 'Rows per page:' } } } });
- */
-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`).
+ * import de from './i18n/de.json';
+ * provideKptI18n({ locale: 'de', messages: { de } });
  *
  * @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>
+ * // Nadpisanie pojedynczych etykiet istniejącego języka
+ * provideKptI18n({ messages: { en: { paginator: { rowsPerPage: 'Rows per page:' } } } });
  */
-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 }); }
+function provideKptI18n(config = {}) {
+    return makeEnvironmentProviders([{ provide: KPT_I18N_CONFIG, useValue: config }]);
 }
-(() => { (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) {
@@ -1382,82 +1563,6 @@ class KptChip {
     }], 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 */ []));
-    }
-    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 }); })();
 /**
  * Wskaźnik ładowania (spinner). Kolor z `currentColor`.
  *
@@ -6987,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);
@@ -7024,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);
@@ -7123,29 +7228,40 @@ class KptToolbar {
     }], null, { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToolbar, { className: "KptToolbar", filePath: "lib/toolbar/toolbar.component.ts", lineNumber: 27 }); })();
-const _c0$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]", "*"];
@@ -11045,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();
@@ -11117,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(); });
@@ -11129,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>
@@ -11152,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"
@@ -11162,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]", "*"];
@@ -11472,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, 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);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,
@@ -11497,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, 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);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 }); })();
@@ -11506,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();
@@ -11540,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();
@@ -11585,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); });
@@ -11595,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>
@@ -11610,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"
@@ -11620,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);
@@ -12161,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,
@@ -12172,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 }); })();