morya-ui 0.2.9 → 0.3.1

package/dist/speed-dial/style.css

@@ -60,9 +60,22 @@
     --m-z-toast: calc(var(--m-z-base) + 100);
     --m-z-popper: 40;
 
-    --m-control-affix-size: 2rem;
+    /* Affix hitbox tracks control height so small/compact shells do not overflow */
+    --m-control-affix-size: calc(
+        var(--m-control-height-medium) - 2 * var(--m-border-width)
+    );
     --m-control-affix-gap: 2.35rem;
     --m-control-affix-padding: 2.5rem;
+    --m-meter-track-height: var(--m-space-5);
+    --m-tree-toggler-size: var(--m-checkbox-control-size);
+    --m-nav-rail-width: 12.5rem;
+    --m-nav-rail-collapsed-width: 4rem;
+    --m-layout-header-height: calc(
+        var(--m-control-height-medium) + 2 * var(--m-space-3)
+    );
+    --m-layout-footer-height: calc(
+        var(--m-control-height-medium) + 2 * var(--m-space-2)
+    );
     --m-space-1: 0.25rem;
     --m-space-2: 0.5rem;
     --m-space-3: 0.75rem;
@@ -80,7 +93,7 @@
     --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
     --m-motion-enter: 180ms;
     --m-motion-exit: 130ms;
-    --m-motion-distance: 0.5rem;
+    --m-motion-distance: 1rem;
     --m-motion-spin: 1s;
     --m-motion-spin-dash: 1.5s;
     --m-motion-spin-fast: 0.8s;
@@ -89,6 +102,11 @@
     --m-motion-pulse: 1.2s;
     --m-motion-scrollbar-show: 340ms;
     --m-motion-scrollbar-hide: 120ms;
+    --m-motion-loading-aurora: 3s;
+    --m-motion-loading-bounce: 0.6s;
+    --m-motion-loading-pulse: 1.8s;
+    --m-motion-loading-stardust: 1.6s;
+    --m-motion-loading-circular-rotate: 2s;
     --m-dataview-grid-min: 10rem;
     --m-tree-indent: 0.7rem;
     --m-tree-indent-padding: var(--m-space-3);
@@ -135,6 +153,20 @@
     --m-motion-enter: 100ms;
     --m-motion-exit: 80ms;
     --m-motion-distance: 0;
+    /* Looping indicators: keep a short pulse so state is still perceptible */
+    --m-motion-spin: 0ms;
+    --m-motion-spin-dash: 0ms;
+    --m-motion-spin-fast: 0ms;
+    --m-motion-spin-medium: 0ms;
+    --m-motion-skeleton: 0ms;
+    --m-motion-pulse: 0ms;
+    --m-motion-scrollbar-show: 160ms;
+    --m-motion-scrollbar-hide: 80ms;
+    --m-motion-loading-aurora: 0ms;
+    --m-motion-loading-bounce: 0ms;
+    --m-motion-loading-pulse: 0ms;
+    --m-motion-loading-stardust: 0ms;
+    --m-motion-loading-circular-rotate: 0ms;
 }
 
 :root[data-m-motion="none"] {
@@ -143,6 +175,64 @@
     --m-motion-enter: 0ms;
     --m-motion-exit: 0ms;
     --m-motion-distance: 0;
+    --m-motion-spin: 0ms;
+    --m-motion-spin-dash: 0ms;
+    --m-motion-spin-fast: 0ms;
+    --m-motion-spin-medium: 0ms;
+    --m-motion-skeleton: 0ms;
+    --m-motion-pulse: 0ms;
+    --m-motion-scrollbar-show: 0ms;
+    --m-motion-scrollbar-hide: 0ms;
+    --m-motion-loading-aurora: 0ms;
+    --m-motion-loading-bounce: 0ms;
+    --m-motion-loading-pulse: 0ms;
+    --m-motion-loading-stardust: 0ms;
+    --m-motion-loading-circular-rotate: 0ms;
+}
+
+/*
+ * Global motion policy (complements per-component rules):
+ * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ *   and layout/transform size animation.
+ * - `none`: zero all transition/animation durations.
+ */
+@media (prefers-reduced-motion: reduce) {
+    html:not([data-m-ignore-reduced-motion]) *,
+    html:not([data-m-ignore-reduced-motion]) *::before,
+    html:not([data-m-ignore-reduced-motion]) *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-property: background-color, border-color, color, opacity, box-shadow,
+            outline, fill, stroke, stroke-dashoffset !important;
+    }
+}
+
+[data-m-motion="reduced"] *,
+[data-m-motion="reduced"] *::before,
+[data-m-motion="reduced"] *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-property: background-color, border-color, color, opacity, box-shadow, outline,
+        fill, stroke, stroke-dashoffset !important;
+}
+
+[data-m-motion="none"] *,
+[data-m-motion="none"] *::before,
+[data-m-motion="none"] *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+}
+
+/* Off-screen looping indicators (usePauseOffscreen → data-m-anim-paused) */
+[data-m-anim-paused],
+[data-m-anim-paused]::before,
+[data-m-anim-paused]::after,
+[data-m-anim-paused] *,
+[data-m-anim-paused] *::before,
+[data-m-anim-paused] *::after {
+    animation-play-state: paused !important;
 }
 
 /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
@@ -158,6 +248,8 @@
     --m-control-affix-padding: 2.15rem;
     --m-control-affix-gap: 2rem;
     --m-checkbox-control-size: 1rem;
+    --m-nav-rail-width: 15rem;
+    --m-nav-rail-collapsed-width: 3.25rem;
     --m-space-1: 0.2rem;
     --m-space-2: 0.4rem;
     --m-space-3: 0.6rem;
@@ -185,6 +277,8 @@
     --m-control-affix-padding: 2.85rem;
     --m-control-affix-gap: 2.65rem;
     --m-checkbox-control-size: 1.25rem;
+    --m-nav-rail-width: 18rem;
+    --m-nav-rail-collapsed-width: 4.5rem;
     --m-space-1: 0.3rem;
     --m-space-2: 0.6rem;
     --m-space-3: 0.9rem;
@@ -215,11 +309,6 @@
     --m-layout-footer-height: 2.5rem;
 }
 
-[data-m-density="compact"] .m-layout-sider {
-    --m-layout-sider-width: 15rem;
-    --m-layout-sider-collapsed-width: 3.25rem;
-}
-
 [data-m-density="spacious"] .m-layout-header {
     --m-layout-header-height: 4rem;
 }
@@ -228,11 +317,6 @@
     --m-layout-footer-height: 3.5rem;
 }
 
-[data-m-density="spacious"] .m-layout-sider {
-    --m-layout-sider-width: 18rem;
-    --m-layout-sider-collapsed-width: 4.5rem;
-}
-
 [data-theme="dark"] {
     --m-color-primary: #60a5fa;
     --m-color-primary-hover: #93c5fd;
@@ -319,6 +403,8 @@
 .m-datepicker,
 .m-listbox,
 .m-togglebutton,
+.m-select,
+.m-textarea,
 .m-selectbutton,
 .m-inputotp,
 .m-knob,
@@ -443,9 +529,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {
@@ -488,7 +578,7 @@
 .m-scale-fade-enter-from,
 .m-scale-fade-leave-to {
     opacity: 0;
-    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.98);
+    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
 }
 
 .m-slide-fade-enter-active {
@@ -509,20 +599,101 @@
     transform: translateY(calc(var(--m-motion-distance) * -1));
 }
 
+/* Generic center zoom (opacity + scale on the transitioning root) */
+.m-zoom-enter-active {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-zoom-leave-active {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-zoom-enter-from,
+.m-zoom-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.m-slide-up-enter-active,
+.m-slide-down-enter-active,
+.m-slide-left-enter-active,
+.m-slide-right-enter-active {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-slide-up-leave-active,
+.m-slide-down-leave-active,
+.m-slide-left-leave-active,
+.m-slide-right-leave-active {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-slide-up-enter-from,
+.m-slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(var(--m-motion-distance));
+}
+
+.m-slide-down-enter-from,
+.m-slide-down-leave-to {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-slide-left-enter-from,
+.m-slide-left-leave-to {
+    opacity: 0;
+    transform: translateX(var(--m-motion-distance));
+}
+
+.m-slide-right-enter-from,
+.m-slide-right-leave-to {
+    opacity: 0;
+    transform: translateX(calc(var(--m-motion-distance) * -1));
+}
+
 @media (prefers-reduced-motion: reduce) {
     html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
     html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
     html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active {
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
         transition: none;
     }
 
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
     html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to {
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
         transform: none;
     }
 }
@@ -533,12 +704,32 @@
 [data-m-motion="reduced"] .m-scale-fade-leave-active,
 [data-m-motion="reduced"] .m-slide-fade-enter-active,
 [data-m-motion="reduced"] .m-slide-fade-leave-active,
+[data-m-motion="reduced"] .m-zoom-enter-active,
+[data-m-motion="reduced"] .m-zoom-leave-active,
+[data-m-motion="reduced"] .m-slide-up-enter-active,
+[data-m-motion="reduced"] .m-slide-up-leave-active,
+[data-m-motion="reduced"] .m-slide-down-enter-active,
+[data-m-motion="reduced"] .m-slide-down-leave-active,
+[data-m-motion="reduced"] .m-slide-left-enter-active,
+[data-m-motion="reduced"] .m-slide-left-leave-active,
+[data-m-motion="reduced"] .m-slide-right-enter-active,
+[data-m-motion="reduced"] .m-slide-right-leave-active,
 [data-m-motion="none"] .m-fade-enter-active,
 [data-m-motion="none"] .m-fade-leave-active,
 [data-m-motion="none"] .m-scale-fade-enter-active,
 [data-m-motion="none"] .m-scale-fade-leave-active,
 [data-m-motion="none"] .m-slide-fade-enter-active,
-[data-m-motion="none"] .m-slide-fade-leave-active {
+[data-m-motion="none"] .m-slide-fade-leave-active,
+[data-m-motion="none"] .m-zoom-enter-active,
+[data-m-motion="none"] .m-zoom-leave-active,
+[data-m-motion="none"] .m-slide-up-enter-active,
+[data-m-motion="none"] .m-slide-up-leave-active,
+[data-m-motion="none"] .m-slide-down-enter-active,
+[data-m-motion="none"] .m-slide-down-leave-active,
+[data-m-motion="none"] .m-slide-left-enter-active,
+[data-m-motion="none"] .m-slide-left-leave-active,
+[data-m-motion="none"] .m-slide-right-enter-active,
+[data-m-motion="none"] .m-slide-right-leave-active {
     transition: none;
 }
 
@@ -546,10 +737,30 @@
 [data-m-motion="reduced"] .m-scale-fade-leave-to,
 [data-m-motion="reduced"] .m-slide-fade-enter-from,
 [data-m-motion="reduced"] .m-slide-fade-leave-to,
+[data-m-motion="reduced"] .m-zoom-enter-from,
+[data-m-motion="reduced"] .m-zoom-leave-to,
+[data-m-motion="reduced"] .m-slide-up-enter-from,
+[data-m-motion="reduced"] .m-slide-up-leave-to,
+[data-m-motion="reduced"] .m-slide-down-enter-from,
+[data-m-motion="reduced"] .m-slide-down-leave-to,
+[data-m-motion="reduced"] .m-slide-left-enter-from,
+[data-m-motion="reduced"] .m-slide-left-leave-to,
+[data-m-motion="reduced"] .m-slide-right-enter-from,
+[data-m-motion="reduced"] .m-slide-right-leave-to,
 [data-m-motion="none"] .m-scale-fade-enter-from,
 [data-m-motion="none"] .m-scale-fade-leave-to,
 [data-m-motion="none"] .m-slide-fade-enter-from,
-[data-m-motion="none"] .m-slide-fade-leave-to {
+[data-m-motion="none"] .m-slide-fade-leave-to,
+[data-m-motion="none"] .m-zoom-enter-from,
+[data-m-motion="none"] .m-zoom-leave-to,
+[data-m-motion="none"] .m-slide-up-enter-from,
+[data-m-motion="none"] .m-slide-up-leave-to,
+[data-m-motion="none"] .m-slide-down-enter-from,
+[data-m-motion="none"] .m-slide-down-leave-to,
+[data-m-motion="none"] .m-slide-left-enter-from,
+[data-m-motion="none"] .m-slide-left-leave-to,
+[data-m-motion="none"] .m-slide-right-enter-from,
+[data-m-motion="none"] .m-slide-right-leave-to {
     transform: none;
 }
 
@@ -1037,7 +1248,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .m-icon--spin svg {
+    html:not([data-m-ignore-reduced-motion]) .m-icon--spin svg {
         animation: none;
     }
 }

package/dist/split-button/index.js

@@ -1,29 +1,31 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { r as t } from "../types-DGuu4Eg4.js";
-import { a as ee, t as n } from "../Icon-B6IBrJ5S.js";
-import { n as te, t as ne } from "../overlay-oR-5MDuE.js";
-import { t as re } from "../overlayPlacement-Cd20JTD_.js";
-import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as i } from "../useMId-BXFYayPP.js";
-import { c as a, o } from "../config-BdK5ccNT.js";
-import { n as s } from "../locale-B36KH7c3.js";
+import { a as ee, t as n } from "../Icon-od9Ob-Ay.js";
+import { t as te } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as r, t as i } from "../overlay-oR-5MDuE.js";
+import { t as a } from "../overlayPlacement-Cd20JTD_.js";
+import { t as o } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as ne } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as re } from "../useMId-BXFYayPP.js";
+import { c as ie, o as ae } from "../config-CapALqt3.js";
+import { n as oe } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as c, Teleport as ie, Transition as ae, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeProps as _, nextTick as v, normalizeClass as y, normalizeStyle as oe, onBeforeUnmount as se, openBlock as b, ref as x, renderList as ce, renderSlot as le, toDisplayString as S, unref as C, useAttrs as ue, watch as w, withCtx as de } from "vue";
+import { Fragment as s, Teleport as se, Transition as ce, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeProps as le, nextTick as g, normalizeClass as ue, normalizeStyle as de, onBeforeUnmount as fe, openBlock as _, ref as v, renderList as pe, renderSlot as me, toDisplayString as y, unref as b, useAttrs as he, watch as x, withCtx as ge } from "vue";
 //#region src/components/SplitButton/SplitButton.vue?vue&type=script&setup=true&lang.ts
-var fe = ["disabled"], pe = {
+var _e = ["disabled"], S = {
 	key: 0,
 	class: "m-splitbutton__icon",
 	"aria-hidden": "true"
-}, me = { key: 1 }, T = [
+}, ve = { key: 1 }, C = [
 	"aria-label",
 	"aria-expanded",
 	"aria-controls",
 	"disabled"
-], he = ["id"], E = [
+], w = ["id"], T = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], D = /* @__PURE__ */ g({
+], E = /* @__PURE__ */ h({
 	inheritAttrs: !1,
 	__name: "SplitButton",
 	props: {
@@ -45,68 +47,77 @@ var fe = ["disabled"], pe = {
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["click", "command"],
-	setup(g, { emit: D }) {
-		let O = g, k = D, A = ue(), { rootAttrs: j } = e(A, () => O.pt), M = a(), N = s(), P = x(!1), F = x(null), I = x(null), L = x(null), R = x({}), z = i("m-splitbutton-menu"), B = o("SplitButton", () => O.size), V = l(() => t(B.value)), H = l(() => O.icon && ee(O.icon) ? O.icon : void 0), U = l(() => O.icon && !H.value ? O.icon : void 0), W = l(() => te(O, M.value.appendTo)), G = l(() => ne(O, M.value.appendTo)), ge = l(() => [
+	setup(h, { emit: E }) {
+		let D = h, O = E, k = he(), { rootAttrs: A } = e(k, () => D.pt), j = ie(), { transitionName: M, transitionCss: N } = te({
+			role: "popup",
+			local: () => D.transition,
+			componentName: "SplitButton",
+			fallback: "scale-fade"
+		}), P = oe(), F = v(!1), I = v(null), L = v(null), R = v(null), z = v({}), B = re("m-splitbutton-menu"), V = ae("SplitButton", () => D.size), H = c(() => t(V.value)), U = c(() => D.icon && ee(D.icon) ? D.icon : void 0), W = c(() => D.icon && !U.value ? D.icon : void 0), G = c(() => r(D, j.value.appendTo)), K = c(() => i(D, j.value.appendTo)), ye = c(() => [
 			"m-splitbutton",
-			`m-splitbutton--${B.value}`,
+			`m-splitbutton--${V.value}`,
 			{
-				"m-splitbutton--disabled": O.disabled,
-				"m-splitbutton--outlined": O.outlined,
-				[`m-splitbutton--${O.severity}`]: !!O.severity,
-				"m-splitbutton--open": P.value
+				"m-splitbutton--disabled": D.disabled,
+				"m-splitbutton--outlined": D.outlined,
+				[`m-splitbutton--${D.severity}`]: !!D.severity,
+				"m-splitbutton--open": F.value
 			}
 		]);
-		function K() {
-			if (!G.value || !F.value) return;
-			let e = F.value.getBoundingClientRect();
-			R.value = re(e, "bottom-end", {
+		function q() {
+			if (!K.value || !I.value) return;
+			let e = I.value.getBoundingClientRect();
+			z.value = a(e, "bottom-end", {
 				gap: 4,
 				minWidth: `${e.width}px`
 			});
 		}
-		function q() {
-			P.value && K();
+		function be() {
+			F.value && q();
 		}
-		let J = r({
-			itemCount: () => O.model.length,
-			isItemDisabled: (e) => !!O.model[e]?.disabled,
-			enabled: P,
+		let J = ne({
+			itemCount: () => D.model.length,
+			isItemDisabled: (e) => !!D.model[e]?.disabled,
+			enabled: F,
 			onActivate: (e) => {
-				let t = O.model[e];
+				let t = D.model[e];
 				t && Z(t);
 			},
 			onEscape: () => {
-				P.value = !1;
+				F.value = !1;
 			},
-			returnFocusTo: I
+			returnFocusTo: L
 		});
 		function Y() {
 			let e = J.activeIndex.value;
-			e < 0 || L.value?.querySelectorAll(".m-splitbutton__item")[e]?.focus({ preventScroll: !0 });
+			e < 0 || R.value?.querySelectorAll(".m-splitbutton__item")[e]?.focus({ preventScroll: !0 });
 		}
-		function _e(e) {
-			O.disabled || k("click", e);
+		function xe(e) {
+			D.disabled || O("click", e);
 		}
 		function X() {
-			P.value = !0, v(() => {
-				K(), J.moveFirst(), Y();
+			F.value = !0, g(() => {
+				q(), J.moveFirst(), Y();
 			});
 		}
-		function ve() {
-			if (!O.disabled) {
-				if (P.value) {
-					P.value = !1;
+		function Se() {
+			if (!D.disabled) {
+				if (F.value) {
+					F.value = !1;
 					return;
 				}
 				X();
 			}
 		}
-		function ye(e) {
-			if (!O.disabled) {
-				if (!P.value) {
+		function Ce(e) {
+			if (!D.disabled) {
+				if (!F.value) {
 					(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), X());
 					return;
 				}
@@ -114,81 +125,84 @@ var fe = ["disabled"], pe = {
 			}
 		}
 		function Z(e) {
-			e.disabled || O.disabled || (e.command?.(), k("command", e), P.value = !1, I.value?.focus({ preventScroll: !0 }));
+			e.disabled || D.disabled || (e.command?.(), O("command", e), F.value = !1, L.value?.focus({ preventScroll: !0 }));
 		}
 		function Q(e) {
 			let t = e.target;
-			F.value?.contains(t) || L.value?.contains(t) || (P.value = !1);
+			I.value?.contains(t) || R.value?.contains(t) || (F.value = !1);
 		}
 		function $(e) {
 			let t = e.target;
-			F.value?.contains(t) || L.value?.contains(t) || (P.value = !1);
+			I.value?.contains(t) || R.value?.contains(t) || (F.value = !1);
 		}
-		return w(J.activeIndex, () => {
-			P.value && Y();
-		}), w(P, (e) => {
-			e ? (document.addEventListener("click", Q), document.addEventListener("focusin", $), v(() => K()), G.value && (window.addEventListener("resize", q), window.addEventListener("scroll", q, !0))) : (J.reset(), document.removeEventListener("click", Q), document.removeEventListener("focusin", $), window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0));
-		}), se(() => {
-			document.removeEventListener("click", Q), document.removeEventListener("focusin", $), window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0);
-		}), (e, t) => (b(), f("div", _(C(j), {
+		return x(J.activeIndex, () => {
+			F.value && Y();
+		}), o(() => F.value && K.value, be), x(F, (e) => {
+			e ? (document.addEventListener("click", Q), document.addEventListener("focusin", $), g(() => q())) : (J.reset(), document.removeEventListener("click", Q), document.removeEventListener("focusin", $));
+		}), fe(() => {
+			document.removeEventListener("click", Q), document.removeEventListener("focusin", $);
+		}), (e, t) => (_(), d("div", le(b(A), {
 			ref_key: "root",
-			ref: F,
-			class: ge.value
+			ref: I,
+			class: ye.value
 		}), [
-			p("button", {
+			f("button", {
 				type: "button",
 				class: "m-splitbutton__main",
-				disabled: g.disabled,
-				onClick: _e
-			}, [le(e.$slots, "default", {}, () => [H.value || U.value ? (b(), f("span", pe, [H.value ? (b(), u(n, {
+				disabled: h.disabled,
+				onClick: xe
+			}, [me(e.$slots, "default", {}, () => [U.value || W.value ? (_(), d("span", S, [U.value ? (_(), l(n, {
 				key: 0,
-				name: H.value,
-				size: V.value
-			}, null, 8, ["name", "size"])) : (b(), f(c, { key: 1 }, [m(S(U.value), 1)], 64))])) : d("", !0), g.label ? (b(), f("span", me, S(g.label), 1)) : d("", !0)])], 8, fe),
-			p("button", {
+				name: U.value,
+				size: H.value
+			}, null, 8, ["name", "size"])) : (_(), d(s, { key: 1 }, [p(y(W.value), 1)], 64))])) : u("", !0), h.label ? (_(), d("span", ve, y(h.label), 1)) : u("", !0)])], 8, _e),
+			f("button", {
 				ref_key: "trigger",
-				ref: I,
+				ref: L,
 				type: "button",
 				class: "m-splitbutton__trigger",
-				"aria-label": C(N).moreActions,
-				"aria-expanded": P.value,
-				"aria-controls": P.value ? C(z) : void 0,
+				"aria-label": b(P).moreActions,
+				"aria-expanded": F.value,
+				"aria-controls": F.value ? b(B) : void 0,
 				"aria-haspopup": "menu",
-				disabled: g.disabled,
-				onClick: ve,
-				onKeydown: ye
-			}, [h(n, {
+				disabled: h.disabled,
+				onClick: Se,
+				onKeydown: Ce
+			}, [m(n, {
 				name: "chevron-down",
-				size: V.value
-			}, null, 8, ["size"])], 40, T),
-			(b(), u(ie, {
-				to: W.value.to,
-				disabled: W.value.disabled
-			}, [h(ae, { name: "m-scale-fade" }, {
-				default: de(() => [P.value ? (b(), f("ul", {
+				size: H.value
+			}, null, 8, ["size"])], 40, C),
+			(_(), l(se, {
+				to: G.value.to,
+				disabled: G.value.disabled
+			}, [m(ce, {
+				name: b(M),
+				css: b(N)
+			}, {
+				default: ge(() => [F.value ? (_(), d("ul", {
 					key: 0,
-					id: C(z),
+					id: b(B),
 					ref_key: "menu",
-					ref: L,
-					class: y(["m-splitbutton__menu", { "m-splitbutton__menu--teleported": G.value }]),
-					style: oe(G.value ? R.value : void 0),
+					ref: R,
+					class: ue(["m-splitbutton__menu", { "m-splitbutton__menu--teleported": K.value }]),
+					style: de(K.value ? z.value : void 0),
 					role: "menu",
-					onKeydown: t[0] ||= (...e) => C(J).onKeydown && C(J).onKeydown(...e)
-				}, [(b(!0), f(c, null, ce(g.model, (e, t) => (b(), f("li", {
+					onKeydown: t[0] ||= (...e) => b(J).onKeydown && b(J).onKeydown(...e)
+				}, [(_(!0), d(s, null, pe(h.model, (e, t) => (_(), d("li", {
 					key: `${e.label}-${t}`,
 					role: "presentation"
-				}, [p("button", {
+				}, [f("button", {
 					type: "button",
 					class: "m-splitbutton__item",
 					role: "menuitem",
 					disabled: e.disabled,
-					tabindex: C(J).tabindexFor(t),
+					tabindex: b(J).tabindexFor(t),
 					onClick: (t) => Z(e)
-				}, S(e.label), 9, E)]))), 128))], 46, he)) : d("", !0)]),
+				}, y(e.label), 9, T)]))), 128))], 46, w)) : u("", !0)]),
 				_: 1
-			})], 8, ["to", "disabled"]))
+			}, 8, ["name", "css"])], 8, ["to", "disabled"]))
 		], 16));
 	}
 });
 //#endregion
-export { D as MSplitButton };
+export { E as MSplitButton };