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

package/components/field.css

@@ -0,0 +1,378 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field {
+    display: inline-block;
+    inline-size: min(100%, 28rem);
+    --_rc-field-input-line-height: max(var(--md-sys-typescale-body-large-line-height, 1.5rem), 1em);
+    --_rc-field-label-line-height: max(var(--md-sys-typescale-body-small-line-height, 1rem), 1em);
+    --rc-field-min-block-size: max(
+      3.5em,
+      calc(var(--_rc-field-label-line-height) + var(--_rc-field-input-line-height))
+    );
+    --rc-field-gap: 0.75rem;
+    --rc-field-padding: 0 1rem;
+    --rc-field-border: 0;
+    --rc-field-radius: var(--md-filled-text-field-container-shape, 0.25rem 0.25rem 0 0);
+    --rc-field-background: var(
+      --md-filled-text-field-container-color,
+      var(--md-sys-color-surface-container-highest, Field)
+    );
+    --rc-field-color: var(
+      --md-filled-text-field-input-text-color,
+      var(--md-sys-color-on-surface, FieldText)
+    );
+    --rc-field-label-color: var(
+      --md-filled-text-field-label-text-color,
+      var(--md-sys-color-on-surface-variant, GrayText)
+    );
+    --rc-field-error-color: var(
+      --md-filled-text-field-error-focus-label-text-color,
+      var(--md-sys-color-error, red)
+    );
+    --rc-field-disabled-opacity: 1;
+    --rc-field-focus-outline: 0;
+    --rc-field-supporting-color: var(--md-sys-color-on-surface-variant, GrayText);
+    --rc-field-supporting-font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(field) {
+    position: relative;
+    border-block-end: 1px solid
+      var(
+        --md-filled-text-field-active-indicator-color,
+        var(--md-sys-color-on-surface-variant, GrayText)
+      );
+    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);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(field)::after {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: -1px;
+    block-size: 2px;
+    background: var(--md-sys-color-primary, Highlight);
+    content: '';
+    transform: scaleX(0);
+    transform-origin: center;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(content) {
+    position: relative;
+    justify-content: center;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(label) {
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    max-inline-size: 100%;
+    overflow: hidden;
+    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);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translateY(-50%);
+    transform-origin: left top;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-focused]::part(label),
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-populated]::part(label),
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-multiline]::part(label) {
+    inset-block-start: 0;
+    font-family: var(--md-sys-typescale-body-small-font, inherit);
+    font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
+    line-height: var(--md-sys-typescale-body-small-line-height, 1rem);
+    transform: translateY(0);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-has-label]::part(control) {
+    min-block-size: var(--_rc-field-input-line-height);
+    padding-block-start: var(--_rc-field-label-line-height);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(control) {
+    min-block-size: var(--_rc-field-input-line-height);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-multiline]::part(content) {
+    padding-block: 0.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-multiline]::part(label) {
+    inset-block-start: 0.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-multiline]::part(control) {
+    align-items: flex-start;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-multiline][data-has-label]::part(control) {
+    padding-block-start: var(--_rc-field-label-line-height);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field > input,
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field > textarea {
+    caret-color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-textarea[data-rc-field-control] {
+    --rc-textarea-border: 0;
+    --rc-textarea-border-radius: 0;
+    --rc-textarea-background: transparent;
+    --rc-textarea-gutter-bg: transparent;
+    --rc-textarea-focus-outline: 0;
+    inline-size: 100%;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-select[data-rc-field-control] {
+    --rc-select-control-block-size: var(--md-sys-typescale-body-large-line-height, 1.5rem);
+    --rc-select-border: 0;
+    --rc-select-radius: 0;
+    --rc-field: transparent;
+    inline-size: 100%;
+  }
+
+  /*
+   * rc-select's own hover/focus-visible/open chrome is hardcoded border-color and
+   * box-shadow, not resettable custom properties like the resting border above, so a
+   * more specific selector is the only way to suppress it once rc-field's own #field
+   * surface owns that visual instead.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-select[data-rc-field-control]::part(trigger):hover,
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-select[data-rc-field-control]::part(trigger):focus-visible,
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-select[data-rc-field-control]::part(trigger)[aria-expanded='true'] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-combobox[data-rc-field-control] {
+    --rc-combobox-control-block-size: var(--md-sys-typescale-body-large-line-height, 1.5rem);
+    --rc-combobox-border: 0;
+    --rc-combobox-radius: 0;
+    --rc-chip-touch-target-overlap-block-start: 0.5rem;
+    --rc-chip-touch-target-overlap-block-end: 0.5rem;
+    --rc-field: transparent;
+    inline-size: 100%;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-combobox[data-rc-field-control]::part(anchor):hover,
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > rc-combobox[data-rc-field-control]::part(anchor):focus-within {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    rc-combobox[data-rc-field-control]::part(input) {
+    caret-color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-control-provider] {
+    --rc-field-padding: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-control-provider]::part(label) {
+    inset-inline-start: 1rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-control-provider]::part(trailing) {
+    margin-inline-end: 1rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-control-provider][data-multiline]::part(content) {
+    /*
+     * A single-line field's label gets its resting space above the field's
+     * top edge for free: #field centers content within its own taller
+     * min-block-size. A multiline control-provider's content fills #field's
+     * whole height instead, so there's no leftover space to center into.
+     * Padding here wouldn't reach the label: an absolutely positioned
+     * child's containing block is the padding EDGE (the border/padding
+     * boundary), not the content edge, so an ancestor's own padding only
+     * moves its in-flow children (the control), never an abspos one. Margin
+     * moves the ancestor's own box instead, carrying both children down
+     * together and reproducing the single-line field's free top space.
+     * padding-block is reset to 0 here too: the general [data-multiline]
+     * rule above would otherwise still apply its own 0.5rem, additionally
+     * shifting only the in-flow control and pulling it out of alignment
+     * with the label again.
+     */
+    padding-block: 0;
+    margin-block-start: 0.5rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-has-label]:not([data-focused]):not([data-populated])
+    > input::placeholder,
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-has-label]:not([data-focused]):not([data-populated])
+    > textarea::placeholder {
+    color: transparent;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field:hover::part(field) {
+    border-block-end-color: var(--md-sys-color-on-surface, CanvasText);
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 4%,
+      var(--md-filled-text-field-container-color, var(--md-sys-color-surface-container-highest))
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-focused]::part(field)::after {
+    transform: scaleX(1);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-focused]::part(label) {
+    color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-invalid]::part(field) {
+    border-block-end-color: var(--md-sys-color-error, red);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-invalid]::part(field)::after {
+    background: var(--md-sys-color-error, red);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-invalid]::part(label) {
+    color: var(--md-sys-color-error, red);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-disabled]::part(field) {
+    border-block-end-color: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText) 38%,
+      transparent
+    );
+    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 4%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 38%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-disabled]::part(label),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-disabled]::part(supporting-text) {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 38%, transparent);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field.rc-field--outlined {
+    --rc-field-min-block-size: max(3.5em, calc(var(--_rc-field-input-line-height) + 2em));
+    --rc-field-background: transparent;
+    --rc-field-radius: var(
+      --md-outlined-text-field-container-shape,
+      var(--md-sys-shape-corner-extra-small, 0.25rem)
+    );
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field.rc-field--outlined::part(field) {
+    border: 1px solid
+      var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, ButtonBorder));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined::part(field)::after {
+    inset: -1px;
+    block-size: auto;
+    border: 2px solid var(--md-sys-color-primary, Highlight);
+    border-radius: inherit;
+    background: transparent;
+    transform: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field.rc-field--outlined::part(label) {
+    inset-block-start: 50%;
+    padding-inline: 0.25rem;
+    background: var(--md-sys-color-surface, Canvas);
+    transform: translate(-0.25rem, -50%);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-focused]::part(label),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-populated]::part(label),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-multiline]::part(label) {
+    inset-block-start: 0;
+    transform: translate(-0.25rem, -50%);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field.rc-field--outlined::part(control) {
+    padding-block-start: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-focused]::part(field)::after {
+    opacity: 1;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-invalid]::part(field),
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-invalid]::part(field)::after {
+    border-color: var(--md-sys-color-error, red);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(field),
+    :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(label),
+    :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(field)::after {
+      /*
+       * inset-block-start and font-size move the label's box (the floating
+       * label crossing from placeholder position to the shrunk caption
+       * position), which is spatial motion, not effects, even though it was
+       * previously grouped with the color/opacity properties around it. The
+       * full transform-based label rewrite is tracked separately.
+       */
+      transition:
+        background-color var(--rc-motion-effects-duration-fast, 150ms)
+          var(--rc-motion-effects-easing-default, ease),
+        border-color var(--rc-motion-effects-duration-fast, 150ms)
+          var(--rc-motion-effects-easing-default, ease),
+        color var(--rc-motion-effects-duration-fast, 150ms)
+          var(--rc-motion-effects-easing-default, ease),
+        inset-block-start var(--rc-motion-spatial-duration-fast, 300ms)
+          var(--rc-motion-spatial-easing-fast, ease),
+        font-size var(--rc-motion-spatial-duration-fast, 300ms)
+          var(--rc-motion-spatial-easing-fast, ease),
+        line-height var(--rc-motion-effects-duration-fast, 150ms)
+          var(--rc-motion-effects-easing-default, ease),
+        opacity var(--rc-motion-effects-duration-fast, 150ms)
+          var(--rc-motion-effects-easing-default, ease),
+        transform var(--rc-motion-spatial-duration-fast, 300ms)
+          var(--rc-motion-spatial-easing-fast, ease);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(field) {
+      forced-color-adjust: auto;
+    }
+  }
+}

package/components/icons.css

@@ -0,0 +1,52 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :where([data-rc-icon], [data-rc-navigation-icon]) {
+    display: inline-grid;
+    place-items: center;
+    font-size: var(--rc-icon-font-size, 1.5rem);
+    /*
+     * Unlayered icon-font boilerplate otherwise beats this layered theme rule.
+     * Keep the geometry invariant important, but let consumers opt out by
+     * overriding the normally-cascaded custom property.
+     */
+    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

@@ -0,0 +1,146 @@
+@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-hover-bg: 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-list-item-active-bg: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-pressed-state-layer-opacity, 0.12) * 100%),
+      transparent
+    );
+    --rc-list-item-selected-bg: var(--md-sys-color-secondary-container, Highlight);
+    --rc-list-item-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
+    --rc-list-item-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
+  }
+
+  :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-border-radius: 0;
+    --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(--rc-motion-effects-duration-fast, 150ms);
+    --rc-list-item-transition-easing: var(--md-sys-motion-easing-standard, ease);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-list[variant='segmented'] {
+    --rc-list-row-gap: 0.125rem;
+  }
+
+  /* Dividers separate visible rows; they do not trail the final row. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list
+    > rc-list-item:is([data-rc-list-position='last'], [data-rc-list-position='only']) {
+    --rc-list-item-divider: 0;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-list[variant='segmented']
+    > rc-list-item {
+    --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[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[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::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
+    > :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);
+    --rc-listbox-option-min-block-size: var(--rc-list-item-min-block-size);
+    --rc-listbox-option-padding-block: var(--rc-list-item-padding-block);
+    --rc-listbox-option-padding-inline: var(--rc-list-item-padding-inline);
+    --rc-listbox-hover-bg: var(--rc-list-item-hover-bg);
+    --rc-listbox-active-bg: var(--rc-list-item-active-bg);
+    --rc-listbox-selected-bg: var(--rc-list-item-selected-bg);
+    --rc-listbox-selected-color: var(--rc-list-item-selected-color);
+    --rc-listbox-disabled-opacity: var(--rc-list-item-disabled-opacity);
+  }
+}

package/components/listbox.css

@@ -0,0 +1,47 @@
+@layer rc-theme-material.components {
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox {
+    display: block;
+    background: var(--md-sys-color-surface-container, Canvas);
+    border-radius: 4px;
+    box-shadow:
+      0 1px 2px rgba(0, 0, 0, 0.3),
+      0 2px 6px 2px rgba(0, 0, 0, 0.15);
+    padding-block: 0.5rem;
+    overflow-y: auto;
+    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);
+    --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);
+    --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);
+    --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);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-listbox[checkmark]
+    [part~='option-checkmark'] {
+    inline-size: 1.5rem;
+    flex-shrink: 0;
+    text-align: center;
+  }
+}