fix: refactor private fields to public with underscore convention

Resolves TypeScript TS4094 error "Property may not be private or protected"
in exported anonymous classes created by factory functions.

Changes:
- #mediaStore → _mediaStore (public with underscore convention)
- #mediaSlot → _mediaSlot (public with underscore convention)
- #handleMediaSlotChange → _handleMediaSlotChange (public with underscore)

The underscore prefix indicates internal/private usage by convention
while avoiding TypeScript restrictions on anonymous class exports.

Affected files:
- media-mute-button.ts: 5 field references updated
- media-play-button.ts: 5 field references updated
- media-container.ts: 10 field references updated

All HTML packages now build successfully without TS4094 errors.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -12,13 +12,13 @@ export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
       ];
     }
 
-    #mediaStore: any;
+    _mediaStore: any;
 
     contexts = {
       mediaStore: (mediaStore: any) => {
-        this.#mediaStore = mediaStore;
+        this._mediaStore = mediaStore;
 
-        this.#mediaStore.subscribeKeys(
+        this._mediaStore.subscribeKeys(
           ['mediaVolumeLevel', 'mediaMuted'],
           ({ mediaVolumeLevel, mediaMuted }: any) => {
             /** @ts-ignore */
@@ -54,11 +54,11 @@ export const toConnectedMediaMuteButton = (BaseClass = HTMLElement) => {
       /** @ts-ignore */
       super.handleEvent?.(event);
       if (
-        this.#mediaStore &&
+        this._mediaStore &&
         ['mediamuterequest', 'mediaunmuterequest'].includes(event.type)
       ) {
         const { type, detail } = event;
-        this.#mediaStore.dispatch({ type, detail });
+        this._mediaStore.dispatch({ type, detail });
       }
     }
   };

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

@@ -11,13 +11,13 @@ export const toConnectedMediaPlayButton = (BaseClass = HTMLElement) => {
       ];
     }
 
-    #mediaStore: any;
+    _mediaStore: any;
 
     contexts = {
       mediaStore: (mediaStore: any) => {
-        this.#mediaStore = mediaStore;
+        this._mediaStore = mediaStore;
 
-        this.#mediaStore.subscribeKeys(
+        this._mediaStore.subscribeKeys(
           ['mediaPaused'],
           ({ mediaPaused }: any) => {
             // NOTE: We may want to assume setting properties instead of attributes here to leave things generic for
@@ -52,11 +52,11 @@ export const toConnectedMediaPlayButton = (BaseClass = HTMLElement) => {
       /** @ts-ignore */
       super.handleEvent?.(event);
       if (
-        this.#mediaStore &&
+        this._mediaStore &&
         ['mediaplayrequest', 'mediapauserequest'].includes(event.type)
       ) {
         const { type, detail } = event;
-        this.#mediaStore.dispatch({ type, detail });
+        this._mediaStore.dispatch({ type, detail });
       }
     }
   };

packages/html/html/src/media-container.ts

@@ -12,13 +12,13 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
   static shadowRootOptions = { mode: 'open' as ShadowRootMode };
   static getTemplateHTML = getTemplateHTML;
 
-  #mediaStore: any;
-  #mediaSlot: HTMLSlotElement;
+  _mediaStore: any;
+  _mediaSlot: HTMLSlotElement;
 
   contexts = {
     mediaStore: (mediaStore: any) => {
-      this.#mediaStore = mediaStore;
-      this.#handleMediaSlotChange();
+      this._mediaStore = mediaStore;
+      this._handleMediaSlotChange();
     },
   };
 
@@ -34,13 +34,13 @@ export class MediaContainer extends ConsumerMixin(HTMLElement) {
     }
 
     // @ts-ignore - Shadow DOM property access
-    this.#mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
-    this.#mediaSlot.addEventListener('slotchange', this.#handleMediaSlotChange);
+    this._mediaSlot = this.shadowRoot!.querySelector('slot[name=media]') as HTMLSlotElement;
+    this._mediaSlot.addEventListener('slotchange', this._handleMediaSlotChange);
   }
 
-  #handleMediaSlotChange = () => {
-    const media = this.#mediaSlot.assignedElements({ flatten: true })[0];
-    this.#mediaStore.dispatch({ type: 'mediaelementchangerequest', detail: media });
+  _handleMediaSlotChange = () => {
+    const media = this._mediaSlot.assignedElements({ flatten: true })[0];
+    this._mediaStore.dispatch({ type: 'mediaelementchangerequest', detail: media });
   };
 }