morya-ui 0.3.0 → 0.3.2

package/dist/table/style.css

@@ -50,6 +50,10 @@
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    /* Display scale (page titles, KPI figures) */
+    --m-font-size-xl: 1.25rem;
+    --m-font-size-2xl: 1.5rem;
+    --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
@@ -192,20 +196,10 @@
 
 /*
  * Global motion policy (complements per-component rules):
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ * - `reduced`: 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,
@@ -529,9 +523,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 {
@@ -611,7 +609,7 @@
 .m-zoom-enter-from,
 .m-zoom-leave-to {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
 }
 
 .m-slide-up-enter-active,
@@ -656,44 +654,6 @@
     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-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-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;
-    }
-}
-
 [data-m-motion="reduced"] .m-fade-enter-active,
 [data-m-motion="reduced"] .m-fade-leave-active,
 [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1188,17 +1148,6 @@
     animation: none !important;
 }
 
-@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;
-        scroll-behavior: auto !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
 .m-checkbox__control {
     border-radius: var(--m-radius-sm);
 }
@@ -1271,20 +1220,393 @@
     }
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-icon--spin svg {
-        animation: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-icon--spin svg,
 :root[data-m-motion='reduced'] .m-icon--spin svg {
     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;
+    }
+}
+
+[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;
+    --m-pagination-jumper-width: 5.5rem;
     align-items: center;
     display: flex;
     font-family: var(--m-font-sans);
@@ -1353,8 +1675,7 @@
     margin-left: var(--m-space-2);
 }
 
-.m-pagination__select,
-.m-pagination__input {
+.m-pagination__select {
     background: var(--m-color-surface);
     border: var(--m-border-width) solid var(--m-color-border);
     border-radius: var(--m-radius-control);
@@ -1369,114 +1690,26 @@
         opacity var(--m-motion-fast) var(--m-motion-ease);
 }
 
-.m-pagination__select:hover:not(:disabled),
-.m-pagination__input:hover:not(:disabled):not(:focus) {
+.m-pagination__select:hover:not(:disabled) {
     border-color: var(--m-color-primary-hover);
 }
 
-.m-pagination__select:focus-visible,
-.m-pagination__input:focus-visible {
+.m-pagination__select:focus-visible {
     border-color: var(--m-color-primary-hover);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
-.m-pagination__select:disabled,
-.m-pagination__input:disabled {
+.m-pagination__select:disabled {
     cursor: not-allowed;
     opacity: var(--m-opacity-disabled);
 }
 
-.m-pagination__input {
+.m-pagination__jumper-select {
+    min-width: var(--m-pagination-jumper-width);
     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);
 }
@@ -1622,14 +1855,6 @@
     opacity: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar__thumb,
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scrollbar-fade-leave-active {
-        transition: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-scrollbar__thumb,
 :root[data-m-motion='none'] .m-scrollbar-fade-enter-active,
 :root[data-m-motion='none'] .m-scrollbar-fade-leave-active,
@@ -1854,15 +2079,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 +2103,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 +2305,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 {
@@ -2163,10 +2399,16 @@
     max-width: 100%;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-table__header th,
-    html:not([data-m-ignore-reduced-motion]) .m-table__body td,
-    html:not([data-m-ignore-reduced-motion]) .m-table__expand-btn {
-        transition: none;
-    }
+[data-m-motion="reduced"] .m-table__header th,
+[data-m-motion="reduced"] .m-table__body td,
+[data-m-motion="reduced"] .m-table__expand-btn,
+[data-m-motion="none"] .m-table__header th,
+[data-m-motion="none"] .m-table__body td,
+[data-m-motion="none"] .m-table__expand-btn {
+    transition: none;
+}
+
+[data-m-motion="reduced"] .m-table__loading-line::before,
+[data-m-motion="none"] .m-table__loading-line::before {
+    animation: none;
 }