@flux-ui/components 3.0.0-next.31 → 3.0.0-next.32

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Teleport, Transition, TransitionGroup, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, customRef, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, isVNode, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, onUpdated, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRef, unref, useId, useModel, useSlots, useTemplateRef, vModelCheckbox, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Comment, Fragment, Teleport, Transition, TransitionGroup, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, customRef, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, isVNode, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toHandlers, toRef, unref, useId, useModel, useSlots, useTemplateRef, vModelCheckbox, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { DateTime } from "luxon";
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -286,6 +286,124 @@ var useTranslate_default = () => {
 function isVueI18n(obj) {
 	return !!obj && "$t" in obj;
 }
+const FLUX_COLORS = [
+	"gray",
+	"primary",
+	"danger",
+	"info",
+	"success",
+	"warning"
+];
+function flattenVisible(nodes, depth, expanded, parentGuides = []) {
+	return nodes.flatMap((node, index) => {
+		const isLast = index === nodes.length - 1;
+		const flatNode = {
+			...node,
+			depth,
+			isLast,
+			lineGuides: parentGuides
+		};
+		if (node.children?.length && expanded.has(node.id)) {
+			const childGuides = [...parentGuides, !isLast];
+			return [flatNode, ...flattenVisible(node.children, depth + 1, expanded, childGuides)];
+		}
+		return [flatNode];
+	});
+}
+function flattenAll(nodes, depth = 0) {
+	return nodes.flatMap((node) => [{
+		...node,
+		depth,
+		isLast: false,
+		lineGuides: []
+	}, ...node.children ? flattenAll(node.children, depth + 1) : []]);
+}
+function getLevelColor(depth, levelColors) {
+	if (!levelColors || depth >= levelColors.length) return;
+	const color = levelColors[depth];
+	if (FLUX_COLORS.includes(color)) return `var(--${color}-600)`;
+	return color;
+}
+function useTreeView(params) {
+	const highlightedIndex = ref(-1);
+	function toggleExpand(nodeId) {
+		const ids = new Set(unref(params.expandedIds));
+		if (ids.has(nodeId)) ids.delete(nodeId);
+		else ids.add(nodeId);
+		params.expandedIds.value = ids;
+	}
+	function onExpandClick(node, evt) {
+		if (!node.children?.length) return;
+		evt.stopPropagation();
+		toggleExpand(node.id);
+	}
+	function onKeyNavigate(evt, onActivate) {
+		const nodes = unref(params.visibleNodes);
+		const current = unref(highlightedIndex);
+		switch (evt.key) {
+			case "ArrowDown":
+				evt.preventDefault();
+				highlightedIndex.value = current === -1 ? 0 : Math.min(nodes.length - 1, current + 1);
+				return true;
+			case "ArrowUp":
+				evt.preventDefault();
+				highlightedIndex.value = current === -1 ? nodes.length - 1 : Math.max(0, current - 1);
+				return true;
+			case "ArrowRight":
+				evt.preventDefault();
+				if (current >= 0) {
+					const node = nodes[current];
+					if (node.children?.length) {
+						if (!unref(params.expandedIds).has(node.id)) toggleExpand(node.id);
+						else if (current + 1 < nodes.length && nodes[current + 1].depth > node.depth) highlightedIndex.value = current + 1;
+					}
+				}
+				return true;
+			case "ArrowLeft":
+				evt.preventDefault();
+				if (current >= 0) {
+					const node = nodes[current];
+					if (node.children?.length && unref(params.expandedIds).has(node.id)) toggleExpand(node.id);
+					else if (node.depth > 0) {
+						for (let i = current - 1; i >= 0; i--) if (nodes[i].depth === node.depth - 1) {
+							highlightedIndex.value = i;
+							break;
+						}
+					}
+				}
+				return true;
+			case "Enter":
+			case " ":
+				evt.preventDefault();
+				if (current >= 0) onActivate(nodes[current]);
+				return true;
+			default:
+				if (evt.key.length === 1) {
+					const lowerKey = evt.key.toLowerCase();
+					let matchIndex = nodes.findIndex((n, i) => i > current && n.label.toLowerCase().startsWith(lowerKey));
+					if (matchIndex < 0) matchIndex = nodes.findIndex((n) => n.label.toLowerCase().startsWith(lowerKey));
+					if (matchIndex >= 0) {
+						highlightedIndex.value = matchIndex;
+						return true;
+					}
+				}
+				return false;
+		}
+	}
+	watch(highlightedIndex, (index) => {
+		if (index < 0) return;
+		nextTick(() => unref(params.nodeElementRefs)?.[index]?.scrollIntoView({ block: "nearest" }));
+	});
+	watch(params.visibleNodes, (nodes) => {
+		if (unref(highlightedIndex) >= nodes.length) highlightedIndex.value = Math.max(-1, nodes.length - 1);
+	});
+	return {
+		highlightedIndex,
+		toggleExpand,
+		onExpandClick,
+		onKeyNavigate
+	};
+}
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 /** Detect free variable `self`. */
@@ -4227,6 +4345,21 @@ function pe$1(e, t, n) {
 	onScopeDispose(s);
 }
 RegExp(`[a-z]`), RegExp(`[A-Z]`), RegExp(`[0-9]`), RegExp(`[!"#$%&'()*+,-./:;<=>?@[\\\\\\]^_\`{|}~]`);
+function ye$1(e, t, n) {
+	n ??= {};
+	let r, i = watch(e, (e) => {
+		o();
+		let i = G$1(e);
+		i && (r = new ResizeObserver(t), r.observe(i, n));
+	}, { immediate: !0 });
+	function o() {
+		r &&= (r.disconnect(), void 0);
+	}
+	function s() {
+		o(), i();
+	}
+	onScopeDispose(s);
+}
 function f(e, n) {
 	let r = ref(!1), o = ref(e), s = computed(() => {
 		let e = [], t = unref(o).month, n = unref(o).startOf(`month`);
@@ -7013,8 +7146,8 @@ var Icon_module_default = {
 	iconBoxedSuccess: `icon-boxed-success icon-boxed-colored icon-boxed ${_0$16}`,
 	iconBoxedWarning: `icon-boxed-warning icon-boxed-colored icon-boxed ${_0$16}`
 };
-var _hoisted_1$44 = ["viewBox"];
-var _hoisted_2$19 = ["d"];
+var _hoisted_1$46 = ["viewBox"];
+var _hoisted_2$21 = ["d"];
 var FluxIcon_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxIcon",
 	props: {
@@ -7056,15 +7189,15 @@ var FluxIcon_default = /* @__PURE__ */ defineComponent({
 				return openBlock(), createElementBlock("path", {
 					d: path,
 					fill: "currentColor"
-				}, null, 8, _hoisted_2$19);
-			}), 256))], 14, _hoisted_1$44)) : (openBlock(), createElementBlock("i", {
+				}, null, 8, _hoisted_2$21);
+			}), 256))], 14, _hoisted_1$46)) : (openBlock(), createElementBlock("i", {
 				key: 1,
 				class: normalizeClass(unref(Icon_module_default).icon)
 			}, null, 2));
 		};
 	}
 });
-var _hoisted_1$43 = [
+var _hoisted_1$45 = [
 	"href",
 	"rel",
 	"target"
@@ -7084,8 +7217,11 @@ var FluxPressable_default = /* @__PURE__ */ defineComponent({
 		"mouseleave"
 	],
 	setup(__props, { emit: __emit, attrs: $attrs }) {
-		const $emit = __emit;
 		const emit = __emit;
+		const hoverListeners = {
+			onMouseenter: (evt) => emit("mouseenter", evt),
+			onMouseleave: (evt) => emit("mouseleave", evt)
+		};
 		function onClick(evt, navigate) {
 			emit("click", evt);
 			if (evt.defaultPrevented) return;
@@ -7093,13 +7229,11 @@ var FluxPressable_default = /* @__PURE__ */ defineComponent({
 		}
 		return (_ctx, _cache) => {
 			const _component_router_link = resolveComponent("router-link");
-			return __props.componentType === "route" ? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, $attrs, {
+			return __props.componentType === "route" ? (openBlock(), createBlock(_component_router_link, mergeProps({ key: 0 }, $attrs, toHandlers(hoverListeners), {
 				rel: __props.rel,
 				target: __props.target,
 				to: __props.to,
-				onClick: _cache[0] || (_cache[0] = ($event) => onClick($event)),
-				onMouseenter: _cache[1] || (_cache[1] = ($event) => $emit("mouseenter", $event)),
-				onMouseleave: _cache[2] || (_cache[2] = ($event) => $emit("mouseleave", $event))
+				onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
 			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
@@ -7107,22 +7241,12 @@ var FluxPressable_default = /* @__PURE__ */ defineComponent({
 				"rel",
 				"target",
 				"to"
-			])) : __props.componentType === "link" ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, $attrs, {
+			])) : __props.componentType === "link" ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, $attrs, toHandlers(hoverListeners, true), {
 				href: __props.href,
 				rel: __props.rel,
 				target: __props.target,
-				onClick: _cache[3] || (_cache[3] = ($event) => onClick($event)),
-				onMouseenter: _cache[4] || (_cache[4] = ($event) => $emit("mouseenter", $event)),
-				onMouseleave: _cache[5] || (_cache[5] = ($event) => $emit("mouseleave", $event))
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$43)) : __props.componentType === "button" ? (openBlock(), createElementBlock("button", mergeProps({ key: 2 }, $attrs, {
-				onClick: _cache[6] || (_cache[6] = ($event) => onClick($event)),
-				onMouseenter: _cache[7] || (_cache[7] = ($event) => $emit("mouseenter", $event)),
-				onMouseleave: _cache[8] || (_cache[8] = ($event) => $emit("mouseleave", $event))
-			}), [renderSlot(_ctx.$slots, "default")], 16)) : (openBlock(), createElementBlock("div", mergeProps({ key: 3 }, $attrs, {
-				onClick,
-				onMouseenter: _cache[9] || (_cache[9] = ($event) => $emit("mouseenter", $event)),
-				onMouseleave: _cache[10] || (_cache[10] = ($event) => $emit("mouseleave", $event))
-			}), [renderSlot(_ctx.$slots, "default")], 16));
+				onClick: _cache[1] || (_cache[1] = ($event) => onClick($event))
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$45)) : __props.componentType === "button" ? (openBlock(), createElementBlock("button", mergeProps({ key: 2 }, $attrs, toHandlers(hoverListeners, true), { onClick: _cache[2] || (_cache[2] = ($event) => onClick($event)) }), [renderSlot(_ctx.$slots, "default")], 16)) : (openBlock(), createElementBlock("div", mergeProps({ key: 3 }, $attrs, toHandlers(hoverListeners, true), { onClick }), [renderSlot(_ctx.$slots, "default")], 16));
 		};
 	}
 });
@@ -7294,11 +7418,11 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "button": _0$15, "buttonIcon": _1$8, "buttonLabel": _2$5 } = Button_module_default$1;
+var { "buttonIcon": _0$15, "button": _1$8, "buttonLabel": _2$5 } = Button_module_default$1;
 var Action_module_default = {
-	action: `action ${_0$15}`,
+	action: `action ${_1$8}`,
 	spinner: `spinner`,
-	actionIcon: `action-icon ${_1$8}`,
+	actionIcon: `action-icon ${_0$15}`,
 	isDestructive: `is-destructive`,
 	actionLabel: `action-label ${_2$5}`,
 	actionBar: `action-bar`,
@@ -7362,31 +7486,31 @@ var FluxAction_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "button": _0$14, "buttonIcon": _1$7, "buttonLabel": _2$4 } = Button_module_default$1;
+var { "buttonIcon": _0$14, "button": _1$7, "buttonLabel": _2$4 } = Button_module_default$1;
 var Button_module_default = {
-	primaryButton: `primary-button ${_0$14}`,
+	primaryButton: `primary-button ${_1$7}`,
 	spinner: `spinner`,
-	primaryButtonIcon: `primary-button-icon ${_1$7}`,
+	primaryButtonIcon: `primary-button-icon ${_0$14}`,
 	primaryButtonLabel: `primary-button-label ${_2$4}`,
-	secondaryButton: `secondary-button ${_0$14}`,
-	secondaryButtonIcon: `secondary-button-icon ${_1$7}`,
+	secondaryButton: `secondary-button ${_1$7}`,
+	secondaryButtonIcon: `secondary-button-icon ${_0$14}`,
 	secondaryButtonLabel: `secondary-button-label ${_2$4}`,
-	destructiveButton: `destructive-button ${_0$14}`,
-	destructiveButtonIcon: `destructive-button-icon ${_1$7}`,
+	destructiveButton: `destructive-button ${_1$7}`,
+	destructiveButtonIcon: `destructive-button-icon ${_0$14}`,
 	destructiveButtonLabel: `destructive-button-label ${_2$4}`,
-	baseLinkButton: `base-link-button ${_0$14}`,
-	primaryLinkButton: `primary-link-button base-link-button ${_0$14}`,
-	primaryLinkButtonIcon: `primary-link-button-icon ${_1$7}`,
+	baseLinkButton: `base-link-button ${_1$7}`,
+	primaryLinkButton: `primary-link-button base-link-button ${_1$7}`,
+	primaryLinkButtonIcon: `primary-link-button-icon ${_0$14}`,
 	primaryLinkButtonLabel: `primary-link-button-label ${_2$4}`,
-	secondaryLinkButton: `secondary-link-button base-link-button ${_0$14}`,
-	secondaryLinkButtonIcon: `secondary-link-button-icon ${_1$7}`,
+	secondaryLinkButton: `secondary-link-button base-link-button ${_1$7}`,
+	secondaryLinkButtonIcon: `secondary-link-button-icon ${_0$14}`,
 	secondaryLinkButtonLabel: `secondary-link-button-label ${_2$4}`,
-	linkButton: `link-button ${_0$14}`,
-	linkButtonIcon: `link-button-icon ${_1$7}`,
+	linkButton: `link-button ${_1$7}`,
+	linkButtonIcon: `link-button-icon ${_0$14}`,
 	icon: `icon`,
 	linkButtonLabel: `link-button-label ${_2$4}`,
-	publishButton: `publish-button primary-button ${_0$14}`,
-	publishButtonIcon: `publish-button-icon primary-button-icon ${_1$7}`,
+	publishButton: `publish-button primary-button ${_1$7}`,
+	publishButtonIcon: `publish-button-icon primary-button-icon ${_0$14}`,
 	publishButtonLabel: `publish-button-label primary-button-label ${_2$4}`,
 	publishButtonAnimation: `publish-button-animation`,
 	isDone: `is-done`,
@@ -7533,7 +7657,7 @@ var Flyout_module_default = {
 	mobileClose: `mobile-close`,
 	mobileOpen: `mobile-open`
 };
-var _hoisted_1$42 = ["onKeydown"];
+var _hoisted_1$44 = ["onKeydown"];
 var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFlyout",
 	props: {
@@ -7667,7 +7791,7 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 					openerHeight: openerHeight.value
 				})))]),
 				_: 3
-			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$42)], 6);
+			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$44)], 6);
 		};
 	}
 });
@@ -8440,8 +8564,8 @@ var Avatar_module_default = {
 	persona: `persona`,
 	personaDetails: `persona-details`
 };
-var _hoisted_1$41 = ["alt", "src"];
-var _hoisted_2$18 = { key: 0 };
+var _hoisted_1$43 = ["alt", "src"];
+var _hoisted_2$20 = { key: 0 };
 var FluxAvatar_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxAvatar",
 	props: {
@@ -8525,10 +8649,10 @@ var FluxAvatar_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(Avatar_module_default).avatarImage),
 						alt: __props.alt,
 						src: __props.src
-					}, null, 10, _hoisted_1$41)) : (openBlock(), createElementBlock("div", {
+					}, null, 10, _hoisted_1$43)) : (openBlock(), createElementBlock("div", {
 						key: 1,
 						class: normalizeClass(__props.fallback === "colorized" ? unref(Avatar_module_default).avatarFallbackColorized : unref(Avatar_module_default).avatarFallbackNeutral)
-					}, [__props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$18, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(FluxIcon_default, {
+					}, [__props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$20, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(FluxIcon_default, {
 						key: 1,
 						name: __props.fallbackIcon
 					}, null, 8, ["name"])) : createCommentVNode("", true)], 2)),
@@ -8955,7 +9079,7 @@ var FilterBadge_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "buttonLabel": _0$11, "buttonIcon": _1$5, "button": _2$2 } = Button_module_default$1;
+var { "buttonIcon": _0$11, "buttonLabel": _1$5, "button": _2$2 } = Button_module_default$1;
 var Menu_module_default = {
 	menu: `menu`,
 	menuNormal: `menu-normal menu`,
@@ -8965,13 +9089,13 @@ var Menu_module_default = {
 	menuGroupVertical: `menu-group-vertical menu-group`,
 	menuItem: `menu-item ${_2$2}`,
 	badge: `badge`,
-	menuItemIcon: `menu-item-icon ${_1$5}`,
-	menuItemLabel: `menu-item-label ${_0$11}`,
+	menuItemIcon: `menu-item-icon ${_0$11}`,
+	menuItemLabel: `menu-item-label ${_1$5}`,
 	menuItemActive: `menu-item-active`,
 	menuItemDestructive: `menu-item-destructive`,
 	menuItemHighlighted: `menu-item-highlighted`,
 	menuItemIndented: `menu-item-indented`,
-	menuItemSelectableIcon: `menu-item-selectable-icon ${_1$5}`,
+	menuItemSelectableIcon: `menu-item-selectable-icon ${_0$11}`,
 	menuItemSelected: `menu-item-selected`,
 	menuItemCommand: `menu-item-command`,
 	menuItemCommandIcon: `menu-item-command-icon`,
@@ -8986,7 +9110,7 @@ var Menu_module_default = {
 	separator: `separator`,
 	expandableBody: `expandable-body`
 };
-var _hoisted_1$40 = ["src", "alt"];
+var _hoisted_1$42 = ["src", "alt"];
 var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxMenuItem",
 	props: {
@@ -9061,7 +9185,7 @@ var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Menu_module_default).menuItemImage),
 					src: __props.imageSrc,
 					alt: __props.imageAlt ?? ""
-				}, null, 10, _hoisted_1$40)]),
+				}, null, 10, _hoisted_1$42)]),
 				key: "1"
 			} : void 0, __props.command || __props.commandIcon || __props.commandLoading || slots.after ? {
 				name: "after",
@@ -9216,8 +9340,8 @@ var Form_module_default = {
 	toggleIconOn: `toggle-icon-on toggle-icon`,
 	toggleIconOff: `toggle-icon-off toggle-icon`
 };
-var _hoisted_1$39 = ["aria-disabled"];
-var _hoisted_2$17 = [
+var _hoisted_1$41 = ["aria-disabled"];
+var _hoisted_2$19 = [
 	"id",
 	"autocomplete",
 	"autofocus",
@@ -9387,7 +9511,7 @@ var FluxFormInput_default = /* @__PURE__ */ defineComponent({
 					onFocus: _cache[1] || (_cache[1] = ($event) => onFocus()),
 					onInput,
 					onKeydown: onKeyDown
-				}, null, 42, _hoisted_2$17),
+				}, null, 42, _hoisted_2$19),
 				__props.iconLeading ? (openBlock(), createBlock(FluxIcon_default, {
 					key: 0,
 					class: normalizeClass(unref(Form_module_default).formInputIconLeading),
@@ -9411,7 +9535,7 @@ var FluxFormInput_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Form_module_default).formInputIconTrailing),
 					size: 18
 				}, null, 8, ["class"])) : createCommentVNode("", true)
-			], 10, _hoisted_1$39);
+			], 10, _hoisted_1$41);
 		};
 	}
 });
@@ -9910,7 +10034,7 @@ var FluxTicks_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$38 = ["aria-disabled"];
+var _hoisted_1$40 = ["aria-disabled"];
 var SliderBase_default = /* @__PURE__ */ defineComponent({
 	__name: "SliderBase",
 	props: {
@@ -9963,11 +10087,11 @@ var SliderBase_default = /* @__PURE__ */ defineComponent({
 				key: 0,
 				lower: __props.min,
 				upper: __props.max
-			}, null, 8, ["lower", "upper"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$38);
+			}, null, 8, ["lower", "upper"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$40);
 		};
 	}
 });
-var _hoisted_1$37 = ["aria-disabled", "tabindex"];
+var _hoisted_1$39 = ["aria-disabled", "tabindex"];
 var SliderThumb_default = /* @__PURE__ */ defineComponent({
 	__name: "SliderThumb",
 	props: {
@@ -10008,7 +10132,7 @@ var SliderThumb_default = /* @__PURE__ */ defineComponent({
 				type: "button",
 				onKeydown: onKeyDown,
 				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
-			}, null, 46, _hoisted_1$37);
+			}, null, 46, _hoisted_1$39);
 		};
 	}
 });
@@ -10041,7 +10165,7 @@ var Divider_module_default = {
 	separatorHorizontal: `separator-horizontal separator`,
 	separatorVertical: `separator-vertical separator`
 };
-var _hoisted_1$36 = ["aria-orientation"];
+var _hoisted_1$38 = ["aria-orientation"];
 var FluxSeparator_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxSeparator",
 	props: { direction: { default: "horizontal" } },
@@ -10051,7 +10175,7 @@ var FluxSeparator_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(__props.direction === "horizontal" ? unref(Divider_module_default).separatorHorizontal : unref(Divider_module_default).separatorVertical),
 				role: "separator",
 				"aria-orientation": __props.direction
-			}, null, 10, _hoisted_1$36);
+			}, null, 10, _hoisted_1$38);
 		};
 	}
 });
@@ -10134,8 +10258,8 @@ var DatePicker_module_default = {
 	datePickerDay: `date-picker-day`,
 	button: `button`
 };
-var _hoisted_1$35 = ["onClick"];
-var _hoisted_2$16 = ["onClick"];
+var _hoisted_1$37 = ["onClick"];
+var _hoisted_2$18 = ["onClick"];
 var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxCalendar",
 	props: {
@@ -10198,7 +10322,7 @@ var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(Calendar_module_default).calendarCurrentMonth),
 							type: "button",
 							onClick: open
-						}, toDisplayString(unref(viewMonth)), 11, _hoisted_1$35)]),
+						}, toDisplayString(unref(viewMonth)), 11, _hoisted_1$37)]),
 						default: withCtx(({ close }) => [createElementVNode("div", { class: normalizeClass(unref(DatePicker_module_default).datePickerMonths) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(months), (month) => {
 							return openBlock(), createBlock(FluxSecondaryButton_default, {
 								key: month.label,
@@ -10213,7 +10337,7 @@ var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(Calendar_module_default).calendarCurrentYear),
 							type: "button",
 							onClick: open
-						}, toDisplayString(unref(viewYear)), 11, _hoisted_2$16)]),
+						}, toDisplayString(unref(viewYear)), 11, _hoisted_2$18)]),
 						default: withCtx(({ close }) => [createElementVNode("div", { class: normalizeClass(unref(DatePicker_module_default).datePickerYears) }, [
 							createVNode(FluxSecondaryButton_default, {
 								"icon-leading": "angle-left",
@@ -10309,9 +10433,8 @@ var FluxCalendarEvent_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$34 = ["for"];
-var _hoisted_2$15 = ["id"];
-var _hoisted_3$6 = ["aria-checked"];
+var _hoisted_1$36 = ["for"];
+var _hoisted_2$17 = ["id"];
 var FluxCheckbox_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxCheckbox",
 	props: /* @__PURE__ */ mergeModels({ label: {} }, {
@@ -10342,11 +10465,11 @@ var FluxCheckbox_default = /* @__PURE__ */ defineComponent({
 					type: "checkbox",
 					class: normalizeClass(unref(Form_module_default).checkboxNative),
 					id: unref(id)
-				}, null, 10, _hoisted_2$15), [[vModelCheckbox, modelValue.value]]),
+				}, null, 10, _hoisted_2$17), [[vModelCheckbox, modelValue.value]]),
 				createElementVNode("button", {
+					"aria-hidden": "true",
 					class: normalizeClass(unref(Form_module_default).checkboxElement),
-					role: "checkbox",
-					"aria-checked": modelValue.value ?? false
+					tabindex: "-1"
 				}, [isIndeterminate.value ? (openBlock(), createBlock(FluxIcon_default, {
 					key: 0,
 					name: "minus",
@@ -10355,12 +10478,12 @@ var FluxCheckbox_default = /* @__PURE__ */ defineComponent({
 					key: 1,
 					name: "check",
 					size: 16
-				}))], 10, _hoisted_3$6),
+				}))], 2),
 				__props.label ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: normalizeClass(unref(Form_module_default).checkboxLabel)
 				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-			], 10, _hoisted_1$34);
+			], 10, _hoisted_1$36);
 		};
 	}
 });
@@ -10471,8 +10594,8 @@ var Comment_module_default = {
 	isTyping: `is-typing`,
 	commentTyping: `comment-typing`
 };
-var _hoisted_1$33 = { key: 0 };
-var _hoisted_2$14 = ["datetime"];
+var _hoisted_1$35 = { key: 0 };
+var _hoisted_2$16 = ["datetime"];
 var FluxComment_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxComment",
 	props: {
@@ -10514,10 +10637,10 @@ var FluxComment_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					class: normalizeClass(unref(Comment_module_default).commentTyping)
 				}, null, 2)) : renderSlot(_ctx.$slots, "default", { key: 1 })], 2),
-				createElementVNode("div", { class: normalizeClass(unref(Comment_module_default).commentFooter) }, [__props.isReceived && __props.postedBy ? (openBlock(), createElementBlock("span", _hoisted_1$33, toDisplayString(__props.postedBy), 1)) : createCommentVNode("", true), iso.value && relative.value && !__props.isTyping ? (openBlock(), createElementBlock("time", {
+				createElementVNode("div", { class: normalizeClass(unref(Comment_module_default).commentFooter) }, [__props.isReceived && __props.postedBy ? (openBlock(), createElementBlock("span", _hoisted_1$35, toDisplayString(__props.postedBy), 1)) : createCommentVNode("", true), iso.value && relative.value && !__props.isTyping ? (openBlock(), createElementBlock("time", {
 					key: 1,
 					datetime: iso.value
-				}, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$14)) : createCommentVNode("", true)], 2)
+				}, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$16)) : createCommentVNode("", true)], 2)
 			], 2);
 		};
 	}
@@ -10529,7 +10652,7 @@ var CoordinatePicker_module_default = {
 	isDisabled: `is-disabled`,
 	isDragging: `is-dragging`
 };
-var _hoisted_1$32 = ["aria-disabled", "tabindex"];
+var _hoisted_1$34 = ["aria-disabled", "tabindex"];
 var CoordinatePickerThumb_default = /* @__PURE__ */ defineComponent({
 	__name: "CoordinatePickerThumb",
 	props: {
@@ -10577,11 +10700,11 @@ var CoordinatePickerThumb_default = /* @__PURE__ */ defineComponent({
 				type: "button",
 				onKeydown: onKeyDown,
 				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
-			}, null, 46, _hoisted_1$32);
+			}, null, 46, _hoisted_1$34);
 		};
 	}
 });
-var _hoisted_1$31 = ["aria-disabled"];
+var _hoisted_1$33 = ["aria-disabled"];
 var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
 	__name: "CoordinatePicker",
 	props: /* @__PURE__ */ mergeModels({
@@ -10674,11 +10797,11 @@ var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
 				"disabled",
 				"is-dragging",
 				"position"
-			])], 42, _hoisted_1$31);
+			])], 42, _hoisted_1$33);
 		};
 	}
 });
-var _hoisted_1$30 = { key: 1 };
+var _hoisted_1$32 = { key: 1 };
 var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFormFieldAddition",
 	props: {
@@ -10698,13 +10821,13 @@ var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
 					name: __props.icon,
 					size: 16
 				}, null, 8, ["class", "name"])) : createCommentVNode("", true),
-				__props.message ? (openBlock(), createElementBlock("span", _hoisted_1$30, toDisplayString(__props.message), 1)) : createCommentVNode("", true),
+				__props.message ? (openBlock(), createElementBlock("span", _hoisted_1$32, toDisplayString(__props.message), 1)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default")
 			], 2);
 		};
 	}
 });
-var _hoisted_1$29 = ["for"];
+var _hoisted_1$31 = ["for"];
 var FluxFormField_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFormField",
 	props: {
@@ -10743,7 +10866,7 @@ var FluxFormField_default = /* @__PURE__ */ defineComponent({
 						label: __props.label,
 						maxLength: __props.maxLength
 					})))], 2)) : createCommentVNode("", true)
-				], 10, _hoisted_1$29),
+				], 10, _hoisted_1$31),
 				renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ id: unref(id) }))),
 				__props.currentLength && __props.maxLength && __props.maxLength > 0 ? (openBlock(), createElementBlock("span", {
 					key: 0,
@@ -11245,8 +11368,8 @@ var FluxPrimaryButton_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$28 = ["onClick"];
-var _hoisted_2$13 = ["onClick"];
+var _hoisted_1$30 = ["onClick"];
+var _hoisted_2$15 = ["onClick"];
 var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxColorSelect",
 	props: /* @__PURE__ */ mergeModels({
@@ -11294,7 +11417,7 @@ var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Color_module_default).colorSelectCheck),
 					name: "check",
 					size: 16
-				}, null, 8, ["class"])], 14, _hoisted_1$28);
+				}, null, 8, ["class"])], 14, _hoisted_1$30);
 			}), 256)), __props.isCustomAllowed ? (openBlock(), createBlock(FluxFlyout_default, { key: 0 }, {
 				opener: withCtx(({ open }) => [createElementVNode("button", {
 					class: normalizeClass(unref(Color_module_default).colorSelectCustom),
@@ -11302,7 +11425,7 @@ var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 				}, [createVNode(FluxIcon_default, {
 					name: "ellipsis-h",
 					size: 16
-				})], 10, _hoisted_2$13)]),
+				})], 10, _hoisted_2$15)]),
 				default: withCtx(({ close }) => [createVNode(FluxColorPicker_default, {
 					modelValue: customColor.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
@@ -11385,7 +11508,7 @@ var FluxFormSelect_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var { "secondaryButton": _0$7, "secondaryButtonLabel": _1$3, "secondaryButtonIcon": _2$1 } = Button_module_default;
+var { "secondaryButton": _0$7, "secondaryButtonIcon": _1$3, "secondaryButtonLabel": _2$1 } = Button_module_default;
 var Pagination_module_default = {
 	pagination: `pagination`,
 	paginationButton: `pagination-button ${_0$7}`,
@@ -11393,8 +11516,8 @@ var Pagination_module_default = {
 	paginationButtonArrow: `pagination-button-arrow`,
 	paginationButtonCurrent: `pagination-button-current`,
 	paginationButtonSpacer: `pagination-button-spacer`,
-	paginationButtonIcon: `pagination-button-icon ${_2$1}`,
-	paginationButtonLabel: `pagination-button-label ${_1$3}`,
+	paginationButtonIcon: `pagination-button-icon ${_1$3}`,
+	paginationButtonLabel: `pagination-button-label ${_2$1}`,
 	paginationBar: `pagination-bar`,
 	paginationBarLimit: `pagination-bar-limit`,
 	paginationBarLimitDisplayingOf: `pagination-bar-limit-displaying-of`,
@@ -11470,7 +11593,7 @@ var FluxPaginationButton_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$27 = ["aria-label"];
+var _hoisted_1$29 = ["aria-label"];
 var FluxPagination_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxPagination",
 	props: {
@@ -11578,7 +11701,7 @@ var FluxPagination_default = /* @__PURE__ */ defineComponent({
 					"aria-label": unref(translate)("flux.next"),
 					onClick: next
 				}, null, 8, ["disabled", "aria-label"])) : createCommentVNode("", true)
-			], 10, _hoisted_1$27);
+			], 10, _hoisted_1$29);
 		};
 	}
 });
@@ -11695,8 +11818,8 @@ var FluxTableRow_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$26 = { key: 0 };
-var _hoisted_2$12 = { key: 1 };
+var _hoisted_1$28 = { key: 0 };
+var _hoisted_2$14 = { key: 1 };
 var _hoisted_3$5 = { key: 2 };
 var FluxTable_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxTable",
@@ -11736,8 +11859,8 @@ var FluxTable_default = /* @__PURE__ */ defineComponent({
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Table_module_default).table) }, [
 				createElementVNode("table", { class: normalizeClass(unref(Table_module_default).tableBase) }, [
 					renderSlot(_ctx.$slots, "colgroups"),
-					slots.header ? (openBlock(), createElementBlock("thead", _hoisted_1$26, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true),
-					slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$12, [renderSlot(_ctx.$slots, "default"), __props.fillColumns ? (openBlock(), createBlock(FluxTableRow_default, {
+					slots.header ? (openBlock(), createElementBlock("thead", _hoisted_1$28, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true),
+					slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$14, [renderSlot(_ctx.$slots, "default"), __props.fillColumns ? (openBlock(), createBlock(FluxTableRow_default, {
 						key: 0,
 						class: normalizeClass(unref(Table_module_default).tableFill)
 					}, {
@@ -11908,8 +12031,8 @@ var FluxDataTable_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$25 = ["id"];
-var _hoisted_2$11 = ["aria-labelledby"];
+var _hoisted_1$27 = ["id"];
+var _hoisted_2$13 = ["aria-labelledby"];
 var _hoisted_3$4 = ["onClick", "onMouseover"];
 var FluxDatePicker_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxDatePicker",
@@ -12060,7 +12183,7 @@ var FluxDatePicker_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(DatePicker_module_default).datePickerHeaderViewButton),
 					type: "button",
 					onClick: _cache[1] || (_cache[1] = ($event) => setView("year"))
-				}, toDisplayString(unref(viewYear)), 3)], 10, _hoisted_1$25),
+				}, toDisplayString(unref(viewYear)), 3)], 10, _hoisted_1$27),
 				createVNode(unref(FluxFadeTransition_default), null, {
 					default: withCtx(() => [viewMode.value === "date" ? (openBlock(), createBlock(FluxSecondaryButton_default, {
 						key: 0,
@@ -12100,7 +12223,7 @@ var FluxDatePicker_default = /* @__PURE__ */ defineComponent({
 						}, toDisplayString(date.toLocaleString({ day: "numeric" })), 43, _hoisted_3$4);
 					}), 256))], 2))]),
 					_: 1
-				}, 8, ["is-back"])], 10, _hoisted_2$11)) : viewMode.value === "month" ? (openBlock(), createElementBlock("div", {
+				}, 8, ["is-back"])], 10, _hoisted_2$13)) : viewMode.value === "month" ? (openBlock(), createElementBlock("div", {
 					key: "month",
 					class: normalizeClass(unref(DatePicker_module_default).datePickerMonths)
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(months), (month) => {
@@ -12177,12 +12300,12 @@ var FluxDivider_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$24 = [
+var _hoisted_1$26 = [
 	"id",
 	"width",
 	"height"
 ];
-var _hoisted_2$10 = [
+var _hoisted_2$12 = [
 	"r",
 	"cx",
 	"cy"
@@ -12230,7 +12353,7 @@ var FluxDotPattern_default = /* @__PURE__ */ defineComponent({
 				r: __props.cr,
 				cx: __props.width / 2 - __props.cx,
 				cy: __props.height / 2 - __props.cy
-			}, null, 8, _hoisted_2$10)], 8, _hoisted_1$24)]), createElementVNode("rect", {
+			}, null, 8, _hoisted_2$12)], 8, _hoisted_1$26)]), createElementVNode("rect", {
 				width: "100%",
 				height: "100%",
 				"stroke-width": "0",
@@ -12251,8 +12374,8 @@ var DropZone_module_default = {
 	dropZoneBorderAnimation: `drop-zone-border-animation`,
 	dropZoneLoader: `drop-zone-loader`
 };
-var _hoisted_1$23 = ["aria-disabled"];
-var _hoisted_2$9 = ["pathLength"];
+var _hoisted_1$25 = ["aria-disabled"];
+var _hoisted_2$11 = ["pathLength"];
 var FluxDropZone_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxDropZone",
 	props: {
@@ -12353,7 +12476,7 @@ var FluxDropZone_default = /* @__PURE__ */ defineComponent({
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round",
 						pathLength: pathLength.value
-					}, null, 8, _hoisted_2$9)], 2)),
+					}, null, 8, _hoisted_2$11)], 2)),
 					renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 						isDragging: isDragging.value,
 						isDraggingOver: isDraggingOver.value,
@@ -12380,7 +12503,7 @@ var FluxDropZone_default = /* @__PURE__ */ defineComponent({
 					isDraggingOver: isDraggingOver.value,
 					showPicker
 				})))
-			], 10, _hoisted_1$23);
+			], 10, _hoisted_1$25);
 		};
 	}
 });
@@ -12406,12 +12529,12 @@ var Expandable_module_default = {
 	basePane: `base-pane`,
 	expandableGroup: `expandable-group`
 };
-var _hoisted_1$22 = [
+var _hoisted_1$24 = [
 	"id",
 	"aria-controls",
 	"aria-expanded"
 ];
-var _hoisted_2$8 = ["id", "aria-labelledby"];
+var _hoisted_2$10 = ["id", "aria-labelledby"];
 var FluxExpandable_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxExpandable",
 	props: {
@@ -12499,9 +12622,9 @@ var FluxExpandable_default = /* @__PURE__ */ defineComponent({
 				})), () => [createElementVNode("div", { class: normalizeClass(unref(Expandable_module_default).expandableContent) }, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 					label: __props.label,
 					close
-				})))], 2)])], 10, _hoisted_2$8)) : createCommentVNode("", true)]),
+				})))], 2)])], 10, _hoisted_2$10)) : createCommentVNode("", true)]),
 				_: 3
-			})], 10, _hoisted_1$22);
+			})], 10, _hoisted_1$24);
 		};
 	}
 });
@@ -12882,7 +13005,10 @@ var FluxOverflowBar_default = /* @__PURE__ */ defineComponent({
 				key: 0,
 				ref: "overflow",
 				class: normalizeClass(unref(OverflowBar_module_default).overflowBarOverflow)
-			}, [renderSlot(_ctx.$slots, "overflow", normalizeProps(guardReactiveProps({ items: hiddenItems.value })))], 2)) : createCommentVNode("", true)], 6), createElementVNode("div", {
+			}, [renderSlot(_ctx.$slots, "overflow", normalizeProps(guardReactiveProps({
+				hasOverflow: hiddenItems.value.length > 0,
+				items: hiddenItems.value
+			})))], 2)) : createCommentVNode("", true)], 6), createElementVNode("div", {
 				ref: "measurer",
 				class: normalizeClass(unref(OverflowBar_module_default).overflowBarMeasurer)
 			}, [renderSlot(_ctx.$slots, "default")], 2)], 64);
@@ -12918,7 +13044,8 @@ var FluxFilterBar_default = /* @__PURE__ */ defineComponent({
 				onReset: reset
 			}, {
 				filters: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				default: withCtx(({ buttons, filters, menuItems }) => [createElementVNode("div", { class: normalizeClass(unref(Filter_module_default).filterBar) }, [createVNode(FluxFormInput_default, {
+				default: withCtx(({ buttons, filters, menuItems }) => [createElementVNode("div", { class: normalizeClass(unref(Filter_module_default).filterBar) }, [__props.isSearchable ? (openBlock(), createBlock(FluxFormInput_default, {
+					key: 0,
 					modelValue: modelSearch.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelSearch.value = $event),
 					class: normalizeClass(unref(Filter_module_default).filterBarSearch),
@@ -12929,7 +13056,7 @@ var FluxFilterBar_default = /* @__PURE__ */ defineComponent({
 					"modelValue",
 					"class",
 					"placeholder"
-				]), createVNode(FluxOverflowBar_default, { alignment: "end" }, {
+				])) : createCommentVNode("", true), createVNode(FluxOverflowBar_default, { alignment: "end" }, {
 					overflow: withCtx(() => [isFiltered.value ? (openBlock(), createBlock(FluxSeparator_default, {
 						key: 0,
 						direction: "vertical",
@@ -13505,7 +13632,7 @@ var FocalPoint_module_default = {
 	focalPointPreview: `focal-point-preview`,
 	focalPointPreviewImage: `focal-point-preview-image`
 };
-var _hoisted_1$21 = ["src"];
+var _hoisted_1$23 = ["src"];
 var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFocalPointEditor",
 	props: /* @__PURE__ */ mergeModels({ src: {} }, {
@@ -13572,7 +13699,7 @@ var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
 							src: __props.src,
 							alt: "",
 							onLoad: onImageLoaded
-						}, null, 42, _hoisted_1$21), createElementVNode("div", {
+						}, null, 42, _hoisted_1$23), createElementVNode("div", {
 							class: normalizeClass(unref(FocalPoint_module_default).focalPointEditorArea),
 							style: normalizeStyle({
 								top: `${focalPointY.value}%`,
@@ -13599,7 +13726,7 @@ var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$20 = ["src", "alt"];
+var _hoisted_1$22 = ["src", "alt"];
 var FluxFocalPointImage_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFocalPointImage",
 	props: {
@@ -13616,11 +13743,11 @@ var FluxFocalPointImage_default = /* @__PURE__ */ defineComponent({
 				style: normalizeStyle({ objectPosition: `${x.value}% ${y.value}%` }),
 				src: __props.src,
 				alt: __props.alt
-			}, null, 14, _hoisted_1$20);
+			}, null, 14, _hoisted_1$22);
 		};
 	}
 });
-var _hoisted_1$19 = ["aria-disabled"];
+var _hoisted_1$21 = ["aria-disabled"];
 var FluxForm_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxForm",
 	props: { disabled: {
@@ -13641,7 +13768,7 @@ var FluxForm_default = /* @__PURE__ */ defineComponent({
 			}, [createVNode(FluxDisabled_default, { disabled: __props.disabled }, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["disabled"])], 42, _hoisted_1$19);
+			}, 8, ["disabled"])], 42, _hoisted_1$21);
 		};
 	}
 });
@@ -13931,7 +14058,7 @@ var FluxFormGrid_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$18 = { key: 1 };
+var _hoisted_1$20 = { key: 1 };
 var FluxFormInputAddition_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFormInputAddition",
 	props: {
@@ -13946,18 +14073,18 @@ var FluxFormInputAddition_default = /* @__PURE__ */ defineComponent({
 					name: __props.icon,
 					size: 18
 				}, null, 8, ["name"])) : createCommentVNode("", true),
-				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1$18, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1$20, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default")
 			], 2);
 		};
 	}
 });
-var _hoisted_1$17 = [
+var _hoisted_1$19 = [
 	"id",
 	"autofocus",
 	"aria-disabled"
 ];
-var _hoisted_2$7 = [
+var _hoisted_2$9 = [
 	"autocomplete",
 	"autofocus",
 	"disabled",
@@ -14057,8 +14184,8 @@ var FluxFormPinInput_default = /* @__PURE__ */ defineComponent({
 					onInput,
 					onKeydown: onKeyDown,
 					onPaste
-				}, null, 42, _hoisted_2$7);
-			}), 128))], 14, _hoisted_1$17);
+				}, null, 42, _hoisted_2$9);
+			}), 128))], 14, _hoisted_1$19);
 		};
 	}
 });
@@ -14312,7 +14439,7 @@ var FluxFormSelectAsync_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$16 = [
+var _hoisted_1$18 = [
 	"id",
 	"autocomplete",
 	"autofocus",
@@ -14359,7 +14486,7 @@ var FluxFormTextArea_default = /* @__PURE__ */ defineComponent({
 				"aria-disabled": unref(disabled) ? true : void 0,
 				onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur")),
 				onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus"))
-			}, null, 46, _hoisted_1$16)), [[vModelText, modelValue.value]]);
+			}, null, 46, _hoisted_1$18)), [[vModelText, modelValue.value]]);
 		};
 	}
 });
@@ -15045,6 +15172,294 @@ var FluxFormTimeZonePicker_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+var TreeViewSelect_module_default = {
+	treeViewSelectValue: `tree-view-select-value`,
+	treeViewSelectList: `tree-view-select-list`,
+	treeViewSelectEmpty: `tree-view-select-empty`,
+	treeNode: `tree-node`,
+	isSelectable: `is-selectable`,
+	isExpandable: `is-expandable`,
+	isSelected: `is-selected`,
+	isHighlighted: `is-highlighted`,
+	treeNodeCheck: `tree-node-check`,
+	treeNodeLineArea: `tree-node-line-area`,
+	treeIndent: `tree-indent`,
+	hasLine: `has-line`,
+	treeConnector: `tree-connector`,
+	isLast: `is-last`,
+	treeNodeExpand: `tree-node-expand`,
+	treeNodeColorDot: `tree-node-color-dot`,
+	treeNodeIcon: `tree-node-icon`,
+	treeNodeLabel: `tree-node-label`
+};
+var _hoisted_1$17 = [
+	"role",
+	"tabindex",
+	"aria-selected",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_2$8 = ["onClick"];
+var FluxFormTreeViewSelect_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "FluxFormTreeViewSelect",
+	props: /* @__PURE__ */ mergeModels({
+		disabled: { type: Boolean },
+		isMultiple: { type: Boolean },
+		isSearchable: { type: Boolean },
+		levelColors: {},
+		options: {},
+		placeholder: {}
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props, { attrs: $attrs }) {
+		const modelValue = useModel(__props, "modelValue");
+		const disabled = useDisabled_default(toRef(() => __props.disabled));
+		const { id } = useFormFieldInjection_default();
+		const translate = useTranslate_default();
+		const anchorRef = useTemplateRef("anchor");
+		const anchorPopupRef = useTemplateRef("anchorPopup");
+		const nodeElementRefs = useTemplateRef("nodeElements");
+		const searchInputRef = useTemplateRef("searchInput");
+		const expandedIds = ref(/* @__PURE__ */ new Set());
+		const isPopupOpen = ref(false);
+		const searchQuery = ref("");
+		const focusElement = computed(() => T(searchInputRef) ?? T(anchorRef));
+		const selectedIds = computed(() => {
+			const value = unref(modelValue);
+			if (Array.isArray(value)) return new Set(value);
+			return new Set(value !== void 0 ? [value] : []);
+		});
+		const selectedOptions = computed(() => {
+			const ids = unref(selectedIds);
+			if (ids.size === 0) return [];
+			return flattenAll(__props.options).filter((node) => ids.has(node.id));
+		});
+		const visibleNodes = computed(() => {
+			const query = unref(searchQuery).toLowerCase().trim();
+			if (query) return flattenAll(__props.options).filter((node) => node.label.toLowerCase().includes(query)).map((node) => ({
+				...node,
+				depth: 0,
+				isLast: false,
+				lineGuides: []
+			}));
+			return flattenVisible(__props.options, 0, unref(expandedIds));
+		});
+		const { highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate } = useTreeView({
+			expandedIds,
+			nodeElementRefs,
+			visibleNodes
+		});
+		K$1([anchorRef, anchorPopupRef], isPopupOpen, () => isPopupOpen.value = false);
+		K$1(anchorRef, isPopupOpen, () => unref(focusElement)?.focus());
+		function toggle() {
+			if (unref(disabled)) return;
+			isPopupOpen.value = !unref(isPopupOpen);
+		}
+		function select(nodeId) {
+			if (unref(__props.isMultiple)) {
+				const current = [...unref(selectedIds)];
+				if (current.includes(nodeId)) modelValue.value = current.filter((v) => v !== nodeId);
+				else modelValue.value = [...current, nodeId];
+			} else {
+				modelValue.value = nodeId;
+				isPopupOpen.value = false;
+			}
+		}
+		function deselect(nodeId) {
+			const current = unref(modelValue);
+			if (Array.isArray(current)) modelValue.value = current.filter((v) => v !== nodeId);
+			nextTick(() => T(anchorRef)?.focus());
+		}
+		function onNodeClick(node) {
+			if (node.selectable !== false) {
+				select(node.id);
+				if (node.children?.length && !unref(expandedIds).has(node.id)) toggleExpand(node.id);
+			} else if (node.children?.length) toggleExpand(node.id);
+		}
+		function onKeyDown(evt) {
+			if (!unref(isPopupOpen)) {
+				if (evt.key === "Enter" || evt.key === " ") {
+					evt.preventDefault();
+					isPopupOpen.value = true;
+				}
+				return;
+			}
+			switch (evt.key) {
+				case "Backspace":
+					if (!unref(__props.isMultiple)) return;
+					if (unref(searchQuery).length > 0 || unref(selectedIds).size === 0) return;
+					const selectedList = [...unref(selectedIds)];
+					deselect(selectedList[selectedList.length - 1]);
+					return;
+				case "Escape":
+					isPopupOpen.value = false;
+					nextTick(() => T(anchorRef)?.focus());
+					return;
+				case "Tab":
+					isPopupOpen.value = false;
+					return;
+			}
+			if (__props.isSearchable && evt.key.length === 1 && evt.key !== "Enter" && evt.key !== " ") return;
+			onKeyNavigate(evt, onNodeClick);
+		}
+		watch(isPopupOpen, (isOpen) => {
+			if (!isOpen) {
+				searchQuery.value = "";
+				highlightedIndex.value = -1;
+				return;
+			}
+			autoExpandSelected();
+			nextTick(() => {
+				const ids = unref(selectedIds);
+				if (ids.size > 0) {
+					const firstSelectedIndex = unref(visibleNodes).findIndex((n) => ids.has(n.id));
+					if (firstSelectedIndex >= 0) highlightedIndex.value = firstSelectedIndex;
+				}
+				unref(focusElement)?.focus();
+			});
+		});
+		watch(searchQuery, () => {
+			highlightedIndex.value = -1;
+		});
+		function autoExpandSelected() {
+			const ids = unref(selectedIds);
+			if (ids.size === 0) return;
+			const expanded = new Set(unref(expandedIds));
+			function expandAncestors(nodes, targetId) {
+				for (const node of nodes) {
+					if (node.id === targetId) return true;
+					if (node.children && expandAncestors(node.children, targetId)) {
+						expanded.add(node.id);
+						return true;
+					}
+				}
+				return false;
+			}
+			for (const selectedId of ids) expandAncestors(__props.options, selectedId);
+			expandedIds.value = expanded;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(Anchor_default, mergeProps({ ref: "anchor" }, $attrs, {
+				class: unref(clsx)(unref(Form_module_default).formSelect, unref(disabled) && unref(Form_module_default).isDisabled, isPopupOpen.value && unref(Form_module_default).isFocused),
+				id: unref(id),
+				"aria-disabled": unref(disabled) ? true : void 0,
+				tabindex: "0",
+				"tag-name": "div",
+				onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
+				onKeydown: onKeyDown
+			}), {
+				default: withCtx(() => [__props.isMultiple && selectedOptions.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectedOptions.value, (option) => {
+					return openBlock(), createBlock(FluxTag_default, {
+						key: option.id,
+						label: option.label,
+						"is-deletable": "",
+						onDelete: ($event) => deselect(option.id)
+					}, null, 8, ["label", "onDelete"]);
+				}), 128)) : !__props.isMultiple && selectedOptions.value[0] ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(unref(TreeViewSelect_module_default).treeViewSelectValue)
+				}, toDisplayString(selectedOptions.value[0].label), 3)) : __props.placeholder ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(unref(Form_module_default).formSelectPlaceholder)
+				}, toDisplayString(__props.placeholder), 3)) : createCommentVNode("", true), createVNode(FluxIcon_default, {
+					class: normalizeClass(unref(Form_module_default).formSelectIcon),
+					name: "angle-down"
+				}, null, 8, ["class"])]),
+				_: 1
+			}, 16, [
+				"class",
+				"id",
+				"aria-disabled"
+			]), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(FluxFadeTransition_default), null, {
+				default: withCtx(() => [isPopupOpen.value && !unref(disabled) ? (openBlock(), createBlock(AnchorPopup_default, {
+					key: 0,
+					ref: "anchorPopup",
+					class: normalizeClass(unref(Form_module_default).formSelectPopup),
+					anchor: anchorRef.value,
+					direction: "vertical",
+					"use-anchor-width": ""
+				}, {
+					default: withCtx(() => [__props.isSearchable ? (openBlock(), createBlock(FluxFormInput_default, {
+						key: 0,
+						modelValue: searchQuery.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+						ref: "searchInput",
+						"auto-complete": "off",
+						class: normalizeClass(unref(Form_module_default).formSelectInput),
+						type: "search",
+						"icon-trailing": "magnifying-glass",
+						placeholder: unref(translate)("flux.search"),
+						onKeydown: onKeyDown
+					}, null, 8, [
+						"modelValue",
+						"class",
+						"placeholder"
+					])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(TreeViewSelect_module_default).treeViewSelectList) }, [visibleNodes.value.length === 0 ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(TreeViewSelect_module_default).treeViewSelectEmpty)
+					}, toDisplayString(unref(translate)("flux.noItems")), 3)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(visibleNodes.value, (node, nodeIndex) => {
+						return openBlock(), createElementBlock("div", {
+							ref_for: true,
+							ref: "nodeElements",
+							key: node.id,
+							class: normalizeClass(unref(clsx)(unref(TreeViewSelect_module_default).treeNode, node.selectable !== false && unref(TreeViewSelect_module_default).isSelectable, node.selectable === false && !!node.children?.length && unref(TreeViewSelect_module_default).isExpandable, selectedIds.value.has(node.id) && unref(TreeViewSelect_module_default).isSelected, nodeIndex === unref(highlightedIndex) && unref(TreeViewSelect_module_default).isHighlighted)),
+							role: node.selectable !== false ? "option" : void 0,
+							tabindex: node.selectable !== false ? 0 : void 0,
+							"aria-selected": node.selectable !== false ? selectedIds.value.has(node.id) : void 0,
+							onClick: ($event) => onNodeClick(node),
+							onKeydown: [withKeys(withModifiers(($event) => onNodeClick(node), ["prevent"]), ["enter"]), withKeys(withModifiers(($event) => onNodeClick(node), ["prevent"]), ["space"])]
+						}, [
+							createElementVNode("div", { class: normalizeClass(unref(TreeViewSelect_module_default).treeNodeLineArea) }, [
+								(openBlock(true), createElementBlock(Fragment, null, renderList(node.lineGuides, (showLine, guideIndex) => {
+									return openBlock(), createElementBlock("span", {
+										key: `g-${guideIndex}`,
+										class: normalizeClass([unref(TreeViewSelect_module_default).treeIndent, showLine && unref(TreeViewSelect_module_default).hasLine])
+									}, null, 2);
+								}), 128)),
+								node.depth > 0 ? (openBlock(), createElementBlock("span", {
+									key: 0,
+									class: normalizeClass([unref(TreeViewSelect_module_default).treeConnector, node.isLast && unref(TreeViewSelect_module_default).isLast])
+								}, null, 2)) : createCommentVNode("", true),
+								createElementVNode("span", {
+									class: normalizeClass(unref(TreeViewSelect_module_default).treeNodeExpand),
+									onClick: ($event) => unref(onExpandClick)(node, $event)
+								}, [node.children?.length ? (openBlock(), createBlock(FluxIcon_default, {
+									key: 0,
+									name: expandedIds.value.has(node.id) ? "angle-down" : "angle-right",
+									size: 12
+								}, null, 8, ["name"])) : createCommentVNode("", true)], 10, _hoisted_2$8)
+							], 2),
+							unref(getLevelColor)(node.depth, __props.levelColors) ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: normalizeClass(unref(TreeViewSelect_module_default).treeNodeColorDot),
+								style: normalizeStyle({ background: unref(getLevelColor)(node.depth, __props.levelColors) })
+							}, null, 6)) : createCommentVNode("", true),
+							node.icon ? (openBlock(), createBlock(FluxIcon_default, {
+								key: 1,
+								class: normalizeClass(unref(TreeViewSelect_module_default).treeNodeIcon),
+								name: node.icon,
+								size: 16
+							}, null, 8, ["class", "name"])) : createCommentVNode("", true),
+							createElementVNode("span", { class: normalizeClass(unref(TreeViewSelect_module_default).treeNodeLabel) }, toDisplayString(node.label), 3),
+							selectedIds.value.has(node.id) ? (openBlock(), createBlock(FluxIcon_default, {
+								key: 2,
+								class: normalizeClass(unref(TreeViewSelect_module_default).treeNodeCheck),
+								name: "check",
+								size: 14
+							}, null, 8, ["class"])) : createCommentVNode("", true)
+						], 42, _hoisted_1$17);
+					}), 128))], 2)]),
+					_: 1
+				}, 8, ["class", "anchor"])) : createCommentVNode("", true)]),
+				_: 1
+			})]))], 64);
+		};
+	}
+});
 var Remove_module_default = {
 	remove: `remove`,
 	isHidden: `is-hidden`
@@ -15134,7 +15549,7 @@ var FluxGalleryItem_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$15 = ["onClick"];
+var _hoisted_1$16 = ["onClick"];
 var FluxGallery_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxGallery",
 	props: {
@@ -15210,7 +15625,7 @@ var FluxGallery_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(Gallery_module_default).galleryAdd),
 							type: "button",
 							onClick: ($event) => showPicker()
-						}, [createVNode(FluxIcon_default, { name: "plus" })], 10, _hoisted_1$15)) : createCommentVNode("", true)
+						}, [createVNode(FluxIcon_default, { name: "plus" })], 10, _hoisted_1$16)) : createCommentVNode("", true)
 					]),
 					_: 2
 				}, 1032, ["class", "move-class"])]),
@@ -15271,12 +15686,12 @@ var FluxGridColumn_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$14 = [
+var _hoisted_1$15 = [
 	"id",
 	"width",
 	"height"
 ];
-var _hoisted_2$6 = ["d", "stroke-dasharray"];
+var _hoisted_2$7 = ["d", "stroke-dasharray"];
 var _hoisted_3$2 = ["fill"];
 var _hoisted_4 = {
 	key: 0,
@@ -15314,7 +15729,7 @@ var FluxGridPattern_default = /* @__PURE__ */ defineComponent({
 					d: `M.5 ${__props.height}V.5H${__props.width}`,
 					fill: "none",
 					"stroke-dasharray": __props.strokeDasharray
-				}, null, 8, _hoisted_2$6)], 8, _hoisted_1$14)]),
+				}, null, 8, _hoisted_2$7)], 8, _hoisted_1$15)]),
 				createElementVNode("rect", {
 					width: "100%",
 					height: "100%",
@@ -15664,8 +16079,8 @@ var FluxOverlay_default = defineComponent({
 		return createDialogRenderer_default(attrs, props, emit, slots, clsx(props.size === "small" && Overlay_module_default.overlaySmall, props.size === "medium" && Overlay_module_default.overlayMedium, props.size === "large" && Overlay_module_default.overlayLarge), FluxOverlayTransition_default);
 	}
 });
-var _hoisted_1$13 = { key: 0 };
-var _hoisted_2$5 = { key: 1 };
+var _hoisted_1$14 = { key: 0 };
+var _hoisted_2$6 = { key: 1 };
 var FluxPaneHeader_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxPaneHeader",
 	props: {
@@ -15686,7 +16101,7 @@ var FluxPaneHeader_default = /* @__PURE__ */ defineComponent({
 				__props.title || __props.subTitle ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: normalizeClass(unref(Pane_module_default).paneHeaderCaption)
-				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$13, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subTitle ? (openBlock(), createElementBlock("span", _hoisted_2$5, toDisplayString(__props.subTitle), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$14, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subTitle ? (openBlock(), createElementBlock("span", _hoisted_2$6, toDisplayString(__props.subTitle), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "after")
 			], 2);
 		};
@@ -15923,7 +16338,7 @@ var FluxPaneIllustration_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$12 = ["src", "alt"];
+var _hoisted_1$13 = ["src", "alt"];
 var FluxPaneMedia_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxPaneMedia",
 	props: {
@@ -15946,7 +16361,7 @@ var FluxPaneMedia_default = /* @__PURE__ */ defineComponent({
 				}),
 				src: __props.imageUrl,
 				alt: __props.imageAlt
-			}, null, 14, _hoisted_1$12)) : createCommentVNode("", true)], 2);
+			}, null, 14, _hoisted_1$13)) : createCommentVNode("", true)], 2);
 		};
 	}
 });
@@ -15987,7 +16402,7 @@ var FluxPercentageBar_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$11 = { key: 0 };
+var _hoisted_1$12 = { key: 0 };
 var FluxPersona_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxPersona",
 	props: {
@@ -16025,12 +16440,12 @@ var FluxPersona_default = /* @__PURE__ */ defineComponent({
 			]), !__props.isCompact ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(unref(Avatar_module_default).personaDetails)
-			}, [createElementVNode("strong", null, toDisplayString(__props.name), 1), __props.title ? (openBlock(), createElementBlock("span", _hoisted_1$11, toDisplayString(__props.title), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2);
+			}, [createElementVNode("strong", null, toDisplayString(__props.name), 1), __props.title ? (openBlock(), createElementBlock("span", _hoisted_1$12, toDisplayString(__props.title), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2);
 		};
 	}
 });
-var _hoisted_1$10 = { key: 0 };
-var _hoisted_2$4 = { key: 1 };
+var _hoisted_1$11 = { key: 0 };
+var _hoisted_2$5 = { key: 1 };
 var FluxPlaceholder_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxPlaceholder",
 	props: {
@@ -16057,7 +16472,7 @@ var FluxPlaceholder_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Placeholder_module_default).placeholderIcon),
 					name: __props.icon
 				}, null, 8, ["class", "name"])) : createCommentVNode("", true),
-				createElementVNode("div", { class: normalizeClass(unref(Placeholder_module_default).placeholderCaption) }, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$10, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$4, toDisplayString(__props.message), 1)) : createCommentVNode("", true)], 2),
+				createElementVNode("div", { class: normalizeClass(unref(Placeholder_module_default).placeholderCaption) }, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$11, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$5, toDisplayString(__props.message), 1)) : createCommentVNode("", true)], 2),
 				renderSlot(_ctx.$slots, "default")
 			], 2);
 		};
@@ -16272,7 +16687,7 @@ var FluxPublishButton_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$9 = [
+var _hoisted_1$10 = [
 	"disabled",
 	"max",
 	"min",
@@ -16346,7 +16761,7 @@ var FluxQuantitySelector_default = /* @__PURE__ */ defineComponent({
 						max: __props.max,
 						min: __props.min,
 						step: __props.step
-					}, null, 14, _hoisted_1$9), [[vModelText, modelValue.value]]),
+					}, null, 14, _hoisted_1$10), [[vModelText, modelValue.value]]),
 					createVNode(FluxSecondaryButton_default, {
 						class: normalizeClass(unref(Form_module_default).quantitySelectorButton),
 						disabled: unref(disabled) || modelValue.value >= __props.max,
@@ -16389,7 +16804,7 @@ var Snackbar_module_default = {
 	snackbarsEnterFrom: `snackbars-enter-from`,
 	snackbarsLeaveTo: `snackbars-leave-to`
 };
-var _hoisted_1$8 = ["onClick"];
+var _hoisted_1$9 = ["onClick"];
 var FluxSnackbar_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxSnackbar",
 	props: {
@@ -16487,7 +16902,7 @@ var FluxSnackbar_default = /* @__PURE__ */ defineComponent({
 						tabindex: "-1",
 						type: "button",
 						onClick: ($event) => onAction(actionKey)
-					}, [createElementVNode("span", null, toDisplayString(actionLabel), 1)], 10, _hoisted_1$8);
+					}, [createElementVNode("span", null, toDisplayString(actionLabel), 1)], 10, _hoisted_1$9);
 				}), 128))], 2)) : createCommentVNode("", true),
 				__props.isCloseable ? (openBlock(), createBlock(FluxAction_default, {
 					key: 1,
@@ -16667,7 +17082,7 @@ var Root_module_default = {
 	root: `root`,
 	isLocked: `is-locked`
 };
-var _hoisted_1$7 = ["inert"];
+var _hoisted_1$8 = ["inert"];
 var FluxRoot_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "FluxRoot",
@@ -16683,7 +17098,7 @@ var FluxRoot_default = /* @__PURE__ */ defineComponent({
 				createElementVNode("div", mergeProps($attrs, {
 					class: unref(Root_module_default).root,
 					inert: unref(inertMain)
-				}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$7),
+				}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$8),
 				createVNode(FluxOverlayProvider_default),
 				createVNode(FluxSnackbarProvider_default),
 				createVNode(FluxTooltipProvider_default)
@@ -16759,7 +17174,7 @@ var SegmentedControl_module_default = {
 	isActive: `is-active`,
 	segmentedControlSeparator: `segmented-control-separator`
 };
-var _hoisted_1$6 = ["onClick"];
+var _hoisted_1$7 = ["onClick"];
 var FluxSegmentedControl_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxSegmentedControl",
 	props: /* @__PURE__ */ mergeModels({
@@ -16776,16 +17191,28 @@ var FluxSegmentedControl_default = /* @__PURE__ */ defineComponent({
 		const itemRefs = useTemplateRef("items");
 		const activeItemX = ref(0);
 		const activeItemWidth = ref(0);
-		onMounted(() => activate(unref(modelValue)));
-		onUpdated(() => activate(unref(modelValue)));
+		const isAlive = ref(true);
+		onBeforeUnmount(() => {
+			isAlive.value = false;
+		});
+		watchEffect(() => updateHighlight(unref(modelValue)), { flush: "post" });
+		ye$1(controlRef, () => updateHighlight(unref(modelValue)));
 		function activate(index) {
-			const itemRef = itemRefs.value[index];
-			const { left: controlX } = controlRef.value.getBoundingClientRect();
-			const { width, left: x } = itemRef.getBoundingClientRect();
-			activeItemX.value = x - controlX - 1;
-			activeItemWidth.value = width;
 			modelValue.value = index;
 		}
+		function updateHighlight(index) {
+			if (!isAlive.value) return;
+			const itemRef = itemRefs.value?.[index];
+			const control = controlRef.value;
+			if (!itemRef || !control) return;
+			const width = itemRef.offsetWidth;
+			if (width === 0) return;
+			const controlRect = control.getBoundingClientRect();
+			const itemRect = itemRef.getBoundingClientRect();
+			const scaleX = control.offsetWidth > 0 ? controlRect.width / control.offsetWidth : 1;
+			activeItemX.value = (itemRect.left - controlRect.left) / scaleX;
+			activeItemWidth.value = width;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("nav", {
 				ref: "control",
@@ -16812,7 +17239,7 @@ var FluxSegmentedControl_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					name: item.icon,
 					size: 15
-				}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(item.label), 1)], 10, _hoisted_1$6)], 64);
+				}, null, 8, ["name"])) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(item.label), 1)], 10, _hoisted_1$7)], 64);
 			}), 256))], 2);
 		};
 	}
@@ -16923,8 +17350,8 @@ var Statistic_module_default = {
 	statisticHorizontal: `statistic-horizontal statistic`,
 	statisticVertical: `statistic-vertical statistic`
 };
-var _hoisted_1$5 = { key: 1 };
-var _hoisted_2$3 = ["src", "alt"];
+var _hoisted_1$6 = { key: 1 };
+var _hoisted_2$4 = ["src", "alt"];
 var _hoisted_3$1 = { key: 0 };
 var FluxStatistic_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatistic",
@@ -16958,11 +17385,11 @@ var FluxStatistic_default = /* @__PURE__ */ defineComponent({
 						"class",
 						"color",
 						"name"
-					])) : __props.imageSrc ? (openBlock(), createElementBlock("div", _hoisted_1$5, [createElementVNode("img", {
+					])) : __props.imageSrc ? (openBlock(), createElementBlock("div", _hoisted_1$6, [createElementVNode("img", {
 						class: normalizeClass(unref(Statistic_module_default).statisticImage),
 						src: __props.imageSrc,
 						alt: __props.imageAlt
-					}, null, 10, _hoisted_2$3)])) : createCommentVNode("", true),
+					}, null, 10, _hoisted_2$4)])) : createCommentVNode("", true),
 					createElementVNode("div", { class: normalizeClass(unref(Statistic_module_default).statisticData) }, [createElementVNode("span", null, toDisplayString(__props.label), 1), createElementVNode("strong", null, toDisplayString(__props.value ?? unref(Z$2)), 1)], 2),
 					__props.changeIcon || __props.changeValue ? (openBlock(), createElementBlock("div", {
 						key: 2,
@@ -16996,8 +17423,8 @@ var Stepper_module_default = {
 	stepperStepsItemIdle: `stepper-steps-item-idle stepper-steps-item ${_0$1}`,
 	stepperStepsItemParticles: `stepper-steps-item-particles ${_2}`
 };
-var _hoisted_1$4 = ["onClick"];
-var _hoisted_2$2 = { key: 1 };
+var _hoisted_1$5 = ["onClick"];
+var _hoisted_2$3 = { key: 1 };
 var FluxStepperSteps_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStepperSteps",
 	props: {
@@ -17026,9 +17453,9 @@ var FluxStepperSteps_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [__props.current > step ? (openBlock(), createBlock(FluxIcon_default, {
 						key: 0,
 						name: "check"
-					})) : (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(step), 1))]),
+					})) : (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(step), 1))]),
 					_: 2
-				}, 1024)], 10, _hoisted_1$4);
+				}, 1024)], 10, _hoisted_1$5);
 			}), 128))], 6);
 		};
 	}
@@ -17186,7 +17613,7 @@ var FluxTabBar_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$3 = { key: 1 };
+var _hoisted_1$4 = { key: 1 };
 var FluxTabBarItem_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxTabBarItem",
 	props: {
@@ -17259,7 +17686,7 @@ var FluxTabBarItem_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					name: __props.icon,
 					size: 16
-				}, null, 8, ["name"])) : createCommentVNode("", true), __props.label ? (openBlock(), createElementBlock("span", _hoisted_1$3, toDisplayString(__props.label), 1)) : createCommentVNode("", true)]),
+				}, null, 8, ["name"])) : createCommentVNode("", true), __props.label ? (openBlock(), createElementBlock("span", _hoisted_1$4, toDisplayString(__props.label), 1)) : createCommentVNode("", true)]),
 				_: 1
 			}, 8, [
 				"component-type",
@@ -17359,7 +17786,7 @@ var FluxTableBar_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$2 = ["aria-label", "onClick"];
+var _hoisted_1$3 = ["aria-label", "onClick"];
 var FluxTableHeader_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxTableHeader",
 	props: {
@@ -17394,7 +17821,7 @@ var FluxTableHeader_default = /* @__PURE__ */ defineComponent({
 				}, [createVNode(FluxIcon_default, {
 					size: 16,
 					name: sortingIcon.value
-				}, null, 8, ["name"])], 10, _hoisted_1$2)]),
+				}, null, 8, ["name"])], 10, _hoisted_1$3)]),
 				default: withCtx(() => [createVNode(FluxMenu_default, null, {
 					default: withCtx(() => [createVNode(FluxMenuGroup_default, null, {
 						default: withCtx(() => [createVNode(FluxMenuItem_default, {
@@ -17468,8 +17895,8 @@ var FluxTimeline_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var _hoisted_1$1 = ["src"];
-var _hoisted_2$1 = { key: 0 };
+var _hoisted_1$2 = ["src"];
+var _hoisted_2$2 = { key: 0 };
 var _hoisted_3 = { key: 1 };
 var FluxTimelineItem_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxTimelineItem",
@@ -17494,7 +17921,7 @@ var FluxTimelineItem_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Timeline_module_default).timelineItemPhotoImage),
 					src: __props.photo,
 					alt: ""
-				}, null, 10, _hoisted_1$1), __props.icon ? (openBlock(), createElementBlock("div", {
+				}, null, 10, _hoisted_1$2), __props.icon ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(unref(Timeline_module_default).timelineItemPhotoIcon)
 				}, [createVNode(FluxIcon_default, {
@@ -17510,13 +17937,13 @@ var FluxTimelineItem_default = /* @__PURE__ */ defineComponent({
 				createElementVNode("div", { class: normalizeClass(unref(Timeline_module_default).timelineItemBody) }, [__props.title || __props.when ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(unref(Timeline_module_default).timelineItemHeader)
-				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_2$1, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.when ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.when), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 2)
+				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_2$2, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.when ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.when), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 2)
 			], 2);
 		};
 	}
 });
-var _hoisted_1 = ["for", "aria-disabled"];
-var _hoisted_2 = [
+var _hoisted_1$1 = ["for", "aria-disabled"];
+var _hoisted_2$1 = [
 	"id",
 	"disabled",
 	"checked",
@@ -17571,8 +17998,8 @@ var FluxToggle_default = /* @__PURE__ */ defineComponent({
 					role: "switch",
 					"aria-checked": modelValue.value,
 					onInput: toggle
-				}, null, 42, _hoisted_2)
-			], 10, _hoisted_1);
+				}, null, 42, _hoisted_2$1)
+			], 10, _hoisted_1$1);
 		};
 	}
 });
@@ -17623,6 +18050,111 @@ var FluxToolbarGroup_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-export { FluxAction_default as FluxAction, FluxActionBar_default as FluxActionBar, FluxActionPane_default as FluxActionPane, FluxActions_default as FluxActions, FluxAnimatedColors_default as FluxAnimatedColors, FluxAspectRatio_default as FluxAspectRatio, FluxAutoGrid_default as FluxAutoGrid, FluxAutoHeightTransition_default as FluxAutoHeightTransition, FluxAutoWidthTransition_default as FluxAutoWidthTransition, FluxAvatar_default as FluxAvatar, FluxBadge_default as FluxBadge, FluxBadgeStack_default as FluxBadgeStack, FluxBorderShine_default as FluxBorderShine, FluxBoxedIcon_default as FluxBoxedIcon, FluxBreakthroughTransition_default as FluxBreakthroughTransition, FluxButton_default as FluxButton, FluxButtonGroup_default as FluxButtonGroup, FluxButtonStack_default as FluxButtonStack, FluxCalendar_default as FluxCalendar, FluxCalendarEvent_default as FluxCalendarEvent, FluxCheckbox_default as FluxCheckbox, FluxChip_default as FluxChip, FluxClickablePane_default as FluxClickablePane, FluxColorPicker_default as FluxColorPicker, FluxColorSelect_default as FluxColorSelect, FluxComment_default as FluxComment, FluxContainer_default as FluxContainer, FluxDataTable_default as FluxDataTable, FluxDatePicker_default as FluxDatePicker, FluxDestructiveButton_default as FluxDestructiveButton, FluxDisabled_default as FluxDisabled, FluxDivider_default as FluxDivider, FluxDotPattern_default as FluxDotPattern, FluxDropZone_default as FluxDropZone, FluxDynamicView_default as FluxDynamicView, FluxExpandable_default as FluxExpandable, FluxExpandableGroup_default as FluxExpandableGroup, FluxFadeTransition_default as FluxFadeTransition, FluxFader_default as FluxFader, FluxFaderItem_default as FluxFaderItem, FluxFilter_default as FluxFilter, FluxFilterBar_default as FluxFilterBar, FluxFilterDate_default as FluxFilterDate, FluxFilterDateRange_default as FluxFilterDateRange, FluxFilterOption_default as FluxFilterOption, FluxFilterOptionAsync_default as FluxFilterOptionAsync, FluxFilterOptions_default as FluxFilterOptions, FluxFilterOptionsAsync_default as FluxFilterOptionsAsync, FluxFilterRange_default as FluxFilterRange, FluxFlickeringGrid_default as FluxFlickeringGrid, FluxFlyout_default as FluxFlyout, FluxFocalPointEditor_default as FluxFocalPointEditor, FluxFocalPointImage_default as FluxFocalPointImage, FluxForm_default as FluxForm, FluxFormColumn_default as FluxFormColumn, FluxFormDateInput_default as FluxFormDateInput, FluxFormDateRangeInput_default as FluxFormDateRangeInput, FluxFormDateTimeInput_default as FluxFormDateTimeInput, FluxFormField_default as FluxFormField, FluxFormFieldAddition_default as FluxFormFieldAddition, FluxFormGrid_default as FluxFormGrid, FluxFormInput_default as FluxFormInput, FluxFormInputAddition_default as FluxFormInputAddition, FluxFormInputGroup_default as FluxFormInputGroup, FluxFormPinInput_default as FluxFormPinInput, FluxFormRangeSlider_default as FluxFormRangeSlider, FluxFormRow_default as FluxFormRow, FluxFormSection_default as FluxFormSection, FluxFormSelect_default as FluxFormSelect, FluxFormSelectAsync_default as FluxFormSelectAsync, FluxFormSlider_default as FluxFormSlider, FluxFormTextArea_default as FluxFormTextArea, FluxFormTimeZonePicker_default as FluxFormTimeZonePicker, FluxGallery_default as FluxGallery, FluxGalleryItem_default as FluxGalleryItem, FluxGrid_default as FluxGrid, FluxGridColumn_default as FluxGridColumn, FluxGridPattern_default as FluxGridPattern, FluxIcon_default as FluxIcon, FluxInfo_default as FluxInfo, FluxInfoStack_default as FluxInfoStack, FluxItem_default as FluxItem, FluxItemActions_default as FluxItemActions, FluxItemContent_default as FluxItemContent, FluxItemMedia_default as FluxItemMedia, FluxItemStack_default as FluxItemStack, FluxLegend_default as FluxLegend, FluxLink_default as FluxLink, FluxMenu_default as FluxMenu, FluxMenuGroup_default as FluxMenuGroup, FluxMenuItem_default as FluxMenuItem, FluxMenuOptions_default as FluxMenuOptions, FluxMenuSubHeader_default as FluxMenuSubHeader, FluxMenuTitle_default as FluxMenuTitle, FluxNotice_default as FluxNotice, FluxNoticeStack_default as FluxNoticeStack, FluxOverflowBar_default as FluxOverflowBar, FluxOverlay_default as FluxOverlay, FluxOverlayProvider_default as FluxOverlayProvider, FluxOverlayTransition_default as FluxOverlayTransition, FluxPagination_default as FluxPagination, FluxPaginationBar_default as FluxPaginationBar, FluxPane_default as FluxPane, FluxPaneBody_default as FluxPaneBody, FluxPaneDeck_default as FluxPaneDeck, FluxPaneFooter_default as FluxPaneFooter, FluxPaneGroup_default as FluxPaneGroup, FluxPaneHeader_default as FluxPaneHeader, FluxPaneIllustration_default as FluxPaneIllustration, FluxPaneMedia_default as FluxPaneMedia, FluxPercentageBar_default as FluxPercentageBar, FluxPersona_default as FluxPersona, FluxPlaceholder_default as FluxPlaceholder, FluxPressable_default as FluxPressable, FluxPrimaryButton_default as FluxPrimaryButton, FluxPrimaryLinkButton_default as FluxPrimaryLinkButton, FluxProgressBar_default as FluxProgressBar, FluxPublishButton_default as FluxPublishButton, FluxQuantitySelector_default as FluxQuantitySelector, FluxRemove_default as FluxRemove, FluxRoot_default as FluxRoot, FluxRouteTransition_default as FluxRouteTransition, FluxSecondaryButton_default as FluxSecondaryButton, FluxSecondaryLinkButton_default as FluxSecondaryLinkButton, FluxSegmentedControl_default as FluxSegmentedControl, FluxSegmentedView_default as FluxSegmentedView, FluxSeparator_default as FluxSeparator, FluxSlideOver_default as FluxSlideOver, FluxSlideOverTransition_default as FluxSlideOverTransition, FluxSnackbar_default as FluxSnackbar, FluxSnackbarProvider_default as FluxSnackbarProvider, FluxSpacer_default as FluxSpacer, FluxSpacing_default as FluxSpacing, FluxSpinner_default as FluxSpinner, FluxSplitButton_default as FluxSplitButton, FluxStack_default as FluxStack, FluxStatistic_default as FluxStatistic, FluxStepper_default as FluxStepper, FluxStepperStep_default as FluxStepperStep, FluxStepperSteps_default as FluxStepperSteps, FluxTab_default as FluxTab, FluxTabBar_default as FluxTabBar, FluxTabBarItem_default as FluxTabBarItem, FluxTable_default as FluxTable, FluxTableActions_default as FluxTableActions, FluxTableBar_default as FluxTableBar, FluxTableCell_default as FluxTableCell, FluxTableHeader_default as FluxTableHeader, FluxTableRow_default as FluxTableRow, FluxTabs_default as FluxTabs, FluxTag_default as FluxTag, FluxTagStack_default as FluxTagStack, FluxTicks_default as FluxTicks, FluxTimeline_default as FluxTimeline, FluxTimelineItem_default as FluxTimelineItem, FluxToggle_default as FluxToggle, FluxToolbar_default as FluxToolbar, FluxToolbarGroup_default as FluxToolbarGroup, FluxTooltip_default as FluxTooltip, FluxTooltipProvider_default as FluxTooltipProvider, FluxTooltipTransition_default as FluxTooltipTransition, FluxVerticalWindowTransition_default as FluxVerticalWindowTransition, FluxWindow_default as FluxWindow, FluxWindowTransition_default as FluxWindowTransition, fluxRegisterIcons, isFluxFormSelectGroup, isFluxFormSelectOption, showAlert, showConfirm, showPrompt, showSnackbar, useBreakpoints_default as useBreakpoints, useDisabled_default as useDisabled, useDisabledInjection_default as useDisabledInjection, useExpandableGroupInjection_default as useExpandableGroupInjection, useFilterInjection_default as useFilterInjection, useFluxStore, useFlyoutInjection_default as useFlyoutInjection, useFormFieldInjection_default as useFormFieldInjection, useTableInjection_default as useTableInjection, useTooltipInjection_default as useTooltipInjection };
+var TreeView_module_default = {
+	treeView: `tree-view`,
+	treeNode: `tree-node`,
+	isHighlighted: `is-highlighted`,
+	treeNodeLineArea: `tree-node-line-area`,
+	treeIndent: `tree-indent`,
+	hasLine: `has-line`,
+	treeConnector: `tree-connector`,
+	isLast: `is-last`,
+	treeNodeExpand: `tree-node-expand`,
+	treeNodeColorDot: `tree-node-color-dot`,
+	treeNodeIcon: `tree-node-icon`,
+	treeNodeLabel: `tree-node-label`
+};
+var _hoisted_1 = [
+	"aria-expanded",
+	"onClick",
+	"onDblclick"
+];
+var _hoisted_2 = ["onClick"];
+var FluxTreeView_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxTreeView",
+	props: {
+		levelColors: {},
+		options: {}
+	},
+	emits: ["click", "dblclick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const nodeElementRefs = useTemplateRef("nodeElements");
+		const expandedIds = ref(/* @__PURE__ */ new Set());
+		const visibleNodes = computed(() => flattenVisible(__props.options, 0, unref(expandedIds)));
+		const { highlightedIndex, toggleExpand, onExpandClick, onKeyNavigate } = useTreeView({
+			expandedIds,
+			nodeElementRefs,
+			visibleNodes
+		});
+		function onNodeClick(node) {
+			highlightedIndex.value = unref(visibleNodes).findIndex((n) => n.id === node.id);
+			const { depth: _depth, isLast: _isLast, lineGuides: _lineGuides, ...option } = node;
+			emit("click", option);
+		}
+		function onNodeDblClick(node) {
+			if (node.children?.length) toggleExpand(node.id);
+			const { depth: _depth, isLast: _isLast, lineGuides: _lineGuides, ...option } = node;
+			emit("dblclick", option);
+		}
+		function onKeyDown(evt) {
+			onKeyNavigate(evt, onNodeClick);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(TreeView_module_default).treeView),
+				role: "tree",
+				tabindex: "0",
+				onKeydown: onKeyDown
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleNodes.value, (node, nodeIndex) => {
+				return openBlock(), createElementBlock("div", {
+					ref_for: true,
+					ref: "nodeElements",
+					key: node.id,
+					class: normalizeClass(unref(clsx)(unref(TreeView_module_default).treeNode, nodeIndex === unref(highlightedIndex) && unref(TreeView_module_default).isHighlighted)),
+					role: "treeitem",
+					tabindex: "-1",
+					"aria-expanded": node.children?.length ? expandedIds.value.has(node.id) : void 0,
+					onClick: ($event) => onNodeClick(node),
+					onDblclick: ($event) => onNodeDblClick(node)
+				}, [
+					createElementVNode("div", { class: normalizeClass(unref(TreeView_module_default).treeNodeLineArea) }, [
+						(openBlock(true), createElementBlock(Fragment, null, renderList(node.lineGuides, (showLine, guideIndex) => {
+							return openBlock(), createElementBlock("span", {
+								key: `g-${guideIndex}`,
+								class: normalizeClass([unref(TreeView_module_default).treeIndent, showLine && unref(TreeView_module_default).hasLine])
+							}, null, 2);
+						}), 128)),
+						node.depth > 0 ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							class: normalizeClass([unref(TreeView_module_default).treeConnector, node.isLast && unref(TreeView_module_default).isLast])
+						}, null, 2)) : createCommentVNode("", true),
+						createElementVNode("span", {
+							class: normalizeClass(unref(TreeView_module_default).treeNodeExpand),
+							onClick: ($event) => unref(onExpandClick)(node, $event)
+						}, [node.children?.length ? (openBlock(), createBlock(FluxIcon_default, {
+							key: 0,
+							name: expandedIds.value.has(node.id) ? "angle-down" : "angle-right",
+							size: 12
+						}, null, 8, ["name"])) : createCommentVNode("", true)], 10, _hoisted_2)
+					], 2),
+					unref(getLevelColor)(node.depth, __props.levelColors) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(TreeView_module_default).treeNodeColorDot),
+						style: normalizeStyle({ background: unref(getLevelColor)(node.depth, __props.levelColors) })
+					}, null, 6)) : createCommentVNode("", true),
+					node.icon ? (openBlock(), createBlock(FluxIcon_default, {
+						key: 1,
+						class: normalizeClass(unref(TreeView_module_default).treeNodeIcon),
+						name: node.icon,
+						size: 16
+					}, null, 8, ["class", "name"])) : createCommentVNode("", true),
+					createElementVNode("span", { class: normalizeClass(unref(TreeView_module_default).treeNodeLabel) }, toDisplayString(node.label), 3)
+				], 42, _hoisted_1);
+			}), 128))], 34);
+		};
+	}
+});
+export { FluxAction_default as FluxAction, FluxActionBar_default as FluxActionBar, FluxActionPane_default as FluxActionPane, FluxActions_default as FluxActions, FluxAnimatedColors_default as FluxAnimatedColors, FluxAspectRatio_default as FluxAspectRatio, FluxAutoGrid_default as FluxAutoGrid, FluxAutoHeightTransition_default as FluxAutoHeightTransition, FluxAutoWidthTransition_default as FluxAutoWidthTransition, FluxAvatar_default as FluxAvatar, FluxBadge_default as FluxBadge, FluxBadgeStack_default as FluxBadgeStack, FluxBorderShine_default as FluxBorderShine, FluxBoxedIcon_default as FluxBoxedIcon, FluxBreakthroughTransition_default as FluxBreakthroughTransition, FluxButton_default as FluxButton, FluxButtonGroup_default as FluxButtonGroup, FluxButtonStack_default as FluxButtonStack, FluxCalendar_default as FluxCalendar, FluxCalendarEvent_default as FluxCalendarEvent, FluxCheckbox_default as FluxCheckbox, FluxChip_default as FluxChip, FluxClickablePane_default as FluxClickablePane, FluxColorPicker_default as FluxColorPicker, FluxColorSelect_default as FluxColorSelect, FluxComment_default as FluxComment, FluxContainer_default as FluxContainer, FluxDataTable_default as FluxDataTable, FluxDatePicker_default as FluxDatePicker, FluxDestructiveButton_default as FluxDestructiveButton, FluxDisabled_default as FluxDisabled, FluxDivider_default as FluxDivider, FluxDotPattern_default as FluxDotPattern, FluxDropZone_default as FluxDropZone, FluxDynamicView_default as FluxDynamicView, FluxExpandable_default as FluxExpandable, FluxExpandableGroup_default as FluxExpandableGroup, FluxFadeTransition_default as FluxFadeTransition, FluxFader_default as FluxFader, FluxFaderItem_default as FluxFaderItem, FluxFilter_default as FluxFilter, FluxFilterBar_default as FluxFilterBar, FluxFilterDate_default as FluxFilterDate, FluxFilterDateRange_default as FluxFilterDateRange, FluxFilterOption_default as FluxFilterOption, FluxFilterOptionAsync_default as FluxFilterOptionAsync, FluxFilterOptions_default as FluxFilterOptions, FluxFilterOptionsAsync_default as FluxFilterOptionsAsync, FluxFilterRange_default as FluxFilterRange, FluxFlickeringGrid_default as FluxFlickeringGrid, FluxFlyout_default as FluxFlyout, FluxFocalPointEditor_default as FluxFocalPointEditor, FluxFocalPointImage_default as FluxFocalPointImage, FluxForm_default as FluxForm, FluxFormColumn_default as FluxFormColumn, FluxFormDateInput_default as FluxFormDateInput, FluxFormDateRangeInput_default as FluxFormDateRangeInput, FluxFormDateTimeInput_default as FluxFormDateTimeInput, FluxFormField_default as FluxFormField, FluxFormFieldAddition_default as FluxFormFieldAddition, FluxFormGrid_default as FluxFormGrid, FluxFormInput_default as FluxFormInput, FluxFormInputAddition_default as FluxFormInputAddition, FluxFormInputGroup_default as FluxFormInputGroup, FluxFormPinInput_default as FluxFormPinInput, FluxFormRangeSlider_default as FluxFormRangeSlider, FluxFormRow_default as FluxFormRow, FluxFormSection_default as FluxFormSection, FluxFormSelect_default as FluxFormSelect, FluxFormSelectAsync_default as FluxFormSelectAsync, FluxFormSlider_default as FluxFormSlider, FluxFormTextArea_default as FluxFormTextArea, FluxFormTimeZonePicker_default as FluxFormTimeZonePicker, FluxFormTreeViewSelect_default as FluxFormTreeViewSelect, FluxGallery_default as FluxGallery, FluxGalleryItem_default as FluxGalleryItem, FluxGrid_default as FluxGrid, FluxGridColumn_default as FluxGridColumn, FluxGridPattern_default as FluxGridPattern, FluxIcon_default as FluxIcon, FluxInfo_default as FluxInfo, FluxInfoStack_default as FluxInfoStack, FluxItem_default as FluxItem, FluxItemActions_default as FluxItemActions, FluxItemContent_default as FluxItemContent, FluxItemMedia_default as FluxItemMedia, FluxItemStack_default as FluxItemStack, FluxLegend_default as FluxLegend, FluxLink_default as FluxLink, FluxMenu_default as FluxMenu, FluxMenuGroup_default as FluxMenuGroup, FluxMenuItem_default as FluxMenuItem, FluxMenuOptions_default as FluxMenuOptions, FluxMenuSubHeader_default as FluxMenuSubHeader, FluxMenuTitle_default as FluxMenuTitle, FluxNotice_default as FluxNotice, FluxNoticeStack_default as FluxNoticeStack, FluxOverflowBar_default as FluxOverflowBar, FluxOverlay_default as FluxOverlay, FluxOverlayProvider_default as FluxOverlayProvider, FluxOverlayTransition_default as FluxOverlayTransition, FluxPagination_default as FluxPagination, FluxPaginationBar_default as FluxPaginationBar, FluxPane_default as FluxPane, FluxPaneBody_default as FluxPaneBody, FluxPaneDeck_default as FluxPaneDeck, FluxPaneFooter_default as FluxPaneFooter, FluxPaneGroup_default as FluxPaneGroup, FluxPaneHeader_default as FluxPaneHeader, FluxPaneIllustration_default as FluxPaneIllustration, FluxPaneMedia_default as FluxPaneMedia, FluxPercentageBar_default as FluxPercentageBar, FluxPersona_default as FluxPersona, FluxPlaceholder_default as FluxPlaceholder, FluxPressable_default as FluxPressable, FluxPrimaryButton_default as FluxPrimaryButton, FluxPrimaryLinkButton_default as FluxPrimaryLinkButton, FluxProgressBar_default as FluxProgressBar, FluxPublishButton_default as FluxPublishButton, FluxQuantitySelector_default as FluxQuantitySelector, FluxRemove_default as FluxRemove, FluxRoot_default as FluxRoot, FluxRouteTransition_default as FluxRouteTransition, FluxSecondaryButton_default as FluxSecondaryButton, FluxSecondaryLinkButton_default as FluxSecondaryLinkButton, FluxSegmentedControl_default as FluxSegmentedControl, FluxSegmentedView_default as FluxSegmentedView, FluxSeparator_default as FluxSeparator, FluxSlideOver_default as FluxSlideOver, FluxSlideOverTransition_default as FluxSlideOverTransition, FluxSnackbar_default as FluxSnackbar, FluxSnackbarProvider_default as FluxSnackbarProvider, FluxSpacer_default as FluxSpacer, FluxSpacing_default as FluxSpacing, FluxSpinner_default as FluxSpinner, FluxSplitButton_default as FluxSplitButton, FluxStack_default as FluxStack, FluxStatistic_default as FluxStatistic, FluxStepper_default as FluxStepper, FluxStepperStep_default as FluxStepperStep, FluxStepperSteps_default as FluxStepperSteps, FluxTab_default as FluxTab, FluxTabBar_default as FluxTabBar, FluxTabBarItem_default as FluxTabBarItem, FluxTable_default as FluxTable, FluxTableActions_default as FluxTableActions, FluxTableBar_default as FluxTableBar, FluxTableCell_default as FluxTableCell, FluxTableHeader_default as FluxTableHeader, FluxTableRow_default as FluxTableRow, FluxTabs_default as FluxTabs, FluxTag_default as FluxTag, FluxTagStack_default as FluxTagStack, FluxTicks_default as FluxTicks, FluxTimeline_default as FluxTimeline, FluxTimelineItem_default as FluxTimelineItem, FluxToggle_default as FluxToggle, FluxToolbar_default as FluxToolbar, FluxToolbarGroup_default as FluxToolbarGroup, FluxTooltip_default as FluxTooltip, FluxTooltipProvider_default as FluxTooltipProvider, FluxTooltipTransition_default as FluxTooltipTransition, FluxTreeView_default as FluxTreeView, FluxVerticalWindowTransition_default as FluxVerticalWindowTransition, FluxWindow_default as FluxWindow, FluxWindowTransition_default as FluxWindowTransition, fluxRegisterIcons, isFluxFormSelectGroup, isFluxFormSelectOption, showAlert, showConfirm, showPrompt, showSnackbar, useBreakpoints_default as useBreakpoints, useDisabled_default as useDisabled, useDisabledInjection_default as useDisabledInjection, useExpandableGroupInjection_default as useExpandableGroupInjection, useFilterInjection_default as useFilterInjection, useFluxStore, useFlyoutInjection_default as useFlyoutInjection, useFormFieldInjection_default as useFormFieldInjection, useTableInjection_default as useTableInjection, useTooltipInjection_default as useTooltipInjection };
 
 //# sourceMappingURL=index.js.map