@rcarls/rc-theme-material 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @rcarls/rc-theme-material
 
+## 0.6.0
+
+### Minor Changes
+
+- ffcbf11: Add adaptive chip-group layouts, native-backed filter chips, and shared
+  input-chip rendering. Native-backed chips preserve controlled host state,
+  follow form resets when uncontrolled, and accept native link actions. Groups
+  restore author-owned chip variants when coordination ends. Keep search input
+  chrome inside the search surface and align contextual icon sizes with Material 3.
+- 40f9776: Add an APG carousel built on native CSS scroll snap, with optional navigation,
+  pagination, mouse dragging, looping, and consumer-controlled slide sizing.
+  Preserve controlled active-index behavior after rejected swipes, keep visual
+  loop clones inert and out of forms, and degrade safely without intersection
+  observation.
+- a108336: Add shared-column `rc-list` and `rc-list-item` elements with standard and
+  segmented appearances, default content truncation, and native-backed single or
+  multiple selection coordination. Restore author-owned item state when native
+  selection coordination ends.
+- 509ee64: Add `rc-progress`, a native `<progress>` enhancer with a formatted value
+  display, a track and fill you can restyle with CSS custom properties, and a
+  built-in fix for the indeterminate/undefined-binding footgun.
+
+  Keep the native element as the uncontrolled source of truth, support releasing
+  a controlled value, and react to live native `value`/`max` changes. Preserve a
+  native determinate value while `indeterminate` temporarily removes its
+  attribute.
+
+  The bar renders at its intended height with no `display` attribute set,
+  matching its own documented default: previously the track/fill/native
+  `<progress>` are all absolutely positioned, contributing nothing to the
+  control's normal-flow height, so with no value-display text sharing its grid
+  row to give it one, the whole bar collapsed to 0px.
+
+- d67efde: Add a native-host scroll region with optional centered content and fullbleed
+  layout tracks, aggregate framework typings, RTL-aware boundary state, and
+  Material layout defaults.
+- 6d3b478: Add Material button emphasis, danger-tone, icon sizing, and adaptive-menu
+  contracts. Complete the bundled surface-role palette and forced-colors mappings.
+- 30eb232: Add icon-only activation-area sizing and Material icon-button variants. Align menu
+  selection and submenu affordances, and keep anchored popups within the viewport
+  across native and fallback positioning.
+- 6d3b478: Default the new touch-target overlap tokens for MD3's own dense/narrow
+  icon-button and overflow-trigger conventions: `rc-button`'s and
+  `rc-menu-button`'s narrow variant (where the icon is smaller than the
+  default 3rem touch target) now reclaim the trailing edge automatically,
+  and `rc-adaptive-menu`'s overflow trigger, always the trailing-most
+  control in its toolbar by design, does the same unconditionally. Only the
+  trailing edge defaults, matching each component's own documented
+  "trailing overflow trigger" use case; the leading edge stays an explicit
+  opt-in.
+
+### Patch Changes
+
+- 6d3b478: Keep generic dialog button styles out of custom control wrappers, support nested
+  bottom-sheet handles, and expose the Material disabled-button opacity token.
+
+## 0.5.0
+
 ## 0.4.2
 
 ## 0.4.1

package/README.md

@@ -52,6 +52,27 @@ Theme styles are scoped under a `.rc-theme-material` class.
 </body>
 ```
 
+### Button variants and tones
+
+The default `rc-button` treatment is filled. Use `rc-button--tonal`,
+`rc-button--outlined`, or `rc-button--text` for the other Material emphasis
+levels. Icon-only buttons use `rc-icon-button--standard`,
+`rc-icon-button--tonal`, or `rc-icon-button--outlined`.
+
+Add `data-tone="danger"` to any of those variants for the corresponding error
+or error-container color roles. These classes and data attributes are theme
+hooks; they do not change the component's native-button behavior or public API.
+
+```html
+<rc-button class="rc-button--tonal">
+  <button type="button">Save draft</button>
+</rc-button>
+
+<rc-button class="rc-button--outlined" data-tone="danger">
+  <button type="button">Delete</button>
+</rc-button>
+```
+
 ### Full standalone Material 3 theme
 
 Includes bundled light and dark Material 3 token defaults and the full
@@ -76,6 +97,35 @@ 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.
 
+### Icon-button modifiers
+
+Apply these classes to `rc-button[icon-only]` to use the Material 3 expressive
+container and icon sizes. The default, unmodified size is small: a `2.5rem`
+container with a `1.5rem` icon.
+
+| Class                    | Container |      Icon |
+| ------------------------ | --------: | --------: |
+| `rc-button--extra-small` |    `2rem` | `1.25rem` |
+| `rc-button--medium`      |  `3.5rem` |  `1.5rem` |
+| `rc-button--large`       |    `6rem` |    `2rem` |
+| `rc-button--extra-large` |  `8.5rem` |  `2.5rem` |
+
+Combine a size class with `rc-button--narrow` or `rc-button--wide` to select
+that size's narrower or wider container width without changing its height or
+icon size. `rc-menu-button[icon-only]` supports `rc-menu-button--narrow` for a
+`2rem`-wide small trigger. The component packages continue to reserve a `3rem`
+activation area around visual containers smaller than that target.
+
+`rc-adaptive-menu` uses the same Material small narrow geometry for its
+overflow trigger: a `2rem × 2.5rem` visible container centered in the
+component-owned `3rem × 3rem` activation area. The theme also aligns overflow
+rows with Material menu geometry while leaving the component's controlled or
+uncontrolled `open` contract unchanged.
+
+Direct native buttons in an `rc-app-bar`'s `leading` and `trailing` slots also
+receive the Material small icon-button geometry. Controls nested in an
+`rc-button` or `rc-menu-button` keep their component-owned sizing.
+
 [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
 fall back through Material system roles.

package/bridge.css

@@ -259,6 +259,24 @@
     --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
   }
 
+  .rc-theme-material rc-progress,
+  :host(.rc-theme-material) rc-progress {
+    --rc-progress-track-background: var(
+      --md-linear-progress-track-color,
+      var(--md-sys-color-surface-container-highest, CanvasText)
+    );
+    --rc-progress-track-opacity: 1;
+    --rc-progress-track-radius: var(
+      --md-linear-progress-track-shape,
+      var(--md-sys-shape-corner-full, 999px)
+    );
+    --rc-progress-fill-background: var(
+      --md-linear-progress-active-indicator-color,
+      var(--md-sys-color-primary, Highlight)
+    );
+    --rc-progress-value-color: var(--md-sys-color-on-surface-variant, GrayText);
+  }
+
   .rc-theme-material rc-range-slider,
   :host(.rc-theme-material) rc-range-slider {
     --rc-range-slider-accent: var(

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

@@ -12,19 +12,59 @@
     box-shadow: var(--rc-shadow-level2, none);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar :is(button, [role='button']) {
-    inline-size: 3rem;
-    block-size: 3rem;
-    padding: 0.75rem;
+  /*
+   * 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']):hover {
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing']):hover {
     background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
   }
 

package/components/bottom-sheet.css

@@ -1,6 +1,6 @@
 @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-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%,
@@ -28,7 +28,7 @@
     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));
+    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);
@@ -41,10 +41,13 @@
     );
   }
 
+  /* 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] {
+    [data-rc-bottom-sheet-handle] {
     position: relative;
     display: block;
     inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);
@@ -63,7 +66,7 @@
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-bottom-sheet
     > dialog
-    > [data-rc-bottom-sheet-handle]::before {
+    [data-rc-bottom-sheet-handle]::before {
     content: '';
     position: absolute;
     inset-block-start: 50%;
@@ -78,7 +81,7 @@
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-bottom-sheet
     > dialog
-    > [data-rc-bottom-sheet-handle]:focus-visible {
+    [data-rc-bottom-sheet-handle]:focus-visible {
     outline: 0.125rem solid var(--md-sys-color-primary, Highlight);
     outline-offset: -0.25rem;
   }

package/components/button.css

@@ -29,6 +29,98 @@
       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 {
@@ -51,7 +143,127 @@
   }
 
   :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;
-    --rc-icon-font-line-height: var(--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;
   }
 }

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);
+  }
+}