@rcarls/rc-theme-material 0.3.2 → 0.4.1

package/CHANGELOG.md

@@ -0,0 +1,83 @@
+# @rcarls/rc-theme-material
+
+## 0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- e57277f: Add Material 3 search-view, fixed-pane splitter, dialog scrim, and resize enhancements.
+
+  `rc-search-bar` now supports `variant="view"`, controlled/default open state, search-view methods, a rich `suggestions` slot, and datalist-derived text suggestions. `rc-splitter` adds `mode="fixed"` for clampable pixel primary panes. `rc-common` now honors CSS max-size constraints during resize gestures, and `rc-dialog` exposes a scrim token plus resize handle/origin hooks used by themed surfaces.
+
+- c40a1be: Add theme-neutral fast, default, and slow effects and spatial motion token
+  pairs. Expose bottom-sheet settle easing through
+  `--rc-bottom-sheet-snap-easing` and map sheet settling to the Material spatial
+  motion scheme.
+
+  Give direct-child bottom-sheet handles a full-width 48px interaction target
+  while preserving the 32 by 4 pixel visual indicator. Replace rectangular
+  mobile browser tap highlights on chips with themeable, shape-clipped state
+  layers. Keep bottom-sheet snap targets docked to the block-end edge when CSS
+  minimum or maximum sizing constrains their requested heights.
+
+  Mount declaratively assigned textarea plugins at connection time and remount
+  them after reconnection, preserving plugin effects and adopted styles in
+  framework render lifecycles.
+
+### Patch Changes
+
+- 9c7476d: Add theme-specific rc-button progress treatments, including compact Material spinners and
+  Substrate percentage indicators.
+- 3efe74a: Center navigation rail header content on the inline axis and remove Material
+  elevation from FABs placed in the header slot.
+- ebec800: Dock bottom sheets without a theme to the viewport block-end by default and
+  support absolute positioning for non-modal sheets contained by a positioned ancestor.
+  Center authored drag handles with a splitter-aligned pill treatment. Align the
+  Material theme with its surface, elevation, scrim, drag-handle, and contextual
+  button treatment.
+- e88eff8: Refine semantic card-title typography and icon-button alignment across both
+  themes. Simplify Substrate navigation selection, match its bottom-sheet handle
+  to the splitter grip, improve inverse notification action contrast, and theme the
+  Markdown editor's composed controls.
+- 6f91e7a: Fix collapsed `rc-navigation-rail` items so the whole item's box wraps icon and
+  label, not just the icon. The shared component pulled the label out of flow
+  (`position: absolute`), so a theme's whole-item background or focus ring only
+  covered the icon; Material's detached-pill layout now lives in its own theme
+  stylesheet instead of the shared base. Substrate's collapsed rail also grows
+  from `5rem` to `6rem` so single-word labels like "Settings" stop wrapping.
+- dce5749: Replace the navigation rail's shadow-DOM fallback toggle with a consumer-authored light-DOM
+  button, and align collapsed and expanded item layouts across the default and reference themes.
+- 55e8ab5: Preserve UA-like control and surface styling until an optional theme supplies decorative tokens.
+  Restore themed button hover and pressed state layers, including a pointer-origin Material ripple.
+- 4d118ff: Share icon-font size and line-height tokens across themed component icon markers.
+- 3e89095: Replace rc-menu's generated submenu glyph with an author-supplied `indicator`
+  slot on rc-menu-button. Keep the decorative indicator inside the trigger bounds,
+  reserve label space for it, and expose theme-neutral size, color, and inset
+  tokens for Material, Substrate, and application themes.
+- 0dd9ff5: Prevent Material switches from collapsing below their 52 by 32 pixel track geometry in constrained flex and grid layouts.
+- 979b989: Use a zero default gap for tighter chip content layout and a smaller default
+  font size for slotted remove icons. Derive removable content padding from the
+  remove target width and chip gap so the label and trailing icon stay aligned.
+
+## 0.3.2
+
+## 0.3.1
+
+## 0.3.0
+
+### Added
+
+- Add full Material 3 token support.
+- Add Material styling for the FAB back-to-top pattern.
+- Add Material styling for the splitter collapse handle.
+
+### Changed
+
+- Normalize listbox, menu, menu-button, and menubar styling through inherited component tokens.
+- Update search-bar elevation, hover, and keyboard-focus styling.
+- Update rc-select selectors for the default native select slot.
+- Update transfer-list listbox backgrounds and action button corner radius.
+- Update package metadata, README intro, and docs links.
+
+## 0.2.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;
+  }
+}