@rcarls/rc-theme-material 0.6.0 → 0.7.0

package/components/listbox.css

@@ -8,15 +8,16 @@
       0 2px 6px 2px rgba(0, 0, 0, 0.15);
     padding-block: 0.5rem;
     overflow-y: auto;
+    overflow-block: auto;
     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);
     --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);
     --rc-listbox-hover-bg: color-mix(
       in srgb,
       var(--md-sys-color-on-surface, CanvasText) 8%,

package/components/markdown-editor.css

@@ -1,42 +1,69 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-markdown-editor {
-    --rme-background: var(--md-sys-color-surface, Canvas);
-    --rme-color: var(--md-sys-color-on-surface, CanvasText);
-    --rme-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
-    --rme-border-radius: 0 0 var(--md-sys-shape-corner-small, 0.5rem)
+    --rc-markdown-editor-background: var(--md-sys-color-surface, Canvas);
+    --rc-markdown-editor-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-markdown-editor-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-border-radius: 0 0 var(--md-sys-shape-corner-small, 0.5rem)
       var(--md-sys-shape-corner-small, 0.5rem);
-    --rme-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
-    --rme-padding: 1rem;
-    --rme-toolbar-gap: 0.25rem;
-    --rme-toolbar-button-size: 2.5rem;
-    --rme-toolbar-padding: 0.25rem;
-    --rme-toolbar-radius: var(--md-sys-shape-corner-small, 0.5rem)
+    --rc-markdown-editor-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-markdown-editor-padding: 1rem;
+    --rc-markdown-editor-toolbar-gap: 0.25rem;
+    --rc-markdown-editor-toolbar-button-size: 2.5rem;
+    --rc-markdown-editor-toolbar-padding: 0.25rem;
+    --rc-markdown-editor-toolbar-radius: var(--md-sys-shape-corner-small, 0.5rem)
       var(--md-sys-shape-corner-small, 0.5rem) 0 0;
-    --rme-toolbar-background: var(--md-sys-color-surface-container, Canvas);
-    --rme-toolbar-color: var(--md-sys-color-on-surface, CanvasText);
-    --rme-toolbar-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
-    --rme-toolbar-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
-    --rme-toolbar-button-border: 0;
-    --rme-toolbar-button-radius: var(--md-sys-shape-corner-full, 999px);
-    --rme-toolbar-button-active-background: var(--md-sys-color-secondary-container, Highlight);
-    --rme-toolbar-button-active-color: var(--md-sys-color-on-secondary-container, HighlightText);
-    --rme-toolbar-button-active-border: 0;
-    --rme-toolbar-button-hover-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
-    --rme-toolbar-button-focus-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
-    --rme-toolbar-button-pressed-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
-    --rme-toolbar-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
-    --rme-toolbar-focus-outline-offset: 1px;
-    --rme-toolbar-select-background: var(--md-sys-color-surface-container-highest, Field);
-    --rme-toolbar-select-color: var(--md-sys-color-on-surface, FieldText);
-    --rme-toolbar-select-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
-    --rme-toolbar-select-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
-    --rme-toolbar-select-active-background: var(--md-sys-color-secondary-container, Highlight);
-    --rme-toolbar-select-active-color: var(--md-sys-color-on-secondary-container, HighlightText);
-    --rme-toolbar-select-active-border-color: var(--md-sys-color-primary, Highlight);
-    --rme-toolbar-input-background: var(--md-sys-color-surface-container-highest, Field);
-    --rme-toolbar-input-color: var(--md-sys-color-on-surface, FieldText);
-    --rme-toolbar-input-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
-    --rme-toolbar-input-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-markdown-editor-toolbar-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-markdown-editor-toolbar-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-markdown-editor-toolbar-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-toolbar-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-markdown-editor-toolbar-button-border: 0;
+    --rc-markdown-editor-toolbar-button-radius: var(--md-sys-shape-corner-full, 999px);
+    --rc-markdown-editor-toolbar-button-active-background: var(
+      --md-sys-color-secondary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-button-active-color: var(
+      --md-sys-color-on-secondary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-button-active-border: 0;
+    --rc-markdown-editor-toolbar-button-hover-opacity: var(
+      --md-sys-state-hover-state-layer-opacity,
+      0.08
+    );
+    --rc-markdown-editor-toolbar-button-focus-opacity: var(
+      --md-sys-state-focus-state-layer-opacity,
+      0.12
+    );
+    --rc-markdown-editor-toolbar-button-pressed-opacity: var(
+      --md-sys-state-pressed-state-layer-opacity,
+      0.12
+    );
+    --rc-markdown-editor-toolbar-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-markdown-editor-toolbar-focus-outline-offset: 1px;
+    --rc-markdown-editor-toolbar-select-background: var(
+      --md-sys-color-surface-container-highest,
+      Field
+    );
+    --rc-markdown-editor-toolbar-select-color: var(--md-sys-color-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-select-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-toolbar-select-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-markdown-editor-toolbar-select-active-background: var(
+      --md-sys-color-secondary-container,
+      Highlight
+    );
+    --rc-markdown-editor-toolbar-select-active-color: var(
+      --md-sys-color-on-secondary-container,
+      HighlightText
+    );
+    --rc-markdown-editor-toolbar-select-active-border-color: var(--md-sys-color-primary, Highlight);
+    --rc-markdown-editor-toolbar-input-background: var(
+      --md-sys-color-surface-container-highest,
+      Field
+    );
+    --rc-markdown-editor-toolbar-input-color: var(--md-sys-color-on-surface, FieldText);
+    --rc-markdown-editor-toolbar-input-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-markdown-editor-toolbar-input-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-markdown-editor::part(rich-view) {

package/components/menu-button.css

@@ -7,7 +7,10 @@
     --rc-menu-button-trigger-border: 0;
     --rc-menu-button-trigger-background: transparent;
     --rc-menu-button-trigger-color: var(--md-sys-color-primary, ButtonText);
-    --rc-menu-button-trigger-transition: background-color 150ms ease, color 150ms ease;
+    --rc-menu-button-trigger-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);
     --rc-menu-button-trigger-hover-background: color-mix(
       in srgb,
       var(--md-sys-color-primary, Highlight) 8%,

package/components/menu.css

@@ -1,24 +1,19 @@
 @layer rc-theme-material.components {
-  /* Container + token overrides ------------------------------------------- */
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu {
-    background: var(--md-menu-container-color, var(--md-sys-color-surface-container, Canvas));
-    border: none;
-    border-radius: var(--md-menu-container-shape, 4px);
-    box-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.3),
-      0 2px 6px 2px rgba(0, 0, 0, 0.15);
-    padding-block: 0.5rem;
-    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);
-
+  /*
+   * Token overrides. The container comes from the bridge's --rc-popup-* and
+   * --rc-item-* tokens. Declared on the theme root rather than on rc-menu so
+   * menus rendered inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
     /* Item geometry — M3 menu item: 48dp height, 12dp h-padding, 12dp gap */
     --rc-menu-item-min-block-size: 3rem;
     --rc-menu-item-padding-block: 0;
     --rc-menu-item-padding-inline: 0.75rem;
     --rc-menu-item-gap: 0.75rem;
-    --rc-menu-item-transition: background-color 150ms ease, color 150ms ease;
+    --rc-menu-item-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);
 
     /* State layers derived from on-surface (M3: 8% hover, 12% keyboard cursor) */
     --rc-menu-hover-bg: color-mix(
@@ -71,28 +66,20 @@
     border-radius: 0;
   }
 
-  /*
-   * Sizes an item's own leading icon to the M3 menu leading-icon size.
-   * Unlike an icon-only rc-button, a menu item routinely combines an icon
-   * *and* a label (they aren't mutually exclusive), so "first child" isn't
-   * a safe stand-in for "the icon" here the way it is there — this only
-   * sizes content the consumer has actually marked as an icon.
-   */
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-menu
-    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])
-    :is([data-rc-icon], [data-rc-menu-leading], [data-rc-menu-icon]) {
-    flex: none;
-    font-size: 1.5rem;
-    line-height: 1.5rem;
-  }
-
   /* Current item (navigation active / selected radio row) gets secondary-container */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu [aria-current='true'] {
     background: var(--md-sys-color-secondary-container, Highlight);
     color: var(--md-sys-color-on-secondary-container, HighlightText);
   }
 
+  /* M3 single-choice menus use the same trailing check affordance as other
+   * selected menu rows; role=menuitemradio continues to carry semantics. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    [role='menuitemradio'][aria-checked='true']::after {
+    content: '✓';
+  }
+
   /* Section / group labels (optional, for menu segmentation) -------------- */
   /* Add [data-group-label] as first child of role="group" for a visible heading. */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu [data-group-label] {

package/components/menubar.css

@@ -11,7 +11,10 @@
     --rc-menubar-item-radius: var(--md-sys-shape-corner-full, 999px);
     --rc-menubar-item-background: transparent;
     --rc-menubar-item-color: var(--md-sys-color-primary, CanvasText);
-    --rc-menubar-item-transition: background-color 150ms ease, color 150ms ease;
+    --rc-menubar-item-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);
     --rc-menubar-item-hover-background: color-mix(
       in srgb,
       var(--md-sys-color-primary, Highlight) 8%,

package/components/modes.css

@@ -1,10 +1,27 @@
 @layer rc-theme-material.components {
+  /*
+   * The vestibular harm reduced motion guards against is movement across the
+   * visual field: a cross-fade or a color change doesn't trigger it, so
+   * removing every transition (the previous *, !important sweep) over-
+   * corrected, and it also silently removed the ones that aid comprehension.
+   * Spatial motion still goes to zero; effects motion is kept but shortened,
+   * which the spatial/effects split makes expressible for the first time.
+   * Values are read as custom properties rather than reasserted with
+   * !important, so this only reaches whatever already consumes the shared
+   * motion tokens or the Material duration primitives. Components that
+   * still handle prefers-reduced-motion with their own blunt sweep are
+   * refined in their own component styles; this file no longer
+   * compensates for that with a second, theme-wide !important override.
+   */
   @media (prefers-reduced-motion: reduce) {
-    :where(.rc-theme-material, :host(.rc-theme-material)) *,
-    :where(.rc-theme-material, :host(.rc-theme-material)) *::before,
-    :where(.rc-theme-material, :host(.rc-theme-material)) *::after {
-      transition-duration: 0s !important;
-      animation-duration: 0s !important;
+    :where(.rc-theme-material, :host(.rc-theme-material)) {
+      --rc-motion-spatial-duration-fast: 0ms;
+      --rc-motion-spatial-duration-default: 0ms;
+      --rc-motion-spatial-duration-slow: 0ms;
+      --rc-motion-effects-duration-fast: 50ms;
+      --rc-motion-effects-duration-default: 70ms;
+      --rc-motion-effects-duration-slow: 100ms;
+      --rc-motion-duration: var(--rc-motion-effects-duration-default);
     }
   }
 

package/components/navigation-bar.css

@@ -15,11 +15,9 @@
     --rc-navigation-bar-indicator-bg: var(--md-sys-color-secondary-container, Highlight);
     --rc-navigation-bar-indicator-border: 0;
     --rc-navigation-bar-indicator-radius: var(--md-sys-shape-corner-full, 9999px);
-    --rc-navigation-bar-indicator-duration: var(--md-sys-motion-duration-short3, 150ms);
-    --rc-navigation-bar-indicator-easing: var(
-      --md-sys-motion-easing-standard,
-      cubic-bezier(0.2, 0, 0, 1)
-    );
+    /* The indicator resizes to the selected item's box, which is spatial motion. */
+    --rc-navigation-bar-indicator-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-navigation-bar-indicator-easing: var(--rc-motion-spatial-easing-fast, ease);
     --rc-icon-font-line-height: 2rem;
     --rc-navigation-bar-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
     --rc-navigation-bar-focus-ring-offset: 2px;

package/components/navigation-rail.css

@@ -22,13 +22,11 @@
     --rc-navigation-rail-indicator-radius: var(--md-sys-shape-corner-full, 9999px);
     --rc-navigation-rail-toggle-size: 3rem;
     --rc-navigation-rail-toggle-inline-offset: 1rem;
-    --rc-navigation-rail-duration: var(--md-sys-motion-duration-medium2, 300ms);
-    --rc-navigation-rail-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-    --rc-navigation-rail-indicator-duration: var(--md-sys-motion-duration-short3, 150ms);
-    --rc-navigation-rail-indicator-easing: var(
-      --md-sys-motion-easing-standard,
-      cubic-bezier(0.2, 0, 0, 1)
-    );
+    --rc-navigation-rail-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-navigation-rail-easing: var(--rc-motion-spatial-easing-fast, ease);
+    /* The indicator resizes to the selected item's box, which is spatial motion. */
+    --rc-navigation-rail-indicator-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-navigation-rail-indicator-easing: var(--rc-motion-spatial-easing-fast, ease);
     --rc-icon-font-line-height: 2rem;
     --rc-navigation-rail-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
     --rc-navigation-rail-focus-ring-offset: 2px;

package/components/popover.css

@@ -0,0 +1,50 @@
+@layer rc-theme-material.components {
+  /*
+   * The surface color, text color, and border come from the bridge's
+   * --rc-popup-* tokens. Only the popover's own corner and elevation differ
+   * from a menu container. Declared on the theme root so popovers rendered
+   * inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
+    --rc-popover-radius: var(--md-sys-shape-corner-medium, 0.75rem);
+    --rc-popover-shadow: var(--rc-shadow-level2, none);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-popover[data-rc-material-rich-tooltip] {
+    --rc-popover-max-inline-size: min(20rem, 100dvi - 1rem);
+    --rc-popover-padding-block: 0.75rem;
+    --rc-popover-padding-inline: 1rem;
+    --rc-popover-color: var(--md-sys-color-on-surface-variant, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-popover[data-rc-material-rich-tooltip]
+    > [slot='content']
+    > h2 {
+    margin: 0 0 0.25rem;
+    color: var(--md-sys-color-on-surface, CanvasText);
+    font-family: var(--md-sys-typescale-title-small-font, inherit);
+    font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-title-small-weight, 500);
+    line-height: var(--md-sys-typescale-title-small-line-height, 1.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-popover[data-rc-material-rich-tooltip]
+    > [slot='content']
+    > p {
+    margin: 0;
+    font-family: var(--md-sys-typescale-body-medium-font, inherit);
+    font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-popover[data-rc-material-rich-tooltip]
+    > [slot='content']
+    > footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-block-start: 0.75rem;
+  }
+}

package/components/progress.css

@@ -7,4 +7,9 @@
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress[disabled] {
     opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
   }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress {
+    --rc-progress-fill-transition-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-progress-fill-transition-easing: var(--rc-motion-effects-easing-fast, ease-out);
+  }
 }

package/components/range-slider.css

@@ -4,8 +4,9 @@
     border-radius: var(--md-sys-shape-corner-full, 999px);
     box-shadow: 0 0 0 0 transparent;
     transition:
-      box-shadow 150ms ease,
-      scale 150ms ease;
+      box-shadow var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      scale var(--rc-motion-spatial-duration-fast, 300ms) var(--rc-motion-spatial-easing-fast, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):hover {

package/components/search-bar.css

@@ -1,9 +1,19 @@
 @layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar {
+    /*
+     * The bar is already the full-height field, so the shared outset ring
+     * floats off its edge and crowds the app bar. Draw it on the edge instead.
+     */
+    --rc-focus-ring-offset: -2px;
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(root) {
     box-sizing: border-box;
     transition:
-      box-shadow 200ms ease,
-      background-color 200ms ease;
+      box-shadow var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-motion-effects-easing-default, ease),
+      background-color var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-motion-effects-easing-default, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar:hover::part(root) {

package/components/segmented-button.css

@@ -1,33 +1,7 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-segmented-button {
-    --_rc-segmented-button-fieldset-display: inline-flex;
-    --_rc-segmented-button-fieldset-margin: 0;
-    --_rc-segmented-button-fieldset-padding: 0;
-    --_rc-segmented-button-fieldset-border: 0;
-    --_rc-segmented-button-fieldset-radius: 0;
-    --_rc-segmented-button-fieldset-overflow: visible;
-    --_rc-segmented-button-legend-position: absolute;
-    --_rc-segmented-button-legend-inline-size: 1px;
-    --_rc-segmented-button-legend-block-size: 1px;
-    --_rc-segmented-button-legend-margin: -1px;
-    --_rc-segmented-button-legend-padding: 0;
-    --_rc-segmented-button-legend-border: 0;
-    --_rc-segmented-button-legend-overflow: hidden;
-    --_rc-segmented-button-legend-clip: rect(0 0 0 0);
-    --_rc-segmented-button-legend-white-space: nowrap;
-    --_rc-segmented-button-segment-display: inline-flex;
-    --_rc-segmented-button-segment-cursor: pointer;
-    --_rc-segmented-button-segment-user-select: none;
-    --_rc-segmented-button-disabled-cursor: not-allowed;
-    --_rc-segmented-button-radio-position: absolute;
-    --_rc-segmented-button-radio-inline-size: 1px;
-    --_rc-segmented-button-radio-block-size: 1px;
-    --_rc-segmented-button-radio-margin: 0;
-    --_rc-segmented-button-radio-opacity: 0;
-    --_rc-segmented-button-radio-pointer-events: none;
-    --_rc-segmented-button-selected-icon-display: inline-grid;
-    --_rc-segmented-button-vertical-border-inline-start: 1px solid
-      var(--md-sys-color-outline, ButtonBorder);
+    /* One switch turns on the component-owned segmented recipe. */
+    --rc-segmented-button-appearance: segmented;
     --rc-segmented-button-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
     --rc-segmented-button-radius: var(--md-sys-shape-corner-full, 9999px);
     --rc-segmented-button-divider: 0;

package/components/select.css

@@ -1,10 +1,37 @@
 @layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog) {
+    position: fixed;
+    inset: auto;
+    top: var(--rc-dialog-visual-viewport-top, 0);
+    left: var(--rc-dialog-visual-viewport-left, 0);
+    box-sizing: border-box;
+    inline-size: var(--rc-dialog-visual-viewport-width, 100dvw);
+    block-size: var(--rc-dialog-visual-viewport-height, 100dvh);
+    max-inline-size: none;
+    max-block-size: none;
+    margin: 0;
+    padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
+    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
+    resize: none;
+    overflow: hidden;
+    border: 0;
+    border-radius: 0;
+    background: var(--md-sys-color-surface-container-high, Canvas);
+    color: var(--md-sys-color-on-surface, CanvasText);
+    box-shadow: none;
+    transform: none;
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger) {
     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-select::part(trigger):hover {
@@ -38,6 +65,19 @@
     --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-select.rc-select--dense::part(chips) {
+    --rc-chip-block-size: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select.rc-select--dense::part(chip) {
+    min-block-size: 1.5rem;
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(chip):hover {
     background: color-mix(
       in srgb,
@@ -53,20 +93,15 @@
    * custom properties are the stable styling contract for option rows.
    */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::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 — inherited by li[role='option'] via rc-listbox's rc-base layer */
     --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/focus state layers use on-surface, not the selected container role. */
     --rc-highlight: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
@@ -98,8 +133,9 @@
       var(--md-sys-color-on-surface-variant, CanvasText)
     );
     transition:
-      color 150ms ease,
-      transform 150ms ease;
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease),
+      transform var(--rc-motion-spatial-duration-fast, 300ms)
+        var(--rc-motion-spatial-easing-fast, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-select[open]::part(toggle-indicator) {
@@ -114,4 +150,53 @@
     opacity: var(--md-sys-state-disabled-container-opacity, 0.38);
     pointer-events: none;
   }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-header) {
+    min-block-size: 3.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-title) {
+    color: var(--md-sys-color-on-surface, CanvasText);
+    font-family: var(--md-sys-typescale-headline-small-font, inherit);
+    font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+    font-style: normal;
+    font-weight: var(--md-sys-typescale-headline-small-weight, 400);
+    line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-cancel),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-confirm) {
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    background: transparent;
+    color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-cancel) {
+    color: var(--md-sys-color-on-surface, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-confirm) {
+    padding-inline: 0.75rem;
+    font-family: var(--md-sys-typescale-label-large-font, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-cancel):hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-select, rc-combobox)[popup-mode='dialog']::part(dialog-confirm):hover {
+    background: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+  }
 }

package/components/splitter.css

@@ -27,6 +27,9 @@
       var(--md-sys-color-primary, Highlight) 8%,
       transparent
     );
-    --rc-splitter-handle-transition: 150ms var(--md-sys-motion-easing-standard, ease);
+    --rc-splitter-handle-transition: var(--rc-motion-effects-duration-fast, 150ms)
+      var(--rc-motion-effects-easing-fast, ease);
+    /* The panel visibly resizes to the snap point, which is spatial motion. */
+    --rc-splitter-snap-duration: var(--rc-motion-spatial-duration-fast, 300ms);
   }
 }

package/components/switch.css

@@ -23,7 +23,15 @@
     --rc-switch-focus-ring: var(--rc-focus-ring);
     --rc-switch-focus-ring-offset: var(--rc-focus-ring-offset);
     --rc-switch-disabled-opacity: var(--rc-disabled-opacity);
-    --rc-switch-duration: var(--rc-motion-duration);
+    /*
+     * The switch's single duration/easing pair drives both its
+     * background-color/border-color fades and its thumb/track resize and
+     * slide; the dominant motion is spatial (the thumb visibly moves and
+     * grows), so it takes the spatial scale rather than the compatibility
+     * token.
+     */
+    --rc-switch-duration: var(--rc-motion-spatial-duration-fast, 300ms);
+    --rc-switch-easing: var(--rc-motion-spatial-easing-fast, ease);
 
     /* Keep long flex/grid siblings from shrinking the control below its track. */
     min-inline-size: var(--rc-switch-track-inline-size) !important;

package/components/textarea.css

@@ -4,7 +4,9 @@
     --rc-textarea-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
     --rc-textarea-background: var(--md-sys-color-surface, Field);
     --rc-textarea-color: var(--md-sys-color-on-surface, FieldText);
-    --rc-textarea-padding: 1rem;
+    --rc-textarea-padding-block: 1rem;
+    --rc-textarea-padding-inline: 1rem;
+    --rc-textarea-gutter-min-inline-size: 48px;
     --rc-textarea-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
     --rc-textarea-caret-color: var(--md-sys-color-primary, FieldText);
     --rc-textarea-active-line-bg: color-mix(
@@ -19,8 +21,10 @@
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root) {
     transition:
-      border-color 150ms ease,
-      box-shadow 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);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root):hover {

package/components/toolbar.css

@@ -13,7 +13,8 @@
     background: transparent;
     color: inherit;
     font: inherit;
-    transition: background-color 150ms ease;
+    transition: 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-toolbar > button:hover {