@rcarls/rc-theme-material 0.4.2 → 0.6.0

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/combobox.css

@@ -28,6 +28,13 @@
     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(

package/components/dialog.css

@@ -1,6 +1,18 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog {
     max-inline-size: min(35rem, calc(100vw - 3rem));
+    /* A native <dialog>'s own default max-block-size/overflow:auto is what
+     * would otherwise constrain a tall dialog's height, but Chromium does
+     * not reliably clip a scrolling element's own border-radius once it
+     * actually needs to scroll (confirmed: a short dialog renders correctly
+     * rounded on every edge; the same dialog forced to overflow its
+     * available height loses the radius on whichever edge sits at the
+     * scroll boundary). Setting an explicit max-block-size plus
+     * overflow: hidden here replaces that reliance: this outer surface
+     * never itself scrolls, so its own corners always clip correctly, and
+     * a scrollable dialog instead scrolls a dedicated inner region. */
+    max-block-size: calc(100dvh - 3rem);
+    overflow: hidden;
     padding: 1.5rem;
     border: 0;
     border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
@@ -17,10 +29,59 @@
     );
   }
 
+  /*
+   * 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']) {
+    :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;

package/components/icons.css

@@ -1,11 +1,6 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material))
-    :where(
-      [data-rc-icon],
-      [data-rc-button-icon],
-      [data-rc-button-selected-icon],
-      [data-rc-navigation-icon]
-    ) {
+    :where([data-rc-icon], [data-rc-navigation-icon]) {
     display: inline-grid;
     place-items: center;
     font-size: var(--rc-icon-font-size, 1.5rem);
@@ -16,4 +11,42 @@
      */
     line-height: var(--rc-icon-font-line-height, var(--rc-icon-font-size, 1.5rem)) !important;
   }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where([data-rc-button-icon], [data-rc-button-selected-icon], [data-rc-chip-icon]) {
+    display: inline-grid;
+    place-items: center;
+    font-size: var(--rc-compact-icon-font-size, 1.125rem);
+    line-height: var(
+      --rc-compact-icon-font-line-height,
+      var(--rc-compact-icon-font-size, 1.125rem)
+    ) !important;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button[icon-only]
+    :where([data-rc-button-icon], [data-rc-button-selected-icon]) {
+    font-size: var(--rc-icon-button-icon-font-size, 1.5rem);
+    line-height: var(--rc-icon-button-icon-font-size, 1.5rem) !important;
+  }
+
+  /*
+   * An icon-only button's marker attributes (above) are an opt-in contract:
+   * a consumer's icon element has to know to carry `data-rc-button-icon`.
+   * When it doesn't (an <svg>, an <iconify-icon>, and similar),
+   * that icon would otherwise silently inherit the button's label font-size
+   * instead of the icon-button icon size. rc-button only sets `icon-only`
+   * once it classifies the native button as icon-having and label-less, so
+   * its direct children are icon content unless a responsive composition
+   * exposes an authored `[data-rc-menu-label]`; size every other direct
+   * child as an icon. The explicit marker rule above still matters for an
+   * icon nested one level deeper than a direct child.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-button[icon-only]
+    > button
+    > :not([data-rc-menu-label]) {
+    font-size: var(--rc-icon-button-icon-font-size, 1.5rem);
+    line-height: var(--rc-icon-button-icon-font-size, 1.5rem) !important;
+  }
 }

package/components/list-item.css

@@ -1,12 +1,11 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) {
+    /* Compatibility tokens retained for rc-listbox and embedded selectors. */
     --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-divider: 0;
     --rc-list-item-bg: transparent;
-    --rc-list-item-color: var(--md-sys-color-on-surface, CanvasText);
     --rc-list-item-supporting-color: var(--md-sys-color-on-surface-variant, CanvasText);
     --rc-list-item-hover-bg: color-mix(
       in srgb,
@@ -25,53 +24,102 @@
     --rc-list-item-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list {
+    --rc-list-padding-inline: 1rem;
+    --rc-list-leading-gap: 1rem;
+    --rc-list-trailing-gap: 1rem;
+    --rc-list-row-gap: 0;
+    --rc-list-item-min-block-size: 3.5rem;
+    --rc-list-item-padding-block: 0.5rem;
+    --rc-list-item-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-list-item-background: transparent;
+    --rc-list-item-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-list-item-selected-background: var(--md-sys-color-secondary-container, Highlight);
+    --rc-list-item-divider: 1px solid var(--md-sys-color-outline-variant, GrayText);
+    --rc-list-item-state-layer-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-list-item-hover-state-layer-opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+    --rc-list-item-focus-state-layer-opacity: var(--md-sys-state-focus-state-layer-opacity, 0.1);
+    --rc-list-item-pressed-state-layer-opacity: var(
+      --md-sys-state-pressed-state-layer-opacity,
+      0.12
+    );
+    --rc-list-item-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+    --rc-list-item-transition-duration: var(--md-sys-motion-duration-short3, 150ms);
+    --rc-list-item-transition-easing: var(--md-sys-motion-easing-standard, ease);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--rc-list-item-gap);
-    min-block-size: var(--rc-list-item-min-block-size);
-    padding: var(--rc-list-item-padding-block) var(--rc-list-item-padding-inline);
-    border-block-end: var(--rc-list-item-divider);
-    background: var(--rc-list-item-bg);
-    color: var(--rc-list-item-color);
-    box-sizing: border-box;
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list[variant='segmented'] {
+    --rc-list-row-gap: 0.125rem;
+    --rc-list-item-min-block-size: 3.5rem;
+    --rc-list-item-padding-block: 0.625rem;
+    --rc-list-item-background: var(--md-sys-color-surface-container-low, Canvas);
+    --rc-list-item-divider: 0;
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__start,
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__trailing,
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__end {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item[data-rc-list-position='only'] {
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item[data-rc-list-position='first'] {
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+      var(--md-sys-shape-corner-extra-small, 0.25rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__body {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    min-inline-size: 0;
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item[data-rc-list-position='last'] {
+    --rc-list-item-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem)
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem)
+      var(--md-sys-shape-corner-extra-large, 1.75rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__headline {
-    color: var(--rc-list-item-color);
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list-item::part(content) {
     font-family: var(--md-sys-typescale-body-large-font, inherit);
     font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    font-weight: var(--md-sys-typescale-body-large-weight, 400);
     line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) .rc-list-item__supporting {
-    color: var(--rc-list-item-supporting-color);
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list-item
+    > :where([data-rc-list-supporting], small) {
+    display: block;
+    color: var(--md-sys-color-on-surface-variant, CanvasText);
     font-family: var(--md-sys-typescale-body-medium-font, inherit);
     font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-body-medium-weight, 400);
     line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
   }
 
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list-item
+    > [slot='leading'][data-rc-list-leading] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list-item
+    > :is(input[type='checkbox'], input[type='radio'])[slot='leading'] {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    margin: 0;
+    accent-color: var(--md-sys-color-primary, Highlight);
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox,
   :where(.rc-theme-material, :host(.rc-theme-material)) [part~='listbox'] {
     --rc-listbox-option-gap: var(--rc-list-item-gap);

package/components/menu-button.css

@@ -19,4 +19,105 @@
     --rc-menu-button-indicator-size: 1.5rem;
     --rc-menu-button-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
   }
+
+  /*
+   * MD3 "Small" icon button sizing (40dp square trigger / 24dp icon) for an
+   * icon-only rc-menu-button trigger — e.g. an app bar's overflow button.
+   * rc-menu-button's own touch-target affordance (min-inline/block-size
+   * 3rem on the trigger wrapper, plus the light-DOM hit-slop) makes up the
+   * difference to the 48dp minimum tap target on its own.
+   * https://m3.material.io/components/icon-buttons/specs
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[icon-only] {
+    --rc-menu-button-trigger-block-size: 2.5rem;
+    --rc-menu-button-trigger-padding-block: 0;
+    --rc-menu-button-trigger-padding-inline: 0;
+    --rc-menu-button-trigger-gap: 0;
+    --rc-menu-button-icon-size: 2.5rem;
+  }
+
+  /* Adaptive overflow keeps the authored menu label in the trigger, so the
+     shared label marker is the one direct child that is not icon content. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu-button[icon-only]
+    > [slot='trigger']
+    > :not([data-rc-menu-label]) {
+    font-size: var(--rc-icon-button-icon-font-size, 1.5rem);
+    line-height: var(--rc-icon-button-icon-font-size, 1.5rem) !important;
+  }
+
+  /*
+   * Narrow width: trims the trigger's inline size (32dp, the MD3 "Small"
+   * narrow-width spec value) without changing its height. Suits a dense
+   * context that already has an unambiguous, self-labeling icon and no
+   * neighbors it needs to align widths with — an app bar's trailing
+   * overflow trigger is the canonical case, so this also defaults the
+   * trailing-edge overlap token: (3rem default touch target - 2rem icon
+   * size) / 2, giving back exactly what the touch target would otherwise
+   * reserve past the visible trigger. Trailing-edge only, matching the
+   * "trailing overflow trigger" framing above -- see rc-button's own
+   * narrow-variant comment for why only one side defaults.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu-button.rc-menu-button--narrow[icon-only] {
+    --rc-menu-button-icon-size: 2rem;
+    --rc-menu-button-touch-target-overlap-inline-end: 0.5rem;
+  }
+
+  /*
+   * A submenu trigger (a cascading menu item that opens a nested rc-menu)
+   * is still an rc-menu-button underneath, but MD3 treats it as a menu row
+   * with a trailing disclosure chevron — not as its own standalone pill
+   * control. The base rule above (and rc-menu-button's own defaults) style
+   * it as the latter: a primary-colored, pill-shaped, independently-padded
+   * trigger, layered on top of whatever geometry rc-menu's own item CSS
+   * (menu.css / rc-base) tries to apply to the same element by virtue of
+   * its role="menuitem" — hence the mismatched shape and the icon sitting
+   * at a different inset than its sibling rows.
+   *
+   * The consumer marks this case the same way rc-menu itself expects a
+   * cascading item to be marked (role="menuitem" — see menu.css and
+   * rc-menu's own light-DOM CSS), so key every geometry/color token here
+   * off rc-menu's own item, hover, and active tokens (--rc-menu-item-...,
+   * --rc-menu-hover-..., --rc-menu-active-...) instead of hand-matching
+   * values that could drift out of sync with a sibling plain-button item
+   * later.
+   * https://m3.material.io/components/menus/specs
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[role='menuitem'] {
+    font-family: var(--md-sys-typescale-body-large-font, inherit);
+    font-size: var(--md-sys-typescale-body-large-size, 1rem);
+    font-weight: 400;
+
+    --rc-menu-button-trigger-block-size: var(--rc-menu-item-min-block-size, 3rem);
+    --rc-menu-button-trigger-padding-block: var(--rc-menu-item-padding-block, 0);
+    --rc-menu-button-trigger-padding-inline: var(--rc-menu-item-padding-inline, 0.75rem);
+    --rc-menu-button-trigger-gap: var(--rc-menu-item-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: inherit;
+    --rc-menu-button-trigger-hover-background: var(--rc-menu-hover-bg);
+    --rc-menu-button-trigger-hover-color: var(--rc-menu-hover-color, inherit);
+    --rc-menu-button-trigger-open-background: var(--rc-menu-active-bg);
+    --rc-menu-button-trigger-open-color: var(--rc-menu-active-color, inherit);
+  }
+
+  /*
+   * rc-menu's own light-DOM CSS (rc-base, an even-higher-priority layer
+   * than this one — it's registered at custom-element-connect time,
+   * after every static stylesheet) matches *any* role="menuitem" element
+   * for its generic item padding, which includes this host itself, not
+   * just plain-button items. Left alone, that stacks on top of the
+   * trigger-inline padding bridged above: the host absorbs one
+   * --rc-menu-item-padding-inline, then the trigger button absorbs
+   * another, doubling the icon's inset versus a sibling row. The host
+   * itself isn't a visible surface — all padding belongs on the one
+   * real, visible trigger button — so it needs to contribute zero here,
+   * which (since rc-base doesn't mark its own padding !important) is
+   * only reachable with !important of our own.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button[role='menuitem'] {
+    padding-inline: 0 !important;
+  }
 }

package/components/menu.css

@@ -34,7 +34,7 @@
     );
     --rc-menu-active-color: var(--md-sys-color-on-surface, CanvasText);
 
-    /* Check/radio indicator — M3 leading icon slot is 24dp wide */
+    /* Check/radio indicator — M3 trailing indicator column is 24dp wide */
     --rc-menu-check-size: 1.5rem;
     --rc-menu-check-color: var(--md-sys-color-primary, Highlight);
 
@@ -58,6 +58,35 @@
     outline: none;
   }
 
+  /*
+   * M3 baseline menu items are rectangular full-width rows (unlike a
+   * standalone rc-button, which is a pill) — rc-menu's own structural CSS
+   * intentionally leaves shape undecided (it's a themed concern), so claim
+   * it explicitly here rather than leaving items to whatever shape a
+   * consumer's own incidental button styling might otherwise supply.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']) {
+    border-radius: 0;
+  }
+
+  /*
+   * Sizes an item's own leading icon to the M3 menu leading-icon size.
+   * Unlike an icon-only rc-button, a menu item routinely combines an icon
+   * *and* a label (they aren't mutually exclusive), so "first child" isn't
+   * a safe stand-in for "the icon" here the way it is there — this only
+   * sizes content the consumer has actually marked as an icon.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])
+    :is([data-rc-icon], [data-rc-menu-leading], [data-rc-menu-icon]) {
+    flex: none;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
   /* Current item (navigation active / selected radio row) gets secondary-container */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-menu [aria-current='true'] {
     background: var(--md-sys-color-secondary-container, Highlight);

package/components/modes.css

@@ -9,22 +9,24 @@
   }
 
   @media (forced-colors: active) {
-    :where(.rc-theme-material, :host(.rc-theme-material)) :is(
-      rc-select,
-      rc-combobox,
-      rc-search-bar,
-      rc-textarea,
-      rc-markdown-editor,
-      rc-menu,
-      rc-menubar,
-      rc-toolbar,
-      rc-dialog > dialog
-    ) {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :is(
+        rc-select,
+        rc-combobox,
+        rc-search-bar,
+        rc-textarea,
+        rc-markdown-editor,
+        rc-menu,
+        rc-menubar,
+        rc-toolbar,
+        rc-dialog > dialog
+      ) {
       forced-color-adjust: auto;
       box-shadow: none;
     }
 
-    :where(.rc-theme-material, :host(.rc-theme-material)) :is(button, [role='button'], [role^='menuitem']):focus-visible {
+    :where(.rc-theme-material, :host(.rc-theme-material))
+      :is(button, [role='button'], [role^='menuitem']):focus-visible {
       outline: 2px solid Highlight;
     }
   }

package/components/progress.css

@@ -0,0 +1,10 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress::part(value-display) {
+    color: var(--md-sys-color-on-surface-variant, GrayText);
+    font-size: var(--md-sys-typescale-label-small-size, 0.75rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-progress[disabled] {
+    opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+}

package/components/range-slider.css

@@ -3,15 +3,19 @@
     border-width: 0;
     border-radius: var(--md-sys-shape-corner-full, 999px);
     box-shadow: 0 0 0 0 transparent;
-    transition: box-shadow 150ms ease, scale 150ms ease;
+    transition:
+      box-shadow 150ms ease,
+      scale 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):hover {
-    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+    box-shadow: 0 0 0 0.5rem
+      color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):active {
-    box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary, Highlight) 12%, transparent);
+    box-shadow: 0 0 0 0.625rem
+      color-mix(in srgb, var(--md-sys-color-primary, Highlight) 12%, transparent);
     scale: 0.9;
   }
 

package/components/scroller.css

@@ -0,0 +1,7 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-scroller {
+    --rc-scroller-content-padding-inline: 1rem;
+    --rc-scroller-content-max-inline-size: 75rem;
+    --rc-scroller-scrollbar-width: thin;
+  }
+}

package/components/segmented-button.css

@@ -37,6 +37,7 @@
     --rc-segmented-button-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
     --rc-segmented-button-segment-min-block-size: 2.5rem;
     --rc-segmented-button-segment-padding-inline: 1rem;
+    --rc-segmented-button-segment-gap: 0.5em;
     --rc-segmented-button-focus-ring: var(--rc-focus-ring);
     --rc-segmented-button-focus-ring-offset: -2px;
     --rc-segmented-button-disabled-opacity: var(--rc-disabled-opacity);

package/components/select.css

@@ -31,6 +31,13 @@
     color: var(--md-sys-color-on-surface-variant, ButtonText);
   }
 
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-select::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-select::part(chip):hover {
     background: color-mix(
       in srgb,

package/components/textarea.css

@@ -7,14 +7,20 @@
     --rc-textarea-padding: 1rem;
     --rc-textarea-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
     --rc-textarea-caret-color: var(--md-sys-color-primary, FieldText);
-    --rc-textarea-active-line-bg: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
+    --rc-textarea-active-line-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-primary, Highlight) 8%,
+      transparent
+    );
     --rc-textarea-gutter-bg: var(--md-sys-color-surface-container, Canvas);
     --rc-textarea-gutter-color: var(--md-sys-color-on-surface-variant, GrayText);
     --rc-textarea-gutter-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root) {
-    transition: border-color 150ms ease, box-shadow 150ms ease;
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease;
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root):hover {

package/components/virtual-canvas.css

@@ -4,7 +4,10 @@
     --rc-virtual-canvas-scrollbar-size: 0.75rem;
     --rc-virtual-canvas-scrollbar-thumb-background: var(--md-sys-color-outline, ButtonFace);
     --rc-virtual-canvas-scrollbar-track-background: var(--md-sys-color-surface-container, Canvas);
-    --rc-virtual-canvas-scrollbar-button-background: var(--md-sys-color-surface-container-high, ButtonFace);
+    --rc-virtual-canvas-scrollbar-button-background: var(
+      --md-sys-color-surface-container-high,
+      ButtonFace
+    );
     border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
     background: var(--md-sys-color-surface-container-low, Canvas);
     box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant, ButtonBorder);

package/components.css

@@ -11,19 +11,24 @@
 @import './components/transfer-list.css';
 @import './components/button.css';
 @import './components/card.css';
+@import './components/scroller.css';
+@import './components/carousel.css';
 @import './components/chip.css';
+@import './components/chip-group.css';
 @import './components/list-item.css';
 @import './components/fab.css';
 @import './components/fab-menu.css';
 @import './components/app-bar.css';
 @import './components/menu.css';
 @import './components/menu-button.css';
+@import './components/adaptive-menu.css';
 @import './components/menubar.css';
 @import './components/navigation-bar.css';
 @import './components/navigation-rail.css';
 @import './components/toolbar.css';
 @import './components/segmented-button.css';
 @import './components/slider.css';
+@import './components/progress.css';
 @import './components/snackbar.css';
 @import './components/range-slider.css';
 @import './components/splitter.css';