@koobiq/components 20.0.0 → 20.2.0

package/modal/index.d.ts

@@ -32,6 +32,7 @@ interface ModalOptions<C = any, R = any> {
     kbqClassName?: string;
     kbqStyle?: object;
     kbqTitle?: string | TemplateRef<{}>;
+    kbqCaption?: string | TemplateRef<{}>;
     kbqContent?: string | TemplateRef<{}> | Type<C>;
     kbqComponent?: Type<C>;
     kbqClosable?: boolean;
@@ -105,6 +106,7 @@ declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> impl
     kbqClassName: string;
     kbqStyle: object;
     kbqTitle: string | TemplateRef<{}>;
+    kbqCaption: string | TemplateRef<{}>;
     kbqCloseByESC: boolean;
     get kbqClosable(): boolean;
     set kbqClosable(value: boolean);
@@ -204,7 +206,7 @@ declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> impl
      */
     private changeBodyOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqBeforeClose": "kbqBeforeClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCaption": { "alias": "kbqCaption"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqBeforeClose": "kbqBeforeClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
 }
 
 /**

package/modal/modal.scss

@@ -102,6 +102,21 @@
     padding-bottom: var(--kbq-size-3xs);
 }
 
+.kbq-modal-header-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.kbq-modal-caption {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .kbq-modal-body {
     display: block;
     overflow-y: auto;

package/navbar/_navbar-item_vertical.scss

@@ -55,17 +55,19 @@
         &.kbq-navbar-bento .kbq-navbar-item__title {
             margin-left: -8px;
             opacity: 0;
+
+            transition:
+                opacity 150ms ease-out,
+                margin-left 150ms ease-out;
         }
 
         &.kbq-navbar-bento:hover,
-        &.kbq-navbar-bento.cdk-keyboard-focused {
+        &.kbq-navbar-bento.cdk-keyboard-focused,
+        &.kbq-navbar-bento.kbq-active,
+        &.kbq-navbar-bento.kbq-pressed {
             & .kbq-navbar-item__title {
                 margin-left: 0;
                 opacity: 1;
-
-                transition:
-                    opacity 150ms ease-out,
-                    margin-left 150ms ease-out;
             }
         }
     }

package/navbar/index.d.ts

@@ -31,11 +31,19 @@ declare class KbqNavbarTitle implements AfterViewInit {
     private readonly window;
     readonly hovered: Subject<boolean>;
     outerElementWidth: number;
-    isTextOverflown: boolean;
     get text(): string;
+    /** Whether the text is clipped horizontally (e.g. by `text-overflow: ellipsis`). */
     get isOverflown(): boolean;
+    /**
+     * Whether the text is clipped vertically (e.g. by `-webkit-line-clamp`).
+     *
+     * Kept separate from `isOverflown` on purpose: wrapped text never exceeds its width, so only this
+     * check catches a clamped title. `isOverflown` is also read by `KbqNavbarItem`, whose titles are
+     * always `nowrap` — folding the two together would let sub-pixel line-height rounding enable
+     * tooltips on every navbar item.
+     */
+    get isClamped(): boolean;
     getOuterElementWidth(): number;
-    checkTextOverflown(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, true, never>;
@@ -143,10 +151,26 @@ declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterContentIn
     protected readonly rectangleElement: KbqNavbarRectangleElement;
     /** @docs-private */
     protected readonly navbarFocusableItem: KbqNavbarFocusableItem;
+    private readonly isBrowser;
+    private readonly resizeObserver;
+    private readonly contentObserver;
+    private readonly document;
+    private readonly injector;
+    private readonly debounceInterval;
     /** @docs-private */
     readonly title: i0.Signal<KbqNavbarTitle | undefined>;
-    /** alternative display of the brand name in two lines */
-    readonly longTitle: i0.InputSignal<boolean>;
+    /** Whether the title has been measured as not fitting into a single line. */
+    private readonly autoLongTitle;
+    /**
+     * Alternative display of the brand name in two lines.
+     *
+     * @deprecated The mode is now detected automatically when the title does not fit into a single line.
+     * Leave unset for auto-detection; `true` and `false` force the mode on and off respectively.
+     * Will be removed in the next major release.
+     */
+    readonly longTitle: i0.InputSignal<boolean | undefined>;
+    /** @docs-private */
+    protected readonly longTitleEnabled: i0.Signal<boolean>;
     /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
     get collapsedText(): string;
     set collapsedText(value: string);
@@ -168,6 +192,16 @@ declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterContentIn
     constructor();
     ngAfterContentInit(): void;
     private updateTooltip;
+    private observeLongTitle;
+    private updateAutoLongTitle;
+    /**
+     * Measures whether the title fits into a single line in the *default* presentation.
+     *
+     * Removing and restoring the class within a single task is safe: the browser does not paint mid-task, and
+     * Angular's host binding only writes to the DOM when its value changes, which it does not here. Both rely
+     * on there being no CSS transition on the title - add one and this starts to flicker.
+     */
+    private measureNeedsLongTitle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], { "longTitle": { "alias": "longTitle"; "required": false; "isSignal": true; }; "collapsedText": { "alias": "collapsedText"; "required": false; }; }, {}, ["title"], ["*"], true, never>;
 }
@@ -210,6 +244,7 @@ declare class KbqNavbar extends KbqFocusableComponent implements AfterViewInit,
     protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly focusMonitor: FocusMonitor;
+    private readonly platform;
     readonly rectangleElements: i0.Signal<readonly any[]>;
     readonly navbarItems: i0.Signal<readonly any[]>;
     readonly resizeStream: Subject<Event>;

package/navbar/navbar-brand.scss

@@ -46,6 +46,8 @@ a.kbq-navbar-brand {
     }
 
     & .kbq-navbar-title {
+        max-width: 154px;
+
         padding-right: var(--kbq-size-m);
     }
 }
@@ -85,14 +87,19 @@ a.kbq-navbar-brand {
             display: none !important;
         }
     }
+}
 
-    &.kbq-navbar-brand_long-title .kbq-navbar-title {
-        display: -webkit-box;
-
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        white-space: normal;
-    }
+// Must stay below the per-orientation rules: `.kbq-vertical` sets `display: block` on the title at the very
+// same specificity, so moving this up lets that win and silently kills the clamp - `-webkit-line-clamp` does
+// nothing without `-webkit-box`, and the title then wraps to an unbounded number of lines with no ellipsis.
+// `.kbq-collapsed` still wins over it via `!important`.
+.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title {
+    display: -webkit-box;
+
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    white-space: normal;
 }
 
 @mixin kbq-navbar-brand-theme() {
@@ -145,8 +152,11 @@ a.kbq-navbar-brand {
             @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
         }
 
+        // Both orientations: two lines of the 18px/28px default would grow the navbar (48px -> 72px
+        // horizontally), which is what the compact type exists to prevent.
         &.kbq-navbar-brand_long-title .kbq-navbar-title {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal-strong);
+            line-height: 16px;
         }
     }
 }

package/navbar/navbar-item.scss

@@ -20,6 +20,15 @@
         min-height: var(--kbq-size-l);
     }
 
+    // Filled fade-contrast only: its background is a semi-transparent tint, so the
+    // navbar icon shows through. Composite the tint over an opaque bg-tertiary substrate.
+    // The outline variant is intentionally left untouched — it stays a clean transparent outline.
+    & .kbq-badge-filled.kbq-badge_fade-contrast {
+        background:
+            linear-gradient(var(--kbq-background-contrast-fade), var(--kbq-background-contrast-fade)),
+            var(--kbq-background-bg-tertiary);
+    }
+
     & .kbq-button-icon {
         position: absolute;
         padding-left: var(--kbq-size-xs);

package/notification-center/_notification-center-theme.scss

@@ -11,7 +11,8 @@
         }
     }
 
-    .kbq-notification-center-error-container {
+    .kbq-notification-center-error-container,
+    .kbq-notification-center-load-more-error {
         color: var(--kbq-foreground-error);
     }
 }

package/notification-center/index.d.ts

@@ -12,6 +12,8 @@ import { AnimationTriggerMetadata } from '@angular/animations';
 
 interface KbqNotificationItem extends Omit<KbqToastData, 'closeButton'> {
     id?: string;
+    /** Numeric id of the shown toast, set by `push()` and consumed by `hideToast()`. */
+    toastId?: number;
     title?: string | TemplateRef<unknown>;
     style?: string | KbqToastStyle;
     icon?: boolean | TemplateRef<unknown>;
@@ -27,6 +29,13 @@ type KbqNotificationsGroup = {
     title: string;
     items: KbqNotificationItem[];
 };
+/** Payload emitted by `KbqNotificationCenterService.onDelete`. */
+type KbqNotificationDeleteEvent = {
+    /** What was removed: a single item, a whole date group, or all notifications. */
+    type: 'item' | 'group' | 'all';
+    /** The notification items that were removed. */
+    items: KbqNotificationItem[];
+};
 declare class KbqNotificationCenterService {
     /** @docs-private */
     private readonly adapter;
@@ -40,12 +49,36 @@ declare class KbqNotificationCenterService {
     readonly loadingMode: BehaviorSubject<boolean>;
     /** @docs-private */
     readonly errorMode: BehaviorSubject<boolean>;
+    /**
+     * Whether the bottom "load more" spinner is shown while the next page is being loaded.
+     * Note: this is the infinite-scroll indicator and is distinct from `loadingMode`,
+     * which renders the full-screen loader instead of the list.
+     */
+    readonly loadingMore: BehaviorSubject<boolean>;
+    /**
+     * Whether the bottom "load more" error row (with a retry button) is shown.
+     * Distinct from `errorMode`, which replaces the whole list with the full-screen error state.
+     */
+    readonly loadMoreErrorMode: BehaviorSubject<boolean>;
+    /**
+     * Whether there are more notifications to load. While `true`, scrolling to the bottom
+     * emits `onNextPage`; set it to `false` to stop further infinite-scroll requests.
+     */
+    readonly hasMore: BehaviorSubject<boolean>;
     /** @docs-private */
     readonly onRead: BehaviorSubject<KbqNotificationItem | null>;
     /** Triggers an event when the user presses the reload button. */
     readonly onReload: EventEmitter<void>;
+    /** Triggers an event when the list is scrolled to the bottom and the next page should be loaded. */
+    readonly onNextPage: EventEmitter<void>;
+    /** Triggers an event when an item, a group, or all notifications are removed. */
+    readonly onDelete: EventEmitter<KbqNotificationDeleteEvent>;
     private originalItems;
-    /** @docs-private */
+    /**
+     * Grouped notifications, always ordered from newest to oldest: day groups are sorted by date
+     * descending, and notifications within each day are sorted by date descending.
+     * @docs-private
+     */
     readonly groupedItems: Observable<KbqNotificationsGroup[]>;
     /** Emits an event whenever the changes. */
     readonly changes: Observable<boolean | KbqNotificationItem | KbqNotificationItem[] | null>;
@@ -63,8 +96,16 @@ declare class KbqNotificationCenterService {
     setLoadingMode(value: boolean): void;
     /** Set error mode */
     setErrorMode(value: boolean): void;
+    /** Set the bottom "load more" spinner visibility. */
+    setLoadingMore(value: boolean): void;
+    /** Set the bottom "load more" error state visibility. */
+    setLoadMoreErrorMode(value: boolean): void;
+    /** Set whether there are more notifications to load via infinite scroll. */
+    setHasMore(value: boolean): void;
     /** Push new notification item in center */
     push(item: KbqNotificationItem): void;
+    /** Hides the toast that corresponds to the given notification item. */
+    hideToast(item: KbqNotificationItem): void;
     /** Remove notification item */
     remove(removedItem: KbqNotificationItem): void;
     /** Remove group of notification items */
@@ -72,6 +113,8 @@ declare class KbqNotificationCenterService {
     /** Remove all notification items */
     removeAll(): void;
     private makeGroup;
+    /** Compares two notifications by date so the newest comes first. */
+    private compareByDateDesc;
     private setIds;
     private setReadState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterService, never>;
@@ -87,6 +130,7 @@ declare const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION: {
     noNotifications: string;
     failedToLoadNotifications: string;
     repeat: string;
+    loadingMore: string;
 };
 /** Injection Token for providing configuration of notification-center */
 declare const KBQ_NOTIFICATION_CENTER_CONFIGURATION: InjectionToken<unknown>;
@@ -114,6 +158,11 @@ declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterVi
     configuration: any;
     /** @docs-private */
     protected popoverMode: boolean;
+    /** Distance in pixels from the bottom of the list at which the next page is requested.
+     * @docs-private */
+    protected scrolledToBottomOffset: number;
+    /** Emits on every scroll of the list container; drives the scroll-to-bottom check. */
+    private readonly scroll$;
     /** localized data
      * @docs-private */
     get localeData(): any;
@@ -124,11 +173,45 @@ declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterVi
     /** @docs-private */
     isTrapFocus: boolean;
     readonly switcher: i0.Signal<KbqButton>;
+    /** Scrollable list container; used to measure scroll position for infinite scroll. */
+    private readonly scrollContainer;
     get popoverHeight(): string;
     set popoverHeight(value: string);
     private _popoverHeight;
     constructor();
     ngAfterViewInit(): void;
+    /** Handles the list container scroll: feeds the scroll-to-bottom check that drives infinite scroll.
+     * Overflow shadows are handled declaratively by the `kbqOverflowShadow*` directives.
+     * @docs-private */
+    protected onContainerScroll(): void;
+    /** Retries loading the next page from the bottom error row.
+     * @docs-private */
+    protected retryLoadMore(): void;
+    /**
+     * Requests the next page (via `service.onNextPage`) once the list is scrolled to within
+     * `scrolledToBottomOffset` pixels of the bottom. Two triggers feed it: the user scrolling, and a
+     * page finishing loading. The latter keeps paging when a freshly loaded page is too short to
+     * overflow the viewport — otherwise no further scroll event would fire and pagination would
+     * stall. Suppressed while a load is in flight, errored, or when there is nothing more to load.
+     */
+    private subscribeToScrolledToBottom;
+    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom.
+     * Sub-pixel measurement error is absorbed by `SCROLLED_TO_BOTTOM_TOLERANCE`. */
+    private isScrolledToBottom;
+    /** Emits `onNextPage` unless a load is already in flight, errored, or there is nothing more to load. */
+    private requestNextPage;
+    /**
+     * Reveals the bottom "load more" spinner / error row when it first appears. Both rows are appended
+     * below the last item and can land outside the viewport (the next page is requested while the user
+     * is up to `scrolledToBottomOffset` px above the true bottom). Only a genuine false->true transition
+     * reveals the row: the BehaviorSubject's replayed current value is ignored (`pairwise` needs two
+     * emissions), so the panel always opens scrolled to the top — reopening it while a load-more error
+     * is still set never jumps to the bottom.
+     */
+    private subscribeToRevealLoadMoreRow;
+    /** Scrolls the list container to its bottom so a freshly-appended bottom row becomes visible. */
+    private scrollToBottom;
+    private focusScrollContainer;
     /** @docs-private */
     updateClassMap(placement: string, customClass: string, size: KbqPopUpSizeValues): void;
     /** @docs-private */
@@ -169,6 +252,8 @@ declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificati
     panelClass: string;
     /** Offset of popUp */
     offset: number | null;
+    /** Distance in pixels from the bottom of the list at which the next page is requested via `onNextPage`. */
+    scrolledToBottomOffset: number;
     /** Use popover or not */
     get popoverMode(): boolean;
     set popoverMode(value: boolean);
@@ -216,8 +301,9 @@ declare class KbqNotificationCenterTrigger extends KbqPopUpTrigger<KbqNotificati
     /** @docs-private */
     closingActions(): rxjs.Observable<void | _angular_cdk_scrolling_module_d.CdkScrollable | MouseEvent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNotificationCenterTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNotificationCenterTrigger, "[kbqNotificationCenterTrigger]", ["kbqNotificationCenterTrigger"], { "placement": { "alias": "kbqNotificationCenterPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "kbqNotificationCenterPanelClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "popoverMode": { "alias": "popoverMode"; "required": false; }; "popoverHeight": { "alias": "popoverHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stickToWindow": { "alias": "stickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNotificationCenterTrigger, "[kbqNotificationCenterTrigger]", ["kbqNotificationCenterTrigger"], { "placement": { "alias": "kbqNotificationCenterPlacement"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "kbqNotificationCenterPanelClass"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; }; "popoverMode": { "alias": "popoverMode"; "required": false; }; "popoverHeight": { "alias": "popoverHeight"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "stickToWindow": { "alias": "stickToWindow"; "required": false; }; "container": { "alias": "container"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_offset: unknown;
+    static ngAcceptInputType_scrolledToBottomOffset: unknown;
     static ngAcceptInputType_popoverMode: unknown;
     static ngAcceptInputType_disabled: unknown;
 }
@@ -234,4 +320,4 @@ declare class KbqNotificationCenterModule {
 }
 
 export { KBQ_NOTIFICATION_CENTER_CONFIGURATION, KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqNotificationCenterAnimations, KbqNotificationCenterComponent, KbqNotificationCenterModule, KbqNotificationCenterService, KbqNotificationCenterTrigger, kbqNotificationCenterScrollStrategyFactory, maxUnreadItemsLength };
-export type { KbqNotificationItem };
+export type { KbqNotificationDeleteEvent, KbqNotificationItem };

package/notification-center/notification-center.scss

@@ -36,7 +36,7 @@
 
     justify-content: space-between;
 
-    padding: var(--kbq-size-xl) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl);
+    padding: var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl);
 }
 
 .kbq-notification-center-title {
@@ -67,7 +67,7 @@
     display: flex;
     flex-direction: row;
 
-    padding: var(--kbq-size-s) var(--kbq-size-xxl);
+    padding: var(--kbq-size-s) var(--kbq-size-xl);
 
     & .kbq-notification-center-sub-header__button {
         position: absolute;
@@ -78,7 +78,8 @@
         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;
     }
 }
@@ -88,13 +89,50 @@
 
     border-radius: inherit;
 
-    padding-bottom: var(--kbq-size-m);
+    padding-bottom: var(--kbq-size-xl);
+
+    // 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-loader-overlay_parent {
         border-radius: inherit;
     }
 }
 
+.kbq-notification-center-load-more {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: 26px 0;
+}
+
+.kbq-notification-center-load-more-error {
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--kbq-size-xxs) var(--kbq-size-xxl);
+
+    text-align: center;
+
+    & .kbq-button {
+        margin-top: var(--kbq-size-s);
+    }
+}
+
 .kbq-notification-center-empty-container,
 .kbq-notification-center-error-container {
     display: flex;

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;
         }
@@ -46,7 +47,7 @@
     flex: 1;
 
     padding-top: var(--kbq-size-m);
-    padding-right: var(--kbq-size-l);
+    padding-right: var(--kbq-size-s);
     padding-bottom: var(--kbq-size-m);
 
     overflow: hidden;

package/overflow-items/index.d.ts

@@ -75,6 +75,7 @@ declare class KbqOverflowItems {
     private readonly renderer;
     private readonly document;
     private readonly window;
+    private readonly platform;
     /**
      * `KbqOverflowItem` directive references.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.0.0",
+    "version": "20.2.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,8 +25,8 @@
         "@angular/cdk": ">=20.0.0",
         "@angular/core": ">=20.0.0",
         "@angular/forms": ">=20.0.0",
-        "@koobiq/angular-moment-adapter": "20.0.0",
-        "@koobiq/angular-luxon-adapter": "20.0.0",
+        "@koobiq/angular-moment-adapter": "20.2.0",
+        "@koobiq/angular-luxon-adapter": "20.2.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"
@@ -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"