@videojs/html 10.0.0-beta.2 → 10.0.0-beta.22

package/dist/dev/media/simple-hls-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"mappings":";;;cAEa,cAAA,SAAuB,oBAAA;EAAA,OAC3B,eAAA,CAAgB,KAAA,EAAO,MAAA;;EAW9B,wBAAA,CAAyB,QAAA,UAAkB,QAAA,iBAAyB,QAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"mappings":";;;;cACoE,mBAAA;;;;;;;;;cAGvD,cAAA,SAAuB,mBAAA"}

package/dist/dev/media/simple-hls-video/index.js

@@ -1,21 +1,9 @@
-import { SimpleHlsCustomMedia } from "@videojs/core/dom/media/simple-hls";
-
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { CustomMediaElement } from "@videojs/core/dom/media/custom-media-element";
+import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
 //#region src/media/simple-hls-video/index.ts
-var SimpleHlsVideo = class extends SimpleHlsCustomMedia {
-	static getTemplateHTML(attrs) {
-		const { src, ...rest } = attrs;
-		return super.getTemplateHTML(rest);
-	}
-	constructor() {
-		super();
-		this.attach(this.target);
-	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName !== "src") super.attributeChangedCallback(attrName, oldValue, newValue);
-		if (attrName === "src" && oldValue !== newValue) this.src = newValue ?? "";
-	}
-};
-
+var SimpleHlsVideo = class extends MediaAttachMixin(CustomMediaElement("video", SimpleHlsMedia)) {};
 //#endregion
 export { SimpleHlsVideo };
+
 //# sourceMappingURL=index.js.map

package/dist/dev/media/simple-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { SimpleHlsCustomMedia } from '@videojs/core/dom/media/simple-hls';\n\nexport class SimpleHlsVideo extends SimpleHlsCustomMedia {\n  static getTemplateHTML(attrs: Record<string, string>): string {\n    const { src, ...rest } = attrs;\n    // biome-ignore lint/complexity/noThisInStatic: intentional use of super\n    return super.getTemplateHTML(rest);\n  }\n\n  constructor() {\n    super();\n    this.attach(this.target);\n  }\n\n  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void {\n    if (attrName !== 'src') {\n      super.attributeChangedCallback(attrName, oldValue, newValue);\n    }\n\n    if (attrName === 'src' && oldValue !== newValue) {\n      this.src = newValue ?? '';\n    }\n  }\n}\n"],"mappings":";;;AAEA,IAAa,iBAAb,cAAoC,qBAAqB;CACvD,OAAO,gBAAgB,OAAuC;EAC5D,MAAM,EAAE,KAAK,GAAG,SAAS;AAEzB,SAAO,MAAM,gBAAgB,KAAK;;CAGpC,cAAc;AACZ,SAAO;AACP,OAAK,OAAO,KAAK,OAAO;;CAG1B,yBAAyB,UAAkB,UAAyB,UAA+B;AACjG,MAAI,aAAa,MACf,OAAM,yBAAyB,UAAU,UAAU,SAAS;AAG9D,MAAI,aAAa,SAAS,aAAa,SACrC,MAAK,MAAM,YAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.ts"],"sourcesContent":["import { CustomMediaElement } from '@videojs/core/dom/media/custom-media-element';\nimport { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport { MediaAttachMixin } from '../../store/media-attach-mixin';\n\nexport class SimpleHlsVideo extends MediaAttachMixin(CustomMediaElement('video', SimpleHlsMedia)) {}\n"],"mappings":";;;;AAIA,IAAa,iBAAb,cAAoC,iBAAiB,mBAAmB,SAAS,eAAe,CAAC,CAAC"}

package/dist/dev/player/context.d.ts

@@ -1,5 +1,6 @@
-import { AnyPlayerStore, PlayerStore } from "@videojs/core/dom";
-import { Context } from "@videojs/element/context";
+import { AnyPlayerStore, Media, MediaContainer, PlayerStore } from "@videojs/core/dom";
+import { Context, ContextConsumer } from "@videojs/element/context";
+import { ReactiveControllerHost } from "@videojs/element";
 
 //#region src/player/context.d.ts
 declare const PLAYER_CONTEXT_KEY: unique symbol;
@@ -11,6 +12,21 @@ type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<typeof
  * @public
  */
 declare const playerContext: Context<typeof PLAYER_CONTEXT_KEY, AnyPlayerStore>;
+declare const MEDIA_CONTEXT_KEY: unique symbol;
+interface MediaContextValue {
+  media: Media | null;
+  setMedia: (media: Media | null) => void;
+}
+type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
+declare const mediaContext: Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;
+declare const CONTAINER_CONTEXT_KEY: unique symbol;
+interface ContainerContextValue {
+  container: MediaContainer | null;
+  setContainer: (container: MediaContainer | null) => void;
+}
+type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
+type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;
+declare const containerContext: Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;
 //#endregion
-export { PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, playerContext };
+export { CONTAINER_CONTEXT_KEY, ContainerContext, ContainerContextConsumer, ContainerContextValue, MEDIA_CONTEXT_KEY, MediaContext, MediaContextValue, PLAYER_CONTEXT_KEY, PlayerContext, PlayerContextValue, containerContext, mediaContext, playerContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/dev/player/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;cAGa,kBAAA;AAAA,KAED,kBAAA,eAAiC,WAAA,GAAc,cAAA,IAAkB,KAAA;AAAA,KAEjE,aAAA,eAA4B,WAAA,GAAc,cAAA,IAAkB,OAAA,QAC/D,kBAAA,EACP,kBAAA,CAAmB,KAAA;;;;;AAJrB;cAYa,aAAA,EAAa,OAAA,QAAA,kBAAA,EAAA,cAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.ts"],"mappings":";;;;;cAQa,kBAAA;AAAA,KAED,kBAAA,eAAiC,WAAA,GAAc,cAAA,IAAkB,KAAA;AAAA,KAEjE,aAAA,eAA4B,WAAA,GAAc,cAAA,IAAkB,OAAA,QAC/D,kBAAA,EACP,kBAAA,CAAmB,KAAA;;;;;AAJrB;cAYa,aAAA,EAAa,OAAA,QAAA,kBAAA,EAAA,cAAA;AAAA,cAMb,iBAAA;AAAA,UAEI,iBAAA;EACf,KAAA,EAAO,KAAA;EACP,QAAA,GAAW,KAAA,EAAO,KAAA;AAAA;AAAA,KAGR,YAAA,GAAe,OAAA,QAAe,iBAAA,EAAmB,iBAAA;AAAA,cAEhD,YAAA,EAAY,OAAA,QAAA,iBAAA,EAAA,iBAAA;AAAA,cAMZ,qBAAA;AAAA,UAEI,qBAAA;EACf,SAAA,EAAW,cAAA;EACX,YAAA,GAAe,SAAA,EAAW,cAAA;AAAA;AAAA,KAGhB,gBAAA,GAAmB,OAAA,QAAe,qBAAA,EAAuB,qBAAA;AAAA,KAEzD,wBAAA,GAA2B,eAAA,CAAgB,gBAAA,EAAkB,sBAAA,GAAyB,WAAA;AAAA,cAErF,gBAAA,EAAgB,OAAA,QAAA,qBAAA,EAAA,qBAAA"}

package/dist/dev/player/context.js

@@ -1,14 +1,17 @@
 import { createContext } from "@videojs/element/context";
-
 //#region src/player/context.ts
-const PLAYER_CONTEXT_KEY = Symbol("@videojs/player");
+const PLAYER_CONTEXT_KEY = Symbol.for("@videojs/player");
 /**
 * The default player context instance for consuming the player store in controllers.
 *
 * @public
 */
 const playerContext = createContext(PLAYER_CONTEXT_KEY);
-
+const MEDIA_CONTEXT_KEY = Symbol.for("@videojs/media");
+const mediaContext = createContext(MEDIA_CONTEXT_KEY);
+const CONTAINER_CONTEXT_KEY = Symbol.for("@videojs/container");
+const containerContext = createContext(CONTAINER_CONTEXT_KEY);
 //#endregion
-export { PLAYER_CONTEXT_KEY, playerContext };
+export { CONTAINER_CONTEXT_KEY, MEDIA_CONTEXT_KEY, PLAYER_CONTEXT_KEY, containerContext, mediaContext, playerContext };
+
 //# sourceMappingURL=context.js.map

package/dist/dev/player/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, PlayerStore } from '@videojs/core/dom';\nimport { type Context, createContext } from '@videojs/element/context';\n\nexport const PLAYER_CONTEXT_KEY = Symbol('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n"],"mappings":";;;AAGA,MAAa,qBAAqB,OAAO,kBAAkB;;;;;;AAc3D,MAAa,gBAAgB,cAA6D,mBAAmB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.ts"],"sourcesContent":["import type { AnyPlayerStore, Media, MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveControllerHost } from '@videojs/element';\nimport { type Context, type ContextConsumer, createContext } from '@videojs/element/context';\n\n// ----------------------------------------\n// Player Context\n// ----------------------------------------\n\nexport const PLAYER_CONTEXT_KEY = Symbol.for('@videojs/player');\n\nexport type PlayerContextValue<Store extends PlayerStore = AnyPlayerStore> = Store;\n\nexport type PlayerContext<Store extends PlayerStore = AnyPlayerStore> = Context<\n  typeof PLAYER_CONTEXT_KEY,\n  PlayerContextValue<Store>\n>;\n\n/**\n * The default player context instance for consuming the player store in controllers.\n *\n * @public\n */\nexport const playerContext = createContext<PlayerContextValue, typeof PLAYER_CONTEXT_KEY>(PLAYER_CONTEXT_KEY);\n\n// ----------------------------------------\n// Media Context\n// ----------------------------------------\n\nexport const MEDIA_CONTEXT_KEY = Symbol.for('@videojs/media');\n\nexport interface MediaContextValue {\n  media: Media | null;\n  setMedia: (media: Media | null) => void;\n}\n\nexport type MediaContext = Context<typeof MEDIA_CONTEXT_KEY, MediaContextValue>;\n\nexport const mediaContext = createContext<MediaContextValue, typeof MEDIA_CONTEXT_KEY>(MEDIA_CONTEXT_KEY);\n\n// ----------------------------------------\n// Container Context\n// ----------------------------------------\n\nexport const CONTAINER_CONTEXT_KEY = Symbol.for('@videojs/container');\n\nexport interface ContainerContextValue {\n  container: MediaContainer | null;\n  setContainer: (container: MediaContainer | null) => void;\n}\n\nexport type ContainerContext = Context<typeof CONTAINER_CONTEXT_KEY, ContainerContextValue>;\n\nexport type ContainerContextConsumer = ContextConsumer<ContainerContext, ReactiveControllerHost & HTMLElement>;\n\nexport const containerContext = createContext<ContainerContextValue, typeof CONTAINER_CONTEXT_KEY>(\n  CONTAINER_CONTEXT_KEY\n);\n"],"mappings":";;AAQA,MAAa,qBAAqB,OAAO,IAAI,kBAAkB;;;;;;AAc/D,MAAa,gBAAgB,cAA6D,mBAAmB;AAM7G,MAAa,oBAAoB,OAAO,IAAI,iBAAiB;AAS7D,MAAa,eAAe,cAA2D,kBAAkB;AAMzG,MAAa,wBAAwB,OAAO,IAAI,qBAAqB;AAWrE,MAAa,mBAAmB,cAC9B,sBACD"}

package/dist/dev/player/create-player.d.ts

@@ -17,7 +17,7 @@ interface CreatePlayerResult<Store extends PlayerStore> {
   PlayerController: PlayerController.Constructor<Store>;
   /** Mixin that provides player context to descendants. */
   ProviderMixin: ProviderMixin<Store>;
-  /** Mixin that consumes player context and auto-attaches media elements. */
+  /** Mixin that consumes player context and registers as the container element. */
   ContainerMixin: ContainerMixin<Store>;
 }
 /**

package/dist/dev/player/create-player.js

@@ -1,9 +1,8 @@
-import { playerContext } from "./context.js";
+import { containerContext, mediaContext, playerContext } from "./context.js";
 import { createContainerMixin } from "../store/container-mixin.js";
 import { createProviderMixin } from "../store/provider-mixin.js";
 import { PlayerController } from "./player-controller.js";
 import { combine, createStore } from "@videojs/store";
-
 //#region src/player/create-player.ts
 function createPlayer(config) {
 	const slice = combine(...config.features);
@@ -14,11 +13,19 @@ function createPlayer(config) {
 		context: playerContext,
 		create,
 		PlayerController,
-		ProviderMixin: createProviderMixin(playerContext, create),
-		ContainerMixin: createContainerMixin(playerContext)
+		ProviderMixin: createProviderMixin({
+			playerContext,
+			mediaContext,
+			containerContext,
+			factory: create
+		}),
+		ContainerMixin: createContainerMixin({
+			playerContext,
+			containerContext
+		})
 	};
 }
-
 //#endregion
 export { createPlayer };
+
 //# sourceMappingURL=create-player.js.map

package/dist/dev/player/create-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport { type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and auto-attaches media elements. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n *\n * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({\n *   features: videoFeatures,\n * });\n *\n * // Provider element: owns the store, provides context to descendants\n * class VideoPlayer extends ProviderMixin(MediaElement) {}\n * customElements.define('video-player', VideoPlayer);\n *\n * // Control element with selector\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, context, selectPlayback);\n * }\n * ```\n *\n * @label Video\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Creates a player factory for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Creates a player factory with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {\n  const slice = combine<PlayerTarget, AnyPlayerFeature[]>(...config.features);\n\n  function create(): PlayerStore {\n    return createStore<PlayerTarget>()(slice);\n  }\n\n  const ProviderMixin = createProviderMixin<PlayerStore>(playerContext, create);\n  const ContainerMixin = createContainerMixin<PlayerStore>(playerContext);\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;;AAkFA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;AAM3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAPoB,oBAAiC,eAAe,OAAO;EAQ3E,gBAPqB,qBAAkC,cAAc;EAQtE"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.ts"],"sourcesContent":["import type {\n  AnyPlayerFeature,\n  AudioFeatures,\n  AudioPlayerStore,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { combine, createStore } from '@videojs/store';\n\nimport { type ContainerMixin, createContainerMixin } from '../store/container-mixin';\nimport { createProviderMixin, type ProviderMixin } from '../store/provider-mixin';\nimport { containerContext, mediaContext, type PlayerContext, playerContext } from './context';\nimport { PlayerController } from './player-controller';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  /** Context for consuming player in controllers. */\n  context: PlayerContext<Store>;\n\n  /** Creates a store instance for imperative access. */\n  create: () => Store;\n\n  /** Player controller bound to this player's context. */\n  PlayerController: PlayerController.Constructor<Store>;\n\n  /** Mixin that provides player context to descendants. */\n  ProviderMixin: ProviderMixin<Store>;\n\n  /** Mixin that consumes player context and registers as the container element. */\n  ContainerMixin: ContainerMixin<Store>;\n}\n\n/**\n * Creates a player factory with typed store, mixins, and controller.\n *\n * @example\n * ```ts\n * import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';\n * import { videoFeatures } from '@videojs/html/video';\n *\n * const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({\n *   features: videoFeatures,\n * });\n *\n * // Provider element: owns the store, provides context to descendants\n * class VideoPlayer extends ProviderMixin(MediaElement) {}\n * customElements.define('video-player', VideoPlayer);\n *\n * // Control element with selector\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, context, selectPlayback);\n * }\n * ```\n *\n * @label Video\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Creates a player factory for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Creates a player factory with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<PlayerStore> {\n  const slice = combine<PlayerTarget, AnyPlayerFeature[]>(...config.features);\n\n  function create(): PlayerStore {\n    return createStore<PlayerTarget>()(slice);\n  }\n\n  const ProviderMixin = createProviderMixin<PlayerStore>({\n    playerContext,\n    mediaContext,\n    containerContext,\n    factory: create,\n  });\n\n  const ContainerMixin = createContainerMixin<PlayerStore>({\n    playerContext,\n    containerContext,\n  });\n\n  return {\n    context: playerContext,\n    create,\n    PlayerController,\n    ProviderMixin,\n    ContainerMixin,\n  };\n}\n"],"mappings":";;;;;;AAkFA,SAAgB,aAAa,QAAiF;CAC5G,MAAM,QAAQ,QAA0C,GAAG,OAAO,SAAS;CAE3E,SAAS,SAAsB;AAC7B,SAAO,aAA2B,CAAC,MAAM;;AAe3C,QAAO;EACL,SAAS;EACT;EACA;EACA,eAhBoB,oBAAiC;GACrD;GACA;GACA;GACA,SAAS;GACV,CAAC;EAYA,gBAVqB,qBAAkC;GACvD;GACA;GACD,CAAC;EAQD"}

package/dist/dev/player/player-controller.js

@@ -1,6 +1,5 @@
 import { ContextConsumer } from "@videojs/element/context";
 import { StoreController } from "@videojs/store/html";
-
 //#region src/player/player-controller.ts
 /**
 * Reactive controller for accessing player store state.
@@ -60,7 +59,7 @@ var PlayerController = class {
 		if (!this.#store && this.#selector) this.#store = new StoreController(this.#host, store, this.#selector);
 	}
 };
-
 //#endregion
 export { PlayerController };
+
 //# sourceMappingURL=player-controller.js.map

package/dist/dev/player/player-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/player-controller.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { InferStoreState, Selector } from '@videojs/store';\nimport { StoreController } from '@videojs/store/html';\n\nimport type { PlayerContext } from './context';\n\nexport type PlayerControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller for accessing player store state.\n *\n * Without selector: Returns the store, does NOT subscribe to changes.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\n *   #player = new PlayerController(this, playerContext);\n *\n *   handleClick() {\n *     this.#player.value.setVolume(0.5);\n *   }\n * }\n *\n * // Selector-based subscription\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, playerContext, selectPlayback);\n * }\n * ```\n */\nexport class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {\n  readonly #host: PlayerControllerHost;\n  readonly #selector: Selector<InferStoreState<Store>, Result> | undefined;\n\n  #consumer: ContextConsumer<PlayerContext<Store>, PlayerControllerHost>;\n  #store: StoreController<Store, Result> | null = null;\n\n  /**\n   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @param selector - Derives a value from the player store state.\n   */\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector: Selector<InferStoreState<Store>, Result>\n  );\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector?: Selector<InferStoreState<Store>, Result>\n  ) {\n    this.#host = host;\n    this.#selector = selector;\n\n    this.#consumer = new ContextConsumer(host, {\n      context,\n      callback: (ctx) => this.#connect(ctx),\n      subscribe: true,\n    });\n\n    host.addController(this);\n  }\n\n  get value(): Result | undefined {\n    const store = this.#consumer.value;\n    if (!store) return undefined;\n\n    // Without selector: return store directly\n    if (!this.#selector) return store as unknown as Result;\n\n    // With selector: use StoreController\n    return this.#store?.value;\n  }\n\n  get displayName(): string | undefined {\n    return this.#selector?.displayName;\n  }\n\n  hostConnected(): void {\n    const store = this.#consumer.value;\n    if (store) this.#connect(store);\n  }\n\n  hostDisconnected(): void {\n    this.#store = null;\n  }\n\n  #connect(store: Store): void {\n    if (!this.#store && this.#selector) {\n      this.#store = new StoreController(this.#host, store, this.#selector);\n    }\n  }\n}\n\nexport namespace PlayerController {\n  export type Host = PlayerControllerHost;\n\n  export type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<\n    Store,\n    Result\n  >;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG,CAASA;CACT,CAASC;CAET;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAKD,OAAQ;AACb,QAAKC,WAAY;AAEjB,QAAKC,WAAY,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAKC,QAAS,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAKD,SAAU;AAC7B,MAAI,CAAC,MAAO,QAAO;AAGnB,MAAI,CAAC,MAAKD,SAAW,QAAO;AAG5B,SAAO,MAAKG,OAAQ;;CAGtB,IAAI,cAAkC;AACpC,SAAO,MAAKH,UAAW;;CAGzB,gBAAsB;EACpB,MAAM,QAAQ,MAAKC,SAAU;AAC7B,MAAI,MAAO,OAAKC,QAAS,MAAM;;CAGjC,mBAAyB;AACvB,QAAKC,QAAS;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAKA,SAAU,MAAKH,SACvB,OAAKG,QAAS,IAAI,gBAAgB,MAAKJ,MAAO,OAAO,MAAKC,SAAU"}
+{"version":3,"file":"player-controller.js","names":["#host","#selector","#consumer","#connect","#store"],"sources":["../../../src/player/player-controller.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { InferStoreState, Selector } from '@videojs/store';\nimport { StoreController } from '@videojs/store/html';\n\nimport type { PlayerContext } from './context';\n\nexport type PlayerControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller for accessing player store state.\n *\n * Without selector: Returns the store, does NOT subscribe to changes.\n * With selector: Returns selected state, subscribes with shallowEqual comparison.\n *\n * @example\n * ```ts\n * // Store access (no subscription)\n * class Controls extends MediaElement {\n *   #player = new PlayerController(this, playerContext);\n *\n *   handleClick() {\n *     this.#player.value.setVolume(0.5);\n *   }\n * }\n *\n * // Selector-based subscription\n * class PlayButton extends MediaElement {\n *   #playback = new PlayerController(this, playerContext, selectPlayback);\n * }\n * ```\n */\nexport class PlayerController<Store extends PlayerStore, Result = Store> implements ReactiveController {\n  readonly #host: PlayerControllerHost;\n  readonly #selector: Selector<InferStoreState<Store>, Result> | undefined;\n\n  #consumer: ContextConsumer<PlayerContext<Store>, PlayerControllerHost>;\n  #store: StoreController<Store, Result> | null = null;\n\n  /**\n   * @label Without Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   */\n  constructor(host: PlayerControllerHost, context: PlayerContext<Store>);\n  /**\n   * @label With Selector\n   * @param host - The host element that owns this controller.\n   * @param context - Player context to resolve the store from.\n   * @param selector - Derives a value from the player store state.\n   */\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector: Selector<InferStoreState<Store>, Result>\n  );\n  constructor(\n    host: PlayerControllerHost,\n    context: PlayerContext<Store>,\n    selector?: Selector<InferStoreState<Store>, Result>\n  ) {\n    this.#host = host;\n    this.#selector = selector;\n\n    this.#consumer = new ContextConsumer(host, {\n      context,\n      callback: (ctx) => this.#connect(ctx),\n      subscribe: true,\n    });\n\n    host.addController(this);\n  }\n\n  get value(): Result | undefined {\n    const store = this.#consumer.value;\n    if (!store) return undefined;\n\n    // Without selector: return store directly\n    if (!this.#selector) return store as unknown as Result;\n\n    // With selector: use StoreController\n    return this.#store?.value;\n  }\n\n  get displayName(): string | undefined {\n    return this.#selector?.displayName;\n  }\n\n  hostConnected(): void {\n    const store = this.#consumer.value;\n    if (store) this.#connect(store);\n  }\n\n  hostDisconnected(): void {\n    this.#store = null;\n  }\n\n  #connect(store: Store): void {\n    if (!this.#store && this.#selector) {\n      this.#store = new StoreController(this.#host, store, this.#selector);\n    }\n  }\n}\n\nexport namespace PlayerController {\n  export type Host = PlayerControllerHost;\n\n  export type Constructor<Store extends PlayerStore = PlayerStore, Result = Store> = typeof PlayerController<\n    Store,\n    Result\n  >;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,mBAAb,MAAuG;CACrG;CACA;CAEA;CACA,SAAgD;CAmBhD,YACE,MACA,SACA,UACA;AACA,QAAA,OAAa;AACb,QAAA,WAAiB;AAEjB,QAAA,WAAiB,IAAI,gBAAgB,MAAM;GACzC;GACA,WAAW,QAAQ,MAAA,QAAc,IAAI;GACrC,WAAW;GACZ,CAAC;AAEF,OAAK,cAAc,KAAK;;CAG1B,IAAI,QAA4B;EAC9B,MAAM,QAAQ,MAAA,SAAe;AAC7B,MAAI,CAAC,MAAO,QAAO,KAAA;AAGnB,MAAI,CAAC,MAAA,SAAgB,QAAO;AAG5B,SAAO,MAAA,OAAa;;CAGtB,IAAI,cAAkC;AACpC,SAAO,MAAA,UAAgB;;CAGzB,gBAAsB;EACpB,MAAM,QAAQ,MAAA,SAAe;AAC7B,MAAI,MAAO,OAAA,QAAc,MAAM;;CAGjC,mBAAyB;AACvB,QAAA,QAAc;;CAGhB,SAAS,OAAoB;AAC3B,MAAI,CAAC,MAAA,SAAe,MAAA,SAClB,OAAA,QAAc,IAAI,gBAAgB,MAAA,MAAY,OAAO,MAAA,SAAe"}

package/dist/dev/presets/audio.js

@@ -3,5 +3,4 @@ import { MinimalAudioSkinElement } from "../define/audio/minimal-skin.js";
 import { AudioSkinTailwindElement } from "../define/audio/skin.tailwind.js";
 import { AudioSkinElement } from "../define/audio/skin.js";
 import { audioFeatures } from "@videojs/core/dom";
-
-export { AudioSkinElement, AudioSkinTailwindElement, MinimalAudioSkinElement, MinimalAudioSkinTailwindElement, audioFeatures };
+export { AudioSkinElement, AudioSkinTailwindElement, MinimalAudioSkinElement, MinimalAudioSkinTailwindElement, audioFeatures };

package/dist/dev/presets/background.js

@@ -1,3 +1,2 @@
 import { backgroundFeatures } from "@videojs/core/dom";
-
-export { backgroundFeatures };
+export { backgroundFeatures };

package/dist/dev/presets/video.js

@@ -3,5 +3,4 @@ import { MinimalVideoSkinElement } from "../define/video/minimal-skin.js";
 import { VideoSkinTailwindElement } from "../define/video/skin.tailwind.js";
 import { VideoSkinElement } from "../define/video/skin.js";
 import { videoFeatures } from "@videojs/core/dom";
-
-export { MinimalVideoSkinElement, MinimalVideoSkinTailwindElement, VideoSkinElement, VideoSkinTailwindElement, videoFeatures };
+export { MinimalVideoSkinElement, MinimalVideoSkinTailwindElement, VideoSkinElement, VideoSkinTailwindElement, videoFeatures };

package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js

@@ -1,58 +1,37 @@
+import "../../shared/tailwind/icon-state.js";
 import { bufferingIndicator as bufferingIndicator$1 } from "./components/buffering.js";
 import { controls as controls$1 } from "./components/controls.js";
 import { error as error$1 } from "./components/error.js";
 import { popup as popup$1 } from "./components/popup.js";
+import { root as root$1 } from "./components/root.js";
 import { slider as slider$1 } from "./components/slider.js";
-import { surface as surface$1 } from "./components/surface.js";
-import { button } from "./components/button.js";
-import { icon, iconContainer, iconFlipped } from "./components/icon.js";
-import { playbackRate } from "./components/playback-rate.js";
-import { root } from "./components/root.js";
-import { seek } from "./components/seek.js";
-import { time } from "./components/time.js";
+import { surface } from "./components/surface.js";
+import "./components/button.js";
+import "./components/button-group.js";
+import "./components/icon.js";
+import "./components/playback-rate.js";
+import "./components/seek.js";
+import "./components/time.js";
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/audio.tailwind.js
-const surface = cn(surface$1, "bg-white/50 dark:bg-black/40", "backdrop-brightness-98 backdrop-saturate-120 backdrop-blur", "ring-white/5 shadow-black/15", "after:ring-black/5");
-const controls = cn(controls$1, surface, "dark:text-white");
+const root = cn(root$1, "[--media-text-color:var(--media-color-primary,oklch(0_0_0))]", "[--media-surface-background-color:oklch(1_0_0/0.5)]", "[--media-surface-inner-border-color:oklch(1_0_0/0.1)]", "[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "[--media-surface-shadow-color:oklch(0_0_0/0.15)]", "[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]", "[--media-error-dialog-transition-duration:250ms]", "[--media-error-dialog-transition-delay:100ms]", "[--media-popup-transition-duration:100ms]", "[--media-popup-transition-timing-function:ease-out]", "[--media-tooltip-side-offset:0.75rem]", "[--media-popover-side-offset:0.75rem]", "motion-reduce:[--media-error-dialog-transition-duration:50ms]", "motion-reduce:[--media-error-dialog-transition-delay:0ms]", "motion-reduce:[--media-popup-transition-duration:0ms]", "dark:[--media-surface-background-color:oklch(0_0_0/0.4)]", "dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]", "contrast-more:[--media-surface-background-color:oklch(1_0_0)]", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]", "dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]", "dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]", "dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]", "dark:contrast-more:[--media-surface-outer-border-color:transparent]");
+const controls = cn(controls$1, surface, "text-(--media-text-color)", "peer-data-open/error:[&_*]:invisible");
 const slider = {
 	...slider$1,
-	track: cn(slider$1.track, "bg-black/10", "dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
-};
-const iconState = {
-	play: {
-		button: "group",
-		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
-		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
-		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
-	},
-	mute: {
-		button: "group",
-		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
-		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
-		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
-	}
+	track: cn(slider$1.track, "bg-black/10", "dark:bg-white/20 dark:ring-1 dark:ring-black/5")
 };
-const tooltipState = { play: {
-	wrapper: "contents group/play-tip",
-	replay: "hidden group-has-data-ended/play-tip:block",
-	play: "hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block",
-	pause: "hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block"
-} };
 const popup = {
 	...popup$1,
 	popover: cn(surface, popup$1.popover),
 	tooltip: cn(surface, popup$1.tooltip)
 };
-const bufferingIndicator = {
-	...bufferingIndicator$1,
-	container: cn(bufferingIndicator$1.container, surface)
-};
+({ ...bufferingIndicator$1 }), cn(bufferingIndicator$1.container, surface);
 const error = {
 	...error$1,
-	dialog: cn(error$1.dialog, surface)
+	dialog: cn("absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5", "bg-(--media-surface-background-color) text-(--media-text-color)", "backdrop-blur-lg backdrop-saturate-150", "transition-[opacity,filter] ease-out", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs", "group-data-ending-style/error:delay-0"),
+	content: "flex flex-1 items-center gap-2"
 };
-
 //#endregion
-export { controls, iconState, popup, slider, tooltipState };
+export { controls, error, popup, root, slider };
+
 //# sourceMappingURL=audio.tailwind.js.map

package/dist/dev/skins/dist/default/default/tailwind/audio.tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/audio.tailwind.ts\nconst surface = cn(surface$1, \"bg-white/50 dark:bg-black/40\", \"backdrop-brightness-98 backdrop-saturate-120 backdrop-blur\", \"ring-white/5 shadow-black/15\", \"after:ring-black/5\");\nconst controls = cn(controls$1, surface, \"dark:text-white\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t}\n};\nconst tooltipState = { play: {\n\twrapper: \"contents group/play-tip\",\n\treplay: \"hidden group-has-data-ended/play-tip:block\",\n\tplay: \"hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block\",\n\tpause: \"hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block\"\n} };\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,UAAU,GAAG,WAAW,gCAAgC,8DAA8D,gCAAgC,qBAAqB;AACjL,MAAM,WAAW,GAAG,YAAY,SAAS,kBAAkB;AAC3D,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,6DAA6D;CACtG;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD;AACD,MAAM,eAAe,EAAE,MAAM;CAC5B,SAAS;CACT,QAAQ;CACR,MAAM;CACN,OAAO;CACP,EAAE;AACH,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}
+{"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/audio.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-text-color:var(--media-color-primary,oklch(0_0_0))]\", \"[--media-surface-background-color:oklch(1_0_0/0.5)]\", \"[--media-surface-inner-border-color:oklch(1_0_0/0.1)]\", \"[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"[--media-surface-shadow-color:oklch(0_0_0/0.15)]\", \"[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]\", \"[--media-error-dialog-transition-duration:250ms]\", \"[--media-error-dialog-transition-delay:100ms]\", \"[--media-popup-transition-duration:100ms]\", \"[--media-popup-transition-timing-function:ease-out]\", \"[--media-tooltip-side-offset:0.75rem]\", \"[--media-popover-side-offset:0.75rem]\", \"motion-reduce:[--media-error-dialog-transition-duration:50ms]\", \"motion-reduce:[--media-error-dialog-transition-delay:0ms]\", \"motion-reduce:[--media-popup-transition-duration:0ms]\", \"dark:[--media-surface-background-color:oklch(0_0_0/0.4)]\", \"dark:[--media-text-color:var(--media-color-primary,oklch(1_0_0))]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(1_0_0)]\", \"contrast-more:[--media-surface-background-color:oklch(1_0_0)]\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"contrast-more:[--media-surface-outer-border-color:oklch(0_0_0/0.05)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:contrast-more:[--media-surface-background-color:oklch(0_0_0)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.2)]\", \"dark:[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]\", \"dark:contrast-more:[--media-surface-outer-border-color:transparent]\");\nconst controls = cn(controls$1, surface, \"text-(--media-text-color)\", \"peer-data-open/error:[&_*]:invisible\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-black/10\", \"dark:bg-white/20 dark:ring-1 dark:ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(\"absolute inset-0 z-20 flex items-center gap-3 rounded-full px-5 pr-0.5\", \"bg-(--media-surface-background-color) text-(--media-text-color)\", \"backdrop-blur-lg backdrop-saturate-150\", \"transition-[opacity,filter] ease-out\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:blur-xs\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:blur-xs\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-1 items-center gap-2\"\n};\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, playbackRate, popup, root, seek, slider, time };\n\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,GAAG,QAAQ,gEAAgE,uDAAuD,yDAAyD,0DAA0D,oDAAoD,8DAA8D,oDAAoD,iDAAiD,6CAA6C,uDAAuD,yCAAyC,yCAAyC,iEAAiE,6DAA6D,yDAAyD,4DAA4D,qEAAqE,iGAAiG,iEAAiE,wGAAwG,wEAAwE,sGAAsG,sEAAsE,4GAA4G,4EAA4E,uGAAuG,sEAAsE;AAC1yD,MAAM,WAAW,GAAG,YAAY,SAAS,6BAA6B,uCAAuC;AAC7G,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,eAAe,iDAAiD;CAC1F;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;CAGA,EADA,GAAG,sBACmD,GAA3C,GAAG,qBAAqB,WAAW,QAAQ;AAEvD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0EAA0E,mEAAmE,0CAA0C,wCAAwC,uDAAuD,iDAAiD,qFAAqF,iFAAiF,wCAAwC;CAChiB,SAAS;CACT"}

package/dist/dev/skins/dist/default/default/tailwind/components/buffering.js

@@ -3,7 +3,7 @@ const bufferingIndicator = {
 	root: "absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex",
 	container: "p-1 rounded-full"
 };
-
 //#endregion
 export { bufferingIndicator };
+
 //# sourceMappingURL=buffering.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/buffering.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n\n//#endregion\nexport { bufferingIndicator };\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}
+{"version":3,"file":"buffering.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/buffering.js"],"sourcesContent":["//#region src/default/tailwind/components/buffering.ts\nconst bufferingIndicator = {\n\troot: \"absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex\",\n\tcontainer: \"p-1 rounded-full\"\n};\n//#endregion\nexport { bufferingIndicator };\n\n//# sourceMappingURL=buffering.js.map"],"mappings":";AACA,MAAM,qBAAqB;CAC1B,MAAM;CACN,WAAW;CACX"}

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

@@ -0,0 +1,7 @@
+import { cn } from "@videojs/utils/style";
+//#region ../skins/dist/default/default/tailwind/components/button-group.js
+const buttonGroup = cn("flex items-center gap-[0.075rem]", "@2xl/media-root:gap-0.5");
+//#endregion
+export { buttonGroup };
+
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button-group.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/button-group.ts\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\n//#endregion\nexport { buttonGroup };\n\n//# sourceMappingURL=button-group.js.map"],"mappings":";;AAEA,MAAM,cAAc,GAAG,oCAAoC,0BAA0B"}

package/dist/dev/skins/dist/default/default/tailwind/components/button.js

@@ -1,12 +1,12 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/button.js
 const button = {
-	base: cn("items-center justify-center shrink-0 border-none cursor-pointer select-none text-center", "font-medium", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,color,outline-offset,scale] duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-blue-500 focus-visible:outline-offset-2", "data-[availability=unavailable]:hidden"),
-	icon: cn("grid w-[2.125rem] aspect-square bg-transparent rounded-full", "text-inherit text-shadow-inherit", "hover:bg-current/10 hover:no-underline", "focus-visible:bg-current/10", "aria-expanded:bg-current/10", "active:scale-90"),
-	default: cn("flex py-2 px-4 bg-white rounded-full", "text-black")
+	base: cn("flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation", "py-2 px-4 rounded-full", "outline-2 outline-transparent -outline-offset-2", "transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out", "active:scale-[0.98]", "disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[availability=unavailable]:hidden"),
+	primary: "bg-white text-black font-medium text-shadow-none",
+	subtle: cn("bg-transparent text-inherit text-shadow-inherit", "hover:bg-current/10 hover:no-underline", "focus-visible:bg-current/10", "aria-expanded:bg-current/10"),
+	icon: cn("grid w-9 aspect-square p-0", "active:scale-90")
 };
-
 //#endregion
 export { button };
+
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"font-medium\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,color,outline-offset,scale] duration-150 ease-out\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-blue-500 focus-visible:outline-offset-2\", \"data-[availability=unavailable]:hidden\"),\n\ticon: cn(\"grid w-[2.125rem] aspect-square bg-transparent rounded-full\", \"text-inherit text-shadow-inherit\", \"hover:bg-current/10 hover:no-underline\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\", \"active:scale-90\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-full\", \"text-black\")\n};\n\n//#endregion\nexport { button };\n//# sourceMappingURL=button.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,eAAe,mDAAmD,kFAAkF,sEAAsE,iEAAiE,yCAAyC;CACxa,MAAM,GAAG,+DAA+D,oCAAoC,0CAA0C,+BAA+B,+BAA+B,kBAAkB;CACtO,SAAS,GAAG,wCAAwC,aAAa;CACjE"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"flex items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation\", \"py-2 px-4 rounded-full\", \"outline-2 outline-transparent -outline-offset-2\", \"transition-[background-color,outline-offset,scale] will-change-[scale] duration-150 ease-out\", \"active:scale-[0.98]\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[availability=unavailable]:hidden\"),\n\tprimary: \"bg-white text-black font-medium text-shadow-none\",\n\tsubtle: cn(\"bg-transparent text-inherit text-shadow-inherit\", \"hover:bg-current/10 hover:no-underline\", \"focus-visible:bg-current/10\", \"aria-expanded:bg-current/10\"),\n\ticon: cn(\"grid w-9 aspect-square p-0\", \"active:scale-90\")\n};\n//#endregion\nexport { button };\n\n//# sourceMappingURL=button.js.map"],"mappings":";;AAEA,MAAM,SAAS;CACd,MAAM,GAAG,mHAAmH,0BAA0B,mDAAmD,gGAAgG,uBAAuB,sEAAsE,gEAAgE,yCAAyC;CAC/e,SAAS;CACT,QAAQ,GAAG,mDAAmD,0CAA0C,+BAA+B,8BAA8B;CACrK,MAAM,GAAG,8BAA8B,kBAAkB;CACzD"}

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

@@ -1,8 +1,7 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/controls.js
-const controls = cn("peer/controls", "@container/media-controls", "p-[0.175rem] flex items-center gap-[0.075rem]", "rounded-full", "[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.25))]", "[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "text-shadow-[0_0_1px_var(--media-controls-current-shadow-color)]", "@2xl/media-root:p-1 @2xl/media-root:gap-0.5");
-
+const controls = cn("peer/controls", "@container/media-controls", "p-[0.375rem] flex items-center gap-x-[0.075rem]", "rounded-3xl", "[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "text-shadow-2xs text-shadow-(color:--media-controls-current-shadow-color)");
 //#endregion
 export { controls };
+
 //# sourceMappingURL=controls.js.map

package/dist/dev/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\n//#region src/default/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"p-[0.175rem] flex items-center gap-[0.075rem]\", \"rounded-full\", \"[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.25))]\", \"[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"text-shadow-[0_0_1px_var(--media-controls-current-shadow-color)]\", \"@2xl/media-root:p-1 @2xl/media-root:gap-0.5\");\n\n//#endregion\nexport { controls };\n//# sourceMappingURL=controls.js.map"],"mappings":";;;AAGA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,iDAAiD,gBAAgB,0GAA0G,+HAA+H,oEAAoE,8CAA8C"}
+{"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\", \"p-[0.375rem] flex items-center gap-x-[0.075rem]\", \"rounded-3xl\", \"[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]\", \"[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"text-shadow-2xs text-shadow-(color:--media-controls-current-shadow-color)\");\n//#endregion\nexport { controls };\n\n//# sourceMappingURL=controls.js.map"],"mappings":";;AAEA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,mDAAmD,eAAe,0GAA0G,+HAA+H,4EAA4E"}

package/dist/dev/skins/dist/default/default/tailwind/components/error.js

@@ -1,15 +1,14 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/error.js
 const error = {
-	root: "peer/error group/error flex absolute inset-0 z-20 items-center justify-center",
-	dialog: cn("flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm", "transition-[opacity,scale,transform] duration-500 delay-100", "ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50", "motion-reduce:duration-100 motion-reduce:ease-out motion-reduce:delay-0"),
+	root: "peer/error group/error hidden data-[open]:flex absolute inset-0 z-20 items-center justify-center outline-none",
+	dialog: cn("flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white", "transition-[opacity,scale,transform]", "duration-(--media-error-dialog-transition-duration)", "delay-(--media-error-dialog-transition-delay)", "ease-(--media-error-dialog-transition-timing-function)", "group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50", "group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50", "group-data-ending-style/error:delay-0"),
 	content: "flex flex-col gap-2 px-2 pt-2 pb-1.5",
 	title: "font-semibold leading-tight",
-	description: "opacity-70",
+	description: "opacity-70 wrap-anywhere",
 	actions: "flex gap-2 *:flex-1"
 };
-
 //#endregion
 export { error };
+
 //# sourceMappingURL=error.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/error.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/error.ts\nconst error = {\n\troot: \"peer/error group/error flex absolute inset-0 z-20 items-center justify-center\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white text-sm\", \"transition-[opacity,scale,transform] duration-500 delay-100\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50\", \"motion-reduce:duration-100 motion-reduce:ease-out motion-reduce:delay-0\"),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\n\n//#endregion\nexport { error };\n//# sourceMappingURL=error.js.map"],"mappings":";;;AAGA,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,yEAAyE,+DAA+D,wGAAwG,sFAAsF,kFAAkF,0EAA0E;CAC7e,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT"}
+{"version":3,"file":"error.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/error.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/error.ts\nconst error = {\n\troot: \"peer/error group/error hidden data-[open]:flex absolute inset-0 z-20 items-center justify-center outline-none\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-72 p-3 rounded-[1.75rem] text-white\", \"transition-[opacity,scale,transform]\", \"duration-(--media-error-dialog-transition-duration)\", \"delay-(--media-error-dialog-transition-delay)\", \"ease-(--media-error-dialog-transition-timing-function)\", \"group-data-starting-style/error:opacity-0 group-data-starting-style/error:scale-50\", \"group-data-ending-style/error:opacity-0 group-data-ending-style/error:scale-50\", \"group-data-ending-style/error:delay-0\"),\n\tcontent: \"flex flex-col gap-2 px-2 pt-2 pb-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tdescription: \"opacity-70 wrap-anywhere\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\n//#endregion\nexport { error };\n\n//# sourceMappingURL=error.js.map"],"mappings":";;AAEA,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,iEAAiE,wCAAwC,uDAAuD,iDAAiD,0DAA0D,sFAAsF,kFAAkF,wCAAwC;CACte,SAAS;CACT,OAAO;CACP,aAAa;CACb,SAAS;CACT"}

package/dist/dev/skins/dist/default/default/tailwind/components/icon.js

@@ -1,10 +1,9 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/icon.js
 const icon = cn("block [grid-area:1/1] size-4.5 shrink-0", "drop-shadow-[0_1px_0_var(--media-controls-current-shadow-color,oklch(0_0_0/0.25))]", "transition-discrete transition-[display,opacity] duration-150 ease-out");
 const iconFlipped = "[scale:-1_1]";
 const iconContainer = "relative";
-
 //#endregion
 export { icon, iconContainer, iconFlipped };
+
 //# sourceMappingURL=icon.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/icon.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/icon.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5 shrink-0\", \"drop-shadow-[0_1px_0_var(--media-controls-current-shadow-color,oklch(0_0_0/0.25))]\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\n\n//#endregion\nexport { icon, iconContainer, iconFlipped, iconHidden };\n//# sourceMappingURL=icon.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,2CAA2C,sFAAsF,yEAAyE;AAE1N,MAAM,cAAc;AACpB,MAAM,gBAAgB"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/icon.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/icon.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5 shrink-0\", \"drop-shadow-[0_1px_0_var(--media-controls-current-shadow-color,oklch(0_0_0/0.25))]\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\n//#endregion\nexport { icon, iconContainer, iconFlipped, iconHidden };\n\n//# sourceMappingURL=icon.js.map"],"mappings":";;AAEA,MAAM,OAAO,GAAG,2CAA2C,sFAAsF,yEAAyE;AAE1N,MAAM,cAAc;AACpB,MAAM,gBAAgB"}

package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js

@@ -1,8 +1,7 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/overlay.js
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-300 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur", "motion-reduce:duration-100");
-
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/50 via-black/30 to-transparent", "backdrop-blur-none backdrop-saturate-100", "transition-[opacity,backdrop-filter]", "duration-(--media-controls-transition-duration)", "ease-out", "peer-data-visible/controls:opacity-100", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-(--media-error-dialog-transition-duration)", "peer-data-open/error:delay-(--media-error-dialog-transition-delay)", "peer-data-open/error:backdrop-blur-lg peer-data-open/error:backdrop-saturate-150");
 //#endregion
 export { overlay };
+
 //# sourceMappingURL=overlay.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-300 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,sCAAsC,6BAA6B"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/50 via-black/30 to-transparent\", \"backdrop-blur-none backdrop-saturate-100\", \"transition-[opacity,backdrop-filter]\", \"duration-(--media-controls-transition-duration)\", \"ease-out\", \"peer-data-visible/controls:opacity-100\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-(--media-error-dialog-transition-duration)\", \"peer-data-open/error:delay-(--media-error-dialog-transition-delay)\", \"peer-data-open/error:backdrop-blur-lg peer-data-open/error:backdrop-saturate-150\");\n//#endregion\nexport { overlay };\n\n//# sourceMappingURL=overlay.js.map"],"mappings":";;AAEA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,4DAA4D,4CAA4C,wCAAwC,mDAAmD,YAAY,0CAA0C,oCAAoC,4EAA4E,sEAAsE,mFAAmF"}

package/dist/dev/skins/dist/default/default/tailwind/components/playback-rate.js

@@ -1,6 +1,6 @@
 //#region ../skins/dist/default/default/tailwind/components/playback-rate.js
 const playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };
-
 //#endregion
 export { playbackRate };
+
 //# sourceMappingURL=playback-rate.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/playback-rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"playback-rate.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/playback-rate.js"],"sourcesContent":["//#region src/default/tailwind/components/playback-rate.ts\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\n\n//#endregion\nexport { playbackRate };\n//# sourceMappingURL=playback-rate.js.map"],"mappings":";AACA,MAAM,eAAe,EAAE,QAAQ,wEAAwE"}
+{"version":3,"file":"playback-rate.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/playback-rate.js"],"sourcesContent":["//#region src/default/tailwind/components/playback-rate.ts\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\n//#endregion\nexport { playbackRate };\n\n//# sourceMappingURL=playback-rate.js.map"],"mappings":";AACA,MAAM,eAAe,EAAE,QAAQ,wEAAwE"}

package/dist/dev/skins/dist/default/default/tailwind/components/popup.js

@@ -1,13 +1,12 @@
 import { cn } from "@videojs/utils/style";
-
 //#region ../skins/dist/default/default/tailwind/components/popup.js
-const base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0", "data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left");
+const base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter]", "duration-(--media-popup-transition-duration)", "ease-(--media-popup-transition-timing-function)", "data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm", "data-instant:duration-0", "data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left", "before:absolute before:pointer-events-[inherit]", "data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full", "data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full", "data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full", "data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full");
 const popup = {
-	popover: cn(base, "[--media-popover-side-offset:0.5rem]"),
-	tooltip: cn(base, "py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap", "[--media-tooltip-side-offset:0.5rem]"),
-	volume: "py-2.5 px-1 rounded-full"
+	popover: cn(base, "data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)", "data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)"),
+	tooltip: cn(base, "py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap", "data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)", "data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)"),
+	volume: "py-3 px-0 rounded-full"
 };
-
 //#endregion
 export { popup };
+
 //# sourceMappingURL=popup.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\");\nconst popup = {\n\tpopover: cn(base, \"[--media-popover-side-offset:0.5rem]\"),\n\ttooltip: cn(base, \"py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap\", \"[--media-tooltip-side-offset:0.5rem]\"),\n\tvolume: \"py-2.5 px-1 rounded-full\"\n};\n\n//#endregion\nexport { popup };\n//# sourceMappingURL=popup.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8CAA8C,4DAA4D,yFAAyF,mFAAmF,2BAA2B,0HAA0H;AAC3b,MAAM,QAAQ;CACb,SAAS,GAAG,MAAM,uCAAuC;CACzD,SAAS,GAAG,MAAM,6DAA6D,uCAAuC;CACtH,QAAQ;CACR"}
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter]\", \"duration-(--media-popup-transition-duration)\", \"ease-(--media-popup-transition-timing-function)\", \"data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\", \"before:absolute before:pointer-events-[inherit]\", \"data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full\", \"data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full\", \"data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full\", \"data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full\");\nconst popup = {\n\tpopover: cn(base, \"data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)\", \"data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)\"),\n\ttooltip: cn(base, \"py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap\", \"data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)\", \"data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)\"),\n\tvolume: \"py-3 px-0 rounded-full\"\n};\n//#endregion\nexport { popup };\n\n//# sourceMappingURL=popup.js.map"],"mappings":";;AAEA,MAAM,OAAO,GAAG,8CAA8C,+CAA+C,gDAAgD,mDAAmD,0FAA0F,oFAAoF,2BAA2B,2HAA2H,mDAAmD,gGAAgG,4GAA4G,oGAAoG,uGAAuG;AAC99B,MAAM,QAAQ;CACb,SAAS,GAAG,MAAM,oHAAoH,mHAAmH;CACzP,SAAS,GAAG,MAAM,6DAA6D,oHAAoH,mHAAmH;CACtT,QAAQ;CACR"}