morya-ui 0.2.8 → 0.3.0

package/dist/theme/styles.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;

package/dist/theme/tokens.d.ts

@@ -21,10 +21,27 @@ export interface RadiusTokens {
     lg: string;
     full: string;
 }
+/** JS mirror of `--m-motion-*` (CSS in `theme/styles.css` is authoritative). */
 export interface MotionTokens {
     fast: string;
     normal: string;
     ease: string;
+    enter: string;
+    exit: string;
+    distance: string;
+    spin: string;
+    spinDash: string;
+    spinFast: string;
+    spinMedium: string;
+    skeleton: string;
+    pulse: string;
+    scrollbarShow: string;
+    scrollbarHide: string;
+    loadingAurora: string;
+    loadingBounce: string;
+    loadingPulse: string;
+    loadingStardust: string;
+    loadingCircularRotate: string;
 }
 export interface LayoutTokens {
     height: string;

package/dist/theme/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,YAmCzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAYxB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,gFAAgF;AAChF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;CACtB;AAwBD,eAAO,MAAM,WAAW,EAAE,YA+BzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,YAYxB,CAAC"}

package/dist/theme/useMotion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMotion.d.ts","sourceRoot":"","sources":["../../src/theme/useMotion.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;AAQ1D,wBAAgB,WAAW,CAAC,UAAU,EAAE,gBAAgB,EAAE,MAAM,CAAC,EAAE,WAAW,QAI7E;AAED,6FAA6F;AAC7F,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,WAAW,QAQ1F;AAED,wBAAgB,kBAAkB,IAAI,gBAAgB,CAErD;AAqBD,wBAAgB,SAAS;;;;sBAGE,gBAAgB;EAK1C"}
+{"version":3,"file":"useMotion.d.ts","sourceRoot":"","sources":["../../src/theme/useMotion.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;AAQ1D,wBAAgB,WAAW,CAAC,UAAU,EAAE,gBAAgB,EAAE,MAAM,CAAC,EAAE,WAAW,QAI7E;AAED,6FAA6F;AAC7F,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,WAAW,QAQ1F;AAED,wBAAgB,kBAAkB,IAAI,gBAAgB,CAQrD;AAqBD,wBAAgB,SAAS;;;;sBAGE,gBAAgB;EAK1C"}

package/dist/theme/useMotionTransition.d.ts

@@ -0,0 +1,19 @@
+import { MaybeRefOrGetter, ComputedRef } from 'vue';
+import { MotionPresetId, MotionTransitionRole } from './motionPresets';
+export interface UseMotionTransitionOptions {
+    role: MotionTransitionRole;
+    /** Component `transition` prop. */
+    local: MaybeRefOrGetter<MotionPresetId | false | undefined>;
+    componentName: string;
+    /** Built-in default when nothing else is configured. */
+    fallback: MotionPresetId;
+}
+/**
+ * Resolve Vue `<Transition :name>` from local prop → componentDefaults → global role → fallback.
+ * `undefined` means disable CSS transitions (`:css="false"`).
+ */
+export declare function useMotionTransition(options: UseMotionTransitionOptions): {
+    transitionName: ComputedRef<string | undefined>;
+    transitionCss: ComputedRef<boolean>;
+};
+//# sourceMappingURL=useMotionTransition.d.ts.map

package/dist/theme/useMotionTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMotionTransition.d.ts","sourceRoot":"","sources":["../../src/theme/useMotionTransition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAK3E,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,oBAAoB,CAAA;IAC1B,mCAAmC;IACnC,KAAK,EAAE,gBAAgB,CAAC,cAAc,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;IAC3D,aAAa,EAAE,MAAM,CAAA;IACrB,wDAAwD;IACxD,QAAQ,EAAE,cAAc,CAAA;CACzB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B;;;EAuBtE"}

package/dist/tiered-menu/index.js

@@ -1,49 +1,51 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { t as i } from "../overlayPlacement-Cd20JTD_.js";
-import { t as a } from "../Scrollbar-BYnCO8fv.js";
-import { t as o } from "../lastPointer-CRxcUqdd.js";
-import { t as s } from "../FlyoutSubmenu-B_bkgKag.js";
-import { c } from "../config-BdK5ccNT.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.js";
+import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as ee, t as te } from "../overlay-oR-5MDuE.js";
+import { t as r } from "../overlayPlacement-Cd20JTD_.js";
+import { t as i } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as a } from "../Scrollbar-DTeJ8P5b.js";
+import { t as ne } from "../lastPointer-CRxcUqdd.js";
+import { t as o } from "../FlyoutSubmenu-BrUPmJa1.js";
+import { c as re } from "../config-CapALqt3.js";
 import "./style.js";
-import { Fragment as l, Teleport as u, Transition as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, nextTick as b, onBeforeUnmount as x, openBlock as S, ref as C, renderList as w, toDisplayString as T, unref as E, useAttrs as D, watch as O, withCtx as k } from "vue";
+import { Fragment as s, Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, mergeProps as _, nextTick as v, onBeforeUnmount as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useAttrs as ie, watch as T, withCtx as E } from "vue";
 //#region src/components/TieredMenu/TieredMenu.vue?vue&type=script&setup=true&lang.ts
-var A = ["onMouseenter"], j = {
+var ae = ["onMouseenter"], oe = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, M = [
+}, se = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], ee = {
+], ce = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, te = {
+}, le = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, ne = ["disabled", "onClick"], re = ["onMouseenter"], ie = {
+}, D = ["disabled", "onClick"], O = ["onMouseenter"], k = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, ae = [
+}, A = [
 	"disabled",
 	"aria-haspopup",
 	"aria-expanded",
 	"onClick"
-], N = {
+], j = {
 	key: 0,
 	class: "m-tieredmenu__caret",
 	"aria-hidden": "true"
-}, P = {
+}, M = {
 	key: 0,
 	class: "m-tieredmenu__separator",
 	role: "separator"
-}, F = ["disabled", "onClick"], I = /* @__PURE__ */ v({
+}, N = ["disabled", "onClick"], P = /* @__PURE__ */ g({
 	inheritAttrs: !1,
 	__name: "TieredMenu",
 	props: {
@@ -62,13 +64,22 @@ var A = ["onMouseenter"], j = {
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["update:modelValue"],
-	setup(v, { emit: I }) {
-		let L = v, R = I, z = D(), { rootAttrs: B } = e(z, () => L.pt), V = c(), H = C(null), U = C(null), W = C(null), G = C({}), K = f(() => n(L.popup ? L : { teleport: !1 }, V.value.appendTo)), q = f(() => L.popup && r(L, V.value.appendTo));
-		function oe() {
-			let { x: e, y: t } = o();
+	setup(g, { emit: P }) {
+		let F = g, I = P, L = ie(), { rootAttrs: R } = e(L, () => F.pt), z = re(), { transitionName: B, transitionCss: V } = n({
+			role: "popup",
+			local: () => F.transition,
+			componentName: "TieredMenu",
+			fallback: "scale-fade"
+		}), H = x(null), U = x(null), W = x(null), G = x({}), K = u(() => ee(F.popup ? F : { teleport: !1 }, z.value.appendTo)), q = u(() => F.popup && te(F, z.value.appendTo));
+		function ue() {
+			let { x: e, y: t } = ne();
 			return {
 				left: e,
 				top: t,
@@ -79,18 +90,18 @@ var A = ["onMouseenter"], j = {
 			};
 		}
 		function J() {
-			!L.popup || !L.modelValue || !q.value || (G.value = i(oe(), L.placement, { minWidth: "12rem" }));
+			!F.popup || !F.modelValue || !q.value || (G.value = r(ue(), F.placement, { minWidth: "12rem" }));
+		}
+		function de() {
+			F.modelValue && J();
 		}
-		function Y() {
-			L.modelValue && J();
+		function Y(e) {
+			e.disabled || e.separator || e.items?.length || (e.command?.(), U.value = null, F.popup && I("update:modelValue", !1));
 		}
 		function X(e) {
-			e.disabled || e.separator || e.items?.length || (e.command?.(), U.value = null, L.popup && R("update:modelValue", !1));
+			e.disabled || e.separator || (e.command?.(), U.value = null, F.popup && I("update:modelValue", !1));
 		}
 		function Z(e) {
-			e.disabled || e.separator || (e.command?.(), U.value = null, L.popup && R("update:modelValue", !1));
-		}
-		function se(e) {
 			if (!(e?.currentTarget instanceof HTMLElement)) return null;
 			let t = e.currentTarget;
 			return t.classList.contains("m-tieredmenu__item") ? t : t.querySelector(".m-tieredmenu__item");
@@ -100,42 +111,45 @@ var A = ["onMouseenter"], j = {
 				U.value = null, W.value = null;
 				return;
 			}
-			U.value = e, W.value = se(n);
+			U.value = e, W.value = Z(n);
 		}
 		function $(e) {
 			let t = e.target;
-			H.value?.contains(t) || document.querySelector(".m-tieredmenu__submenu--teleported")?.contains(t) || (U.value = null, W.value = null, L.popup && L.modelValue && R("update:modelValue", !1));
+			H.value?.contains(t) || document.querySelector(".m-tieredmenu__submenu--teleported")?.contains(t) || (U.value = null, W.value = null, F.popup && F.modelValue && I("update:modelValue", !1));
 		}
-		return O(() => !!(!L.popup || L.modelValue), (e) => {
+		return T(() => !!(!F.popup || F.modelValue), (e) => {
 			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
-		}, { immediate: !0 }), O(() => L.modelValue, (e) => {
-			L.popup && (e ? (b(J), q.value && (window.addEventListener("resize", Y), window.addEventListener("scroll", Y, !0))) : (window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0)));
-		}, { immediate: !0 }), x(() => {
-			document.removeEventListener("click", $), window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0);
-		}), (e, n) => v.popup ? (S(), p(u, {
+		}, { immediate: !0 }), T(() => F.modelValue, (e) => {
+			F.popup && e && v(J);
+		}, { immediate: !0 }), i(() => !!(F.popup && F.modelValue && q.value), de), y(() => {
+			document.removeEventListener("click", $);
+		}), (e, n) => g.popup ? (b(), d(c, {
 			key: 1,
 			to: K.value.to,
 			disabled: K.value.disabled
-		}, [_(d, { name: "m-scale-fade" }, {
-			default: k(() => [v.modelValue ? (S(), h("div", y({
+		}, [h(l, {
+			name: w(B),
+			css: w(V)
+		}, {
+			default: E(() => [g.modelValue ? (b(), p("div", _({
 				key: 0,
 				ref_key: "root",
 				ref: H
-			}, E(B), {
+			}, w(R), {
 				class: ["m-tieredmenu m-tieredmenu--popup", { "m-tieredmenu--teleported": q.value }],
 				style: q.value ? G.value : void 0,
 				role: "menu"
-			}), [_(a, {
+			}), [h(a, {
 				class: "m-tieredmenu__scroll",
 				"fit-content": "",
 				"wrap-class": "m-tieredmenu__scroll-wrap",
 				"view-class": "m-tieredmenu__scroll-view"
 			}, {
-				default: k(() => [(S(!0), h(l, null, w(v.model, (e, n) => (S(), h("div", {
+				default: E(() => [(b(!0), p(s, null, S(g.model, (e, n) => (b(), p("div", {
 					key: `${e.label ?? "sep"}-${n}`,
 					class: "m-tieredmenu__row",
 					onMouseenter: (t) => Q(n, e, t)
-				}, [e.separator ? (S(), h("div", ie)) : (S(), h("button", {
+				}, [e.separator ? (b(), p("div", k)) : (b(), p("button", {
 					key: 1,
 					type: "button",
 					class: "m-tieredmenu__item",
@@ -143,54 +157,54 @@ var A = ["onMouseenter"], j = {
 					disabled: e.disabled,
 					"aria-haspopup": e.items?.length ? "menu" : void 0,
 					"aria-expanded": e.items?.length ? U.value === n : void 0,
-					onClick: (t) => e.items?.length ? Q(n, e, t) : X(e)
-				}, [g("span", null, T(e.label), 1), e.items?.length ? (S(), h("span", N, [_(t, {
+					onClick: (t) => e.items?.length ? Q(n, e, t) : Y(e)
+				}, [m("span", null, C(e.label), 1), e.items?.length ? (b(), p("span", j, [h(t, {
 					name: "chevron-right",
 					size: "sm"
-				})])) : m("", !0)], 8, ae)), _(s, {
+				})])) : f("", !0)], 8, A)), h(o, {
 					open: U.value === n && !!e.items?.length,
 					anchor: U.value === n ? W.value : null,
 					"panel-class": "m-tieredmenu__submenu"
 				}, {
-					default: k(() => [_(a, {
+					default: E(() => [h(a, {
 						class: "m-tieredmenu__submenu-scroll",
 						"fit-content": "",
 						"wrap-class": "m-tieredmenu__submenu-wrap-inner",
 						"view-class": "m-tieredmenu__submenu-view"
 					}, {
-						default: k(() => [(S(!0), h(l, null, w(e.items, (e, t) => (S(), h(l, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (S(), h("div", P)) : (S(), h("button", {
+						default: E(() => [(b(!0), p(s, null, S(e.items, (e, t) => (b(), p(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (b(), p("div", M)) : (b(), p("button", {
 							key: 1,
 							type: "button",
 							class: "m-tieredmenu__item",
 							role: "menuitem",
 							disabled: e.disabled,
-							onClick: (t) => Z(e)
-						}, T(e.label), 9, F))], 64))), 128))]),
+							onClick: (t) => X(e)
+						}, C(e.label), 9, N))], 64))), 128))]),
 						_: 2
 					}, 1024)]),
 					_: 2
-				}, 1032, ["open", "anchor"])], 40, re))), 128))]),
+				}, 1032, ["open", "anchor"])], 40, O))), 128))]),
 				_: 1
-			})], 16)) : m("", !0)]),
+			})], 16)) : f("", !0)]),
 			_: 1
-		})], 8, ["to", "disabled"])) : (S(), h("div", y({
+		}, 8, ["name", "css"])], 8, ["to", "disabled"])) : (b(), p("div", _({
 			key: 0,
 			ref_key: "root",
 			ref: H
-		}, E(B), {
+		}, w(R), {
 			class: "m-tieredmenu",
 			role: "menu"
-		}), [_(a, {
+		}), [h(a, {
 			class: "m-tieredmenu__scroll",
 			"fit-content": "",
 			"wrap-class": "m-tieredmenu__scroll-wrap",
 			"view-class": "m-tieredmenu__scroll-view"
 		}, {
-			default: k(() => [(S(!0), h(l, null, w(v.model, (e, n) => (S(), h("div", {
+			default: E(() => [(b(!0), p(s, null, S(g.model, (e, n) => (b(), p("div", {
 				key: `${e.label ?? "sep"}-${n}`,
 				class: "m-tieredmenu__row",
 				onMouseenter: (t) => Q(n, e, t)
-			}, [e.separator ? (S(), h("div", j)) : (S(), h("button", {
+			}, [e.separator ? (b(), p("div", oe)) : (b(), p("button", {
 				key: 1,
 				type: "button",
 				class: "m-tieredmenu__item",
@@ -198,36 +212,36 @@ var A = ["onMouseenter"], j = {
 				disabled: e.disabled,
 				"aria-haspopup": e.items?.length ? "menu" : void 0,
 				"aria-expanded": e.items?.length ? U.value === n : void 0,
-				onClick: (t) => e.items?.length ? Q(n, e, t) : X(e)
-			}, [g("span", null, T(e.label), 1), e.items?.length ? (S(), h("span", ee, [_(t, {
+				onClick: (t) => e.items?.length ? Q(n, e, t) : Y(e)
+			}, [m("span", null, C(e.label), 1), e.items?.length ? (b(), p("span", ce, [h(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : m("", !0)], 8, M)), _(s, {
+			})])) : f("", !0)], 8, se)), h(o, {
 				open: U.value === n && !!e.items?.length,
 				anchor: U.value === n ? W.value : null,
 				"panel-class": "m-tieredmenu__submenu"
 			}, {
-				default: k(() => [_(a, {
+				default: E(() => [h(a, {
 					class: "m-tieredmenu__submenu-scroll",
 					"fit-content": "",
 					"wrap-class": "m-tieredmenu__submenu-wrap-inner",
 					"view-class": "m-tieredmenu__submenu-view"
 				}, {
-					default: k(() => [(S(!0), h(l, null, w(e.items, (e, t) => (S(), h(l, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (S(), h("div", te)) : (S(), h("button", {
+					default: E(() => [(b(!0), p(s, null, S(e.items, (e, t) => (b(), p(s, { key: `${e.label ?? "sep"}-${t}` }, [e.separator ? (b(), p("div", le)) : (b(), p("button", {
 						key: 1,
 						type: "button",
 						class: "m-tieredmenu__item",
 						role: "menuitem",
 						disabled: e.disabled,
-						onClick: (t) => Z(e)
-					}, T(e.label), 9, ne))], 64))), 128))]),
+						onClick: (t) => X(e)
+					}, C(e.label), 9, D))], 64))), 128))]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1032, ["open", "anchor"])], 40, A))), 128))]),
+			}, 1032, ["open", "anchor"])], 40, ae))), 128))]),
 			_: 1
 		})], 16));
 	}
 });
 //#endregion
-export { I as MTieredMenu };
+export { P as MTieredMenu };