@rcarls/rc-theme-material 0.5.0 → 0.7.0

package/components/field.css

@@ -0,0 +1,566 @@
+@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);
+  }
+
+  /*
+   * Filled fields reserve their block padding on the container instead of
+   * centering the label and control inside the minimum height, so the floated
+   * label stays 8px below the top edge however tall the control grows. The
+   * trailing padding gives back the 1px active indicator so a single-line
+   * field stays at the 56px minimum.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field:not(.rc-field--outlined) {
+    --rc-field-padding: 0.5rem 1rem calc(0.5rem - 1px);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field::part(field) {
+    position: relative;
+    align-items: stretch;
+    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.rc-field--outlined[data-multiline]::part(content) {
+    padding-block: 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%;
+  }
+
+  /* Text starts on the input line under the floated label, as a native textarea. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field:not(.rc-field--outlined)
+    > rc-textarea[data-rc-field-control] {
+    --rc-textarea-padding-block: 0 0.5rem;
+    --rc-textarea-padding-inline: 1rem;
+  }
+
+  :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-select-padding-block: 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%;
+  }
+
+  /*
+   * rc-field resets the slotted native control's outline, but a ::slotted()
+   * rule loses to any page rule, such as a reset's Firefox :-moz-focusring
+   * outline. The field already shows focus, so clear the control's own
+   * outline from the light DOM too.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > :is(input, select, textarea):focus-visible {
+    outline: none;
+  }
+
+  /*
+   * 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;
+    /* rc-field's label and active indicator already show focus. */
+    outline: 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-combobox-padding-block: 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%;
+  }
+
+  /*
+   * Full-size chips are taller than the input line, so keep a little space
+   * between their outline and the floated label. Dense chips sit on the
+   * input line and need none.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field:not(.rc-field--outlined)
+    > :is(
+      rc-combobox:not(.rc-combobox--dense),
+      rc-select:not(.rc-select--dense)
+    )[data-rc-field-control]::part(chips) {
+    padding-block-start: 0.25rem;
+  }
+
+  /* Dense chips leave more of the 3rem touch target to overlap. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field
+    > :is(rc-combobox.rc-combobox--dense, rc-select.rc-select--dense)[data-rc-field-control] {
+    --rc-chip-touch-target-overlap-block-start: 0.75rem;
+    --rc-chip-touch-target-overlap-block-end: 0.75rem;
+  }
+
+  :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;
+    /* rc-field's label and active indicator already show focus. */
+    outline: 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]:not(.rc-field--outlined) {
+    --rc-field-padding: 0.5rem 0 calc(0.5rem - 1px);
+  }
+
+  /* A multiline control provider supplies its own trailing block space. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-control-provider][data-multiline]:not(.rc-field--outlined) {
+    --rc-field-padding: 0.5rem 0 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.rc-field--outlined[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,
+  /* A group's legend never rests in the input, so its placeholders wait for focus instead. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group]:not([data-focused])
+    > fieldset
+    > :is(input, textarea)::placeholder {
+    color: transparent;
+  }
+
+  /* A read-only field keeps its focus indicator but no hover affordance, since
+     hovering cannot lead to an edit. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field:not([data-readonly]):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);
+  }
+
+  /*
+   * Grouped controls: a <fieldset> whose <legend> names the field. The legend
+   * uses the floating label mechanics: it rests on the input line while the
+   * group is idle and its primary input empty, and floats to the caption line
+   * on focus or once the primary input has a value. A leading addon already
+   * occupies the input line's start, so a group that begins with one keeps its
+   * legend floated. The primary text input grows and selects or enhanced
+   * controls attach before or after it, connected by the shared container and
+   * active indicator rather than chrome of their own.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-group] > fieldset {
+    --rc-field-control-gap: 0.75rem;
+    padding-block-start: var(--_rc-field-group-label-space, var(--_rc-field-label-line-height));
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-group] > fieldset > legend {
+    position: absolute;
+    z-index: 1;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    max-inline-size: 100%;
+    overflow: hidden;
+    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);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    transform: translate(var(--_rc-field-legend-x, 0), var(--_rc-field-legend-y, 0));
+    transform-origin: left top;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group]:not([data-focused]):not([data-populated])
+    > fieldset:has(> legend + :is(input, textarea))
+    > legend {
+    inset-block-start: 50%;
+    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-field-legend-y: -50%;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group][data-focused]
+    > fieldset
+    > legend {
+    color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group][data-invalid]
+    > fieldset
+    > legend {
+    color: var(--md-sys-color-error, red);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group][data-disabled]
+    > fieldset
+    > legend {
+    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-group]
+    > fieldset
+    > :is(input, textarea) {
+    caret-color: var(--md-sys-color-primary, Highlight);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group]
+    > fieldset
+    > :is(input, select, textarea):focus-visible {
+    outline: none;
+  }
+
+  /* WebKit gives a native select a taller minimum than the input line. */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field[data-group] > fieldset > select {
+    block-size: var(--_rc-field-input-line-height);
+    field-sizing: content;
+    cursor: pointer;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field[data-group]
+    > fieldset
+    > 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-select-padding-block: 0;
+    --rc-field: transparent;
+  }
+
+  /* The outlined legend rides the outline like a floated outlined label. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-field.rc-field--outlined[data-group]
+    > fieldset
+    > legend {
+    --_rc-field-legend-x: -0.25rem;
+    --_rc-field-legend-y: -50%;
+    padding-inline: 0.25rem;
+    background: var(--md-sys-color-surface, Canvas);
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-field.rc-field--outlined {
+    /* The outlined label rides the outline, so a group reserves no caption line. */
+    --_rc-field-group-label-space: 0;
+    --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[data-group] > fieldset > legend,
+    :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

@@ -1,13 +1,15 @@
 @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;
+    /*
+     * Reserve the icon square even while the slot is empty, as an SVG icon
+     * element (such as <iconify-icon>) is for a frame after it mounts. An
+     * icon-font glyph already fills 1em, so it renders the same.
+     */
+    min-inline-size: 1em;
+    min-block-size: 1em;
     font-size: var(--rc-icon-font-size, 1.5rem);
     /*
      * Unlayered icon-font boilerplate otherwise beats this layered theme rule.
@@ -16,4 +18,44 @@
      */
     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;
+    min-inline-size: 1em;
+    min-block-size: 1em;
+    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;
+  }
 }