@koobiq/components 19.8.5 → 19.8.6

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

@@ -1,6 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkScrollable, ConnectedOverlayPositionChange, ConnectionPositionPair, FlexibleConnectedPositionStrategy, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { ViewportRuler } from '@angular/cdk/scrolling';
 import { DestroyRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
@@ -14,6 +15,11 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly ngZone: NgZone;
     protected readonly scrollDispatcher: ScrollDispatcher;
+    /** CDK ViewportRuler, used to re-apply the stick-to-window position on window resize.
+     * @docs-private */
+    protected readonly viewportRuler: ViewportRuler;
+    /** View container the pop-up component portal is attached to.
+     * @docs-private */
     protected readonly hostView: ViewContainerRef;
     protected readonly direction: Directionality | null;
     protected readonly destroyRef: DestroyRef;

package/core/select/constants.d.ts

@@ -10,7 +10,14 @@ export declare const KBQ_SELECT_SEARCH_MIN_OPTIONS_THRESHOLD = 10;
  * this value or more away from the viewport boundary.
  */
 export declare const SELECT_PANEL_VIEWPORT_PADDING = 8;
-/** Injection token that determines the scroll handling while a select is open. */
+/**
+ * Injection token that determines the scroll handling while a select is open.
+ *
+ * The root default keeps the select usable when it is reached outside `KbqSelectModule`'s injector - imported
+ * as a bare standalone component, pulled in through another standalone component (`KbqTimezoneSelect`,
+ * `KbqCalendarHeader`), or rendered in a component built from the root injector, as `KbqModalService` does.
+ * Providing the token anywhere still wins over this default.
+ */
 export declare const KBQ_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
 export declare function kbqSelectScrollStrategyProviderFactory(overlay: Overlay): () => RepositionScrollStrategy;

package/core/services/measure-scrollbar.service.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class KbqMeasureScrollbarService {
     protected readonly document: Document;
+    private readonly platform;
     get scrollBarWidth(): number;
     private _scrollBarWidth;
     private scrollbarMeasure;

package/core/styles/common/_animation.scss

@@ -8,33 +8,44 @@
     }
 }
 
+// Renders the striped "loading" shimmer used by .kbq-progress. Extracted into a mixin so
+// components whose `::before`/`::after` pseudo-elements are already spoken for (e.g. kbq-dropdown-item's
+// hit-area extension) can apply the same overlay to a real element instead.
+@mixin kbq-progress-overlay() {
+    content: '';
+    position: absolute;
+    border-radius: inherit;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    $lighter: rgba(255, 255, 255, 0.1);
+    $darker: rgba(0, 0, 0, 0.04);
+
+    background: linear-gradient(
+            135deg,
+            $darker 12px,
+            $lighter 12px,
+            $lighter 22px,
+            $darker 22px,
+            $darker 34px,
+            $lighter 34px
+        )
+        repeat;
+    background-size: 32px 32px;
+    animation: kbq-progress 1s linear infinite;
+}
+
 .kbq-progress {
     position: relative;
 
     &:after {
-        content: '';
-        position: absolute;
-        border-radius: inherit;
-
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        $lighter: rgba(255, 255, 255, 0.1);
-        $darker: rgba(0, 0, 0, 0.04);
-
-        background: linear-gradient(
-                135deg,
-                $darker 12px,
-                $lighter 12px,
-                $lighter 22px,
-                $darker 22px,
-                $darker 34px,
-                $lighter 34px
-            )
-            repeat;
-        background-size: 32px 32px;
-        animation: kbq-progress 1s linear infinite;
+        @include kbq-progress-overlay();
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 }

package/core/styles/common/_select.scss

@@ -122,9 +122,16 @@
         overflow: hidden;
 
         & .kbq-select__match-hidden-text {
-            flex: 0 0 40px;
+            // This is the box the matcher reserves for the "+N" counter, and `flex-basis` obeys
+            // `box-sizing` exactly as `width` does. Under a global `border-box` reset in a consuming
+            // application the padding would come out of the reserved width, so the counter would get
+            // 8px less room than `KbqSelect` measured for it and the tag count would be off by one
+            // at the boundary.
+            box-sizing: content-box;
+
+            flex: 0 0 var(--kbq-form-field-size-addon-width);
             align-self: center;
-            padding-left: 4px;
+            padding-left: var(--kbq-size-xxs);
             padding-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));
 
             text-align: right;
@@ -232,6 +239,14 @@
     padding: var(--kbq-size-xxs) var(--kbq-size-l);
 }
 
+// Extends an item's hit area past the box it paints, with a transparent pseudo-element on the element
+// that owns the click handler — a pseudo-element is hit-tested as part of that element, so hover and
+// click both reach the gutter with no TS and no `z-index`. This one claims a fixed strip either side of
+// a plain vertical list. The same technique, sized differently, is hand-rolled where the geometry does
+// not fit: `.kbq-navbar-item`'s `:before` cancels the item's own margin (DS-2558), and
+// `--kbq-button-toggle-size-item-hit-area-*` tiles a group's `gap` between two neighbours and hands the
+// group's padding to the outermost items, per orientation (DS-4164). Any clipping ancestor eats all of
+// them — see the note on `.kbq-button-toggle`'s `overflow`.
 @mixin item-active-area($outline) {
     position: relative;
 

package/core/styles/theming/_scrollbar-theme.scss

@@ -73,7 +73,11 @@
 
         &::-webkit-scrollbar-track,
         &::-webkit-scrollbar-corner,
+        &::-webkit-resizer,
         &::-webkit-scrollbar,
+        ::-webkit-scrollbar-track,
+        ::-webkit-scrollbar-corner,
+        ::-webkit-resizer,
         ::-webkit-scrollbar {
             background-color: transparent;
         }

package/core/styles/typography/_typography.scss

@@ -239,6 +239,10 @@
         @include kbq-typography-level-to-styles-css-variables(typography, mono-normal-strong);
     }
 
+    .kbq-mono-normal-medium {
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-normal-medium);
+    }
+
     .kbq-mono-compact {
         @include kbq-typography-level-to-styles-css-variables(typography, mono-compact);
     }
@@ -247,6 +251,10 @@
         @include kbq-typography-level-to-styles-css-variables(typography, mono-compact-strong);
     }
 
+    .kbq-mono-codeblock {
+        @include kbq-typography-level-to-styles-css-variables(typography, mono-codeblock);
+    }
+
     .kbq-tabular-big {
         @include kbq-typography-level-to-styles-css-variables(typography, tabular-big);
     }

package/core/utils/dom.d.ts

@@ -2,3 +2,15 @@
  * Injects the native element for the current component.
  */
 export declare const kbqInjectNativeElement: <T extends Element = HTMLElement>() => T;
+/**
+ * Focuses `element` and scrolls it into view by the shortest distance, leaving a visible one alone.
+ *
+ * The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers it
+ * to a later rendering update, where it lands after — and undoes — any scrolling the reader did in the
+ * meantime. Letting the element reveal itself keeps every consumer working, whatever it uses as a scroll
+ * container, and the browser resolves that container rather than the caller guessing at it.
+ *
+ * Pass `skipReveal` when the pointer caused the focus: the element is already under the cursor, so
+ * revealing it would shift the list out from under it.
+ */
+export declare const kbqFocusAndReveal: (element: HTMLElement, skipReveal?: boolean) => void;

package/datepicker/datepicker-input.directive.d.ts

@@ -82,11 +82,27 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     get value(): D | null;
     set value(value: D | null);
     private _value;
-    /** The minimum valid date. */
+    /**
+     * The minimum valid date. Drives validation only — including dates typed or pasted into the
+     * input — and reports `kbqDatepickerMin`. The calendar is restricted separately, by `minDate`
+     * on the associated `<kbq-datepicker>`.
+     *
+     * Compared down to the millisecond, not by calendar day: the input keeps the time part of the
+     * value it parses, and the comparison is made on wall-clock components rather than on absolute
+     * time.
+     */
     get min(): D | null;
     set min(value: D | null);
     private _min;
-    /** The maximum valid date. */
+    /**
+     * The maximum valid date. Drives validation only — including dates typed or pasted into the
+     * input — and reports `kbqDatepickerMax`. The calendar is restricted separately, by `maxDate`
+     * on the associated `<kbq-datepicker>`.
+     *
+     * Compared down to the millisecond, not by calendar day: the input keeps the time part of the
+     * value it parses, so an upper bound meant to include its whole day has to be the end of that
+     * day.
+     */
     get max(): D | null;
     set max(value: D | null);
     private _max;
@@ -112,9 +128,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     set errorState(value: boolean);
     private get readyForParse();
     private get selectionStart();
-    private set selectionStart(value);
     private get selectionEnd();
-    private set selectionEnd(value);
     private control;
     private readonly uid;
     private datepickerSubscription;
@@ -168,6 +182,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     private spaceKeyHandler;
     private getNewValue;
     private setViewValue;
+    private setSelection;
     private replaceSymbols;
     private getDateFromString;
     private getDefaultValue;
@@ -215,7 +230,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     private getDigitPositions;
     private createDate;
     private createDateTime;
-    private correctCursorPosition;
+    private correctedCursorPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[kbqDatepicker], input[kbqCalendar]", ["kbqDatepickerInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "kbqDatepicker": { "alias": "kbqDatepicker"; "required": false; }; "kbqCalendar": { "alias": "kbqCalendar"; "required": false; }; "kbqDatepickerFilter": { "alias": "kbqDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, true, never>;
 }

package/datepicker/datepicker.component.d.ts

@@ -7,7 +7,10 @@ import { KbqCalendarCellCssClasses } from './calendar-body.component';
 import { KbqCalendar } from './calendar.component';
 import { KbqDatepickerInput } from './datepicker-input.directive';
 import * as i0 from "@angular/core";
-/** Injection token that determines the scroll handling while the calendar is open. */
+/**
+ * Injection token that determines the scroll handling while the calendar is open. The root default keeps the
+ * datepicker usable outside `KbqDatepickerModule`'s injector; providing the token anywhere still wins over it.
+ */
 export declare const KBQ_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
 export declare function KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;

package/dl/dl.component.d.ts

@@ -10,6 +10,7 @@ export declare class KbqDlComponent implements AfterContentInit, OnDestroy {
     private resizeSubscription;
     private readonly elementRef;
     private readonly changeDetectorRef;
+    private readonly platform;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     private readonly updateState;

package/dl/dl.scss

@@ -7,6 +7,16 @@
 
     grid-template-columns: repeat(4, 1fr);
 
+    // Let the columns keep their `1fr` ratio instead of being stretched by an unbreakable string: `min-width: 0`
+    // drops the grid item's content-based automatic minimum, and `break-word` breaks such a string only when it
+    // does not fit. `anywhere` is deliberately avoided — it would also shrink the min-content size to a single
+    // character and leak that to any ancestor that sizes itself to content.
+    .kbq-dt,
+    .kbq-dd {
+        min-width: 0;
+        overflow-wrap: break-word;
+    }
+
     .kbq-dt {
         grid-column: 1;
     }

package/dropdown/dropdown-item.component.d.ts

@@ -19,6 +19,8 @@ export declare class KbqDropdownItem implements KbqTitleTextRef, IFocusableOptio
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /** Whether the dropdown item is in a loading state. */
+    readonly progress: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** Stream that emits when the dropdown item is hovered. */
     readonly hovered: Subject<KbqDropdownItem>;
     /** Stream that emits when the menu item is focused. */
@@ -33,7 +35,13 @@ export declare class KbqDropdownItem implements KbqTitleTextRef, IFocusableOptio
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     resetStyles(): void;
-    /** Focuses the dropdown item. */
+    /**
+     * Focuses the dropdown item and reveals it.
+     *
+     * The reveal is explicit because the one `focus()` performs implicitly is not portable: WebKit defers
+     * it to a later rendering update, where it lands after — and undoes — any scrolling the reader did in
+     * the meantime. `preventScroll` is therefore always forced on, overriding `options`.
+     */
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     /** Returns the host DOM element. */
     getHostElement(): HTMLElement;
@@ -47,6 +55,6 @@ export declare class KbqDropdownItem implements KbqTitleTextRef, IFocusableOptio
     getLabel(): string;
     haltDisabledEvents(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownItem, [null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["kbqDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["icon"], ["[kbq-icon]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDropdownItem, "kbq-dropdown-item, [kbq-dropdown-item]", ["kbqDropdownItem"], { "disabled": { "alias": "disabled"; "required": false; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; }, {}, ["icon"], ["[kbq-icon]", "*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

package/dropdown/dropdown-item.scss

@@ -1,3 +1,4 @@
+@use '../core/styles/common/animation';
 @use '../core/styles/common/list';
 @use '../core/styles/common/vendor-prefixes';
 
@@ -47,6 +48,21 @@
     border-radius: inherit;
 }
 
+// kbq-dropdown-item's :before/:after are already used for the hit-area extension (see
+// select.item-active-area() in dropdown.scss), so the .kbq-progress shimmer is rendered on the
+// existing overlay element instead of the usual ::after.
+.kbq-dropdown-item.kbq-progress .kbq-dropdown-item-overlay {
+    @include animation.kbq-progress-overlay();
+
+    // .kbq-dropdown-item-overlay's default inset (-1px) only bleeds past the padding box, leaving
+    // the item's own border uncovered. Flush the shimmer to the item's outer edge instead.
+    inset: calc(-1 * var(--kbq-size-3xs));
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+}
+
 .kbq-dropdown__group-header {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-header-base();

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

@@ -6,7 +6,10 @@ import { KbqDropdownItem } from './dropdown-item.component';
 import { KbqDropdown } from './dropdown.component';
 import { DropdownCloseReason, KbqDropdownPanel } from './dropdown.types';
 import * as i0 from "@angular/core";
-/** Injection token that determines the scroll handling while the dropdown is open. */
+/**
+ * Injection token that determines the scroll handling while the dropdown is open. The root default keeps the
+ * trigger usable outside `KbqDropdownModule`'s injector; providing the token anywhere still wins over it.
+ */
 export declare const KBQ_DROPDOWN_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
 export declare function KBQ_DROPDOWN_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
@@ -86,6 +89,8 @@ export declare class KbqDropdownTrigger implements AfterContentInit, OnDestroy {
     private overlayRef;
     private closeSubscription;
     private hoverSubscription;
+    /** Waits for the exit animation to finish a close; must not outlive the trigger, or it emits once destroyed. */
+    private readonly closeAnimationSubscriptions;
     private classAddedToOverlayContainer;
     constructor(overlay: Overlay, elementRef: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parent: KbqDropdown, dropdownItemInstance: KbqDropdownItem, _dir: Directionality, changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor | undefined);
     ngAfterContentInit(): void;

package/dropdown/dropdown.component.d.ts

@@ -11,6 +11,11 @@ export declare class KbqDropdownStaticContent {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownStaticContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownStaticContent, "[kbqDropdownStaticContent]", never, {}, {}, never, never, true, never>;
 }
+/** Footer that is rendered below the dropdown options panel. */
+export declare class KbqDropdownFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDropdownFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDropdownFooter, "[kbqDropdownFooter], kbq-dropdown-footer", never, {}, {}, never, never, true, never>;
+}
 export declare class KbqDropdown implements AfterContentInit, KbqDropdownPanel, OnInit, OnDestroy {
     private elementRef;
     private ngZone;
@@ -130,5 +135,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"; }, ["search", "lazyContent", "items"], ["*", "[kbqDropdownStaticContent]"], true, 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"; }, ["search", "lazyContent", "items"], ["*", "[kbqDropdownFooter], kbq-dropdown-footer", "[kbqDropdownStaticContent]"], true, never>;
 }

package/dropdown/dropdown.module.d.ts

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

package/dropdown/dropdown.scss

@@ -3,8 +3,8 @@
 
 .kbq-dropdown-trigger {
     &.kbq-button {
-        padding-left: calc(10px - var(--kbq-size-border-width));
-        padding-right: calc(10px - var(--kbq-size-border-width));
+        padding-left: calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));
+        padding-right: calc(var(--kbq-dropdown-trigger-horizontal-padding, 10px) - var(--kbq-size-border-width));
 
         & .kbq-icon_left {
             margin-right: var(--kbq-size-xs);
@@ -45,7 +45,6 @@
     border-radius: var(--kbq-dropdown-size-container-border-radius);
 
     box-sizing: border-box;
-    padding: var(--kbq-size-xxs);
 
     // Prevent users from interacting with the panel while it's animating. Note that
     // people won't be able to click through it, because the overlay pane will catch the click.
@@ -66,6 +65,15 @@
             top: calc(-1 * var(--kbq-size-3xs));
             bottom: calc(-1 * var(--kbq-size-3xs));
         }
+
+        // The generic .kbq-progress::after rule (see _animation.scss) would otherwise paint the
+        // shimmer onto this hit-area pseudo-element. The shimmer is rendered on
+        // .kbq-dropdown-item-overlay instead (see dropdown-item.scss), so just neutralize it here
+        // without touching content/position/width/height/left, which the hit-area still needs.
+        &.kbq-progress:after {
+            background: none;
+            animation: none;
+        }
     }
 
     .kbq-divider {
@@ -77,6 +85,13 @@
 .kbq-dropdown__content {
     display: flex;
     flex-direction: column;
+
+    padding: var(--kbq-size-xxs);
+}
+
+.kbq-dropdown-footer {
+    @extend %kbq-select-footer;
+    border-color: var(--kbq-line-contrast-less);
 }
 
 @include theme.kbq-dropdown-theme();

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

@@ -2,20 +2,53 @@ import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
+/**
+ * Renders text as two spans and moves the ellipsis into the middle, so the tail — a file extension, the
+ * digits that tell two reports apart — stays readable when the host is too narrow for the whole string. A
+ * tooltip spells out the full text, and is enabled only while something is actually hidden.
+ *
+ * The host needs the layout contract the consuming component ships (see `.kbq-ellipsis-center` in
+ * `file-upload.scss`): the two spans have no styles of their own.
+ */
 export declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {
     private cdr;
+    /**
+     * Application-wide `ResizeObserver` shared by every consumer, as `KbqTitleDirective` uses. Unlike the
+     * `window:resize` listener this directive used to carry, it also reacts to container-only resizes — a
+     * splitter drag, a sidebar collapse, or the vertical scrollbar that appears once a file list fills up —
+     * none of which resize the window, all of which change where the text has to be split.
+     */
+    private readonly resizeObserver;
     set kbqEllipsisCenter(value: string);
+    /**
+     * Shortest text worth splitting in the middle. Anything below it keeps its natural order and is cut off
+     * at the end by the host's own `text-overflow`.
+     *
+     * Defaults to `0` — every overflowing text is split — because that is what the directive has always
+     * done: the input was declared but never read, so any other default would silently end-truncate labels
+     * that consumers expect to see split.
+     */
     minVisibleLength: number;
+    /**
+     * Lower bound, in pixels, for the average glyph width used to decide how many characters fit in the
+     * tail. The rendered text is measured as well and the wider of the two wins, so an underestimate here
+     * can no longer push the extension out of the tail — raising it only shortens the tail further.
+     */
     charWidth: number;
     /**
      * Debounce time (ms) for resize events before recalculating ellipsis position.
      * @default 50
      */
     debounceInterval: number;
-    /** @docs-private */
+    /**
+     * @deprecated No longer read. Resizes now come from the shared `ResizeObserver`, which also catches the
+     * container-only ones a `window:resize` listener cannot see; the host listener that used to feed this
+     * subject is gone, and nothing subscribes to it. Kept as a no-op and removed in the next major version.
+     * @docs-private */
     readonly resizeStream: Subject<Event>;
     private _kbqEllipsisCenter;
-    private resizeSubscription;
+    private lastMeasuredWidth;
+    private refreshTimeoutId;
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;