fix(packages): fix ejected skin slider setup (#1660)

packages/html/src/define/audio/ui.ts

@@ -16,7 +16,7 @@ import { SeekButtonElement } from '../../ui/seek-button/seek-button-element';
 import { TooltipElement } from '../../ui/tooltip/tooltip-element';
 import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
 import { safeDefine } from '../safe-define';
-import { defineErrorDialog, defineMenu, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
+import { defineErrorDialog, defineMenu, defineSliders, defineTime } from '../ui/compounds';
 
 // Value import — player.ts body runs before this module's body.
 import { AudioPlayerElement } from './player';
@@ -28,8 +28,7 @@ safeDefine(MediaContainerElement);
 
 // Compound groups.
 defineErrorDialog();
-defineTimeSlider();
-defineVolumeSlider();
+defineSliders();
 defineTime();
 defineMenu();
 

packages/html/src/define/live-video/ui.ts

@@ -18,14 +18,7 @@ import { PosterElement } from '../../ui/poster/poster-element';
 import { TooltipElement } from '../../ui/tooltip/tooltip-element';
 import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
 import { safeDefine } from '../safe-define';
-import {
-  defineControls,
-  defineErrorDialog,
-  defineInputIndicators,
-  defineTime,
-  defineTimeSlider,
-  defineVolumeSlider,
-} from '../ui/compounds';
+import { defineControls, defineErrorDialog, defineInputIndicators, defineSliders, defineTime } from '../ui/compounds';
 
 // Value import — player.ts body runs before this module's body.
 import { LiveVideoPlayerElement } from './player';
@@ -39,8 +32,7 @@ safeDefine(MediaContainerElement);
 defineControls();
 defineErrorDialog();
 defineInputIndicators();
-defineTimeSlider();
-defineVolumeSlider();
+defineSliders();
 defineTime();
 
 // Standalone elements.

packages/html/src/define/tests/video-ui-ejected.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+
+async function waitForUpdates(elements: Element[]): Promise<void> {
+  for (const element of elements) {
+    const maybeReactive = element as Element & { updateComplete?: Promise<boolean> };
+    await maybeReactive.updateComplete;
+  }
+}
+
+describe('video/ui ejected registration', () => {
+  it('updates volume slider child parts when light DOM exists before registration', async () => {
+    document.body.innerHTML = /*html*/ `
+      <video-player>
+        <media-container>
+          <video></video>
+
+          <media-time-slider>
+            <media-slider-track>
+              <media-slider-fill></media-slider-fill>
+              <media-slider-buffer></media-slider-buffer>
+            </media-slider-track>
+            <media-slider-thumb></media-slider-thumb>
+          </media-time-slider>
+
+          <media-volume-slider orientation="vertical" thumb-alignment="edge">
+            <media-slider-track>
+              <media-slider-fill></media-slider-fill>
+            </media-slider-track>
+            <media-slider-thumb></media-slider-thumb>
+          </media-volume-slider>
+        </media-container>
+      </video-player>
+    `;
+
+    await import('../video/ui');
+
+    const volumeSlider = document.querySelector('media-volume-slider')! as HTMLElement & { orientation: string };
+    const volumeTrack = volumeSlider.querySelector('media-slider-track')!;
+    const volumeFill = volumeSlider.querySelector('media-slider-fill')!;
+    const volumeThumb = volumeSlider.querySelector('media-slider-thumb')!;
+
+    volumeSlider.orientation = 'vertical';
+
+    await Promise.resolve();
+    await waitForUpdates([volumeSlider, volumeTrack, volumeFill, volumeThumb]);
+
+    expect(volumeSlider.getAttribute('data-orientation')).toBe('vertical');
+    expect(volumeTrack.getAttribute('data-orientation')).toBe('vertical');
+    expect(volumeFill.getAttribute('data-orientation')).toBe('vertical');
+    expect(volumeThumb.getAttribute('data-orientation')).toBe('vertical');
+    expect(volumeThumb.getAttribute('aria-orientation')).toBe('vertical');
+  });
+});

packages/html/src/define/ui/compounds.ts

@@ -110,3 +110,11 @@ export function defineVolumeSlider(): void {
   safeDefine(VolumeSliderElement);
   defineSliderParts();
 }
+
+export function defineSliders(): void {
+  safeDefine(TimeSliderElement);
+  safeDefine(VolumeSliderElement);
+  defineSliderParts();
+  safeDefine(SliderBufferElement);
+  safeDefine(SliderThumbnailElement);
+}

packages/html/src/define/video/ui.ts

@@ -28,9 +28,8 @@ import {
   defineErrorDialog,
   defineInputIndicators,
   defineMenu,
+  defineSliders,
   defineTime,
-  defineTimeSlider,
-  defineVolumeSlider,
 } from '../ui/compounds';
 
 // Value import — player.ts body runs before this module's body.
@@ -45,8 +44,7 @@ safeDefine(MediaContainerElement);
 defineControls();
 defineErrorDialog();
 defineInputIndicators();
-defineTimeSlider();
-defineVolumeSlider();
+defineSliders();
 defineTime();
 defineMenu();