morya-ui 0.3.8 → 0.4.0

package/dist/toast/style.css

@@ -1,60 +1,79 @@
 :root {
-    --m-color-primary: #2563eb;
-    --m-color-primary-hover: #1d4ed8;
+    /* Default morya palette (--m-* token names) */
+    --m-color-primary: #1677ff;
+    --m-color-primary-hover: #4096ff;
+    --m-color-primary-active: #0958d9;
     --m-color-surface: #ffffff;
-    --m-color-text: #0f172a;
-    --m-color-text-muted: #64748b;
-    --m-color-border: #e2e8f0;
-    --m-color-focus-ring: #2563eb;
-    /* Naive-inspired control sizing (tiny omitted; medium = default) */
-    --m-control-height-small: 28px;
-    --m-control-height-medium: 34px;
+    --m-color-text: rgba(0, 0, 0, 0.88);
+    --m-color-text-muted: rgba(0, 0, 0, 0.45);
+    --m-color-border: #d9d9d9;
+    --m-color-split: #f0f0f0;
+    --m-color-focus-ring: #1677ff;
+    /* Control sizing: medium control height 32px */
+    --m-control-height-small: 24px;
+    --m-control-height-medium: 32px;
     --m-control-height-large: 40px;
     --m-control-font-small: 14px;
     --m-control-font-medium: 14px;
     --m-control-font-large: 15px;
     --m-control-padding-x-small: 10px;
-    --m-control-padding-x-medium: 12px;
-    --m-control-padding-x-large: 14px;
+    --m-control-padding-x-medium: 15px;
+    --m-control-padding-x-large: 16px;
 
-    --m-radius-control: 3px;
+    --m-radius-control: 6px;
     --m-border-width: 1px;
     --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 20%, transparent);
+        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 20%, transparent);
-    --m-color-success: #159570;
-    --m-color-info: #2563eb;
-    --m-color-warning: #d97706;
+        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
+    --m-focus-shadow-warning: 0 0 0 2px
+        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-color-success: #52c41a;
+    --m-color-info: #1677ff;
+    --m-color-warning: #faad14;
     --m-color-warn: var(--m-color-warning);
     --m-color-help: #9333ea;
-    --m-color-danger: #dc2626;
-    --m-color-contrast: #0f172a;
+    --m-color-danger: #ff4d4f;
+    --m-color-contrast: rgba(0, 0, 0, 0.88);
     --m-color-contrast-fg: #ffffff;
-    --m-color-contrast-hover: #1e293b;
-    --m-color-contrast-active: #020617;
+    --m-color-contrast-hover: #1f1f1f;
+    --m-color-contrast-active: #141414;
     --m-color-on-emphasis: #ffffff;
-    --m-overlay-scrim: rgb(15 23 42 / 0.55);
-    --m-shadow-sm: 0 0 6px rgba(0, 0, 0, 0.12);
-    --m-shadow-md: 0 0 12px rgba(0, 0, 0, 0.12);
-    --m-shadow-lg: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
-    --m-shadow-raised: 0 0.25rem 0.75rem
-        color-mix(in srgb, var(--m-color-text) 14%, transparent);
-    --m-shadow-sticky: 4px 0 8px
-        color-mix(in srgb, var(--m-color-text) 6%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px
-        color-mix(in srgb, var(--m-color-text) 6%, transparent);
+    --m-color-on-primary: var(--m-color-on-emphasis);
+    --m-overlay-scrim: rgb(0 0 0 / 0.45);
+    --m-shadow-sm:
+        0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 6px -1px rgb(0 0 0 / 0.02),
+        0 2px 4px 0 rgb(0 0 0 / 0.02);
+    --m-shadow-md:
+        0 6px 16px 0 rgb(0 0 0 / 0.08), 0 3px 6px -4px rgb(0 0 0 / 0.12),
+        0 9px 28px 8px rgb(0 0 0 / 0.05);
+    --m-shadow-lg:
+        0 6px 16px 0 rgb(0 0 0 / 0.08), 0 3px 6px -4px rgb(0 0 0 / 0.12),
+        0 9px 28px 8px rgb(0 0 0 / 0.05);
+    --m-shadow-raised:
+        0 1px 2px -2px rgb(0 0 0 / 0.16), 0 3px 6px 0 rgb(0 0 0 / 0.12),
+        0 5px 12px 4px rgb(0 0 0 / 0.09);
+    --m-shadow-sticky: 6px 0 16px -8px rgb(0 0 0 / 0.08);
+    --m-shadow-sticky-end: -6px 0 16px -8px rgb(0 0 0 / 0.08);
 
     /* Typography scale (component text, not control-height fonts) */
     --m-font-size-xs: 0.75rem;
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    --m-line-height-sm: 1.6667;
+    --m-line-height-md: 1.5714;
+    --m-line-height-lg: 1.5;
     /* 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;
+    --m-color-text-disabled: rgba(0, 0, 0, 0.25);
+    --m-color-bg-disabled: rgba(0, 0, 0, 0.04);
+    --m-font-weight: 400;
+    --m-font-weight-medium: 500;
+    --m-font-weight-strong: 600;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
     --m-z-overlay: var(--m-z-base);
@@ -63,6 +82,7 @@
     --m-z-tooltip: calc(var(--m-z-base) + 60);
     --m-z-toast: calc(var(--m-z-base) + 100);
     --m-z-popper: 40;
+    --m-z-sticky: 10;
 
     /* Affix hitbox tracks control height so small/compact shells do not overflow */
     --m-control-affix-size: calc(
@@ -73,7 +93,7 @@
     --m-meter-track-height: var(--m-space-5);
     --m-tree-toggler-size: var(--m-checkbox-control-size);
     --m-nav-rail-width: 12.5rem;
-    --m-nav-rail-collapsed-width: 4rem;
+    --m-nav-rail-collapsed-width: 5rem;
     --m-layout-header-height: calc(
         var(--m-control-height-medium) + 2 * var(--m-space-3)
     );
@@ -89,15 +109,19 @@
     --m-space-8: 2rem;
     --m-radius-sm: 0.25rem;
     --m-radius-md: 0.5rem;
-    --m-radius-lg: 0.75rem;
+    --m-radius-lg: 0.5rem;
     --m-radius-full: 9999px;
-    --m-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --m-radius-pill: var(--m-radius-full);
+    --m-font-sans:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol", "Noto Color Emoji";
     --m-motion-fast: 150ms;
     --m-motion-normal: 250ms;
-    --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
-    --m-motion-enter: 180ms;
-    --m-motion-exit: 130ms;
-    --m-motion-distance: 1rem;
+    --m-motion-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --m-motion-enter: 200ms;
+    --m-motion-exit: 150ms;
+    --m-motion-distance: 0.5rem;
     --m-motion-spin: 1s;
     --m-motion-spin-dash: 1.5s;
     --m-motion-spin-fast: 0.8s;
@@ -135,7 +159,7 @@
     /* Table */
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
     --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 3.5%, var(--m-color-surface));
-    --m-table-border-color: var(--m-color-border);
+    --m-table-border-color: var(--m-color-split);
     --m-table-header-bg: var(--m-color-fill-light);
     --m-table-header-text: var(--m-color-text);
     --m-table-text: var(--m-color-text);
@@ -243,7 +267,7 @@
     --m-control-affix-gap: 2rem;
     --m-checkbox-control-size: 1rem;
     --m-nav-rail-width: 15rem;
-    --m-nav-rail-collapsed-width: 3.25rem;
+    --m-nav-rail-collapsed-width: 4rem;
     --m-space-1: 0.2rem;
     --m-space-2: 0.4rem;
     --m-space-3: 0.6rem;
@@ -272,7 +296,7 @@
     --m-control-affix-gap: 2.65rem;
     --m-checkbox-control-size: 1.25rem;
     --m-nav-rail-width: 18rem;
-    --m-nav-rail-collapsed-width: 4.5rem;
+    --m-nav-rail-collapsed-width: 5.5rem;
     --m-space-1: 0.3rem;
     --m-space-2: 0.6rem;
     --m-space-3: 0.9rem;
@@ -312,40 +336,52 @@
 }
 
 [data-theme="dark"] {
-    --m-color-primary: #60a5fa;
-    --m-color-primary-hover: #93c5fd;
-    --m-color-surface: #0f172a;
-    --m-color-text: #f8fafc;
-    --m-color-text-muted: #94a3b8;
-    --m-color-border: #334155;
-    --m-color-focus-ring: #93c5fd;
+    /* Dark theme solids on dark surfaces (readable mid tones) */
+    --m-color-primary: #1668dc;
+    --m-color-primary-hover: #3c89e8;
+    --m-color-primary-active: #1554ad;
+    --m-color-surface: #141414;
+    --m-color-text: rgba(255, 255, 255, 0.85);
+    --m-color-text-muted: rgba(255, 255, 255, 0.45);
+    --m-color-text-disabled: rgba(255, 255, 255, 0.3);
+    --m-color-bg-disabled: rgba(255, 255, 255, 0.08);
+    --m-color-border: #424242;
+    --m-color-split: #303030;
+    --m-color-focus-ring: #3c89e8;
     --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 28%, transparent);
+        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 28%, transparent);
+        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
+    --m-focus-shadow-warning: 0 0 0 2px
+        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
-    --m-color-success: #0f766e;
-    --m-color-info: #1d4ed8;
-    --m-color-warning: #b45309;
+    --m-color-success: #49aa19;
+    --m-color-info: #1668dc;
+    --m-color-warning: #d89614;
     --m-color-warn: var(--m-color-warning);
     --m-color-help: #7e22ce;
-    --m-color-danger: #dc2626;
-    --m-color-contrast: #f8fafc;
-    --m-color-contrast-fg: #0f172a;
-    --m-color-contrast-hover: #e2e8f0;
-    --m-color-contrast-active: #cbd5e1;
-    --m-overlay-scrim: rgb(2 6 23 / 0.72);
-    --m-shadow-sm: 0 0 6px rgba(0, 0, 0, 0.12);
-    --m-shadow-md: 0 0 12px rgba(0, 0, 0, 0.12);
-    --m-shadow-lg: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
-    --m-shadow-raised: 0 0.25rem 0.75rem
-        color-mix(in srgb, var(--m-color-text) 22%, transparent);
-    --m-shadow-sticky: 4px 0 8px
-        color-mix(in srgb, #000 35%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px
-        color-mix(in srgb, #000 35%, transparent);
-
-    --m-table-border-color: color-mix(in srgb, var(--m-color-border) 88%, var(--m-color-text));
+    --m-color-danger: #dc4446;
+    --m-color-contrast: rgba(255, 255, 255, 0.85);
+    --m-color-contrast-fg: #141414;
+    --m-color-contrast-hover: #f5f5f5;
+    --m-color-contrast-active: #d9d9d9;
+    --m-overlay-scrim: rgb(0 0 0 / 0.65);
+    --m-shadow-sm:
+        0 1px 2px 0 rgb(0 0 0 / 0.16), 0 1px 6px -1px rgb(0 0 0 / 0.12),
+        0 2px 4px 0 rgb(0 0 0 / 0.08);
+    --m-shadow-md:
+        0 6px 16px 0 rgb(0 0 0 / 0.32), 0 3px 6px -4px rgb(0 0 0 / 0.48),
+        0 9px 28px 8px rgb(0 0 0 / 0.2);
+    --m-shadow-lg:
+        0 6px 16px 0 rgb(0 0 0 / 0.32), 0 3px 6px -4px rgb(0 0 0 / 0.48),
+        0 9px 28px 8px rgb(0 0 0 / 0.2);
+    --m-shadow-raised:
+        0 1px 2px -2px rgb(0 0 0 / 0.64), 0 3px 6px 0 rgb(0 0 0 / 0.48),
+        0 5px 12px 4px rgb(0 0 0 / 0.36);
+    --m-shadow-sticky: 6px 0 16px -8px rgb(0 0 0 / 0.45);
+    --m-shadow-sticky-end: -6px 0 16px -8px rgb(0 0 0 / 0.45);
+
+    --m-table-border-color: var(--m-color-split);
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 10%, var(--m-color-surface));
     --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
     --m-table-header-bg: var(--m-color-fill-light);
@@ -440,16 +476,18 @@
     box-sizing: border-box;
 }
 
-.m-button:disabled,
 .m-input:disabled,
+.m-textarea:disabled,
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
 .m-inputcolor__text:disabled,
 .m-inputcolor__swatch:disabled,
 .m-inputtags--disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-input-field__control--prefixed .m-input:disabled,
@@ -735,16 +773,16 @@
     display: inline-flex;
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
-    /* 避免绝对定位 input 挂到上层 MScrollbar，聚焦时把滚动容器拽回顶部 */
+    /* 与输入框圆角保持一致，配合 MScrollbar 使用 */
     position: relative;
 }
 
 .m-checkbox--disabled,
 .m-radio--disabled,
 .m-switch--disabled {
-    color: var(--m-color-text-muted);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-checkbox--invalid .m-checkbox__control,
@@ -827,7 +865,7 @@
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
     font-size: var(--m-font-size-md);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .m-textarea-field__help,
@@ -865,8 +903,10 @@
 .m-textarea:disabled,
 .m-select:disabled,
 .m-select--disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-inputgroup > .m-input,
@@ -1041,7 +1081,7 @@
 .m-picklist__item--selected {
     background: color-mix(in srgb, var(--m-color-primary) 14%, var(--m-color-surface));
     color: var(--m-color-primary);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .m-carousel__nav,
@@ -1146,6 +1186,1023 @@
     animation: none !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: var(--m-color-primary-active);
+    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: 400;
+    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 {
+    background: color-mix(in srgb, var(--m-color-text) 4%, var(--m-color-surface));
+    border-color: var(--m-color-border);
+    color: color-mix(in srgb, var(--m-color-text) 35%, var(--m-color-surface));
+    cursor: not-allowed;
+    opacity: 1;
+}
+
+.m-button--text:disabled,
+.m-button--link:disabled,
+.m-button--ghost:disabled,
+.m-button--quaternary:disabled {
+    background: transparent;
+    border-color: transparent;
+}
+
+.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: var(--m-color-primary-active);
+}
+
+.m-button--secondary {
+    --m-button-bg: var(--m-color-surface);
+    --m-button-fg: var(--m-color-text);
+    --m-button-border: var(--m-color-border);
+    --m-button-hover-bg: var(--m-color-surface);
+    --m-button-hover-fg: var(--m-color-primary-hover);
+    --m-button-hover-border: var(--m-color-primary-hover);
+    --m-button-active-bg: 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
+    );
+}
+
+/* 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);
+}
+
+.m-button--text,
+.m-button--link {
+    --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-active-bg: color-mix(
+        in srgb,
+        var(--m-color-primary) 16%,
+        transparent
+    );
+}
+
+.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,
+        var(--m-color-text-muted) 12%,
+        transparent
+    );
+    --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--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--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--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--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--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--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--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--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--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--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--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--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-bg: transparent;
+    --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-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 18%,
+        transparent
+    );
+}
+
+.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: 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-color-primary) 16%,
+        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) 22%,
+        transparent
+    );
+}
+
+.m-button--secondary.m-button--ghost {
+    --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-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-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-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-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-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-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 {
+    --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-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--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-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 {
+    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: calc(var(--m-border-width) * -1);
+}
+
+.m-button-group > .m-button:hover,
+.m-button-group > .m-button:focus-visible,
+.m-button-group > .m-button:active {
+    position: relative;
+    z-index: 1;
+}
+
+.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--shape-circle {
+    border-radius: var(--m-radius-full);
+    min-width: var(--m-control-height-medium);
+    padding-inline: 0;
+    width: var(--m-control-height-medium);
+}
+
+.m-button--shape-circle.m-button--small {
+    min-width: var(--m-control-height-small);
+    width: var(--m-control-height-small);
+}
+
+.m-button--shape-circle.m-button--large {
+    min-width: var(--m-control-height-large);
+    width: var(--m-control-height-large);
+}
+
+.m-button--shape-round {
+    border-radius: var(--m-radius-full);
+    padding-inline: calc(var(--m-button-padding-x-medium) + var(--m-space-2));
+}
+
+.m-button--shape-square {
+    border-radius: 0;
+}
+
+.m-button--dashed {
+    background: var(--m-color-surface);
+    border-style: dashed;
+    color: var(--m-color-text);
+}
+
+.m-button--dashed:not(:disabled):hover {
+    border-color: var(--m-color-primary-hover);
+    color: var(--m-color-primary-hover);
+}
+
+.m-button--primary.m-button--dashed {
+    --m-button-bg: var(--m-color-surface);
+    --m-button-fg: var(--m-color-primary);
+    --m-button-border: var(--m-color-primary);
+    --m-button-hover-bg: var(--m-color-surface);
+    --m-button-hover-fg: var(--m-color-primary-hover);
+    --m-button-hover-border: var(--m-color-primary-hover);
+    --m-button-active-bg: var(--m-color-surface);
+}
+
+.m-button--secondary.m-button--dashed {
+    --m-button-bg: var(--m-color-surface);
+    --m-button-fg: var(--m-color-text);
+    --m-button-border: var(--m-color-border);
+    --m-button-hover-bg: var(--m-color-surface);
+    --m-button-hover-fg: var(--m-color-primary-hover);
+    --m-button-hover-border: var(--m-color-primary-hover);
+}
+
+.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-icon {
     color: currentColor;
     display: inline-flex;
@@ -1285,6 +2342,24 @@
     font-size: var(--m-font-size-md);
 }
 
+.m-toast__heading {
+    align-items: center;
+    display: flex;
+    gap: var(--m-space-2);
+}
+
+.m-toast__icon {
+    color: var(--m-color-primary);
+    flex: none;
+}
+
+.m-toast__actions {
+    align-items: center;
+    display: flex;
+    gap: var(--m-space-2);
+    margin-top: var(--m-space-1);
+}
+
 .m-toast__content p {
     color: var(--m-color-text-muted);
     font-size: var(--m-font-size-xs);