@koobiq/components 19.8.0 → 19.8.2

package/tabs/_tabs-theme.scss

@@ -14,7 +14,7 @@
 @mixin kbq-tab-item-style($type, $sub-type) {
     @include kbq-tab-item-state($type, $sub-type, default);
 
-    &:hover:not(.kbq-disabled) {
+    &:is(:hover, .kbq-hover):not(.kbq-disabled) {
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
@@ -29,7 +29,7 @@
             background: none;
         }
 
-        &:hover {
+        &:is(:hover, .kbq-hover) {
             @include kbq-tab-item-state($type, $sub-type, states-selected-hover);
 
             &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {

package/tabs/tab-header.component.d.ts

@@ -23,7 +23,9 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly tabList: ElementRef;
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
+    /** Width of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetWidth(): number | undefined;
+    /** Left offset of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetLeft(): number | undefined;
     protected itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;

package/tabs/tab-label.directive.d.ts

@@ -4,6 +4,8 @@ import * as i0 from "@angular/core";
 export declare const KBQ_TAB_LABEL: InjectionToken<KbqTabLabel>;
 /** Used to flag tab labels for use with the portal directive */
 export declare class KbqTabLabel extends CdkPortal {
+    /** Whether the tab contains only an icon without a label. */
+    readonly iconOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabel, "[kbq-tab-label], [kbqTabLabel]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTabLabel, "[kbq-tab-label], [kbqTabLabel]", never, { "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/tabs/tab.component.d.ts

@@ -28,6 +28,8 @@ export declare class KbqTab implements OnInit, OnChanges, OnDestroy {
     textLabel: string;
     empty: boolean;
     tabId: string;
+    /** Whether the tab label contains only an icon (no text). */
+    get iconOnlyLabel(): boolean;
     /** Emits whenever the internal state of the tab changes. */
     readonly stateChanges: Subject<void>;
     /**

package/tree/_tree-theme.scss

@@ -53,10 +53,14 @@
 
             &.kbq-checked:not(.kbq-selected),
             &.kbq-tree-option_multiple.kbq-selected {
+                --kbq-option-background: var(--kbq-tree-multiple-states-selected-container-background);
+
                 background: var(--kbq-tree-multiple-states-selected-container-background);
 
                 &:hover,
                 &.kbq-hovered {
+                    --kbq-option-background: var(--kbq-tree-multiple-states-selected-hover-container-background);
+
                     background: var(--kbq-tree-multiple-states-selected-hover-container-background);
                 }
             }

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

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../tree/tree-theme' as tree-theme;
 
 @mixin kbq-tree-select-theme() {
     .kbq-tree-select {
@@ -34,6 +35,44 @@
         box-shadow: var(--kbq-select-panel-dropdown-shadow);
         background: var(--kbq-select-panel-dropdown-background);
 
+        .kbq-tree-selection .kbq-tree-option:not(.kbq-disabled) {
+            &:hover:not(.kbq-focused),
+            &.kbq-hovered:not(.kbq-focused) {
+                @include tree-theme.kbq-tree-option(default);
+            }
+
+            &.kbq-focused {
+                @include tree-theme.kbq-tree-option(states-hover);
+            }
+
+            &.kbq-selected {
+                &:hover:not(.kbq-focused),
+                &.kbq-hovered:not(.kbq-focused) {
+                    @include tree-theme.kbq-tree-option(states-selected);
+                }
+
+                &.kbq-focused {
+                    @include tree-theme.kbq-tree-option(states-selected-hover);
+                }
+            }
+
+            &.kbq-checked:not(.kbq-selected),
+            &.kbq-tree-option_multiple.kbq-selected {
+                &:hover:not(.kbq-focused),
+                &.kbq-hovered:not(.kbq-focused) {
+                    background: var(--kbq-tree-multiple-states-selected-container-background);
+                }
+
+                &.kbq-focused {
+                    background: var(--kbq-tree-multiple-states-selected-hover-container-background);
+                }
+            }
+
+            &.kbq-focused:not(.kbq-action-button-focused) {
+                border-color: transparent;
+            }
+        }
+
         & .kbq-select__footer {
             border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
         }