morya-ui 0.3.2 → 0.3.3

package/dist/menu/style.css

@@ -1221,45 +1221,47 @@
     z-index: var(--m-z-popper);
 }
 
+/*
+ * Placement uses the independent `translate` property so scale-fade's
+ * `transform` (opacity + scale/slide) can compose without fighting layout.
+ */
 .m-popover__content--top {
     bottom: calc(100% + var(--m-space-2));
     left: 50%;
-    transform: translateX(-50%);
     transform-origin: bottom center;
+    translate: -50% 0;
 }
 
 .m-popover__content--bottom {
     left: 50%;
     top: calc(100% + var(--m-space-2));
-    transform: translateX(-50%);
     transform-origin: top center;
+    translate: -50% 0;
 }
 
 .m-popover__content--left {
     right: calc(100% + var(--m-space-2));
     top: 50%;
-    transform: translateY(-50%);
     transform-origin: right center;
+    translate: 0 -50%;
 }
 
 .m-popover__content--right {
     left: calc(100% + var(--m-space-2));
     top: 50%;
-    transform: translateY(-50%);
     transform-origin: left center;
+    translate: 0 -50%;
 }
 
 .m-popover__content--right-start {
     left: calc(100% + var(--m-space-2));
     top: 0;
-    transform: none;
     transform-origin: top left;
 }
 
 .m-popover__content--left-start {
     right: calc(100% + var(--m-space-2));
     top: 0;
-    transform: none;
     transform-origin: top right;
 }
 
@@ -1282,75 +1284,12 @@
     position: fixed;
     right: auto;
     top: auto;
-    transform: none;
+    /* Reset non-teleport placement translates; inline `translate` from
+       computeFloatingOverlayStyle provides the teleported alignment. */
+    translate: none;
     z-index: var(--m-z-tooltip);
 }
 
-.m-popover-enter-active {
-    transition:
-        opacity var(--m-motion-enter) var(--m-motion-ease),
-        transform var(--m-motion-enter) var(--m-motion-ease);
-}
-
-.m-popover-leave-active {
-    transition:
-        opacity var(--m-motion-exit) var(--m-motion-ease),
-        transform var(--m-motion-exit) var(--m-motion-ease);
-}
-
-.m-popover-enter-from,
-.m-popover-leave-to {
-    opacity: 0;
-}
-
-.m-popover__content--teleported.m-popover-enter-from,
-.m-popover__content--teleported.m-popover-leave-to {
-    transform: scale(0.96);
-}
-
-.m-popover-enter-from:not(.m-popover__content--teleported),
-.m-popover-leave-to:not(.m-popover__content--teleported) {
-    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
-}
-
-.m-popover__content--top.m-popover-enter-from,
-.m-popover__content--top.m-popover-leave-to {
-    transform: translate(-50%, calc(-100% - var(--m-motion-distance))) scale(0.96);
-}
-
-.m-popover__content--bottom.m-popover-enter-from,
-.m-popover__content--bottom.m-popover-leave-to,
-.m-popover__content--bottom-start.m-popover-enter-from,
-.m-popover__content--bottom-start.m-popover-leave-to,
-.m-popover__content--bottom-end.m-popover-enter-from,
-.m-popover__content--bottom-end.m-popover-leave-to {
-    transform: translateY(var(--m-motion-distance)) scale(0.96);
-}
-
-.m-popover__content--left.m-popover-enter-from,
-.m-popover__content--left.m-popover-leave-to {
-    transform: translate(calc(-100% - var(--m-motion-distance)), -50%) scale(0.96);
-}
-
-.m-popover__content--right.m-popover-enter-from,
-.m-popover__content--right.m-popover-leave-to {
-    transform: translate(var(--m-motion-distance), -50%) scale(0.96);
-}
-
-[data-m-motion="reduced"] .m-popover-enter-active,
-[data-m-motion="reduced"] .m-popover-leave-active,
-[data-m-motion="none"] .m-popover-enter-active,
-[data-m-motion="none"] .m-popover-leave-active {
-    transition: none;
-}
-
-[data-m-motion="reduced"] .m-popover-enter-from,
-[data-m-motion="reduced"] .m-popover-leave-to,
-[data-m-motion="none"] .m-popover-enter-from,
-[data-m-motion="none"] .m-popover-leave-to {
-    transform: none;
-}
-
 .m-scrollbar {
     --m-scrollbar-track-size: 6px;
     --m-scrollbar-inset: 0.125rem;
@@ -2040,14 +1979,14 @@ a.m-menu__item-content--selected:visited {
     padding: 0;
 }
 
-.m-popover__content--right-start:has(.m-menu--flyout).m-popover-enter-from,
-.m-popover__content--right-start:has(.m-menu--flyout).m-popover-leave-to {
+.m-popover__content--right-start:has(.m-menu--flyout).m-scale-fade-enter-from,
+.m-popover__content--right-start:has(.m-menu--flyout).m-scale-fade-leave-to {
     opacity: 0;
     transform: translateX(calc(var(--m-motion-distance) * -0.5)) scale(0.98);
 }
 
-.m-popover__content--bottom-start:has(.m-menu--flyout).m-popover-enter-from,
-.m-popover__content--bottom-start:has(.m-menu--flyout).m-popover-leave-to {
+.m-popover__content--bottom-start:has(.m-menu--flyout).m-scale-fade-enter-from,
+.m-popover__content--bottom-start:has(.m-menu--flyout).m-scale-fade-leave-to {
     opacity: 0;
     transform: translateY(calc(var(--m-motion-distance) * -0.35)) scale(0.98);
 }

package/dist/menubar/index.js

@@ -1,9 +1,9 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { t as n } from "../useMotionTransition-95Y79FoL.js";
 import { n as ee, t as te } from "../overlay-oR-5MDuE.js";
-import { t as ne } from "../overlayPlacement-Cd20JTD_.js";
-import { t as re } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as ne } from "../overlayPlacement-qwEJPVS4.js";
+import { t as re } from "../useFloatingViewportSync-wLLKIGUA.js";
 import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as ie } from "../Scrollbar-DTeJ8P5b.js";
 import { t as ae } from "../icon-COrt_N8A.js";

package/dist/message/index.js

@@ -1,7 +1,7 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../types-DGuu4Eg4.js";
 import { t as n } from "../Icon-od9Ob-Ay.js";
-import { t as r } from "../useMotionTransition-Bxnnb_9u.js";
+import { t as r } from "../useMotionTransition-95Y79FoL.js";
 import { n as i } from "../overlay-oR-5MDuE.js";
 import { r as a, t as o } from "../content-h8POj44-.js";
 import { n as s } from "../overlayHost-78CGtMgR.js";

package/dist/{overlayPlacement-Cd20JTD_.js → overlayPlacement-qwEJPVS4.js}

@@ -64,25 +64,25 @@ function o(r, o, s = {}) {
 		case "top": return {
 			left: v,
 			top: `${r.top - c}px`,
-			transform: "translate(-50%, -100%)",
+			translate: "-50% -100%",
 			..._
 		};
 		case "bottom": return {
 			left: v,
 			top: `${r.bottom + c}px`,
-			transform: "translateX(-50%)",
+			translate: "-50% 0",
 			..._
 		};
 		case "left": return {
 			left: v,
 			top: `${h}px`,
-			transform: "translate(-100%, -50%)",
+			translate: "-100% -50%",
 			..._
 		};
 		case "right": return {
 			left: v,
 			top: `${h}px`,
-			transform: "translateY(-50%)",
+			translate: "0 -50%",
 			..._
 		};
 		case "right-start": return {
@@ -93,13 +93,13 @@ function o(r, o, s = {}) {
 		case "left-start": return {
 			left: v,
 			top: `${r.top}px`,
-			transform: "translateX(-100%)",
+			translate: "-100% 0",
 			..._
 		};
 		case "bottom-end": return {
 			left: v,
 			top: `${r.bottom + c}px`,
-			transform: "translateX(-100%)",
+			translate: "-100% 0",
 			..._
 		};
 		case "bottom-start": return {
@@ -110,13 +110,13 @@ function o(r, o, s = {}) {
 		case "top-start": return {
 			left: v,
 			top: `${r.top - c}px`,
-			transform: "translateY(-100%)",
+			translate: "0 -100%",
 			..._
 		};
 		case "top-end": return {
 			left: v,
 			top: `${r.top - c}px`,
-			transform: "translate(-100%, -100%)",
+			translate: "-100% -100%",
 			..._
 		};
 		default: return {

package/dist/page/index.js

@@ -1,6 +1,6 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../Button-dMqRmoYa.js";
+import { t as n } from "../Button-gBiRj7wz.js";
 import { t as r } from "../Card-B1CB9Trm.js";
 import { t as i } from "../Empty-C5tndBOm.js";
 import { r as a } from "../responsive-DA5bxylA.js";

package/dist/page/style.css

@@ -1375,7 +1375,30 @@
     );
 }
 
-.m-button--secondary.m-button--outlined {
+/* Idle matches outlined hover; hover/active deepen the tint. */
+.m-button--plain {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 10%,
+        transparent
+    );
+    --m-button-fg: var(--m-button-border);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-border);
+    --m-button-hover-border: var(--m-button-border);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 22%,
+        transparent
+    );
+}
+
+.m-button--secondary.m-button--outlined,
+.m-button--secondary.m-button--plain {
     --m-button-border: var(--m-color-border);
     --m-button-fg: var(--m-color-text);
     --m-button-hover-fg: var(--m-color-text);
@@ -1386,13 +1409,16 @@
     --m-button-bg: transparent;
     --m-button-border: transparent;
     --m-button-fg: var(--m-color-primary);
+    --m-button-hover-fg: var(--m-color-primary);
+    --m-button-hover-border: transparent;
+}
+
+.m-button--text {
     --m-button-hover-bg: color-mix(
         in srgb,
         var(--m-color-primary) 10%,
         transparent
     );
-    --m-button-hover-fg: var(--m-color-primary);
-    --m-button-hover-border: transparent;
     --m-button-active-bg: color-mix(
         in srgb,
         var(--m-color-primary) 16%,
@@ -1400,8 +1426,24 @@
     );
 }
 
-.m-button--secondary.m-button--text,
-.m-button--secondary.m-button--link {
+.m-button--link {
+    --m-button-bg: transparent;
+    --m-button-hover-bg: transparent;
+    --m-button-active-bg: transparent;
+    height: auto;
+    min-height: 0;
+    padding: 0;
+}
+
+.m-button--link.m-button--link-underline:hover:not(:disabled) {
+    text-decoration: underline;
+}
+
+.m-button--link:not(.m-button--link-underline):hover:not(:disabled) {
+    opacity: 0.8;
+}
+
+.m-button--secondary.m-button--text {
     --m-button-fg: var(--m-color-text-muted);
     --m-button-hover-bg: color-mix(
         in srgb,
@@ -1411,8 +1453,12 @@
     --m-button-hover-fg: var(--m-color-text);
 }
 
+.m-button--secondary.m-button--link {
+    --m-button-fg: var(--m-color-text-muted);
+    --m-button-hover-fg: var(--m-color-text);
+}
+
 .m-button--success.m-button--text,
-.m-button--success.m-button--link,
 .m-button--success.m-button--outlined {
     --m-button-fg: var(--m-color-success);
     --m-button-border: var(--m-color-success);
@@ -1425,8 +1471,12 @@
     --m-button-hover-border: var(--m-color-success);
 }
 
+.m-button--success.m-button--link {
+    --m-button-fg: var(--m-color-success);
+    --m-button-hover-fg: var(--m-color-success);
+}
+
 .m-button--info.m-button--text,
-.m-button--info.m-button--link,
 .m-button--info.m-button--outlined {
     --m-button-fg: var(--m-color-info);
     --m-button-border: var(--m-color-info);
@@ -1439,8 +1489,12 @@
     --m-button-hover-border: var(--m-color-info);
 }
 
+.m-button--info.m-button--link {
+    --m-button-fg: var(--m-color-info);
+    --m-button-hover-fg: var(--m-color-info);
+}
+
 .m-button--warn.m-button--text,
-.m-button--warn.m-button--link,
 .m-button--warn.m-button--outlined {
     --m-button-fg: var(--m-color-warn);
     --m-button-border: var(--m-color-warn);
@@ -1453,8 +1507,12 @@
     --m-button-hover-border: var(--m-color-warn);
 }
 
+.m-button--warn.m-button--link {
+    --m-button-fg: var(--m-color-warn);
+    --m-button-hover-fg: var(--m-color-warn);
+}
+
 .m-button--help.m-button--text,
-.m-button--help.m-button--link,
 .m-button--help.m-button--outlined {
     --m-button-fg: var(--m-color-help);
     --m-button-border: var(--m-color-help);
@@ -1467,8 +1525,12 @@
     --m-button-hover-border: var(--m-color-help);
 }
 
+.m-button--help.m-button--link {
+    --m-button-fg: var(--m-color-help);
+    --m-button-hover-fg: var(--m-color-help);
+}
+
 .m-button--danger.m-button--text,
-.m-button--danger.m-button--link,
 .m-button--danger.m-button--outlined {
     --m-button-fg: var(--m-color-danger);
     --m-button-border: var(--m-color-danger);
@@ -1481,8 +1543,12 @@
     --m-button-hover-border: var(--m-color-danger);
 }
 
+.m-button--danger.m-button--link {
+    --m-button-fg: var(--m-color-danger);
+    --m-button-hover-fg: var(--m-color-danger);
+}
+
 .m-button--contrast.m-button--text,
-.m-button--contrast.m-button--link,
 .m-button--contrast.m-button--outlined {
     --m-button-fg: var(--m-color-contrast);
     --m-button-border: var(--m-color-contrast);
@@ -1495,9 +1561,14 @@
     --m-button-hover-border: var(--m-color-contrast);
 }
 
+.m-button--contrast.m-button--link {
+    --m-button-fg: var(--m-color-contrast);
+    --m-button-hover-fg: var(--m-color-contrast);
+}
+
 .m-button--plain.m-button--text,
-.m-button--plain.m-button--outlined,
-.m-button--plain.m-button--link {
+.m-button--plain.m-button--outlined {
+    --m-button-bg: transparent;
     --m-button-fg: var(--m-color-text-muted);
     --m-button-border: var(--m-color-border);
     --m-button-hover-bg: color-mix(
@@ -1507,69 +1578,178 @@
     );
     --m-button-hover-fg: var(--m-color-text);
     --m-button-hover-border: var(--m-color-border);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 18%,
+        transparent
+    );
 }
 
-.m-button--link {
-    height: auto;
-    min-height: 0;
-    padding: 0;
-}
-
-.m-button--link:hover:not(:disabled) {
-    text-decoration: underline;
+.m-button--plain.m-button--link {
+    --m-button-fg: var(--m-color-text-muted);
+    --m-button-hover-fg: var(--m-color-text);
 }
 
 .m-button--ghost {
-    --m-button-bg: transparent;
-    --m-button-fg: var(--m-button-border);
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-primary) 10%,
+        transparent
+    );
+    --m-button-border: transparent;
+    --m-button-fg: var(--m-color-primary);
     --m-button-hover-bg: color-mix(
         in srgb,
-        var(--m-button-border) 12%,
+        var(--m-color-primary) 16%,
         transparent
     );
-    --m-button-hover-fg: var(--m-button-border);
-    --m-button-hover-border: var(--m-button-border);
+    --m-button-hover-fg: var(--m-color-primary);
+    --m-button-hover-border: transparent;
     --m-button-active-bg: color-mix(
         in srgb,
-        var(--m-button-border) 18%,
+        var(--m-color-primary) 22%,
         transparent
     );
 }
 
 .m-button--secondary.m-button--ghost {
-    --m-button-border: var(--m-color-border);
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        transparent
+    );
     --m-button-fg: var(--m-color-text);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 18%,
+        transparent
+    );
     --m-button-hover-fg: var(--m-color-text);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 24%,
+        transparent
+    );
 }
 
 .m-button--success.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-success);
-    --m-button-border: var(--m-color-success);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-success);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 22%,
+        transparent
+    );
 }
 
 .m-button--info.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-info);
-    --m-button-border: var(--m-color-info);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-info);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 22%,
+        transparent
+    );
 }
 
 .m-button--warn.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-warn);
-    --m-button-border: var(--m-color-warn);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-warn);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 22%,
+        transparent
+    );
 }
 
 .m-button--help.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-help);
-    --m-button-border: var(--m-color-help);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-help);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 22%,
+        transparent
+    );
 }
 
 .m-button--danger.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-danger);
-    --m-button-border: var(--m-color-danger);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-danger);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 22%,
+        transparent
+    );
 }
 
 .m-button--contrast.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-contrast);
-    --m-button-border: var(--m-color-contrast);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-contrast);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 22%,
+        transparent
+    );
 }
 
 .m-button--quaternary {
@@ -1608,11 +1788,7 @@
     );
 }
 
-.m-button--custom.m-button--outlined,
-.m-button--custom.m-button--ghost,
-.m-button--custom.m-button--text,
-.m-button--custom.m-button--quaternary,
-.m-button--custom.m-button--link {
+.m-button--custom.m-button--outlined {
     --m-button-bg: transparent;
     --m-button-fg: var(--m-button-color);
     --m-button-border: var(--m-button-color);
@@ -1625,11 +1801,72 @@
     --m-button-hover-border: var(--m-button-color);
 }
 
+.m-button--custom.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 10%,
+        transparent
+    );
+    --m-button-fg: var(--m-button-color);
+    --m-button-border: transparent;
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: transparent;
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 22%,
+        transparent
+    );
+}
+
 .m-button--custom.m-button--text,
-.m-button--custom.m-button--quaternary,
+.m-button--custom.m-button--quaternary {
+    --m-button-bg: transparent;
+    --m-button-fg: var(--m-button-color);
+    --m-button-border: transparent;
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 12%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: transparent;
+}
+
+.m-button--custom.m-button--plain {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 10%,
+        transparent
+    );
+    --m-button-fg: var(--m-button-color);
+    --m-button-border: var(--m-button-color);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: var(--m-button-color);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 22%,
+        transparent
+    );
+}
+
 .m-button--custom.m-button--link {
+    --m-button-bg: transparent;
+    --m-button-fg: var(--m-button-color);
     --m-button-border: transparent;
+    --m-button-hover-bg: transparent;
+    --m-button-hover-fg: var(--m-button-color);
     --m-button-hover-border: transparent;
+    --m-button-active-bg: transparent;
 }
 
 .m-button-group {