Remove *--disabled classes, use regular selectors

src/components/color-picker/color-picker.css

@@ -246,19 +246,19 @@
     0.25rem 0.25rem;
 }
 
-.color-picker--disabled {
+:host([disabled]) {
   opacity: 0.5;
   cursor: not-allowed;
-}
 
-.color-picker--disabled .grid,
-.color-picker--disabled .grid-handle,
-.color-picker--disabled .slider,
-.color-picker--disabled .slider-handle,
-.color-picker--disabled .preview,
-.color-picker--disabled .swatch,
-.color-picker--disabled .swatch-color {
-  pointer-events: none;
+  .grid,
+  .grid-handle,
+  .slider,
+  .slider-handle,
+  .preview,
+  .swatch,
+  .swatch-color {
+    pointer-events: none;
+  }
 }
 
 /*
@@ -311,12 +311,12 @@
   outline: none;
 }
 
-.trigger:focus-visible:not(.trigger--disabled) {
+.trigger:focus-visible:not(.trigger:disabled) {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
 
-:host(:disabled) :is(.label, .trigger) {
+:host([disabled]) :is(.label, .trigger) {
   opacity: 0.5;
   cursor: not-allowed;
 }

src/components/color-picker/color-picker.ts

@@ -887,7 +887,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         part="base"
         class=${classMap({
           'color-picker': true,
-          'color-picker--disabled': this.disabled,
         })}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex="-1"
@@ -1144,7 +1143,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             part="trigger form-control-input"
             class=${classMap({
               trigger: true,
-              'trigger--disabled': this.disabled,
               'trigger--empty': this.isEmpty,
               'transparent-bg': true,
               'form-control-input': true,
@@ -1155,6 +1153,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             type="button"
             aria-labelledby="form-control-label"
             aria-describedby="hint"
+            .disabled=${this.disabled}
           ></button>
 
           <slot

src/components/icon-button/icon-button.css

@@ -20,13 +20,13 @@
   -webkit-appearance: none;
 }
 
-.icon-button:hover:not(.icon-button--disabled),
-.icon-button:focus-visible:not(.icon-button--disabled) {
+:host(:not([disabled])) .icon-button:hover,
+:host(:not([disabled])) .icon-button:focus-visible {
   background-color: var(--wa-color-neutral-fill-quiet);
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
 }
 
-.icon-button:active:not(.icon-button--disabled) {
+:host(:not([disabled])) .icon-button:active {
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
 }
 
@@ -34,7 +34,7 @@
   outline: none;
 }
 
-.icon-button--disabled {
+:host([disabled]) .icon-button {
   opacity: 0.5;
   cursor: not-allowed;
 }

src/components/icon-button/icon-button.ts

@@ -111,7 +111,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
         part="base"
         class=${classMap({
           'icon-button': true,
-          'icon-button--disabled': !isLink && this.disabled,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : 'button')}

src/components/menu-item/menu-item.css

@@ -25,7 +25,7 @@
   cursor: pointer;
 }
 
-.menu-item.menu-item--disabled {
+:host([disabled]) .menu-item {
   outline: none;
   opacity: 0.5;
   cursor: not-allowed;

src/components/menu-item/menu-item.ts

@@ -174,7 +174,6 @@ export default class WaMenuItem extends WebAwesomeElement {
         class=${classMap({
           'menu-item': true,
           'menu-item--checked': this.checked,
-          'menu-item--disabled': this.disabled,
           'menu-item--loading': this.loading,
           'menu-item--has-submenu': this.isSubmenu(),
           'menu-item--submenu-expanded': isSubmenuExpanded,

src/components/option/option.css

@@ -25,19 +25,19 @@
   cursor: pointer;
 }
 
-.option--hover:not(.option--current):not(.option--disabled) {
+:host(:not([disabled])) .option--hover:not(.option--current) {
   background-color: var(--background-color-hover);
   color: var(--text-color-hover);
 }
 
 .option--current,
-.option--current.option--disabled {
+:host([disabled]) .option--current {
   background-color: var(--background-color-current);
   color: var(--text-color-current);
   opacity: 1;
 }
 
-.option--disabled {
+:host([disabled]) .option {
   outline: none;
   opacity: 0.5;
   cursor: not-allowed;

src/components/option/option.ts

@@ -129,7 +129,6 @@ export default class WaOption extends WebAwesomeElement {
         class=${classMap({
           option: true,
           'option--current': this.current,
-          'option--disabled': this.disabled,
           'option--selected': this.selected,
           'option--hover': this.hasHover,
         })}

src/components/radio/radio.ts

@@ -126,7 +126,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
         class=${classMap({
           radio: true,
           'radio--checked': this.checked,
-          'radio--disabled': this.disabled,
         })}
       >
         <span part="control" class="control">

src/components/rating/rating.css

@@ -61,21 +61,20 @@
   scale: 1.2;
 }
 
-.rating--disabled .symbols,
 .rating--readonly .symbols {
   cursor: default;
 }
 
-.rating--disabled .symbol--hover,
+:host([disabled]) .symbol--hover,
 .rating--readonly .symbol--hover {
   scale: none;
 }
 
-.rating--disabled {
+:host([disabled]) {
   opacity: 0.5;
 }
 
-.rating--disabled .symbols {
+:host([disabled]) .symbols {
   cursor: not-allowed;
 }
 

src/components/rating/rating.test.ts

@@ -38,7 +38,6 @@ describe('<wa-rating>', () => {
         const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
 
         expect(base.getAttribute('aria-disabled')).to.equal('true');
-        expect(base.getAttribute('class')).to.equal(' rating rating--disabled ');
       });
 
       it('should set max value by attribute', async () => {

src/components/tab/tab.test.ts

@@ -36,7 +36,6 @@ describe('<wa-tab>', () => {
 
         expect(el.disabled).to.equal(true);
         expect(el.getAttribute('aria-disabled')).to.equal('true');
-        expect(base.getAttribute('class')).to.equal(' tab tab--disabled ');
         expect(el.getAttribute('tabindex')).to.equal('-1');
       });
 

src/components/tab/tab.ts

@@ -77,7 +77,6 @@ export default class WaTab extends WebAwesomeElement {
         class=${classMap({
           tab: true,
           'tab--active': this.active,
-          'tab--disabled': this.disabled,
         })}
       >
         <slot></slot>

src/components/tree-item/tree-item.css

@@ -93,7 +93,7 @@ slot:not([name])::slotted(wa-icon) {
   border-inline-start: solid 3px transparent;
 }
 
-.tree-item--disabled .item {
+:host([disabled]) .item {
   opacity: 0.5;
   outline: none;
   cursor: not-allowed;

src/components/tree-item/tree-item.test.ts

@@ -141,15 +141,6 @@ describe('<wa-tree-item>', () => {
           // Assert
           expect(leafItem).to.have.attribute('aria-disabled', 'true');
         });
-
-        it('should set item--disabled part', async () => {
-          // Act
-          leafItem.disabled = true;
-          await leafItem.updateComplete;
-
-          // Assert
-          expect(leafItem.shadowRoot?.querySelector('.item')?.part.contains('item--disabled')).to.be.true;
-        });
       });
 
       describe('when the item is expanded', () => {

src/components/tree-item/tree-item.ts

@@ -256,7 +256,6 @@ export default class WaTreeItem extends WebAwesomeElement {
           'tree-item': true,
           'tree-item--expanded': this.expanded,
           'tree-item--selected': this.selected,
-          'tree-item--disabled': this.disabled,
           'tree-item--leaf': this.isLeaf,
           'tree-item--has-expand-button': showExpandButton,
         })}"