@koobiq/components 18.35.0 → 18.37.0

package/core/locales/ru-RU.d.ts

@@ -98,4 +98,66 @@ export declare const ruRULocaleData: {
             collapseButton: string;
         };
     };
+    searchExpandable: {
+        tooltip: string;
+        placeholder: string;
+    };
+    appSwitcher: {
+        searchPlaceholder: string;
+        searchEmptyResult: string;
+        sitesHeader: string;
+    };
+    timeRange: {
+        title: {
+            for: string;
+            placeholder: string;
+        };
+        editor: {
+            from: string;
+            to: string;
+            apply: string;
+            cancel: string;
+            rangeLabel: string;
+            allTime: string;
+            currentQuarter: string;
+            currentYear: string;
+        };
+        durationTemplate: {
+            title: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+            option: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+        };
+    };
+    notificationCenter: {
+        notifications: string;
+        remove: string;
+        doNotDisturb: string;
+        showPopUpNotifications: string;
+        noNotifications: string;
+        failedToLoadNotifications: string;
+        repeat: string;
+    };
 };

package/core/locales/tk-TM.d.ts

@@ -98,4 +98,66 @@ export declare const tkTMLocaleData: {
             collapseButton: string;
         };
     };
+    searchExpandable: {
+        tooltip: string;
+        placeholder: string;
+    };
+    appSwitcher: {
+        searchPlaceholder: string;
+        searchEmptyResult: string;
+        sitesHeader: string;
+    };
+    timeRange: {
+        title: {
+            for: string;
+            placeholder: string;
+        };
+        editor: {
+            from: string;
+            to: string;
+            apply: string;
+            cancel: string;
+            rangeLabel: string;
+            allTime: string;
+            currentQuarter: string;
+            currentYear: string;
+        };
+        durationTemplate: {
+            title: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+            option: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+        };
+    };
+    notificationCenter: {
+        notifications: string;
+        remove: string;
+        doNotDisturb: string;
+        showPopUpNotifications: string;
+        noNotifications: string;
+        failedToLoadNotifications: string;
+        repeat: string;
+    };
 };

package/core/locales/types.d.ts

@@ -1,3 +1,4 @@
+import { FormatterDurationTemplate } from '@koobiq/date-formatter';
 /** Locale configuration for `KbqCodeBlockModule`. */
 export type KbqCodeBlockLocaleConfiguration = {
     softWrapOnTooltip: string;
@@ -34,3 +35,24 @@ export type KbqClampedTextLocaleConfig = {
     openText: string;
     closeText: string;
 };
+/** Locale configuration for `KbqTimeRange` */
+export type KbqTimeRangeLocaleConfig = {
+    title: {
+        for: string;
+        placeholder: string;
+    };
+    editor: {
+        from: string;
+        to: string;
+        apply: string;
+        cancel: string;
+        rangeLabel: string;
+        allTime: string;
+        currentQuarter: string;
+        currentYear: string;
+    };
+    durationTemplate: {
+        title: FormatterDurationTemplate;
+        option: FormatterDurationTemplate;
+    };
+};

package/core/navbar/rectangle-item.d.ts

@@ -2,7 +2,7 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqRectangleItem {
     protected readonly isBrowser: boolean;
-    protected readonly nativeElement: any;
+    protected readonly nativeElement: HTMLElement;
     private readonly window;
     readonly state: Subject<void>;
     get collapsed(): boolean;

package/core/option/action.d.ts

@@ -26,7 +26,7 @@ export declare class KbqOptionActionComponent implements AfterViewInit, OnDestro
     hasFocus: boolean;
     get active(): boolean;
     private readonly destroyRef;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, option: KbqOptionActionParent);
+    constructor(elementRef: ElementRef<HTMLElement>, focusMonitor: FocusMonitor, option: KbqOptionActionParent);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(origin?: FocusOrigin, options?: FocusOptions): void;

package/core/option/option.d.ts

@@ -57,7 +57,7 @@ export declare class KbqVirtualOption extends KbqOptionBase {
  * Single option inside of a `<kbq-select>` element.
  */
 export declare class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDestroy, KbqTitleTextRef {
-    private readonly element;
+    private readonly elementRef;
     private readonly changeDetectorRef;
     private readonly parent;
     readonly group: KbqOptgroup;
@@ -98,9 +98,10 @@ export declare class KbqOption extends KbqOptionBase implements AfterViewChecked
     get active(): boolean;
     private _active;
     private mostRecentViewValue;
-    constructor(element: ElementRef, changeDetectorRef: ChangeDetectorRef, parent: KbqOptionParentComponent, group: KbqOptgroup);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: KbqOptionParentComponent, group: KbqOptgroup);
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
     getHeight(): number;
     select(emitEvent?: boolean): void;
     deselect(emitEvent?: boolean): void;

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

@@ -30,7 +30,8 @@ export declare enum PopUpTriggers {
     Click = "click",
     Focus = "focus",
     Hover = "hover",
-    Keydown = "keydown"
+    Keydown = "keydown",
+    Program = "program"
 }
 export declare enum PopUpSizes {
     Small = "small",

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

@@ -11,7 +11,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     readonly hovered: BehaviorSubject<boolean>;
     protected readonly scheduler: AsyncScheduler | undefined;
     protected readonly overlay: Overlay;
-    protected readonly elementRef: ElementRef;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly ngZone: NgZone;
     protected readonly scrollDispatcher: ScrollDispatcher;
     protected readonly hostView: ViewContainerRef;
@@ -61,8 +61,8 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     updatePlacement(value: PopUpPlacements): void;
     updatePlacementPriority(value: any): void;
     updateVisible(externalValue: boolean): void;
-    handleKeydown(event: KeyboardEvent): void;
-    handleTouchend(): void;
+    keydownHandler(event: KeyboardEvent): void;
+    touchendHandler(): void;
     show(delay?: number): void;
     hide: (delay?: number) => void;
     detach: () => void;

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

@@ -6,7 +6,7 @@ import { KbqPopUpTrigger } from './pop-up-trigger';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUp implements OnDestroy {
     protected readonly renderer: Renderer2;
-    protected readonly elementRef: ElementRef<any>;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     readonly destroyRef: DestroyRef;
     /** Stream that emits when the popup item is hovered. */
@@ -20,6 +20,7 @@ export declare abstract class KbqPopUp implements OnDestroy {
     classMap: {};
     warning: boolean;
     arrow: boolean;
+    defaultPaddings: boolean;
     offset: number | null;
     visibility: PopUpVisibility;
     visibleChange: EventEmitter<boolean>;

package/core/select/common.d.ts

@@ -7,8 +7,10 @@ export declare class KbqSelectTrigger {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
 }
 export declare class KbqSelectMatcher {
+    useDefaultHandlers: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, { "useDefaultHandlers": { "alias": "useDefaultHandlers"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_useDefaultHandlers: unknown;
 }
 export declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
@@ -51,4 +53,7 @@ export declare abstract class KbqAbstractSelect {
     protected calculateOverlayOffsetX(baseOffsetX: number): number[];
     protected getOverlayRect(): DOMRect;
     protected resetOverlay(): void;
+    protected resolveSearchMinOptionsThreshold(value?: 'auto' | number): number | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAbstractSelect, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAbstractSelect, never, never, {}, {}, never, never, false, never>;
 }

package/core/select/constants.d.ts

@@ -1,5 +1,10 @@
 import { Overlay, RepositionScrollStrategy, ScrollStrategy } from '@angular/cdk/overlay';
 import { InjectionToken } from '@angular/core';
+/**
+ * Minimum option count threshold for displaying select search.
+ * Search is hidden when fewer options are available.
+ */
+export declare const KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD = 10;
 /**
  * The select panel will only "fit" inside the viewport if it is positioned at
  * this value or more away from the viewport boundary.

package/core/styles/common/_select.scss

@@ -131,6 +131,11 @@
         }
     }
 
+    & kbq-select-trigger,
+    & [kbq-select-trigger] {
+        width: 100%;
+    }
+
     .kbq-select__arrow-wrapper {
         display: flex;
         align-self: center;
@@ -222,3 +227,23 @@
 
     padding: var(--kbq-size-xxs) var(--kbq-size-l);
 }
+
+@mixin item-active-area($outline) {
+    position: relative;
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: '';
+        width: var(--kbq-size-xxs);
+        height: calc(100% + $outline * 2); // outline size * 2
+    }
+
+    &:before {
+        right: calc(100% + $outline); // outline size
+    }
+
+    &:after {
+        left: calc(100% + $outline); // outline size
+    }
+}

package/core/styles/typography/_typography.scss

@@ -1,9 +1,5 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use 'sass:map';
-
 @use 'typography-utils' as *;
-
 @use '../common/tokens' as *;
 
 // TODO: REMOVE
@@ -298,105 +294,50 @@
     .kbq-italic-compact-strong {
         @include kbq-typography-level-to-styles-css-variables(typography, italic-compact-strong);
     }
-
-    [lang='zh-CN'] {
-        .kbq-text-normal-strong {
-            font-weight: var(--kbq-zh-cn-text-normal-strong-font-weight);
-        }
-
-        .kbq-mono-normal-strong {
-            font-weight: var(--kbq-zh-cn-mono-normal-strong-font-weight);
-        }
-
-        .kbq-text-compact-strong {
-            font-weight: var(--kbq-zh-cn-text-compact-strong-font-weight);
-        }
-
-        .kbq-mono-compact-strong {
-            font-weight: var(--kbq-zh-cn-mono-compact-strong-font-weight);
-        }
-    }
-
-    [lang='fa-IR'] {
-        .kbq-display-big {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-display-normal {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-display-compact {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-title {
-            font-family: var(--kbq-font-fa-ir-accent);
-        }
-
-        .kbq-subheading {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-normal {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-tabular-normal {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-normal-strong {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-caps-normal {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-compact {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-tabular-compact {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-text-compact-strong {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-
-        .kbq-caps-compact {
-            font-family: var(--kbq-font-fa-ir-base);
-        }
-    }
 }
 
 @mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
-        .md-h#{$i} {
+        // DEPRECATED: .md-h# class is deprecated, use .kbq-md-h# instead
+        .md-h#{$i},
+        .kbq-md-h#{$i} {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
-    .md-body {
+    // DEPRECATED: .md-body class is deprecated, use .kbq-md-body instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body,
+    .kbq-md-body {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
-    .md-body-mono {
+    // DEPRECATED: .md-body-mono class is deprecated, use .kbq-md-body-mono instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body-mono,
+    .kbq-md-body-mono {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
-    .md-caption {
+    // DEPRECATED: .md-caption class is deprecated, use .kbq-md-caption instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-caption,
+    .kbq-md-caption {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
-    .md-table-cell {
+    // DEPRECATED: .md-table-cell class is deprecated, use .kbq-md-table-cell instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-cell,
+    .kbq-md-table-cell {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
-    .md-table-header {
+    // DEPRECATED: .md-table-header class is deprecated, use .kbq-md-table-header instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-header,
+    .kbq-md-table-header {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }
 }

package/core/utils/dom.d.ts

@@ -1,9 +1,4 @@
-import { ElementRef } from '@angular/core';
-/**
- * Injects the ElementRef for the current component.
- */
-export declare const kbqInjectElementRef: <T = HTMLElement>() => ElementRef<T>;
 /**
  * Injects the native element for the current component.
  */
-export declare const kbqInjectNativeElement: <T = HTMLElement>() => T;
+export declare const kbqInjectNativeElement: <T extends Element = HTMLElement>() => T;

package/datepicker/datepicker-module.d.ts

@@ -13,8 +13,9 @@ import * as i11 from "@angular/cdk/portal";
 import * as i12 from "@koobiq/components/select";
 import * as i13 from "@koobiq/components/icon";
 import * as i14 from "@angular/common";
+import * as i15 from "@koobiq/components/form-field";
 export declare class KbqDatepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.KbqButtonModule, typeof i9.OverlayModule, typeof i10.A11yModule, typeof i11.PortalModule, typeof i12.KbqSelectModule, typeof i13.KbqIconModule, typeof i5.KbqDatepickerToggleIconComponent, typeof i14.NgClass, typeof i14.TitleCasePipe], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i5.KbqDatepickerToggleIconComponent, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.KbqButtonModule, typeof i9.OverlayModule, typeof i10.A11yModule, typeof i11.PortalModule, typeof i12.KbqSelectModule, typeof i13.KbqIconModule, typeof i5.KbqDatepickerToggleIconComponent, typeof i14.NgClass, typeof i14.TitleCasePipe], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i5.KbqDatepickerToggleIconComponent, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader, typeof i15.KbqFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqDatepickerModule>;
 }

package/divider/divider.scss

@@ -5,6 +5,7 @@
     margin: 0;
 
     &.kbq-divider_horizontal {
+        min-height: var(--kbq-divider-size-horizontal-width);
         height: var(--kbq-divider-size-horizontal-width);
 
         &.kbq-divider_paddings {

package/dropdown/dropdown-item.scss

@@ -1,11 +1,12 @@
-@use '../core/styles/common';
+@use '../core/styles/common/list';
+@use '../core/styles/common/vendor-prefixes';
 
 .kbq-dropdown-item {
     width: 100%;
     border-radius: var(--kbq-dropdown-item-border-radius);
 
-    @include common.user-select(none);
-    @include common.kbq-list-item-base();
+    @include vendor-prefixes.user-select(none);
+    @include list.kbq-list-item-base();
 
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -29,7 +30,7 @@
 }
 
 .kbq-dropdown-item__text {
-    @include common.kbq-list-text();
+    @include list.kbq-list-text();
 }
 
 .kbq-dropdown-item-overlay {
@@ -44,11 +45,11 @@
 }
 
 .kbq-dropdown__group-header {
-    @include common.user-select(none);
-    @include common.kbq-list-header-base();
+    @include vendor-prefixes.user-select(none);
+    @include list.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();
+        @include list.kbq-list-subheading-base();
     }
 }

package/dropdown/dropdown.component.d.ts

@@ -7,6 +7,10 @@ import { KbqDropdownContent } from './dropdown-content.directive';
 import { KbqDropdownItem } from './dropdown-item.component';
 import { DropdownPositionX, DropdownPositionY, KbqDropdownDefaultOptions, KbqDropdownPanel } from './dropdown.types';
 import * as i0 from "@angular/core";
+export declare class KbqDropdownStaticContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownStaticContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownStaticContent, "[kbqDropdownStaticContent]", never, {}, {}, never, never, true, never>;
+}
 export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel, OnInit, OnDestroy {
     private elementRef;
     private ngZone;
@@ -117,5 +121,5 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
      */
     private updateDirectDescendants;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdown, "kbq-dropdown", ["kbqDropdown"], { "navigationWithWrap": { "alias": "navigationWithWrap"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTriggerY": { "alias": "overlapTriggerY"; "required": false; }; "overlapTriggerX": { "alias": "overlapTriggerX"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent", "items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdown, "kbq-dropdown", ["kbqDropdown"], { "navigationWithWrap": { "alias": "navigationWithWrap"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "overlapTriggerY": { "alias": "overlapTriggerY"; "required": false; }; "overlapTriggerX": { "alias": "overlapTriggerX"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent", "items"], ["*", "[kbqDropdownStaticContent]"], false, never>;
 }

package/dropdown/dropdown.module.d.ts

@@ -8,6 +8,6 @@ import * as i6 from "@koobiq/components/icon";
 import * as i7 from "@angular/common";
 export declare class KbqDropdownModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDropdownModule, [typeof i1.KbqDropdown, typeof i2.KbqDropdownItem, typeof i3.KbqDropdownTrigger, typeof i4.KbqDropdownContent], [typeof i5.OverlayModule, typeof i6.KbqIconModule, typeof i7.NgClass], [typeof i1.KbqDropdown, typeof i2.KbqDropdownItem, typeof i3.KbqDropdownTrigger, typeof i4.KbqDropdownContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDropdownModule, [typeof i1.KbqDropdown, typeof i2.KbqDropdownItem, typeof i3.KbqDropdownTrigger, typeof i4.KbqDropdownContent], [typeof i5.OverlayModule, typeof i6.KbqIconModule, typeof i7.NgClass, typeof i1.KbqDropdownStaticContent], [typeof i1.KbqDropdown, typeof i2.KbqDropdownItem, typeof i3.KbqDropdownTrigger, typeof i4.KbqDropdownContent, typeof i1.KbqDropdownStaticContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqDropdownModule>;
 }

package/dropdown/dropdown.scss

@@ -1,4 +1,5 @@
 @use './dropdown-theme' as theme;
+@use '../core/styles/common/select';
 
 .kbq-dropdown-trigger {
     &.kbq-button {
@@ -50,23 +51,13 @@
         pointer-events: none;
     }
 
-    .kbq-option {
-        position: relative;
+    .kbq-dropdown-item {
+        @include select.item-active-area(var(--kbq-size-3xs));
 
         &:before,
         &:after {
-            position: absolute;
-            content: '';
-            width: var(--kbq-size-xxs);
-            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
-        }
-
-        &:before {
-            right: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
-
-        &:after {
-            left: calc(100% + var(--kbq-size-3xs)); // outline size
+            top: calc(-1 * var(--kbq-size-3xs));
+            bottom: calc(-1 * var(--kbq-size-3xs));
         }
     }
 

package/esm2022/accordion/accordion-content.mjs

@@ -3,10 +3,10 @@ import { RdxAccordionContentDirective } from '@radix-ng/primitives/accordion';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/accordion";
 export class KbqAccordionContent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqAccordionContent, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: i1.RdxAccordionContentDirective }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqAccordionContent, selector: "kbq-accordion-content, [kbq-accordion-content]", host: { classAttribute: "kbq-accordion-content" }, hostDirectives: [{ directive: i1.RdxAccordionContentDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqAccordionContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-content, [kbq-accordion-content]',

package/esm2022/accordion/accordion-header.mjs

@@ -3,10 +3,10 @@ import { RdxAccordionHeaderDirective } from '@radix-ng/primitives/accordion';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/accordion";
 export class KbqAccordionHeader {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqAccordionHeader, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { classAttribute: "kbq-accordion-header" }, hostDirectives: [{ directive: i1.RdxAccordionHeaderDirective }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqAccordionHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqAccordionHeader, selector: "kbq-accordion-header, [kbq-accordion-header]", host: { classAttribute: "kbq-accordion-header" }, hostDirectives: [{ directive: i1.RdxAccordionHeaderDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqAccordionHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqAccordionHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-header, [kbq-accordion-header]',

package/esm2022/accordion/accordion-item.mjs

@@ -3,10 +3,10 @@ import { RdxAccordionItemDirective } from '@radix-ng/primitives/accordion';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/accordion";
 export class KbqAccordionItem {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqAccordionItem, selector: "kbq-accordion-item, [kbq-accordion-item]", host: { classAttribute: "kbq-accordion-item" }, hostDirectives: [{ directive: i1.RdxAccordionItemDirective, inputs: ["expanded", "expanded", "disabled", "disabled", "value", "value"], outputs: ["closed", "closed", "opened", "opened", "expandedChange", "expandedChange"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqAccordionItem, selector: "kbq-accordion-item, [kbq-accordion-item]", host: { classAttribute: "kbq-accordion-item" }, hostDirectives: [{ directive: i1.RdxAccordionItemDirective, inputs: ["expanded", "expanded", "disabled", "disabled", "value", "value"], outputs: ["closed", "closed", "opened", "opened", "expandedChange", "expandedChange"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-accordion-item, [kbq-accordion-item]',