@konce-pt/angular 0.7.0 → 0.7.5

package/fesm2022/konce-pt-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, InjectionToken, signal, inject, Injectable, ElementRef, effect, makeEnvironmentProviders, afterNextRender, numberAttribute, viewChild, Directive, DestroyRef, TemplateRef, contentChildren, viewChildren, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
-import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
-import { NgTemplateOutlet } from '@angular/common';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, output, 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 { CdkOverlayOrigin, CdkConnectedOverlay, OverlayContainer } from '@angular/cdk/overlay';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 
 const _c0$D = ["*"];
 function KptButton_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -305,6 +305,75 @@ const KPT_MESSAGES_EN = {
         expandGroup: 'Expand group',
         collapseGroup: 'Collapse group',
     },
+    map: {
+        addLocation: 'Add location',
+        chooseCategory: 'Choose a category',
+        myLocation: 'My location',
+        locateMe: 'Centre on my location',
+        locationDenied: 'Location access denied',
+        locationUnavailable: 'Location unavailable',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        legend: 'Legend',
+        showCategory: 'Show {category}',
+        hideCategory: 'Hide {category}',
+        cluster: 'Group of {count} locations',
+        clusterItems: 'Locations in this group',
+        fieldRequired: '{label} is required',
+        lookingUpAddress: 'Looking up the address…',
+        addressNotFound: 'No address found for this point',
+        latitude: 'Latitude',
+        longitude: 'Longitude',
+        empty: 'No locations',
+        save: 'Save',
+        cancel: 'Cancel',
+        poi: {
+            distanceAway: '{distance} away',
+            openNow: 'Open',
+            closedNow: 'Closed',
+            opensAt: 'opens at {time}',
+            closesAt: 'closes at {time}',
+            alwaysOpen: 'Open 24/7',
+            openingHours: 'Opening hours',
+            closedDay: 'Closed',
+            call: 'Call',
+            sendEmail: 'Send an e-mail',
+            openWebsite: 'Open the website',
+            coordinates: 'Coordinates',
+            copy: 'Copy',
+            copied: 'Copied',
+            share: 'Share',
+            addFavourite: 'Add to favourites',
+            removeFavourite: 'Remove from favourites',
+            noPhoto: 'No photo',
+        },
+        search: {
+            placeholder: 'Search for an address…',
+            label: 'Search for an address',
+            results: 'Address suggestions',
+            clear: 'Clear the search',
+            noResults: 'No matching places',
+            minLength: 'Type at least {count} characters',
+            searching: 'Searching…',
+            found: '{count} suggestions',
+        },
+        field: {
+            invalidEmail: 'Enter a valid e-mail address',
+            invalidUrl: 'Enter an address starting with http:// or https://',
+            imageTooLarge: 'The picture must be no larger than {max}',
+            pickImage: 'Pick a picture',
+            orPasteUrl: 'or paste a picture address',
+            removeImage: 'Remove the picture',
+            imagePreview: 'Picture preview',
+            hoursClosed: 'Closed',
+            hoursFrom: 'From',
+            hoursTo: 'To',
+            hoursSameAllWeek: 'Same all week',
+            hoursAddRange: 'Add a second range',
+            hoursRemoveRange: 'Remove the range',
+            hoursIncomplete: 'Set both times for {day} or mark the day as closed',
+        },
+    },
     dataTable: {
         search: 'Search…',
         exportCsv: 'Export CSV',
@@ -387,6 +456,10 @@ const KPT_MESSAGES_EN = {
     panel: {
         toggle: 'Collapse / expand',
     },
+    appShell: {
+        toggleNavigation: 'Toggle navigation',
+        navigation: 'Main navigation',
+    },
     breadcrumb: {
         label: 'breadcrumb',
     },
@@ -493,6 +566,75 @@ const KPT_MESSAGES_PL = {
         expandGroup: 'Rozwiń grupę',
         collapseGroup: 'Zwiń grupę',
     },
+    map: {
+        addLocation: 'Dodaj lokalizację',
+        chooseCategory: 'Wybierz kategorię',
+        myLocation: 'Moje położenie',
+        locateMe: 'Wyśrodkuj na moim położeniu',
+        locationDenied: 'Brak zgody na dostęp do lokalizacji',
+        locationUnavailable: 'Położenie niedostępne',
+        zoomIn: 'Przybliż',
+        zoomOut: 'Oddal',
+        legend: 'Legenda',
+        showCategory: 'Pokaż: {category}',
+        hideCategory: 'Ukryj: {category}',
+        cluster: 'Grupa {count} lokalizacji',
+        clusterItems: 'Lokalizacje w tej grupie',
+        fieldRequired: 'Pole „{label}" jest wymagane',
+        lookingUpAddress: 'Szukam adresu…',
+        addressNotFound: 'Nie znaleziono adresu dla tego punktu',
+        latitude: 'Szerokość',
+        longitude: 'Długość',
+        empty: 'Brak lokalizacji',
+        save: 'Zapisz',
+        cancel: 'Anuluj',
+        poi: {
+            distanceAway: '{distance} od Ciebie',
+            openNow: 'Otwarte',
+            closedNow: 'Zamknięte',
+            opensAt: 'otwarcie o {time}',
+            closesAt: 'zamknięcie o {time}',
+            alwaysOpen: 'Czynne całą dobę',
+            openingHours: 'Godziny otwarcia',
+            closedDay: 'Zamknięte',
+            call: 'Zadzwoń',
+            sendEmail: 'Napisz wiadomość',
+            openWebsite: 'Otwórz stronę',
+            coordinates: 'Współrzędne',
+            copy: 'Kopiuj',
+            copied: 'Skopiowano',
+            share: 'Udostępnij',
+            addFavourite: 'Dodaj do ulubionych',
+            removeFavourite: 'Usuń z ulubionych',
+            noPhoto: 'Brak zdjęcia',
+        },
+        search: {
+            placeholder: 'Szukaj adresu…',
+            label: 'Szukaj adresu',
+            results: 'Podpowiedzi adresów',
+            clear: 'Wyczyść wyszukiwanie',
+            noResults: 'Brak pasujących miejsc',
+            minLength: 'Wpisz więcej znaków (minimum: {count})',
+            searching: 'Szukam…',
+            found: 'Podpowiedzi: {count}',
+        },
+        field: {
+            invalidEmail: 'Podaj poprawny adres e-mail',
+            invalidUrl: 'Podaj adres zaczynający się od http:// albo https://',
+            imageTooLarge: 'Zdjęcie może mieć najwyżej {max}',
+            pickImage: 'Wybierz zdjęcie',
+            orPasteUrl: 'albo wklej adres zdjęcia',
+            removeImage: 'Usuń zdjęcie',
+            imagePreview: 'Podgląd zdjęcia',
+            hoursClosed: 'Zamknięte',
+            hoursFrom: 'Od',
+            hoursTo: 'Do',
+            hoursSameAllWeek: 'Tak samo przez cały tydzień',
+            hoursAddRange: 'Dodaj drugi przedział',
+            hoursRemoveRange: 'Usuń przedział',
+            hoursIncomplete: 'Podaj obie godziny dla dnia {day} albo oznacz go jako zamknięty',
+        },
+    },
     dataTable: {
         search: 'Szukaj…',
         exportCsv: 'Eksport CSV',
@@ -575,6 +717,10 @@ const KPT_MESSAGES_PL = {
     panel: {
         toggle: 'Zwiń / rozwiń',
     },
+    appShell: {
+        toggleNavigation: 'Przełącz nawigację',
+        navigation: 'Nawigacja główna',
+    },
     breadcrumb: {
         label: 'breadcrumb',
     },
@@ -782,6 +928,10 @@ const KPT_ICONS = {
     '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" />',
 };
 
 /**
@@ -818,6 +968,21 @@ class 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`
@@ -841,14 +1006,8 @@ class KptIcon {
         this.registry = inject(KptIconRegistry);
         effect(() => {
             this.registry.version(); // reaguj na późną rejestrację ikon
-            const inner = this.registry.get(this.name()) ?? '';
             // Treść pochodzi z zaufanego rejestru — bezpośredni innerHTML bez sanitizera.
-            this.host.nativeElement.innerHTML = inner
-                ? '<svg class="kpt-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"' +
-                    ' stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-                    inner +
-                    '</svg>'
-                : '';
+            this.host.nativeElement.innerHTML = renderKptIconSvg(this.registry.get(this.name()));
         });
     }
     static { this.ɵfac = function KptIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptIcon)(); }; }
@@ -1013,6 +1172,76 @@ class KptSplitButton {
     }], 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 }); })();
 
+// Do not edit directly — generated by scripts/gen-tokens.mjs
+// from @konce-pt/tokens (tokens/primitives/breakpoint.json).
+/** Progi breakpointów w pikselach — te same wartości, z których korzystają `@media` biblioteki. */
+const KPT_BREAKPOINTS = {
+    'sm': 640,
+    'md': 768,
+    'lg': 1024,
+    'xl': 1280,
+    '2xl': 1536,
+};
+
+/**
+ * Obserwator breakpointów oparty na `matchMedia`, spięty z tokenami `--kpt-breakpoint-*`.
+ * Zwraca sygnały, więc czyta się go tak samo w `computed`, w szablonie i w `effect`.
+ *
+ * Zapytania są memoizowane per string: `up('lg')` wywołane w wielu komponentach dzieli
+ * jeden `MediaQueryList` i jeden nasłuch.
+ *
+ * Poza przeglądarką (SSR, prerender) każdy sygnał to stałe `false`. Dlatego **układ**
+ * komponentów biblioteki nigdy nie zależy od tego serwisu — o tym, jak wygląda strona,
+ * decyduje CSS, żeby nic nie migotało przed hydracją. Serwis odpowiada za zachowania,
+ * których CSS nie wyrazi (np. w którą stronę ma zadziałać przycisk).
+ *
+ * @example
+ * private readonly breakpoints = inject(KptBreakpointObserver);
+ * readonly isDesktop = this.breakpoints.up('lg');
+ */
+class KptBreakpointObserver {
+    constructor() {
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.destroyRef = inject(DestroyRef);
+        this.cache = new Map();
+    }
+    /** Dowolne media query jako sygnał. */
+    matches(query) {
+        const cached = this.cache.get(query);
+        if (cached)
+            return cached;
+        const result = this.isBrowser ? this.observe(query) : signal(false).asReadonly();
+        this.cache.set(query, result);
+        return result;
+    }
+    /** Czy viewport ma szerokość co najmniej danego breakpointa (mobile-first). */
+    up(breakpoint) {
+        return this.matches(`(min-width: ${KPT_BREAKPOINTS[breakpoint]}px)`);
+    }
+    /**
+     * Czy viewport jest węższy niż dany breakpoint. Próg schodzi o 0.02px, żeby pasma
+     * `up`/`down` nie nakładały się na ułamkowych szerokościach okna (zoom, DPI).
+     */
+    down(breakpoint) {
+        return this.matches(`(max-width: ${KPT_BREAKPOINTS[breakpoint] - 0.02}px)`);
+    }
+    observe(query) {
+        const list = window.matchMedia(query);
+        const state = signal(list.matches, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        const onChange = (event) => state.set(event.matches);
+        list.addEventListener('change', onChange);
+        this.destroyRef.onDestroy(() => list.removeEventListener('change', onChange));
+        return state.asReadonly();
+    }
+    static { this.ɵfac = function KptBreakpointObserver_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptBreakpointObserver)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: KptBreakpointObserver, factory: KptBreakpointObserver.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptBreakpointObserver, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();
+
 /**
  * Konfiguruje i18n Koncept UI. Ustawia język początkowy i rejestruje/nadpisuje
  * słowniki. Języki bazowe (EN, PL) są dostępne bez konfiguracji.
@@ -1415,6 +1644,9 @@ class KptSkeleton {
     }], null, { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSkeleton, { className: "KptSkeleton", filePath: "lib/skeleton/skeleton.component.ts", lineNumber: 29 }); })();
 
+/** Token DI, przez który kontrolka zgłasza `kpt-form-field` swój stan wypełnienia. */
+const KPT_FORM_FIELD_CONTROL = new InjectionToken('KPT_FORM_FIELD_CONTROL');
+
 const _c0$x = ["*"];
 function KptFormField_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵdomElementStart(0, "span", 6);
@@ -1461,7 +1693,8 @@ function KptFormField_Conditional_6_Template(rf, ctx) { if (rf & 1) {
  * unoszącej się etykiety (Float Label) z animowanym przejściem: `over` (nad obramowaniem),
  * `in` (u góry wewnątrz pola) i `on` (na obramowaniu, notch). Uniesienie następuje przy focusie
  * (CSS `:focus-within`) lub gdy pole jest wypełnione (wykrywane po zdarzeniach `input`/`change`
- * oraz wartości początkowej) — bez wymogu placeholdera na kontrolce.
+ * oraz wartości początkowej) — bez wymogu placeholdera na kontrolce. Kontrolki bez natywnego
+ * `input`/`textarea` (np. `kpt-select`) zgłaszają wypełnienie tokenem `KPT_FORM_FIELD_CONTROL`.
  *
  * @example
  * <kpt-form-field label="E-mail" [error]="emailError()" hint="Firmowy adres">
@@ -1497,8 +1730,16 @@ class KptFormField {
         this.labelType = input('fixed', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "labelType" }] : /* istanbul ignore next */ []));
         this.host = inject(ElementRef);
+        /**
+         * Kontrolka bez natywnego `input`/`textarea` (np. `kpt-select`) zgłasza wypełnienie sama,
+         * przez token `KPT_FORM_FIELD_CONTROL` — jej wartość nie da się odczytać z DOM.
+         */
+        this.control = contentChild(KPT_FORM_FIELD_CONTROL, { ...(ngDevMode ? { debugName: "control" } : /* istanbul ignore next */ {}), descendants: true });
+        /** Wypełnienie odczytane z natywnej kontrolki (zdarzenia `input`/`change` + wartość początkowa). */
+        this.nativeFilled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nativeFilled" }] : /* istanbul ignore next */ []));
         /** Czy projektowana kontrolka ma wartość — steruje uniesieniem etykiety w wariantach float. */
-        this.filled = signal(false, /* @ts-ignore */
+        this.filled = computed(() => this.control()?.filled() ?? this.nativeFilled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
         // Wartość początkowa (np. pole prefill) — po pierwszym renderze projekcji.
         afterNextRender(() => this.updateFilled());
@@ -1506,10 +1747,14 @@ class KptFormField {
     /** Odczytuje wartość projektowanego `input`/`textarea` i aktualizuje stan `filled`. */
     updateFilled() {
         const el = this.host.nativeElement.querySelector('.kpt-form-field__control input, .kpt-form-field__control textarea');
-        this.filled.set(!!el && el.value !== '');
+        this.nativeFilled.set(!!el && el.value !== '');
     }
     static { this.ɵfac = function KptFormField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptFormField)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFormField, selectors: [["kpt-form-field"]], hostAttrs: [1, "kpt-form-field-host"], hostBindings: function KptFormField_HostBindings(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptFormField, selectors: [["kpt-form-field"]], contentQueries: function KptFormField_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.control, KPT_FORM_FIELD_CONTROL, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: [1, "kpt-form-field-host"], hostBindings: function KptFormField_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("input", function KptFormField_input_HostBindingHandler() { return ctx.updateFilled(); })("change", function KptFormField_change_HostBindingHandler() { return ctx.updateFilled(); });
         } }, inputs: { label: [1, "label"], hint: [1, "hint"], error: [1, "error"], required: [1, "required"], controlId: [1, "controlId"], labelType: [1, "labelType"] }, ngContentSelectors: _c0$x, decls: 7, vars: 10, consts: [[1, "kpt-form-field"], [1, "kpt-form-field__box"], [1, "kpt-form-field__label"], [1, "kpt-form-field__control"], ["role", "alert", 1, "kpt-form-field__message", "kpt-form-field__message--error"], [1, "kpt-form-field__message", "kpt-form-field__message--hint"], ["aria-hidden", "true", 1, "kpt-form-field__required"]], template: function KptFormField_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
@@ -1529,7 +1774,7 @@ class KptFormField {
             i0.ɵɵconditional(ctx.label() ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.error() ? 5 : ctx.hint() ? 6 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-form-field-label)}.kpt-form-field__required{color:var(--%NS%kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--%NS%kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--%NS%kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--%NS%kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--%NS%kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--%NS%kpt-font-weight-normal, 400);color:var(--%NS%kpt-form-field-placeholder);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--%NS%kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--%NS%kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);color:var(--%NS%kpt-form-field-label)}.kpt-form-field__required{color:var(--%NS%kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--%NS%kpt-font-size-xs, .75rem);line-height:var(--%NS%kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--%NS%kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--%NS%kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--%NS%kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--%NS%kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--%NS%kpt-font-weight-normal, 400);color:var(--%NS%kpt-form-field-placeholder);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--%NS%kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--%NS%kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--%NS%kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptFormField, [{
         type: Component,
@@ -1537,9 +1782,9 @@ class KptFormField {
                     class: 'kpt-form-field-host',
                     '(input)': 'updateFilled()',
                     '(change)': 'updateFilled()',
-                }, template: "<div\n  class=\"kpt-form-field\"\n  [class]=\"'kpt-form-field--' + labelType()\"\n  [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n  [class.kpt-form-field--invalid]=\"!!error()\"\n>\n  <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n    @if (label()) {\n      <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <div class=\"kpt-form-field__control\">\n      <ng-content />\n    </div>\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
-    }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFormField, { className: "KptFormField", filePath: "lib/form-field/form-field.component.ts", lineNumber: 46 }); })();
+                }, template: "<div\n  class=\"kpt-form-field\"\n  [class]=\"'kpt-form-field--' + labelType()\"\n  [class.kpt-form-field--float]=\"labelType() !== 'fixed'\"\n  [class.kpt-form-field--invalid]=\"!!error()\"\n>\n  <div class=\"kpt-form-field__box\" [class.is-filled]=\"filled()\">\n    @if (label()) {\n      <label class=\"kpt-form-field__label\" [attr.for]=\"controlId() || null\">\n        {{ label() }}\n        @if (required()) {\n          <span class=\"kpt-form-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <div class=\"kpt-form-field__control\">\n      <ng-content />\n    </div>\n  </div>\n\n  @if (error()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--error\" role=\"alert\">{{ error() }}</p>\n  } @else if (hint()) {\n    <p class=\"kpt-form-field__message kpt-form-field__message--hint\">{{ hint() }}</p>\n  }\n</div>\n", styles: ["@layer kpt.components{.kpt-form-field,.kpt-form-field__box{display:flex;flex-direction:column;gap:var(--kpt-space-1, .25rem)}.kpt-form-field__label{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);color:var(--kpt-form-field-label)}.kpt-form-field__required{color:var(--kpt-color-danger);margin-inline-start:.125rem}.kpt-form-field__message{font-size:var(--kpt-font-size-xs, .75rem);line-height:var(--kpt-font-line-height-normal, 1.5)}.kpt-form-field__message--hint{color:var(--kpt-form-field-hint)}.kpt-form-field__message--error{color:var(--kpt-form-field-error)}.kpt-form-field--float .kpt-form-field__box{position:relative;display:block}.kpt-form-field--float .kpt-form-field__label{position:absolute;top:50%;left:var(--kpt-space-3, .75rem);margin:0;max-width:calc(100% - 2 * var(--kpt-space-3, .75rem));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1;transform:translateY(-50%);transform-origin:left center;pointer-events:none;font-weight:var(--kpt-font-weight-normal, 400);color:var(--kpt-form-field-placeholder);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-form-field--float .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-focus)}.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label,.kpt-form-field--float.kpt-form-field--invalid .kpt-form-field__box:focus-within .kpt-form-field__label{color:var(--kpt-form-field-border-error)}.kpt-form-field--over .kpt-form-field__box{margin-top:1.1rem}.kpt-form-field--over .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:0;transform:translateY(calc(-50% - 1.87rem)) scale(.85)}.kpt-form-field--in .kpt-form-field__control :is(input,textarea){height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__control .kpt-select{min-height:3.25rem;padding-top:1.15rem}.kpt-form-field--in .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{transform:translateY(calc(-50% - .95rem)) scale(.85)}.kpt-form-field--on .kpt-form-field__box:is(:focus-within,.is-filled) .kpt-form-field__label{left:calc(var(--kpt-space-3, .75rem) - .25rem);padding-inline:.25rem;background:var(--kpt-form-field-bg);transform:translateY(calc(-50% - 1.25rem)) scale(.85)}@media(prefers-reduced-motion:reduce){.kpt-form-field--float .kpt-form-field__label{transition:none}}}\n"] }]
+    }], () => [], { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], controlId: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlId", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KPT_FORM_FIELD_CONTROL), { ...{ descendants: true }, isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptFormField, { className: "KptFormField", filePath: "lib/form-field/form-field.component.ts", lineNumber: 50 }); })();
 
 let nextUniqueId = 0;
 /**
@@ -1607,7 +1852,7 @@ class KptInput {
                     '[attr.id]': 'null',
                 }, template: "<input\n  class=\"kpt-input__field\"\n  [id]=\"id()\"\n  [type]=\"type()\"\n  [value]=\"value()\"\n  [placeholder]=\"placeholder()\"\n  [disabled]=\"disabled()\"\n  [readOnly]=\"readonly()\"\n  [attr.aria-required]=\"required() ? 'true' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-invalid]=\"showInvalid() ? 'true' : null\"\n  (input)=\"onInput($event)\"\n  (blur)=\"touch.emit()\"\n/>\n", styles: ["@layer kpt.components{.kpt-input-host{display:block}.kpt-input__field{display:block;width:100%;box-sizing:border-box;height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);font-family:inherit;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-form-field-text);background-color:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),box-shadow var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-input__field::placeholder{color:var(--kpt-form-field-placeholder)}.kpt-input__field:hover:not(:disabled):not([aria-invalid=true]){border-color:var(--kpt-form-field-border-hover)}.kpt-input__field:focus-visible{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-input__field[aria-invalid=true]{border-color:var(--kpt-form-field-border-error)}.kpt-input__field[aria-invalid=true]:focus-visible{box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-error) 30%,transparent)}.kpt-input__field:disabled{cursor:not-allowed;opacity:.6;background-color:var(--kpt-color-surface-variant)}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInput, { className: "KptInput", filePath: "lib/input/input.component.ts", lineNumber: 41 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptInput, { className: "KptInput", filePath: "lib/input/input.component.ts", lineNumber: 49 }); })();
 
 const _c0$w = ["*"];
 function KptCheckbox_Conditional_5_Template(rf, ctx) { if (rf & 1) {
@@ -1660,7 +1905,7 @@ class KptCheckbox {
             i0.ɵɵattribute("aria-invalid", ctx.showInvalid() ? "true" : null);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.label() ? 5 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--%NS%kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--%NS%kpt-form-field-border-error)}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;position:relative;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-form-field-bg);transition:background-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard),border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--%NS%kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--%NS%kpt-form-field-border-error)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptCheckbox, [{
         type: Component,
@@ -1683,7 +1928,7 @@ class KptCheckbox {
       }
       <ng-content />
     </label>
-  `, host: { class: 'kpt-checkbox-host' }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--kpt-form-field-border-error)}}\n"] }]
+  `, host: { class: 'kpt-checkbox-host' }, styles: ["@layer kpt.components{.kpt-checkbox{display:inline-flex;position:relative;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-checkbox--disabled{cursor:not-allowed;opacity:.55}.kpt-checkbox__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-form-field-bg);transition:background-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard),border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__check{width:.9rem;height:.9rem;fill:none;stroke:var(--kpt-color-on-primary);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-checkbox__input:checked+.kpt-checkbox__box{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-checkbox__input:checked+.kpt-checkbox__box .kpt-checkbox__check{opacity:1}.kpt-checkbox__input:focus-visible+.kpt-checkbox__box{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}.kpt-checkbox__input[aria-invalid=true]+.kpt-checkbox__box{border-color:var(--kpt-form-field-border-error)}}\n"] }]
     }], null, { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptCheckbox, { className: "KptCheckbox", filePath: "lib/checkbox/checkbox.component.ts", lineNumber: 44 }); })();
 
@@ -1778,7 +2023,7 @@ class KptSwitch {
             i0.ɵɵconditional(ctx.label() && ctx.labelPosition() === "end" ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.hasStateLabels() ? 6 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-border-strong);transition:background-color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--%NS%kpt-color-surface);box-shadow:var(--%NS%kpt-elevation-1);transition:transform var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--%NS%kpt-color-on-surface-muted);transition:color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;position:relative;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--%NS%kpt-radius-full, 9999px);background:var(--%NS%kpt-color-border-strong);transition:background-color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--%NS%kpt-color-surface);box-shadow:var(--%NS%kpt-elevation-1);transition:transform var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--%NS%kpt-font-size-sm, .875rem);font-weight:var(--%NS%kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--%NS%kpt-color-on-surface-muted);transition:color var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--%NS%kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSwitch, [{
         type: Component,
@@ -1806,7 +2051,7 @@ class KptSwitch {
       }
       <ng-content />
     </label>
-  `, host: { class: 'kpt-switch-host' }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface-muted);transition:color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"] }]
+  `, host: { class: 'kpt-switch-host' }, styles: ["@layer kpt.components{.kpt-switch{display:inline-flex;position:relative;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-switch--disabled{cursor:not-allowed;opacity:.55}.kpt-switch__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-switch__track{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex-shrink:0;border-radius:var(--kpt-radius-full, 9999px);background:var(--kpt-color-border-strong);transition:background-color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__thumb{position:absolute;top:.15rem;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--kpt-color-surface);box-shadow:var(--kpt-elevation-1);transition:transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state{font-size:var(--kpt-font-size-sm, .875rem);font-weight:var(--kpt-font-weight-medium, 500);font-variant-numeric:tabular-nums;color:var(--kpt-color-on-surface-muted);transition:color var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-switch__state--on{color:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track{background:var(--kpt-color-primary)}.kpt-switch__input:checked+.kpt-switch__track .kpt-switch__thumb{transform:translate(1rem)}.kpt-switch__input:focus-visible+.kpt-switch__track{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){.kpt-switch__thumb,.kpt-switch__track{transition:none}}}\n"] }]
     }], null, { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSwitch, { className: "KptSwitch", filePath: "lib/switch/switch.component.ts", lineNumber: 53 }); })();
 
@@ -1980,7 +2225,7 @@ class KptRadioGroup {
             i0.ɵɵattribute("aria-invalid", ctx.showInvalid() ? "true" : null);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:50%;background:var(--%NS%kpt-form-field-bg);transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--%NS%kpt-color-primary);transform:scale(0);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--%NS%kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--%NS%kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;position:relative;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);cursor:pointer;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:50%;background:var(--%NS%kpt-form-field-bg);transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--%NS%kpt-color-primary);transform:scale(0);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--%NS%kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-color-focus-ring);outline-offset:2px}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptRadioGroup, [{
         type: Component,
@@ -2002,7 +2247,7 @@ class KptRadioGroup {
         </label>
       }
     </div>
-  `, host: { class: 'kpt-radio-group-host' }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
+  `, host: { class: 'kpt-radio-group-host' }, styles: ["@layer kpt.components{.kpt-radio-group{display:flex;flex-direction:column;gap:var(--kpt-space-2, .5rem)}.kpt-radio{display:inline-flex;position:relative;align-items:center;gap:var(--kpt-space-2, .5rem);cursor:pointer;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-radio--disabled{cursor:not-allowed;opacity:.55}.kpt-radio__input{position:absolute;opacity:0;width:1px;height:1px}.kpt-radio__dot{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.15rem;height:1.15rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:50%;background:var(--kpt-form-field-bg);transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__dot:after{content:\"\";width:.5rem;height:.5rem;border-radius:50%;background:var(--kpt-color-primary);transform:scale(0);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-radio__input:checked+.kpt-radio__dot{border-color:var(--kpt-color-primary)}.kpt-radio__input:checked+.kpt-radio__dot:after{transform:scale(1)}.kpt-radio__input:focus-visible+.kpt-radio__dot{outline:var(--kpt-border-width-medium, 2px) solid var(--kpt-color-focus-ring);outline-offset:2px}}\n"] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptRadioGroup, { className: "KptRadioGroup", filePath: "lib/radio-group/radio-group.component.ts", lineNumber: 46 }); })();
 
@@ -2179,8 +2424,12 @@ class KptSelect {
             return this.multiple() ? '' : (sel[0]?.label ?? '');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "singleLabel" }] : /* istanbul ignore next */ []));
-        this.hasValue = computed(() => this.selectedOptions().length > 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        /**
+         * Czy wybrano jakąkolwiek opcję. Publiczne — `kpt-form-field` czyta to przez
+         * `KPT_FORM_FIELD_CONTROL`, żeby unieść etykietę Float Label nad wybraną wartość.
+         */
+        this.filled = computed(() => this.selectedOptions().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
     }
     isSelected(opt) {
         return this.selectedValues().includes(opt.value);
@@ -2255,7 +2504,7 @@ class KptSelect {
         }
     }
     static { this.ɵfac = function KptSelect_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptSelect)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptSelect, selectors: [["kpt-select"]], hostAttrs: [1, "kpt-select-host"], inputs: { options: [1, "options"], placeholder: [1, "placeholder"], multiple: [1, "multiple"], filter: [1, "filter"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], value: [1, "value"] }, outputs: { value: "valueChange", touch: "touch" }, features: [i0.ɵɵProvidersFeature([{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }])], decls: 8, vars: 14, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "combobox", "tabindex", "0", 1, "kpt-select", 3, "click", "keydown", "blur"], [1, "kpt-select__value"], [1, "kpt-select__single"], [1, "kpt-select__placeholder"], ["name", "chevron-down", 1, "kpt-select__chevron"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayWidth"], [1, "kpt-select__chip"], ["type", "button", 1, "kpt-select__chip-remove", 3, "click"], ["name", "x"], [1, "kpt-select__panel", 3, "keydown"], [1, "kpt-select__search"], ["role", "listbox", 1, "kpt-select__list"], ["role", "option", 1, "kpt-select__option", 3, "kpt-select__option--selected", "kpt-select__option--active", "kpt-select__option--disabled"], [1, "kpt-select__empty"], ["name", "search"], ["type", "text", 1, "kpt-select__search-input", 3, "input", "value"], ["role", "option", 1, "kpt-select__option", 3, "click", "mouseenter"], [1, "kpt-select__check", 3, "is-on"], [1, "kpt-select__option-label"], ["name", "check", 1, "kpt-select__option-tick"], [1, "kpt-select__check"], ["name", "check"]], template: function KptSelect_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptSelect_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown", function KptSelect_Template_div_keydown_0_listener($event) { return ctx.onTriggerKeydown($event); })("blur", function KptSelect_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵelementStart(2, "div", 2);
@@ -2270,16 +2519,16 @@ class KptSelect {
             i0.ɵɵclassProp("kpt-select--open", ctx.open())("kpt-select--disabled", ctx.disabled())("kpt-select--invalid", ctx.showInvalid());
             i0.ɵɵattribute("aria-expanded", ctx.open())("aria-disabled", ctx.disabled() || null);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.multiple() && ctx.selectedOptions().length ? 3 : !ctx.multiple() && ctx.hasValue() ? 4 : 5);
+            i0.ɵɵconditional(ctx.multiple() && ctx.selectedOptions().length ? 3 : !ctx.multiple() && ctx.filled() ? 4 : 5);
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r9)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayWidth", trigger_r9.elementRef.nativeElement.offsetWidth);
         } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:var(--%NS%kpt-color-muted);color:var(--%NS%kpt-color-on-muted);font-size:var(--%NS%kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--%NS%kpt-color-on-surface-muted);transition:transform var(--%NS%kpt-motion-duration-fast, .12s) var(--%NS%kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);overflow:hidden;font-size:var(--%NS%kpt-font-size-sm, .875rem);color:var(--%NS%kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem) var(--%NS%kpt-space-3, .75rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);color:var(--%NS%kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--%NS%kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--%NS%kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--%NS%kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--%NS%kpt-color-on-surface);font-weight:var(--%NS%kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--%NS%kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--%NS%kpt-border-width-medium, 2px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-radius-sm, .25rem);color:var(--%NS%kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--%NS%kpt-color-primary);border-color:var(--%NS%kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--%NS%kpt-color-on-surface-muted);text-align:center}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptSelect, [{
         type: Component,
-        args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, template: "<div\n  class=\"kpt-select\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [class.kpt-select--open]=\"open()\"\n  [class.kpt-select--disabled]=\"disabled()\"\n  [class.kpt-select--invalid]=\"showInvalid()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\n>\n  <div class=\"kpt-select__value\">\n    @if (multiple() && selectedOptions().length) {\n      @for (opt of selectedOptions(); track opt.value) {\n        <span class=\"kpt-select__chip\">\n          {{ opt.label }}\n          <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" [attr.aria-label]=\"i18n.t('select.removeChip')\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && hasValue()) {\n      <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n    } @else {\n      <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </div>\n  <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n    @if (filter()) {\n      <div class=\"kpt-select__search\">\n        <kpt-icon name=\"search\" />\n        <input\n          type=\"text\"\n          class=\"kpt-select__search-input\"\n          [value]=\"filterText()\"\n          (input)=\"onFilterInput($event)\"\n          [attr.placeholder]=\"i18n.t('select.search')\"\n        />\n      </div>\n    }\n    <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n      @for (opt of filteredOptions(); track opt.value; let i = $index) {\n        <li\n          class=\"kpt-select__option\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--active]=\"i === activeIndex()\"\n          [class.kpt-select__option--disabled]=\"opt.disabled\"\n          (click)=\"pick(opt)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n        >\n          @if (multiple()) {\n            <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n          }\n          <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n          @if (!multiple() && isSelected(opt)) {\n            <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n          }\n        </li>\n      } @empty {\n        <li class=\"kpt-select__empty\">{{ i18n.t('select.noResults') }}</li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
+        args: [{ selector: 'kpt-select', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon], host: { class: 'kpt-select-host' }, providers: [{ provide: KPT_FORM_FIELD_CONTROL, useExisting: forwardRef(() => KptSelect) }], template: "<div\n  class=\"kpt-select\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [class.kpt-select--open]=\"open()\"\n  [class.kpt-select--disabled]=\"disabled()\"\n  [class.kpt-select--invalid]=\"showInvalid()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n  (blur)=\"touch.emit()\"\n>\n  <div class=\"kpt-select__value\">\n    @if (multiple() && selectedOptions().length) {\n      @for (opt of selectedOptions(); track opt.value) {\n        <span class=\"kpt-select__chip\">\n          {{ opt.label }}\n          <button type=\"button\" class=\"kpt-select__chip-remove\" (click)=\"removeChip(opt, $event)\" [attr.aria-label]=\"i18n.t('select.removeChip')\">\n            <kpt-icon name=\"x\" />\n          </button>\n        </span>\n      }\n    } @else if (!multiple() && filled()) {\n      <span class=\"kpt-select__single\">{{ singleLabel() }}</span>\n    } @else {\n      <span class=\"kpt-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </div>\n  <kpt-icon class=\"kpt-select__chevron\" name=\"chevron-down\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-select__panel\" (keydown)=\"onPanelKeydown($event)\">\n    @if (filter()) {\n      <div class=\"kpt-select__search\">\n        <kpt-icon name=\"search\" />\n        <input\n          type=\"text\"\n          class=\"kpt-select__search-input\"\n          [value]=\"filterText()\"\n          (input)=\"onFilterInput($event)\"\n          [attr.placeholder]=\"i18n.t('select.search')\"\n        />\n      </div>\n    }\n    <ul class=\"kpt-select__list\" role=\"listbox\" [attr.aria-multiselectable]=\"multiple()\">\n      @for (opt of filteredOptions(); track opt.value; let i = $index) {\n        <li\n          class=\"kpt-select__option\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--selected]=\"isSelected(opt)\"\n          [class.kpt-select__option--active]=\"i === activeIndex()\"\n          [class.kpt-select__option--disabled]=\"opt.disabled\"\n          (click)=\"pick(opt)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n        >\n          @if (multiple()) {\n            <span class=\"kpt-select__check\" [class.is-on]=\"isSelected(opt)\"><kpt-icon name=\"check\" /></span>\n          }\n          <span class=\"kpt-select__option-label\">{{ opt.label }}</span>\n          @if (!multiple() && isSelected(opt)) {\n            <kpt-icon class=\"kpt-select__option-tick\" name=\"check\" />\n          }\n        </li>\n      } @empty {\n        <li class=\"kpt-select__empty\">{{ i18n.t('select.noResults') }}</li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-select-host{display:block}.kpt-select{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);min-height:2.5rem;padding:.35rem var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer;transition:border-color var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select:hover:not(.kpt-select--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-select:focus-visible,.kpt-select.kpt-select--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-select.kpt-select--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-select.kpt-select--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-select__value{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.kpt-select__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-select__single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpt-select__chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:var(--kpt-radius-sm, .25rem);background:var(--kpt-color-muted);color:var(--kpt-color-on-muted);font-size:var(--kpt-font-size-xs, .75rem)}.kpt-select__chip-remove{display:inline-flex;border:0;background:none;cursor:pointer;color:inherit;padding:0;opacity:.7}.kpt-select__chip-remove:hover{opacity:1}.kpt-select__chevron{color:var(--kpt-color-on-surface-muted);transition:transform var(--kpt-motion-duration-fast, .12s) var(--kpt-motion-easing-standard)}.kpt-select.kpt-select--open .kpt-select__chevron{transform:rotate(180deg)}.kpt-select__panel{background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);overflow:hidden;font-size:var(--kpt-font-size-sm, .875rem);color:var(--kpt-color-on-surface)}.kpt-select__search{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem) var(--kpt-space-3, .75rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);color:var(--kpt-color-on-surface-muted)}.kpt-select__search-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--kpt-color-on-surface);font:inherit}.kpt-select__search-input::placeholder{color:var(--kpt-color-on-surface-muted)}.kpt-select__list{list-style:none;margin:0;padding:.25rem;max-height:15rem;overflow-y:auto}.kpt-select__option{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);padding:.45rem .6rem;border-radius:var(--kpt-radius-sm, .25rem);cursor:pointer}.kpt-select__option--active{background:var(--kpt-color-surface-variant)}.kpt-select__option--selected{color:var(--kpt-color-on-surface);font-weight:var(--kpt-font-weight-medium, 500)}.kpt-select__option--disabled{opacity:.45;cursor:not-allowed}.kpt-select__option-label{flex:1;min-width:0}.kpt-select__option-tick{color:var(--kpt-color-primary)}.kpt-select__check{display:inline-flex;align-items:center;justify-content:center;width:1.05rem;height:1.05rem;flex-shrink:0;border:var(--kpt-border-width-medium, 2px) solid var(--kpt-form-field-border);border-radius:var(--kpt-radius-sm, .25rem);color:var(--kpt-color-on-primary);font-size:.7rem}.kpt-select__check kpt-icon{opacity:0}.kpt-select__check.is-on{background:var(--kpt-color-primary);border-color:var(--kpt-color-primary)}.kpt-select__check.is-on kpt-icon{opacity:1}.kpt-select__empty{list-style:none;padding:.75rem .6rem;color:var(--kpt-color-on-surface-muted);text-align:center}}\n"] }]
     }], null, { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 37 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptSelect, { className: "KptSelect", filePath: "lib/select/select.component.ts", lineNumber: 40 }); })();
 
 /*
  * Pomocniki nazw dni/miesięcy wyliczane z `Intl` — sterowane bieżącym locale i18n.
@@ -2981,6 +3230,9 @@ class KptDatepicker {
         this.touch = output();
         this.placeholder = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Nazwa dostępna, gdy pola nie opisuje `<label for>` (np. dwa pola w jednym wierszu). */
+        this.ariaLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.displayFormat = input('pl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayFormat" }] : /* istanbul ignore next */ []));
         /** Granulacja wyboru. */
@@ -3309,7 +3561,7 @@ class KptDatepicker {
         this.pendingDate.set('');
     }
     static { this.ɵfac = function KptDatepicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptDatepicker)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 13, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], ["name", "calendar", 1, "kpt-datepicker__icon"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptDatepicker, selectors: [["kpt-datepicker"]], hostAttrs: [1, "kpt-datepicker-host"], inputs: { value: [1, "value"], disabled: [1, "disabled"], invalid: [1, "invalid"], touched: [1, "touched"], placeholder: [1, "placeholder"], ariaLabel: [1, "ariaLabel"], displayFormat: [1, "displayFormat"], selectionMode: [1, "selectionMode"], monthDisplay: [1, "monthDisplay"], hourFormat: [1, "hourFormat"], minuteStep: [1, "minuteStep"], minDate: [1, "minDate"], maxDate: [1, "maxDate"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 8, vars: 15, consts: [["trigger", "cdkOverlayOrigin"], ["cdkOverlayOrigin", "", "role", "button", "tabindex", "0", 1, "kpt-datepicker", 3, "click", "keydown.enter", "blur"], [1, "kpt-datepicker__value"], [1, "kpt-datepicker__placeholder"], [1, "kpt-datepicker__spacer"], ["type", "button", 1, "kpt-datepicker__clear"], [1, "kpt-datepicker__icon", 3, "name"], ["cdkConnectedOverlay", "", "cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop", 3, "backdropClick", "detach", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayPositions", "cdkConnectedOverlayHasBackdrop"], ["type", "button", 1, "kpt-datepicker__clear", 3, "click"], ["name", "x"], [1, "kpt-calendar", 3, "keydown.escape"], [3, "valueChange", "value", "hourFormat", "minuteStep"], [1, "kpt-calendar__footer"], ["size", "sm", 3, "click"], [1, "kpt-calendar__header"], ["type", "button", 1, "kpt-calendar__nav", 3, "click"], ["name", "chevron-left"], [1, "kpt-calendar__title"], ["name", "chevron-right"], [1, "kpt-calendar__weekdays"], [1, "kpt-calendar__weekday"], [1, "kpt-calendar__grid"], ["type", "button", 1, "kpt-calendar__timebar", 3, "click"], ["name", "clock"], ["type", "button", 1, "kpt-calendar__day", 3, "kpt-calendar__day--muted", "kpt-calendar__day--today", "kpt-calendar__day--selected", "disabled"], ["type", "button", 1, "kpt-calendar__day", 3, "click", "disabled"], [1, "kpt-calendar__grid", "kpt-calendar__grid--cells"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "click", "disabled"], ["type", "button", 1, "kpt-calendar__cell", 3, "kpt-calendar__cell--selected"], ["type", "button", 1, "kpt-calendar__cell", 3, "click"]], template: function KptDatepicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵlistener("click", function KptDatepicker_Template_div_click_0_listener() { return ctx.toggleOpen(); })("keydown.enter", function KptDatepicker_Template_div_keydown_enter_0_listener() { return ctx.toggleOpen(); })("blur", function KptDatepicker_Template_div_blur_0_listener() { return ctx.touch.emit(); });
             i0.ɵɵconditionalCreate(2, KptDatepicker_Conditional_2_Template, 2, 1, "span", 2)(3, KptDatepicker_Conditional_3_Template, 2, 1, "span", 3);
@@ -3322,19 +3574,21 @@ class KptDatepicker {
         } if (rf & 2) {
             const trigger_r25 = i0.ɵɵreference(1);
             i0.ɵɵclassProp("kpt-datepicker--open", ctx.open())("kpt-datepicker--disabled", ctx.disabled())("kpt-datepicker--invalid", ctx.showInvalid());
-            i0.ɵɵattribute("aria-disabled", ctx.disabled() || null);
+            i0.ɵɵattribute("aria-disabled", ctx.disabled() || null)("aria-label", ctx.ariaLabel());
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.display() ? 2 : 3);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.display() ? 5 : -1);
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("name", ctx.selectionMode() === "time" ? "clock" : "calendar");
+            i0.ɵɵadvance();
             i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r25)("cdkConnectedOverlayOpen", ctx.open())("cdkConnectedOverlayPositions", ctx.positions)("cdkConnectedOverlayHasBackdrop", true);
         } }, dependencies: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--%NS%kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--%NS%kpt-space-3, .75rem);box-sizing:border-box;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-form-field-border);border-radius:var(--%NS%kpt-form-field-radius, .5rem);background:var(--%NS%kpt-form-field-bg);color:var(--%NS%kpt-form-field-text);font-size:var(--%NS%kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--%NS%kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--%NS%kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--%NS%kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--%NS%kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--%NS%kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--%NS%kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--%NS%kpt-space-3, .75rem);background:var(--%NS%kpt-color-surface-raised);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);box-shadow:var(--%NS%kpt-elevation-3);color:var(--%NS%kpt-color-on-surface);font-size:var(--%NS%kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--%NS%kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--%NS%kpt-font-size-xs, .75rem);color:var(--%NS%kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__day--muted{color:var(--%NS%kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--%NS%kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--%NS%kpt-radius-sm, .25rem);background:none;color:var(--%NS%kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--%NS%kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--%NS%kpt-color-primary)!important;color:var(--%NS%kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--%NS%kpt-space-2, .5rem);width:100%;margin-top:var(--%NS%kpt-space-2, .5rem);padding:var(--%NS%kpt-space-2, .5rem);border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-md, .5rem);background:none;color:var(--%NS%kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--%NS%kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--%NS%kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--%NS%kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDatepicker, [{
         type: Component,
-        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon class=\"kpt-datepicker__icon\" name=\"calendar\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
-    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] }); })();
+        args: [{ selector: 'kpt-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkOverlayOrigin, CdkConnectedOverlay, KptIcon, KptButton, KptClock], host: { class: 'kpt-datepicker-host' }, template: "<div\n  class=\"kpt-datepicker\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.kpt-datepicker--open]=\"open()\"\n  [class.kpt-datepicker--disabled]=\"disabled()\"\n  [class.kpt-datepicker--invalid]=\"showInvalid()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"toggleOpen()\"\n  (keydown.enter)=\"toggleOpen()\"\n  (blur)=\"touch.emit()\"\n>\n  @if (display()) {\n    <span class=\"kpt-datepicker__value\">{{ display() }}</span>\n  } @else {\n    <span class=\"kpt-datepicker__placeholder\">{{ effectivePlaceholder() }}</span>\n  }\n  <span class=\"kpt-datepicker__spacer\"></span>\n  @if (display()) {\n    <button type=\"button\" class=\"kpt-datepicker__clear\" (click)=\"clear($event)\" [attr.aria-label]=\"i18n.t('common.clear')\"><kpt-icon name=\"x\" /></button>\n  }\n  <kpt-icon\n    class=\"kpt-datepicker__icon\"\n    [name]=\"selectionMode() === 'time' ? 'clock' : 'calendar'\"\n  />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div class=\"kpt-calendar\" [class.kpt-calendar--clock]=\"selectionMode() === 'time' || (selectionMode() === 'datetime' && dtView() === 'clock')\" (keydown.escape)=\"close()\">\n    @switch (selectionMode()) {\n      @case ('time') {\n        <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('datetime') {\n        @if (dtView() === 'calendar') {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n          </div>\n          <div class=\"kpt-calendar__weekdays\">\n            @for (wd of weekdays(); track wd) {\n              <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n            }\n          </div>\n          <div class=\"kpt-calendar__grid\">\n            @for (week of weeks(); track $index) {\n              @for (cell of week; track cell.iso) {\n                <button\n                  type=\"button\"\n                  class=\"kpt-calendar__day\"\n                  [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                  [class.kpt-calendar__day--today]=\"cell.today\"\n                  [class.kpt-calendar__day--selected]=\"cell.selected\"\n                  [disabled]=\"cell.disabled\"\n                  [attr.aria-pressed]=\"cell.selected\"\n                  (click)=\"selectDay(cell)\"\n                >{{ cell.day }}</button>\n              }\n            }\n          </div>\n          <button type=\"button\" class=\"kpt-calendar__timebar\" (click)=\"openClock()\">\n            <kpt-icon name=\"clock\" />\n            <span>{{ timeBarLabel() }}</span>\n          </button>\n        } @else {\n          <div class=\"kpt-calendar__header\">\n            <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"backToCalendar()\" [attr.aria-label]=\"i18n.t('datepicker.calendar')\"><kpt-icon name=\"chevron-left\" /></button>\n            <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.time') }}</span>\n          </div>\n          <kpt-clock [(value)]=\"timeStr\" [hourFormat]=\"hourFormat()\" [minuteStep]=\"minuteStep()\" />\n        }\n        <div class=\"kpt-calendar__footer\">\n          <kpt-button size=\"sm\" (click)=\"commit()\">{{ i18n.t('common.done') }}</kpt-button>\n        </div>\n      }\n      @case ('monthYear') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYear()\" [attr.aria-label]=\"i18n.t('datepicker.prevYear')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ viewYear() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYear()\" [attr.aria-label]=\"i18n.t('datepicker.nextYear')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('year') {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.prevYears')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ yearRangeLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextYearPage()\" [attr.aria-label]=\"i18n.t('datepicker.nextYears')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of yearCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [disabled]=\"cell.disabled\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @case ('month') {\n        <div class=\"kpt-calendar__header\">\n          <span class=\"kpt-calendar__title\">{{ i18n.t('datepicker.month') }}</span>\n        </div>\n        <div class=\"kpt-calendar__grid kpt-calendar__grid--cells\">\n          @for (cell of monthCells(); track cell.value) {\n            <button\n              type=\"button\"\n              class=\"kpt-calendar__cell\"\n              [class.kpt-calendar__cell--selected]=\"cell.selected\"\n              [attr.aria-pressed]=\"cell.selected\"\n              (click)=\"selectCell(cell)\"\n            >{{ cell.label }}</button>\n          }\n        </div>\n      }\n      @default {\n        <div class=\"kpt-calendar__header\">\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"prevMonth()\" [attr.aria-label]=\"i18n.t('datepicker.prevMonth')\"><kpt-icon name=\"chevron-left\" /></button>\n          <span class=\"kpt-calendar__title\">{{ monthLabel() }}</span>\n          <button type=\"button\" class=\"kpt-calendar__nav\" (click)=\"nextMonth()\" [attr.aria-label]=\"i18n.t('datepicker.nextMonth')\"><kpt-icon name=\"chevron-right\" /></button>\n        </div>\n        <div class=\"kpt-calendar__weekdays\">\n          @for (wd of weekdays(); track wd) {\n            <span class=\"kpt-calendar__weekday\">{{ wd }}</span>\n          }\n        </div>\n        <div class=\"kpt-calendar__grid\">\n          @for (week of weeks(); track $index) {\n            @for (cell of week; track cell.iso) {\n              <button\n                type=\"button\"\n                class=\"kpt-calendar__day\"\n                [class.kpt-calendar__day--muted]=\"!cell.inMonth\"\n                [class.kpt-calendar__day--today]=\"cell.today\"\n                [class.kpt-calendar__day--selected]=\"cell.selected\"\n                [disabled]=\"cell.disabled\"\n                [attr.aria-pressed]=\"cell.selected\"\n                (click)=\"selectDay(cell)\"\n              >{{ cell.day }}</button>\n            }\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: ["@layer kpt.components{.kpt-datepicker-host{display:block}.kpt-datepicker{display:flex;align-items:center;gap:var(--kpt-space-2, .5rem);height:2.5rem;padding-inline:var(--kpt-space-3, .75rem);box-sizing:border-box;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-form-field-border);border-radius:var(--kpt-form-field-radius, .5rem);background:var(--kpt-form-field-bg);color:var(--kpt-form-field-text);font-size:var(--kpt-font-size-sm, .875rem);cursor:pointer}.kpt-datepicker:hover:not(.kpt-datepicker--disabled){border-color:var(--kpt-form-field-border-hover)}.kpt-datepicker:focus-visible,.kpt-datepicker.kpt-datepicker--open{outline:none;border-color:var(--kpt-form-field-border-focus);box-shadow:0 0 0 2px color-mix(in oklch,var(--kpt-form-field-border-focus) 30%,transparent)}.kpt-datepicker.kpt-datepicker--invalid{border-color:var(--kpt-form-field-border-error)}.kpt-datepicker.kpt-datepicker--disabled{cursor:not-allowed;opacity:.6;background:var(--kpt-color-surface-variant)}.kpt-datepicker__placeholder{color:var(--kpt-form-field-placeholder)}.kpt-datepicker__spacer{flex:1}.kpt-datepicker__icon{color:var(--kpt-color-on-surface-muted)}.kpt-datepicker__clear{display:inline-flex;border:0;background:none;cursor:pointer;color:var(--kpt-color-on-surface-muted);padding:0}.kpt-datepicker__clear:hover{color:var(--kpt-color-on-surface)}.kpt-calendar{width:17rem;padding:var(--kpt-space-3, .75rem);background:var(--kpt-color-surface-raised);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);box-shadow:var(--kpt-elevation-3);color:var(--kpt-color-on-surface);font-size:var(--kpt-font-size-sm, .875rem)}.kpt-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--kpt-space-2, .5rem)}.kpt-calendar__title{font-weight:var(--kpt-font-weight-semibold, 600);text-transform:capitalize}.kpt-calendar__nav{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer}.kpt-calendar__nav:hover{background:var(--kpt-color-muted)}.kpt-calendar__weekdays,.kpt-calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.kpt-calendar__weekday{text-align:center;font-size:var(--kpt-font-size-xs, .75rem);color:var(--kpt-color-on-surface-muted);padding:.25rem 0}.kpt-calendar__day{aspect-ratio:1;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit}.kpt-calendar__day:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__day--muted{color:var(--kpt-color-on-surface-muted);opacity:.5}.kpt-calendar__day--today{box-shadow:inset 0 0 0 1px var(--kpt-color-border-strong)}.kpt-calendar__day--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__day:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__grid--cells{grid-template-columns:repeat(3,1fr);gap:4px}.kpt-calendar__cell{padding:.6rem .25rem;border:0;border-radius:var(--kpt-radius-sm, .25rem);background:none;color:var(--kpt-color-on-surface);cursor:pointer;font:inherit;text-transform:capitalize}.kpt-calendar__cell:hover:not(:disabled){background:var(--kpt-color-muted)}.kpt-calendar__cell--selected{background:var(--kpt-color-primary)!important;color:var(--kpt-color-on-primary)}.kpt-calendar__cell:disabled{opacity:.3;cursor:not-allowed}.kpt-calendar__timebar{display:flex;align-items:center;justify-content:center;gap:var(--kpt-space-2, .5rem);width:100%;margin-top:var(--kpt-space-2, .5rem);padding:var(--kpt-space-2, .5rem);border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-md, .5rem);background:none;color:var(--kpt-color-on-surface);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.kpt-calendar__timebar:hover{background:var(--kpt-color-muted)}.kpt-calendar__timebar kpt-icon{color:var(--kpt-color-on-surface-muted)}.kpt-calendar__footer{display:flex;justify-content:flex-end;margin-top:var(--kpt-space-3, .75rem)}.kpt-calendar--clock{width:16rem}}\n"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], monthDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthDisplay", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDatepicker, { className: "KptDatepicker", filePath: "lib/datepicker/datepicker.component.ts", lineNumber: 66 }); })();
 
 const _c0$u = ["ta"];
@@ -6830,6 +7084,7 @@ const _c0$q = ["*"];
 /**
  * Górny pasek (toolbar) — pozioma belka na treść aplikacji (logo, akcje).
  * Elementowi z atrybutem `kptToolbarSpacer` nadaj elastyczny odstęp, aby rozepchnąć zawartość.
+ * Poniżej breakpointa `sm` pasek sam zbiega się do niższej wysokości i węższych marginesów.
  *
  * @example
  * <kpt-toolbar elevated>
@@ -6842,23 +7097,31 @@ class KptToolbar {
     constructor() {
         /** Dodaje cień (wyniesienie) pod paskiem. */
         this.elevated = input(false, { ...(ngDevMode ? { debugName: "elevated" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Pozwala zawartości paska zawinąć się do kolejnych wierszy, gdy zabraknie miejsca.
+         * Opcjonalne, bo zawijanie zmienia zachowanie `kptToolbarSpacer` — w jednowierszowym
+         * pasku rozpycha on treść, a w zawijanym potrafi zepchnąć resztę do nowego wiersza.
+         */
+        this.wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     }
     static { this.ɵfac = function KptToolbar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptToolbar)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptToolbar, selectors: [["kpt-toolbar"]], hostAttrs: [1, "kpt-toolbar"], hostVars: 2, hostBindings: function KptToolbar_HostBindings(rf, ctx) { if (rf & 2) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptToolbar, selectors: [["kpt-toolbar"]], hostAttrs: [1, "kpt-toolbar"], hostVars: 3, hostBindings: function KptToolbar_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-wrap", ctx.wrap() ? "" : null);
             i0.ɵɵclassProp("kpt-toolbar--elevated", ctx.elevated());
-        } }, inputs: { elevated: [1, "elevated"] }, ngContentSelectors: _c0$q, decls: 1, vars: 0, template: function KptToolbar_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { elevated: [1, "elevated"], wrap: [1, "wrap"] }, ngContentSelectors: _c0$q, decls: 1, vars: 0, template: function KptToolbar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["@layer kpt.components{.kpt-toolbar{display:flex;align-items:center;gap:var(--%NS%kpt-space-3, .75rem);min-height:var(--%NS%kpt-toolbar-height, 3.5rem);padding-inline:var(--%NS%kpt-space-4, 1rem);background:var(--%NS%kpt-toolbar-bg);color:var(--%NS%kpt-toolbar-fg);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-toolbar-border)}.kpt-toolbar--elevated{box-shadow:var(--%NS%kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto}}\n"], encapsulation: 2 }); }
+        } }, styles: ["@layer kpt.components{.kpt-toolbar{--%NS%_kpt-toolbar-height: var(--%NS%kpt-toolbar-height, 3.5rem);--%NS%_kpt-toolbar-padding-inline: var(--%NS%kpt-space-4, 1rem);--%NS%_kpt-toolbar-gap: var(--%NS%kpt-space-3, .75rem);display:flex;align-items:center;gap:var(--%NS%_kpt-toolbar-gap);min-height:var(--%NS%_kpt-toolbar-height);padding-inline:var(--%NS%_kpt-toolbar-padding-inline);background:var(--%NS%kpt-toolbar-bg);color:var(--%NS%kpt-toolbar-fg);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-toolbar-border);min-inline-size:0}.kpt-toolbar--elevated{box-shadow:var(--%NS%kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto;min-inline-size:0}.kpt-toolbar[data-wrap]{flex-wrap:wrap;row-gap:var(--%NS%kpt-space-2, .5rem);padding-block:var(--%NS%kpt-space-2, .5rem)}@media(max-width:639.98px){.kpt-toolbar{--%NS%_kpt-toolbar-height: var(--%NS%kpt-toolbar-height-compact, 3rem);--%NS%_kpt-toolbar-padding-inline: var(--%NS%kpt-space-3, .75rem);--%NS%_kpt-toolbar-gap: var(--%NS%kpt-space-2, .5rem)}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptToolbar, [{
         type: Component,
         args: [{ selector: 'kpt-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content />', host: {
                     class: 'kpt-toolbar',
                     '[class.kpt-toolbar--elevated]': 'elevated()',
-                }, styles: ["@layer kpt.components{.kpt-toolbar{display:flex;align-items:center;gap:var(--kpt-space-3, .75rem);min-height:var(--kpt-toolbar-height, 3.5rem);padding-inline:var(--kpt-space-4, 1rem);background:var(--kpt-toolbar-bg);color:var(--kpt-toolbar-fg);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-toolbar-border)}.kpt-toolbar--elevated{box-shadow:var(--kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto}}\n"] }]
-    }], null, { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToolbar, { className: "KptToolbar", filePath: "lib/toolbar/toolbar.component.ts", lineNumber: 25 }); })();
+                    '[attr.data-wrap]': "wrap() ? '' : null",
+                }, styles: ["@layer kpt.components{.kpt-toolbar{--_kpt-toolbar-height: var(--kpt-toolbar-height, 3.5rem);--_kpt-toolbar-padding-inline: var(--kpt-space-4, 1rem);--_kpt-toolbar-gap: var(--kpt-space-3, .75rem);display:flex;align-items:center;gap:var(--_kpt-toolbar-gap);min-height:var(--_kpt-toolbar-height);padding-inline:var(--_kpt-toolbar-padding-inline);background:var(--kpt-toolbar-bg);color:var(--kpt-toolbar-fg);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-toolbar-border);min-inline-size:0}.kpt-toolbar--elevated{box-shadow:var(--kpt-elevation-1)}.kpt-toolbar [kptToolbarSpacer]{flex:1 1 auto;min-inline-size:0}.kpt-toolbar[data-wrap]{flex-wrap:wrap;row-gap:var(--kpt-space-2, .5rem);padding-block:var(--kpt-space-2, .5rem)}@media(max-width:639.98px){.kpt-toolbar{--_kpt-toolbar-height: var(--kpt-toolbar-height-compact, 3rem);--_kpt-toolbar-padding-inline: var(--kpt-space-3, .75rem);--_kpt-toolbar-gap: var(--kpt-space-2, .5rem)}}}\n"] }]
+    }], null, { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptToolbar, { className: "KptToolbar", filePath: "lib/toolbar/toolbar.component.ts", lineNumber: 27 }); })();
 
 const _c0$p = ["*"];
 /**
@@ -6886,65 +7149,208 @@ class KptSidenav {
 
 const _c0$o = [[["", "kptShellToolbar", ""]], [["", "kptShellSidenav", ""]], "*"];
 const _c1$8 = ["[kptShellToolbar]", "[kptShellSidenav]", "*"];
-function KptAppShell_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 4);
-    i0.ɵɵdomListener("click", function KptAppShell_Conditional_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onScrimClick()); });
-    i0.ɵɵdomElementEnd();
-} }
 /**
- * Szkielet aplikacji (app shell) w stylu Material: toolbar u góry, panel boczny i treść.
- * Sloty projekcji: `[kptShellToolbar]`, `[kptShellSidenav]`, oraz treść domyślna.
+ * Szkielet aplikacji: pasek u góry, panel boczny i treść. Sloty projekcji:
+ * `[kptShellToolbar]`, `[kptShellSidenav]` oraz treść domyślna.
+ *
+ * Domyślny tryb `auto` jest responsywny bez konfiguracji: od `sidenavBreakpoint` w górę
+ * panel jest zadokowany, poniżej zachowuje się jak nakładka ze scrimem i startuje zamknięty.
+ * Opcjonalny `sidenavRailBreakpoint` wstawia między te pasma szynę ikon.
+ *
+ * O układzie decyduje wyłącznie CSS — nic nie migocze przed hydracją i nic nie zależy od
+ * `matchMedia`. JavaScript odpowiada tylko za to, KTÓRY stan przełącza przycisk.
+ *
+ * Panel ma dwa niezależne stany otwarcia (`sidenavOpen` dla układu zadokowanego,
+ * `sidenavCompactOpen` dla nakładki), więc intencja z desktopu przeżywa zwężenie
+ * i ponowne rozszerzenie okna.
  *
  * @example
- * <kpt-app-shell [(sidenavOpen)]="navOpen" sidenavMode="side">
- *   <kpt-toolbar kptShellToolbar>…</kpt-toolbar>
+ * <kpt-app-shell [(sidenavOpen)]="navOpen">
+ *   <kpt-toolbar kptShellToolbar>
+ *     <button kptShellNavToggle type="button"><kpt-icon name="menu" /></button>
+ *   </kpt-toolbar>
  *   <kpt-sidenav kptShellSidenav>…</kpt-sidenav>
  *   <router-outlet />
  * </kpt-app-shell>
  */
 class KptAppShell {
+    static { this.nextId = 0; }
     constructor() {
-        /** Czy panel boczny jest otwarty (dwukierunkowe). */
+        this.breakpoints = inject(KptBreakpointObserver);
+        this.i18n = inject(KptI18n);
+        /** Czy panel jest otwarty w układzie zadokowanym (oraz w wymuszonym trybie `over`). */
         this.sidenavOpen = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sidenavOpen" }] : /* istanbul ignore next */ []));
-        /** Tryb panelu: 'side' rozpycha treść, 'over' nakłada się ze scrimem. */
-        this.sidenavMode = input('side', /* @ts-ignore */
+        /**
+         * Czy nakładka jest wysunięta w trybie `auto` poniżej `sidenavBreakpoint`.
+         *
+         * Celowo osobny od `sidenavOpen`: gdyby oba układy dzieliły jeden model, wejście na wąski
+         * ekran musiałoby nadpisać stan konsumenta, a powrót na szeroki nie miałby czego przywrócić.
+         */
+        this.sidenavCompactOpen = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavCompactOpen" }] : /* istanbul ignore next */ []));
+        /** `auto` przełącza układ na breakpoincie; `side`/`over` wymuszają go niezależnie od szerokości. */
+        this.sidenavMode = input('auto', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sidenavMode" }] : /* istanbul ignore next */ []));
+        /** Od tego breakpointa w górę tryb `auto` dokuje panel; poniżej robi z niego nakładkę. */
+        this.sidenavBreakpoint = input('lg', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavBreakpoint" }] : /* istanbul ignore next */ []));
+        /**
+         * Włącza szynę ikon w paśmie od `sidenavBreakpoint` do tego breakpointa: zamknięty panel
+         * nie chowa się wtedy całkowicie, tylko zwęża do `--kpt-sidenav-rail-width`. Powyżej tego
+         * progu zamknięcie znów chowa panel w całości. Wartość musi być wyższa niż `sidenavBreakpoint`.
+         * `null` (domyślnie) wyłącza szynę.
+         */
+        this.sidenavRailBreakpoint = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavRailBreakpoint" }] : /* istanbul ignore next */ []));
+        /** Etykieta dostępności panelu; puste = `appShell.navigation` ze słownika. */
+        this.sidenavLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidenavLabel" }] : /* istanbul ignore next */ []));
+        /** Identyfikator panelu dla `aria-controls` przycisku przełączającego. */
+        this.sidenavId = `kpt-app-shell-nav-${KptAppShell.nextId++}`;
+        /** Czy panel zachowuje się TERAZ jak nakładka nad treścią. */
+        this.isOverlay = computed(() => {
+            const mode = this.sidenavMode();
+            if (mode === 'over')
+                return true;
+            if (mode === 'side')
+                return false;
+            return !this.breakpoints.up(this.sidenavBreakpoint())();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
+        /** Efektywny stan otwarcia — ten, który obowiązuje w bieżącym układzie. */
+        this.isSidenavOpen = computed(() => this.usesCompactState() ? this.sidenavCompactOpen() : this.sidenavOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSidenavOpen" }] : /* istanbul ignore next */ []));
+        this.navLabel = computed(() => this.sidenavLabel() || this.i18n.t('appShell.navigation'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []));
+        /** Scrim blokuje wskaźnik, ale nie klawiaturę — treść pod nakładką nie może łapać fokusu. */
+        this.contentInert = computed(() => this.isOverlay() && this.isSidenavOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentInert" }] : /* istanbul ignore next */ []));
+        // Wyjście z nakładki chowa ją na wejściu: inaczej wróciłaby otwarta przy kolejnym
+        // zwężeniu okna, mimo że użytkownik jej wtedy nie otwierał.
+        effect(() => {
+            if (!this.isOverlay())
+                this.sidenavCompactOpen.set(false);
+        });
+    }
+    /** Przełącza panel — trafia w stan właściwy dla bieżącego układu. */
+    toggleSidenav() {
+        this.setSidenavOpen(!this.isSidenavOpen());
+    }
+    /** Otwiera panel w bieżącym układzie. */
+    openSidenav() {
+        this.setSidenavOpen(true);
+    }
+    /** Zamyka panel w bieżącym układzie. */
+    closeSidenav() {
+        this.setSidenavOpen(false);
     }
     onScrimClick() {
-        if (this.sidenavMode() === 'over') {
-            this.sidenavOpen.set(false);
-        }
+        // Scrim jest klikalny tylko wtedy, gdy CSS uczynił go widocznym — nie trzeba sprawdzać trybu.
+        this.closeSidenav();
+    }
+    onEscape() {
+        if (this.isOverlay() && this.isSidenavOpen())
+            this.closeSidenav();
+    }
+    usesCompactState() {
+        return this.sidenavMode() === 'auto' && this.isOverlay();
+    }
+    setSidenavOpen(open) {
+        if (this.usesCompactState())
+            this.sidenavCompactOpen.set(open);
+        else
+            this.sidenavOpen.set(open);
     }
     static { this.ɵfac = function KptAppShell_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptAppShell)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAppShell, selectors: [["kpt-app-shell"]], hostAttrs: [1, "kpt-app-shell"], hostVars: 3, hostBindings: function KptAppShell_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵattribute("data-sidenav-mode", ctx.sidenavMode());
-            i0.ɵɵclassProp("kpt-app-shell--nav-open", ctx.sidenavOpen());
-        } }, inputs: { sidenavOpen: [1, "sidenavOpen"], sidenavMode: [1, "sidenavMode"] }, outputs: { sidenavOpen: "sidenavOpenChange" }, ngContentSelectors: _c1$8, decls: 7, vars: 1, consts: [[1, "kpt-app-shell__body"], [1, "kpt-app-shell__sidenav"], [1, "kpt-app-shell__scrim"], [1, "kpt-app-shell__content"], [1, "kpt-app-shell__scrim", 3, "click"]], template: function KptAppShell_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KptAppShell, selectors: [["kpt-app-shell"]], hostAttrs: [1, "kpt-app-shell"], hostVars: 7, hostBindings: function KptAppShell_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown.escape", function KptAppShell_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-sidenav-mode", ctx.sidenavMode())("data-sidenav-breakpoint", ctx.sidenavBreakpoint())("data-sidenav-rail", ctx.sidenavRailBreakpoint());
+            i0.ɵɵclassProp("kpt-app-shell--nav-open", ctx.sidenavOpen())("kpt-app-shell--nav-compact-open", ctx.sidenavCompactOpen());
+        } }, inputs: { sidenavOpen: [1, "sidenavOpen"], sidenavCompactOpen: [1, "sidenavCompactOpen"], sidenavMode: [1, "sidenavMode"], sidenavBreakpoint: [1, "sidenavBreakpoint"], sidenavRailBreakpoint: [1, "sidenavRailBreakpoint"], sidenavLabel: [1, "sidenavLabel"] }, outputs: { sidenavOpen: "sidenavOpenChange", sidenavCompactOpen: "sidenavCompactOpenChange" }, ngContentSelectors: _c1$8, decls: 7, vars: 3, consts: [[1, "kpt-app-shell__body"], ["role", "navigation", "tabindex", "-1", 1, "kpt-app-shell__sidenav", 3, "id"], ["aria-hidden", "true", 1, "kpt-app-shell__scrim", 3, "click"], [1, "kpt-app-shell__content"]], template: function KptAppShell_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$o);
             i0.ɵɵprojection(0);
             i0.ɵɵdomElementStart(1, "div", 0)(2, "aside", 1);
             i0.ɵɵprojection(3, 1);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(4, KptAppShell_Conditional_4_Template, 1, 0, "div", 2);
+            i0.ɵɵdomElementStart(4, "div", 2);
+            i0.ɵɵdomListener("click", function KptAppShell_Template_div_click_4_listener() { return ctx.onScrimClick(); });
+            i0.ɵɵdomElementEnd();
             i0.ɵɵdomElementStart(5, "main", 3);
             i0.ɵɵprojection(6, 2);
             i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.sidenavMode() === "over" && ctx.sidenavOpen() ? 4 : -1);
-        } }, styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--%NS%kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard),transform var(--%NS%kpt-motion-duration-base, .2s) var(--%NS%kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--%NS%kpt-color-overlay-scrim);z-index:calc(var(--%NS%kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--%NS%kpt-z-overlay, 1100);box-shadow:var(--%NS%kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"], encapsulation: 2 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵdomProperty("id", ctx.sidenavId);
+            i0.ɵɵattribute("aria-label", ctx.navLabel());
+            i0.ɵɵadvance(3);
+            i0.ɵɵattribute("inert", ctx.contentInert() ? "" : null);
+        } }, styles: ["@layer kpt.components{.kpt-app-shell{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-z: var(--%NS%kpt-z-overlay, 1100);--%NS%_kpt-shell-duration: var(--%NS%kpt-motion-duration-base, .2s);--%NS%_kpt-shell-easing: var(--%NS%kpt-motion-easing-standard);--%NS%_kpt-shell-out: -100%;display:flex;flex-direction:column;block-size:100vh;block-size:100dvh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-block-size:0}.kpt-app-shell__sidenav{inline-size:var(--%NS%_kpt-shell-sidenav-width);flex-shrink:0;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;transition:margin-inline-start var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),inline-size var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),translate var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),visibility 0s linear var(--%NS%_kpt-shell-vis-delay, 0s)}.kpt-app-shell__content{flex:1;min-inline-size:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--%NS%kpt-color-overlay-scrim);z-index:calc(var(--%NS%_kpt-shell-z) - 1);opacity:0;visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration);transition:opacity var(--%NS%_kpt-shell-duration) var(--%NS%_kpt-shell-easing),visibility 0s linear var(--%NS%_kpt-shell-vis-delay, 0s)}.kpt-app-shell__sidenav [kptNavLabel],.kpt-app-shell__sidenav [kptNavSection]{position:var(--%NS%_kpt-shell-label-position, static);inline-size:var(--%NS%_kpt-shell-label-size, auto);block-size:var(--%NS%_kpt-shell-label-size, auto);overflow:var(--%NS%_kpt-shell-label-overflow, visible);clip-path:var(--%NS%_kpt-shell-label-clip, none);white-space:var(--%NS%_kpt-shell-label-wrap, normal)}:where(.kpt-app-shell__sidenav) :where(a,button){text-align:var(--%NS%_kpt-shell-item-align, start)}[dir=rtl] .kpt-app-shell,.kpt-app-shell[dir=rtl]{--%NS%_kpt-shell-out: 100%}.kpt-app-shell[data-sidenav-mode=side]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__scrim{display:none}.kpt-app-shell[data-sidenav-mode=over]{--%NS%_kpt-shell-sidenav-width: min(var(--%NS%kpt-sidenav-width, 16rem), 85vw);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--%NS%_kpt-shell-z);box-shadow:var(--%NS%kpt-elevation-3);--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{translate:var(--%NS%_kpt-shell-out) 0;visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=over].kpt-app-shell--nav-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]{--%NS%_kpt-shell-sidenav-width: min(var(--%NS%kpt-sidenav-width, 16rem), 85vw);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--%NS%_kpt-shell-z);box-shadow:var(--%NS%kpt-elevation-3);--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]:not(.kpt-app-shell--nav-compact-open) .kpt-app-shell__sidenav{translate:var(--%NS%_kpt-shell-out) 0;visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=auto].kpt-app-shell--nav-compact-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--%NS%_kpt-shell-vis-delay: 0s}@media(min-width:640px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-rail-width, 4rem);--%NS%_kpt-shell-label-position: absolute;--%NS%_kpt-shell-label-size: 1px;--%NS%_kpt-shell-label-overflow: hidden;--%NS%_kpt-shell-label-clip: inset(50%);--%NS%_kpt-shell-label-wrap: nowrap;--%NS%_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--%NS%_kpt-shell-vis-delay: 0s}}@media(min-width:640px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__scrim{display:none}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__scrim{display:none}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__scrim{display:none}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__scrim{display:none}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]{--%NS%_kpt-shell-sidenav-width: var(--%NS%kpt-sidenav-width, 16rem);--%NS%_kpt-shell-label-position: static;--%NS%_kpt-shell-label-size: auto;--%NS%_kpt-shell-label-overflow: visible;--%NS%_kpt-shell-label-clip: none;--%NS%_kpt-shell-label-wrap: normal;--%NS%_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--%NS%_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--%NS%_kpt-shell-sidenav-width));visibility:hidden;--%NS%_kpt-shell-vis-delay: var(--%NS%_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__scrim{display:none}}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav,.kpt-app-shell__scrim{transition:none}}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptAppShell, [{
         type: Component,
         args: [{ selector: 'kpt-app-shell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                     class: 'kpt-app-shell',
                     '[attr.data-sidenav-mode]': 'sidenavMode()',
+                    '[attr.data-sidenav-breakpoint]': 'sidenavBreakpoint()',
+                    '[attr.data-sidenav-rail]': 'sidenavRailBreakpoint()',
                     '[class.kpt-app-shell--nav-open]': 'sidenavOpen()',
-                }, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside class=\"kpt-app-shell__sidenav\">\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  @if (sidenavMode() === 'over' && sidenavOpen()) {\n    <div class=\"kpt-app-shell__scrim\" (click)=\"onScrimClick()\"></div>\n  }\n\n  <main class=\"kpt-app-shell__content\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{display:flex;flex-direction:column;height:100vh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-height:0}.kpt-app-shell__sidenav{width:var(--kpt-sidenav-width, 16rem);flex-shrink:0;min-height:0;overflow-y:auto;transition:margin-inline-start var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard),transform var(--kpt-motion-duration-base, .2s) var(--kpt-motion-easing-standard)}.kpt-app-shell__content{flex:1;min-width:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--kpt-z-overlay, 1100) - 1)}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--kpt-sidenav-width, 16rem))}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;z-index:var(--kpt-z-overlay, 1100);box-shadow:var(--kpt-elevation-3)}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{transform:translate(-100%)}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav{transition:none}}}\n"] }]
-    }], null, { sidenavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavOpen", required: false }] }, { type: i0.Output, args: ["sidenavOpenChange"] }], sidenavMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMode", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAppShell, { className: "KptAppShell", filePath: "lib/app-shell/app-shell.component.ts", lineNumber: 28 }); })();
+                    '[class.kpt-app-shell--nav-compact-open]': 'sidenavCompactOpen()',
+                    '(document:keydown.escape)': 'onEscape()',
+                }, template: "<ng-content select=\"[kptShellToolbar]\" />\n\n<div class=\"kpt-app-shell__body\">\n  <aside\n    class=\"kpt-app-shell__sidenav\"\n    role=\"navigation\"\n    tabindex=\"-1\"\n    [id]=\"sidenavId\"\n    [attr.aria-label]=\"navLabel()\"\n  >\n    <ng-content select=\"[kptShellSidenav]\" />\n  </aside>\n\n  <!--\n    Scrim jest zawsze w DOM, a jego widoczno\u015Bci\u0105 steruje wy\u0142\u0105cznie CSS. Dzi\u0119ki temu nak\u0142adka\n    wygl\u0105da poprawnie ju\u017C na pierwszej klatce \u2014 tak\u017Ce przed hydracj\u0105 i przy wy\u0142\u0105czonym JS.\n  -->\n  <div class=\"kpt-app-shell__scrim\" aria-hidden=\"true\" (click)=\"onScrimClick()\"></div>\n\n  <main class=\"kpt-app-shell__content\" [attr.inert]=\"contentInert() ? '' : null\">\n    <ng-content />\n  </main>\n</div>\n", styles: ["@layer kpt.components{.kpt-app-shell{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-z: var(--kpt-z-overlay, 1100);--_kpt-shell-duration: var(--kpt-motion-duration-base, .2s);--_kpt-shell-easing: var(--kpt-motion-easing-standard);--_kpt-shell-out: -100%;display:flex;flex-direction:column;block-size:100vh;block-size:100dvh}.kpt-app-shell__body{position:relative;flex:1;display:flex;min-block-size:0}.kpt-app-shell__sidenav{inline-size:var(--_kpt-shell-sidenav-width);flex-shrink:0;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;transition:margin-inline-start var(--_kpt-shell-duration) var(--_kpt-shell-easing),inline-size var(--_kpt-shell-duration) var(--_kpt-shell-easing),translate var(--_kpt-shell-duration) var(--_kpt-shell-easing),visibility 0s linear var(--_kpt-shell-vis-delay, 0s)}.kpt-app-shell__content{flex:1;min-inline-size:0;overflow:auto}.kpt-app-shell__scrim{position:absolute;inset:0;background:var(--kpt-color-overlay-scrim);z-index:calc(var(--_kpt-shell-z) - 1);opacity:0;visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration);transition:opacity var(--_kpt-shell-duration) var(--_kpt-shell-easing),visibility 0s linear var(--_kpt-shell-vis-delay, 0s)}.kpt-app-shell__sidenav [kptNavLabel],.kpt-app-shell__sidenav [kptNavSection]{position:var(--_kpt-shell-label-position, static);inline-size:var(--_kpt-shell-label-size, auto);block-size:var(--_kpt-shell-label-size, auto);overflow:var(--_kpt-shell-label-overflow, visible);clip-path:var(--_kpt-shell-label-clip, none);white-space:var(--_kpt-shell-label-wrap, normal)}:where(.kpt-app-shell__sidenav) :where(a,button){text-align:var(--_kpt-shell-item-align, start)}[dir=rtl] .kpt-app-shell,.kpt-app-shell[dir=rtl]{--_kpt-shell-out: 100%}.kpt-app-shell[data-sidenav-mode=side]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=side]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=side] .kpt-app-shell__scrim{display:none}.kpt-app-shell[data-sidenav-mode=over]{--_kpt-shell-sidenav-width: min(var(--kpt-sidenav-width, 16rem), 85vw);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--_kpt-shell-z);box-shadow:var(--kpt-elevation-3);--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=over]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{translate:var(--_kpt-shell-out) 0;visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=over] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=over].kpt-app-shell--nav-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]{--_kpt-shell-sidenav-width: min(var(--kpt-sidenav-width, 16rem), 85vw);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__sidenav{position:absolute;inset-block:0;inset-inline-start:0;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:var(--_kpt-shell-z);box-shadow:var(--kpt-elevation-3);--_kpt-shell-vis-delay: 0s}.kpt-app-shell[data-sidenav-mode=auto]:not(.kpt-app-shell--nav-compact-open) .kpt-app-shell__sidenav{translate:var(--_kpt-shell-out) 0;visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell[data-sidenav-mode=auto] .kpt-app-shell__scrim{display:block}.kpt-app-shell[data-sidenav-mode=auto].kpt-app-shell--nav-compact-open .kpt-app-shell__scrim{opacity:1;visibility:visible;--_kpt-shell-vis-delay: 0s}@media(min-width:640px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=sm][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=md][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=lg][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=xl][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"] .kpt-app-shell__scrim{display:none}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open){--_kpt-shell-sidenav-width: var(--kpt-sidenav-rail-width, 4rem);--_kpt-shell-label-position: absolute;--_kpt-shell-label-size: 1px;--_kpt-shell-label-overflow: hidden;--_kpt-shell-label-clip: inset(50%);--_kpt-shell-label-wrap: nowrap;--_kpt-shell-item-align: center}.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-breakpoint=\"2xl\"][data-sidenav-rail]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:0;visibility:visible;overflow-x:hidden;--_kpt-shell-vis-delay: 0s}}@media(min-width:640px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=sm] .kpt-app-shell__scrim{display:none}}@media(min-width:768px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=md] .kpt-app-shell__scrim{display:none}}@media(min-width:1024px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=lg] .kpt-app-shell__scrim{display:none}}@media(min-width:1280px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=xl] .kpt-app-shell__scrim{display:none}}@media(min-width:1536px){.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]{--_kpt-shell-sidenav-width: var(--kpt-sidenav-width, 16rem);--_kpt-shell-label-position: static;--_kpt-shell-label-size: auto;--_kpt-shell-label-overflow: visible;--_kpt-shell-label-clip: none;--_kpt-shell-label-wrap: normal;--_kpt-shell-item-align: start}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__sidenav{position:static;inset-block:auto;inset-inline-start:auto;margin-inline-start:0;translate:none;visibility:visible;overflow-x:auto;z-index:auto;box-shadow:none;--_kpt-shell-vis-delay: 0s}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"]:not(.kpt-app-shell--nav-open) .kpt-app-shell__sidenav{margin-inline-start:calc(-1 * var(--_kpt-shell-sidenav-width));visibility:hidden;--_kpt-shell-vis-delay: var(--_kpt-shell-duration)}.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell.kpt-app-shell[data-sidenav-mode=auto][data-sidenav-rail=\"2xl\"] .kpt-app-shell__scrim{display:none}}@media(prefers-reduced-motion:reduce){.kpt-app-shell__sidenav,.kpt-app-shell__scrim{transition:none}}}\n"] }]
+    }], () => [], { sidenavOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavOpen", required: false }] }, { type: i0.Output, args: ["sidenavOpenChange"] }], sidenavCompactOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavCompactOpen", required: false }] }, { type: i0.Output, args: ["sidenavCompactOpenChange"] }], sidenavMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavMode", required: false }] }], sidenavBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavBreakpoint", required: false }] }], sidenavRailBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavRailBreakpoint", required: false }] }], sidenavLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavLabel", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptAppShell, { className: "KptAppShell", filePath: "lib/app-shell/app-shell.component.ts", lineNumber: 63 }); })();
+
+/**
+ * Przycisk przełączający panel boczny `kpt-app-shell`. Umieść go w slocie
+ * `[kptShellToolbar]` — dyrektywa sama odnajdzie shell w drzewie deklaracji.
+ *
+ * Trafia w stan właściwy dla bieżącego układu (zadokowany albo nakładka), więc jeden
+ * przycisk obsługuje desktop i wąski ekran. Bez tej dyrektywy aplikacja musiałaby sama
+ * wstrzyknąć `KptBreakpointObserver` i rozstrzygnąć, który z dwóch modeli przełączyć.
+ *
+ * Atrybuty ARIA nakłada wyłącznie na natywny `<button>`/`<a>`. Na komponencie opakowującym
+ * (np. `kpt-icon-button`) trafiłyby na zewnętrzny element bez roli, co jest naruszeniem
+ * `aria-allowed-attr` — tam etykietę podaj samemu komponentowi.
+ *
+ * @example
+ * <button kptShellNavToggle type="button"><kpt-icon name="menu" /></button>
+ * <kpt-icon-button kptShellNavToggle ariaLabel="Menu"><kpt-icon name="menu" /></kpt-icon-button>
+ */
+class KptShellNavToggle {
+    constructor() {
+        /** Własna etykieta przycisku; puste = `appShell.toggleNavigation` ze słownika. */
+        this.label = input('', { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), alias: 'kptShellNavToggle' });
+        this.shell = inject(KptAppShell);
+        this.i18n = inject(KptI18n);
+        this.isNativeControl = /^(?:BUTTON|A)$/.test(inject(ElementRef).nativeElement.tagName);
+        this.ariaExpanded = computed(() => this.isNativeControl ? String(this.shell.isSidenavOpen()) : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
+        this.ariaControls = computed(() => (this.isNativeControl ? this.shell.sidenavId : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => this.isNativeControl ? this.label() || this.i18n.t('appShell.toggleNavigation') : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function KptShellNavToggle_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KptShellNavToggle)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: KptShellNavToggle, selectors: [["", "kptShellNavToggle", ""]], hostVars: 3, hostBindings: function KptShellNavToggle_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function KptShellNavToggle_click_HostBindingHandler() { return ctx.shell.toggleSidenav(); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("aria-expanded", ctx.ariaExpanded())("aria-controls", ctx.ariaControls())("aria-label", ctx.ariaLabel());
+        } }, inputs: { label: [1, "kptShellNavToggle", "label"] } }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptShellNavToggle, [{
+        type: Directive,
+        args: [{
+                selector: '[kptShellNavToggle]',
+                host: {
+                    '(click)': 'shell.toggleSidenav()',
+                    '[attr.aria-expanded]': 'ariaExpanded()',
+                    '[attr.aria-controls]': 'ariaControls()',
+                    '[attr.aria-label]': 'ariaLabel()',
+                },
+            }]
+    }], null, { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "kptShellNavToggle", required: false }] }] }); })();
 
 const _c0$n = [[["", "kptPanelActions", ""]], "*"];
 const _c1$7 = ["[kptPanelActions]", "*"];
@@ -10417,15 +10823,47 @@ class KptDialog {
         this.i18n = inject(KptI18n);
         this.dialogRef = viewChild('dlg', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogRef" }] : /* istanbul ignore next */ []));
+        this.overlayContainer = inject(OverlayContainer);
+        /** Miejsce, z którego zabraliśmy kontener overlayów — żeby go tam oddać. */
+        this.overlayHome = null;
         effect(() => {
             const el = this.dialogRef()?.nativeElement;
             if (!el)
                 return;
-            if (this.open() && !el.open)
+            if (this.open() && !el.open) {
                 el.showModal();
-            else if (!this.open() && el.open)
+                this.adoptOverlayContainer(el);
+            }
+            else if (!this.open() && el.open) {
                 el.close();
+                this.releaseOverlayContainer();
+            }
         });
+        // Zamknięcie przez `close`/`cancel` też przechodzi tędy, ale zniszczenie komponentu
+        // z otwartym oknem już nie — kontener musi wrócić na miejsce niezależnie od drogi.
+        inject(DestroyRef).onDestroy(() => this.releaseOverlayContainer());
+    }
+    /**
+     * Przenosi kontener CDK Overlay do wnętrza `<dialog>` na czas, gdy okno jest otwarte.
+     *
+     * `showModal()` wynosi okno do **warstwy szczytowej** przeglądarki, a ta jest ponad
+     * całym drzewem dokumentu — żaden `z-index` tego nie przebije. Kontener overlayów
+     * wisi na `<body>`, więc panele `kpt-select`, `kpt-datepicker`, `kpt-autocomplete`
+     * czy `kpt-menu` otwierałyby się NIEWIDOCZNE, schowane za tłem okna.
+     */
+    adoptOverlayContainer(dialog) {
+        const container = this.overlayContainer.getContainerElement();
+        if (container.parentElement === dialog)
+            return;
+        this.overlayHome = container.parentElement;
+        dialog.appendChild(container);
+    }
+    releaseOverlayContainer() {
+        if (!this.overlayHome)
+            return;
+        // `getContainerElement()` nie tworzy nowego kontenera — zwraca ten sam, który zabraliśmy.
+        this.overlayHome.appendChild(this.overlayContainer.getContainerElement());
+        this.overlayHome = null;
     }
     onCancel(event) {
         if (!this.dismissible()) {
@@ -10452,7 +10890,7 @@ class KptDialog {
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.header() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--%NS%kpt-color-overlay-scrim)}.kpt-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-5, 1.25rem) var(--%NS%kpt-space-6, 1.5rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-dialog__title{font-size:var(--%NS%kpt-font-size-lg, 1.125rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-dialog__body{padding:var(--%NS%kpt-space-6, 1.5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);overflow-y:auto}.kpt-dialog [kptDialogFooter]{display:flex;justify-content:flex-end;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-6, 1.5rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border);border-radius:var(--%NS%kpt-radius-lg, .75rem);background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--%NS%kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-5, 1.25rem) var(--%NS%kpt-space-6, 1.5rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-dialog__title{font-size:var(--%NS%kpt-font-size-lg, 1.125rem);font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--%NS%kpt-space-6, 1.5rem);font-size:var(--%NS%kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;justify-content:flex-end;gap:var(--%NS%kpt-space-3, .75rem);padding:var(--%NS%kpt-space-4, 1rem) var(--%NS%kpt-space-6, 1.5rem);border-top:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDialog, [{
         type: Component,
@@ -10469,9 +10907,9 @@ class KptDialog {
       <div class="kpt-dialog__body"><ng-content /></div>
       <ng-content select="[kptDialogFooter]" />
     </dialog>
-  `, host: { class: 'kpt-dialog-host' }, styles: ["@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--kpt-color-overlay-scrim)}.kpt-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-5, 1.25rem) var(--kpt-space-6, 1.5rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-dialog__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--kpt-color-on-surface)}.kpt-dialog__body{padding:var(--kpt-space-6, 1.5rem);font-size:var(--kpt-font-size-sm, .875rem);overflow-y:auto}.kpt-dialog [kptDialogFooter]{display:flex;justify-content:flex-end;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}}\n"] }]
+  `, host: { class: 'kpt-dialog-host' }, styles: ["@charset \"UTF-8\";@layer kpt.components{.kpt-dialog{margin:auto;width:min(32rem,100vw - 2rem);max-height:calc(100vh - 4rem);padding:0;border:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);border-radius:var(--kpt-radius-lg, .75rem);background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4)}.kpt-dialog::backdrop{background:var(--kpt-color-overlay-scrim)}.kpt-dialog[open]{display:flex;flex-direction:column}.kpt-dialog__header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-5, 1.25rem) var(--kpt-space-6, 1.5rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-dialog__title{font-size:var(--kpt-font-size-lg, 1.125rem);font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-dialog__close{background:none;border:0;cursor:pointer;color:var(--kpt-color-on-surface-muted);font-size:1.4rem;line-height:1;padding:0}.kpt-dialog__close:hover{color:var(--kpt-color-on-surface)}.kpt-dialog__body{min-height:0;padding:var(--kpt-space-6, 1.5rem);font-size:var(--kpt-font-size-sm, .875rem);overflow-y:auto;overscroll-behavior:contain}.kpt-dialog [kptDialogFooter]{flex:none;display:flex;justify-content:flex-end;gap:var(--kpt-space-3, .75rem);padding:var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);border-top:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}}\n"] }]
     }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialogRef: [{ type: i0.ViewChild, args: ['dlg', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDialog, { className: "KptDialog", filePath: "lib/dialog/dialog.component.ts", lineNumber: 51 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KptDialog, { className: "KptDialog", filePath: "lib/dialog/dialog.component.ts", lineNumber: 53 }); })();
 
 /**
  * Serwis powiadomień (toastów). Wstrzyknij i wywołuj `show`/`success`/`error`/...;
@@ -11034,7 +11472,7 @@ class KptDrawer {
             i0.ɵɵattribute("data-position", ctx.position());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.header() || ctx.dismissible() ? 2 : -1);
-        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1000) + 1);display:flex;flex-direction:column;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4);transition:transform .25s ease;outline:none}.kpt-drawer__panel[data-position=left]{inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--%NS%kpt-space-3, .75rem) var(--%NS%kpt-space-4, 1rem);border-bottom:var(--%NS%kpt-border-width-thin, 1px) solid var(--%NS%kpt-color-border)}.kpt-drawer__title{font-weight:var(--%NS%kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--%NS%kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--%NS%kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--%NS%kpt-space-4, 1rem)}}\n"], encapsulation: 2 }); }
+        } }, dependencies: [KptIcon], styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--%NS%kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--%NS%kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--%NS%kpt-color-surface-raised);color:var(--%NS%kpt-color-on-surface);box-shadow:var(--%NS%kpt-elevation-4);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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KptDrawer, [{
         type: Component,
@@ -11059,7 +11497,7 @@ class KptDrawer {
       }
       <div class="kpt-drawer__body"><ng-content /></div>
     </aside>
-  `, host: { class: 'kpt-drawer-host' }, styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1000);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1000) + 1);display:flex;flex-direction:column;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4);transition:transform .25s ease;outline:none}.kpt-drawer__panel[data-position=left]{inset:0 auto 0 0;width:min(20rem,90vw);transform:translate(-100%)}.kpt-drawer__panel[data-position=right]{inset:0 0 0 auto;width:min(20rem,90vw);transform:translate(100%)}.kpt-drawer__panel[data-position=top]{inset:0 0 auto;height:min(16rem,80vh);transform:translateY(-100%)}.kpt-drawer__panel[data-position=bottom]{inset:auto 0 0;height:min(16rem,80vh);transform:translateY(100%)}.kpt-drawer__panel.is-open{transform:none}.kpt-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--kpt-space-3, .75rem) var(--kpt-space-4, 1rem);border-bottom:var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border)}.kpt-drawer__title{font-weight:var(--kpt-font-weight-semibold, 600)}.kpt-drawer__close{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:var(--kpt-color-on-surface-muted)}.kpt-drawer__close:hover{color:var(--kpt-color-on-surface)}.kpt-drawer__body{flex:1;overflow:auto;padding:var(--kpt-space-4, 1rem)}}\n"] }]
+  `, host: { class: 'kpt-drawer-host' }, styles: ["@layer kpt.components{.kpt-drawer-host{display:contents}.kpt-drawer__backdrop{position:fixed;inset:0;z-index:var(--kpt-z-overlay, 1100);background:color-mix(in oklch,black 45%,transparent);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.kpt-drawer__backdrop.is-open{opacity:1;visibility:visible}.kpt-drawer__panel{position:fixed;z-index:calc(var(--kpt-z-overlay, 1100) + 1);display:flex;flex-direction:column;background:var(--kpt-color-surface-raised);color:var(--kpt-color-on-surface);box-shadow:var(--kpt-elevation-4);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"] }]
     }], 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 }); })();
 
@@ -11865,5 +12303,5 @@ class KptSpeedDial {
  * Generated bundle index. Do not edit.
  */
 
-export { KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n };
+export { KPT_BREAKPOINTS, KPT_FORM_FIELD_CONTROL, KPT_I18N_CONFIG, KPT_MESSAGES_EN, KPT_MESSAGES_PL, KptAccordion, KptAccordionPanel, KptAlert, KptAppShell, KptAutocomplete, KptAvatar, KptAvatarGroup, KptBadge, KptBottomSheet, KptBreadcrumb, KptBreakpointObserver, KptButton, KptButtonGroup, KptCard, KptCarousel, KptCellDef, KptCheckbox, KptChip, KptChipsInput, KptClock, KptColorPicker, KptConfirmContainer, KptConfirmService, KptContextMenu, KptDataTable, KptDataView, KptDateRange, KptDatepicker, KptDialog, KptDivider, KptDrawer, KptEmpty, KptFab, KptFieldset, KptFileUpload, KptFormField, KptGalleria, KptI18n, KptIcon, KptIconButton, KptIconRegistry, KptImage, KptInput, KptInputMask, KptInputNumber, KptInputOtp, KptKnob, KptListbox, KptMegamenu, KptMenu, KptMenubar, KptMeterGroup, KptOrderList, KptPaginator, KptPanel, KptPassword, KptPickList, KptPopover, KptProgress, KptRadioGroup, KptRating, KptRichText, KptRowDetailDef, KptScrollTop, KptSelect, KptShellNavToggle, KptSidenav, KptSkeleton, KptSlider, KptSpeedDial, KptSpinner, KptSplitButton, KptSplitter, KptStep, KptStepper, KptSwitch, KptSwitchGroup, KptTab, KptTabs, KptTextarea, KptTimeline, KptToastContainer, KptToastService, KptToolbar, KptTooltip, KptTree, provideKptI18n, renderKptIconSvg };
 //# sourceMappingURL=konce-pt-angular.mjs.map