fix: design tweaks to toasted skin, lint rule tweaks (#44)

packages/html/html/src/components/media-fullscreen-button.ts

@@ -21,8 +21,7 @@ export class FullscreenButtonBase extends MediaChromeButton {
     if (state && type === 'click') {
       if (state.fullscreen) {
         state.requestExitFullscreen();
-      }
-      else {
+      } else {
         state.requestEnterFullscreen();
       }
     }
@@ -61,7 +60,7 @@ export const useFullscreenButtonProps: PropsHook<{ fullscreen: boolean }> = (sta
     'data-fullscreen': state.fullscreen,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    'role': 'button',
+    role: 'button',
     'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',
     /** tooltip */
     'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',

packages/html/html/src/components/media-mute-button.ts

@@ -24,8 +24,7 @@ export class MuteButtonBase extends MediaChromeButton {
       if (type === 'click') {
         if (state.volumeLevel === 'off') {
           state.requestUnmute();
-        }
-        else {
+        } else {
           state.requestMute();
         }
       }
@@ -73,7 +72,7 @@ export const useMuteButtonProps: PropsHook<{
     'data-volume-level': state.volumeLevel,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    'role': 'button',
+    role: 'button',
     'aria-label': state.muted ? 'unmute' : 'mute',
     /** tooltip */
     'data-tooltip': state.muted ? 'Unmute' : 'Mute',

packages/html/html/src/components/media-play-button.ts

@@ -19,8 +19,7 @@ export class PlayButtonBase extends MediaChromeButton {
     if (state && type === 'click') {
       if (state.paused) {
         state.requestPlay();
-      }
-      else {
+      } else {
         state.requestPause();
       }
     }
@@ -55,7 +54,7 @@ export const usePlayButtonProps: PropsHook<{ paused: boolean }> = (state, _eleme
     'data-paused': state.paused,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
-    'role': 'button',
+    role: 'button',
     'aria-label': state.paused ? 'play' : 'pause',
     /** tooltip */
     'data-tooltip': state.paused ? 'Play' : 'Pause',

packages/html/html/src/components/media-popover.ts

@@ -63,8 +63,7 @@ export class MediaPopoverRoot extends HTMLElement {
 
     if (open) {
       this.#setupFloating();
-    }
-    else {
+    } else {
       this.#cleanup?.();
       this.#cleanup = null;
     }

packages/html/html/src/components/media-time-range.ts

@@ -91,8 +91,7 @@ export class TimeRangeTrackBase extends HTMLElement {
     if (orientation === 'horizontal') {
       this.style.width = '100%';
       this.style.removeProperty('height');
-    }
-    else {
+    } else {
       this.style.height = '100%';
       this.style.removeProperty('width');
     }
@@ -117,8 +116,7 @@ export class TimeRangeProgressBase extends HTMLElement {
       this.style.height = '100%';
       this.style.top = '0';
       this.style.removeProperty('bottom');
-    }
-    else {
+    } else {
       this.style.height = 'var(--slider-fill, 0%)';
       this.style.width = '100%';
       this.style.bottom = '0';
@@ -145,8 +143,7 @@ export class TimeRangePointerBase extends HTMLElement {
       this.style.height = '100%';
       this.style.top = '0';
       this.style.removeProperty('bottom');
-    }
-    else {
+    } else {
       this.style.height = 'var(--slider-pointer, 0%)';
       this.style.width = '100%';
       this.style.bottom = '0';
@@ -170,8 +167,7 @@ export class TimeRangeThumbBase extends HTMLElement {
       this.style.left = 'var(--slider-fill, 0%)';
       this.style.top = '50%';
       this.style.transform = 'translate(-50%, -50%)';
-    }
-    else {
+    } else {
       this.style.bottom = 'var(--slider-fill, 0%)';
       this.style.left = '50%';
       this.style.transform = 'translate(-50%, 50%)';

packages/html/html/src/components/media-tooltip.ts

@@ -19,8 +19,7 @@ export class MediaTooltipRoot extends HTMLElement {
   handleEvent(event: Event): void {
     if (event.type === 'mouseenter') {
       this.#handleMouseEnter();
-    }
-    else if (event.type === 'mouseleave') {
+    } else if (event.type === 'mouseleave') {
       this.#handleMouseLeave();
     }
   }
@@ -70,8 +69,7 @@ export class MediaTooltipRoot extends HTMLElement {
 
     if (open) {
       this.#setupFloating();
-    }
-    else {
+    } else {
       this.#cleanup?.();
       this.#cleanup = null;
     }
@@ -203,8 +201,7 @@ export class MediaTooltipTrigger extends HTMLElement {
             const attributeValue = triggerElement.getAttribute(attributeName);
             if (attributeValue !== null) {
               popupElement.setAttribute(attributeName, attributeValue);
-            }
-            else {
+            } else {
               popupElement.removeAttribute(attributeName);
             }
           }

packages/html/html/src/components/media-volume-range.ts

@@ -102,8 +102,7 @@ export class VolumeRangeTrackBase extends HTMLElement {
     if (orientation === 'horizontal') {
       this.style.width = '100%';
       this.style.removeProperty('height');
-    }
-    else {
+    } else {
       this.style.height = '100%';
       this.style.removeProperty('width');
     }
@@ -131,8 +130,7 @@ export class VolumeRangeProgressBase extends HTMLElement {
       this.style.height = '100%';
       this.style.top = '0';
       this.style.removeProperty('bottom');
-    }
-    else {
+    } else {
       this.style.height = 'var(--slider-fill, 0%)';
       this.style.width = '100%';
       this.style.bottom = '0';
@@ -159,8 +157,7 @@ export class VolumeRangeThumbBase extends HTMLElement {
       this.style.left = 'var(--slider-fill, 0%)';
       this.style.top = '50%';
       this.style.transform = 'translate(-50%, -50%)';
-    }
-    else {
+    } else {
       this.style.bottom = 'var(--slider-fill, 0%)';
       this.style.left = '50%';
       this.style.transform = 'translate(-50%, 50%)';