@koobiq/components 20.3.1 → 20.4.0

package/schematics/migrations/autocomplete-panel-width-auto/index.js

@@ -2,37 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var node_path = require('node:path');
-var process = require('node:process');
-var ts = require('typescript');
 var utils_angularParsing = require('../../utils/angular-parsing.js');
 var utils_packageConfig = require('../../utils/package-config.js');
 var utils_typescript = require('../../utils/typescript.js');
-require('path');
+require('typescript');
 require('../../utils/ast.js');
 require('@angular-devkit/schematics');
 require('@schematics/angular/utility');
 require('../../utils/messages.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var process__namespace = /*#__PURE__*/_interopNamespaceDefault(process);
-
 const migrationData = {
     elementName: 'kbq-autocomplete',
     attrs: {
@@ -48,20 +26,11 @@ const migrationData = {
 function migrate(options) {
     return async (tree, context) => {
         const { project } = options;
-        const { tsPaths, templatePaths, projectDefinition } = await utils_packageConfig.getParsingInfo(project, tree);
-        const program = ts.createProgram(Array.from(tsPaths, (item) => node_path.resolve(projectDefinition.root, `.${item}`)), {
-            baseUrl: projectDefinition.root,
-            rootDir: projectDefinition.root,
-            _enableTemplateTypeChecker: true, // Required for the template type checker to work.
-            compileNonExportedClasses: true, // We want to migrate non-exported classes too.
-            // Avoid checking libraries to speed up the migration.
-            skipLibCheck: true,
-            skipDefaultLibCheck: true
-        });
+        const { tsPaths, templatePaths } = await utils_packageConfig.getParsingInfo(project, tree);
         // Update external html
         await utils_angularParsing.migrateTemplate(tree, Array.from(templatePaths), context, migrationData);
         // Update inline html
-        await utils_angularParsing.migrateTs(tree, program.getSourceFiles().filter((sourceFile) => utils_typescript.canMigrateFile(sourceFile, program)), process__namespace.cwd(), context, migrationData);
+        await utils_angularParsing.migrateTs(tree, utils_typescript.readSourceFiles(tree, tsPaths), context, migrationData);
         context.logger.warn('Warning! Run linter in updated files since line breaks or indents may be broken.');
     };
 }

package/schematics/migrations/empty-state-size-attr/index.js

@@ -2,37 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var node_path = require('node:path');
-var process = require('node:process');
-var ts = require('typescript');
 var utils_angularParsing = require('../../utils/angular-parsing.js');
 var utils_packageConfig = require('../../utils/package-config.js');
 var utils_typescript = require('../../utils/typescript.js');
-require('path');
+require('typescript');
 require('../../utils/ast.js');
 require('@angular-devkit/schematics');
 require('@schematics/angular/utility');
 require('../../utils/messages.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var process__namespace = /*#__PURE__*/_interopNamespaceDefault(process);
-
 const migrationData = {
     elementName: 'kbq-empty-state',
     attrs: {
@@ -52,20 +30,11 @@ const migrationData = {
 function migrate(options) {
     return async (tree, context) => {
         const { project } = options;
-        const { tsPaths, templatePaths, projectDefinition } = await utils_packageConfig.getParsingInfo(project, tree);
-        const program = ts.createProgram(Array.from(tsPaths, (item) => node_path.resolve(projectDefinition.root, `.${item}`)), {
-            baseUrl: projectDefinition.root,
-            rootDir: projectDefinition.root,
-            _enableTemplateTypeChecker: true, // Required for the template type checker to work.
-            compileNonExportedClasses: true, // We want to migrate non-exported classes too.
-            // Avoid checking libraries to speed up the migration.
-            skipLibCheck: true,
-            skipDefaultLibCheck: true
-        });
+        const { tsPaths, templatePaths } = await utils_packageConfig.getParsingInfo(project, tree);
         // Update external html
         await utils_angularParsing.migrateTemplate(tree, Array.from(templatePaths), context, migrationData);
         // Update inline html
-        await utils_angularParsing.migrateTs(tree, program.getSourceFiles().filter((sourceFile) => utils_typescript.canMigrateFile(sourceFile, program)), process__namespace.cwd(), context, migrationData);
+        await utils_angularParsing.migrateTs(tree, utils_typescript.readSourceFiles(tree, tsPaths), context, migrationData);
         context.logger.warn('Warning! Run linter in updated files since line breaks or indents maybe be broken.');
     };
 }

package/schematics/migrations/filter-bar-signals/index.js

@@ -262,7 +262,10 @@ function referencesFilterBar(content) {
 }
 function filterBarSignals(options) {
     return async (tree, context) => {
-        const { project, fix } = options;
+        const { project } = options;
+        // `ng update` invokes migrations with no options at all, and migrations.json declares no schema, so the
+        // schema default never reaches us — applying the fix is the intended behaviour there.
+        const fix = options.fix ?? true;
         const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
         const root = projectDefinition?.root ?? '';
         const rootDir = root ? tree.getDir(root) : tree.root;

package/schematics/migrations/loader-overlay-size-attr/index.js

@@ -2,37 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var node_path = require('node:path');
-var process = require('node:process');
-var ts = require('typescript');
 var utils_angularParsing = require('../../utils/angular-parsing.js');
 var utils_packageConfig = require('../../utils/package-config.js');
 var utils_typescript = require('../../utils/typescript.js');
-require('path');
+require('typescript');
 require('../../utils/ast.js');
 require('@angular-devkit/schematics');
 require('@schematics/angular/utility');
 require('../../utils/messages.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var process__namespace = /*#__PURE__*/_interopNamespaceDefault(process);
-
 const migrationData = {
     elementName: 'kbq-loader-overlay',
     attrs: {
@@ -52,20 +30,11 @@ const migrationData = {
 function migrate(options) {
     return async (tree, context) => {
         const { project } = options;
-        const { tsPaths, templatePaths, projectDefinition } = await utils_packageConfig.getParsingInfo(project, tree);
-        const program = ts.createProgram(Array.from(tsPaths, (item) => node_path.resolve(projectDefinition.root, `.${item}`)), {
-            baseUrl: projectDefinition.root,
-            rootDir: projectDefinition.root,
-            _enableTemplateTypeChecker: true, // Required for the template type checker to work.
-            compileNonExportedClasses: true, // We want to migrate non-exported classes too.
-            // Avoid checking libraries to speed up the migration.
-            skipLibCheck: true,
-            skipDefaultLibCheck: true
-        });
+        const { tsPaths, templatePaths } = await utils_packageConfig.getParsingInfo(project, tree);
         // Update external html
         await utils_angularParsing.migrateTemplate(tree, Array.from(templatePaths), context, migrationData);
         // Update inline html
-        await utils_angularParsing.migrateTs(tree, program.getSourceFiles().filter((sourceFile) => utils_typescript.canMigrateFile(sourceFile, program)), process__namespace.cwd(), context, migrationData);
+        await utils_angularParsing.migrateTs(tree, utils_typescript.readSourceFiles(tree, tsPaths), context, migrationData);
         context.logger.warn('Warning! Run linter in updated files since line breaks or indents maybe be broken.');
     };
 }

package/schematics/migrations/v20-upgrade/index.js

@@ -158,7 +158,10 @@ function pickReplacements(filePath) {
 }
 function v20Upgrade(options) {
     return async (tree, context) => {
-        const { project, fix } = options;
+        const { project } = options;
+        // `ng update` invokes migrations with no options at all, and migrations.json declares no schema, so the
+        // schema default never reaches us — applying the fix is the intended behaviour there.
+        const fix = options.fix ?? true;
         const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
         const root = projectDefinition?.root ?? '';
         const rootDir = root ? tree.getDir(root) : tree.root;

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.3.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.4.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', "^12.2.0");

package/schematics/utils/angular-parsing.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var path = require('path');
 var ts = require('typescript');
 var utils_ast = require('./ast.js');
 var utils_typescript = require('./typescript.js');
@@ -47,7 +46,7 @@ async function migrateTemplate(tree, filePaths, context, migrationData) {
  * @param context
  * @param transform
  */
-async function migrateTsWithTransform(tree, sourceFiles, basePath, context, transform) {
+async function migrateTsWithTransform(tree, sourceFiles, context, transform) {
     // run and track changed components
     const analysis = new Map();
     for (const sourceFile of sourceFiles) {
@@ -56,16 +55,15 @@ async function migrateTsWithTransform(tree, sourceFiles, basePath, context, tran
         });
     }
     // update source file
-    for (const path$1 of analysis.keys()) {
-        const file = analysis.get(path$1);
+    for (const path of analysis.keys()) {
+        const file = analysis.get(path);
         const ranges = file.getSortedRanges();
-        const relativePath = path.relative(basePath, path$1);
-        const content = tree.readText(relativePath);
-        const update = tree.beginUpdate(relativePath);
+        const content = tree.readText(path);
+        const update = tree.beginUpdate(path);
         for (const { start, end } of ranges) {
             const template = content.slice(start, end);
             const length = (end ?? content.length) - start;
-            const { fileContent, changed, errors } = await transform(template, relativePath);
+            const { fileContent, changed, errors } = await transform(template, path);
             if (changed) {
                 update.remove(start, length);
                 update.insertLeft(start, fileContent);
@@ -81,12 +79,11 @@ async function migrateTsWithTransform(tree, sourceFiles, basePath, context, tran
  * Update typescript file if classes with @Component decorator and `template` property exists
  * @param tree
  * @param sourceFiles
- * @param basePath
  * @param context
  * @param migrationData
  */
-async function migrateTs(tree, sourceFiles, basePath, context, migrationData) {
-    return migrateTsWithTransform(tree, sourceFiles, basePath, context, (template, fileName) => transformTemplateAttributes(template, fileName, migrationData));
+async function migrateTs(tree, sourceFiles, context, migrationData) {
+    return migrateTsWithTransform(tree, sourceFiles, context, (template, fileName) => transformTemplateAttributes(template, fileName, migrationData));
 }
 /**
  * Analyzes the decorators of a given class declaration to find and save
@@ -158,9 +155,11 @@ async function transformTemplateAttributes(template, fileName, migrationData) {
                         : `Element has value "${cleanAttrValue}" with no matching replacement. Check the code and change value on your own.${(fileName && ' File: ' + fileName) || ''}`);
                     continue;
                 }
+                // The author's quote is kept: inside a "…" TS literal only single quotes are valid.
+                const quote = template[migrationAttr.valueSpan.start.offset - 1] === "'" ? "'" : '"';
                 updatedTemplate =
                     updatedTemplate.slice(0, migrationAttr.keySpan.start.offset - offset) +
-                        `${migrationData.attrs.key.to}="${updatedAttrValue}"` +
+                        `${migrationData.attrs.key.to}=${quote}${updatedAttrValue}${quote}` +
                         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;

package/schematics/utils/package-config.js

@@ -60,10 +60,11 @@ async function getParsingInfo(project, tree) {
     const tsPaths = new Set();
     const templatePaths = new Set();
     const projectDefinition = await setupOptions(project, tree);
-    if (!projectDefinition) {
-        throw new schematics.SchematicsException(utils_messages.noProject('no project'));
-    }
-    tree.getDir(projectDefinition.root).visit((filePath) => {
+    // `ng update` passes no options at all, so without a project the whole workspace is migrated.
+    const root = projectDefinition?.root;
+    (root ? tree.getDir(root) : tree.root).visit((filePath) => {
+        if (filePath.includes('node_modules') || filePath.includes('/dist/'))
+            return;
         if (filePath.endsWith('.ts')) {
             tsPaths.add(filePath);
         }

package/schematics/utils/typescript.js

@@ -54,6 +54,29 @@ function collectInlineTemplateRanges(sourceFile) {
     });
     return ranges;
 }
+/**
+ * Parses the given tree files into source files.
+ *
+ * The callers only walk decorators and inline templates, so no program is built: one rooted at paths
+ * that live in the tree rather than on disk resolves none of them and returns the default libraries
+ * instead — around 490 declaration files per run, and not one project source.
+ */
+function readSourceFiles(tree, paths) {
+    const sourceFiles = [];
+    for (const path of paths) {
+        if (path.endsWith('.d.ts'))
+            continue;
+        // Without the BOM, as readText and the update recorder that later edit the file see it.
+        const content = tree
+            .read(path)
+            ?.toString()
+            .replace(/^\uFEFF/, '');
+        if (content !== undefined) {
+            sourceFiles.push(ts.createSourceFile(path, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS));
+        }
+    }
+    return sourceFiles;
+}
 function canMigrateFile(sourceFile, program) {
     // We shouldn't migrate .d.ts files, files from an external library or type checking files.
     return !(sourceFile.fileName.endsWith('.ngtypecheck.ts') ||
@@ -212,4 +235,5 @@ exports.forEachClass = forEachClass;
 exports.forEachStringLiteral = forEachStringLiteral;
 exports.getClassWithUpdatedDecorator = getClassWithUpdatedDecorator;
 exports.parseTemplate = parseTemplate;
+exports.readSourceFiles = readSourceFiles;
 exports.updateDecoratorProperty = updateDecoratorProperty;

package/select/_select-theme.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/popup' as *;
+@use '../core/styles/common/select' as *;
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
@@ -39,6 +40,8 @@
         & .kbq-select__footer {
             border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
         }
+
+        @include kbq-select-footer-item-theme();
     }
 
     .kbq-select__search-container {
@@ -55,7 +58,12 @@
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
-    .kbq-select__panel {
+    // The footer's action row is projected as a native `button`, whose user-agent `font` shorthand resets
+    // the stylistic sets and the letter spacing the panel puts on every option. Inheriting the individual
+    // longhands cannot undo that, so the row takes the level in full, as `.kbq-button` and
+    // `.kbq-dropdown-item` do.
+    .kbq-select__panel,
+    .kbq-select__footer-item {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/select/index.d.ts

@@ -54,12 +54,18 @@ declare class KbqOptionTooltip extends KbqTooltipTrigger implements AfterViewIni
     private readonly resizeObserver;
     private readonly contentObserver;
     private readonly isBrowser;
+    private readonly window;
     private readonly debounceInterval;
     private resizeSubscription;
     private contentObserverSubscription;
     private focusMonitorSubscription;
     get textElement(): HTMLElement;
     get isOverflown(): boolean;
+    /**
+     * Whether one of the option's own line boxes is truncating its text. The ellipsis is part of the
+     * condition, so a child clipping for another reason is not read as truncated text.
+     */
+    private hasClippedLine;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -150,6 +156,7 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
     private readonly _changeDetectorRef;
     private readonly _ngZone;
     private readonly _renderer;
+    private readonly interactivityChecker;
     defaultErrorStateMatcher: ErrorStateMatcher;
     elementRef: ElementRef<HTMLElement>;
     private overlayContainer;
@@ -629,7 +636,7 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * Sets up the overlay dimensions based on trigger size and configured options.
      */
     openPanel(): void;
-    /** Closes the overlay panel and focuses the host element. */
+    /** Closes the overlay panel. */
     close(): void;
     /**
      * Sets the select's value. Part of the ControlValueAccessor interface
@@ -725,6 +732,15 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
      * @param $event The mouse event to handle.
      */
     handleClick($event: MouseEvent): void;
+    /** Whether TAB should stop on a footer control. */
+    private isFooterTabStop;
+    /**
+     * Moves focus to the footer control next to `current` — the first one when focus is still outside the
+     * footer — and reports whether it landed. Every element is offered to `InteractivityChecker` rather
+     * than matched against a hand-written selector, which would drift from what the browser considers a
+     * tab stop.
+     */
+    private focusNextInFooter;
     /** @docs-private */
     setSelectedOptionsByClick(option: KbqOption): void;
     /** @docs-private */
@@ -865,7 +881,7 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
 
 declare class KbqSelectModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSelectModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqOptionModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqToolTipModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof i6.NgTemplateOutlet, typeof i7.A11yModule, typeof KbqSelect, typeof KbqOptionTooltip, typeof KbqSelectLoading, typeof KbqSelectError, typeof KbqSelectNoOptions, typeof KbqSelectErrorText], [typeof KbqSelect, typeof KbqOptionTooltip, typeof i2.KbqOptionModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof KbqSelectLoading, typeof i11.KbqFormFieldModule, typeof KbqSelectError, typeof KbqSelectNoOptions, typeof KbqSelectErrorText]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqOptionModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqToolTipModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectFooterItem, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof i6.NgTemplateOutlet, typeof i7.A11yModule, typeof KbqSelect, typeof KbqOptionTooltip, typeof KbqSelectLoading, typeof KbqSelectError, typeof KbqSelectNoOptions, typeof KbqSelectErrorText], [typeof KbqSelect, typeof KbqOptionTooltip, typeof i2.KbqOptionModule, typeof i2.KbqSelectSearch, typeof i2.KbqSelectFooter, typeof i2.KbqSelectFooterItem, typeof i2.KbqSelectMatcher, typeof i2.KbqSelectTrigger, typeof i2.KbqSelectSearchEmptyResult, typeof KbqSelectLoading, typeof i11.KbqFormFieldModule, typeof KbqSelectError, typeof KbqSelectNoOptions, typeof KbqSelectErrorText]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqSelectModule>;
 }
 

package/select/select.scss

@@ -14,6 +14,19 @@
     & .kbq-select__footer {
         @extend %kbq-select-footer;
     }
+
+    & .kbq-select__footer-item {
+        @extend %kbq-select-footer-item;
+    }
+
+    // A menu-style action lines up with the options above it, so the footer drops to the list's own
+    // inset and lets the row's padding cover the rest. Kept here rather than in `%kbq-select-footer`,
+    // which the dropdown and the autocomplete also extend without ever styling the row itself. No child
+    // combinator: the content query behind the row is `descendants: true`, so wrapping it must not
+    // silently leave the inset behind.
+    & .kbq-select__footer:has(.kbq-select__footer-item) {
+        --kbq-select-footer-size-padding-horizontal: var(--kbq-size-xxs);
+    }
 }
 
 .kbq-select__content {

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 destroyRef;
     private readonly isBrowser;
     get opened(): boolean;
     set opened(value: boolean);

package/sidepanel/index.d.ts

@@ -155,6 +155,7 @@ declare class KbqSidepanelClose implements OnInit, OnChanges {
     sidepanelRef: KbqSidepanelRef<any, any>;
     private elementRef;
     private sidepanelService;
+    private readonly renderer;
     sidepanelResult: any;
     readonly kbqSidepanelClose: i0.InputSignal<any>;
     ngOnInit(): void;
@@ -250,6 +251,14 @@ declare class KbqSidepanelService implements OnDestroy {
     private closeSidepanels;
     private getOpenedSidepanelsWithSamePosition;
     private updateAnimationState;
+    /**
+     * Moves a sidepanel into `state`, unless it is closing already.
+     *
+     * The exit animation is what disposes the overlay, so interrupting it with another state leaves the
+     * sidepanel in the DOM and in `openedSidepanels` for good — which is what closing a stack of them as
+     * a group used to do to the panels underneath.
+     */
+    private setAnimationState;
     /**
      * Removes a sidepanel from the array of open sidepanels.
      * @param sidepanelRef Sidepanel to be removed.

package/tabs/_tabs-common.scss

@@ -139,14 +139,23 @@
     .kbq-tab-header__pagination {
         @include vendor-prefixes.user-select(none);
 
-        position: relative;
+        // Overlaid on top of the scroll container (rather than a flex sibling reserving its own
+        // space) so the tab list always spans the full width, matching Koobiq React: the button
+        // itself fades away at each scroll bound instead of the tab list resizing around it.
+        position: absolute;
+        inset-block: 0;
         display: none;
         justify-content: center;
         align-items: center;
         z-index: 2;
         -webkit-tap-highlight-color: transparent;
-        touch-action: none;
+        // Not `none`: this element overlays live scroll-container edge, so `none` also blocks a
+        // touch swipe that starts in that band from panning the strip at all. `manipulation` still
+        // suppresses double-tap-to-zoom, which is all this was here for.
+        touch-action: manipulation;
         padding: 0 var(--kbq-size-m);
+        opacity: 1;
+        visibility: visible;
 
         .kbq-tab-header__pagination-controls_enabled & {
             display: flex;
@@ -155,6 +164,106 @@
         &:not(.kbq-disabled) {
             cursor: pointer;
         }
+
+        &.kbq-disabled {
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+        }
+    }
+
+    .kbq-tab-header__pagination_before {
+        inset-inline-start: 0;
+    }
+
+    .kbq-tab-header__pagination_after {
+        inset-inline-end: 0;
+    }
+
+    .kbq-tab-header__scroll-container {
+        @include vendor-prefixes.user-select(none);
+
+        // Matches `.kbq-tab-header__pagination`'s real rendered width (its horizontal padding
+        // twice, plus the 16px arrow icon) rather than an unrelated constant — otherwise the label
+        // underneath fades in for a few pixels *before* it clears the paginator it's still hidden
+        // behind, which is a band that's visible but can't be clicked (the paginator, not the
+        // label, is what's on top there).
+        --mask-size: calc(var(--kbq-size-m) * 2 + 16px);
+
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        // `kbq-tab-group_vertical` sits on an ancestor either way: the `<kbq-tab-group>` wrapping a
+        // `kbq-tab-header`, or the `[kbqTabNavBar]` host itself — so one descendant selector covers
+        // both `KbqPaginatedTabHeader` subclasses instead of the two disagreeing on the scrollbar.
+        .kbq-tab-group_vertical & {
+            overflow-x: hidden;
+            overflow-y: auto;
+            scrollbar-width: auto;
+
+            &::-webkit-scrollbar {
+                display: block;
+            }
+        }
+
+        .kbq-tab-header__pagination-controls_enabled & {
+            cursor: grab;
+        }
+
+        &.kbq-tab-header__scroll-container_dragging {
+            cursor: grabbing;
+        }
+
+        &.kbq-tab-header__scroll-container_overflow-before {
+            mask-image: linear-gradient(to right, transparent var(--mask-size), #000 calc(var(--mask-size) * 1.5));
+        }
+
+        &.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to right,
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
+
+        &.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to right,
+                transparent var(--mask-size),
+                #000 calc(var(--mask-size) * 1.5),
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
+
+        .kbq-tab-header_rtl &.kbq-tab-header__scroll-container_overflow-before {
+            mask-image: linear-gradient(to left, transparent var(--mask-size), #000 calc(var(--mask-size) * 1.5));
+        }
+
+        .kbq-tab-header_rtl &.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to left,
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
+
+        .kbq-tab-header_rtl
+            &.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to left,
+                transparent var(--mask-size),
+                #000 calc(var(--mask-size) * 1.5),
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {