fix(packages): make tooltips visual-only and auto-forward media button labels (#1174)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/skins/src/shared/css/audio/tooltip-state.css

@@ -1,25 +0,0 @@
-/* ==========================================================================
-   Tooltip Label State Visibility for Audio Skins
-
-   Data-attribute-driven visibility rules for multi-state tooltip labels.
-   Uses adjacent sibling selectors to match button state → tooltip content.
-   ========================================================================== */
-
-/* --- All multi-state labels hidden by default --- */
-
-.media-tooltip-label {
-  display: none;
-}
-
-/* --- Active label per state --- */
-
-/* Play: ended → replay */
-.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
-/* Play: paused (not ended) → play */
-  .media-button--play:not([data-ended])[data-paused] + .media-tooltip
-  .media-tooltip-label--play,
-/* Play: playing (not paused, not ended) → pause */
-  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
-  .media-tooltip-label--pause {
-  display: block;
-}

packages/skins/src/shared/css/video/tooltip-state.css

@@ -1,43 +0,0 @@
-/* ==========================================================================
-   Tooltip Label State Visibility for Video Skins
-
-   Data-attribute-driven visibility rules for multi-state tooltip labels.
-   Uses adjacent sibling selectors to match button state → tooltip content.
-   ========================================================================== */
-
-/* --- All multi-state labels hidden by default --- */
-
-.media-tooltip-label {
-  display: none;
-}
-
-/* --- Active label per state --- */
-
-/* Play: ended → replay */
-.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
-/* Play: paused (not ended) → play */
-  .media-button--play:not([data-ended])[data-paused] + .media-tooltip
-  .media-tooltip-label--play,
-/* Play: playing (not paused, not ended) → pause */
-  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
-  .media-tooltip-label--pause,
-/* Fullscreen: not fullscreen → enter */
-  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip
-  .media-tooltip-label--enter-fullscreen,
-/* Fullscreen: fullscreen → exit */
-  .media-button--fullscreen[data-fullscreen] + .media-tooltip
-  .media-tooltip-label--exit-fullscreen,
-/* Captions: not active → enable */
-  .media-button--captions:not([data-active]) + .media-tooltip
-  .media-tooltip-label--enable-captions,
-/* Captions: active → disable */
-  .media-button--captions[data-active] + .media-tooltip
-  .media-tooltip-label--disable-captions,
-/* PiP: not in pip → enter */
-  .media-button--pip:not([data-pip]) + .media-tooltip
-  .media-tooltip-label--enter-pip,
-/* PiP: in pip → exit */
-  .media-button--pip[data-pip] + .media-tooltip
-  .media-tooltip-label--exit-pip {
-  display: block;
-}

packages/skins/src/shared/tailwind/tooltip-state.ts

@@ -1,23 +0,0 @@
-export const tooltipState = {
-  play: {
-    wrapper: 'contents group/play-tip',
-    replay: 'hidden group-has-data-ended/play-tip:block',
-    play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block',
-    pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block',
-  },
-  fullscreen: {
-    wrapper: 'contents group/fullscreen-tip',
-    enter: 'hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block',
-    exit: 'hidden group-has-data-fullscreen/fullscreen-tip:block',
-  },
-  captions: {
-    wrapper: 'contents group/captions-tip',
-    enable: 'hidden group-[:not(:has([data-active]))]/captions-tip:block',
-    disable: 'hidden group-has-data-active/captions-tip:block',
-  },
-  pip: {
-    wrapper: 'contents group/pip-tip',
-    enter: 'hidden group-[:not(:has([data-pip]))]/pip-tip:block',
-    exit: 'hidden group-has-data-pip/pip-tip:block',
-  },
-};