@octane-xplat/ui 0.7.3 → 0.10.0

package/dist/web/TabList.web.tsrx.js

@@ -0,0 +1,692 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { TabListContext, TabListProvider, useTabListContext } from "./nav-contexts.js";
+import { useListFocus } from "./list-focus.web.tsrx.js";
+import "./nav-href.web.js";
+import { Fragment, bag0, bag13, bag4, bag7, bag8, bag9, bagOf, child, clone, compilerCacheContext, componentSlot, componentSlotVoid, createElement, createScopedElement, createScopedValue, delegateEvents, drainFrag, evt1, evt1u, forBlock, hookSlots, ifBlock, markChildrenBlock, markWarm, positionalChildren, queueRefAttach, queueRefDetach, registerWarmPlan, setAriaAttribute, setEventHandler, setStyle, sibling, snapshotSpread, template, useContext, useEffect, useRef, useState, warmChild, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish, hookMemoPublish0, hookMemoPublish2, replaceRef, setAriaAttributeIfChanged, setPlainAttribute, setPlainAttributeIfChanged, updateFreshClassAttr, updateFreshClassName } from "octane/internal/client";
+//#region src/TabList.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents([
+	"click",
+	"focusin",
+	"keydown"
+]);
+var _t$0 = /* @__PURE__ */ template("<div role=\"presentation\"></div>");
+var _t$1 = /* @__PURE__ */ template("<nav></nav>");
+var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$3 = /* @__PURE__ */ template("<button></button>");
+var _t$4 = /* @__PURE__ */ template("<span class=\"vx-tab-indicator vx-tab-indicator--on\" aria-hidden=\"true\"></span>");
+var _t$5 = /* @__PURE__ */ template("<div role=\"menuitemradio\"><span class=\"vx-tabmenu-itemcontent\"><!><!></span><!></div>");
+var _t$6 = /* @__PURE__ */ template("<div class=\"vx-tabmenu\" role=\"menu\"><div class=\"vx-tabmenu-heading\" role=\"presentation\"></div><!></div>");
+var _t$7 = /* @__PURE__ */ template("<button type=\"button\" data-tab-menu=\"\" aria-haspopup=\"menu\"><span class=\"vx-tab-hover\" aria-hidden=\"true\"></span><span class=\"vx-tab-labelwrap\"><span class=\"vx-tab-label\"></span><span class=\"vx-tab-labelsizer\" aria-hidden=\"true\"></span></span><span aria-hidden=\"true\"></span><!></button><!>", 3, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(13);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _rm$4 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$2(__props, __s, __extra) {
+	const attachRoot = __extra[0];
+	const cls = __extra[1];
+	const handleFocus = __extra[2];
+	const handleKeyDown = __extra[3];
+	const inner = __extra[4];
+	const props = __extra[6];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = attachRoot, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$keydown", handleKeyDown);
+		setEventHandler(_root, "$$focusin", handleFocus);
+		_b = bag7(__s, _root, _m0, _m1, void 0, void 0, void 0, null, void 0);
+		__s.refFields = _rm$4;
+	} else {
+		{
+			const _r = attachRoot;
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$keydown", handleKeyDown);
+		setEventHandler(_b.a, "$$focusin", handleFocus);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:b8a2f038", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "class", cls, "b:885af16b", "class");
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.a, inner, "b:ec7f26ac", null, void 0, void 0, void 0, true);
+}
+var _rm$7 = [
+	"r",
+	"b",
+	"a"
+];
+function __else$5(__props, __s, __extra) {
+	const attachRoot = __extra[0];
+	const cls = __extra[1];
+	const handleFocus = __extra[2];
+	const handleKeyDown = __extra[3];
+	const inner = __extra[4];
+	const label = __extra[5];
+	const props = __extra[6];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$1);
+		queueRefAttach(__s, _m1 = attachRoot, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$keydown", handleKeyDown);
+		setEventHandler(_root, "$$focusin", handleFocus);
+		_b = bag9(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, null, void 0);
+		__s.refFields = _rm$7;
+	} else {
+		{
+			const _r = attachRoot;
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$keydown", handleKeyDown);
+		setEventHandler(_b.a, "$$focusin", handleFocus);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:39cdf6ee", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "class", cls, "b:ce8358a2", "class");
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "role", props.role, "b:3cc899a0", setPlainAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "aria-label", props.role ? void 0 : label, "b:ffd0df28", setAriaAttribute);
+	_b.j = bindSignalChild(__s, _b.j, 1, _b.a, inner, "b:62c7b715", null, void 0, void 0, void 0, true);
+}
+var __childrenBody = {};
+var __childrenBody$ = {};
+function __then$9(__props, __s, __extra) {
+	const __block = __s.block;
+	const LinkEl = __extra[0];
+	const content = __extra[1];
+	const isDisabled = __extra[2];
+	const props = __extra[3];
+	const select = __extra[4];
+	const shared = __extra[5];
+	function __children$11(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$2);
+			_m0 = __block.parentNode;
+			_m1 = child(_root);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag4(__s, null, _m0, _m1, null, void 0);
+		}
+		_b.e = bindSignalChild(__s, _b.e, 1, _b.a, content, "b:079bc2c8", _b.b, true, void 0, true, void 0);
+	}
+	componentSlot(__s, 0, __block.parentNode, LinkEl, {
+		...shared,
+		"href": isDisabled ? void 0 : props.href,
+		"onClick": select,
+		"ref": (el) => applyEscapeProps(el, props),
+		"children": markChildrenBlock(__children$11, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:8e763255");
+}
+var _rm$15 = [
+	"s",
+	"f",
+	"e"
+];
+function __else$13(__props, __s, __extra) {
+	const content = __extra[1];
+	const props = __extra[3];
+	const select = __extra[4];
+	const shared = __extra[5];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5;
+		const _root = clone(_t$3);
+		_m0 = snapshotSpread(shared);
+		_m1 = "button";
+		_m2 = select;
+		_m3 = (el) => applyEscapeProps(el, props);
+		_m4 = _root;
+		_m5 = bindSignalHostPropSources(__s, void 0, _root, [
+			[true, _m0],
+			[
+				false,
+				"type",
+				_m1
+			],
+			[
+				false,
+				"onClick",
+				_m2
+			],
+			[
+				false,
+				"ref",
+				_m3
+			]
+		], "b:ce72c5cf", true);
+		_b = bag8(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, null, void 0);
+		__s.refFields = _rm$15;
+	} else {
+		_b.a = snapshotSpread(shared);
+		{
+			const _v = "button";
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = select;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		{
+			const _v = (el) => applyEscapeProps(el, props);
+			if (_b.d !== _v) _b.d = _v;
+		}
+		_b.f = bindSignalHostPropSources(__s, _b.f, _b.e, [
+			[true, _b.a],
+			[
+				false,
+				"type",
+				_b.b
+			],
+			[
+				false,
+				"onClick",
+				_b.c
+			],
+			[
+				false,
+				"ref",
+				_b.d
+			]
+		], "b:ce72c5cf", true);
+	}
+	_b.i = bindSignalChild(__s, _b.i, 1, _b.e, content, "b:687e1a84", null, void 0, void 0, void 0, true);
+}
+var _h$11 = /* @__PURE__ */ Symbol(_hs$ + 11);
+function __then$20(__props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		const _root = clone(_t$4);
+		_b = bag0(__s, _root);
+	}
+}
+var _key$25 = (option) => option.value;
+function __then$29(__props, __s, __extra) {
+	const __block = __s.block;
+	componentSlot(__s, 0, __block.parentNode, Icon, {
+		"name": "xplat-check",
+		"size": 16
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:5df6638c");
+}
+function __item$26(option, __s, __extra) {
+	const ctx = __extra[0];
+	const pick = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m5, _m6, _m7, _m10;
+		const _root = clone(_t$5);
+		_m1 = _root;
+		_m4 = evt1(_root, "$$click", pick, option.value);
+		setEventHandler(_root, "$$keydown", (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				pick(option.value);
+			}
+		});
+		_m5 = sibling(child(_root), 1);
+		const _el1 = child(_root);
+		_m6 = _el1;
+		const _el2 = child(_el1);
+		_m7 = _el2;
+		_m10 = sibling(_el2, 1);
+		_b = bag13(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6, _m7, null, void 0, _m10, null, void 0);
+	} else {
+		evt1u(_b.e, pick, option.value);
+		setEventHandler(_b.b, "$$keydown", (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				pick(option.value);
+			}
+		});
+	}
+	_b.a = updateFreshClassName(["vx-tabmenu-item", ctx.value === option.value && "vx-tabmenu-item--selected"], _b.a, _b.b);
+	_b.c = setPlainAttributeIfChanged(-1, _b.c, _b.b, "tabindex");
+	_b.d = setAriaAttributeIfChanged(ctx.value === option.value, _b.d, _b.b, "aria-checked");
+	_b.n = bindSignalChild(__s, _b.n, 1, _b.g, option.icon != null ? navIcon(option.icon, 16) : null, "b:954a18c4", _b.h, true, void 0, void 0, void 0);
+	_b.o = bindSignalChild(__s, _b.o, 2, _b.g, option.label, "b:32181ef6", _b.k, true, void 0, void 0, void 0);
+	ifBlock(__s, 3, _b.b, ctx.value === option.value, __then$29, null, _b.f);
+}
+var _rm$33 = [
+	"r",
+	"b",
+	"a"
+];
+var __childrenBody$2 = {};
+var _rm$34 = [
+	"r",
+	"b",
+	"a"
+];
+var TAB_STOP_SELECTOR = "[data-tab-value],[data-tab-menu]";
+var SCROLL_PAGE_RATIO = .8;
+var SIZE_HEIGHT = {
+	sm: 28,
+	md: 32,
+	lg: 36
+};
+function navIcon(icon, size) {
+	return typeof icon === "string" ? createScopedValue(() => createElementFromConfig("c:bd452ebf", Icon, {
+		name: icon,
+		size
+	})) : icon;
+}
+var TabList = function TabList(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(15);
+	let __hkd0, __hkd1, __hkd0$, __hkd1$, __hkd2, __hkd3, __hkd4;
+	const size = props.size ?? "md";
+	const hasScroll = (props.overflow ?? "auto") !== "visible";
+	const isTabList = props.role === "tablist";
+	const root = useRef(null, _hs$ + 0);
+	const strip = useRef(null, _hs$ + 1);
+	const [overflowStart, setOverflowStart] = useState(false, _hs$ + 2);
+	const [overflowEnd, setOverflowEnd] = useState(false, _hs$ + 3);
+	const { listRef, handleKeyDown, handleFocus } = withSlot(_h$4, useListFocus, {
+		itemSelector: TAB_STOP_SELECTOR,
+		orientation: isTabList ? "horizontal" : "both",
+		hasRovingTabIndex: true
+	});
+	const updateOverflow = __hk[0] !== true ? hookMemoPublish0(__hk, 0, () => {
+		const el = strip.current;
+		if (!el) return;
+		setOverflowStart(el.scrollLeft > 1);
+		setOverflowEnd(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+	}) : __hk[1];
+	useEffect(() => {
+		const el = strip.current;
+		if (!el || !hasScroll) return;
+		updateOverflow();
+		el.addEventListener("scroll", updateOverflow, { passive: true });
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateOverflow) : null;
+		ro?.observe(el);
+		const mo = new MutationObserver(updateOverflow);
+		mo.observe(el, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			el.removeEventListener("scroll", updateOverflow);
+			ro?.disconnect();
+			mo.disconnect();
+		};
+	}, [hasScroll, updateOverflow], _hs$ + 5);
+	const revealSelected = (__hkd0 = props.value, __hkd1 = hasScroll, __hk[2] !== true || !hookMemoEqual(__hk[3], __hkd0) || !hookMemoEqual(__hk[4], __hkd1) ? hookMemoPublish2(__hk, 2, () => {
+		const el = strip.current;
+		if (!el || !hasScroll) return;
+		const stop = Array.from(el.querySelectorAll("[data-tab-value]")).find((n) => n.dataset.tabValue === props.value);
+		if (typeof stop?.scrollIntoView === "function") stop.scrollIntoView({
+			block: "nearest",
+			inline: "nearest",
+			behavior: "instant"
+		});
+	}, __hkd0, __hkd1) : __hk[5]);
+	const revealed = useRef(null, _hs$ + 6);
+	useEffect(() => {
+		if (revealed.current === props.value) return;
+		revealed.current = props.value;
+		revealSelected();
+	}, [props.value, revealSelected], _hs$ + 7);
+	useEffect(() => {
+		const el = strip.current;
+		if (!el || !hasScroll || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(revealSelected);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [hasScroll, revealSelected], _hs$ + 8);
+	const scrollPage = __hk[6] !== true ? hookMemoPublish0(__hk, 6, (dir) => {
+		const el = strip.current;
+		if (!el) return;
+		el.scrollBy({
+			left: dir * el.clientWidth * SCROLL_PAGE_RATIO,
+			behavior: "smooth"
+		});
+	}) : __hk[7];
+	const ctx = (__hkd0$ = props.value, __hkd1$ = props.onChange, __hkd2 = size, __hkd3 = props.layout, __hkd4 = isTabList, __hk[8] !== true || !hookMemoEqual(__hk[9], __hkd0$) || !hookMemoEqual(__hk[10], __hkd1$) || !hookMemoEqual(__hk[11], __hkd2) || !hookMemoEqual(__hk[12], __hkd3) || !hookMemoEqual(__hk[13], __hkd4) ? hookMemoPublish(__hk, 8, {
+		value: props.value,
+		onChange: props.onChange,
+		size,
+		layout: props.layout ?? "hug",
+		pattern: isTabList ? "tabs" : "nav"
+	}, __hkd0$, __hkd1$, __hkd2, __hkd3, __hkd4) : __hk[14]);
+	const label = props.web?.["aria-label"] ?? "Tabs";
+	const fades = !hasScroll ? "" : overflowStart && overflowEnd ? "vx-tabstrip--fade-both" : overflowStart ? "vx-tabstrip--fade-start" : overflowEnd ? "vx-tabstrip--fade-end" : "";
+	const attachRoot = (el) => {
+		root.current = el;
+		listRef.current = el;
+		if (el) applyEscapeProps(el, props);
+	};
+	const inner = createScopedElement(Fragment, {}, () => positionalChildren([
+		createScopedValue(() => createScopedElement("div", {
+			ref: (el) => {
+				strip.current = el;
+			},
+			className: [
+				"vx-tabstrip",
+				hasScroll && "vx-tabstrip--scroll",
+				props.isFullBleed && "vx-tabstrip--bleed",
+				fades
+			],
+			role: isTabList ? "tablist" : void 0,
+			"aria-label": isTabList ? label : void 0,
+			onScroll: updateOverflow
+		}, () => props.children)),
+		hasScroll && overflowStart ? createScopedValue(() => createScopedElement("button", {
+			type: "button",
+			className: "vx-tabscroll vx-tabscroll--start",
+			"aria-hidden": "true",
+			tabIndex: -1,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => scrollPage(-1)
+		}, () => createElementFromConfig("c:35fde619", Icon, {
+			name: "xplat-chevron-left",
+			size: 16
+		}))) : null,
+		hasScroll && overflowEnd ? createScopedValue(() => createScopedElement("button", {
+			type: "button",
+			className: "vx-tabscroll vx-tabscroll--end",
+			"aria-hidden": "true",
+			tabIndex: -1,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => scrollPage(1)
+		}, () => createElementFromConfig("c:71077d04", Icon, {
+			name: "xplat-chevron-right",
+			size: 16
+		}))) : null
+	]));
+	const cls = [
+		"vx-tablist",
+		"vx-tablist--" + size,
+		props.layout === "fill" && "vx-tablist--fill",
+		props.hasDivider && "vx-tablist--divided",
+		props.isFullBleed && "vx-tablist--bleed",
+		props.className
+	];
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		ifBlock(__s, 0, __block.parentNode, isTabList, __then$2, __else$5, __block.endMarker, [
+			attachRoot,
+			cls,
+			handleFocus,
+			handleKeyDown,
+			inner,
+			label,
+			props
+		]);
+	}
+	componentSlot(__s, 0, __block.parentNode, TabListProvider, {
+		"value": ctx,
+		"children": markChildrenBlock(__children$1, __childrenBody)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:89a30072");
+};
+var Tab = function Tab(props, __s, __extra) {
+	const __block = __s.block;
+	const ctx = useContext(TabListContext);
+	if (ctx == null) throw new Error("Tab must be used within a TabList.");
+	const isSelected = ctx.value === props.value;
+	const isTabs = ctx.pattern === "tabs";
+	const isLink = props.href != null && !isTabs;
+	const isDisabled = props.isDisabled === true;
+	const displayIcon = isSelected && props.selectedIcon != null ? props.selectedIcon : props.icon;
+	const showLabel = !props.isLabelHidden && props.label !== "";
+	const select = (e) => {
+		if (isDisabled) {
+			e?.preventDefault?.();
+			return;
+		}
+		props.onPress?.();
+		if (e?.defaultPrevented) return;
+		ctx.onChange(props.value);
+	};
+	const shared = {
+		id: props.id,
+		"data-tab-value": props.value,
+		className: [
+			"vx-tab",
+			isSelected && "vx-tab--selected",
+			ctx.layout === "fill" && "vx-tab--fill",
+			props.className
+		],
+		style: {
+			height: SIZE_HEIGHT[ctx.size],
+			...props.style
+		},
+		tabIndex: isDisabled ? -1 : isSelected ? 0 : -1,
+		"aria-label": props.isLabelHidden ? props.label : void 0,
+		"aria-disabled": isDisabled || void 0,
+		...isTabs ? {
+			role: "tab",
+			"aria-selected": isSelected,
+			"aria-controls": props.panelId
+		} : { "aria-current": isSelected ? "true" : void 0 }
+	};
+	const content = createScopedElement(Fragment, {}, () => positionalChildren([
+		createElement("span", {
+			className: "vx-tab-hover",
+			"aria-hidden": "true"
+		}),
+		displayIcon != null ? createScopedElement("span", { className: "vx-tab-icon" }, () => navIcon(displayIcon, ctx.size === "lg" ? 18 : ctx.size === "sm" ? 14 : 16)) : null,
+		showLabel ? createScopedElement("span", { className: "vx-tab-labelwrap" }, () => positionalChildren([createScopedElement("span", { className: "vx-tab-label" }, () => props.label), createScopedElement("span", {
+			className: "vx-tab-labelsizer",
+			"aria-hidden": "true"
+		}, () => props.label)])) : null,
+		props.endContent != null ? createScopedElement("span", { className: "vx-tab-end" }, () => props.endContent) : null,
+		createScopedValue(() => createElement("span", {
+			className: ["vx-tab-indicator", isSelected && "vx-tab-indicator--on"],
+			"aria-hidden": "true"
+		}))
+	]));
+	const LinkEl = isDisabled ? "a" : props.as ?? "a";
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	ifBlock(__s, 0, __block.parentNode, isLink, __then$9, __else$13, __block.endMarker, [
+		LinkEl,
+		content,
+		isDisabled,
+		props,
+		select,
+		shared
+	]);
+};
+var TabMenu = /* @__PURE__ */ markWarm(function TabMenu(props, __s, __extra) {
+	const __block = __s.block;
+	const ctx = useContext(TabListContext);
+	if (ctx == null) throw new Error("TabMenu must be used within a TabList.");
+	const anchor = useRef(null, _hs$ + 9);
+	const [open, setOpen] = useState(false, _hs$ + 10);
+	const selected = props.options.find((o) => o.value === ctx.value);
+	const triggerLabel = selected?.label ?? props.label;
+	const menu = withSlot(_h$11, useListFocus, {
+		itemSelector: "[role=\"menuitemradio\"]",
+		orientation: "vertical",
+		hasRovingTabIndex: true,
+		onEscape: () => setOpen(false)
+	});
+	const pick = (value) => {
+		ctx.onChange(value);
+		setOpen(false);
+	};
+	const __warmPlan = TabMenu.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		warmChild(Icon, {
+			name: "xplat-chevron-down",
+			size: 16
+		});
+	}, void 0);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	function __children$23(__props, __s, __extra) {
+		const __memoRegion$ = compilerMemoRegion(__s, _hs$ + 10);
+		const __memoCommitted$10 = __memoRegion$.auto;
+		let __memoCache$10 = __memoCommitted$10 === void 0 ? [] : __memoCommitted$10;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m3, _m4;
+			const _root = clone(_t$6);
+			queueRefAttach(__s, _m1 = (el) => {
+				menu.listRef.current = el;
+			}, _m0 = _root);
+			(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+			setEventHandler(_root, "$$keydown", menu.handleKeyDown);
+			setEventHandler(_root, "$$focusin", menu.handleFocus);
+			_m3 = sibling(child(_root), 1);
+			_m4 = child(_root);
+			_b = bag7(__s, _root, _m0, _m1, void 0, _m3, _m4, null, void 0);
+			__s.refFields = _rm$33;
+		} else {
+			{
+				const _r = (el) => {
+					menu.listRef.current = el;
+				};
+				if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+			}
+			setEventHandler(_b.a, "$$keydown", menu.handleKeyDown);
+			setEventHandler(_b.a, "$$focusin", menu.handleFocus);
+		}
+		_b.c = bindSignalAttribute(__s, _b.c, _b.a, "aria-label", props.label, "b:9a7d99f3", setAriaAttribute);
+		_b.h = bindSignalChild(__s, _b.h, 1, _b.e, props.label, "b:20affed3", null, void 0, void 0, void 0, true);
+		{
+			const _v = props.options;
+			{
+				const __memoDep = _v;
+				const __memoDep$ = Icon;
+				const __memoDep$2 = ctx;
+				const __memoDep$3 = pick;
+				if (__s.slots[2] === void 0 || Icon.__memo !== true || Icon.__compare !== void 0 || __memoCache$10[5] !== true || !hookMemoEqual(__memoCache$10[0], __memoDep) || !hookMemoEqual(__memoCache$10[1], __memoDep$) || !hookMemoEqual(__memoCache$10[2], __memoDep$2) || !hookMemoEqual(__memoCache$10[3], __memoDep$3)) {
+					forBlock(__s, 2, _b.a, _v, _key$25, __item$26, 58, [ctx, pick], null, _b.d, true, "f17zkei7");
+					const _c = compilerCacheContext(__s, 2, __memoCache$10[4]);
+					if (__memoCache$10 === __memoCommitted$10) __memoCache$10 = __memoCache$10.slice();
+					__memoCache$10[0] = __memoDep;
+					__memoCache$10[1] = __memoDep$;
+					__memoCache$10[2] = __memoDep$2;
+					__memoCache$10[3] = __memoDep$3;
+					__memoCache$10[4] = _c;
+					__memoCache$10[5] = true;
+				} else {
+					const _c = compilerCacheContext(__s, 2, __memoCache$10[4]);
+					if (_c !== __memoCache$10[4]) {
+						if (__memoCache$10 === __memoCommitted$10) __memoCache$10 = __memoCache$10.slice();
+						__memoCache$10[4] = _c;
+					}
+				}
+			}
+		}
+		if (__memoCache$10 !== __memoCommitted$10) __memoRegion$.auto = __memoCache$10;
+	}
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m7, _m9, _m10, _m11, _m14, _m17, _m18;
+		const _root = clone(_t$7);
+		const _el0 = child(_root);
+		queueRefAttach(__s, _m1 = (el) => {
+			anchor.current = el;
+			applyEscapeProps(el, props);
+		}, _m0 = _el0);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m7 = evt1(_el0, "$$click", setOpen, !open);
+		const _el1 = sibling(child(_el0), 2);
+		_m9 = _el1;
+		_m10 = sibling(_el1, 1);
+		const _el3 = sibling(child(_el0), 1);
+		const _el4 = child(_el3);
+		_m11 = _el4;
+		_m14 = sibling(_el4, 1);
+		_m17 = __block.parentNode;
+		_m18 = sibling(_el0, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bagOf(__s, null, {
+			a: _m0,
+			b: _m1,
+			c: void 0,
+			d: void 0,
+			e: void 0,
+			f: void 0,
+			g: void 0,
+			h: _m7,
+			i: void 0,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: null,
+			n: void 0,
+			o: _m14,
+			p: null,
+			q: void 0,
+			r: _m17,
+			s: _m18
+		});
+		__s.refFields = _rm$34;
+	} else {
+		{
+			const _r = (el) => {
+				anchor.current = el;
+				applyEscapeProps(el, props);
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		evt1u(_b.h, setOpen, !open);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:8f9bbd19", setPlainAttribute);
+	_b.d = updateFreshClassAttr([
+		"vx-tab vx-tabmenu-trigger",
+		selected && "vx-tab--selected",
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = {
+			height: SIZE_HEIGHT[ctx.size],
+			...props.style
+		};
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.f = setPlainAttributeIfChanged(selected ? 0 : -1, _b.f, _b.a, "tabindex");
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "aria-expanded", open, "b:fa4600a0", setAriaAttribute);
+	_b.i = updateFreshClassAttr(["vx-tabmenu-chevron", open && "vx-tabmenu-chevron--open"], _b.i, _b.j);
+	_b.t = bindSignalChild(__s, _b.t, 1, _b.l, triggerLabel, "b:03674be1", null, void 0, void 0, void 0, true);
+	_b.u = bindSignalChild(__s, _b.u, 2, _b.o, triggerLabel, "b:6658fa3b", null, void 0, void 0, void 0, true);
+	componentSlot(__s, 3, _b.j, Icon, {
+		"name": "xplat-chevron-down",
+		"size": 16
+	}, void 0, void 0, 2, void 0, void 0, "c:a607e8c7");
+	ifBlock(__s, 4, _b.a, selected, __then$20, null, _b.k);
+	componentSlotVoid(__s, 5, _b.r, Popover, {
+		"anchor": anchor,
+		"open": open,
+		"placement": "bottom",
+		"onDismiss": () => setOpen(false),
+		"className": "vx-tabmenu-pop",
+		"children": markChildrenBlock(__children$23, __childrenBody$2)
+	}, _b.s, void 0, void 0, void 0, void 0, "c:a73fbc1e");
+}, (__wp) => {
+	warmChild(Icon, {
+		name: "xplat-chevron-down",
+		size: 16
+	});
+});
+//#endregion
+export { Tab, TabList, TabListContext, TabMenu, useTabListContext };