@koobiq/components 18.12.1 → 18.13.0

package/alert/alert-tokens.scss

@@ -58,16 +58,16 @@
     --kbq-alert-colored-contrast-container-background: var(--kbq-background-contrast-fade);
     --kbq-alert-colored-contrast-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-contrast-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-error-container-background: var(--kbq-background-error-fade);
+    --kbq-alert-colored-error-container-background: var(--kbq-background-error-less);
     --kbq-alert-colored-error-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-error-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-warning-container-background: var(--kbq-background-warning-fade);
+    --kbq-alert-colored-warning-container-background: var(--kbq-background-warning-less);
     --kbq-alert-colored-warning-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-warning-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-success-container-background: var(--kbq-background-success-fade);
+    --kbq-alert-colored-success-container-background: var(--kbq-background-success-less);
     --kbq-alert-colored-success-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-success-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-colored-theme-container-background: var(--kbq-background-theme-fade);
+    --kbq-alert-colored-theme-container-background: var(--kbq-background-theme-less);
     --kbq-alert-colored-theme-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-colored-theme-container-text: var(--kbq-foreground-contrast);
 }

package/breadcrumbs/breadcrumbs-tokens.scss

@@ -0,0 +1,9 @@
+:where(.kbq-breadcrumbs) {
+    --kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);
+    --kbq-breadcrumb-item-height: var(--kbq-size-3xl);
+    --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);
+    --kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);
+    --kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-breadcrumbs-gap: 0;
+}

package/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,117 @@
+import { AfterContentInit, InjectionToken, OnInit, Provider, QueryList, TemplateRef } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/roving-focus";
+export type KbqBreadcrumbsConfiguration = {
+    /**
+     * Specifies the maximum number of breadcrumb items to display.
+     * - If a number is provided, only that many items will be shown.
+     * - If `null`, no limit is applied, and all breadcrumb items are displayed.
+     */
+    max: number | null;
+    size: KbqDefaultSizes;
+};
+/** Breadcrumbs options global configuration provider. */
+export declare const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
+/** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
+export declare const provideKbqBreadcrumbsConfiguration: (configuration: KbqBreadcrumbsConfiguration) => Provider;
+export declare class KbqBreadcrumbsSeparator {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbsSeparator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbsSeparator, "ng-template[kbqBreadcrumbsSeparator]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to style and configure buttons used as breadcrumb items.
+ * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
+ * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
+ */
+export declare class KbqBreadcrumbButton implements OnInit {
+    private readonly button;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+}
+/**
+ * Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef
+ *
+ */
+export declare class KbqBreadcrumbView {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbView, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbView, "[kbqBreadcrumbView]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Component represents an individual breadcrumb item with optional support for router navigation and styling.
+ */
+export declare class KbqBreadcrumbItem {
+    /**
+     * The text displayed for the breadcrumb item.
+     * This text will be shown if breadcrumb item is hidden in dropdown.
+     */
+    text: string;
+    /**
+     * Indicates whether the breadcrumb item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Indicates whether the breadcrumb item is the current/active item.
+     * Defaults to `false`.
+     */
+    current: boolean;
+    /**
+     * A reference to a custom template provided for the breadcrumb item content.
+     * The template can be used to override the default appearance of the breadcrumb.
+     */
+    customTemplateRef: TemplateRef<any>;
+    /**
+     * An optional `RouterLink` instance for navigating to a specific route.
+     * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
+     */
+    readonly routerLink: RouterLink | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbItem, "kbq-breadcrumb-item", never, { "text": { "alias": "text"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "current": { "alias": "current"; "required": false; }; }, {}, ["customTemplateRef"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_current: unknown;
+}
+export declare class KbqBreadcrumbs implements AfterContentInit {
+    protected readonly configuration: KbqBreadcrumbsConfiguration;
+    /**
+     * Size of the breadcrumbs. Affects font size.
+     * Default value is taken from the global configuration.
+     */
+    size: KbqDefaultSizes;
+    /**
+     * Maximum number of visible breadcrumb items.
+     * Remaining items are collapsed into a dropdown if the total exceeds this value.
+     * Default value is taken from the global configuration.
+     */
+    max: number | null;
+    /**
+     * Indicates whether the breadcrumbs are disabled.
+     * When disabled, user interactions are blocked.
+     */
+    disabled: boolean;
+    protected readonly separator?: TemplateRef<any>;
+    protected readonly items: QueryList<KbqBreadcrumbItem>;
+    /**
+     * Ensures at least minimum number of breadcrumb items are shown.
+     *
+     * This prevents the appearance of unnecessary expand button that would hide only a single breadcrumb.
+     */
+    readonly minVisibleItems = 2;
+    private readonly destroyRef;
+    private readonly cdr;
+    protected readonly KbqComponentColors: typeof KbqComponentColors;
+    protected readonly KbqButtonStyles: typeof KbqButtonStyles;
+    protected readonly PopUpPlacements: typeof PopUpPlacements;
+    /** @docs-private */
+    protected get hiddenBreadcrumbItems(): KbqBreadcrumbItem[];
+    /** @docs-private */
+    protected get visibleBreadcrumbItems(): KbqBreadcrumbItem[];
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/breadcrumbs/breadcrumbs.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./breadcrumbs";
+export declare class KbqBreadcrumbsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBreadcrumbsModule, never, [typeof i1.KbqBreadcrumbs, typeof i1.KbqBreadcrumbItem, typeof i1.KbqBreadcrumbView, typeof i1.KbqBreadcrumbsSeparator, typeof i1.KbqBreadcrumbButton], [typeof i1.KbqBreadcrumbs, typeof i1.KbqBreadcrumbItem, typeof i1.KbqBreadcrumbView, typeof i1.KbqBreadcrumbsSeparator, typeof i1.KbqBreadcrumbButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqBreadcrumbsModule>;
+}

package/breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,149 @@
+@use '../core/styles/common/tokens';
+@use '../core/styles/common/vendor-prefixes';
+
+.kbq-breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: var(--kbq-breadcrumbs-gap);
+
+    .kbq-breadcrumb-item {
+        &.kbq-button,
+        &.kbq-button-icon {
+            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
+            --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+            --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
+            --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);
+            --kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);
+            --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color);
+
+            &[aria-current='page'] {
+                --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast);
+
+                &.kbq-disabled {
+                    --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(
+                        --kbq-breadcrumb-item-icon-color
+                    );
+                    --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(
+                        --kbq-breadcrumb-item-icon-color
+                    );
+                }
+            }
+        }
+
+        &.kbq-dropdown-trigger {
+            &.kbq-button,
+            &.kbq-button-icon {
+                &:not(.kbq-disabled) {
+                    &:hover,
+                    &.kbq-hover,
+                    &.cdk-keyboard-focused {
+                        .kbq-icon {
+                            --kbq-button-transparent-contrast-fade-on-left-icon: var(
+                                --kbq-states-icon-contrast-fade-hover
+                            );
+                            --kbq-button-transparent-contrast-fade-on-right-icon: var(
+                                --kbq-states-icon-contrast-fade-hover
+                            );
+                        }
+                    }
+
+                    &:active,
+                    &.kbq-active {
+                        .kbq-icon {
+                            --kbq-button-transparent-contrast-fade-on-left-icon: var(
+                                --kbq-states-icon-contrast-fade-active
+                            );
+                            --kbq-button-transparent-contrast-fade-on-right-icon: var(
+                                --kbq-states-icon-contrast-fade-active
+                            );
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .kbq-breadcrumb__expand {
+        &.kbq-button-icon {
+            --kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding);
+            --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color);
+
+            .kbq-icon {
+                --kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);
+            }
+
+            &:not(.kbq-disabled) {
+                &:hover,
+                &.kbq-hover,
+                &.cdk-keyboard-focused {
+                    .kbq-icon {
+                        --kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover);
+                    }
+                }
+
+                &:active,
+                &.kbq-active {
+                    .kbq-icon {
+                        --kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active);
+                    }
+                }
+            }
+        }
+    }
+
+    .kbq-breadcrumb_current {
+        .kbq-button,
+        .kbq-button-icon {
+            &.kbq-button_transparent.kbq-contrast {
+                --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);
+            }
+        }
+
+        color: var(--kbq-foreground-contrast);
+    }
+
+    // typography
+    .kbq-breadcrumb__separator {
+        @include vendor-prefixes.user-select(none);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+    }
+
+    &.kbq-breadcrumbs_compact {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-height: var(--kbq-size-xxl);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            }
+        }
+
+        .kbq-breadcrumb__expand {
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_normal {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_big {
+        .kbq-button,
+        .kbq-button-icon {
+            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
+        }
+    }
+}
+
+.kbq-breadcrumb-item__link-behavior {
+    text-decoration: none;
+}

package/breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/breadcrumbs/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumbs';
+export * from './breadcrumbs.module';

package/checkbox/checkbox-tokens.scss

@@ -37,7 +37,7 @@
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
     --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
-    --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
+    --kbq-checkbox-error-default-background: var(--kbq-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
     --kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
@@ -46,7 +46,7 @@
     --kbq-checkbox-error-states-checked-hover-border: transparent;
     --kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
     --kbq-checkbox-error-states-focused-border: var(--kbq-line-error);
-    --kbq-checkbox-error-states-focused-background: var(--kbq-states-background-error-less);
+    --kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);
     --kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);

package/core/common-behaviors/index.d.ts

@@ -3,5 +3,6 @@ export { CanColor, CanColorCtor, KbqComponentColors, mixinColor, ThemePalette }
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState } from './error-state';
+export { KbqDefaultSizes } from './size';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
 export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/common-behaviors/size.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Defines the available size options for Koobiq components.
+ */
+export type KbqDefaultSizes = 'compact' | 'normal' | 'big';

package/core/option/_optgroup-theme.scss

@@ -1,17 +1,18 @@
-@use '../styles/common/tokens' as *;
+@use '../styles/common/tokens';
 
 @mixin kbq-optgroup-theme() {
     .kbq-optgroup-label {
-        color: var(--kbq-foreground-contrast);
+        --kbq-optgroup-label-color: var(--kbq-foreground-contrast-secondary);
+        color: var(--kbq-optgroup-label-color);
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: var(--kbq-states-foreground-disabled);
+        --kbq-optgroup-label-color: var(--kbq-states-foreground-disabled);
     }
 }
 
 @mixin kbq-optgroup-typography() {
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles-css-variables(typography, subheading);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
     }
 }

package/core/option/optgroup.d.ts

@@ -6,6 +6,7 @@ export declare class KbqOptgroupBase {
 export declare const KbqOptgroupMixinBase: CanDisableCtor & typeof KbqOptgroupBase;
 /**
  * Component that is used to group instances of `kbq-option`.
+ * When options aren't provided as `ng-content`, used as a Group Header with styling.
  */
 export declare class KbqOptgroup extends KbqOptgroupMixinBase implements CanDisable {
     label: string;

package/core/option/optgroup.scss

@@ -4,7 +4,10 @@
 @use './optgroup-theme' as *;
 
 .kbq-optgroup-label {
-    padding-left: var(--kbq-size-m);
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-m);
 
     @include vendor-prefixes.user-select(none);
     cursor: default;

package/core/option/option-tokens.scss

@@ -4,6 +4,7 @@
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
+    --kbq-option-border-radius: var(--kbq-size-xs);
     /* LIST THEME TOKENS */
     @include list-tokens.list-theme-tokens;
 }

package/core/option/option.scss

@@ -4,6 +4,7 @@
 
 .kbq-option {
     @include common.kbq-list-item-base();
+    border-radius: var(--kbq-option-border-radius);
 
     &:not(.kbq-disabled) {
         cursor: pointer;

package/core/pop-up/constants.d.ts

@@ -38,3 +38,8 @@ export declare enum PopUpSizes {
     Normal = "medium",
     Large = "large"
 }
+/**
+ * Default value when configuring overlay in popups (Autocomplete, Datepicker, Dropdown, Select, Tags Autocomplete,
+ * Tags Input, Timezone, TreeSelect).
+ */
+export declare const defaultOffsetY: number;

package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss

@@ -37,7 +37,7 @@
     --kbq-checkbox-error-default-border: var(--kbq-line-error);
     --kbq-checkbox-error-default-color: var(--kbq-icon-white);
     --kbq-checkbox-error-default-text: var(--kbq-foreground-contrast);
-    --kbq-checkbox-error-default-background: var(--kbq-states-background-error-less);
+    --kbq-checkbox-error-default-background: var(--kbq-background-error-less);
     --kbq-checkbox-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-checkbox-error-states-hover-border: var(--kbq-line-error);
     --kbq-checkbox-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
@@ -46,7 +46,7 @@
     --kbq-checkbox-error-states-checked-hover-border: transparent;
     --kbq-checkbox-error-states-checked-hover-background: var(--kbq-states-background-error-hover);
     --kbq-checkbox-error-states-focused-border: var(--kbq-line-error);
-    --kbq-checkbox-error-states-focused-background: var(--kbq-states-background-error-less);
+    --kbq-checkbox-error-states-focused-background: var(--kbq-background-error-less);
     --kbq-checkbox-error-states-focused-outline: 1px solid var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);

package/core/styles/common/_list.scss

@@ -64,7 +64,6 @@
     gap: var(--kbq-size-s);
 
     border: var(--kbq-size-3xs) solid transparent;
-    border-radius: var(--kbq-size-border-radius);
 
     padding: var(--kbq-size-xxs) kbq-difference-series-css-variables([size-m, size-3xs]);
 

package/core/styles/theming/_theming.scss

@@ -151,9 +151,7 @@
         error-hover: map.get($tokens, '#{$scheme}-states-background-error-hover'),
         error-active: map.get($tokens, '#{$scheme}-states-background-error-active'),
         error-fade-hover: map.get($tokens, '#{$scheme}-states-background-error-fade-hover'),
-        error-fade-active: map.get($tokens, '#{$scheme}-states-background-error-fade-active'),
-        // будет удалено, после удаления из компонентов ↓
-        error-less: map.get($tokens, '#{$scheme}-states-background-error-less')
+        error-fade-active: map.get($tokens, '#{$scheme}-states-background-error-fade-active')
     );
 }
 

package/dropdown/_dropdown-theme.scss

@@ -56,6 +56,7 @@
     }
 
     .kbq-dropdown__group-header {
+        // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
         &.kbq-dropdown__group-header_small {
             color: var(--kbq-foreground-contrast-secondary);
         }
@@ -79,6 +80,7 @@
     .kbq-dropdown__group-header {
         @include kbq-typography-level-to-styles-css-variables(typography, big-strong);
 
+        // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
         &.kbq-dropdown__group-header_small {
             @include kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
         }

package/dropdown/dropdown-item.scss

@@ -2,6 +2,7 @@
 
 .kbq-dropdown-item {
     width: 100%;
+    border-radius: var(--kbq-dropdown-item-border-radius);
 
     @include common.user-select(none);
     @include common.kbq-list-item-base();
@@ -45,6 +46,7 @@
     @include common.user-select(none);
     @include common.kbq-list-header-base();
 
+    // @deprecated, use <kbq-optgroup label="Label" /> instead. Will be removed in the next major release
     &.kbq-dropdown__group-header_small {
         @include common.kbq-list-subheading-base();
     }

package/dropdown/dropdown-tokens.scss

@@ -8,6 +8,7 @@
     /* THEME TOKENS */
     --kbq-dropdown-container-background: var(--kbq-background-card);
     --kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
+    --kbq-dropdown-item-border-radius: var(--kbq-size-xs);
     /* LIST THEME TOKENS */
     @include list-tokens.list-theme-tokens;
 }

package/dropdown/dropdown.scss

@@ -15,8 +15,6 @@
 }
 
 .kbq-dropdown__panel {
-    margin-top: 2px;
-
     min-width: var(--kbq-dropdown-size-container-width-min);
     max-width: var(--kbq-dropdown-size-container-width-max);
 

package/ellipsis-center/ellipsis-center.directive.d.ts

@@ -6,6 +6,7 @@ export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implem
     private renderer;
     set kbqEllipsisCenter(value: string);
     minVisibleLength: number;
+    charWidth: number;
     readonly resizeStream: Subject<Event>;
     private _kbqEllipsisCenter;
     private resizeSubscription;
@@ -15,7 +16,7 @@ export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implem
     ngOnDestroy(): void;
     private refresh;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[kbqEllipsisCenter]", never, { "kbqEllipsisCenter": { "alias": "kbqEllipsisCenter"; "required": false; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[kbqEllipsisCenter]", never, { "kbqEllipsisCenter": { "alias": "kbqEllipsisCenter"; "required": false; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; }; "charWidth": { "alias": "charWidth"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqEllipsisCenterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqEllipsisCenterModule, never>;