@rcarls/rc-theme-material 0.6.0 → 0.7.0

package/components/adaptive-menu.css

@@ -1,5 +1,9 @@
 @layer rc-theme-material.components {
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-adaptive-menu {
+  /*
+   * Declared on the theme root rather than on rc-adaptive-menu so menus
+   * rendered inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
     --rc-adaptive-menu-gap: 0;
     --rc-adaptive-menu-trigger-inline-size: 2rem;
     --rc-adaptive-menu-trigger-block-size: 2.5rem;
@@ -19,42 +23,20 @@
     --rc-adaptive-menu-trigger-radius: var(--md-sys-shape-corner-full, 9999px);
     --rc-adaptive-menu-trigger-background: transparent;
     --rc-adaptive-menu-trigger-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-adaptive-menu-trigger-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
     --rc-adaptive-menu-icon-size: 1.5rem;
     --rc-adaptive-menu-popup-min-inline-size: 7rem;
-    --rc-adaptive-menu-popup-padding-block: 0.5rem;
-    --rc-adaptive-menu-popup-border: 0;
-    --rc-adaptive-menu-popup-radius: var(
-      --md-menu-container-shape,
-      var(--md-sys-shape-corner-extra-small, 0.25rem)
-    );
-    --rc-adaptive-menu-popup-background: var(
-      --md-menu-container-color,
-      var(--md-sys-color-surface-container, Canvas)
-    );
-    --rc-adaptive-menu-popup-color: var(--md-sys-color-on-surface, CanvasText);
-    --rc-adaptive-menu-popup-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
     --rc-adaptive-menu-item-min-block-size: 3rem;
     --rc-adaptive-menu-item-padding-block: 0;
     --rc-adaptive-menu-item-padding-inline: 0.75rem;
     --rc-adaptive-menu-item-gap: 0.75rem;
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-adaptive-menu::part(overflow-trigger):hover {
-    background: color-mix(
-      in srgb,
-      var(--md-sys-color-on-surface-variant, CanvasText)
-        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
-      transparent
-    );
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-adaptive-menu::part(overflow-trigger):focus-visible {
-    outline: var(--rc-focus-ring, 2px solid Highlight);
-    outline-offset: var(--rc-focus-ring-offset, 2px);
-  }
-
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-adaptive-menu
     > [data-rc-action-promoted]:has([data-rc-menu-leading])
@@ -82,81 +64,60 @@
     > [slot='indicator'] {
     display: none;
   }
+}
 
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-adaptive-menu
-    > [data-rc-action-overflowed] {
-    inline-size: 100%;
-    color: var(--md-sys-color-on-surface, CanvasText);
-  }
-
+/*
+ * An action rc-adaptive-menu moves into its overflow renders as a menu row.
+ * rc-adaptive-menu maps the action's own tokens onto its item tokens in rc-base,
+ * which sits below every theme layer, so this layer repeats the mapping above the
+ * theme's button and menu-button variants (filled, tonal, icon-only sizes, and so
+ * on) that would otherwise restyle the row as a standalone control.
+ */
+@layer rc-theme-material.overrides {
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-adaptive-menu
     > rc-button[data-rc-action-overflowed] {
-    display: block;
-    min-inline-size: 100%;
-    min-block-size: 0;
-    --rc-button-block-size: 3rem;
+    --rc-button-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
     --rc-button-icon-size: 100%;
     --rc-button-touch-target-inline-size: 100%;
-    --rc-button-touch-target-block-size: 3rem;
-    --rc-button-padding-inline: 0.75rem;
-    --rc-button-padding-block: 0;
+    --rc-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-button-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
     --rc-button-radius: 0;
     --rc-button-bg: transparent;
-    --rc-button-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-button-color: currentColor;
     --rc-button-border: 0;
-    --rc-button-state-layer-bg: var(--md-sys-color-on-surface, CanvasText);
-    --rc-button-progress-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-button-state-layer-bg: currentColor;
+    --rc-button-progress-color: currentColor;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-adaptive-menu
     > rc-menu-button[data-rc-action-overflowed] {
-    display: block;
-    min-inline-size: 100%;
-    min-block-size: 0;
-    --rc-menu-button-trigger-block-size: 3rem;
+    --rc-menu-button-trigger-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
     --rc-menu-button-icon-size: 100%;
     --rc-menu-button-touch-target-inline-size: 100%;
-    --rc-menu-button-touch-target-block-size: 3rem;
-    --rc-menu-button-trigger-padding-block: 0;
-    --rc-menu-button-trigger-padding-inline: 0.75rem;
-    --rc-menu-button-trigger-gap: 0.75rem;
+    --rc-menu-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-trigger-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-menu-button-trigger-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-menu-button-trigger-gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
     --rc-menu-button-trigger-radius: 0;
     --rc-menu-button-trigger-border: 0;
     --rc-menu-button-trigger-background: transparent;
-    --rc-menu-button-trigger-color: var(--md-sys-color-on-surface, CanvasText);
-    --rc-menu-button-trigger-hover-color: var(--md-sys-color-on-surface, CanvasText);
-    --rc-menu-button-trigger-open-color: var(--md-sys-color-on-surface, CanvasText);
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-adaptive-menu
-    > rc-menu-button[data-rc-action-overflowed]
-    > [slot='trigger'] {
-    justify-content: flex-start;
-    inline-size: 100%;
-    min-inline-size: 100%;
-    padding-inline: 0.75rem;
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-adaptive-menu
-    > [data-rc-action-overflowed]
-    [data-rc-menu-label] {
-    font: var(--md-sys-typescale-body-large-weight, 400)
-      var(--md-sys-typescale-body-large-size, 1rem) /
-      var(--md-sys-typescale-body-large-line-height, 1.5rem)
-      var(--md-sys-typescale-body-large-font, inherit);
-    letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.03125rem);
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-adaptive-menu
-    > [data-rc-action-overflowed]
-    [data-rc-menu-leading] {
-    font-size: 1.5rem;
-    line-height: 1.5rem;
+    --rc-menu-button-trigger-color: currentColor;
+    --rc-menu-button-trigger-hover-color: currentColor;
+    --rc-menu-button-trigger-open-color: currentColor;
   }
 }

package/components/app-bar.css

@@ -3,8 +3,10 @@
     box-shadow: var(--rc-shadow-level0, none);
     font-family: var(--md-sys-typescale-title-large-font, inherit);
     transition:
-      box-shadow 200ms ease,
-      translate 200ms ease;
+      box-shadow var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-motion-effects-easing-default, ease),
+      translate var(--rc-motion-spatial-duration-default, 400ms)
+        var(--rc-motion-spatial-easing-default, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar[data-scrolled] {

package/components/bottom-sheet.css

@@ -8,7 +8,7 @@
     );
     --rc-bottom-sheet-handle-radius: var(--md-sys-shape-corner-full, 999px);
     --rc-bottom-sheet-handle-target-block-size: 3rem;
-    --rc-bottom-sheet-snap-duration: var(--rc-motion-spatial-duration-default, 500ms);
+    --rc-bottom-sheet-snap-duration: var(--rc-motion-spatial-duration-fast, 300ms);
     --rc-bottom-sheet-snap-easing: var(
       --rc-motion-spatial-easing-default,
       cubic-bezier(0.2, 0, 0, 1)
@@ -69,7 +69,7 @@
     [data-rc-bottom-sheet-handle]::before {
     content: '';
     position: absolute;
-    inset-block-start: 50%;
+    inset-block-start: var(--rc-bottom-sheet-handle-offset, 50%);
     inset-inline-start: 50%;
     inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
     block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);

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,7 +24,7 @@
     --_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)

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/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 {
@@ -35,6 +38,20 @@
     --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(
@@ -42,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 {
@@ -66,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,32 +1,33 @@
 @layer rc-theme-material.components {
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog {
-    max-inline-size: min(35rem, calc(100vw - 3rem));
-    /* A native <dialog>'s own default max-block-size/overflow:auto is what
-     * would otherwise constrain a tall dialog's height, but Chromium does
-     * not reliably clip a scrolling element's own border-radius once it
-     * actually needs to scroll (confirmed: a short dialog renders correctly
-     * rounded on every edge; the same dialog forced to overflow its
-     * available height loses the radius on whichever edge sits at the
-     * scroll boundary). Setting an explicit max-block-size plus
-     * overflow: hidden here replaces that reliance: this outer surface
-     * never itself scrolls, so its own corners always clip correctly, and
-     * a scrollable dialog instead scrolls a dedicated inner region. */
-    max-block-size: calc(100dvh - 3rem);
-    overflow: hidden;
-    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);
   }
 
   /*