fix: buttons' appearance in disabled fieldset

button/internal/_elevation.scss

@@ -20,7 +20,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
   }
 
-  :host([disabled]) md-elevation {
+  :host(:disabled) md-elevation {
     transition: none;
   }
 
@@ -59,7 +59,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     );
   }
 
-  :host([disabled]) md-elevation {
+  :host(:disabled) md-elevation {
     @include elevation.theme(
       (
         'level': var(--_disabled-container-elevation),

button/internal/_icon.scss

@@ -31,7 +31,7 @@
     color: var(--_pressed-icon-color);
   }
 
-  :host([disabled]) ::slotted([slot='icon']) {
+  :host(:disabled) ::slotted([slot='icon']) {
     color: var(--_disabled-icon-color);
     opacity: var(--_disabled-icon-opacity);
   }

button/internal/_outlined-button.scss

@@ -57,20 +57,20 @@
     border-color: var(--_pressed-outline-color);
   }
 
-  :host([disabled]) .outline {
+  :host(:disabled) .outline {
     border-color: var(--_disabled-outline-color);
     opacity: var(--_disabled-outline-opacity);
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) .background {
+    :host(:disabled) .background {
       // Only outlined buttons change their border when disabled to distinguish
       // them from other buttons that add a border for increased visibility in
       // HCM.
       border-color: GrayText;
     }
 
-    :host([disabled]) .outline {
+    :host(:disabled) .outline {
       opacity: 1;
     }
   }

button/internal/_shared.scss

@@ -71,7 +71,7 @@
     );
   }
 
-  :host([disabled]) {
+  :host(:disabled) {
     cursor: default;
     pointer-events: none;
   }
@@ -139,12 +139,12 @@
     text-overflow: inherit;
   }
 
-  :host([disabled]) .label {
+  :host(:disabled) .label {
     color: var(--_disabled-label-text-color);
     opacity: var(--_disabled-label-text-opacity);
   }
 
-  :host([disabled]) .background {
+  :host(:disabled) .background {
     background-color: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }
@@ -157,7 +157,7 @@
       border: 1px solid CanvasText;
     }
 
-    :host([disabled]) {
+    :host(:disabled) {
       --_disabled-icon-color: GrayText;
       --_disabled-icon-opacity: 1;
       --_disabled-container-opacity: 1;

checkbox/internal/_checkbox.scss

@@ -56,7 +56,7 @@ $_checkmark-bottom-left: 7px, -14px;
     cursor: pointer;
   }
 
-  :host([disabled]) {
+  :host(:disabled) {
     cursor: default;
   }
 

checkbox/internal/checkbox.ts

@@ -118,15 +118,20 @@ export class Checkbox extends checkboxBaseClass {
     super.update(changed);
   }
 
+  private get isControlDisabled() {
+    return this.disabled || this.matches(':disabled');
+  }
+
   protected override render() {
     const prevNone = !this.prevChecked && !this.prevIndeterminate;
     const prevChecked = this.prevChecked && !this.prevIndeterminate;
     const prevIndeterminate = this.prevIndeterminate;
     const isChecked = this.checked && !this.indeterminate;
     const isIndeterminate = this.indeterminate;
+    const disabled = this.isControlDisabled;
 
     const containerClasses = classMap({
-      'disabled': this.disabled,
+      'disabled': disabled,
       'selected': isChecked || isIndeterminate,
       'unselected': !isChecked && !isIndeterminate,
       'checked': isChecked,
@@ -149,7 +154,7 @@ export class Checkbox extends checkboxBaseClass {
           aria-checked=${isIndeterminate ? 'mixed' : nothing}
           aria-label=${ariaLabel || nothing}
           aria-invalid=${ariaInvalid || nothing}
-          ?disabled=${this.disabled}
+          ?disabled=${disabled}
           ?required=${this.required}
           .indeterminate=${this.indeterminate}
           .checked=${this.checked}
@@ -159,7 +164,7 @@ export class Checkbox extends checkboxBaseClass {
         <div class="outline"></div>
         <div class="background"></div>
         <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
-        <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
+        <md-ripple for="input" ?disabled=${disabled}></md-ripple>
         <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
           <rect class="mark short" />
           <rect class="mark long" />

iconbutton/internal/_outlined-icon-button.scss

@@ -79,7 +79,7 @@
     }
   }
 
-  .outlined:disabled .icon {
+  :host(:disabled) .outlined .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
@@ -139,7 +139,7 @@
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) {
+    :host(:disabled) {
       --_disabled-outline-opacity: 1;
     }
 

iconbutton/internal/_shared.scss

@@ -41,7 +41,7 @@
     );
   }
 
-  :host([disabled]) {
+  :host(:disabled) {
     pointer-events: none;
   }
 
@@ -109,7 +109,7 @@
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) {
+    :host(:disabled) {
       --_disabled-icon-opacity: 1;
     }
   }

radio/internal/_radio.scss

@@ -57,7 +57,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       );
     }
 
-    :host([disabled]) {
+    :host(:disabled) {
       cursor: default;
     }
 
@@ -150,7 +150,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     }
 
     // Don't animate when disabled
-    :host([disabled]) .circle {
+    :host(:disabled) .circle {
       animation-duration: 0s;
       transition-duration: 0s;
     }
@@ -167,7 +167,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       fill: map.get($tokens, 'pressed-icon-color');
     }
 
-    :host([disabled]) .icon {
+    :host(:disabled) .icon {
       fill: map.get($tokens, 'disabled-unselected-icon-color');
       opacity: map.get($tokens, 'disabled-unselected-icon-opacity');
     }
@@ -184,7 +184,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
       fill: map.get($tokens, 'selected-pressed-icon-color');
     }
 
-    :host([disabled]) .checked .icon {
+    :host(:disabled) .checked .icon {
       fill: map.get($tokens, 'disabled-selected-icon-color');
       opacity: map.get($tokens, 'disabled-selected-icon-opacity');
     }
@@ -196,7 +196,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
         fill: CanvasText;
       }
 
-      :host([disabled]) .icon {
+      :host(:disabled) .icon {
         fill: GrayText;
         opacity: 1;
       }

radio/internal/radio.ts

@@ -96,14 +96,20 @@ export class Radio extends radioBaseClass {
     }
   }
 
+  private get isControlDisabled() {
+    return this.disabled || this.matches(':disabled');
+  }
+
   protected override render() {
+    const disabled = this.isControlDisabled;
+
     const classes = {'checked': this.checked};
     return html`
       <div class="container ${classMap(classes)}" aria-hidden="true">
         <md-ripple
           part="ripple"
           .control=${this}
-          ?disabled=${this.disabled}></md-ripple>
+          ?disabled=${disabled}></md-ripple>
         <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
           <mask id="${this.maskId}">
@@ -125,7 +131,7 @@ export class Radio extends radioBaseClass {
           tabindex="-1"
           .checked=${this.checked}
           .value=${this.value}
-          ?disabled=${this.disabled} />
+          ?disabled=${disabled} />
       </div>
     `;
   }
@@ -135,7 +141,7 @@ export class Radio extends radioBaseClass {
   }
 
   private async handleClick(event: Event) {
-    if (this.disabled) {
+    if (this.isControlDisabled) {
       return;
     }
 

select/internal/_shared.scss

@@ -83,7 +83,7 @@
     max-width: inherit;
   }
 
-  md-menu ::slotted(:not[disabled]) {
+  md-menu ::slotted(:not(:disabled)) {
     cursor: pointer;
   }
 
@@ -96,7 +96,7 @@
     display: inline-flex;
   }
 
-  :host([disabled]) {
+  :host(:disabled) {
     pointer-events: none;
   }
 }

select/internal/select.ts

@@ -373,22 +373,30 @@ export abstract class Select extends selectBaseClass {
     super.firstUpdated(changed);
   }
 
+  private get isControlDisabled() {
+    return this.disabled || this.matches(':disabled');
+  }
+
   private getRenderClasses(): ClassInfo {
+    const disabled = this.isControlDisabled;
+
     return {
-      'disabled': this.disabled,
+      'disabled': disabled,
       'error': this.error,
       'open': this.open,
     };
   }
 
   private renderField() {
+    const disabled = this.isControlDisabled;
+
     return staticHtml`
       <${this.fieldTag}
           aria-haspopup="listbox"
           role="combobox"
           part="field"
           id="field"
-          tabindex=${this.disabled ? '-1' : '0'}
+          tabindex=${disabled ? '-1' : '0'}
           aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}
           aria-describedby="description"
           aria-expanded=${this.open ? 'true' : 'false'}
@@ -397,7 +405,7 @@ export abstract class Select extends selectBaseClass {
           label=${this.label}
           .focused=${this.focused || this.open}
           .populated=${!!this.displayText}
-          .disabled=${this.disabled}
+          .disabled=${disabled}
           .required=${this.required}
           .error=${this.hasError}
           ?has-start=${this.hasLeadingIcon}
@@ -500,8 +508,8 @@ export abstract class Select extends selectBaseClass {
    * Handles opening the select on keydown and typahead selection when the menu
    * is closed.
    */
-  private handleKeydown(event: KeyboardEvent) {
-    if (this.open || this.disabled || !this.menu) {
+  private handleKeydown(event: KeyboardEvent) {    
+    if (this.open || this.isControlDisabled || !this.menu) {
       return;
     }
 

slider/internal/_slider.scss

@@ -103,7 +103,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   // Note, opacity for active track and handle controlled via host.
   // This avoids bleed through from the handle to the track since they overlap.
   // It also means the inactive track opacity is calc'd to compensate.
-  :host([disabled]) {
+  :host(:disabled) {
     opacity: var(--_disabled-active-track-opacity);
 
     @include elevation.theme(
@@ -172,7 +172,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     );
   }
 
-  :host([disabled]) .track::before {
+  :host(:disabled) .track::before {
     // Note, the active track opacity is applied to the entire host,
     // so the inactive track is calc'd to compensate.
     opacity: calc(
@@ -209,11 +209,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
   }
 
-  :host([disabled]) .track::after {
+  :host(:disabled) .track::after {
     background: var(--_disabled-active-track-color);
   }
 
-  :host([disabled]) .tickmarks::before {
+  :host(:disabled) .tickmarks::before {
     background-image: _get-tick-image(
       var(--_with-tick-marks-disabled-container-color)
     );
@@ -265,7 +265,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background: var(--_handle-color);
   }
 
-  :host([disabled]) .handleNub {
+  :host(:disabled) .handleNub {
     background: var(--_disabled-handle-color);
   }
 
@@ -279,7 +279,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background: var(--_hover-handle-color);
   }
 
-  :host(:not([disabled])) {
+  :host(:not(:disabled)) {
     input.end:active ~ .handleContainerPadded .handle.end > .handleNub,
     input.start:active ~ .handleContainerPadded .handle.start > .handleNub {
       background: var(--_pressed-handle-color);

slider/internal/forced-colors-styles.scss

@@ -44,7 +44,7 @@
   }
 
   // inactive track
-  :host(:not([disabled])) .track::before {
+  :host(:not(:disabled)) .track::before {
     border: 1px solid var(--_active-track-color);
   }
 
@@ -78,7 +78,7 @@
     // stylelint-enable function-url-quotes
   }
 
-  :host([disabled]) .tickmarks::before {
+  :host(:disabled) .tickmarks::before {
     // TODO(b/298051946): Tick marks cannot be resized in HCM
     // stylelint-disable function-url-quotes -- SVG data URI
     // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)