@rt-tools/ui-kit-v2 0.33.0 → 0.34.0

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

@@ -1,6 +1,6 @@
 import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChildren, inject, input, output, signal, viewChild } 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 { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { debounceTime, fromEvent } from "rxjs";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
@@ -10,6 +10,7 @@ import { rtKitLabel } from "@rt-tools/ui-kit-v2/core";
 var RtTabDirective = class RtTabDirective {
 	constructor() {
 		this.#t_uiTabInvalid = rtKitLabel("uiTabInvalid");
+		this.#t_uiClose = rtKitLabel("uiClose");
 		this.templateRef = inject(TemplateRef);
 		this.id = input("", {
 			...ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {},
@@ -18,6 +19,7 @@ var RtTabDirective = class RtTabDirective {
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.titleTemplate = input(null, ...ngDevMode ? [{ debugName: "titleTemplate" }] : /* istanbul ignore next */ []);
 		this.icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.glyph = input(null, ...ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []);
 		this.iconColor = input("current", ...ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []);
 		this.badge = input(null, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
 		this.badgeTitle = input("", ...ngDevMode ? [{ debugName: "badgeTitle" }] : /* istanbul ignore next */ []);
@@ -35,9 +37,25 @@ var RtTabDirective = class RtTabDirective {
 			transform: booleanAttribute
 		});
 		this.invalidMessage = input("", ...ngDevMode ? [{ debugName: "invalidMessage" }] : /* istanbul ignore next */ []);
+		this.tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+		this.closable = input(false, {
+			...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		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 */ []);
 		this.invalidTitle = computed(() => this.invalidMessage() || this.#t_uiTabInvalid(), ...ngDevMode ? [{ debugName: "invalidTitle" }] : /* istanbul ignore next */ []);
+		this.buttonTooltip = computed(() => {
+			if (this.closeHovered() && this.showClose()) return "";
+			return this.invalid() ? this.invalidTitle() : this.tooltip();
+		}, ...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.showClose = computed(() => this.closable() && !this.disabled(), ...ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []);
 	}
 	#t_uiTabInvalid;
+	#t_uiClose;
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -84,6 +102,13 @@ var RtTabDirective = class RtTabDirective {
 					isRequired: false,
 					transformFunction: null
 				},
+				glyph: {
+					classPropertyName: "glyph",
+					publicName: "glyph",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				iconColor: {
 					classPropertyName: "iconColor",
 					publicName: "iconColor",
@@ -139,6 +164,34 @@ var RtTabDirective = class RtTabDirective {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				tooltip: {
+					classPropertyName: "tooltip",
+					publicName: "tooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closable: {
+					classPropertyName: "closable",
+					publicName: "closable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeTooltip: {
+					classPropertyName: "closeTooltip",
+					publicName: "closeTooltip",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeTooltipPlacement: {
+					classPropertyName: "closeTooltipPlacement",
+					publicName: "closeTooltipPlacement",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0
@@ -187,6 +240,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		glyph: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "glyph",
+				required: false
+			}]
+		}],
 		iconColor: [{
 			type: i0.Input,
 			args: [{
@@ -250,6 +311,38 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "invalidMessage",
 				required: false
 			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		closable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closable",
+				required: false
+			}]
+		}],
+		closeTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeTooltip",
+				required: false
+			}]
+		}],
+		closeTooltipPlacement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeTooltipPlacement",
+				required: false
+			}]
 		}]
 	}
 });
@@ -308,16 +401,298 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
-const SCROLL_STEP = 12;
+function rtTabsCssDuration(value) {
+	const text = value === null ? "" : String(value).trim();
+	if (!text) return null;
+	return /^\d+(\.\d+)?$/.test(text) ? `${text}ms` : text;
+}
+function rtTabsDurationMs(value) {
+	const text = value.trim();
+	const amount = parseFloat(text);
+	if (Number.isNaN(amount)) return 0;
+	if (text.endsWith("ms")) return amount;
+	return text.endsWith("s") ? amount * 1e3 : amount;
+}
+function withVisited(visited, id) {
+	return id === null || visited.has(id) ? visited : /* @__PURE__ */ new Set([...visited, id]);
+}
+function sameInkBox(a, b) {
+	if (a === null || b === null) return a === b;
+	return a.x === b.x && a.bottom === b.bottom && a.width === b.width;
+}
+function rtTabsLeavingPanel(host, win, ids, move) {
+	const { previous, next } = move;
+	if (previous === null || next === null || previous === next || !win) return null;
+	if (win.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return null;
+	const duration = move.duration ?? win.getComputedStyle(host).getPropertyValue("--rt-tabs-panel-duration");
+	const panel = Array.from(host.querySelectorAll(":scope > .rt-tabs__content")).find((node) => node.id === `rt-tabpanel-${previous}`);
+	if (!panel || rtTabsDurationMs(duration) <= 0) return null;
+	const hostBox = host.getBoundingClientRect();
+	const panelBox = panel.getBoundingClientRect();
+	return {
+		id: previous,
+		shift: ids.indexOf(next) > ids.indexOf(previous) ? "forward" : "backward",
+		top: panelBox.top - hostBox.top - host.clientTop,
+		left: panelBox.left - hostBox.left - host.clientLeft
+	};
+}
+function rtTabsPreservedPanels(all, visited, active, leaving) {
+	return all.filter((tab) => tab === active || visited.has(tab.id())).map((tab) => {
+		if (tab === active) return {
+			leaving: null,
+			idle: false,
+			tab
+		};
+		const isLeaving = leaving !== null && leaving.id === tab.id();
+		return {
+			leaving: isLeaving ? leaving : null,
+			idle: !isLeaving,
+			tab
+		};
+	});
+}
+var RtTabsPanels = class {
+	#visited;
+	constructor(host, win, tabs, shown) {
+		this.duration = computed(() => rtTabsCssDuration(shown.duration()), ...ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []);
+		this.durations = computed(() => {
+			const duration = this.duration();
+			return duration === null ? null : {
+				"--rt-tabs-indicator-duration": duration,
+				"--rt-tabs-panel-duration": duration
+			};
+		}, ...ngDevMode ? [{ debugName: "durations" }] : /* istanbul ignore next */ []);
+		const ids = () => tabs.visible().map((tab) => tab.id());
+		this.leaving = linkedSignal({
+			...ngDevMode ? { debugName: "leaving" } : /* istanbul ignore next */ {},
+			source: tabs.selectedId,
+			computation: (id, previous) => untracked(() => rtTabsLeavingPanel(host, win, ids(), {
+				previous: previous?.source ?? null,
+				next: id,
+				duration: this.duration()
+			}))
+		});
+		this.#visited = linkedSignal({
+			...ngDevMode ? { debugName: "#visited" } : /* istanbul ignore next */ {},
+			source: tabs.selectedId,
+			computation: (id, previous) => withVisited(previous?.value ?? /* @__PURE__ */ new Set(), id)
+		});
+		this.list = computed(() => {
+			const active = shown.active();
+			const leaving = this.leaving();
+			if (!active) return [];
+			if (shown.preserve()) return rtTabsPreservedPanels(tabs.all(), this.#visited(), active, leaving);
+			const current = {
+				tab: active,
+				leaving: null,
+				idle: false
+			};
+			const leavingTab = leaving === null || leaving.id === active.id() ? void 0 : tabs.visible().find((tab) => tab.id() === leaving.id);
+			return leaving && leavingTab ? [{
+				leaving,
+				idle: false,
+				tab: leavingTab
+			}, current] : [current];
+		}, ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+		this.shift = computed(() => this.list().some((panel) => panel.leaving !== null) ? this.leaving()?.shift ?? null : null, ...ngDevMode ? [{ debugName: "shift" }] : /* istanbul ignore next */ []);
+	}
+	animationEnd(event) {
+		if (event.target === event.currentTarget) this.leaving.set(null);
+	}
+};
+var RtTabsInk = class {
+	#win;
+	#list;
+	#active;
+	#watch;
+	constructor(win, list, tabs) {
+		this.#watch = null;
+		this.box = signal(null, {
+			...ngDevMode ? { debugName: "box" } : /* istanbul ignore next */ {},
+			equal: sameInkBox
+		});
+		this.animated = signal(false, ...ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []);
+		this.translate = computed(() => {
+			const box = this.box();
+			return box ? `${box.x}px ${box.bottom}px` : null;
+		}, ...ngDevMode ? [{ debugName: "translate" }] : /* istanbul ignore next */ []);
+		this.invalid = computed(() => this.#active()?.invalid() ?? false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+		this.#win = win;
+		this.#list = list;
+		this.#active = tabs.active;
+		afterRenderEffect(() => {
+			tabs.visible();
+			this.#active();
+			this.#watchSizes();
+			this.#place();
+		});
+		inject(DestroyRef).onDestroy(() => this.#watch?.disconnect());
+	}
+	#watchSizes() {
+		const list = this.#list()?.nativeElement;
+		if (!list || typeof ResizeObserver === "undefined") return;
+		if (!this.#watch) this.#watch = new ResizeObserver(() => this.#place());
+		const watch = this.#watch;
+		watch.disconnect();
+		watch.observe(list);
+		list.querySelectorAll("[data-tabitem]").forEach((node) => watch.observe(node));
+	}
+	#place() {
+		const list = this.#list()?.nativeElement;
+		const id = this.#active()?.id();
+		const tab = id === void 0 ? null : list?.querySelector(`[data-tabitem="${id}"]`);
+		if (!list || !tab) {
+			this.box.set(null);
+			return;
+		}
+		const listBox = list.getBoundingClientRect();
+		const tabBox = tab.getBoundingClientRect();
+		this.box.set({
+			x: tabBox.left - listBox.left - list.clientLeft + list.scrollLeft,
+			bottom: tabBox.bottom - listBox.top - list.clientTop + list.scrollTop,
+			width: tabBox.width
+		});
+		if (!untracked(this.animated)) this.#win?.requestAnimationFrame(() => this.animated.set(true));
+	}
+};
+const EASE_OUT = [
+	0,
+	0,
+	.58,
+	1
+];
+const NAMED_EASINGS = /* @__PURE__ */ new Map([
+	["linear", [
+		0,
+		0,
+		1,
+		1
+	]],
+	["ease", [
+		.25,
+		.1,
+		.25,
+		1
+	]],
+	["ease-in", [
+		.42,
+		0,
+		1,
+		1
+	]],
+	["ease-out", EASE_OUT],
+	["ease-in-out", [
+		.42,
+		0,
+		.58,
+		1
+	]]
+]);
+const HOLD_STEP = 12;
+const FIXED_STEP = 80;
+const STEP_SHARE = {
+	page: 1,
+	third: 1 / 3
+};
+function bezierAt(t, p1, p2) {
+	const u = 1 - t;
+	return 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t;
+}
+function rtTabsEasing(value) {
+	const text = value.trim();
+	const match = /^cubic-bezier\(([^)]*)\)$/.exec(text);
+	const parsed = match ? match[1].split(",").map((part) => parseFloat(part)) : [];
+	const [x1, y1, x2, y2] = parsed.length === 4 && parsed.every((point) => Number.isFinite(point)) ? parsed : NAMED_EASINGS.get(text) ?? EASE_OUT;
+	return (progress) => {
+		if (progress <= 0 || progress >= 1) return Math.min(1, Math.max(0, progress));
+		let low = 0;
+		let high = 1;
+		for (let step = 0; step < 30; step++) {
+			const mid = (low + high) / 2;
+			if (bezierAt(mid, x1, x2) < progress) low = mid;
+			else high = mid;
+		}
+		return bezierAt((low + high) / 2, y1, y2);
+	};
+}
+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];
+	return Math.min(max, Math.max(0, from + (back ? -shift : shift)));
+}
+function rtTabsIntoViewTarget(list, tab) {
+	if (tab.offsetLeft < list.scrollLeft) return tab.offsetLeft;
+	if (tab.offsetLeft + tab.offsetWidth > list.scrollLeft + list.clientWidth) return tab.offsetLeft + tab.offsetWidth - list.clientWidth;
+	return null;
+}
+var RtTabsScroller = class {
+	#win;
+	#host;
+	#list;
+	#frame = null;
+	#target = null;
+	constructor(win, host, list) {
+		this.#win = win;
+		this.#host = host;
+		this.#list = list;
+	}
+	from() {
+		return this.#target ?? this.#list()?.nativeElement.scrollLeft ?? 0;
+	}
+	to(left) {
+		const list = this.#list()?.nativeElement;
+		const win = this.#win;
+		this.stop();
+		if (!list || !win) return;
+		const style = win.getComputedStyle(this.#host);
+		const duration = win.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : rtTabsDurationMs(style.getPropertyValue("--rt-tabs-scroll-duration"));
+		const start = list.scrollLeft;
+		if (duration <= 0 || start === left) {
+			list.scrollLeft = left;
+			return;
+		}
+		const ease = rtTabsEasing(style.getPropertyValue("--rt-tabs-scroll-easing"));
+		const startedAt = win.performance.now();
+		this.#target = left;
+		const tick = (now) => {
+			const progress = Math.min(1, (now - startedAt) / duration);
+			list.scrollLeft = start + (left - start) * ease(progress);
+			this.#frame = progress < 1 ? win.requestAnimationFrame(tick) : null;
+			if (this.#frame === null) this.#target = null;
+		};
+		this.#frame = win.requestAnimationFrame(tick);
+	}
+	nudge(back) {
+		this.stop();
+		const list = this.#list()?.nativeElement;
+		if (!list) return false;
+		const remaining = back ? list.scrollLeft : list.scrollWidth - list.scrollLeft - list.clientWidth;
+		if (remaining > 0) list.scrollLeft += (back ? -1 : 1) * Math.min(HOLD_STEP, remaining);
+		return remaining - HOLD_STEP > 0;
+	}
+	stop() {
+		if (this.#frame !== null) this.#win?.cancelAnimationFrame(this.#frame);
+		this.#frame = null;
+		this.#target = null;
+	}
+};
 const SCROLL_TICK_MS = 15;
+const HOLD_DELAY_MS = 300;
 const REST_DEBOUNCE_MS = 50;
 const BEM_BLOCK = "rt-tabs";
 var RtTabsComponent = class RtTabsComponent {
 	#win;
+	#host;
+	#injector;
+	#scroller;
 	#internalId;
+	#focusedId;
 	#scrollIntervalId;
+	#holdTimeoutId;
+	#pressed;
 	constructor() {
 		this.#win = inject(DOCUMENT).defaultView;
+		this.#host = inject(ElementRef).nativeElement;
 		this.tabs = contentChildren(RtTabDirective, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
 		this.controls = contentChildren(RtTabsControlDirective, ...ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []);
 		this.visibleTabs = computed(() => this.tabs().filter((tab) => !tab.hidden()), ...ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []);
@@ -334,9 +709,27 @@ var RtTabsComponent = class RtTabsComponent {
 			return result;
 		}, ...ngDevMode ? [{ debugName: "selectedId" }] : /* 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();
+		}, ...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 */ []);
+		this.overflowing = computed(() => this.restBeforeVisible() || this.restAfterVisible(), ...ngDevMode ? [{ debugName: "overflowing" }] : /* istanbul ignore next */ []);
 		this.tabListRef = viewChild("tabList", ...ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []);
+		this.panels = new RtTabsPanels(this.#host, this.#win, {
+			all: this.tabs,
+			visible: this.visibleTabs,
+			selectedId: this.selectedId
+		}, {
+			active: computed(() => this.headerOnly() ? null : this.activeTab()),
+			duration: () => this.animationDuration(),
+			preserve: () => this.preserveContent()
+		});
+		this.ink = new RtTabsInk(this.#win, this.tabListRef, {
+			visible: this.visibleTabs,
+			active: this.activeTab
+		});
 		this.activeId = input(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
 		this.direction = input("horizontal", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
 		this.stretch = input(false, {
@@ -347,27 +740,58 @@ var RtTabsComponent = class RtTabsComponent {
 			...ngDevMode ? { debugName: "contentScrollable" } : /* istanbul ignore next */ {},
 			transform: booleanAttribute
 		});
+		this.headerOnly = input(false, {
+			...ngDevMode ? { debugName: "headerOnly" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.preserveContent = input(false, {
+			...ngDevMode ? { debugName: "preserveContent" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.activation = input("auto", ...ngDevMode ? [{ debugName: "activation" }] : /* istanbul ignore next */ []);
+		this.scrollArrows = input("overlay", ...ngDevMode ? [{ debugName: "scrollArrows" }] : /* 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 */ []);
 		this.activeIdChange = output();
+		this.tabClose = output();
+		this.#injector = inject(Injector);
+		this.#scroller = new RtTabsScroller(this.#win, this.#host, () => this.tabListRef());
 		this.#internalId = signal(null, ...ngDevMode ? [{ debugName: "#internalId" }] : /* istanbul ignore next */ []);
+		this.#focusedId = signal(null, ...ngDevMode ? [{ debugName: "#focusedId" }] : /* istanbul ignore next */ []);
 		this.#scrollIntervalId = null;
+		this.#holdTimeoutId = null;
+		this.#pressed = null;
 		if (this.#win) fromEvent(this.#win, "resize").pipe(debounceTime(REST_DEBOUNCE_MS), takeUntilDestroyed()).subscribe(() => this.#updateRestVisibility());
 		afterNextRender(() => this.#updateRestVisibility());
-		inject(DestroyRef).onDestroy(() => this.#clearScrollInterval());
+		inject(DestroyRef).onDestroy(() => {
+			this.#clearScrollInterval();
+			this.#scroller.stop();
+		});
 	}
 	selectTab(id) {
 		const target = this.visibleTabs().find((tab) => tab.id() === id);
 		if (!target || target.disabled()) return;
 		this.#internalId.set(id);
+		this.#focusedId.set(null);
 		this.activeIdChange.emit(id);
 		this.#scrollTabIntoView(id);
 	}
-	onTabKeydown(event) {
-		const enabled = this.visibleTabs().filter((tab) => !tab.disabled());
+	onCloseClick(event, tab) {
+		event.stopPropagation();
+		this.#close(tab, event.currentTarget instanceof HTMLElement && event.currentTarget.matches(":focus"));
+	}
+	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((tab) => tab.id() === this.selectedId());
+		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],
@@ -377,36 +801,74 @@ var RtTabsComponent = class RtTabsComponent {
 		if (targetIndex === void 0) return;
 		event.preventDefault();
 		const targetId = enabled[targetIndex].id();
-		this.selectTab(targetId);
+		if (this.activation() === "manual") {
+			this.#focusedId.set(targetId);
+			this.#scrollTabIntoView(targetId);
+		} else this.selectTab(targetId);
 		this.#focusTab(targetId);
 	}
 	onRestPointerDown(direction, event) {
-		if (event.button !== 0 || this.#scrollIntervalId !== null || !this.#win) return;
-		this.#scrollIntervalId = this.#win.setInterval(() => {
-			this.#scrollStep(direction);
-			this.#updateRestVisibility();
-		}, SCROLL_TICK_MS);
+		if (event.button !== 0 || this.#pressed !== null || !this.#win) return;
+		this.#pressed = direction;
+		this.#holdTimeoutId = this.#win.setTimeout(() => {
+			this.#holdTimeoutId = null;
+			this.#scrollIntervalId = this.#win?.setInterval(() => {
+				this.#scrollStep(direction);
+				this.#updateRestVisibility();
+			}, SCROLL_TICK_MS) ?? null;
+		}, HOLD_DELAY_MS);
 	}
 	onRestPointerUp() {
+		const direction = this.#pressed;
+		const shortPress = this.#holdTimeoutId !== null;
+		this.#clearScrollInterval();
+		if (direction !== null && shortPress) this.#scrollPage(direction);
+	}
+	onRestPointerLeave() {
 		this.#clearScrollInterval();
 	}
 	onTabListScroll() {
 		this.#updateRestVisibility();
 	}
+	#closeByKey(event, tab) {
+		if (!tab.showClose()) return;
+		event.preventDefault();
+		this.#close(tab, true);
+	}
+	#close(tab, focus) {
+		const closedId = tab.id();
+		const wasActive = this.selectedId() === closedId;
+		this.tabClose.emit(closedId);
+		afterNextRender(() => {
+			const id = this.selectedId();
+			if (id === null) return;
+			if (wasActive && id !== closedId) {
+				this.#internalId.set(id);
+				this.activeIdChange.emit(id);
+			}
+			if (focus) this.#focusTab(id);
+		}, { injector: this.#injector });
+	}
 	#clearScrollInterval() {
+		this.#pressed = null;
+		if (this.#win && this.#holdTimeoutId !== null) {
+			this.#win.clearTimeout(this.#holdTimeoutId);
+			this.#holdTimeoutId = null;
+		}
 		if (this.#win && this.#scrollIntervalId !== null) {
 			this.#win.clearInterval(this.#scrollIntervalId);
 			this.#scrollIntervalId = null;
 		}
 	}
-	#scrollStep(direction) {
+	#scrollPage(direction) {
 		const list = this.tabListRef()?.nativeElement;
-		if (!list) return;
-		const scrolledLeft = list.scrollLeft;
-		const scrolledRight = list.scrollWidth - list.scrollLeft - list.clientWidth;
-		const remaining = direction === "before" ? scrolledLeft : scrolledRight;
-		if (remaining > 0) list.scrollBy(direction === "before" ? -12 : SCROLL_STEP, 0);
-		if (remaining - SCROLL_STEP <= 0) this.#clearScrollInterval();
+		if (list) {
+			this.#scroller.to(rtTabsPageTarget(list, this.#scroller.from(), direction === "before", this.scrollStep()));
+			this.#updateRestVisibility();
+		}
+	}
+	#scrollStep(direction) {
+		if (!this.#scroller.nudge(direction === "before")) this.#clearScrollInterval();
 	}
 	#updateRestVisibility() {
 		const list = this.tabListRef()?.nativeElement;
@@ -421,15 +883,12 @@ var RtTabsComponent = class RtTabsComponent {
 	}
 	#scrollTabIntoView(id) {
 		const list = this.tabListRef()?.nativeElement;
-		const tab = list?.querySelector(`[data-tabid="${id}"]`);
-		if (!list || !tab) return;
-		const viewLeft = list.scrollLeft;
-		const viewRight = list.scrollLeft + list.clientWidth;
-		if (tab.offsetLeft < viewLeft) list.scrollTo({ left: tab.offsetLeft });
-		else if (tab.offsetLeft + tab.offsetWidth > viewRight) list.scrollTo({ left: tab.offsetLeft + tab.offsetWidth - list.clientWidth });
+		const tab = list?.querySelector(`[data-tabitem="${id}"]`);
+		const target = list && tab ? rtTabsIntoViewTarget(list, tab) : null;
+		if (target !== null) this.#scroller.to(target);
 	}
 	#focusTab(id) {
-		(this.tabListRef()?.nativeElement)?.querySelector(`[data-tabid="${id}"]`)?.focus();
+		(this.tabListRef()?.nativeElement)?.querySelector(`[data-tabid="${id}"]`)?.focus({ preventScroll: true });
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -476,13 +935,67 @@ var RtTabsComponent = class RtTabsComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				headerOnly: {
+					classPropertyName: "headerOnly",
+					publicName: "headerOnly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				preserveContent: {
+					classPropertyName: "preserveContent",
+					publicName: "preserveContent",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				activation: {
+					classPropertyName: "activation",
+					publicName: "activation",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				scrollArrows: {
+					classPropertyName: "scrollArrows",
+					publicName: "scrollArrows",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				scrollStep: {
+					classPropertyName: "scrollStep",
+					publicName: "scrollStep",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				animationDuration: {
+					classPropertyName: "animationDuration",
+					publicName: "animationDuration",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				contentTabIndex: {
+					classPropertyName: "contentTabIndex",
+					publicName: "contentTabIndex",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
-			outputs: { activeIdChange: "activeIdChange" },
+			outputs: {
+				activeIdChange: "activeIdChange",
+				tabClose: "tabClose"
+			},
 			host: {
 				properties: {
 					"class.rt-tabs--direction--horizontal": "direction() === 'horizontal'",
-					"class.rt-tabs--direction--vertical": "direction() === 'vertical'"
+					"class.rt-tabs--direction--vertical": "direction() === 'vertical'",
+					"class.rt-tabs--animating": "panels.shift() !== null",
+					"style": "panels.durations()"
 				},
 				classAttribute: "rt-tabs"
 			},
@@ -503,8 +1016,8 @@ 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\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\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() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    <button\n                        rtBlock=\"rt-tab-item\"\n                        qa-dataid=\"tabs-tab\"\n                        type=\"button\"\n                        role=\"tab\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [id]=\"'rt-tab-' + tab.id()\"\n                        [disabled]=\"tab.disabled()\"\n                        [attr.data-tabid]=\"tab.id()\"\n                        [attr.aria-selected]=\"tab.id() === selectedId()\"\n                        [attr.aria-controls]=\"'rt-tabpanel-' + tab.id()\"\n                        [attr.tabindex]=\"tab.id() === selectedId() ? 0 : -1\"\n                        [rtTooltip]=\"tab.invalid() ? tab.invalidTitle() : ''\"\n                        (click)=\"selectTab(tab.id())\"\n                        (keydown)=\"onTabKeydown($event)\">\n                        @if (tab.icon(); as icon) {\n                            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"icon\" [color]=\"tab.iconColor()\" />\n                        }\n\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            <span rtElem=\"title\">{{ tab.label() }}</span>\n                        }\n\n                        @if (tab.badge() !== null) {\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            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\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    @if (activeTab(); as tab) {\n        <div\n            rtElem=\"content\"\n            qa-dataid=\"tabs-panel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [rtMod]=\"{ scrollable: contentScrollable() }\"\n            [id]=\"'rt-tabpanel-' + tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + tab.id()\">\n            <ng-container [ngTemplateOutlet]=\"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);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.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{display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;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__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__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-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.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);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;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:calc(-1 * var(--rt-tab-item-border-width));height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none}.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:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{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--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{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 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.icon() || tab.glyph()) {\n                                <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"tab.icon()\" [glyph]=\"tab.glyph()\" [color]=\"tab.iconColor()\" />\n                            }\n\n                            @if (tab.titleTemplate(); as titleTpl) {\n                                <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                            } @else {\n                                <span rtElem=\"title\">{{ tab.label() }}</span>\n                            }\n\n                            @if (tab.badge() !== null) {\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);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;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;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-space-md);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-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{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__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:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{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"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -538,6 +1051,7 @@ var RtTabsComponent = class RtTabsComponent {
 					inputs: [
 						"rtTooltip",
 						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
 						"rtTooltipWhenTruncated",
 						"rtTooltipHideOnClick"
 					],
@@ -588,10 +1102,12 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: BEM_BLOCK,
 				"[class.rt-tabs--direction--horizontal]": "direction() === 'horizontal'",
-				"[class.rt-tabs--direction--vertical]": "direction() === 'vertical'"
+				"[class.rt-tabs--direction--vertical]": "direction() === 'vertical'",
+				"[class.rt-tabs--animating]": "panels.shift() !== null",
+				"[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\">\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-prev\"\n                [rtMod]=\"{ before: true, visible: restBeforeVisible() }\"\n                (mousedown)=\"onRestPointerDown('before', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\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() }\"\n                [attr.aria-orientation]=\"direction()\"\n                (scroll)=\"onTabListScroll()\">\n                @for (tab of visibleTabs(); track tab.id()) {\n                    <button\n                        rtBlock=\"rt-tab-item\"\n                        qa-dataid=\"tabs-tab\"\n                        type=\"button\"\n                        role=\"tab\"\n                        [rtMod]=\"{\n                            selected: tab.id() === selectedId(),\n                            disabled: tab.disabled(),\n                            invalid: tab.invalid(),\n                            stretch: stretch(),\n                        }\"\n                        [id]=\"'rt-tab-' + tab.id()\"\n                        [disabled]=\"tab.disabled()\"\n                        [attr.data-tabid]=\"tab.id()\"\n                        [attr.aria-selected]=\"tab.id() === selectedId()\"\n                        [attr.aria-controls]=\"'rt-tabpanel-' + tab.id()\"\n                        [attr.tabindex]=\"tab.id() === selectedId() ? 0 : -1\"\n                        [rtTooltip]=\"tab.invalid() ? tab.invalidTitle() : ''\"\n                        (click)=\"selectTab(tab.id())\"\n                        (keydown)=\"onTabKeydown($event)\">\n                        @if (tab.icon(); as icon) {\n                            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"icon\" [color]=\"tab.iconColor()\" />\n                        }\n\n                        @if (tab.titleTemplate(); as titleTpl) {\n                            <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                        } @else {\n                            <span rtElem=\"title\">{{ tab.label() }}</span>\n                        }\n\n                        @if (tab.badge() !== null) {\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            </div>\n\n            <div\n                rtElem=\"rest\"\n                qa-dataid=\"tabs-scroll-next\"\n                [rtMod]=\"{ after: true, visible: restAfterVisible() }\"\n                (mousedown)=\"onRestPointerDown('after', $event)\"\n                (mouseup)=\"onRestPointerUp()\"\n                (mouseleave)=\"onRestPointerUp()\">\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    @if (activeTab(); as tab) {\n        <div\n            rtElem=\"content\"\n            qa-dataid=\"tabs-panel\"\n            role=\"tabpanel\"\n            tabindex=\"0\"\n            [rtMod]=\"{ scrollable: contentScrollable() }\"\n            [id]=\"'rt-tabpanel-' + tab.id()\"\n            [attr.aria-labelledby]=\"'rt-tab-' + tab.id()\">\n            <ng-container [ngTemplateOutlet]=\"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);display:flex;-webkit-tap-highlight-color:transparent}.rt-tabs--direction--horizontal{flex-direction:column}.rt-tabs--direction--vertical{flex-direction:row}.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{display:flex;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;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__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__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-space-md);gap:var(--rt-space-md);line-height:var(--rt-leading-relaxed)}.rt-tabs__content--scrollable{overflow:auto}.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);position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--rt-space-2) var(--rt-space-4);border:0;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:calc(-1 * var(--rt-tab-item-border-width));height:2px;background-color:transparent;content:\"\";inset-inline:0;pointer-events:none}.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:focus-visible{outline:2px solid var(--rt-color-action-primary);outline-offset:-3px}.rt-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{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--selected{color:var(--rt-color-action-primary);cursor:default}.rt-tab-item--selected:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{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 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.icon() || tab.glyph()) {\n                                <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"tab.icon()\" [glyph]=\"tab.glyph()\" [color]=\"tab.iconColor()\" />\n                            }\n\n                            @if (tab.titleTemplate(); as titleTpl) {\n                                <ng-container [ngTemplateOutlet]=\"titleTpl\" />\n                            } @else {\n                                <span rtElem=\"title\">{{ tab.label() }}</span>\n                            }\n\n                            @if (tab.badge() !== null) {\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);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;border-bottom:var(--rt-tabs-border-width) solid var(--rt-color-border-default);margin:0;-ms-overflow-style:none;overflow-x:auto;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-space-md);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-tab-item__title{overflow:hidden;max-width:200px;text-overflow:ellipsis}.rt-tab-item__icon{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__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:after{background-color:var(--rt-color-action-primary)}.rt-tab-item--selected .rt-tab-item__badge{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"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -640,9 +1156,69 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		headerOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headerOnly",
+				required: false
+			}]
+		}],
+		preserveContent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preserveContent",
+				required: false
+			}]
+		}],
+		activation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activation",
+				required: false
+			}]
+		}],
+		scrollArrows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollArrows",
+				required: false
+			}]
+		}],
+		scrollStep: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollStep",
+				required: false
+			}]
+		}],
+		animationDuration: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animationDuration",
+				required: false
+			}]
+		}],
+		contentTabIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentTabIndex",
+				required: false
+			}]
+		}],
 		activeIdChange: [{
 			type: i0.Output,
 			args: ["activeIdChange"]
+		}],
+		tabClose: [{
+			type: i0.Output,
+			args: ["tabClose"]
 		}]
 	}
 });