morya-ui 0.3.0 → 0.3.2

package/dist/page/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,22 +1148,743 @@
     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-button {
+    --m-button-padding-x-small: var(--m-control-padding-x-small);
+    --m-button-padding-x-medium: calc(
+        var(--m-control-padding-x-medium) + var(--m-space-1)
+    );
+    --m-button-padding-x-large: calc(
+        var(--m-control-padding-x-large) + var(--m-space-1)
+    );
+    --m-button-icon-stack-min-height: 3.25rem;
+    --m-button-badge-min-width: 1.15rem;
+    --m-button-spinner-size: 0.875rem;
+    --m-button-icon-size: 1rem;
+    --m-button-bg: var(--m-color-primary);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-primary);
+    --m-button-hover-bg: var(--m-color-primary-hover);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: var(--m-color-primary-hover);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-primary) 82%,
+        black
+    );
+    align-items: center;
+    background: var(--m-button-bg);
+    border: var(--m-border-width) solid var(--m-button-border);
+    border-radius: var(--m-radius-control);
+    color: var(--m-button-fg);
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: row;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    font-weight: 600;
+    gap: var(--m-space-2);
+    justify-content: center;
+    line-height: 1;
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-button-padding-x-medium);
+    position: relative;
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        border-color var(--m-motion-fast) var(--m-motion-ease),
+        color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease),
+        opacity var(--m-motion-fast) var(--m-motion-ease),
+        transform 160ms var(--m-motion-ease);
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .m-button:hover:not(:disabled) {
+        background: var(--m-button-hover-bg);
+        border-color: var(--m-button-hover-border);
+        color: var(--m-button-hover-fg);
     }
 }
 
+.m-button:active:not(:disabled) {
+    background: var(--m-button-active-bg);
+}
+
+.m-button--press:active:not(:disabled) {
+    transform: scale(0.97);
+}
+
+/* Naive-style focus: soft glow, not outline-offset ring */
+.m-button:focus {
+    outline: none;
+}
+
+.m-button:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-button--primary {
+    --m-button-bg: var(--m-color-primary);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-primary);
+    --m-button-hover-bg: var(--m-color-primary-hover);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: var(--m-color-primary-hover);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-primary) 82%,
+        black
+    );
+}
+
+.m-button--secondary {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 16%,
+        var(--m-color-surface)
+    );
+    --m-button-fg: var(--m-color-text);
+    --m-button-border: transparent;
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 24%,
+        var(--m-color-surface)
+    );
+    --m-button-hover-fg: var(--m-color-text);
+    --m-button-hover-border: transparent;
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 32%,
+        var(--m-color-surface)
+    );
+}
+
+.m-button--success {
+    --m-button-bg: var(--m-color-success);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-success);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 85%,
+        black
+    );
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: color-mix(
+        in srgb,
+        var(--m-color-success) 85%,
+        black
+    );
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 75%,
+        black
+    );
+}
+
+.m-button--info {
+    --m-button-bg: var(--m-color-info);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-info);
+    --m-button-hover-bg: color-mix(in srgb, var(--m-color-info) 85%, black);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: color-mix(
+        in srgb,
+        var(--m-color-info) 85%,
+        black
+    );
+    --m-button-active-bg: color-mix(in srgb, var(--m-color-info) 75%, black);
+}
+
+.m-button--warn {
+    --m-button-bg: var(--m-color-warn);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-warn);
+    --m-button-hover-bg: color-mix(in srgb, var(--m-color-warn) 85%, black);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: color-mix(
+        in srgb,
+        var(--m-color-warn) 85%,
+        black
+    );
+    --m-button-active-bg: color-mix(in srgb, var(--m-color-warn) 75%, black);
+}
+
+.m-button--help {
+    --m-button-bg: var(--m-color-help);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-help);
+    --m-button-hover-bg: color-mix(in srgb, var(--m-color-help) 85%, black);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: color-mix(
+        in srgb,
+        var(--m-color-help) 85%,
+        black
+    );
+    --m-button-active-bg: color-mix(in srgb, var(--m-color-help) 75%, black);
+}
+
+.m-button--danger {
+    --m-button-bg: var(--m-color-danger);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-color-danger);
+    --m-button-hover-bg: color-mix(in srgb, var(--m-color-danger) 85%, black);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: color-mix(
+        in srgb,
+        var(--m-color-danger) 85%,
+        black
+    );
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 75%,
+        black
+    );
+}
+
+.m-button--contrast {
+    --m-button-bg: var(--m-color-contrast);
+    --m-button-fg: var(--m-color-contrast-fg);
+    --m-button-border: var(--m-color-contrast);
+    --m-button-hover-bg: var(--m-color-contrast-hover);
+    --m-button-hover-fg: var(--m-color-contrast-fg);
+    --m-button-hover-border: var(--m-color-contrast-hover);
+    --m-button-active-bg: var(--m-color-contrast-active);
+}
+
+.m-button--outlined {
+    --m-button-bg: transparent;
+    --m-button-fg: var(--m-button-border);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 10%,
+        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) 16%,
+        transparent
+    );
+}
+
+.m-button--secondary.m-button--outlined {
+    --m-button-border: var(--m-color-border);
+    --m-button-fg: var(--m-color-text);
+    --m-button-hover-fg: var(--m-color-text);
+}
+
+.m-button--text,
+.m-button--link {
+    --m-button-bg: transparent;
+    --m-button-border: transparent;
+    --m-button-fg: var(--m-color-primary);
+    --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%,
+        transparent
+    );
+}
+
+.m-button--secondary.m-button--text,
+.m-button--secondary.m-button--link {
+    --m-button-fg: var(--m-color-text-muted);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        transparent
+    );
+    --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);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-success);
+    --m-button-hover-border: 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);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-info);
+    --m-button-hover-border: 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);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-warn);
+    --m-button-hover-border: 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);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-help);
+    --m-button-hover-border: 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);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-danger);
+    --m-button-hover-border: 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);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-contrast);
+    --m-button-hover-border: var(--m-color-contrast);
+}
+
+.m-button--plain.m-button--text,
+.m-button--plain.m-button--outlined,
+.m-button--plain.m-button--link {
+    --m-button-fg: var(--m-color-text-muted);
+    --m-button-border: var(--m-color-border);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-text);
+    --m-button-hover-border: var(--m-color-border);
+}
+
+.m-button--link {
+    height: auto;
+    min-height: 0;
+    padding: 0;
+}
+
+.m-button--link:hover:not(:disabled) {
+    text-decoration: underline;
+}
+
+.m-button--ghost {
+    --m-button-bg: transparent;
+    --m-button-fg: var(--m-button-border);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 12%,
+        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) 18%,
+        transparent
+    );
+}
+
+.m-button--secondary.m-button--ghost {
+    --m-button-border: var(--m-color-border);
+    --m-button-fg: var(--m-color-text);
+    --m-button-hover-fg: var(--m-color-text);
+}
+
+.m-button--success.m-button--ghost {
+    --m-button-fg: var(--m-color-success);
+    --m-button-border: var(--m-color-success);
+}
+
+.m-button--info.m-button--ghost {
+    --m-button-fg: var(--m-color-info);
+    --m-button-border: var(--m-color-info);
+}
+
+.m-button--warn.m-button--ghost {
+    --m-button-fg: var(--m-color-warn);
+    --m-button-border: var(--m-color-warn);
+}
+
+.m-button--help.m-button--ghost {
+    --m-button-fg: var(--m-color-help);
+    --m-button-border: var(--m-color-help);
+}
+
+.m-button--danger.m-button--ghost {
+    --m-button-fg: var(--m-color-danger);
+    --m-button-border: var(--m-color-danger);
+}
+
+.m-button--contrast.m-button--ghost {
+    --m-button-fg: var(--m-color-contrast);
+    --m-button-border: var(--m-color-contrast);
+}
+
+.m-button--quaternary {
+    --m-button-bg: transparent;
+    --m-button-border: transparent;
+    --m-button-fg: var(--m-color-text);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 10%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-text);
+    --m-button-hover-border: transparent;
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 16%,
+        transparent
+    );
+}
+
+.m-button--custom {
+    --m-button-bg: var(--m-button-color);
+    --m-button-fg: var(--m-color-on-emphasis);
+    --m-button-border: var(--m-button-color);
+    --m-button-hover-bg: color-mix(in srgb, var(--m-button-color) 85%, black);
+    --m-button-hover-fg: var(--m-color-on-emphasis);
+    --m-button-hover-border: color-mix(
+        in srgb,
+        var(--m-button-color) 85%,
+        black
+    );
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 75%,
+        black
+    );
+}
+
+.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-bg: 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) 12%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: var(--m-button-color);
+}
+
+.m-button--custom.m-button--text,
+.m-button--custom.m-button--quaternary,
+.m-button--custom.m-button--link {
+    --m-button-border: transparent;
+    --m-button-hover-border: transparent;
+}
+
+.m-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+}
+
+.m-button-group--fluid {
+    display: flex;
+    width: 100%;
+}
+
+.m-button-group--fluid > .m-button {
+    flex: 1;
+}
+
+.m-button-group > .m-button {
+    border-radius: 0;
+    margin: 0;
+}
+
+.m-button-group > .m-button + .m-button {
+    margin-left: -1px;
+}
+
+.m-button-group > .m-button:first-child {
+    border-top-left-radius: var(--m-radius-control);
+    border-bottom-left-radius: var(--m-radius-control);
+}
+
+.m-button-group > .m-button:last-child {
+    border-top-right-radius: var(--m-radius-control);
+    border-bottom-right-radius: var(--m-radius-control);
+}
+
+.m-button--raised {
+    box-shadow: var(--m-shadow-raised);
+}
+
+.m-button--raised:focus-visible {
+    box-shadow: var(--m-focus-shadow), var(--m-shadow-raised);
+}
+
+.m-button--rounded {
+    border-radius: var(--m-radius-full);
+}
+
+.m-button--icon-only {
+    gap: 0;
+    min-width: var(--m-control-height-medium);
+    padding: 0;
+    width: var(--m-control-height-medium);
+}
+
+.m-button--icon-only.m-button--small {
+    min-width: var(--m-control-height-small);
+    width: var(--m-control-height-small);
+}
+
+.m-button--icon-only.m-button--large {
+    min-width: var(--m-control-height-large);
+    width: var(--m-control-height-large);
+}
+
+.m-button--icon-right {
+    flex-direction: row-reverse;
+}
+
+.m-button--icon-top {
+    flex-direction: column;
+    min-height: var(--m-button-icon-stack-min-height);
+    padding-block: var(--m-space-2);
+}
+
+.m-button--icon-bottom {
+    flex-direction: column-reverse;
+    min-height: var(--m-button-icon-stack-min-height);
+    padding-block: var(--m-space-2);
+}
+
+.m-button--fluid {
+    display: flex;
+    width: 100%;
+}
+
+.m-button--small {
+    --m-button-icon-size: 0.875rem;
+    font-size: var(--m-control-font-small);
+    min-height: var(--m-control-height-small);
+    padding: 0 var(--m-button-padding-x-small);
+}
+
+.m-button--large {
+    --m-button-icon-size: 1.25rem;
+    font-size: var(--m-control-font-large);
+    min-height: var(--m-control-height-large);
+    padding: 0 var(--m-button-padding-x-large);
+}
+
+.m-button__icon,
+.m-button__label {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+}
+
+.m-button__icon,
+.m-button__label,
+.m-button__badge {
+    position: relative;
+    z-index: 1;
+}
+
+.m-button__ripple {
+    border-radius: inherit;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+}
+
+.m-button__ripple-wave {
+    background: currentColor;
+    border-radius: var(--m-radius-full);
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: scale(0);
+    will-change: transform, opacity;
+}
+
+/* Used only when Web Animations API is unavailable. */
+.m-button__ripple-wave--fallback {
+    animation: m-button-ripple 560ms var(--m-motion-ease) forwards;
+}
+
+@keyframes m-button-ripple {
+    0% {
+        opacity: 0.42;
+        transform: scale(0);
+    }
+    55% {
+        opacity: 0.22;
+        transform: scale(0.55);
+    }
+    100% {
+        opacity: 0;
+        transform: scale(1);
+    }
+}
+
+.m-button__icon {
+    flex: 0 0 auto;
+    width: var(--m-button-icon-size);
+    height: var(--m-button-icon-size);
+    line-height: 0;
+}
+
+.m-button__icon :is(.m-icon, .m-button__icon-graphic, svg) {
+    display: block;
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.m-button__icon .m-icon {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.m-button__badge {
+    align-items: center;
+    background: var(--m-color-contrast);
+    border-radius: var(--m-radius-full);
+    color: var(--m-color-contrast-fg);
+    display: inline-flex;
+    font-size: var(--m-font-size-xs);
+    font-weight: 700;
+    justify-content: center;
+    line-height: 1;
+    margin-inline-start: var(--m-space-1);
+    min-width: var(--m-button-badge-min-width);
+    padding: var(--m-space-1) var(--m-space-2);
+}
+
+.m-button__badge--secondary {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 25%,
+        var(--m-color-surface)
+    );
+    color: var(--m-color-text);
+}
+
+.m-button__badge--success {
+    background: var(--m-color-success);
+    color: var(--m-color-on-emphasis);
+}
+
+.m-button__badge--info {
+    background: var(--m-color-info);
+    color: var(--m-color-on-emphasis);
+}
+
+.m-button__badge--warn {
+    background: var(--m-color-warn);
+    color: var(--m-color-on-emphasis);
+}
+
+.m-button__badge--danger {
+    background: var(--m-color-danger);
+    color: var(--m-color-on-emphasis);
+}
+
+.m-button__badge--contrast {
+    background: var(--m-color-contrast);
+    color: var(--m-color-contrast-fg);
+}
+
+.m-button__spinner {
+    animation: m-button-spin var(--m-motion-spin-fast) linear infinite;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--m-radius-full);
+    height: var(--m-button-spinner-size);
+    width: var(--m-button-spinner-size);
+}
+
+@keyframes m-button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+[data-m-motion="reduced"] .m-button__spinner,
+[data-m-motion="none"] .m-button__spinner {
+    animation: none;
+}
+
+[data-m-motion="none"] .m-button__ripple-wave {
+    display: none;
+}
+
 .m-card {
+    --m-card-shadow-rest: var(--m-shadow-raised);
     background: var(--m-color-surface);
     border: var(--m-border-width) solid var(--m-color-border);
     border-radius: var(--m-radius-lg);
+    box-shadow: none;
     color: var(--m-color-text);
+    overflow: visible;
+}
+
+.m-card:has(> .m-card__cover) {
     overflow: hidden;
 }
 
@@ -1240,16 +1921,23 @@
     border-color: transparent;
 }
 
-.m-card--hoverable {
-    transition: box-shadow var(--m-motion-fast) var(--m-motion-ease), border-color var(--m-motion-fast) var(--m-motion-ease);
+.m-card--shadow-hover,
+.m-card--shadow-always {
+    transition:
+        box-shadow var(--m-motion-fast) var(--m-motion-ease),
+        border-color var(--m-motion-fast) var(--m-motion-ease);
 }
 
-.m-card--hoverable:hover {
-    border-color: color-mix(in srgb, var(--m-color-primary) 35%, var(--m-color-border));
-    box-shadow: var(--m-shadow-md);
+.m-card--shadow-always {
+    box-shadow: var(--m-card-shadow-rest);
 }
 
-.m-card--hoverable:focus-within {
+.m-card--shadow-hover:hover {
+    box-shadow: var(--m-card-shadow-rest);
+}
+
+.m-card--shadow-hover:focus-within,
+.m-card--shadow-always:focus-within {
     border-color: var(--m-color-primary-hover);
     box-shadow: var(--m-focus-shadow);
 }
@@ -1267,6 +1955,7 @@
 }
 
 .m-card__cover {
+    border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
     display: block;
     overflow: hidden;
 }
@@ -1276,6 +1965,153 @@
     width: 100%;
 }
 
+/* —— Feedback: Empty —— */
+.m-empty {
+    --m-empty-illustration-width: 12.5rem;
+    --m-empty-illustration-height: 6.5rem;
+    --m-empty-max-width: 20rem;
+    --m-empty-icon-size: var(--m-space-8);
+    --m-empty-font-size: var(--m-font-size-md);
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-family: var(--m-font-sans);
+    gap: var(--m-space-2);
+    justify-content: center;
+    padding: calc(var(--m-space-8) + var(--m-space-1)) var(--m-space-5);
+    text-align: center;
+}
+
+.m-empty__illustration {
+    align-items: center;
+    color: var(--m-color-text-muted);
+    display: grid;
+    flex-shrink: 0;
+    height: var(--m-empty-illustration-height);
+    justify-items: center;
+    place-items: center;
+    width: var(--m-empty-illustration-width);
+}
+
+.m-empty__illustration :is(svg, .m-empty__glyph) {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.m-empty__icon :is(.m-icon, svg),
+.m-empty__default-icon,
+.m-empty__default-icon svg {
+    color: inherit;
+    display: block;
+    height: var(--m-empty-icon-size);
+    width: var(--m-empty-icon-size);
+}
+
+.m-empty--default-icon .m-empty__illustration {
+    height: var(--m-empty-icon-size);
+    width: var(--m-empty-icon-size);
+}
+
+.m-empty__image {
+    display: block;
+    height: auto;
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+}
+
+.m-empty__illustration:has(.m-empty__image),
+.m-empty__illustration:has(img) {
+    height: auto;
+    max-height: 10rem;
+    max-width: min(16rem, 100%);
+    width: auto;
+}
+
+.m-empty__body {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-1);
+    max-width: var(--m-empty-max-width);
+}
+
+.m-empty__title {
+    color: var(--m-color-text);
+    font-size: var(--m-empty-font-size);
+    font-weight: 600;
+    line-height: 1.4;
+    margin: 0;
+}
+
+.m-empty__description {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-empty-font-size);
+    line-height: 1.55;
+    margin: 0;
+}
+
+.m-empty__extra {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-2);
+    justify-content: center;
+    margin-top: var(--m-space-1);
+}
+
+.m-empty--small {
+    --m-empty-illustration-width: 9.5rem;
+    --m-empty-illustration-height: 5rem;
+    --m-empty-icon-size: var(--m-space-6);
+    --m-empty-font-size: var(--m-font-size-sm);
+    padding: var(--m-space-6) var(--m-space-4);
+}
+
+.m-empty--large {
+    --m-empty-illustration-width: 15rem;
+    --m-empty-illustration-height: 7.75rem;
+    --m-empty-icon-size: calc(var(--m-space-8) + var(--m-space-2));
+    --m-empty-font-size: var(--m-font-size-lg);
+    padding: calc(var(--m-space-8) + var(--m-space-2)) var(--m-space-6);
+}
+
+.m-empty--simple {
+    flex-direction: row;
+    gap: var(--m-space-2);
+    justify-content: flex-start;
+    padding: calc(var(--m-space-3) + var(--m-space-1)) var(--m-space-3);
+    text-align: left;
+}
+
+.m-empty--simple .m-empty__illustration {
+    height: calc(var(--m-control-height-large) + var(--m-space-1));
+    width: calc(var(--m-control-height-large) + var(--m-space-1));
+}
+
+.m-empty--simple .m-empty__icon :is(.m-icon, svg),
+.m-empty--simple .m-empty__default-icon,
+.m-empty--simple .m-empty__default-icon svg {
+    height: var(--m-space-6);
+    width: var(--m-space-6);
+}
+
+.m-empty--simple .m-empty__body {
+    align-items: flex-start;
+    max-width: none;
+}
+
+.m-empty--simple .m-empty__title,
+.m-empty--simple .m-empty__description {
+    font-size: var(--m-font-size-sm);
+}
+
+.m-empty--simple .m-empty__extra {
+    justify-content: flex-start;
+    margin-top: 0;
+}
+
 .m-icon {
     color: currentColor;
     display: inline-flex;
@@ -1320,19 +2156,69 @@
     }
 }
 
-@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;
+}
+
+.m-skeleton {
+    --m-skeleton-bg: color-mix(in srgb, var(--m-color-text-muted) 14%, var(--m-color-surface));
+    background: var(--m-skeleton-bg);
+    border-radius: var(--m-radius-sm);
+    display: block;
+    overflow: hidden;
+    position: relative;
+}
+
+.m-skeleton--circle {
+    border-radius: var(--m-radius-full);
+}
+
+.m-skeleton--wave::after {
+    animation: m-skeleton-wave var(--m-motion-skeleton) linear infinite;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in srgb, var(--m-color-surface) 55%, transparent),
+        transparent
+    );
+    content: "";
+    inset: 0;
+    position: absolute;
+    transform: translateX(-100%);
+}
+
+@keyframes m-skeleton-wave {
+    100% {
+        transform: translateX(100%);
     }
 }
 
-:root[data-m-motion='none'] .m-icon--spin svg,
-:root[data-m-motion='reduced'] .m-icon--spin svg {
+[data-m-motion="reduced"] .m-skeleton--wave::after,
+[data-m-motion="none"] .m-skeleton--wave::after {
     animation: none;
 }
+
+.m-skeleton-repeat {
+    display: grid;
+    gap: var(--m-space-2);
+    width: 100%;
+}
+
+.m-skeleton--text {
+    height: 0.85em;
+}
 
-/* —— Layout: Page —— */
+/* —— Layout: Page ——
+ * Surface contract (kept in sync with Card / Table / controls):
+ * - Page chrome stays flat: whitespace and type hierarchy, not a second kit.
+ * - Recessive bands (filled filters, muted section) = Table-header fill, no radius.
+ * - Elevated surfaces reuse Card: surface + 1px border + radius-lg, same padding.
+ * - Never invent glow, dashed frames, or pill chips on Ops page chrome.
+ */
 .m-page-content {
+    --m-page-content-body-lead: var(--m-space-2);
+    --m-page-content-tools-pull: var(--m-space-2);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -1342,33 +2228,120 @@
     width: 100%;
 }
 
+.m-page-content > .m-page-header + :is(.m-page-filters, .m-page-toolbar) {
+    margin-top: calc(var(--m-space-1) - var(--m-page-content-gap, var(--m-space-4)));
+}
+
+.m-page-content > .m-page-filters + .m-page-toolbar {
+    margin-top: calc(var(--m-page-content-tools-pull) * -1);
+}
+
+.m-page-content
+    > :is(.m-page-filters, .m-page-toolbar)
+    + :is(.m-table, .m-grid, .m-page-section:not(.m-page-section--actions)) {
+    margin-top: var(--m-page-content-body-lead);
+}
+
 .m-page-content--compact {
+    --m-page-content-body-lead: var(--m-space-1);
+    --m-page-content-gap: var(--m-space-3);
     --m-page-content-padding: var(--m-space-4);
+    --m-page-content-tools-pull: var(--m-space-1);
 }
 
 .m-page-content--spacious {
+    --m-page-content-body-lead: var(--m-space-4);
     --m-page-content-gap: var(--m-space-6);
+    --m-page-content-tools-pull: var(--m-space-3);
 }
 
 .m-page-content--narrow {
     max-width: 42rem;
 }
 
+.m-page-content--bands-uniform {
+    --m-page-content-body-lead: 0;
+    --m-page-content-tools-pull: 0;
+}
+
+.m-page-content--bands-uniform > .m-page-header + :is(.m-page-filters, .m-page-toolbar) {
+    margin-top: 0;
+}
+
+.m-page-content--bands-uniform
+    > :is(.m-page-filters, .m-page-toolbar)
+    + :is(.m-table, .m-grid, .m-page-section:not(.m-page-section--actions)) {
+    margin-top: 0;
+}
+
 .m-page-filters {
-    background: color-mix(in srgb, var(--m-color-border) 25%, transparent);
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-md);
     box-sizing: border-box;
-    padding: var(--m-space-4);
+    display: grid;
+    gap: var(--m-space-3);
+    width: 100%;
+}
+
+.m-page-filters__row {
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-3);
+    justify-content: space-between;
+    width: 100%;
+}
+
+.m-page-filters__controls {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.m-page-filters__toggle {
+    flex-shrink: 0;
+}
+
+.m-page-filters__advanced {
+    width: 100%;
+}
+
+.m-page-filters--filled {
+    background: var(--m-color-fill-light);
+    padding: var(--m-space-3) var(--m-space-4);
+}
+
+.m-page-filters--filled .m-page-filters__advanced {
+    padding-top: var(--m-space-1);
+}
+
+.m-page-filter-chips {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-2);
     width: 100%;
 }
 
+.m-page-filter-chips__label {
+    color: var(--m-color-text-muted);
+    flex-shrink: 0;
+    font-size: var(--m-font-size-sm);
+    line-height: 1.4;
+}
+
+.m-page-filter-chips__items {
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    gap: var(--m-space-2);
+    min-width: 0;
+}
+
 .m-page-toolbar {
     align-items: center;
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--m-space-4);
+    gap: var(--m-space-3);
     justify-content: space-between;
     width: 100%;
 }
@@ -1376,8 +2349,9 @@
 .m-page-toolbar__title {
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-lg);
+    font-size: var(--m-font-size-md);
     font-weight: 600;
+    line-height: 1.4;
     margin: 0;
 }
 
@@ -1385,20 +2359,34 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--m-space-3);
+    gap: var(--m-space-2);
+    margin-left: auto;
 }
 
 .m-page-header {
+    align-items: flex-start;
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--m-space-4);
+    gap: var(--m-space-3);
     justify-content: space-between;
     width: 100%;
 }
 
 .m-page-header__main {
     display: grid;
+    gap: var(--m-space-1);
+    min-width: 0;
+}
+
+.m-page-header__breadcrumb {
+    margin: 0 0 var(--m-space-1);
+}
+
+.m-page-header__heading {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
     gap: var(--m-space-2);
     min-width: 0;
 }
@@ -1406,22 +2394,34 @@
 .m-page-header__title {
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-lg);
+    font-size: var(--m-font-size-xl);
     font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.4;
     margin: 0;
 }
 
+.m-page-header__tags {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-2);
+}
+
 .m-page-header__description {
     color: var(--m-color-text-muted);
     font-size: var(--m-font-size-md);
+    line-height: 1.55;
     margin: 0;
+    max-width: 65ch;
 }
 
 .m-page-header__actions {
     align-items: center;
     display: flex;
+    flex-shrink: 0;
     flex-wrap: wrap;
-    gap: var(--m-space-3);
+    gap: var(--m-space-2);
 }
 
 .m-page-section {
@@ -1429,66 +2429,101 @@
     width: 100%;
 }
 
+.m-page-section__header {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-3);
+    justify-content: space-between;
+    margin: 0 0 var(--m-space-3);
+}
+
 .m-page-section__title {
     color: var(--m-color-text);
     font-size: var(--m-font-size-md);
     font-weight: 600;
-    margin: 0 0 var(--m-space-3);
+    line-height: 1.4;
+    margin: 0;
+}
+
+.m-page-section__actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-2);
 }
 
 .m-page-section--muted {
-    background: color-mix(in srgb, var(--m-color-border) 25%, transparent);
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-md);
+    background: var(--m-color-fill-light);
     padding: var(--m-space-4);
 }
 
-.m-page-section--form {
-    background: var(--m-color-surface);
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-md);
-    box-shadow: var(--m-shadow-sm);
-    padding: var(--m-space-6);
+.m-page-section--form .m-page-section__header {
+    margin: 0;
+    width: 100%;
 }
 
 .m-page-section--actions {
     border-top: var(--m-border-width) solid var(--m-color-border);
-    margin-top: var(--m-space-6);
+    margin-top: var(--m-space-4);
     padding-top: var(--m-space-4);
 }
 
-.m-page-stat {
-    box-shadow: var(--m-shadow-sm);
-}
-
 .m-page-stat__body {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
-    gap: var(--m-space-4);
+    gap: var(--m-space-3);
     justify-content: space-between;
 }
 
+.m-page-stat__content {
+    display: grid;
+    gap: var(--m-space-1);
+    justify-items: start;
+    min-width: 0;
+}
+
 .m-page-stat__label {
     color: var(--m-color-text-muted);
     font-size: var(--m-font-size-sm);
+    line-height: 1.4;
     margin: 0;
 }
 
 .m-page-stat__value {
-    --m-page-stat-value-size: 1.5rem;
+    --m-page-stat-value-size: var(--m-font-size-2xl);
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
     font-size: var(--m-page-stat-value-size);
-    font-weight: 700;
-    line-height: 1.2;
-    margin: var(--m-space-1) 0;
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    margin: 0;
+}
+
+.m-page-stat__meta {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-2);
 }
 
 .m-page-stat__trend {
+    align-items: center;
+    display: inline-flex;
     font-size: var(--m-font-size-sm);
+    font-weight: 500;
+    gap: var(--m-space-1);
+    line-height: 1.25;
     margin: 0;
 }
 
+.m-page-stat__trend .m-page-stat__trend-icon {
+    height: var(--m-font-size-sm);
+    width: var(--m-font-size-sm);
+}
+
 .m-page-stat__trend--primary {
     color: var(--m-color-primary);
 }
@@ -1509,24 +2544,62 @@
     color: var(--m-color-text-muted);
 }
 
+.m-page-stat__trend-label {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-sm);
+}
+
 .m-page-stat__icon {
-    color: var(--m-color-primary);
+    align-items: center;
+    color: var(--m-color-text-muted);
+    display: inline-flex;
     flex-shrink: 0;
-    opacity: 0.85;
+    justify-content: center;
+}
+
+.m-page-stat__icon :is(.m-icon, svg) {
+    display: block;
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.m-page-stat--compact .m-page-stat__value {
+    --m-page-stat-value-size: var(--m-font-size-xl);
+}
+
+.m-page-stat--compact .m-page-stat__icon :is(.m-icon, svg) {
+    height: 1rem;
+    width: 1rem;
+}
+
+.m-page-stat--plain {
+    padding: var(--m-space-2) 0;
+}
+
+.m-page-stat--inline .m-page-stat__content {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-2) var(--m-space-3);
+    row-gap: var(--m-space-1);
+}
+
+.m-page-stat--inline .m-page-stat__label {
+    margin: 0;
+}
+
+.m-page-stat--inline .m-page-stat__meta {
+    flex-basis: 100%;
 }
 
 .m-page-placeholder {
-    align-items: center;
-    background: color-mix(in srgb, var(--m-color-border) 15%, transparent);
-    border: var(--m-border-width) dashed var(--m-color-border);
-    border-radius: var(--m-radius-md);
     box-sizing: border-box;
-    color: var(--m-color-text-muted);
-    display: grid;
-    font-size: var(--m-font-size-sm);
-    justify-items: center;
+    display: flex;
     min-height: var(--m-page-placeholder-min-height, 12rem);
-    padding: var(--m-space-4);
-    text-align: center;
     width: 100%;
 }
+
+.m-page-placeholder__empty {
+    flex: 1;
+    min-width: 0;
+}