@koobiq/components 19.8.4 → 19.8.6

package/link/_link-theme.scss

@@ -1,7 +1,33 @@
+@use 'sass:string';
+
 @use '../core/styles/common/tokens' as *;
 
 @use './link-tokens';
 
+// Unquoted, so that the joiner reaches the CSS as an escape rather than as an invisible character
+$_kbq-link-word-joiner: string.unquote('"\\2060"');
+
+// The width of a 16px icon less half a pixel: Chromium lays out a line that ends in negative letter-spacing a
+// fraction wider than the max-content size it reports, so the full width would push the last word to the next
+// line in a shrink-to-fit container.
+$_kbq-link-trailing-icon-reserve: 15.5px;
+
+// The gap after the text. Before an icon it is part of the reserve instead of a margin: Firefox does not always
+// keep a margin together with the last word, and the icon could wrap alone again.
+@mixin _kbq-link-text-end-gap($gap) {
+    &:not(:last-child) {
+        margin-right: $gap;
+    }
+
+    &:has(+ .kbq-icon) {
+        margin-right: 0;
+
+        &::after {
+            padding-inline-end: calc($gap + $_kbq-link-trailing-icon-reserve);
+        }
+    }
+}
+
 @mixin kbq-link-geometry() {
     display: inline;
 
@@ -38,6 +64,21 @@
                 line-height: 0;
             }
         }
+
+        // A line may break right before an icon, as before any inline-block, and neither a no-break character
+        // nor white-space stops that in every engine. So the text reserves room for the icon after its last
+        // word, glued to it by a word joiner kept out of the accessible name, and the icon moves back into that
+        // room: the last word and the icon fit on the line together or wrap together.
+        .kbq-link__text:has(+ .kbq-icon) {
+            &::after {
+                content: $_kbq-link-word-joiner;
+                content: $_kbq-link-word-joiner / '';
+            }
+
+            + .kbq-icon {
+                margin-inline-start: -$_kbq-link-trailing-icon-reserve;
+            }
+        }
     }
 
     &.kbq-text-with-icon .kbq-link__text {
@@ -45,9 +86,7 @@
             margin-left: var(--kbq-link-size-normal-content-padding);
         }
 
-        &:not(:last-child) {
-            margin-right: var(--kbq-link-size-normal-content-padding);
-        }
+        @include _kbq-link-text-end-gap(var(--kbq-link-size-normal-content-padding));
     }
 
     &.kbq-link_compact {
@@ -65,9 +104,7 @@
                     margin-left: var(--kbq-link-size-compact-content-padding);
                 }
 
-                &:not(:last-child) {
-                    margin-right: var(--kbq-link-size-compact-content-padding);
-                }
+                @include _kbq-link-text-end-gap(var(--kbq-link-size-compact-content-padding));
             }
         }
     }
@@ -78,20 +115,18 @@
                 margin-left: var(--kbq-link-size-big-content-padding);
             }
 
-            &:not(:last-child) {
-                margin-right: var(--kbq-link-size-big-content-padding);
-            }
+            @include _kbq-link-text-end-gap(var(--kbq-link-size-big-content-padding));
         }
     }
 
     &.kbq-text-with-icon.kbq-link_external {
-        .kbq-link__text:not(:last-child) {
-            margin-right: 1px;
+        .kbq-link__text {
+            @include _kbq-link-text-end-gap(1px);
         }
 
         &.kbq-link_compact {
-            .kbq-link__text:not(:last-child) {
-                margin-right: 0;
+            .kbq-link__text {
+                @include _kbq-link-text-end-gap(0px);
             }
 
             .kbq-icon {
@@ -100,8 +135,8 @@
         }
 
         &.kbq-link_big {
-            .kbq-link__text:not(:last-child) {
-                margin-right: 2px;
+            .kbq-link__text {
+                @include _kbq-link-text-end-gap(2px);
             }
         }
     }

package/list/_list-theme.scss

@@ -54,6 +54,12 @@
         &.kbq-disabled {
             @include _kbq-list-item(states-disabled);
         }
+
+        &.kbq-selected.kbq-disabled {
+            --kbq-option-background: var(--kbq-list-states-selected-container-background);
+
+            background: var(--kbq-list-states-selected-container-background);
+        }
     }
 
     .kbq-list-option.kbq-list-option_multiple {
@@ -70,6 +76,12 @@
                 @include _kbq-list-item(multiple-states-selected-active);
             }
         }
+
+        &.kbq-selected.kbq-disabled {
+            --kbq-option-background: var(--kbq-list-multiple-states-selected-container-background);
+
+            background: var(--kbq-list-multiple-states-selected-container-background);
+        }
     }
 
     .kbq-list-selection.cdk-keyboard-focused {

package/list/list-selection.component.d.ts

@@ -75,6 +75,7 @@ export declare class KbqListSelection implements AfterContentInit, AfterViewInit
     get optionBlurChanges(): Observable<KbqOptionEvent>;
     _value: string[] | null;
     private readonly destroyRef;
+    private readonly platform;
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);

package/list/list.scss

@@ -1,3 +1,4 @@
+@use '../core/option/action-container-mixins' as action-container;
 @use '../core/styles/common/list';
 @use '../core/styles/common/vendor-prefixes';
 @use './list-theme' as theme;
@@ -29,18 +30,10 @@
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
     @include _kbq-list-item-border-radius();
+    @include action-container.kbq-option-action-visibility('.kbq-list-selection.cdk-keyboard-focused');
 
     &:not(.kbq-disabled) {
         cursor: pointer;
-
-        &.kbq-hovered,
-        &:hover,
-        &.kbq-focused,
-        &.kbq-action-button-focused {
-            & .kbq-action-container {
-                display: flex;
-            }
-        }
     }
 }
 

package/modal/modal-tokens.scss

@@ -2,7 +2,7 @@
     --kbq-modal-size-small-width: 400px;
     --kbq-modal-size-medium-width: 640px;
     --kbq-modal-size-large-width: 960px;
-    --kbq-modal-size-border-radius: var(--kbq-size-s);
+    --kbq-modal-size-border-radius: var(--kbq-size-m);
     --kbq-modal-size-header-padding-vertical: var(--kbq-size-l);
     --kbq-modal-size-header-padding-left: var(--kbq-size-xxl);
     --kbq-modal-size-header-padding-right: var(--kbq-size-6xl);

package/modal/modal.component.d.ts

@@ -5,7 +5,7 @@ import { KbqComponentColors } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
-import { IModalButtonOptions, ModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
+import { IModalButtonOptions, KbqOverflowShadowState, ModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
 import * as i0 from "@angular/core";
 type AnimationState = 'enter' | 'leave' | null;
 export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
@@ -18,6 +18,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private changeDetector;
     private focusMonitor;
     protected readonly document: Document;
+    private readonly destroyRef;
     componentColors: typeof KbqComponentColors;
     kbqModalType: ModalType;
     kbqComponent: Type<T>;
@@ -68,6 +69,13 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     modalBody: ElementRef;
     isTopOverflow: boolean;
     isBottomOverflow: boolean;
+    /**
+     * Scroll-shadow state published by `KbqModalBody` when the modal content is composed
+     * manually (`kbq-modal-title`/`kbq-modal-body`/`kbq-modal-footer`), so the header/footer
+     * can render matching shadows without a direct template reference between them.
+     * @docs-private
+     */
+    readonly bodyOverflow: import("@angular/core").WritableSignal<KbqOverflowShadowState>;
     maskAnimationClassMap: object | null;
     modalAnimationClassMap: object | null;
     transformOrigin: string;

package/modal/modal.directive.d.ts

@@ -6,11 +6,22 @@ export declare class KbqModalTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalTitle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", never, {}, {}, never, ["*"], true, never>;
 }
+/**
+ * Scrollable body of a manually composed modal (`kbqComponent`). Publishes its scroll-shadow
+ * state onto the modal instance so a sibling `KbqModalTitle`/`KbqModalFooter` can render the
+ * matching shadow, since they have no direct template reference to this element.
+ */
 export declare class KbqModalBody {
+    private readonly modal;
+    private readonly elementRef;
+    constructor();
+    /** @docs-private */
+    protected checkOverflow(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalBody, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, true, never>;
 }
 export declare class KbqModalFooter {
+    protected modal: KbqModalComponent<any, any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalFooter, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalFooter, "[kbq-modal-footer], kbq-modal-footer, [kbqModalFooter]", never, {}, {}, never, never, true, never>;
 }

package/modal/modal.type.d.ts

@@ -3,6 +3,13 @@ import { EventEmitter, Injector, TemplateRef, Type } from '@angular/core';
 export type OnClickCallback<T> = (instance: T) => (false | void | {}) | Promise<false | void | {}>;
 export type ModalType = 'default' | 'confirm' | 'custom';
 export type ConfirmType = 'confirm' | 'success' | 'warn';
+/** Shadow visibility state — which of the two overflow shadows should be rendered. */
+export interface KbqOverflowShadowState {
+    /** Whether the top (header) shadow should be visible — content is scrolled past the top. */
+    top: boolean;
+    /** Whether the bottom (footer) shadow should be visible — more content remains below the fold. */
+    bottom: boolean;
+}
 export declare enum ModalSize {
     Small = "small",
     Medium = "medium",

package/navbar/_navbar-item_horizontal.scss

@@ -19,6 +19,11 @@
 
     justify-content: center;
 
+    // Hit area over the margin this item is spaced with, so the highlight does not drop out between
+    // items (DS-2558) — the transparent pseudo-element is hit-tested as part of the item, so hover and
+    // click both reach it. `:after` below paints the highlight, at the item's own box. The same
+    // technique is written twice more: `select.item-active-area()` for a plain vertical list, and
+    // `--kbq-button-toggle-size-item-hit-area-*` for a group whose `gap` two neighbours have to tile.
     &:before {
         top: calc(-1 * #{var(--kbq-size-s)});
         left: calc(-1 * #{var(--kbq-size-s)});

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/navbar-item.component.d.ts

@@ -29,6 +29,12 @@ export declare class KbqNavbarTitle implements AfterViewInit {
     isTextOverflown: boolean;
     get text(): string;
     get isOverflown(): boolean;
+    /**
+     * Outer width of the title: its border box plus horizontal margins.
+     *
+     * Measured with `getBoundingClientRect()` rather than `getComputedStyle().width`, which resolves
+     * to the used content-box width whatever `box-sizing` says and would drop the title's padding.
+     */
     getOuterElementWidth(): number;
     checkTextOverflown(): void;
     ngAfterViewInit(): void;
@@ -89,6 +95,15 @@ export declare class KbqNavbarRectangleElement {
     set collapsed(value: boolean);
     private _collapsed;
     button: KbqButtonCssStyler;
+    /**
+     * Outer width of the item: its border box plus horizontal margins.
+     *
+     * Measured with `getBoundingClientRect()` rather than `getComputedStyle().width`, which resolves
+     * to the used content-box width whatever `box-sizing` says. `.kbq-navbar-item` is `border-box`
+     * with horizontal padding, so the computed value dropped that padding from every item, while
+     * `KbqNavbar.width` — the figure this sum is compared against — has always been a border box.
+     * The navbar therefore under-counted its own content and collapsed later than it should.
+     */
     getOuterElementWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarRectangleElement, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarRectangleElement, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", never, {}, {}, ["button"], never, true, never>;

package/navbar/navbar.component.d.ts

@@ -43,6 +43,7 @@ export declare class KbqNavbar extends KbqFocusableComponent implements AfterVie
     protected readonly elementRef: ElementRef<HTMLElement>;
     protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly focusMonitor: FocusMonitor;
+    private readonly platform;
     readonly rectangleElements: import("@angular/core").Signal<readonly any[]>;
     navbarItems: QueryList<KbqNavbarItem>;
     readonly resizeStream: Subject<Event>;

package/navbar/vertical-navbar.scss

@@ -26,6 +26,12 @@
     }
 
     & .kbq-vertical-navbar__container {
+        // The 1px `border-right` the theme adds belongs inside these widths, not beside them: the
+        // collapsed rail is `--kbq-size-6xl`, the same token this component's own `min-width` above
+        // is written in, so rendering it a pixel wider overshot that contract. Under `content-box`
+        // it measured 57px collapsed and 241px expanded.
+        box-sizing: border-box;
+
         position: relative;
 
         display: flex;

package/notification-center/notification-center.d.ts

@@ -81,10 +81,22 @@ export declare class KbqNotificationCenterComponent extends KbqPopUp implements
      * 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. */
+    /** 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;

package/notification-center/notification-center.scss

@@ -94,6 +94,18 @@
 
     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;
     }

package/notification-center/notification-item.scss

@@ -27,6 +27,12 @@
 .kbq-notification-item__icon-container {
     flex-shrink: 0;
 
+    // The size below is the icon itself and the padding only positions it, so the two must not share
+    // a box. Under a global `border-box` reset in a consuming application the padding would be
+    // subtracted from the icon instead of added around it, and `max-width`/`max-height` would clamp
+    // what is left — a 16px icon squeezed into 4px wide and 2px tall.
+    box-sizing: content-box;
+
     width: var(--kbq-size-l);
     max-width: var(--kbq-size-l);
 

package/overflow-items/overflow-items.d.ts

@@ -74,6 +74,7 @@ export 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": "19.8.4",
+    "version": "19.8.6",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,9 +25,9 @@
         "@angular/cdk": ">=19.0.0",
         "@angular/core": ">=19.0.0",
         "@angular/forms": ">=19.0.0",
-        "@koobiq/cdk": "19.8.4",
-        "@koobiq/angular-moment-adapter": "19.8.4",
-        "@koobiq/angular-luxon-adapter": "19.8.4",
+        "@koobiq/cdk": "19.8.6",
+        "@koobiq/angular-moment-adapter": "19.8.6",
+        "@koobiq/angular-luxon-adapter": "19.8.6",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"