morya-ui 0.2.1 → 0.2.2

package/dist/menu/style.css

@@ -1012,10 +1012,64 @@
     transform: translate(var(--m-motion-distance), -50%);
 }
 
+.m-tooltip {
+    display: inline-flex;
+    position: relative;
+}
+
+.m-tooltip__content {
+    background: var(--m-color-text);
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-surface);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-xs);
+    left: 50%;
+    line-height: 1.35;
+    padding: var(--m-space-2) var(--m-space-3);
+    pointer-events: none;
+    position: absolute;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    z-index: var(--m-z-popper);
+}
+
+.m-tooltip__content--top {
+    bottom: calc(100% + var(--m-space-2));
+}
+
+.m-tooltip__content--bottom {
+    top: calc(100% + var(--m-space-2));
+}
+
+.m-tooltip__content--left {
+    left: auto;
+    right: calc(100% + var(--m-space-2));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-tooltip__content--right {
+    left: calc(100% + var(--m-space-2));
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.m-tooltip__content--teleported {
+    bottom: auto;
+    left: auto;
+    position: fixed;
+    right: auto;
+    top: auto;
+    white-space: normal;
+    z-index: var(--m-z-tooltip);
+}
+
 /* —— Menu —— */
 .m-menu {
     --m-menu-indent: var(--m-space-3);
     --m-menu-root-indent: var(--m-space-4);
+    --m-menu-submenu-gap: var(--m-space-2);
+    --m-menu-submenu-inset: var(--m-space-2);
     --m-menu-item-radius: var(--m-radius-md);
     --m-menu-color: transparent;
     --m-menu-item-color-hover: color-mix(
@@ -1224,6 +1278,12 @@
     margin-top: 0.25rem;
 }
 
+.m-menu--collapsed .m-menu__item .m-tooltip,
+.m-menu--collapsed .m-menu__collapsed-popover .m-tooltip {
+    display: flex;
+    width: 100%;
+}
+
 .m-menu--collapsed .m-menu__item-content {
     align-items: center;
     display: flex;
@@ -1382,9 +1442,14 @@
     height: 1rem;
     justify-content: center;
     margin-inline-start: 0.25rem;
+    transition: transform var(--m-motion-fast) var(--m-motion-ease);
     width: 1rem;
 }
 
+.m-menu__arrow--expanded {
+    transform: rotate(90deg);
+}
+
 .m-menu__separator {
     background: var(--m-color-border);
     height: 1px;
@@ -1392,25 +1457,34 @@
 }
 
 .m-menu__submenu {
+    display: grid;
+    grid-template-rows: 1fr;
+}
+
+.m-menu__submenu-inner {
+    min-height: 0;
     overflow: hidden;
+    padding-block-start: var(--m-menu-submenu-gap);
+    padding-inline-start: var(--m-menu-submenu-inset);
 }
 
 .m-menu-expand-enter-active,
 .m-menu-expand-leave-active {
+    overflow: hidden;
     transition:
-        max-height var(--m-motion-normal) var(--m-motion-ease),
+        grid-template-rows var(--m-motion-normal) var(--m-motion-ease),
         opacity var(--m-motion-normal) var(--m-motion-ease);
 }
 
 .m-menu-expand-enter-from,
 .m-menu-expand-leave-to {
-    max-height: 0;
+    grid-template-rows: 0fr;
     opacity: 0;
 }
 
 .m-menu-expand-enter-to,
 .m-menu-expand-leave-from {
-    max-height: 30rem;
+    grid-template-rows: 1fr;
     opacity: 1;
 }
 

package/dist/menu/style.js

@@ -2,4 +2,5 @@ import '../theme/styles.css'
 import '../styles/base.css'
 import '../components/Icon/styles.css'
 import '../components/Popover/styles.css'
+import '../components/Tooltip/styles.css'
 import '../components/Menu/styles.css'