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

package/components/scroller.css

@@ -0,0 +1,7 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-scroller {
+    --rc-scroller-content-padding-inline: 1rem;
+    --rc-scroller-content-max-inline-size: 75rem;
+    --rc-scroller-scrollbar-width: thin;
+  }
+}

package/components/search-bar.css

@@ -0,0 +1,58 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(root) {
+    box-sizing: border-box;
+    transition:
+      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) {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      var(--md-sys-color-surface-container-high, Field)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-search-bar[data-interaction-mode='keyboard']::part(root):focus-within {
+    box-shadow: var(--rc-shadow-level2, none);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(clear) {
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(clear):hover {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText) 8%,
+      transparent
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar[variant='view'] {
+    display: inline-flex;
+    inline-size: min(100%, var(--md-search-view-container-width, 45rem));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar[variant='view']::part(root) {
+    position: relative;
+    z-index: 2;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(view) {
+    overflow: hidden;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(suggestion) {
+    gap: 1rem;
+    color: var(--md-sys-color-on-surface, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(suggestion):hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+  }
+}

package/components/segmented-button.css

@@ -0,0 +1,19 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-segmented-button {
+    /* 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;
+    --rc-segmented-button-bg: var(--md-sys-color-surface, ButtonFace);
+    --rc-segmented-button-color: var(--md-sys-color-on-surface, ButtonText);
+    --rc-segmented-button-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-segmented-button-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-segmented-button-segment-min-block-size: 2.5rem;
+    --rc-segmented-button-segment-padding-inline: 1rem;
+    --rc-segmented-button-segment-gap: 0.5em;
+    --rc-segmented-button-focus-ring: var(--rc-focus-ring);
+    --rc-segmented-button-focus-ring-offset: -2px;
+    --rc-segmented-button-disabled-opacity: var(--rc-disabled-opacity);
+  }
+}

package/components/select.css

@@ -0,0 +1,197 @@
+@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 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 {
+    border-color: var(--md-sys-color-on-surface, CanvasText);
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 4%,
+      var(--md-sys-color-surface, Field)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger):focus-visible,
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-select::part(trigger)[aria-expanded='true'] {
+    border-color: var(--md-sys-color-primary, Highlight);
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
+    outline: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(chip) {
+    min-block-size: 2rem;
+    border-color: var(--md-sys-color-outline, ButtonBorder);
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(chips) {
+    --rc-chip-block-size: 2rem;
+    --rc-chip-touch-target-block-size: 3rem;
+    --rc-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-chip-remove-target-size: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(chip):hover {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText) 8%,
+      transparent
+    );
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
+  }
+
+  /*
+   * Propagate Material styles to the embedded rc-listbox host. rc-listbox renders
+   * options into its own light DOM inside rc-select's shadow root, so inherited
+   * 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 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);
+    --rc-highlight-text: var(--md-sys-color-on-surface, CanvasText);
+    --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(--md-sys-color-secondary-container, Highlight);
+    --rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+
+    /* M3 menus use background state layer for keyboard focus, not an outline ring */
+    --rc-focus-ring: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(toggle-indicator) {
+    color: var(
+      --md-outlined-select-text-field-trailing-icon-color,
+      var(--md-sys-color-on-surface-variant, CanvasText)
+    );
+    transition:
+      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) {
+    transform: rotate(180deg);
+    color: var(
+      --md-outlined-select-text-field-focus-trailing-icon-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select[disabled]::part(trigger) {
+    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/slider.css

@@ -0,0 +1,19 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-slider::part(value-display) {
+    min-inline-size: 2rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    background: var(--md-sys-color-inverse-surface, var(--md-sys-color-on-surface, CanvasText));
+    color: var(--md-sys-color-inverse-on-surface, var(--md-sys-color-surface, Canvas));
+    font-size: var(--md-sys-typescale-label-small-size, 0.75rem);
+    text-align: center;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-slider input[type='range'] {
+    accent-color: var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-slider[disabled] {
+    opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+}

package/components/snackbar.css

@@ -0,0 +1,23 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-snackbar {
+    --rc-snackbar-inset-block-end: calc(1rem + var(--rc-navigation-bar-block-size, 0px));
+    --rc-snackbar-min-block-size: 3rem;
+    --rc-snackbar-max-inline-size: 30rem;
+    --rc-snackbar-padding-block: 0.875rem;
+    --rc-snackbar-padding-inline: 1rem;
+    --rc-snackbar-border: 0;
+    --rc-snackbar-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-snackbar-bg: var(--md-sys-color-inverse-surface, CanvasText);
+    --rc-snackbar-color: var(--md-sys-color-inverse-on-surface, Canvas);
+    --rc-snackbar-action-color: var(--md-sys-color-inverse-primary, LinkText);
+    --rc-snackbar-action-border: 0;
+    --rc-snackbar-action-radius: var(--md-sys-shape-corner-full, 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-snackbar-shadow: var(--rc-shadow-level3);
+    --rc-snackbar-focus-ring: 2px solid var(--md-sys-color-inverse-primary, Highlight);
+    --rc-snackbar-focus-ring-offset: 2px;
+  }
+}

package/components/splitter.css

@@ -0,0 +1,35 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter {
+    /* 24px wide strip — meets WCAG 2.5.8 touch target in the cross axis */
+    --rc-splitter-separator-size: 1.5rem;
+    --rc-splitter-separator-color: var(--md-sys-color-surface-container, Canvas);
+    /* No keyline border; surface color provides enough contrast */
+    --rc-splitter-keyline: none;
+    --rc-splitter-separator-border-inline-start: none;
+    --rc-splitter-separator-border-inline-end: none;
+    --rc-splitter-separator-border-block-start: none;
+    --rc-splitter-separator-border-block-end: none;
+
+    /* M3 drag indicator: 32px × 4px rounded pill, like a bottom-sheet handle */
+    --rc-splitter-separator-handle-size: 2rem;
+    --rc-splitter-handle-thickness: 4px;
+    --rc-splitter-handle-border-radius: 999px;
+    /* Disable the default dot grip; use a solid pill fill instead */
+    --rc-splitter-handle-pattern: none;
+    --rc-splitter-handle-fill: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, ButtonBorder) 40%,
+      transparent
+    );
+    /* Hover state layer on the pill only, not the full strip */
+    --rc-splitter-handle-hover-fill: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --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

@@ -0,0 +1,41 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-switch {
+    --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-track-border: 2px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-switch-track-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-switch-track-bg: var(--md-sys-color-surface-container-highest, ButtonFace);
+    --rc-switch-thumb-size: 1rem;
+    --rc-switch-thumb-offset: 0.375rem;
+    --rc-switch-thumb-bg: var(--md-sys-color-outline, ButtonText);
+    --rc-switch-selected-track-border-color: var(--md-sys-color-primary, Highlight);
+    --rc-switch-selected-track-bg: var(--md-sys-color-primary, Highlight);
+    --rc-switch-selected-thumb-size: 1.5rem;
+    --rc-switch-selected-thumb-bg: var(--md-sys-color-on-primary, HighlightText);
+    --rc-switch-thumb-translate: 1.125rem;
+    --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);
+    /*
+     * 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;
+    min-block-size: var(--rc-switch-track-block-size) !important;
+    flex-shrink: 0 !important;
+  }
+}

package/components/textarea.css

@@ -0,0 +1,31 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :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-padding: 1rem;
+    --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(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
+    --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);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root) {
+    transition:
+      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 {
+    border-color: var(--md-sys-color-on-surface, CanvasText);
+  }
+}

package/components/toolbar.css

@@ -0,0 +1,32 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar::part(root) {
+    background: var(--md-sys-color-surface-container, Canvas);
+    color: var(--md-sys-color-on-surface, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button {
+    min-inline-size: 2.5rem;
+    min-block-size: 2.5rem;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    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 {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button[aria-pressed='true'] {
+    background: var(--md-sys-color-secondary-container, Highlight);
+    color: var(--md-sys-color-on-secondary-container, HighlightText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button:disabled {
+    opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+}

package/components/transfer-list.css

@@ -0,0 +1,70 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :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-transfer-list-listbox-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-transfer-list-listbox-bg: var(--md-sys-color-surface, Canvas);
+    --rc-transfer-list-option-gap: 0.75rem;
+    --rc-transfer-list-option-padding-block: 0;
+    --rc-transfer-list-option-padding-inline: 0.75rem;
+    --rc-transfer-list-option-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-transfer-list-option-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-transfer-list-option-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-transfer-list-option-selected-color: var(
+      --md-sys-color-on-secondary-container,
+      HighlightText
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(panel) {
+    padding: 0.75rem;
+    border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
+    background: var(--md-sys-color-surface-container, Canvas);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(label) {
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
+    font-weight: 500;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(listbox) {
+    border-radius: var(--md-sys-shape-corner-small, 0.25rem);
+    --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 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%,
+      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(--md-sys-color-secondary-container, Highlight);
+    --rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(button) {
+    min-block-size: 2.5rem;
+    padding-inline: 1rem;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
+    background: var(--md-sys-color-secondary-container, ButtonFace);
+    color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+}

package/components/virtual-canvas.css

@@ -0,0 +1,16 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-virtual-canvas {
+    --rc-virtual-canvas-scrollbar-width: thin;
+    --rc-virtual-canvas-scrollbar-size: 0.75rem;
+    --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
+    );
+    border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
+    background: var(--md-sys-color-surface-container-low, Canvas);
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant, ButtonBorder);
+    overflow: hidden;
+  }
+}

package/components.css

@@ -0,0 +1,42 @@
+@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
+
+@import './components/icons.css';
+@import './components/listbox.css';
+@import './components/select.css';
+@import './components/combobox.css';
+@import './components/search-bar.css';
+@import './components/field.css';
+@import './components/bottom-sheet.css';
+@import './components/textarea.css';
+@import './components/markdown-editor.css';
+@import './components/transfer-list.css';
+@import './components/button.css';
+@import './components/card.css';
+@import './components/scroller.css';
+@import './components/carousel.css';
+@import './components/chip.css';
+@import './components/chip-group.css';
+@import './components/list-item.css';
+@import './components/fab.css';
+@import './components/fab-menu.css';
+@import './components/app-bar.css';
+@import './components/menu.css';
+@import './components/menu-button.css';
+@import './components/adaptive-menu.css';
+@import './components/menubar.css';
+@import './components/navigation-bar.css';
+@import './components/navigation-rail.css';
+@import './components/toolbar.css';
+@import './components/segmented-button.css';
+@import './components/slider.css';
+@import './components/progress.css';
+@import './components/snackbar.css';
+@import './components/range-slider.css';
+@import './components/splitter.css';
+@import './components/switch.css';
+@import './components/dialog.css';
+@import './components/disclosure.css';
+@import './components/accordion.css';
+@import './components/virtual-canvas.css';
+@import './components/modes.css';
+@import './state-layer.css';