@koobiq/components 19.7.0 → 19.8.0

package/accordion/accordion-content.directive.d.ts

@@ -3,6 +3,7 @@ import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
 export declare class KbqAccordionContentDirective implements AfterContentInit, AfterViewInit {
     private readonly renderer;
+    private readonly platform;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -155,7 +155,8 @@ export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlVal
     private getOverlayConfig;
     private getOverlayPosition;
     private getConnectedElement;
-    private getPanelWidth;
+    private getPanelMinWidth;
+    private getOverlaySize;
     private getHostWidth;
     /**
      * Resets the active item to -1 so arrow events will activate the

package/autocomplete/autocomplete.component.d.ts

@@ -43,6 +43,11 @@ export declare class KbqAutocomplete implements AfterContentInit {
      * match the width of its host.
      */
     panelWidth: string | number;
+    /**
+     * Minimum width of the panel in pixels.
+     * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
+     */
+    panelMinWidth: number;
     /** Event that is emitted whenever an option from the list is selected. */
     readonly optionSelected: EventEmitter<KbqAutocompleteSelectedEvent>;
     /** Event that is emitted when the autocomplete panel is opened. */
@@ -78,5 +83,6 @@ export declare class KbqAutocomplete implements AfterContentInit {
     onKeydown(event: KeyboardEvent): any;
     private updateFocusClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocomplete, [null, null, null, { optional: true; host: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
+    static ngAcceptInputType_panelMinWidth: unknown;
 }

package/code-block/_code-block-theme.scss

@@ -14,10 +14,6 @@
         background: var(--kbq-#{$base}-header-background);
     }
 
-    & .kbq-code-block__actionbar {
-        background: var(--kbq-#{$base}-actionbar-background);
-    }
-
     &.kbq-code-block_header-with-shadow {
         & .kbq-code-block__header {
             box-shadow: var(--kbq-#{$base}-header-scroll-shadow);
@@ -26,13 +22,8 @@
 
     &.kbq-code-block_hide-tabs {
         .kbq-code-block__actionbar {
-            background: transparent;
-
-            .kbq-code-block__actionbar__fade-gradient {
-                background: var(--kbq-#{$base}-actionbar-fade-gradient);
-            }
-
             .kbq-code-block__actionbar__button-stack {
+                border-color: var(--kbq-#{$base}-actionbar-border-color);
                 background: var(--kbq-#{$base}-actionbar-background);
             }
         }

package/code-block/code-block-highlight.d.ts

@@ -1,6 +1,49 @@
 import { InjectionToken, Provider } from '@angular/core';
+import type { HLJSApi, LanguageFn } from 'highlight.js';
 import { KbqCodeBlockFile } from './types';
 import * as i0 from "@angular/core";
+/** `highlight.js` configuration */
+export type KbqCodeBlockHighlightJsConfig = Partial<{
+    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    core: () => Promise<{
+        default: HLJSApi;
+    }>;
+    /** Map of language name to lazy loader for that language's LanguageFn. */
+    languages: Record<string, () => Promise<{
+        default: LanguageFn;
+    }>>;
+}>;
+/**
+ * Injection token for configuring `KbqCodeBlockHighlightJsConfig`.
+ */
+export declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
+    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    core: () => Promise<{
+        default: HLJSApi;
+    }>;
+    /** Map of language name to lazy loader for that language's LanguageFn. */
+    languages: Record<string, () => Promise<{
+        default: LanguageFn;
+    }>>;
+}>>;
+/**
+ * Utility provider for `KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG`.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   kbqCodeBlockHighlightJsConfigProvider({
+ *     core: () => import('highlight.js/lib/core'),
+ *     languages: {
+ *       typescript: () => import('highlight.js/lib/languages/typescript'),
+ *       css: () => import('highlight.js/lib/languages/css'),
+ *       html: () => import('highlight.js/lib/languages/xml')
+ *     }
+ *   })
+ * ]
+ * ```
+ */
+export declare const kbqCodeBlockHighlightJsConfigProvider: (options: KbqCodeBlockHighlightJsConfig) => Provider;
 /**
  * Fallback language for code block if language is not supported/specified.
  *
@@ -10,7 +53,11 @@ import * as i0 from "@angular/core";
 export declare const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
 export declare const kbqCodeBlockFallbackFileLanguageProvider: (language: string) => Provider;
-/** Directive which applies syntax highlighting to the code block content. */
+/**
+ * Directive which applies syntax highlighting to the code block content.
+ *
+ * @docs-private
+ */
 export declare class KbqCodeBlockHighlight {
     private readonly nativeElement;
     private readonly document;
@@ -18,18 +65,25 @@ export declare class KbqCodeBlockHighlight {
     private readonly domSanitizer;
     private readonly fallbackFileLanguage;
     private readonly window;
+    private readonly config;
+    private hljs;
+    private readonly _pending;
+    /**
+     * Whether syntax highlighting is pending.
+     *
+     * @docs-private
+     */
+    readonly pending: import("@angular/core").Signal<boolean>;
     /** The code file. */
     set file(file: KbqCodeBlockFile);
     /** The starting line number. */
     startFrom: number;
     /** Whether to display line numbers for single line code block. */
     singleLine: boolean;
-    constructor();
+    private load;
+    private highlight;
     private warn;
-    /**
-     * Initialize the HighlightJS line numbers plugin. This method is called once when
-     * the component is constructed.
-     */
+    /** Initialize the HighlightJS line numbers plugin after the hljs instance is available. */
     private initLineNumbersPlugin;
     /**
      * This method is not intended for editing.
@@ -38,7 +92,7 @@ export declare class KbqCodeBlockHighlight {
      */
     private highlightJSLineNumbersPlugin;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockHighlight, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", never, { "file": { "alias": "file"; "required": true; }; "startFrom": { "alias": "startFrom"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", ["kbqCodeBlockHighlight"], { "file": { "alias": "file"; "required": true; }; "startFrom": { "alias": "startFrom"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_startFrom: unknown;
     static ngAcceptInputType_singleLine: unknown;
 }

package/code-block/code-block-tokens.scss

@@ -11,7 +11,6 @@
     --kbq-code-block-size-no-header-content-content-gap-horizontal: var(--kbq-size-m);
     --kbq-code-block-size-header-content-gap-horizontal: var(--kbq-size-l);
     --kbq-code-block-size-actionbar-content-gap-horizontal: var(--kbq-size-3xs);
-    --kbq-code-block-size-actionbar-fade-gradient-width: var(--kbq-size-3xl);
     --kbq-code-block-size-collapse-expanded-padding-top: 0;
     --kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);
     --kbq-code-block-size-collapse-collapsed-padding-top: var(--kbq-size-3xl);
@@ -119,16 +118,12 @@
     --kbq-code-block-font-hljs-variable-language-font-style: null;
     --kbq-code-block-font-hljs-variable-language-font-weight: null;
     /* THEME TOKENS */
-    --kbq-code-block-filled-container-background: var(--kbq-background-bg-secondary);
+    --kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);
     --kbq-code-block-filled-container-border-color: transparent;
-    --kbq-code-block-filled-header-background: var(--kbq-background-bg-secondary);
+    --kbq-code-block-filled-header-background: transparent;
     --kbq-code-block-filled-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
-    --kbq-code-block-filled-actionbar-fade-gradient: linear-gradient(
-        90deg,
-        transparent,
-        var(--kbq-background-bg-secondary)
-    );
-    --kbq-code-block-filled-actionbar-background: var(--kbq-background-bg-secondary);
+    --kbq-code-block-filled-actionbar-background: var(--kbq-background-card);
+    --kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);
     --kbq-code-block-filled-collapse-expanded-background: transparent;
     --kbq-code-block-filled-collapse-collapsed-background: linear-gradient(
         180deg,
@@ -140,8 +135,8 @@
     --kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
     --kbq-code-block-outline-header-background: var(--kbq-background-card);
     --kbq-code-block-outline-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
-    --kbq-code-block-outline-actionbar-fade-gradient: linear-gradient(90deg, transparent, var(--kbq-background-card));
     --kbq-code-block-outline-actionbar-background: var(--kbq-background-card);
+    --kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);
     --kbq-code-block-outline-collapse-expanded-background: transparent;
     --kbq-code-block-outline-collapse-collapsed-background: linear-gradient(
         180deg,

package/code-block/code-block.d.ts

@@ -1,4 +1,4 @@
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { CdkScrollable, ExtendedScrollToOptions } from '@angular/cdk/scrolling';
 import { AfterViewInit, EventEmitter, InjectionToken, Provider, TemplateRef } from '@angular/core';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
@@ -24,9 +24,15 @@ export declare class KbqCodeBlock implements AfterViewInit {
     private readonly copyButtonTooltip?;
     /**
      * Reference to the scrollable code content.
+     *
+     * @deprecated Use `scrollTo` method instead.
+     *
+     * @docs-private
      */
     readonly scrollableCodeContent: CdkScrollable;
     /** @docs-private */
+    private readonly highlight;
+    /** @docs-private */
     protected readonly tabLinkTemplate: TemplateRef<KbqTabLinkTemplateContext>;
     /** Whether to display line numbers. */
     lineNumbers: boolean;
@@ -129,6 +135,7 @@ export declare class KbqCodeBlock implements AfterViewInit {
      */
     protected readonly buttonStyle: typeof KbqButtonStyles;
     private readonly elementRef;
+    private readonly injector;
     private readonly changeDetectorRef;
     private readonly localeService;
     private readonly destroyRef;
@@ -155,6 +162,8 @@ export declare class KbqCodeBlock implements AfterViewInit {
      * will be displayed.
      */
     toggleViewAll(): void;
+    /** Scrolls the code content to the specified position. */
+    scrollTo(options: ExtendedScrollToOptions): void;
     /**
      * Toggles `softWrap` property.
      *

package/code-block/code-block.scss

@@ -38,11 +38,6 @@
             display: flex;
             gap: var(--kbq-code-block-size-actionbar-content-gap-horizontal);
         }
-
-        .kbq-code-block__actionbar__fade-gradient {
-            align-self: stretch;
-            width: var(--kbq-code-block-size-actionbar-fade-gradient-width);
-        }
     }
 
     &:has(.kbq-code-block__view-all) {
@@ -140,8 +135,14 @@
             display: none;
             position: absolute;
             top: 0;
-            right: var(--kbq-size-m);
-            padding: var(--kbq-size-s) 0 var(--kbq-size-s) var(--kbq-size-m);
+            right: 0;
+            margin: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-s) 0;
+
+            .kbq-code-block__actionbar__button-stack {
+                border-width: 1px;
+                border-style: solid;
+                border-radius: calc(var(--kbq-size-border-radius) + 1px);
+            }
         }
 
         .kbq-code-block__main {

package/core/forms/forms-tokens.scss

@@ -10,6 +10,6 @@
     --kbq-forms-size-vertical-legend-margin-top: var(--kbq-size-3xl);
     --kbq-forms-size-vertical-legend-margin-bottom: var(--kbq-size-m);
     /* THEME TOKENS */
-    --kbq-forms-label: var(--kbq-foreground-contrast);
+    --kbq-forms-label: var(--kbq-foreground-contrast-secondary);
     --kbq-forms-legend: var(--kbq-foreground-contrast);
 }

package/core/option/option.d.ts

@@ -47,13 +47,14 @@ export declare abstract class KbqOptionBase {
 export declare class KbqVirtualOption extends KbqOptionBase {
     value: any;
     private _disabled;
+    private readonly _viewValue?;
     get disabled(): any;
     set disabled(value: any);
     get selected(): boolean;
     private _selected;
     get viewValue(): string;
     readonly onSelectionChange: EventEmitter<KbqOptionSelectionChange<KbqVirtualOption>>;
-    constructor(value: any, _disabled?: boolean);
+    constructor(value: any, _disabled?: boolean, _viewValue?: string | undefined);
     select(): void;
     deselect(): void;
 }

package/core/styles/common/_groups-mixins.scss

@@ -20,7 +20,7 @@
     border-top-left-radius: $radius;
 }
 
-@mixin group($item-selector: kbq-group-item) {
+@mixin group($item-selector: '.kbq-group-item') {
     & {
         display: flex;
         flex-direction: row;
@@ -49,7 +49,7 @@
     }
 }
 
-@mixin vertical-group($item-selector: kbq-group-item) {
+@mixin vertical-group($item-selector: '.kbq-group-item') {
     & {
         display: flex;
         flex-direction: column;

package/core/styles/common/_groups.scss

@@ -32,19 +32,19 @@
     @include groups-mixins.group();
 
     & > .kbq-group-item:first-child:not(:last-child) {
-        > .kbq-form-field__container {
+        .kbq-form-field__container {
             @include border-right-radius(0);
         }
     }
 
     & > .kbq-group-item:last-child:not(:first-child) {
-        > .kbq-form-field__container {
+        .kbq-form-field__container {
             @include border-left-radius(0);
         }
     }
 
     & > .kbq-group-item:not(:first-child):not(:last-child) {
-        > .kbq-form-field__container {
+        .kbq-form-field__container {
             border-radius: 0;
         }
     }
@@ -55,19 +55,19 @@
 
     > .kbq-group-item {
         &:first-child:not(:last-child) {
-            > .kbq-form-field__container {
+            .kbq-form-field__container {
                 @include border-bottom-radius(0);
             }
         }
 
         &:last-child:not(:first-child) {
-            > .kbq-form-field__container {
+            .kbq-form-field__container {
                 @include border-top-radius(0);
             }
         }
 
         &:not(:first-child):not(:last-child) {
-            > .kbq-form-field__container {
+            .kbq-form-field__container {
                 border-radius: 0;
             }
         }

package/dropdown/dropdown-item.scss

@@ -16,12 +16,15 @@
     align-items: flex-start;
     text-decoration: none;
 
-    & > .kbq-icon:first-child:before {
-        align-self: center;
-        display: flex;
-        height: var(--kbq-size-xl);
-        width: 16px;
-        align-items: center;
+    & > .kbq-icon:first-child {
+        &:before,
+        & > svg {
+            align-self: center;
+            display: flex;
+            height: var(--kbq-size-xl);
+            width: 16px;
+            align-items: center;
+        }
     }
 
     & .kbq-dropdown-item__caption {

package/dropdown/dropdown-tokens.scss

@@ -1,7 +1,7 @@
 @use '../list/list-tokens';
 
 .kbq-dropdown__panel {
-    --kbq-dropdown-size-container-width-min: var(--kbq-size-7xl);
+    --kbq-dropdown-size-container-width-min: 200px;
     --kbq-dropdown-size-container-width-max: 640px;
     --kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-dropdown-size-container-border-radius: var(--kbq-size-s);

package/dropdown/dropdown-trigger.directive.d.ts

@@ -45,6 +45,12 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     /** Data to be passed along to any lazily-rendered content. */
     data: any;
     openByArrowDown: boolean;
+    /**
+     * Whether to demote the overlay container z-index so that dropdown overlays
+     * sit below sibling overlays (tooltips, modals, etc.). Set to `false` to
+     * keep the dropdown overlay at the default overlay container z-index.
+     */
+    demoteOverlay: boolean;
     /**
      * Whether focus should be restored when the menu is closed.
      * Note that disabling this option can have accessibility implications
@@ -143,7 +149,8 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private addClassToOverlayContainer;
     private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownTrigger, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownTrigger, "[kbqDropdownTriggerFor]", ["kbqDropdownTrigger"], { "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "data": { "alias": "kbqDropdownTriggerData"; "required": false; }; "openByArrowDown": { "alias": "openByArrowDown"; "required": false; }; "restoreFocus": { "alias": "kbqDropdownTriggerRestoreFocus"; "required": false; }; "dropdown": { "alias": "kbqDropdownTriggerFor"; "required": false; }; }, { "dropdownOpened": "dropdownOpened"; "dropdownClosed": "dropdownClosed"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownTrigger, "[kbqDropdownTriggerFor]", ["kbqDropdownTrigger"], { "offsetX": { "alias": "offsetX"; "required": false; }; "offsetY": { "alias": "offsetY"; "required": false; }; "data": { "alias": "kbqDropdownTriggerData"; "required": false; }; "openByArrowDown": { "alias": "openByArrowDown"; "required": false; }; "demoteOverlay": { "alias": "demoteOverlay"; "required": false; }; "restoreFocus": { "alias": "kbqDropdownTriggerRestoreFocus"; "required": false; }; "dropdown": { "alias": "kbqDropdownTriggerFor"; "required": false; }; }, { "dropdownOpened": "dropdownOpened"; "dropdownClosed": "dropdownClosed"; }, never, never, true, never>;
     static ngAcceptInputType_offsetX: unknown;
     static ngAcceptInputType_offsetY: unknown;
+    static ngAcceptInputType_demoteOverlay: unknown;
 }

package/dropdown/dropdown.component.d.ts

@@ -5,7 +5,7 @@ import { AfterContentInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit,
 import { Observable, Subject } from 'rxjs';
 import { KbqDropdownContent } from './dropdown-content.directive';
 import { KbqDropdownItem } from './dropdown-item.component';
-import { DropdownPositionX, DropdownPositionY, KbqDropdownDefaultOptions, KbqDropdownPanel } from './dropdown.types';
+import { KbqDropdownDefaultOptions, KbqDropdownPanel, KbqDropdownPositionX, KbqDropdownPositionY } from './dropdown.types';
 import * as i0 from "@angular/core";
 export declare class KbqDropdownStaticContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownStaticContent, never>;
@@ -18,11 +18,11 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
     private search?;
     navigationWithWrap: boolean;
     /** Position of the dropdown in the X axis. */
-    get xPosition(): DropdownPositionX;
-    set xPosition(value: DropdownPositionX);
+    get xPosition(): KbqDropdownPositionX;
+    set xPosition(value: KbqDropdownPositionX);
     /** Position of the dropdown in the Y axis. */
-    get yPosition(): DropdownPositionY;
-    set yPosition(value: DropdownPositionY);
+    get yPosition(): KbqDropdownPositionY;
+    set yPosition(value: KbqDropdownPositionY);
     /** Whether the dropdown should overlap its trigger vertically. */
     get overlapTriggerY(): boolean;
     set overlapTriggerY(value: boolean);
@@ -105,7 +105,7 @@ export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel,
      * @param posY Position of the dropdown along the y axis.
      * @docs-private
      */
-    setPositionClasses(posX?: DropdownPositionX, posY?: DropdownPositionY): void;
+    setPositionClasses(posX?: KbqDropdownPositionX, posY?: KbqDropdownPositionY): void;
     /** Starts the enter animation. */
     startAnimation(): void;
     /** Resets the panel animation to its initial state. */

package/dropdown/dropdown.scss

@@ -35,7 +35,7 @@
     overflow-x: hidden;
     overflow-y: auto;
 
-    min-width: var(--kbq-dropdown-size-container-width-min);
+    min-width: max(var(--kbq-dropdown-size-container-width-min), 100%);
     max-width: var(--kbq-dropdown-size-container-width-max);
 
     border-radius: var(--kbq-dropdown-size-container-border-radius);

package/dropdown/dropdown.types.d.ts

@@ -3,8 +3,20 @@ import { Direction } from '@angular/cdk/bidi';
 import { EventEmitter, InjectionToken, QueryList, TemplateRef } from '@angular/core';
 import { KbqDropdownContent } from './dropdown-content.directive';
 import { KbqDropdownItem } from './dropdown-item.component';
-export type DropdownPositionX = 'before' | 'after';
-export type DropdownPositionY = 'above' | 'below';
+/** Position of the dropdown panel along the x-axis. */
+export type KbqDropdownPositionX = 'before' | 'after' | 'center';
+/**
+ * @deprecated Use `KbqDropdownPositionX` instead.
+ * @docs-private
+ */
+export type DropdownPositionX = KbqDropdownPositionX;
+/** Position of the dropdown panel along the y-axis. */
+export type KbqDropdownPositionY = 'above' | 'below';
+/**
+ * @deprecated Use `KbqDropdownPositionY` instead.
+ * @docs-private
+ */
+export type DropdownPositionY = KbqDropdownPositionY;
 /** Reason why the menu was closed. */
 export type DropdownCloseReason = void | 'click' | 'keydown' | 'tab';
 /**
@@ -12,8 +24,8 @@ export type DropdownCloseReason = void | 'click' | 'keydown' | 'tab';
  * @docs-private
  */
 export interface KbqDropdownPanel {
-    xPosition: DropdownPositionX;
-    yPosition: DropdownPositionY;
+    xPosition: KbqDropdownPositionX;
+    yPosition: KbqDropdownPositionY;
     overlapTriggerX: boolean;
     overlapTriggerY: boolean;
     templateRef: TemplateRef<any>;
@@ -27,14 +39,14 @@ export interface KbqDropdownPanel {
     items: QueryList<KbqDropdownItem>;
     focusFirstItem(origin?: FocusOrigin): void;
     resetActiveItem(): void;
-    setPositionClasses?(x: DropdownPositionX, y: DropdownPositionY): void;
+    setPositionClasses?(x: KbqDropdownPositionX, y: KbqDropdownPositionY): void;
 }
 /** Default `kbq-dropdown` options that can be overridden. */
 export interface KbqDropdownDefaultOptions {
     /** The x-axis position of the dropdown. */
-    xPosition: DropdownPositionX;
+    xPosition: KbqDropdownPositionX;
     /** The y-axis position of the dropdown. */
-    yPosition: DropdownPositionY;
+    yPosition: KbqDropdownPositionY;
     /** Whether the dropdown should overlap the dropdown trigger horizontally. */
     overlapTriggerX: boolean;
     /** Whether the dropdown should overlap the dropdown trigger vertically. */