@koobiq/components 20.1.0 → 20.2.0

package/schematics/migrations.json

@@ -7,9 +7,19 @@
             "factory": "./migrations/v20-upgrade/index"
         },
         "filter-bar-signals": {
-            "version": "21.0.0-0",
+            "version": "20.2.0-0",
             "description": "Migrates KbqFilterBar consumers to the signal-based API. Rewrites programmatic reads of the now-signal members (filter, pipeTemplates, isChanged, isDisabled, isReadOnly, isSaved, isSavedAndChanged) to calls and `filter = v` writes to `filter.set(v)` on receivers typed KbqFilterBar, including reads via template reference variables on <kbq-filter-bar>. Renames KbqFilterBarRefresher → KbqFilterRefresher and warns on changes/preparePopover/view-query cases that need manual migration.",
             "factory": "./migrations/filter-bar-signals/index"
+        },
+        "alert-signals": {
+            "version": "20.2.0-0",
+            "description": "Migrates KbqAlert consumers to its finished signal-based API. Rewrites value-safe programmatic reads of the now-signal members (compact, alertStyle) to calls on receivers typed KbqAlert, including reads via template reference variables on <kbq-alert> (external and inline templates). Warns — without auto-fixing — on alertColor (now a read-only InputSignal whose getter returns the raw color instead of the `kbq-alert_<color>` class), the content-query members that became protected (icon/iconItem/button/title/control/closeButton/isColored), narrowed alertColor/alertStyle inputs, the compact booleanAttribute behavior change, descendants:false content projection, view/content queries returning the instance, and KbqAlertModule no longer re-exporting A11yModule/PlatformModule.",
+            "factory": "./migrations/alert-signals/index"
+        },
+        "autocomplete-panel-width-auto": {
+            "version": "20.2.0-0",
+            "description": "Replaces `panelWidth=\"auto\"` with `panelWidth=\"fit-content\"` on `<kbq-autocomplete>`. `auto` used to be passed to CSS verbatim, so the panel shrank to fit its content; it now means \"match the host width\", matching `kbq-select` and `kbq-tree-select`. The change is silent — `auto` still type-checks and still renders — so unmigrated templates only lay out differently.",
+            "factory": "./migrations/autocomplete-panel-width-auto/index"
         }
     }
 }

package/schematics/ng-add/index.js

@@ -27,7 +27,7 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^20.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.5.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.5.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^11.7.1");

package/schematics/utils/angular-parsing.js

@@ -122,6 +122,7 @@ async function transformTemplateAttributes(template, fileName, migrationData) {
     if (parsed.tree !== undefined) {
         const visitor = new utils_typescript.ElementCollector(migrationData, fileName);
         utils_ast.visitAll(visitor, parsed.tree.rootNodes);
+        let didReplace = false;
         for (const el of visitor.elementsToMigrate) {
             const migrationAttr = el.attrs.find((attr) => utils_ast.getSimpleAttributeName(attr.name) === migrationData.attrs.key.from);
             let updatedAttrValue;
@@ -132,7 +133,14 @@ async function transformTemplateAttributes(template, fileName, migrationData) {
                     updatedAttrValue = replacement.to;
                 }
                 else {
-                    console.warn(`Element is using dynamic value. Check the code and change value on your own.${(fileName && ' File: ' + fileName) || ''}`);
+                    // A bound attribute (`[panelWidth]="..."`) whose value isn't a quoted string
+                    // literal is a genuine runtime expression and can't be resolved statically. A
+                    // plain attribute, or a bound attribute holding a quoted literal, has a known
+                    // value at migration time — it's just one the replacement table doesn't cover.
+                    const isDynamicExpression = migrationAttr.name.startsWith('[') && !/^\s*['"].*['"]\s*$/.test(migrationAttr.value);
+                    console.warn(isDynamicExpression
+                        ? `Element is using a dynamic value. Check the code and change value on your own.${(fileName && ' File: ' + fileName) || ''}`
+                        : `Element has value "${cleanAttrValue}" with no matching replacement. Check the code and change value on your own.${(fileName && ' File: ' + fileName) || ''}`);
                     continue;
                 }
                 updatedTemplate =
@@ -141,9 +149,10 @@ async function transformTemplateAttributes(template, fileName, migrationData) {
                         updatedTemplate.slice(migrationAttr.valueSpan.end.offset + 1 - offset, updatedTemplate.length);
                 offset += migrationAttr.name.length - migrationData.attrs.key.to.length;
                 offset += migrationAttr.value.length - updatedAttrValue.length;
+                didReplace = true;
             }
         }
-        return { fileContent: updatedTemplate, changed: visitor.elementsToMigrate.length > 0, errors: parsed.errors };
+        return { fileContent: updatedTemplate, changed: didReplace, errors: parsed.errors };
     }
     return { fileContent: updatedTemplate, changed: undefined, errors: parsed.errors };
 }

package/search-expandable/index.d.ts

@@ -35,6 +35,8 @@ declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit
     /** Current value in input. */
     value: BehaviorSubject<string>;
     protected lastFocusOrigin: 'touch' | 'mouse' | 'keyboard' | 'program' | null;
+    /** Suppress the automatic input focus once — set when the component auto-opens from a model value. */
+    private suppressInputFocus;
     /** state of component. */
     isOpened: boolean;
     /** Emit event by enter or not. Default is false */
@@ -77,6 +79,7 @@ declare class KbqSearchExpandable implements ControlValueAccessor, AfterViewInit
     /** Implemented as part of ControlValueAccessor. */
     setDisabledState(isDisabled: boolean): void;
     toggle(): void;
+    private setOpened;
     private updateLocaleParams;
     private initDefaultParams;
     private emitValue;

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, KbqSelectAllEvent, 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';
@@ -75,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.
      *
@@ -103,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.
      *
@@ -145,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.
          *
@@ -188,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
@@ -363,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);
@@ -437,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. */
@@ -663,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. */
@@ -684,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; }; "selectAllToggle": { "alias": "selectAllToggle"; "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"; "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 ɵ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/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

@@ -409,10 +409,9 @@ declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
     private readonly isBrowser;
-    /** 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 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>;
@@ -568,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

@@ -9,6 +9,16 @@
     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 {
@@ -32,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

@@ -7,6 +7,7 @@
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
     --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/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';
@@ -69,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>;