@videojs/html 10.0.0-beta.30 → 10.0.0-beta.31

package/dist/dev/define/video/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-surface media-controls media-controls--root\">\n        <media-tooltip-group>\n          <div class=\"media-surface media-controls media-controls--primary\">\n            <div class=\"media-button-group\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n                ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n                ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n                ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n                ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n                ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n                ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n              </media-mute-button>\n\n              <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n                <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"media-slider__track\">\n                    <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n            </div>\n\n            <div class=\"media-time-controls\">\n              <media-time type=\"current\" class=\"media-time\"></media-time>\n              <media-time-slider class=\"media-slider\">\n                <media-time-slider-chapters class=\"media-slider__chapters\">\n                  <template>\n                    <div class=\"media-slider__chapter\">\n                      <media-slider-track class=\"media-slider__track media-slider__chapter-track\">\n                        <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n                        <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                      </media-slider-track>\n                    </div>\n                  </template>\n                </media-time-slider-chapters>\n                <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n                <media-slider-preview overflow=\"visible\" class=\"media-slider__preview\">\n                  <div class=\"media-surface media-thumbnail media-slider__thumbnail\">\n                    <media-slider-thumbnail class=\"media-thumbnail__image\"></media-slider-thumbnail>\n                    ${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}\n                  </div>\n                  <div class=\"media-slider__value\">\n                    <media-time-slider-chapter-title class=\"media-slider__chapter-title\"></media-time-slider-chapter-title>\n                    <media-slider-value type=\"pointer\" class=\"media-time\"></media-slider-value>\n                  </div>\n                </media-slider-preview>\n              </media-time-slider>\n              <media-time toggle type=\"remaining\" class=\"media-time\"></media-time>\n            </div>\n\n            <div class=\"media-button-group\">\n              <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n                ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n                ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n              </media-captions-button>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"media-button media-button--subtle media-button--icon media-button--settings\">\n                ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}\n                ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}\n              </button>\n              <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--settings\">\n                <div class=\"media-menu__group\">\n                    <media-menu-item commandfor=\"settings-quality-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('switches', { class: 'media-icon' })}\n                      ${renderText(qualityText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-audio-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speech', { class: 'media-icon' })}\n                      ${renderText(audioText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-speed-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speed', { class: 'media-icon' })}\n                      ${renderText(speedText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-captions-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('captions-off', { class: 'media-icon' })}\n                      ${renderText(captionsText)}\n                      <span class=\"media-menu__hint\">\n                        <span data-part=\"hint\" class=\"media-menu__hint-label\"></span>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                </div>\n\n                <media-menu id=\"settings-quality-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(qualityText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-quality-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span>\n                          <span data-part=\"label\"></span>\n                          <sup data-part=\"tier\" class=\"media-menu__tier\"></sup>\n                        </span>\n                        <span data-part=\"badge\" class=\"media-badge\"></span>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-quality-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-audio-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(audioText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-audio-track-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span data-part=\"label\"></span>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-audio-track-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-speed-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(speedText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-playback-rate-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span data-part=\"label\"></span>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-playback-rate-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-captions-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(captionsText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-captions-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span data-part=\"label\"></span>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-captions-radio-group>\n                </media-menu>\n              </media-menu>\n              <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"media-surface media-tooltip\">\n                ${renderText(settingsText)}\n              </media-tooltip>\n            </div>\n          </div>\n\n          <div class=\"media-surface media-controls media-controls--secondary\">\n            <div class=\"media-button-group\">\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n                ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n                ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n                ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n                ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n                ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n                ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n                ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n                ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n            </div>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n      <div class=\"media-input-indicator-overlay\">\n        <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n          <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"media-surface media-status-indicator media-status-indicator--state\"\n        >\n          <div class=\"media-status-indicator__content\">\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-seek-indicator hidden class=\"media-seek-indicator\">\n          ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n          <media-seek-indicator-value class=\"media-seek-indicator__value\"></media-seek-indicator-value>\n        </media-seek-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/define/video/skin.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport { createShadowStyle, createTemplate } from '@videojs/utils/dom';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\nimport styles from './skin.css?inline';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"media-default-skin media-default-skin--video\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster>\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"media-buffering-indicator\">\n        ${renderIcon('spinner', { class: 'media-icon' })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"media-error\">\n        <div class=\"media-error__dialog media-surface\">\n          <div class=\"media-error__content\">\n            <media-alert-dialog-title class=\"media-error__title\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"media-error__description\"></media-alert-dialog-description>\n          </div>\n          <div class=\"media-error__actions\">\n            <media-alert-dialog-close class=\"media-button media-button--primary\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls class=\"media-surface media-controls media-controls--root\">\n        <media-tooltip-group>\n          <div class=\"media-surface media-controls media-controls--primary\">\n            <div class=\"media-button-group\">\n              <media-play-button commandfor=\"play-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--play\">\n                ${renderIcon('restart', { class: 'media-icon media-icon--restart' })}\n                ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n                ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n              </media-play-button>\n              <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-mute-button commandfor=\"video-volume-popover\" class=\"media-button media-button--subtle media-button--icon media-button--mute\">\n                ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n                ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n                ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n              </media-mute-button>\n\n              <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"media-surface media-popover media-popover--volume\">\n                <media-volume-slider class=\"media-slider\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"media-slider__track\">\n                    <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"media-slider__thumb media-slider__thumb--persistent\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n            </div>\n\n            <div class=\"media-time-controls\">\n              <media-time type=\"current\" class=\"media-time\"></media-time>\n              <media-time-slider class=\"media-slider\">\n                <media-time-slider-chapters class=\"media-slider__chapters\">\n                  <template>\n                    <div class=\"media-slider__chapter\">\n                      <media-slider-track class=\"media-slider__track media-slider__chapter-track\">\n                        <media-slider-buffer class=\"media-slider__buffer\"></media-slider-buffer>\n                        <media-slider-fill class=\"media-slider__fill\"></media-slider-fill>\n                      </media-slider-track>\n                    </div>\n                  </template>\n                </media-time-slider-chapters>\n                <media-slider-thumb class=\"media-slider__thumb\"></media-slider-thumb>\n\n                <media-slider-preview overflow=\"visible\" class=\"media-slider__preview\">\n                  <div class=\"media-surface media-thumbnail media-slider__thumbnail\">\n                    <media-slider-thumbnail class=\"media-thumbnail__image\"></media-slider-thumbnail>\n                    ${renderIcon('spinner', { class: 'media-thumbnail__spinner media-icon' })}\n                  </div>\n                  <div class=\"media-slider__value\">\n                    <media-time-slider-chapter-title class=\"media-slider__chapter-title\"></media-time-slider-chapter-title>\n                    <media-slider-value type=\"pointer\" class=\"media-time\"></media-slider-value>\n                  </div>\n                </media-slider-preview>\n              </media-time-slider>\n              <media-time toggle type=\"remaining\" class=\"media-time\"></media-time>\n            </div>\n\n            <div class=\"media-button-group\">\n              <media-captions-button commandfor=\"captions-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--captions\">\n                ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n                ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n              </media-captions-button>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"media-button media-button--subtle media-button--icon media-button--settings\">\n                ${renderIcon('gear', { class: 'media-icon media-icon--settings' })}\n                ${renderText(settingsText, { id: 'settings-label', class: 'media-sr-only' })}\n              </button>\n              <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"media-surface media-popover media-menu media-menu--settings\">\n                <div class=\"media-menu__group\">\n                    <media-menu-item commandfor=\"settings-quality-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('switches', { class: 'media-icon' })}\n                      ${renderText(qualityText)}\n                      <span class=\"media-menu__hint\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-audio-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speech', { class: 'media-icon' })}\n                      ${renderText(audioText)}\n                      <span class=\"media-menu__hint\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-speed-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('speed', { class: 'media-icon' })}\n                      ${renderText(speedText)}\n                      <span class=\"media-menu__hint\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-captions-menu\" class=\"media-menu__item media-menu__item--submenu\">\n                      ${renderIcon('captions-off', { class: 'media-icon' })}\n                      ${renderText(captionsText)}\n                      <span class=\"media-menu__hint\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"media-menu__hint-label\"></bdi>\n                        ${renderIcon('chevron', { class: 'media-icon media-menu__chevron' })}\n                      </span>\n                    </media-menu-item>\n                </div>\n\n                <media-menu id=\"settings-quality-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(qualityText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-quality-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <span>\n                          <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                          <sup data-part=\"tier\" class=\"media-menu__tier\"></sup>\n                        </span>\n                        <span data-part=\"badge\" class=\"media-badge\"></span>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-quality-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-audio-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(audioText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-audio-track-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-audio-track-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-speed-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(speedText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-playback-rate-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-playback-rate-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-captions-menu\" class=\"media-menu__panel\">\n                  <media-menu-item class=\"media-menu__back\">\n                    ${renderIcon('chevron', { class: 'media-icon media-menu__chevron media-icon--flipped' })}\n                    ${renderText(captionsText)}\n                  </media-menu-item>\n                  <div class=\"media-menu__separator\"></div>\n                  <media-captions-radio-group class=\"media-menu__group\">\n                    <template>\n                      <media-menu-radio-item class=\"media-menu__item\">\n                        <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                        <media-menu-item-indicator force-mount class=\"media-menu__indicator\">\n                          ${renderIcon('check', { class: 'media-icon' })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-captions-radio-group>\n                </media-menu>\n              </media-menu>\n              <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"media-surface media-tooltip\">\n                ${renderText(settingsText)}\n              </media-tooltip>\n            </div>\n          </div>\n\n          <div class=\"media-surface media-controls media-controls--secondary\">\n            <div class=\"media-button-group\">\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--cast\">\n                ${renderIcon('cast-enter', { class: 'media-icon media-icon--cast-enter' })}\n                ${renderIcon('cast-exit', { class: 'media-icon media-icon--cast-exit' })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--airplay\">\n                ${renderIcon('airplay-enter', { class: 'media-icon media-icon--airplay-enter' })}\n                ${renderIcon('airplay-exit', { class: 'media-icon media-icon--airplay-exit' })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--pip\">\n                ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n                ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"media-button media-button--subtle media-button--icon media-button--fullscreen\">\n                ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n                ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"media-surface media-tooltip\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"media-tooltip__kbd\"></media-tooltip-shortcut>\n              </media-tooltip>\n            </div>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"media-overlay\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"media-sr-only\"></media-status-announcer>\n      <div class=\"media-input-indicator-overlay\">\n        <media-volume-indicator hidden class=\"media-surface media-volume-indicator\">\n          <media-volume-indicator-fill class=\"media-volume-indicator__content\">\n            ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })}\n            ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })}\n            ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })}\n            <media-volume-indicator-value class=\"media-volume-indicator__value\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n        <media-status-indicator\n          hidden\n          actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\"\n          class=\"media-surface media-status-indicator media-status-indicator--state\"\n        >\n          <div class=\"media-status-indicator__content\">\n            ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })}\n            ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })}\n            ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })}\n            ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })}\n            ${renderIcon('pip-enter', { class: 'media-icon media-icon--pip-enter' })}\n            ${renderIcon('pip-exit', { class: 'media-icon media-icon--pip-exit' })}\n            <media-status-indicator-value class=\"media-status-indicator__value\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n        <media-seek-indicator hidden class=\"media-seek-indicator\">\n          ${renderIcon('chevron', { class: 'media-icon media-icon--seek' })}\n          <media-seek-indicator-value class=\"media-seek-indicator__value\"></media-seek-indicator-value>\n        </media-seek-indicator>\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"media-status-indicator media-status-indicator--playback\">\n          ${renderIcon('play', { class: 'media-icon media-icon--play' })}\n          ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinElement extends SkinElement {\n  static readonly tagName = 'video-skin';\n  static styles = createShadowStyle(styles);\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinElement.tagName]: VideoSkinElement;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/define/video/skin.tailwind.js

@@ -127,7 +127,7 @@ function getTemplateHTML() {
                       ${renderIcon("switches", { class: cn(icon, menu.icon) })}
                       ${renderText(qualityText)}
                       <span class="${menu.hint}">
-                        <span data-part="hint" class="${menu.hintLabel}"></span>
+                        <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi>
                         ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })}
                       </span>
                     </media-menu-item>
@@ -135,7 +135,7 @@ function getTemplateHTML() {
                       ${renderIcon("speech", { class: icon })}
                       ${renderText(audioText)}
                       <span class="${menu.hint}">
-                        <span data-part="hint" class="${menu.hintLabel}"></span>
+                        <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi>
                         ${renderIcon("chevron", { class: cn(icon, menu.chevron) })}
                       </span>
                     </media-menu-item>
@@ -143,7 +143,7 @@ function getTemplateHTML() {
                       ${renderIcon("speed", { class: cn(icon, menu.icon) })}
                       ${renderText(speedText)}
                       <span class="${menu.hint}">
-                        <span data-part="hint" class="${menu.hintLabel}"></span>
+                        <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi>
                         ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })}
                       </span>
                     </media-menu-item>
@@ -151,7 +151,7 @@ function getTemplateHTML() {
                       ${renderIcon("captions-off", { class: cn(icon, menu.icon) })}
                       ${renderText(captionsText)}
                       <span class="${menu.hint}">
-                        <span data-part="hint" class="${menu.hintLabel}"></span>
+                        <bdi data-part="hint" dir="auto" class="${menu.hintLabel}"></bdi>
                         ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron) })}
                       </span>
                     </media-menu-item>
@@ -159,7 +159,7 @@ function getTemplateHTML() {
 
                 <media-menu id="settings-quality-menu" class="${menu.submenuPanel}">
                   <media-menu-item class="${menu.back}">
-                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
+                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}
                     ${renderText(qualityText)}
                   </media-menu-item>
                   <div class="${menu.separator}"></div>
@@ -167,7 +167,7 @@ function getTemplateHTML() {
                     <template>
                       <media-menu-radio-item class="${menu.item}">
                         <span>
-                          <span data-part="label"></span>
+                          <bdi data-part="label" dir="auto"></bdi>
                           <sup data-part="tier" class="${menu.tier}"></sup>
                         </span>
                         <span data-part="badge" class="${badge}"></span>
@@ -181,14 +181,14 @@ function getTemplateHTML() {
 
                 <media-menu id="settings-audio-menu" class="${menu.submenuPanel}">
                   <media-menu-item class="${menu.back}">
-                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
+                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}
                     ${renderText(audioText)}
                   </media-menu-item>
                   <div class="${menu.separator}"></div>
                   <media-audio-track-radio-group class="${menu.group}">
                     <template>
                       <media-menu-radio-item class="${menu.item}">
-                        <span data-part="label"></span>
+                        <bdi data-part="label" dir="auto"></bdi>
                         <media-menu-item-indicator force-mount class="${menu.indicator}">
                           ${renderIcon("check", { class: icon })}
                         </media-menu-item-indicator>
@@ -199,14 +199,14 @@ function getTemplateHTML() {
 
                 <media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
                   <media-menu-item class="${menu.back}">
-                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
+                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}
                     ${renderText(speedText)}
                   </media-menu-item>
                   <div class="${menu.separator}"></div>
                   <media-playback-rate-radio-group class="${menu.group}">
                     <template>
                       <media-menu-radio-item class="${menu.item}">
-                        <span data-part="label"></span>
+                        <bdi data-part="label" dir="auto"></bdi>
                         <media-menu-item-indicator force-mount class="${menu.indicator}">
                           ${renderIcon("check", { class: cn(icon, menu.icon) })}
                         </media-menu-item-indicator>
@@ -217,14 +217,14 @@ function getTemplateHTML() {
 
                 <media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
                   <media-menu-item class="${menu.back}">
-                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}
+                    ${renderIcon("chevron", { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}
                     ${renderText(captionsText)}
                   </media-menu-item>
                   <div class="${menu.separator}"></div>
                   <media-captions-radio-group class="${menu.group}">
                     <template>
                       <media-menu-radio-item class="${menu.item}">
-                        <span data-part="label"></span>
+                        <bdi data-part="label" dir="auto"></bdi>
                         <media-menu-item-indicator force-mount class="${menu.indicator}">
                           ${renderIcon("check", { class: cn(icon, menu.icon) })}
                         </media-menu-item-indicator>

package/dist/dev/define/video/skin.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  badge,\n  bufferingIndicator,\n  button,\n  buttonGroupEnd,\n  buttonGroupStart,\n  container,\n  controls,\n  error,\n  icon,\n  iconFlipped,\n  iconState,\n  inputIndicatorOverlay,\n  menu,\n  overlay,\n  popup,\n  poster,\n  primaryControls,\n  secondaryControls,\n  seekIndicator,\n  slider,\n  statusIndicator,\n  thumbnail,\n  time,\n  volumeIndicator,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${container(true)}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster class=\"${poster(true)}\">\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        ${renderIcon('spinner', { class: icon })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"${error.root}\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n          </div>\n          <div class=\"${error.actions}\">\n            <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${primaryControls}\">\n            <div class=\"${buttonGroupStart}\">\n                <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n                  ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n                  ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n                  ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n                </media-play-button>\n                <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                  <media-tooltip-label></media-tooltip-label>\n                  <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n                </media-tooltip>\n\n              <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n                ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n                ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n                ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n              </media-mute-button>\n\n              <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n                <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"${slider.track}\">\n                    <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n            </div>\n\n            <div class=\"${time.group}\">\n              <media-time type=\"current\" class=\"${time.current}\"></media-time>\n              <media-time-slider class=\"${slider.root}\">\n                <media-time-slider-chapters class=\"${slider.chapters}\">\n                  <template>\n                    <div class=\"${slider.chapter.base}\">\n                      <media-slider-track class=\"${slider.chapter.track}\">\n                        <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n                        <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                      </media-slider-track>\n                    </div>\n                  </template>\n                </media-time-slider-chapters>\n                <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n                <media-slider-preview overflow=\"visible\" class=\"${slider.preview}\">\n                  <div class=\"${cn(thumbnail.root, slider.thumbnail)}\">\n                    <media-slider-thumbnail class=\"${thumbnail.image}\"></media-slider-thumbnail>\n                    ${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}\n                  </div>\n                  <div class=\"${slider.value}\">\n                    <media-time-slider-chapter-title class=\"${slider.chapterTitle}\"></media-time-slider-chapter-title>\n                    <media-slider-value type=\"pointer\"></media-slider-value>\n                  </div>\n                </media-slider-preview>\n              </media-time-slider>\n              <media-time toggle type=\"remaining\" class=\"${time.duration}\"></media-time>\n            </div>\n\n            <div class=\"${cn(buttonGroupEnd, menu.settingsGroup)}\">\n              <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, button.captions, iconState.captions.button)}\">\n                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n              </media-captions-button>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}\">\n                ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}\n                ${renderText(settingsText, { id: 'settings-label', class: 'sr-only' })}\n              </button>\n              <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"${menu.settings}\">\n                <div class=\"${menu.group}\">\n                    <media-menu-item commandfor=\"settings-quality-menu\" class=\"${menu.item}\">\n                      ${renderIcon('switches', { class: cn(icon, menu.icon) })}\n                      ${renderText(qualityText)}\n                      <span class=\"${menu.hint}\">\n                        <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n                        ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-audio-menu\" class=\"${menu.item}\">\n                      ${renderIcon('speech', { class: icon })}\n                      ${renderText(audioText)}\n                      <span class=\"${menu.hint}\">\n                        <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n                        ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-speed-menu\" class=\"${menu.item}\">\n                      ${renderIcon('speed', { class: cn(icon, menu.icon) })}\n                      ${renderText(speedText)}\n                      <span class=\"${menu.hint}\">\n                        <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n                        ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-captions-menu\" class=\"${menu.item}\">\n                      ${renderIcon('captions-off', { class: cn(icon, menu.icon) })}\n                      ${renderText(captionsText)}\n                      <span class=\"${menu.hint}\">\n                        <span data-part=\"hint\" class=\"${menu.hintLabel}\"></span>\n                        ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                </div>\n\n                <media-menu id=\"settings-quality-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n                    ${renderText(qualityText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-quality-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <span>\n                          <span data-part=\"label\"></span>\n                          <sup data-part=\"tier\" class=\"${menu.tier}\"></sup>\n                        </span>\n                        <span data-part=\"badge\" class=\"${badge}\"></span>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-quality-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-audio-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n                    ${renderText(audioText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-audio-track-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <span data-part=\"label\"></span>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: icon })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-audio-track-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-speed-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n                    ${renderText(speedText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-playback-rate-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <span data-part=\"label\"></span>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-playback-rate-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-captions-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped) })}\n                    ${renderText(captionsText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-captions-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <span data-part=\"label\"></span>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-captions-radio-group>\n                </media-menu>\n              </media-menu>\n              <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                ${renderText(settingsText)}\n              </media-tooltip>\n            </div>\n          </div>\n\n          <div class=\"${secondaryControls}\">\n            <div class=\"${buttonGroupEnd}\">\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n            </div>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"sr-only\"></media-status-announcer>\n      <div class=\"${inputIndicatorOverlay}\">\n        <media-volume-indicator\n          hidden\n          class=\"${volumeIndicator.root}\"\n        >\n          <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n            ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n            ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n            ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n            <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n\n        <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"${statusIndicator.root}\">\n          <div class=\"${statusIndicator.content}\">\n            ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n            ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n            ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n            ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n            ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n            <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n\n        <media-seek-indicator hidden class=\"${seekIndicator.root}\">\n          ${renderIcon('chevron', { class: seekIndicator.icon })}\n          <media-seek-indicator-value class=\"${seekIndicator.value}\"></media-seek-indicator-value>\n        </media-seek-indicator>\n\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n          ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n          ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinElement {\n  static readonly tagName = 'video-skin-tailwind';\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.tailwind.js","names":[],"sources":["../../../../src/define/video/skin.tailwind.ts"],"sourcesContent":["import { audioText, captionsText, qualityText, settingsText, speedText } from '@videojs/core/i18n/text/menu';\nimport { renderIcon } from '@videojs/icons/render';\nimport {\n  badge,\n  bufferingIndicator,\n  button,\n  buttonGroupEnd,\n  buttonGroupStart,\n  container,\n  controls,\n  error,\n  icon,\n  iconFlipped,\n  iconState,\n  inputIndicatorOverlay,\n  menu,\n  overlay,\n  popup,\n  poster,\n  primaryControls,\n  secondaryControls,\n  seekIndicator,\n  slider,\n  statusIndicator,\n  thumbnail,\n  time,\n  volumeIndicator,\n} from '@videojs/skins/default/tailwind/video.tailwind';\nimport { createTemplate } from '@videojs/utils/dom';\nimport { cn } from '@videojs/utils/style';\nimport { renderText } from '../../i18n/render-text';\nimport { safeDefine } from '../safe-define';\nimport { SkinElement } from '../skin-element';\n\n// Register the player, container, and all UI custom elements.\nimport './ui';\n\nfunction getTemplateHTML() {\n  return /*html*/ `\n    <media-container class=\"${container(true)}\">\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n\n      <media-poster class=\"${poster(true)}\">\n        <slot name=\"poster\">\n          <img alt=\"\" decoding=\"async\">\n        </slot>\n      </media-poster>\n\n      <media-buffering-indicator class=\"${bufferingIndicator.root}\">\n        ${renderIcon('spinner', { class: icon })}\n      </media-buffering-indicator>\n\n      <media-error-dialog class=\"${error.root}\">\n        <div class=\"${error.dialog}\">\n          <div class=\"${error.content}\">\n            <media-alert-dialog-title class=\"${error.title}\"></media-alert-dialog-title>\n            <media-alert-dialog-description class=\"${error.description}\"></media-alert-dialog-description>\n          </div>\n          <div class=\"${error.actions}\">\n            <media-alert-dialog-close class=\"${cn(button.base, button.primary)}\"></media-alert-dialog-close>\n          </div>\n        </div>\n      </media-error-dialog>\n\n      <media-controls data-controls=\"\" class=\"${controls}\">\n        <media-tooltip-group>\n          <div class=\"${primaryControls}\">\n            <div class=\"${buttonGroupStart}\">\n                <media-play-button commandfor=\"play-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.play.button)}\">\n                  ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })}\n                  ${renderIcon('play', { class: cn(icon, iconState.play.play) })}\n                  ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}\n                </media-play-button>\n                <media-tooltip id=\"play-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                  <media-tooltip-label></media-tooltip-label>\n                  <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n                </media-tooltip>\n\n              <media-mute-button commandfor=\"video-volume-popover\" class=\"${cn(button.base, button.subtle, button.icon, iconState.mute.button)}\">\n                ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })}\n                ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })}\n                ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })}\n              </media-mute-button>\n\n              <media-popover id=\"video-volume-popover\" open-on-hover delay=\"200\" close-delay=\"100\" side=\"top\" class=\"${cn(popup.popover, popup.volume)}\">\n                <media-volume-slider class=\"${slider.root}\" orientation=\"vertical\" thumb-alignment=\"edge\">\n                  <media-slider-track class=\"${slider.track}\">\n                    <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                  </media-slider-track>\n                  <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.persistent)}\"></media-slider-thumb>\n                </media-volume-slider>\n              </media-popover>\n            </div>\n\n            <div class=\"${time.group}\">\n              <media-time type=\"current\" class=\"${time.current}\"></media-time>\n              <media-time-slider class=\"${slider.root}\">\n                <media-time-slider-chapters class=\"${slider.chapters}\">\n                  <template>\n                    <div class=\"${slider.chapter.base}\">\n                      <media-slider-track class=\"${slider.chapter.track}\">\n                        <media-slider-buffer class=\"${cn(slider.fill.base, slider.fill.buffer)}\"></media-slider-buffer>\n                        <media-slider-fill class=\"${cn(slider.fill.base, slider.fill.fill)}\"></media-slider-fill>\n                      </media-slider-track>\n                    </div>\n                  </template>\n                </media-time-slider-chapters>\n                <media-slider-thumb class=\"${cn(slider.thumb.base, slider.thumb.interactive)}\"></media-slider-thumb>\n\n                <media-slider-preview overflow=\"visible\" class=\"${slider.preview}\">\n                  <div class=\"${cn(thumbnail.root, slider.thumbnail)}\">\n                    <media-slider-thumbnail class=\"${thumbnail.image}\"></media-slider-thumbnail>\n                    ${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}\n                  </div>\n                  <div class=\"${slider.value}\">\n                    <media-time-slider-chapter-title class=\"${slider.chapterTitle}\"></media-time-slider-chapter-title>\n                    <media-slider-value type=\"pointer\"></media-slider-value>\n                  </div>\n                </media-slider-preview>\n              </media-time-slider>\n              <media-time toggle type=\"remaining\" class=\"${time.duration}\"></media-time>\n            </div>\n\n            <div class=\"${cn(buttonGroupEnd, menu.settingsGroup)}\">\n              <media-captions-button commandfor=\"captions-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, button.captions, iconState.captions.button)}\">\n                ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })}\n                ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })}\n              </media-captions-button>\n              <media-tooltip id=\"captions-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n\n              <button id=\"settings-trigger\" commandfor=\"settings-menu\" aria-labelledby=\"settings-label\" class=\"${cn(button.base, button.subtle, button.icon, menu.settingsTrigger)}\">\n                ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}\n                ${renderText(settingsText, { id: 'settings-label', class: 'sr-only' })}\n              </button>\n              <media-menu id=\"settings-menu\" side=\"top\" align=\"center\" class=\"${menu.settings}\">\n                <div class=\"${menu.group}\">\n                    <media-menu-item commandfor=\"settings-quality-menu\" class=\"${menu.item}\">\n                      ${renderIcon('switches', { class: cn(icon, menu.icon) })}\n                      ${renderText(qualityText)}\n                      <span class=\"${menu.hint}\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n                        ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-audio-menu\" class=\"${menu.item}\">\n                      ${renderIcon('speech', { class: icon })}\n                      ${renderText(audioText)}\n                      <span class=\"${menu.hint}\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n                        ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-speed-menu\" class=\"${menu.item}\">\n                      ${renderIcon('speed', { class: cn(icon, menu.icon) })}\n                      ${renderText(speedText)}\n                      <span class=\"${menu.hint}\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n                        ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                    <media-menu-item commandfor=\"settings-captions-menu\" class=\"${menu.item}\">\n                      ${renderIcon('captions-off', { class: cn(icon, menu.icon) })}\n                      ${renderText(captionsText)}\n                      <span class=\"${menu.hint}\">\n                        <bdi data-part=\"hint\" dir=\"auto\" class=\"${menu.hintLabel}\"></bdi>\n                        ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron) })}\n                      </span>\n                    </media-menu-item>\n                </div>\n\n                <media-menu id=\"settings-quality-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n                    ${renderText(qualityText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-quality-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <span>\n                          <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                          <sup data-part=\"tier\" class=\"${menu.tier}\"></sup>\n                        </span>\n                        <span data-part=\"badge\" class=\"${badge}\"></span>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-quality-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-audio-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n                    ${renderText(audioText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-audio-track-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: icon })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-audio-track-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-speed-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n                    ${renderText(speedText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-playback-rate-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-playback-rate-radio-group>\n                </media-menu>\n\n                <media-menu id=\"settings-captions-menu\" class=\"${menu.submenuPanel}\">\n                  <media-menu-item class=\"${menu.back}\">\n                    ${renderIcon('chevron', { class: cn(icon, menu.icon, menu.chevron, iconFlipped, menu.backChevron) })}\n                    ${renderText(captionsText)}\n                  </media-menu-item>\n                  <div class=\"${menu.separator}\"></div>\n                  <media-captions-radio-group class=\"${menu.group}\">\n                    <template>\n                      <media-menu-radio-item class=\"${menu.item}\">\n                        <bdi data-part=\"label\" dir=\"auto\"></bdi>\n                        <media-menu-item-indicator force-mount class=\"${menu.indicator}\">\n                          ${renderIcon('check', { class: cn(icon, menu.icon) })}\n                        </media-menu-item-indicator>\n                      </media-menu-radio-item>\n                    </template>\n                  </media-captions-radio-group>\n                </media-menu>\n              </media-menu>\n              <media-tooltip id=\"settings-tooltip\" trigger=\"settings-trigger\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                ${renderText(settingsText)}\n              </media-tooltip>\n            </div>\n          </div>\n\n          <div class=\"${secondaryControls}\">\n            <div class=\"${buttonGroupEnd}\">\n              <media-cast-button commandfor=\"cast-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.cast.button)}\">\n                ${renderIcon('cast-enter', { class: cn(icon, iconState.cast.enter) })}\n                ${renderIcon('cast-exit', { class: cn(icon, iconState.cast.exit) })}\n              </media-cast-button>\n              <media-tooltip id=\"cast-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-airplay-button commandfor=\"airplay-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.airplay.button)}\">\n                ${renderIcon('airplay-enter', { class: cn(icon, iconState.airplay.enter) })}\n                ${renderIcon('airplay-exit', { class: cn(icon, iconState.airplay.exit) })}\n              </media-airplay-button>\n              <media-tooltip id=\"airplay-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-pip-button commandfor=\"pip-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.pip.button)}\">\n                ${renderIcon('pip-enter', { class: cn(icon, iconState.pip.off) })}\n                ${renderIcon('pip-exit', { class: cn(icon, iconState.pip.on) })}\n              </media-pip-button>\n              <media-tooltip id=\"pip-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n              <media-fullscreen-button commandfor=\"fullscreen-tooltip\" class=\"${cn(button.base, button.subtle, button.icon, iconState.fullscreen.button)}\">\n                ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })}\n                ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })}\n              </media-fullscreen-button>\n              <media-tooltip id=\"fullscreen-tooltip\" side=\"top\" class=\"${cn(popup.tooltip)}\">\n                <media-tooltip-label></media-tooltip-label>\n                <media-tooltip-shortcut class=\"${popup.tooltipShortcut}\"></media-tooltip-shortcut>\n              </media-tooltip>\n            </div>\n          </div>\n        </media-tooltip-group>\n      </media-controls>\n\n      <div class=\"${overlay}\"></div>\n\n      <!-- Hotkeys -->\n      <media-hotkey keys=\"Space\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"k\" action=\"togglePaused\"></media-hotkey>\n      <media-hotkey keys=\"m\" action=\"toggleMuted\"></media-hotkey>\n      <media-hotkey keys=\"f\" action=\"toggleFullscreen\"></media-hotkey>\n      <media-hotkey keys=\"c\" action=\"toggleSubtitles\"></media-hotkey>\n      <media-hotkey keys=\"i\" action=\"togglePictureInPicture\"></media-hotkey>\n      <media-hotkey keys=\"ArrowRight\" action=\"seekStep\" value=\"5\"></media-hotkey>\n      <media-hotkey keys=\"ArrowLeft\" action=\"seekStep\" value=\"-5\"></media-hotkey>\n      <media-hotkey keys=\"l\" action=\"seekStep\" value=\"10\"></media-hotkey>\n      <media-hotkey keys=\"j\" action=\"seekStep\" value=\"-10\"></media-hotkey>\n      <media-hotkey keys=\"ArrowUp\" action=\"volumeStep\" value=\"0.05\"></media-hotkey>\n      <media-hotkey keys=\"ArrowDown\" action=\"volumeStep\" value=\"-0.05\"></media-hotkey>\n      <media-hotkey keys=\"0-9\" action=\"seekToPercent\"></media-hotkey>\n      <media-hotkey keys=\"Home\" action=\"seekToPercent\" value=\"0\"></media-hotkey>\n      <media-hotkey keys=\"End\" action=\"seekToPercent\" value=\"100\"></media-hotkey>\n      <media-hotkey keys=\">\" action=\"speedUp\"></media-hotkey>\n      <media-hotkey keys=\"<\" action=\"speedDown\"></media-hotkey>\n\n      <!-- Gestures -->\n      <media-gesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\"></media-gesture>\n      <media-gesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"-10\" region=\"left\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\"></media-gesture>\n      <media-gesture type=\"doubletap\" action=\"seekStep\" value=\"10\" region=\"right\"></media-gesture>\n\n      <!-- Input Indicators -->\n      <media-status-announcer class=\"sr-only\"></media-status-announcer>\n      <div class=\"${inputIndicatorOverlay}\">\n        <media-volume-indicator\n          hidden\n          class=\"${volumeIndicator.root}\"\n        >\n          <media-volume-indicator-fill class=\"${volumeIndicator.content}\">\n            ${renderIcon('volume-high', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.high) })}\n            ${renderIcon('volume-low', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.low) })}\n            ${renderIcon('volume-off', { class: cn(volumeIndicator.icon.base, volumeIndicator.icon.off) })}\n            <media-volume-indicator-value class=\"${volumeIndicator.value}\"></media-volume-indicator-value>\n          </media-volume-indicator-fill>\n        </media-volume-indicator>\n\n        <media-status-indicator hidden actions=\"toggleSubtitles toggleFullscreen togglePictureInPicture\" class=\"${statusIndicator.root}\">\n          <div class=\"${statusIndicator.content}\">\n            ${renderIcon('captions-on', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOn) })}\n            ${renderIcon('captions-off', { class: cn(statusIndicator.icon.base, statusIndicator.icon.captionsOff) })}\n            ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenEnter) })}\n            ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.fullscreenExit) })}\n            ${renderIcon('pip-enter', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipEnter) })}\n            ${renderIcon('pip-exit', { class: cn(statusIndicator.icon.base, statusIndicator.icon.pipExit) })}\n            <media-status-indicator-value class=\"${statusIndicator.value}\"></media-status-indicator-value>\n          </div>\n        </media-status-indicator>\n\n        <media-seek-indicator hidden class=\"${seekIndicator.root}\">\n          ${renderIcon('chevron', { class: seekIndicator.icon })}\n          <media-seek-indicator-value class=\"${seekIndicator.value}\"></media-seek-indicator-value>\n        </media-seek-indicator>\n\n        <media-status-indicator hidden actions=\"togglePaused\" class=\"${statusIndicator.playback.root}\">\n          ${renderIcon('play', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.play) })}\n          ${renderIcon('pause', { class: cn(statusIndicator.playback.icon.base, statusIndicator.playback.icon.pause) })}\n        </media-status-indicator>\n      </div>\n    </media-container>\n  `;\n}\n\nexport class VideoSkinTailwindElement extends SkinElement {\n  static readonly tagName = 'video-skin-tailwind';\n  static template = createTemplate(getTemplateHTML());\n}\n\nsafeDefine(VideoSkinTailwindElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VideoSkinTailwindElement.tagName]: VideoSkinTailwindElement;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/i18n/provider-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.d.ts","names":[],"sources":["../../../src/i18n/provider-mixin.ts"],"mappings":";;;;;KA6BY,qBAAqB,aAAa,0BAC5C,MAAM,SACH,YAAY,mBAAmB"}
+{"version":3,"file":"provider-mixin.d.ts","names":[],"sources":["../../../src/i18n/provider-mixin.ts"],"mappings":";;;;;KA8BY,qBAAqB,aAAa,0BAC5C,MAAM,SACH,YAAY,mBAAmB"}

package/dist/dev/i18n/provider-mixin.js

@@ -3,6 +3,7 @@ import { resolveProviderLocale } from "./locale.js";
 import { ContextProvider } from "@videojs/element/context";
 import { DEFAULT_LOCALE, createTranslator, findLocaleKeys, getBrowserTranslations, getI18nTranslations, loadLocale, onI18nRegistryChange, registerI18n, shouldAttemptBrowserTranslation } from "@videojs/core/i18n";
 import { mergeLocaleOverlays, subscribeAmbientLang } from "@videojs/utils/dom";
+import { getTextDirection } from "@videojs/utils/i18n";
 //#region src/i18n/provider-mixin.ts
 function createI18nProviderMixin({ context, loader = loadLocale }) {
 	return (Base) => {
@@ -10,6 +11,7 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
 			constructor(..._args) {
 				super(..._args);
 				this.lang = "";
+				this.dir = "";
 				this.#i18nProvider = new ContextProvider(this, {
 					context,
 					initialValue: {
@@ -32,6 +34,10 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
 					lang: {
 						type: String,
 						reflect: true
+					},
+					dir: {
+						type: String,
+						reflect: true
 					}
 				};
 			}
@@ -49,6 +55,7 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
 			#publishedLocale;
 			#publishedRegistryEpoch;
 			#publishedLazyLayer;
+			#derivedDirection;
 			get i18nValue() {
 				return this.#i18nValue;
 			}
@@ -83,6 +90,7 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
 					const localeDriftedBeforeFirstPaint = !hadLocale && this.#lazyResetStartedForLocale !== void 0 && locale !== this.#lazyResetStartedForLocale;
 					if (hadLocale || localeDriftedBeforeFirstPaint) this.#resetLazyAndLoad();
 				}
+				this.#syncDirection(locale);
 				this.#publish();
 			}
 			#resetLazyAndLoad() {
@@ -107,6 +115,22 @@ function createI18nProviderMixin({ context, loader = loadLocale }) {
 			#resolvedLocale() {
 				return resolveProviderLocale(this);
 			}
+			#syncDirection(locale) {
+				const current = this.dir.trim().toLowerCase();
+				const isDerived = this.#derivedDirection !== void 0 && current === this.#derivedDirection;
+				if (!this.lang.trim()) {
+					if (isDerived) this.dir = "";
+					this.#derivedDirection = void 0;
+					return;
+				}
+				if (current && !isDerived) {
+					this.#derivedDirection = void 0;
+					return;
+				}
+				const direction = getTextDirection(locale);
+				this.#derivedDirection = direction;
+				if (this.dir !== direction) this.dir = direction;
+			}
 			#publish() {
 				const locale = this.#resolvedLocale();
 				if (this.#publishedLocale === locale && this.#publishedRegistryEpoch === this.#registryEpoch && this.#publishedLazyLayer === this.#lazyLayer) return;

package/dist/dev/i18n/provider-mixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.js","names":["defaultLoader","#i18nProvider","#i18nValue","#registryUnsubscribe","#registryEpoch","#ambientUnsubscribe","#resetLazyAndLoad","#publish","#lazySeq","#lazyLayer","#resolvedLocaleForLazy","#lazyResetStartedForLocale","#resolvedLocale","#publishedLocale","#publishedRegistryEpoch","#publishedLazyLayer"],"sources":["../../../src/i18n/provider-mixin.ts"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  findLocaleKeys,\n  getBrowserTranslations,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  registerI18n,\n  shouldAttemptBrowserTranslation,\n} from '@videojs/core/i18n';\nimport type { PropertyValues, ReactiveElement } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { mergeLocaleOverlays, subscribeAmbientLang } from '@videojs/utils/dom';\nimport type { Constructor } from '@videojs/utils/types';\n\nimport type { I18nContext, I18nContextValue } from './context';\nimport { getFallbackTranslator } from './controller';\nimport { resolveProviderLocale } from './locale';\nimport type { LocaleLoader, ReactiveElementMixinBase } from './types';\n\nexport interface I18nProviderConfig {\n  context: I18nContext;\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: LocaleLoader | undefined;\n}\n\nexport type I18nProviderMixin = <Base extends ReactiveElementMixinBase>(\n  Base: Base\n) => Constructor<ReactiveElement> & Base;\n\nexport function createI18nProviderMixin({ context, loader = defaultLoader }: I18nProviderConfig): I18nProviderMixin {\n  return <Base extends ReactiveElementMixinBase>(Base: Base) => {\n    class I18nProviderElement extends Base {\n      static properties = {\n        ...Base.properties,\n        lang: { type: String, reflect: true },\n      };\n\n      lang = '';\n\n      readonly #i18nProvider = new ContextProvider(this, {\n        context,\n        initialValue: {\n          translator: getFallbackTranslator(),\n          locale: DEFAULT_LOCALE,\n        },\n      });\n\n      #registryUnsubscribe: (() => void) | undefined;\n      #ambientUnsubscribe: (() => void) | undefined;\n      #registryEpoch = 0;\n      #lazyLayer: Partial<FlatTranslations> = {};\n      #lazySeq = 0;\n      /** Tracks locale used for `#lazyLayer`; ambient `lang` can change without the `lang` property. */\n      #resolvedLocaleForLazy: Locale | undefined;\n      /** Locale snapshot when the current `#lazySeq` async load was started (see `willUpdate` drift guard). */\n      #lazyResetStartedForLocale: Locale | undefined;\n      #i18nValue: I18nContextValue = {\n        translator: getFallbackTranslator(),\n        locale: DEFAULT_LOCALE,\n      };\n      #publishedLocale: Locale | undefined;\n      #publishedRegistryEpoch = -1;\n      #publishedLazyLayer: Partial<FlatTranslations> | undefined;\n\n      protected get i18nValue(): I18nContextValue {\n        return this.#i18nValue;\n      }\n\n      override connectedCallback(): void {\n        super.connectedCallback();\n        this.#registryUnsubscribe = onI18nRegistryChange(() => {\n          this.#registryEpoch += 1;\n          this.requestUpdate();\n        });\n        this.#ambientUnsubscribe = subscribeAmbientLang(() => this.requestUpdate());\n        this.#resetLazyAndLoad();\n        this.#publish();\n        this.requestUpdate();\n      }\n\n      override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.#registryUnsubscribe?.();\n        this.#registryUnsubscribe = undefined;\n        this.#ambientUnsubscribe?.();\n        this.#ambientUnsubscribe = undefined;\n        this.#lazySeq += 1;\n        this.#lazyLayer = {};\n        this.#resolvedLocaleForLazy = undefined;\n        this.#lazyResetStartedForLocale = undefined;\n      }\n\n      protected override willUpdate(changed: PropertyValues): void {\n        super.willUpdate(changed);\n        const locale = resolveProviderLocale(this);\n        if (this.#resolvedLocaleForLazy !== locale) {\n          const hadLocale = this.#resolvedLocaleForLazy !== undefined;\n          this.#resolvedLocaleForLazy = locale;\n          const localeDriftedBeforeFirstPaint =\n            !hadLocale && this.#lazyResetStartedForLocale !== undefined && locale !== this.#lazyResetStartedForLocale;\n          if (hadLocale || localeDriftedBeforeFirstPaint) {\n            this.#resetLazyAndLoad();\n          }\n        }\n        this.#publish();\n      }\n\n      #resetLazyAndLoad(): void {\n        const localeSnapshot = resolveProviderLocale(this);\n        this.#lazyResetStartedForLocale = localeSnapshot;\n        this.#lazySeq += 1;\n        const seq = this.#lazySeq;\n        this.#lazyLayer = {};\n        void (async () => {\n          const { merged, loadedTags } = await mergeLocaleOverlays(localeSnapshot, loader, findLocaleKeys);\n          if (seq !== this.#lazySeq) return;\n          if (shouldAttemptBrowserTranslation(localeSnapshot, loadedTags, merged)) {\n            const browser = await getBrowserTranslations(localeSnapshot);\n            if (seq !== this.#lazySeq) return;\n            if (Object.keys(browser).length) registerI18n(localeSnapshot, browser);\n          }\n          if (seq !== this.#lazySeq) return;\n          this.#lazyLayer = merged;\n          this.requestUpdate();\n        })();\n      }\n\n      #resolvedLocale(): Locale {\n        return resolveProviderLocale(this);\n      }\n\n      #publish(): void {\n        const locale = this.#resolvedLocale();\n        if (\n          this.#publishedLocale === locale &&\n          this.#publishedRegistryEpoch === this.#registryEpoch &&\n          this.#publishedLazyLayer === this.#lazyLayer\n        ) {\n          return;\n        }\n        const registryLayer = getI18nTranslations(locale);\n        const translations: FlatTranslations = {\n          ...registryLayer,\n          ...this.#lazyLayer,\n        };\n        const translator = createTranslator(translations, locale);\n        this.#i18nValue = { translator, locale };\n        this.#publishedLocale = locale;\n        this.#publishedRegistryEpoch = this.#registryEpoch;\n        this.#publishedLazyLayer = this.#lazyLayer;\n        this.#i18nProvider.setValue(this.#i18nValue);\n      }\n    }\n    return I18nProviderElement;\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"provider-mixin.js","names":["defaultLoader","#i18nProvider","#i18nValue","#registryUnsubscribe","#registryEpoch","#ambientUnsubscribe","#resetLazyAndLoad","#publish","#lazySeq","#lazyLayer","#resolvedLocaleForLazy","#lazyResetStartedForLocale","#syncDirection","#derivedDirection","#resolvedLocale","#publishedLocale","#publishedRegistryEpoch","#publishedLazyLayer"],"sources":["../../../src/i18n/provider-mixin.ts"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  findLocaleKeys,\n  getBrowserTranslations,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  registerI18n,\n  shouldAttemptBrowserTranslation,\n} from '@videojs/core/i18n';\nimport type { PropertyValues, ReactiveElement } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { mergeLocaleOverlays, subscribeAmbientLang } from '@videojs/utils/dom';\nimport { getTextDirection, type TextDirection } from '@videojs/utils/i18n';\nimport type { Constructor } from '@videojs/utils/types';\n\nimport type { I18nContext, I18nContextValue } from './context';\nimport { getFallbackTranslator } from './controller';\nimport { resolveProviderLocale } from './locale';\nimport type { LocaleLoader, ReactiveElementMixinBase } from './types';\n\nexport interface I18nProviderConfig {\n  context: I18nContext;\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: LocaleLoader | undefined;\n}\n\nexport type I18nProviderMixin = <Base extends ReactiveElementMixinBase>(\n  Base: Base\n) => Constructor<ReactiveElement> & Base;\n\nexport function createI18nProviderMixin({ context, loader = defaultLoader }: I18nProviderConfig): I18nProviderMixin {\n  return <Base extends ReactiveElementMixinBase>(Base: Base) => {\n    class I18nProviderElement extends Base {\n      static properties = {\n        ...Base.properties,\n        lang: { type: String, reflect: true },\n        dir: { type: String, reflect: true },\n      };\n\n      lang = '';\n      dir = '';\n\n      readonly #i18nProvider = new ContextProvider(this, {\n        context,\n        initialValue: {\n          translator: getFallbackTranslator(),\n          locale: DEFAULT_LOCALE,\n        },\n      });\n\n      #registryUnsubscribe: (() => void) | undefined;\n      #ambientUnsubscribe: (() => void) | undefined;\n      #registryEpoch = 0;\n      #lazyLayer: Partial<FlatTranslations> = {};\n      #lazySeq = 0;\n      /** Tracks locale used for `#lazyLayer`; ambient `lang` can change without the `lang` property. */\n      #resolvedLocaleForLazy: Locale | undefined;\n      /** Locale snapshot when the current `#lazySeq` async load was started (see `willUpdate` drift guard). */\n      #lazyResetStartedForLocale: Locale | undefined;\n      #i18nValue: I18nContextValue = {\n        translator: getFallbackTranslator(),\n        locale: DEFAULT_LOCALE,\n      };\n      #publishedLocale: Locale | undefined;\n      #publishedRegistryEpoch = -1;\n      #publishedLazyLayer: Partial<FlatTranslations> | undefined;\n      #derivedDirection: TextDirection | undefined;\n\n      protected get i18nValue(): I18nContextValue {\n        return this.#i18nValue;\n      }\n\n      override connectedCallback(): void {\n        super.connectedCallback();\n        this.#registryUnsubscribe = onI18nRegistryChange(() => {\n          this.#registryEpoch += 1;\n          this.requestUpdate();\n        });\n        this.#ambientUnsubscribe = subscribeAmbientLang(() => this.requestUpdate());\n        this.#resetLazyAndLoad();\n        this.#publish();\n        this.requestUpdate();\n      }\n\n      override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.#registryUnsubscribe?.();\n        this.#registryUnsubscribe = undefined;\n        this.#ambientUnsubscribe?.();\n        this.#ambientUnsubscribe = undefined;\n        this.#lazySeq += 1;\n        this.#lazyLayer = {};\n        this.#resolvedLocaleForLazy = undefined;\n        this.#lazyResetStartedForLocale = undefined;\n      }\n\n      protected override willUpdate(changed: PropertyValues): void {\n        super.willUpdate(changed);\n        const locale = resolveProviderLocale(this);\n        if (this.#resolvedLocaleForLazy !== locale) {\n          const hadLocale = this.#resolvedLocaleForLazy !== undefined;\n          this.#resolvedLocaleForLazy = locale;\n          const localeDriftedBeforeFirstPaint =\n            !hadLocale && this.#lazyResetStartedForLocale !== undefined && locale !== this.#lazyResetStartedForLocale;\n          if (hadLocale || localeDriftedBeforeFirstPaint) {\n            this.#resetLazyAndLoad();\n          }\n        }\n        this.#syncDirection(locale);\n        this.#publish();\n      }\n\n      #resetLazyAndLoad(): void {\n        const localeSnapshot = resolveProviderLocale(this);\n        this.#lazyResetStartedForLocale = localeSnapshot;\n        this.#lazySeq += 1;\n        const seq = this.#lazySeq;\n        this.#lazyLayer = {};\n        void (async () => {\n          const { merged, loadedTags } = await mergeLocaleOverlays(localeSnapshot, loader, findLocaleKeys);\n          if (seq !== this.#lazySeq) return;\n          if (shouldAttemptBrowserTranslation(localeSnapshot, loadedTags, merged)) {\n            const browser = await getBrowserTranslations(localeSnapshot);\n            if (seq !== this.#lazySeq) return;\n            if (Object.keys(browser).length) registerI18n(localeSnapshot, browser);\n          }\n          if (seq !== this.#lazySeq) return;\n          this.#lazyLayer = merged;\n          this.requestUpdate();\n        })();\n      }\n\n      #resolvedLocale(): Locale {\n        return resolveProviderLocale(this);\n      }\n\n      #syncDirection(locale: Locale): void {\n        const current = this.dir.trim().toLowerCase();\n        const isDerived = this.#derivedDirection !== undefined && current === this.#derivedDirection;\n\n        if (!this.lang.trim()) {\n          if (isDerived) this.dir = '';\n          this.#derivedDirection = undefined;\n          return;\n        }\n\n        if (current && !isDerived) {\n          this.#derivedDirection = undefined;\n          return;\n        }\n\n        const direction = getTextDirection(locale);\n        this.#derivedDirection = direction;\n        if (this.dir !== direction) this.dir = direction;\n      }\n\n      #publish(): void {\n        const locale = this.#resolvedLocale();\n        if (\n          this.#publishedLocale === locale &&\n          this.#publishedRegistryEpoch === this.#registryEpoch &&\n          this.#publishedLazyLayer === this.#lazyLayer\n        ) {\n          return;\n        }\n        const registryLayer = getI18nTranslations(locale);\n        const translations: FlatTranslations = {\n          ...registryLayer,\n          ...this.#lazyLayer,\n        };\n        const translator = createTranslator(translations, locale);\n        this.#i18nValue = { translator, locale };\n        this.#publishedLocale = locale;\n        this.#publishedRegistryEpoch = this.#registryEpoch;\n        this.#publishedLazyLayer = this.#lazyLayer;\n        this.#i18nProvider.setValue(this.#i18nValue);\n      }\n    }\n    return I18nProviderElement;\n  };\n}\n"],"mappings":"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"}

package/dist/dev/packages/skins/dist/default/default/tailwind/components/button-group.js

@@ -1,5 +1,5 @@
 //#region ../skins/dist/default/default/tailwind/components/button-group.js
-const buttonGroup = "flex items-center gap-px";
+const buttonGroup = "flex items-center gap-px [&:dir(rtl)]:flex-row-reverse";
 //#endregion
 export { buttonGroup };
 

package/dist/dev/packages/skins/dist/default/default/tailwind/components/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../../../../../../../../../../skins/dist/default/default/tailwind/components/button-group.js"],"sourcesContent":["//#region src/default/tailwind/components/button-group.ts\nconst buttonGroup = \"flex items-center gap-px\";\n//#endregion\nexport { buttonGroup };\n\n//# sourceMappingURL=button-group.js.map"],"mappings":";AACA,MAAM,cAAc"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../../../../../../../../skins/dist/default/default/tailwind/components/button-group.js"],"sourcesContent":["//#region src/default/tailwind/components/button-group.ts\nconst buttonGroup = \"flex items-center gap-px [&:dir(rtl)]:flex-row-reverse\";\n//#endregion\nexport { buttonGroup };\n\n//# sourceMappingURL=button-group.js.map"],"mappings":";AACA,MAAM,cAAc"}

package/dist/dev/packages/skins/dist/default/default/tailwind/components/controls.js

@@ -1,6 +1,6 @@
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/default/tailwind/components/controls.js
-const controls = cn("peer/controls", "@container/media-controls", "[--media-popover-side-offset:calc(var(--spacing)*(var(--base-side-offset,2)+var(--controls-padding,1)))]", "[--media-tooltip-side-offset:var(--media-popover-side-offset)]", "[--media-popover-boundary-offset:calc(var(--spacing)*var(--base-boundary-offset,2))]", "[--media-tooltip-boundary-offset:var(--media-popover-boundary-offset)]", "[padding:calc(var(--spacing)*var(--controls-padding,1))] flex items-center", "rounded-full", "text-shadow-2xs text-shadow-(color:--shadow-current-color)");
+const controls = cn("peer/controls", "@container/media-controls", "[--media-popover-side-offset:calc(var(--spacing)*(var(--base-side-offset,2)+var(--controls-padding,1)))]", "[--media-tooltip-side-offset:var(--media-popover-side-offset)]", "[--media-popover-boundary-offset:calc(var(--spacing)*var(--base-boundary-offset,2))]", "[--media-tooltip-boundary-offset:var(--media-popover-boundary-offset)]", "[padding:calc(var(--spacing)*var(--controls-padding,1))] flex items-center [&:dir(rtl)]:flex-row-reverse", "rounded-full", "text-shadow-2xs text-shadow-(color:--shadow-current-color)");
 //#endregion
 export { controls };
 

package/dist/dev/packages/skins/dist/default/default/tailwind/components/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../../skins/dist/default/default/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"[--media-popover-side-offset:calc(var(--spacing)*(var(--base-side-offset,2)+var(--controls-padding,1)))]\", \"[--media-tooltip-side-offset:var(--media-popover-side-offset)]\", \"[--media-popover-boundary-offset:calc(var(--spacing)*var(--base-boundary-offset,2))]\", \"[--media-tooltip-boundary-offset:var(--media-popover-boundary-offset)]\", \"[padding:calc(var(--spacing)*var(--controls-padding,1))] flex items-center\", \"rounded-full\", \"text-shadow-2xs text-shadow-(color:--shadow-current-color)\");\n//#endregion\nexport { controls };\n\n//# sourceMappingURL=controls.js.map"],"mappings":";;AAEA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,4GAA4G,kEAAkE,wFAAwF,0EAA0E,8EAA8E,gBAAgB,4DAA4D"}
+{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../../skins/dist/default/default/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"[--media-popover-side-offset:calc(var(--spacing)*(var(--base-side-offset,2)+var(--controls-padding,1)))]\", \"[--media-tooltip-side-offset:var(--media-popover-side-offset)]\", \"[--media-popover-boundary-offset:calc(var(--spacing)*var(--base-boundary-offset,2))]\", \"[--media-tooltip-boundary-offset:var(--media-popover-boundary-offset)]\", \"[padding:calc(var(--spacing)*var(--controls-padding,1))] flex items-center [&:dir(rtl)]:flex-row-reverse\", \"rounded-full\", \"text-shadow-2xs text-shadow-(color:--shadow-current-color)\");\n//#endregion\nexport { controls };\n\n//# sourceMappingURL=controls.js.map"],"mappings":";;AAEA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,4GAA4G,kEAAkE,wFAAwF,0EAA0E,4GAA4G,gBAAgB,4DAA4D"}