@rcarls/rc-theme-material 0.0.0-next-20260921045401

package/bridge.css

@@ -0,0 +1,678 @@
+@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
+
+@layer rc-theme-material.bridge {
+  /*
+ * Material 3 token bridge for rc-webcomponents.
+ *
+ * This file intentionally does not define --md-sys-* values. It consumes an
+ * application's Material token environment and maps it to RC's public styling
+ * contract. Import defaults.css first only when a standalone baseline is
+ * desired.
+ */
+  .rc-theme-material,
+  :host(.rc-theme-material) {
+    --rc-surface: var(--md-sys-color-surface, Canvas);
+    --rc-field: var(--md-sys-color-surface-container-highest, Field);
+    --rc-field-text: var(--md-sys-color-on-surface, FieldText);
+    --rc-highlight: var(--md-sys-color-secondary-container, Highlight);
+    --rc-highlight-text: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-text-disabled: var(--md-sys-color-on-surface-variant, GrayText);
+    --rc-accent: var(--md-sys-color-primary, Highlight);
+    --rc-border-color: var(--md-sys-color-outline, ButtonBorder);
+    --rc-border: 1px solid var(--rc-border-color);
+    --rc-shadow-level0: none;
+    --rc-shadow-level1: 0 var(--md-sys-elevation-level1, 1px)
+      calc(var(--md-sys-elevation-level1, 1px) * 2)
+      color-mix(in srgb, var(--md-sys-color-shadow, #000) 18%, transparent);
+    --rc-shadow-level2: 0 var(--md-sys-elevation-level2, 3px)
+      calc(var(--md-sys-elevation-level2, 3px) * 2)
+      color-mix(in srgb, var(--md-sys-color-shadow, #000) 18%, transparent);
+    --rc-shadow-level3: 0 var(--md-sys-elevation-level3, 6px)
+      calc(var(--md-sys-elevation-level3, 6px) * 2)
+      color-mix(in srgb, var(--md-sys-color-shadow, #000) 18%, transparent);
+    --rc-shadow-level4: 0 var(--md-sys-elevation-level4, 8px)
+      calc(var(--md-sys-elevation-level4, 8px) * 2)
+      color-mix(in srgb, var(--md-sys-color-shadow, #000) 24%, transparent);
+    --rc-shadow: var(--rc-shadow-level2);
+    --rc-font-family: var(--md-sys-typescale-body-medium-font, inherit);
+    --rc-font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    --rc-line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
+    --rc-icon-font-size: 1.5rem;
+    --rc-icon-font-line-height: var(--rc-icon-font-size);
+    --rc-control-block-size: 2.5rem;
+    --rc-control-padding-block: 0.5rem;
+    --rc-control-padding-inline: 1rem;
+    --rc-control-gap: 0.5rem;
+    --rc-control-radius: var(--md-sys-shape-corner-full, 1.25rem);
+    --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-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-list-item-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-button-bg: var(--md-sys-color-primary, ButtonFace);
+    /*
+     * Both of these sit on --rc-button-bg, so both take the on-primary color.
+     * rc-select, rc-combobox, and rc-menu-button read --rc-button-text directly
+     * for their trigger and chip text; leaving it unset dropped them onto the
+     * ButtonText system color over the primary fill.
+     */
+    --rc-button-text: var(--md-sys-color-on-primary, ButtonText);
+    --rc-button-color: var(--rc-button-text, ButtonText);
+    --rc-button-block-size: var(--rc-control-block-size);
+    --rc-button-radius: var(--rc-control-radius);
+    --rc-button-border: 0;
+    --rc-button-padding-block: 0;
+    --rc-button-padding-inline: 1.5rem;
+    --rc-button-gap: var(--rc-control-gap);
+    --rc-button-font: 500 var(--md-sys-typescale-label-large-size, 0.875rem) /
+      var(--md-sys-typescale-label-large-line-height, 1.25rem) var(--rc-font-family);
+    --rc-button-hover-state-layer-opacity: 0.08;
+    --rc-button-focus-state-layer-opacity: 0.12;
+    --rc-button-pressed-state-layer-opacity: 0.12;
+    --rc-card-bg: var(--md-sys-color-surface-container-low, Canvas);
+    --rc-card-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-card-radius: var(--md-sys-shape-corner-medium, 0.75rem);
+    --rc-card-padding-block: 1rem;
+    --rc-card-padding-inline: 1rem;
+    --rc-card-actions-gap: 0.5rem;
+    --rc-card-hover-state-layer-opacity: 0.08;
+    --rc-card-pressed-state-layer-opacity: 0.12;
+    --rc-chip-block-size: 2rem;
+    --rc-chip-gap: 0px;
+    --rc-chip-padding-inline: 1rem;
+    --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-text-decoration: none;
+    --rc-chip-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-chip-state-layer-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-chip-selected-state-layer-color: var(--md-sys-color-on-secondary-container, CanvasText);
+    --rc-chip-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rc-chip-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
+    --rc-chip-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --rc-chip-state-layer-transition-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-chip-state-layer-transition-easing: var(--rc-motion-effects-easing-fast, ease-out);
+    --rc-switch-native-appearance: none;
+    --rc-switch-native-inline-size: 100%;
+    --rc-switch-native-block-size: 100%;
+    --rc-switch-native-margin: 0;
+    --rc-switch-native-opacity: 0;
+    --rc-switch-decoration-display: block;
+    --rc-switch-icon-display: grid;
+    --rc-switch-track-inline-size: 3.25rem;
+    --rc-switch-track-block-size: 2rem;
+    --rc-switch-selected-track-bg: var(--md-sys-color-primary, Highlight);
+    --rc-switch-thumb-translate: 1.125rem;
+    --rc-segmented-button-segment-min-block-size: 2.5rem;
+    --rc-segmented-button-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-snackbar-bg: var(--md-sys-color-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--md-sys-color-inverse-on-surface, Canvas);
+    --rc-snackbar-border: 0;
+    --rc-snackbar-action-color: var(--md-sys-color-inverse-primary, LinkText);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: 9999px;
+    --rc-snackbar-action-padding-block: 0.5rem;
+    --rc-snackbar-action-padding-inline: 0.75rem;
+    --rc-snackbar-action-bg: transparent;
+    --rc-snackbar-action-font: inherit;
+    --rc-toolbar-radius: var(--md-sys-shape-corner-large, 1rem);
+    --rc-toolbar-vertical-radius: 0;
+    --rc-item-padding-block: 0.75rem;
+    --rc-item-padding-inline: 0.75rem;
+    --rc-item-gap: 0.75rem;
+    --rc-radius-sm: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-radius-md: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-focus-ring-offset: 2px;
+    --rc-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+    --rc-motion-effects-duration-fast: var(--md-sys-motion-duration-150, 150ms);
+    --rc-motion-effects-easing-fast: var(--md-sys-motion-easing-standard, ease-out);
+    --rc-motion-effects-duration-default: var(--md-sys-motion-duration-200, 200ms);
+    --rc-motion-effects-easing-default: var(--rc-motion-effects-easing-fast);
+    --rc-motion-effects-duration-slow: var(--md-sys-motion-duration-300, 300ms);
+    --rc-motion-effects-easing-slow: var(--rc-motion-effects-easing-fast);
+    /*
+     * Spec spatial durations are 350/500/700ms. This project's own motion
+     * guide finds anything past ~400ms reads as waiting rather than
+     * feedback, so the scale is compressed to 300/400/500ms — a deliberate
+     * departure recorded here rather than a silent guess. The curve shape
+     * (emphasized) is unchanged from spec.
+     */
+    --rc-motion-spatial-duration-fast: var(--md-sys-motion-duration-medium2, 300ms);
+    --rc-motion-spatial-easing-fast: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+    --rc-motion-spatial-duration-default: var(--md-sys-motion-duration-medium4, 400ms);
+    --rc-motion-spatial-easing-default: var(--rc-motion-spatial-easing-fast);
+    --rc-motion-spatial-duration-slow: var(--md-sys-motion-duration-long2, 500ms);
+    --rc-motion-spatial-easing-slow: var(--rc-motion-spatial-easing-fast);
+    /* Decelerate for arriving, accelerate for leaving; family matches above. */
+    --rc-motion-effects-easing-enter: var(--md-sys-motion-easing-standard-decelerate, ease-out);
+    --rc-motion-effects-easing-exit: var(--md-sys-motion-easing-standard-accelerate, ease-in);
+    --rc-motion-spatial-easing-enter: var(
+      --md-sys-motion-easing-emphasized-decelerate,
+      cubic-bezier(0, 0, 0, 1)
+    );
+    --rc-motion-spatial-easing-exit: var(
+      --md-sys-motion-easing-emphasized-accelerate,
+      cubic-bezier(0.3, 0, 1, 1)
+    );
+    --rc-motion-duration: var(--rc-motion-effects-duration-default);
+    --rc-dialog-scrim: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
+  }
+
+  .rc-theme-material rc-select,
+  :host(.rc-theme-material) rc-select {
+    --rc-select-control-block-size: 3.5rem;
+    --rc-select-padding-inline: 1rem;
+    --rc-select-radius: var(
+      --md-outlined-select-text-field-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+    --rc-select-border: 1px solid
+      var(--md-outlined-select-text-field-outline-color, var(--md-sys-color-outline, ButtonBorder));
+    --rc-select-listbox-radius: var(
+      --md-menu-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+    --rc-select-listbox-border: 0;
+    --rc-select-listbox-padding-block: 0.5rem;
+    --rc-select-shadow: var(--rc-shadow);
+    --rc-select-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-select-chip-padding-block: 0.375rem;
+    --rc-select-chip-padding-inline-start: 0.75rem;
+    --rc-field: var(
+      --md-outlined-select-text-field-container-color,
+      var(--md-sys-color-surface, Field)
+    );
+    --rc-field-text: var(
+      --md-outlined-select-text-field-input-text-color,
+      var(--md-sys-color-on-surface, FieldText)
+    );
+    --rc-font-family: var(
+      --md-outlined-select-text-field-input-text-font,
+      var(--md-sys-typescale-body-large-font, inherit)
+    );
+  }
+
+  .rc-theme-material rc-listbox,
+  :host(.rc-theme-material) rc-listbox {
+    --rc-listbox-option-gap: var(--rc-list-item-gap, 0.75rem);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size, 3rem);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block, 0);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline, 0.75rem);
+    --rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
+    --rc-listbox-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 12%,
+      transparent
+    );
+    --rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg, Highlight);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color, HighlightText);
+    --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+
+  .rc-theme-material rc-combobox,
+  :host(.rc-theme-material) rc-combobox {
+    --rc-combobox-control-block-size: 3.5rem;
+    --rc-combobox-padding-inline: 1rem;
+    --rc-combobox-radius: var(
+      --md-outlined-text-field-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+    --rc-combobox-border: 1px solid
+      var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, ButtonBorder));
+    --rc-combobox-listbox-radius: var(
+      --md-menu-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+    --rc-combobox-listbox-border: 0;
+    --rc-combobox-listbox-padding-block: 0.5rem;
+    --rc-combobox-shadow: var(--rc-shadow);
+    --rc-combobox-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-combobox-chip-padding-block: 0.375rem;
+    --rc-combobox-chip-padding-inline-start: 0.75rem;
+    --rc-field: var(--md-outlined-text-field-container-color, var(--md-sys-color-surface, Field));
+    --rc-field-text: var(
+      --md-outlined-text-field-input-text-color,
+      var(--md-sys-color-on-surface, FieldText)
+    );
+    --rc-font-family: var(
+      --md-outlined-text-field-input-text-font,
+      var(--md-sys-typescale-body-large-font, inherit)
+    );
+  }
+
+  .rc-theme-material rc-slider,
+  :host(.rc-theme-material) rc-slider {
+    --rc-slider-track-size: var(--md-slider-active-track-height, 0.25rem);
+    --rc-slider-track-background: var(
+      --md-slider-inactive-track-color,
+      var(--md-sys-color-surface-container-highest, CanvasText)
+    );
+    --rc-slider-track-opacity: 1;
+    --rc-slider-track-radius: var(
+      --md-slider-inactive-track-shape,
+      var(--md-sys-shape-corner-full, 999px)
+    );
+    --rc-slider-progress-background: var(
+      --md-slider-active-track-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+    --rc-slider-value-color: var(
+      --md-slider-label-text-color,
+      var(--md-sys-color-on-surface, GrayText)
+    );
+    --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
+  }
+
+  .rc-theme-material rc-progress,
+  :host(.rc-theme-material) rc-progress {
+    --rc-progress-track-background: var(
+      --md-linear-progress-track-color,
+      var(--md-sys-color-surface-container-highest, CanvasText)
+    );
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: var(
+      --md-linear-progress-track-shape,
+      var(--md-sys-shape-corner-full, 999px)
+    );
+    --rc-progress-fill-background: var(
+      --md-linear-progress-active-indicator-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+    --rc-progress-value-color: var(--md-sys-color-on-surface-variant, GrayText);
+  }
+
+  .rc-theme-material rc-range-slider,
+  :host(.rc-theme-material) rc-range-slider {
+    --rc-range-slider-accent: var(
+      --md-slider-active-track-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+    --rc-range-slider-track-background: var(
+      --md-slider-inactive-track-color,
+      var(--md-sys-color-surface-container-highest, CanvasText)
+    );
+    --rc-range-slider-track-radius: var(
+      --md-slider-inactive-track-shape,
+      var(--md-sys-shape-corner-full, 999px)
+    );
+    --rc-range-slider-thumb-background: var(
+      --md-slider-handle-color,
+      var(--md-sys-color-primary, ButtonFace)
+    );
+    --rc-range-slider-thumb-border: var(
+      --md-slider-handle-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+    --rc-range-slider-thumb-hover-background: var(
+      --md-slider-hover-handle-color,
+      var(--md-slider-handle-color, var(--md-sys-color-primary, ButtonFace))
+    );
+    --rc-range-slider-thumb-hover-border: var(
+      --md-slider-hover-handle-color,
+      var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight))
+    );
+    --rc-range-slider-thumb-active-background: var(
+      --md-slider-pressed-handle-color,
+      var(--md-slider-handle-color, var(--md-sys-color-primary, ButtonFace))
+    );
+    --rc-range-slider-thumb-active-border: var(
+      --md-slider-pressed-handle-color,
+      var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight))
+    );
+    --rc-range-slider-focus-outline: var(
+      --md-slider-focus-handle-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+    --rc-range-slider-thumb-size: var(--md-slider-handle-width, 1.25rem);
+    --rc-range-slider-value-color: var(
+      --md-slider-label-text-color,
+      var(--md-sys-color-on-surface, GrayText)
+    );
+    --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
+  }
+
+  .rc-theme-material rc-search-bar,
+  :host(.rc-theme-material) rc-search-bar {
+    --rc-search-bar-bg: var(
+      --md-search-bar-container-color,
+      var(--md-sys-color-surface-container-high, Field)
+    );
+    --rc-search-bar-color: var(
+      --md-search-bar-input-text-color,
+      var(--md-sys-color-on-surface, FieldText)
+    );
+    --rc-search-bar-icon-color: var(
+      --md-search-bar-leading-icon-color,
+      var(--md-sys-color-on-surface, GrayText)
+    );
+    --rc-search-bar-clear-color: var(
+      --md-search-bar-trailing-icon-color,
+      var(--md-sys-color-on-surface-variant, GrayText)
+    );
+    --rc-search-bar-radius: var(
+      --md-search-bar-container-shape,
+      var(--md-sys-shape-corner-full, 999px)
+    );
+    --rc-search-bar-border: none;
+    --rc-search-bar-shadow: var(--rc-shadow-level1);
+    --rc-search-bar-height: var(--md-search-bar-container-height, 3.5rem);
+    --rc-search-bar-padding-inline: 1rem;
+    --rc-search-bar-gap: 1rem;
+    --rc-search-bar-input-font-family: var(
+      --md-search-bar-input-text-font,
+      var(--md-sys-typescale-body-large-font, inherit)
+    );
+    --rc-search-bar-input-font-size: var(
+      --md-search-bar-input-text-size,
+      var(--md-sys-typescale-body-large-size, 1rem)
+    );
+    --rc-search-bar-view-bg: var(
+      --md-search-view-container-color,
+      var(--md-sys-color-surface-container-high, Field)
+    );
+    --rc-search-bar-view-color: var(
+      --md-search-view-input-text-color,
+      var(--md-sys-color-on-surface, FieldText)
+    );
+    --rc-search-bar-view-radius: var(
+      --md-search-view-container-shape,
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+    );
+    --rc-search-bar-view-shadow: var(--rc-shadow-level3);
+    --rc-search-bar-view-padding-block: 0.5rem;
+    --rc-search-bar-suggestion-min-block-size: 3rem;
+    --rc-search-bar-suggestion-padding-inline: 1rem;
+    --rc-search-bar-suggestion-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+  }
+
+  .rc-theme-material rc-app-bar,
+  :host(.rc-theme-material) rc-app-bar {
+    --rc-app-bar-bg: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, Canvas));
+    --rc-app-bar-color: var(
+      --md-top-app-bar-headline-color,
+      var(--md-sys-color-on-surface, CanvasText)
+    );
+    --rc-app-bar-compact-min-height: var(--md-top-app-bar-container-height, 4rem);
+    --rc-app-bar-expanded-padding-block: 1rem;
+    --rc-app-bar-padding-inline: 1rem;
+    --rc-app-bar-gap: 1rem;
+    --rc-app-bar-transition-duration: 200ms;
+    --rc-app-bar-scroll-divider: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-app-bar-title-font-size: var(
+      --md-top-app-bar-headline-size,
+      var(--md-sys-typescale-title-large-size, inherit)
+    );
+    --rc-app-bar-expanded-title-font-size: var(
+      --md-large-top-app-bar-headline-size,
+      var(--md-sys-typescale-headline-small-size, inherit)
+    );
+  }
+
+  .rc-theme-material rc-menu,
+  :host(.rc-theme-material) rc-menu {
+    --rc-menu-padding-block: 0.5rem;
+    --rc-menu-background: var(
+      --md-menu-container-color,
+      var(--md-sys-color-surface-container, Canvas)
+    );
+    --rc-menu-border: 0;
+    --rc-menu-radius: var(
+      --md-menu-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+    --rc-menu-shadow: var(--rc-shadow);
+    --rc-menu-color: var(
+      --md-menu-item-label-text-color,
+      var(--md-sys-color-on-surface, CanvasText)
+    );
+    --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-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-menu-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menu-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 12%,
+      transparent
+    );
+    --rc-menu-active-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menu-check-size: 1.5rem;
+    --rc-menu-check-color: var(--md-sys-color-primary, Highlight);
+    --rc-menu-shortcut-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    --rc-menu-shortcut-color: var(--md-sys-color-on-surface-variant, GrayText);
+    --rc-menu-disabled-color: var(--md-sys-color-on-surface, GrayText);
+    --rc-menu-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+    --rc-menu-separator-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-menu-separator-margin-block: 0.5rem;
+    --rc-menu-group-label-color: var(--md-sys-color-on-surface-variant, GrayText);
+  }
+
+  .rc-theme-material rc-menu-button,
+  :host(.rc-theme-material) rc-menu-button {
+    font-family: var(--md-sys-typescale-label-large-font, inherit);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: 500;
+    --rc-menu-button-trigger-block-size: 2.5rem;
+    --rc-menu-button-trigger-padding-block: 0.625rem;
+    --rc-menu-button-trigger-padding-inline: 1.5rem;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-radius: var(--md-sys-shape-corner-full, 999px);
+    --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-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --rc-menu-button-trigger-hover-color: var(--md-sys-color-primary, ButtonText);
+    --rc-menu-button-trigger-open-background: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-menu-button-trigger-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
+    --rc-menu-button-indicator-size: 1.5rem;
+    --rc-menu-button-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
+  }
+
+  .rc-theme-material rc-menubar,
+  :host(.rc-theme-material) rc-menubar {
+    --rc-menubar-gap: 0.25rem;
+    --rc-menubar-padding-inline: 0.25rem;
+    --rc-menubar-padding-block: 0.25rem;
+    --rc-menubar-border: 0;
+    --rc-menubar-radius: var(--md-sys-shape-corner-large, 1rem);
+    --rc-menubar-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-menubar-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menubar-item-block-size: 2.5rem;
+    --rc-menubar-item-padding-block: 0.5rem;
+    --rc-menubar-item-padding-inline: 1rem;
+    --rc-menubar-item-border: 0;
+    --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-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --rc-menubar-item-hover-color: var(--md-sys-color-primary, CanvasText);
+    --rc-menubar-item-open-background: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-menubar-item-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+
+  .rc-theme-material rc-toolbar,
+  :host(.rc-theme-material) rc-toolbar {
+    --rc-toolbar-gap-inline: 0.25rem;
+    --rc-toolbar-padding-inline: 0.25rem;
+    --rc-toolbar-padding-block: 0.25rem;
+    --rc-toolbar-radius: var(--md-sys-shape-corner-large, 1rem);
+    --rc-toolbar-vertical-radius: 0;
+  }
+
+  .rc-theme-material rc-textarea,
+  :host(.rc-theme-material) rc-textarea {
+    --rc-textarea-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --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-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+    --rc-textarea-caret-color: var(--md-sys-color-primary, FieldText);
+    --rc-textarea-gutter-bg: var(--md-sys-color-surface-container, Canvas);
+    --rc-textarea-gutter-color: var(--md-sys-color-on-surface-variant, GrayText);
+    --rc-textarea-gutter-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+  }
+
+  .rc-theme-material rc-markdown-editor,
+  :host(.rc-theme-material) rc-markdown-editor {
+    --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-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
+  }
+
+  .rc-theme-material rc-transfer-list,
+  :host(.rc-theme-material) rc-transfer-list {
+    --rc-transfer-list-gap: 1rem;
+    --rc-transfer-list-panel-gap: 0.5rem;
+    --rc-transfer-list-listbox-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+  }
+
+  .rc-theme-material rc-navigation-bar,
+  :host(.rc-theme-material) rc-navigation-bar {
+    --rc-navigation-bar-bg: var(--md-sys-color-surface-container, Canvas);
+    --rc-navigation-bar-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-navigation-bar-item-text-decoration: none;
+    --rc-navigation-bar-indicator-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-navigation-bar-indicator-border: 0;
+  }
+
+  .rc-theme-material rc-navigation-rail,
+  :host(.rc-theme-material) rc-navigation-rail {
+    --rc-navigation-rail-bg: var(--md-sys-color-surface, Canvas);
+    --rc-navigation-rail-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-navigation-rail-item-text-decoration: none;
+    --rc-navigation-rail-indicator-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-navigation-rail-indicator-border: 0;
+  }
+  .rc-theme-material rc-navigation-rail > rc-fab[slot='header'],
+  :host(.rc-theme-material) rc-navigation-rail > rc-fab[slot='header'] {
+    --rc-fab-shadow: none;
+    --rc-fab-shadow-hover: none;
+    --rc-fab-shadow-active: none;
+  }
+
+  .rc-theme-material rc-fab,
+  .rc-theme-material rc-fab-menu,
+  :host(.rc-theme-material) rc-fab,
+  :host(.rc-theme-material) rc-fab-menu {
+    --rc-fab-bg: var(--md-fab-container-color, var(--md-sys-color-primary-container, ButtonFace));
+    --rc-fab-color: var(--md-fab-icon-color, var(--md-sys-color-on-primary-container, ButtonText));
+    --rc-fab-shadow: var(--rc-shadow-level3);
+    --rc-fab-shadow-hover: var(--rc-shadow-level4);
+    --rc-fab-shadow-active: var(--rc-shadow-level3);
+    --rc-fab-radius: var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 1rem));
+    --rc-fab-font-family: var(
+      --md-fab-label-text-font,
+      var(--md-sys-typescale-label-large-font, inherit)
+    );
+    --rc-fab-font-size: var(
+      --md-fab-label-text-size,
+      var(--md-sys-typescale-label-large-size, 0.875rem)
+    );
+    --rc-fab-font-weight: var(
+      --md-fab-label-text-weight,
+      var(--md-sys-typescale-label-large-weight, 500)
+    );
+    --rc-fab-letter-spacing: var(
+      --md-fab-label-text-tracking,
+      var(--md-sys-typescale-label-large-tracking, 0.00625em)
+    );
+    --rc-fab-focus-ring: var(--rc-focus-ring);
+    --rc-fab-focus-ring-offset: var(--rc-focus-ring-offset);
+  }
+
+  .rc-theme-material rc-splitter,
+  :host(.rc-theme-material) rc-splitter {
+    --rc-splitter-separator-color: var(--md-sys-color-surface-container, Canvas);
+    --rc-splitter-keyline: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-splitter-handle-color: var(--md-sys-color-on-surface-variant, ButtonBorder);
+  }
+
+  .rc-theme-material rc-bottom-sheet,
+  :host(.rc-theme-material) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--md-sys-color-surface, Canvas);
+    --rc-bottom-sheet-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-bottom-sheet-radius: var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem) 0 0;
+    --rc-bottom-sheet-shadow: var(--rc-shadow-level1);
+    --rc-bottom-sheet-max-inline-size: 40rem;
+    --rc-bottom-sheet-max-block-size: 70dvh;
+    --rc-bottom-sheet-scrim: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
+    --rc-bottom-sheet-handle-color: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, GrayText) 40%,
+      transparent
+    );
+    --rc-bottom-sheet-handle-radius: var(--md-sys-shape-corner-full, 999px);
+  }
+  .rc-theme-material rc-virtual-canvas,
+  :host(.rc-theme-material) rc-virtual-canvas {
+    --rc-virtual-canvas-scrollbar-thumb-background: var(--md-sys-color-outline, ButtonFace);
+    --rc-virtual-canvas-scrollbar-track-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-virtual-canvas-scrollbar-button-background: var(
+      --md-sys-color-surface-container-high,
+      ButtonFace
+    );
+  }
+
+  @media (forced-colors: active) {
+    .rc-theme-material,
+    :host(.rc-theme-material) {
+      --rc-shadow-level0: none;
+      --rc-shadow-level1: none;
+      --rc-shadow-level2: none;
+      --rc-shadow-level3: none;
+      --rc-shadow: none;
+      --rc-disabled-opacity: 1;
+    }
+
+    .rc-theme-material rc-select,
+    :host(.rc-theme-material) rc-select,
+    .rc-theme-material rc-combobox,
+    :host(.rc-theme-material) rc-combobox,
+    .rc-theme-material rc-menu,
+    :host(.rc-theme-material) rc-menu,
+    .rc-theme-material rc-menu-button,
+    :host(.rc-theme-material) rc-menu-button {
+      --rc-border-color: ButtonBorder;
+      --rc-shadow: none;
+    }
+
+    .rc-theme-material rc-fab,
+    :host(.rc-theme-material) rc-fab {
+      --rc-fab-shadow: none;
+      --rc-fab-shadow-hover: none;
+      --rc-fab-shadow-active: none;
+    }
+  }
+}

package/components/accordion.css

@@ -0,0 +1,20 @@
+@layer rc-theme-material.components {
+  /*
+   * Only the group box. Panels inside an accordion take the same
+   * `--rc-disclosure-*` mapping as a standalone disclosure, which disclosure.css
+   * sets for `rc-accordion` as well, so the panel recipe is not repeated here.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion {
+    --rc-accordion-gap: 0.5rem;
+
+    /* Laid out before the element upgrades; see disclosure.css. */
+    display: grid;
+    gap: var(--rc-accordion-gap, 0.5rem);
+    border: 0;
+    background: transparent;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure {
+    display: block;
+  }
+}