@koobiq/components 20.1.0 → 20.3.0

package/list/list.scss

@@ -1,12 +1,13 @@
+@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;
 
-@mixin _kbq-list-item-border-radius() {
+/// Squares off the corners between adjacent selected rows so a run of them reads as one block.
+/// Only `.kbq-list-option` is ever selectable, hence the option-only scope.
+@mixin _kbq-list-option-selected-border-radius() {
     $selectors: '.kbq-selected';
 
-    border-radius: var(--kbq-size-border-radius);
-
     &:is(#{$selectors}):has(+ :is(#{$selectors})) {
         border-bottom-left-radius: unset;
         border-bottom-right-radius: unset;
@@ -24,25 +25,198 @@
     outline: none;
 }
 
+// `horizontal` rebinds Left/Right arrows on the key manager; without a row layout the visual order
+// would disagree with the focus order.
+.kbq-list-selection_horizontal {
+    display: flex;
+    flex-direction: row;
+
+    .kbq-list-option {
+        flex: 0 0 auto;
+    }
+}
+
+// Positioning context for the drop indicator, which is the list's own last child.
+.kbq-list-selection {
+    position: relative;
+}
+
 .kbq-list-item,
 .kbq-list-option {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
-    @include _kbq-list-item-border-radius();
+
+    // Re-declared on top of the shared base so the `--kbq-list-size-*` tokens become real override
+    // points. `.kbq-list-option` is guaranteed to be inside `.kbq-list-selection` (it injects it),
+    // but `.kbq-list-item`/`a[kbq-list-item]` has no such enforcement, so every token here falls back
+    // to the shared base mixin's own value in case it's ever rendered outside `.kbq-list`.
+    // The horizontal padding subtracts the transparent focus border so the total stays on the grid.
+    border-width: var(--kbq-list-size-container-focus-outline-width, var(--kbq-size-3xs));
+    border-radius: var(--kbq-size-border-radius);
+    gap: var(--kbq-list-size-container-content-gap-horizontal, var(--kbq-size-s));
+    padding-top: var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));
+    padding-right: calc(
+        var(--kbq-list-size-container-padding-right, var(--kbq-size-m)) - var(
+                --kbq-list-size-container-focus-outline-width,
+                var(--kbq-size-3xs)
+            )
+    );
+    padding-bottom: var(--kbq-list-size-container-padding-vertical, var(--kbq-size-xxs));
+    padding-left: calc(
+        var(--kbq-list-size-container-padding-left, var(--kbq-size-m)) - var(
+                --kbq-list-size-container-focus-outline-width,
+                var(--kbq-size-3xs)
+            )
+    );
+
+    .kbq-list-option-caption {
+        padding-top: var(--kbq-list-size-container-content-gap-vertical, var(--kbq-size-3xs));
+    }
 
     &:not(.kbq-disabled) {
         cursor: pointer;
+    }
+}
+
+// `cursor: grabbing` goes on the body rather than on the dragged element, which CDK hides from hit
+// testing anyway: https://github.com/angular/components/blob/18.2.14/src/cdk/drag-drop/resets.scss#L14-L15
+// The body alone is not enough, though: the cursor is resolved from whatever sits under the pointer, and
+// during a drag that is another option, whose own `grab` outranks anything the body sets.
+// Keyed on the preview because it is in the DOM for as long as the drag lasts, and unlike
+// `cdk-drop-list-dragging` it is not an Angular host binding waiting on change detection. The class
+// comes from `CdkDrag.previewClass`, so the hook holds whichever shape `dragPreview` gives the preview.
+body:has(.kbq-list-drag-preview) {
+    cursor: grabbing;
+
+    // Qualified with both classes so it outranks the `kbq-list-option_grab-cursor` rule below: that one
+    // adds a `:not(:has())`, which counts as a class, and a row that advertises the grab would otherwise
+    // keep advertising it mid-drag.
+    .kbq-list-option.kbq-list-option_draggable,
+    .kbq-list-option_draggable .cdk-drag-handle {
+        cursor: grabbing;
+    }
+
+    // What is being dragged into is the list, not the row under the pointer, so a row that lights up on
+    // hover promises a reaction it will not deliver. Taking the options out of hit testing drops `:hover`
+    // and `:active` in one go, and keeps a stray click off the action button mid-drag.
+    .kbq-list-option {
+        pointer-events: none;
+    }
+
+    // A group header is the one thing left inside a list that still resolves a cursor of its own: it is
+    // not an option, so nothing takes it out of hit testing, and `.kbq-optgroup-label` sets `default`.
+    // The pointer crossing a header is still over the list, so it must not read as leaving it — over a
+    // `kbq-divider`, which sets no cursor at all, it already does not. `inherit` rather than `grabbing`
+    // so the header also follows the body into `no-drop` below.
+    .kbq-optgroup-label {
+        cursor: inherit;
+    }
 
-        &.kbq-hovered,
-        &:hover,
-        &.kbq-focused,
-        &.kbq-action-button-focused {
-            & .kbq-action-container {
-                display: flex;
-            }
-        }
+    // Nothing under the pointer would take the option, so stop promising a drop. Nested rather than
+    // written as a sibling: it has to outrank `grabbing` above on specificity, not on source order.
+    &:has(.kbq-list-option_drop-forbidden) {
+        cursor: no-drop;
     }
 }
 
+// Option-only: `.kbq-selected` never lands on `.kbq-list-item`, and only options host an action container.
+.kbq-list-option {
+    @include _kbq-list-option-selected-border-radius();
+    @include action-container.kbq-option-action-visibility('.kbq-list-selection.cdk-keyboard-focused');
+
+    // A projected handle is the one thing that always advertises the grab: it exists to say where the
+    // row can be picked up.
+    &.kbq-list-option_draggable .cdk-drag-handle {
+        cursor: grab;
+    }
+
+    // The row itself only advertises it when the list asks, through `dragCursor="grab"` — being
+    // draggable is not on its own a reason to stop looking like the selectable row it also is. Matched
+    // on as many classes as the rule this replaces, so the drag-time `grabbing` above keeps outranking
+    // it by its one element, and nothing else in the cascade shifts.
+    &.kbq-list-option_grab-cursor:not(:has(.cdk-drag-handle)) {
+        cursor: grab;
+    }
+
+    // The row the drag started from keeps its slot. `cdk-drag-anchor` is the clone CDK leaves behind
+    // once the option has been dragged into a connected list.
+    &.cdk-drag-placeholder,
+    &.cdk-drag-anchor {
+        opacity: var(--kbq-opacity-disabled);
+    }
+
+    // Hidden while the placeholder sits in a list the option was not dragged from, so that list keeps
+    // its layout. Toggled from `KbqListSelection` on `cdkDropListEntered`.
+    &.kbq-list-option_foreign-placeholder {
+        display: none;
+    }
+
+    // No `.cdk-drag-animating` transition on purpose. CDK animates the preview onto the placeholder,
+    // which — with sorting disabled — never leaves the slot the drag started from, so the preview
+    // would fly back to the origin and read as a rejected drop. With no transition declared the
+    // duration is 0 and CDK disposes of the preview without animating it anywhere.
+}
+
+// Marks the gap the dragged option would land in. Sorting is disabled, so the list never opens a gap
+// of its own and this line is the only feedback about the target position.
+.kbq-list-selection__drop-indicator {
+    position: absolute;
+    background: var(--kbq-list-states-dragged-indicator-color);
+    pointer-events: none;
+}
+
+.kbq-list-selection:not(.kbq-list-selection_horizontal) .kbq-list-selection__drop-indicator {
+    left: 0;
+    right: 0;
+    // The line straddles the gap instead of sitting below it, so it reads as "between these two rows".
+    top: calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);
+    block-size: var(--kbq-list-size-dragged-indicator-thickness);
+}
+
+.kbq-list-selection_horizontal .kbq-list-selection__drop-indicator {
+    top: 0;
+    bottom: 0;
+    left: calc(var(--kbq-list-drop-indicator-offset, 0px) - var(--kbq-list-size-dragged-indicator-thickness) / 2);
+    inline-size: var(--kbq-list-size-dragged-indicator-thickness);
+}
+
 @include theme.kbq-list-theme();
 @include theme.kbq-list-typography();
+
+// Declared after the theme so it outranks the default state, whose background is `transparent`
+// because an option normally sits on the surface of its list. The dragged clone has no such surface.
+// Selected states carry a higher specificity and deliberately keep their own background.
+.kbq-list-option.cdk-drag-preview {
+    background: var(--kbq-list-states-dragged-container-background);
+    box-shadow: var(--kbq-list-states-dragged-container-shadow);
+}
+
+// The default preview: a plate of the option's text rather than a clone of the row. It is inserted into
+// `<body>`, so it inherits nothing from the list and carries its own tokens — the same reason the clone
+// is listed in `list-tokens.scss`. No width: CDK pins the preview `position: fixed`, which already
+// shrinks the box to its content, so only the maximum is worth stating. No `transition` either, for the
+// same reason as the clone above — a zero duration lets CDK drop the preview instead of flying it back.
+.kbq-list-drag-preview_text {
+    // The cap is on the plate, not on the text inside it, and the page default here is `content-box`.
+    box-sizing: border-box;
+    max-inline-size: var(--kbq-list-size-drag-preview-max-width);
+    border-radius: var(--kbq-size-border-radius);
+    padding: var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-right)
+        var(--kbq-list-size-container-padding-vertical) var(--kbq-list-size-container-padding-left);
+    background: var(--kbq-list-states-drag-preview-background);
+    box-shadow: var(--kbq-list-states-dragged-container-shadow);
+    color: var(--kbq-list-default-text-color);
+
+    // Clamped line by line, not on the plate: a long label must not push the caption out of the box.
+    .kbq-list-drag-preview__label,
+    .kbq-list-drag-preview__caption {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .kbq-list-drag-preview__caption {
+        color: var(--kbq-list-default-caption-color);
+        padding-top: var(--kbq-list-size-container-content-gap-vertical);
+    }
+}

package/markdown/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Provider, OnDestroy } from '@angular/core';
+import { InjectionToken, OnDestroy, Provider } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { MarkedOptions } from 'marked';
 

package/modal/index.d.ts

@@ -1,9 +1,10 @@
 import { Observable } from 'rxjs';
 import * as i0 from '@angular/core';
 import { TemplateRef, Type, EventEmitter, Injector, OnInit, OnChanges, AfterViewInit, OnDestroy, ElementRef, ViewContainerRef, SimpleChanges, ComponentRef, PipeTransform, InjectionToken } from '@angular/core';
-import * as i1 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayRef, Overlay } from '@angular/cdk/overlay';
-import { KbqComponentColors } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { KbqComponentColors, KbqOverflowShadowState } from '@koobiq/components/core';
 import * as i2 from '@angular/cdk/a11y';
 import * as i3 from '@koobiq/components/button';
 import * as i4 from '@koobiq/components/icon';
@@ -141,6 +142,13 @@ declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> impl
     maskAnimationClassMap: object | null;
     modalAnimationClassMap: object | null;
     transformOrigin: string;
+    /**
+     * 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: i0.WritableSignal<KbqOverflowShadowState>;
     get afterOpen(): Observable<void>;
     /** Observable alias for `kbqBeforeClose` */
     get beforeClose(): Observable<R | undefined>;
@@ -250,11 +258,20 @@ 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.
+ */
 declare class KbqModalBody {
+    private readonly modal;
+    private readonly overflowContainer;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqOverflowShadowContainer; inputs: {}; outputs: {}; }]>;
 }
 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>;
 }
@@ -271,7 +288,7 @@ declare class CssUnitPipe implements PipeTransform {
 
 declare class KbqModalModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, never, [typeof i1.OverlayModule, typeof i2.A11yModule, typeof i3.KbqButtonModule, typeof i4.KbqIconModule, typeof i5.KbqTitleModule, typeof i6.NgTemplateOutlet, typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof CssUnitPipe, typeof KbqModalMainAction], [typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof KbqModalMainAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, never, [typeof i1$1.OverlayModule, typeof i2.A11yModule, typeof i3.KbqButtonModule, typeof i4.KbqIconModule, typeof i5.KbqTitleModule, typeof i6.NgTemplateOutlet, typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof CssUnitPipe, typeof KbqModalMainAction], [typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof KbqModalMainAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqModalModule>;
 }
 

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/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

@@ -4,7 +4,7 @@ import * as i2 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i1 from '@angular/cdk/a11y';
 import { FocusOrigin, FocusMonitor } from '@angular/cdk/a11y';
-import { KbqButtonCssStyler, KbqButton } from '@koobiq/components/button';
+import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import * as _koobiq_components_core from '@koobiq/components/core';
 import { IFocusableOption, FocusKeyManager } from '@koobiq/components/core';
 import { KbqFormField } from '@koobiq/components/form-field';
@@ -31,11 +31,25 @@ 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;
+    /**
+     * 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;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, true, never>;
@@ -93,6 +107,15 @@ declare class KbqNavbarRectangleElement {
     set collapsed(value: boolean);
     private _collapsed;
     readonly button: i0.Signal<KbqButtonCssStyler | undefined>;
+    /**
+     * 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>;
@@ -143,10 +166,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 +207,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>;
 }

package/navbar/navbar-brand.scss

@@ -46,6 +46,14 @@ a.kbq-navbar-brand {
     }
 
     & .kbq-navbar-title {
+        // 154px is a raw number, and it caps the text rather than the box: the padding beside it is
+        // spacing towards the collapse control, not part of the budget. Under a global `border-box`
+        // reset in a consuming application the cap would absorb the padding and a long brand title
+        // would start truncating 12px earlier.
+        box-sizing: content-box;
+
+        max-width: 154px;
+
         padding-right: var(--kbq-size-m);
     }
 }
@@ -85,14 +93,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 +158,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/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/index.d.ts

@@ -195,7 +195,8 @@ declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterVi
      * 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;

package/notification-center/notification-item.scss

@@ -28,6 +28,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.1.0",
+    "version": "20.3.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.1.0",
-        "@koobiq/angular-luxon-adapter": "20.1.0",
+        "@koobiq/angular-moment-adapter": "20.3.0",
+        "@koobiq/angular-luxon-adapter": "20.3.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"
@@ -55,9 +55,6 @@
         "./prebuilt-themes/theme.css": {
             "style": "./prebuilt-themes/theme.css"
         },
-        "./prebuilt-visual/default-visual.css": {
-            "style": "./prebuilt-visual/default-visual.css"
-        },
         "./package.json": {
             "default": "./package.json"
         },

package/popover/index.d.ts

@@ -1,12 +1,12 @@
 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 { InjectionToken, AfterViewInit, TemplateRef, AfterContentInit, OnInit, DestroyRef, EventEmitter, Type, ElementRef } 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 { ScrollStrategy, Overlay, OverlayConfig, CdkScrollable } 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';