@koobiq/components 20.0.0 → 20.2.0

package/select/index.d.ts

@@ -9,7 +9,7 @@ import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angul
 import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import * as i2 from '@koobiq/components/core';
-import { KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqLocaleService, KbqOptionBase, ActiveDescendantKeyManager, KbqOption, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptionSelectionChange, KbqVirtualOption, KbqComponentColors } from '@koobiq/components/core';
+import { KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqLocaleService, KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqOptionBase, ActiveDescendantKeyManager, KbqOption, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptionSelectionChange, KbqSelectAllEvent, KbqVirtualOption, KbqComponentColors } from '@koobiq/components/core';
 import * as i11 from '@koobiq/components/form-field';
 import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
 import * as i4 from '@koobiq/components/tags';
@@ -53,6 +53,7 @@ declare class KbqOptionTooltip extends KbqTooltipTrigger implements AfterViewIni
     private readonly option;
     private readonly resizeObserver;
     private readonly contentObserver;
+    private readonly isBrowser;
     private readonly debounceInterval;
     private resizeSubscription;
     private contentObserverSubscription;
@@ -74,19 +75,27 @@ declare class KbqSelectChange {
     value: any;
     constructor(source: KbqSelect, value: any);
 }
-/** Select panel width type. */
-type KbqSelectPanelWidth = 'auto' | number | null;
+/**
+ * Select panel width type.
+ * @deprecated Use `KbqPanelWidth` from `@koobiq/components/core` instead.
+ */
+type KbqSelectPanelWidth = KbqPanelWidth;
 /** Options for the `kbq-select` that can be configured using the `KBQ_SELECT_OPTIONS` injection token. */
 type KbqSelectOptions = Partial<{
     /**
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
-    panelWidth: KbqSelectPanelWidth;
+    panelWidth: KbqPanelWidth;
     /**
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
+    panelMinWidth: KbqPanelMinWidth;
+    /**
+     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+     */
+    panelMaxWidth: KbqPanelMaxWidth;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -102,11 +111,16 @@ declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
      * Width of the panel. If set to `auto`, the panel will match the trigger width.
      * If set to null or an empty string, the panel will grow to match the longest option's text.
      */
-    panelWidth: KbqSelectPanelWidth;
+    panelWidth: KbqPanelWidth;
     /**
      * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+    panelMinWidth: KbqPanelMinWidth;
+    /**
+     * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+     * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+     */
+    panelMaxWidth: KbqPanelMaxWidth;
     /**
      * Whether to enable hiding search by default if options is less than minimum.
      *
@@ -144,11 +158,16 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
          * Width of the panel. If set to `auto`, the panel will match the trigger width.
          * If set to null or an empty string, the panel will grow to match the longest option's text.
          */
-        panelWidth: KbqSelectPanelWidth;
+        panelWidth: KbqPanelWidth;
         /**
          * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
          */
-        panelMinWidth: Exclude<KbqSelectPanelWidth, "auto">;
+        panelMinWidth: KbqPanelMinWidth;
+        /**
+         * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
+         * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
+         */
+        panelMaxWidth: KbqPanelMaxWidth;
         /**
          * Whether to enable hiding search by default if options is less than minimum.
          *
@@ -187,11 +206,20 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     /** Strategy that will be used to handle scrolling while the select panel is open. */
     scrollStrategy: _angular_cdk_overlay_module_d.ScrollStrategy;
     /**
-     * The y-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text
-     * when the panel opens. Will change based on the y-position of the selected option.
+     * The y-offset of the overlay panel in relation to the trigger.
+     *
+     * @deprecated noop. The trigger↔panel gap is now controlled by the `--kbq-connected-overlay-gap` CSS
+     * variable (transparent padding inside the pane via the `kbq-connected-overlay_below/_above` panel
+     * classes), not by a physical overlay offset — so setting this has no effect. Will be removed in 21.0.0.
      */
     offsetY: number;
+    /**
+     * Minimum space to keep between the overlay and the viewport edge.
+     * At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above`
+     * gap padding is applied to the pane — stays conservative enough to absorb that padding instead of
+     * letting the panel overflow the viewport by the size of the gap.
+     */
+    protected readonly viewportMargin: number;
     /**
      * This position config ensures that the top "start" corner of the overlay
      * is aligned with the top "start" of the origin by default (overlapping
@@ -283,6 +311,11 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     readonly closedStream: Observable<void>;
     /** Event emitted when the selected value has been changed by the user. */
     readonly selectionChange: _angular_core.OutputEmitterRef<KbqSelectChange>;
+    /**
+     * Event emitted when all options are selected or deselected via the Ctrl/Cmd + A shortcut.
+     * Not emitted when a custom `selectAllHandler` is supplied — the handler owns the behaviour then.
+     */
+    readonly onSelectAll: _angular_core.OutputEmitterRef<KbqSelectAllEvent<KbqOption, KbqSelect>>;
     /**
      * Event that emits whenever the raw value of the select changes. This is here primarily
      * to facilitate the two-way binding for the `value` input.
@@ -346,6 +379,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * for primitive values where `value` itself is the display label.
      */
     readonly virtualOptionFactory: _angular_core.InputSignal<((value: any) => KbqVirtualOption) | undefined>;
+    /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
+    readonly selectAllToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Function for handling the Ctrl + A (select all) keyboard combination.
      * By default, the internal handler selects all options.
@@ -355,15 +390,22 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     get selectAllHandler(): (event: KeyboardEvent, select: KbqSelect) => void;
     set selectAllHandler(fn: (event: KeyboardEvent, select: KbqSelect) => void);
     /**
-     * Width of the panel. If set to `auto`, the panel will match the trigger width.
-     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
+     * narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the
+     * longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
      */
-    panelWidth: KbqSelectPanelWidth;
+    readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth>;
     /**
      * Minimum width of the panel in pixels.
      * If minWidth is larger than window width, it will be ignored.
      */
-    panelMinWidth: Exclude<KbqSelectPanelWidth, 'auto'>;
+    readonly panelMinWidth: _angular_core.InputSignalWithTransform<KbqPanelMinWidth, unknown>;
+    /**
+     * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
+     * the panel narrower than the trigger, and never clamps an explicit `panelWidth`.
+     * When null, the `--kbq-panel-size-width-max` token applies.
+     */
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
     /** Value of the select control. Can be a single value or array of values for multiple selection. */
     get value(): any;
     set value(newValue: any);
@@ -429,10 +471,6 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     private readonly uid;
     /** Subject that emits when the component visibility changes. */
     private visibleChanges;
-    /** Width of the overlay panel in pixels or as a string. */
-    protected overlayWidth: string | number;
-    /** Minimum width of the overlay panel in pixels. */
-    protected overlayMinWidth: string | number;
     /** Origin element for the overlay panel positioning. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     /** Flag indicating if the dropdown class has been added to the overlay container. */
@@ -655,8 +693,6 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     private highlightCorrectOption;
     /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
-    /** Gets how wide the overlay panel should be. */
-    private getOverlayWidth;
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     private _compareWith;
     /** Function for handling the combination Ctrl + A (select all). By default, the internal handler is used. */
@@ -676,9 +712,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     /** Removes the dropdown class from the overlay container when select closes. */
     private removeClassFromOverlayContainer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionGroups", "search", "searchEmpty", "options"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionGroups", "search", "searchEmpty", "options"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
     static ngAcceptInputType_multiple: unknown;
-    static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/sidebar/index.d.ts

@@ -37,6 +37,7 @@ declare class KbqSidebar implements OnDestroy, AfterContentInit {
     protected readonly document: Document;
     private readonly renderer;
     private readonly changeDetectorRef;
+    private readonly isBrowser;
     get opened(): boolean;
     set opened(value: boolean);
     private _opened;

package/skeleton/skeleton.scss

@@ -52,5 +52,9 @@
             var(--kbq-skeleton-animation-wave-end) 100%
         );
         animation: wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 }

package/split-button/_split-button-theme.scss

@@ -1,7 +1,7 @@
 @mixin kbq-split-button-theme() {
     .kbq-split-button {
         &:hover:has(.kbq-button_transparent) {
-            background: var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, 0.08));
+            background: var(--kbq-states-background-transparent-hover);
         }
 
         & .kbq-split-button_item {
@@ -102,7 +102,7 @@
             }
 
             & .kbq-split-button_second:before {
-                background: rgba(138, 143, 168, 0.6);
+                background: var(--kbq-states-line-disabled);
             }
         }
 

package/splitter/_splitter-theme.scss

@@ -6,7 +6,7 @@
 
         &:hover,
         &.kbq-gutter_dragged {
-            background-color: rgba(106, 115, 150, 0.08);
+            background-color: var(--kbq-states-background-transparent-hover);
         }
 
         &.kbq-gutter_vertical {
@@ -21,6 +21,6 @@
     }
 
     .kbq-gutter-ghost {
-        background: rgba(106, 115, 150, 0.16);
+        background: var(--kbq-states-background-transparent-active);
     }
 }

package/splitter/index.d.ts

@@ -112,6 +112,7 @@ declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestroy {
     private splitter;
     readonly sizeChange: i0.OutputEmitterRef<number>;
     private readonly window;
+    private readonly platform;
     isResizing(): boolean;
     disableFlex(): void;
     ngAfterViewInit(): void;

package/table/_table-theme.scss

@@ -16,7 +16,11 @@
                 & > td {
                     color: var(--kbq-foreground-contrast);
                 }
+            }
+        }
 
+        &:not(.kbq-table_disable-hover) > tbody {
+            & > tr {
                 &.kbq-hovered td,
                 &:hover td {
                     background-color: var(--kbq-states-background-transparent-hover);

package/table/index.d.ts

@@ -4,9 +4,10 @@ import * as i1 from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/platform';
 
 declare class KbqTable {
-    readonly border: i0.InputSignal<boolean>;
+    readonly border: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly disableHover: i0.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; "disableHover": { "alias": "disableHover"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class KbqTableCellContent {
     readonly button: i0.Signal<KbqButton | undefined>;

package/tabs/_tabs-common.scss

@@ -33,25 +33,6 @@
 
     outline: none;
 
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
-        padding-left: 14px;
-        padding-right: 14px;
-    }
-
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
-        padding-left: tokens.kbq-difference-series-css-variables(
-            [tabs-size-tab-item-padding-horizontal,
-            tabs-size-tab-item-focus-outline-width]
-        );
-    }
-
-    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
-        padding-right: tokens.kbq-difference-series-css-variables(
-            [tabs-size-tab-item-padding-horizontal,
-            tabs-size-tab-item-focus-outline-width]
-        );
-    }
-
     &.kbq-selected {
         cursor: default;
     }
@@ -75,30 +56,63 @@
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {
         content: '';
         position: absolute;
-        left: 0;
-        right: 0;
-        top: -10px;
-        bottom: -10px;
+        inset: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)))
+            calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):not(.kbq-tab-label_icon-only):after {
+        content: '';
+        position: absolute;
+        left: calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width)
+        );
+        right: calc(
+            var(--kbq-tabs-size-tab-item-padding-horizontal) - var(--kbq-tabs-size-tab-item-focus-outline-width)
+        );
+        bottom: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+        height: 3px;
+        border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
+        background: transparent;
+        transition: background 0.2s ease-in-out;
+        pointer-events: none;
     }
 
     &.kbq-tab-label_icon-only {
         width: var(--kbq-size-3xl);
         height: var(--kbq-size-3xl);
         padding: 0 !important;
-        margin-inline: var(--kbq-size-xs);
+        margin-inline: var(--kbq-size-xxs);
         box-sizing: content-box;
 
-        // Keep the space between icon-only tabs clickable after adding margins.
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            width: var(--kbq-tabs-size-tab-item-underlined-icon-only-size);
+            height: var(--kbq-tabs-size-tab-item-underlined-icon-only-size);
+
+            &:before {
+                left: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+                right: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            }
+
+            &:after {
+                top: auto;
+                bottom: calc(-1 * (var(--kbq-size-s) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+                height: 3px;
+                left: calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+                right: calc(-1 * var(--kbq-tabs-size-tab-item-focus-outline-width));
+                border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
+                transition: background 0.2s ease-in-out;
+                pointer-events: none;
+            }
+        }
+
         &:not(.kbq-tab-label_vertical):after {
             content: '';
             display: block;
             position: absolute;
             top: 0;
             bottom: 0;
-            // Absolute offsets are calculated from the padding box, so we add
-            // focus outline width to fully cover the visual margin gap.
-            left: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
-            right: calc(-1 * (var(--kbq-size-xs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            left: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
+            right: calc(-1 * (var(--kbq-size-xxs) + var(--kbq-tabs-size-tab-item-focus-outline-width)));
             background: transparent;
         }
     }
@@ -144,7 +158,18 @@
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
-        padding: 8px 0;
+        padding: var(--kbq-size-s) 0;
+
+        // Negative margin shifts the first tab left so the focus frame can extend beyond the
+        // container edge (instead of padding-left:0 which would clip it under overflow:hidden).
+        > .kbq-tab-label:first-child:not(.kbq-tab-label_icon-only),
+        > .kbq-tab-link:first-child {
+            margin-inline-start: calc(-1 * var(--kbq-tabs-size-tab-item-padding-horizontal));
+        }
+
+        > .kbq-tab-label_icon-only:first-child {
+            margin-inline-start: 0;
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
@@ -166,8 +191,12 @@
         position: absolute;
         bottom: 0;
         height: 3px;
-        border-radius: 2px 2px 0 0;
+        border-radius: var(--kbq-size-3xs) var(--kbq-size-3xs) 0 0;
         background: var(--kbq-line-contrast);
         transition: all 0.2s ease-in-out;
+
+        &.kbq-disabled {
+            background: var(--kbq-states-icon-disabled);
+        }
     }
 }

package/tabs/_tabs-theme.scss

@@ -16,6 +16,14 @@
 
     &:is(:hover, .kbq-hover):not(.kbq-disabled) {
         @include kbq-tab-item-state($type, $sub-type, states-hover);
+
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            background: transparent;
+
+            &:not(.kbq-selected)::after {
+                background: var(--kbq-line-contrast-fade);
+            }
+        }
     }
 
     &.kbq-tab-label_empty {
@@ -27,6 +35,10 @@
 
         &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
             background: none;
+
+            &::after {
+                background: transparent;
+            }
         }
 
         &:is(:hover, .kbq-hover) {

package/tabs/index.d.ts

@@ -408,10 +408,10 @@ 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. */
+    private readonly isBrowser;
     protected get activeTabOffsetWidth(): number | undefined;
-    /** Left offset of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetLeft(): number | undefined;
+    protected get activeTabDisabled(): boolean;
     protected itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "underlined": { "alias": "underlined"; "required": false; "isSignal": true; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], true, never>;
@@ -554,6 +554,7 @@ declare class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContent
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
     readonly items: QueryList<KbqTabLink>;
+    private readonly isBrowser;
     /** Whether the nav bar background should be transparent. */
     readonly transparent: i0.InputSignalWithTransform<boolean, unknown>;
     readonly onSurface: i0.InputSignalWithTransform<boolean, unknown>;
@@ -566,6 +567,7 @@ declare class KbqTabNavBar extends KbqPaginatedTabHeader implements AfterContent
     get role(): string | null;
     protected get activeTabOffsetWidth(): number | undefined;
     protected get activeTabOffsetLeft(): number | undefined;
+    protected get activeTabDisabled(): boolean;
     ngAfterContentInit(): void;
     protected itemSelected(): void;
     /** Notifies the component that the active link has been changed. */

package/tabs/tab-header.scss

@@ -8,6 +8,17 @@
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
+    border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
+
+    &.kbq-tab-header_underlined {
+        .kbq-tab-group:not(.kbq-tab-group_on-surface) & {
+            border-radius: 0;
+        }
+
+        &:not(.kbq-tab-header__pagination-controls_enabled) {
+            overflow: visible;
+        }
+    }
 }
 
 .kbq-tab-list__content {
@@ -31,6 +42,10 @@
     flex-grow: 1;
     z-index: 1;
     overflow: hidden;
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) & {
+        overflow: visible;
+    }
 }
 
 .kbq-tab-list {

package/tabs/tab-nav-bar.scss

@@ -13,6 +13,10 @@
         overflow: hidden;
     }
 
+    &.kbq-tab-header_underlined:not(.kbq-tab-header__pagination-controls_enabled) .kbq-tab-link__container {
+        overflow: visible;
+    }
+
     .kbq-tab-list {
         position: relative;
         width: 100%;

package/tabs/tabs-tokens.scss

@@ -5,8 +5,9 @@
     --kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
-    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);
+    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-border-radius);
     --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
+    --kbq-tabs-size-tab-item-underlined-icon-only-size: calc(var(--kbq-size-3xl) - var(--kbq-size-xxs));
     /* THEME TOKENS */
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;
     --kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);

package/textarea/index.d.ts

@@ -88,7 +88,6 @@ declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, OnChanges
     private _id;
     private _required;
     private valueAccessor;
-    private growSubscription;
     private lineHeight;
     private minHeight;
     private rowsCount;

package/time-range/time-range.scss

@@ -33,14 +33,6 @@
         flex-direction: column;
         gap: var(--kbq-size-s);
 
-        .kbq-time-range-editor__predefined {
-            column-count: 2;
-
-            .kbq-time-range-editor__predefined-option {
-                display: block;
-            }
-        }
-
         .kbq-time-range-editor__date-time {
             display: flex;
             flex-direction: row;

package/timepicker/timepicker.scss

@@ -1,8 +1,8 @@
 @use '../core/styles/common/tokens' as *;
 
 .kbq-timepicker {
-    // FIXME: default token doesn't exist
-    padding-right: var(--kbq-timepicker-size-padding-right);
+    // @TODO define --kbq-timepicker-size-padding-right in design-tokens; fallback keeps spacing meanwhile
+    padding-right: var(--kbq-timepicker-size-padding-right, var(--kbq-size-s));
 }
 
 .kbq-form-field-type-timepicker {

package/timezone/index.d.ts

@@ -5,7 +5,7 @@ import { KbqOption } from '@koobiq/components/core';
 import * as i6 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i3 from '@koobiq/components/select';
-import { KbqSelect, KbqSelectPanelWidth } from '@koobiq/components/select';
+import { KbqSelect } from '@koobiq/components/select';
 import * as i1 from '@angular/cdk/overlay';
 import * as i4 from '@koobiq/components/icon';
 import * as i5 from '@koobiq/components/tags';
@@ -48,6 +48,7 @@ declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implements Afte
     private readonly changeDetectorRef;
     private readonly resizeObserver;
     private readonly contentObserver;
+    private readonly platform;
     private readonly debounceInterval;
     private resizeSubscription;
     private contentObserverSubscription;
@@ -68,8 +69,6 @@ declare class KbqTimezoneSelectTrigger {
 }
 declare class KbqTimezoneSelect extends KbqSelect implements AfterContentInit {
     readonly customTrigger: i0.Signal<KbqTimezoneSelectTrigger | undefined>;
-    panelWidth: KbqSelectPanelWidth;
-    panelMinWidth: number;
     ngAfterContentInit(): void;
     private updateLocaleParamsForSearch;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelect, never>;