@koobiq/components 19.8.3 → 20.1.0

package/notification-center/notification-center.scss

@@ -78,13 +78,10 @@
         display: none;
     }
 
-    &:hover .kbq-notification-center-sub-header__button {
+    &:hover .kbq-notification-center-sub-header__button,
+    &:focus-within .kbq-notification-center-sub-header__button {
         display: flex;
     }
-
-    &:first-child.kbq-notification-center_top-overflow {
-        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
-    }
 }
 
 .kbq-notification-center-container {
@@ -94,12 +91,20 @@
 
     padding-bottom: var(--kbq-size-xl);
 
-    & .kbq-loader-overlay_parent {
-        border-radius: inherit;
+    // Smoothly reveal the just-appended "load more" spinner / error row. The row is scrolled into
+    // view via KbqScrollbar.scrollTo(), which calls a behavior-less scroll on the overlayscrollbars
+    // viewport — so `scroll-behavior` on the viewport controls the animation. Disabled for users who
+    // prefer reduced motion.
+    & [data-overlayscrollbars-viewport] {
+        scroll-behavior: smooth;
+
+        @media (prefers-reduced-motion: reduce) {
+            scroll-behavior: auto;
+        }
     }
 
-    &.kbq-notification-center_bottom-overflow {
-        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
+    & .kbq-loader-overlay_parent {
+        border-radius: inherit;
     }
 }
 

package/notification-center/notification-item.scss

@@ -13,7 +13,8 @@
     margin-left: var(--kbq-size-m);
     margin-right: var(--kbq-size-m);
 
-    &:hover {
+    &:hover,
+    &:focus-within {
         & .kbq-notification-item-time {
             visibility: hidden;
         }

package/overflow-items/index.d.ts

@@ -1,2 +1,162 @@
-export * from './module';
-export * from './overflow-items';
+import * as _angular_core from '@angular/core';
+import { KbqOrientation, KbqFlexWrap } from '@koobiq/components/core';
+
+/**
+ * Manages the visibility of the element.
+ *
+ * @docs-private
+ */
+declare class ElementVisibilityManager {
+    private readonly renderer;
+    private readonly hiddenState;
+    /**
+     * @docs-private
+     */
+    readonly element: HTMLElement;
+    /**
+     * Whether the element is hidden.
+     *
+     * @docs-private
+     */
+    readonly hidden: _angular_core.Signal<boolean>;
+    /**
+     * Hides the element.
+     *
+     * @docs-private
+     */
+    hide(): void;
+    /**
+     * Shows the element.
+     *
+     * @docs-private
+     */
+    show(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ElementVisibilityManager, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ElementVisibilityManager, never, never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive for displaying the result of hidden items by the `KbqOverflowItems` directive.
+ */
+declare class KbqOverflowItemsResult extends ElementVisibilityManager {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqOverflowItemsResult, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqOverflowItemsResult, "[kbqOverflowItemsResult]", ["kbqOverflowItemsResult"], {}, {}, never, never, true, never>;
+}
+/**
+ * Directive for the item that can be hidden by the `KbqOverflowItems` directive.
+ */
+declare class KbqOverflowItem extends ElementVisibilityManager {
+    /**
+     * Unique identifier for the item.
+     */
+    readonly id: _angular_core.InputSignal<unknown>;
+    /**
+     * Defines the order in which the item is processed in the overflow container,
+     * without changing its original position in the `QueryList`.
+     */
+    readonly order: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /**
+     * Element with this attribute will be ignored when hiding and will always remain visible.
+     * @default false
+     */
+    readonly alwaysVisible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @docs-private
+     */
+    hide(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "alwaysVisible": { "alias": "alwaysVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Directive for managing the visibility of items that overflow the container.
+ */
+declare class KbqOverflowItems {
+    private readonly element;
+    private readonly resizeObserver;
+    private readonly renderer;
+    private readonly document;
+    private readonly window;
+    private readonly platform;
+    /**
+     * `KbqOverflowItem` directive references.
+     */
+    private readonly items;
+    /**
+     * `KbqOverflowItemsResult` directive reference.
+     */
+    private readonly result;
+    /**
+     * Whether the overflow order should be reversed.
+     *
+     * @example
+     * ```
+     * [0, 1, hidden, hidden] ---> [hidden, hidden, 2, 3]
+     * ```
+     *
+     * @default false
+     */
+    readonly reverseOverflowOrder: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Debounce time for recalculating items visibility.
+     *
+     * @default 0
+     */
+    readonly debounceTime: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * List of additional elements to observe for resize changes.
+     *
+     * @default document.body
+     */
+    readonly additionalResizeObserverTargets: _angular_core.InputSignal<Element | Element[]>;
+    /**
+     * Emits when the set of hidden items changes.
+     */
+    readonly changes: _angular_core.OutputEmitterRef<ReadonlySet<unknown>>;
+    /**
+     * Set of hidden item IDs.
+     */
+    readonly hiddenItemIDs: _angular_core.Signal<ReadonlySet<unknown>>;
+    /**
+     * Defines the orientation of the overflow items.
+     *
+     * @default 'horizontal'
+     */
+    readonly orientation: _angular_core.InputSignal<KbqOrientation>;
+    /**
+     * Defines the wrap of the overflow items.
+     *
+     * @default 'nowrap'
+     */
+    readonly wrap: _angular_core.InputSignal<KbqFlexWrap>;
+    private readonly orientationConfig;
+    constructor();
+    private setupObservers;
+    /**
+     * Sort items by their `order` attribute.
+     * If an item does not have an `order` defined, its index is used as a fallback.
+     */
+    private sortItemsByOrder;
+    /**
+     * Manages the visibility of items based on the available space in the container and returns the hidden items.
+     * Direction of hiding is determined by the `reverseOverflowOrder` attribute.
+     */
+    private getHiddenItems;
+    /**
+     * This method sets the necessary styles for the directive.
+     */
+    private setStyles;
+    private hasOverflown;
+    /**
+     * @TODO Should be removed when `Array.prototype.findLast` is supported.
+     */
+    private findLast;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
+}
+
+declare class KbqOverflowItemsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqOverflowItemsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqOverflowItemsModule, never, [typeof KbqOverflowItems, typeof KbqOverflowItem, typeof KbqOverflowItemsResult], [typeof KbqOverflowItems, typeof KbqOverflowItem, typeof KbqOverflowItemsResult]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqOverflowItemsModule>;
+}
+
+export { ElementVisibilityManager, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule, KbqOverflowItemsResult };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.8.3",
+    "version": "20.1.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -21,13 +21,12 @@
     },
     "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
-        "@angular/animations": ">=19.0.0",
-        "@angular/cdk": ">=19.0.0",
-        "@angular/core": ">=19.0.0",
-        "@angular/forms": ">=19.0.0",
-        "@koobiq/cdk": "19.8.3",
-        "@koobiq/angular-moment-adapter": "19.8.3",
-        "@koobiq/angular-luxon-adapter": "19.8.3",
+        "@angular/animations": ">=20.0.0",
+        "@angular/cdk": ">=20.0.0",
+        "@angular/core": ">=20.0.0",
+        "@angular/forms": ">=20.0.0",
+        "@koobiq/angular-moment-adapter": "20.1.0",
+        "@koobiq/angular-luxon-adapter": "20.1.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"
@@ -38,7 +37,8 @@
     "ng-update": {
         "packageGroup": [
             "@koobiq/components"
-        ]
+        ],
+        "migrations": "./schematics/migrations.json"
     },
     "exports": {
         ".": {
@@ -153,6 +153,10 @@
             "types": "./filter-bar/index.d.ts",
             "default": "./fesm2022/koobiq-components-filter-bar.mjs"
         },
+        "./flag": {
+            "types": "./flag/index.d.ts",
+            "default": "./fesm2022/koobiq-components-flag.mjs"
+        },
         "./form-field": {
             "types": "./form-field/index.d.ts",
             "default": "./fesm2022/koobiq-components-form-field.mjs"
@@ -193,10 +197,6 @@
             "types": "./navbar/index.d.ts",
             "default": "./fesm2022/koobiq-components-navbar.mjs"
         },
-        "./navbar-ic": {
-            "types": "./navbar-ic/index.d.ts",
-            "default": "./fesm2022/koobiq-components-navbar-ic.mjs"
-        },
         "./notification-center": {
             "types": "./notification-center/index.d.ts",
             "default": "./fesm2022/koobiq-components-notification-center.mjs"
@@ -225,10 +225,6 @@
             "types": "./resizer/index.d.ts",
             "default": "./fesm2022/koobiq-components-resizer.mjs"
         },
-        "./risk-level": {
-            "types": "./risk-level/index.d.ts",
-            "default": "./fesm2022/koobiq-components-risk-level.mjs"
-        },
         "./scrollbar": {
             "types": "./scrollbar/index.d.ts",
             "default": "./fesm2022/koobiq-components-scrollbar.mjs"

package/popover/index.d.ts

@@ -1 +1,182 @@
-export * from './public-api';
+import { AnimationTriggerMetadata } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { AfterViewInit, TemplateRef, AfterContentInit, OnInit, DestroyRef, EventEmitter, Type, ElementRef, InjectionToken } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { Subject } from 'rxjs';
+import * as i3 from '@angular/cdk/a11y';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import * as i1 from '@angular/cdk/overlay';
+import { ScrollStrategy, OverlayConfig, CdkScrollable, Overlay } from '@angular/cdk/overlay';
+import { KbqPopUp, KbqPopUpTrigger, KbqPopUpPlacementValues, KbqStickToWindowPlacementValues, KbqPopUpSizeValues, KbqOverflowShadowContainer, KbqComponentColors } from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/button';
+import * as i4 from '@koobiq/components/icon';
+import * as i5 from '@angular/cdk/observers';
+import * as i6 from '@angular/common';
+
+declare const kbqPopoverAnimations: {
+    readonly popoverState: AnimationTriggerMetadata;
+};
+
+declare const defaultOffsetYWithArrow = 8;
+declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
+    prefix: string;
+    header: string | TemplateRef<any>;
+    footer: string | TemplateRef<any>;
+    trigger: KbqPopoverTrigger;
+    isTrapFocus: boolean;
+    hasCloseButton: boolean;
+    elementRef: ElementRef;
+    readonly cdkTrapFocus: i0.Signal<CdkTrapFocus>;
+    /** @docs-private */
+    readonly overflowContainer: i0.Signal<KbqOverflowShadowContainer | undefined>;
+    ngAfterViewInit(): void;
+    updateClassMap(placement: string, customClass: string, size: KbqPopUpSizeValues): void;
+    updateTrapFocus(isTrapFocus: boolean): void;
+    onEscape(): void;
+    protected readonly componentColors: typeof KbqComponentColors;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverComponent, "kbq-popover-component", never, {}, {}, never, never, true, never>;
+}
+declare const KBQ_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/** @docs-private */
+declare function kbqPopoverScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
+/** @docs-private */
+declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof kbqPopoverScrollStrategyFactory;
+};
+/** Creates an error to be thrown if the user supplied an invalid popover position. */
+declare function getKbqPopoverInvalidPositionError(position: string): Error;
+declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
+    private overlayContainer;
+    private renderer;
+    protected scrollStrategy: () => ScrollStrategy;
+    /** Controls whether the component should be hidden when it is not visible in the viewport. */
+    readonly hideIfNotInViewPort: i0.InputSignalWithTransform<boolean, unknown>;
+    /** prevents closure by any event */
+    preventClose: boolean;
+    /** disables default padding for all popover elements (header, content and footer) */
+    defaultPaddings: boolean;
+    get popoverVisible(): boolean;
+    set popoverVisible(value: boolean);
+    get popoverPlacement(): KbqPopUpPlacementValues;
+    set popoverPlacement(value: KbqPopUpPlacementValues);
+    get popoverPlacementPriority(): string | string[] | null;
+    set popoverPlacementPriority(value: string | string[] | null);
+    /**
+     * Additionally positions the element relative to the window side (Top, Right, Bottom and Left).
+     * If container is specified, the positioning will be relative to it.
+     * */
+    stickToWindow: KbqStickToWindowPlacementValues;
+    /** Container for additional positioning, used with kbqPopoverStickToWindow */
+    container: HTMLElement;
+    get hasBackdrop(): boolean;
+    set hasBackdrop(value: boolean);
+    private _hasBackdrop;
+    get header(): string | TemplateRef<any>;
+    set header(value: string | TemplateRef<any>);
+    private _header;
+    get content(): string | TemplateRef<any>;
+    set content(value: string | TemplateRef<any>);
+    get footer(): string | TemplateRef<any>;
+    set footer(value: string | TemplateRef<any>);
+    private _footer;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get trigger(): string;
+    set trigger(value: string);
+    private _trigger;
+    get size(): KbqPopUpSizeValues;
+    set size(value: KbqPopUpSizeValues);
+    private _size;
+    get customClass(): string;
+    set customClass(value: string);
+    /** Context for popover templates (kbqPopoverHeader, kbqPopoverContent and kbqPopoverFooter). */
+    get context(): unknown;
+    set context(ctx: unknown);
+    private _context;
+    get hasCloseButton(): boolean;
+    set hasCloseButton(value: boolean);
+    private _hasCloseButton;
+    /**
+     * Controls the behavior of closing the component on scroll.
+     * The default value is `false`.
+     * Use CloseScrollStrategy as alternative
+     */
+    get closeOnScroll(): boolean | null;
+    set closeOnScroll(value: boolean);
+    private _closeOnScroll;
+    get hasClickTrigger(): boolean;
+    /** @docs-private */
+    get instanceDestroyRef(): DestroyRef;
+    backdropClass: string;
+    arrow: boolean;
+    offset: number | null;
+    /** Delay before closing in milliseconds. The default value for kbqTrigger=PopUpTriggers.Hover is 500 ms. */
+    leaveDelay: number;
+    readonly placementChange: EventEmitter<any>;
+    readonly visibleChange: EventEmitter<boolean>;
+    protected originSelector: string;
+    protected get overlayConfig(): OverlayConfig;
+    private classAddedToOverlayContainer;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /**
+     * Overrides the base `show` method to display the overlay component with the
+     * specified entry delay and apply default positioning offsets.
+     */
+    show(delay?: number): void;
+    hide(delay?: number): void;
+    updateData(): void;
+    /** Updates the position of the current popover. */
+    updatePosition(reapplyPosition?: boolean): void;
+    getOverlayHandleComponentType(): Type<KbqPopoverComponent>;
+    updateClassMap(newPlacement?: string): void;
+    closingActionsForClick(): rxjs.Observable<MouseEvent>[];
+    defaultClosingActions(): rxjs.Observable<MouseEvent>[];
+    closingActions(): rxjs.Observable<void | CdkScrollable | MouseEvent>;
+    private hideIfScrolledOutOfView;
+    private addClassToOverlayContainer;
+    private removeClassFromOverlayContainer;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "hideIfNotInViewPort": { "alias": "hideIfNotInViewPort"; "required": false; "isSignal": true; }; "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "stickToWindow": { "alias": "kbqPopoverStickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "context": { "alias": "kbqPopoverContext"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_preventClose: unknown;
+    static ngAcceptInputType_defaultPaddings: unknown;
+    static ngAcceptInputType_arrow: unknown;
+    static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_leaveDelay: unknown;
+}
+
+declare const KBQ_POPOVER_CONFIRM_TEXT: InjectionToken<string>;
+declare const KBQ_POPOVER_CONFIRM_BUTTON_TEXT: InjectionToken<string>;
+declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
+    onConfirm: Subject<void>;
+    confirmButtonText: string;
+    confirmText: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverConfirmComponent, "kbq-popover-confirm-component", never, {}, {}, never, never, true, never>;
+}
+declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
+    readonly confirm: i0.OutputEmitterRef<void>;
+    get confirmText(): string;
+    set confirmText(value: string);
+    private _confirmText;
+    get confirmButtonText(): string;
+    set confirmButtonText(value: string);
+    private _confirmButtonText;
+    constructor();
+    updateData(): void;
+    setupButtonEvents(): void;
+    getOverlayHandleComponentType(): typeof KbqPopoverConfirmComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverConfirmTrigger, "[kbqPopoverConfirm]", ["kbqPopoverConfirm"], { "confirmText": { "alias": "kbqPopoverConfirmText"; "required": false; }; "confirmButtonText": { "alias": "kbqPopoverConfirmButtonText"; "required": false; }; }, { "confirm": "confirm"; }, never, never, true, never>;
+}
+
+declare class KbqPopoverModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPopoverModule, never, [typeof i1.OverlayModule, typeof i2.KbqButtonModule, typeof i3.A11yModule, typeof i4.KbqIconModule, typeof i5.CdkObserveContent, typeof i6.NgTemplateOutlet, typeof KbqPopoverComponent, typeof KbqPopoverTrigger, typeof KbqPopoverConfirmComponent, typeof KbqPopoverConfirmTrigger], [typeof KbqPopoverComponent, typeof KbqPopoverTrigger, typeof KbqPopoverConfirmComponent, typeof KbqPopoverConfirmTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqPopoverModule>;
+}
+
+export { KBQ_POPOVER_CONFIRM_BUTTON_TEXT, KBQ_POPOVER_CONFIRM_TEXT, KBQ_POPOVER_SCROLL_STRATEGY, KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqPopoverComponent, KbqPopoverConfirmComponent, KbqPopoverConfirmTrigger, KbqPopoverModule, KbqPopoverTrigger, defaultOffsetYWithArrow, getKbqPopoverInvalidPositionError, kbqPopoverAnimations, kbqPopoverScrollStrategyFactory };

package/popover/popover.scss

@@ -86,6 +86,9 @@ $arrow-padding: 24px;
 }
 
 .kbq-popover__header {
+    position: relative;
+    z-index: 2;
+
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -102,24 +105,17 @@ $arrow-padding: 24px;
     }
 }
 
-.kbq-popover__header_top-overflow {
-    position: relative;
-    z-index: 2;
-    box-shadow: var(--kbq-shadow-overflow-normal-bottom);
-}
-
 .kbq-popover__header_with-close-button {
     padding-right: var(--kbq-size-4xl);
 }
 
-.kbq-popover__footer.kbq-popover__footer_default-paddings {
-    padding: var(--kbq-popover-size-footer-padding-vertical) var(--kbq-popover-size-footer-padding-horizontal);
-}
-
-.kbq-popover__footer_bottom-overflow {
+.kbq-popover__footer {
     position: relative;
     z-index: 2;
-    box-shadow: var(--kbq-shadow-overflow-normal-top);
+}
+
+.kbq-popover__footer.kbq-popover__footer_default-paddings {
+    padding: var(--kbq-popover-size-footer-padding-vertical) var(--kbq-popover-size-footer-padding-horizontal);
 }
 
 .kbq-popover__arrow {