@rcarls/rc-theme-material 0.5.0 → 0.7.0

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

@@ -0,0 +1,15 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress::part(value-display) {
+    color: var(--md-sys-color-on-surface-variant, GrayText);
+    font-size: var(--md-sys-typescale-label-small-size, 0.75rem);
+  }
+
+  :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

@@ -3,15 +3,20 @@
     border-width: 0;
     border-radius: var(--md-sys-shape-corner-full, 999px);
     box-shadow: 0 0 0 0 transparent;
-    transition: box-shadow 150ms ease, scale 150ms ease;
+    transition:
+      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 {
-    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+    box-shadow: 0 0 0 0.5rem
+      color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):active {
-    box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary, Highlight) 12%, transparent);
+    box-shadow: 0 0 0 0.625rem
+      color-mix(in srgb, var(--md-sys-color-primary, Highlight) 12%, transparent);
     scale: 0.9;
   }
 

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

@@ -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 {
@@ -31,6 +58,26 @@
     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;
+  }
+
+  /*
+   * 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,
@@ -46,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);
@@ -91,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) {
@@ -107,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,17 +4,27 @@
     --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(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+    --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 150ms ease, box-shadow 150ms ease;
+    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 {

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 {

package/components/tooltip.css

@@ -0,0 +1,12 @@
+@layer rc-theme-material.components {
+  /* Declared on the theme root so tooltips inside other shadow roots inherit it. */
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
+    --rc-tooltip-padding-block: 0.5rem;
+    --rc-tooltip-padding-inline: 0.75rem;
+    --rc-tooltip-border: 0;
+    --rc-tooltip-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    --rc-tooltip-background: var(--md-sys-color-inverse-surface, CanvasText);
+    --rc-tooltip-color: var(--md-sys-color-inverse-on-surface, Canvas);
+    --rc-tooltip-shadow: var(--rc-shadow-level2, none);
+  }
+}

package/components/transfer-list.css

@@ -3,6 +3,7 @@
     --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;
@@ -37,7 +38,10 @@
     --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/virtual-canvas.css

@@ -4,7 +4,10 @@
     --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);
+    --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);

package/components/virtual-scroller.css

@@ -0,0 +1,7 @@
+@layer rc-theme-material.components {
+  /*
+   * rc-virtual-scroller has no decorative surface of its own: the two
+   * spacer parts carry no paint, and every visual opinion belongs to the
+   * consumer's slotted list or grid. Nothing in Material maps onto it.
+   */
+}

package/components.css

@@ -1,30 +1,39 @@
-@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
+@layer rc-base, rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.native, rc-theme-material.components, rc-theme-material.css-components,
+  rc-theme-material.overrides;
 
 @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/tooltip.css';
+@import './components/popover.css';
 @import './components/range-slider.css';
 @import './components/splitter.css';
 @import './components/switch.css';
@@ -32,5 +41,6 @@
 @import './components/disclosure.css';
 @import './components/accordion.css';
 @import './components/virtual-canvas.css';
+@import './components/virtual-scroller.css';
 @import './components/modes.css';
 @import './state-layer.css';

package/constraints/material.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "name": "rc-theme-material rendered constraints",
+  "version": 1,
+  "sources": {
+    "material3": "https://m3.material.io/",
+    "lists": "https://m3.material.io/components/lists/specs",
+    "buttons": "https://m3.material.io/components/buttons/specs",
+    "iconButtons": "https://m3.material.io/components/icon-buttons/specs",
+    "iconButtonsExpressive": "https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/res/values/styles.xml",
+    "menus": "https://m3.material.io/components/menus/specs"
+  },
+  "constraints": [
+    {
+      "id": "list.inline-content-padding",
+      "selector": "rc-list > rc-list-item",
+      "variants": ["standard", "segmented"],
+      "geometry": {
+        "contentInlineStart": "16px",
+        "contentInlineEnd": "16px"
+      },
+      "source": "lists"
+    },
+    {
+      "id": "list.leading-icon",
+      "selector": "rc-list-item > [slot='leading'][data-rc-list-leading]",
+      "geometry": {
+        "inlineSize": "24px",
+        "blockSize": "24px",
+        "iconSize": "24px"
+      },
+      "source": "lists"
+    },
+    {
+      "id": "button.small-container",
+      "selector": "rc-button:not([icon-only])",
+      "geometry": {
+        "minBlockSize": "40px"
+      },
+      "typography": {
+        "role": "label-large"
+      },
+      "source": "buttons"
+    },
+    {
+      "id": "icon-button.small",
+      "selector": "rc-button[icon-only]",
+      "geometry": {
+        "containerInlineSize": "40px",
+        "containerBlockSize": "40px",
+        "iconSize": "24px",
+        "minTouchTarget": "48px"
+      },
+      "source": "iconButtons"
+    },
+    {
+      "id": "adaptive-menu.overflow-trigger",
+      "selector": "rc-adaptive-menu::part(overflow-trigger)",
+      "variants": ["small", "narrow"],
+      "geometry": {
+        "containerInlineSize": "32px",
+        "containerBlockSize": "40px",
+        "iconSize": "24px",
+        "minTouchTarget": "48px"
+      },
+      "source": "iconButtonsExpressive"
+    },
+    {
+      "id": "menu.item",
+      "selector": "rc-menu [role^='menuitem'], rc-adaptive-menu > [data-rc-action-overflowed]",
+      "geometry": {
+        "minBlockSize": "48px",
+        "paddingInlineStart": "12px",
+        "paddingInlineEnd": "12px",
+        "contentGap": "12px",
+        "leadingIconSize": "24px"
+      },
+      "typography": {
+        "role": "body-large",
+        "fontSize": "16px",
+        "fontWeight": "400",
+        "lineHeight": "24px",
+        "tracking": "0.5px"
+      },
+      "source": "menus"
+    },
+    {
+      "id": "adaptive-menu.viewport-containment",
+      "selector": "rc-adaptive-menu::part(popup)",
+      "behavior": {
+        "maxInlineSize": "viewport - 8px",
+        "maxBlockSize": "viewport - 8px",
+        "overflow": "auto",
+        "overscrollBehavior": "contain"
+      },
+      "source": "menus"
+    }
+  ]
+}

package/css-components/button.css

@@ -0,0 +1,66 @@
+@layer rc-theme-material.css-components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-button-gap, 0.5rem);
+    min-block-size: var(--rc-button-block-size, 2.5rem);
+    padding-block: var(--rc-button-padding-block, 0.5rem);
+    padding-inline: var(--rc-button-padding-inline, 1.5rem);
+    border: var(--rc-button-border, var(--rc-border, 1px solid ButtonBorder));
+    border-radius: var(--rc-button-radius, var(--rc-control-radius, 999px));
+    background: var(--rc-button-bg, ButtonFace);
+    color: var(--rc-button-color, var(--rc-button-text, ButtonText));
+    font: var(--rc-button-font, inherit);
+    text-decoration: var(--rc-button-text-decoration, none);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ):hover:not(:where(:disabled)) {
+    background: color-mix(in srgb, currentColor 8%, var(--rc-button-bg, ButtonFace));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ):active:not(:where(:disabled)),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button)[aria-pressed='true']:not(
+      :where(rc-button > button)
+    ):not(:where(rc-button > a)) {
+    background: var(--rc-highlight, Highlight);
+    color: var(--rc-highlight-text, HighlightText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):not(:where(rc-button > button)):not(
+      :where(rc-button > a)
+    ):focus-visible {
+    outline: var(--rc-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-focus-ring-offset, 2px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where(button.rc-button, a[href].rc-button):is(:disabled, [aria-disabled='true']) {
+    color: var(--rc-text-disabled, GrayText);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :where(button.rc-button, a[href].rc-button)[aria-pressed='true'] {
+      border-color: Highlight;
+      outline: 1px solid Highlight;
+      outline-offset: -1px;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}