@koobiq/components 20.1.0 → 20.3.0

package/toggle/index.d.ts

@@ -1,18 +1,23 @@
 import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { TransitionCheckState, KbqCheckboxClickAction } from '@koobiq/components/checkbox';
-import { KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
-import * as i1 from '@angular/cdk/a11y';
+import * as i1 from '@koobiq/components/core';
+import { KbqColorDirective, TransitionCheckState, KbqCheckableClickAction, KbqCheckedState } from '@koobiq/components/core';
+import * as i1$1 from '@angular/cdk/a11y';
 
 type ToggleLabelPositionType = 'left' | 'right';
 declare class KbqToggleChange {
     source: KbqToggleComponent;
     checked: boolean;
 }
+/**
+ * Toggle click action when user click on input element. Alias of `KbqCheckableClickAction`.
+ */
+type KbqToggleClickAction = KbqCheckableClickAction;
 declare class KbqToggleComponent extends KbqColorDirective implements AfterViewInit, ControlValueAccessor, OnDestroy {
-    private focusMonitor;
-    private changeDetectorRef;
+    private readonly changeDetectorRef;
+    private readonly focusMonitor;
+    private readonly checkable;
     readonly big: _angular_core.InputSignal<boolean>;
     readonly inputElement: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     readonly labelPosition: _angular_core.InputSignal<ToggleLabelPositionType>;
@@ -24,13 +29,10 @@ declare class KbqToggleComponent extends KbqColorDirective implements AfterViewI
     readonly value: _angular_core.InputSignal<string>;
     get disabled(): any;
     set disabled(value: any);
-    private _disabled;
     get tabIndex(): number;
     set tabIndex(value: number);
-    private _tabIndex;
     get checked(): boolean;
     set checked(value: boolean);
-    private _checked;
     /**
      * Whether the toggle is indeterminate. This is also known as "mixed" mode and can be used to
      * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
@@ -39,7 +41,6 @@ declare class KbqToggleComponent extends KbqColorDirective implements AfterViewI
      */
     get indeterminate(): boolean;
     set indeterminate(value: boolean);
-    private _indeterminate;
     /**
      * Property for manually set loading state.
      */
@@ -50,7 +51,7 @@ declare class KbqToggleComponent extends KbqColorDirective implements AfterViewI
     /** @docs-private */
     protected currentCheckState: TransitionCheckState;
     /** Defines the behavior when a user clicks on the toggle. */
-    clickAction: KbqCheckboxClickAction;
+    clickAction: KbqToggleClickAction;
     private uniqueId;
     constructor();
     ngAfterViewInit(): void;
@@ -60,25 +61,44 @@ declare class KbqToggleComponent extends KbqColorDirective implements AfterViewI
     onChangeEvent(event: Event): void;
     onLabelTextChange(): void;
     onInputClick(event: MouseEvent): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     writeValue(value: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     registerOnChange(fn: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     registerOnTouched(fn: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @deprecated Unused - `ControlValueAccessor` is now implemented by the `KbqCheckable` host directive,
+     * so this is never called by Angular forms. Will be removed in the next major version.
+     */
     setDisabledState(isDisabled: boolean): void;
     private setTransitionCheckState;
-    private onTouchedCallback;
-    private onChangeCallback;
     private transitionCheckState;
     private emitChangeEvent;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "big": { "alias": "big"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickAction": { "alias": "clickAction"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqToggleComponent, "kbq-toggle", ["kbqToggle"], { "big": { "alias": "big"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "clickAction": { "alias": "clickAction"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, [{ directive: typeof i1.KbqCheckable; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_indeterminate: unknown;
 }
 
 declare class KbqToggleModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqToggleModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqToggleModule, never, [typeof i1.A11yModule, typeof KbqToggleComponent], [typeof KbqToggleComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqToggleModule, never, [typeof i1$1.A11yModule, typeof KbqToggleComponent], [typeof KbqToggleComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqToggleModule>;
 }
 
 export { KbqToggleChange, KbqToggleComponent, KbqToggleModule };
+export type { KbqToggleClickAction };

package/tooltip/index.d.ts

@@ -1,10 +1,42 @@
-import * as rxjs from 'rxjs';
 import * as i0 from '@angular/core';
 import { InjectionToken, ElementRef, AfterViewInit, OnChanges, OnDestroy, Renderer2, WritableSignal, TemplateRef, EventEmitter, SimpleChanges, Type } from '@angular/core';
+import * as rxjs from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ScrollStrategy, Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { KbqPopUp, KbqPopUpTrigger, KbqParentPopup, KbqPopUpPlacementValues, KbqComponentColors } from '@koobiq/components/core';
 
+/**
+ * Default value of the `kbqTooltipSingleInstance` input. Provide `false` at the application level to
+ * globally disable the "only one tooltip is visible at a time" behavior.
+ */
+declare const KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT: InjectionToken<boolean>;
+/**
+ * Contract of a tooltip taking part in the "only one tooltip is visible at a time" group.
+ * @docs-private
+ */
+interface KbqExclusiveTooltip {
+    /** Hides the tooltip because another tooltip — or a pop-up on the same element — has taken its place. */
+    hideAsInactive(): void;
+}
+/**
+ * Keeps track of the single tooltip that is currently visible, so that showing a new one hides the
+ * previous. Holds the *trigger*, not the overlay component — the latter is re-created on every show.
+ */
+declare class KbqTooltipRegistry {
+    /** Tooltip that currently owns the screen, or `null` when nothing is visible. */
+    private visibleTooltip;
+    /** Marks the tooltip as the only visible one, hiding the previously visible tooltip. */
+    setVisible(tooltip: KbqExclusiveTooltip): void;
+    /**
+     * Clears the registry, but only when the given tooltip is still the registered one. The guard
+     * matters because hiding the previous tooltip is asynchronous: its `visibleChange(false)` arrives
+     * after the new tooltip has already been registered, and must not wipe that newer entry.
+     */
+    clearVisible(tooltip: KbqExclusiveTooltip): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqTooltipRegistry>;
+}
+
 declare enum TooltipModifier {
     Default = "default",
     Warning = "warning",
@@ -48,11 +80,28 @@ declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  * tooltip-specific inputs (content, placement, color, arrow, enter/leave delays, modifier and header) and
  * behavior such as opening on keyboard focus only and positioning relative to the mouse cursor.
  */
-declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements AfterViewInit, OnChanges, OnDestroy {
+declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements AfterViewInit, OnChanges, OnDestroy, KbqExclusiveTooltip {
+    /** Registry holding the single tooltip that is currently visible. */
+    private readonly tooltipRegistry;
+    private readonly injectedScrollStrategy;
+    /**
+     * Per-instance override for the scroll strategy, taking precedence over `KBQ_TOOLTIP_SCROLL_STRATEGY`
+     * when set. An `@Input` rather than a DI override so it applies to this tooltip instance only, without
+     * leaking into other `kbqTooltip`s nested inside the same host (DI overrides are visible to every
+     * descendant in the element-injector tree, not just the element they're declared on).
+     * @docs-private
+     */
+    readonly scrollStrategyOverride: i0.InputSignal<(() => ScrollStrategy) | undefined>;
     /** @docs-private */
-    protected scrollStrategy: () => ScrollStrategy;
+    protected get scrollStrategy(): () => ScrollStrategy;
     /** @docs-private */
     protected parentPopup: KbqParentPopup | null;
+    /**
+     * Pop-ups anchored to the very same element — a popover, a dropdown, a select and so on. Resolved with
+     * `self` so a pop-up further up the tree (which the tooltip merely lives inside) is not picked up; that
+     * case is covered by `parentPopup`.
+     */
+    private readonly siblingPopups;
     /** @docs-private */
     protected focusMonitor: FocusMonitor;
     /** @docs-private */
@@ -72,6 +121,17 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
      * Defaults to `true`.
      */
     readonly ignoreTooltipPointerEvents: i0.InputSignal<boolean>;
+    /**
+     * Whether the tooltip takes part in the "only one tooltip is visible at a time" group: showing it
+     * hides the previously visible tooltip, and it is hidden when another tooltip is shown.
+     *
+     * Defaults to `true`; the default can be changed application-wide with the
+     * `KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT` token.
+     *
+     * Tooltips without an interactive `kbqTrigger` (`manual`, `none`, …) never take part in the group,
+     * regardless of this input — they are shown imperatively and are expected to stay pinned.
+     */
+    readonly singleInstance: i0.InputSignalWithTransform<boolean, unknown>;
     /**
      * Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger.
      * Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger
@@ -155,9 +215,39 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
      * the next show/hide cycle.
      */
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Whether this tooltip takes part in the "only one tooltip is visible at a time" group.
+     *
+     * Read through the `trigger` getter on purpose: `KbqTitleDirective` always reports `hover`, so title
+     * tooltips participate, while `kbqValidationTooltip` consumers (datepicker, timepicker, inline-edit)
+     * assign `trigger = 'manual'` and therefore stay out of the group.
+     */
+    private get participatesInSingleInstance();
+    /**
+     * Whether `kbqTrigger` contains at least one user-driven event, i.e. the tooltip is not driven purely
+     * imperatively. `manual`/`none` tooltips (the validation hints of datepicker, timepicker and inline-edit)
+     * bind no listeners and are expected to stay pinned while the user keeps interacting elsewhere.
+     */
+    private get hasInteractiveTrigger();
+    /**
+     * Whether the tooltip is muted because a pop-up on the same element has taken over the anchor.
+     *
+     * Set when that pop-up opens and released only once the pointer or the focus genuinely leaves the host,
+     * never on the pop-up closing. Both matter: a pop-up restores focus to its trigger when it closes (see
+     * `KbqPopoverComponent.onEscape`), and removing its backdrop replays `mouseenter` on the trigger without
+     * the pointer having moved — either would otherwise pop the tooltip up out of nowhere.
+     */
+    private mutedBySiblingPopup;
     /**
      * Sets up an effect that mirrors a `forDisabledComponent`'s disabled signal: when that component is disabled it
      * makes the host focusable (so the tooltip can still be triggered) and enables the tooltip, otherwise disables it.
+     *
+     * Also joins the "only one tooltip is visible at a time" group and mutes the tooltip while a pop-up on the
+     * same element is open. All of this wiring lives here rather than in `ngAfterViewInit`/`ngOnDestroy` because
+     * several subclasses override those hooks: `KbqTitleDirective` and `KbqEllipsisCenterDirective` skip
+     * `super.ngAfterViewInit()`, and `KbqPasswordToggle` skips `super` in both hooks entirely. `destroyRef`
+     * additionally covers a trigger destroyed while its tooltip is still visible — that path disposes the
+     * overlay without emitting `visibleChange(false)`.
      */
     constructor();
     /**
@@ -168,10 +258,31 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
     /** Stops focus monitoring on the host element and runs the base-class teardown. */
     ngOnDestroy(): void;
     /**
-     * Shows the tooltip after `delay` ms. Suppresses showing on a focus trigger that did not originate from
-     * the keyboard, and applies cursor-relative positioning when `relativeToPointer` is enabled.
+     * Shows the tooltip after `delay` ms. Suppresses showing while a pop-up on the same element holds the
+     * anchor or on a focus trigger that did not originate from the keyboard, and applies cursor-relative
+     * positioning when `relativeToPointer` is enabled.
      */
     show(delay?: number): void;
+    /**
+     * Hides the tooltip after `delay` ms and, when the user has genuinely left the host, un-mutes a tooltip
+     * that a pop-up on the same element had muted.
+     *
+     * `mouseleave` and `blur` are the release signals because the base class binds `hide` to both regardless
+     * of whether the tooltip is currently visible. A pop-up that is still attached does not count: its
+     * backdrop steals the hover from the trigger while the pointer stands still, and that `mouseleave` must
+     * not be mistaken for the user leaving.
+     */
+    hide(delay?: number): void;
+    /**
+     * Hides the tooltip because something else took its place — another tooltip became visible, or a pop-up
+     * anchored to the same element opened.
+     *
+     * Goes straight to the pop-up instead of `hide()`: `hide()` silently no-ops when the last recorded
+     * `triggerName` is `mouseleave` and the pop-up itself is hovered. Hiding through the instance keeps
+     * `visibleChange(false)` firing, so `isOpen`, `kbqVisibleChange` and the `kbqVisible` input stay in sync.
+     * Does nothing when the tooltip is already detached or when closing is prevented.
+     * @docs-private */
+    hideAsInactive(): void;
     /** method allows to show the tooltip relative to the given mouse event.
      * @docs-private */
     showForMouseEvent(event: MouseEvent): void;
@@ -195,7 +306,7 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
     /** @docs-private */
     protected applyRelativeToPointer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "forDisabledComponent": { "alias": "forDisabledComponent"; "required": false; "isSignal": true; }; "ignoreTooltipPointerEvents": { "alias": "ignoreTooltipPointerEvents"; "required": false; "isSignal": true; }; "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; "modifier": { "alias": "kbqTooltipModifier"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "scrollStrategyOverride": { "alias": "kbqTooltipScrollStrategy"; "required": false; "isSignal": true; }; "forDisabledComponent": { "alias": "forDisabledComponent"; "required": false; "isSignal": true; }; "ignoreTooltipPointerEvents": { "alias": "ignoreTooltipPointerEvents"; "required": false; "isSignal": true; }; "singleInstance": { "alias": "kbqTooltipSingleInstance"; "required": false; "isSignal": true; }; "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; "modifier": { "alias": "kbqTooltipModifier"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_hideWithTimeout: unknown;
     static ngAcceptInputType_relativeToPointer: unknown;
     static ngAcceptInputType_arrow: unknown;
@@ -208,4 +319,5 @@ declare class KbqToolTipModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToolTipModule>;
 }
 
-export { KBQ_TOOLTIP_OPEN_TIME, KBQ_TOOLTIP_OPEN_TIME_PROVIDER, KBQ_TOOLTIP_SCROLL_STRATEGY, KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqToolTipModule, KbqTooltipComponent, KbqTooltipTrigger, MIN_TIME_FOR_DELAY, TooltipModifier, kbqTooltipScrollStrategyFactory };
+export { KBQ_TOOLTIP_OPEN_TIME, KBQ_TOOLTIP_OPEN_TIME_PROVIDER, KBQ_TOOLTIP_SCROLL_STRATEGY, KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT, KbqToolTipModule, KbqTooltipComponent, KbqTooltipRegistry, KbqTooltipTrigger, MIN_TIME_FOR_DELAY, TooltipModifier, kbqTooltipScrollStrategyFactory };
+export type { KbqExclusiveTooltip };

package/tree/_tree-theme.scss

@@ -37,6 +37,13 @@
                 @include kbq-tree-option(states-hover);
             }
 
+            &:active,
+            &.kbq-active {
+                --kbq-option-background: var(--kbq-tree-states-active-container-background);
+
+                background: var(--kbq-tree-states-active-container-background);
+            }
+
             &.kbq-selected {
                 @include kbq-tree-option(states-selected);
 
@@ -44,6 +51,13 @@
                 &.kbq-hovered {
                     @include kbq-tree-option(states-selected-hover);
                 }
+
+                &:active,
+                &.kbq-active {
+                    --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-states-selected-active-container-background);
+                }
             }
 
             &.kbq-checked:not(.kbq-selected),
@@ -58,6 +72,13 @@
 
                     background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                 }
+
+                &:active,
+                &.kbq-active {
+                    --kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-multiple-states-selected-active-container-background);
+                }
             }
         }
 
@@ -70,13 +91,12 @@
         }
     }
 
-    .cdk-keyboard-focused {
+    // Scoped to the tree's own focus-monitored host, matching `kbq-option-action-visibility`. A bare
+    // `.cdk-keyboard-focused` would also match an outer monitored ancestor (e.g. the tree-select panel),
+    // drawing the focus ring on a row whose action button stays correctly hidden.
+    .kbq-tree-selection.cdk-keyboard-focused {
         & .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused) {
             border-color: var(--kbq-tree-states-focused-focus-outline-color);
-
-            & .kbq-action-container {
-                display: flex;
-            }
         }
     }
 }

package/tree/index.d.ts

@@ -1,7 +1,7 @@
 import { SelectionModel, DataSource, CollectionViewer, SelectionChange } from '@angular/cdk/collections';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewContainerRef, ChangeDetectorRef, OnDestroy, ElementRef, AfterContentChecked, OnInit, IterableDiffers, TrackByFunction, QueryList, IterableDiffer, DestroyRef, AfterViewInit, AfterContentInit, EventEmitter, InjectionToken } from '@angular/core';
+import { TemplateRef, ViewContainerRef, ChangeDetectorRef, AfterContentChecked, OnDestroy, OnInit, IterableDiffers, TrackByFunction, QueryList, IterableDiffer, DestroyRef, ElementRef, AfterViewInit, InjectionToken, AfterContentInit, EventEmitter } from '@angular/core';
 import * as i1 from '@koobiq/components/core';
 import { IFocusableOption, KbqTitleTextRef, KbqPseudoCheckbox, KbqOptionActionComponent, KbqPseudoCheckboxState, FocusKeyManager, MultipleMode } from '@koobiq/components/core';
 import { FocusOrigin, FocusMonitor } from '@angular/cdk/a11y';
@@ -504,6 +504,7 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
     readonly onBlur: Subject<KbqTreeOptionEvent>;
     preventBlur: boolean;
     parentTextElement: ElementRef;
+    get textElement(): ElementRef;
     readonly toggleElementDirective: i0.Signal<KbqTreeNodeToggleDirective<any> | undefined>;
     readonly toggleElementComponent: i0.Signal<KbqTreeNodeToggleComponent<any> | undefined>;
     readonly pseudoCheckbox: i0.Signal<KbqPseudoCheckbox | undefined>;
@@ -525,6 +526,16 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
      * Options that are not rendered (e.g. collapsed) are not checked by "select all".
      */
     readonly selectable: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether this option is the tree's "select all" row rather than a rendered data node.
+     *
+     * Such a row has no `data`, so everything that would resolve the option against the tree control
+     * (`getValue`, `isDisabled`, `isExpandable`, descendants) is skipped — those accessors belong to the
+     * consumer and must never be handed a node their data source has never seen. Its checkbox state and
+     * selection are driven from the outside instead.
+     * @docs-private
+     */
+    readonly selectAllRow: i0.InputSignalWithTransform<boolean, unknown>;
     get showCheckbox(): any;
     set showCheckbox(value: any);
     private _showCheckbox;
@@ -538,6 +549,8 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
     get viewValue(): string;
     hasFocus: boolean;
     get isExpandable(): boolean;
+    /** The "select all" row sits above the tree at root depth; `getLevel` has no node to resolve for it. */
+    get level(): number;
     get toggleElement(): KbqTreeNodeToggleBaseDirective<KbqTreeOption> | undefined;
     get isToggleInDefaultPlace(): boolean;
     checkboxState: KbqPseudoCheckboxState;
@@ -563,7 +576,7 @@ declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterC
     /** @docs-private */
     protected onMouseenter(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["kbqTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeOption, "kbq-tree-option", ["kbqTreeOption"], { "checkboxThirdState": { "alias": "checkboxThirdState"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectAllRow": { "alias": "selectAllRow"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, ["toggleElementDirective", "toggleElementComponent", "pseudoCheckbox", "actionButton", "tooltipTrigger", "dropdownTrigger"], ["kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]", "kbq-pseudo-checkbox", "kbq-checkbox", "[kbq-icon]", "kbq-progress-spinner", "*", "kbq-option-action"], true, never>;
 }
 
 declare const KBQ_SELECTION_TREE_VALUE_ACCESSOR: any;
@@ -622,6 +635,8 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     userTabIndex: number | null;
     optionShouldHoldFocusOnBlur: boolean;
     nodeOutlet: KbqTreeNodeOutlet;
+    /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
+    readonly selectAllOption: i0.Signal<KbqTreeOption | undefined>;
     unorderedOptions: QueryList<KbqTreeOption>;
     treeControl: FlatTreeControl<any>;
     readonly navigationChange: i0.OutputEmitterRef<KbqTreeNavigationChange<KbqTreeOption>>;
@@ -641,6 +656,33 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     private _noUnselectLast;
     /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
     readonly selectAllToggle: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to render the "select all" master checkbox above the nodes. Multiple selection only.
+     *
+     * Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never
+     * disagree (`selectAllToggle` is implied).
+     */
+    get selectAll(): boolean;
+    set selectAll(value: boolean);
+    private readonly selectAllEnabled;
+    /** Whether the "select all" row is currently rendered. */
+    protected get showSelectAll(): boolean;
+    /** Whether every node "select all" can act on is selected. */
+    get allOptionsSelected(): boolean;
+    /** State of the "select all" master checkbox. */
+    get selectAllState(): KbqPseudoCheckboxState;
+    /** Label of the "select all" row. Kept in step with the locale service. */
+    protected selectAllText: string;
+    /**
+     * Data nodes "select all" acts on, and the ones its checkbox state is derived from.
+     *
+     * While a filter is active only the rendered nodes qualify — the hidden ones are not what the user
+     * is looking at, and selecting them would contradict a master checkbox that can only report on what
+     * is on screen. Without a filter the whole data set qualifies, collapsed branches included.
+     */
+    private get selectAllTargets();
+    /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
+    private get selectAllAdapter();
     get disabled(): boolean;
     set disabled(rawValue: boolean);
     private _disabled;
@@ -649,9 +691,20 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     private _tabIndex;
     get showCheckbox(): boolean;
     get isEmpty(): boolean;
+    /**
+     * Number of real, data-backed nodes currently rendered — unlike `renderedOptions.length`, never
+     * includes the "select all" row, which is appended to `renderedOptions` on its own, later-processed
+     * reactive pass and would otherwise make a consumer's own node count race against that pass.
+     */
+    get nodesCount(): number;
     private optionFocusSubscription;
     private optionBlurSubscription;
+    private readonly localeService?;
+    /** Updates locale parameters from the locale service. */
+    private updateLocaleParams;
     constructor();
+    /** Selects every node "select all" can act on, or deselects them all when they are already selected. */
+    protected toggleSelectAll(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -699,6 +752,20 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     getItemHeight(): number;
     setStateChildren(option: KbqTreeOption, state: boolean): void;
     private onCopyDefaultHandler;
+    /**
+     * Moves focus to the closest enabled ancestor of the active option — ArrowLeft on a leaf, on an
+     * already-collapsed node, or on a node whose toggle is disabled.
+     *
+     * Ancestors are resolved against `renderedOptions` rather than `treeControl.dataNodes`: every
+     * ancestor of a visible option is itself visible, options are rendered depth-first, and these are
+     * the indices `keyManager` navigates — so the walk starts from `keyManager.activeItemIndex`.
+     * Scanning backwards, the first option with a smaller level is the parent.
+     *
+     * A disabled option cannot take focus (`KbqTreeOption.focus` refuses it), so the walk steps over a
+     * disabled ancestor and narrows `level` to that ancestor's level. Without narrowing, the scan would
+     * continue against the original level and land on a preceding sibling of the parent.
+     */
+    private setActiveParentOption;
     private getHeight;
     private updateTabIndex;
     private updateRenderedOptions;
@@ -720,7 +787,8 @@ declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueA
     private canDeselectLast;
     private isFocusReceivedFromNestedOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelection, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelection, "kbq-tree-selection", ["kbqTreeSelection"], { "treeControl": { "alias": "treeControl"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "navigationChange": "navigationChange"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; }, ["unorderedOptions"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelection, "kbq-tree-selection", ["kbqTreeSelection"], { "treeControl": { "alias": "treeControl"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "navigationChange": "navigationChange"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; }, ["unorderedOptions"], never, true, never>;
+    static ngAcceptInputType_selectAll: unknown;
 }
 
 declare class KbqTreeModule {

package/tree/tree-option.scss

@@ -1,9 +1,11 @@
+@use '../core/option/action-container-mixins' as action-container;
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
 
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
+    @include action-container.kbq-option-action-visibility('.kbq-tree-selection.cdk-keyboard-focused');
 
     position: relative;
 
@@ -72,14 +74,6 @@
 
     &:not(.kbq-disabled) {
         cursor: pointer;
-
-        &:hover,
-        &.kbq-hovered,
-        &.kbq-action-button-focused {
-            & .kbq-action-container {
-                display: flex;
-            }
-        }
     }
 
     &:is(.kbq-checked, .kbq-selected, .kbq-focused):has(+ :is(.kbq-checked, .kbq-selected, .kbq-focused)) {

package/tree-select/_tree-select-theme.scss

@@ -45,6 +45,14 @@
                 @include tree-theme.kbq-tree-option(states-hover);
             }
 
+            // `:not(.kbq-disabled)` raises specificity so pressed wins over the heavier `:hover:not(.kbq-focused)` rule
+            &:active:not(.kbq-disabled),
+            &.kbq-active:not(.kbq-disabled) {
+                --kbq-option-background: var(--kbq-tree-states-active-container-background);
+
+                background: var(--kbq-tree-states-active-container-background);
+            }
+
             &.kbq-selected {
                 &:hover:not(.kbq-focused),
                 &.kbq-hovered:not(.kbq-focused) {
@@ -54,6 +62,13 @@
                 &.kbq-focused {
                     @include tree-theme.kbq-tree-option(states-selected-hover);
                 }
+
+                &:active:not(.kbq-disabled),
+                &.kbq-active:not(.kbq-disabled) {
+                    --kbq-option-background: var(--kbq-tree-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-states-selected-active-container-background);
+                }
             }
 
             &.kbq-checked:not(.kbq-selected),
@@ -66,6 +81,13 @@
                 &.kbq-focused {
                     background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                 }
+
+                &:active:not(.kbq-disabled),
+                &.kbq-active:not(.kbq-disabled) {
+                    --kbq-option-background: var(--kbq-tree-multiple-states-selected-active-container-background);
+
+                    background: var(--kbq-tree-multiple-states-selected-active-container-background);
+                }
             }
 
             &.kbq-focused:not(.kbq-action-button-focused) {