@rcarls/rc-theme-material 0.3.2 → 0.4.0

package/README.md

@@ -34,6 +34,16 @@ Selective component styles are also exported:
 @import '@rcarls/rc-theme-material/components/menu.css';
 ```
 
+The state-layer utility is included by `components.css` and `theme.css`, and is
+also exported separately for selective imports:
+
+```css
+@import '@rcarls/rc-theme-material/state-layer.css';
+```
+
+Apply `.rc-state-layer` to interactive elements that already define their own
+border radius when you want a CSS-only Material state layer.
+
 Theme styles are scoped under a `.rc-theme-material` class.
 
 ```html
@@ -53,13 +63,18 @@ bridge and component style layers:
 
 ## Theming scope
 
-The full style layer will style native controls when their intent is established
-by composition (e.g., menu items, button triggers, etc.). Otherwise, It never styles
-unrelated application controls and tries to follow design token conventions.
+The full style layer styles native controls when their intent is established by
+composition, for example menu items and button triggers. Otherwise, it does not style
+unrelated application controls and follows design-token conventions.
 
 Fonts and icons are not bundled; websites and applications may provide
 [Roboto](https://fonts.google.com/specimen/Roboto) and
 [Material Symbols](https://fonts.google.com/icons) through other means.
+Tag general icon-font markup with `data-rc-icon`; component-specific markers
+such as `data-rc-button-icon` and `data-rc-navigation-icon` opt in
+automatically. The shared `--rc-icon-font-size` and
+`--rc-icon-font-line-height` tokens keep glyph geometry consistent and can be
+overridden at the theme boundary or on one component.
 
 [Material Web](material-web.dev) token names are used where a corresponding component
 exists. Search bar and top app bar mappings follow Material 3 token terminology and

package/bridge.css

@@ -37,11 +37,80 @@
     --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);
+    --rc-button-color: var(--md-sys-color-on-primary, 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;
@@ -52,7 +121,30 @@
     --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-duration: 200ms;
+    --rc-motion-effects-duration-fast: var(--md-sys-motion-duration-150, 150ms);
+    --rc-motion-effects-easing-fast: cubic-bezier(
+      var(--md-sys-motion-easing-standard-x0, 0.2),
+      var(--md-sys-motion-easing-standard-y0, 0),
+      var(--md-sys-motion-easing-standard-x1, 0),
+      var(--md-sys-motion-easing-standard-y1, 1)
+    );
+    --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);
+    --rc-motion-spatial-duration-fast: var(--md-sys-motion-duration-350, 350ms);
+    --rc-motion-spatial-easing-fast: cubic-bezier(
+      var(--md-sys-motion-easing-emphasized-x0, 0.2),
+      var(--md-sys-motion-easing-emphasized-y0, 0),
+      var(--md-sys-motion-easing-emphasized-x1, 0),
+      var(--md-sys-motion-easing-emphasized-y1, 1)
+    );
+    --rc-motion-spatial-duration-default: var(--md-sys-motion-duration-500, 500ms);
+    --rc-motion-spatial-easing-default: var(--rc-motion-spatial-easing-fast);
+    --rc-motion-spatial-duration-slow: var(--md-sys-motion-duration-700, 700ms);
+    --rc-motion-spatial-easing-slow: var(--rc-motion-spatial-easing-fast);
+    --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,
@@ -91,10 +183,10 @@
 
   .rc-theme-material rc-listbox,
   :host(.rc-theme-material) rc-listbox {
-    --rc-listbox-option-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-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,
@@ -108,8 +200,8 @@
       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-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);
   }
 
@@ -252,6 +344,27 @@
       --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,
@@ -315,8 +428,6 @@
     --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-submenu-indicator-size: 1.25rem;
-    --rc-menu-submenu-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
     --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);
@@ -345,6 +456,8 @@
     --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,
@@ -411,18 +524,59 @@
     --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-navigation-rail-toggle-padding: 0;
+    --rc-navigation-rail-toggle-border: 0;
+    --rc-navigation-rail-toggle-font: inherit;
+  }
+  .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,
-  :host(.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-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);
   }
@@ -434,6 +588,23 @@
     --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);

package/components/app-bar.css

@@ -27,4 +27,32 @@
     :is(button, [role='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-app-bar.rc-app-bar--center-aligned {
+    --rc-app-bar-title-font-size: var(
+      --md-top-app-bar-headline-size,
+      var(--md-sys-typescale-title-large-size, inherit)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar.rc-app-bar--center-aligned::part(title) {
+    text-align: center;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar.rc-app-bar--medium {
+    --rc-app-bar-expanded-title-font-size: var(
+      --md-medium-top-app-bar-headline-size,
+      var(--md-sys-typescale-headline-small-size, inherit)
+    );
+    --rc-app-bar-expanded-padding-block: 1rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar.rc-app-bar--large {
+    --rc-app-bar-expanded-title-font-size: var(
+      --md-large-top-app-bar-headline-size,
+      var(--md-sys-typescale-headline-medium-size, inherit)
+    );
+    --rc-app-bar-expanded-padding-block: 1.25rem;
+  }
 }

package/components/bottom-sheet.css

@@ -0,0 +1,132 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-bottom-sheet {
+    --rc-bottom-sheet-bg: var(--md-sys-color-surface, Canvas);
+    --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-bottom-sheet-handle-target-block-size: 3rem;
+    --rc-bottom-sheet-snap-duration: var(--rc-motion-spatial-duration-default, 500ms);
+    --rc-bottom-sheet-snap-easing: var(
+      --rc-motion-spatial-easing-default,
+      cubic-bezier(0.2, 0, 0, 1)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-bottom-sheet > dialog {
+    position: fixed;
+    inset: auto 0 0;
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: var(--rc-bottom-sheet-max-inline-size, 40rem);
+    max-block-size: var(--rc-bottom-sheet-max-block-size, 70dvh);
+    margin-block: 0;
+    margin-inline: auto;
+    padding: var(--rc-bottom-sheet-padding, 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)));
+    overflow: auto;
+    border: 0;
+    border-radius: var(--rc-bottom-sheet-radius, 1.75rem 1.75rem 0 0);
+    background: var(--rc-bottom-sheet-bg, var(--md-sys-color-surface, Canvas));
+    color: var(--rc-bottom-sheet-color, var(--md-sys-color-on-surface, CanvasText));
+    box-shadow: var(--rc-bottom-sheet-shadow, var(--rc-shadow-level1, none));
+    font-family: var(--md-sys-typescale-body-medium-font, inherit);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-bottom-sheet > dialog::backdrop {
+    background: var(
+      --rc-bottom-sheet-scrim,
+      var(--rc-dialog-scrim, color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > [data-rc-bottom-sheet-handle] {
+    position: relative;
+    display: block;
+    inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);
+    min-block-size: var(--rc-bottom-sheet-handle-target-block-size, 3rem);
+    margin: var(--rc-bottom-sheet-handle-target-margin, 0);
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    appearance: none;
+    cursor: ns-resize;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > [data-rc-bottom-sheet-handle]::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
+    block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);
+    border-radius: var(--rc-bottom-sheet-handle-radius, 999px);
+    background: var(--rc-bottom-sheet-handle-color, GrayText);
+    translate: -50% -50%;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > [data-rc-bottom-sheet-handle]:focus-visible {
+    outline: 0.125rem solid var(--md-sys-color-primary, Highlight);
+    outline-offset: -0.25rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > :is(button, [role='button']):not([data-rc-bottom-sheet-handle]) {
+    min-block-size: 2.5rem;
+    padding-block: 0;
+    padding-inline: 1.5rem;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    background: transparent;
+    color: var(--md-sys-color-primary, ButtonText);
+    font: var(--md-sys-typescale-label-large-weight, 500)
+      var(--md-sys-typescale-label-large-size, 0.875rem) /
+      var(--md-sys-typescale-label-large-line-height, 1.25rem)
+      var(--md-sys-typescale-label-large-font, inherit);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625em);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > :is(button, [role='button']):not([data-rc-bottom-sheet-handle], :disabled):hover {
+    background: color-mix(in srgb, var(--md-sys-color-primary, ButtonText) 8%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > :is(button, [role='button']):not([data-rc-bottom-sheet-handle]):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))
+    rc-bottom-sheet
+    > dialog
+    > :is(button, [role='button']):not([data-rc-bottom-sheet-handle], :disabled):active {
+    background: color-mix(in srgb, var(--md-sys-color-primary, ButtonText) 12%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-bottom-sheet
+    > dialog
+    > :is(button, [role='button']):not([data-rc-bottom-sheet-handle]):disabled {
+    opacity: var(--rc-disabled-opacity, 0.38);
+  }
+}

package/components/button.css

@@ -0,0 +1,57 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button {
+    --rc-button-bg: var(--md-sys-color-primary, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-primary, ButtonText);
+    --rc-button-border: 0;
+    --rc-button-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-button-block-size: 2.5rem;
+    --rc-button-padding-block: 0;
+    --rc-button-padding-inline: 1.5rem;
+    --rc-button-gap: 0.5rem;
+    --rc-button-font: var(--md-sys-typescale-label-large-weight, 500)
+      var(--md-sys-typescale-label-large-size, 0.875rem) /
+      var(--md-sys-typescale-label-large-line-height, 1.25rem)
+      var(--md-sys-typescale-label-large-font, inherit);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-primary, currentColor);
+    --rc-button-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rc-button-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);
+    --rc-button-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --rc-button-state-layer-easing: var(
+      --md-sys-motion-easing-standard,
+      cubic-bezier(0.2, 0, 0, 1)
+    );
+    --_rc-button-ripple-enabled: 1;
+    --_rc-button-ripple-color: var(--md-sys-color-on-primary, currentColor);
+    --_rc-button-ripple-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+    --_rc-button-ripple-duration: var(--md-sys-motion-duration-long1, 450ms);
+    --_rc-button-ripple-easing: var(
+      --md-sys-motion-easing-emphasized-decelerate,
+      cubic-bezier(0.05, 0.7, 0.1, 1)
+    );
+    --rc-button-progress-color: var(--md-sys-color-on-primary, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button > button: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)) rc-button[disabled] > button:disabled {
+    opacity: var(--rc-disabled-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button[progress][progress-value]::part(progress) {
+    font-size: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button[progress][progress-value]::part(progress)::before {
+    display: block;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button[icon-only] {
+    --rc-button-icon-size: 2.5rem;
+    --rc-icon-font-line-height: var(--rc-button-icon-size, 2.5rem);
+  }
+}

package/components/card.css

@@ -0,0 +1,59 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card {
+    --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-shadow:
+      0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow, #000) 30%, transparent),
+      0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow, #000) 15%, transparent);
+    --rc-card-padding-block: 1rem;
+    --rc-card-padding-inline: 1rem;
+    --rc-card-actions-gap: 0.5rem;
+    --rc-card-title-font: var(--md-sys-typescale-title-medium-weight, 500)
+      var(--md-sys-typescale-title-medium-size, 1rem) /
+      var(--md-sys-typescale-title-medium-line-height, 1.5rem)
+      var(--md-sys-typescale-title-medium-font, inherit);
+    --rc-card-subtitle-font: var(--md-sys-typescale-body-medium-weight, 400)
+      var(--md-sys-typescale-body-medium-size, 0.875rem) /
+      var(--md-sys-typescale-body-medium-line-height, 1.25rem)
+      var(--md-sys-typescale-body-medium-font, inherit);
+    --rc-card-subtitle-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-card-state-layer-bg: var(--md-sys-color-on-surface, currentColor);
+    --rc-card-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rc-card-pressed-state-layer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card[selected] {
+    box-shadow:
+      0 0 0 2px var(--md-sys-color-primary, Highlight),
+      var(--rc-card-shadow);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card[disabled] {
+    opacity: var(--rc-disabled-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card > :is(h2, h3)[slot='title'] {
+    margin: 0;
+    color: var(--rc-card-title-color, inherit);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card > h2[slot='title'] {
+    font-family: var(--md-sys-typescale-title-large-font, inherit);
+    font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
+    font-weight: var(--md-sys-typescale-title-large-weight, 500);
+    line-height: var(--md-sys-typescale-title-large-line-height, 1.75rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card > h3[slot='title'] {
+    font-family: var(--md-sys-typescale-title-medium-font, inherit);
+    font-size: var(--md-sys-typescale-title-medium-size, 1rem);
+    font-weight: var(--md-sys-typescale-title-medium-weight, 500);
+    line-height: var(--md-sys-typescale-title-medium-line-height, 1.5rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-card > :is(h2, h3)[slot='title'] > a {
+    color: inherit;
+    text-decoration: none;
+  }
+}

package/components/chip.css

@@ -0,0 +1,28 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-chip {
+    --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-border-color: transparent;
+    --rc-chip-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-chip-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --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-chip-focus-ring: var(--rc-focus-ring);
+    --rc-chip-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-chip-disabled-opacity: var(--rc-disabled-opacity);
+    --rc-chip-remove-target-size: 1.5rem;
+    --rc-chip-remove-offset-inline: 0.25rem;
+  }
+}

package/components/combobox.css

@@ -1,12 +1,19 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor) {
     box-sizing: border-box;
-    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease,
+      background-color 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):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));
+    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-combobox::part(anchor):focus-within {
@@ -27,7 +34,9 @@
       --md-outlined-text-field-trailing-icon-color,
       var(--md-sys-color-on-surface-variant, CanvasText)
     );
-    transition: color 150ms ease, background-color 150ms ease;
+    transition:
+      color 150ms ease,
+      background-color 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle):hover {
@@ -42,7 +51,11 @@
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chip):hover {
-    background: color-mix(in srgb, var(--md-sys-color-on-surface-variant, CanvasText) 8%, transparent);
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText) 8%,
+      transparent
+    );
     color: var(--md-sys-color-on-surface-variant, CanvasText);
   }
 
@@ -61,7 +74,7 @@
     border-radius: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 0.25rem));
 
     /* Option sizing */
-    --rc-listbox-option-gap: 0.75rem;
+    --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;