@openkit-labs/ngx-kit-ui 0.0.40 → 0.0.41

package/fesm2022/openkit-labs-ngx-kit-ui.mjs

@@ -1989,6 +1989,394 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 }]
         }] });
 
+class KitTextHeadingComponent {
+    color = '';
+    align;
+    weight;
+    decoration;
+    margin;
+    wrap = true;
+    ellipses = false;
+    lines = 0;
+    italic = false;
+    get colorClass() {
+        return this.color ? `kit-text-${this.color}` : '';
+    }
+    get textStyles() {
+        const baseStyles = {
+            'margin': this.margin,
+            'text-align': this.align,
+            'font-weight': this.weight,
+            'text-decoration': this.decoration,
+            'font-style': this.italic ? 'italic' : 'normal'
+        };
+        if (this.ellipses) {
+            if (this.wrap && this.lines > 0) {
+                // Multi-line ellipsis
+                baseStyles['display'] = '-webkit-box';
+                baseStyles['-webkit-line-clamp'] = this.lines;
+                baseStyles['-webkit-box-orient'] = 'vertical';
+                baseStyles['overflow'] = 'hidden';
+            }
+            else {
+                // Single-line ellipsis
+                baseStyles['white-space'] = 'nowrap';
+                baseStyles['overflow'] = 'hidden';
+                baseStyles['text-overflow'] = 'ellipsis';
+            }
+        }
+        else {
+            // Wrapping control
+            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        }
+        return baseStyles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextHeadingComponent, isStandalone: true, selector: "kit-text-heading", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<h1 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h1>", styles: ["h1{font-size:var(--kit-font-size-heading, 2rem);font-weight:var(--kit-font-weight-heading, 700);line-height:var(--kit-line-height-heading, 1.2);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-text-heading', standalone: true, imports: [NgClass, NgStyle], template: "<h1 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h1>", styles: ["h1{font-size:var(--kit-font-size-heading, 2rem);font-weight:var(--kit-font-weight-heading, 700);line-height:var(--kit-line-height-heading, 1.2);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], decoration: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], ellipses: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }] } });
+
+class KitTextSubheadingComponent {
+    color = '';
+    align;
+    weight;
+    decoration;
+    margin;
+    wrap = true;
+    ellipses = false;
+    lines = 0;
+    italic = false;
+    get colorClass() {
+        return this.color ? `kit-text-${this.color}` : '';
+    }
+    get textStyles() {
+        const baseStyles = {
+            'margin': this.margin,
+            'text-align': this.align,
+            'font-weight': this.weight,
+            'text-decoration': this.decoration,
+            'font-style': this.italic ? 'italic' : 'normal'
+        };
+        if (this.ellipses) {
+            if (this.wrap && this.lines > 0) {
+                // Multi-line ellipsis
+                baseStyles['display'] = '-webkit-box';
+                baseStyles['-webkit-line-clamp'] = this.lines;
+                baseStyles['-webkit-box-orient'] = 'vertical';
+                baseStyles['overflow'] = 'hidden';
+            }
+            else {
+                // Single-line ellipsis
+                baseStyles['white-space'] = 'nowrap';
+                baseStyles['overflow'] = 'hidden';
+                baseStyles['text-overflow'] = 'ellipsis';
+            }
+        }
+        else {
+            // Wrapping control
+            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        }
+        return baseStyles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextSubheadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextSubheadingComponent, isStandalone: true, selector: "kit-text-subheading", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<h2 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h2>", styles: ["h2{font-size:var(--kit-font-size-subheading, 1.5rem);font-weight:var(--kit-font-weight-subheading, 500);line-height:var(--kit-line-height-subheading, 1.2);margin-bottom:.75rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextSubheadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-text-subheading', standalone: true, imports: [NgClass, NgStyle], template: "<h2 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h2>", styles: ["h2{font-size:var(--kit-font-size-subheading, 1.5rem);font-weight:var(--kit-font-weight-subheading, 500);line-height:var(--kit-line-height-subheading, 1.2);margin-bottom:.75rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], decoration: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], ellipses: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }] } });
+
+class KitTextDisplayComponent {
+    color = '';
+    align;
+    weight;
+    decoration;
+    margin;
+    wrap = true;
+    ellipses = false;
+    lines = 0;
+    italic = false;
+    get colorClass() {
+        return this.color ? `kit-text-${this.color}` : '';
+    }
+    get textStyles() {
+        const baseStyles = {
+            'margin': this.margin,
+            'text-align': this.align,
+            'font-weight': this.weight,
+            'text-decoration': this.decoration,
+            'font-style': this.italic ? 'italic' : 'normal'
+        };
+        if (this.ellipses) {
+            if (this.wrap && this.lines > 0) {
+                // Multi-line ellipsis
+                baseStyles['display'] = '-webkit-box';
+                baseStyles['-webkit-line-clamp'] = this.lines;
+                baseStyles['-webkit-box-orient'] = 'vertical';
+                baseStyles['overflow'] = 'hidden';
+            }
+            else {
+                // Single-line ellipsis
+                baseStyles['white-space'] = 'nowrap';
+                baseStyles['overflow'] = 'hidden';
+                baseStyles['text-overflow'] = 'ellipsis';
+            }
+        }
+        else {
+            // Wrapping control
+            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        }
+        return baseStyles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextDisplayComponent, isStandalone: true, selector: "kit-text-display", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<h3 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h3>", styles: ["h3{font-size:var(--kit-font-size-display, 3rem);font-weight:var(--kit-font-weight-display, bold);line-height:var(--kit-line-height-display, 1.3);margin-bottom:.5rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-text-display', standalone: true, imports: [NgClass, NgStyle], template: "<h3 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h3>", styles: ["h3{font-size:var(--kit-font-size-display, 3rem);font-weight:var(--kit-font-weight-display, bold);line-height:var(--kit-line-height-display, 1.3);margin-bottom:.5rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], decoration: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], ellipses: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }] } });
+
+class KitTextBodyComponent {
+    color = '';
+    align;
+    weight;
+    decoration;
+    margin;
+    wrap = true;
+    ellipses = false;
+    lines = 0;
+    italic = false;
+    get colorClass() {
+        return this.color ? `kit-text-${this.color}` : '';
+    }
+    get textStyles() {
+        const baseStyles = {
+            'margin': this.margin,
+            'text-align': this.align,
+            'font-weight': this.weight,
+            'text-decoration': this.decoration,
+            'font-style': this.italic ? 'italic' : 'normal'
+        };
+        if (this.ellipses) {
+            if (this.wrap && this.lines > 0) {
+                // Multi-line ellipsis
+                baseStyles['display'] = '-webkit-box';
+                baseStyles['-webkit-line-clamp'] = this.lines;
+                baseStyles['-webkit-box-orient'] = 'vertical';
+                baseStyles['overflow'] = 'hidden';
+            }
+            else {
+                // Single-line ellipsis
+                baseStyles['white-space'] = 'nowrap';
+                baseStyles['overflow'] = 'hidden';
+                baseStyles['text-overflow'] = 'ellipsis';
+            }
+        }
+        else {
+            // Wrapping control
+            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        }
+        return baseStyles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextBodyComponent, isStandalone: true, selector: "kit-text-body", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<p [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</p>", styles: ["p{font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-info{color:var(--kit-color-info, #17a2b8)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-text-body', standalone: true, imports: [NgClass, NgStyle], template: "<p [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</p>", styles: ["p{font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-info{color:var(--kit-color-info, #17a2b8)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], decoration: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], ellipses: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }] } });
+
+class KitTextLinkComponent {
+    color = '';
+    href = '#';
+    target = '_self';
+    align;
+    weight;
+    decoration;
+    margin;
+    wrap = true;
+    ellipses = false;
+    lines = 0;
+    italic = false;
+    get colorClass() {
+        return this.color ? `kit-text-${this.color}` : '';
+    }
+    get textStyles() {
+        const baseStyles = {
+            'margin': this.margin,
+            'text-align': this.align,
+            'font-weight': this.weight,
+            'text-decoration': this.decoration,
+            'font-style': this.italic ? 'italic' : 'normal'
+        };
+        if (this.ellipses) {
+            if (this.wrap && this.lines > 0) {
+                // Multi-line ellipsis
+                baseStyles['display'] = '-webkit-box';
+                baseStyles['-webkit-line-clamp'] = this.lines;
+                baseStyles['-webkit-box-orient'] = 'vertical';
+                baseStyles['overflow'] = 'hidden';
+            }
+            else {
+                // Single-line ellipsis
+                baseStyles['white-space'] = 'nowrap';
+                baseStyles['overflow'] = 'hidden';
+                baseStyles['text-overflow'] = 'ellipsis';
+            }
+        }
+        else {
+            // Wrapping control
+            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        }
+        return baseStyles;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextLinkComponent, isStandalone: true, selector: "kit-text-link", inputs: { color: "color", href: "href", target: "target", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<a [ngClass]=\"colorClass\" [href]=\"href\" [target]=\"target\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</a>", styles: ["a{font-size:var(--kit-font-size-link, 1rem);font-weight:var(--kit-font-weight-link, 400);line-height:var(--kit-line-height-link, 1.5);text-decoration:underline;cursor:pointer;color:var(--kit-color-primary, #0066cc)}a:hover{opacity:.85}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-text-link', standalone: true, imports: [NgClass, NgStyle], template: "<a [ngClass]=\"colorClass\" [href]=\"href\" [target]=\"target\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</a>", styles: ["a{font-size:var(--kit-font-size-link, 1rem);font-weight:var(--kit-font-weight-link, 400);line-height:var(--kit-line-height-link, 1.5);text-decoration:underline;cursor:pointer;color:var(--kit-color-primary, #0066cc)}a:hover{opacity:.85}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], decoration: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], ellipses: [{
+                type: Input
+            }], lines: [{
+                type: Input
+            }], italic: [{
+                type: Input
+            }] } });
+
+class KitTextModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule, imports: [KitTextHeadingComponent,
+            KitTextSubheadingComponent,
+            KitTextDisplayComponent,
+            KitTextLabelComponent,
+            KitTextBodyComponent,
+            KitTextCaptionComponent,
+            KitTextLinkComponent], exports: [KitTextHeadingComponent,
+            KitTextSubheadingComponent,
+            KitTextDisplayComponent,
+            KitTextLabelComponent,
+            KitTextBodyComponent,
+            KitTextCaptionComponent,
+            KitTextLinkComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        KitTextHeadingComponent,
+                        KitTextSubheadingComponent,
+                        KitTextDisplayComponent,
+                        KitTextLabelComponent,
+                        KitTextBodyComponent,
+                        KitTextCaptionComponent,
+                        KitTextLinkComponent,
+                    ],
+                    exports: [
+                        KitTextHeadingComponent,
+                        KitTextSubheadingComponent,
+                        KitTextDisplayComponent,
+                        KitTextLabelComponent,
+                        KitTextBodyComponent,
+                        KitTextCaptionComponent,
+                        KitTextLinkComponent,
+                    ]
+                }]
+        }] });
+
 class KitInputSelectComponent extends KitBaseInputComponent {
     screenService;
     /**
@@ -2228,11 +2616,11 @@ class KitInputSelectComponent extends KitBaseInputComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitInputSelectComponent, deps: [{ token: KitScreenService }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitInputSelectComponent, isStandalone: true, selector: "kit-input-select", inputs: { required: "required", options: "options", matchField: "matchField", displayField: "displayField", dialogTitle: "dialogTitle", showSearchBox: "showSearchBox", searchField: "searchField", searchBoxPlaceholder: "searchBoxPlaceholder" }, queries: [{ propertyName: "activeTemplate", first: true, predicate: KitSelectItemActiveDirective, descendants: true, read: TemplateRef }, { propertyName: "inactiveTemplate", first: true, predicate: KitSelectItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: KitSelectEmptyDirective, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ value ? getDisplayValue(value) : (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div>\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyDialog>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n      }\n\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div>\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyBottomSheet>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n\n      }\n\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-select-item.selected{background-color:var(--kit-select-item-selected-background-color, var(--kit-color-primary, #0066cc));color:var(--kit-select-item-selected-text-color, #ffffff);border-radius:var(--kit-select-item-selected-border-radius, 14px)}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-item-check{color:var(--kit-select-item-check-color, #ffffff);font-weight:700;margin-left:8px;flex-shrink:0}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputFieldTitleComponent, selector: "kit-input-field-title", inputs: ["for", "required", "disabled"] }, { kind: "component", type: KitTextCaptionComponent, selector: "kit-text-caption", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "ngmodule", type: KitOverlaysModule }, { kind: "component", type: KitBottomSheetComponent, selector: "kit-bottom-sheet", inputs: ["isOpen", "closeOnBackdropClick", "padding", "maxHeight"], outputs: ["isOpenChange"] }, { kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["isOpen", "fullscreen", "closeOnBackdropClick", "padding"], outputs: ["isOpenChange"] }, { kind: "component", type: KitTextLabelComponent, selector: "kit-text-label", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "component", type: KitInputTextComponent, selector: "kit-input-text", inputs: ["required"], outputs: ["paste"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitInputSelectComponent, isStandalone: true, selector: "kit-input-select", inputs: { required: "required", options: "options", matchField: "matchField", displayField: "displayField", dialogTitle: "dialogTitle", showSearchBox: "showSearchBox", searchField: "searchField", searchBoxPlaceholder: "searchBoxPlaceholder" }, queries: [{ propertyName: "activeTemplate", first: true, predicate: KitSelectItemActiveDirective, descendants: true, read: TemplateRef }, { propertyName: "inactiveTemplate", first: true, predicate: KitSelectItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: KitSelectEmptyDirective, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ value ? getDisplayValue(value) : (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div>\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyDialog>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n      }\n\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div>\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyBottomSheet>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n\n      }\n\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-select-item.selected{background-color:var(--kit-select-item-selected-background-color, var(--kit-color-primary, #0066cc));color:var(--kit-select-item-selected-text-color, #ffffff);border-radius:var(--kit-select-item-selected-border-radius, 14px)}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-item-check{color:var(--kit-select-item-check-color, #ffffff);font-weight:700;margin-left:8px;flex-shrink:0}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputFieldTitleComponent, selector: "kit-input-field-title", inputs: ["for", "required", "disabled"] }, { kind: "component", type: KitTextCaptionComponent, selector: "kit-text-caption", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "ngmodule", type: KitOverlaysModule }, { kind: "component", type: KitBottomSheetComponent, selector: "kit-bottom-sheet", inputs: ["isOpen", "closeOnBackdropClick", "padding", "maxHeight"], outputs: ["isOpenChange"] }, { kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["isOpen", "fullscreen", "closeOnBackdropClick", "padding"], outputs: ["isOpenChange"] }, { kind: "component", type: KitInputTextComponent, selector: "kit-input-text", inputs: ["required"], outputs: ["paste"] }, { kind: "ngmodule", type: KitTextModule }, { kind: "component", type: KitTextSubheadingComponent, selector: "kit-text-subheading", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitInputSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-input-select', standalone: true, imports: [NgTemplateOutlet, KitInputFieldTitleComponent, KitTextCaptionComponent, KitOverlaysModule, KitTextLabelComponent, KitInputTextComponent], template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ value ? getDisplayValue(value) : (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div>\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyDialog>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n      }\n\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div>\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyBottomSheet>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n\n      }\n\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-select-item.selected{background-color:var(--kit-select-item-selected-background-color, var(--kit-color-primary, #0066cc));color:var(--kit-select-item-selected-text-color, #ffffff);border-radius:var(--kit-select-item-selected-border-radius, 14px)}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-item-check{color:var(--kit-select-item-check-color, #ffffff);font-weight:700;margin-left:8px;flex-shrink:0}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"] }]
+            args: [{ selector: 'kit-input-select', standalone: true, imports: [NgTemplateOutlet, KitInputFieldTitleComponent, KitTextCaptionComponent, KitOverlaysModule, KitTextLabelComponent, KitInputTextComponent, KitTextModule], template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ value ? getDisplayValue(value) : (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div>\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyDialog>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n      }\n\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div>\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) &&\n      !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <span class=\"kit-select-item-text\">{{ getDisplayValue(option) }}</span>\n        @if(isSelected(option)){\n        <svg class=\"kit-select-item-check\"\n             width=\"16\"\n             height=\"16\"\n             viewBox=\"0 0 24 24\"\n             fill=\"none\">\n          <path d=\"M20 6L9 17L4 12\"\n                stroke=\"currentColor\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n        </svg>\n        }\n\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <ng-template #defaultEmptyBottomSheet>\n          <kit-text-caption>No options found</kit-text-caption>\n        </ng-template>\n        }\n      </div>\n\n      }\n\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-select-item.selected{background-color:var(--kit-select-item-selected-background-color, var(--kit-color-primary, #0066cc));color:var(--kit-select-item-selected-text-color, #ffffff);border-radius:var(--kit-select-item-selected-border-radius, 14px)}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-item-check{color:var(--kit-select-item-check-color, #ffffff);font-weight:700;margin-left:8px;flex-shrink:0}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"] }]
         }], ctorParameters: () => [{ type: KitScreenService }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2431,7 +2819,7 @@ class KitInputMultiSelectComponent extends KitBaseInputComponent {
     /**
      * Custom title text for the dialog/bottom sheet (default: 'Select an option')
      */
-    dialogTitle = 'Select an option';
+    dialogTitle = 'Options';
     /**
      * Whether to show a search box at the top of the options list
      */
@@ -2663,11 +3051,11 @@ class KitInputMultiSelectComponent extends KitBaseInputComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitInputMultiSelectComponent, deps: [{ token: KitScreenService }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitInputMultiSelectComponent, isStandalone: true, selector: "kit-input-multi-select", inputs: { required: "required", options: "options", matchField: "matchField", displayField: "displayField", dialogTitle: "dialogTitle", showSearchBox: "showSearchBox", searchField: "searchField", searchBoxPlaceholder: "searchBoxPlaceholder" }, queries: [{ propertyName: "activeTemplate", first: true, predicate: KitSelectItemActiveDirective, descendants: true, read: TemplateRef }, { propertyName: "inactiveTemplate", first: true, predicate: KitSelectItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: KitSelectEmptyDirective, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ getDisplayValue() || (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div class=\"kit-dialog-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div class=\"kit-bottom-sheet-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-dialog-header,.kit-bottom-sheet-header{display:flex;justify-content:space-between;align-items:center}.kit-dialog-close,.kit-bottom-sheet-close{background:none;border:none;cursor:pointer;padding:8px}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-checkbox{width:20px;height:20px;border:2px solid var(--kit-input-border-color, #adb5bd);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background-color .2s,border-color .2s}.kit-checkbox-check{display:none;color:#fff}.kit-select-item.selected .kit-checkbox{background-color:var(--kit-color-primary, #0066cc);border-color:var(--kit-color-primary, #0066cc)}.kit-select-item.selected .kit-checkbox-check{display:block}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "component", type: KitInputFieldTitleComponent, selector: "kit-input-field-title", inputs: ["for", "required", "disabled"] }, { kind: "component", type: KitTextCaptionComponent, selector: "kit-text-caption", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "ngmodule", type: KitOverlaysModule }, { kind: "component", type: KitBottomSheetComponent, selector: "kit-bottom-sheet", inputs: ["isOpen", "closeOnBackdropClick", "padding", "maxHeight"], outputs: ["isOpenChange"] }, { kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["isOpen", "fullscreen", "closeOnBackdropClick", "padding"], outputs: ["isOpenChange"] }, { kind: "component", type: KitTextLabelComponent, selector: "kit-text-label", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "component", type: KitInputTextComponent, selector: "kit-input-text", inputs: ["required"], outputs: ["paste"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitInputMultiSelectComponent, isStandalone: true, selector: "kit-input-multi-select", inputs: { required: "required", options: "options", matchField: "matchField", displayField: "displayField", dialogTitle: "dialogTitle", showSearchBox: "showSearchBox", searchField: "searchField", searchBoxPlaceholder: "searchBoxPlaceholder" }, queries: [{ propertyName: "activeTemplate", first: true, predicate: KitSelectItemActiveDirective, descendants: true, read: TemplateRef }, { propertyName: "inactiveTemplate", first: true, predicate: KitSelectItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: KitSelectEmptyDirective, descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ getDisplayValue() || (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div class=\"kit-dialog-header\">\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) && !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <kit-text-caption>No options found</kit-text-caption>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div class=\"kit-bottom-sheet-header\">\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) && !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <kit-text-caption>No options found</kit-text-caption>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-dialog-header,.kit-bottom-sheet-header{display:flex;justify-content:space-between;align-items:center}.kit-dialog-close,.kit-bottom-sheet-close{background:none;border:none;cursor:pointer;padding:8px}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-checkbox{width:20px;height:20px;border:2px solid var(--kit-input-border-color, #adb5bd);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background-color .2s,border-color .2s}.kit-checkbox-check{display:none;color:#fff}.kit-select-item.selected .kit-checkbox{background-color:var(--kit-color-primary, #0066cc);border-color:var(--kit-color-primary, #0066cc)}.kit-select-item.selected .kit-checkbox-check{display:block}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputFieldTitleComponent, selector: "kit-input-field-title", inputs: ["for", "required", "disabled"] }, { kind: "component", type: KitTextCaptionComponent, selector: "kit-text-caption", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }, { kind: "ngmodule", type: KitOverlaysModule }, { kind: "component", type: KitBottomSheetComponent, selector: "kit-bottom-sheet", inputs: ["isOpen", "closeOnBackdropClick", "padding", "maxHeight"], outputs: ["isOpenChange"] }, { kind: "component", type: KitDialogComponent, selector: "kit-dialog", inputs: ["isOpen", "fullscreen", "closeOnBackdropClick", "padding"], outputs: ["isOpenChange"] }, { kind: "component", type: KitInputTextComponent, selector: "kit-input-text", inputs: ["required"], outputs: ["paste"] }, { kind: "ngmodule", type: KitTextModule }, { kind: "component", type: KitTextSubheadingComponent, selector: "kit-text-subheading", inputs: ["color", "align", "weight", "decoration", "margin", "wrap", "ellipses", "lines", "italic"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitInputMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-input-multi-select', standalone: true, imports: [KitInputFieldTitleComponent, KitTextCaptionComponent, KitOverlaysModule, KitTextLabelComponent, KitInputTextComponent], template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ getDisplayValue() || (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div class=\"kit-dialog-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div class=\"kit-bottom-sheet-header\">\n      <kit-text-label margin=\"5px\">{{ dialogTitle || title }}</kit-text-label>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        <kit-text-caption>No options found</kit-text-caption>\n      </div>\n      }\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-dialog-header,.kit-bottom-sheet-header{display:flex;justify-content:space-between;align-items:center}.kit-dialog-close,.kit-bottom-sheet-close{background:none;border:none;cursor:pointer;padding:8px}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-checkbox{width:20px;height:20px;border:2px solid var(--kit-input-border-color, #adb5bd);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background-color .2s,border-color .2s}.kit-checkbox-check{display:none;color:#fff}.kit-select-item.selected .kit-checkbox{background-color:var(--kit-color-primary, #0066cc);border-color:var(--kit-color-primary, #0066cc)}.kit-select-item.selected .kit-checkbox-check{display:block}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"] }]
+            args: [{ selector: 'kit-input-multi-select', standalone: true, imports: [NgTemplateOutlet, KitInputFieldTitleComponent, KitTextCaptionComponent, KitOverlaysModule, KitTextLabelComponent, KitInputTextComponent, KitTextModule], template: "@if(title){\n<kit-input-field-title [for]=\"id\"\n                       [required]=\"required\"\n                       [disabled]=\"disabled\">\n  {{ title }}\n</kit-input-field-title>\n}\n\n<!-- Custom select that opens the appropriate UI based on screen size -->\n<div class=\"kit-input-select-container\"\n     [id]=\"id\"\n     [attr.aria-label]=\"title\"\n     [attr.aria-required]=\"required\"\n     [attr.aria-invalid]=\"hasError || null\"\n     [class.disabled]=\"disabled\"\n     [class.error]=\"hasError\"\n     tabindex=\"0\"\n     (click)=\"!disabled && openSelect()\"\n     (keydown)=\"!disabled && onKeyDown($event)\"\n     (focus)=\"onFocus($event)\"\n     (blur)=\"onBlur($event)\">\n\n  <div class=\"kit-input-select\"\n       [class.has-error]=\"hasError\"\n       [class.disabled]=\"disabled\">\n    {{ getDisplayValue() || (placeholder || 'Select...') }}\n  </div>\n\n</div>\n\n@if(helperText && !hasError){\n<kit-text-caption class=\"helper-text\">\n  {{ helperText }}\n</kit-text-caption>\n}\n\n@if(hasError && effectiveErrorMessage){\n<kit-text-caption class=\"error-message\">\n  {{ effectiveErrorMessage }}\n</kit-text-caption>\n}\n\n<!-- Dialog for larger screens -->\n<kit-dialog [(isOpen)]=\"isDialogOpen\">\n  <div>\n    <div class=\"kit-dialog-header\">\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) && !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <kit-text-caption>No options found</kit-text-caption>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</kit-dialog>\n\n<!-- Bottom sheet for small screens -->\n<kit-bottom-sheet [(isOpen)]=\"isBottomSheetOpen\">\n  <div>\n    <div class=\"kit-bottom-sheet-header\">\n      <kit-text-subheading margin=\"5px\"\n                           weight=\"bold\">{{ dialogTitle || title }}</kit-text-subheading>\n    </div>\n\n    <!-- Search input -->\n    @if(showSearchBox){\n    <div class=\"kit-select-search-container\">\n      <kit-input-text [(value)]=\"searchTerm\"\n                      (valueChange)=\"onSearchChange($event)\"\n                      [placeholder]=\"searchBoxPlaceholder\"></kit-input-text>\n    </div>\n    }\n\n    <div class=\"kit-select-options\">\n      @for(option of filteredOptions; track option){\n      <!-- Custom template for selected option -->\n      @if(isSelected(option) && hasCustomActiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"activeTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Custom template for unselected option -->\n      @if(!isSelected(option) && hasCustomInactiveTemplate()){\n      <div class=\"kit-select-item-custom\"\n           (click)=\"onOptionSelect(option)\">\n        <ng-container *ngTemplateOutlet=\"inactiveTemplate; context: getOptionContext(option)\"></ng-container>\n      </div>\n      }\n\n      <!-- Default template if no custom template for this state -->\n      @if((!isSelected(option) && !hasCustomInactiveTemplate()) || (isSelected(option) && !hasCustomActiveTemplate())){\n      <div class=\"kit-select-item\"\n           [class.selected]=\"isSelected(option)\"\n           (click)=\"onOptionSelect(option)\">\n        <div class=\"kit-checkbox\">\n          <svg class=\"kit-checkbox-check\"\n               width=\"16\"\n               height=\"16\"\n               viewBox=\"0 0 24 24\"\n               fill=\"none\">\n            <path d=\"M20 6L9 17L4 12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n        <span class=\"kit-select-item-text\">{{ getOptionDisplay(option) }}</span>\n      </div>\n      }\n      }\n\n      @if(filteredOptions.length === 0){\n      <div class=\"kit-select-options\">\n        @if(hasCustomEmptyTemplate()){\n        <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        }\n        @else{\n        <kit-text-caption>No options found</kit-text-caption>\n        }\n      </div>\n      }\n    </div>\n  </div>\n</kit-bottom-sheet>", styles: [":host{display:block;width:100%}.kit-input-select-container{position:relative;width:100%;display:flex;align-items:center}.kit-input-select{width:100%;box-sizing:border-box;padding:var(--kit-input-padding, 12px 16px);font-size:var(--kit-input-font-size, 1rem);line-height:var(--kit-input-line-height, 1.5);color:var(--kit-input-text-color, #212529);background-color:var(--kit-input-background-color, #e8e8e8);border:var(--kit-input-border-width, 2px) solid var(--kit-input-border-color, transparent);border-radius:var(--kit-input-border-radius, 16px);transition:border-color .2s ease-in-out;padding-right:40px}.kit-input-select::placeholder{color:var(--kit-input-placeholder-color, var(--kit-text-color-secondary, #6c757d));opacity:1}.kit-input-select:focus{outline:none;border-color:var(--kit-input-focus-border-color, var(--kit-color-primary, #0066cc))}.kit-input-select.has-error{border-color:var(--kit-input-error-border-color, var(--kit-color-danger, #dc3545));background-color:var(--kit-input-error-background-color, #fce8ea)}.kit-input-select:disabled,.kit-input-select.disabled{background-color:var(--kit-input-disabled-background-color, #f5f5f5);color:var(--kit-input-disabled-text-color, var(--kit-text-color-muted, #adb5bd));cursor:not-allowed}.kit-input-select:disabled::placeholder,.kit-input-select.disabled::placeholder{color:var(--kit-input-disabled-placeholder-color, var(--kit-text-color-muted, #adb5bd))}.kit-dialog-header,.kit-bottom-sheet-header{display:flex;justify-content:space-between;align-items:center}.kit-dialog-close,.kit-bottom-sheet-close{background:none;border:none;cursor:pointer;padding:8px}.kit-select-options{display:flex;flex-direction:column;gap:4px;padding:8px 0;overflow-y:auto;box-sizing:border-box}.kit-select-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:var(--kit-select-item-padding, 12px 16px);font-size:var(--kit-select-item-font-size, var(--kit-font-size-body, 1rem));color:var(--kit-select-item-text-color, var(--kit-text-color-primary, #212529));background-color:var(--kit-select-item-background-color, transparent);border-radius:var(--kit-select-item-border-radius, 14px);border:none;outline:none;flex-shrink:0}.kit-select-item:hover{background-color:var(--kit-select-item-hover-background-color, rgba(0, 102, 204, .1))}.kit-checkbox{width:20px;height:20px;border:2px solid var(--kit-input-border-color, #adb5bd);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:background-color .2s,border-color .2s}.kit-checkbox-check{display:none;color:#fff}.kit-select-item.selected .kit-checkbox{background-color:var(--kit-color-primary, #0066cc);border-color:var(--kit-color-primary, #0066cc)}.kit-select-item.selected .kit-checkbox-check{display:block}.kit-select-item-custom{display:block;width:100%;border:none;outline:none;box-sizing:border-box}.kit-select-item-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-select-search-container{padding-top:5px;padding-bottom:5px}\n"] }]
         }], ctorParameters: () => [{ type: KitScreenService }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -5018,592 +5406,204 @@ class KitTabViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTabViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitTabViewComponent, isStandalone: true, selector: "kit-tab-view", inputs: { tabs: "tabs" }, queries: [{ propertyName: "tabContents", predicate: KitTabContentComponent }], viewQueries: [{ propertyName: "tabHeaderElement", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<div class=\"kit-tab-view-container\">\n\n  <div class=\"kit-tab-header\"\n    #tabHeader>\n\n    @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n      <div\n        class=\"kit-tab-item\"\n        [class.kit-tab-item--active]=\"tab.active\"\n        (click)=\"selectTab(tab.index)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab.active\">\n        {{ tab.title }}\n      </div>\n    }\n\n  </div>\n\n  <div class=\"kit-tab-content\"\n    role=\"tabpanel\">\n    <ng-content></ng-content>\n  </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;margin-bottom:var(--kit-input-padding, 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box;position:relative;scroll-behavior:smooth}.kit-tab-header::-webkit-scrollbar{display:none}.kit-tab-item{padding:12px 16px;cursor:pointer;font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);color:var(--kit-text-color-secondary, #6c757d);background-color:transparent;border:none;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.kit-tab-item:hover{color:var(--kit-color-primary, #0066cc);background-color:#0066cc0d}.kit-tab-item:focus{outline:2px solid var(--kit-color-primary, #0066cc);outline-offset:-2px}.kit-tab-item:after{content:\"\";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--kit-color-primary, #0066cc);transition:width .3s ease,left .3s ease;transform:translate(-50%)}.kit-tab-item--active{color:var(--kit-color-primary, #0066cc);font-weight:var(--kit-font-weight-label, 500);border-bottom-color:transparent}.kit-tab-item--active:after{width:100%}.kit-tab-item--active:hover{background-color:#0066cc1a}.kit-tab-content{flex:1;min-height:0;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTabViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-tab-view', standalone: true, imports: [], template: "<div class=\"kit-tab-view-container\">\n\n  <div class=\"kit-tab-header\"\n    #tabHeader>\n\n    @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n      <div\n        class=\"kit-tab-item\"\n        [class.kit-tab-item--active]=\"tab.active\"\n        (click)=\"selectTab(tab.index)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab.active\">\n        {{ tab.title }}\n      </div>\n    }\n\n  </div>\n\n  <div class=\"kit-tab-content\"\n    role=\"tabpanel\">\n    <ng-content></ng-content>\n  </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;margin-bottom:var(--kit-input-padding, 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box;position:relative;scroll-behavior:smooth}.kit-tab-header::-webkit-scrollbar{display:none}.kit-tab-item{padding:12px 16px;cursor:pointer;font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);color:var(--kit-text-color-secondary, #6c757d);background-color:transparent;border:none;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.kit-tab-item:hover{color:var(--kit-color-primary, #0066cc);background-color:#0066cc0d}.kit-tab-item:focus{outline:2px solid var(--kit-color-primary, #0066cc);outline-offset:-2px}.kit-tab-item:after{content:\"\";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--kit-color-primary, #0066cc);transition:width .3s ease,left .3s ease;transform:translate(-50%)}.kit-tab-item--active{color:var(--kit-color-primary, #0066cc);font-weight:var(--kit-font-weight-label, 500);border-bottom-color:transparent}.kit-tab-item--active:after{width:100%}.kit-tab-item--active:hover{background-color:#0066cc1a}.kit-tab-content{flex:1;min-height:0;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}\n"] }]
-        }], propDecorators: { tabContents: [{
-                type: ContentChildren,
-                args: [KitTabContentComponent]
-            }], tabHeaderElement: [{
-                type: ViewChild,
-                args: ['tabHeader']
-            }], tabs: [{
-                type: Input
-            }] } });
-
-class KitNavigationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule, imports: [KitRouterOutletComponent,
-            KitTabViewComponent,
-            KitTabContentComponent], exports: [KitRouterOutletComponent,
-            KitTabViewComponent,
-            KitTabContentComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        KitRouterOutletComponent,
-                        KitTabViewComponent,
-                        KitTabContentComponent
-                    ],
-                    exports: [
-                        KitRouterOutletComponent,
-                        KitTabViewComponent,
-                        KitTabContentComponent
-                    ]
-                }]
-        }] });
-
-/**
- * A card component that displays content in an elevated, contained surface.
- * Cards can be clickable and support different elevation levels.
- */
-class KitCardComponent {
-    /**
-     * The elevation level of the card (affects shadow depth)
-     */
-    elevation = 'low';
-    /**
-     * Whether the card is clickable
-     */
-    clickable = false;
-    /**
-     * Whether the card is disabled (only applies to clickable cards)
-     */
-    disabled = false;
-    /**
-     * Whether the card should take up the full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Whether the card should take up the full height of its container
-     */
-    fullHeight = false;
-    /**
-     * Emitted when the card is clicked (only for clickable cards)
-     */
-    clicked = new EventEmitter();
-    /**
-     * Apply the clickable class to the host element when clickable is true
-     */
-    get isClickable() {
-        return this.clickable && !this.disabled;
-    }
-    /**
-     * Apply the full-width class to the host element when fullWidth is true
-     */
-    get isFullWidth() {
-        return this.fullWidth;
-    }
-    /**
-     * Apply the full-height class to the host element when fullHeight is true
-     */
-    get isFullHeight() {
-        return this.fullHeight;
-    }
-    /**
-     * Classes to apply to the card element
-     */
-    get cardClasses() {
-        const classes = ['kit-card'];
-        // Add elevation class
-        classes.push(`kit-card--${this.elevation}`);
-        // Add clickable class if needed
-        if (this.clickable) {
-            classes.push('kit-card--clickable');
-        }
-        // Add disabled class if needed
-        if (this.disabled && this.clickable) {
-            classes.push('kit-card--disabled');
-        }
-        // Add full width class if needed
-        if (this.fullWidth) {
-            classes.push('kit-card--full-width');
-        }
-        return classes;
-    }
-    /**
-     * Handle card click
-     */
-    handleClick(event) {
-        if (this.clickable && !this.disabled) {
-            this.clicked.emit(event);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { elevation: "elevation", clickable: "clickable", disabled: "disabled", fullWidth: "fullWidth", fullHeight: "fullHeight" }, outputs: { clicked: "clicked" }, host: { properties: { "class.clickable": "this.isClickable", "class.full-width": "this.isFullWidth", "class.full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div [ngClass]=\"cardClasses\"\n     [attr.role]=\"clickable ? 'button' : null\"\n     [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n     [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n     (click)=\"handleClick($event)\">\n\n    <div class=\"kit-card__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host{display:inline-block;min-width:0}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{display:block;height:100%}:host.full-height .kit-card{height:100%}:host.full-height .kit-card .kit-card__content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;min-width:0;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-card', standalone: true, imports: [NgClass], template: "<div [ngClass]=\"cardClasses\"\n     [attr.role]=\"clickable ? 'button' : null\"\n     [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n     [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n     (click)=\"handleClick($event)\">\n\n    <div class=\"kit-card__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host{display:inline-block;min-width:0}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{display:block;height:100%}:host.full-height .kit-card{height:100%}:host.full-height .kit-card .kit-card__content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;min-width:0;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"] }]
-        }], propDecorators: { elevation: [{
-                type: Input
-            }], clickable: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input
-            }], fullHeight: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }], isClickable: [{
-                type: HostBinding,
-                args: ['class.clickable']
-            }], isFullWidth: [{
-                type: HostBinding,
-                args: ['class.full-width']
-            }], isFullHeight: [{
-                type: HostBinding,
-                args: ['class.full-height']
-            }] } });
-
-class KitBadgeComponent {
-    color = 'primary';
-    active = true;
-    fullWidth = false;
-    get isFullWidth() {
-        return this.fullWidth;
-    }
-    get badgeClasses() {
-        const classes = ['kit-badge'];
-        classes.push(`kit-badge--${this.color}`);
-        if (!this.active) {
-            classes.push('kit-badge--inactive');
-        }
-        if (this.fullWidth) {
-            classes.push('kit-badge--full-width');
-        }
-        return classes;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitBadgeComponent, isStandalone: true, selector: "kit-badge", inputs: { color: "color", active: "active", fullWidth: "fullWidth" }, host: { properties: { "class.full-width": "this.isFullWidth" } }, ngImport: i0, template: "\n<div [ngClass]=\"badgeClasses\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}:host.full-width{width:100%}.kit-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kit-badge-border-radius, 12px);font-weight:var(--kit-badge-font-weight, 700);padding:var(--kit-badge-padding, 6px 12px);font-size:var(--kit-badge-font-size, 12px);line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.kit-badge.kit-badge--full-width{width:100%}.kit-badge.kit-badge--primary{background-color:var(--kit-color-primary, #0066cc);color:#fff}.kit-badge.kit-badge--secondary{background-color:var(--kit-color-secondary, #6c757d);color:#fff}.kit-badge.kit-badge--success{background-color:var(--kit-color-success, #28a745);color:#fff}.kit-badge.kit-badge--info{background-color:var(--kit-color-info, #17a2b8);color:#fff}.kit-badge.kit-badge--warning{background-color:var(--kit-color-warning, #ffc107);color:#000}.kit-badge.kit-badge--danger{background-color:var(--kit-color-danger, #dc3545);color:#fff}.kit-badge.kit-badge--transparent{background-color:transparent;color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}.kit-badge.kit-badge--inactive{background-color:transparent}.kit-badge.kit-badge--inactive.kit-badge--primary{background-color:rgba(var(--kit-color-primary-rgb, 0, 102, 204),.08);color:var(--kit-color-primary, #0066cc)}.kit-badge.kit-badge--inactive.kit-badge--secondary{background-color:rgba(var(--kit-color-secondary-rgb, 108, 117, 125),.08);color:var(--kit-color-secondary, #6c757d)}.kit-badge.kit-badge--inactive.kit-badge--success{background-color:rgba(var(--kit-color-success-rgb, 40, 167, 69),.08);color:var(--kit-color-success, #28a745)}.kit-badge.kit-badge--inactive.kit-badge--info{background-color:rgba(var(--kit-color-info-rgb, 23, 162, 184),.08);color:var(--kit-color-info, #17a2b8)}.kit-badge.kit-badge--inactive.kit-badge--warning{background-color:rgba(var(--kit-color-warning-rgb, 255, 193, 7),.08);color:var(--kit-color-warning, #ffc107)}.kit-badge.kit-badge--inactive.kit-badge--danger{background-color:rgba(var(--kit-color-danger-rgb, 220, 53, 69),.08);color:var(--kit-color-danger, #dc3545)}.kit-badge.kit-badge--inactive.kit-badge--transparent{background-color:rgba(var(--kit-color-transparent-text-rgb, 33, 37, 41),.04);color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-badge', standalone: true, imports: [NgClass], template: "\n<div [ngClass]=\"badgeClasses\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}:host.full-width{width:100%}.kit-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kit-badge-border-radius, 12px);font-weight:var(--kit-badge-font-weight, 700);padding:var(--kit-badge-padding, 6px 12px);font-size:var(--kit-badge-font-size, 12px);line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.kit-badge.kit-badge--full-width{width:100%}.kit-badge.kit-badge--primary{background-color:var(--kit-color-primary, #0066cc);color:#fff}.kit-badge.kit-badge--secondary{background-color:var(--kit-color-secondary, #6c757d);color:#fff}.kit-badge.kit-badge--success{background-color:var(--kit-color-success, #28a745);color:#fff}.kit-badge.kit-badge--info{background-color:var(--kit-color-info, #17a2b8);color:#fff}.kit-badge.kit-badge--warning{background-color:var(--kit-color-warning, #ffc107);color:#000}.kit-badge.kit-badge--danger{background-color:var(--kit-color-danger, #dc3545);color:#fff}.kit-badge.kit-badge--transparent{background-color:transparent;color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}.kit-badge.kit-badge--inactive{background-color:transparent}.kit-badge.kit-badge--inactive.kit-badge--primary{background-color:rgba(var(--kit-color-primary-rgb, 0, 102, 204),.08);color:var(--kit-color-primary, #0066cc)}.kit-badge.kit-badge--inactive.kit-badge--secondary{background-color:rgba(var(--kit-color-secondary-rgb, 108, 117, 125),.08);color:var(--kit-color-secondary, #6c757d)}.kit-badge.kit-badge--inactive.kit-badge--success{background-color:rgba(var(--kit-color-success-rgb, 40, 167, 69),.08);color:var(--kit-color-success, #28a745)}.kit-badge.kit-badge--inactive.kit-badge--info{background-color:rgba(var(--kit-color-info-rgb, 23, 162, 184),.08);color:var(--kit-color-info, #17a2b8)}.kit-badge.kit-badge--inactive.kit-badge--warning{background-color:rgba(var(--kit-color-warning-rgb, 255, 193, 7),.08);color:var(--kit-color-warning, #ffc107)}.kit-badge.kit-badge--inactive.kit-badge--danger{background-color:rgba(var(--kit-color-danger-rgb, 220, 53, 69),.08);color:var(--kit-color-danger, #dc3545)}.kit-badge.kit-badge--inactive.kit-badge--transparent{background-color:rgba(var(--kit-color-transparent-text-rgb, 33, 37, 41),.04);color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], active: [{
-                type: Input
-            }], fullWidth: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitTabViewComponent, isStandalone: true, selector: "kit-tab-view", inputs: { tabs: "tabs" }, queries: [{ propertyName: "tabContents", predicate: KitTabContentComponent }], viewQueries: [{ propertyName: "tabHeaderElement", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<div class=\"kit-tab-view-container\">\n\n  <div class=\"kit-tab-header\"\n    #tabHeader>\n\n    @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n      <div\n        class=\"kit-tab-item\"\n        [class.kit-tab-item--active]=\"tab.active\"\n        (click)=\"selectTab(tab.index)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab.active\">\n        {{ tab.title }}\n      </div>\n    }\n\n  </div>\n\n  <div class=\"kit-tab-content\"\n    role=\"tabpanel\">\n    <ng-content></ng-content>\n  </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;margin-bottom:var(--kit-input-padding, 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box;position:relative;scroll-behavior:smooth}.kit-tab-header::-webkit-scrollbar{display:none}.kit-tab-item{padding:12px 16px;cursor:pointer;font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);color:var(--kit-text-color-secondary, #6c757d);background-color:transparent;border:none;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.kit-tab-item:hover{color:var(--kit-color-primary, #0066cc);background-color:#0066cc0d}.kit-tab-item:focus{outline:2px solid var(--kit-color-primary, #0066cc);outline-offset:-2px}.kit-tab-item:after{content:\"\";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--kit-color-primary, #0066cc);transition:width .3s ease,left .3s ease;transform:translate(-50%)}.kit-tab-item--active{color:var(--kit-color-primary, #0066cc);font-weight:var(--kit-font-weight-label, 500);border-bottom-color:transparent}.kit-tab-item--active:after{width:100%}.kit-tab-item--active:hover{background-color:#0066cc1a}.kit-tab-content{flex:1;min-height:0;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTabViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-tab-view', standalone: true, imports: [], template: "<div class=\"kit-tab-view-container\">\n\n  <div class=\"kit-tab-header\"\n    #tabHeader>\n\n    @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n      <div\n        class=\"kit-tab-item\"\n        [class.kit-tab-item--active]=\"tab.active\"\n        (click)=\"selectTab(tab.index)\"\n        role=\"tab\"\n        [attr.aria-selected]=\"tab.active\">\n        {{ tab.title }}\n      </div>\n    }\n\n  </div>\n\n  <div class=\"kit-tab-content\"\n    role=\"tabpanel\">\n    <ng-content></ng-content>\n  </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;margin-bottom:var(--kit-input-padding, 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box;position:relative;scroll-behavior:smooth}.kit-tab-header::-webkit-scrollbar{display:none}.kit-tab-item{padding:12px 16px;cursor:pointer;font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);color:var(--kit-text-color-secondary, #6c757d);background-color:transparent;border:none;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.kit-tab-item:hover{color:var(--kit-color-primary, #0066cc);background-color:#0066cc0d}.kit-tab-item:focus{outline:2px solid var(--kit-color-primary, #0066cc);outline-offset:-2px}.kit-tab-item:after{content:\"\";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--kit-color-primary, #0066cc);transition:width .3s ease,left .3s ease;transform:translate(-50%)}.kit-tab-item--active{color:var(--kit-color-primary, #0066cc);font-weight:var(--kit-font-weight-label, 500);border-bottom-color:transparent}.kit-tab-item--active:after{width:100%}.kit-tab-item--active:hover{background-color:#0066cc1a}.kit-tab-content{flex:1;min-height:0;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}\n"] }]
+        }], propDecorators: { tabContents: [{
+                type: ContentChildren,
+                args: [KitTabContentComponent]
+            }], tabHeaderElement: [{
+                type: ViewChild,
+                args: ['tabHeader']
+            }], tabs: [{
                 type: Input
-            }], isFullWidth: [{
-                type: HostBinding,
-                args: ['class.full-width']
             }] } });
 
-class KitPanelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule, imports: [KitCardComponent,
-            KitBadgeComponent], exports: [KitBadgeComponent,
-            KitCardComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule });
+class KitNavigationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule, imports: [KitRouterOutletComponent,
+            KitTabViewComponent,
+            KitTabContentComponent], exports: [KitRouterOutletComponent,
+            KitTabViewComponent,
+            KitTabContentComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitNavigationModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [],
                     imports: [
-                        KitCardComponent,
-                        KitBadgeComponent
+                        KitRouterOutletComponent,
+                        KitTabViewComponent,
+                        KitTabContentComponent
                     ],
                     exports: [
-                        KitBadgeComponent,
-                        KitCardComponent
+                        KitRouterOutletComponent,
+                        KitTabViewComponent,
+                        KitTabContentComponent
                     ]
                 }]
         }] });
 
-class KitTextBodyComponent {
-    color = '';
-    align;
-    weight;
-    decoration;
-    margin;
-    wrap = true;
-    ellipses = false;
-    lines = 0;
-    italic = false;
-    get colorClass() {
-        return this.color ? `kit-text-${this.color}` : '';
-    }
-    get textStyles() {
-        const baseStyles = {
-            'margin': this.margin,
-            'text-align': this.align,
-            'font-weight': this.weight,
-            'text-decoration': this.decoration,
-            'font-style': this.italic ? 'italic' : 'normal'
-        };
-        if (this.ellipses) {
-            if (this.wrap && this.lines > 0) {
-                // Multi-line ellipsis
-                baseStyles['display'] = '-webkit-box';
-                baseStyles['-webkit-line-clamp'] = this.lines;
-                baseStyles['-webkit-box-orient'] = 'vertical';
-                baseStyles['overflow'] = 'hidden';
-            }
-            else {
-                // Single-line ellipsis
-                baseStyles['white-space'] = 'nowrap';
-                baseStyles['overflow'] = 'hidden';
-                baseStyles['text-overflow'] = 'ellipsis';
-            }
-        }
-        else {
-            // Wrapping control
-            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
-        }
-        return baseStyles;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextBodyComponent, isStandalone: true, selector: "kit-text-body", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<p [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</p>", styles: ["p{font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-info{color:var(--kit-color-info, #17a2b8)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextBodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-text-body', standalone: true, imports: [NgClass, NgStyle], template: "<p [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</p>", styles: ["p{font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-info{color:var(--kit-color-info, #17a2b8)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], weight: [{
-                type: Input
-            }], decoration: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], wrap: [{
-                type: Input
-            }], ellipses: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], italic: [{
-                type: Input
-            }] } });
-
-class KitTextDisplayComponent {
-    color = '';
-    align;
-    weight;
-    decoration;
-    margin;
-    wrap = true;
-    ellipses = false;
-    lines = 0;
-    italic = false;
-    get colorClass() {
-        return this.color ? `kit-text-${this.color}` : '';
+/**
+ * A card component that displays content in an elevated, contained surface.
+ * Cards can be clickable and support different elevation levels.
+ */
+class KitCardComponent {
+    /**
+     * The elevation level of the card (affects shadow depth)
+     */
+    elevation = 'low';
+    /**
+     * Whether the card is clickable
+     */
+    clickable = false;
+    /**
+     * Whether the card is disabled (only applies to clickable cards)
+     */
+    disabled = false;
+    /**
+     * Whether the card should take up the full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Whether the card should take up the full height of its container
+     */
+    fullHeight = false;
+    /**
+     * Emitted when the card is clicked (only for clickable cards)
+     */
+    clicked = new EventEmitter();
+    /**
+     * Apply the clickable class to the host element when clickable is true
+     */
+    get isClickable() {
+        return this.clickable && !this.disabled;
     }
-    get textStyles() {
-        const baseStyles = {
-            'margin': this.margin,
-            'text-align': this.align,
-            'font-weight': this.weight,
-            'text-decoration': this.decoration,
-            'font-style': this.italic ? 'italic' : 'normal'
-        };
-        if (this.ellipses) {
-            if (this.wrap && this.lines > 0) {
-                // Multi-line ellipsis
-                baseStyles['display'] = '-webkit-box';
-                baseStyles['-webkit-line-clamp'] = this.lines;
-                baseStyles['-webkit-box-orient'] = 'vertical';
-                baseStyles['overflow'] = 'hidden';
-            }
-            else {
-                // Single-line ellipsis
-                baseStyles['white-space'] = 'nowrap';
-                baseStyles['overflow'] = 'hidden';
-                baseStyles['text-overflow'] = 'ellipsis';
-            }
-        }
-        else {
-            // Wrapping control
-            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
-        }
-        return baseStyles;
+    /**
+     * Apply the full-width class to the host element when fullWidth is true
+     */
+    get isFullWidth() {
+        return this.fullWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextDisplayComponent, isStandalone: true, selector: "kit-text-display", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<h3 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h3>", styles: ["h3{font-size:var(--kit-font-size-display, 3rem);font-weight:var(--kit-font-weight-display, bold);line-height:var(--kit-line-height-display, 1.3);margin-bottom:.5rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-text-display', standalone: true, imports: [NgClass, NgStyle], template: "<h3 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h3>", styles: ["h3{font-size:var(--kit-font-size-display, 3rem);font-weight:var(--kit-font-weight-display, bold);line-height:var(--kit-line-height-display, 1.3);margin-bottom:.5rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], weight: [{
-                type: Input
-            }], decoration: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], wrap: [{
-                type: Input
-            }], ellipses: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], italic: [{
-                type: Input
-            }] } });
-
-class KitTextHeadingComponent {
-    color = '';
-    align;
-    weight;
-    decoration;
-    margin;
-    wrap = true;
-    ellipses = false;
-    lines = 0;
-    italic = false;
-    get colorClass() {
-        return this.color ? `kit-text-${this.color}` : '';
+    /**
+     * Apply the full-height class to the host element when fullHeight is true
+     */
+    get isFullHeight() {
+        return this.fullHeight;
     }
-    get textStyles() {
-        const baseStyles = {
-            'margin': this.margin,
-            'text-align': this.align,
-            'font-weight': this.weight,
-            'text-decoration': this.decoration,
-            'font-style': this.italic ? 'italic' : 'normal'
-        };
-        if (this.ellipses) {
-            if (this.wrap && this.lines > 0) {
-                // Multi-line ellipsis
-                baseStyles['display'] = '-webkit-box';
-                baseStyles['-webkit-line-clamp'] = this.lines;
-                baseStyles['-webkit-box-orient'] = 'vertical';
-                baseStyles['overflow'] = 'hidden';
-            }
-            else {
-                // Single-line ellipsis
-                baseStyles['white-space'] = 'nowrap';
-                baseStyles['overflow'] = 'hidden';
-                baseStyles['text-overflow'] = 'ellipsis';
-            }
+    /**
+     * Classes to apply to the card element
+     */
+    get cardClasses() {
+        const classes = ['kit-card'];
+        // Add elevation class
+        classes.push(`kit-card--${this.elevation}`);
+        // Add clickable class if needed
+        if (this.clickable) {
+            classes.push('kit-card--clickable');
         }
-        else {
-            // Wrapping control
-            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        // Add disabled class if needed
+        if (this.disabled && this.clickable) {
+            classes.push('kit-card--disabled');
         }
-        return baseStyles;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextHeadingComponent, isStandalone: true, selector: "kit-text-heading", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<h1 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h1>", styles: ["h1{font-size:var(--kit-font-size-heading, 2rem);font-weight:var(--kit-font-weight-heading, 700);line-height:var(--kit-line-height-heading, 1.2);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextHeadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-text-heading', standalone: true, imports: [NgClass, NgStyle], template: "<h1 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h1>", styles: ["h1{font-size:var(--kit-font-size-heading, 2rem);font-weight:var(--kit-font-weight-heading, 700);line-height:var(--kit-line-height-heading, 1.2);margin-bottom:1rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], weight: [{
-                type: Input
-            }], decoration: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], wrap: [{
-                type: Input
-            }], ellipses: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], italic: [{
-                type: Input
-            }] } });
-
-class KitTextLinkComponent {
-    color = '';
-    href = '#';
-    target = '_self';
-    align;
-    weight;
-    decoration;
-    margin;
-    wrap = true;
-    ellipses = false;
-    lines = 0;
-    italic = false;
-    get colorClass() {
-        return this.color ? `kit-text-${this.color}` : '';
-    }
-    get textStyles() {
-        const baseStyles = {
-            'margin': this.margin,
-            'text-align': this.align,
-            'font-weight': this.weight,
-            'text-decoration': this.decoration,
-            'font-style': this.italic ? 'italic' : 'normal'
-        };
-        if (this.ellipses) {
-            if (this.wrap && this.lines > 0) {
-                // Multi-line ellipsis
-                baseStyles['display'] = '-webkit-box';
-                baseStyles['-webkit-line-clamp'] = this.lines;
-                baseStyles['-webkit-box-orient'] = 'vertical';
-                baseStyles['overflow'] = 'hidden';
-            }
-            else {
-                // Single-line ellipsis
-                baseStyles['white-space'] = 'nowrap';
-                baseStyles['overflow'] = 'hidden';
-                baseStyles['text-overflow'] = 'ellipsis';
-            }
+        // Add full width class if needed
+        if (this.fullWidth) {
+            classes.push('kit-card--full-width');
         }
-        else {
-            // Wrapping control
-            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        return classes;
+    }
+    /**
+     * Handle card click
+     */
+    handleClick(event) {
+        if (this.clickable && !this.disabled) {
+            this.clicked.emit(event);
         }
-        return baseStyles;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextLinkComponent, isStandalone: true, selector: "kit-text-link", inputs: { color: "color", href: "href", target: "target", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<a [ngClass]=\"colorClass\" [href]=\"href\" [target]=\"target\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</a>", styles: ["a{font-size:var(--kit-font-size-link, 1rem);font-weight:var(--kit-font-weight-link, 400);line-height:var(--kit-line-height-link, 1.5);text-decoration:underline;cursor:pointer;color:var(--kit-color-primary, #0066cc)}a:hover{opacity:.85}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { elevation: "elevation", clickable: "clickable", disabled: "disabled", fullWidth: "fullWidth", fullHeight: "fullHeight" }, outputs: { clicked: "clicked" }, host: { properties: { "class.clickable": "this.isClickable", "class.full-width": "this.isFullWidth", "class.full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div [ngClass]=\"cardClasses\"\n     [attr.role]=\"clickable ? 'button' : null\"\n     [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n     [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n     (click)=\"handleClick($event)\">\n\n    <div class=\"kit-card__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host{display:inline-block;min-width:0}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{display:block;height:100%}:host.full-height .kit-card{height:100%}:host.full-height .kit-card .kit-card__content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;min-width:0;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-text-link', standalone: true, imports: [NgClass, NgStyle], template: "<a [ngClass]=\"colorClass\" [href]=\"href\" [target]=\"target\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</a>", styles: ["a{font-size:var(--kit-font-size-link, 1rem);font-weight:var(--kit-font-weight-link, 400);line-height:var(--kit-line-height-link, 1.5);text-decoration:underline;cursor:pointer;color:var(--kit-color-primary, #0066cc)}a:hover{opacity:.85}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], href: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], weight: [{
-                type: Input
-            }], decoration: [{
-                type: Input
-            }], margin: [{
+            args: [{ selector: 'kit-card', standalone: true, imports: [NgClass], template: "<div [ngClass]=\"cardClasses\"\n     [attr.role]=\"clickable ? 'button' : null\"\n     [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n     [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n     (click)=\"handleClick($event)\">\n\n    <div class=\"kit-card__content\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: [":host{display:inline-block;min-width:0}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{display:block;height:100%}:host.full-height .kit-card{height:100%}:host.full-height .kit-card .kit-card__content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;min-width:0;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"] }]
+        }], propDecorators: { elevation: [{
                 type: Input
-            }], wrap: [{
+            }], clickable: [{
                 type: Input
-            }], ellipses: [{
+            }], disabled: [{
                 type: Input
-            }], lines: [{
+            }], fullWidth: [{
                 type: Input
-            }], italic: [{
+            }], fullHeight: [{
                 type: Input
+            }], clicked: [{
+                type: Output
+            }], isClickable: [{
+                type: HostBinding,
+                args: ['class.clickable']
+            }], isFullWidth: [{
+                type: HostBinding,
+                args: ['class.full-width']
+            }], isFullHeight: [{
+                type: HostBinding,
+                args: ['class.full-height']
             }] } });
 
-class KitTextSubheadingComponent {
-    color = '';
-    align;
-    weight;
-    decoration;
-    margin;
-    wrap = true;
-    ellipses = false;
-    lines = 0;
-    italic = false;
-    get colorClass() {
-        return this.color ? `kit-text-${this.color}` : '';
+class KitBadgeComponent {
+    color = 'primary';
+    active = true;
+    fullWidth = false;
+    get isFullWidth() {
+        return this.fullWidth;
     }
-    get textStyles() {
-        const baseStyles = {
-            'margin': this.margin,
-            'text-align': this.align,
-            'font-weight': this.weight,
-            'text-decoration': this.decoration,
-            'font-style': this.italic ? 'italic' : 'normal'
-        };
-        if (this.ellipses) {
-            if (this.wrap && this.lines > 0) {
-                // Multi-line ellipsis
-                baseStyles['display'] = '-webkit-box';
-                baseStyles['-webkit-line-clamp'] = this.lines;
-                baseStyles['-webkit-box-orient'] = 'vertical';
-                baseStyles['overflow'] = 'hidden';
-            }
-            else {
-                // Single-line ellipsis
-                baseStyles['white-space'] = 'nowrap';
-                baseStyles['overflow'] = 'hidden';
-                baseStyles['text-overflow'] = 'ellipsis';
-            }
+    get badgeClasses() {
+        const classes = ['kit-badge'];
+        classes.push(`kit-badge--${this.color}`);
+        if (!this.active) {
+            classes.push('kit-badge--inactive');
         }
-        else {
-            // Wrapping control
-            baseStyles['white-space'] = this.wrap ? 'normal' : 'nowrap';
+        if (this.fullWidth) {
+            classes.push('kit-badge--full-width');
         }
-        return baseStyles;
+        return classes;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextSubheadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitTextSubheadingComponent, isStandalone: true, selector: "kit-text-subheading", inputs: { color: "color", align: "align", weight: "weight", decoration: "decoration", margin: "margin", wrap: "wrap", ellipses: "ellipses", lines: "lines", italic: "italic" }, ngImport: i0, template: "<h2 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h2>", styles: ["h2{font-size:var(--kit-font-size-subheading, 1.5rem);font-weight:var(--kit-font-weight-subheading, 500);line-height:var(--kit-line-height-subheading, 1.2);margin-bottom:.75rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitBadgeComponent, isStandalone: true, selector: "kit-badge", inputs: { color: "color", active: "active", fullWidth: "fullWidth" }, host: { properties: { "class.full-width": "this.isFullWidth" } }, ngImport: i0, template: "\n<div [ngClass]=\"badgeClasses\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}:host.full-width{width:100%}.kit-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kit-badge-border-radius, 12px);font-weight:var(--kit-badge-font-weight, 700);padding:var(--kit-badge-padding, 6px 12px);font-size:var(--kit-badge-font-size, 12px);line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.kit-badge.kit-badge--full-width{width:100%}.kit-badge.kit-badge--primary{background-color:var(--kit-color-primary, #0066cc);color:#fff}.kit-badge.kit-badge--secondary{background-color:var(--kit-color-secondary, #6c757d);color:#fff}.kit-badge.kit-badge--success{background-color:var(--kit-color-success, #28a745);color:#fff}.kit-badge.kit-badge--info{background-color:var(--kit-color-info, #17a2b8);color:#fff}.kit-badge.kit-badge--warning{background-color:var(--kit-color-warning, #ffc107);color:#000}.kit-badge.kit-badge--danger{background-color:var(--kit-color-danger, #dc3545);color:#fff}.kit-badge.kit-badge--transparent{background-color:transparent;color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}.kit-badge.kit-badge--inactive{background-color:transparent}.kit-badge.kit-badge--inactive.kit-badge--primary{background-color:rgba(var(--kit-color-primary-rgb, 0, 102, 204),.08);color:var(--kit-color-primary, #0066cc)}.kit-badge.kit-badge--inactive.kit-badge--secondary{background-color:rgba(var(--kit-color-secondary-rgb, 108, 117, 125),.08);color:var(--kit-color-secondary, #6c757d)}.kit-badge.kit-badge--inactive.kit-badge--success{background-color:rgba(var(--kit-color-success-rgb, 40, 167, 69),.08);color:var(--kit-color-success, #28a745)}.kit-badge.kit-badge--inactive.kit-badge--info{background-color:rgba(var(--kit-color-info-rgb, 23, 162, 184),.08);color:var(--kit-color-info, #17a2b8)}.kit-badge.kit-badge--inactive.kit-badge--warning{background-color:rgba(var(--kit-color-warning-rgb, 255, 193, 7),.08);color:var(--kit-color-warning, #ffc107)}.kit-badge.kit-badge--inactive.kit-badge--danger{background-color:rgba(var(--kit-color-danger-rgb, 220, 53, 69),.08);color:var(--kit-color-danger, #dc3545)}.kit-badge.kit-badge--inactive.kit-badge--transparent{background-color:rgba(var(--kit-color-transparent-text-rgb, 33, 37, 41),.04);color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextSubheadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-text-subheading', standalone: true, imports: [NgClass, NgStyle], template: "<h2 [ngClass]=\"colorClass\" [ngStyle]=\"textStyles\">\n  <ng-content></ng-content>\n</h2>", styles: ["h2{font-size:var(--kit-font-size-subheading, 1.5rem);font-weight:var(--kit-font-weight-subheading, 500);line-height:var(--kit-line-height-subheading, 1.2);margin-bottom:.75rem;color:var(--kit-text-color-primary, #212529)}.kit-text-primary{color:var(--kit-color-primary, #0066cc)}.kit-text-secondary{color:var(--kit-color-secondary, #6c757d)}.kit-text-success{color:var(--kit-color-success, #28a745)}.kit-text-warning{color:var(--kit-color-warning, #ffc107)}.kit-text-danger{color:var(--kit-color-danger, #dc3545)}.kit-text-muted{color:var(--kit-text-color-muted, #adb5bd)}\n"] }]
+            args: [{ selector: 'kit-badge', standalone: true, imports: [NgClass], template: "\n<div [ngClass]=\"badgeClasses\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}:host.full-width{width:100%}.kit-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--kit-badge-border-radius, 12px);font-weight:var(--kit-badge-font-weight, 700);padding:var(--kit-badge-padding, 6px 12px);font-size:var(--kit-badge-font-size, 12px);line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.kit-badge.kit-badge--full-width{width:100%}.kit-badge.kit-badge--primary{background-color:var(--kit-color-primary, #0066cc);color:#fff}.kit-badge.kit-badge--secondary{background-color:var(--kit-color-secondary, #6c757d);color:#fff}.kit-badge.kit-badge--success{background-color:var(--kit-color-success, #28a745);color:#fff}.kit-badge.kit-badge--info{background-color:var(--kit-color-info, #17a2b8);color:#fff}.kit-badge.kit-badge--warning{background-color:var(--kit-color-warning, #ffc107);color:#000}.kit-badge.kit-badge--danger{background-color:var(--kit-color-danger, #dc3545);color:#fff}.kit-badge.kit-badge--transparent{background-color:transparent;color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}.kit-badge.kit-badge--inactive{background-color:transparent}.kit-badge.kit-badge--inactive.kit-badge--primary{background-color:rgba(var(--kit-color-primary-rgb, 0, 102, 204),.08);color:var(--kit-color-primary, #0066cc)}.kit-badge.kit-badge--inactive.kit-badge--secondary{background-color:rgba(var(--kit-color-secondary-rgb, 108, 117, 125),.08);color:var(--kit-color-secondary, #6c757d)}.kit-badge.kit-badge--inactive.kit-badge--success{background-color:rgba(var(--kit-color-success-rgb, 40, 167, 69),.08);color:var(--kit-color-success, #28a745)}.kit-badge.kit-badge--inactive.kit-badge--info{background-color:rgba(var(--kit-color-info-rgb, 23, 162, 184),.08);color:var(--kit-color-info, #17a2b8)}.kit-badge.kit-badge--inactive.kit-badge--warning{background-color:rgba(var(--kit-color-warning-rgb, 255, 193, 7),.08);color:var(--kit-color-warning, #ffc107)}.kit-badge.kit-badge--inactive.kit-badge--danger{background-color:rgba(var(--kit-color-danger-rgb, 220, 53, 69),.08);color:var(--kit-color-danger, #dc3545)}.kit-badge.kit-badge--inactive.kit-badge--transparent{background-color:rgba(var(--kit-color-transparent-text-rgb, 33, 37, 41),.04);color:var(--kit-color-transparent-text, var(--kit-text-color-primary, #212529))}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
-            }], align: [{
-                type: Input
-            }], weight: [{
-                type: Input
-            }], decoration: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], wrap: [{
-                type: Input
-            }], ellipses: [{
-                type: Input
-            }], lines: [{
+            }], active: [{
                 type: Input
-            }], italic: [{
+            }], fullWidth: [{
                 type: Input
+            }], isFullWidth: [{
+                type: HostBinding,
+                args: ['class.full-width']
             }] } });
 
-class KitTextModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule, imports: [KitTextHeadingComponent,
-            KitTextSubheadingComponent,
-            KitTextDisplayComponent,
-            KitTextLabelComponent,
-            KitTextBodyComponent,
-            KitTextCaptionComponent,
-            KitTextLinkComponent], exports: [KitTextHeadingComponent,
-            KitTextSubheadingComponent,
-            KitTextDisplayComponent,
-            KitTextLabelComponent,
-            KitTextBodyComponent,
-            KitTextCaptionComponent,
-            KitTextLinkComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule });
+class KitPanelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule, imports: [KitCardComponent,
+            KitBadgeComponent], exports: [KitBadgeComponent,
+            KitCardComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTextModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
                     imports: [
-                        KitTextHeadingComponent,
-                        KitTextSubheadingComponent,
-                        KitTextDisplayComponent,
-                        KitTextLabelComponent,
-                        KitTextBodyComponent,
-                        KitTextCaptionComponent,
-                        KitTextLinkComponent,
+                        KitCardComponent,
+                        KitBadgeComponent
                     ],
                     exports: [
-                        KitTextHeadingComponent,
-                        KitTextSubheadingComponent,
-                        KitTextDisplayComponent,
-                        KitTextLabelComponent,
-                        KitTextBodyComponent,
-                        KitTextCaptionComponent,
-                        KitTextLinkComponent,
+                        KitBadgeComponent,
+                        KitCardComponent
                     ]
                 }]
         }] });