morya-ui 0.2.8 → 0.3.0

package/dist/label/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,
@@ -373,6 +459,17 @@
     opacity: var(--m-opacity-disabled);
 }
 
+.m-input-field__control--prefixed .m-input:disabled,
+.m-input-field__control--suffixed .m-input:disabled,
+.m-input-field__control--clearable .m-input:disabled,
+.m-password--disabled .m-password__input,
+.m-inputnumber--disabled .m-inputnumber__input,
+.m-datepicker--disabled .m-datepicker__input,
+.m-icon-field--anchored .m-input:disabled,
+.m-icon-field--anchored .m-textarea:disabled {
+    opacity: 1;
+}
+
 .m-input::placeholder,
 .m-textarea::placeholder,
 .m-password__input::placeholder,
@@ -477,7 +574,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 {
@@ -498,20 +595,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;
     }
 }
@@ -522,12 +700,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;
 }
 
@@ -535,10 +733,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;
 }
 
@@ -692,14 +910,6 @@
     opacity: var(--m-opacity-disabled);
 }
 
-.m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-left: var(--m-control-affix-padding);
-}
-
-.m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-right: var(--m-control-affix-padding);
-}
-
 .m-inputgroup > .m-input,
 .m-inputgroup > .m-input-field,
 .m-inputgroup > .m-password-field,
@@ -718,16 +928,22 @@
 
 .m-inputgroup > .m-input,
 .m-inputgroup .m-input,
-.m-inputgroup .m-password__input,
-.m-inputgroup .m-inputnumber__input {
+.m-inputgroup .m-password,
+.m-inputgroup .m-inputnumber__input-wrap,
+.m-inputgroup .m-input-field__control--prefixed,
+.m-inputgroup .m-input-field__control--suffixed,
+.m-inputgroup .m-input-field__control--clearable {
     border-radius: 0;
     width: 100%;
 }
 
 .m-inputgroup > :first-child.m-input,
 .m-inputgroup > :first-child .m-input,
-.m-inputgroup > :first-child .m-password__input,
-.m-inputgroup > :first-child .m-inputnumber__input,
+.m-inputgroup > :first-child .m-password,
+.m-inputgroup > :first-child .m-inputnumber__input-wrap,
+.m-inputgroup > :first-child .m-input-field__control--prefixed,
+.m-inputgroup > :first-child .m-input-field__control--suffixed,
+.m-inputgroup > :first-child .m-input-field__control--clearable,
 .m-inputgroup > :first-child.m-inputgroup-addon {
     border-bottom-left-radius: var(--m-radius-control);
     border-top-left-radius: var(--m-radius-control);
@@ -735,8 +951,11 @@
 
 .m-inputgroup > :last-child.m-input,
 .m-inputgroup > :last-child .m-input,
-.m-inputgroup > :last-child .m-password__input,
-.m-inputgroup > :last-child .m-inputnumber__input,
+.m-inputgroup > :last-child .m-password,
+.m-inputgroup > :last-child .m-inputnumber__input-wrap,
+.m-inputgroup > :last-child .m-input-field__control--prefixed,
+.m-inputgroup > :last-child .m-input-field__control--suffixed,
+.m-inputgroup > :last-child .m-input-field__control--clearable,
 .m-inputgroup > :last-child.m-inputgroup-addon {
     border-bottom-right-radius: var(--m-radius-control);
     border-top-right-radius: var(--m-radius-control);
@@ -887,9 +1106,6 @@
 }
 
 /* Shared Naive-like hover/focus for remaining form triggers */
-.m-inputnumber__input:hover:not(:disabled):not(:focus),
-.m-password__input:hover:not(:disabled):not(:focus),
-.m-datepicker__input:hover:not(:disabled):not(:focus),
 .m-inputotp__input:hover:not(:disabled):not(:focus),
 .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
 .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +1116,6 @@
     border-color: var(--m-color-primary-hover);
 }
 
-.m-inputnumber__input:focus-visible,
-.m-password__input:focus-visible,
-.m-datepicker__input:focus-visible,
 .m-inputotp__input:focus-visible,
 .m-cascadeselect__trigger:focus-visible,
 .m-treeselect__trigger:focus-visible,
@@ -919,9 +1132,6 @@
     outline: none;
 }
 
-.m-inputnumber--invalid .m-inputnumber__input:focus-visible,
-.m-password--invalid .m-password__input:focus-visible,
-.m-datepicker--invalid .m-datepicker__input:focus-visible,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {

package/dist/layout/index.js

@@ -1,8 +1,8 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
-import { t as n } from "../Scrollbar-BYnCO8fv.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.js";
+import { t as n } from "../Scrollbar-DTeJ8P5b.js";
 import { r, t as i } from "../responsive-DA5bxylA.js";
-import { n as a } from "../locale-B36KH7c3.js";
+import { n as a } from "../locale-Bzm2nbEp.js";
 import "./style.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, inject as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, openBlock as _, provide as v, ref as y, renderSlot as b, toValue as x, unref as S, useAttrs as C, watch as w, withCtx as T } from "vue";
 //#region src/components/Layout/context.ts
@@ -199,10 +199,11 @@ function M(e, t) {
 }
 function N(e) {
 	return o(() => {
-		let t = x(e), n = {
-			padding: M(t.padding, "var(--m-layout-padding, var(--m-space-4))"),
-			borderRadius: M(t.radius, "var(--m-layout-radius, 0)")
-		};
+		let t = x(e), n = { borderRadius: M(t.radius, "var(--m-layout-radius, 0)") };
+		if (t.padding != null) {
+			let e = r(t.padding);
+			e && (n.padding = e);
+		} else t.applyDefaultPadding !== !1 && (n.padding = "var(--m-layout-padding, var(--m-space-4))");
 		if (t.heightFallback != null) n.height = M(t.height, t.heightFallback);
 		else if (t.height != null) {
 			let e = r(t.height);
@@ -226,36 +227,24 @@ var P = /* @__PURE__ */ f({
 			type: Boolean,
 			default: !1
 		},
-		position: { default: "static" },
-		contentClass: {},
-		contentStyle: {}
+		position: { default: "static" }
 	},
-	emits: ["scroll"],
-	setup(t, { expose: n, emit: r }) {
-		let i = t, a = r, s = C(), { rootAttrs: c } = e(s, () => i.pt), u = y(), f = N(() => ({
-			height: i.height,
-			padding: i.padding,
-			radius: i.radius
-		})), p = o(() => [
+	setup(t) {
+		let n = t, r = C(), { rootAttrs: i } = e(r, () => n.pt), a = N(() => ({
+			height: n.height,
+			padding: n.padding,
+			radius: n.radius,
+			applyDefaultPadding: !1
+		})), s = o(() => [
 			"m-layout",
 			"m-layout-content",
-			`m-layout--${i.position}-positioned`,
-			{ "m-layout--embedded": i.embedded }
-		]), h = o(() => ["m-layout__scroll", i.contentClass]), g = o(() => i.contentStyle);
-		return n({ scrollTo: ((...e) => u.value?.scrollTo(...e)) }), (e, t) => (_(), l("main", m(S(c), {
-			class: p.value,
-			style: S(f)
-		}), [d(A, {
-			ref_key: "scrollRegionRef",
-			ref: u,
-			"scrollbar-root-class": "m-layout__scrollbar",
-			"scroll-class": h.value,
-			"scroll-style": g.value,
-			onScroll: t[0] ||= (e) => a("scroll", e)
-		}, {
-			default: T(() => [b(e.$slots, "default")]),
-			_: 3
-		}, 8, ["scroll-class", "scroll-style"])], 16));
+			`m-layout--${n.position}-positioned`,
+			{ "m-layout--embedded": n.embedded }
+		]);
+		return (e, t) => (_(), l("main", m(S(i), {
+			class: s.value,
+			style: S(a)
+		}), [b(e.$slots, "default")], 16));
 	}
 }), F = /* @__PURE__ */ f({
 	name: "MLayoutFooter",
@@ -279,7 +268,7 @@ var P = /* @__PURE__ */ f({
 	setup(t) {
 		let n = t, r = C(), { rootAttrs: i } = e(r, () => n.pt), a = N(() => ({
 			height: n.height,
-			heightFallback: "var(--m-layout-footer-height, 3rem)",
+			heightFallback: "var(--m-layout-footer-height)",
 			padding: n.padding,
 			radius: n.radius
 		})), s = o(() => [
@@ -317,7 +306,7 @@ var P = /* @__PURE__ */ f({
 	setup(t) {
 		let n = t, r = C(), { rootAttrs: i } = e(r, () => n.pt), a = N(() => ({
 			height: n.height,
-			heightFallback: "var(--m-layout-header-height, 3.5rem)",
+			heightFallback: "var(--m-layout-header-height)",
 			padding: n.padding,
 			radius: n.radius
 		})), s = o(() => [
@@ -407,76 +396,64 @@ var z = ["aria-expanded", "aria-label"], B = {
 		triggerClass: {},
 		triggerStyle: {},
 		collapsedTriggerClass: {},
-		collapsedTriggerStyle: {},
-		contentClass: {},
-		contentStyle: {}
+		collapsedTriggerStyle: {}
 	},
 	emits: [
 		"update:collapsed",
 		"collapse",
 		"expand",
 		"after-enter",
-		"after-leave",
-		"scroll"
+		"after-leave"
 	],
-	setup(n, { expose: s, emit: f }) {
-		let v = n, x = f, w = C(), { rootAttrs: D } = e(w, () => v.pt), O = a(), k = p(E, null), j = y(), { mergedCollapsed: M, toggle: N } = L(v, x), P = o(() => k?.siderPlacement ?? "left"), F = o(() => r(v.width)), I = o(() => r(v.collapsedWidth)), U = o(() => F.value ?? "var(--m-layout-sider-width)"), W = o(() => I.value ?? "var(--m-layout-sider-collapsed-width)"), G = o(() => M.value ? W.value : U.value), K = o(() => R(v.showTrigger)), q = o(() => !M.value || v.showCollapsedContent), J = o(() => [
+	setup(n, { emit: s }) {
+		let f = n, v = s, y = C(), { rootAttrs: x } = e(y, () => f.pt), w = a(), T = p(E, null), { mergedCollapsed: D, toggle: O } = L(f, v), k = o(() => T?.siderPlacement ?? "left"), A = o(() => r(f.width)), j = o(() => r(f.collapsedWidth)), M = o(() => A.value ?? "var(--m-layout-sider-width)"), N = o(() => j.value ?? "var(--m-layout-sider-collapsed-width)"), P = o(() => D.value ? N.value : M.value), F = o(() => R(f.showTrigger)), I = o(() => !D.value || f.showCollapsedContent), U = o(() => [
 			"m-layout-sider",
-			`m-layout-sider--${v.position}-positioned`,
-			`m-layout-sider--${P.value}-placement`,
-			`m-layout-sider--collapse-${v.collapseMode}`,
+			`m-layout-sider--${f.position}-positioned`,
+			`m-layout-sider--${k.value}-placement`,
+			`m-layout-sider--collapse-${f.collapseMode}`,
 			{
-				"m-layout-sider--bordered": v.bordered,
-				"m-layout-sider--inverted": v.inverted,
-				"m-layout-sider--collapsed": M.value,
-				"m-layout-sider--show-content": q.value
+				"m-layout-sider--bordered": f.bordered,
+				"m-layout-sider--inverted": f.inverted,
+				"m-layout-sider--collapsed": D.value,
+				"m-layout-sider--show-content": I.value
 			}
-		]), Y = o(() => {
-			let e = v.collapseMode === "width", t = {
+		]), W = o(() => {
+			let e = f.collapseMode === "width", t = {
 				minWidth: "0",
-				borderRadius: v.radius == null ? "var(--m-layout-radius, 0)" : r(v.radius),
-				width: e ? G.value : U.value,
-				maxWidth: G.value
+				borderRadius: f.radius == null ? "var(--m-layout-radius, 0)" : r(f.radius),
+				width: e ? P.value : M.value,
+				maxWidth: P.value
 			};
-			return F.value && !i(F.value, "--m-layout-sider-width") && (t["--m-layout-sider-width"] = F.value), I.value && !i(I.value, "--m-layout-sider-collapsed-width") && (t["--m-layout-sider-collapsed-width"] = I.value), t;
-		}), X = o(() => v.padding == null ? "var(--m-layout-padding, var(--m-space-4))" : r(v.padding)), Z = o(() => {
-			let e = { padding: X.value };
-			return v.contentStyle == null ? e : [e, v.contentStyle];
-		}), Q = o(() => ["m-layout-sider__scroll", v.contentClass]), $ = o(() => M.value ? v.collapsedTriggerClass : v.triggerClass), ee = o(() => M.value ? v.collapsedTriggerStyle : v.triggerStyle);
-		function te(e) {
-			e.propertyName === "max-width" && (M.value ? x("after-leave") : x("after-enter"));
+			if (f.padding != null) {
+				let e = r(f.padding);
+				e && (t.padding = e);
+			}
+			return A.value && !i(A.value, "--m-layout-sider-width") && (t["--m-layout-sider-width"] = A.value), j.value && !i(j.value, "--m-layout-sider-collapsed-width") && (t["--m-layout-sider-collapsed-width"] = j.value), t;
+		}), G = o(() => D.value ? f.collapsedTriggerClass : f.triggerClass), K = o(() => D.value ? f.collapsedTriggerStyle : f.triggerStyle);
+		function q(e) {
+			f.collapseMode === "width" && e.propertyName === "max-width" && e.target === e.currentTarget && (D.value ? v("after-leave") : v("after-enter"));
 		}
-		return s({ scrollTo: ((...e) => j.value?.scrollTo(...e)) }), (e, r) => (_(), l("aside", m(S(D), {
-			class: J.value,
-			style: Y.value,
-			onTransitionend: te
+		return (e, r) => (_(), l("aside", m(S(x), {
+			class: U.value,
+			style: W.value,
+			onTransitionend: q
 		}), [
-			d(A, {
-				ref_key: "scrollRegionRef",
-				ref: j,
-				"scrollbar-root-class": "m-layout-sider__scrollbar",
-				"scroll-class": Q.value,
-				"scroll-style": Z.value,
-				onScroll: r[0] ||= (e) => x("scroll", e)
-			}, {
-				default: T(() => [b(e.$slots, "default")]),
-				_: 3
-			}, 8, ["scroll-class", "scroll-style"]),
-			K.value ? (_(), l("button", {
+			b(e.$slots, "default"),
+			F.value ? (_(), l("button", {
 				key: 0,
 				type: "button",
-				class: h(["m-layout-sider__trigger", [$.value, {
-					"m-layout-sider__trigger--bar": K.value === "bar",
-					"m-layout-sider__trigger--arrow-circle": K.value === "arrow-circle"
+				class: h(["m-layout-sider__trigger", [G.value, {
+					"m-layout-sider__trigger--bar": F.value === "bar",
+					"m-layout-sider__trigger--arrow-circle": F.value === "arrow-circle"
 				}]]),
-				style: g(ee.value),
-				"aria-expanded": !S(M),
-				"aria-label": S(M) ? S(O).expand : S(O).collapse,
-				onClick: r[1] ||= (...e) => S(N) && S(N)(...e)
-			}, [K.value === "arrow-circle" ? (_(), l("span", B, [d(t, {
+				style: g(K.value),
+				"aria-expanded": !S(D),
+				"aria-label": S(D) ? S(w).expand : S(w).collapse,
+				onClick: r[0] ||= (...e) => S(O) && S(O)(...e)
+			}, [F.value === "arrow-circle" ? (_(), l("span", B, [d(t, {
 				name: "chevron-right",
 				size: "sm"
-			})])) : (_(), l("span", V, [...r[2] ||= [u("i", { class: "m-layout-sider__bar-top" }, null, -1), u("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, z)) : c("", !0),
+			})])) : (_(), l("span", V, [...r[1] ||= [u("i", { class: "m-layout-sider__bar-top" }, null, -1), u("i", { class: "m-layout-sider__bar-bottom" }, null, -1)]]))], 14, z)) : c("", !0),
 			n.bordered ? (_(), l("div", H)) : c("", !0)
 		], 16));
 	}