@koobiq/components 20.0.0 → 20.1.0

package/filter-bar/pipes/base-pipe.scss

@@ -12,15 +12,13 @@
     }
 
     .kbq-button-wrapper {
-        max-width: 320px;
+        max-width: var(--kbq-filter-bar-pipe-max-width, 320px);
     }
 
     .kbq-pipe__name {
         @include common.kbq-truncate-line();
 
         flex: 1 1 auto;
-
-        color: var(--kbq-foreground-contrast-secondary);
     }
 
     .kbq-pipe__value {
@@ -29,21 +27,19 @@
         flex: 1 1 auto;
 
         &:not(.kbq-pipe__value_empty) {
-            margin-left: 4px;
+            margin-inline-start: 4px;
         }
     }
 
     .kbq-pipe__separator {
         z-index: 1;
 
-        margin-left: -1px;
-        margin-right: 0;
+        margin-inline-start: -1px;
+        margin-inline-end: 0;
 
         height: var(--kbq-size-l);
 
         align-self: center;
-
-        color: var(--kbq-line-contrast-less);
     }
 
     .kbq-select:not(:hover, .kbq-active),
@@ -52,67 +48,50 @@
         & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
             content: '';
             position: absolute;
-            left: 0;
+            inset-inline-start: 0;
             top: var(--kbq-size-s);
 
             width: 1px;
             height: var(--kbq-size-l);
-
-            background: var(--kbq-line-contrast-less);
         }
     }
 
     .kbq-button.cdk-keyboard-focused {
         z-index: 1;
     }
-
-    &.kbq-pipe_disabled {
-        .kbq-pipe__name,
-        .kbq-pipe__value {
-            color: var(--kbq-states-foreground-disabled);
-        }
-    }
 }
 
 .kbq-pipe.kbq-pipe_removable,
 .kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
     .kbq-button {
-        border-bottom-right-radius: unset;
-        border-top-right-radius: unset;
-        border-right: none;
+        border-end-end-radius: unset;
+        border-start-end-radius: unset;
+        border-inline-end: none;
 
         &.cdk-keyboard-focused::after {
             content: '';
             position: absolute;
-            right: 0;
+            inset-inline-end: 0;
             top: 0;
             bottom: 0;
             width: 1px;
-            background: var(--kbq-states-line-focus-theme);
         }
     }
 
     .kbq-button-icon {
-        border-bottom-left-radius: unset;
-        border-top-left-radius: unset;
-        border-left: none;
+        border-end-start-radius: unset;
+        border-start-start-radius: unset;
+        border-inline-start: none;
 
         &.cdk-keyboard-focused::after {
             content: '';
             position: absolute;
-            left: 0;
+            inset-inline-start: 0;
             top: 0;
             bottom: 0;
             width: 1px;
-            background: var(--kbq-states-line-focus-theme);
         }
     }
 }
 
-.kbq-pipe-tooltip__name {
-    color: var(--kbq-foreground-white-secondary);
-}
-
-.kbq-pipe-tooltip__value {
-    color: var(--kbq-foreground-white);
-}
+@include kbq-filter-bar-pipe-theme();

package/filter-bar/pipes/pipe-date.scss

@@ -4,6 +4,10 @@
 @use '../../datepicker/datepicker-tokens' as *;
 
 .kbq-pipe-date__popover {
+    // Tokens are declared on the overlay panel itself so they resolve outside `.kbq-filter-bar`.
+    --kbq-filter-bar-date-period-width: 320px;
+    --kbq-filter-bar-date-field-width: 136px;
+
     & .kbq-popover__container {
         max-height: unset;
     }
@@ -16,8 +20,7 @@
         margin: var(--kbq-size-xxs) 0;
 
         & .kbq-list-option {
-            margin-left: var(--kbq-size-xxs);
-            margin-right: var(--kbq-size-xxs);
+            margin-inline: var(--kbq-size-xxs);
 
             & .kbq-list-text {
                 display: flex;
@@ -25,7 +28,7 @@
             }
 
             & .kbq-icon {
-                margin-left: var(--kbq-size-s);
+                margin-inline-start: var(--kbq-size-s);
                 align-self: center;
 
                 color: var(--kbq-icon-fade-contrast-color);
@@ -34,7 +37,7 @@
     }
 
     & .kbq-date-period {
-        width: 320px;
+        width: var(--kbq-filter-bar-date-period-width);
 
         & .kbq-date-period__header {
             padding: var(--kbq-size-xs) var(--kbq-size-xxs) var(--kbq-size-s);
@@ -59,11 +62,11 @@
             gap: var(--kbq-size-s);
 
             & .kbq-form__label {
-                padding-left: var(--kbq-size-l);
+                padding-inline-start: var(--kbq-size-l);
             }
 
             & .kbq-form__control {
-                padding-right: var(--kbq-size-l);
+                padding-inline-end: var(--kbq-size-l);
             }
 
             & .kbq-date-period__date,
@@ -75,22 +78,26 @@
                 display: flex;
 
                 & .kbq-date-period__date {
-                    width: 136px;
+                    width: var(--kbq-filter-bar-date-field-width);
 
                     & .kbq-form-field__container {
-                        border-top-right-radius: unset;
-                        border-bottom-right-radius: unset;
+                        // Square off the seam (inline-end) — logical so it follows the inline-start overlap
+                        // below under RTL (was border-top/bottom-right-radius).
+                        border-start-end-radius: unset;
+                        border-end-end-radius: unset;
                     }
                 }
 
                 & .kbq-date-period__time.kbq-form-field-type-timepicker {
                     flex: 1;
-                    margin-left: -1px;
+                    margin-inline-start: -1px;
                     width: unset;
 
                     & .kbq-form-field__container {
-                        border-top-left-radius: unset;
-                        border-bottom-left-radius: unset;
+                        // Square off the seam (inline-start) — logical counterpart of the date field above
+                        // (was border-top/bottom-left-radius).
+                        border-start-start-radius: unset;
+                        border-end-start-radius: unset;
                     }
                 }
             }
@@ -109,8 +116,7 @@
             & .kbq-hint {
                 grid-column: 2 span;
 
-                padding-left: var(--kbq-size-m);
-                padding-right: var(--kbq-size-m);
+                padding-inline: var(--kbq-size-m);
             }
         }
 

package/filter-bar/pipes/pipe-multi-tree-select.scss

@@ -1,12 +1,14 @@
+@use '../filter-bar-theme' as *;
+
 .kbq-pipe__multi-tree-select {
     .kbq-pipe__value {
-        margin-left: var(--kbq-size-xxs);
+        margin-inline-start: var(--kbq-size-xxs);
     }
 
     .kbq-badge {
         align-self: center;
 
-        margin-left: var(--kbq-size-xs);
+        margin-inline-start: var(--kbq-size-xs);
     }
 
     & .kbq-tree-select .kbq-select__trigger {
@@ -15,5 +17,5 @@
 }
 
 .kbq-pipe-multi-tree-select__panel .kbq-select__content {
-    max-height: 404px;
+    @include kbq-filter-bar-panel-content-max-height();
 }

package/filter-bar/pipes/pipe-multiselect.scss

@@ -1,15 +1,17 @@
+@use '../filter-bar-theme' as *;
+
 .kbq-pipe__multiselect {
     .kbq-pipe__value {
-        margin-left: var(--kbq-size-xxs);
+        margin-inline-start: var(--kbq-size-xxs);
     }
 
     .kbq-badge {
         align-self: center;
 
-        margin-left: var(--kbq-size-xs);
+        margin-inline-start: var(--kbq-size-xs);
     }
 }
 
 .kbq-pipe-multiselect__panel .kbq-select__content {
-    max-height: 404px;
+    @include kbq-filter-bar-panel-content-max-height();
 }

package/filter-bar/pipes/pipe-readonly.scss

@@ -1,18 +1,9 @@
+@use '../filter-bar-theme' as *;
+
 .kbq-pipe.kbq-pipe__readonly {
     & .kbq-button {
         cursor: default;
     }
-
-    &:not(.kbq-pipe_cleanable) {
-        & .kbq-button-icon.kbq-button_filled:not(:hover),
-        & .kbq-button.kbq-button_filled,
-        & .kbq-button.kbq-button_filled:hover {
-            background: var(--kbq-states-background-disabled);
-        }
-
-        & .kbq-pipe__name,
-        & .kbq-pipe__value {
-            color: var(--kbq-states-foreground-disabled);
-        }
-    }
 }
+
+@include kbq-filter-bar-readonly-theme();

package/filter-bar/pipes/pipe-select.scss

@@ -1,3 +1,5 @@
+@use '../filter-bar-theme' as *;
+
 .kbq-pipe-select__panel .kbq-select__content {
-    max-height: 404px;
+    @include kbq-filter-bar-panel-content-max-height();
 }

package/filter-bar/pipes/pipe-tree-select.scss

@@ -1,5 +1,7 @@
+@use '../filter-bar-theme' as *;
+
 .kbq-pipe-tree-select__panel .kbq-tree-select__content {
-    max-height: 404px;
+    @include kbq-filter-bar-panel-content-max-height();
 }
 
 .kbq-pipe__tree-select {

package/flag/flag.scss

@@ -0,0 +1,53 @@
+.kbq-flag {
+    // Theme tokens. The faded contrast line resolves to a dark hairline in the light theme and a
+    // light one in the dark theme, so the flag stays separated from the background in both.
+    --kbq-flag-shadow-color: var(--kbq-line-contrast-fade);
+    --kbq-flag-empty-background: var(--kbq-states-background-disabled);
+    --kbq-flag-border-radius: 0;
+    --kbq-flag-aspect-ratio: 3 / 2;
+
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    // Sizing follows the surrounding text; 3:2 gives width = 1.5 × line height. Override via
+    // font-size / width / height to resize.
+    height: 1em;
+    aspect-ratio: var(--kbq-flag-aspect-ratio);
+    vertical-align: middle;
+    overflow: hidden;
+    border-radius: var(--kbq-flag-border-radius);
+
+    // Size the flag image whether it is projected directly or bound via [innerHTML]
+    // (the injected svg may sit inside a wrapper element).
+    svg,
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    // Inset hairline drawn on top of the flag, gated by the shadow input.
+    &.kbq-flag_shadow-inset::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        box-shadow: inset 0 0 0 1px var(--kbq-flag-shadow-color);
+        pointer-events: none;
+    }
+
+    &.kbq-flag_square,
+    &.kbq-flag_circle {
+        --kbq-flag-aspect-ratio: 1 / 1;
+    }
+
+    &.kbq-flag_circle {
+        border-radius: 50%;
+    }
+
+    // Neutral placeholder when no flag is projected (unknown / invalid country code).
+    &.kbq-flag_empty {
+        background: var(--kbq-flag-empty-background);
+    }
+}

package/flag/index.d.ts

@@ -0,0 +1,44 @@
+import * as _angular_core from '@angular/core';
+
+/** Shape of the flag. `rectangle` keeps the default 3:2 ratio, `square`/`circle` expect a 1:1 source. */
+type KbqFlagShape = 'rectangle' | 'square' | 'circle';
+/** Inset shadow (hairline) that separates the flag from the background. */
+type KbqFlagShadow = 'inset' | 'none';
+
+/**
+ * Presentational wrapper for a consumer-provided country flag (inline `<svg>` or `<img>`).
+ * Decorates it with shape and shadow and applies the accessibility contract.
+ *
+ * ```html
+ * <kbq-flag><img src="…/AL.svg" alt="" /></kbq-flag> Albania
+ * ```
+ */
+declare class KbqFlag {
+    /**
+     * Shape of the flag. `square`/`circle` expect a 1:1 (square) flag source to be projected.
+     * @default rectangle
+     */
+    readonly shape: _angular_core.InputSignal<KbqFlagShape>;
+    /**
+     * Inset hairline that keeps the flag distinct from the background. Its color adapts to the theme.
+     * @default inset
+     */
+    readonly shadow: _angular_core.InputSignal<KbqFlagShadow>;
+    /** Renders a neutral placeholder — use when no flag can be shown (unknown / invalid country code). */
+    readonly empty: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Marks the flag as decorative — hidden from screen readers (use when adjacent text is present). */
+    readonly decorative: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name for the flag. Use when the flag carries meaning and has no adjacent text. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFlag, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqFlag, "kbq-flag", ["kbqFlag"], { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class KbqFlagModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqFlagModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqFlagModule, never, [typeof KbqFlag], [typeof KbqFlag]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqFlagModule>;
+}
+
+export { KbqFlag, KbqFlagModule };
+export type { KbqFlagShadow, KbqFlagShape };

package/icon/icon-item-tokens.scss

@@ -10,7 +10,7 @@
     --kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);
     --kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);
     --kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);
-    --kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);
+    --kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-contrast);
     --kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);
     --kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);
     --kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);

package/inline-edit/index.d.ts

@@ -116,6 +116,10 @@ declare class KbqInlineEdit {
     /** @docs-private */
     protected readonly isEditMode: _angular_core.Signal<boolean>;
     /** @docs-private */
+    protected readonly hasInteractiveContent: _angular_core.WritableSignal<boolean>;
+    /** @docs-private */
+    protected readonly anchorFocused: _angular_core.WritableSignal<boolean>;
+    /** @docs-private */
     protected readonly tabIndex: _angular_core.Signal<0 | -1>;
     /** @docs-private */
     protected readonly placements: typeof PopUpPlacements;
@@ -141,6 +145,7 @@ declare class KbqInlineEdit {
      * @docs-private
      */
     protected onOverlayOutsideClick($event: Event): void;
+    private detectInteractiveContent;
     private isInteractiveElement;
     /**
      * Sets up Tab key listeners on region items.

package/inline-edit/inline-edit.scss

@@ -46,7 +46,8 @@
         outline: none;
     }
 
-    &.cdk-keyboard-focused {
+    &.cdk-keyboard-focused,
+    &.kbq-inline-edit_anchor-focused {
         box-shadow: inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme);
         border-color: var(--kbq-states-line-focus-theme);
     }
@@ -125,7 +126,8 @@
     }
 
     &:hover,
-    &.cdk-keyboard-focused {
+    &.cdk-keyboard-focused,
+    &.kbq-inline-edit_anchor-focused {
         .kbq-inline-edit__menu-mask {
             opacity: 1;
         }
@@ -176,10 +178,6 @@
 .kbq-inline-edit__panel {
     width: 100%;
 
-    .kbq-inline-edit__control-container {
-        border-radius: var(--kbq-size-border-radius);
-    }
-
     .kbq-inline-edit__action-buttons {
         position: absolute;
         left: calc(-1 * var(--kbq-inline-edit-padding-horizontal));
@@ -190,7 +188,9 @@
     }
 
     .kbq-inline-edit__control-container,
-    .kbq-inline-edit__action-buttons > .kbq-button-icon {
+    .kbq-inline-edit__action-button {
         box-shadow: var(--kbq-shadow-popup);
+        background-color: var(--kbq-background-bg);
+        border-radius: var(--kbq-size-border-radius);
     }
 }

package/link/link-tokens.scss

@@ -13,9 +13,9 @@
     /* @TODO (#DS-3002) */
     --kbq-link-state-visited-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-hover-text: var(--kbq-states-foreground-visited-hover);
-    --kbq-link-state-visited-hover-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-hover-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-visited-active-text: var(--kbq-states-foreground-visited-active);
-    --kbq-link-state-visited-active-border-bottomm: var(--kbq-line-visited-fade, var(--kbq-line-visited));
+    --kbq-link-state-visited-active-border-bottom: var(--kbq-line-visited-fade, var(--kbq-line-visited));
     --kbq-link-state-hover-text: var(--kbq-states-foreground-theme-hover);
     --kbq-link-state-hover-border-bottom: var(--kbq-line-theme-fade);
     --kbq-link-state-active-text: var(--kbq-states-foreground-theme-active);

package/list/index.d.ts

@@ -54,6 +54,8 @@ declare class KbqListSelection implements AfterContentInit, AfterViewInit, OnDes
     get noUnselectLast(): boolean;
     set noUnselectLast(value: boolean);
     private _noUnselectLast;
+    /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
+    readonly selectAllToggle: i0.InputSignalWithTransform<boolean, unknown>;
     multipleMode: MultipleMode | null;
     get multiple(): boolean;
     readonly horizontal: i0.InputSignalWithTransform<boolean, unknown>;
@@ -77,6 +79,7 @@ declare class KbqListSelection implements AfterContentInit, AfterViewInit, OnDes
     get optionBlurChanges(): Observable<KbqOptionEvent>;
     _value: string[] | null;
     private readonly destroyRef;
+    private readonly platform;
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor();
@@ -124,10 +127,16 @@ declare class KbqListSelection implements AfterContentInit, AfterViewInit, OnDes
     private isValidIndex;
     private getOptionIndex;
     private onChange;
-    private selectAllOptions;
+    /**
+     * Function for handling the combination Ctrl + A (select all). By default, the internal handler is used,
+     * which toggles the selection of all non-disabled options.
+     */
+    get selectAllHandler(): (event: KeyboardEvent, list: KbqListSelection) => void;
+    set selectAllHandler(fn: (event: KeyboardEvent, list: KbqListSelection) => void);
+    private _selectAllHandler;
     private copyActiveOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListSelection, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["kbqListSelection"], { "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["kbqListSelection"], { "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }
 declare class KbqListOptionCaption {

package/loader-overlay/loader-overlay-tokens.scss

@@ -2,7 +2,7 @@
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);
     --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-l);
-    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-sizeа-3xl);
+    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-normal-loader-margin-bottom: var(--kbq-size-xxl);
     --kbq-loader-overlay-size-normal-content-content-gap-vertical: var(--kbq-size-xxs);
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);

package/modal/_modal-animation.scss

@@ -40,13 +40,13 @@ $animation-duration-base: 0.3s;
 @mixin zoom-motion($className, $keyframeName, $duration: $animation-duration-base) {
     @include _make-motion($className, $keyframeName, $duration);
 
-    .#{className}-enter,
-    .#{className}-appear {
+    .#{$className}-enter,
+    .#{$className}-appear {
         transform: translate(0, -25%);
         animation-timing-function: $ease-out-circ;
     }
 
-    .#{className}-leave {
+    .#{$className}-leave {
         transform: translate(0, 0);
         animation-timing-function: $ease-in-out-circ;
     }
@@ -55,13 +55,13 @@ $animation-duration-base: 0.3s;
 @mixin fade-motion($className, $keyframeName) {
     @include _make-motion($className, $keyframeName);
 
-    .#{className}-enter,
-    .#{className}-appear {
+    .#{$className}-enter,
+    .#{$className}-appear {
         opacity: 0;
         animation-timing-function: ease-out;
     }
 
-    .#{className}-leave {
+    .#{$className}-leave {
         animation-timing-function: ease-out;
     }
 }

package/modal/_modal-theme.scss

@@ -18,6 +18,10 @@
         .kbq-modal-content {
             color: var(--kbq-modal-content-text-color);
         }
+
+        .kbq-modal-caption {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
     }
 
     .kbq-modal-mask {
@@ -30,6 +34,7 @@
         @include kbq-typography-level-to-styles-css-variables(typography, title);
     }
 
+    .kbq-modal-caption,
     .kbq-modal-body {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }

package/modal/index.d.ts

@@ -32,6 +32,7 @@ interface ModalOptions<C = any, R = any> {
     kbqClassName?: string;
     kbqStyle?: object;
     kbqTitle?: string | TemplateRef<{}>;
+    kbqCaption?: string | TemplateRef<{}>;
     kbqContent?: string | TemplateRef<{}> | Type<C>;
     kbqComponent?: Type<C>;
     kbqClosable?: boolean;
@@ -105,6 +106,7 @@ declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> impl
     kbqClassName: string;
     kbqStyle: object;
     kbqTitle: string | TemplateRef<{}>;
+    kbqCaption: string | TemplateRef<{}>;
     kbqCloseByESC: boolean;
     get kbqClosable(): boolean;
     set kbqClosable(value: boolean);
@@ -204,7 +206,7 @@ declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> impl
      */
     private changeBodyOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqBeforeClose": "kbqBeforeClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCaption": { "alias": "kbqCaption"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqBeforeClose": "kbqBeforeClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
 }
 
 /**

package/modal/modal.scss

@@ -102,6 +102,21 @@
     padding-bottom: var(--kbq-size-3xs);
 }
 
+.kbq-modal-header-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.kbq-modal-caption {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .kbq-modal-body {
     display: block;
     overflow-y: auto;

package/navbar/index.d.ts

@@ -210,6 +210,7 @@ declare class KbqNavbar extends KbqFocusableComponent implements AfterViewInit,
     protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly focusMonitor: FocusMonitor;
+    private readonly platform;
     readonly rectangleElements: i0.Signal<readonly any[]>;
     readonly navbarItems: i0.Signal<readonly any[]>;
     readonly resizeStream: Subject<Event>;