@rcarls/rc-theme-material 0.5.0 → 0.7.0

package/components/list-item.css

@@ -1,13 +1,10 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) {
+    /* Compatibility tokens retained for rc-listbox and embedded selectors. */
     --rc-list-item-gap: 1rem;
     --rc-list-item-min-block-size: 3rem;
     --rc-list-item-padding-block: 0;
     --rc-list-item-padding-inline: 1rem;
-    --rc-list-item-divider: 0;
-    --rc-list-item-bg: transparent;
-    --rc-list-item-color: var(--md-sys-color-on-surface, CanvasText);
-    --rc-list-item-supporting-color: var(--md-sys-color-on-surface-variant, CanvasText);
     --rc-list-item-hover-bg: color-mix(
       in srgb,
       var(--md-sys-color-on-surface, CanvasText)
@@ -25,53 +22,166 @@
     --rc-list-item-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list {
+    --rc-list-padding-inline: 1rem;
+    --rc-list-leading-gap: 1rem;
+    --rc-list-trailing-gap: 1rem;
+    --rc-list-row-gap: 0;
+    --rc-list-item-min-block-size: 3.5rem;
+    --rc-list-item-padding-block: 0.5rem;
+    --rc-list-item-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-list-item-background: transparent;
+    --rc-list-item-border-radius: 0;
+    --rc-list-item-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-list-item-selected-background: var(--md-sys-color-secondary-container, Highlight);
+    --rc-list-item-divider: 1px solid var(--md-sys-color-outline-variant, GrayText);
+    --rc-list-item-state-layer-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-list-item-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rc-list-item-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.1);
+    --rc-list-item-pressed-state-layer-opacity: var(
+      --md-sys-state-pressed-state-layer-opacity,
+      0.12
+    );
+    --rc-list-item-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+    --rc-list-item-transition-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-list-item-transition-easing: var(--md-sys-motion-easing-standard, ease);
+    --rc-list-item-details-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-list-item-details-duration: var(--md-sys-motion-duration-short2, 100ms);
+    --rc-list-item-dragged-background: var(--md-sys-color-surface-container-high, Canvas);
+    --rc-list-item-dragged-box-shadow: var(--rc-shadow-level4, var(--rc-shadow, none));
+    --rc-list-item-dragged-state-layer-opacity: var(
+      --md-sys-state-dragged-state-layer-opacity,
+      0.16
+    );
+    --rc-list-item-reorder-duration: var(--md-sys-motion-duration-medium1, 250ms);
+    --rc-list-item-reorder-easing: var(--md-sys-motion-easing-standard, ease);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--rc-list-item-gap);
-    min-block-size: var(--rc-list-item-min-block-size);
-    padding: var(--rc-list-item-padding-block) var(--rc-list-item-padding-inline);
-    border-block-end: var(--rc-list-item-divider);
-    background: var(--rc-list-item-bg);
-    color: var(--rc-list-item-color);
+  /*
+   * A plain native reorder handle reads as a standard icon button: a 48px
+   * target in on-surface-variant. Handles wrapped in rc-button keep that
+   * component's own presentation.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[reorderable]
+    :not(rc-button)
+    > button[data-rc-reorder-handle] {
+    display: inline-grid;
+    place-items: center;
     box-sizing: border-box;
+    min-inline-size: 3rem;
+    min-block-size: 3rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
+    font: inherit;
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__start,
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__trailing,
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__end {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[reorderable]
+    :not(rc-button)
+    > button[data-rc-reorder-handle]:hover {
+    background: color-mix(
+      in srgb,
+      currentColor calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  /* Expanded details read as list supporting text. */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list-item::part(details) {
+    font-family: var(--md-sys-typescale-body-medium-font, inherit);
+    font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+    line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list[variant='segmented'] {
+    --rc-list-row-gap: 0.125rem;
+  }
+
+  /* Dividers separate visible rows; they do not trail the final row. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list
+    > rc-list-item:is([data-rc-list-position='last'], [data-rc-list-position='only']) {
+    --rc-list-item-divider: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item {
+    --rc-list-item-min-block-size: 3.5rem;
+    --rc-list-item-padding-block: 0.625rem;
+    --rc-list-item-background: var(--md-sys-color-surface-container-low, Canvas);
+    --rc-list-item-divider: 0;
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item[data-rc-list-position='only'] {
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item[data-rc-list-position='first'] {
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+      var(--md-sys-shape-corner-extra-small, 0.25rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__body {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-inline-size: 0;
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item[data-rc-list-position='last'] {
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem)
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__headline {
-    color: var(--rc-list-item-color);
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list-item::part(content) {
     font-family: var(--md-sys-typescale-body-large-font, inherit);
     font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    font-weight: var(--md-sys-typescale-body-large-weight, 400);
     line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__supporting {
-    color: var(--rc-list-item-supporting-color);
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list-item
+    > :where([data-rc-list-supporting], small) {
+    display: block;
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
     font-family: var(--md-sys-typescale-body-medium-font, inherit);
     font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-body-medium-weight, 400);
     line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
   }
 
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list-item
+    > [slot='leading'][data-rc-list-leading] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list-item
+    > :is(input[type='checkbox'], input[type='radio'])[slot='leading'] {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    accent-color: var(--md-sys-color-primary, Highlight);
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox,
   :where(.rc-theme-material, :host(.rc-theme-material)) [part~='listbox'] {
     --rc-listbox-option-gap: var(--rc-list-item-gap);

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%,
@@ -19,4 +22,105 @@
     --rc-menu-button-indicator-size: 1.5rem;
     --rc-menu-button-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
   }
+
+  /*
+   * MD3 "Small" icon button sizing (40dp square trigger / 24dp icon) for an
+   * icon-only rc-menu-button trigger — e.g. an app bar's overflow button.
+   * rc-menu-button's own touch-target affordance (min-inline/block-size
+   * 3rem on the trigger wrapper, plus the light-DOM hit-slop) makes up the
+   * difference to the 48dp minimum tap target on its own.
+   * https://m3.material.io/components/icon-buttons/specs
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[icon-only] {
+    --rc-menu-button-trigger-block-size: 2.5rem;
+    --rc-menu-button-trigger-padding-block: 0;
+    --rc-menu-button-trigger-padding-inline: 0;
+    --rc-menu-button-trigger-gap: 0;
+    --rc-menu-button-icon-size: 2.5rem;
+  }
+
+  /* Adaptive overflow keeps the authored menu label in the trigger, so the
+     shared label marker is the one direct child that is not icon content. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu-button[icon-only]
+    > [slot='trigger']
+    > :not([data-rc-menu-label]) {
+    font-size: var(--rc-icon-button-icon-font-size, 1.5rem);
+    line-height: var(--rc-icon-button-icon-font-size, 1.5rem) !important;
+  }
+
+  /*
+   * Narrow width: trims the trigger's inline size (32dp, the MD3 "Small"
+   * narrow-width spec value) without changing its height. Suits a dense
+   * context that already has an unambiguous, self-labeling icon and no
+   * neighbors it needs to align widths with — an app bar's trailing
+   * overflow trigger is the canonical case, so this also defaults the
+   * trailing-edge overlap token: (3rem default touch target - 2rem icon
+   * size) / 2, giving back exactly what the touch target would otherwise
+   * reserve past the visible trigger. Trailing-edge only, matching the
+   * "trailing overflow trigger" framing above -- see rc-button's own
+   * narrow-variant comment for why only one side defaults.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu-button.rc-menu-button--narrow[icon-only] {
+    --rc-menu-button-icon-size: 2rem;
+    --rc-menu-button-touch-target-overlap-inline-end: 0.5rem;
+  }
+
+  /*
+   * A submenu trigger (a cascading menu item that opens a nested rc-menu)
+   * is still an rc-menu-button underneath, but MD3 treats it as a menu row
+   * with a trailing disclosure chevron — not as its own standalone pill
+   * control. The base rule above (and rc-menu-button's own defaults) style
+   * it as the latter: a primary-colored, pill-shaped, independently-padded
+   * trigger, layered on top of whatever geometry rc-menu's own item CSS
+   * (menu.css / rc-base) tries to apply to the same element by virtue of
+   * its role="menuitem" — hence the mismatched shape and the icon sitting
+   * at a different inset than its sibling rows.
+   *
+   * The consumer marks this case the same way rc-menu itself expects a
+   * cascading item to be marked (role="menuitem" — see menu.css and
+   * rc-menu's own light-DOM CSS), so key every geometry/color token here
+   * off rc-menu's own item, hover, and active tokens (--rc-menu-item-...,
+   * --rc-menu-hover-..., --rc-menu-active-...) instead of hand-matching
+   * values that could drift out of sync with a sibling plain-button item
+   * later.
+   * https://m3.material.io/components/menus/specs
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[role='menuitem'] {
+    font-family: var(--md-sys-typescale-body-large-font, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    font-weight: 400;
+
+    --rc-menu-button-trigger-block-size: var(--rc-menu-item-min-block-size, 3rem);
+    --rc-menu-button-trigger-padding-block: var(--rc-menu-item-padding-block, 0);
+    --rc-menu-button-trigger-padding-inline: var(--rc-menu-item-padding-inline, 0.75rem);
+    --rc-menu-button-trigger-gap: var(--rc-menu-item-gap, 0.75rem);
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: inherit;
+    --rc-menu-button-trigger-hover-background: var(--rc-menu-hover-bg);
+    --rc-menu-button-trigger-hover-color: var(--rc-menu-hover-color, inherit);
+    --rc-menu-button-trigger-open-background: var(--rc-menu-active-bg);
+    --rc-menu-button-trigger-open-color: var(--rc-menu-active-color, inherit);
+  }
+
+  /*
+   * rc-menu's own light-DOM CSS (rc-base, an even-higher-priority layer
+   * than this one — it's registered at custom-element-connect time,
+   * after every static stylesheet) matches *any* role="menuitem" element
+   * for its generic item padding, which includes this host itself, not
+   * just plain-button items. Left alone, that stacks on top of the
+   * trigger-inline padding bridged above: the host absorbs one
+   * --rc-menu-item-padding-inline, then the trigger button absorbs
+   * another, doubling the icon's inset versus a sibling row. The host
+   * itself isn't a visible surface — all padding belongs on the one
+   * real, visible trigger button — so it needs to contribute zero here,
+   * which (since rc-base doesn't mark its own padding !important) is
+   * only reachable with !important of our own.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[role='menuitem'] {
+    padding-inline: 0 !important;
+  }
 }

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(
@@ -34,7 +29,7 @@
     );
     --rc-menu-active-color: var(--md-sys-color-on-surface, CanvasText);
 
-    /* Check/radio indicator — M3 leading icon slot is 24dp wide */
+    /* Check/radio indicator — M3 trailing indicator column is 24dp wide */
     --rc-menu-check-size: 1.5rem;
     --rc-menu-check-color: var(--md-sys-color-primary, Highlight);
 
@@ -58,12 +53,33 @@
     outline: none;
   }
 
+  /*
+   * M3 baseline menu items are rectangular full-width rows (unlike a
+   * standalone rc-button, which is a pill) — rc-menu's own structural CSS
+   * intentionally leaves shape undecided (it's a themed concern), so claim
+   * it explicitly here rather than leaving items to whatever shape a
+   * consumer's own incidental button styling might otherwise supply.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
+    border-radius: 0;
+  }
+
   /* 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,30 +1,49 @@
 @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);
     }
   }
 
   @media (forced-colors: active) {
-    :where(.rc-theme-material, :host(.rc-theme-material)) :is(
-      rc-select,
-      rc-combobox,
-      rc-search-bar,
-      rc-textarea,
-      rc-markdown-editor,
-      rc-menu,
-      rc-menubar,
-      rc-toolbar,
-      rc-dialog > dialog
-    ) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :is(
+        rc-select,
+        rc-combobox,
+        rc-search-bar,
+        rc-textarea,
+        rc-markdown-editor,
+        rc-menu,
+        rc-menubar,
+        rc-toolbar,
+        rc-dialog > dialog
+      ) {
       forced-color-adjust: auto;
       box-shadow: none;
     }
 
-    :where(.rc-theme-material, :host(.rc-theme-material)) :is(button, [role='button'], [role^='menuitem']):focus-visible {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :is(button, [role='button'], [role^='menuitem']):focus-visible {
       outline: 2px solid Highlight;
     }
   }

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;