@flux-ui/components 3.0.0-next.57 → 3.0.0-next.58

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, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowReactive, toDisplayString, toHandlers, toRef, unref, useId, useModel, useSlots, useTemplateRef, vModelCheckbox, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Comment, Fragment, Teleport, Text, 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, shallowReactive, toDisplayString, toHandlers, toRef, unref, useId, useModel, useSlots, useTemplateRef, vModelCheckbox, vModelText, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { DateTime } from "luxon";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
@@ -4525,17 +4525,17 @@ function he$1(e, t, n) {
 }
 //#endregion
 //#region src/composable/private/useAsyncFilterOptions.ts
-function useAsyncFilterOptions_default({ currentValueIds, modelSearch, fetchOptions: fetchOptionsProp, fetchRelevant: fetchRelevantProp, fetchSearch: fetchSearchProp }) {
+function useAsyncFilterOptions_default(params) {
 	const { isLoading, loaded } = Z$1();
-	const debouncedModelSearch = Y$1(modelSearch, 150);
-	const fetchOptions = computed(() => loaded(fetchOptionsProp));
-	const fetchRelevant = computed(() => loaded(fetchRelevantProp));
-	const fetchSearch = computed(() => loaded(fetchSearchProp));
+	const debouncedModelSearch = Y$1(params.modelSearch, 150);
+	const fetchOptions = computed(() => loaded(params.fetchOptions));
+	const fetchRelevant = computed(() => loaded(params.fetchRelevant));
+	const fetchSearch = computed(() => loaded(params.fetchSearch));
 	const selectedOptions = ref([]);
 	const visibleOptions = ref([]);
 	const options = computed(() => {
 		const options = [];
-		const search = unref(modelSearch);
+		const search = unref(params.modelSearch);
 		const selected = unref(selectedOptions);
 		const visible = unref(visibleOptions);
 		visible.forEach((vo) => options.push(vo));
@@ -4546,7 +4546,7 @@ function useAsyncFilterOptions_default({ currentValueIds, modelSearch, fetchOpti
 		});
 		return options;
 	});
-	watch(currentValueIds, async (ids) => {
+	watch(params.currentValueIds, async (ids) => {
 		if (ids.length === 0) return;
 		selectedOptions.value = await unref(fetchOptions)(ids);
 	}, { immediate: true });
@@ -7984,13 +7984,13 @@ var Icon_module_default = {
 };
 //#endregion
 //#region src/component/FluxIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$54 = [
+var _hoisted_1$57 = [
 	"viewBox",
 	"role",
 	"aria-hidden",
 	"aria-label"
 ];
-var _hoisted_2$22 = ["d"];
+var _hoisted_2$23 = ["d"];
 //#endregion
 //#region src/component/FluxIcon.vue
 var FluxIcon_default = /* @__PURE__ */ defineComponent({
@@ -8036,8 +8036,8 @@ var FluxIcon_default = /* @__PURE__ */ defineComponent({
 				return openBlock(), createElementBlock("path", {
 					d: path,
 					fill: "currentColor"
-				}, null, 8, _hoisted_2$22);
-			}), 256))], 14, _hoisted_1$54)) : (openBlock(), createElementBlock("i", {
+				}, null, 8, _hoisted_2$23);
+			}), 256))], 14, _hoisted_1$57)) : (openBlock(), createElementBlock("i", {
 				key: 1,
 				class: normalizeClass(unref(Icon_module_default).icon)
 			}, null, 2));
@@ -8046,7 +8046,7 @@ var FluxIcon_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxPressable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$53 = [
+var _hoisted_1$56 = [
 	"href",
 	"rel",
 	"target"
@@ -8097,7 +8097,7 @@ var FluxPressable_default = /* @__PURE__ */ defineComponent({
 				rel: __props.rel,
 				target: __props.target,
 				onClick: _cache[1] || (_cache[1] = ($event) => onClick($event))
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$53)) : __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));
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$56)) : __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));
 		};
 	}
 });
@@ -8528,7 +8528,7 @@ var Flyout_module_default = {
 };
 //#endregion
 //#region src/component/FluxFlyout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$52 = ["onKeydown"];
+var _hoisted_1$55 = ["onKeydown"];
 //#endregion
 //#region src/component/FluxFlyout.vue
 var FluxFlyout_default = /* @__PURE__ */ defineComponent({
@@ -8665,7 +8665,7 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 					openerHeight: openerHeight.value
 				})))]),
 				_: 3
-			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$52)], 6);
+			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$55)], 6);
 		};
 	}
 });
@@ -9631,8 +9631,8 @@ var Avatar_module_default = {
 };
 //#endregion
 //#region src/component/FluxAvatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$51 = ["alt", "src"];
-var _hoisted_2$21 = { key: 0 };
+var _hoisted_1$54 = ["alt", "src"];
+var _hoisted_2$22 = { key: 0 };
 //#endregion
 //#region src/component/FluxAvatar.vue
 var FluxAvatar_default = /* @__PURE__ */ defineComponent({
@@ -9718,10 +9718,10 @@ var FluxAvatar_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(Avatar_module_default).avatarImage),
 						alt: __props.alt,
 						src: __props.src
-					}, null, 10, _hoisted_1$51)) : (openBlock(), createElementBlock("div", {
+					}, null, 10, _hoisted_1$54)) : (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$21, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(FluxIcon_default, {
+					}, [__props.fallbackInitials ? (openBlock(), createElementBlock("span", _hoisted_2$22, toDisplayString(__props.fallbackInitials), 1)) : __props.fallbackIcon ? (openBlock(), createBlock(FluxIcon_default, {
 						key: 1,
 						name: __props.fallbackIcon
 					}, null, 8, ["name"])) : createCommentVNode("", true)], 2)),
@@ -9781,7 +9781,7 @@ var Badge_module_default = {
 };
 //#endregion
 //#region src/component/FluxBadge.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$50 = ["aria-label"];
+var _hoisted_1$53 = ["aria-label"];
 //#endregion
 //#region src/component/FluxBadge.vue
 var FluxBadge_default = /* @__PURE__ */ defineComponent({
@@ -9847,7 +9847,7 @@ var FluxBadge_default = /* @__PURE__ */ defineComponent({
 						type: "button",
 						"aria-label": unref(translate)("flux.delete"),
 						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onDeleteClick(), ["stop"]))
-					}, [createVNode(FluxIcon_default, { name: "xmark" })], 10, _hoisted_1$50)) : createCommentVNode("", true)
+					}, [createVNode(FluxIcon_default, { name: "xmark" })], 10, _hoisted_1$53)) : createCommentVNode("", true)
 				]),
 				_: 1
 			}, 8, [
@@ -10112,8 +10112,8 @@ var FluxPaneFooter_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxPaneHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$49 = { key: 0 };
-var _hoisted_2$20 = { key: 1 };
+var _hoisted_1$52 = { key: 0 };
+var _hoisted_2$21 = { key: 1 };
 //#endregion
 //#region src/component/FluxPaneHeader.vue
 var FluxPaneHeader_default = /* @__PURE__ */ defineComponent({
@@ -10136,7 +10136,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$49, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_2$20, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
+				}, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_1$52, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_2$21, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "after")
 			], 2);
 		};
@@ -10284,7 +10284,7 @@ var Menu_module_default = {
 };
 //#endregion
 //#region src/component/FluxMenuItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$48 = ["src", "alt"];
+var _hoisted_1$51 = ["src", "alt"];
 //#endregion
 //#region src/component/FluxMenuItem.vue
 var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
@@ -10361,7 +10361,7 @@ var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Menu_module_default).menuItemImage),
 					src: __props.imageSrc,
 					alt: __props.imageAlt ?? ""
-				}, null, 10, _hoisted_1$48)]),
+				}, null, 10, _hoisted_1$51)]),
 				key: "1"
 			} : slots.before ? {
 				name: "iconLeading",
@@ -10533,8 +10533,8 @@ var Form_module_default = {
 };
 //#endregion
 //#region src/component/FluxFormInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$47 = ["aria-disabled"];
-var _hoisted_2$19 = [
+var _hoisted_1$50 = ["aria-disabled"];
+var _hoisted_2$20 = [
 	"id",
 	"name",
 	"autocomplete",
@@ -10713,7 +10713,7 @@ var FluxFormInput_default = /* @__PURE__ */ defineComponent({
 					onFocus: _cache[1] || (_cache[1] = ($event) => onFocus()),
 					onInput,
 					onKeydown: onKeyDown
-				}, null, 42, _hoisted_2$19),
+				}, null, 42, _hoisted_2$20),
 				__props.iconLeading ? (openBlock(), createBlock(FluxIcon_default, {
 					key: 0,
 					class: normalizeClass(unref(Form_module_default).formInputIconLeading),
@@ -10737,7 +10737,7 @@ var FluxFormInput_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Form_module_default).formInputIconTrailing),
 					size: 18
 				}, null, 8, ["class"])) : createCommentVNode("", true)
-			], 10, _hoisted_1$47);
+			], 10, _hoisted_1$50);
 		};
 	}
 });
@@ -10863,7 +10863,7 @@ var FluxMenu_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxTag.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$46 = ["aria-label"];
+var _hoisted_1$49 = ["aria-label"];
 //#endregion
 //#region src/component/FluxTag.vue
 var FluxTag_default = /* @__PURE__ */ defineComponent({
@@ -10931,7 +10931,7 @@ var FluxTag_default = /* @__PURE__ */ defineComponent({
 						type: "button",
 						"aria-label": unref(translate)("flux.delete"),
 						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => onDeleteClick(), ["stop"]))
-					}, [createVNode(FluxIcon_default, { name: "xmark" })], 10, _hoisted_1$46)) : createCommentVNode("", true)
+					}, [createVNode(FluxIcon_default, { name: "xmark" })], 10, _hoisted_1$49)) : createCommentVNode("", true)
 				]),
 				_: 1
 			}, 8, [
@@ -11255,7 +11255,7 @@ var FluxTicks_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/primitive/SliderBase.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$45 = ["aria-disabled"];
+var _hoisted_1$48 = ["aria-disabled"];
 //#endregion
 //#region src/component/primitive/SliderBase.vue
 var SliderBase_default = /* @__PURE__ */ defineComponent({
@@ -11308,13 +11308,13 @@ 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$45);
+			}, null, 8, ["lower", "upper"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$48);
 		};
 	}
 });
 //#endregion
 //#region src/component/primitive/SliderThumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$44 = [
+var _hoisted_1$47 = [
 	"aria-disabled",
 	"aria-label",
 	"aria-valuemax",
@@ -11373,7 +11373,7 @@ var SliderThumb_default = /* @__PURE__ */ defineComponent({
 				type: "button",
 				onKeydown: onKeyDown,
 				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
-			}, null, 46, _hoisted_1$44);
+			}, null, 46, _hoisted_1$47);
 		};
 	}
 });
@@ -11478,7 +11478,7 @@ var Divider_module_default = {
 };
 //#endregion
 //#region src/component/FluxSeparator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$43 = ["aria-orientation"];
+var _hoisted_1$46 = ["aria-orientation"];
 //#endregion
 //#region src/component/FluxSeparator.vue
 var FluxSeparator_default = /* @__PURE__ */ defineComponent({
@@ -11490,7 +11490,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$43);
+			}, null, 10, _hoisted_1$46);
 		};
 	}
 });
@@ -11581,8 +11581,8 @@ var DatePicker_module_default = {
 };
 //#endregion
 //#region src/component/FluxCalendar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$42 = ["aria-label", "onClick"];
-var _hoisted_2$18 = ["aria-label", "onClick"];
+var _hoisted_1$45 = ["aria-label", "onClick"];
+var _hoisted_2$19 = ["aria-label", "onClick"];
 //#endregion
 //#region src/component/FluxCalendar.vue
 var FluxCalendar_default = /* @__PURE__ */ defineComponent({
@@ -11648,7 +11648,7 @@ var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 							"aria-label": unref(translate)("flux.selectMonth"),
 							type: "button",
 							onClick: open
-						}, toDisplayString(unref(viewMonth)), 11, _hoisted_1$42)]),
+						}, toDisplayString(unref(viewMonth)), 11, _hoisted_1$45)]),
 						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,
@@ -11664,7 +11664,7 @@ var FluxCalendar_default = /* @__PURE__ */ defineComponent({
 							"aria-label": unref(translate)("flux.selectYear"),
 							type: "button",
 							onClick: open
-						}, toDisplayString(unref(viewYear)), 11, _hoisted_2$18)]),
+						}, toDisplayString(unref(viewYear)), 11, _hoisted_2$19)]),
 						default: withCtx(({ close }) => [createElementVNode("div", { class: normalizeClass(unref(DatePicker_module_default).datePickerYears) }, [
 							createVNode(FluxSecondaryButton_default, {
 								"aria-label": unref(translate)("flux.previousYears"),
@@ -11770,8 +11770,8 @@ var FluxCalendarEvent_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxCheckbox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$41 = ["for"];
-var _hoisted_2$17 = [
+var _hoisted_1$44 = ["for"];
+var _hoisted_2$18 = [
 	"id",
 	"disabled",
 	"aria-disabled",
@@ -11825,7 +11825,7 @@ var FluxCheckbox_default = /* @__PURE__ */ defineComponent({
 					"aria-readonly": __props.isReadonly ? true : void 0,
 					"aria-invalid": __props.error ? true : void 0,
 					onClick
-				}, null, 10, _hoisted_2$17), [[vModelCheckbox, modelValue.value]]),
+				}, null, 10, _hoisted_2$18), [[vModelCheckbox, modelValue.value]]),
 				createElementVNode("button", {
 					"aria-hidden": "true",
 					class: normalizeClass(unref(Form_module_default).checkboxElement),
@@ -11843,7 +11843,7 @@ var FluxCheckbox_default = /* @__PURE__ */ defineComponent({
 					key: 0,
 					class: normalizeClass(unref(Form_module_default).checkboxLabel)
 				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-			], 10, _hoisted_1$41);
+			], 10, _hoisted_1$44);
 		};
 	}
 });
@@ -12047,8 +12047,8 @@ var FluxCommandPaletteItem_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxCommandPalette.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$40 = ["placeholder", "value"];
-var _hoisted_2$16 = ["onClick"];
+var _hoisted_1$43 = ["placeholder", "value"];
+var _hoisted_2$17 = ["onClick"];
 //#endregion
 //#region src/component/FluxCommandPalette.vue
 var FluxCommandPalette_default = /* @__PURE__ */ defineComponent({
@@ -12175,7 +12175,7 @@ var FluxCommandPalette_default = /* @__PURE__ */ defineComponent({
 						value: unref(search),
 						type: "text",
 						onInput: _cache[2] || (_cache[2] = ($event) => unref(setSearch)($event.target.value))
-					}, null, 42, _hoisted_1$40),
+					}, null, 42, _hoisted_1$43),
 					createVNode(FluxTag_default, {
 						"is-keyboard-shortcut": "",
 						label: "Esc"
@@ -12202,7 +12202,7 @@ var FluxCommandPalette_default = /* @__PURE__ */ defineComponent({
 						key: 0,
 						class: normalizeClass(unref(CommandPalette_module_default).commandPaletteTabIcon),
 						name: tab.icon
-					}, null, 8, ["class", "name"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(tab.label), 1)], 42, _hoisted_2$16);
+					}, null, 8, ["class", "name"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString(tab.label), 1)], 42, _hoisted_2$17);
 				}), 128))], 2)) : createCommentVNode("", true),
 				createVNode(FluxWindowTransition_default, { "is-back": unref(isTransitioningBack) }, {
 					default: withCtx(() => [(openBlock(), createElementBlock("div", {
@@ -12279,8 +12279,8 @@ var Comment_module_default = {
 };
 //#endregion
 //#region src/component/FluxComment.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$39 = { key: 0 };
-var _hoisted_2$15 = ["datetime"];
+var _hoisted_1$42 = { key: 0 };
+var _hoisted_2$16 = ["datetime"];
 //#endregion
 //#region src/component/FluxComment.vue
 var FluxComment_default = /* @__PURE__ */ defineComponent({
@@ -12324,10 +12324,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$39, 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$42, 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$15)) : createCommentVNode("", true)], 2)
+				}, toDisplayString(isJustNowVisible.value ? unref(translate)("flux.justNow") : relative.value), 9, _hoisted_2$16)) : createCommentVNode("", true)], 2)
 			], 2);
 		};
 	}
@@ -12343,7 +12343,7 @@ var CoordinatePicker_module_default = {
 };
 //#endregion
 //#region src/component/primitive/CoordinatePickerThumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$38 = [
+var _hoisted_1$41 = [
 	"aria-disabled",
 	"aria-valuetext",
 	"tabindex"
@@ -12399,13 +12399,13 @@ var CoordinatePickerThumb_default = /* @__PURE__ */ defineComponent({
 				type: "button",
 				onKeydown: onKeyDown,
 				onPointerdown: _cache[0] || (_cache[0] = ($event) => $emit("grab", $event))
-			}, null, 46, _hoisted_1$38);
+			}, null, 46, _hoisted_1$41);
 		};
 	}
 });
 //#endregion
 //#region src/component/primitive/CoordinatePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$37 = ["aria-disabled", "aria-label"];
+var _hoisted_1$40 = ["aria-disabled", "aria-label"];
 //#endregion
 //#region src/component/primitive/CoordinatePicker.vue
 var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
@@ -12501,13 +12501,13 @@ var CoordinatePicker_default = /* @__PURE__ */ defineComponent({
 				"disabled",
 				"is-dragging",
 				"position"
-			])], 42, _hoisted_1$37);
+			])], 42, _hoisted_1$40);
 		};
 	}
 });
 //#endregion
 //#region src/component/FluxFormFieldAddition.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$36 = { key: 1 };
+var _hoisted_1$39 = { key: 1 };
 //#endregion
 //#region src/component/FluxFormFieldAddition.vue
 var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
@@ -12529,7 +12529,7 @@ var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
 					name: __props.icon,
 					size: 16
 				}, null, 8, ["class", "name"])) : createCommentVNode("", true),
-				__props.message ? (openBlock(), createElementBlock("span", _hoisted_1$36, toDisplayString(__props.message), 1)) : createCommentVNode("", true),
+				__props.message ? (openBlock(), createElementBlock("span", _hoisted_1$39, toDisplayString(__props.message), 1)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default")
 			], 2);
 		};
@@ -12537,7 +12537,7 @@ var FluxFormFieldAddition_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$35 = ["for"];
+var _hoisted_1$38 = ["for"];
 //#endregion
 //#region src/component/FluxFormField.vue
 var FluxFormField_default = /* @__PURE__ */ defineComponent({
@@ -12578,7 +12578,7 @@ var FluxFormField_default = /* @__PURE__ */ defineComponent({
 						label: __props.label,
 						maxLength: __props.maxLength
 					})))], 2)) : createCommentVNode("", true)
-				], 10, _hoisted_1$35),
+				], 10, _hoisted_1$38),
 				renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ id: unref(id) }))),
 				__props.currentLength && __props.maxLength && __props.maxLength > 0 ? (openBlock(), createElementBlock("span", {
 					key: 0,
@@ -13118,14 +13118,14 @@ var FluxPrimaryButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxColorSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$34 = [
+var _hoisted_1$37 = [
 	"aria-checked",
 	"aria-label",
 	"disabled",
 	"tabindex",
 	"onClick"
 ];
-var _hoisted_2$14 = [
+var _hoisted_2$15 = [
 	"disabled",
 	"tabindex",
 	"aria-label",
@@ -13193,7 +13193,7 @@ var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(unref(Color_module_default).colorSelectCheck),
 					name: "check",
 					size: 14
-				}, null, 8, ["class"])], 14, _hoisted_1$34);
+				}, null, 8, ["class"])], 14, _hoisted_1$37);
 			}), 128)), __props.isCustomAllowed ? (openBlock(), createBlock(FluxFlyout_default, { key: 0 }, {
 				opener: withCtx(({ open }) => [createElementVNode("button", {
 					class: normalizeClass(unref(Color_module_default).colorSelectCustom),
@@ -13205,7 +13205,7 @@ var FluxColorSelect_default = /* @__PURE__ */ defineComponent({
 				}, [createVNode(FluxIcon_default, {
 					name: "ellipsis-h",
 					size: 16
-				})], 10, _hoisted_2$14)]),
+				})], 10, _hoisted_2$15)]),
 				default: withCtx(({ close }) => [createVNode(FluxColorPicker_default, {
 					modelValue: customColor.value,
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customColor.value = $event),
@@ -13321,15 +13321,15 @@ var FluxFormSelect_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Pagination.module.scss
-var { "secondaryButtonIcon": _0$9, "secondaryButton": _1$3, "secondaryButtonLabel": _2$1 } = Button_module_default;
+var { "secondaryButton": _0$9, "secondaryButtonIcon": _1$3, "secondaryButtonLabel": _2$1 } = Button_module_default;
 var Pagination_module_default = {
 	pagination: `pagination`,
-	paginationButton: `pagination-button ${_1$3}`,
+	paginationButton: `pagination-button ${_0$9}`,
 	secondaryButton: `secondary-button`,
 	paginationButtonArrow: `pagination-button-arrow`,
 	paginationButtonCurrent: `pagination-button-current`,
 	paginationButtonSpacer: `pagination-button-spacer`,
-	paginationButtonIcon: `pagination-button-icon ${_0$9}`,
+	paginationButtonIcon: `pagination-button-icon ${_1$3}`,
 	paginationButtonLabel: `pagination-button-label ${_2$1}`,
 	paginationBar: `pagination-bar`,
 	paginationBarLimit: `pagination-bar-limit`,
@@ -13410,7 +13410,7 @@ var FluxPaginationButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxPagination.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$33 = ["aria-label"];
+var _hoisted_1$36 = ["aria-label"];
 //#endregion
 //#region src/component/FluxPagination.vue
 var FluxPagination_default = /* @__PURE__ */ defineComponent({
@@ -13525,7 +13525,7 @@ var FluxPagination_default = /* @__PURE__ */ defineComponent({
 					"aria-label": unref(translate)("flux.next"),
 					onClick: next
 				}, null, 8, ["disabled", "aria-label"])) : createCommentVNode("", true)
-			], 10, _hoisted_1$33);
+			], 10, _hoisted_1$36);
 		};
 	}
 });
@@ -13652,8 +13652,8 @@ var FluxTableRow_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxTable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$32 = { key: 0 };
-var _hoisted_2$13 = { key: 1 };
+var _hoisted_1$35 = { key: 0 };
+var _hoisted_2$14 = { key: 1 };
 var _hoisted_3$6 = { key: 2 };
 //#endregion
 //#region src/component/FluxTable.vue
@@ -13695,8 +13695,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$32, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true),
-					slots.default ? (openBlock(), createElementBlock("tbody", _hoisted_2$13, [renderSlot(_ctx.$slots, "default"), __props.fillColumns ? (openBlock(), createBlock(FluxTableRow_default, {
+					slots.header ? (openBlock(), createElementBlock("thead", _hoisted_1$35, [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)
 					}, {
@@ -13871,8 +13871,8 @@ var FluxDataTable_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxDatePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$31 = ["id"];
-var _hoisted_2$12 = ["aria-labelledby"];
+var _hoisted_1$34 = ["id"];
+var _hoisted_2$13 = ["aria-labelledby"];
 var _hoisted_3$5 = ["onClick", "onMouseover"];
 //#endregion
 //#region src/component/FluxDatePicker.vue
@@ -14022,7 +14022,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$31),
+				}, toDisplayString(unref(viewYear)), 3)], 10, _hoisted_1$34),
 				createVNode(unref(FluxFadeTransition_default), null, {
 					default: withCtx(() => [viewMode.value === "date" ? (openBlock(), createBlock(FluxSecondaryButton_default, {
 						key: 0,
@@ -14062,7 +14062,7 @@ var FluxDatePicker_default = /* @__PURE__ */ defineComponent({
 						}, toDisplayString(date.toLocaleString({ day: "numeric" })), 43, _hoisted_3$5);
 					}), 256))], 2))]),
 					_: 1
-				}, 8, ["is-back"])], 10, _hoisted_2$12)) : 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) => {
@@ -14123,7 +14123,7 @@ var FluxDisabled_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxDivider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$30 = ["aria-orientation"];
+var _hoisted_1$33 = ["aria-orientation"];
 //#endregion
 //#region src/component/FluxDivider.vue
 var FluxDivider_default = /* @__PURE__ */ defineComponent({
@@ -14145,18 +14145,18 @@ var FluxDivider_default = /* @__PURE__ */ defineComponent({
 			}, [renderSlot(_ctx.$slots, "default")], 2)) : (openBlock(), createElementBlock("hr", {
 				key: 1,
 				class: normalizeClass(unref(Divider_module_default).dividerLine)
-			}, null, 2))], 10, _hoisted_1$30);
+			}, null, 2))], 10, _hoisted_1$33);
 		};
 	}
 });
 //#endregion
 //#region src/component/FluxDotPattern.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$29 = [
+var _hoisted_1$32 = [
 	"id",
 	"width",
 	"height"
 ];
-var _hoisted_2$11 = [
+var _hoisted_2$12 = [
 	"r",
 	"cx",
 	"cy"
@@ -14206,7 +14206,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$11)], 8, _hoisted_1$29)]), createElementVNode("rect", {
+			}, null, 8, _hoisted_2$12)], 8, _hoisted_1$32)]), createElementVNode("rect", {
 				width: "100%",
 				height: "100%",
 				"stroke-width": "0",
@@ -14229,12 +14229,12 @@ var DropZone_module_default = {
 };
 //#endregion
 //#region src/component/FluxDropZone.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$28 = [
+var _hoisted_1$31 = [
 	"aria-disabled",
 	"aria-label",
 	"tabindex"
 ];
-var _hoisted_2$10 = ["pathLength"];
+var _hoisted_2$11 = ["pathLength"];
 //#endregion
 //#region src/component/FluxDropZone.vue
 var FluxDropZone_default = /* @__PURE__ */ defineComponent({
@@ -14348,7 +14348,7 @@ var FluxDropZone_default = /* @__PURE__ */ defineComponent({
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round",
 						pathLength: pathLength.value
-					}, null, 8, _hoisted_2$10)], 2)),
+					}, null, 8, _hoisted_2$11)], 2)),
 					renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 						isDragging: isDragging.value,
 						isDraggingOver: isDraggingOver.value,
@@ -14375,7 +14375,7 @@ var FluxDropZone_default = /* @__PURE__ */ defineComponent({
 					isDraggingOver: isDraggingOver.value,
 					showPicker
 				})))
-			], 42, _hoisted_1$28);
+			], 42, _hoisted_1$31);
 		};
 	}
 });
@@ -14405,12 +14405,12 @@ var Expandable_module_default = {
 };
 //#endregion
 //#region src/component/FluxExpandable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = [
+var _hoisted_1$30 = [
 	"id",
 	"aria-controls",
 	"aria-expanded"
 ];
-var _hoisted_2$9 = ["id", "aria-labelledby"];
+var _hoisted_2$10 = ["id", "aria-labelledby"];
 //#endregion
 //#region src/component/FluxExpandable.vue
 var FluxExpandable_default = /* @__PURE__ */ defineComponent({
@@ -14501,9 +14501,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$9)) : createCommentVNode("", true)]),
+				})))], 2)])], 10, _hoisted_2$10)) : createCommentVNode("", true)]),
 				_: 3
-			})], 10, _hoisted_1$27);
+			})], 10, _hoisted_1$30);
 		};
 	}
 });
@@ -15477,7 +15477,7 @@ var FocalPoint_module_default = {
 };
 //#endregion
 //#region src/component/FluxFocalPointEditor.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = ["src"];
+var _hoisted_1$29 = ["src"];
 //#endregion
 //#region src/component/FluxFocalPointEditor.vue
 var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
@@ -15546,7 +15546,7 @@ var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
 							src: __props.src,
 							alt: "",
 							onLoad: onImageLoaded
-						}, null, 42, _hoisted_1$26), createElementVNode("div", {
+						}, null, 42, _hoisted_1$29), createElementVNode("div", {
 							class: normalizeClass(unref(FocalPoint_module_default).focalPointEditorArea),
 							style: normalizeStyle({
 								top: `${focalPointY.value}%`,
@@ -15575,7 +15575,7 @@ var FluxFocalPointEditor_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFocalPointImage.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = ["src", "alt"];
+var _hoisted_1$28 = ["src", "alt"];
 //#endregion
 //#region src/component/FluxFocalPointImage.vue
 var FluxFocalPointImage_default = /* @__PURE__ */ defineComponent({
@@ -15594,13 +15594,13 @@ var FluxFocalPointImage_default = /* @__PURE__ */ defineComponent({
 				style: normalizeStyle({ objectPosition: `${x.value}% ${y.value}%` }),
 				src: __props.src,
 				alt: __props.alt
-			}, null, 14, _hoisted_1$25);
+			}, null, 14, _hoisted_1$28);
 		};
 	}
 });
 //#endregion
 //#region src/component/FluxForm.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$24 = ["aria-disabled"];
+var _hoisted_1$27 = ["aria-disabled"];
 //#endregion
 //#region src/component/FluxForm.vue
 var FluxForm_default = /* @__PURE__ */ defineComponent({
@@ -15623,7 +15623,7 @@ var FluxForm_default = /* @__PURE__ */ defineComponent({
 			}, [createVNode(FluxDisabled_default, { disabled: __props.disabled }, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["disabled"])], 42, _hoisted_1$24);
+			}, 8, ["disabled"])], 42, _hoisted_1$27);
 		};
 	}
 });
@@ -15735,7 +15735,7 @@ var FluxFormDateInput_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormDateRangeInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = { key: 0 };
+var _hoisted_1$26 = { key: 0 };
 //#endregion
 //#region src/component/FluxFormDateRangeInput.vue
 var FluxFormDateRangeInput_default = /* @__PURE__ */ defineComponent({
@@ -15781,7 +15781,7 @@ var FluxFormDateRangeInput_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [createElementVNode("div", {
 						class: normalizeClass(unref(clsx)(unref(Form_module_default).formDateRangeInput, unref(disabled) && unref(Form_module_default).isDisabled, __props.isCondensed && unref(Form_module_default).isCondensed, __props.isSecondary && unref(Form_module_default).isSecondary, __props.error && unref(Form_module_default).isInvalid)),
 						role: "presentation"
-					}, [label.value ? (openBlock(), createElementBlock("span", _hoisted_1$23, toDisplayString(label.value), 1)) : __props.placeholder ? (openBlock(), createElementBlock("span", {
+					}, [label.value ? (openBlock(), createElementBlock("span", _hoisted_1$26, toDisplayString(label.value), 1)) : __props.placeholder ? (openBlock(), createElementBlock("span", {
 						key: 1,
 						class: normalizeClass(unref(Form_module_default).formSelectPlaceholder)
 					}, toDisplayString(__props.placeholder), 3)) : createCommentVNode("", true)], 2), createVNode(FluxSecondaryButton_default, {
@@ -15954,7 +15954,7 @@ var FluxFormGrid_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormInputAddition.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = { key: 1 };
+var _hoisted_1$25 = { key: 1 };
 //#endregion
 //#region src/component/FluxFormInputAddition.vue
 var FluxFormInputAddition_default = /* @__PURE__ */ defineComponent({
@@ -15971,7 +15971,7 @@ var FluxFormInputAddition_default = /* @__PURE__ */ defineComponent({
 					name: __props.icon,
 					size: 18
 				}, null, 8, ["name"])) : createCommentVNode("", true),
-				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1$22, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1$25, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "default")
 			], 2);
 		};
@@ -15979,14 +15979,14 @@ var FluxFormInputAddition_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormPinInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = [
+var _hoisted_1$24 = [
 	"id",
 	"name",
 	"autofocus",
 	"aria-disabled",
 	"aria-invalid"
 ];
-var _hoisted_2$8 = [
+var _hoisted_2$9 = [
 	"aria-label",
 	"autocomplete",
 	"autofocus",
@@ -16102,8 +16102,8 @@ var FluxFormPinInput_default = /* @__PURE__ */ defineComponent({
 					onInput,
 					onKeydown: onKeyDown,
 					onPaste
-				}, null, 42, _hoisted_2$8);
-			}), 128))], 14, _hoisted_1$21);
+				}, null, 42, _hoisted_2$9);
+			}), 128))], 14, _hoisted_1$24);
 		};
 	}
 });
@@ -16399,7 +16399,7 @@ var FluxFormSelectAsync_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxFormTextArea.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = [
+var _hoisted_1$23 = [
 	"id",
 	"name",
 	"autocomplete",
@@ -16461,7 +16461,7 @@ var FluxFormTextArea_default = /* @__PURE__ */ defineComponent({
 				"aria-invalid": __props.error ? true : void 0,
 				onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur")),
 				onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus"))
-			}, null, 46, _hoisted_1$20)), [[vModelText, modelValue.value]]);
+			}, null, 46, _hoisted_1$23)), [[vModelText, modelValue.value]]);
 		};
 	}
 });
@@ -17188,7 +17188,7 @@ var TreeViewSelect_module_default = {
 };
 //#endregion
 //#region src/component/FluxFormTreeViewSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = [
+var _hoisted_1$22 = [
 	"role",
 	"tabindex",
 	"aria-selected",
@@ -17429,7 +17429,7 @@ var FluxFormTreeViewSelect_default = /* @__PURE__ */ defineComponent({
 							"expanded",
 							"level-colors",
 							"onExpandClick"
-						])], 42, _hoisted_1$19);
+						])], 42, _hoisted_1$22);
 					}), 128))], 2)]),
 					_: 1
 				}, 8, ["class", "anchor"])) : createCommentVNode("", true)]),
@@ -17444,7 +17444,7 @@ var Remove_module_default = {
 };
 //#endregion
 //#region src/component/FluxRemove.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = ["aria-label"];
+var _hoisted_1$21 = ["aria-label"];
 //#endregion
 //#region src/component/FluxRemove.vue
 var FluxRemove_default = /* @__PURE__ */ defineComponent({
@@ -17467,7 +17467,7 @@ var FluxRemove_default = /* @__PURE__ */ defineComponent({
 				key: 0,
 				name: __props.icon,
 				size: 16
-			}, null, 8, ["name"])) : createCommentVNode("", true)], 10, _hoisted_1$18);
+			}, null, 8, ["name"])) : createCommentVNode("", true)], 10, _hoisted_1$21);
 		};
 	}
 });
@@ -17540,7 +17540,7 @@ var FluxGalleryItem_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxGallery.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = ["onClick"];
+var _hoisted_1$20 = ["onClick"];
 //#endregion
 //#region src/component/FluxGallery.vue
 var FluxGallery_default = /* @__PURE__ */ defineComponent({
@@ -17618,7 +17618,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$17)) : createCommentVNode("", true)
+						}, [createVNode(FluxIcon_default, { name: "plus" })], 10, _hoisted_1$20)) : createCommentVNode("", true)
 					]),
 					_: 2
 				}, 1032, ["class", "move-class"])]),
@@ -17685,12 +17685,12 @@ var FluxGridColumn_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/component/FluxGridPattern.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$16 = [
+var _hoisted_1$19 = [
 	"id",
 	"width",
 	"height"
 ];
-var _hoisted_2$7 = ["d", "stroke-dasharray"];
+var _hoisted_2$8 = ["d", "stroke-dasharray"];
 var _hoisted_3$3 = ["fill"];
 var _hoisted_4 = {
 	key: 0,
@@ -17730,7 +17730,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$7)], 8, _hoisted_1$16)]),
+				}, null, 8, _hoisted_2$8)], 8, _hoisted_1$19)]),
 				createElementVNode("rect", {
 					width: "100%",
 					height: "100%",
@@ -17773,24 +17773,114 @@ var FluxInfo_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/composable/private/useKanban.ts
+var AUTOSCROLL_ZONE = 40;
+var AUTOSCROLL_MAX_SPEED = 12;
+var DRAG_LEAVE_GRACE_MS = 50;
 /**
 * Internal composable for managing kanban drag-and-drop state.
-* Provides card registration, drag tracking, and drop target management.
+* Provides card registration, drag tracking, drop target management,
+* keyboard drag-and-drop, column reordering, drop validation and auto-scroll.
 */
-function useKanban(onMove) {
+function useKanban(options) {
 	const dragState = ref(null);
+	const columnDragState = ref(null);
 	const cardRegistry = /* @__PURE__ */ new WeakMap();
+	const cardElementsById = /* @__PURE__ */ new Map();
+	const columnRegistry = /* @__PURE__ */ new WeakMap();
+	const columnElementsById = /* @__PURE__ */ new Map();
+	const columnBodyById = /* @__PURE__ */ new Map();
+	let boardElement = null;
+	let clearTimer = null;
+	let autoScrollFrame = null;
+	let autoScrollX = 0;
+	let autoScrollY = 0;
+	let autoScrollVerticalTarget = null;
+	const isDropAllowed = computed(() => {
+		const state = unref(dragState);
+		if (!state || state.dropColumnId === null) return true;
+		const validate = unref(options.canMove);
+		if (!validate) return true;
+		return validate(buildMoveEvent(state));
+	});
+	function buildMoveEvent(state) {
+		return {
+			cardId: state.cardId,
+			fromColumnId: state.fromColumnId,
+			toColumnId: state.dropColumnId,
+			beforeCardId: state.beforeCardId ?? void 0
+		};
+	}
+	function clearTimerIfAny() {
+		if (clearTimer !== null) {
+			clearTimeout(clearTimer);
+			clearTimer = null;
+		}
+	}
+	function isSelfDrop(state) {
+		if (state.dropColumnId !== state.fromColumnId) return false;
+		if (state.beforeCardId === state.cardId) return true;
+		const fromBody = columnBodyById.get(state.fromColumnId);
+		if (!fromBody) return false;
+		const cards = Array.from(fromBody.children).filter((child) => cardRegistry.has(child));
+		const draggedIndex = cards.findIndex((elm) => cardRegistry.get(elm)?.cardId === state.cardId);
+		if (draggedIndex === -1) return false;
+		if (state.beforeCardId === null) return draggedIndex === cards.length - 1;
+		const beforeIndex = cards.findIndex((elm) => cardRegistry.get(elm)?.cardId === state.beforeCardId);
+		return beforeIndex !== -1 && beforeIndex === draggedIndex + 1;
+	}
+	function getColumnIndex(columnId) {
+		if (!boardElement) return -1;
+		return Array.from(boardElement.children).filter((child) => columnRegistry.has(child)).findIndex((elm) => columnRegistry.get(elm)?.columnId === columnId);
+	}
+	function getColumnByIndex(index) {
+		if (!boardElement) return null;
+		const elm = Array.from(boardElement.children).filter((child) => columnRegistry.has(child))[index];
+		return elm ? columnRegistry.get(elm) : null;
+	}
+	function getCardsInColumn(columnId) {
+		const body = columnBodyById.get(columnId);
+		if (!body) return [];
+		return Array.from(body.children).map((child) => cardRegistry.get(child)?.cardId).filter((id) => id !== void 0);
+	}
 	function registerCard(element, cardId) {
 		cardRegistry.set(element, { cardId });
+		cardElementsById.set(cardId, element);
 	}
 	function unregisterCard(element) {
+		const info = cardRegistry.get(element);
+		if (info) cardElementsById.delete(info.cardId);
 		cardRegistry.delete(element);
 	}
 	function getCardInfo(element) {
 		return cardRegistry.get(element);
 	}
+	function registerColumn(element, columnId) {
+		columnRegistry.set(element, { columnId });
+		columnElementsById.set(columnId, element);
+	}
+	function unregisterColumn(element) {
+		const info = columnRegistry.get(element);
+		if (info) {
+			columnElementsById.delete(info.columnId);
+			columnBodyById.delete(info.columnId);
+		}
+		columnRegistry.delete(element);
+	}
+	function getColumnInfo(element) {
+		return columnRegistry.get(element);
+	}
+	function setBoardElement(element) {
+		boardElement = element;
+	}
+	function setColumnBodyElement(columnId, element) {
+		if (element) columnBodyById.set(columnId, element);
+		else columnBodyById.delete(columnId);
+	}
 	function startDrag(cardId, fromColumnId) {
+		if (unref(options.disabled)) return;
+		clearTimerIfAny();
 		dragState.value = {
+			mode: "pointer",
 			cardId,
 			fromColumnId,
 			dropColumnId: null,
@@ -17798,10 +17888,13 @@ function useKanban(onMove) {
 		};
 	}
 	function endDrag() {
+		clearTimerIfAny();
+		stopAutoScroll();
 		dragState.value = null;
 	}
 	function updateDropTarget(columnId, beforeCardId) {
 		if (!dragState.value) return;
+		clearTimerIfAny();
 		dragState.value = {
 			...dragState.value,
 			dropColumnId: columnId,
@@ -17810,69 +17903,413 @@ function useKanban(onMove) {
 	}
 	function clearDropTarget() {
 		if (!dragState.value) return;
-		dragState.value = {
-			...dragState.value,
-			dropColumnId: null,
-			beforeCardId: null
-		};
+		clearTimerIfAny();
+		clearTimer = setTimeout(() => {
+			clearTimer = null;
+			if (!dragState.value) return;
+			dragState.value = {
+				...dragState.value,
+				dropColumnId: null,
+				beforeCardId: null
+			};
+		}, DRAG_LEAVE_GRACE_MS);
 	}
 	function commitDrop() {
 		const state = dragState.value;
+		clearTimerIfAny();
+		stopAutoScroll();
 		if (!state || state.dropColumnId === null) {
 			dragState.value = null;
 			return;
 		}
-		onMove({
-			cardId: state.cardId,
-			fromColumnId: state.fromColumnId,
-			toColumnId: state.dropColumnId,
-			beforeCardId: state.beforeCardId ?? void 0
+		if (isSelfDrop(state)) {
+			dragState.value = null;
+			return;
+		}
+		const event = buildMoveEvent(state);
+		const validate = unref(options.canMove);
+		if (validate && !validate(event)) {
+			options.onAnnounce("Drop not allowed.");
+			dragState.value = null;
+			return;
+		}
+		options.onMove(event);
+		options.onAnnounce(`Card moved to ${String(state.dropColumnId)}.`);
+		dragState.value = null;
+	}
+	function findCurrentColumnId(cardId) {
+		for (const columnId of columnElementsById.keys()) if (getCardsInColumn(columnId).includes(cardId)) return columnId;
+		return null;
+	}
+	function findCurrentBeforeCardId(cardId, columnId) {
+		const cards = getCardsInColumn(columnId);
+		const idx = cards.indexOf(cardId);
+		if (idx === -1) return null;
+		return cards[idx + 1] ?? null;
+	}
+	function grabCard(cardId, fromColumnId) {
+		if (unref(options.disabled)) return;
+		clearTimerIfAny();
+		dragState.value = {
+			mode: "keyboard",
+			cardId,
+			fromColumnId,
+			dropColumnId: null,
+			beforeCardId: null,
+			originBeforeCardId: findCurrentBeforeCardId(cardId, fromColumnId)
+		};
+		options.onAnnounce("Card grabbed. Use arrow keys to move, Enter to drop, Escape to cancel.");
+	}
+	function moveKeyboard(direction) {
+		const state = dragState.value;
+		if (!state || state.mode !== "keyboard") return;
+		const cardId = state.cardId;
+		const currentColumnId = findCurrentColumnId(cardId);
+		if (currentColumnId === null) return;
+		const target = direction === "up" || direction === "down" ? computeWithinColumnTarget(cardId, currentColumnId, direction) : computeAcrossColumnTarget(currentColumnId, direction);
+		if (!target) return;
+		const event = {
+			cardId,
+			fromColumnId: currentColumnId,
+			toColumnId: target.columnId,
+			beforeCardId: target.beforeCardId ?? void 0
+		};
+		const validate = unref(options.canMove);
+		if (validate && !validate(event)) {
+			options.onAnnounce("Move not allowed.");
+			return;
+		}
+		options.onMove(event);
+		options.onAnnounce(target.announcement);
+		restoreCardFocus(cardId);
+	}
+	function restoreCardFocus(cardId) {
+		requestAnimationFrame(() => {
+			const elm = cardElementsById.get(cardId);
+			if (elm instanceof HTMLElement) elm.focus();
+		});
+	}
+	function computeWithinColumnTarget(cardId, columnId, direction) {
+		const cards = getCardsInColumn(columnId);
+		const idx = cards.indexOf(cardId);
+		if (idx === -1) return null;
+		if (direction === "up") {
+			if (idx === 0) return null;
+			return {
+				columnId,
+				beforeCardId: cards[idx - 1],
+				announcement: `Position ${idx} of ${cards.length}.`
+			};
+		}
+		if (idx === cards.length - 1) return null;
+		return {
+			columnId,
+			beforeCardId: cards[idx + 2] ?? null,
+			announcement: `Position ${idx + 2} of ${cards.length}.`
+		};
+	}
+	function computeAcrossColumnTarget(currentColumnId, direction) {
+		const currentIdx = getColumnIndex(currentColumnId);
+		if (currentIdx === -1) return null;
+		const nextColumn = getColumnByIndex(direction === "left" ? currentIdx - 1 : currentIdx + 1);
+		if (!nextColumn) return null;
+		const targetCards = getCardsInColumn(nextColumn.columnId);
+		return {
+			columnId: nextColumn.columnId,
+			beforeCardId: targetCards[0] ?? null,
+			announcement: `Moved to column ${String(nextColumn.columnId)}.`
+		};
+	}
+	function commitKeyboardDrop() {
+		const state = dragState.value;
+		if (!state || state.mode !== "keyboard") return;
+		const currentColumnId = findCurrentColumnId(state.cardId);
+		dragState.value = null;
+		if (currentColumnId !== null) options.onAnnounce(`Card dropped in ${String(currentColumnId)}.`);
+	}
+	function cancelKeyboardDrop() {
+		const state = dragState.value;
+		if (!state || state.mode !== "keyboard") return;
+		const cardId = state.cardId;
+		const currentColumnId = findCurrentColumnId(cardId);
+		const currentBeforeCardId = currentColumnId !== null ? findCurrentBeforeCardId(cardId, currentColumnId) : null;
+		if (!(currentColumnId === state.fromColumnId && currentBeforeCardId === (state.originBeforeCardId ?? null)) && currentColumnId !== null) options.onMove({
+			cardId,
+			fromColumnId: currentColumnId,
+			toColumnId: state.fromColumnId,
+			beforeCardId: state.originBeforeCardId ?? void 0
 		});
 		dragState.value = null;
+		options.onAnnounce("Drop cancelled.");
+	}
+	function isCardGrabbed(cardId) {
+		const state = unref(dragState);
+		return state !== null && state.mode === "keyboard" && state.cardId === cardId;
+	}
+	function startColumnDrag(columnId) {
+		if (!unref(options.reorderableColumns) || unref(options.disabled)) return;
+		columnDragState.value = {
+			columnId,
+			dropBeforeColumnId: null
+		};
+	}
+	function endColumnDrag() {
+		stopAutoScroll();
+		columnDragState.value = null;
+	}
+	function updateColumnDropTarget(beforeColumnId) {
+		if (!columnDragState.value) return;
+		columnDragState.value = {
+			...columnDragState.value,
+			dropBeforeColumnId: beforeColumnId
+		};
+	}
+	function commitColumnDrop() {
+		const state = columnDragState.value;
+		stopAutoScroll();
+		if (!state) return;
+		if (state.dropBeforeColumnId === state.columnId) {
+			columnDragState.value = null;
+			return;
+		}
+		const fromIdx = getColumnIndex(state.columnId);
+		const beforeIdx = state.dropBeforeColumnId === null ? -1 : getColumnIndex(state.dropBeforeColumnId);
+		if (fromIdx !== -1 && beforeIdx === fromIdx + 1) {
+			columnDragState.value = null;
+			return;
+		}
+		options.onMoveColumn({
+			columnId: state.columnId,
+			beforeColumnId: state.dropBeforeColumnId ?? void 0
+		});
+		columnDragState.value = null;
+	}
+	function onPointerMove(clientX, clientY) {
+		if (!unref(dragState) && !unref(columnDragState)) return;
+		autoScrollX = computeHorizontalScrollDelta(clientX);
+		autoScrollY = 0;
+		autoScrollVerticalTarget = null;
+		const state = unref(dragState);
+		if (state && state.dropColumnId !== null) {
+			const body = columnBodyById.get(state.dropColumnId);
+			if (body) {
+				autoScrollY = computeVerticalScrollDelta(body, clientY);
+				autoScrollVerticalTarget = body;
+			}
+		}
+		if (autoScrollX !== 0 || autoScrollY !== 0) startAutoScroll();
+		else stopAutoScroll();
+	}
+	function computeHorizontalScrollDelta(clientX) {
+		if (!boardElement) return 0;
+		const rect = boardElement.getBoundingClientRect();
+		if (clientX < rect.left + AUTOSCROLL_ZONE) {
+			const distance = Math.max(0, clientX - rect.left);
+			return -Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+		}
+		if (clientX > rect.right - AUTOSCROLL_ZONE) {
+			const distance = Math.max(0, rect.right - clientX);
+			return Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+		}
+		return 0;
+	}
+	function computeVerticalScrollDelta(target, clientY) {
+		const rect = target.getBoundingClientRect();
+		if (clientY < rect.top + AUTOSCROLL_ZONE) {
+			const distance = Math.max(0, clientY - rect.top);
+			return -Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+		}
+		if (clientY > rect.bottom - AUTOSCROLL_ZONE) {
+			const distance = Math.max(0, rect.bottom - clientY);
+			return Math.round((AUTOSCROLL_ZONE - distance) / AUTOSCROLL_ZONE * AUTOSCROLL_MAX_SPEED);
+		}
+		return 0;
+	}
+	function startAutoScroll() {
+		if (autoScrollFrame !== null) return;
+		const tick = () => {
+			if (autoScrollX !== 0 && boardElement) boardElement.scrollLeft += autoScrollX;
+			if (autoScrollY !== 0 && autoScrollVerticalTarget) autoScrollVerticalTarget.scrollTop += autoScrollY;
+			if (autoScrollX === 0 && autoScrollY === 0) {
+				autoScrollFrame = null;
+				return;
+			}
+			autoScrollFrame = requestAnimationFrame(tick);
+		};
+		autoScrollFrame = requestAnimationFrame(tick);
+	}
+	function stopAutoScroll() {
+		if (autoScrollFrame !== null) {
+			cancelAnimationFrame(autoScrollFrame);
+			autoScrollFrame = null;
+		}
+		autoScrollX = 0;
+		autoScrollY = 0;
+		autoScrollVerticalTarget = null;
 	}
 	return {
+		disabled: options.disabled,
+		reorderableColumns: options.reorderableColumns,
 		dragState,
+		columnDragState,
+		isDropAllowed,
 		registerCard,
 		unregisterCard,
 		getCardInfo,
+		registerColumn,
+		unregisterColumn,
+		getColumnInfo,
+		setBoardElement,
+		setColumnBodyElement,
 		startDrag,
 		endDrag,
 		updateDropTarget,
 		clearDropTarget,
-		commitDrop
+		commitDrop,
+		grabCard,
+		moveKeyboard,
+		commitKeyboardDrop,
+		cancelKeyboardDrop,
+		isCardGrabbed,
+		startColumnDrag,
+		endColumnDrag,
+		updateColumnDropTarget,
+		commitColumnDrop,
+		onPointerMove
 	};
 }
-var FluxKanban_module_default = { kanban: `kanban` };
+var FluxKanban_module_default = {
+	kanban: `kanban`,
+	kanbanLiveRegion: `kanban-live-region`,
+	kanbanColumn: `kanban-column`,
+	isColumnDragging: `is-column-dragging`,
+	isColumnDropBefore: `is-column-drop-before`,
+	kanbanColumnHeader: `kanban-column-header`,
+	isReorderable: `is-reorderable`,
+	kanbanColumnLabel: `kanban-column-label`,
+	kanbanColumnBody: `kanban-column-body`,
+	isOver: `is-over`,
+	isDropDisallowed: `is-drop-disallowed`,
+	isBoardDragging: `is-board-dragging`,
+	isDisabled: `is-disabled`,
+	kanbanColumnEmpty: `kanban-column-empty`,
+	kanbanColumnFooter: `kanban-column-footer`,
+	kanbanDropIndicator: `kanban-drop-indicator`,
+	isDropEndActive: `is-drop-end-active`,
+	isDropEndDisallowed: `is-drop-end-disallowed`,
+	kanbanCard: `kanban-card`,
+	isDragging: `is-dragging`,
+	isGrabbed: `is-grabbed`,
+	isDropBefore: `is-drop-before`,
+	isDropBeforeDisallowed: `is-drop-before-disallowed`
+};
+//#endregion
+//#region src/component/FluxKanban.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$18 = ["aria-label"];
 //#endregion
 //#region src/component/FluxKanban.vue
 var FluxKanban_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxKanban",
-	emits: ["move"],
+	props: {
+		ariaLabel: {},
+		canMove: { type: Function },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		reorderableColumns: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["move", "moveColumn"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		provide(FluxKanbanInjectionKey, useKanban((event) => emit("move", event)));
+		const root = useTemplateRef("root");
+		const liveMessage = ref("");
+		const disabledRef = toRef(() => __props.disabled);
+		const kanban = useKanban({
+			disabled: disabledRef,
+			reorderableColumns: toRef(() => __props.reorderableColumns),
+			canMove: toRef(() => __props.canMove),
+			onMove: (event) => emit("move", event),
+			onMoveColumn: (event) => emit("moveColumn", event),
+			onAnnounce: (message) => {
+				liveMessage.value = "";
+				requestAnimationFrame(() => {
+					liveMessage.value = message;
+				});
+			}
+		});
+		const isDragging = computed(() => kanban.dragState.value !== null || kanban.columnDragState.value !== null);
+		function onPointerMove(evt) {
+			kanban.onPointerMove(evt.clientX, evt.clientY);
+		}
+		function onWindowDrop() {
+			kanban.endDrag();
+			kanban.endColumnDrag();
+		}
+		onMounted(() => {
+			kanban.setBoardElement(root.value);
+			window.addEventListener("drag", onPointerMove);
+			window.addEventListener("dragend", onWindowDrop);
+		});
+		onBeforeUnmount(() => {
+			kanban.setBoardElement(null);
+			window.removeEventListener("drag", onPointerMove);
+			window.removeEventListener("dragend", onWindowDrop);
+		});
+		watch(() => __props.disabled, (value) => {
+			if (value) {
+				kanban.endDrag();
+				kanban.endColumnDrag();
+				kanban.cancelKeyboardDrop();
+			}
+		});
+		provide(FluxKanbanInjectionKey, kanban);
+		provide(FluxDisabledInjectionKey, disabledRef);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(FluxKanban_module_default).kanban) }, [renderSlot(_ctx.$slots, "default")], 2);
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				role: "application",
+				"aria-roledescription": "Kanban board",
+				"aria-label": __props.ariaLabel,
+				class: normalizeClass([unref(FluxKanban_module_default).kanban, isDragging.value && unref(FluxKanban_module_default).isBoardDragging])
+			}, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				class: normalizeClass(unref(FluxKanban_module_default).kanbanLiveRegion)
+			}, toDisplayString(liveMessage.value), 3)], 10, _hoisted_1$18);
 		};
 	}
 });
-var FluxKanbanCard_module_default = {
-	kanbanCard: `kanban-card`,
-	isDragging: `is-dragging`,
-	isDropBefore: `is-drop-before`
-};
+//#endregion
+//#region src/component/FluxKanbanCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$17 = [
+	"aria-disabled",
+	"aria-grabbed",
+	"draggable",
+	"tabindex"
+];
 //#endregion
 //#region src/component/FluxKanbanCard.vue
 var FluxKanbanCard_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxKanbanCard",
 	props: {
 		cardId: {},
-		columnId: {}
+		columnId: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
 	},
 	setup(__props) {
 		const kanban = inject(FluxKanbanInjectionKey);
 		const root = useTemplateRef("root");
-		const isDragging = computed(() => unref(kanban.dragState)?.cardId === __props.cardId);
+		const disabledState = useDisabled_default(toRef(() => __props.disabled));
+		const isDragging = computed(() => unref(kanban.dragState)?.cardId === __props.cardId && unref(kanban.dragState)?.mode === "pointer");
+		const isGrabbed = computed(() => kanban.isCardGrabbed(__props.cardId));
 		const isDropBefore = computed(() => {
 			const state = unref(kanban.dragState);
 			if (!state || state.dropColumnId === null || state.beforeCardId === null) return false;
@@ -17880,19 +18317,46 @@ var FluxKanbanCard_default = /* @__PURE__ */ defineComponent({
 		});
 		onMounted(() => {
 			if (root.value) kanban.registerCard(root.value, __props.cardId);
+			if (kanban.isCardGrabbed(__props.cardId)) root.value?.focus();
 		});
-		onUnmounted(() => {
+		onBeforeUnmount(() => {
 			if (root.value) kanban.unregisterCard(root.value);
 		});
+		watch(() => __props.cardId, (newId, oldId) => {
+			if (root.value && oldId !== void 0) {
+				kanban.unregisterCard(root.value);
+				kanban.registerCard(root.value, newId);
+			}
+		});
 		function onDragStart(evt) {
+			if (unref(disabledState)) {
+				evt.preventDefault();
+				return;
+			}
 			kanban.startDrag(__props.cardId, __props.columnId);
-			if (evt.dataTransfer) evt.dataTransfer.effectAllowed = "move";
+			if (evt.dataTransfer) {
+				evt.dataTransfer.effectAllowed = "move";
+				evt.dataTransfer.setData("text/plain", `card:${String(__props.cardId)}`);
+				if (root.value) {
+					const offsetX = evt.offsetX || root.value.getBoundingClientRect().width / 2;
+					const offsetY = evt.offsetY || 12;
+					evt.dataTransfer.setDragImage(root.value, offsetX, offsetY);
+				}
+			}
 		}
 		function onDragEnd() {
 			kanban.endDrag();
 		}
+		function onFocus() {
+			root.value?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest",
+				behavior: "smooth"
+			});
+		}
 		function onDragOver(evt) {
-			if (!unref(kanban.dragState)) return;
+			if (!unref(kanban.dragState) || unref(disabledState)) return;
+			evt.preventDefault();
 			const cardEl = evt.currentTarget;
 			const rect = cardEl.getBoundingClientRect();
 			if (evt.clientY < rect.top + rect.height / 2) kanban.updateDropTarget(__props.columnId, __props.cardId);
@@ -17909,49 +18373,117 @@ var FluxKanbanCard_default = /* @__PURE__ */ defineComponent({
 				kanban.updateDropTarget(__props.columnId, null);
 			}
 		}
+		function onKeyDown(evt) {
+			if (unref(disabledState)) return;
+			const state = unref(kanban.dragState);
+			if (!(state !== null && state.mode === "keyboard" && state.cardId === __props.cardId)) {
+				if (evt.key === " " || evt.key === "Enter") {
+					evt.preventDefault();
+					kanban.grabCard(__props.cardId, __props.columnId);
+				}
+				return;
+			}
+			switch (evt.key) {
+				case "ArrowUp":
+					evt.preventDefault();
+					kanban.moveKeyboard("up");
+					break;
+				case "ArrowDown":
+					evt.preventDefault();
+					kanban.moveKeyboard("down");
+					break;
+				case "ArrowLeft":
+					evt.preventDefault();
+					kanban.moveKeyboard("left");
+					break;
+				case "ArrowRight":
+					evt.preventDefault();
+					kanban.moveKeyboard("right");
+					break;
+				case " ":
+				case "Enter":
+					evt.preventDefault();
+					kanban.commitKeyboardDrop();
+					break;
+				case "Escape":
+					evt.preventDefault();
+					kanban.cancelKeyboardDrop();
+					break;
+			}
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "root",
 				ref: root,
 				"data-kanban-card": "",
+				role: "listitem",
+				"aria-roledescription": "Kanban card",
+				"aria-disabled": unref(disabledState) ? true : void 0,
+				"aria-grabbed": isGrabbed.value ? true : void 0,
 				class: normalizeClass([
-					unref(FluxKanbanCard_module_default).kanbanCard,
-					isDragging.value && unref(FluxKanbanCard_module_default).isDragging,
-					isDropBefore.value && unref(FluxKanbanCard_module_default).isDropBefore
+					unref(FluxKanban_module_default).kanbanCard,
+					isDragging.value && unref(FluxKanban_module_default).isDragging,
+					isGrabbed.value && unref(FluxKanban_module_default).isGrabbed,
+					isDropBefore.value && unref(FluxKanban_module_default).isDropBefore,
+					isDropBefore.value && !unref(kanban).isDropAllowed.value && unref(FluxKanban_module_default).isDropBeforeDisallowed,
+					unref(disabledState) && unref(FluxKanban_module_default).isDisabled
 				]),
-				draggable: "true",
+				draggable: !unref(disabledState),
+				tabindex: unref(disabledState) ? -1 : 0,
 				onDragstart: onDragStart,
 				onDragend: onDragEnd,
-				onDragover: withModifiers(onDragOver, ["prevent", "stop"])
-			}, [renderSlot(_ctx.$slots, "default")], 34);
+				onDragover: withModifiers(onDragOver, ["stop"]),
+				onFocus,
+				onKeydown: onKeyDown
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$17);
 		};
 	}
 });
-var FluxKanbanColumn_module_default = {
-	kanbanColumn: `kanban-column`,
-	kanbanColumnHeader: `kanban-column-header`,
-	kanbanColumnLabel: `kanban-column-label`,
-	kanbanColumnBody: `kanban-column-body`,
-	isOver: `is-over`,
-	kanbanDropIndicator: `kanban-drop-indicator`
-};
+//#endregion
+//#region src/component/FluxKanbanColumn.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$16 = ["aria-label", "aria-disabled"];
+var _hoisted_2$7 = ["draggable", "tabindex"];
 //#endregion
 //#region src/component/FluxKanbanColumn.vue
 var FluxKanbanColumn_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxKanbanColumn",
 	props: {
 		columnId: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
 		label: {}
 	},
 	setup(__props) {
 		const kanban = inject(FluxKanbanInjectionKey);
+		const root = useTemplateRef("root");
+		const body = useTemplateRef("body");
+		const slots = useSlots();
+		const disabledState = useDisabled_default(toRef(() => __props.disabled));
+		provide(FluxDisabledInjectionKey, disabledState);
 		let dragEnterCount = 0;
 		const isOver = ref(false);
+		const isReorderable = computed(() => unref(kanban.reorderableColumns) && !unref(disabledState));
 		const isDropEnd = computed(() => {
 			const state = unref(kanban.dragState);
 			return state !== null && state.dropColumnId === __props.columnId && state.beforeCardId === null;
 		});
+		const isColumnDragging = computed(() => unref(kanban.columnDragState)?.columnId === __props.columnId);
+		const isColumnDropBefore = computed(() => {
+			const state = unref(kanban.columnDragState);
+			if (!state || state.dropBeforeColumnId !== __props.columnId || state.columnId === __props.columnId) return false;
+			return true;
+		});
+		const isEmpty = computed(() => {
+			if (!slots.empty) return false;
+			const defaultSlot = slots.default?.();
+			if (!defaultSlot || defaultSlot.length === 0) return true;
+			return !a$2(defaultSlot).some((vnode) => vnode.type !== Comment && vnode.type !== Text);
+		});
+		const hasFooter = computed(() => !!slots.footer);
 		function onDragEnter() {
+			if (unref(disabledState)) return;
 			dragEnterCount++;
 			isOver.value = true;
 		}
@@ -17963,27 +18495,120 @@ var FluxKanbanColumn_default = /* @__PURE__ */ defineComponent({
 			}
 		}
 		function onDragOver(evt) {
+			if (unref(disabledState) || !unref(kanban.dragState)) return;
+			evt.preventDefault();
 			if (!!!evt.target.closest("[data-kanban-card]")) kanban.updateDropTarget(__props.columnId, null);
 		}
-		function onDrop() {
+		function onDrop(evt) {
 			dragEnterCount = 0;
 			isOver.value = false;
+			if (unref(disabledState) || !unref(kanban.dragState)) return;
+			evt.preventDefault();
 			kanban.commitDrop();
 		}
+		function onColumnDragStart(evt) {
+			if (!unref(isReorderable)) return;
+			if (evt.dataTransfer) {
+				evt.dataTransfer.effectAllowed = "move";
+				evt.dataTransfer.setData("text/plain", `column:${String(__props.columnId)}`);
+			}
+			kanban.startColumnDrag(__props.columnId);
+		}
+		function onColumnDragEnd() {
+			kanban.endColumnDrag();
+		}
+		function onColumnDragOver(evt) {
+			const state = unref(kanban.columnDragState);
+			if (!state || state.columnId === __props.columnId) return;
+			evt.preventDefault();
+			const rect = evt.currentTarget.getBoundingClientRect();
+			if (evt.clientX < rect.left + rect.width / 2) kanban.updateColumnDropTarget(__props.columnId);
+			else {
+				let next = root.value?.nextElementSibling ?? null;
+				while (next) {
+					const info = kanban.getColumnInfo(next);
+					if (info) {
+						kanban.updateColumnDropTarget(info.columnId);
+						return;
+					}
+					next = next.nextElementSibling;
+				}
+				kanban.updateColumnDropTarget(null);
+			}
+		}
+		function onColumnDrop(evt) {
+			if (!unref(kanban.columnDragState)) return;
+			evt.preventDefault();
+			kanban.commitColumnDrop();
+		}
+		onMounted(() => {
+			if (root.value) kanban.registerColumn(root.value, __props.columnId);
+			if (body.value) kanban.setColumnBodyElement(__props.columnId, body.value);
+		});
+		onBeforeUnmount(() => {
+			if (root.value) kanban.unregisterColumn(root.value);
+			kanban.setColumnBodyElement(__props.columnId, null);
+		});
+		watch(() => __props.columnId, (newId, oldId) => {
+			if (oldId !== void 0) kanban.setColumnBodyElement(oldId, null);
+			if (root.value) {
+				kanban.unregisterColumn(root.value);
+				kanban.registerColumn(root.value, newId);
+			}
+			if (body.value) kanban.setColumnBodyElement(newId, body.value);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				"data-kanban-column": "",
-				class: normalizeClass([unref(FluxKanbanColumn_module_default).kanbanColumn, isOver.value && unref(FluxKanbanColumn_module_default).isOver])
-			}, [createElementVNode("div", { class: normalizeClass(unref(FluxKanbanColumn_module_default).kanbanColumnHeader) }, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("span", { class: normalizeClass(unref(FluxKanbanColumn_module_default).kanbanColumnLabel) }, toDisplayString(__props.label), 3)]), renderSlot(_ctx.$slots, "actions")], 2), createElementVNode("div", {
-				class: normalizeClass(unref(FluxKanbanColumn_module_default).kanbanColumnBody),
-				onDragenter: onDragEnter,
-				onDragleave: onDragLeave,
-				onDragover: withModifiers(onDragOver, ["prevent"]),
-				onDrop: withModifiers(onDrop, ["prevent"])
-			}, [renderSlot(_ctx.$slots, "default"), isDropEnd.value ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				class: normalizeClass(unref(FluxKanbanColumn_module_default).kanbanDropIndicator)
-			}, null, 2)) : createCommentVNode("", true)], 34)], 2);
+				ref_key: "root",
+				ref: root,
+				role: "list",
+				"aria-roledescription": "Kanban column",
+				"aria-label": __props.label,
+				"aria-disabled": unref(disabledState) ? true : void 0,
+				class: normalizeClass([
+					unref(FluxKanban_module_default).kanbanColumn,
+					isOver.value && unref(FluxKanban_module_default).isOver,
+					isOver.value && !unref(kanban).isDropAllowed.value && unref(FluxKanban_module_default).isDropDisallowed,
+					isReorderable.value && unref(FluxKanban_module_default).isReorderable,
+					isColumnDragging.value && unref(FluxKanban_module_default).isColumnDragging,
+					isColumnDropBefore.value && unref(FluxKanban_module_default).isColumnDropBefore,
+					unref(disabledState) && unref(FluxKanban_module_default).isDisabled
+				])
+			}, [
+				createElementVNode("div", {
+					class: normalizeClass(unref(FluxKanban_module_default).kanbanColumnHeader),
+					draggable: isReorderable.value && !unref(disabledState),
+					tabindex: isReorderable.value && !unref(disabledState) ? 0 : void 0,
+					onDragstart: onColumnDragStart,
+					onDragend: onColumnDragEnd,
+					onDragover: onColumnDragOver,
+					onDrop: onColumnDrop
+				}, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("span", { class: normalizeClass(unref(FluxKanban_module_default).kanbanColumnLabel) }, toDisplayString(__props.label), 3)]), renderSlot(_ctx.$slots, "actions")], 42, _hoisted_2$7),
+				createElementVNode("div", {
+					ref_key: "body",
+					ref: body,
+					class: normalizeClass(unref(FluxKanban_module_default).kanbanColumnBody),
+					onDragenter: onDragEnter,
+					onDragleave: onDragLeave,
+					onDragover: onDragOver,
+					onDrop
+				}, [
+					renderSlot(_ctx.$slots, "default"),
+					isEmpty.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(FluxKanban_module_default).kanbanColumnEmpty)
+					}, [renderSlot(_ctx.$slots, "empty")], 2)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass([
+						unref(FluxKanban_module_default).kanbanDropIndicator,
+						isDropEnd.value && unref(FluxKanban_module_default).isDropEndActive,
+						isDropEnd.value && !unref(kanban).isDropAllowed.value && unref(FluxKanban_module_default).isDropEndDisallowed
+					]) }, null, 2)
+				], 34),
+				hasFooter.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(FluxKanban_module_default).kanbanColumnFooter)
+				}, [renderSlot(_ctx.$slots, "footer")], 2)) : createCommentVNode("", true)
+			], 10, _hoisted_1$16);
 		};
 	}
 });
@@ -19884,7 +20509,7 @@ var FluxStatistic_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Stepper.module.scss
-var { "sparklesContainerActive": _0$2, "sparklesContainer": _1, "sparklesParticles": _2 } = {
+var { "sparklesContainer": _0$2, "sparklesContainerActive": _1, "sparklesParticles": _2 } = {
 	sparklesContainer: `sparkles-container`,
 	sparklesParticles: `sparkles-particles`,
 	sparklesContainerActive: `sparkles-container-active`,
@@ -19895,11 +20520,11 @@ var { "sparklesContainerActive": _0$2, "sparklesContainer": _1, "sparklesParticl
 var Stepper_module_default = {
 	stepperStep: `stepper-step`,
 	stepperSteps: `stepper-steps`,
-	stepperStepsItem: `stepper-steps-item ${_1}`,
+	stepperStepsItem: `stepper-steps-item ${_0$2}`,
 	icon: `icon`,
-	stepperStepsItemComplete: `stepper-steps-item-complete ${_0$2} stepper-steps-item ${_1}`,
-	stepperStepsItemCurrent: `stepper-steps-item-current stepper-steps-item ${_1}`,
-	stepperStepsItemIdle: `stepper-steps-item-idle stepper-steps-item ${_1}`,
+	stepperStepsItemComplete: `stepper-steps-item-complete ${_1} stepper-steps-item ${_0$2}`,
+	stepperStepsItemCurrent: `stepper-steps-item-current stepper-steps-item ${_0$2}`,
+	stepperStepsItemIdle: `stepper-steps-item-idle stepper-steps-item ${_0$2}`,
 	stepperStepsItemParticles: `stepper-steps-item-particles ${_2}`
 };
 //#endregion