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

package/components/card.css

@@ -0,0 +1,61 @@
+@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);
+    --rc-card-state-layer-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --rc-card-state-layer-easing: var(--md-sys-motion-easing-standard, ease);
+  }
+
+  :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/carousel.css

@@ -0,0 +1,23 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-carousel {
+    --rc-carousel-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-carousel-navigation-button-background: color-mix(
+      in srgb,
+      var(--md-sys-color-surface, Canvas) 75%,
+      transparent
+    );
+    --rc-carousel-navigation-button-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-carousel-pagination-item-color: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 40%,
+      transparent
+    );
+    --rc-carousel-pagination-item-active-color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-carousel-item {
+    --rc-carousel-item-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-carousel-item-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-carousel-item-border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+  }
+}

package/components/chip-group.css

@@ -0,0 +1,15 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-chip-group {
+    --rc-chip-group-column-gap: 0.5rem;
+    --rc-chip-group-row-gap: 0;
+    --rc-chip-group-padding-block: 0;
+    --rc-chip-group-scroll-padding-inline: 0;
+    --rc-chip-group-scrollbar-width: none;
+    --rc-chip-group-toggle-gap: 0.5rem;
+    --rc-chip-group-toggle-separator-gap: 0.5rem;
+    --rc-chip-group-toggle-icon-size: 1.125rem;
+    --rc-chip-group-toggle-separator-block-size: 1.5rem;
+    --rc-chip-group-toggle-separator-inline-size: 1px;
+    --rc-chip-group-toggle-separator-color: var(--md-sys-color-outline-variant, currentColor);
+  }
+}

package/components/chip.css

@@ -0,0 +1,39 @@
+@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-padding-inline-start: var(--rc-chip-padding-inline);
+    --rc-chip-padding-inline-end: var(--rc-chip-padding-inline);
+    --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: 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-chip-padding-block: 0;
+    --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;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-chip:has([data-rc-chip-icon]) {
+    --rc-chip-gap: 0.5rem;
+    --rc-chip-padding-inline-start: 0.5rem;
+  }
+}

package/components/combobox.css

@@ -0,0 +1,155 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor) {
+    box-sizing: border-box;
+    transition:
+      border-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      box-shadow var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-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)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):focus-within {
+    border-color: var(--md-sys-color-primary, Highlight);
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chip) {
+    min-block-size: 2rem;
+    border-color: var(--md-sys-color-outline, ButtonBorder);
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chips) {
+    --rc-chip-block-size: 2rem;
+    --rc-chip-touch-target-block-size: 3rem;
+    --rc-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
+    --rc-chip-remove-target-size: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle) {
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    color: var(
+      --md-outlined-text-field-trailing-icon-color,
+      var(--md-sys-color-on-surface-variant, CanvasText)
+    );
+    transition:
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease),
+      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-combobox::part(toggle):hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox[open]::part(toggle) {
+    color: var(
+      --md-outlined-text-field-focus-trailing-icon-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+  }
+
+  :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
+    );
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox[popup-mode='dialog']::part(dialog-search) {
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
+    font-family: var(--md-sys-typescale-label-medium-font, inherit);
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox[popup-mode='dialog']::part(dialog-input) {
+    min-block-size: 3.5rem;
+    padding-inline: 1rem;
+    border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
+    background: transparent;
+    color: var(--md-sys-color-on-surface, FieldText);
+    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);
+
+    &:focus-visible {
+      border-color: var(--md-sys-color-primary, Highlight);
+      box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
+    }
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-combobox[popup-mode='dialog']::part(dialog-listbox) {
+    min-block-size: 0;
+    padding-block: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  /*
+   * Propagate Material styles to the embedded rc-listbox host. rc-listbox renders
+   * options into its own light DOM inside rc-combobox's shadow root, so inherited
+   * custom properties are the stable styling contract for option rows.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::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 */
+    --rc-listbox-option-gap: var(--rc-list-item-gap, 0.75rem);
+    --rc-listbox-option-min-block-size: 3rem;
+    --rc-listbox-option-padding-block: 0;
+    --rc-listbox-option-padding-inline: 0.75rem;
+    --rc-listbox-option-transition:
+      background-color var(--rc-motion-effects-duration-fast, 150ms)
+        var(--rc-motion-effects-easing-fast, ease),
+      color var(--rc-motion-effects-duration-fast, 150ms) var(--rc-motion-effects-easing-fast, ease);
+
+    /* M3 hover state layer (8% on-surface) instead of secondary-container */
+    --rc-highlight: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
+    --rc-highlight-text: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-hover-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 8%,
+      transparent
+    );
+    --rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-listbox-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 12%,
+      transparent
+    );
+    --rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
+
+    /* Selected state */
+    --rc-listbox-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+
+    /* M3 menus use background state layer for keyboard focus, not an outline ring */
+    --rc-focus-ring: none;
+  }
+}

package/components/dialog.css

@@ -0,0 +1,86 @@
+@layer rc-theme-material.components {
+  /*
+   * Maps Material tokens onto the public rc-dialog properties. The surface and
+   * the fullscreen geometry are drawn by the component's own light-DOM base
+   * layer, including the explicit block bound and overflow that keep a tall
+   * dialog's corners clipping correctly in Chromium.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog {
+    --rc-dialog-min-inline-size: min(17.5rem, calc(100vw - 3rem));
+    --rc-dialog-max-inline-size: min(35rem, calc(100vw - 3rem));
+    --rc-dialog-max-block-size: calc(100dvh - 3rem);
+    --rc-dialog-padding: 1.5rem;
+    --rc-dialog-border: 0;
+    --rc-dialog-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
+    --rc-dialog-background: var(--md-sys-color-surface-container-high, Canvas);
+    --rc-dialog-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-dialog-shadow: var(--rc-shadow-level3, var(--rc-shadow, none));
+    --rc-dialog-scrim: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog {
+    font-family: var(--md-sys-typescale-body-medium-font, inherit);
+  }
+
+  /*
+   * Fallback styling for plain, unwrapped buttons in dialog content or
+   * actions. Descendants of a defined custom element are excluded because
+   * that wrapper owns its native control's presentation. The :where() list
+   * identifies native grouping elements that commonly organize dialog
+   * content; unlike autonomous custom elements, they should not suppress
+   * the fallback treatment.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-dialog
+    > dialog
+    :is(button, [role='button']):not(
+      rc-dialog
+        > dialog
+        :defined:not(
+          :where(
+            address,
+            article,
+            aside,
+            blockquote,
+            dd,
+            details,
+            div,
+            dl,
+            dt,
+            fieldset,
+            figcaption,
+            figure,
+            footer,
+            form,
+            header,
+            hgroup,
+            li,
+            main,
+            menu,
+            nav,
+            ol,
+            p,
+            search,
+            section,
+            span,
+            table,
+            tbody,
+            td,
+            tfoot,
+            th,
+            thead,
+            tr,
+            ul
+          )
+        )
+        *
+    ) {
+    min-block-size: 2.5rem;
+    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-weight: 500;
+  }
+}

package/components/disclosure.css

@@ -0,0 +1,104 @@
+@layer rc-theme-material.components {
+  /*
+   * Maps Material tokens onto the public rc-disclosure properties. The panel,
+   * summary, and content boxes are drawn by the component's own light-DOM base
+   * layer; what is left here is the token mapping plus decoration that genuinely
+   * depends on a selector.
+   *
+   * One mapping covers both `rc-disclosure` and `rc-accordion`, since a panel
+   * reads the same properties either way.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure {
+    /*
+     * Layout stays in theme CSS so a disclosure is laid out before the element
+     * upgrades; only the property-driven drawing lives in the component's base
+     * layer, which needs JS to install.
+     */
+    display: block;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) :is(rc-disclosure, rc-accordion) {
+    --rc-theme-material-disclosure-easing: 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-disclosure-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-disclosure-radius: var(--md-sys-shape-corner-large, 1rem);
+    --rc-disclosure-background: var(--md-sys-color-surface-container-low, Canvas);
+    --rc-disclosure-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-disclosure-open-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-disclosure-open-shadow: var(
+      --rc-shadow-level1,
+      0 1px 2px 0 rgb(0 0 0 / 0.3),
+      0 1px 3px 1px rgb(0 0 0 / 0.15)
+    );
+
+    --rc-disclosure-summary-min-block-size: 3.5rem;
+    --rc-disclosure-summary-padding-block: 0.75rem;
+    --rc-disclosure-summary-padding-inline: 1rem;
+    --rc-disclosure-summary-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-disclosure-summary-font: var(--md-sys-typescale-title-small-weight, 500)
+      var(--md-sys-typescale-title-small-size, 0.875rem) /
+      var(--md-sys-typescale-title-small-line-height, 1.25rem)
+      var(--md-sys-typescale-title-small-font, sans-serif);
+    --rc-disclosure-summary-marker-color: var(--md-sys-color-on-surface-variant, GrayText);
+    --rc-disclosure-summary-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+    --rc-disclosure-focus-ring-offset: -2px;
+
+    --rc-disclosure-content-padding-block: 0 1rem;
+    --rc-disclosure-content-padding-inline: 1rem;
+    --rc-disclosure-content-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-disclosure-content-font: 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, sans-serif);
+
+    --rc-disclosure-duration: var(--rc-motion-effects-duration-slow, 300ms);
+    --rc-disclosure-easing: var(--rc-theme-material-disclosure-easing);
+    --rc-accordion-gap: 0.125rem;
+  }
+
+  /*
+   * Clipping keeps the summary's hover layer and the animating content inside
+   * the corner radius, and the panel cross-fades its own surface as it opens.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) :is(rc-disclosure, rc-accordion) > details {
+    overflow: clip;
+    transition:
+      background-color var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-theme-material-disclosure-easing),
+      border-color var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-theme-material-disclosure-easing),
+      box-shadow var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-theme-material-disclosure-easing);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary {
+    -webkit-tap-highlight-color: transparent;
+    border-radius: calc(var(--md-sys-shape-corner-large, 1rem) - 1px);
+    transition: background-color var(--rc-motion-effects-duration-fast, 150ms)
+      var(--rc-theme-material-disclosure-easing);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary:active {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-pressed-state-layer-opacity, 0.12) * 100%),
+      transparent
+    );
+  }
+}

package/components/fab-menu.css

@@ -0,0 +1,85 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu {
+    --rc-fab-menu-size: 3.5rem;
+    --rc-fab-menu-trigger-gap: 0.5rem;
+    --rc-fab-menu-padding-block: 0;
+    --rc-fab-menu-padding-inline: 1rem;
+    --rc-fab-menu-appearance: none;
+    --rc-fab-menu-border: 0;
+    --rc-fab-menu-bg: var(
+      --md-fab-container-color,
+      var(--md-sys-color-primary-container, ButtonFace)
+    );
+    --rc-fab-menu-color: var(
+      --md-fab-icon-color,
+      var(--md-sys-color-on-primary-container, ButtonText)
+    );
+    --rc-fab-menu-shadow: var(--rc-shadow-level3);
+    --rc-fab-menu-bg-hover: var(--rc-fab-menu-bg);
+    --rc-fab-menu-bg-open: var(--rc-fab-menu-bg-hover);
+    --rc-fab-menu-shadow-hover: var(--rc-shadow-level4);
+    --rc-fab-menu-shadow-open: var(--rc-fab-menu-shadow-hover);
+    --rc-fab-menu-shadow-active: var(--rc-shadow-level3);
+    --rc-fab-menu-radius: var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 1rem));
+    --rc-fab-menu-font-family: var(
+      --md-fab-label-text-font,
+      var(--md-sys-typescale-label-large-font, inherit)
+    );
+    --rc-fab-menu-font-size: var(
+      --md-fab-label-text-size,
+      var(--md-sys-typescale-label-large-size, 0.875rem)
+    );
+    --rc-fab-menu-font-weight: var(
+      --md-fab-label-text-weight,
+      var(--md-sys-typescale-label-large-weight, 500)
+    );
+    --rc-fab-menu-letter-spacing: var(
+      --md-fab-label-text-tracking,
+      var(--md-sys-typescale-label-large-tracking, 0.00625em)
+    );
+    --rc-fab-menu-text-decoration: none;
+    --rc-fab-menu-user-select: none;
+    --rc-fab-menu-transition:
+      background var(--md-sys-motion-duration-short4, 200ms) ease,
+      box-shadow var(--md-sys-motion-duration-short4, 200ms) ease,
+      transform var(--md-sys-motion-duration-short4, 200ms) ease;
+    --rc-fab-menu-active-transform: scale(0.96);
+    --rc-fab-menu-disabled-opacity: 0.38;
+    --rc-fab-menu-disabled-shadow: none;
+    --rc-fab-menu-focus-ring: var(--rc-focus-ring);
+    --rc-fab-menu-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-fab-menu-popup-duration: var(--md-sys-motion-duration-short3, 150ms);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu > button:hover {
+    --rc-fab-menu-bg-hover: color-mix(
+      in srgb,
+      var(--md-fab-hover-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 8%,
+      var(--rc-fab-menu-bg, var(--md-sys-color-primary-container, ButtonFace))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu > button:active {
+    --rc-fab-menu-bg-open: color-mix(
+      in srgb,
+      var(--md-fab-pressed-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 12%,
+      var(--rc-fab-menu-bg, var(--md-sys-color-primary-container, ButtonFace))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu.rc-fab--small {
+    --rc-fab-menu-size: 2.5rem;
+    --rc-fab-menu-radius: var(
+      --md-fab-small-container-shape,
+      var(--md-sys-shape-corner-medium, 0.75rem)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab-menu.rc-fab--large {
+    --rc-fab-menu-size: 6rem;
+    --rc-fab-menu-radius: var(
+      --md-fab-large-container-shape,
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+    );
+  }
+}

package/components/fab.css

@@ -0,0 +1,51 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab {
+    --rc-fab-size: 3.5rem;
+    --rc-fab-gap: 0.5rem;
+    --rc-fab-padding-block: 0;
+    --rc-fab-padding-inline: 1rem;
+    --rc-fab-border: 0;
+    --rc-fab-bg-hover: var(--rc-fab-bg);
+    --rc-fab-active-transform: scale(0.96);
+    --rc-fab-focus-ring: var(--rc-focus-ring);
+    --rc-fab-focus-ring-offset: var(--rc-focus-ring-offset);
+    --rc-fab-disabled-opacity: var(--rc-disabled-opacity, 0.38);
+    --rc-fab-disabled-shadow: none;
+    --rc-fab-transition:
+      background var(--rc-motion-duration, 200ms) ease,
+      box-shadow var(--rc-motion-duration, 200ms) ease,
+      transform var(--rc-motion-duration, 200ms) ease;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab > button:hover {
+    background: color-mix(
+      in srgb,
+      var(--md-fab-hover-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 8%,
+      var(--rc-fab-bg, var(--md-sys-color-primary-container, ButtonFace))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab > button:active {
+    background: color-mix(
+      in srgb,
+      var(--md-fab-pressed-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 12%,
+      var(--rc-fab-bg, var(--md-sys-color-primary-container, ButtonFace))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab.rc-fab--small {
+    --rc-fab-size: 2.5rem;
+    --rc-fab-radius: var(
+      --md-fab-small-container-shape,
+      var(--md-sys-shape-corner-medium, 0.75rem)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-fab.rc-fab--large {
+    --rc-fab-size: 6rem;
+    --rc-fab-radius: var(
+      --md-fab-large-container-shape,
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+    );
+  }
+}