@flux-ui/components 3.1.3 → 3.1.4

package/dist/component/FluxButton.vue.d.ts

@@ -3,6 +3,7 @@ import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOp
 export declare const SLOTS: readonly ["default", "after", "before", "iconLeading", "iconTrailing", "label"];
 declare const _default: __VLS_WithSlots< DefineComponent<FluxButtonProps & {
     readonly cssClass: string;
+    readonly cssClassActive?: string;
     readonly cssClassIcon: string;
     readonly cssClassLabel: string;
 }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -11,6 +12,7 @@ declare const _default: __VLS_WithSlots< DefineComponent<FluxButtonProps & {
     mouseleave: (args_0: MouseEvent) => any;
 }, string, PublicProps, Readonly<FluxButtonProps & {
     readonly cssClass: string;
+    readonly cssClassActive?: string;
     readonly cssClassIcon: string;
     readonly cssClassLabel: string;
 }> & Readonly<{

package/dist/component/FluxFlyout.vue.d.ts

@@ -1,5 +1,5 @@
 import { FluxDirection } from '@flux-ui/types';
-import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly direction?: FluxDirection;
     readonly isAutoWidth?: boolean;
@@ -28,7 +28,14 @@ declare const __VLS_base: DefineComponent<__VLS_Props, {
     close: typeof close;
     open: typeof open;
     toggle: typeof toggle;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+    isOpen: Ref<boolean, boolean>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+    onOpen?: () => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/index.css

@@ -850,8 +850,9 @@
     border-color: var(--primary-800);
   }
 }
-.primary-button:active {
+.primary-button:active, .primary-button.is-active {
   background: var(--primary-800);
+  box-shadow: none;
   scale: 0.9875;
 }
 .primary-button .spinner {
@@ -876,8 +877,9 @@
     background: var(--surface-hover);
   }
 }
-.secondary-button:active {
+.secondary-button:active, .secondary-button.is-active {
   background: var(--surface-active);
+  box-shadow: none;
   scale: 0.9875;
 }
 
@@ -898,8 +900,9 @@
     background: var(--surface-hover);
   }
 }
-.destructive-button:active {
+.destructive-button:active, .destructive-button.is-active {
   background: var(--surface-active);
+  box-shadow: none;
   scale: 0.9875;
 }
 .destructive-button .spinner {
@@ -931,8 +934,9 @@
     background: var(--surface-hover);
   }
 }
-.base-link-button:active {
+.base-link-button:active, .base-link-button.is-active {
   background: var(--surface-active);
+  box-shadow: none;
   scale: 0.9875;
 }
 

package/dist/index.js

@@ -2623,7 +2623,7 @@ function W$1(e, t, n) {
 function G$2(e, t, n) {
 	e.prototype[t] = n;
 }
-function K$1(e, t, n) {
+function K$2(e, t, n) {
 	Object.defineProperty(e, t, { value: n });
 }
 //#endregion
@@ -7025,10 +7025,10 @@ function dto_default(clazz) {
 	validate(clazz);
 	const descriptors = Object.freeze(x$3(clazz));
 	const properties = Object.keys(descriptors);
-	K$1(clazz.prototype, DESCRIPTORS, descriptors);
-	K$1(clazz.prototype, NAME, clazz.name);
-	K$1(clazz.prototype, PROPERTIES, properties);
-	K$1(clazz, Symbol.hasInstance, (instance) => typeof instance === "object" && instance?.[NAME] === clazz.name);
+	K$2(clazz.prototype, DESCRIPTORS, descriptors);
+	K$2(clazz.prototype, NAME, clazz.name);
+	K$2(clazz.prototype, PROPERTIES, properties);
+	K$2(clazz, Symbol.hasInstance, (instance) => typeof instance === "object" && instance?.[NAME] === clazz.name);
 	G$2(clazz, "clone", clone_default);
 	G$2(clazz, "fill", fill_default);
 	G$2(clazz, "toJSON", toJSON_default);
@@ -7183,6 +7183,10 @@ function G$1(e) {
 	let t = unref(e);
 	return t ? R$2(t) ? t : t.$el ?? null : null;
 }
+function K$1(e) {
+	let t = toValue(e);
+	return t ? t instanceof Window || t instanceof Document || R$2(t) ? t : t.$el ?? null : null;
+}
 function q$1(e, t, n) {
 	let r = ref([]);
 	onMounted(() => {
@@ -7235,6 +7239,100 @@ function Y$1(t = 0, n = !1) {
 		loaded: o
 	};
 }
+function Z$1(e, t, n, r) {
+	let i = Array.isArray(t) ? t : [t], a, o = watch(() => K$1(e), (e) => {
+		if (a?.(), a = void 0, e) {
+			for (let t of i) e.addEventListener(t, n, r);
+			a = () => {
+				for (let t of i) e.removeEventListener(t, n, r);
+			};
+		}
+	}, { immediate: !0 });
+	function c() {
+		a?.(), a = void 0, o();
+	}
+	return onScopeDispose(c), c;
+}
+var me$1 = {
+	esc: `escape`,
+	space: ` `,
+	spacebar: ` `,
+	up: `arrowup`,
+	down: `arrowdown`,
+	left: `arrowleft`,
+	right: `arrowright`,
+	return: `enter`,
+	del: `delete`,
+	plus: `+`
+};
+function he$1(e, t, n) {
+	let { target: r, enabled: i, event: a = `keydown`, preventDefault: o = !0, stopPropagation: s = !1, ignoreWhileTyping: c = !0, repeat: l = !1 } = n ?? {}, u = (Array.isArray(e) ? e : [e]).map(ge$1);
+	function d() {
+		return r === void 0 ? typeof window < `u` ? window : null : toValue(r);
+	}
+	function p(e) {
+		if (i !== void 0 && !toValue(i) || e.repeat && !l) return;
+		let n = ve$1(), r = e.key.toLowerCase();
+		for (let i of u) {
+			let a = i.meta || i.mod && n, l = i.ctrl || i.mod && !n, u = !i.shift && i.key.length === 1;
+			if (e.metaKey === a && e.ctrlKey === l && (u || e.shiftKey === i.shift) && e.altKey === i.alt && r === i.key) {
+				if (c && !a && !l && _e$1(e.target)) return;
+				o && e.preventDefault(), s && e.stopPropagation(), t(e);
+				return;
+			}
+		}
+	}
+	return Z$1(d, a, p);
+}
+function ge$1(e) {
+	let t = ``, n = !1, r = !1, i = !1, a = !1, o = !1;
+	for (let s of e.split(`+`)) {
+		let e = s.trim().toLowerCase();
+		switch (e) {
+			case `ctrl`:
+			case `control`:
+				n = !0;
+				break;
+			case `meta`:
+			case `cmd`:
+			case `command`:
+			case `super`:
+			case `win`:
+			case `windows`:
+				r = !0;
+				break;
+			case `shift`:
+				i = !0;
+				break;
+			case `alt`:
+			case `option`:
+			case `opt`:
+				a = !0;
+				break;
+			case `mod`:
+				o = !0;
+				break;
+			case ``: break;
+			default:
+				t = me$1[e] ?? e;
+				break;
+		}
+	}
+	return {
+		key: t,
+		ctrl: n,
+		meta: r,
+		shift: i,
+		alt: a,
+		mod: o
+	};
+}
+function _e$1(e) {
+	return e instanceof HTMLElement ? e.tagName === `INPUT` || e.tagName === `TEXTAREA` || e.tagName === `SELECT` || e.isContentEditable : !1;
+}
+function ve$1() {
+	return typeof navigator > `u` ? !1 : /mac|iphone|ipod|ipad/i.test(navigator.platform || navigator.userAgent);
+}
 function ye$1(e, t) {
 	let n = ref();
 	onMounted(() => {
@@ -7722,7 +7820,7 @@ var Icon_module_default = {
 };
 //#endregion
 //#region src/component/FluxIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$73 = [
+var _hoisted_1$72 = [
 	"viewBox",
 	"role",
 	"aria-hidden",
@@ -7775,7 +7873,7 @@ var FluxIcon_default = /* @__PURE__ */ defineComponent({
 					d: path,
 					fill: "currentColor"
 				}, null, 8, _hoisted_2$28);
-			}), 256))], 14, _hoisted_1$73)) : (openBlock(), createElementBlock("i", {
+			}), 256))], 14, _hoisted_1$72)) : (openBlock(), createElementBlock("i", {
 				key: 1,
 				class: normalizeClass(unref(Icon_module_default).icon)
 			}, null, 2));
@@ -9651,7 +9749,7 @@ function sanitizeUrl_default(href) {
 }
 //#endregion
 //#region src/component/FluxPressable.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$72 = [
+var _hoisted_1$71 = [
 	"href",
 	"rel",
 	"target",
@@ -9705,7 +9803,7 @@ var FluxPressable_default = /* @__PURE__ */ defineComponent({
 					rel: resolvedRel.value,
 					target: __props.target,
 					onClick: ($event) => onClick($event, navigate)
-				}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$72)]),
+				}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$71)]),
 				_: 3
 			}, 8, ["to"])) : __props.componentType === "link" ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, $attrs, toHandlers(hoverListeners, true), {
 				href: unref(sanitizeUrl_default)(__props.href),
@@ -9799,6 +9897,7 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -9810,6 +9909,7 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 		target: {},
 		to: {},
 		cssClass: {},
+		cssClassActive: {},
 		cssClassIcon: {},
 		cssClassLabel: {}
 	},
@@ -9838,9 +9938,10 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FluxPressable_default, {
 				"component-type": __props.type,
-				class: normalizeClass(unref(clsx)(__props.cssClass, __props.isFilled && unref(Button_module_default$1).isFilled, __props.size === "small" && unref(Button_module_default$1).isSmall, __props.size === "medium" && unref(Button_module_default$1).isMedium, __props.size === "large" && unref(Button_module_default$1).isLarge, __props.size === "xl" && unref(Button_module_default$1).isXl)),
+				class: normalizeClass(unref(clsx)(__props.cssClass, __props.isActive && __props.cssClassActive, __props.isFilled && unref(Button_module_default$1).isFilled, __props.size === "small" && unref(Button_module_default$1).isSmall, __props.size === "medium" && unref(Button_module_default$1).isMedium, __props.size === "large" && unref(Button_module_default$1).isLarge, __props.size === "xl" && unref(Button_module_default$1).isXl)),
 				type: __props.isSubmit ? "submit" : "button",
 				"aria-disabled": unref(disabled) ? true : void 0,
+				"aria-pressed": __props.isActive && __props.type === "button" ? true : void 0,
 				disabled: unref(disabled) ? true : void 0,
 				tabindex: unref(disabled) ? -1 : __props.tabindex,
 				href: __props.href,
@@ -9881,6 +9982,7 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 				"class",
 				"type",
 				"aria-disabled",
+				"aria-pressed",
 				"disabled",
 				"tabindex",
 				"href",
@@ -9893,13 +9995,13 @@ var FluxButton_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Action.module.scss
-var { "buttonLabel": _0$17, "button": _1$6, "buttonIcon": _2$5 } = Button_module_default$1;
+var { "button": _0$17, "buttonIcon": _1$6, "buttonLabel": _2$5 } = Button_module_default$1;
 var Action_module_default = {
-	action: `action ${_1$6}`,
+	action: `action ${_0$17}`,
 	spinner: `spinner`,
-	actionIcon: `action-icon ${_2$5}`,
+	actionIcon: `action-icon ${_1$6}`,
 	isDestructive: `is-destructive`,
-	actionLabel: `action-label ${_0$17}`,
+	actionLabel: `action-label ${_2$5}`,
 	actionBar: `action-bar`,
 	separator: `separator`,
 	formInput: `form-input`,
@@ -9916,6 +10018,7 @@ var FluxAction_default = /* @__PURE__ */ defineComponent({
 	props: {
 		type: {},
 		disabled: { type: Boolean },
+		isActive: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
 		label: {},
@@ -9969,6 +10072,7 @@ var FluxAction_default = /* @__PURE__ */ defineComponent({
 var { "button": _0$16, "buttonIcon": _1$5, "buttonLabel": _2$4 } = Button_module_default$1;
 var Button_module_default = {
 	primaryButton: `primary-button ${_0$16}`,
+	isActive: `is-active`,
 	spinner: `spinner`,
 	primaryButtonIcon: `primary-button-icon ${_1$5}`,
 	primaryButtonLabel: `primary-button-label ${_2$4}`,
@@ -10025,6 +10129,7 @@ var FluxDestructiveButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -10048,6 +10153,7 @@ var FluxDestructiveButton_default = /* @__PURE__ */ defineComponent({
 				disabled: __props.disabled,
 				iconLeading: __props.iconLeading,
 				iconTrailing: __props.iconTrailing,
+				isActive: __props.isActive,
 				isFilled: __props.isFilled,
 				isLoading: __props.isLoading,
 				isSubmit: __props.isSubmit,
@@ -10060,6 +10166,7 @@ var FluxDestructiveButton_default = /* @__PURE__ */ defineComponent({
 				to: __props.to
 			}, {
 				"css-class": unref(Button_module_default).destructiveButton,
+				"css-class-active": unref(Button_module_default).isActive,
 				"css-class-icon": unref(Button_module_default).destructiveButtonIcon,
 				"css-class-label": unref(Button_module_default).destructiveButtonLabel,
 				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
@@ -10072,6 +10179,7 @@ var FluxDestructiveButton_default = /* @__PURE__ */ defineComponent({
 				};
 			})]), 1040, [
 				"css-class",
+				"css-class-active",
 				"css-class-icon",
 				"css-class-label"
 			]);
@@ -10549,9 +10657,6 @@ var Flyout_module_default = {
 	mobileOpen: `mobile-open`
 };
 //#endregion
-//#region src/component/FluxFlyout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$71 = ["onKeydown"];
-//#endregion
 //#region src/component/FluxFlyout.vue
 var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxFlyout",
@@ -10561,7 +10666,9 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 		margin: { default: 9 },
 		width: {}
 	},
-	setup(__props, { expose: __expose }) {
+	emits: ["close", "open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
 		const dialogRef = useTemplateRef("dialog");
 		const mountRef = useTemplateRef("mount");
 		const paneRef = useTemplateRef("pane");
@@ -10576,6 +10683,10 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 		const paneMarginY = ref(0);
 		!C$2 && O$1(ref(window), "resize", () => unref(isOpen) && reposition());
 		I$1(paneRef);
+		he$1("esc", () => close(), {
+			enabled: isOpen,
+			target: dialogRef
+		});
 		let closeAnimationEndListener = null;
 		let openAnimationEndListener = null;
 		function close() {
@@ -10663,9 +10774,13 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 			const dialog = unref(dialogRef);
 			if (isOpen && !dialog.open) {
 				dialog.showModal();
+				emit("open");
 				window.addEventListener("scroll", reposition, { passive: true });
 				onCleanup(() => window.removeEventListener("scroll", reposition));
-			} else if (!isOpen && dialog.open) dialog.close();
+			} else if (!isOpen && dialog.open) {
+				dialog.close();
+				emit("close");
+			}
 		});
 		provide(FluxFlyoutInjectionKey, {
 			isClosing,
@@ -10675,7 +10790,8 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 		__expose({
 			close,
 			open,
-			toggle
+			toggle,
+			isOpen
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
@@ -10696,8 +10812,7 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 			}))), createElementVNode("dialog", {
 				ref: "dialog",
 				class: normalizeClass(unref(Flyout_module_default).flyoutDialog),
-				onClick: onDialogBackdropClick,
-				onKeydown: withKeys(withModifiers(close, ["prevent"]), ["esc"])
+				onClick: onDialogBackdropClick
 			}, [isOpen.value ? (openBlock(), createBlock(FluxPane_default, {
 				key: 0,
 				ref: "pane",
@@ -10712,7 +10827,7 @@ var FluxFlyout_default = /* @__PURE__ */ defineComponent({
 					openerHeight: openerHeight.value
 				})))]),
 				_: 3
-			}, 8, ["class", "style"])) : createCommentVNode("", true)], 42, _hoisted_1$71)], 6);
+			}, 8, ["class", "style"])) : createCommentVNode("", true)], 2)], 6);
 		};
 	}
 });
@@ -10725,6 +10840,7 @@ var FluxSecondaryButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -10748,6 +10864,7 @@ var FluxSecondaryButton_default = /* @__PURE__ */ defineComponent({
 				disabled: __props.disabled,
 				iconLeading: __props.iconLeading,
 				iconTrailing: __props.iconTrailing,
+				isActive: __props.isActive,
 				isFilled: __props.isFilled,
 				isLoading: __props.isLoading,
 				isSubmit: __props.isSubmit,
@@ -10760,6 +10877,7 @@ var FluxSecondaryButton_default = /* @__PURE__ */ defineComponent({
 				to: __props.to
 			}, {
 				"css-class": unref(Button_module_default).secondaryButton,
+				"css-class-active": unref(Button_module_default).isActive,
 				"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)),
@@ -10772,6 +10890,7 @@ var FluxSecondaryButton_default = /* @__PURE__ */ defineComponent({
 				};
 			})]), 1040, [
 				"css-class",
+				"css-class-active",
 				"css-class-icon",
 				"css-class-label"
 			]);
@@ -14700,7 +14819,7 @@ var FilterBadge_default = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/css/component/Menu.module.scss
-var { "button": _0$12, "buttonLabel": _1$3, "buttonIcon": _2$2 } = Button_module_default$1;
+var { "buttonIcon": _0$12, "buttonLabel": _1$3, "button": _2$2 } = Button_module_default$1;
 var Menu_module_default = {
 	menu: `menu`,
 	menuNormal: `menu-normal menu`,
@@ -14708,9 +14827,9 @@ var Menu_module_default = {
 	menuGroup: `menu-group`,
 	menuGroupHorizontal: `menu-group-horizontal menu-group`,
 	menuGroupVertical: `menu-group-vertical menu-group`,
-	menuItem: `menu-item ${_0$12}`,
+	menuItem: `menu-item ${_2$2}`,
 	badge: `badge`,
-	menuItemIcon: `menu-item-icon ${_2$2}`,
+	menuItemIcon: `menu-item-icon ${_0$12}`,
 	menuItemLabel: `menu-item-label ${_1$3}`,
 	menuItemActive: `menu-item-active`,
 	menuItemDestructive: `menu-item-destructive`,
@@ -14721,7 +14840,7 @@ var Menu_module_default = {
 	menuCollapsibleOpened: `menu-collapsible-opened menu-collapsible`,
 	menuCollapsibleBody: `menu-collapsible-body`,
 	menuCollapsibleContent: `menu-collapsible-content`,
-	menuItemSelectableIcon: `menu-item-selectable-icon ${_2$2}`,
+	menuItemSelectableIcon: `menu-item-selectable-icon ${_0$12}`,
 	menuItemSelected: `menu-item-selected`,
 	menuItemCommand: `menu-item-command`,
 	menuItemCommandIcon: `menu-item-command-icon`,
@@ -14763,6 +14882,7 @@ var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isLoading: { type: Boolean },
 		label: {},
 		tabindex: {},
@@ -14775,7 +14895,6 @@ var FluxMenuItem_default = /* @__PURE__ */ defineComponent({
 		commandLoading: { type: Boolean },
 		imageAlt: {},
 		imageSrc: {},
-		isActive: { type: Boolean },
 		isDestructive: { type: Boolean },
 		isHighlighted: { type: Boolean },
 		isIndented: { type: Boolean },
@@ -16313,6 +16432,7 @@ var FluxPrimaryButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -16336,6 +16456,7 @@ var FluxPrimaryButton_default = /* @__PURE__ */ defineComponent({
 				disabled: __props.disabled,
 				iconLeading: __props.iconLeading,
 				iconTrailing: __props.iconTrailing,
+				isActive: __props.isActive,
 				isFilled: __props.isFilled,
 				isLoading: __props.isLoading,
 				isSubmit: __props.isSubmit,
@@ -16348,6 +16469,7 @@ var FluxPrimaryButton_default = /* @__PURE__ */ defineComponent({
 				to: __props.to
 			}, {
 				"css-class": unref(Button_module_default).primaryButton,
+				"css-class-active": unref(Button_module_default).isActive,
 				"css-class-icon": unref(Button_module_default).primaryButtonIcon,
 				"css-class-label": unref(Button_module_default).primaryButtonLabel,
 				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
@@ -16360,6 +16482,7 @@ var FluxPrimaryButton_default = /* @__PURE__ */ defineComponent({
 				};
 			})]), 1040, [
 				"css-class",
+				"css-class-active",
 				"css-class-icon",
 				"css-class-label"
 			]);
@@ -16782,6 +16905,7 @@ var FluxPaginationButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -22978,6 +23102,7 @@ var FluxLink_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -23753,6 +23878,7 @@ var FluxPrimaryLinkButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -23776,6 +23902,7 @@ var FluxPrimaryLinkButton_default = /* @__PURE__ */ defineComponent({
 				disabled: __props.disabled,
 				iconLeading: __props.iconLeading,
 				iconTrailing: __props.iconTrailing,
+				isActive: __props.isActive,
 				isFilled: __props.isFilled,
 				isLoading: __props.isLoading,
 				isSubmit: __props.isSubmit,
@@ -23788,6 +23915,7 @@ var FluxPrimaryLinkButton_default = /* @__PURE__ */ defineComponent({
 				to: __props.to
 			}, {
 				"css-class": unref(Button_module_default).primaryLinkButton,
+				"css-class-active": unref(Button_module_default).isActive,
 				"css-class-icon": unref(Button_module_default).primaryLinkButtonIcon,
 				"css-class-label": unref(Button_module_default).primaryLinkButtonLabel,
 				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
@@ -23800,6 +23928,7 @@ var FluxPrimaryLinkButton_default = /* @__PURE__ */ defineComponent({
 				};
 			})]), 1040, [
 				"css-class",
+				"css-class-active",
 				"css-class-icon",
 				"css-class-label"
 			]);
@@ -23891,6 +24020,7 @@ var FluxPublishButton_default = /* @__PURE__ */ defineComponent({
 		type: {},
 		disabled: { type: Boolean },
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -23914,6 +24044,7 @@ var FluxPublishButton_default = /* @__PURE__ */ defineComponent({
 				type: __props.type,
 				disabled: __props.disabled,
 				iconTrailing: __props.iconTrailing,
+				isActive: __props.isActive,
 				isFilled: __props.isFilled,
 				isLoading: __props.isLoading,
 				isSubmit: __props.isSubmit,
@@ -23927,6 +24058,7 @@ var FluxPublishButton_default = /* @__PURE__ */ defineComponent({
 			}, {
 				class: unref(clsx)(!__props.isDone && !__props.isLoading && unref(Button_module_default).isIdle, __props.isDone && unref(Button_module_default).isDone, __props.isLoading && unref(Button_module_default).isLoading),
 				"css-class": unref(Button_module_default).publishButton,
+				"css-class-active": unref(Button_module_default).isActive,
 				"css-class-icon": unref(Button_module_default).publishButtonIcon,
 				"css-class-label": unref(Button_module_default).publishButtonLabel,
 				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
@@ -23964,6 +24096,7 @@ var FluxPublishButton_default = /* @__PURE__ */ defineComponent({
 			}, 16, [
 				"class",
 				"css-class",
+				"css-class-active",
 				"css-class-icon",
 				"css-class-label"
 			]);
@@ -24501,6 +24634,7 @@ var FluxSecondaryLinkButton_default = /* @__PURE__ */ defineComponent({
 		disabled: { type: Boolean },
 		iconLeading: {},
 		iconTrailing: {},
+		isActive: { type: Boolean },
 		isFilled: { type: Boolean },
 		isLoading: { type: Boolean },
 		isSubmit: { type: Boolean },
@@ -24524,6 +24658,7 @@ var FluxSecondaryLinkButton_default = /* @__PURE__ */ defineComponent({
 				disabled: __props.disabled,
 				iconLeading: __props.iconLeading,
 				iconTrailing: __props.iconTrailing,
+				isActive: __props.isActive,
 				isFilled: __props.isFilled,
 				isLoading: __props.isLoading,
 				isSubmit: __props.isSubmit,
@@ -24536,6 +24671,7 @@ var FluxSecondaryLinkButton_default = /* @__PURE__ */ defineComponent({
 				to: __props.to
 			}, {
 				"css-class": unref(Button_module_default).secondaryLinkButton,
+				"css-class-active": unref(Button_module_default).isActive,
 				"css-class-icon": unref(Button_module_default).secondaryLinkButtonIcon,
 				"css-class-label": unref(Button_module_default).secondaryLinkButtonLabel,
 				onClick: _cache[0] || (_cache[0] = ($event) => $emit("click", $event)),
@@ -24548,6 +24684,7 @@ var FluxSecondaryLinkButton_default = /* @__PURE__ */ defineComponent({
 				};
 			})]), 1040, [
 				"css-class",
+				"css-class-active",
 				"css-class-icon",
 				"css-class-label"
 			]);