diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts
index 6548a3061..b2fd9cc45 100644
--- a/packages/html/src/define/audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts
@@ -47,13 +47,13 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
@@ -79,9 +79,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="${time.controls}">
+          <media-controls-group class="${time.controls}">
             <media-time-group class="${time.group}">
               <media-time type="current" class="${time.current}"></media-time>
               <media-time-separator class="${time.separator}"></media-time-separator>
@@ -98,9 +98,9 @@ function getTemplateHTML() {
                 <media-slider-value type="pointer" class="${slider.value}"></media-slider-value>
               </media-slider-preview>
             </media-time-slider>
-          </div>
+          </media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}">
             </media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
@@ -130,7 +130,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>
diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts
index d6dcd1dc5..5e4b1fa6c 100644
--- a/packages/html/src/define/audio/minimal-skin.ts
+++ b/packages/html/src/define/audio/minimal-skin.ts
@@ -30,7 +30,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -62,9 +62,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls">
+          <media-controls-group class="media-time-controls">
             <media-time-group class="media-time-group">
               <media-time type="current" class="media-time media-time--current"></media-time>
               <media-time-separator class="media-time-separator"></media-time-separator>
@@ -81,9 +81,9 @@ function getTemplateHTML() {
                 <media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
               </media-slider-preview>
             </media-time-slider>
-          </div>
+          </media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-playback-rate-button commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-popover media-menu">
               <media-playback-rate-radio-group class="media-menu__group">
@@ -112,7 +112,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>
diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
index edfea37d1..d91be7c84 100644
--- a/packages/html/src/define/audio/skin.tailwind.ts
+++ b/packages/html/src/define/audio/skin.tailwind.ts
@@ -47,13 +47,13 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
@@ -79,9 +79,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="${time.group}">
+          <media-controls-group class="${time.group}">
             <media-time type="current" class="${time.current}"></media-time>
             <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
@@ -94,9 +94,9 @@ function getTemplateHTML() {
               </media-slider-preview>
             </media-time-slider>
             <media-time type="duration" class="${time.duration}"></media-time>
-          </div>
+          </media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
               <media-playback-rate-radio-group class="${menu.group}">
@@ -125,7 +125,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>
diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts
index b4d0c5818..8e88855a0 100644
--- a/packages/html/src/define/audio/skin.ts
+++ b/packages/html/src/define/audio/skin.ts
@@ -30,7 +30,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -62,9 +62,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls">
+          <media-controls-group class="media-time-controls">
             <media-time type="current" class="media-time"></media-time>
             <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
@@ -77,9 +77,9 @@ function getTemplateHTML() {
               </media-slider-preview>
             </media-time-slider>
             <media-time type="duration" class="media-time"></media-time>
-          </div>
+          </media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-playback-rate-button commandfor="playback-rate-menu" class="media-button media-button--subtle media-button--icon media-button--playback-rate"></media-playback-rate-button>
             <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="media-surface media-popover media-menu">
               <media-playback-rate-radio-group class="media-menu__group">
@@ -108,7 +108,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/live-audio/minimal-skin.tailwind.ts b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
index 53492de5a..73433c8c1 100644
--- a/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
@@ -39,23 +39,23 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
 
-              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
-          </div>
+            <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
+          </media-controls-group>
 
-          <div class="grow" aria-hidden="true"></div>
+          <media-controls-group class="grow" aria-hidden="true"></media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -70,7 +70,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>
diff --git a/packages/html/src/define/live-audio/minimal-skin.ts b/packages/html/src/define/live-audio/minimal-skin.ts
index e145b0f7a..00b879e2b 100644
--- a/packages/html/src/define/live-audio/minimal-skin.ts
+++ b/packages/html/src/define/live-audio/minimal-skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -40,11 +40,11 @@ function getTemplateHTML() {
             </media-tooltip>
 
             <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls" aria-hidden="true"></div>
+          <media-controls-group class="media-time-controls" aria-hidden="true"></media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -59,7 +59,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>
diff --git a/packages/html/src/define/live-audio/skin.tailwind.ts b/packages/html/src/define/live-audio/skin.tailwind.ts
index 2f4d3fe3f..031b34632 100644
--- a/packages/html/src/define/live-audio/skin.tailwind.ts
+++ b/packages/html/src/define/live-audio/skin.tailwind.ts
@@ -39,23 +39,23 @@ function getTemplateHTML() {
 
       <media-controls class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+          <media-controls-group class="${buttonGroup}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
 
-              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
-          </div>
+            <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
+          </media-controls-group>
 
-          <div class="grow" aria-hidden="true"></div>
+          <media-controls-group class="grow" aria-hidden="true"></media-controls-group>
 
-          <div class="${buttonGroup}">
+          <media-controls-group class="${buttonGroup}">
             <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -70,7 +70,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
     </media-container>
diff --git a/packages/html/src/define/live-audio/skin.ts b/packages/html/src/define/live-audio/skin.ts
index 6f6944114..04b454fcc 100644
--- a/packages/html/src/define/live-audio/skin.ts
+++ b/packages/html/src/define/live-audio/skin.ts
@@ -28,7 +28,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -40,11 +40,11 @@ function getTemplateHTML() {
             </media-tooltip>
 
             <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls" aria-hidden="true"></div>
+          <media-controls-group class="media-time-controls" aria-hidden="true"></media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="live-audio-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -59,7 +59,7 @@ function getTemplateHTML() {
                 <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/live-video/minimal-skin.tailwind.ts b/packages/html/src/define/live-video/minimal-skin.tailwind.ts
index 611833f48..cab8d33dc 100644
--- a/packages/html/src/define/live-video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/live-video/minimal-skin.tailwind.ts
@@ -53,23 +53,23 @@ function getTemplateHTML() {
 
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroupStart}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-
-              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
-          </div>
-
-          <div class="grow" aria-hidden="true"></div>
-
-          <div class="${buttonGroupEnd}">
+          <media-controls-group class="${buttonGroupStart}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+
+            <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
+          </media-controls-group>
+
+          <media-controls-group class="grow" aria-hidden="true"></media-controls-group>
+
+          <media-controls-group class="${buttonGroupEnd}">
             <media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -84,59 +84,59 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${slider.thumb.base}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-              <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
-                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
-                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
-              </media-captions-button>
-              <media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
-                <media-captions-radio-group class="${menu.group}">
-                  <template>
-                    <media-menu-radio-item class="${menu.item}">
-                      <span data-part="label"></span>
-                      <media-menu-item-indicator force-mount class="${menu.indicator}">
-                        ${renderIcon('check', { class: icon })}
-                      </media-menu-item-indicator>
-                    </media-menu-radio-item>
-                  </template>
-                </media-captions-radio-group>
-              </media-menu>
-              <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
-                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
-                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
-              </media-cast-button>
-              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
-                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
-                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
-              </media-airplay-button>
-              <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
-                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
-                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
-              </media-pip-button>
-              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
-                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
-                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
-              </media-fullscreen-button>
-              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-          </div>
+            <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
+              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
+              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
+            </media-captions-button>
+            <media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
+              <media-captions-radio-group class="${menu.group}">
+                <template>
+                  <media-menu-radio-item class="${menu.item}">
+                    <span data-part="label"></span>
+                    <media-menu-item-indicator force-mount class="${menu.indicator}">
+                      ${renderIcon('check', { class: icon })}
+                    </media-menu-item-indicator>
+                  </media-menu-radio-item>
+                </template>
+              </media-captions-radio-group>
+            </media-menu>
+            <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
+              ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
+              ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
+              ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
+              ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
+            </media-airplay-button>
+            <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+              ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
+              ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/live-video/minimal-skin.ts b/packages/html/src/define/live-video/minimal-skin.ts
index c073e2a3c..47fb3c461 100644
--- a/packages/html/src/define/live-video/minimal-skin.ts
+++ b/packages/html/src/define/live-video/minimal-skin.ts
@@ -36,7 +36,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -48,11 +48,11 @@ function getTemplateHTML() {
             </media-tooltip>
 
             <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls" aria-hidden="true"></div>
+          <media-controls-group class="media-time-controls" aria-hidden="true"></media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="live-video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -100,7 +100,7 @@ function getTemplateHTML() {
 
             <media-airplay-button commandfor="airplay-tooltip" class="media-button media-button--subtle media-button--icon media-button--airplay">
               ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}
-              ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}            
+              ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}
             </media-airplay-button>
             <media-tooltip id="airplay-tooltip" side="top" class="media-tooltip">
               <media-tooltip-label></media-tooltip-label>
@@ -124,7 +124,7 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/live-video/skin.tailwind.ts b/packages/html/src/define/live-video/skin.tailwind.ts
index 3f036d14c..81b91809d 100644
--- a/packages/html/src/define/live-video/skin.tailwind.ts
+++ b/packages/html/src/define/live-video/skin.tailwind.ts
@@ -55,23 +55,23 @@ function getTemplateHTML() {
 
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroupStart}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-
-              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
-          </div>
-
-          <div class="grow" aria-hidden="true"></div>
-
-          <div class="${buttonGroupEnd}">
+          <media-controls-group class="${buttonGroupStart}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+
+            <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
+          </media-controls-group>
+
+          <media-controls-group class="grow" aria-hidden="true"></media-controls-group>
+
+          <media-controls-group class="${buttonGroupEnd}">
             <media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -86,59 +86,59 @@ function getTemplateHTML() {
                 <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-              <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
-                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
-                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
-              </media-captions-button>
-              <media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
-                <media-captions-radio-group class="${menu.group}">
-                  <template>
-                    <media-menu-radio-item class="${menu.item}">
-                      <span data-part="label"></span>
-                      <media-menu-item-indicator force-mount class="${menu.indicator}">
-                        ${renderIcon('check', { class: icon })}
-                      </media-menu-item-indicator>
-                    </media-menu-radio-item>
-                  </template>
-                </media-captions-radio-group>
-              </media-menu>
-              <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
-                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
-                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
-              </media-cast-button>
-              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
-                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
-                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
-              </media-airplay-button>
-              <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
-                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
-                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
-              </media-pip-button>
-              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
-                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
-                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
-              </media-fullscreen-button>
-              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-          </div>
+            <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.captions.button)}">
+              ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}
+              ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}
+            </media-captions-button>
+            <media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
+              <media-captions-radio-group class="${menu.group}">
+                <template>
+                  <media-menu-radio-item class="${menu.item}">
+                    <span data-part="label"></span>
+                    <media-menu-item-indicator force-mount class="${menu.indicator}">
+                      ${renderIcon('check', { class: icon })}
+                    </media-menu-item-indicator>
+                  </media-menu-radio-item>
+                </template>
+              </media-captions-radio-group>
+            </media-menu>
+            <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
+              ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
+              ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
+              ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
+              ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
+            </media-airplay-button>
+            <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+              ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
+              ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/live-video/skin.ts b/packages/html/src/define/live-video/skin.ts
index 8991ee78c..fce5d6a70 100644
--- a/packages/html/src/define/live-video/skin.ts
+++ b/packages/html/src/define/live-video/skin.ts
@@ -38,7 +38,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -50,11 +50,11 @@ function getTemplateHTML() {
             </media-tooltip>
 
             <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls" aria-hidden="true"></div>
+          <media-controls-group class="media-time-controls" aria-hidden="true"></media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="live-video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -126,7 +126,7 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts
index 8acdef9fd..9d42eaa1c 100644
--- a/packages/html/src/define/video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/video/minimal-skin.tailwind.ts
@@ -61,16 +61,16 @@ function getTemplateHTML() {
 
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroupStart}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
+          <media-controls-group class="${buttonGroupStart}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
 
             <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
               <span class="${iconContainer}">
@@ -93,9 +93,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="${time.controls}">
+          <media-controls-group class="${time.controls}">
             <media-time-group class="${time.group}">
               <media-time type="current" class="${time.current}"></media-time>
               <media-time-separator class="${time.separator}"></media-time-separator>
@@ -120,9 +120,9 @@ function getTemplateHTML() {
                 <media-slider-value type="pointer" class="${cn(slider.value, time.current)}"></media-slider-value>
               </media-slider-preview>
             </media-time-slider>
-          </div>
+          </media-controls-group>
 
-          <div class="${cn(buttonGroupEnd, menu.settingsGroup)}">
+          <media-controls-group class="${cn(buttonGroupEnd, menu.settingsGroup)}">
             <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -230,39 +230,39 @@ function getTemplateHTML() {
               </media-menu>
             </media-menu>
 
-              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
-                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
-                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
-              </media-cast-button>
-              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
-                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
-                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
-              </media-airplay-button>
-              <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
-                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
-                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
-              </media-pip-button>
-              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
-                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
-                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
-              </media-fullscreen-button>
-              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-          </div>
+            <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
+              ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
+              ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
+              ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
+              ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
+            </media-airplay-button>
+            <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+              ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
+              ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/video/minimal-skin.ts b/packages/html/src/define/video/minimal-skin.ts
index 00f5ad9f6..3adee05a2 100644
--- a/packages/html/src/define/video/minimal-skin.ts
+++ b/packages/html/src/define/video/minimal-skin.ts
@@ -38,7 +38,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -70,9 +70,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls">
+          <media-controls-group class="media-time-controls">
             <media-time-group class="media-time-group">
               <media-time type="current" class="media-time media-time--current"></media-time>
               <media-time-separator class="media-time-separator"></media-time-separator>
@@ -98,9 +98,9 @@ function getTemplateHTML() {
                 <media-slider-value type="pointer" class="media-slider__value media-time"></media-slider-value>
               </media-slider-preview>
             </media-time-slider>
-          </div>
+          </media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -243,7 +243,7 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index f09441b49..3b5f8f963 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -63,16 +63,16 @@ function getTemplateHTML() {
 
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroupStart}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
-                ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
-                ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
-                ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
-              </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
+          <media-controls-group class="${buttonGroupStart}">
+            <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.play.button)}">
+              ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}
+              ${renderIcon('play', { class: cn(icon, iconState.play.play) })}
+              ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
+            </media-play-button>
+            <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
 
             <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
               <span class="${iconContainer}">
@@ -95,9 +95,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="${time.group}">
+          <media-controls-group class="${time.group}">
             <media-time type="current" class="${time.current}"></media-time>
             <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
@@ -116,9 +116,9 @@ function getTemplateHTML() {
               </media-slider-preview>
             </media-time-slider>
             <media-time type="duration" class="${time.duration}"></media-time>
-          </div>
+          </media-controls-group>
 
-          <div class="${cn(buttonGroupEnd, menu.settingsGroup)}">
+          <media-controls-group class="${cn(buttonGroupEnd, menu.settingsGroup)}">
             <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, iconState.mute.button)}">
               ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}
               ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}
@@ -226,39 +226,39 @@ function getTemplateHTML() {
               </media-menu>
             </media-menu>
 
-              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
-                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
-                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
-              </media-cast-button>
-              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
-                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
-                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
-              </media-airplay-button>
-              <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
-                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
-                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
-              </media-pip-button>
-              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
-                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
-                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
-              </media-fullscreen-button>
-              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
-                <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
-              </media-tooltip>
-          </div>
+            <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.cast.button)}">
+              ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}
+              ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}
+            </media-cast-button>
+            <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}">
+              ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}
+              ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}
+            </media-airplay-button>
+            <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.pip.button)}">
+              ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}
+              ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}
+            </media-pip-button>
+            <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+            <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}">
+              ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}
+              ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}
+            </media-fullscreen-button>
+            <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip-label></media-tooltip-label>
+              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+            </media-tooltip>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/html/src/define/video/skin.ts b/packages/html/src/define/video/skin.ts
index f87f83a02..df489d42e 100644
--- a/packages/html/src/define/video/skin.ts
+++ b/packages/html/src/define/video/skin.ts
@@ -40,7 +40,7 @@ function getTemplateHTML() {
 
       <media-controls class="media-surface media-controls">
         <media-tooltip-group>
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-play-button commandfor="play-tooltip" class="media-button media-button--subtle media-button--icon media-button--play">
               ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}
               ${renderIcon('play', { class: 'media-icon media-icon--play' })}
@@ -72,9 +72,9 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
 
-          <div class="media-time-controls">
+          <media-controls-group class="media-time-controls">
             <media-time type="current" class="media-time"></media-time>
             <media-time-slider class="media-slider">
               <media-slider-track class="media-slider__track">
@@ -94,9 +94,9 @@ function getTemplateHTML() {
               </media-slider-preview>
             </media-time-slider>
             <media-time type="duration" class="media-time"></media-time>
-          </div>
+          </media-controls-group>
 
-          <div class="media-button-group">
+          <media-controls-group class="media-button-group">
             <media-mute-button commandfor="video-volume-popover" class="media-button media-button--subtle media-button--icon media-button--mute">
               ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}
               ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}
@@ -239,7 +239,7 @@ function getTemplateHTML() {
               <media-tooltip-label></media-tooltip-label>
               <media-tooltip-shortcut class="media-tooltip__kbd"></media-tooltip-shortcut>
             </media-tooltip>
-          </div>
+          </media-controls-group>
         </media-tooltip-group>
       </media-controls>
 
diff --git a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
index 45acb74ba..71bb45bf4 100644
--- a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx
@@ -179,7 +179,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
 
       <Controls.Root className={controls}>
         <Tooltip.Provider>
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -229,9 +229,9 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className={time.controls}>
+          <Controls.Group className={time.controls}>
             <Time.Group className={time.group}>
               <Time.Value type="current" className={time.current} />
               <Time.Separator className={time.separator} />
@@ -248,9 +248,9 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
                 <TimeSlider.Value type="pointer" className={slider.value} />
               </TimeSlider.Preview>
             </TimeSlider.Root>
-          </div>
+          </Controls.Group>
 
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <Menu.Root side="top" align="center" boundary="viewport">
               <PlaybackRateTrigger />
               <Menu.Content className={cn(popup.popover, menu.root)}>
@@ -259,7 +259,7 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod
             </Menu.Root>
 
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
     </Container>
diff --git a/packages/react/src/presets/audio/minimal-skin.tsx b/packages/react/src/presets/audio/minimal-skin.tsx
index aeefc5fb5..7d1afe3c3 100644
--- a/packages/react/src/presets/audio/minimal-skin.tsx
+++ b/packages/react/src/presets/audio/minimal-skin.tsx
@@ -126,7 +126,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
 
       <Controls.Root className="media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -176,9 +176,9 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls">
+          <Controls.Group className="media-time-controls">
             <Time.Group className="media-time-group">
               <Time.Value type="current" className="media-time media-time--current" />
               <Time.Separator className="media-time-separator" />
@@ -195,9 +195,9 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
                 <TimeSlider.Value type="pointer" className="media-slider__value media-time" />
               </TimeSlider.Preview>
             </TimeSlider.Root>
-          </div>
+          </Controls.Group>
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Menu.Root side="top" align="center" boundary="viewport">
               <PlaybackRateTrigger />
               <Menu.Content className="media-popover media-menu media-menu--playback-rate">
@@ -206,7 +206,7 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {
             </Menu.Root>
 
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx
index 8fa21a31e..eaea813cd 100644
--- a/packages/react/src/presets/audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/skin.tailwind.tsx
@@ -181,7 +181,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
 
       <Controls.Root className={controls}>
         <Tooltip.Provider>
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -231,9 +231,9 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className={time.group}>
+          <Controls.Group className={time.group}>
             <Time.Value type="current" className={time.current} />
             <TimeSlider.Root render={<SliderRoot />}>
               <TimeSlider.Track render={<SliderTrack />}>
@@ -246,9 +246,9 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               </TimeSlider.Preview>
             </TimeSlider.Root>
             <Time.Value type="duration" className={time.duration} />
-          </div>
+          </Controls.Group>
 
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <Menu.Root side="top" align="center" boundary="viewport">
               <PlaybackRateTrigger />
               <Menu.Content className={cn(popup.popover, menu.root)}>
@@ -257,7 +257,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
             </Menu.Root>
 
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/audio/skin.tsx b/packages/react/src/presets/audio/skin.tsx
index 1340c68ea..6ac588385 100644
--- a/packages/react/src/presets/audio/skin.tsx
+++ b/packages/react/src/presets/audio/skin.tsx
@@ -126,7 +126,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
 
       <Controls.Root className="media-surface media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -176,9 +176,9 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls">
+          <Controls.Group className="media-time-controls">
             <Time.Value type="current" className="media-time" />
             <TimeSlider.Root className="media-slider">
               <TimeSlider.Track className="media-slider__track">
@@ -191,9 +191,9 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
               </TimeSlider.Preview>
             </TimeSlider.Root>
             <Time.Value type="duration" className="media-time" />
-          </div>
+          </Controls.Group>
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Menu.Root side="top" align="center" boundary="viewport">
               <PlaybackRateTrigger />
               <Menu.Content className="media-surface media-popover media-menu media-menu--playback-rate">
@@ -202,7 +202,7 @@ export function AudioSkin(props: AudioSkinProps): ReactNode {
             </Menu.Root>
 
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
index d6558eca2..88cd12e95 100644
--- a/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
@@ -119,7 +119,7 @@ export function MinimalLiveAudioSkinTailwind(props: MinimalLiveAudioSkinProps):
 
       <Controls.Root className={controls}>
         <Tooltip.Provider>
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -137,13 +137,13 @@ export function MinimalLiveAudioSkinTailwind(props: MinimalLiveAudioSkinProps):
             </Tooltip.Root>
 
             <LiveButton className={cn(button.base, button.subtle, button.live)} />
-          </div>
+          </Controls.Group>
 
-          <div className="grow" aria-hidden="true" />
+          <Controls.Group className="grow" aria-hidden="true" />
 
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-audio/minimal-skin.tsx b/packages/react/src/presets/live-audio/minimal-skin.tsx
index 14f7e11d3..8ee19c98e 100644
--- a/packages/react/src/presets/live-audio/minimal-skin.tsx
+++ b/packages/react/src/presets/live-audio/minimal-skin.tsx
@@ -85,7 +85,7 @@ export function MinimalLiveAudioSkin(props: MinimalLiveAudioSkinProps): ReactNod
 
       <Controls.Root className="media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -103,13 +103,13 @@ export function MinimalLiveAudioSkin(props: MinimalLiveAudioSkinProps): ReactNod
             </Tooltip.Root>
 
             <LiveButton className="media-button media-button--subtle media-button--live" />
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls" aria-hidden="true" />
+          <Controls.Group className="media-time-controls" aria-hidden="true" />
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-audio/skin.tailwind.tsx b/packages/react/src/presets/live-audio/skin.tailwind.tsx
index 668320457..5c37af5b4 100644
--- a/packages/react/src/presets/live-audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-audio/skin.tailwind.tsx
@@ -119,7 +119,7 @@ export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
 
       <Controls.Root className={controls}>
         <Tooltip.Provider>
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -137,13 +137,13 @@ export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
             </Tooltip.Root>
 
             <LiveButton className={cn(button.base, button.subtle, button.live)} />
-          </div>
+          </Controls.Group>
 
-          <div className="grow" aria-hidden="true" />
+          <Controls.Group className="grow" aria-hidden="true" />
 
-          <div className={buttonGroup}>
+          <Controls.Group className={buttonGroup}>
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-audio/skin.tsx b/packages/react/src/presets/live-audio/skin.tsx
index 8ac74eeb0..669576f22 100644
--- a/packages/react/src/presets/live-audio/skin.tsx
+++ b/packages/react/src/presets/live-audio/skin.tsx
@@ -93,7 +93,7 @@ export function LiveAudioSkin(props: LiveAudioSkinProps): ReactNode {
 
       <Controls.Root className="media-surface media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
@@ -108,13 +108,13 @@ export function LiveAudioSkin(props: LiveAudioSkinProps): ReactNode {
             </Tooltip.Root>
 
             <LiveButton className="media-button media-button--subtle media-button--live" />
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls" aria-hidden="true" />
+          <Controls.Group className="media-time-controls" aria-hidden="true" />
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <VolumePopover />
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx b/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
index be290cd4c..e2c0b6871 100644
--- a/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
@@ -241,7 +241,7 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
         className={controls}
       >
         <Tooltip.Provider>
-          <div className={buttonGroupStart}>
+          <Controls.Group className={buttonGroupStart}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -259,11 +259,11 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
             </Tooltip.Root>
 
             <LiveButton className={cn(button.base, button.subtle, button.live)} />
-          </div>
+          </Controls.Group>
 
-          <div className="grow" aria-hidden="true" />
+          <Controls.Group className="grow" aria-hidden="true" />
 
-          <div className={buttonGroupEnd}>
+          <Controls.Group className={buttonGroupEnd}>
             <VolumePopover />
 
             <CaptionsTrigger />
@@ -327,7 +327,7 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-video/minimal-skin.tsx b/packages/react/src/presets/live-video/minimal-skin.tsx
index 6ea976d2a..575a6050a 100644
--- a/packages/react/src/presets/live-video/minimal-skin.tsx
+++ b/packages/react/src/presets/live-video/minimal-skin.tsx
@@ -207,7 +207,7 @@ export function MinimalLiveVideoSkin(props: MinimalLiveVideoSkinProps): ReactNod
 
       <Controls.Root className="media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -225,11 +225,11 @@ export function MinimalLiveVideoSkin(props: MinimalLiveVideoSkinProps): ReactNod
             </Tooltip.Root>
 
             <LiveButton className="media-button media-button--subtle media-button--live" />
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls" aria-hidden="true" />
+          <Controls.Group className="media-time-controls" aria-hidden="true" />
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <VolumePopover />
 
             <CaptionsTrigger />
@@ -293,7 +293,7 @@ export function MinimalLiveVideoSkin(props: MinimalLiveVideoSkinProps): ReactNod
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-video/skin.tailwind.tsx b/packages/react/src/presets/live-video/skin.tailwind.tsx
index bc70bd8f9..05c89d95f 100644
--- a/packages/react/src/presets/live-video/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-video/skin.tailwind.tsx
@@ -243,7 +243,7 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
         className={controls}
       >
         <Tooltip.Provider>
-          <div className={buttonGroupStart}>
+          <Controls.Group className={buttonGroupStart}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -261,11 +261,11 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
             </Tooltip.Root>
 
             <LiveButton className={cn(button.base, button.subtle, button.live)} />
-          </div>
+          </Controls.Group>
 
-          <div className="grow" aria-hidden="true" />
+          <Controls.Group className="grow" aria-hidden="true" />
 
-          <div className={buttonGroupEnd}>
+          <Controls.Group className={buttonGroupEnd}>
             <VolumePopover />
 
             <CaptionsTrigger />
@@ -329,7 +329,7 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/live-video/skin.tsx b/packages/react/src/presets/live-video/skin.tsx
index 507a7df17..27606a0de 100644
--- a/packages/react/src/presets/live-video/skin.tsx
+++ b/packages/react/src/presets/live-video/skin.tsx
@@ -201,7 +201,7 @@ export function LiveVideoSkin(props: LiveVideoSkinProps): ReactNode {
 
       <Controls.Root className="media-surface media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -219,11 +219,11 @@ export function LiveVideoSkin(props: LiveVideoSkinProps): ReactNode {
             </Tooltip.Root>
 
             <LiveButton className="media-button media-button--subtle media-button--live" />
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls" aria-hidden="true" />
+          <Controls.Group className="media-time-controls" aria-hidden="true" />
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <VolumePopover />
 
             <CaptionsTrigger />
@@ -287,7 +287,7 @@ export function LiveVideoSkin(props: LiveVideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
index 79addcd5e..4e1703997 100644
--- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx
@@ -391,7 +391,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
         className={controls}
       >
         <Tooltip.Provider>
-          <div className={buttonGroupStart}>
+          <Controls.Group className={buttonGroupStart}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -441,9 +441,9 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className={time.controls}>
+          <Controls.Group className={time.controls}>
             <Time.Group className={time.group}>
               <Time.Value type="current" className={time.current} />
               <Time.Separator className={time.separator} />
@@ -467,9 +467,9 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 <TimeSlider.Value type="pointer" className={slider.value} />
               </TimeSlider.Preview>
             </TimeSlider.Root>
-          </div>
+          </Controls.Group>
 
-          <div className={cn(buttonGroupEnd, menu.settingsGroup)}>
+          <Controls.Group className={cn(buttonGroupEnd, menu.settingsGroup)}>
             <VolumePopover />
 
             <SettingsMenu />
@@ -533,7 +533,7 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx
index 0f73aabfd..021571711 100644
--- a/packages/react/src/presets/video/minimal-skin.tsx
+++ b/packages/react/src/presets/video/minimal-skin.tsx
@@ -325,7 +325,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
 
       <Controls.Root className="media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -375,9 +375,9 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls">
+          <Controls.Group className="media-time-controls">
             <Time.Group className="media-time-group">
               <Time.Value type="current" className="media-time media-time--current" />
               <Time.Separator className="media-time-separator" />
@@ -402,9 +402,9 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 <TimeSlider.Value type="pointer" className="media-time media-slider__value" />
               </TimeSlider.Preview>
             </TimeSlider.Root>
-          </div>
+          </Controls.Group>
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <VolumePopover />
 
             <SettingsMenu />
@@ -468,7 +468,7 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx
index 10a8b2d88..3368d118c 100644
--- a/packages/react/src/presets/video/skin.tailwind.tsx
+++ b/packages/react/src/presets/video/skin.tailwind.tsx
@@ -393,7 +393,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
         className={controls}
       >
         <Tooltip.Provider>
-          <div className={buttonGroupStart}>
+          <Controls.Group className={buttonGroupStart}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -443,9 +443,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className={time.group}>
+          <Controls.Group className={time.group}>
             <Time.Value type="current" className={time.current} />
             <TimeSlider.Root render={<SliderRoot />}>
               <TimeSlider.Track render={<SliderTrack />}>
@@ -463,9 +463,9 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
               </TimeSlider.Preview>
             </TimeSlider.Root>
             <Time.Value type="duration" className={time.duration} />
-          </div>
+          </Controls.Group>
 
-          <div className={cn(buttonGroupEnd, menu.settingsGroup)}>
+          <Controls.Group className={cn(buttonGroupEnd, menu.settingsGroup)}>
             <VolumePopover />
 
             <SettingsMenu />
@@ -529,7 +529,7 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className={popup.tooltipShortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>
 
diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx
index 3571377ed..792c9c990 100644
--- a/packages/react/src/presets/video/skin.tsx
+++ b/packages/react/src/presets/video/skin.tsx
@@ -327,7 +327,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
 
       <Controls.Root className="media-surface media-controls">
         <Tooltip.Provider>
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
@@ -377,9 +377,9 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
 
-          <div className="media-time-controls">
+          <Controls.Group className="media-time-controls">
             <Time.Value type="current" className="media-time" />
             <TimeSlider.Root className="media-slider">
               <TimeSlider.Track className="media-slider__track">
@@ -398,9 +398,9 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
               </TimeSlider.Preview>
             </TimeSlider.Root>
             <Time.Value type="duration" className="media-time" />
-          </div>
+          </Controls.Group>
 
-          <div className="media-button-group">
+          <Controls.Group className="media-button-group">
             <VolumePopover />
 
             <SettingsMenu />
@@ -464,7 +464,7 @@ export function VideoSkin(props: VideoSkinProps): ReactNode {
                 <Tooltip.Shortcut className="media-tooltip__kbd" />
               </Tooltip.Popup>
             </Tooltip.Root>
-          </div>
+          </Controls.Group>
         </Tooltip.Provider>
       </Controls.Root>