@koobiq/components 19.8.5 → 19.8.7

package/accordion/accordion-content.directive.d.ts

@@ -1,8 +1,9 @@
-import { AfterContentInit, AfterViewInit } from '@angular/core';
+import { AfterContentInit, AfterViewInit, DoCheck } from '@angular/core';
 import { KbqAccordionItem } from './accordion-item';
 import * as i0 from "@angular/core";
-export declare class KbqAccordionContentDirective implements AfterContentInit, AfterViewInit {
+export declare class KbqAccordionContentDirective implements AfterContentInit, DoCheck, AfterViewInit {
     private readonly renderer;
+    private readonly injector;
     private readonly platform;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
@@ -15,13 +16,32 @@ export declare class KbqAccordionContentDirective implements AfterContentInit, A
     /** @docs-private */
     protected readonly hidden: import("@angular/core").WritableSignal<boolean>;
     private savedTransition;
-    private readonly afterRenderRef?;
+    /** Whether the first browser render has happened; until then a toggle only sets the initial state. */
+    private rendered;
     constructor();
+    ngDoCheck(): void;
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     toggle(): void;
+    /** @docs-private */
+    protected onTransitionEnd(event: TransitionEvent): void;
     disableAnimation(): void;
     enableAnimation(): void;
+    /**
+     * Pins the height the transition runs between: the natural height of the content when expanding,
+     * the current one when collapsing. The pin is released once the transition ends, so expanded
+     * content keeps `height: auto` and follows its own size — its container can be laid out later
+     * (a content panel, an overlay) or resized, and nested items can toggle.
+     *
+     * `scrollHeight` reports the natural height even while the `overflow: hidden` host is collapsed.
+     */
+    private pinHeight;
+    /** Checks the pin once `data-state` has flipped. */
+    private settleHeight;
+    /** Whether a height transition runs on the host; `undefined` without the Web Animations API. */
+    private isHeightTransitionRunning;
+    private setHeight;
+    private releaseHeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContentDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContentDirective, "[kbqAccordionContent]", ["kbqAccordionContent"], {}, {}, never, never, true, never>;
 }

package/accordion/accordion-trigger.component.d.ts

@@ -4,6 +4,7 @@ import { KbqAccordion } from './accordion.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./accordion-trigger.directive";
 export declare class KbqAccordionTrigger implements AfterViewInit {
+    private readonly platform;
     /** @docs-private */
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */

package/accordion/accordion.component.scss

@@ -24,13 +24,16 @@
     overflow: hidden;
 
     & > p {
+        // Nested contents must not inherit this host's pinned height.
+        --radix-accordion-content-height: initial;
+
         margin: unset;
         padding: var(--kbq-accordion-size-item-content-padding);
     }
 
     &[data-state='open'] {
         transition: 300ms ease-out;
-        height: var(--radix-accordion-content-height);
+        height: var(--radix-accordion-content-height, auto);
     }
 
     &[data-state='closed'] {

package/alert/alert-tokens.scss

@@ -40,16 +40,16 @@
     --kbq-alert-size-compact-no-title-icon-margin-top: var(--kbq-size-m);
     --kbq-alert-size-compact-no-title-icon-padding-top: var(--kbq-size-3xs);
     /* THEME TOKENS */
-    --kbq-alert-default-error-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-error-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-error-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-error-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-default-warning-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-warning-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-warning-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-warning-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-default-success-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-success-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-success-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-success-container-text: var(--kbq-foreground-contrast);
-    --kbq-alert-default-info-container-background: var(--kbq-background-contrast-fade);
+    --kbq-alert-default-info-container-background: var(--kbq-background-contrast-less);
     --kbq-alert-default-info-container-title: var(--kbq-foreground-contrast);
     --kbq-alert-default-info-container-text: var(--kbq-foreground-contrast);
     --kbq-alert-colored-error-container-background: var(--kbq-background-error-less);

package/app-switcher/app-switcher.d.ts

@@ -71,9 +71,16 @@ export declare class KbqAppSwitcherComponent extends KbqPopUp implements AfterVi
     trigger: KbqAppSwitcherTrigger;
     /** @docs-private */
     isTrapFocus: boolean;
-    /** @docs-private */
+    /**
+     * No longer read: the flyouts take their site and app from `kbqDropdownTriggerData`. Kept so that
+     * the API of this line stays the same.
+     * @docs-private
+     */
     protected activeSite: KbqAppSwitcherSite;
-    /** @docs-private */
+    /**
+     * No longer read, the same as `activeSite`.
+     * @docs-private
+     */
     protected activeApp: KbqAppSwitcherApp;
     /** @docs-private */
     input: KbqInput;

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

@@ -10,13 +10,18 @@ import { KbqAutocompleteOrigin } from './autocomplete-origin.directive';
 import { KbqAutocomplete } from './autocomplete.component';
 import * as i0 from "@angular/core";
 /**
- * The following style constants are necessary to save here in order
- * to properly calculate the scrollTop of the panel. Because we are not
- * actually focusing the active item, scroll must be handled manually.
+ * The total height of the autocomplete panel.
+ *
+ * @deprecated Unused — the panel is capped by `--kbq-autocomplete-size-panel-max-height` and reveals its
+ * active option through `KbqOption.focus`, so nothing computes a scroll offset from this. Will be removed
+ * in the next major release.
  */
-/** The total height of the autocomplete panel. */
 export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
-/** Injection token that determines the scroll handling while the autocomplete panel is open. */
+/**
+ * Injection token that determines the scroll handling while the autocomplete panel is open. The root default
+ * keeps the trigger usable outside `KbqAutocompleteModule`'s injector; providing the token anywhere still wins
+ * over it.
+ */
 export declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 export declare function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
 export declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {

package/breadcrumbs/breadcrumbs.d.ts

@@ -19,9 +19,11 @@ export declare class KbqBreadcrumbsSeparator {
  * Directive to style and configure buttons used as breadcrumb items.
  * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
  * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
+ * - Sets `type="button"` on a `<button>` host, so a breadcrumb never submits a surrounding form.
  */
 export declare class KbqBreadcrumbButton implements OnInit {
     private readonly button;
+    protected readonly element: HTMLElement;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; }; outputs: {}; }]>;

package/breadcrumbs/breadcrumbs.scss

@@ -73,6 +73,10 @@
             --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
         }
 
+        &.kbq-dropdown-trigger {
+            --kbq-dropdown-trigger-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+        }
+
         &:focus-visible {
             outline-offset: unset;
         }

package/button/button-group.scss

@@ -3,15 +3,55 @@
 .kbq-button-group {
     &.kbq-button-group_horizontal {
         @include groups-mixins.group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-right-color: transparent;
+        }
     }
 
     &.kbq-button-group_vertical {
         @include groups-mixins.vertical-group(':is(.kbq-button, .kbq-button-icon)');
+
+        & > :is(.kbq-button, .kbq-button-icon):not(:last-child, .cdk-keyboard-focused) {
+            border-bottom-color: transparent;
+        }
     }
 
     &:not(:has(> :not(.kbq-contrast-fade.kbq-button_filled))),
     &:not(:has(> :not(.kbq-contrast.kbq-button_filled))) {
-        // @TODO tech debt (#DS-4847)
-        gap: var(--kbq-size-3xs);
+        :is(.kbq-button, .kbq-button-icon) {
+            background-clip: padding-box !important;
+        }
+    }
+
+    &.kbq-contrast-fade.kbq-button-group-root_filled {
+        // internal css variable, so don't prefixed with kbq
+        --button-group-divider-color: var(--kbq-line-contrast-fade);
+
+        &.kbq-button-group_horizontal {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                // offset by -1px because absolute positioning is relative to the padding edge,
+                // but the visual junction sits 1px to the left in the transparent border area
+                left: calc(-1 * var(--kbq-size-border-width));
+                top: 0;
+                bottom: 0;
+                width: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
+
+        &.kbq-button-group_vertical {
+            :is(.kbq-button, .kbq-button-icon):not(:first-child)::before {
+                content: '';
+                position: absolute;
+                top: calc(-1 * var(--kbq-size-border-width));
+                left: 0;
+                right: 0;
+                height: var(--kbq-size-border-width);
+                background: var(--button-group-divider-color);
+            }
+        }
     }
 }

package/button-toggle/button-toggle-tokens.scss

@@ -3,12 +3,28 @@
     --kbq-button-toggle-size-container-padding-horizontal: var(--kbq-size-xxs);
     --kbq-button-toggle-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-button-toggle-size-container-content-gap-horizontal: var(--kbq-size-xxs);
+    // 22px, not the design's 24px: the item's 1px border is outside this height. See the
+    // `box-sizing: content-box` in button-toggle.scss, which is what keeps that arithmetic true.
     --kbq-button-toggle-size-item-height: 22px;
     --kbq-button-toggle-size-item-border-radius: var(--kbq-size-xxs);
     --kbq-button-toggle-size-item-padding-horizontal: var(--kbq-size-s);
     --kbq-button-toggle-size-item-padding-vertical: var(--kbq-size-3xs);
     --kbq-button-toggle-size-item-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-button-toggle-size-item-focus-outline-width: var(--kbq-size-3xs);
+    // How far an item's hit area reaches past the pill it paints. Measured from the inner button's
+    // border box, one item border inside the item's own — hence the border-width term in each. `-gap` is
+    // the half of the inter-item gap an item claims; the other two cover the group's padding. The
+    // pseudo-element they offset is in button-toggle.scss, next to the note on the two other places
+    // this repo extends a hit area the same way.
+    --kbq-button-toggle-size-item-hit-area-gap: calc(
+        var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-content-gap-horizontal) / 2
+    );
+    --kbq-button-toggle-size-item-hit-area-horizontal: calc(
+        var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-horizontal)
+    );
+    --kbq-button-toggle-size-item-hit-area-vertical: calc(
+        var(--kbq-size-border-width) + var(--kbq-button-toggle-size-container-padding-vertical)
+    );
     /* THEME TOKENS */
     --kbq-button-toggle-container-background: var(--kbq-background-contrast-fade);
     --kbq-button-toggle-item-default-background: var(--kbq-background-transparent);

package/button-toggle/button-toggle.component.d.ts

@@ -30,6 +30,8 @@ export declare class KbqButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Whether the toggle group is vertical. */
     get vertical(): boolean;
     set vertical(value: boolean);
+    /** Whether the toggle group stretches to fill its container width, with toggles sharing equal space. */
+    readonly stretched: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** Value of the toggle group. */
     get value(): any;
     set value(newValue: any);
@@ -100,7 +102,7 @@ export declare class KbqButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Selects a value if there's a toggle that corresponds to it. */
     private selectValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "stretched": { "alias": "stretched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
 }
 /** Single button inside of a toggle group. */
 export declare class KbqButtonToggle implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {

package/button-toggle/button-toggle.scss

@@ -17,10 +17,33 @@
 
     .kbq-button-toggle {
         display: flex;
-        overflow: hidden;
         justify-content: flex-start;
         align-items: center;
 
+        // Must not clip: the button's hit area below reaches outside this box. Not `overflow: clip` with
+        // an `overflow-clip-margin` — Chromium rejects math functions there, so the margin cannot follow
+        // the tokens the offsets come from and computes to `0px`, clipping the hit area away.
+
+        // What the item stops containing, and why nothing here takes it back: a toggle projects its
+        // content into the button's own `.kbq-button-text`, which keeps the `overflow: hidden` of
+        // `kbq-truncate-line()`, so content still cannot spill sideways past the button's content box.
+        // Content *taller* than the fixed item height no longer is — and cannot be re-clipped from
+        // inside the button, since the only boxes there with a definite height are the button itself,
+        // whose `::before` this exists for, and the label box, which would clip its own descenders.
+        overflow: visible;
+
+        // What that clip used to give for free: a flex item's automatic minimum size is zero only while
+        // its `overflow` is non-`visible`, and that is what lets the label truncate.
+        min-width: 0;
+
+        // Content-box on purpose, and load-bearing. `--kbq-button-toggle-size-item-height` is 22px,
+        // not the 24px of the design's `--kbq-size-xxl`: DS-3136 subtracted the border it added here
+        // from the token rather than from the rendered box, so the item only reaches its designed
+        // 24px while the border sits outside the declared height. A global `border-box` reset in a
+        // consuming application would pull the border back inside and leave the item 2px short —
+        // and the inner button, which is sized from the same token, would then spill past it.
+        box-sizing: content-box;
+
         height: var(--kbq-button-toggle-size-item-height);
         min-height: var(--kbq-button-toggle-size-item-height);
 
@@ -48,12 +71,28 @@
                     button-toggle-size-item-focus-outline-width]
                 );
 
+            // Hit area over the gutters the group's `gap` and `padding` leave around the pill this button
+            // paints, so the highlight does not drop out between segments. On the button, not the item
+            // host, so pointer events resolve to it and the gutter is clickable too. `::before` because
+            // `::after` is the `.kbq-progress` shimmer. Offsets are per orientation, below.
+
+            // The third place this repo extends a hit area with a transparent pseudo-element, after
+            // `.kbq-navbar-item`'s `:before` (DS-2558) and `select.item-active-area()`. Neither is
+            // reusable here: the mixin claims a fixed strip on one side of a plain vertical list, with
+            // no gap to tile between two neighbours, no group padding at the ends, and no orientation
+            // to swap the axes for.
+            &:before {
+                content: '';
+                position: absolute;
+            }
+
             & .kbq-button-wrapper {
                 width: 100%;
             }
 
             .kbq-button-toggle-wrapper {
                 display: inline-flex;
+                justify-content: center;
 
                 text-overflow: ellipsis;
                 overflow: hidden;
@@ -71,6 +110,16 @@
         }
     }
 
+    // Hit-area offsets, one orientation each — the vertical block below is this one with the axes
+    // swapped. The gap is split at its midline so two neighbours tile it rather than overlap, which would
+    // hand the whole gutter to whichever paints last; the outermost sides have no neighbour to share with
+    // and take the group's padding instead, leaving no point inside the group unclaimed.
+
+    // `:first-of-type`/`:last-of-type`, not `:first-child`/`:last-child`: the group is a bare directive
+    // with no template, so a consumer's own element — a divider, a leading icon — is rendered as a real
+    // child among the toggles and would take the positional match away from the toggle that actually sits
+    // at the edge, putting the dead zone back. The class only ever lands on a `kbq-button-toggle` element,
+    // so matching by type reads the toggles alone.
     &:not(.kbq-button-toggle_vertical) {
         .kbq-button-toggle {
             > .kbq-button,
@@ -78,6 +127,61 @@
                 max-width: 100%;
 
                 height: var(--kbq-button-toggle-size-item-height);
+
+                &:before {
+                    inset-block: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));
+                    inset-inline: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap));
+                }
+            }
+
+            &:first-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-inline-start: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));
+            }
+
+            &:last-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-inline-end: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));
+            }
+        }
+    }
+
+    &.kbq-button-toggle_vertical {
+        .kbq-button-toggle {
+            > .kbq-button,
+            > .kbq-button-icon {
+                &:before {
+                    inset-inline: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-horizontal));
+                    inset-block: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-gap));
+                }
+            }
+
+            &:first-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-block-start: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));
+            }
+
+            &:last-of-type > :is(.kbq-button, .kbq-button-icon):before {
+                inset-block-end: calc(-1 * var(--kbq-button-toggle-size-item-hit-area-vertical));
+            }
+        }
+    }
+
+    &.kbq-button-toggle-group_stretched {
+        width: 100%;
+
+        .kbq-button-toggle {
+            flex: 1;
+
+            > .kbq-button,
+            > .kbq-button-icon {
+                width: 100%;
+                flex: 1;
+
+                .kbq-button-wrapper {
+                    justify-content: center;
+                }
+
+                .kbq-button-toggle-wrapper {
+                    display: block;
+                }
             }
         }
     }

package/checkbox/checkbox.scss

@@ -32,9 +32,7 @@
 
     max-width: calc(100% - var(--padding));
 
-    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
-    // (e.g. pointer by default, regular when disabled), instead of the browser default.
-    cursor: inherit;
+    cursor: pointer;
 
     padding-top: var(--kbq-checkbox-size-normal-padding-top);
 
@@ -56,7 +54,6 @@
 .kbq-checkbox {
     display: inline-block;
 
-    cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
     max-width: 100%;
@@ -89,6 +86,10 @@
     &.kbq-disabled {
         cursor: default;
 
+        .kbq-checkbox__layout {
+            cursor: default;
+        }
+
         .kbq-checkbox__frame {
             box-shadow: none;
         }

package/clamped-text/clamped-text.d.ts

@@ -34,6 +34,7 @@ export declare class KbqClampedText implements KbqClamped, OnInit, AfterViewInit
     private readonly destroyRef;
     private readonly elementRef;
     private readonly resizeObserver;
+    private readonly platform;
     /**
      * Clamped text locale configuration.
      * @docs-private

package/core/form-field/field-sizing-content.d.ts

@@ -14,7 +14,6 @@ export declare class KbqFieldSizingContent {
     constructor();
     private emulate;
     private setupWidth;
-    private createRuler;
     private calculateWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFieldSizingContent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFieldSizingContent, "[kbqFieldSizingContent]", ["kbqFieldSizingContent"], {}, {}, never, never, true, never>;

package/core/form-field/form-field-ref.d.ts

@@ -3,6 +3,7 @@ import { InjectionToken, ModelSignal } from '@angular/core';
  * @deprecated Will be removed in next major release, use `KbqFormField` instead.
  */
 export interface KbqFormFieldRef {
+    /** @see KbqFormField.control */
     control: any;
     canCleanerClearByEsc: boolean;
     /** Use when KbqFormField is in an overlay container. */

package/core/form-field/index.d.ts

@@ -1,2 +1,3 @@
 export * from './field-sizing-content';
 export * from './form-field-ref';
+export * from './text-field-selection';

package/core/form-field/text-field-selection.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Scrolls a text field horizontally so that its current selection is visible.
+ *
+ * Browsers scroll a field to the caret only for edits the user makes: a selection set from script leaves
+ * the field at whatever offset the last keystroke produced. A masked field re-renders its value and moves
+ * the caret between value parts on every keystroke, so without this the field keeps the offset of the part
+ * that was edited before and clips the one being edited now.
+ *
+ * Leaves the field alone when it is not focused, when it renders something other than its value, and in
+ * right-to-left text, where the browser's own caret following is already correct.
+ */
+export declare const kbqRevealSelection: (element: HTMLInputElement) => void;
+/**
+ * Selects the `[start, end]` range of a text field and keeps it visible.
+ *
+ * @see {@link kbqRevealSelection}
+ */
+export declare const kbqSetSelectionRange: (element: HTMLInputElement, start: number, end: number) => void;

package/core/form-field/text-ruler.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Builds a hidden element that renders text with the typography of the element `computedStyle` was taken
+ * from. Append it to the document, measure through {@link kbqMeasureRulerText}, and remove it.
+ *
+ * @docs-private
+ */
+export declare const kbqCreateTextRuler: (document: Document, computedStyle: CSSStyleDeclaration) => HTMLSpanElement;
+/**
+ * Width of `text` in pixels, in the same coordinate space as `clientWidth` and `scrollLeft`.
+ *
+ * `scrollWidth`, not `getBoundingClientRect()`: the latter reports the transformed box, which disagrees
+ * with the untransformed layout metrics it would be compared against under a scaled ancestor.
+ *
+ * @docs-private
+ */
+export declare const kbqMeasureRulerText: (ruler: HTMLSpanElement, text: string) => number;

package/core/navbar/rectangle-item.d.ts

@@ -8,6 +8,14 @@ export declare class KbqRectangleItem {
     get collapsed(): boolean;
     set collapsed(value: boolean);
     private _collapsed;
+    /**
+     * Outer width of the item: its border box plus horizontal margins.
+     *
+     * `getComputedStyle().width` resolves to the used content-box width whatever `box-sizing` says,
+     * so it silently drops padding and borders on the `border-box` elements this measures, and the
+     * result would change again under a consuming application's global reset.
+     * `getBoundingClientRect()` is always the border box, which makes it host-independent.
+     */
     getOuterElementWidth(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqRectangleItem, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqRectangleItem, never, never, {}, {}, never, never, true, never>;

package/core/option/_action-container-mixins.scss

@@ -0,0 +1,28 @@
+/// Decides when the trailing `<kbq-option-action>` of an option becomes visible.
+///
+/// `.kbq-action-container` is `display: none` by default (see `action-container.scss`),
+/// so this mixin is the single source of truth for the reveal rules shared by
+/// `kbq-list-option` and `kbq-tree-option`. Include it inside the option's own rule.
+///
+/// @param {String} $keyboard-focused-host - selector of the focus-monitored selection host
+///   that CDK's `FocusMonitor` marks with `cdk-keyboard-focused`.
+@mixin kbq-option-action-visibility($keyboard-focused-host) {
+    &:not(.kbq-disabled) {
+        &:hover,
+        &.kbq-hovered,
+        &.kbq-action-button-focused {
+            & .kbq-action-container {
+                display: flex;
+            }
+        }
+    }
+
+    // Roving focus reveals the action only when focus arrived from the keyboard.
+    // `.kbq-focused` alone is not enough: options are `tabindex="-1"`, so a mouse click
+    // focuses them too and the action would stay visible after the pointer moves away.
+    #{$keyboard-focused-host} &:not(.kbq-disabled).kbq-focused {
+        & .kbq-action-container {
+            display: flex;
+        }
+    }
+}

package/core/option/_option-theme.scss

@@ -36,6 +36,10 @@
             @include kbq-option(states-disabled);
         }
 
+        &.kbq-selected.kbq-disabled {
+            background: var(--kbq-list-states-selected-container-background);
+        }
+
         &:is(.kbq-selected, .kbq-active):has(+ :is(.kbq-selected, .kbq-active)) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
@@ -55,6 +59,10 @@
                 @include kbq-option(multiple-states-selected-hover);
             }
         }
+
+        &.kbq-selected.kbq-disabled {
+            background: var(--kbq-list-multiple-states-selected-container-background);
+        }
     }
 }
 

package/core/option/action.d.ts

@@ -36,3 +36,12 @@ export declare class KbqOptionActionComponent implements AfterViewInit, OnDestro
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[kbq-icon]"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }
+/**
+ * Moves focus from an option to its trailing action button on Tab.
+ *
+ * Shared by `KbqListOption` and `KbqTreeOption` so the two cannot drift apart. Tab is swallowed only
+ * when focus actually landed: the action lives in a `display: none` container until the option is
+ * hovered or keyboard-focused, and focusing a hidden element is a no-op, so suppressing Tab there
+ * would trap focus on the option.
+ */
+export declare function kbqFocusOptionActionOnTab($event: KeyboardEvent, actionButton: KbqOptionActionComponent | undefined): void;

package/core/option/action.scss

@@ -11,6 +11,13 @@
 
     outline: none;
 
+    // The transparent border reserves the focus ring, and the size token below is the icon box
+    // without it: 20px + 2 * 2px comes out at the 24px the action actually occupies. Declared so a
+    // global `border-box` reset in a consuming application cannot pull the ring inside and leave the
+    // icon box at 16px. Note that `.kbq-option` next to it uses the same transparent-border trick
+    // the other way round — it is `border-box`, and its 32px is the whole row.
+    box-sizing: content-box;
+
     border: var(--kbq-size-3xs) solid transparent;
     border-radius: var(--kbq-size-xs);