morya-ui 0.3.0 → 0.3.1

package/dist/table/style.css

@@ -529,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 {
@@ -1282,6 +1286,401 @@
     animation: none;
 }
 
+/* —— Feedback: Loading —— */
+
+.m-loading {
+    position: relative;
+}
+
+.m-loading--fullscreen {
+    inset: 0;
+    position: fixed;
+    z-index: var(--m-loading-z-index, calc(var(--m-z-base) + 200));
+}
+
+.m-loading__content {
+    position: relative;
+}
+
+.m-loading--active .m-loading__content {
+    pointer-events: none;
+    user-select: none;
+}
+
+.m-loading-parent--relative {
+    position: relative;
+}
+
+.m-loading-mask {
+    --m-loading-z-index: calc(var(--m-z-base) + 200);
+    --m-loading-mask-bg: color-mix(in srgb, var(--m-color-surface) 80%, transparent);
+    align-items: center;
+    background: var(--m-loading-mask-bg);
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    position: absolute;
+    z-index: 10;
+}
+
+.m-loading-mask--fullscreen,
+.m-loading-mask--body {
+    position: fixed;
+    z-index: var(--m-loading-z-index);
+}
+
+.m-loading-mask--body {
+    inset: auto;
+}
+
+.m-loading-enter-active {
+    transition: opacity var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-loading-leave-active {
+    transition: opacity var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-loading-enter-from,
+.m-loading-leave-to {
+    opacity: 0;
+}
+
+.m-loading-indicator {
+    --m-loading-c1: var(--m-color-primary);
+    --m-loading-c2: color-mix(in srgb, var(--m-color-primary) 62%, white);
+    --m-loading-c3: var(--m-color-success);
+    --m-loading-c4: var(--m-color-warning);
+    --m-loading-c5: var(--m-color-danger);
+    --m-loading-c6: var(--m-color-text-muted);
+    --m-loading-spin: var(--m-motion-spin);
+    --m-loading-aurora-glow: var(--m-motion-loading-aurora);
+    --m-loading-bounce: var(--m-motion-loading-bounce);
+    --m-loading-wave: var(--m-motion-spin-medium);
+    --m-loading-pulse: var(--m-motion-loading-pulse);
+    --m-loading-stardust: var(--m-motion-loading-stardust);
+    --m-loading-circular-rotate: var(--m-motion-loading-circular-rotate);
+    --m-loading-circular-dash: var(--m-motion-spin-dash);
+    --m-loading-scale: 1;
+
+    align-items: center;
+    display: inline-flex;
+    flex-direction: column;
+    font-family: var(--m-font-sans);
+    gap: var(--m-space-3);
+    justify-content: center;
+}
+
+.m-loading-indicator__graphic {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    transform: scale(var(--m-loading-scale));
+}
+
+.m-loading-indicator__tip {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-sm);
+    line-height: 1;
+    margin: 0;
+}
+
+.m-loading-indicator--small {
+    --m-loading-scale: 0.85;
+}
+
+.m-loading-indicator--large {
+    --m-loading-scale: 1.15;
+}
+
+.m-loading-aurora,
+.m-loading-pulse,
+.m-loading-stardust {
+    height: 3.75rem;
+    position: relative;
+    width: 3.75rem;
+}
+
+.m-loading-aurora__ring {
+    animation: m-loading-spin var(--m-loading-spin) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border: 4px solid transparent;
+    border-bottom-color: var(--m-loading-c2);
+    border-left-color: var(--m-loading-c3);
+    border-radius: 50%;
+    border-right-color: var(--m-loading-c5);
+    border-top-color: var(--m-loading-c1);
+    box-sizing: border-box;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: 2;
+}
+
+.m-loading-aurora__glow {
+    animation: m-loading-spin var(--m-loading-aurora-glow) linear infinite reverse;
+    /* Soft radial layers instead of animated blur (≤8px / no continuous filter). */
+    background:
+        radial-gradient(
+            circle at 30% 30%,
+            color-mix(in srgb, var(--m-loading-c1) 55%, transparent),
+            transparent 62%
+        ),
+        radial-gradient(
+            circle at 70% 65%,
+            color-mix(in srgb, var(--m-loading-c5) 45%, transparent),
+            transparent 58%
+        ),
+        radial-gradient(
+            circle at 50% 50%,
+            color-mix(in srgb, var(--m-loading-c2) 35%, transparent),
+            transparent 70%
+        );
+    border-radius: 50%;
+    inset: -10px;
+    opacity: 0.55;
+    position: absolute;
+    z-index: 1;
+}
+
+.m-loading-bounce {
+    align-items: flex-end;
+    display: flex;
+    gap: var(--m-space-3);
+    height: 3.125rem;
+}
+
+.m-loading-bounce__ball {
+    animation: m-loading-bounce var(--m-loading-bounce) cubic-bezier(0.34, 1.2, 0.64, 1) infinite alternate;
+    background: var(--m-loading-c1);
+    border-radius: 50%;
+    display: block;
+    height: 1rem;
+    width: 1rem;
+}
+
+.m-loading-bounce__ball:nth-child(1) {
+    animation-delay: 0s;
+    background: var(--m-loading-c5);
+}
+
+.m-loading-bounce__ball:nth-child(2) {
+    animation-delay: 0.15s;
+    background: var(--m-loading-c2);
+}
+
+.m-loading-bounce__ball:nth-child(3) {
+    animation-delay: 0.3s;
+    background: var(--m-loading-c6);
+}
+
+.m-loading-wave {
+    align-items: center;
+    display: flex;
+    gap: var(--m-space-1);
+    height: 3.125rem;
+}
+
+.m-loading-wave__bar {
+    animation: m-loading-wave var(--m-loading-wave) ease-in-out infinite alternate;
+    background: var(--m-loading-c1);
+    border-radius: 0.375rem;
+    display: block;
+    height: 2.875rem;
+    transform-origin: center center;
+    width: 0.5rem;
+}
+
+.m-loading-wave__bar:nth-child(1) {
+    animation-delay: 0s;
+    background: var(--m-loading-c1);
+}
+
+.m-loading-wave__bar:nth-child(2) {
+    animation-delay: 0.09s;
+    background: var(--m-loading-c5);
+}
+
+.m-loading-wave__bar:nth-child(3) {
+    animation-delay: 0.18s;
+    background: var(--m-loading-c2);
+}
+
+.m-loading-wave__bar:nth-child(4) {
+    animation-delay: 0.27s;
+    background: var(--m-loading-c3);
+}
+
+.m-loading-wave__bar:nth-child(5) {
+    animation-delay: 0.36s;
+    background: var(--m-loading-c6);
+}
+
+.m-loading-pulse__ring {
+    animation: m-loading-pulse var(--m-loading-pulse) ease-out infinite;
+    border: 3px solid var(--m-loading-c2);
+    border-radius: 50%;
+    box-sizing: border-box;
+    inset: 0;
+    position: absolute;
+}
+
+.m-loading-pulse__ring:nth-child(1) {
+    animation-delay: 0s;
+    border-color: var(--m-loading-c1);
+}
+
+.m-loading-pulse__ring:nth-child(2) {
+    animation-delay: 0.45s;
+    border-color: var(--m-loading-c5);
+}
+
+.m-loading-pulse__ring:nth-child(3) {
+    animation-delay: 0.9s;
+    border-color: var(--m-loading-c2);
+}
+
+.m-loading-pulse__ring:nth-child(4) {
+    animation-delay: 1.35s;
+    border-color: var(--m-loading-c3);
+}
+
+.m-loading-stardust__dot {
+    --i: 0;
+    animation: m-loading-stardust var(--m-loading-stardust) ease-in-out infinite;
+    background: var(--m-loading-c1);
+    border-radius: 50%;
+    height: 0.5rem;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateX(22px);
+    width: 0.5rem;
+}
+
+.m-loading-stardust__dot:nth-child(1) { animation-delay: 0s; background: var(--m-loading-c1); }
+.m-loading-stardust__dot:nth-child(2) { animation-delay: 0.08s; background: var(--m-loading-c5); }
+.m-loading-stardust__dot:nth-child(3) { animation-delay: 0.16s; background: var(--m-loading-c4); }
+.m-loading-stardust__dot:nth-child(4) { animation-delay: 0.24s; background: var(--m-loading-c2); }
+.m-loading-stardust__dot:nth-child(5) { animation-delay: 0.32s; background: var(--m-loading-c3); }
+.m-loading-stardust__dot:nth-child(6) { animation-delay: 0.4s; background: var(--m-loading-c6); }
+.m-loading-stardust__dot:nth-child(7) { animation-delay: 0.48s; background: color-mix(in srgb, var(--m-loading-c1) 55%, white); }
+.m-loading-stardust__dot:nth-child(8) { animation-delay: 0.56s; background: var(--m-loading-c2); }
+
+.m-loading-circular {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+}
+
+.m-loading-circular__svg {
+    animation: m-loading-circular-rotate var(--m-loading-circular-rotate) linear infinite;
+    display: inline-block;
+    height: 2.625rem;
+    width: 2.625rem;
+}
+
+.m-loading-circular__path {
+    animation: m-loading-circular-dash var(--m-loading-circular-dash) ease-in-out infinite;
+    fill: none;
+    stroke: var(--m-loading-c1);
+    stroke-linecap: round;
+    stroke-width: 2;
+}
+
+@keyframes m-loading-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes m-loading-bounce {
+    from { transform: translateY(0) scale(1); }
+    to { transform: translateY(-34px) scale(1.1); }
+}
+
+@keyframes m-loading-wave {
+    from { transform: scaleY(0.26); }
+    to { transform: scaleY(1); }
+}
+
+@keyframes m-loading-pulse {
+    from { opacity: 1; transform: scale(0.15); }
+    to { opacity: 0; transform: scale(1.6); }
+}
+
+@keyframes m-loading-stardust {
+    0%,
+    100% {
+        opacity: 0.2;
+        transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateX(22px) scale(0.3);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg + 180deg)) translateX(28px) scale(1.2);
+    }
+}
+
+@keyframes m-loading-circular-rotate {
+    to { transform: rotate(360deg); }
+}
+
+@keyframes m-loading-circular-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -40px;
+    }
+
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -120px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html:not([data-m-ignore-reduced-motion]) .m-loading-aurora__ring,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-aurora__glow,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-bounce__ball,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-wave__bar,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-pulse__ring,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-stardust__dot,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-circular__svg,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-circular__path,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-loading-leave-active {
+        animation: none;
+        transition: none;
+    }
+}
+
+[data-m-motion="reduced"] .m-loading-aurora__ring,
+[data-m-motion="reduced"] .m-loading-aurora__glow,
+[data-m-motion="reduced"] .m-loading-bounce__ball,
+[data-m-motion="reduced"] .m-loading-wave__bar,
+[data-m-motion="reduced"] .m-loading-pulse__ring,
+[data-m-motion="reduced"] .m-loading-stardust__dot,
+[data-m-motion="reduced"] .m-loading-circular__svg,
+[data-m-motion="reduced"] .m-loading-circular__path,
+[data-m-motion="reduced"] .m-loading-enter-active,
+[data-m-motion="reduced"] .m-loading-leave-active,
+[data-m-motion="none"] .m-loading-aurora__ring,
+[data-m-motion="none"] .m-loading-aurora__glow,
+[data-m-motion="none"] .m-loading-bounce__ball,
+[data-m-motion="none"] .m-loading-wave__bar,
+[data-m-motion="none"] .m-loading-pulse__ring,
+[data-m-motion="none"] .m-loading-stardust__dot,
+[data-m-motion="none"] .m-loading-circular__svg,
+[data-m-motion="none"] .m-loading-circular__path,
+[data-m-motion="none"] .m-loading-enter-active,
+[data-m-motion="none"] .m-loading-leave-active {
+    animation: none;
+    transition: none;
+}
+
 .m-pagination {
     --m-pagination-simple-width: 3.5rem;
     --m-pagination-jumper-width: 3.5rem;
@@ -1391,92 +1790,6 @@
     width: var(--m-pagination-jumper-width);
 }
 
-/* —— Feedback: ProgressSpinner —— */
-.m-progress-spinner {
-    --m-progress-spinner-size: calc(var(--m-space-8) + var(--m-space-2));
-    --m-progress-spinner-color: var(--m-color-primary);
-    animation: m-progress-spinner-rotate var(--m-motion-spin) linear infinite;
-    color: var(--m-progress-spinner-color);
-    display: inline-block;
-    font-family: var(--m-font-sans);
-    height: var(--m-progress-spinner-size);
-    vertical-align: middle;
-    width: var(--m-progress-spinner-size);
-}
-
-.m-progress-spinner__circle {
-    animation: m-progress-spinner-dash var(--m-motion-spin-dash) ease-in-out infinite;
-    stroke: currentColor;
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: 0;
-    stroke-linecap: round;
-}
-
-@keyframes m-progress-spinner-dash {
-    0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-    }
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-    }
-}
-
-.m-progress-spinner--small {
-    --m-progress-spinner-size: var(--m-control-height-medium);
-}
-
-.m-progress-spinner--large {
-    --m-progress-spinner-size: calc(var(--m-space-8) + var(--m-space-6));
-}
-
-.m-progress-spinner-wrap {
-    position: relative;
-}
-
-.m-progress-spinner-wrap--active .m-progress-spinner-wrap__content {
-    opacity: var(--m-opacity-disabled);
-    pointer-events: none;
-}
-
-.m-progress-spinner-wrap__overlay {
-    align-items: center;
-    background: color-mix(in srgb, var(--m-color-surface) 72%, transparent);
-    display: flex;
-    flex-direction: column;
-    gap: var(--m-space-2);
-    inset: 0;
-    justify-content: center;
-    position: absolute;
-    z-index: var(--m-blockui-z-index, 10);
-}
-
-.m-progress-spinner__description {
-    color: var(--m-color-text-muted);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-sm);
-    margin: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-progress-spinner,
-    html:not([data-m-ignore-reduced-motion]) .m-progress-spinner__circle {
-        animation: none;
-    }
-}
-
-[data-m-motion="reduced"] .m-progress-spinner,
-[data-m-motion="reduced"] .m-progress-spinner__circle,
-[data-m-motion="none"] .m-progress-spinner,
-[data-m-motion="none"] .m-progress-spinner__circle {
-    animation: none;
-}
-
 .m-radio__control {
     border-radius: var(--m-radius-full);
 }
@@ -1854,15 +2167,15 @@
 }
 
 .m-table__header-inner {
-    display: inline-flex;
+    display: flex;
+    flex-direction: row;
     align-items: center;
     gap: var(--m-space-1);
     box-sizing: border-box;
+    width: 100%;
     max-width: 100%;
     padding: 0 var(--m-table-cell-padding-inline);
     overflow: hidden;
-    line-height: var(--m-table-cell-line-height);
-    vertical-align: middle;
 }
 
 .m-table__header-inner--left {
@@ -1878,47 +2191,47 @@
 }
 
 .m-table__header-text {
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    line-height: var(--m-table-cell-line-height);
 }
 
-.m-table__caret-wrapper {
-    position: relative;
-    display: inline-flex;
+.m-table__sort {
+    display: flex;
     flex-direction: column;
     flex-shrink: 0;
     align-items: center;
-    width: var(--m-space-6);
-    height: calc(var(--m-space-2) + var(--m-space-1));
-    overflow: initial;
-    vertical-align: middle;
+    justify-content: center;
+    gap: 2px;
+    line-height: 0;
 }
 
-.m-table__sort-caret {
-    position: absolute;
-    left: calc(var(--m-space-2) - 1px);
-    width: 0;
-    height: 0;
-    border: calc(var(--m-space-1) + 1px) solid transparent;
+.m-table__sort-icon.m-icon {
+    display: block;
+    width: 0.75rem;
+    height: 0.375rem;
+    color: color-mix(in srgb, var(--m-color-text-muted) 55%, transparent);
 }
 
-.m-table__sort-caret--ascending {
-    top: calc(var(--m-space-1) * -1);
-    border-bottom-color: color-mix(in srgb, var(--m-color-text-muted) 55%, transparent);
+.m-table__sort-icon--ascending,
+.m-table__sort-icon--descending {
+    margin: 0;
 }
 
-.m-table__sort-caret--descending {
-    bottom: calc(var(--m-space-1) * -0.5);
-    border-top-color: color-mix(in srgb, var(--m-color-text-muted) 55%, transparent);
+.m-table__header-cell--sortable:hover .m-table__sort-icon {
+    color: color-mix(in srgb, var(--m-color-text-muted) 80%, transparent);
 }
 
-.m-table__header-cell--ascending .m-table__sort-caret--ascending {
-    border-bottom-color: var(--m-color-primary);
+.m-table__header-cell--ascending .m-table__sort-icon--ascending,
+.m-table__header-cell--descending .m-table__sort-icon--descending {
+    color: var(--m-color-primary);
 }
 
-.m-table__header-cell--descending .m-table__sort-caret--descending {
-    border-top-color: var(--m-color-primary);
+.m-table__header-cell--sortable:hover.m-table__header-cell--ascending .m-table__sort-icon--ascending,
+.m-table__header-cell--sortable:hover.m-table__header-cell--descending .m-table__sort-icon--descending {
+    color: var(--m-color-primary);
 }
 
 .m-table__multi-sort-number {
@@ -2080,30 +2393,41 @@
 .m-table__cell--expanded {
     padding: var(--m-space-4) calc(var(--m-table-cell-padding-inline) * 2);
     background: var(--m-table-expanded-bg);
+    position: relative;
 }
 
 .m-table__cell--expanded:hover {
     background: var(--m-table-expanded-bg) !important;
 }
 
-.m-table__loading {
+.m-table__loading-line {
+    background: color-mix(in srgb, var(--m-color-primary) 16%, transparent);
+    border-radius: var(--m-radius-full);
+    height: calc(var(--m-space-1) / 2);
+    left: 0;
+    overflow: hidden;
     position: absolute;
-    inset: 0;
-    z-index: 4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    top: 0;
+    width: 100%;
 }
 
-.m-table__loading-mask {
+.m-table__loading-line::before {
+    animation: m-table-loading-line var(--m-motion-pulse) var(--m-motion-ease) infinite;
+    background: var(--m-color-primary);
+    border-radius: inherit;
+    content: '';
+    inset: 0 auto 0 0;
     position: absolute;
-    inset: 0;
-    background: color-mix(in srgb, var(--m-color-surface) 72%, transparent);
+    width: 40%;
 }
 
-.m-table__loading-body {
-    position: relative;
-    z-index: 1;
+@keyframes m-table-loading-line {
+    0% {
+        transform: translateX(-120%);
+    }
+    100% {
+        transform: translateX(320%);
+    }
 }
 
 .m-table__message {
@@ -2169,4 +2493,13 @@
     html:not([data-m-ignore-reduced-motion]) .m-table__expand-btn {
         transition: none;
     }
+
+    html:not([data-m-ignore-reduced-motion]) .m-table__loading-line::before {
+        animation: none;
+    }
+}
+
+[data-m-motion="reduced"] .m-table__loading-line::before,
+[data-m-motion="none"] .m-table__loading-line::before {
+    animation: none;
 }

package/dist/table/style.js

@@ -2,8 +2,8 @@ import '../theme/styles.css'
 import '../styles/base.css'
 import '../components/Checkbox/styles.css'
 import '../components/Icon/styles.css'
+import '../components/Loading/styles.css'
 import '../components/Pagination/styles.css'
-import '../components/ProgressSpinner/styles.css'
 import '../components/Radio/styles.css'
 import '../components/Scrollbar/styles.css'
 import '../components/Tooltip/styles.css'

package/dist/tabs/index.js

@@ -1,5 +1,5 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../useMId-BXFYayPP.js";
 import { t as r } from "../Scrollbar-DTeJ8P5b.js";
 import { n as i } from "../locale-Bzm2nbEp.js";

package/dist/tabs/style.css

@@ -529,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 {

package/dist/tag/index.js

@@ -1,5 +1,5 @@
 import { r as e, t } from "../types-DGuu4Eg4.js";
-import { t as n } from "../Icon-lcN1rS87.js";
+import { t as n } from "../Icon-od9Ob-Ay.js";
 import { o as r } from "../config-CapALqt3.js";
 import { n as i } from "../locale-Bzm2nbEp.js";
 import "./style.js";