refactor: Use toggleAttribute natively where possible (#2494)

src/card-controller/card-element-manager.ts

@@ -2,7 +2,6 @@ import { LitElement, ReactiveControllerHost } from 'lit';
 import { ActionEventTarget } from '../action-handler-directive';
 import { isCardInPanel } from '../ha/panel';
 import { LovelaceCard } from '../ha/types';
-import { setOrRemoveAttribute } from '../utils/basic';
 import { isBeingCasted } from '../utils/casting';
 import { isAncestorInEventPath } from '../utils/event-ancestor';
 import { CardMediaReviewEventTarget } from '../utils/review';
@@ -90,8 +89,8 @@ export class CardElementManager {
       ]);
 
     // Whether or not the card is in panel mode on the dashboard.
-    setOrRemoveAttribute(this._element, isCardInPanel(this._element), 'panel');
-    setOrRemoveAttribute(this._element, isBeingCasted(), 'casted');
+    this._element.toggleAttribute('panel', isCardInPanel(this._element));
+    this._element.toggleAttribute('casted', isBeingCasted());
 
     this._api.getFullscreenManager().connect();
 
@@ -165,9 +164,9 @@ export class CardElementManager {
   }
 
   public elementDisconnected(): void {
-    setOrRemoveAttribute(this._element, false, 'panel');
-    setOrRemoveAttribute(this._element, false, 'tabindex');
-    setOrRemoveAttribute(this._element, false, 'casted');
+    this._element.toggleAttribute('panel', false);
+    this._element.toggleAttribute('tabindex', false);
+    this._element.toggleAttribute('casted', false);
 
     // Suspend issue evaluation so state changes below (e.g. clearing
     // mediaLoadedInfo) don't arm timers while the card is detached. Issue state

src/card-controller/expand-manager.ts

@@ -1,4 +1,3 @@
-import { setOrRemoveAttribute } from '../utils/basic';
 import { CardExpandAPI } from './types';
 
 export class ExpandManager {
@@ -29,11 +28,7 @@ export class ExpandManager {
 
     this._expanded = expanded;
     this._setConditionState();
-    setOrRemoveAttribute(
-      this._api.getCardElementManager().getElement(),
-      expanded,
-      'expanded',
-    );
+    this._api.getCardElementManager().getElement().toggleAttribute('expanded', expanded);
     this._api.getCardElementManager().update();
   }
 

src/card-controller/interaction-manager.ts

@@ -1,5 +1,4 @@
 import { throttle } from 'lodash-es';
-import { setOrRemoveAttribute } from '../utils/basic';
 import { Timer } from '../utils/timer';
 import { CardInteractionAPI } from './types';
 
@@ -33,11 +32,7 @@ export class InteractionManager {
 
   private _setInteraction(val: boolean): void {
     this._interacted = val;
-    setOrRemoveAttribute(
-      this._api.getCardElementManager().getElement(),
-      val,
-      'interaction',
-    );
+    this._api.getCardElementManager().getElement().toggleAttribute('interaction', val);
     this._api.getConditionStateManager().setState({ interaction: val });
   }
 

src/card-controller/style-manager.ts

@@ -81,11 +81,10 @@ export class StyleManager {
 
   private _setDimmable(): void {
     const config = this._api.getConfigManager().getConfig();
-    setOrRemoveAttribute(
-      this._api.getCardElementManager().getElement(),
-      !!config?.view.dim,
-      'dimmable',
-    );
+    this._api
+      .getCardElementManager()
+      .getElement()
+      .toggleAttribute('dimmable', !!config?.view.dim);
   }
 
   private _setMinMaxHeight(): void {