@rt-tools/ui-kit-v2 0.42.0 → 0.43.0

package/fesm2022/rt-tools-ui-kit-v2-tabs.mjs

@@ -1,12 +1,15 @@
 import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChildren, inject, input, linkedSignal, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChildren, effect, inject, input, linkedSignal, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { debounceTime, fromEvent } from "rxjs";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
 import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
-import { rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { CdkConnectedOverlay } from "@angular/cdk/overlay";
+import { FocusKeyManager } from "@angular/cdk/a11y";
+import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
 var RtTabDirective = class RtTabDirective {
 	constructor() {
 		this.#t_uiTabInvalid = rtKitLabel("uiTabInvalid");
@@ -47,6 +50,11 @@ var RtTabDirective = class RtTabDirective {
 			...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.pinned = input(false, {
+			...ngDevMode ? { debugName: "pinned" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.contextMenu = input(null, ...ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []);
 		this.closeTooltip = input("", ...ngDevMode ? [{ debugName: "closeTooltip" }] : /* istanbul ignore next */ []);
 		this.closeTooltipPlacement = input(null, ...ngDevMode ? [{ debugName: "closeTooltipPlacement" }] : /* istanbul ignore next */ []);
 		this.closeHovered = signal(false, ...ngDevMode ? [{ debugName: "closeHovered" }] : /* istanbul ignore next */ []);
@@ -57,7 +65,8 @@ var RtTabDirective = class RtTabDirective {
 		}, ...ngDevMode ? [{ debugName: "buttonTooltip" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = computed(() => this.label() || this.titleTemplate() ? null : this.tooltip() || null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.closeLabel = computed(() => this.closeTooltip() || this.#t_uiClose(), ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
-		this.hasIcon = computed(() => Boolean(this.icon() || this.glyph()), ...ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []);
+		this.shownIcon = computed(() => this.icon() ?? (this.pinned() && !this.glyph() ? "pin" : null), ...ngDevMode ? [{ debugName: "shownIcon" }] : /* istanbul ignore next */ []);
+		this.hasIcon = computed(() => Boolean(this.shownIcon() || this.glyph()), ...ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []);
 		this.badgeOverlay = computed(() => this.badgePosition() === "overlay" && this.badge() !== null && this.hasIcon(), ...ngDevMode ? [{ debugName: "badgeOverlay" }] : /* istanbul ignore next */ []);
 		this.showClose = computed(() => this.closable() && !this.disabled(), ...ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []);
 	}
@@ -200,6 +209,20 @@ var RtTabDirective = class RtTabDirective {
 					isRequired: false,
 					transformFunction: null
 				},
+				pinned: {
+					classPropertyName: "pinned",
+					publicName: "pinned",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contextMenu: {
+					classPropertyName: "contextMenu",
+					publicName: "contextMenu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				closeTooltip: {
 					classPropertyName: "closeTooltip",
 					publicName: "closeTooltip",
@@ -365,6 +388,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		pinned: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pinned",
+				required: false
+			}]
+		}],
+		contextMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextMenu",
+				required: false
+			}]
+		}],
 		closeTooltip: [{
 			type: i0.Input,
 			args: [{
@@ -597,6 +636,12 @@ function rtTabsEasing(value) {
 		return bezierAt((low + high) / 2, y1, y2);
 	};
 }
+function rtTabsRestShown(list) {
+	return {
+		before: list.scrollLeft > 0,
+		after: list.scrollWidth - list.scrollLeft - list.clientWidth > 1
+	};
+}
 function rtTabsPageTarget(list, from, back, step) {
 	const max = Math.max(0, list.scrollWidth - list.clientWidth);
 	const shift = step === "fixed" ? FIXED_STEP : list.clientWidth * STEP_SHARE[step];
@@ -625,6 +670,16 @@ var RtTabsScroller = class {
 	from() {
 		return this.#target ?? this.#list()?.nativeElement.scrollLeft ?? 0;
 	}
+	place(target, instant) {
+		const list = this.#list()?.nativeElement;
+		if (target === null || !list) return;
+		if (instant) {
+			this.stop();
+			list.scrollLeft = target;
+			return;
+		}
+		this.to(target);
+	}
 	to(left) {
 		const list = this.#list()?.nativeElement;
 		const win = this.#win;
@@ -754,6 +809,23 @@ var RtTabsFollow = class {
 		this.#list = null;
 	}
 };
+function rtTabsKeyTarget(key, direction, index, count) {
+	const isVertical = direction === "vertical";
+	return (/* @__PURE__ */ new Map([
+		[isVertical ? "ArrowDown" : "ArrowRight", (index + 1) % count],
+		[isVertical ? "ArrowUp" : "ArrowLeft", (index - 1 + count) % count],
+		["Home", 0],
+		["End", count - 1]
+	])).get(key);
+}
+function rtTabsKeyTargetId(enabled, currentId, key, direction) {
+	if (!enabled.length) return;
+	const index = rtTabsKeyTarget(key, direction, enabled.indexOf(currentId), enabled.length);
+	return index === void 0 ? void 0 : enabled[index];
+}
+function rtTabsSelectedId(enabled, candidate) {
+	return candidate !== null && enabled.includes(candidate) ? candidate : enabled[0] ?? null;
+}
 var RtTabsControlDirective = class RtTabsControlDirective {
 	constructor() {
 		this.templateRef = inject(TemplateRef);
@@ -809,6 +881,539 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+var RtTabsMenuKeysDirective = class RtTabsMenuKeysDirective {
+	#host = inject(ElementRef).nativeElement;
+	#doc = inject(DOCUMENT);
+	#returnTo = this.#doc.activeElement;
+	#keys = null;
+	constructor() {
+		afterNextRender(() => {
+			const items = this.#items().map((node) => ({
+				disabled: node.getAttribute("aria-disabled") === "true" || node.hasAttribute("disabled"),
+				focus: () => node.focus()
+			}));
+			this.#keys = new FocusKeyManager(items).withWrap().withHomeAndEnd();
+			this.#keys.setFirstItemActive();
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.#keys?.destroy();
+			const active = this.#doc.activeElement;
+			if ((active === null || active === this.#doc.body || this.#host.contains(active)) && this.#returnTo instanceof HTMLElement && this.#returnTo.isConnected) this.#returnTo.focus();
+		});
+	}
+	onKeydown(event) {
+		if (event.key !== "Tab" && event.key !== "Escape") this.#keys?.onKeydown(event);
+	}
+	#items() {
+		const items = Array.from(this.#host.querySelectorAll("[role=\"menuitem\"]"));
+		return items.length > 0 ? items : Array.from(this.#host.querySelectorAll("button"));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTabsMenuKeysDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtTabsMenuKeysDirective,
+			isStandalone: true,
+			selector: "[rtTabsMenuKeys]",
+			host: { listeners: { "keydown": "onKeydown($event)" } },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtTabsMenuKeysDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[rtTabsMenuKeys]",
+			host: { "(keydown)": "onKeydown($event)" }
+		}]
+	}],
+	ctorParameters: () => []
+});
+const BEM_BLOCK$2 = "rt-tabs-context-menu";
+var RtTabsContextMenuComponent = class RtTabsContextMenuComponent {
+	constructor() {
+		this.state = signal(null, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	}
+	open(event, tab) {
+		const template = tab.contextMenu();
+		if (template === null) return;
+		event.preventDefault();
+		this.state.set({
+			template,
+			point: RtTabsContextMenuComponent.pointOf(event),
+			context: { $implicit: tab.id() }
+		});
+	}
+	static pointOf(event) {
+		if (event.clientX === 0 && event.clientY === 0 && event.target instanceof Element) {
+			const box = event.target.getBoundingClientRect();
+			return {
+				x: box.left,
+				y: box.bottom
+			};
+		}
+		return {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	close() {
+		this.state.set(null);
+	}
+	onKeydown(event) {
+		if (event.key === "Escape") this.close();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTabsContextMenuComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtTabsContextMenuComponent,
+			isStandalone: true,
+			selector: "rt-tabs-context-menu",
+			host: { classAttribute: "rt-tabs-context-menu" },
+			ngImport: i0,
+			template: "@if (state(); as menu) {\n    <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayHasBackdrop\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayOrigin]=\"menu.point\"\n        (backdropClick)=\"close()\"\n        (detach)=\"close()\"\n        (overlayKeydown)=\"onKeydown($event)\">\n        <div\n            rtBlock=\"rt-tabs-more-menu\"\n            rtTabsMenuKeys\n            role=\"menu\"\n            tabindex=\"-1\"\n            qa-dataid=\"tabs-context-menu\"\n            (click)=\"close()\"\n            (keydown.enter)=\"close()\">\n            <ng-container [ngTemplateOutlet]=\"menu.template\" [ngTemplateOutletContext]=\"menu.context\" />\n        </div>\n    </ng-template>\n}\n",
+			dependencies: [
+				{
+					kind: "directive",
+					type: CdkConnectedOverlay,
+					selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+					inputs: [
+						"cdkConnectedOverlayOrigin",
+						"cdkConnectedOverlayPositions",
+						"cdkConnectedOverlayPositionStrategy",
+						"cdkConnectedOverlayOffsetX",
+						"cdkConnectedOverlayOffsetY",
+						"cdkConnectedOverlayWidth",
+						"cdkConnectedOverlayHeight",
+						"cdkConnectedOverlayMinWidth",
+						"cdkConnectedOverlayMinHeight",
+						"cdkConnectedOverlayBackdropClass",
+						"cdkConnectedOverlayPanelClass",
+						"cdkConnectedOverlayViewportMargin",
+						"cdkConnectedOverlayScrollStrategy",
+						"cdkConnectedOverlayOpen",
+						"cdkConnectedOverlayDisableClose",
+						"cdkConnectedOverlayTransformOriginOn",
+						"cdkConnectedOverlayHasBackdrop",
+						"cdkConnectedOverlayLockPosition",
+						"cdkConnectedOverlayFlexibleDimensions",
+						"cdkConnectedOverlayGrowAfterOpen",
+						"cdkConnectedOverlayPush",
+						"cdkConnectedOverlayDisposeOnNavigation",
+						"cdkConnectedOverlayUsePopover",
+						"cdkConnectedOverlayMatchWidth",
+						"cdkConnectedOverlay"
+					],
+					outputs: [
+						"backdropClick",
+						"positionChange",
+						"attach",
+						"detach",
+						"overlayKeydown",
+						"overlayOutsideClick"
+					],
+					exportAs: ["cdkConnectedOverlay"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTabsMenuKeysDirective,
+					selector: "[rtTabsMenuKeys]"
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtTabsContextMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-tabs-context-menu",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				CdkConnectedOverlay,
+				NgTemplateOutlet,
+				RtTabsMenuKeysDirective,
+				BlockDirective
+			],
+			host: { class: BEM_BLOCK$2 },
+			template: "@if (state(); as menu) {\n    <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayHasBackdrop\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        [cdkConnectedOverlayOpen]=\"true\"\n        [cdkConnectedOverlayOrigin]=\"menu.point\"\n        (backdropClick)=\"close()\"\n        (detach)=\"close()\"\n        (overlayKeydown)=\"onKeydown($event)\">\n        <div\n            rtBlock=\"rt-tabs-more-menu\"\n            rtTabsMenuKeys\n            role=\"menu\"\n            tabindex=\"-1\"\n            qa-dataid=\"tabs-context-menu\"\n            (click)=\"close()\"\n            (keydown.enter)=\"close()\">\n            <ng-container [ngTemplateOutlet]=\"menu.template\" [ngTemplateOutletContext]=\"menu.context\" />\n        </div>\n    </ng-template>\n}\n"
+		}]
+	}]
+});
+const BEM_BLOCK$1 = "rt-tabs-more";
+var RtTabsMoreComponent = class RtTabsMoreComponent {
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.popover = viewChild(RtPopoverDirective, ...ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []);
+		this.hasError = computed(() => this.tabs().some((tab) => tab.invalid()), ...ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []);
+		this.tabs = input([], ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+		this.pick = output();
+		this.closeTab = output();
+		effect(() => {
+			const popover = this.popover();
+			if (this.tabs().length === 0 && popover?.isOpen()) popover.close();
+		});
+	}
+	onPick(tab, popover) {
+		if (tab.disabled()) return;
+		this.pick.emit(tab.id());
+		popover.close();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtTabsMoreComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtTabsMoreComponent,
+			isStandalone: true,
+			selector: "rt-tabs-more",
+			inputs: { tabs: {
+				classPropertyName: "tabs",
+				publicName: "tabs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			outputs: {
+				pick: "pick",
+				closeTab: "closeTab"
+			},
+			host: {
+				attributes: { "role": "presentation" },
+				properties: { "class.rt-tabs-more--idle": "!tabs().length" },
+				classAttribute: "rt-tabs-more"
+			},
+			viewQueries: [{
+				propertyName: "popover",
+				first: true,
+				predicate: RtPopoverDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<!-- Пункт выглядит как вкладка и берёт её блок: второй набор тех же правил разошёлся бы с первым. -->\n<div rtBlock=\"rt-tab-item\" role=\"presentation\">\n    <button\n        rtElem=\"trigger\"\n        qa-dataid=\"tabs-more\"\n        type=\"button\"\n        role=\"tab\"\n        aria-haspopup=\"menu\"\n        aria-selected=\"false\"\n        #morePopover=\"rtPopover\"\n        rtPopoverAlign=\"end\"\n        rtPopoverFitViewport\n        rtPopoverOffsetY=\"6\"\n        [attr.aria-expanded]=\"morePopover.isOpen()\"\n        [attr.tabindex]=\"tabs().length ? 0 : -1\"\n        [rtMod]=\"{ open: morePopover.isOpen() }\"\n        [rtPopover]=\"moreTpl\">\n        <span rtElem=\"title\">{{ t().uiNavMore }}</span>\n        @if (hasError()) {\n            <span rtElem=\"more-dot\" role=\"img\" qa-dataid=\"tabs-more-dot\" [attr.aria-label]=\"t().uiTabInvalid\"></span>\n        }\n        <rt-icon color=\"current\" size=\"xs\" [name]=\"morePopover.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n</div>\n\n<ng-template #moreTpl>\n    <div rtBlock=\"rt-tabs-more-menu\" rtTabsMenuKeys role=\"menu\" qa-dataid=\"tabs-more-menu\">\n        @for (tab of tabs(); track tab.id()) {\n            <div rtElem=\"row\" role=\"none\" [rtMod]=\"{ disabled: tab.disabled(), invalid: tab.invalid() }\">\n                <button\n                    rtElem=\"pick\"\n                    qa-dataid=\"tabs-more-item\"\n                    type=\"button\"\n                    role=\"menuitem\"\n                    [attr.aria-disabled]=\"tab.disabled() || null\"\n                    [attr.data-id]=\"tab.id()\"\n                    [rtTooltip]=\"tab.buttonTooltip()\"\n                    (click)=\"onPick(tab, morePopover)\">\n                    @if (tab.hasIcon()) {\n                        <rt-icon\n                            rtElem=\"icon\"\n                            size=\"sm\"\n                            [name]=\"tab.icon()\"\n                            [glyph]=\"tab.glyph()\"\n                            [color]=\"tab.iconColor()\"\n                            [fill]=\"tab.iconFill()\" />\n                    }\n                    <span rtElem=\"label\">\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            {{ tab.label() }}\n                        }\n                    </span>\n                    @if (tab.badge() !== null) {\n                        <span rtElem=\"badge\">{{ tab.badge() }}</span>\n                    }\n                </button>\n                @if (tab.showClose()) {\n                    <button\n                        rtElem=\"close\"\n                        qa-dataid=\"tabs-more-close\"\n                        type=\"button\"\n                        [attr.aria-label]=\"tab.closeLabel()\"\n                        [attr.data-id]=\"tab.id()\"\n                        (click)=\"closeTab.emit(tab)\">\n                        <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n                    </button>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs-more{--rt-tabs-more-dot-radius: var(--rt-radius-full);display:inline-flex;order:9999}.rt-tabs-more--idle{position:absolute;top:0;left:0;pointer-events:none;visibility:hidden}.rt-tabs-more .rt-tab-item__trigger--open{background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tabs-more .rt-tab-item__more-dot{width:var(--rt-size-2);height:var(--rt-size-2);border-radius:var(--rt-tabs-more-dot-radius);background-color:var(--rt-color-state-danger)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverBackdropClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick",
+						"rtTooltipShowOnTap"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "directive",
+					type: RtTabsMenuKeysDirective,
+					selector: "[rtTabsMenuKeys]"
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtTabsMoreComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-tabs-more",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconComponent,
+				RtPopoverDirective,
+				RtTooltipDirective,
+				RtTabsMenuKeysDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK$1,
+				role: "presentation",
+				"[class.rt-tabs-more--idle]": "!tabs().length"
+			},
+			template: "<!-- Пункт выглядит как вкладка и берёт её блок: второй набор тех же правил разошёлся бы с первым. -->\n<div rtBlock=\"rt-tab-item\" role=\"presentation\">\n    <button\n        rtElem=\"trigger\"\n        qa-dataid=\"tabs-more\"\n        type=\"button\"\n        role=\"tab\"\n        aria-haspopup=\"menu\"\n        aria-selected=\"false\"\n        #morePopover=\"rtPopover\"\n        rtPopoverAlign=\"end\"\n        rtPopoverFitViewport\n        rtPopoverOffsetY=\"6\"\n        [attr.aria-expanded]=\"morePopover.isOpen()\"\n        [attr.tabindex]=\"tabs().length ? 0 : -1\"\n        [rtMod]=\"{ open: morePopover.isOpen() }\"\n        [rtPopover]=\"moreTpl\">\n        <span rtElem=\"title\">{{ t().uiNavMore }}</span>\n        @if (hasError()) {\n            <span rtElem=\"more-dot\" role=\"img\" qa-dataid=\"tabs-more-dot\" [attr.aria-label]=\"t().uiTabInvalid\"></span>\n        }\n        <rt-icon color=\"current\" size=\"xs\" [name]=\"morePopover.isOpen() ? 'chevron-up' : 'chevron-down'\" />\n    </button>\n</div>\n\n<ng-template #moreTpl>\n    <div rtBlock=\"rt-tabs-more-menu\" rtTabsMenuKeys role=\"menu\" qa-dataid=\"tabs-more-menu\">\n        @for (tab of tabs(); track tab.id()) {\n            <div rtElem=\"row\" role=\"none\" [rtMod]=\"{ disabled: tab.disabled(), invalid: tab.invalid() }\">\n                <button\n                    rtElem=\"pick\"\n                    qa-dataid=\"tabs-more-item\"\n                    type=\"button\"\n                    role=\"menuitem\"\n                    [attr.aria-disabled]=\"tab.disabled() || null\"\n                    [attr.data-id]=\"tab.id()\"\n                    [rtTooltip]=\"tab.buttonTooltip()\"\n                    (click)=\"onPick(tab, morePopover)\">\n                    @if (tab.hasIcon()) {\n                        <rt-icon\n                            rtElem=\"icon\"\n                            size=\"sm\"\n                            [name]=\"tab.icon()\"\n                            [glyph]=\"tab.glyph()\"\n                            [color]=\"tab.iconColor()\"\n                            [fill]=\"tab.iconFill()\" />\n                    }\n                    <span rtElem=\"label\">\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            {{ tab.label() }}\n                        }\n                    </span>\n                    @if (tab.badge() !== null) {\n                        <span rtElem=\"badge\">{{ tab.badge() }}</span>\n                    }\n                </button>\n                @if (tab.showClose()) {\n                    <button\n                        rtElem=\"close\"\n                        qa-dataid=\"tabs-more-close\"\n                        type=\"button\"\n                        [attr.aria-label]=\"tab.closeLabel()\"\n                        [attr.data-id]=\"tab.id()\"\n                        (click)=\"closeTab.emit(tab)\">\n                        <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n                    </button>\n                }\n            </div>\n        }\n    </div>\n</ng-template>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs-more{--rt-tabs-more-dot-radius: var(--rt-radius-full);display:inline-flex;order:9999}.rt-tabs-more--idle{position:absolute;top:0;left:0;pointer-events:none;visibility:hidden}.rt-tabs-more .rt-tab-item__trigger--open{background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tabs-more .rt-tab-item__more-dot{width:var(--rt-size-2);height:var(--rt-size-2);border-radius:var(--rt-tabs-more-dot-radius);background-color:var(--rt-color-state-danger)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		popover: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => RtPopoverDirective), { isSignal: true }]
+		}],
+		tabs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabs",
+				required: false
+			}]
+		}],
+		pick: [{
+			type: i0.Output,
+			args: ["pick"]
+		}],
+		closeTab: [{
+			type: i0.Output,
+			args: ["closeTab"]
+		}]
+	}
+});
+const FIT_TOLERANCE = .5;
+function widthOf(tabs) {
+	return tabs.reduce((sum, tab) => sum + tab.width, 0);
+}
+function idOf(tab) {
+	return tab.id;
+}
+function leadingFit(free, budget, limit) {
+	const prefix = [];
+	let used = 0;
+	for (const tab of free) {
+		if (prefix.length >= limit || used + tab.width > budget) break;
+		prefix.push(tab);
+		used += tab.width;
+	}
+	return prefix;
+}
+function makeRoom(prefix, selected, budget, limit) {
+	while (prefix.length > 0 && (widthOf(prefix) + selected.width > budget || prefix.length >= limit)) prefix.pop();
+	prefix.push(selected);
+}
+function rtTabsFitRow(input) {
+	const { slots, selectedId, moreWidth, available, limit = Infinity } = input;
+	const pinned = slots.filter((tab) => tab.pinned);
+	const free = slots.filter((tab) => !tab.pinned);
+	const freeLimit = Math.max(0, limit - pinned.length);
+	if (widthOf(slots) <= available + FIT_TOLERANCE && free.length <= freeLimit) return {
+		row: [...pinned, ...free].map(idOf),
+		more: []
+	};
+	const selected = free.find((tab) => tab.id === selectedId);
+	const budget = available - moreWidth - widthOf(pinned) + FIT_TOLERANCE;
+	const prefix = leadingFit(free, budget, freeLimit);
+	if (selected !== void 0 && !prefix.includes(selected)) makeRoom(prefix, selected, budget, freeLimit);
+	const inRow = new Set(prefix);
+	return {
+		row: [...pinned, ...prefix].map(idOf),
+		more: free.filter((tab) => !inRow.has(tab)).map(idOf)
+	};
+}
+const EMPTY_LAYOUT = {
+	row: [],
+	more: []
+};
+const RT_TABS_MEASURE_CLASS = "rt-tabs__tab-list--measure";
+function sameLayout(a, b) {
+	return a.row.join() === b.row.join() && a.more.join() === b.more.join();
+}
+var RtTabsMoreRow = class {
+	#win;
+	#list;
+	#deps;
+	#layout;
+	#watch;
+	constructor(win, list, deps) {
+		this.#layout = signal(EMPTY_LAYOUT, {
+			...ngDevMode ? { debugName: "#layout" } : /* istanbul ignore next */ {},
+			equal: sameLayout
+		});
+		this.#watch = null;
+		this.ids = computed(() => new Set(this.#layout().more), ...ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []);
+		this.order = computed(() => new Map(this.#layout().row.map((id, index) => [id, index])), ...ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []);
+		this.moreTabs = computed(() => this.#deps.visible().filter((tab) => this.ids().has(tab.id())), ...ngDevMode ? [{ debugName: "moreTabs" }] : /* istanbul ignore next */ []);
+		this.rowTabs = computed(() => {
+			const order = this.order();
+			return this.#deps.visible().filter((tab) => !this.ids().has(tab.id())).sort((a, b) => (order.get(a.id()) ?? 0) - (order.get(b.id()) ?? 0));
+		}, ...ngDevMode ? [{ debugName: "rowTabs" }] : /* istanbul ignore next */ []);
+		this.#win = win;
+		this.#list = list;
+		this.#deps = deps;
+		afterRenderEffect(() => {
+			deps.visible();
+			deps.enabled();
+			this.#watchSizes();
+		});
+		afterRenderEffect(() => {
+			deps.visible();
+			deps.selectedId();
+			deps.enabled();
+			deps.limit();
+			this.#measure();
+		});
+		inject(DestroyRef).onDestroy(() => this.#watch?.disconnect());
+	}
+	#watchSizes() {
+		const list = this.#list()?.nativeElement;
+		this.#watch?.disconnect();
+		this.#watch = null;
+		if (!this.#deps.enabled() || !list || !this.#win || !("ResizeObserver" in this.#win)) return;
+		const watch = new ResizeObserver(() => this.#measure());
+		watch.observe(list);
+		Array.from(list.children).forEach((node) => watch.observe(node));
+		this.#watch = watch;
+	}
+	#measure() {
+		const list = this.#list()?.nativeElement;
+		if (!this.#deps.enabled() || !list || !this.#win) {
+			this.#layout.set(EMPTY_LAYOUT);
+			return;
+		}
+		const style = this.#win.getComputedStyle(list);
+		const padding = (parseFloat(style.paddingInlineStart) || 0) + (parseFloat(style.paddingInlineEnd) || 0);
+		const available = list.getBoundingClientRect().width - padding;
+		if (available <= 0) return;
+		list.classList.add(RT_TABS_MEASURE_CLASS);
+		const slots = this.#deps.visible().map((tab) => ({
+			id: tab.id(),
+			pinned: tab.pinned(),
+			width: list.querySelector(`[data-tabitem="${tab.id()}"]`)?.getBoundingClientRect().width ?? 0
+		}));
+		list.classList.remove(RT_TABS_MEASURE_CLASS);
+		this.#layout.set(rtTabsFitRow({
+			slots,
+			available,
+			selectedId: this.#deps.selectedId(),
+			limit: this.#deps.limit(),
+			moreWidth: list.querySelector(".rt-tabs-more")?.getBoundingClientRect().width ?? 0
+		}));
+	}
+};
 const REST_DEBOUNCE_MS = 50;
 const BEM_BLOCK = "rt-tabs";
 var RtTabsComponent = class RtTabsComponent {
@@ -829,20 +1434,12 @@ var RtTabsComponent = class RtTabsComponent {
 		this.visibleTabs = computed(() => this.tabs().filter((tab) => !tab.hidden()), ...ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []);
 		this.leftControls = computed(() => this.controls().filter((c) => c.side() === "left"), ...ngDevMode ? [{ debugName: "leftControls" }] : /* istanbul ignore next */ []);
 		this.rightControls = computed(() => this.controls().filter((c) => c.side() === "right"), ...ngDevMode ? [{ debugName: "rightControls" }] : /* istanbul ignore next */ []);
-		this.selectedId = computed(() => {
-			const enabled = this.visibleTabs().filter((tab) => !tab.disabled());
-			const candidate = this.activeId() ?? this.#internalId();
-			const candidateValid = candidate !== null && enabled.some((tab) => tab.id() === candidate);
-			let result;
-			if (candidateValid) result = candidate;
-			else if (enabled.length) result = enabled[0].id();
-			else result = null;
-			return result;
-		}, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+		this.selectedId = computed(() => rtTabsSelectedId(this.visibleTabs().filter((tab) => !tab.disabled()).map((tab) => tab.id()), this.activeId() ?? this.#internalId()), ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+		this.moreMode = computed(() => this.overflow() === "more" && this.direction() === "horizontal", ...ngDevMode ? [{ debugName: "moreMode" }] : /* istanbul ignore next */ []);
 		this.activeTab = computed(() => this.visibleTabs().find((tab) => tab.id() === this.selectedId()) ?? null, ...ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []);
 		this.focusId = computed(() => {
 			const focused = this.#focusedId();
-			return focused !== null && this.visibleTabs().some((tab) => tab.id() === focused && !tab.disabled()) ? focused : this.selectedId();
+			return focused !== null && this.more.rowTabs().some((tab) => tab.id() === focused && !tab.disabled()) ? focused : this.selectedId();
 		}, ...ngDevMode ? [{ debugName: "focusId" }] : /* istanbul ignore next */ []);
 		this.restBeforeVisible = signal(false, ...ngDevMode ? [{ debugName: "restBeforeVisible" }] : /* istanbul ignore next */ []);
 		this.restAfterVisible = signal(false, ...ngDevMode ? [{ debugName: "restAfterVisible" }] : /* istanbul ignore next */ []);
@@ -857,8 +1454,14 @@ var RtTabsComponent = class RtTabsComponent {
 			duration: () => this.animationDuration(),
 			preserve: () => this.preserveContent()
 		});
-		this.ink = new RtTabsInk(this.#win, this.tabListRef, {
+		this.more = new RtTabsMoreRow(this.#win, this.tabListRef, {
+			enabled: this.moreMode,
 			visible: this.visibleTabs,
+			selectedId: this.selectedId,
+			limit: computed(() => this.moreLimit())
+		});
+		this.ink = new RtTabsInk(this.#win, this.tabListRef, {
+			visible: this.more.rowTabs,
 			active: this.activeTab
 		});
 		this.activeId = input(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
@@ -871,6 +1474,7 @@ var RtTabsComponent = class RtTabsComponent {
 			...ngDevMode ? { debugName: "dense" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.closeOn = input("all", ...ngDevMode ? [{ debugName: "closeOn" }] : /* istanbul ignore next */ []);
 		this.contentScrollable = input(true, {
 			...ngDevMode ? { debugName: "contentScrollable" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
@@ -884,7 +1488,13 @@ var RtTabsComponent = class RtTabsComponent {
 			transform: booleanAttribute
 		});
 		this.activation = input("auto", ...ngDevMode ? [{ debugName: "activation" }] : /* istanbul ignore next */ []);
+		this.overflow = input("scroll", ...ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []);
+		this.moreLimit = input(10, {
+			...ngDevMode ? { debugName: "moreLimit" } : /* istanbul ignore next */ {},
+			transform: (value) => numberAttribute(value, 10)
+		});
 		this.scrollArrows = input("overlay", ...ngDevMode ? [{ debugName: "scrollArrows" }] : /* istanbul ignore next */ []);
+		this.arrowLook = input("block", ...ngDevMode ? [{ debugName: "arrowLook" }] : /* istanbul ignore next */ []);
 		this.scrollStep = input("fixed", ...ngDevMode ? [{ debugName: "scrollStep" }] : /* istanbul ignore next */ []);
 		this.animationDuration = input(null, ...ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []);
 		this.contentTabIndex = input(0, ...ngDevMode ? [{ debugName: "contentTabIndex" }] : /* istanbul ignore next */ []);
@@ -923,26 +1533,17 @@ var RtTabsComponent = class RtTabsComponent {
 		event.stopPropagation();
 		this.#close(tab, event.currentTarget instanceof HTMLElement && event.currentTarget.matches(":focus"));
 	}
+	onMoreClose(tab) {
+		this.#close(tab, false);
+	}
 	onTabKeydown(event, tab) {
 		if (event.key === "Delete") {
 			this.#closeByKey(event, tab);
 			return;
 		}
-		const enabled = this.visibleTabs().filter((item) => !item.disabled());
-		if (!enabled.length) return;
-		const isVertical = this.direction() === "vertical";
-		const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
-		const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
-		const currentIndex = enabled.findIndex((item) => item.id() === tab.id());
-		const targetIndex = (/* @__PURE__ */ new Map([
-			[nextKey, (currentIndex + 1) % enabled.length],
-			[prevKey, (currentIndex - 1 + enabled.length) % enabled.length],
-			["Home", 0],
-			["End", enabled.length - 1]
-		])).get(event.key);
-		if (targetIndex === void 0) return;
+		const targetId = rtTabsKeyTargetId(this.more.rowTabs().filter((item) => !item.disabled()).map((item) => item.id()), tab.id(), event.key, this.direction());
+		if (targetId === void 0) return;
 		event.preventDefault();
-		const targetId = enabled[targetIndex].id();
 		if (this.activation() === "manual") {
 			this.#focusedId.set(targetId);
 			this.#scrollTabIntoView(targetId);
@@ -965,7 +1566,7 @@ var RtTabsComponent = class RtTabsComponent {
 		this.#updateRestVisibility();
 	}
 	#closeByKey(event, tab) {
-		if (!tab.showClose()) return;
+		if (!tab.showClose() || this.closeOn() === "selected" && tab.id() !== this.selectedId()) return;
 		event.preventDefault();
 		this.#close(tab, true);
 	}
@@ -985,14 +1586,12 @@ var RtTabsComponent = class RtTabsComponent {
 	}
 	#updateRestVisibility() {
 		const list = this.tabListRef()?.nativeElement;
-		if (!list || this.direction() !== "horizontal") {
-			this.restBeforeVisible.set(false);
-			this.restAfterVisible.set(false);
-			return;
-		}
-		const scrolledRight = list.scrollWidth - list.scrollLeft - list.clientWidth;
-		this.restBeforeVisible.set(list.scrollLeft > 0);
-		this.restAfterVisible.set(scrolledRight > 1);
+		const shown = list && this.direction() === "horizontal" && !this.moreMode() ? rtTabsRestShown(list) : {
+			before: false,
+			after: false
+		};
+		this.restBeforeVisible.set(shown.before);
+		this.restAfterVisible.set(shown.after);
 	}
 	#scrollToSelected(again = false) {
 		const id = this.selectedId();
@@ -1004,15 +1603,12 @@ var RtTabsComponent = class RtTabsComponent {
 	#scrollTabIntoView(id) {
 		const list = this.tabListRef()?.nativeElement;
 		const tab = list?.querySelector(`[data-tabitem="${id}"]`);
-		if (!list || !tab) return;
+		if (!list || !tab || this.moreMode()) return;
 		const first = this.#scrolledId === null;
 		const rest = list.parentElement?.querySelector(".rt-tabs__rest");
 		const target = rtTabsIntoViewTarget(list, tab, this.scrollArrows() === "overlay" ? rest?.offsetWidth ?? 0 : 0);
 		this.#scrolledId = id;
-		if (target !== null && first) {
-			this.#scroller.stop();
-			list.scrollLeft = target;
-		} else if (target !== null) this.#scroller.to(target);
+		this.#scroller.place(target, first);
 		this.#updateRestVisibility();
 	}
 	#focusTab(id) {
@@ -1064,6 +1660,13 @@ var RtTabsComponent = class RtTabsComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				closeOn: {
+					classPropertyName: "closeOn",
+					publicName: "closeOn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				contentScrollable: {
 					classPropertyName: "contentScrollable",
 					publicName: "contentScrollable",
@@ -1092,6 +1695,20 @@ var RtTabsComponent = class RtTabsComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				overflow: {
+					classPropertyName: "overflow",
+					publicName: "overflow",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				moreLimit: {
+					classPropertyName: "moreLimit",
+					publicName: "moreLimit",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				scrollArrows: {
 					classPropertyName: "scrollArrows",
 					publicName: "scrollArrows",
@@ -1099,6 +1716,13 @@ var RtTabsComponent = class RtTabsComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				arrowLook: {
+					classPropertyName: "arrowLook",
+					publicName: "arrowLook",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				scrollStep: {
 					classPropertyName: "scrollStep",
 					publicName: "scrollStep",
@@ -1152,8 +1776,12 @@ var RtTabsComponent = class RtTabsComponent {
 				isSignal: true
 			}],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div rtElem=\"tab-list-wrapper\" [rtMod]=\"{ inline: scrollArrows() === 'inline', overflowing: overflowing() }\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible(), inactive: !restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerLeave()\">\n                <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n            </div>\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction(), ink: ink.box() !== null }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    @let focusable = tab.id() === focusId();\n                    <!-- Вкладка — обёртка из двух кнопок: самой вкладки и крестика рядом с ней, не внутри,\n                         потому что кнопка в кнопке недопустима. Нажатие в любом месте обёртки выбирает\n                         вкладку; крестик своё нажатие дальше не пускает. -->\n                    <div\n                        rtBlock=\"rt-tab-item\"\n                        role=\"presentation\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [attr.data-tabitem]=\"tab.id()\"\n                        (click)=\"selectTab(tab.id())\">\n                        <button\n                            rtElem=\"trigger\"\n                            qa-dataid=\"tabs-tab\"\n                            type=\"button\"\n                            role=\"tab\"\n                            [rtMod]=\"{ closable: tab.showClose() }\"\n                            [id]=\"'rt-tab-' + tab.id()\"\n                            [attr.aria-disabled]=\"tab.disabled() || null\"\n                            [attr.aria-label]=\"tab.ariaLabel()\"\n                            [attr.aria-keyshortcuts]=\"tab.showClose() ? 'Delete' : null\"\n                            [attr.data-tabid]=\"tab.id()\"\n                            [attr.aria-selected]=\"tab.id() === selectedId()\"\n                            [attr.aria-controls]=\"headerOnly() ? null : 'rt-tabpanel-' + tab.id()\"\n                            [attr.tabindex]=\"focusable ? 0 : -1\"\n                            [rtTooltip]=\"tab.buttonTooltip()\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            @if (tab.hasIcon()) {\n                                <span rtElem=\"icon-box\">\n                                    <rt-icon\n                                        rtElem=\"icon\"\n                                        size=\"sm\"\n                                        [name]=\"tab.icon()\"\n                                        [glyph]=\"tab.glyph()\"\n                                        [color]=\"tab.iconColor()\"\n                                        [fill]=\"tab.iconFill()\" />\n                                    @if (tab.badgeOverlay()) {\n                                        <!-- prettier-ignore -->\n                                        <span rtElem=\"badge\" [rtMod]=\"{ overlay: true }\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                                    }\n                                </span>\n                            }\n\n                            @if (tab.titleTemplate(); as titleTpl) {\n                                <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                            } @else if (tab.label()) {\n                                <!-- Пустая подпись не рисуется: её зазор сдвигал значок вкладки без подписи с середины. -->\n                                <span rtElem=\"title\">{{ tab.label() }}</span>\n                            }\n\n                            @if (tab.badge() !== null && !tab.badgeOverlay()) {\n                                <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n                                <!-- prettier-ignore -->\n                                <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                            }\n                        </button>\n\n                        @if (tab.showClose()) {\n                            <!-- В таб-порядке только у вкладки в фокусе: Tab с неё идёт на её крестик, дальше — из полосы. -->\n                            <button\n                                rtElem=\"close\"\n                                qa-dataid=\"tabs-tab-close\"\n                                type=\"button\"\n                                [attr.aria-label]=\"tab.closeLabel()\"\n                                [attr.tabindex]=\"focusable ? 0 : -1\"\n                                [rtTooltip]=\"tab.closeTooltip()\"\n                                [rtTooltipPlacement]=\"tab.closeTooltipPlacement()\"\n                                (mouseenter)=\"tab.closeHovered.set(true)\"\n                                (mouseleave)=\"tab.closeHovered.set(false)\"\n                                (click)=\"onCloseClick($event, tab)\">\n                                <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n                            </button>\n                        }\n                    </div>\n                }\n\n                <!-- Полоса выбранной вкладки — одна на всю полосу: так она переезжает между вкладками. -->\n                <span\n                    rtElem=\"ink\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ placed: ink.box() !== null, animated: ink.animated(), invalid: ink.invalid() }\"\n                    [style.width.px]=\"ink.box()?.width\"\n                    [style.translate]=\"ink.translate()\"></span>\n            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible(), inactive: !restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerLeave()\">\n                <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n            </div>\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    <!-- Уходящая панель стоит поверх: место ей задаёт замер, сделанный до смены. Сохранённые\n         тела посещённых вкладок скрыты и вне таб-порядка. -->\n    @for (panel of panels.list(); track panel.tab.id()) {\n        @let current = panel.leaving === null && !panel.idle;\n        <div\n            rtElem=\"content\"\n            role=\"tabpanel\"\n            [attr.qa-dataid]=\"current ? 'tabs-panel' : panel.idle ? 'tabs-panel-idle' : 'tabs-panel-leaving'\"\n            [attr.tabindex]=\"current ? contentTabIndex() : -1\"\n            [attr.aria-hidden]=\"current ? null : 'true'\"\n            [attr.inert]=\"current ? null : ''\"\n            [hidden]=\"panel.idle\"\n            [rtMod]=\"{\n                scrollable: contentScrollable(),\n                idle: panel.idle,\n                leaving: panel.leaving !== null,\n                entering: current && panels.shift() !== null,\n                shift: panels.shift(),\n            }\"\n            [style.top.px]=\"panel.leaving?.top\"\n            [style.left.px]=\"panel.leaving?.left\"\n            [id]=\"'rt-tabpanel-' + panel.tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + panel.tab.id()\"\n            (animationend)=\"panels.animationEnd($event)\"\n            (animationcancel)=\"panels.animationEnd($event)\">\n            <ng-container [ngTemplateOutlet]=\"panel.tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);--rt-tabs-list-align: stretch;--rt-tabs-list-border-color: var(--rt-color-border-default);--rt-tabs-list-min-height: auto;--rt-tabs-list-padding-inline: 0;--rt-tabs-content-padding-top: var(--rt-space-md);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;box-sizing:border-box;align-items:var(--rt-tabs-list-align);border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);margin:0;min-block-size:var(--rt-tabs-list-min-height);-ms-overflow-style:none;overflow-x:auto;padding-inline:var(--rt-tabs-list-padding-inline);scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-tabs-content-padding-top);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tabs--dense .rt-tab-item__trigger{padding-inline:var(--rt-space-2)}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__icon-box{position:relative;display:inline-flex;flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__badge--overlay{position:absolute;top:calc(-1 * var(--rt-space-2));right:calc(-1 * (var(--rt-space-1) + var(--rt-space-0-5)));min-width:var(--rt-size-4);height:var(--rt-size-4);box-sizing:border-box;padding:0 var(--rt-space-1);background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary);font-size:var(--rt-text-2xs)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected .rt-tab-item__trigger{padding-block-end:calc(var(--rt-space-2) + 2px)}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge:not(.rt-tab-item__badge--overlay){background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"],
+			template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div\n            rtElem=\"tab-list-wrapper\"\n            [rtMod]=\"{ inline: scrollArrows() === 'inline', overflowing: overflowing(), compact: arrowLook() === 'compact' }\">\n            @if (!moreMode()) {\n                <div\n                    rtElem=\"rest\"\n                    qa-dataid=\"tabs-scroll-prev\"\n                    [rtMod]=\"{ before: true, visible: restBeforeVisible(), inactive: !restBeforeVisible() }\"\n                    (mousedown)=\"onRestPointerDown('before', $event)\"\n                    (mouseup)=\"onRestPointerUp()\"\n                    (mouseleave)=\"onRestPointerLeave()\">\n                    <span rtElem=\"arrow\"><rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" /></span>\n                </div>\n            }\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction(), ink: ink.box() !== null, more: moreMode() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    @let focusable = tab.id() === focusId();\n                    @let closeShown = tab.showClose() && (closeOn() === 'all' || tab.id() === selectedId());\n                    <!-- Вкладка — обёртка из двух кнопок: самой вкладки и крестика рядом с ней, не внутри,\n                         потому что кнопка в кнопке недопустима. Нажатие в любом месте обёртки выбирает\n                         вкладку; крестик своё нажатие дальше не пускает. -->\n                    <div\n                        rtBlock=\"rt-tab-item\"\n                        role=\"presentation\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                            inMore: more.ids().has(tab.id()),\n                        }\"\n                        [style.order]=\"more.order().get(tab.id())\"\n                        [attr.inert]=\"more.ids().has(tab.id()) || null\"\n                        [attr.data-tabitem]=\"tab.id()\"\n                        (click)=\"selectTab(tab.id())\"\n                        (contextmenu)=\"contextMenu.open($event, tab)\">\n                        <button\n                            rtElem=\"trigger\"\n                            qa-dataid=\"tabs-tab\"\n                            type=\"button\"\n                            role=\"tab\"\n                            [rtMod]=\"{ closable: closeShown }\"\n                            [id]=\"'rt-tab-' + tab.id()\"\n                            [attr.aria-disabled]=\"tab.disabled() || null\"\n                            [attr.aria-label]=\"tab.ariaLabel()\"\n                            [attr.aria-keyshortcuts]=\"closeShown ? 'Delete' : null\"\n                            [attr.data-tabid]=\"tab.id()\"\n                            [attr.aria-selected]=\"tab.id() === selectedId()\"\n                            [attr.aria-controls]=\"headerOnly() ? null : 'rt-tabpanel-' + tab.id()\"\n                            [attr.tabindex]=\"focusable ? 0 : -1\"\n                            [rtTooltip]=\"tab.buttonTooltip()\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            @if (tab.hasIcon()) {\n                                <span rtElem=\"icon-box\">\n                                    <rt-icon\n                                        rtElem=\"icon\"\n                                        size=\"sm\"\n                                        [name]=\"tab.shownIcon()\"\n                                        [glyph]=\"tab.glyph()\"\n                                        [color]=\"tab.iconColor()\"\n                                        [fill]=\"tab.iconFill()\" />\n                                    @if (tab.badgeOverlay()) {\n                                        <!-- prettier-ignore -->\n                                        <span rtElem=\"badge\" [rtMod]=\"{ overlay: true }\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                                    }\n                                </span>\n                            }\n\n                            @if (tab.titleTemplate(); as titleTpl) {\n                                <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                            } @else if (tab.label()) {\n                                <!-- Пустая подпись не рисуется: её зазор сдвигал значок вкладки без подписи с середины. -->\n                                <span rtElem=\"title\">{{ tab.label() }}</span>\n                            }\n\n                            @if (tab.badge() !== null && !tab.badgeOverlay()) {\n                                <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n                                <!-- prettier-ignore -->\n                                <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                            }\n                        </button>\n\n                        @if (closeShown) {\n                            <!-- В таб-порядке только у вкладки в фокусе: Tab с неё идёт на её крестик, дальше — из полосы. -->\n                            <button\n                                rtElem=\"close\"\n                                qa-dataid=\"tabs-tab-close\"\n                                type=\"button\"\n                                [attr.aria-label]=\"tab.closeLabel()\"\n                                [attr.tabindex]=\"focusable ? 0 : -1\"\n                                [rtTooltip]=\"tab.closeTooltip()\"\n                                [rtTooltipPlacement]=\"tab.closeTooltipPlacement()\"\n                                (mouseenter)=\"tab.closeHovered.set(true)\"\n                                (mouseleave)=\"tab.closeHovered.set(false)\"\n                                (click)=\"onCloseClick($event, tab)\">\n                                <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n                            </button>\n                        }\n                    </div>\n                }\n\n                @if (moreMode()) {\n                    <rt-tabs-more [tabs]=\"more.moreTabs()\" (pick)=\"selectTab($event)\" (closeTab)=\"onMoreClose($event)\" />\n                }\n\n                <!-- Полоса выбранной вкладки — одна на всю полосу: так она переезжает между вкладками. -->\n                <span\n                    rtElem=\"ink\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ placed: ink.box() !== null, animated: ink.animated(), invalid: ink.invalid() }\"\n                    [style.width.px]=\"ink.box()?.width\"\n                    [style.translate]=\"ink.translate()\"></span>\n            </div>\n\n            @if (!moreMode()) {\n                <div\n                    rtElem=\"rest\"\n                    qa-dataid=\"tabs-scroll-next\"\n                    [rtMod]=\"{ after: true, visible: restAfterVisible(), inactive: !restAfterVisible() }\"\n                    (mousedown)=\"onRestPointerDown('after', $event)\"\n                    (mouseup)=\"onRestPointerUp()\"\n                    (mouseleave)=\"onRestPointerLeave()\">\n                    <span rtElem=\"arrow\"><rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" /></span>\n                </div>\n            }\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    <rt-tabs-context-menu #contextMenu />\n\n    <!-- Уходящая панель стоит поверх: место ей задаёт замер, сделанный до смены. Сохранённые\n         тела посещённых вкладок скрыты и вне таб-порядка. -->\n    @for (panel of panels.list(); track panel.tab.id()) {\n        @let current = panel.leaving === null && !panel.idle;\n        <div\n            rtElem=\"content\"\n            role=\"tabpanel\"\n            [attr.qa-dataid]=\"current ? 'tabs-panel' : panel.idle ? 'tabs-panel-idle' : 'tabs-panel-leaving'\"\n            [attr.tabindex]=\"current ? contentTabIndex() : -1\"\n            [attr.aria-hidden]=\"current ? null : 'true'\"\n            [attr.inert]=\"current ? null : ''\"\n            [hidden]=\"panel.idle\"\n            [rtMod]=\"{\n                scrollable: contentScrollable(),\n                idle: panel.idle,\n                leaving: panel.leaving !== null,\n                entering: current && panels.shift() !== null,\n                shift: panels.shift(),\n            }\"\n            [style.top.px]=\"panel.leaving?.top\"\n            [style.left.px]=\"panel.leaving?.left\"\n            [id]=\"'rt-tabpanel-' + panel.tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + panel.tab.id()\"\n            (animationend)=\"panels.animationEnd($event)\"\n            (animationcancel)=\"panels.animationEnd($event)\">\n            <ng-container [ngTemplateOutlet]=\"panel.tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n",
+			styles: [
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);--rt-tabs-list-align: stretch;--rt-tabs-list-border-color: var(--rt-color-border-default);--rt-tabs-list-min-height: auto;--rt-tabs-list-padding-inline: 0;--rt-tabs-content-padding-top: var(--rt-space-md);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;box-sizing:border-box;align-items:var(--rt-tabs-list-align);border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);margin:0;min-block-size:var(--rt-tabs-list-min-height);-ms-overflow-style:none;overflow-x:auto;padding-inline:var(--rt-tabs-list-padding-inline);scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--more{overflow-x:clip}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-tabs-content-padding-top);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item--in-more{position:absolute;top:0;left:0;visibility:hidden}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tabs--dense .rt-tab-item__trigger{padding-inline:var(--rt-space-2)}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__icon-box{position:relative;display:inline-flex;flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__badge--overlay{position:absolute;top:calc(-1 * var(--rt-space-2));right:calc(-1 * (var(--rt-space-1) + var(--rt-space-0-5)));min-width:var(--rt-size-4);height:var(--rt-size-4);box-sizing:border-box;padding:0 var(--rt-space-1);background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary);font-size:var(--rt-text-2xs)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected .rt-tab-item__trigger{padding-block-end:calc(var(--rt-space-2) + 2px)}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge:not(.rt-tab-item__badge--overlay){background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}.rt-tabs__tab-list--measure>.rt-tab-item--stretch{flex-grow:0}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-arrow-size: var(--rt-size-6);--rt-tabs-arrow-inset: var(--rt-space-1);--rt-tabs-arrow-radius: var(--rt-radius-sm);--rt-tabs-arrow-shadow: var(--rt-shadow-sm);--rt-tabs-arrow-bg: var(--rt-color-bg-surface);--rt-tabs-arrow-bg-hover: var(--rt-color-bg-hover);--rt-tabs-arrow-color: var(--rt-color-text-muted);--rt-tabs-arrow-color-hover: var(--rt-color-text-primary);--rt-tabs-arrow-fade: var(--rt-color-bg-surface)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__arrow{display:contents}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest{width:auto;border:0;padding-inline:var(--rt-tabs-arrow-inset)}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest--before{background:linear-gradient(to right,var(--rt-tabs-arrow-fade) 70%,transparent)}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest--after{background:linear-gradient(to left,var(--rt-tabs-arrow-fade) 70%,transparent)}.rt-tabs__tab-list-wrapper--compact .rt-tabs__arrow{display:flex;width:var(--rt-tabs-arrow-size);height:var(--rt-tabs-arrow-size);flex:none;align-items:center;justify-content:center;border-radius:var(--rt-tabs-arrow-radius);background-color:var(--rt-tabs-arrow-bg);box-shadow:var(--rt-tabs-arrow-shadow);color:var(--rt-tabs-arrow-color);transition:color var(--rt-tabs-transition-duration) linear,background-color var(--rt-tabs-transition-duration) linear}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest:hover .rt-tabs__arrow{background-color:var(--rt-tabs-arrow-bg-hover);color:var(--rt-tabs-arrow-color-hover)}.rt-tabs__tab-list-wrapper--compact.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);background:none}.rt-tabs__tab-list-wrapper--compact.rt-tabs__tab-list-wrapper--inline .rt-tabs__arrow{box-shadow:none}.rt-tabs__tab-list-wrapper--compact.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive .rt-tabs__arrow{color:var(--rt-color-text-disabled)}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs-more-menu{--rt-tabs-more-menu-radius: var(--rt-overlay-menu-radius);--rt-tabs-more-menu-border-width: var(--rt-border-width-thin);--rt-tabs-more-menu-shadow: var(--rt-overlay-menu-shadow);--rt-tabs-more-menu-row-radius: var(--rt-radius-sm);--rt-tabs-more-menu-close-radius: var(--rt-radius-full);--rt-tabs-more-menu-max-height: 282px;display:flex;overflow:hidden auto;width:var(--rt-size-60);max-height:var(--rt-tabs-more-menu-max-height);box-sizing:border-box;flex-direction:column;padding:var(--rt-overlay-menu-padding-y) var(--rt-space-xs);border:var(--rt-tabs-more-menu-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-tabs-more-menu-radius);background:var(--rt-overlay-menu-bg);box-shadow:var(--rt-tabs-more-menu-shadow)}.rt-tabs-more-menu__row{display:flex;min-height:var(--rt-overlay-menu-item-min-height);flex:none;align-items:center;border-radius:var(--rt-tabs-more-menu-row-radius);padding-inline-end:var(--rt-space-2)}.rt-tabs-more-menu__row:hover:not(.rt-tabs-more-menu__row--disabled){background:var(--rt-color-bg-hover)}.rt-tabs-more-menu__row--disabled{opacity:var(--rt-opacity-disabled)}.rt-tabs-more-menu__row--invalid{color:var(--rt-color-state-danger)}.rt-tabs-more-menu__pick{display:flex;min-width:0;flex:1 1 auto;align-items:center;padding:var(--rt-overlay-menu-item-padding-y) var(--rt-overlay-menu-item-padding-x);border:0;background:none;color:var(--rt-color-text-primary);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-overlay-menu-item-weight);gap:var(--rt-space-sm);outline:none;text-align:start}.rt-tabs-more-menu__pick:focus-visible{background:var(--rt-color-bg-hover)}.rt-tabs-more-menu__pick[aria-disabled=true]{cursor:default}.rt-tabs-more-menu__row--invalid .rt-tabs-more-menu__pick{color:inherit}.rt-tabs-more-menu__icon{flex:none}.rt-tabs-more-menu__label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-tabs-more-menu__badge{flex:none;color:var(--rt-color-text-muted)}.rt-tabs-more-menu__close{display:inline-flex;width:var(--rt-size-5);height:var(--rt-size-5);flex:none;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tabs-more-menu-close-radius);background:transparent;color:var(--rt-color-text-muted);cursor:pointer;opacity:0}.rt-tabs-more-menu__row:hover .rt-tabs-more-menu__close,.rt-tabs-more-menu__row:focus-within .rt-tabs-more-menu__close{opacity:1}@media(hover:none){.rt-tabs-more-menu__close{opacity:1}}.rt-tabs-more-menu__close:hover{background:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}}\n"
+			],
 			dependencies: [
 				{
 					kind: "directive",
@@ -1180,6 +1808,18 @@ var RtTabsComponent = class RtTabsComponent {
 						"rotate"
 					]
 				},
+				{
+					kind: "component",
+					type: RtTabsContextMenuComponent,
+					selector: "rt-tabs-context-menu"
+				},
+				{
+					kind: "component",
+					type: RtTabsMoreComponent,
+					selector: "rt-tabs-more",
+					inputs: ["tabs"],
+					outputs: ["pick", "closeTab"]
+				},
 				{
 					kind: "directive",
 					type: RtTooltipDirective,
@@ -1231,6 +1871,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				NgTemplateOutlet,
 				RtIconComponent,
+				RtTabsContextMenuComponent,
+				RtTabsMoreComponent,
 				RtTooltipDirective,
 				BlockDirective,
 				ElemDirective,
@@ -1244,8 +1886,12 @@ i0.ɵɵngDeclareClassMetadata({
 				"[class.rt-tabs--dense]": "dense()",
 				"[style]": "panels.durations()"
 			},
-			template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div rtElem=\"tab-list-wrapper\" [rtMod]=\"{ inline: scrollArrows() === 'inline', overflowing: overflowing() }\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible(), inactive: !restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerLeave()\">\n                <rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" />\n            </div>\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction(), ink: ink.box() !== null }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    @let focusable = tab.id() === focusId();\n                    <!-- Вкладка — обёртка из двух кнопок: самой вкладки и крестика рядом с ней, не внутри,\n                         потому что кнопка в кнопке недопустима. Нажатие в любом месте обёртки выбирает\n                         вкладку; крестик своё нажатие дальше не пускает. -->\n                    <div\n                        rtBlock=\"rt-tab-item\"\n                        role=\"presentation\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [attr.data-tabitem]=\"tab.id()\"\n                        (click)=\"selectTab(tab.id())\">\n                        <button\n                            rtElem=\"trigger\"\n                            qa-dataid=\"tabs-tab\"\n                            type=\"button\"\n                            role=\"tab\"\n                            [rtMod]=\"{ closable: tab.showClose() }\"\n                            [id]=\"'rt-tab-' + tab.id()\"\n                            [attr.aria-disabled]=\"tab.disabled() || null\"\n                            [attr.aria-label]=\"tab.ariaLabel()\"\n                            [attr.aria-keyshortcuts]=\"tab.showClose() ? 'Delete' : null\"\n                            [attr.data-tabid]=\"tab.id()\"\n                            [attr.aria-selected]=\"tab.id() === selectedId()\"\n                            [attr.aria-controls]=\"headerOnly() ? null : 'rt-tabpanel-' + tab.id()\"\n                            [attr.tabindex]=\"focusable ? 0 : -1\"\n                            [rtTooltip]=\"tab.buttonTooltip()\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            @if (tab.hasIcon()) {\n                                <span rtElem=\"icon-box\">\n                                    <rt-icon\n                                        rtElem=\"icon\"\n                                        size=\"sm\"\n                                        [name]=\"tab.icon()\"\n                                        [glyph]=\"tab.glyph()\"\n                                        [color]=\"tab.iconColor()\"\n                                        [fill]=\"tab.iconFill()\" />\n                                    @if (tab.badgeOverlay()) {\n                                        <!-- prettier-ignore -->\n                                        <span rtElem=\"badge\" [rtMod]=\"{ overlay: true }\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                                    }\n                                </span>\n                            }\n\n                            @if (tab.titleTemplate(); as titleTpl) {\n                                <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                            } @else if (tab.label()) {\n                                <!-- Пустая подпись не рисуется: её зазор сдвигал значок вкладки без подписи с середины. -->\n                                <span rtElem=\"title\">{{ tab.label() }}</span>\n                            }\n\n                            @if (tab.badge() !== null && !tab.badgeOverlay()) {\n                                <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n                                <!-- prettier-ignore -->\n                                <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                            }\n                        </button>\n\n                        @if (tab.showClose()) {\n                            <!-- В таб-порядке только у вкладки в фокусе: Tab с неё идёт на её крестик, дальше — из полосы. -->\n                            <button\n                                rtElem=\"close\"\n                                qa-dataid=\"tabs-tab-close\"\n                                type=\"button\"\n                                [attr.aria-label]=\"tab.closeLabel()\"\n                                [attr.tabindex]=\"focusable ? 0 : -1\"\n                                [rtTooltip]=\"tab.closeTooltip()\"\n                                [rtTooltipPlacement]=\"tab.closeTooltipPlacement()\"\n                                (mouseenter)=\"tab.closeHovered.set(true)\"\n                                (mouseleave)=\"tab.closeHovered.set(false)\"\n                                (click)=\"onCloseClick($event, tab)\">\n                                <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n                            </button>\n                        }\n                    </div>\n                }\n\n                <!-- Полоса выбранной вкладки — одна на всю полосу: так она переезжает между вкладками. -->\n                <span\n                    rtElem=\"ink\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ placed: ink.box() !== null, animated: ink.animated(), invalid: ink.invalid() }\"\n                    [style.width.px]=\"ink.box()?.width\"\n                    [style.translate]=\"ink.translate()\"></span>\n            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible(), inactive: !restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerLeave()\">\n                <rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" />\n            </div>\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    <!-- Уходящая панель стоит поверх: место ей задаёт замер, сделанный до смены. Сохранённые\n         тела посещённых вкладок скрыты и вне таб-порядка. -->\n    @for (panel of panels.list(); track panel.tab.id()) {\n        @let current = panel.leaving === null && !panel.idle;\n        <div\n            rtElem=\"content\"\n            role=\"tabpanel\"\n            [attr.qa-dataid]=\"current ? 'tabs-panel' : panel.idle ? 'tabs-panel-idle' : 'tabs-panel-leaving'\"\n            [attr.tabindex]=\"current ? contentTabIndex() : -1\"\n            [attr.aria-hidden]=\"current ? null : 'true'\"\n            [attr.inert]=\"current ? null : ''\"\n            [hidden]=\"panel.idle\"\n            [rtMod]=\"{\n                scrollable: contentScrollable(),\n                idle: panel.idle,\n                leaving: panel.leaving !== null,\n                entering: current && panels.shift() !== null,\n                shift: panels.shift(),\n            }\"\n            [style.top.px]=\"panel.leaving?.top\"\n            [style.left.px]=\"panel.leaving?.left\"\n            [id]=\"'rt-tabpanel-' + panel.tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + panel.tab.id()\"\n            (animationend)=\"panels.animationEnd($event)\"\n            (animationcancel)=\"panels.animationEnd($event)\">\n            <ng-container [ngTemplateOutlet]=\"panel.tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);--rt-tabs-list-align: stretch;--rt-tabs-list-border-color: var(--rt-color-border-default);--rt-tabs-list-min-height: auto;--rt-tabs-list-padding-inline: 0;--rt-tabs-content-padding-top: var(--rt-space-md);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;box-sizing:border-box;align-items:var(--rt-tabs-list-align);border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);margin:0;min-block-size:var(--rt-tabs-list-min-height);-ms-overflow-style:none;overflow-x:auto;padding-inline:var(--rt-tabs-list-padding-inline);scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-tabs-content-padding-top);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tabs--dense .rt-tab-item__trigger{padding-inline:var(--rt-space-2)}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__icon-box{position:relative;display:inline-flex;flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__badge--overlay{position:absolute;top:calc(-1 * var(--rt-space-2));right:calc(-1 * (var(--rt-space-1) + var(--rt-space-0-5)));min-width:var(--rt-size-4);height:var(--rt-size-4);box-sizing:border-box;padding:0 var(--rt-space-1);background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary);font-size:var(--rt-text-2xs)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected .rt-tab-item__trigger{padding-block-end:calc(var(--rt-space-2) + 2px)}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge:not(.rt-tab-item__badge--overlay){background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}}\n"]
+			template: "<ng-container rtBlock=\"rt-tabs\">\n    <div rtElem=\"header\">\n        @if (leftControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ before: true }\">\n                @for (control of leftControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n\n        <div\n            rtElem=\"tab-list-wrapper\"\n            [rtMod]=\"{ inline: scrollArrows() === 'inline', overflowing: overflowing(), compact: arrowLook() === 'compact' }\">\n            @if (!moreMode()) {\n                <div\n                    rtElem=\"rest\"\n                    qa-dataid=\"tabs-scroll-prev\"\n                    [rtMod]=\"{ before: true, visible: restBeforeVisible(), inactive: !restBeforeVisible() }\"\n                    (mousedown)=\"onRestPointerDown('before', $event)\"\n                    (mouseup)=\"onRestPointerUp()\"\n                    (mouseleave)=\"onRestPointerLeave()\">\n                    <span rtElem=\"arrow\"><rt-icon name=\"chevron-left\" color=\"current\" size=\"sm\" /></span>\n                </div>\n            }\n\n            <div\n                #tabList\n                rtElem=\"tab-list\"\n                qa-dataid=\"tabs-tab-list\"\n                role=\"tablist\"\n                [rtMod]=\"{ stretch: stretch(), direction: direction(), ink: ink.box() !== null, more: moreMode() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    @let focusable = tab.id() === focusId();\n                    @let closeShown = tab.showClose() && (closeOn() === 'all' || tab.id() === selectedId());\n                    <!-- Вкладка — обёртка из двух кнопок: самой вкладки и крестика рядом с ней, не внутри,\n                         потому что кнопка в кнопке недопустима. Нажатие в любом месте обёртки выбирает\n                         вкладку; крестик своё нажатие дальше не пускает. -->\n                    <div\n                        rtBlock=\"rt-tab-item\"\n                        role=\"presentation\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                            inMore: more.ids().has(tab.id()),\n                        }\"\n                        [style.order]=\"more.order().get(tab.id())\"\n                        [attr.inert]=\"more.ids().has(tab.id()) || null\"\n                        [attr.data-tabitem]=\"tab.id()\"\n                        (click)=\"selectTab(tab.id())\"\n                        (contextmenu)=\"contextMenu.open($event, tab)\">\n                        <button\n                            rtElem=\"trigger\"\n                            qa-dataid=\"tabs-tab\"\n                            type=\"button\"\n                            role=\"tab\"\n                            [rtMod]=\"{ closable: closeShown }\"\n                            [id]=\"'rt-tab-' + tab.id()\"\n                            [attr.aria-disabled]=\"tab.disabled() || null\"\n                            [attr.aria-label]=\"tab.ariaLabel()\"\n                            [attr.aria-keyshortcuts]=\"closeShown ? 'Delete' : null\"\n                            [attr.data-tabid]=\"tab.id()\"\n                            [attr.aria-selected]=\"tab.id() === selectedId()\"\n                            [attr.aria-controls]=\"headerOnly() ? null : 'rt-tabpanel-' + tab.id()\"\n                            [attr.tabindex]=\"focusable ? 0 : -1\"\n                            [rtTooltip]=\"tab.buttonTooltip()\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            @if (tab.hasIcon()) {\n                                <span rtElem=\"icon-box\">\n                                    <rt-icon\n                                        rtElem=\"icon\"\n                                        size=\"sm\"\n                                        [name]=\"tab.shownIcon()\"\n                                        [glyph]=\"tab.glyph()\"\n                                        [color]=\"tab.iconColor()\"\n                                        [fill]=\"tab.iconFill()\" />\n                                    @if (tab.badgeOverlay()) {\n                                        <!-- prettier-ignore -->\n                                        <span rtElem=\"badge\" [rtMod]=\"{ overlay: true }\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                                    }\n                                </span>\n                            }\n\n                            @if (tab.titleTemplate(); as titleTpl) {\n                                <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                            } @else if (tab.label()) {\n                                <!-- Пустая подпись не рисуется: её зазор сдвигал значок вкладки без подписи с середины. -->\n                                <span rtElem=\"title\">{{ tab.label() }}</span>\n                            }\n\n                            @if (tab.badge() !== null && !tab.badgeOverlay()) {\n                                <!-- В одну строку: перенос внутри добавил бы пробел в текст кнопки. -->\n                                <!-- prettier-ignore -->\n                                <span rtElem=\"badge\" [rtTooltip]=\"tab.badgeTitle()\" [attr.aria-label]=\"tab.badgeAriaLabel() || null\">{{ tab.badge() }}</span>\n                            }\n                        </button>\n\n                        @if (closeShown) {\n                            <!-- В таб-порядке только у вкладки в фокусе: Tab с неё идёт на её крестик, дальше — из полосы. -->\n                            <button\n                                rtElem=\"close\"\n                                qa-dataid=\"tabs-tab-close\"\n                                type=\"button\"\n                                [attr.aria-label]=\"tab.closeLabel()\"\n                                [attr.tabindex]=\"focusable ? 0 : -1\"\n                                [rtTooltip]=\"tab.closeTooltip()\"\n                                [rtTooltipPlacement]=\"tab.closeTooltipPlacement()\"\n                                (mouseenter)=\"tab.closeHovered.set(true)\"\n                                (mouseleave)=\"tab.closeHovered.set(false)\"\n                                (click)=\"onCloseClick($event, tab)\">\n                                <rt-icon name=\"close\" color=\"current\" size=\"xs\" />\n                            </button>\n                        }\n                    </div>\n                }\n\n                @if (moreMode()) {\n                    <rt-tabs-more [tabs]=\"more.moreTabs()\" (pick)=\"selectTab($event)\" (closeTab)=\"onMoreClose($event)\" />\n                }\n\n                <!-- Полоса выбранной вкладки — одна на всю полосу: так она переезжает между вкладками. -->\n                <span\n                    rtElem=\"ink\"\n                    aria-hidden=\"true\"\n                    [rtMod]=\"{ placed: ink.box() !== null, animated: ink.animated(), invalid: ink.invalid() }\"\n                    [style.width.px]=\"ink.box()?.width\"\n                    [style.translate]=\"ink.translate()\"></span>\n            </div>\n\n            @if (!moreMode()) {\n                <div\n                    rtElem=\"rest\"\n                    qa-dataid=\"tabs-scroll-next\"\n                    [rtMod]=\"{ after: true, visible: restAfterVisible(), inactive: !restAfterVisible() }\"\n                    (mousedown)=\"onRestPointerDown('after', $event)\"\n                    (mouseup)=\"onRestPointerUp()\"\n                    (mouseleave)=\"onRestPointerLeave()\">\n                    <span rtElem=\"arrow\"><rt-icon name=\"chevron-right\" color=\"current\" size=\"sm\" /></span>\n                </div>\n            }\n        </div>\n\n        @if (rightControls().length) {\n            <div rtElem=\"controls\" [rtMod]=\"{ after: true }\">\n                @for (control of rightControls(); track $index) {\n                    <ng-container [ngTemplateOutlet]=\"control.templateRef\" />\n                }\n            </div>\n        }\n    </div>\n\n    <rt-tabs-context-menu #contextMenu />\n\n    <!-- Уходящая панель стоит поверх: место ей задаёт замер, сделанный до смены. Сохранённые\n         тела посещённых вкладок скрыты и вне таб-порядка. -->\n    @for (panel of panels.list(); track panel.tab.id()) {\n        @let current = panel.leaving === null && !panel.idle;\n        <div\n            rtElem=\"content\"\n            role=\"tabpanel\"\n            [attr.qa-dataid]=\"current ? 'tabs-panel' : panel.idle ? 'tabs-panel-idle' : 'tabs-panel-leaving'\"\n            [attr.tabindex]=\"current ? contentTabIndex() : -1\"\n            [attr.aria-hidden]=\"current ? null : 'true'\"\n            [attr.inert]=\"current ? null : ''\"\n            [hidden]=\"panel.idle\"\n            [rtMod]=\"{\n                scrollable: contentScrollable(),\n                idle: panel.idle,\n                leaving: panel.leaving !== null,\n                entering: current && panels.shift() !== null,\n                shift: panels.shift(),\n            }\"\n            [style.top.px]=\"panel.leaving?.top\"\n            [style.left.px]=\"panel.leaving?.left\"\n            [id]=\"'rt-tabpanel-' + panel.tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + panel.tab.id()\"\n            (animationend)=\"panels.animationEnd($event)\"\n            (animationcancel)=\"panels.animationEnd($event)\">\n            <ng-container [ngTemplateOutlet]=\"panel.tab.templateRef\" />\n        </div>\n    }\n</ng-container>\n",
+			styles: [
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-border-width: var(--rt-border-width-thin);--rt-tabs-transition-duration: var(--rt-duration-fast);--rt-tabs-list-align: stretch;--rt-tabs-list-border-color: var(--rt-color-border-default);--rt-tabs-list-min-height: auto;--rt-tabs-list-padding-inline: 0;--rt-tabs-content-padding-top: var(--rt-space-md);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.rt-tabs--animating{position:relative;overflow-x:clip}.rt-tabs__header{display:flex;align-items:center}.rt-tabs__tab-list-wrapper{position:relative;display:flex;overflow:hidden;flex:1 1 auto;align-items:center}.rt-tabs__tab-list{position:relative;display:flex;box-sizing:border-box;align-items:var(--rt-tabs-list-align);border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);margin:0;min-block-size:var(--rt-tabs-list-min-height);-ms-overflow-style:none;overflow-x:auto;padding-inline:var(--rt-tabs-list-padding-inline);scrollbar-width:none;white-space:nowrap}.rt-tabs__tab-list::-webkit-scrollbar{display:none}.rt-tabs__tab-list--direction--horizontal{width:100%;flex-direction:row}.rt-tabs__tab-list--direction--vertical{flex-direction:column;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default);border-bottom:0}.rt-tabs__tab-list--stretch{justify-content:space-between}.rt-tabs__tab-list--more{overflow-x:clip}.rt-tabs__tab-list--ink .rt-tab-item--selected:not(.rt-tab-item--invalid):after{background-color:transparent}.rt-tabs__ink{position:absolute;top:0;left:0;display:none;height:2px;margin-top:var(--rt-tabs-border-width);background-color:var(--rt-color-action-primary);pointer-events:none;transform:translateY(-100%)}.rt-tabs__ink--placed{display:block}.rt-tabs__ink--animated{transition:translate var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing),width var(--rt-tabs-indicator-duration) var(--rt-tabs-indicator-easing)}.rt-tabs__ink--invalid{background-color:var(--rt-color-state-danger)}.rt-tabs__controls{display:flex;flex-shrink:0;align-items:center}.rt-tabs__controls--before{padding-right:var(--rt-space-md)}.rt-tabs__controls--after{padding-left:var(--rt-space-md)}.rt-tabs__content{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;padding-top:var(--rt-tabs-content-padding-top);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.rt-tabs__content--idle{display:none}.rt-tabs__content--leaving{position:absolute;right:0;bottom:0;animation:rt-tabs-panel-leave var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing) forwards;pointer-events:none}.rt-tabs__content--entering{animation:rt-tabs-panel-enter var(--rt-tabs-panel-duration) var(--rt-tabs-panel-easing)}.rt-tabs__content--shift--forward{--rt-tabs-panel-leave-to: -100%;--rt-tabs-panel-enter-from: 100%}.rt-tabs__content--shift--backward{--rt-tabs-panel-leave-to: 100%;--rt-tabs-panel-enter-from: -100%}@keyframes rt-tabs-panel-leave{to{translate:var(--rt-tabs-panel-leave-to) 0}}@keyframes rt-tabs-panel-enter{0%{translate:var(--rt-tabs-panel-enter-from) 0}}@media(prefers-reduced-motion:reduce){.rt-tabs__ink--animated{transition:none}.rt-tabs__content--leaving,.rt-tabs__content--entering{animation:none}}.rt-tab-item{--rt-tab-item-border-width: var(--rt-border-width-thin);--rt-tab-item-badge-radius: var(--rt-radius-full);--rt-tab-item-transition-duration: var(--rt-duration-fast);--rt-tab-item-close-size: var(--rt-size-5);--rt-tab-item-close-radius: var(--rt-radius-full);--rt-tab-item-close-bg: transparent;--rt-tab-item-close-bg-hover: var(--rt-color-bg-hover);--rt-tab-item-close-color: var(--rt-color-text-muted);--rt-tab-item-close-color-hover: var(--rt-color-text-primary);--rt-tab-item-close-icon-size: var(--rt-icon-step-xs);--rt-tab-item-close-margin-inline-start: 0;--rt-tab-item-close-margin-inline-end: calc(-1 * var(--rt-space-2));position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;background-color:transparent;color:var(--rt-color-text-muted);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);gap:var(--rt-space-sm);line-height:var(--rt-leading-none);transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear;white-space:nowrap}.rt-tab-item:after{position:absolute;bottom:0;height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none;translate:0 var(--rt-tab-item-border-width)}.rt-tab-item--in-more{position:absolute;top:0;left:0;visibility:hidden}.rt-tab-item:hover:not(.rt-tab-item--disabled,.rt-tab-item--selected){background-color:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}.rt-tab-item:has(>.rt-tab-item__trigger:focus-visible){outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__trigger{display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;margin:0;background:none;color:inherit;cursor:inherit;font:inherit;gap:inherit;line-height:inherit;outline:none}.rt-tab-item__trigger--closable{padding-inline-end:0}.rt-tabs--dense .rt-tab-item__trigger{padding-inline:var(--rt-space-2)}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{flex-shrink:0}.rt-tab-item__icon-box{position:relative;display:inline-flex;flex-shrink:0}.rt-tab-item__badge{display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;padding:0 var(--rt-space-2);border-radius:var(--rt-tab-item-badge-radius);background-color:var(--rt-color-bg-surface-subtle);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);line-height:var(--rt-leading-none)}.rt-tab-item__badge--overlay{position:absolute;top:calc(-1 * var(--rt-space-2));right:calc(-1 * (var(--rt-space-1) + var(--rt-space-0-5)));min-width:var(--rt-size-4);height:var(--rt-size-4);box-sizing:border-box;padding:0 var(--rt-space-1);background-color:var(--rt-color-action-primary);color:var(--rt-color-action-on-primary);font-size:var(--rt-text-2xs)}.rt-tab-item__close{--rt-icon-step-xs: var(--rt-tab-item-close-icon-size);display:inline-flex;width:var(--rt-tab-item-close-size);height:var(--rt-tab-item-close-size);flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tab-item-close-radius);background-color:var(--rt-tab-item-close-bg);color:var(--rt-tab-item-close-color);cursor:pointer;font:inherit;margin-block:calc(-1 * var(--rt-space-1));margin-inline:var(--rt-tab-item-close-margin-inline-start) calc(var(--rt-space-4) + var(--rt-tab-item-close-margin-inline-end));transition:color var(--rt-tab-item-transition-duration) linear,background-color var(--rt-tab-item-transition-duration) linear}.rt-tab-item__close:hover{background-color:var(--rt-tab-item-close-bg-hover);color:var(--rt-tab-item-close-color-hover)}.rt-tab-item__close:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:0}.rt-tab-item--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected .rt-tab-item__trigger{padding-block-end:calc(var(--rt-space-2) + 2px)}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge:not(.rt-tab-item__badge--overlay){background-color:var(--rt-color-action-primary-soft);color:var(--rt-color-action-primary)}.rt-tab-item--invalid{color:var(--rt-color-state-danger)}.rt-tab-item--invalid:after{background-color:var(--rt-color-state-danger)}.rt-tab-item--disabled{color:var(--rt-color-text-disabled);cursor:not-allowed}.rt-tab-item--stretch{max-width:100%;flex:1 1 auto}.rt-tabs__tab-list--measure>.rt-tab-item--stretch{flex-grow:0}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs{--rt-tabs-arrow-size: var(--rt-size-6);--rt-tabs-arrow-inset: var(--rt-space-1);--rt-tabs-arrow-radius: var(--rt-radius-sm);--rt-tabs-arrow-shadow: var(--rt-shadow-sm);--rt-tabs-arrow-bg: var(--rt-color-bg-surface);--rt-tabs-arrow-bg-hover: var(--rt-color-bg-hover);--rt-tabs-arrow-color: var(--rt-color-text-muted);--rt-tabs-arrow-color-hover: var(--rt-color-text-primary);--rt-tabs-arrow-fade: var(--rt-color-bg-surface)}.rt-tabs__rest{position:absolute;z-index:1;top:0;bottom:0;display:flex;width:var(--rt-control-height-lg);align-items:center;justify-content:center;background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;transition:color var(--rt-tabs-transition-duration) linear;visibility:hidden}.rt-tabs__rest:hover{color:var(--rt-color-text-primary)}.rt-tabs__rest--before{left:0;border-right:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--after{right:0;border-left:var(--rt-tabs-border-width) solid var(--rt-color-border-default)}.rt-tabs__rest--visible{visibility:visible}.rt-tabs__arrow{display:contents}.rt-tabs__tab-list-wrapper--inline{align-items:stretch}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{position:static;display:none;flex-shrink:0;border:0;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);background-color:transparent}.rt-tabs__tab-list-wrapper--inline.rt-tabs__tab-list-wrapper--overflowing .rt-tabs__rest{display:flex;visibility:visible}.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive{color:var(--rt-color-text-disabled);cursor:default;pointer-events:none}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest{width:auto;border:0;padding-inline:var(--rt-tabs-arrow-inset)}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest--before{background:linear-gradient(to right,var(--rt-tabs-arrow-fade) 70%,transparent)}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest--after{background:linear-gradient(to left,var(--rt-tabs-arrow-fade) 70%,transparent)}.rt-tabs__tab-list-wrapper--compact .rt-tabs__arrow{display:flex;width:var(--rt-tabs-arrow-size);height:var(--rt-tabs-arrow-size);flex:none;align-items:center;justify-content:center;border-radius:var(--rt-tabs-arrow-radius);background-color:var(--rt-tabs-arrow-bg);box-shadow:var(--rt-tabs-arrow-shadow);color:var(--rt-tabs-arrow-color);transition:color var(--rt-tabs-transition-duration) linear,background-color var(--rt-tabs-transition-duration) linear}.rt-tabs__tab-list-wrapper--compact .rt-tabs__rest:hover .rt-tabs__arrow{background-color:var(--rt-tabs-arrow-bg-hover);color:var(--rt-tabs-arrow-color-hover)}.rt-tabs__tab-list-wrapper--compact.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest{border-bottom:var(--rt-tabs-border-width) solid var(--rt-tabs-list-border-color);background:none}.rt-tabs__tab-list-wrapper--compact.rt-tabs__tab-list-wrapper--inline .rt-tabs__arrow{box-shadow:none}.rt-tabs__tab-list-wrapper--compact.rt-tabs__tab-list-wrapper--inline .rt-tabs__rest--inactive .rt-tabs__arrow{color:var(--rt-color-text-disabled)}}\n",
+				"@charset \"UTF-8\";@layer rt-kit.components{.rt-tabs-more-menu{--rt-tabs-more-menu-radius: var(--rt-overlay-menu-radius);--rt-tabs-more-menu-border-width: var(--rt-border-width-thin);--rt-tabs-more-menu-shadow: var(--rt-overlay-menu-shadow);--rt-tabs-more-menu-row-radius: var(--rt-radius-sm);--rt-tabs-more-menu-close-radius: var(--rt-radius-full);--rt-tabs-more-menu-max-height: 282px;display:flex;overflow:hidden auto;width:var(--rt-size-60);max-height:var(--rt-tabs-more-menu-max-height);box-sizing:border-box;flex-direction:column;padding:var(--rt-overlay-menu-padding-y) var(--rt-space-xs);border:var(--rt-tabs-more-menu-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-tabs-more-menu-radius);background:var(--rt-overlay-menu-bg);box-shadow:var(--rt-tabs-more-menu-shadow)}.rt-tabs-more-menu__row{display:flex;min-height:var(--rt-overlay-menu-item-min-height);flex:none;align-items:center;border-radius:var(--rt-tabs-more-menu-row-radius);padding-inline-end:var(--rt-space-2)}.rt-tabs-more-menu__row:hover:not(.rt-tabs-more-menu__row--disabled){background:var(--rt-color-bg-hover)}.rt-tabs-more-menu__row--disabled{opacity:var(--rt-opacity-disabled)}.rt-tabs-more-menu__row--invalid{color:var(--rt-color-state-danger)}.rt-tabs-more-menu__pick{display:flex;min-width:0;flex:1 1 auto;align-items:center;padding:var(--rt-overlay-menu-item-padding-y) var(--rt-overlay-menu-item-padding-x);border:0;background:none;color:var(--rt-color-text-primary);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-overlay-menu-item-weight);gap:var(--rt-space-sm);outline:none;text-align:start}.rt-tabs-more-menu__pick:focus-visible{background:var(--rt-color-bg-hover)}.rt-tabs-more-menu__pick[aria-disabled=true]{cursor:default}.rt-tabs-more-menu__row--invalid .rt-tabs-more-menu__pick{color:inherit}.rt-tabs-more-menu__icon{flex:none}.rt-tabs-more-menu__label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-tabs-more-menu__badge{flex:none;color:var(--rt-color-text-muted)}.rt-tabs-more-menu__close{display:inline-flex;width:var(--rt-size-5);height:var(--rt-size-5);flex:none;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-tabs-more-menu-close-radius);background:transparent;color:var(--rt-color-text-muted);cursor:pointer;opacity:0}.rt-tabs-more-menu__row:hover .rt-tabs-more-menu__close,.rt-tabs-more-menu__row:focus-within .rt-tabs-more-menu__close{opacity:1}@media(hover:none){.rt-tabs-more-menu__close{opacity:1}}.rt-tabs-more-menu__close:hover{background:var(--rt-color-bg-hover);color:var(--rt-color-text-primary)}}\n"
+			]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1294,6 +1940,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		closeOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOn",
+				required: false
+			}]
+		}],
 		contentScrollable: [{
 			type: i0.Input,
 			args: [{
@@ -1326,6 +1980,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		overflow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overflow",
+				required: false
+			}]
+		}],
+		moreLimit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moreLimit",
+				required: false
+			}]
+		}],
 		scrollArrows: [{
 			type: i0.Input,
 			args: [{
@@ -1334,6 +2004,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		arrowLook: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "arrowLook",
+				required: false
+			}]
+		}],
 		scrollStep: [{
 			type: i0.Input,
 			args: [{