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

package/components/adaptive-menu.css

@@ -0,0 +1,162 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-adaptive-menu {
+    --rc-adaptive-menu-gap: 0;
+    --rc-adaptive-menu-trigger-inline-size: 2rem;
+    --rc-adaptive-menu-trigger-block-size: 2.5rem;
+    --rc-adaptive-menu-touch-target-block-size: 3rem;
+    /*
+     * Unlike rc-button's narrow variant (opt-in, usable anywhere), the
+     * overflow trigger is always the trailing-most control in its toolbar
+     * by design -- there's no legitimate placement where something else
+     * needs the space this reclaims -- so this defaults unconditionally
+     * rather than needing its own opt-in variant. (3rem touch target - 2rem
+     * trigger-inline-size) / 2, matching --rc-adaptive-menu-trigger-inline-size
+     * above.
+     */
+    --rc-adaptive-menu-touch-target-overlap-inline-end: 0.5rem;
+    --rc-adaptive-menu-trigger-padding: 0.25rem;
+    --rc-adaptive-menu-trigger-border: 0;
+    --rc-adaptive-menu-trigger-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-adaptive-menu-trigger-background: transparent;
+    --rc-adaptive-menu-trigger-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-adaptive-menu-icon-size: 1.5rem;
+    --rc-adaptive-menu-popup-min-inline-size: 7rem;
+    --rc-adaptive-menu-popup-padding-block: 0.5rem;
+    --rc-adaptive-menu-popup-border: 0;
+    --rc-adaptive-menu-popup-radius: var(
+      --md-menu-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+    --rc-adaptive-menu-popup-background: var(
+      --md-menu-container-color,
+      var(--md-sys-color-surface-container, Canvas)
+    );
+    --rc-adaptive-menu-popup-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-adaptive-menu-popup-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
+    --rc-adaptive-menu-item-min-block-size: 3rem;
+    --rc-adaptive-menu-item-padding-block: 0;
+    --rc-adaptive-menu-item-padding-inline: 0.75rem;
+    --rc-adaptive-menu-item-gap: 0.75rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu::part(overflow-trigger):hover {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu::part(overflow-trigger):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-adaptive-menu
+    > [data-rc-action-promoted]:has([data-rc-menu-leading])
+    [data-rc-menu-label] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-promoted] {
+    --rc-menu-button-indicator-size: 0px;
+    --rc-menu-button-indicator-inset: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-promoted]
+    > [slot='indicator'] {
+    display: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > [data-rc-action-overflowed] {
+    inline-size: 100%;
+    color: var(--md-sys-color-on-surface, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-button[data-rc-action-overflowed] {
+    display: block;
+    min-inline-size: 100%;
+    min-block-size: 0;
+    --rc-button-block-size: 3rem;
+    --rc-button-icon-size: 100%;
+    --rc-button-touch-target-inline-size: 100%;
+    --rc-button-touch-target-block-size: 3rem;
+    --rc-button-padding-inline: 0.75rem;
+    --rc-button-padding-block: 0;
+    --rc-button-radius: 0;
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: var(--md-sys-color-on-surface, CanvasText);
+    --rc-button-progress-color: var(--md-sys-color-on-surface, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-overflowed] {
+    display: block;
+    min-inline-size: 100%;
+    min-block-size: 0;
+    --rc-menu-button-trigger-block-size: 3rem;
+    --rc-menu-button-icon-size: 100%;
+    --rc-menu-button-touch-target-inline-size: 100%;
+    --rc-menu-button-touch-target-block-size: 3rem;
+    --rc-menu-button-trigger-padding-block: 0;
+    --rc-menu-button-trigger-padding-inline: 0.75rem;
+    --rc-menu-button-trigger-gap: 0.75rem;
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menu-button-trigger-hover-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-menu-button-trigger-open-color: var(--md-sys-color-on-surface, CanvasText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-overflowed]
+    > [slot='trigger'] {
+    justify-content: flex-start;
+    inline-size: 100%;
+    min-inline-size: 100%;
+    padding-inline: 0.75rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > [data-rc-action-overflowed]
+    [data-rc-menu-label] {
+    font: var(--md-sys-typescale-body-large-weight, 400)
+      var(--md-sys-typescale-body-large-size, 1rem) /
+      var(--md-sys-typescale-body-large-line-height, 1.5rem)
+      var(--md-sys-typescale-body-large-font, inherit);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.03125rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > [data-rc-action-overflowed]
+    [data-rc-menu-leading] {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+}

package/components/app-bar.css

@@ -0,0 +1,100 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar {
+    box-shadow: var(--rc-shadow-level0, none);
+    font-family: var(--md-sys-typescale-title-large-font, inherit);
+    transition:
+      box-shadow var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-motion-effects-easing-default, ease),
+      translate var(--rc-motion-spatial-duration-default, 400ms)
+        var(--rc-motion-spatial-easing-default, ease);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar[data-scrolled] {
+    --rc-app-bar-bg: var(--md-sys-color-surface-container, Canvas);
+    box-shadow: var(--rc-shadow-level2, none);
+  }
+
+  /*
+   * A bare <button>/[role=button] dropped directly into an rc-app-bar's
+   * leading or trailing action slot gets full M3 icon-button treatment on
+   * its own — MD3 "Small" icon button: 40dp visual container / 24dp icon —
+   * without needing rc-button. Scoped to a *direct* child
+   * (`>`, not a descendant combinator): a button nested inside an
+   * `rc-button`/`rc-menu-button` slotted here is several levels deeper in
+   * the light DOM and already has its own correct sizing from that
+   * component's own theming; a descendant selector here would reach
+   * straight through and fight it.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing']) {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--md-sys-shape-corner-full, 999px);
+    background: transparent;
+    color: inherit;
+  }
+
+  /* Accessible touch-target floor, decoupled from the visual size above —
+     the same affordance rc-button's own icon-only buttons provide. A
+     no-op once the visible button already meets or exceeds it. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing'])::before {
+    content: '';
+    position: absolute;
+    inset: calc((3rem - max(100%, 2.5rem)) / -2);
+  }
+
+  /* Sizes the button's own content (typically a single icon) to the MD3
+     icon-button glyph size, regardless of whether it carries a marker
+     attribute — a direct child of an app-bar action button is
+     unambiguously its icon. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing'])
+    > * {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing']):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,135 @@
+@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-container-low, 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-fast, 300ms);
+    --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-container-low, 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))
+    );
+  }
+
+  /* Descendant (not child) combinator: consuming apps may nest the handle
+     inside their own peek-content wrapper (e.g. grouped with a summary
+     row) rather than placing it as a direct child of dialog. */
+  :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,270 @@
+@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-duration: var(--rc-motion-effects-duration-fast, 150ms);
+    --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(--rc-motion-spatial-duration-slow, 500ms);
+    --_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);
+    --rc-button-disabled-opacity: var(--rc-disabled-opacity, 0.38);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--tonal {
+    --rc-button-bg: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-secondary-container, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-secondary-container, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-secondary-container, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--outlined {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-primary, ButtonText);
+    --rc-button-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-button-state-layer-bg: var(--md-sys-color-primary, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-primary, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-primary, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--text {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-primary, ButtonText);
+    --rc-button-border: 0;
+    --rc-button-padding-inline: 0.75rem;
+    --rc-button-state-layer-bg: var(--md-sys-color-primary, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-primary, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-primary, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-icon-button--standard[icon-only] {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: var(--md-sys-color-on-surface-variant, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-surface-variant, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-surface-variant, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-icon-button--tonal[icon-only] {
+    --rc-button-bg: var(--md-sys-color-secondary-container, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-secondary-container, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-secondary-container, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-secondary-container, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-secondary-container, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-icon-button--outlined[icon-only] {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-button-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-surface-variant, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-surface-variant, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-surface-variant, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button[data-tone='danger'] {
+    --rc-button-bg: var(--md-sys-color-error, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-error, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-error, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-on-error, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-on-error, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button:is(
+      .rc-button--tonal,
+      .rc-button--outlined,
+      .rc-button--text,
+      .rc-icon-button--standard,
+      .rc-icon-button--tonal,
+      .rc-icon-button--outlined
+    )[data-tone='danger'] {
+    --rc-button-bg: transparent;
+    --rc-button-color: var(--md-sys-color-error, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-error, currentColor);
+    --_rc-button-ripple-color: var(--md-sys-color-error, currentColor);
+    --rc-button-progress-color: var(--md-sys-color-error, ButtonText);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button:is(.rc-button--tonal, .rc-icon-button--tonal)[data-tone='danger'] {
+    --rc-button-bg: var(--md-sys-color-error-container, ButtonFace);
+    --rc-button-color: var(--md-sys-color-on-error-container, ButtonText);
+    --rc-button-state-layer-bg: var(--md-sys-color-on-error-container, currentColor);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button:is(.rc-button--outlined, .rc-icon-button--outlined)[data-tone='danger'] {
+    --rc-button-border: 1px solid var(--md-sys-color-error, ButtonBorder);
+  }
+
+  :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] {
+    /* MD3 expressive "Small" icon button (the default/unmodified size): a
+       40dp square container around a 24dp icon. rc-button's own touch-target
+       affordance (min-inline/block-size 3rem, plus the light-DOM hit-slop)
+       makes up the difference to the 48dp minimum tap target on its own; no
+       theme-level override is needed for that here. */
+    --rc-button-icon-size: 2.5rem;
+    --rc-icon-button-icon-font-size: 1.5rem;
+  }
+
+  /*
+   * MD3 expressive icon-button sizes. Each sets both the square container
+   * (`--rc-button-block-size`/`--rc-button-icon-size`, since `icon-only`'s
+   * default width equals its height) and the icon glyph size together, so
+   * the two stay in the spec's fixed ratio instead of drifting independently.
+   * Values: https://m3.material.io/components/icon-buttons/specs (container
+   * height / icon size, dp): extra-small 32/20, small 40/24 (above, default),
+   * medium 56/24, large 96/32, extra-large 136/40.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-small[icon-only] {
+    --rc-button-block-size: 2rem;
+    --rc-button-icon-size: 2rem;
+    --rc-icon-button-icon-font-size: 1.25rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--medium[icon-only] {
+    --rc-button-block-size: 3.5rem;
+    --rc-button-icon-size: 3.5rem;
+    --rc-icon-button-icon-font-size: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--large[icon-only] {
+    --rc-button-block-size: 6rem;
+    --rc-button-icon-size: 6rem;
+    --rc-icon-button-icon-font-size: 2rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-large[icon-only] {
+    --rc-button-block-size: 8.5rem;
+    --rc-button-icon-size: 8.5rem;
+    --rc-icon-button-icon-font-size: 2.5rem;
+  }
+
+  /*
+   * Width variants change only the container's inline size; block size (and
+   * the icon itself) stay governed by the size class above, or the default
+   * "small" size when none is present. `narrow` suits dense/overflow
+   * contexts (an app bar's trailing overflow trigger); `wide` suits roomier
+   * toolbars that can spare the extra tap-friendly width. Per-size pairing
+   * is required because each size's narrow/wide delta is a fixed spec value,
+   * not a proportional one.
+   */
+  /*
+   * The overlap tokens below give back exactly what --rc-button-icon-size
+   * leaves unclaimed of the 3rem default touch target ((3rem - icon-size) /
+   * 2, matching the button's own centered inflation) -- the narrow variant's
+   * documented reason for existing is dense/edge contexts, so this is a
+   * default here, not left for every consumer to compute and set
+   * individually. Trailing-edge only: narrow's own doc comment names an app
+   * bar's *trailing* overflow trigger as the canonical case, and defaulting
+   * only one side halves the risk of two adjacent narrow buttons' touch
+   * targets colliding if a consumer places one where it does have a real
+   * neighbor. Medium/large/extra-large narrow variants already meet or
+   * exceed the touch target on their own (see each size's own comment
+   * above), so they need no overlap default here.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-small.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 1.75rem;
+    --rc-button-touch-target-overlap-inline-end: 0.625rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-small.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 2.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 2rem;
+    --rc-button-touch-target-overlap-inline-end: 0.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-button.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 3.25rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--medium.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 3rem;
+    /* Already meets the 3rem default touch target on its own; the bare
+       .rc-button--narrow[icon-only] rule's overlap default still matches
+       here too (class selectors don't exclude each other), so it needs an
+       explicit reset. */
+    --rc-button-touch-target-overlap-inline-end: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--medium.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 4.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--large.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 4rem;
+    --rc-button-touch-target-overlap-inline-end: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--large.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 8rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-large.rc-button--narrow[icon-only] {
+    --rc-button-icon-size: 6.5rem;
+    --rc-button-touch-target-overlap-inline-end: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button.rc-button--extra-large.rc-button--wide[icon-only] {
+    --rc-button-icon-size: 11.5rem;
+  }
+}