@octane-xplat/ui 0.9.0 → 0.10.0

package/dist/web/SideNav.web.tsrx.js

@@ -0,0 +1,1158 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { Text } from "./Text.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { NavHeadingCloseProvider, SideNavCollapseContext, SideNavCollapseProvider, SideNavRenderContext, useSideNavCollapse, useSideNavRenderMode } from "./nav-contexts.js";
+import { MobileNav } from "./MobileNav.web.tsrx.js";
+import { ResizeHandle } from "./ResizeHandle.web.tsrx.js";
+import { regionConfigFrom } from "./resize-state.js";
+import { useResizable } from "./useResizable.web.tsrx.js";
+import { Fragment, __s, bag10, bag11, bag12, bag14, bag15, bag3, bag4, bag5, bag6, bag7, bag9, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, drainFrag, evt1, evt1u, hookSlots, ifBlock, markChildrenBlock, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, snapshotSpread, template, useContext, useRef, useState, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, createElementFromConfig, deferRecord, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish0, hookMemoPublish1, hookMemoPublish3, isRenderCall, replaceRef, setAriaAttributeIfChanged, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/SideNav.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<span></span>");
+var _t$1 = /* @__PURE__ */ template("<div><!><div class=\"vx-sidenav-topbar-icons\"></div></div>");
+var _t$2 = /* @__PURE__ */ template("<!><!><!>", 0, 1);
+var _t$3 = /* @__PURE__ */ template("<div class=\"vx-sidenav-topcontent\"></div>");
+var _t$4 = /* @__PURE__ */ template("<div><!><!></div>");
+var _t$5 = /* @__PURE__ */ template("<div><!><div><!><!></div></div>");
+var _t$6 = /* @__PURE__ */ template("<div class=\"vx-sidenav-shell\"><nav><!><div class=\"vx-sidenav-scrollable\"></div><!></nav><!></div>");
+var _t$7 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$8 = /* @__PURE__ */ template("<section><div><div class=\"vx-sidenav-section-title-group\"><!><!></div><!></div><div class=\"vx-sidenav-section-items\"></div></section>");
+var _t$9 = /* @__PURE__ */ template("<span class=\"vx-sidenav-heading-icon\"></span>");
+var _t$10 = /* @__PURE__ */ template("<button type=\"button\" class=\"vx-sidenav-heading-trigger\" aria-haspopup=\"menu\"><!><span class=\"vx-sidenav-heading-text\"><!><!><!></span><!></button>");
+var _t$11 = /* @__PURE__ */ template("<!><span class=\"vx-sidenav-heading-text\"><!><!><!></span>", 0, 1);
+var _t$12 = /* @__PURE__ */ template("<button type=\"button\" class=\"vx-sidenav-heading-menubtn\" aria-haspopup=\"menu\" aria-label=\"Open heading menu\"></button>");
+var _t$13 = /* @__PURE__ */ template("<div><!><!><!><!></div>");
+var _t$14 = /* @__PURE__ */ template("<button></button>");
+var _t$15 = /* @__PURE__ */ template("<button type=\"button\" class=\"vx-sidenav-item-toggle\"></button>");
+var _t$16 = /* @__PURE__ */ template("<span class=\"vx-sidenav-item-actions\"></span>");
+var _t$17 = /* @__PURE__ */ template("<div class=\"vx-sidenav-item-children\"></div>");
+var _t$18 = /* @__PURE__ */ template("<div class=\"vx-sidenav-flyout-list\" role=\"menu\"></div>");
+var _t$19 = /* @__PURE__ */ template("<div><div class=\"vx-sidenav-item-row\"><!><!><!></div><!><!></div>");
+var _t$20 = /* @__PURE__ */ template("<button type=\"button\"></button>");
+var _frag$0 = /* @__PURE__ */ __s(function _frag$0(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		_b = bag5(__s, _root, void 0, _m1, void 0, null, void 0);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", props.h0, "b:aee05bf0", "class");
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "aria-label", props.h1, "b:7f1917ca", setAriaAttribute);
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.b, props.h2, "b:68e853d7", null, void 0, void 0, void 0, true);
+});
+function HeadingRow$record(props) {
+	return createElementFromConfig("c:a88e2a93", _frag$0, {
+		h0: props.className,
+		h1: props.ariaLabel,
+		h2: props.children
+	});
+}
+var _hs$ = /* @__PURE__ */ hookSlots(46);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _rm$4 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$1(__props, __s, __extra) {
+	const props = __extra[4];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m8;
+		const _root = clone(_t$1);
+		queueRefAttach(__s, _m1 = (el) => applyEscapeProps(el, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		const _el0 = child(_root);
+		_m5 = _el0;
+		_m8 = sibling(_el0, 1);
+		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, null, void 0, _m8, null, void 0);
+		__s.refFields = _rm$4;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:9d5ff90d", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-sidenav",
+		"vx-sidenav--topbar",
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.l = bindSignalChild(__s, _b.l, 1, _b.a, props.header, "b:42c68b46", _b.f, true, void 0, void 0, void 0);
+	_b.m = bindSignalChild(__s, _b.m, 2, _b.i, props.footerIcons, "b:00fa21c2", null, void 0, void 0, void 0, true);
+}
+var __childrenBody = {};
+function __then$6(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[4];
+	function __children$8(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m4, _m7;
+			const _root = clone(_t$2);
+			_m0 = __block.parentNode;
+			const _el0 = child(_root);
+			_m1 = _el0;
+			const _el1 = sibling(_el0, 1);
+			_m4 = _el1;
+			_m7 = sibling(_el1, 1);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag10(__s, null, _m0, _m1, null, void 0, _m4, null, void 0, _m7, null, void 0);
+		}
+		_b.k = bindSignalChild(__s, _b.k, 1, _b.a, props.topContent, "b:bcba16b3", _b.b, true, void 0, void 0, void 0);
+		_b.l = bindSignalChild(__s, _b.l, 2, _b.a, props.children, "b:831be8c1", _b.e, true, void 0, void 0, void 0);
+		_b.m = bindSignalChild(__s, _b.m, 3, _b.a, props.footer != null || props.footerIcons != null ? createScopedElement("div", { className: "vx-sidenav-drawerfooter" }, () => positionalChildren([props.footer, props.footerIcons != null ? createScopedElement("div", { className: "vx-sidenav-drawericons" }, () => props.footerIcons) : null])) : null, "b:248ff058", _b.h, true, void 0, void 0, void 0);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, MobileNav, {
+		"header": props.header,
+		"id": props.id,
+		"className": [
+			"vx-sidenav",
+			"vx-sidenav--drawer",
+			props.className
+		],
+		"style": props.style,
+		"children": markChildrenBlock(__children$8, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:160b8406");
+}
+function __then$13(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[4];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m4, _m7;
+		const _root = clone(_t$2);
+		_m0 = __block.parentNode;
+		const _el0 = child(_root);
+		_m1 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m4 = _el1;
+		_m7 = sibling(_el1, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag10(__s, null, _m0, _m1, null, void 0, _m4, null, void 0, _m7, null, void 0);
+	}
+	_b.k = bindSignalChild(__s, _b.k, 1, _b.a, props.topContent, "b:70460756", _b.b, true, void 0, void 0, void 0);
+	_b.l = bindSignalChild(__s, _b.l, 2, _b.a, props.children, "b:caa77c76", _b.e, true, void 0, void 0, void 0);
+	_b.m = bindSignalChild(__s, _b.m, 3, _b.a, props.footer != null || props.footerIcons != null ? createScopedElement("div", { className: "vx-sidenav-drawerfooter" }, () => positionalChildren([props.footer, props.footerIcons != null ? createScopedElement("div", { className: "vx-sidenav-drawericons" }, () => props.footerIcons) : null])) : null, "b:5e5a877d", _b.h, true, void 0, void 0, void 0);
+}
+function __then$22(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$3);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.topContent, "b:d1e215e9", null, void 0, void 0, void 0, true);
+}
+function __then$20(__props, __s, __extra) {
+	const collapsed = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m2, _m3;
+		const _root = clone(_t$4);
+		_m1 = _root;
+		_m2 = sibling(child(_root), 1);
+		_m3 = child(_root);
+		_b = bag6(__s, _root, void 0, _m1, _m2, _m3, null, void 0);
+	}
+	_b.a = updateFreshClassName(["vx-sidenav-stickytop", collapsed && "vx-sidenav-stickytop--collapsed"], _b.a, _b.b);
+	_b.g = bindSignalChild(__s, _b.g, 1, _b.b, props.header, "b:c234aa30", _b.d, true, void 0, void 0, void 0);
+	{
+		const __ifCondition = props.topContent != null;
+		ifBlock(__s, 2, _b.b, __ifCondition, __then$22, null, _b.c, __ifCondition ? [props] : void 0);
+	}
+}
+function __then$29(__props, __s, __extra) {
+	const __block = __s.block;
+	componentSlotVoid(__s, 0, __block.parentNode, SideNavCollapseButton, {}, __block.endMarker, void 0, void 0, void 0, void 0, "c:3eefb5f4");
+}
+function __then$27(__props, __s, __extra) {
+	const cfg = __extra[0];
+	const collapsed = __extra[1];
+	const isCollapsible = __extra[2];
+	const props = __extra[3];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m3, _m4, _m5, _m8;
+		const _root = clone(_t$5);
+		_m1 = _root;
+		const _el0 = sibling(child(_root), 1);
+		_m3 = _el0;
+		const _el1 = child(_el0);
+		_m4 = _el1;
+		_m5 = child(_root);
+		_m8 = sibling(_el1, 1);
+		_b = bag11(__s, _root, void 0, _m1, void 0, _m3, _m4, _m5, null, void 0, _m8, null, void 0);
+	}
+	_b.a = updateFreshClassName(["vx-sidenav-stickybottom", collapsed && "vx-sidenav-stickybottom--collapsed"], _b.a, _b.b);
+	_b.c = updateFreshClassName(["vx-sidenav-footerrow", collapsed && "vx-sidenav-footerrow--collapsed"], _b.c, _b.d);
+	_b.l = bindSignalChild(__s, _b.l, 1, _b.b, props.footer, "b:906165cb", _b.f, true, void 0, void 0, void 0);
+	ifBlock(__s, 2, _b.d, isCollapsible && cfg?.hasButton !== false, __then$29, null, _b.e);
+	_b.m = bindSignalChild(__s, _b.m, 3, _b.d, props.footerIcons, "b:ad80e152", _b.i, true, void 0, void 0, void 0);
+}
+function __then$34(__props, __s, __extra) {
+	const __block = __s.block;
+	const resizableHook = __extra[0];
+	componentSlotVoid(__s, 0, __block.parentNode, ResizeHandle, {
+		"direction": "horizontal",
+		"position": "overlay",
+		"pillPlacement": "end",
+		"label": "Resize sidebar",
+		"resizable": resizableHook.props
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:5616681d");
+}
+var _rm$37 = [
+	"r",
+	"d",
+	"c"
+];
+var __childrenBody$ = {};
+function __else$17(__props, __s, __extra) {
+	const __block = __s.block;
+	const cfg = __extra[0];
+	const collapseState = __extra[1];
+	const collapsed = __extra[2];
+	const isCollapsible = __extra[3];
+	const props = __extra[4];
+	const resizableHook = __extra[5];
+	const resizeConfig = __extra[6];
+	const showResizeHandle = __extra[7];
+	function __children$19(__props, __s, __extra) {
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m1, _m2, _m3, _m8, _m9, _m10, _m11;
+			const _root = clone(_t$6);
+			_m1 = _root;
+			const _el0 = child(_root);
+			queueRefAttach(__s, _m3 = (el) => applyEscapeProps(el, props), _m2 = _el0);
+			(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.d, _b.c));
+			const _el1 = child(_el0);
+			_m8 = _el1;
+			_m9 = sibling(_el1, 2);
+			_m10 = sibling(_el0, 1);
+			_m11 = sibling(_el1, 1);
+			_b = bag14(__s, _root, void 0, _m1, _m2, _m3, void 0, void 0, void 0, void 0, _m8, _m9, _m10, _m11, null, void 0);
+			__s.refFields = _rm$37;
+		} else {
+			const _r = (el) => applyEscapeProps(el, props);
+			if (_r !== _b.d) _b.d = replaceRef(__s, _b.d, _r, _b.c);
+		}
+		{
+			const _v = resizeConfig ? { width: collapsed ? COLLAPSED_RAIL_WIDTH : resizableHook.size } : collapsed ? { width: COLLAPSED_RAIL_WIDTH } : void 0;
+			if (_b.a !== _v) {
+				setStyle(_b.b, _v, _b.a);
+				_b.a = _v;
+			}
+		}
+		_b.e = bindSignalAttribute(__s, _b.e, _b.c, "id", props.id, "b:47657802", setPlainAttribute);
+		_b.f = updateFreshClassName([
+			"vx-sidenav",
+			collapsed && "vx-sidenav--collapsed",
+			props.className
+		], _b.f, _b.c);
+		{
+			const _v = props.style;
+			if (_b.g !== _v) {
+				setStyle(_b.c, _v, _b.g);
+				_b.g = _v;
+			}
+		}
+		_b.h = bindSignalAttribute(__s, _b.h, _b.c, "aria-label", props.label ?? "Side navigation", "b:486d3da4", setAriaAttribute);
+		{
+			const __ifCondition$ = props.header != null || props.topContent != null;
+			ifBlock(__s, 1, _b.c, __ifCondition$, __then$20, null, _b.i, __ifCondition$ ? [collapsed, props] : void 0);
+		}
+		_b.o = bindSignalChild(__s, _b.o, 2, _b.l, props.children, "b:2ac58260", null, void 0, void 0, void 0, true);
+		{
+			const __ifCondition$2 = props.footer != null || props.footerIcons != null || isCollapsible && cfg?.hasButton !== false;
+			ifBlock(__s, 3, _b.c, __ifCondition$2, __then$27, null, _b.j, __ifCondition$2 ? [
+				cfg,
+				collapsed,
+				isCollapsible,
+				props
+			] : void 0);
+		}
+		{
+			const __ifCondition$3 = showResizeHandle;
+			ifBlock(__s, 4, _b.b, __ifCondition$3, __then$34, null, _b.k, __ifCondition$3 ? [resizableHook] : void 0);
+		}
+	}
+	componentSlot(__s, 0, __block.parentNode, SideNavCollapseProvider, {
+		"value": isCollapsible ? collapseState : null,
+		"children": markChildrenBlock(__children$19, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:d2cfc5e5");
+}
+function __else$12(__props, __s, __extra) {
+	const __block = __s.block;
+	const cfg = __extra[0];
+	const collapseState = __extra[1];
+	const collapsed = __extra[2];
+	const isCollapsible = __extra[3];
+	const props = __extra[4];
+	const renderMode = __extra[5];
+	const resizableHook = __extra[6];
+	const resizeConfig = __extra[7];
+	const showResizeHandle = __extra[8];
+	ifBlock(__s, 0, __block.parentNode, renderMode === "drawer-content", __then$13, __else$17, __block.endMarker, [
+		cfg,
+		collapseState,
+		collapsed,
+		isCollapsible,
+		props,
+		resizableHook,
+		resizeConfig,
+		showResizeHandle
+	]);
+}
+function __else$5(__props, __s, __extra) {
+	const __block = __s.block;
+	__extra[0];
+	__extra[1];
+	__extra[2];
+	__extra[3];
+	__extra[4];
+	const renderMode = __extra[5];
+	__extra[6];
+	__extra[7];
+	__extra[8];
+	ifBlock(__s, 0, __block.parentNode, renderMode === "drawer", __then$6, __else$12, __block.endMarker, __extra);
+}
+var __childrenBody$2 = {};
+var __childrenBody$3 = {};
+function __then$44(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$46(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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, props.subtitle, "b:15c31fb4", _b.b, true, void 0, true, void 0);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Text, {
+		"className": "vx-sidenav-section-subtitle",
+		"children": markChildrenBlock(__children$46, __childrenBody$3)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:9be14212");
+}
+function __then$52(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$9);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, navIcon(props.icon, 20), "b:588e598e", null, void 0, void 0, void 0, true);
+}
+var __childrenBody$4 = {};
+function __then$55(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$57(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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, props.superheading, "b:67779254", _b.b, true, void 0, true, void 0);
+	}
+	componentSlot(__s, 0, __block.parentNode, HeadingRow, {
+		"as": props.as,
+		"href": props.superheadingHref,
+		"className": "vx-sidenav-heading-super",
+		"children": markChildrenBlock(__children$57, __childrenBody$4)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:6daf4e1d");
+}
+var __childrenBody$5 = {};
+function __then$61(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$63(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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, props.subheading, "b:586e13dc", _b.b, true, void 0, true, void 0);
+	}
+	componentSlot(__s, 0, __block.parentNode, HeadingRow, {
+		"as": props.as,
+		"href": props.subheadingHref,
+		"className": "vx-sidenav-heading-sub",
+		"children": markChildrenBlock(__children$63, __childrenBody$5)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:ce9d2074");
+}
+var _rm$67 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$51(__props, __s, __extra) {
+	const anchor = __extra[0];
+	const hasMenu = __extra[1];
+	const headingEl = __extra[2];
+	const menuOpen = __extra[3];
+	const props = __extra[4];
+	const setMenuOpen = __extra[5];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m3, _m4, _m5, _m6, _m7, _m8, _m11;
+		const _root = clone(_t$10);
+		queueRefAttach(__s, _m1 = (el) => {
+			anchor.current = el;
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m3 = evt1(_root, "$$click", setMenuOpen, !menuOpen);
+		const _el0 = child(_root);
+		_m4 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m5 = _el1;
+		const _el2 = child(_el1);
+		_m6 = _el2;
+		_m7 = sibling(_el2, 2);
+		_m8 = sibling(_el2, 1);
+		_m11 = sibling(_el1, 1);
+		_b = bag12(__s, _root, _m0, _m1, void 0, _m3, _m4, _m5, _m6, _m7, _m8, null, void 0, _m11);
+		__s.refFields = _rm$67;
+	} else {
+		{
+			const _r = (el) => {
+				anchor.current = el;
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		evt1u(_b.d, setMenuOpen, !menuOpen);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "aria-expanded", hasMenu ? menuOpen : void 0, "b:8aa13b1e", setAriaAttribute);
+	{
+		const __ifCondition$5 = props.icon != null;
+		ifBlock(__s, 1, _b.a, __ifCondition$5, __then$52, null, _b.e, __ifCondition$5 ? [props] : void 0);
+	}
+	{
+		const __ifCondition$6 = props.superheading;
+		ifBlock(__s, 2, _b.f, __ifCondition$6, __then$55, null, _b.g, __ifCondition$6 ? [props] : void 0);
+	}
+	_b.m = bindSignalChild(__s, _b.m, 3, _b.f, headingEl, "b:23b0658d", _b.i, true, void 0, void 0, void 0);
+	{
+		const __ifCondition$7 = props.subheading;
+		ifBlock(__s, 4, _b.f, __ifCondition$7, __then$61, null, _b.h, __ifCondition$7 ? [props] : void 0);
+	}
+	componentSlot(__s, 5, _b.a, Icon, {
+		"name": "xplat-chevron-down",
+		"size": 16
+	}, _b.l, void 0, 2, void 0, void 0, "c:9a96cb8c");
+}
+var __childrenBody$6 = {};
+function __then$70(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$72(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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, props.superheading, "b:c3e76c0b", _b.b, true, void 0, true, void 0);
+	}
+	componentSlot(__s, 0, __block.parentNode, HeadingRow, {
+		"as": props.as,
+		"href": props.superheadingHref,
+		"className": "vx-sidenav-heading-super",
+		"children": markChildrenBlock(__children$72, __childrenBody$6)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:c93b596d");
+}
+var __childrenBody$7 = {};
+function __then$76(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$78(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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, props.subheading, "b:2fd856a0", _b.b, true, void 0, true, void 0);
+	}
+	componentSlot(__s, 0, __block.parentNode, HeadingRow, {
+		"as": props.as,
+		"href": props.subheadingHref,
+		"className": "vx-sidenav-heading-sub",
+		"children": markChildrenBlock(__children$78, __childrenBody$7)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:1a32ef47");
+}
+function __else$68(__props, __s, __extra) {
+	const __block = __s.block;
+	const headingEl = __extra[2];
+	const props = __extra[4];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m7;
+		const _root = clone(_t$11);
+		const _el0 = sibling(child(_root), 1);
+		_m0 = _el0;
+		const _el1 = child(_el0);
+		_m1 = _el1;
+		_m2 = sibling(_el1, 2);
+		_m3 = __block.parentNode;
+		_m4 = child(_root);
+		_m7 = sibling(_el1, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag10(__s, null, _m0, _m1, _m2, _m3, _m4, null, void 0, _m7, null, void 0);
+	}
+	_b.k = bindSignalChild(__s, _b.k, 1, _b.d, props.icon != null ? createScopedElement("span", { className: "vx-sidenav-heading-icon" }, () => navIcon(props.icon, 20)) : null, "b:8e2d74f9", _b.e, true, void 0, void 0, void 0);
+	{
+		const __ifCondition$8 = props.superheading;
+		ifBlock(__s, 2, _b.a, __ifCondition$8, __then$70, null, _b.b, __ifCondition$8 ? [props] : void 0);
+	}
+	_b.l = bindSignalChild(__s, _b.l, 3, _b.a, headingEl, "b:5224e66f", _b.h, true, void 0, void 0, void 0);
+	{
+		const __ifCondition$9 = props.subheading;
+		ifBlock(__s, 4, _b.a, __ifCondition$9, __then$76, null, _b.c, __ifCondition$9 ? [props] : void 0);
+	}
+}
+var _rm$84 = [
+	"r",
+	"b",
+	"a"
+];
+function __then$82(__props, __s, __extra) {
+	const anchor = __extra[0];
+	const menuOpen = __extra[1];
+	const setMenuOpen = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m3;
+		const _root = clone(_t$12);
+		queueRefAttach(__s, _m1 = (el) => {
+			anchor.current = el;
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		_m3 = evt1(_root, "$$click", setMenuOpen, !menuOpen);
+		_b = bag4(__s, _root, _m0, _m1, void 0, _m3);
+		__s.refFields = _rm$84;
+	} else {
+		{
+			const _r = (el) => {
+				anchor.current = el;
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		evt1u(_b.d, setMenuOpen, !menuOpen);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "aria-expanded", menuOpen, "b:244495d8", setAriaAttribute);
+	componentSlot(__s, 1, _b.a, Icon, {
+		"name": "xplat-chevron-down",
+		"size": 16
+	}, void 0, void 0, 2, void 0, void 0, "c:5424ba4f");
+}
+var __childrenBody$8 = {};
+var __childrenBody$9 = {};
+var _rm$92 = [
+	"r",
+	"b",
+	"a"
+];
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var __childrenBody$10 = {};
+function __then$93(__props, __s, __extra) {
+	const __block = __s.block;
+	const LinkEl = __extra[0];
+	const content = __extra[1];
+	const props = __extra[3];
+	const shared = __extra[4];
+	function __children$95(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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:e664bf5d", _b.b, true, void 0, true, void 0);
+	}
+	componentSlot(__s, 0, __block.parentNode, LinkEl, {
+		...shared,
+		"href": props.href,
+		"children": markChildrenBlock(__children$95, __childrenBody$10)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fec864d0");
+}
+var _rm$99 = [
+	"s",
+	"e",
+	"d"
+];
+function __else$97(__props, __s, __extra) {
+	const content = __extra[1];
+	const isDisabled = __extra[2];
+	const shared = __extra[4];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4;
+		const _root = clone(_t$14);
+		_m0 = snapshotSpread(shared);
+		_m1 = "button";
+		_m2 = isDisabled;
+		_m3 = _root;
+		_m4 = bindSignalHostPropSources(__s, void 0, _root, [
+			[true, _m0],
+			[
+				false,
+				"type",
+				_m1
+			],
+			[
+				false,
+				"disabled",
+				_m2
+			]
+		], "b:1db39fcb", true);
+		_b = bag7(__s, _root, _m0, _m1, _m2, _m3, _m4, null, void 0);
+		__s.refFields = _rm$99;
+	} else {
+		_b.a = snapshotSpread(shared);
+		{
+			const _v = "button";
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = isDisabled;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.e = bindSignalHostPropSources(__s, _b.e, _b.d, [
+			[true, _b.a],
+			[
+				false,
+				"type",
+				_b.b
+			],
+			[
+				false,
+				"disabled",
+				_b.c
+			]
+		], "b:1db39fcb", true);
+	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.d, content, "b:073ef0c4", null, void 0, void 0, void 0, true);
+}
+function __then$101(__props, __s, __extra) {
+	const childrenCollapsed = __extra[0];
+	const toggleChildren = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1;
+		const _root = clone(_t$15);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", toggleChildren);
+		_b = bag3(__s, _root, void 0, _m1, void 0);
+	} else setEventHandler(_b.b, "$$click", toggleChildren);
+	_b.a = setAriaAttributeIfChanged(childrenCollapsed ? "Expand" : "Collapse", _b.a, _b.b, "aria-label");
+	_b.c = setAriaAttributeIfChanged(!childrenCollapsed, _b.c, _b.b, "aria-expanded");
+	componentSlot(__s, 1, _b.b, Icon, {
+		"name": childrenCollapsed ? "xplat-chevron-right" : "xplat-chevron-down",
+		"size": 16
+	}, void 0, void 0, 2, void 0, void 0, "c:b45f0142");
+}
+function __then$104(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$16);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.actions, "b:f74c05cb", null, void 0, void 0, void 0, true);
+}
+function __then$107(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$17);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.children, "b:aaccc003", null, void 0, void 0, void 0, true);
+}
+var __childrenBody$11 = {};
+function __then$110(__props, __s, __extra) {
+	const __block = __s.block;
+	const anchor = __extra[0];
+	const flyoutOpen = __extra[1];
+	const props = __extra[2];
+	const setFlyoutOpen = __extra[3];
+	function __children$112(__props, __s, __extra) {
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0;
+			const _root = clone(_t$18);
+			_m0 = _root;
+			_b = bag3(__s, _root, _m0, null, void 0);
+		}
+		_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.children, "b:7e0bc9b1", null, void 0, void 0, void 0, true);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Popover, {
+		"anchor": anchor,
+		"open": flyoutOpen,
+		"placement": "right",
+		"onDismiss": () => setFlyoutOpen(false),
+		"className": "vx-sidenav-flyout",
+		"children": markChildrenBlock(__children$112, __childrenBody$11)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:c8c5af5c");
+}
+var _rm$115 = [
+	"r",
+	"f",
+	"e"
+];
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+function __then$116(__props, __s, __extra) {}
+var _rm$119 = [
+	"r",
+	"b",
+	"a"
+];
+function __else$117(__props, __s, __extra) {
+	const isCollapsed = __extra[0];
+	const props = __extra[1];
+	const toggle = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$20);
+		queueRefAttach(__s, _m1 = (el) => applyEscapeProps(el, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$click", toggle);
+		_b = bag9(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, null, void 0);
+		__s.refFields = _rm$119;
+	} else {
+		{
+			const _r = (el) => applyEscapeProps(el, props);
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$click", toggle);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:9dcdfe62", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-sidenav-collapsebtn",
+		props.label == null && "vx-sidenav-collapsebtn--icon",
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.f = setAriaAttributeIfChanged(!isCollapsed, _b.f, _b.a, "aria-expanded");
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "aria-label", props.label ?? (isCollapsed ? "Expand" : "Collapse"), "b:24f2ebb6", setAriaAttribute);
+	_b.j = bindSignalChild(__s, _b.j, 1, _b.a, props.children ?? createScopedElement(Fragment, {}, () => positionalChildren([createScopedValue(() => createElementFromConfig("c:29d34d90", Icon, {
+		name: isCollapsed ? "xplat-chevron-right" : "xplat-chevron-left",
+		size: 16
+	})), props.label != null ? createScopedElement("span", { className: "vx-sidenav-collapsebtn-label" }, () => props.label) : null])), "b:d491d0ae", null, void 0, void 0, void 0, true);
+}
+var COLLAPSED_RAIL_WIDTH = 56;
+var ITEM_HEIGHT = {
+	sm: 28,
+	md: 32,
+	lg: 36
+};
+function navIcon(icon, size = 16) {
+	return typeof icon === "string" ? createScopedValue(() => createElementFromConfig("c:1488dfc1", Icon, {
+		name: icon,
+		size
+	})) : icon;
+}
+function HeadingRow(props, __renderScope = void 0) {
+	const LinkEl = props.as ?? "a";
+	if (props.href != null) return createScopedValue(() => createScopedElement(LinkEl, {
+		className: props.className,
+		href: props.href,
+		"aria-label": props.ariaLabel,
+		onClick: props.onClick
+	}, () => props.children, "c:9d0d7afe"));
+	return isRenderCall(__renderScope) ? HeadingRow$record(props) : deferRecord(HeadingRow$record, props);
+}
+var SideNav = function SideNav(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 1);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(10);
+	let __hkd0, __hkd1, __hkd2, __hkd0$, __hkd1$, __hkd2$;
+	const renderMode = withSlot(_h$0, useSideNavRenderMode);
+	const cfg = props.collapsible === true ? {} : props.collapsible === false || props.collapsible == null ? void 0 : props.collapsible;
+	const isCollapsible = props.collapsible != null && props.collapsible !== false;
+	const controlled = cfg?.isCollapsed !== void 0;
+	const [uncontrolled, setUncontrolled] = useState(cfg?.defaultIsCollapsed ?? false, _hs$ + 1);
+	const collapsed = isCollapsible ? controlled ? cfg.isCollapsed ?? false : uncontrolled : false;
+	const toggle = (__hkd0 = collapsed, __hkd1 = controlled, __hkd2 = cfg, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) ? hookMemoPublish3(__hk, 0, () => {
+		const next = !collapsed;
+		if (!controlled) setUncontrolled(next);
+		cfg?.onCollapsedChange?.(next);
+	}, __hkd0, __hkd1, __hkd2) : __hk[4]);
+	const collapseState = (__hkd0$ = collapsed, __hkd1$ = toggle, __hkd2$ = isCollapsible, __hk[5] !== true || !hookMemoEqual(__hk[6], __hkd0$) || !hookMemoEqual(__hk[7], __hkd1$) || !hookMemoEqual(__hk[8], __hkd2$) ? hookMemoPublish3(__hk, 5, {
+		isCollapsed: collapsed,
+		toggle,
+		isCollapsible
+	}, __hkd0$, __hkd1$, __hkd2$) : __hk[9]);
+	if (props.handleRef) props.handleRef.current = { getCollapseState: () => collapseState };
+	const resizeConfig = regionConfigFrom(props.resizable === false ? void 0 : props.resizable);
+	const resizableHook = withSlot(_h$2, useResizable, resizeConfig ?? { defaultSize: 0 });
+	const showResizeHandle = resizeConfig != null && !collapsed;
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	ifBlock(__s, 0, __block.parentNode, renderMode === "topbar", __then$1, __else$5, __block.endMarker, [
+		cfg,
+		collapseState,
+		collapsed,
+		isCollapsible,
+		props,
+		renderMode,
+		resizableHook,
+		resizeConfig,
+		showResizeHandle
+	]);
+};
+var SideNavSection = /* @__PURE__ */ __s(function SideNavSection(props, __s, __extra) {
+	__s.block;
+	function __children$42(__props, __s, __extra) {
+		const __block = __s.block;
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1;
+			const _root = clone(_t$7);
+			_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, props.title, "b:6bda98b9", _b.b, true, void 0, true, void 0);
+	}
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m5, _m6, _m7, _m8, _m9, _m12;
+		const _root = clone(_t$8);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m5 = _el0;
+		const _el1 = child(_el0);
+		_m6 = _el1;
+		_m7 = sibling(child(_el1), 1);
+		_m8 = child(_el1);
+		_m9 = sibling(_el1, 1);
+		_m12 = sibling(_el0, 1);
+		_b = bag15(__s, _root, void 0, _m1, void 0, void 0, void 0, _m5, _m6, _m7, _m8, _m9, null, void 0, _m12, null, void 0);
+	}
+	_b.a = updateFreshClassName(["vx-sidenav-section", props.className], _b.a, _b.b);
+	{
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
+		}
+	}
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "id", props.id, "b:ef118ef6", setPlainAttribute);
+	_b.e = updateFreshClassName(["vx-sidenav-section-head", props.isHeaderHidden && "vx-visually-hidden"], _b.e, _b.f);
+	componentSlotVoid(__s, 1, _b.g, Text, {
+		"className": "vx-sidenav-section-title",
+		"children": markChildrenBlock(__children$42, __childrenBody$2)
+	}, _b.i, void 0, void 0, void 0, void 0, "c:fe9de76d");
+	{
+		const __ifCondition$4 = props.subtitle != null;
+		ifBlock(__s, 2, _b.g, __ifCondition$4, __then$44, null, _b.h, __ifCondition$4 ? [props] : void 0);
+	}
+	_b.p = bindSignalChild(__s, _b.p, 3, _b.f, props.endContent, "b:5b9e1dff", _b.j, true, void 0, void 0, void 0);
+	_b.q = bindSignalChild(__s, _b.q, 4, _b.m, props.children, "b:5f422d7e", null, void 0, void 0, void 0, true);
+});
+var SideNavHeading = /* @__PURE__ */ __s(function SideNavHeading(props, __s, __extra) {
+	__s.block;
+	const __memoRegion$ = compilerMemoRegion(__s, _hs$ + 19);
+	let __hk$ = __memoRegion$.hooks;
+	if (__hk$ === void 0) __memoRegion$.hooks = __hk$ = hookMemoCreate(5);
+	let __hkd0$2;
+	const anchor = useRef(null, _hs$ + 3);
+	const [menuOpen, setMenuOpen] = useState(false, _hs$ + 4);
+	const collapsed = useContext(SideNavCollapseContext)?.isCollapsed ?? false;
+	const hasLinks = !!(props.headingHref || props.superheadingHref || props.subheadingHref);
+	const hasMenu = props.menu != null;
+	const headerIsTrigger = hasMenu && !hasLinks;
+	const closeMenu = __hk$[0] !== true ? hookMemoPublish0(__hk$, 0, () => setMenuOpen(false)) : __hk$[1];
+	const closeCtx = (__hkd0$2 = closeMenu, __hk$[2] !== true || !hookMemoEqual(__hk$[3], __hkd0$2) ? hookMemoPublish1(__hk$, 2, { closeMenu }, __hkd0$2) : __hk$[4]);
+	const headingEl = createScopedValue(() => createScopedElement(HeadingRow, {
+		as: props.as,
+		href: props.headingHref,
+		className: "vx-sidenav-heading-title"
+	}, () => props.heading, "c:90e992c9"));
+	function __children$88(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$90(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1;
+				const _root = clone(_t$7);
+				_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, props.menu, "b:6015181e", _b.b, true, void 0, true, void 0);
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, Popover, {
+			"anchor": anchor,
+			"open": menuOpen,
+			"placement": "bottom",
+			"onDismiss": () => setMenuOpen(false),
+			"className": "vx-headingmenu-pop",
+			"children": markChildrenBlock(__children$90, __childrenBody$8)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:d1f91556");
+	}
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m5, _m6, _m7, _m10;
+		const _root = clone(_t$13);
+		queueRefAttach(__s, _m1 = (el) => applyEscapeProps(el, props), _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		const _el0 = child(_root);
+		_m5 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m6 = _el1;
+		const _el2 = sibling(_el1, 1);
+		_m7 = _el2;
+		_m10 = sibling(_el2, 1);
+		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, _m7, null, void 0, _m10);
+		__s.refFields = _rm$92;
+	} else {
+		const _r = (el) => applyEscapeProps(el, props);
+		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:fb49ad31", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-sidenav-heading",
+		headerIsTrigger && "vx-sidenav-heading--button",
+		collapsed && "vx-sidenav-heading--collapsed",
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	ifBlock(__s, 1, _b.a, headerIsTrigger, __then$51, __else$68, _b.f, [
+		anchor,
+		hasMenu,
+		headingEl,
+		menuOpen,
+		props,
+		setMenuOpen
+	]);
+	{
+		const __ifCondition$10 = hasMenu && !headerIsTrigger;
+		ifBlock(__s, 2, _b.a, __ifCondition$10, __then$82, null, _b.g, __ifCondition$10 ? [
+			anchor,
+			menuOpen,
+			setMenuOpen
+		] : void 0);
+	}
+	_b.l = bindSignalChild(__s, _b.l, 3, _b.a, props.headerEndContent, "b:81c7ce98", _b.h, true, void 0, void 0, void 0);
+	componentSlot(__s, 4, _b.a, NavHeadingCloseProvider, {
+		"value": closeCtx,
+		"children": markChildrenBlock(__children$88, __childrenBody$9)
+	}, _b.k, void 0, void 0, void 0, void 0, "c:2973daed");
+});
+var SideNavItem = /* @__PURE__ */ __s(function SideNavItem(props, __s, __extra) {
+	const renderMode = withSlot(_h$5, useSideNavRenderMode);
+	const railCollapsed = withSlot(_h$6, useSideNavCollapse)?.isCollapsed === true && renderMode === "default";
+	const size = props.size ?? "md";
+	const hasChildren = props.children != null;
+	const itemCfg = props.collapsible === true ? {} : typeof props.collapsible === "object" ? props.collapsible : null;
+	const itemControlled = itemCfg?.isCollapsed !== void 0;
+	const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(itemCfg?.defaultIsCollapsed ?? false, _hs$ + 7);
+	const childrenCollapsed = hasChildren && itemCfg != null ? itemControlled ? itemCfg.isCollapsed : uncontrolledCollapsed : false;
+	const toggleChildren = () => {
+		const next = !childrenCollapsed;
+		if (!itemControlled) setUncontrolledCollapsed(next);
+		itemCfg?.onCollapsedChange?.(next);
+	};
+	const anchor = useRef(null, _hs$ + 8);
+	const [flyoutOpen, setFlyoutOpen] = useState(false, _hs$ + 9);
+	const displayIcon = props.isSelected && props.selectedIcon != null ? props.selectedIcon : props.icon;
+	const isDisabled = props.isDisabled ?? false;
+	const activate = (e) => {
+		if (isDisabled) {
+			e?.preventDefault?.();
+			return;
+		}
+		props.onClick?.();
+	};
+	const pressMain = (e) => {
+		if (railCollapsed && hasChildren) {
+			e?.preventDefault?.();
+			setFlyoutOpen(!flyoutOpen);
+			return;
+		}
+		activate(e);
+	};
+	const mainCls = [
+		"vx-sidenav-item-main",
+		"vx-sidenav-item--" + size,
+		props.isSelected && "vx-sidenav-item--selected",
+		isDisabled && "vx-sidenav-item--disabled",
+		railCollapsed && "vx-sidenav-item--rail"
+	];
+	const content = createScopedElement(Fragment, {}, () => positionalChildren([
+		displayIcon != null ? createScopedElement("span", {
+			className: "vx-sidenav-item-icon",
+			"aria-hidden": "true"
+		}, () => navIcon(displayIcon, size === "lg" ? 18 : size === "sm" ? 14 : 16)) : null,
+		!railCollapsed ? createScopedElement("span", { className: "vx-sidenav-item-label" }, () => props.label) : null,
+		!railCollapsed && props.endContent != null ? createScopedElement("span", { className: "vx-sidenav-item-end" }, () => props.endContent) : null
+	]));
+	const isLink = props.href != null && !isDisabled;
+	const LinkEl = props.as ?? "a";
+	const shared = {
+		className: mainCls,
+		style: { minHeight: ITEM_HEIGHT[size] },
+		"aria-current": props.isSelected ? "page" : void 0,
+		"aria-disabled": isDisabled || void 0,
+		"aria-label": railCollapsed ? props.label : void 0,
+		onClick: pressMain
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m5, _m6, _m7, _m8, _m9, _m10;
+		const _root = clone(_t$19);
+		_m1 = _root;
+		const _el0 = child(_root);
+		queueRefAttach(__s, _m5 = (el) => {
+			if (railCollapsed) anchor.current = el;
+			applyEscapeProps(el, props);
+		}, _m4 = _el0);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.f, _b.e));
+		const _el1 = child(_el0);
+		_m6 = _el1;
+		const _el2 = sibling(_el1, 1);
+		_m7 = _el2;
+		_m8 = sibling(_el2, 1);
+		const _el4 = sibling(_el0, 1);
+		_m9 = _el4;
+		_m10 = sibling(_el4, 1);
+		_b = bag11(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, _m6, _m7, _m8, _m9, _m10);
+		__s.refFields = _rm$115;
+	} else {
+		const _r = (el) => {
+			if (railCollapsed) anchor.current = el;
+			applyEscapeProps(el, props);
+		};
+		if (_r !== _b.f) _b.f = replaceRef(__s, _b.f, _r, _b.e);
+	}
+	_b.a = updateFreshClassName(["vx-sidenav-item", props.className], _b.a, _b.b);
+	{
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
+		}
+	}
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "id", props.id, "b:87396dd2", setPlainAttribute);
+	ifBlock(__s, 1, _b.e, isLink, __then$93, __else$97, _b.g, [
+		LinkEl,
+		content,
+		isDisabled,
+		props,
+		shared
+	]);
+	{
+		const __ifCondition$11 = hasChildren && itemCfg != null && !railCollapsed;
+		ifBlock(__s, 2, _b.e, __ifCondition$11, __then$101, null, _b.h, __ifCondition$11 ? [childrenCollapsed, toggleChildren] : void 0);
+	}
+	{
+		const __ifCondition$12 = !railCollapsed && props.actions != null;
+		ifBlock(__s, 3, _b.e, __ifCondition$12, __then$104, null, _b.i, __ifCondition$12 ? [props] : void 0);
+	}
+	{
+		const __ifCondition$13 = hasChildren && !railCollapsed && !childrenCollapsed;
+		ifBlock(__s, 4, _b.b, __ifCondition$13, __then$107, null, _b.j, __ifCondition$13 ? [props] : void 0);
+	}
+	{
+		const __ifCondition$14 = railCollapsed && hasChildren;
+		ifBlock(__s, 5, _b.b, __ifCondition$14, __then$110, null, _b.k, __ifCondition$14 ? [
+			anchor,
+			flyoutOpen,
+			props,
+			setFlyoutOpen
+		] : void 0);
+	}
+});
+function SideNavCollapseButton(props, __s, __extra) {
+	const __block = __s.block;
+	const ctx = withSlot(_h$10, useSideNavCollapse);
+	const extCfg = props.collapsible;
+	const extHandle = props.handleRef?.current?.getCollapseState();
+	const external = extCfg ? {
+		isCollapsed: extCfg.isCollapsed,
+		toggle: () => extCfg.onCollapsedChange(!extCfg.isCollapsed),
+		isCollapsible: true
+	} : extHandle ?? null;
+	const isCollapsible = ctx?.isCollapsible ?? external?.isCollapsible ?? true;
+	const isCollapsed = ctx?.isCollapsed ?? external?.isCollapsed ?? false;
+	const toggle = ctx?.toggle ?? external?.toggle ?? (() => {});
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	ifBlock(__s, 0, __block.parentNode, !isCollapsible, __then$116, __else$117, __block.endMarker, [
+		isCollapsed,
+		props,
+		toggle
+	]);
+}
+//#endregion
+export { SideNav, SideNavCollapseButton, SideNavCollapseContext, SideNavHeading, SideNavItem, SideNavRenderContext, SideNavSection, useSideNavCollapse, useSideNavRenderMode };