@flux-ui/components 3.0.0-next.63 → 3.0.0-next.64

package/dist/index.js

@@ -7696,13 +7696,13 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Action.module.scss
-var { "button": _0$15, "buttonLabel": _1$6, "buttonIcon": _2$5 } = Button_module_default$1;
+var { "button": _0$15, "buttonIcon": _1$6, "buttonLabel": _2$5 } = Button_module_default$1;
 var Action_module_default = {
 	action: `action ${_0$15}`,
 	spinner: `spinner`,
-	actionIcon: `action-icon ${_2$5}`,
+	actionIcon: `action-icon ${_1$6}`,
 	isDestructive: `is-destructive`,
-	actionLabel: `action-label ${_1$6}`,
+	actionLabel: `action-label ${_2$5}`,
 	actionBar: `action-bar`,
 	separator: `separator`,
 	formInput: `form-input`,
@@ -9068,32 +9068,32 @@ function useTreeView(params) {
 }
 //#endregion
 //#region src/css/component/Button.module.scss
-var { "button": _0$14, "buttonIcon": _1$5, "buttonLabel": _2$4 } = Button_module_default$1;
+var { "buttonLabel": _0$14, "button": _1$5, "buttonIcon": _2$4 } = Button_module_default$1;
 var Button_module_default = {
-	primaryButton: `primary-button ${_0$14}`,
+	primaryButton: `primary-button ${_1$5}`,
 	spinner: `spinner`,
-	primaryButtonIcon: `primary-button-icon ${_1$5}`,
-	primaryButtonLabel: `primary-button-label ${_2$4}`,
-	secondaryButton: `secondary-button ${_0$14}`,
-	secondaryButtonIcon: `secondary-button-icon ${_1$5}`,
-	secondaryButtonLabel: `secondary-button-label ${_2$4}`,
-	destructiveButton: `destructive-button ${_0$14}`,
-	destructiveButtonIcon: `destructive-button-icon ${_1$5}`,
-	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$5}`,
-	primaryLinkButtonLabel: `primary-link-button-label ${_2$4}`,
-	secondaryLinkButton: `secondary-link-button base-link-button ${_0$14}`,
-	secondaryLinkButtonIcon: `secondary-link-button-icon ${_1$5}`,
-	secondaryLinkButtonLabel: `secondary-link-button-label ${_2$4}`,
-	linkButton: `link-button ${_0$14}`,
-	linkButtonIcon: `link-button-icon ${_1$5}`,
+	primaryButtonIcon: `primary-button-icon ${_2$4}`,
+	primaryButtonLabel: `primary-button-label ${_0$14}`,
+	secondaryButton: `secondary-button ${_1$5}`,
+	secondaryButtonIcon: `secondary-button-icon ${_2$4}`,
+	secondaryButtonLabel: `secondary-button-label ${_0$14}`,
+	destructiveButton: `destructive-button ${_1$5}`,
+	destructiveButtonIcon: `destructive-button-icon ${_2$4}`,
+	destructiveButtonLabel: `destructive-button-label ${_0$14}`,
+	baseLinkButton: `base-link-button ${_1$5}`,
+	primaryLinkButton: `primary-link-button base-link-button ${_1$5}`,
+	primaryLinkButtonIcon: `primary-link-button-icon ${_2$4}`,
+	primaryLinkButtonLabel: `primary-link-button-label ${_0$14}`,
+	secondaryLinkButton: `secondary-link-button base-link-button ${_1$5}`,
+	secondaryLinkButtonIcon: `secondary-link-button-icon ${_2$4}`,
+	secondaryLinkButtonLabel: `secondary-link-button-label ${_0$14}`,
+	linkButton: `link-button ${_1$5}`,
+	linkButtonIcon: `link-button-icon ${_2$4}`,
 	icon: `icon`,
-	linkButtonLabel: `link-button-label ${_2$4}`,
-	publishButton: `publish-button primary-button ${_0$14}`,
-	publishButtonIcon: `publish-button-icon primary-button-icon ${_1$5}`,
-	publishButtonLabel: `publish-button-label primary-button-label ${_2$4}`,
+	linkButtonLabel: `link-button-label ${_0$14}`,
+	publishButton: `publish-button primary-button ${_1$5}`,
+	publishButtonIcon: `publish-button-icon primary-button-icon ${_2$4}`,
+	publishButtonLabel: `publish-button-label primary-button-label ${_0$14}`,
 	publishButtonAnimation: `publish-button-animation`,
 	isDone: `is-done`,
 	publishButtonAnimationArrow: `publish-button-animation-arrow`,
@@ -9227,1124 +9227,1127 @@ var FluxFlex_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/css/component/Pane.module.scss
-var { "basePaneStructure": _0$13, "basePaneElement": _1$4, "basePaneLoader": _2$3 } = Pane_module_default$1;
-var Pane_module_default = {
-	pane: `pane ${_0$13}`,
-	paneDefault: `pane-default pane ${_0$13}`,
-	paneFlat: `pane-flat pane ${_0$13}`,
-	paneWell: `pane-well pane ${_0$13}`,
-	paneHeader: `pane-header ${_1$4}`,
-	paneBody: `pane-body ${_1$4}`,
-	paneHeaderCaption: `pane-header-caption`,
-	paneHeaderIcon: `pane-header-icon`,
-	paneFooter: `pane-footer ${_1$4}`,
-	paneLoader: `pane-loader ${_2$3}`,
-	paneTag: `pane-tag`,
-	paneMedia: `pane-media`,
-	paneMediaDefault: `pane-media-default pane-media`,
-	paneMediaInset: `pane-media-inset pane-media`,
-	paneMediaImage: `pane-media-image`,
-	paneGroup: `pane-group`,
-	paneIllustration: `pane-illustration`,
-	paneIllustrationContent: `pane-illustration-content`,
-	paneIllustrationContentControlled: `pane-illustration-content-controlled pane-illustration-content`,
-	paneIllustrationMagic: `pane-illustration-magic`,
-	paneIllustrationMasked: `pane-illustration-masked pane-illustration`,
-	iconBoxed: `icon-boxed`
-};
-//#endregion
-//#region src/component/FluxPane.vue
-var FluxPane_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxPane",
-	props: {
-		isLoading: { type: Boolean },
-		tag: {},
-		variant: { default: "default" }
-	},
+//#region src/transition/FluxAutoHeightTransition.vue
+var FluxAutoHeightTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAutoHeightTransition",
 	setup(__props) {
-		const CLASS_MAP = {
-			default: Pane_module_default.paneDefault,
-			flat: Pane_module_default.paneFlat,
-			well: Pane_module_default.paneWell
-		};
+		function afterEnter(elm) {
+			if (!R$2(elm)) return;
+			elm.style.height = "auto";
+		}
+		function enter(elm) {
+			if (!R$2(elm)) return;
+			const { width } = getComputedStyle(elm);
+			elm.style.position = "absolute";
+			elm.style.width = width;
+			elm.style.height = "auto";
+			elm.style.visibility = "hidden";
+			const { height } = getComputedStyle(elm);
+			elm.style.removeProperty("position");
+			elm.style.removeProperty("width");
+			elm.style.removeProperty("visibility");
+			elm.style.height = "0";
+			getComputedStyle(elm);
+			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.height = height));
+		}
+		function leave(elm) {
+			if (!R$2(elm)) return;
+			const { height } = getComputedStyle(elm);
+			elm.style.height = height;
+			getComputedStyle(elm);
+			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.height = "0"));
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(CLASS_MAP[__props.variant]) }, [
-				renderSlot(_ctx.$slots, "default"),
-				__props.isLoading ? renderSlot(_ctx.$slots, "loader", { key: 0 }, () => [createElementVNode("div", { class: normalizeClass(unref(Pane_module_default).paneLoader) }, [createVNode(FluxSpinner_default)], 2)]) : createCommentVNode("", true),
-				__props.tag ? (openBlock(), createElementBlock("div", {
-					key: 1,
-					class: normalizeClass(unref(Pane_module_default).paneTag)
-				}, toDisplayString(__props.tag), 3)) : createCommentVNode("", true)
-			], 2);
+			return openBlock(), createBlock(Transition, {
+				onAfterEnter: afterEnter,
+				onEnter: enter,
+				onLeave: leave
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			});
 		};
 	}
 });
-var Flyout_module_default = {
-	flyout: `flyout`,
-	flyoutDialog: `flyout-dialog`,
-	flyoutPane: `flyout-pane`,
-	isAutoWidth: `is-auto-width`,
-	isClosing: `is-closing`,
-	close: `close`,
-	isOpening: `is-opening`,
-	open: `open`,
-	mobileClose: `mobile-close`,
-	mobileOpen: `mobile-open`
-};
-//#endregion
-//#region src/component/FluxFlyout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$60 = ["onKeydown"];
 //#endregion
-//#region src/component/FluxFlyout.vue
-var FluxFlyout_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxFlyout",
-	props: {
-		direction: { default: "vertical" },
-		isAutoWidth: { type: Boolean },
-		margin: { default: 9 },
-		width: {}
-	},
-	setup(__props, { expose: __expose }) {
-		const dialogRef = useTemplateRef("dialog");
-		const mountRef = useTemplateRef("mount");
-		const paneRef = useTemplateRef("pane");
-		const isClosing = ref(false);
-		const isOpening = ref(false);
-		const isOpen = ref(false);
-		const openerWidth = ref(0);
-		const openerHeight = ref(0);
-		const paneX = ref(0);
-		const paneY = ref(0);
-		const paneMarginX = ref(0);
-		const paneMarginY = ref(0);
-		!S$3 && D$1(ref(window), "resize", () => unref(isOpen) && reposition());
-		F$1(paneRef);
-		function close() {
-			const pane = _$3(paneRef);
-			if (!pane) return;
-			pane.addEventListener("animationend", () => {
-				isClosing.value = false;
-				isOpen.value = false;
-			}, { once: true });
-			isClosing.value = true;
-		}
-		function open() {
-			const { width, height } = unref(mountRef).children[0].getBoundingClientRect();
-			isOpen.value = true;
-			openerWidth.value = width;
-			openerHeight.value = height;
-			requestAnimationFrame(() => {
-				_$3(paneRef).addEventListener("animationend", () => {
-					isOpening.value = false;
-				}, { once: true });
-				isOpening.value = true;
-			});
-			requestAnimationFrame(reposition);
-		}
-		function reposition() {
-			const mount = unref(mountRef);
-			const pane = _$3(paneRef);
-			const { top, left, width, height } = mount.children[0].getBoundingClientRect();
-			const { width: paneWidth, height: paneHeight } = pane.getBoundingClientRect();
-			let x, y, mx = 0, my = 0;
-			if (__props.direction === "horizontal") {
-				x = left + width;
-				y = top + height / 2 - paneHeight / 2;
-				mx = __props.margin;
-				if (x + paneWidth > innerWidth - 12) {
-					x = left - paneWidth;
-					mx = -mx;
-				}
-			} else {
-				x = left + width / 2 - paneWidth / 2;
-				y = top + height;
-				my = __props.margin;
-				if (y + paneHeight > innerHeight - 12) {
-					y = top - paneHeight;
-					my = -my;
-				}
-			}
-			paneX.value = Math.max(12, Math.min(innerWidth - paneWidth - 12, x));
-			paneY.value = Math.max(12, Math.min(innerHeight - paneHeight - 12, y));
-			paneMarginX.value = mx;
-			paneMarginY.value = my;
+//#region src/transition/FluxAutoWidthTransition.vue
+var FluxAutoWidthTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAutoWidthTransition",
+	setup(__props) {
+		function afterEnter(elm) {
+			if (!R$2(elm)) return;
+			elm.style.width = "auto";
 		}
-		function toggle() {
-			if (isOpen.value) close();
-			else open();
+		function enter(elm) {
+			if (!R$2(elm)) return;
+			const { height } = getComputedStyle(elm);
+			elm.style.position = "absolute";
+			elm.style.height = height;
+			elm.style.width = "auto";
+			elm.style.visibility = "hidden";
+			const { width } = getComputedStyle(elm);
+			elm.style.removeProperty("position");
+			elm.style.removeProperty("height");
+			elm.style.removeProperty("visibility");
+			elm.style.width = "0";
+			getComputedStyle(elm);
+			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.width = width));
 		}
-		function onDialogBackdropClick(evt) {
-			if (evt.target.tagName !== "DIALOG") return;
-			close();
+		function leave(elm) {
+			if (!R$2(elm)) return;
+			const { width } = getComputedStyle(elm);
+			elm.style.width = width;
+			getComputedStyle(elm);
+			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.width = "0"));
 		}
-		watch(isOpen, (isOpen, _, onCleanup) => {
-			const dialog = unref(dialogRef);
-			if (isOpen && !dialog.open) {
-				dialog.showModal();
-				window.addEventListener("scroll", reposition, { passive: true });
-				onCleanup(() => window.removeEventListener("scroll", reposition));
-			} else if (!isOpen && dialog.open) dialog.close();
-		});
-		provide(FluxFlyoutInjectionKey, {
-			isClosing,
-			isOpen,
-			isOpening
-		});
-		__expose({
-			close,
-			open,
-			toggle
-		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref: "mount",
-				class: normalizeClass(unref(Flyout_module_default).flyout),
-				style: normalizeStyle({
-					"--opener-width": `${openerWidth.value}px`,
-					"--pane-mx": `${paneMarginX.value}px`,
-					"--pane-my": `${paneMarginY.value}px`,
-					"--pane-x": `${paneX.value - 30}px`,
-					"--pane-y": `${paneY.value - 30}px`
-				})
-			}, [renderSlot(_ctx.$slots, "opener", normalizeProps(guardReactiveProps({
-				close,
-				open,
-				toggle,
-				isOpen: isOpen.value || isOpening.value || isClosing.value
-			}))), createElementVNode("dialog", {
-				ref: "dialog",
-				class: normalizeClass(unref(Flyout_module_default).flyoutDialog),
-				onClick: onDialogBackdropClick,
-				onKeydown: withKeys(withModifiers(close, ["prevent"]), ["esc"])
-			}, [isOpen.value ? (openBlock(), createBlock(FluxPane_default, {
-				key: 0,
-				ref: "pane",
-				class: normalizeClass(unref(clsx)(unref(Flyout_module_default).flyoutPane, __props.isAutoWidth && unref(Flyout_module_default).isAutoWidth, isClosing.value && unref(Flyout_module_default).isClosing, isOpening.value && unref(Flyout_module_default).isOpening)),
-				style: normalizeStyle({ width: `${__props.width}px` })
+			return openBlock(), createBlock(Transition, {
+				onAfterEnter: afterEnter,
+				onEnter: enter,
+				onLeave: leave
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
-					close,
-					paneX: paneX.value,
-					paneY: paneY.value,
-					openerWidth: openerWidth.value,
-					openerHeight: openerHeight.value
-				})))]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$60)], 6);
+			});
 		};
 	}
 });
+var Transition_module_default = {
+	breakthroughTransitionEnterActive: `breakthrough-transition-enter-active`,
+	breakthroughTransitionBackEnterActive: `breakthrough-transition-back-enter-active`,
+	breakthroughTransitionLeaveActive: `breakthrough-transition-leave-active`,
+	breakthroughTransitionBackLeaveActive: `breakthrough-transition-back-leave-active`,
+	breakthroughTransitionEnterFrom: `breakthrough-transition-enter-from`,
+	breakthroughTransitionBackLeaveTo: `breakthrough-transition-back-leave-to`,
+	breakthroughTransitionLeaveTo: `breakthrough-transition-leave-to`,
+	breakthroughTransitionBackEnterFrom: `breakthrough-transition-back-enter-from`,
+	fadeTransitionEnterActive: `fade-transition-enter-active`,
+	fadeTransitionLeaveActive: `fade-transition-leave-active`,
+	fadeTransitionEnterFrom: `fade-transition-enter-from`,
+	fadeTransitionLeaveTo: `fade-transition-leave-to`,
+	fadeTransitionEnterTo: `fade-transition-enter-to`,
+	fadeTransitionLeaveFrom: `fade-transition-leave-from`,
+	routeTransitionEnterActive: `route-transition-enter-active`,
+	routeTransitionBackEnterActive: `route-transition-back-enter-active`,
+	routeTransitionLeaveActive: `route-transition-leave-active`,
+	routeTransitionBackLeaveActive: `route-transition-back-leave-active`,
+	routeTransitionEnterFrom: `route-transition-enter-from`,
+	routeTransitionBackLeaveTo: `route-transition-back-leave-to`,
+	routeTransitionLeaveTo: `route-transition-leave-to`,
+	routeTransitionBackEnterFrom: `route-transition-back-enter-from`,
+	tooltipTransitionEnterActive: `tooltip-transition-enter-active`,
+	tooltipTransitionLeaveActive: `tooltip-transition-leave-active`,
+	tooltipTransitionEnterFrom: `tooltip-transition-enter-from`,
+	tooltipTransitionLeaveTo: `tooltip-transition-leave-to`,
+	verticalWindowTransitionEnterActive: `vertical-window-transition-enter-active`,
+	verticalWindowTransitionBackEnterActive: `vertical-window-transition-back-enter-active`,
+	verticalWindowTransitionLeaveActive: `vertical-window-transition-leave-active`,
+	verticalWindowTransitionBackLeaveActive: `vertical-window-transition-back-leave-active`,
+	verticalWindowTransitionBackLeaveTo: `vertical-window-transition-back-leave-to`,
+	verticalWindowTransitionEnterFrom: `vertical-window-transition-enter-from`,
+	verticalWindowTransitionBackEnterFrom: `vertical-window-transition-back-enter-from`,
+	verticalWindowTransitionLeaveTo: `vertical-window-transition-leave-to`,
+	windowTransitionEnterActive: `window-transition-enter-active`,
+	windowTransitionBackEnterActive: `window-transition-back-enter-active`,
+	windowTransitionLeaveActive: `window-transition-leave-active`,
+	windowTransitionBackLeaveActive: `window-transition-back-leave-active`,
+	windowTransitionBackLeaveTo: `window-transition-back-leave-to`,
+	windowTransitionEnterFrom: `window-transition-enter-from`,
+	windowTransitionBackEnterFrom: `window-transition-back-enter-from`,
+	windowTransitionLeaveTo: `window-transition-leave-to`
+};
 //#endregion
-//#region src/component/FluxSecondaryButton.vue
-var FluxSecondaryButton_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxSecondaryButton",
+//#region src/transition/FluxBreakthroughTransition.vue
+var FluxBreakthroughTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxBreakthroughTransition",
 	props: {
-		type: {},
-		disabled: { type: Boolean },
-		iconLeading: {},
-		iconTrailing: {},
-		isFilled: { type: Boolean },
-		isLoading: { type: Boolean },
-		isSubmit: { type: Boolean },
-		label: {},
-		size: {},
-		tabindex: {},
-		href: {},
-		rel: {},
-		target: {},
-		to: {}
+		isBack: { type: Boolean },
+		mode: { default: "out-in" }
 	},
-	emits: [
-		"click",
-		"mouseenter",
-		"mouseleave"
-	],
-	setup(__props, { emit: $emit }) {
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxButton_default, mergeProps({
-				type: __props.type,
-				disabled: __props.disabled,
-				iconLeading: __props.iconLeading,
-				iconTrailing: __props.iconTrailing,
-				isFilled: __props.isFilled,
-				isLoading: __props.isLoading,
-				isSubmit: __props.isSubmit,
-				label: __props.label,
-				size: __props.size,
-				href: __props.href,
-				rel: __props.rel,
-				target: __props.target,
-				to: __props.to
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackEnterActive : unref(Transition_module_default).breakthroughTransitionEnterActive,
+				"enter-from-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackEnterFrom : unref(Transition_module_default).breakthroughTransitionEnterFrom,
+				"leave-active-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackLeaveActive : unref(Transition_module_default).breakthroughTransitionLeaveActive,
+				"leave-to-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackLeaveTo : unref(Transition_module_default).breakthroughTransitionLeaveTo
 			}, {
-				"css-class": unref(Button_module_default).secondaryButton,
-				"css-class-icon": unref(Button_module_default).secondaryButtonIcon,
-				"css-class-label": unref(Button_module_default).secondaryButtonLabel,
-				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
-				onMouseenter: _cache[1] || (_cache[1] = ($event) => $emit("mouseenter", $event)),
-				onMouseleave: _cache[2] || (_cache[2] = ($event) => $emit("mouseleave", $event))
-			}), createSlots({ _: 2 }, [renderList(unref(SLOTS), (slot) => {
-				return {
-					name: slot,
-					fn: withCtx(() => [renderSlot(_ctx.$slots, slot)])
-				};
-			})]), 1040, [
-				"css-class",
-				"css-class-icon",
-				"css-class-label"
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
 			]);
 		};
 	}
 });
-var Layout_module_default = {
-	aspectRatio: `aspect-ratio`,
-	container: `container`,
-	spacer: `spacer`
-};
 //#endregion
-//#region src/component/FluxSpacer.vue
-var FluxSpacer_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxSpacer",
+//#region src/transition/FluxFadeTransition.vue
+var FluxFadeTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxFadeTransition",
+	props: { mode: { default: "out-in" } },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Layout_module_default).spacer) }, null, 2);
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": unref(Transition_module_default).fadeTransitionEnterActive,
+				"enter-from-class": unref(Transition_module_default).fadeTransitionEnterFrom,
+				"enter-to-class": unref(Transition_module_default).fadeTransitionEnterTo,
+				"leave-active-class": unref(Transition_module_default).fadeTransitionLeaveActive,
+				"leave-from-class": unref(Transition_module_default).fadeTransitionLeaveFrom,
+				"leave-to-class": unref(Transition_module_default).fadeTransitionLeaveTo
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"enter-to-class",
+				"leave-active-class",
+				"leave-from-class",
+				"leave-to-class"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxTooltip.vue
-var FluxTooltip_default = defineComponent({
-	props: {
-		content: String,
-		direction: String
-	},
-	slots: Object,
-	setup(props, { slots }) {
-		const instance = getCurrentInstance();
-		const tooltipId = ref(null);
-		onMounted(() => {
-			const elm = instance.proxy.$el;
-			elm.addEventListener("mouseenter", onHover, { passive: true });
-			elm.addEventListener("mouseleave", onLeave, { passive: true });
-			window.addEventListener("scroll", onLeave, { capture: true });
-		});
-		onUnmounted(() => {
-			const elm = instance.proxy.$el;
-			elm.removeEventListener("mouseenter", onHover);
-			elm.removeEventListener("mouseleave", onLeave);
-			window.removeEventListener("scroll", onLeave, { capture: true });
-			onLeave();
-		});
-		function onHover() {
-			onLeave();
-			if ((props.content?.trim().length ?? 0) === 0 && !slots.content) return;
-			tooltipId.value = addTooltip({
-				content: props.content,
-				contentSlot: slots.content,
-				direction: props.direction || "vertical",
-				origin: instance.proxy?.$el
-			});
-		}
-		function onLeave() {
-			if (tooltipId.value) removeTooltip(tooltipId.value);
-		}
-		return () => (slots.default?.() ?? [])[0] ?? null;
-	}
-});
-//#endregion
-//#region src/component/FluxActionBar.vue
-var FluxActionBar_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxActionBar",
-	props: { isResettable: { type: Boolean } },
-	emits: ["reset"],
-	setup(__props, { emit: $emit }) {
-		const slots = useSlots();
-		const translate = useTranslate_default();
+//#region src/transition/FluxOverlayTransition.vue
+var FluxOverlayTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxOverlayTransition",
+	props: { mode: { default: "out-in" } },
+	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxFlex_default, {
-				class: normalizeClass(unref(Action_module_default).actionBar),
-				gap: 9
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": unref(Overlay_module_default).overlayTransitionEnterActive,
+				"enter-from-class": unref(Overlay_module_default).overlayTransitionEnterFrom,
+				"leave-active-class": unref(Overlay_module_default).overlayTransitionLeaveActive,
+				"leave-to-class": unref(Overlay_module_default).overlayTransitionLeaveTo
 			}, {
-				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "primary"),
-					renderSlot(_ctx.$slots, "actionsStart"),
-					(slots.primary || slots.actionsStart) && (slots.actionsBeforeSearch || slots.search || slots.actionsAfterSearch || slots.filter || slots.actionsEnd) ? (openBlock(), createBlock(FluxSpacer_default, { key: 0 })) : createCommentVNode("", true),
-					renderSlot(_ctx.$slots, "actionsBeforeSearch"),
-					renderSlot(_ctx.$slots, "search"),
-					renderSlot(_ctx.$slots, "actionsAfterSearch"),
-					slots.filter ? (openBlock(), createBlock(FluxFlyout_default, { key: 1 }, {
-						opener: withCtx(({ close, open, toggle }) => [renderSlot(_ctx.$slots, "filterOpener", normalizeProps(guardReactiveProps({
-							close,
-							open,
-							toggle
-						})), () => [createVNode(FluxButtonGroup_default, null, {
-							default: withCtx(() => [createVNode(FluxSecondaryButton_default, {
-								"icon-leading": "filter",
-								label: unref(translate)("flux.filter"),
-								onClick: open
-							}, null, 8, ["label", "onClick"]), __props.isResettable ? (openBlock(), createBlock(FluxTooltip_default, {
-								key: 0,
-								content: unref(translate)("flux.filterReset")
-							}, {
-								default: withCtx(() => [createVNode(FluxDestructiveButton_default, {
-									"icon-leading": "xmark",
-									onClick: _cache[0] || (_cache[0] = ($event) => $emit("reset"))
-								})]),
-								_: 1
-							}, 8, ["content"])) : createCommentVNode("", true)]),
-							_: 2
-						}, 1024)])]),
-						default: withCtx(({ close, paneX, paneY, openerWidth, openerHeight }) => [renderSlot(_ctx.$slots, "filter", normalizeProps(guardReactiveProps({
-							close,
-							paneX,
-							paneY,
-							openerWidth,
-							openerHeight
-						})))]),
-						_: 3
-					})) : createCommentVNode("", true),
-					renderSlot(_ctx.$slots, "actionsEnd")
-				]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxButtonStack.vue
-var FluxButtonStack_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxButtonStack",
+//#region src/transition/FluxRouteTransition.vue
+var FluxRouteTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxRouteTransition",
 	props: {
-		direction: { default: "horizontal" },
-		gap: { default: 9 },
-		isFill: { type: Boolean }
+		isBack: { type: Boolean },
+		mode: { default: "out-in" }
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxFlex_default, {
-				class: normalizeClass(__props.isFill ? unref(Flex_module_default).flexFill : void 0),
-				direction: __props.direction,
-				gap: __props.gap,
-				wrap: "wrap"
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackEnterActive : unref(Transition_module_default).routeTransitionEnterActive,
+				"enter-from-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackEnterFrom : unref(Transition_module_default).routeTransitionEnterFrom,
+				"leave-active-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackLeaveActive : unref(Transition_module_default).routeTransitionLeaveActive,
+				"leave-to-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackLeaveTo : unref(Transition_module_default).routeTransitionLeaveTo
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, [
-				"class",
-				"direction",
-				"gap"
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
 			]);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxPaneBody.vue
-var FluxPaneBody_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxPaneBody",
+//#region src/transition/FluxSlideOverTransition.vue
+var FluxSlideOverTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxSlideOverTransition",
+	props: { mode: { default: "out-in" } },
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Pane_module_default).paneBody) }, [renderSlot(_ctx.$slots, "default")], 2);
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": unref(Overlay_module_default).slideOverTransitionEnterActive,
+				"enter-from-class": unref(Overlay_module_default).slideOverTransitionEnterFrom,
+				"leave-active-class": unref(Overlay_module_default).slideOverTransitionLeaveActive,
+				"leave-to-class": unref(Overlay_module_default).slideOverTransitionLeaveTo
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxActionPane.vue
-var FluxActionPane_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxActionPane",
-	props: { paneVariant: {} },
-	setup(__props) {
-		const slots = useSlots();
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxPane_default, {
-				class: normalizeClass(unref(Action_module_default).actionPane),
-				variant: __props.paneVariant
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "base"), createElementVNode("div", { class: normalizeClass(unref(Action_module_default).actionPaneGrid) }, [createVNode(FluxPaneBody_default, { class: normalizeClass(unref(Action_module_default).actionPaneBody) }, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-					_: 3
-				}, 8, ["class"]), slots.buttons ? (openBlock(), createBlock(FluxPaneBody_default, {
-					key: 0,
-					class: normalizeClass(unref(Action_module_default).actionPaneBody)
-				}, {
-					default: withCtx(() => [createVNode(FluxButtonStack_default, { direction: "vertical" }, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "buttons")]),
-						_: 3
-					})]),
-					_: 3
-				}, 8, ["class"])) : createCommentVNode("", true)], 2)]),
+//#region src/transition/FluxTooltipTransition.vue
+var FluxTooltipTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxTooltipTransition",
+	props: { mode: { default: "out-in" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": unref(Transition_module_default).tooltipTransitionEnterActive,
+				"enter-from-class": unref(Transition_module_default).tooltipTransitionEnterFrom,
+				"leave-active-class": unref(Transition_module_default).tooltipTransitionLeaveActive,
+				"leave-to-class": unref(Transition_module_default).tooltipTransitionLeaveTo
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["class", "variant"]);
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxActionStack.vue
-var FluxActionStack_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxActionStack",
+//#region src/transition/FluxVerticalWindowTransition.vue
+var FluxVerticalWindowTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxVerticalWindowTransition",
+	props: {
+		isBack: { type: Boolean },
+		mode: { default: "out-in" }
+	},
 	setup(__props) {
-		L$1(useTemplateRef("element"), { direction: "horizontal" });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(FluxFlex_default, {
-				ref: "element",
-				direction: "horizontal",
-				gap: 1,
-				tag: "nav"
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackEnterActive : unref(Transition_module_default).verticalWindowTransitionEnterActive,
+				"enter-from-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackEnterFrom : unref(Transition_module_default).verticalWindowTransitionEnterFrom,
+				"leave-active-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackLeaveActive : unref(Transition_module_default).verticalWindowTransitionLeaveActive,
+				"leave-to-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackLeaveTo : unref(Transition_module_default).verticalWindowTransitionLeaveTo
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 512);
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
+			]);
 		};
 	}
 });
-var AdaptiveSlot_module_default = {
-	adaptiveGroup: `adaptive-group`,
-	adaptiveSlot: `adaptive-slot`,
-	adaptiveSlotMeasurer: `adaptive-slot-measurer`
-};
 //#endregion
-//#region src/component/FluxAdaptiveGroup.vue
-var FluxAdaptiveGroup_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAdaptiveGroup",
-	props: { gap: { default: 9 } },
+//#region src/transition/FluxWindowTransition.vue
+var FluxWindowTransition_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxWindowTransition",
+	props: {
+		isBack: { type: Boolean },
+		mode: { default: "out-in" }
+	},
 	setup(__props) {
-		const elementRef = useTemplateRef("element");
-		const children = shallowReactive(/* @__PURE__ */ new Map());
-		const reflow = i$2(() => {
-			const element = _$3(elementRef);
-			if (!element) return;
-			const available = element.clientWidth;
-			const entries = Array.from(children.entries());
-			const states = new Map(entries.map(([uid]) => [uid, true]));
-			const sorted = [...entries].sort(([, a], [, b]) => a.priority.value - b.priority.value);
-			const currentTotal = () => {
-				let total = 0;
-				let visible = 0;
-				for (const [uid, child] of entries) {
-					const width = states.get(uid) ? child.desiredDefaultWidth.value : child.desiredFallbackWidth.value;
-					if (width === 0) continue;
-					total += width;
-					visible++;
-				}
-				return total + Math.max(0, visible - 1) * __props.gap;
-			};
-			while (currentTotal() > available) {
-				const victim = sorted.find(([uid]) => states.get(uid));
-				if (!victim) break;
-				states.set(victim[0], false);
-			}
-			for (const [uid, child] of entries) child.isDefaultVisible.value = !!states.get(uid);
-		});
-		watchEffect(() => {
-			for (const child of children.values()) {
-				child.priority.value;
-				child.desiredDefaultWidth.value;
-				child.desiredFallbackWidth.value;
-			}
-			reflow();
-		});
-		provide(FluxAdaptiveGroupInjectionKey, {
-			register(uid, child) {
-				children.set(uid, child);
-			},
-			unregister(uid) {
-				children.delete(uid);
-			}
-		});
-		watch(elementRef, (element, _, onCleanup) => {
-			if (!element) return;
-			const observer = new ResizeObserver(reflow);
-			observer.observe(element);
-			observer.observe(document.documentElement);
-			onCleanup(() => {
-				observer.disconnect();
-			});
-		}, { immediate: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref: "element",
-				class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveGroup),
-				style: normalizeStyle({ "--gap": `${__props.gap}px` })
-			}, [renderSlot(_ctx.$slots, "default")], 6);
+			return openBlock(), createBlock(Transition, {
+				mode: __props.mode,
+				"enter-active-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackEnterActive : unref(Transition_module_default).windowTransitionEnterActive,
+				"enter-from-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackEnterFrom : unref(Transition_module_default).windowTransitionEnterFrom,
+				"leave-active-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackLeaveActive : unref(Transition_module_default).windowTransitionLeaveActive,
+				"leave-to-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackLeaveTo : unref(Transition_module_default).windowTransitionLeaveTo
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"mode",
+				"enter-active-class",
+				"enter-from-class",
+				"leave-active-class",
+				"leave-to-class"
+			]);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxAdaptiveSlot.vue
-var FluxAdaptiveSlot_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAdaptiveSlot",
-	props: { priority: { default: 1 } },
-	setup(__props) {
-		const props = __props;
-		const group = useAdaptiveGroupInjection_default();
-		const instance = getCurrentInstance();
-		const elementRef = useTemplateRef("element");
-		const defaultMeasurerRef = useTemplateRef("defaultMeasurer");
-		const fallbackMeasurerRef = useTemplateRef("fallbackMeasurer");
-		const isDefaultVisible = ref(true);
-		const desiredDefaultWidth = ref(0);
-		const desiredFallbackWidth = ref(0);
-		const priorityRef = toRef(props, "priority");
-		watch([defaultMeasurerRef, fallbackMeasurerRef], ([def, fb], _, onCleanup) => {
-			if (!def) return;
-			const update = () => {
-				desiredDefaultWidth.value = def.offsetWidth;
-				desiredFallbackWidth.value = fb?.offsetWidth ?? 0;
-			};
-			const observer = new ResizeObserver(update);
-			observer.observe(def);
-			if (fb) observer.observe(fb);
-			observer.observe(document.documentElement);
-			update();
-			onCleanup(() => {
-				observer.disconnect();
-			});
-		}, { immediate: true });
-		if (group) {
-			onMounted(() => {
-				group.register(instance.uid, {
-					priority: priorityRef,
-					desiredDefaultWidth,
-					desiredFallbackWidth,
-					isDefaultVisible
-				});
-			});
-			onUnmounted(() => {
-				group.unregister(instance.uid);
-			});
-		} else {
-			let lastFailedParentWidth = -1;
-			const reflow = i$2(() => {
-				const element = _$3(elementRef);
-				if (!element || !isDefaultVisible.value) return;
-				if (desiredDefaultWidth.value > element.clientWidth) {
-					lastFailedParentWidth = element.parentElement?.clientWidth ?? -1;
-					isDefaultVisible.value = false;
-				} else lastFailedParentWidth = -1;
-			});
-			watch(elementRef, (element, _, onCleanup) => {
-				if (!element) return;
-				const parent = element.parentElement;
-				const observer = new ResizeObserver((entries) => {
-					for (const entry of entries) if (entry.target === parent && !isDefaultVisible.value) {
-						if (parent.clientWidth > lastFailedParentWidth) isDefaultVisible.value = true;
-					}
-					reflow();
-				});
-				observer.observe(element);
-				if (parent) observer.observe(parent);
-				observer.observe(document.documentElement);
-				onCleanup(() => {
-					observer.disconnect();
-				});
-			}, { immediate: true });
-			watch(desiredDefaultWidth, () => {
-				lastFailedParentWidth = -1;
-				isDefaultVisible.value = true;
-			});
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [
-				createElementVNode("div", {
-					ref: "element",
-					class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveSlot),
-					style: normalizeStyle(unref(group) ? "flex-shrink: 0" : void 0)
-				}, [isDefaultVisible.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "fallback", { key: 1 })], 6),
-				createElementVNode("div", {
-					ref: "defaultMeasurer",
-					class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveSlotMeasurer),
-					"aria-hidden": "true"
-				}, [renderSlot(_ctx.$slots, "default")], 2),
-				createElementVNode("div", {
-					ref: "fallbackMeasurer",
-					class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveSlotMeasurer),
-					"aria-hidden": "true"
-				}, [renderSlot(_ctx.$slots, "fallback")], 2)
-			], 64);
+//#region src/css/component/Pane.module.scss
+var { "basePaneStructure": _0$13, "basePaneElement": _1$4, "basePaneLoader": _2$3 } = Pane_module_default$1;
+var Pane_module_default = {
+	pane: `pane ${_0$13}`,
+	paneDefault: `pane-default pane ${_0$13}`,
+	paneFlat: `pane-flat pane ${_0$13}`,
+	paneWell: `pane-well pane ${_0$13}`,
+	paneHeader: `pane-header ${_1$4}`,
+	paneBody: `pane-body ${_1$4}`,
+	paneHeaderCaption: `pane-header-caption`,
+	paneHeaderIcon: `pane-header-icon`,
+	paneFooter: `pane-footer ${_1$4}`,
+	paneLoader: `pane-loader ${_2$3}`,
+	paneTag: `pane-tag`,
+	paneMedia: `pane-media`,
+	paneMediaDefault: `pane-media-default pane-media`,
+	paneMediaInset: `pane-media-inset pane-media`,
+	paneMediaImage: `pane-media-image`,
+	paneGroup: `pane-group`,
+	paneIllustration: `pane-illustration`,
+	paneIllustrationContent: `pane-illustration-content`,
+	paneIllustrationContentControlled: `pane-illustration-content-controlled pane-illustration-content`,
+	paneIllustrationMagic: `pane-illustration-magic`,
+	paneIllustrationMasked: `pane-illustration-masked pane-illustration`,
+	iconBoxed: `icon-boxed`
+};
+//#endregion
+//#region src/component/FluxPane.vue
+var FluxPane_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxPane",
+	props: {
+		isLoading: { type: Boolean },
+		tag: {},
+		variant: { default: "default" }
+	},
+	setup(__props) {
+		const CLASS_MAP = {
+			default: Pane_module_default.paneDefault,
+			flat: Pane_module_default.paneFlat,
+			well: Pane_module_default.paneWell
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(CLASS_MAP[__props.variant]) }, [
+				renderSlot(_ctx.$slots, "default"),
+				createVNode(unref(FluxFadeTransition_default), null, {
+					default: withCtx(() => [__props.isLoading ? renderSlot(_ctx.$slots, "loader", { key: 0 }, () => [createElementVNode("div", { class: normalizeClass(unref(Pane_module_default).paneLoader) }, [createVNode(FluxSpinner_default)], 2)]) : createCommentVNode("", true)]),
+					_: 3
+				}),
+				__props.tag ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(Pane_module_default).paneTag)
+				}, toDisplayString(__props.tag), 3)) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });
-var Visual_module_default = {
-	fillVisual: `fill-visual`,
-	animatedColors: `animated-colors fill-visual`,
-	dotPattern: `dot-pattern fill-visual`,
-	flickeringGrid: `flickering-grid fill-visual`,
-	gridPattern: `grid-pattern fill-visual`,
-	borderShine: `border-shine`,
-	borderShinePosition: `border-shine-position`
+var Flyout_module_default = {
+	flyout: `flyout`,
+	flyoutDialog: `flyout-dialog`,
+	flyoutPane: `flyout-pane`,
+	isAutoWidth: `is-auto-width`,
+	isClosing: `is-closing`,
+	close: `close`,
+	isOpening: `is-opening`,
+	open: `open`,
+	mobileClose: `mobile-close`,
+	mobileOpen: `mobile-open`
 };
 //#endregion
-//#region src/component/FluxAnimatedColors.vue
-var FluxAnimatedColors_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAnimatedColors",
+//#region src/component/FluxFlyout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$60 = ["onKeydown"];
+//#endregion
+//#region src/component/FluxFlyout.vue
+var FluxFlyout_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxFlyout",
 	props: {
-		colors: {},
-		incrementor: { default: 1 },
-		opacity: { default: .5 },
-		seed: {},
-		static: { type: Boolean }
+		direction: { default: "vertical" },
+		isAutoWidth: { type: Boolean },
+		margin: { default: 9 },
+		width: {}
 	},
-	setup(__props) {
-		const canvasRef = useTemplateRef("canvas");
-		const componentId = q$1();
-		const contextRef = ref();
-		const animationFrame = ref(0);
-		const tick = ref(0);
-		const polygons = computed(() => {
-			if (!__props.colors || __props.colors.length === 0) return [];
-			const mulberry = V$2(__props.seed ?? componentId.value);
-			const polygons = [];
-			for (const color of __props.colors) {
-				const localMulberry = mulberry.fork();
-				const x = __props.colors.length === 1 ? .5 : localMulberry.next();
-				const y = __props.colors.length === 1 ? .5 : localMulberry.next();
-				const count = Math.round(localMulberry.nextBetween(6, 9));
-				const points = [];
-				for (let p = 0; p < count; ++p) points.push([
-					localMulberry.next(),
-					localMulberry.next(),
-					localMulberry.next()
-				]);
-				polygons.push([
-					x,
-					y,
-					color,
-					points
-				]);
-			}
-			return polygons;
-		});
-		onMounted(() => schedule());
-		onBeforeUnmount(() => cancel());
-		function cancel() {
-			cancelAnimationFrame(animationFrame.value);
+	setup(__props, { expose: __expose }) {
+		const dialogRef = useTemplateRef("dialog");
+		const mountRef = useTemplateRef("mount");
+		const paneRef = useTemplateRef("pane");
+		const isClosing = ref(false);
+		const isOpening = ref(false);
+		const isOpen = ref(false);
+		const openerWidth = ref(0);
+		const openerHeight = ref(0);
+		const paneX = ref(0);
+		const paneY = ref(0);
+		const paneMarginX = ref(0);
+		const paneMarginY = ref(0);
+		!S$3 && D$1(ref(window), "resize", () => unref(isOpen) && reposition());
+		F$1(paneRef);
+		function close() {
+			const pane = _$3(paneRef);
+			if (!pane) return;
+			pane.addEventListener("animationend", () => {
+				isClosing.value = false;
+				isOpen.value = false;
+			}, { once: true });
+			isClosing.value = true;
 		}
-		function schedule() {
-			animationFrame.value = requestAnimationFrame(update);
-			tick.value += __props.incrementor;
+		function open() {
+			const { width, height } = unref(mountRef).children[0].getBoundingClientRect();
+			isOpen.value = true;
+			openerWidth.value = width;
+			openerHeight.value = height;
+			requestAnimationFrame(() => {
+				_$3(paneRef).addEventListener("animationend", () => {
+					isOpening.value = false;
+				}, { once: true });
+				isOpening.value = true;
+			});
+			requestAnimationFrame(reposition);
 		}
-		function update() {
-			const context = unref(contextRef);
-			const shapes = unref(polygons);
-			if (!context || shapes.length === 0) return;
-			const width = context.canvas.offsetWidth;
-			const height = context.canvas.offsetHeight;
-			context.canvas.width = width;
-			context.canvas.height = height;
-			const widthBasedOpacity = Math.min(1, Math.max(.15, 360 / width));
-			context.globalAlpha = __props.opacity * widthBasedOpacity;
-			context.globalCompositeOperation = "screen";
-			context.clearRect(0, 0, width, height);
-			for (const [tx, ty, color, shape] of shapes) {
-				context.save();
-				context.translate(tx * width, ty * height);
-				context.beginPath();
-				context.fillStyle = color;
-				for (let i = 0; i < shape.length; ++i) {
-					let [x, y, m] = shape[i];
-					x = Math.cos(x * Math.PI * 2 + tick.value / (m * 200 + 300)) * (width * .8);
-					y = Math.sin(y * Math.PI * 2 + tick.value / (m * 100 + 300)) * (height * .8);
-					if (i === 0) context.moveTo(x, y);
-					else context.lineTo(x, y);
+		function reposition() {
+			const mount = unref(mountRef);
+			const pane = _$3(paneRef);
+			const { top, left, width, height } = mount.children[0].getBoundingClientRect();
+			const { width: paneWidth, height: paneHeight } = pane.getBoundingClientRect();
+			let x, y, mx = 0, my = 0;
+			if (__props.direction === "horizontal") {
+				x = left + width;
+				y = top + height / 2 - paneHeight / 2;
+				mx = __props.margin;
+				if (x + paneWidth > innerWidth - 12) {
+					x = left - paneWidth;
+					mx = -mx;
+				}
+			} else {
+				x = left + width / 2 - paneWidth / 2;
+				y = top + height;
+				my = __props.margin;
+				if (y + paneHeight > innerHeight - 12) {
+					y = top - paneHeight;
+					my = -my;
 				}
-				context.closePath();
-				context.fill();
-				context.restore();
 			}
-			!__props.static && schedule();
+			paneX.value = Math.max(12, Math.min(innerWidth - paneWidth - 12, x));
+			paneY.value = Math.max(12, Math.min(innerHeight - paneHeight - 12, y));
+			paneMarginX.value = mx;
+			paneMarginY.value = my;
 		}
-		watch(canvasRef, (canvas) => {
-			if (!canvas) {
-				contextRef.value = void 0;
-				return;
-			}
-			contextRef.value = canvas.getContext("2d", {
-				alpha: true,
-				colorSpace: "display-p3"
-			});
-		}, { immediate: true });
-		watch(polygons, () => {
-			cancel();
-			!__props.static && schedule();
+		function toggle() {
+			if (isOpen.value) close();
+			else open();
+		}
+		function onDialogBackdropClick(evt) {
+			if (evt.target.tagName !== "DIALOG") return;
+			close();
+		}
+		watch(isOpen, (isOpen, _, onCleanup) => {
+			const dialog = unref(dialogRef);
+			if (isOpen && !dialog.open) {
+				dialog.showModal();
+				window.addEventListener("scroll", reposition, { passive: true });
+				onCleanup(() => window.removeEventListener("scroll", reposition));
+			} else if (!isOpen && dialog.open) dialog.close();
+		});
+		provide(FluxFlyoutInjectionKey, {
+			isClosing,
+			isOpen,
+			isOpening
+		});
+		__expose({
+			close,
+			open,
+			toggle
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("canvas", {
-				ref: "canvas",
-				class: normalizeClass(unref(Visual_module_default).animatedColors)
-			}, null, 2);
+			return openBlock(), createElementBlock("div", {
+				ref: "mount",
+				class: normalizeClass(unref(Flyout_module_default).flyout),
+				style: normalizeStyle({
+					"--opener-width": `${openerWidth.value}px`,
+					"--pane-mx": `${paneMarginX.value}px`,
+					"--pane-my": `${paneMarginY.value}px`,
+					"--pane-x": `${paneX.value - 30}px`,
+					"--pane-y": `${paneY.value - 30}px`
+				})
+			}, [renderSlot(_ctx.$slots, "opener", normalizeProps(guardReactiveProps({
+				close,
+				open,
+				toggle,
+				isOpen: isOpen.value || isOpening.value || isClosing.value
+			}))), createElementVNode("dialog", {
+				ref: "dialog",
+				class: normalizeClass(unref(Flyout_module_default).flyoutDialog),
+				onClick: onDialogBackdropClick,
+				onKeydown: withKeys(withModifiers(close, ["prevent"]), ["esc"])
+			}, [isOpen.value ? (openBlock(), createBlock(FluxPane_default, {
+				key: 0,
+				ref: "pane",
+				class: normalizeClass(unref(clsx)(unref(Flyout_module_default).flyoutPane, __props.isAutoWidth && unref(Flyout_module_default).isAutoWidth, isClosing.value && unref(Flyout_module_default).isClosing, isOpening.value && unref(Flyout_module_default).isOpening)),
+				style: normalizeStyle({ width: `${__props.width}px` })
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+					close,
+					paneX: paneX.value,
+					paneY: paneY.value,
+					openerWidth: openerWidth.value,
+					openerHeight: openerHeight.value
+				})))]),
+				_: 3
+			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$60)], 6);
 		};
 	}
 });
 //#endregion
-//#region src/component/FluxAspectRatio.vue
-var FluxAspectRatio_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAspectRatio",
+//#region src/component/FluxSecondaryButton.vue
+var FluxSecondaryButton_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxSecondaryButton",
 	props: {
-		aspectRatio: {},
-		tag: {}
+		type: {},
+		disabled: { type: Boolean },
+		iconLeading: {},
+		iconTrailing: {},
+		isFilled: { type: Boolean },
+		isLoading: { type: Boolean },
+		isSubmit: { type: Boolean },
+		label: {},
+		size: {},
+		tabindex: {},
+		href: {},
+		rel: {},
+		target: {},
+		to: {}
 	},
-	setup(__props) {
+	emits: [
+		"click",
+		"mouseenter",
+		"mouseleave"
+	],
+	setup(__props, { emit: $emit }) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.tag ?? "div"), {
-				class: normalizeClass(unref(Layout_module_default).aspectRatio),
-				style: normalizeStyle({ aspectRatio: __props.aspectRatio })
+			return openBlock(), createBlock(FluxButton_default, mergeProps({
+				type: __props.type,
+				disabled: __props.disabled,
+				iconLeading: __props.iconLeading,
+				iconTrailing: __props.iconTrailing,
+				isFilled: __props.isFilled,
+				isLoading: __props.isLoading,
+				isSubmit: __props.isSubmit,
+				label: __props.label,
+				size: __props.size,
+				href: __props.href,
+				rel: __props.rel,
+				target: __props.target,
+				to: __props.to
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, ["class", "style"]);
+				"css-class": unref(Button_module_default).secondaryButton,
+				"css-class-icon": unref(Button_module_default).secondaryButtonIcon,
+				"css-class-label": unref(Button_module_default).secondaryButtonLabel,
+				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => $emit("mouseenter", $event)),
+				onMouseleave: _cache[2] || (_cache[2] = ($event) => $emit("mouseleave", $event))
+			}), createSlots({ _: 2 }, [renderList(unref(SLOTS), (slot) => {
+				return {
+					name: slot,
+					fn: withCtx(() => [renderSlot(_ctx.$slots, slot)])
+				};
+			})]), 1040, [
+				"css-class",
+				"css-class-icon",
+				"css-class-label"
+			]);
 		};
 	}
 });
+var Layout_module_default = {
+	aspectRatio: `aspect-ratio`,
+	container: `container`,
+	spacer: `spacer`
+};
 //#endregion
-//#region src/transition/FluxAutoHeightTransition.vue
-var FluxAutoHeightTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAutoHeightTransition",
+//#region src/component/FluxSpacer.vue
+var FluxSpacer_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxSpacer",
 	setup(__props) {
-		function afterEnter(elm) {
-			if (!R$2(elm)) return;
-			elm.style.height = "auto";
-		}
-		function enter(elm) {
-			if (!R$2(elm)) return;
-			const { width } = getComputedStyle(elm);
-			elm.style.position = "absolute";
-			elm.style.width = width;
-			elm.style.height = "auto";
-			elm.style.visibility = "hidden";
-			const { height } = getComputedStyle(elm);
-			elm.style.removeProperty("position");
-			elm.style.removeProperty("width");
-			elm.style.removeProperty("visibility");
-			elm.style.height = "0";
-			getComputedStyle(elm);
-			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.height = height));
-		}
-		function leave(elm) {
-			if (!R$2(elm)) return;
-			const { height } = getComputedStyle(elm);
-			elm.style.height = height;
-			getComputedStyle(elm);
-			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.height = "0"));
-		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				onAfterEnter: afterEnter,
-				onEnter: enter,
-				onLeave: leave
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			});
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Layout_module_default).spacer) }, null, 2);
 		};
 	}
 });
 //#endregion
-//#region src/transition/FluxAutoWidthTransition.vue
-var FluxAutoWidthTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxAutoWidthTransition",
-	setup(__props) {
-		function afterEnter(elm) {
-			if (!R$2(elm)) return;
-			elm.style.width = "auto";
-		}
-		function enter(elm) {
-			if (!R$2(elm)) return;
-			const { height } = getComputedStyle(elm);
-			elm.style.position = "absolute";
-			elm.style.height = height;
-			elm.style.width = "auto";
-			elm.style.visibility = "hidden";
-			const { width } = getComputedStyle(elm);
-			elm.style.removeProperty("position");
-			elm.style.removeProperty("height");
-			elm.style.removeProperty("visibility");
-			elm.style.width = "0";
-			getComputedStyle(elm);
-			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.width = width));
+//#region src/component/FluxTooltip.vue
+var FluxTooltip_default = defineComponent({
+	props: {
+		content: String,
+		direction: String
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const instance = getCurrentInstance();
+		const tooltipId = ref(null);
+		onMounted(() => {
+			const elm = instance.proxy.$el;
+			elm.addEventListener("mouseenter", onHover, { passive: true });
+			elm.addEventListener("mouseleave", onLeave, { passive: true });
+			window.addEventListener("scroll", onLeave, { capture: true });
+		});
+		onUnmounted(() => {
+			const elm = instance.proxy.$el;
+			elm.removeEventListener("mouseenter", onHover);
+			elm.removeEventListener("mouseleave", onLeave);
+			window.removeEventListener("scroll", onLeave, { capture: true });
+			onLeave();
+		});
+		function onHover() {
+			onLeave();
+			if ((props.content?.trim().length ?? 0) === 0 && !slots.content) return;
+			tooltipId.value = addTooltip({
+				content: props.content,
+				contentSlot: slots.content,
+				direction: props.direction || "vertical",
+				origin: instance.proxy?.$el
+			});
 		}
-		function leave(elm) {
-			if (!R$2(elm)) return;
-			const { width } = getComputedStyle(elm);
-			elm.style.width = width;
-			getComputedStyle(elm);
-			requestAnimationFrame(() => requestAnimationFrame(() => elm.style.width = "0"));
+		function onLeave() {
+			if (tooltipId.value) removeTooltip(tooltipId.value);
 		}
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				onAfterEnter: afterEnter,
-				onEnter: enter,
-				onLeave: leave
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			});
-		};
+		return () => (slots.default?.() ?? [])[0] ?? null;
+	}
+});
+//#endregion
+//#region src/component/FluxActionBar.vue
+var FluxActionBar_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxActionBar",
+	props: { isResettable: { type: Boolean } },
+	emits: ["reset"],
+	setup(__props, { emit: $emit }) {
+		const slots = useSlots();
+		const translate = useTranslate_default();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(FluxFlex_default, {
+				class: normalizeClass(unref(Action_module_default).actionBar),
+				gap: 9
+			}, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "primary"),
+					renderSlot(_ctx.$slots, "actionsStart"),
+					(slots.primary || slots.actionsStart) && (slots.actionsBeforeSearch || slots.search || slots.actionsAfterSearch || slots.filter || slots.actionsEnd) ? (openBlock(), createBlock(FluxSpacer_default, { key: 0 })) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "actionsBeforeSearch"),
+					renderSlot(_ctx.$slots, "search"),
+					renderSlot(_ctx.$slots, "actionsAfterSearch"),
+					slots.filter ? (openBlock(), createBlock(FluxFlyout_default, { key: 1 }, {
+						opener: withCtx(({ close, open, toggle }) => [renderSlot(_ctx.$slots, "filterOpener", normalizeProps(guardReactiveProps({
+							close,
+							open,
+							toggle
+						})), () => [createVNode(FluxButtonGroup_default, null, {
+							default: withCtx(() => [createVNode(FluxSecondaryButton_default, {
+								"icon-leading": "filter",
+								label: unref(translate)("flux.filter"),
+								onClick: open
+							}, null, 8, ["label", "onClick"]), __props.isResettable ? (openBlock(), createBlock(FluxTooltip_default, {
+								key: 0,
+								content: unref(translate)("flux.filterReset")
+							}, {
+								default: withCtx(() => [createVNode(FluxDestructiveButton_default, {
+									"icon-leading": "xmark",
+									onClick: _cache[0] || (_cache[0] = ($event) => $emit("reset"))
+								})]),
+								_: 1
+							}, 8, ["content"])) : createCommentVNode("", true)]),
+							_: 2
+						}, 1024)])]),
+						default: withCtx(({ close, paneX, paneY, openerWidth, openerHeight }) => [renderSlot(_ctx.$slots, "filter", normalizeProps(guardReactiveProps({
+							close,
+							paneX,
+							paneY,
+							openerWidth,
+							openerHeight
+						})))]),
+						_: 3
+					})) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "actionsEnd")
+				]),
+				_: 3
+			}, 8, ["class"]);
+		};
 	}
 });
-var Transition_module_default = {
-	breakthroughTransitionEnterActive: `breakthrough-transition-enter-active`,
-	breakthroughTransitionBackEnterActive: `breakthrough-transition-back-enter-active`,
-	breakthroughTransitionLeaveActive: `breakthrough-transition-leave-active`,
-	breakthroughTransitionBackLeaveActive: `breakthrough-transition-back-leave-active`,
-	breakthroughTransitionEnterFrom: `breakthrough-transition-enter-from`,
-	breakthroughTransitionBackLeaveTo: `breakthrough-transition-back-leave-to`,
-	breakthroughTransitionLeaveTo: `breakthrough-transition-leave-to`,
-	breakthroughTransitionBackEnterFrom: `breakthrough-transition-back-enter-from`,
-	fadeTransitionEnterActive: `fade-transition-enter-active`,
-	fadeTransitionLeaveActive: `fade-transition-leave-active`,
-	fadeTransitionEnterFrom: `fade-transition-enter-from`,
-	fadeTransitionLeaveTo: `fade-transition-leave-to`,
-	fadeTransitionEnterTo: `fade-transition-enter-to`,
-	fadeTransitionLeaveFrom: `fade-transition-leave-from`,
-	routeTransitionEnterActive: `route-transition-enter-active`,
-	routeTransitionBackEnterActive: `route-transition-back-enter-active`,
-	routeTransitionLeaveActive: `route-transition-leave-active`,
-	routeTransitionBackLeaveActive: `route-transition-back-leave-active`,
-	routeTransitionEnterFrom: `route-transition-enter-from`,
-	routeTransitionBackLeaveTo: `route-transition-back-leave-to`,
-	routeTransitionLeaveTo: `route-transition-leave-to`,
-	routeTransitionBackEnterFrom: `route-transition-back-enter-from`,
-	tooltipTransitionEnterActive: `tooltip-transition-enter-active`,
-	tooltipTransitionLeaveActive: `tooltip-transition-leave-active`,
-	tooltipTransitionEnterFrom: `tooltip-transition-enter-from`,
-	tooltipTransitionLeaveTo: `tooltip-transition-leave-to`,
-	verticalWindowTransitionEnterActive: `vertical-window-transition-enter-active`,
-	verticalWindowTransitionBackEnterActive: `vertical-window-transition-back-enter-active`,
-	verticalWindowTransitionLeaveActive: `vertical-window-transition-leave-active`,
-	verticalWindowTransitionBackLeaveActive: `vertical-window-transition-back-leave-active`,
-	verticalWindowTransitionBackLeaveTo: `vertical-window-transition-back-leave-to`,
-	verticalWindowTransitionEnterFrom: `vertical-window-transition-enter-from`,
-	verticalWindowTransitionBackEnterFrom: `vertical-window-transition-back-enter-from`,
-	verticalWindowTransitionLeaveTo: `vertical-window-transition-leave-to`,
-	windowTransitionEnterActive: `window-transition-enter-active`,
-	windowTransitionBackEnterActive: `window-transition-back-enter-active`,
-	windowTransitionLeaveActive: `window-transition-leave-active`,
-	windowTransitionBackLeaveActive: `window-transition-back-leave-active`,
-	windowTransitionBackLeaveTo: `window-transition-back-leave-to`,
-	windowTransitionEnterFrom: `window-transition-enter-from`,
-	windowTransitionBackEnterFrom: `window-transition-back-enter-from`,
-	windowTransitionLeaveTo: `window-transition-leave-to`
-};
 //#endregion
-//#region src/transition/FluxBreakthroughTransition.vue
-var FluxBreakthroughTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxBreakthroughTransition",
+//#region src/component/FluxButtonStack.vue
+var FluxButtonStack_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxButtonStack",
 	props: {
-		isBack: { type: Boolean },
-		mode: { default: "out-in" }
+		direction: { default: "horizontal" },
+		gap: { default: 9 },
+		isFill: { type: Boolean }
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackEnterActive : unref(Transition_module_default).breakthroughTransitionEnterActive,
-				"enter-from-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackEnterFrom : unref(Transition_module_default).breakthroughTransitionEnterFrom,
-				"leave-active-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackLeaveActive : unref(Transition_module_default).breakthroughTransitionLeaveActive,
-				"leave-to-class": __props.isBack ? unref(Transition_module_default).breakthroughTransitionBackLeaveTo : unref(Transition_module_default).breakthroughTransitionLeaveTo
+			return openBlock(), createBlock(FluxFlex_default, {
+				class: normalizeClass(__props.isFill ? unref(Flex_module_default).flexFill : void 0),
+				direction: __props.direction,
+				gap: __props.gap,
+				wrap: "wrap"
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
+				"class",
+				"direction",
+				"gap"
 			]);
 		};
 	}
 });
 //#endregion
-//#region src/transition/FluxFadeTransition.vue
-var FluxFadeTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxFadeTransition",
-	props: { mode: { default: "out-in" } },
+//#region src/component/FluxPaneBody.vue
+var FluxPaneBody_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxPaneBody",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": unref(Transition_module_default).fadeTransitionEnterActive,
-				"enter-from-class": unref(Transition_module_default).fadeTransitionEnterFrom,
-				"enter-to-class": unref(Transition_module_default).fadeTransitionEnterTo,
-				"leave-active-class": unref(Transition_module_default).fadeTransitionLeaveActive,
-				"leave-from-class": unref(Transition_module_default).fadeTransitionLeaveFrom,
-				"leave-to-class": unref(Transition_module_default).fadeTransitionLeaveTo
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"enter-to-class",
-				"leave-active-class",
-				"leave-from-class",
-				"leave-to-class"
-			]);
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Pane_module_default).paneBody) }, [renderSlot(_ctx.$slots, "default")], 2);
 		};
 	}
 });
 //#endregion
-//#region src/transition/FluxOverlayTransition.vue
-var FluxOverlayTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxOverlayTransition",
-	props: { mode: { default: "out-in" } },
+//#region src/component/FluxActionPane.vue
+var FluxActionPane_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxActionPane",
+	props: { paneVariant: {} },
 	setup(__props) {
+		const slots = useSlots();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": unref(Overlay_module_default).overlayTransitionEnterActive,
-				"enter-from-class": unref(Overlay_module_default).overlayTransitionEnterFrom,
-				"leave-active-class": unref(Overlay_module_default).overlayTransitionLeaveActive,
-				"leave-to-class": unref(Overlay_module_default).overlayTransitionLeaveTo
+			return openBlock(), createBlock(FluxPane_default, {
+				class: normalizeClass(unref(Action_module_default).actionPane),
+				variant: __props.paneVariant
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "base"), createElementVNode("div", { class: normalizeClass(unref(Action_module_default).actionPaneGrid) }, [createVNode(FluxPaneBody_default, { class: normalizeClass(unref(Action_module_default).actionPaneBody) }, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 8, ["class"]), slots.buttons ? (openBlock(), createBlock(FluxPaneBody_default, {
+					key: 0,
+					class: normalizeClass(unref(Action_module_default).actionPaneBody)
+				}, {
+					default: withCtx(() => [createVNode(FluxButtonStack_default, { direction: "vertical" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "buttons")]),
+						_: 3
+					})]),
+					_: 3
+				}, 8, ["class"])) : createCommentVNode("", true)], 2)]),
 				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
-			]);
+			}, 8, ["class", "variant"]);
 		};
 	}
 });
 //#endregion
-//#region src/transition/FluxRouteTransition.vue
-var FluxRouteTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxRouteTransition",
-	props: {
-		isBack: { type: Boolean },
-		mode: { default: "out-in" }
-	},
+//#region src/component/FluxActionStack.vue
+var FluxActionStack_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxActionStack",
 	setup(__props) {
+		L$1(useTemplateRef("element"), { direction: "horizontal" });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackEnterActive : unref(Transition_module_default).routeTransitionEnterActive,
-				"enter-from-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackEnterFrom : unref(Transition_module_default).routeTransitionEnterFrom,
-				"leave-active-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackLeaveActive : unref(Transition_module_default).routeTransitionLeaveActive,
-				"leave-to-class": __props.isBack ? unref(Transition_module_default).routeTransitionBackLeaveTo : unref(Transition_module_default).routeTransitionLeaveTo
+			return openBlock(), createBlock(FluxFlex_default, {
+				ref: "element",
+				direction: "horizontal",
+				gap: 1,
+				tag: "nav"
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
-			]);
+			}, 512);
 		};
 	}
 });
+var AdaptiveSlot_module_default = {
+	adaptiveGroup: `adaptive-group`,
+	adaptiveSlot: `adaptive-slot`,
+	adaptiveSlotMeasurer: `adaptive-slot-measurer`
+};
 //#endregion
-//#region src/transition/FluxSlideOverTransition.vue
-var FluxSlideOverTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxSlideOverTransition",
-	props: { mode: { default: "out-in" } },
+//#region src/component/FluxAdaptiveGroup.vue
+var FluxAdaptiveGroup_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAdaptiveGroup",
+	props: { gap: { default: 9 } },
 	setup(__props) {
+		const elementRef = useTemplateRef("element");
+		const children = shallowReactive(/* @__PURE__ */ new Map());
+		const reflow = i$2(() => {
+			const element = _$3(elementRef);
+			if (!element) return;
+			const available = element.clientWidth;
+			const entries = Array.from(children.entries());
+			const states = new Map(entries.map(([uid]) => [uid, true]));
+			const sorted = [...entries].sort(([, a], [, b]) => a.priority.value - b.priority.value);
+			const currentTotal = () => {
+				let total = 0;
+				let visible = 0;
+				for (const [uid, child] of entries) {
+					const width = states.get(uid) ? child.desiredDefaultWidth.value : child.desiredFallbackWidth.value;
+					if (width === 0) continue;
+					total += width;
+					visible++;
+				}
+				return total + Math.max(0, visible - 1) * __props.gap;
+			};
+			while (currentTotal() > available) {
+				const victim = sorted.find(([uid]) => states.get(uid));
+				if (!victim) break;
+				states.set(victim[0], false);
+			}
+			for (const [uid, child] of entries) child.isDefaultVisible.value = !!states.get(uid);
+		});
+		watchEffect(() => {
+			for (const child of children.values()) {
+				child.priority.value;
+				child.desiredDefaultWidth.value;
+				child.desiredFallbackWidth.value;
+			}
+			reflow();
+		});
+		provide(FluxAdaptiveGroupInjectionKey, {
+			register(uid, child) {
+				children.set(uid, child);
+			},
+			unregister(uid) {
+				children.delete(uid);
+			}
+		});
+		watch(elementRef, (element, _, onCleanup) => {
+			if (!element) return;
+			const observer = new ResizeObserver(reflow);
+			observer.observe(element);
+			observer.observe(document.documentElement);
+			onCleanup(() => {
+				observer.disconnect();
+			});
+		}, { immediate: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": unref(Overlay_module_default).slideOverTransitionEnterActive,
-				"enter-from-class": unref(Overlay_module_default).slideOverTransitionEnterFrom,
-				"leave-active-class": unref(Overlay_module_default).slideOverTransitionLeaveActive,
-				"leave-to-class": unref(Overlay_module_default).slideOverTransitionLeaveTo
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
-			]);
+			return openBlock(), createElementBlock("div", {
+				ref: "element",
+				class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveGroup),
+				style: normalizeStyle({ "--gap": `${__props.gap}px` })
+			}, [renderSlot(_ctx.$slots, "default")], 6);
 		};
 	}
 });
 //#endregion
-//#region src/transition/FluxTooltipTransition.vue
-var FluxTooltipTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxTooltipTransition",
-	props: { mode: { default: "out-in" } },
+//#region src/component/FluxAdaptiveSlot.vue
+var FluxAdaptiveSlot_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAdaptiveSlot",
+	props: { priority: { default: 1 } },
 	setup(__props) {
+		const props = __props;
+		const group = useAdaptiveGroupInjection_default();
+		const instance = getCurrentInstance();
+		const elementRef = useTemplateRef("element");
+		const defaultMeasurerRef = useTemplateRef("defaultMeasurer");
+		const fallbackMeasurerRef = useTemplateRef("fallbackMeasurer");
+		const isDefaultVisible = ref(true);
+		const desiredDefaultWidth = ref(0);
+		const desiredFallbackWidth = ref(0);
+		const priorityRef = toRef(props, "priority");
+		watch([defaultMeasurerRef, fallbackMeasurerRef], ([def, fb], _, onCleanup) => {
+			if (!def) return;
+			const update = () => {
+				desiredDefaultWidth.value = def.offsetWidth;
+				desiredFallbackWidth.value = fb?.offsetWidth ?? 0;
+			};
+			const observer = new ResizeObserver(update);
+			observer.observe(def);
+			if (fb) observer.observe(fb);
+			observer.observe(document.documentElement);
+			update();
+			onCleanup(() => {
+				observer.disconnect();
+			});
+		}, { immediate: true });
+		if (group) {
+			onMounted(() => {
+				group.register(instance.uid, {
+					priority: priorityRef,
+					desiredDefaultWidth,
+					desiredFallbackWidth,
+					isDefaultVisible
+				});
+			});
+			onUnmounted(() => {
+				group.unregister(instance.uid);
+			});
+		} else {
+			let lastFailedParentWidth = -1;
+			const reflow = i$2(() => {
+				const element = _$3(elementRef);
+				if (!element || !isDefaultVisible.value) return;
+				if (desiredDefaultWidth.value > element.clientWidth) {
+					lastFailedParentWidth = element.parentElement?.clientWidth ?? -1;
+					isDefaultVisible.value = false;
+				} else lastFailedParentWidth = -1;
+			});
+			watch(elementRef, (element, _, onCleanup) => {
+				if (!element) return;
+				const parent = element.parentElement;
+				const observer = new ResizeObserver((entries) => {
+					for (const entry of entries) if (entry.target === parent && !isDefaultVisible.value) {
+						if (parent.clientWidth > lastFailedParentWidth) isDefaultVisible.value = true;
+					}
+					reflow();
+				});
+				observer.observe(element);
+				if (parent) observer.observe(parent);
+				observer.observe(document.documentElement);
+				onCleanup(() => {
+					observer.disconnect();
+				});
+			}, { immediate: true });
+			watch(desiredDefaultWidth, () => {
+				lastFailedParentWidth = -1;
+				isDefaultVisible.value = true;
+			});
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": unref(Transition_module_default).tooltipTransitionEnterActive,
-				"enter-from-class": unref(Transition_module_default).tooltipTransitionEnterFrom,
-				"leave-active-class": unref(Transition_module_default).tooltipTransitionLeaveActive,
-				"leave-to-class": unref(Transition_module_default).tooltipTransitionLeaveTo
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
-			]);
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("div", {
+					ref: "element",
+					class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveSlot),
+					style: normalizeStyle(unref(group) ? "flex-shrink: 0" : void 0)
+				}, [isDefaultVisible.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : renderSlot(_ctx.$slots, "fallback", { key: 1 })], 6),
+				createElementVNode("div", {
+					ref: "defaultMeasurer",
+					class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveSlotMeasurer),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "default")], 2),
+				createElementVNode("div", {
+					ref: "fallbackMeasurer",
+					class: normalizeClass(unref(AdaptiveSlot_module_default).adaptiveSlotMeasurer),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "fallback")], 2)
+			], 64);
 		};
 	}
 });
+var Visual_module_default = {
+	fillVisual: `fill-visual`,
+	animatedColors: `animated-colors fill-visual`,
+	dotPattern: `dot-pattern fill-visual`,
+	flickeringGrid: `flickering-grid fill-visual`,
+	gridPattern: `grid-pattern fill-visual`,
+	borderShine: `border-shine`,
+	borderShinePosition: `border-shine-position`
+};
 //#endregion
-//#region src/transition/FluxVerticalWindowTransition.vue
-var FluxVerticalWindowTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxVerticalWindowTransition",
+//#region src/component/FluxAnimatedColors.vue
+var FluxAnimatedColors_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAnimatedColors",
 	props: {
-		isBack: { type: Boolean },
-		mode: { default: "out-in" }
+		colors: {},
+		incrementor: { default: 1 },
+		opacity: { default: .5 },
+		seed: {},
+		static: { type: Boolean }
 	},
 	setup(__props) {
+		const canvasRef = useTemplateRef("canvas");
+		const componentId = q$1();
+		const contextRef = ref();
+		const animationFrame = ref(0);
+		const tick = ref(0);
+		const polygons = computed(() => {
+			if (!__props.colors || __props.colors.length === 0) return [];
+			const mulberry = V$2(__props.seed ?? componentId.value);
+			const polygons = [];
+			for (const color of __props.colors) {
+				const localMulberry = mulberry.fork();
+				const x = __props.colors.length === 1 ? .5 : localMulberry.next();
+				const y = __props.colors.length === 1 ? .5 : localMulberry.next();
+				const count = Math.round(localMulberry.nextBetween(6, 9));
+				const points = [];
+				for (let p = 0; p < count; ++p) points.push([
+					localMulberry.next(),
+					localMulberry.next(),
+					localMulberry.next()
+				]);
+				polygons.push([
+					x,
+					y,
+					color,
+					points
+				]);
+			}
+			return polygons;
+		});
+		onMounted(() => schedule());
+		onBeforeUnmount(() => cancel());
+		function cancel() {
+			cancelAnimationFrame(animationFrame.value);
+		}
+		function schedule() {
+			animationFrame.value = requestAnimationFrame(update);
+			tick.value += __props.incrementor;
+		}
+		function update() {
+			const context = unref(contextRef);
+			const shapes = unref(polygons);
+			if (!context || shapes.length === 0) return;
+			const width = context.canvas.offsetWidth;
+			const height = context.canvas.offsetHeight;
+			context.canvas.width = width;
+			context.canvas.height = height;
+			const widthBasedOpacity = Math.min(1, Math.max(.15, 360 / width));
+			context.globalAlpha = __props.opacity * widthBasedOpacity;
+			context.globalCompositeOperation = "screen";
+			context.clearRect(0, 0, width, height);
+			for (const [tx, ty, color, shape] of shapes) {
+				context.save();
+				context.translate(tx * width, ty * height);
+				context.beginPath();
+				context.fillStyle = color;
+				for (let i = 0; i < shape.length; ++i) {
+					let [x, y, m] = shape[i];
+					x = Math.cos(x * Math.PI * 2 + tick.value / (m * 200 + 300)) * (width * .8);
+					y = Math.sin(y * Math.PI * 2 + tick.value / (m * 100 + 300)) * (height * .8);
+					if (i === 0) context.moveTo(x, y);
+					else context.lineTo(x, y);
+				}
+				context.closePath();
+				context.fill();
+				context.restore();
+			}
+			!__props.static && schedule();
+		}
+		watch(canvasRef, (canvas) => {
+			if (!canvas) {
+				contextRef.value = void 0;
+				return;
+			}
+			contextRef.value = canvas.getContext("2d", {
+				alpha: true,
+				colorSpace: "display-p3"
+			});
+		}, { immediate: true });
+		watch(polygons, () => {
+			cancel();
+			!__props.static && schedule();
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackEnterActive : unref(Transition_module_default).verticalWindowTransitionEnterActive,
-				"enter-from-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackEnterFrom : unref(Transition_module_default).verticalWindowTransitionEnterFrom,
-				"leave-active-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackLeaveActive : unref(Transition_module_default).verticalWindowTransitionLeaveActive,
-				"leave-to-class": __props.isBack ? unref(Transition_module_default).verticalWindowTransitionBackLeaveTo : unref(Transition_module_default).verticalWindowTransitionLeaveTo
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
-			]);
+			return openBlock(), createElementBlock("canvas", {
+				ref: "canvas",
+				class: normalizeClass(unref(Visual_module_default).animatedColors)
+			}, null, 2);
 		};
 	}
 });
 //#endregion
-//#region src/transition/FluxWindowTransition.vue
-var FluxWindowTransition_default = /* @__PURE__ */ defineComponent({
-	__name: "FluxWindowTransition",
+//#region src/component/FluxAspectRatio.vue
+var FluxAspectRatio_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxAspectRatio",
 	props: {
-		isBack: { type: Boolean },
-		mode: { default: "out-in" }
+		aspectRatio: {},
+		tag: {}
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, {
-				mode: __props.mode,
-				"enter-active-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackEnterActive : unref(Transition_module_default).windowTransitionEnterActive,
-				"enter-from-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackEnterFrom : unref(Transition_module_default).windowTransitionEnterFrom,
-				"leave-active-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackLeaveActive : unref(Transition_module_default).windowTransitionLeaveActive,
-				"leave-to-class": __props.isBack ? unref(Transition_module_default).windowTransitionBackLeaveTo : unref(Transition_module_default).windowTransitionLeaveTo
+			return openBlock(), createBlock(resolveDynamicComponent(__props.tag ?? "div"), {
+				class: normalizeClass(unref(Layout_module_default).aspectRatio),
+				style: normalizeStyle({ aspectRatio: __props.aspectRatio })
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, [
-				"mode",
-				"enter-active-class",
-				"enter-from-class",
-				"leave-active-class",
-				"leave-to-class"
-			]);
+			}, 8, ["class", "style"]);
 		};
 	}
 });
@@ -13612,7 +13615,7 @@ var FilterBadge_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Menu.module.scss
-var { "button": _0$9, "buttonIcon": _1$3, "buttonLabel": _2$2 } = Button_module_default$1;
+var { "buttonLabel": _0$9, "button": _1$3, "buttonIcon": _2$2 } = Button_module_default$1;
 var Menu_module_default = {
 	menu: `menu`,
 	menuNormal: `menu-normal menu`,
@@ -13620,10 +13623,10 @@ var Menu_module_default = {
 	menuGroup: `menu-group`,
 	menuGroupHorizontal: `menu-group-horizontal menu-group`,
 	menuGroupVertical: `menu-group-vertical menu-group`,
-	menuItem: `menu-item ${_0$9}`,
+	menuItem: `menu-item ${_1$3}`,
 	badge: `badge`,
-	menuItemIcon: `menu-item-icon ${_1$3}`,
-	menuItemLabel: `menu-item-label ${_2$2}`,
+	menuItemIcon: `menu-item-icon ${_2$2}`,
+	menuItemLabel: `menu-item-label ${_0$9}`,
 	menuItemActive: `menu-item-active`,
 	menuItemDestructive: `menu-item-destructive`,
 	menuItemHighlighted: `menu-item-highlighted`,
@@ -13632,7 +13635,7 @@ var Menu_module_default = {
 	menuCollapsibleOpened: `menu-collapsible-opened menu-collapsible`,
 	menuCollapsibleBody: `menu-collapsible-body`,
 	menuCollapsibleContent: `menu-collapsible-content`,
-	menuItemSelectableIcon: `menu-item-selectable-icon ${_1$3}`,
+	menuItemSelectableIcon: `menu-item-selectable-icon ${_2$2}`,
 	menuItemSelected: `menu-item-selected`,
 	menuItemCommand: `menu-item-command`,
 	menuItemCommandIcon: `menu-item-command-icon`,
@@ -15220,16 +15223,16 @@ var FluxFormSelect_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Pagination.module.scss
-var { "secondaryButton": _0$8, "secondaryButtonIcon": _1$2, "secondaryButtonLabel": _2$1 } = Button_module_default;
+var { "secondaryButtonLabel": _0$8, "secondaryButton": _1$2, "secondaryButtonIcon": _2$1 } = Button_module_default;
 var Pagination_module_default = {
 	pagination: `pagination`,
-	paginationButton: `pagination-button ${_0$8}`,
+	paginationButton: `pagination-button ${_1$2}`,
 	secondaryButton: `secondary-button`,
 	paginationButtonArrow: `pagination-button-arrow`,
 	paginationButtonCurrent: `pagination-button-current`,
 	paginationButtonSpacer: `pagination-button-spacer`,
-	paginationButtonIcon: `pagination-button-icon ${_1$2}`,
-	paginationButtonLabel: `pagination-button-label ${_2$1}`,
+	paginationButtonIcon: `pagination-button-icon ${_2$1}`,
+	paginationButtonLabel: `pagination-button-label ${_0$8}`,
 	paginationBar: `pagination-bar`,
 	paginationBarLimit: `pagination-bar-limit`,
 	paginationBarLimitDisplayingOf: `pagination-bar-limit-displaying-of`,
@@ -15491,13 +15494,13 @@ var FluxPaginationBar_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Table.module.scss
-var { "basePaneElement": _0$7, "basePaneLoader": _1$1 } = Pane_module_default$1;
+var { "basePaneLoader": _0$7, "basePaneElement": _1$1 } = Pane_module_default$1;
 var Table_module_default = {
-	table: `table ${_0$7}`,
+	table: `table ${_1$1}`,
 	tableBase: `table-base`,
 	tableFill: `table-fill`,
 	tablePagination: `table-pagination`,
-	tableLoader: `table-loader ${_1$1}`,
+	tableLoader: `table-loader ${_0$7}`,
 	tableRow: `table-row`,
 	tableCell: `table-cell`,
 	tableCellContent: `table-cell-content`,