@rcarls/rc-theme-material 0.5.0 → 0.7.0

package/components/button.css

@@ -16,6 +16,7 @@
     --rc-button-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
     --rc-button-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
     --rc-button-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --rc-button-state-layer-duration: var(--rc-motion-effects-duration-fast, 150ms);
     --rc-button-state-layer-easing: var(
       --md-sys-motion-easing-standard,
       cubic-bezier(0.2, 0, 0, 1)
@@ -23,12 +24,104 @@
     --_rc-button-ripple-enabled: 1;
     --_rc-button-ripple-color: var(--md-sys-color-on-primary, currentColor);
     --_rc-button-ripple-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
-    --_rc-button-ripple-duration: var(--md-sys-motion-duration-long1, 450ms);
+    --_rc-button-ripple-duration: var(--rc-motion-spatial-duration-slow, 500ms);
     --_rc-button-ripple-easing: var(
       --md-sys-motion-easing-emphasized-decelerate,
       cubic-bezier(0.05, 0.7, 0.1, 1)
     );
     --rc-button-progress-color: var(--md-sys-color-on-primary, ButtonText);
+    --rc-button-disabled-opacity: var(--rc-disabled-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--tonal {
+    --rc-button-bg: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-secondary-container, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-secondary-container, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-secondary-container, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--outlined {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-primary, ButtonText);
+    --rc-button-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-button-state-layer-bg: var(--md-sys-color-primary, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-primary, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-primary, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--text {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-primary, ButtonText);
+    --rc-button-border: 0;
+    --rc-button-padding-inline: 0.75rem;
+    --rc-button-state-layer-bg: var(--md-sys-color-primary, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-primary, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-primary, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-icon-button--standard[icon-only] {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: var(--md-sys-color-on-surface-variant, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-surface-variant, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-surface-variant, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-icon-button--tonal[icon-only] {
+    --rc-button-bg: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-secondary-container, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-secondary-container, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-secondary-container, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-icon-button--outlined[icon-only] {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-button-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-surface-variant, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-surface-variant, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-surface-variant, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button[data-tone='danger'] {
+    --rc-button-bg: var(--md-sys-color-error, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-error, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-error, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-error, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-error, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button:is(
+      .rc-button--tonal,
+      .rc-button--outlined,
+      .rc-button--text,
+      .rc-icon-button--standard,
+      .rc-icon-button--tonal,
+      .rc-icon-button--outlined
+    )[data-tone='danger'] {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-error, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-error, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-error, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-error, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button:is(.rc-button--tonal, .rc-icon-button--tonal)[data-tone='danger'] {
+    --rc-button-bg: var(--md-sys-color-error-container, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-error-container, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-error-container, currentColor);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button:is(.rc-button--outlined, .rc-icon-button--outlined)[data-tone='danger'] {
+    --rc-button-border: 1px solid var(--md-sys-color-error, ButtonBorder);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-button > button:focus-visible {
@@ -51,7 +144,127 @@
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-button[icon-only] {
+    /* MD3 expressive "Small" icon button (the default/unmodified size): a
+       40dp square container around a 24dp icon. rc-button's own touch-target
+       affordance (min-inline/block-size 3rem, plus the light-DOM hit-slop)
+       makes up the difference to the 48dp minimum tap target on its own; no
+       theme-level override is needed for that here. */
+    --rc-button-icon-size: 2.5rem;
+    --rc-icon-button-icon-font-size: 1.5rem;
+  }
+
+  /*
+   * MD3 expressive icon-button sizes. Each sets both the square container
+   * (`--rc-button-block-size`/`--rc-button-icon-size`, since `icon-only`'s
+   * default width equals its height) and the icon glyph size together, so
+   * the two stay in the spec's fixed ratio instead of drifting independently.
+   * Values: https://m3.material.io/components/icon-buttons/specs (container
+   * height / icon size, dp): extra-small 32/20, small 40/24 (above, default),
+   * medium 56/24, large 96/32, extra-large 136/40.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-small[icon-only] {
+    --rc-button-block-size: 2rem;
+    --rc-button-icon-size: 2rem;
+    --rc-icon-button-icon-font-size: 1.25rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--medium[icon-only] {
+    --rc-button-block-size: 3.5rem;
+    --rc-button-icon-size: 3.5rem;
+    --rc-icon-button-icon-font-size: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--large[icon-only] {
+    --rc-button-block-size: 6rem;
+    --rc-button-icon-size: 6rem;
+    --rc-icon-button-icon-font-size: 2rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-large[icon-only] {
+    --rc-button-block-size: 8.5rem;
+    --rc-button-icon-size: 8.5rem;
+    --rc-icon-button-icon-font-size: 2.5rem;
+  }
+
+  /*
+   * Width variants change only the container's inline size; block size (and
+   * the icon itself) stay governed by the size class above, or the default
+   * "small" size when none is present. `narrow` suits dense/overflow
+   * contexts (an app bar's trailing overflow trigger); `wide` suits roomier
+   * toolbars that can spare the extra tap-friendly width. Per-size pairing
+   * is required because each size's narrow/wide delta is a fixed spec value,
+   * not a proportional one.
+   */
+  /*
+   * The overlap tokens below give back exactly what --rc-button-icon-size
+   * leaves unclaimed of the 3rem default touch target ((3rem - icon-size) /
+   * 2, matching the button's own centered inflation) -- the narrow variant's
+   * documented reason for existing is dense/edge contexts, so this is a
+   * default here, not left for every consumer to compute and set
+   * individually. Trailing-edge only: narrow's own doc comment names an app
+   * bar's *trailing* overflow trigger as the canonical case, and defaulting
+   * only one side halves the risk of two adjacent narrow buttons' touch
+   * targets colliding if a consumer places one where it does have a real
+   * neighbor. Medium/large/extra-large narrow variants already meet or
+   * exceed the touch target on their own (see each size's own comment
+   * above), so they need no overlap default here.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-small.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 1.75rem;
+    --rc-button-touch-target-overlap-inline-end: 0.625rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-small.rc-button--wide[icon-only] {
     --rc-button-icon-size: 2.5rem;
-    --rc-icon-font-line-height: var(--rc-button-icon-size, 2.5rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 2rem;
+    --rc-button-touch-target-overlap-inline-end: 0.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 3.25rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--medium.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 3rem;
+    /* Already meets the 3rem default touch target on its own; the bare
+       .rc-button--narrow[icon-only] rule's overlap default still matches
+       here too (class selectors don't exclude each other), so it needs an
+       explicit reset. */
+    --rc-button-touch-target-overlap-inline-end: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--medium.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 4.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--large.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 4rem;
+    --rc-button-touch-target-overlap-inline-end: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--large.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 8rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-large.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 6.5rem;
+    --rc-button-touch-target-overlap-inline-end: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-large.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 11.5rem;
   }
 }

package/components/card.css

@@ -21,6 +21,8 @@
     --rc-card-state-layer-bg: var(--md-sys-color-on-surface, currentColor);
     --rc-card-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
     --rc-card-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --rc-card-state-layer-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-card-state-layer-easing: var(--md-sys-motion-easing-standard, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-card[selected] {

package/components/carousel.css

@@ -0,0 +1,23 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-carousel {
+    --rc-carousel-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-carousel-navigation-button-background: color-mix(
+      in srgb,
+      var(--md-sys-color-surface, Canvas) 75%,
+      transparent
+    );
+    --rc-carousel-navigation-button-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-carousel-pagination-item-color: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 40%,
+      transparent
+    );
+    --rc-carousel-pagination-item-active-color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-carousel-item {
+    --rc-carousel-item-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-carousel-item-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-carousel-item-border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+  }
+}

package/components/chip-group.css

@@ -0,0 +1,15 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-chip-group {
+    --rc-chip-group-column-gap: 0.5rem;
+    --rc-chip-group-row-gap: 0;
+    --rc-chip-group-padding-block: 0;
+    --rc-chip-group-scroll-padding-inline: 0;
+    --rc-chip-group-scrollbar-width: none;
+    --rc-chip-group-toggle-gap: 0.5rem;
+    --rc-chip-group-toggle-separator-gap: 0.5rem;
+    --rc-chip-group-toggle-icon-size: 1.125rem;
+    --rc-chip-group-toggle-separator-block-size: 1.5rem;
+    --rc-chip-group-toggle-separator-inline-size: 1px;
+    --rc-chip-group-toggle-separator-color: var(--md-sys-color-outline-variant, currentColor);
+  }
+}

package/components/chip.css

@@ -3,11 +3,17 @@
     --rc-chip-block-size: 2rem;
     --rc-chip-gap: 0px;
     --rc-chip-padding-inline: 1rem;
+    --rc-chip-padding-inline-start: var(--rc-chip-padding-inline);
+    --rc-chip-padding-inline-end: var(--rc-chip-padding-inline);
     --rc-chip-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
     --rc-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
     --rc-chip-bg: var(--md-sys-color-surface-container-low, ButtonFace);
     --rc-chip-color: var(--md-sys-color-on-surface-variant, ButtonText);
-    --rc-chip-font: inherit;
+    --rc-chip-font: var(--md-sys-typescale-label-large-weight, 500)
+      var(--md-sys-typescale-label-large-size, 0.875rem) /
+      var(--md-sys-typescale-label-large-line-height, 1.25rem)
+      var(--md-sys-typescale-label-large-font, inherit);
+    --rc-chip-padding-block: 0;
     --rc-chip-text-decoration: none;
     --rc-chip-selected-border-color: transparent;
     --rc-chip-selected-bg: var(--md-sys-color-secondary-container, Highlight);
@@ -25,4 +31,9 @@
     --rc-chip-remove-target-size: 1.5rem;
     --rc-chip-remove-offset-inline: 0.25rem;
   }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-chip:has([data-rc-chip-icon]) {
+    --rc-chip-gap: 0.5rem;
+    --rc-chip-padding-inline-start: 0.5rem;
+  }
 }

package/components/combobox.css

@@ -2,9 +2,12 @@
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor) {
     box-sizing: border-box;
     transition:
-      border-color 150ms ease,
-      box-shadow 150ms ease,
-      background-color 150ms ease;
+      border-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      box-shadow var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):hover {
@@ -28,6 +31,27 @@
     color: var(--md-sys-color-on-surface-variant, ButtonText);
   }
 
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chips) {
+    --rc-chip-block-size: 2rem;
+    --rc-chip-touch-target-block-size: 3rem;
+    --rc-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-chip-remove-target-size: 1.5rem;
+  }
+
+  /*
+   * Dense chips fit one chip row on the field's single input line, so a
+   * populated field keeps the unified 56px height. The touch target is
+   * unchanged.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox.rc-combobox--dense::part(chips) {
+    --rc-chip-block-size: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox.rc-combobox--dense::part(chip) {
+    min-block-size: 1.5rem;
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle) {
     border-radius: var(--md-sys-shape-corner-full, 999px);
     color: var(
@@ -35,8 +59,9 @@
       var(--md-sys-color-on-surface-variant, CanvasText)
     );
     transition:
-      color 150ms ease,
-      background-color 150ms ease;
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease),
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle):hover {
@@ -59,26 +84,55 @@
     color: var(--md-sys-color-on-surface-variant, CanvasText);
   }
 
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox[popup-mode='dialog']::part(dialog-search) {
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
+    font-family: var(--md-sys-typescale-label-medium-font, inherit);
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox[popup-mode='dialog']::part(dialog-input) {
+    min-block-size: 3.5rem;
+    padding-inline: 1rem;
+    border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    background: transparent;
+    color: var(--md-sys-color-on-surface, FieldText);
+    font-family: var(--md-sys-typescale-body-large-font, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
+
+    &:focus-visible {
+      border-color: var(--md-sys-color-primary, Highlight);
+      box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
+    }
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox[popup-mode='dialog']::part(dialog-listbox) {
+    min-block-size: 0;
+    padding-block: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
   /*
    * Propagate Material styles to the embedded rc-listbox host. rc-listbox renders
    * options into its own light DOM inside rc-combobox's shadow root, so inherited
    * custom properties are the stable styling contract for option rows.
    */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(listbox) {
-    background: var(--md-menu-container-color, var(--md-sys-color-surface-container, Canvas));
-    color: var(--md-sys-color-on-surface, CanvasText);
-    font-family: var(--md-sys-typescale-body-large-font, inherit);
-    font-size: var(--md-sys-typescale-body-large-size, 1rem);
-    line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
-    padding-block: 0.5rem;
-    border-radius: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 0.25rem));
-
     /* Option sizing */
     --rc-listbox-option-gap: var(--rc-list-item-gap, 0.75rem);
     --rc-listbox-option-min-block-size: 3rem;
     --rc-listbox-option-padding-block: 0;
     --rc-listbox-option-padding-inline: 0.75rem;
-    --rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
+    --rc-listbox-option-transition:
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease);
 
     /* M3 hover state layer (8% on-surface) instead of secondary-container */
     --rc-highlight: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);

package/components/dialog.css

@@ -1,26 +1,88 @@
 @layer rc-theme-material.components {
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog {
-    max-inline-size: min(35rem, calc(100vw - 3rem));
-    padding: 1.5rem;
-    border: 0;
-    border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
-    background: var(--md-sys-color-surface-container-high, Canvas);
-    color: var(--md-sys-color-on-surface, CanvasText);
-    box-shadow: var(--rc-shadow-level3, var(--rc-shadow, none));
-    font-family: var(--md-sys-typescale-body-medium-font, inherit);
+  /*
+   * Maps Material tokens onto the public rc-dialog properties. The surface and
+   * the fullscreen geometry are drawn by the component's own light-DOM base
+   * layer, including the explicit block bound and overflow that keep a tall
+   * dialog's corners clipping correctly in Chromium.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog {
+    --rc-dialog-min-inline-size: min(17.5rem, calc(100vw - 3rem));
+    --rc-dialog-max-inline-size: min(35rem, calc(100vw - 3rem));
+    --rc-dialog-max-block-size: calc(100dvh - 3rem);
+    --rc-dialog-padding: 1.5rem;
+    --rc-dialog-border: 0;
+    --rc-dialog-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
+    --rc-dialog-background: var(--md-sys-color-surface-container-high, Canvas);
+    --rc-dialog-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-dialog-shadow: var(--rc-shadow-level3, var(--rc-shadow, none));
+    --rc-dialog-scrim: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
+
+    /* Material 3 full-screen dialog: the page surface, like its top app bar. */
+    --rc-dialog-fullscreen-background: var(--md-sys-color-surface, Canvas);
+
+    /* Material 3 modal side sheet: a low container at level 1, rounded on its leading edge. */
+    --rc-dialog-side-background: var(--md-sys-color-surface-container-low, Canvas);
+    --rc-dialog-side-radius: var(--md-sys-shape-corner-large, 1rem);
+    --rc-dialog-side-shadow: var(--rc-shadow-level1, var(--rc-shadow, none));
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog::backdrop {
-    background: var(
-      --rc-dialog-scrim,
-      color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent)
-    );
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog {
+    font-family: var(--md-sys-typescale-body-medium-font, inherit);
   }
 
+  /*
+   * Fallback styling for plain, unwrapped buttons in dialog content or
+   * actions. Descendants of a defined custom element are excluded because
+   * that wrapper owns its native control's presentation. The :where() list
+   * identifies native grouping elements that commonly organize dialog
+   * content; unlike autonomous custom elements, they should not suppress
+   * the fallback treatment.
+   */
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-dialog
     > dialog
-    :is(button, [role='button']) {
+    :is(button, [role='button']):not(
+      rc-dialog
+        > dialog
+        :defined:not(
+          :where(
+            address,
+            article,
+            aside,
+            blockquote,
+            dd,
+            details,
+            div,
+            dl,
+            dt,
+            fieldset,
+            figcaption,
+            figure,
+            footer,
+            form,
+            header,
+            hgroup,
+            li,
+            main,
+            menu,
+            nav,
+            ol,
+            p,
+            search,
+            section,
+            span,
+            table,
+            tbody,
+            td,
+            tfoot,
+            th,
+            thead,
+            tr,
+            ul
+          )
+        )
+        *
+    ) {
     min-block-size: 2.5rem;
     padding-inline: 1.5rem;
     border: 0;