fix(react): implement proper HTML boolean data attributes for components

- Refactor PlayButton and MuteButton to use standard boolean attribute behavior
- Boolean data attributes now follow HTML conventions:
  - Present with empty string ("") when true
  - Completely absent when false
- Revert CSS to clean selectors that work with boolean attribute presence/absence
- Fixes PlayButton icon display issue where data-paused="false" was still present
- Ensures semantic consistency with native HTML boolean attributes
- Improves CSS maintainability with simpler attribute selectors

Before: data-paused="true"|"false" (always present)
After: data-paused="" (present) or absent (not in DOM)

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

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

packages/react/react/src/components/MuteButton.tsx

@@ -31,9 +31,8 @@ export const useMuteButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
   state: ReturnType<typeof useMuteButtonState>,
 ) => {
-  return {
-    /** data attributes/props */
-    ['data-muted']: state.muted,
+  const baseProps = {
+    /** data attributes/props - non-boolean */
     ['data-volume-level']: state.volumeLevel,
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
@@ -44,6 +43,13 @@ export const useMuteButtonProps = (
     /** external props spread last to allow for overriding */
     ...props,
   };
+
+  // Handle boolean data attribute: present with empty string when true, absent when false
+  if (state.muted) {
+    baseProps['data-muted'] = '';
+  }
+
+  return baseProps;
 };
 
 export type useMuteButtonProps = typeof useMuteButtonProps;

packages/react/react/src/components/PlayButton.tsx

@@ -29,9 +29,7 @@ export const usePlayButtonProps = (
   props: React.PropsWithChildren<{ [k: string]: any }>,
   state: ReturnType<typeof usePlayButtonState>,
 ) => {
-  return {
-    /** data attributes/props */
-    ['data-paused']: state.paused,
+  const baseProps = {
     /** @TODO Need another state provider in core for i18n (CJP) */
     /** aria attributes/props */
     role: 'button',
@@ -41,6 +39,13 @@ export const usePlayButtonProps = (
     /** external props spread last to allow for overriding */
     ...props,
   };
+
+  // Handle boolean data attribute: present with empty string when true, absent when false
+  if (state.paused) {
+    baseProps['data-paused'] = '';
+  }
+
+  return baseProps;
 };
 
 export type usePlayButtonProps = typeof usePlayButtonProps;