From 5195c09af610625f10cb218d14a2a87fc1695701 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Fri, 3 Oct 2025 13:30:53 -0500
Subject: [PATCH] fix: rename attributes to kebab-case

---
 packages/html/html/src/components/media-popover.ts | 8 ++++----
 packages/html/html/src/skins/media-skin-default.ts | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/html/html/src/components/media-popover.ts b/packages/html/html/src/components/media-popover.ts
index c3303062..0a7beb54 100644
--- a/packages/html/html/src/components/media-popover.ts
+++ b/packages/html/html/src/components/media-popover.ts
@@ -23,11 +23,11 @@ export class MediaPopoverRoot extends HTMLElement {
   }
 
   static get observedAttributes(): string[] {
-    return ['openonhover', 'delay', 'closedelay'];
+    return ['open-on-hover', 'delay', 'close-delay'];
   }
 
   get openOnHover(): boolean {
-    return this.hasAttribute('openonhover');
+    return this.hasAttribute('open-on-hover');
   }
 
   get delay(): number {
@@ -35,7 +35,7 @@ export class MediaPopoverRoot extends HTMLElement {
   }
 
   get closeDelay(): number {
-    return parseInt(this.getAttribute('closedelay') ?? '0', 10);
+    return parseInt(this.getAttribute('close-delay') ?? '0', 10);
   }
 
   get #triggerElement(): MediaPopoverTrigger | null {
@@ -158,7 +158,7 @@ export class MediaPopoverPositioner extends HTMLElement {
   }
 
   get sideOffset(): number {
-    return parseInt(this.getAttribute('sideoffset') ?? '0', 10);
+    return parseInt(this.getAttribute('side-offset') ?? '0', 10);
   }
 }
 
diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index b5683085..1f7237b1 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -262,7 +262,7 @@ export function getTemplateHTML() {
             <media-time-range-thumb></media-time-range-thumb>
           </media-time-range-root>
           <media-duration-display></media-duration-display>
-          <media-popover-root openonhover delay="200" closedelay="100">
+          <media-popover-root open-on-hover delay="200" close-delay="100">
             <media-popover-trigger>
               <media-mute-button class="button">
                 <media-volume-high-icon class="icon volume-high-icon"></media-volume-high-icon>
@@ -270,7 +270,7 @@ export function getTemplateHTML() {
                 <media-volume-off-icon class="icon volume-off-icon"></media-volume-off-icon>
               </media-mute-button>
             </media-popover-trigger>
-            <media-popover-positioner side="top" sideOffset="0">
+            <media-popover-positioner side="top" side-offset="0">
               <media-popover-popup>
                 <media-volume-range-root orientation="vertical">
                   <media-volume-range-track>