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

package/dist/default/i18n/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  type Translations,\n  type Translator,\n} from '@videojs/core/i18n';\nimport { createContext, useContext, useEffect, useMemo, useReducer } from 'react';\n\nexport type AddLocaleRoot = () => () => void;\n\nexport interface I18nContextValue {\n  translator: Translator;\n  locale: Locale;\n  /** True when a provider received an explicit locale prop. */\n  localeFromProp: boolean;\n  /** Overrides passed to this provider. */\n  translations?: Partial<Translations>;\n  /** Callback inherited by nested locale roots. */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\n/** React context carrying the active translator and locale. @public */\nexport const I18nContext = createContext<I18nContextValue | null>(null);\n\nexport const LocaleRootContext = createContext<AddLocaleRoot | undefined>(undefined);\n\n/**\n * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.\n *\n * @public\n */\nexport function useTranslator(): Translator {\n  const ctx = useContext(I18nContext);\n  const [registryEpoch, invalidateRegistry] = useReducer((epoch: number) => epoch + 1, 0);\n\n  useEffect(() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }, []);\n\n  const fallback = useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);\n  }, [registryEpoch]);\n\n  if (!ctx) {\n    return fallback;\n  }\n  return ctx.translator;\n}\n\n/**\n * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.\n *\n * @public\n */\nexport function useLocale(): Locale {\n  const ctx = useContext(I18nContext);\n  return ctx?.locale ?? DEFAULT_LOCALE;\n}\n"],"mappings":";;;;AAyBA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,oBAAoB,cAAyC,KAAA,CAAS;;;;;;AAOnF,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,MAAM,CAAC,eAAe,sBAAsB,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAEtF,gBAAgB;EACd,OAAO,2BAA2B,mBAAmB,CAAC;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,cAAc;EAE7B,OAAO,iBAAiB,oBAAoB,cAAc,GAAG,cAAc;CAC7E,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  type Translations,\n  type Translator,\n} from '@videojs/core/i18n';\nimport { createContext, useContext, useEffect, useMemo, useReducer } from 'react';\n\nexport type AddLocaleRoot = () => () => void;\n\nexport interface I18nContextValue {\n  translator: Translator;\n  locale: Locale;\n  /** True when the locale resolves from an explicit provider prop. */\n  localeFromProp: boolean;\n  /** @internal True when the nearest provider received an explicit locale prop. */\n  localeFromOwnProp?: boolean;\n  /** Overrides passed to this provider. */\n  translations?: Partial<Translations>;\n  /** Callback inherited by nested locale roots. */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\n/** React context carrying the active translator and locale. @public */\nexport const I18nContext = createContext<I18nContextValue | null>(null);\n\nexport const LocaleRootContext = createContext<AddLocaleRoot | undefined>(undefined);\n\n/**\n * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.\n *\n * @public\n */\nexport function useTranslator(): Translator {\n  const ctx = useContext(I18nContext);\n  const [registryEpoch, invalidateRegistry] = useReducer((epoch: number) => epoch + 1, 0);\n\n  useEffect(() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }, []);\n\n  const fallback = useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);\n  }, [registryEpoch]);\n\n  if (!ctx) {\n    return fallback;\n  }\n  return ctx.translator;\n}\n\n/**\n * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.\n *\n * @public\n */\nexport function useLocale(): Locale {\n  const ctx = useContext(I18nContext);\n  return ctx?.locale ?? DEFAULT_LOCALE;\n}\n"],"mappings":";;;;AA2BA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,oBAAoB,cAAyC,KAAA,CAAS;;;;;;AAOnF,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,MAAM,CAAC,eAAe,sBAAsB,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAEtF,gBAAgB;EACd,OAAO,2BAA2B,mBAAmB,CAAC;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,cAAc;EAE7B,OAAO,iBAAiB,oBAAoB,cAAc,GAAG,cAAc;CAC7E,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}

package/dist/default/i18n/create-i18n.js

@@ -18,7 +18,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function createI18n(options) {
 	const loader = options?.loader ?? loadLocale;
-	function I18nProviderRoot({ locale: localeProp, langRootRef, parentLocale, localeFromProp = localeProp !== void 0, translations: translationsProp, children, onActiveLocaleChange, parentAddLocaleRoot }) {
+	function I18nProviderRoot({ locale: localeProp, langRootRef, parentLocale, localeFromProp = localeProp !== void 0, localeFromOwnProp = localeProp !== void 0, translations: translationsProp, children, onActiveLocaleChange, parentAddLocaleRoot }) {
 		const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);
 		const ambientLang = useAmbientLang(langRootRef !== void 0, langRootElement);
 		const resolvedLocale = useMemo(() => effectiveLocale(localeProp, ambientLang ?? parentLocale), [
@@ -33,12 +33,14 @@ function createI18n(options) {
 			translator,
 			locale: resolvedLocale,
 			localeFromProp,
+			localeFromOwnProp,
 			...translationsProp !== void 0 ? { translations: translationsProp } : {},
 			...onActiveLocaleChange !== void 0 ? { onActiveLocaleChange } : {}
 		}), [
 			translator,
 			resolvedLocale,
 			localeFromProp,
+			localeFromOwnProp,
 			translationsProp,
 			onActiveLocaleChange
 		]);

package/dist/default/i18n/create-i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["import {\n  createTranslator,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  type Locale,\n  type Translations,\n} from '@videojs/core/i18n';\nimport { effectiveLocale } from '@videojs/utils/dom';\nimport { type Context, type ReactNode, type RefObject, useContext, useMemo } from 'react';\n\nimport { I18nContext, type I18nContextValue, LocaleRootContext, useLocale, useTranslator } from './context';\nimport { getProviderRootProps, type I18nProviderRootProps } from './get-provider-root-props';\nimport { useAmbientLang } from './use-ambient-lang';\nimport { useLangRootElement } from './use-lang-root-element';\nimport { useLazyTranslations } from './use-lazy-translations';\nimport { useLocaleRootNotifications } from './use-locale-root-notifications';\nimport { useMergedTranslations } from './use-merged-translations';\n\nexport interface CreateI18nOptions {\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;\n}\n\nexport interface I18nProviderProps {\n  /**\n   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM\n   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`\n   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,\n   * or when subtree moves alter which ancestor supplies `lang`. For SSR, pass `locale` explicitly.\n   */\n  locale?: Locale;\n  /**\n   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is\n   * omitted—for example a ref to your player shell `HTMLElement`.\n   */\n  langRootRef?: RefObject<Element | null>;\n  /**\n   * Per-locale string overrides merged on top of the global registry and any lazy built-in\n   * packs for {@link locale}. Applies to translated\n   * `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.\n   *\n   * @example\n   * ```tsx\n   * <I18nProvider locale=\"ja\" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>\n   *   <VideoSkin />\n   * </I18nProvider>\n   * ```\n   */\n  translations?: Partial<Translations>;\n  children: ReactNode;\n  /** Fires when the resolved locale changes (caption selection hooks may use this later). */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\nexport type { I18nContextValue } from './context';\n\nexport interface CreateI18nResult {\n  I18nContext: Context<I18nContextValue | null>;\n  I18nProvider: (props: I18nProviderProps) => ReactNode;\n  useTranslator: typeof useTranslator;\n  useLocale: typeof useLocale;\n}\n\n/**\n * Creates an i18n provider and hooks for the shared React i18n context.\n *\n * @param options - Optional hooks such as custom built-in locale loading.\n * @public\n */\nexport function createI18n(options?: CreateI18nOptions): CreateI18nResult {\n  const loader = options?.loader ?? defaultLoader;\n\n  function I18nProviderRoot({\n    locale: localeProp,\n    langRootRef,\n    parentLocale,\n    localeFromProp = localeProp !== undefined,\n    translations: translationsProp,\n    children,\n    onActiveLocaleChange,\n    parentAddLocaleRoot,\n  }: I18nProviderRootProps): ReactNode {\n    const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);\n    const ambientLang = useAmbientLang(langRootRef !== undefined, langRootElement);\n    const resolvedLocale = useMemo(\n      () => effectiveLocale<Locale>(localeProp, ambientLang ?? parentLocale),\n      [localeProp, ambientLang, parentLocale]\n    );\n\n    const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);\n    const lazyLayer = useLazyTranslations(resolvedLocale, loader);\n    const translations = useMergedTranslations(resolvedLocale, lazyLayer, translationsProp);\n\n    const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);\n\n    const value = useMemo<I18nContextValue>(\n      () => ({\n        translator,\n        locale: resolvedLocale,\n        localeFromProp,\n        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, translationsProp, onActiveLocaleChange]\n    );\n\n    return (\n      <LocaleRootContext.Provider value={addLocaleRoot}>\n        <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n      </LocaleRootContext.Provider>\n    );\n  }\n\n  function I18nProvider(props: I18nProviderProps): ReactNode {\n    const parent = useContext(I18nContext);\n    const parentAddLocaleRoot = useContext(LocaleRootContext);\n\n    const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);\n    if (!rootProps) return props.children;\n\n    return <I18nProviderRoot {...rootProps} />;\n  }\n\n  return { I18nContext, I18nProvider, useTranslator, useLocale };\n}\n\nconst defaultI18n = createI18n();\n\n/**\n * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for\n * translated controls, forced locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,cAAc,kBACd,UACA,sBACA,uBACmC;EACnC,MAAM,kBAAkB,mBAAmB,aAAa,mBAAmB;EAC3E,MAAM,cAAc,eAAe,gBAAgB,KAAA,GAAW,eAAe;EAC7E,MAAM,iBAAiB,cACf,gBAAwB,YAAY,eAAe,YAAY,GACrE;GAAC;GAAY;GAAa;EAAY,CACxC;EAEA,MAAM,gBAAgB,2BAA2B,gBAAgB,oBAAoB;EAErF,MAAM,eAAe,sBAAsB,gBADzB,oBAAoB,gBAAgB,MACa,GAAG,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;GACA,GAAI,qBAAqB,KAAA,IAAY,EAAE,cAAc,iBAAiB,IAAI,CAAC;GAC3E,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACvE,IACA;GAAC;GAAY;GAAgB;GAAgB;GAAkB;EAAoB,CACrF;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EAIzD,MAAM,YAAY,qBAAqB,OAHxB,WAAW,WAGyB,GAFvB,WAAW,iBAEiC,CAAC;EACzE,IAAI,CAAC,WAAW,OAAO,MAAM;EAE7B,OAAO,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;CAC3C;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}
+{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["import {\n  createTranslator,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  type Locale,\n  type Translations,\n} from '@videojs/core/i18n';\nimport { effectiveLocale } from '@videojs/utils/dom';\nimport { type Context, type ReactNode, type RefObject, useContext, useMemo } from 'react';\n\nimport { I18nContext, type I18nContextValue, LocaleRootContext, useLocale, useTranslator } from './context';\nimport { getProviderRootProps, type I18nProviderRootProps } from './get-provider-root-props';\nimport { useAmbientLang } from './use-ambient-lang';\nimport { useLangRootElement } from './use-lang-root-element';\nimport { useLazyTranslations } from './use-lazy-translations';\nimport { useLocaleRootNotifications } from './use-locale-root-notifications';\nimport { useMergedTranslations } from './use-merged-translations';\n\nexport interface CreateI18nOptions {\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;\n}\n\nexport interface I18nProviderProps {\n  /**\n   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM\n   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`\n   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,\n   * or when subtree moves alter which ancestor supplies `lang`. For SSR, pass `locale` explicitly.\n   */\n  locale?: Locale;\n  /**\n   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is\n   * omitted—for example a ref to your player shell `HTMLElement`.\n   */\n  langRootRef?: RefObject<Element | null>;\n  /**\n   * Per-locale string overrides merged on top of the global registry and any lazy built-in\n   * packs for {@link locale}. Applies to translated\n   * `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.\n   *\n   * @example\n   * ```tsx\n   * <I18nProvider locale=\"ja\" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>\n   *   <VideoSkin />\n   * </I18nProvider>\n   * ```\n   */\n  translations?: Partial<Translations>;\n  children: ReactNode;\n  /** Fires when the resolved locale changes (caption selection hooks may use this later). */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\nexport type { I18nContextValue } from './context';\n\nexport interface CreateI18nResult {\n  I18nContext: Context<I18nContextValue | null>;\n  I18nProvider: (props: I18nProviderProps) => ReactNode;\n  useTranslator: typeof useTranslator;\n  useLocale: typeof useLocale;\n}\n\n/**\n * Creates an i18n provider and hooks for the shared React i18n context.\n *\n * @param options - Optional hooks such as custom built-in locale loading.\n * @public\n */\nexport function createI18n(options?: CreateI18nOptions): CreateI18nResult {\n  const loader = options?.loader ?? defaultLoader;\n\n  function I18nProviderRoot({\n    locale: localeProp,\n    langRootRef,\n    parentLocale,\n    localeFromProp = localeProp !== undefined,\n    localeFromOwnProp = localeProp !== undefined,\n    translations: translationsProp,\n    children,\n    onActiveLocaleChange,\n    parentAddLocaleRoot,\n  }: I18nProviderRootProps): ReactNode {\n    const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);\n    const ambientLang = useAmbientLang(langRootRef !== undefined, langRootElement);\n    const resolvedLocale = useMemo(\n      () => effectiveLocale<Locale>(localeProp, ambientLang ?? parentLocale),\n      [localeProp, ambientLang, parentLocale]\n    );\n\n    const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);\n    const lazyLayer = useLazyTranslations(resolvedLocale, loader);\n    const translations = useMergedTranslations(resolvedLocale, lazyLayer, translationsProp);\n\n    const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);\n\n    const value = useMemo<I18nContextValue>(\n      () => ({\n        translator,\n        locale: resolvedLocale,\n        localeFromProp,\n        localeFromOwnProp,\n        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, localeFromOwnProp, translationsProp, onActiveLocaleChange]\n    );\n\n    return (\n      <LocaleRootContext.Provider value={addLocaleRoot}>\n        <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n      </LocaleRootContext.Provider>\n    );\n  }\n\n  function I18nProvider(props: I18nProviderProps): ReactNode {\n    const parent = useContext(I18nContext);\n    const parentAddLocaleRoot = useContext(LocaleRootContext);\n\n    const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);\n    if (!rootProps) return props.children;\n\n    return <I18nProviderRoot {...rootProps} />;\n  }\n\n  return { I18nContext, I18nProvider, useTranslator, useLocale };\n}\n\nconst defaultI18n = createI18n();\n\n/**\n * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for\n * translated controls, forced locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,oBAAoB,eAAe,KAAA,GACnC,cAAc,kBACd,UACA,sBACA,uBACmC;EACnC,MAAM,kBAAkB,mBAAmB,aAAa,mBAAmB;EAC3E,MAAM,cAAc,eAAe,gBAAgB,KAAA,GAAW,eAAe;EAC7E,MAAM,iBAAiB,cACf,gBAAwB,YAAY,eAAe,YAAY,GACrE;GAAC;GAAY;GAAa;EAAY,CACxC;EAEA,MAAM,gBAAgB,2BAA2B,gBAAgB,oBAAoB;EAErF,MAAM,eAAe,sBAAsB,gBADzB,oBAAoB,gBAAgB,MACa,GAAG,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;GACA;GACA,GAAI,qBAAqB,KAAA,IAAY,EAAE,cAAc,iBAAiB,IAAI,CAAC;GAC3E,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACvE,IACA;GAAC;GAAY;GAAgB;GAAgB;GAAmB;GAAkB;EAAoB,CACxG;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EAIzD,MAAM,YAAY,qBAAqB,OAHxB,WAAW,WAGyB,GAFvB,WAAW,iBAEiC,CAAC;EACzE,IAAI,CAAC,WAAW,OAAO,MAAM;EAE7B,OAAO,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;CAC3C;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}

package/dist/default/i18n/get-provider-root-props.js

@@ -19,15 +19,17 @@ function mergeTranslations(parent, child) {
 function getProviderRootProps(props, parent, parentAddLocaleRoot) {
 	const hasOverrides = props.locale !== void 0 || props.translations !== void 0 || props.onActiveLocaleChange !== void 0;
 	const langRootOnly = props.langRootRef !== void 0 && !hasOverrides;
-	if (parent && !hasOverrides && (!langRootOnly || parent.localeFromProp)) return;
+	if (parent && !hasOverrides && (!langRootOnly || (parent.localeFromOwnProp ?? parent.localeFromProp))) return;
 	const inheritedLocale = props.locale ?? (props.langRootRef === void 0 ? parent?.locale : void 0);
 	const parentLocale = props.langRootRef !== void 0 ? parent?.locale : void 0;
 	const inheritedTranslations = props.translations !== void 0 && parent?.translations !== void 0 ? mergeTranslations(parent.translations, props.translations) : props.translations ?? (langRootOnly ? parent?.translations : void 0);
 	const onActiveLocaleChange = props.onActiveLocaleChange ?? parent?.onActiveLocaleChange;
+	const localeFromProp = props.locale !== void 0 || props.langRootRef === void 0 && parent?.localeFromProp === true;
 	return {
 		...props,
 		...inheritedLocale !== void 0 ? { locale: inheritedLocale } : {},
-		localeFromProp: props.locale !== void 0,
+		localeFromProp,
+		localeFromOwnProp: props.locale !== void 0,
 		...parentLocale !== void 0 ? { parentLocale } : {},
 		...inheritedTranslations !== void 0 ? { translations: inheritedTranslations } : {},
 		...onActiveLocaleChange !== void 0 ? { onActiveLocaleChange } : {},

package/dist/default/i18n/get-provider-root-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-provider-root-props.js","names":[],"sources":["../../../src/i18n/get-provider-root-props.ts"],"sourcesContent":["import type { AddLocaleRoot, I18nContextValue } from './context';\nimport type { I18nProviderProps } from './create-i18n';\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\nfunction mergeTranslations(\n  parent: I18nProviderProps['translations'],\n  child: I18nProviderProps['translations']\n): I18nProviderProps['translations'] {\n  return {\n    ...parent,\n    ...child,\n    ...(parent && child\n      ? Object.fromEntries(\n          Object.keys(parent)\n            .filter((key) => isRecord(parent[key]) && isRecord(child[key]))\n            .map((key) => {\n              const parentValue = parent[key];\n              const childValue = child[key];\n              return [\n                key,\n                isRecord(parentValue) && isRecord(childValue) ? { ...parentValue, ...childValue } : childValue,\n              ];\n            })\n        )\n      : {}),\n  } as I18nProviderProps['translations'];\n}\n\nexport interface I18nProviderRootProps extends I18nProviderProps {\n  parentLocale?: I18nContextValue['locale'];\n  localeFromProp?: boolean;\n  parentAddLocaleRoot?: AddLocaleRoot;\n}\n\nexport function getProviderRootProps(\n  props: I18nProviderProps,\n  parent: I18nContextValue | null,\n  parentAddLocaleRoot?: AddLocaleRoot\n): I18nProviderRootProps | undefined {\n  const hasOverrides =\n    props.locale !== undefined || props.translations !== undefined || props.onActiveLocaleChange !== undefined;\n  const langRootOnly = props.langRootRef !== undefined && !hasOverrides;\n\n  // Nested providers without their own locale root or overrides can use the\n  // existing parent context instead of mounting another root.\n  if (parent && !hasOverrides && (!langRootOnly || parent.localeFromProp)) {\n    return undefined;\n  }\n\n  const inheritedLocale = props.locale ?? (props.langRootRef === undefined ? parent?.locale : undefined);\n  const parentLocale = props.langRootRef !== undefined ? parent?.locale : undefined;\n  const inheritedTranslations =\n    props.translations !== undefined && parent?.translations !== undefined\n      ? mergeTranslations(parent.translations, props.translations)\n      : (props.translations ?? (langRootOnly ? parent?.translations : undefined));\n  const onActiveLocaleChange = props.onActiveLocaleChange ?? parent?.onActiveLocaleChange;\n\n  return {\n    ...props,\n    ...(inheritedLocale !== undefined ? { locale: inheritedLocale } : {}),\n    localeFromProp: props.locale !== undefined,\n    ...(parentLocale !== undefined ? { parentLocale } : {}),\n    ...(inheritedTranslations !== undefined ? { translations: inheritedTranslations } : {}),\n    ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n    ...(parentAddLocaleRoot !== undefined ? { parentAddLocaleRoot } : {}),\n  };\n}\n"],"mappings":";AAGA,SAAS,SAAS,OAAkD;CAClE,OAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEA,SAAS,kBACP,QACA,OACmC;CACnC,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAI,UAAU,QACV,OAAO,YACL,OAAO,KAAK,MAAM,CAAC,CAChB,QAAQ,QAAQ,SAAS,OAAO,IAAI,KAAK,SAAS,MAAM,IAAI,CAAC,CAAC,CAC9D,KAAK,QAAQ;GACZ,MAAM,cAAc,OAAO;GAC3B,MAAM,aAAa,MAAM;GACzB,OAAO,CACL,KACA,SAAS,WAAW,KAAK,SAAS,UAAU,IAAI;IAAE,GAAG;IAAa,GAAG;GAAW,IAAI,UACtF;EACF,CAAC,CACL,IACA,CAAC;CACP;AACF;AAQA,SAAgB,qBACd,OACA,QACA,qBACmC;CACnC,MAAM,eACJ,MAAM,WAAW,KAAA,KAAa,MAAM,iBAAiB,KAAA,KAAa,MAAM,yBAAyB,KAAA;CACnG,MAAM,eAAe,MAAM,gBAAgB,KAAA,KAAa,CAAC;CAIzD,IAAI,UAAU,CAAC,iBAAiB,CAAC,gBAAgB,OAAO,iBACtD;CAGF,MAAM,kBAAkB,MAAM,WAAW,MAAM,gBAAgB,KAAA,IAAY,QAAQ,SAAS,KAAA;CAC5F,MAAM,eAAe,MAAM,gBAAgB,KAAA,IAAY,QAAQ,SAAS,KAAA;CACxE,MAAM,wBACJ,MAAM,iBAAiB,KAAA,KAAa,QAAQ,iBAAiB,KAAA,IACzD,kBAAkB,OAAO,cAAc,MAAM,YAAY,IACxD,MAAM,iBAAiB,eAAe,QAAQ,eAAe,KAAA;CACpE,MAAM,uBAAuB,MAAM,wBAAwB,QAAQ;CAEnE,OAAO;EACL,GAAG;EACH,GAAI,oBAAoB,KAAA,IAAY,EAAE,QAAQ,gBAAgB,IAAI,CAAC;EACnE,gBAAgB,MAAM,WAAW,KAAA;EACjC,GAAI,iBAAiB,KAAA,IAAY,EAAE,aAAa,IAAI,CAAC;EACrD,GAAI,0BAA0B,KAAA,IAAY,EAAE,cAAc,sBAAsB,IAAI,CAAC;EACrF,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACrE,GAAI,wBAAwB,KAAA,IAAY,EAAE,oBAAoB,IAAI,CAAC;CACrE;AACF"}
+{"version":3,"file":"get-provider-root-props.js","names":[],"sources":["../../../src/i18n/get-provider-root-props.ts"],"sourcesContent":["import type { AddLocaleRoot, I18nContextValue } from './context';\nimport type { I18nProviderProps } from './create-i18n';\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\nfunction mergeTranslations(\n  parent: I18nProviderProps['translations'],\n  child: I18nProviderProps['translations']\n): I18nProviderProps['translations'] {\n  return {\n    ...parent,\n    ...child,\n    ...(parent && child\n      ? Object.fromEntries(\n          Object.keys(parent)\n            .filter((key) => isRecord(parent[key]) && isRecord(child[key]))\n            .map((key) => {\n              const parentValue = parent[key];\n              const childValue = child[key];\n              return [\n                key,\n                isRecord(parentValue) && isRecord(childValue) ? { ...parentValue, ...childValue } : childValue,\n              ];\n            })\n        )\n      : {}),\n  } as I18nProviderProps['translations'];\n}\n\nexport interface I18nProviderRootProps extends I18nProviderProps {\n  parentLocale?: I18nContextValue['locale'];\n  localeFromProp?: boolean;\n  localeFromOwnProp?: boolean;\n  parentAddLocaleRoot?: AddLocaleRoot;\n}\n\nexport function getProviderRootProps(\n  props: I18nProviderProps,\n  parent: I18nContextValue | null,\n  parentAddLocaleRoot?: AddLocaleRoot\n): I18nProviderRootProps | undefined {\n  const hasOverrides =\n    props.locale !== undefined || props.translations !== undefined || props.onActiveLocaleChange !== undefined;\n  const langRootOnly = props.langRootRef !== undefined && !hasOverrides;\n\n  // Nested providers without their own locale root or overrides can use the\n  // existing parent context instead of mounting another root.\n  if (parent && !hasOverrides && (!langRootOnly || (parent.localeFromOwnProp ?? parent.localeFromProp))) {\n    return undefined;\n  }\n\n  const inheritedLocale = props.locale ?? (props.langRootRef === undefined ? parent?.locale : undefined);\n  const parentLocale = props.langRootRef !== undefined ? parent?.locale : undefined;\n  const inheritedTranslations =\n    props.translations !== undefined && parent?.translations !== undefined\n      ? mergeTranslations(parent.translations, props.translations)\n      : (props.translations ?? (langRootOnly ? parent?.translations : undefined));\n  const onActiveLocaleChange = props.onActiveLocaleChange ?? parent?.onActiveLocaleChange;\n  const localeFromProp =\n    props.locale !== undefined || (props.langRootRef === undefined && parent?.localeFromProp === true);\n\n  return {\n    ...props,\n    ...(inheritedLocale !== undefined ? { locale: inheritedLocale } : {}),\n    localeFromProp,\n    localeFromOwnProp: props.locale !== undefined,\n    ...(parentLocale !== undefined ? { parentLocale } : {}),\n    ...(inheritedTranslations !== undefined ? { translations: inheritedTranslations } : {}),\n    ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n    ...(parentAddLocaleRoot !== undefined ? { parentAddLocaleRoot } : {}),\n  };\n}\n"],"mappings":";AAGA,SAAS,SAAS,OAAkD;CAClE,OAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC5E;AAEA,SAAS,kBACP,QACA,OACmC;CACnC,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAI,UAAU,QACV,OAAO,YACL,OAAO,KAAK,MAAM,CAAC,CAChB,QAAQ,QAAQ,SAAS,OAAO,IAAI,KAAK,SAAS,MAAM,IAAI,CAAC,CAAC,CAC9D,KAAK,QAAQ;GACZ,MAAM,cAAc,OAAO;GAC3B,MAAM,aAAa,MAAM;GACzB,OAAO,CACL,KACA,SAAS,WAAW,KAAK,SAAS,UAAU,IAAI;IAAE,GAAG;IAAa,GAAG;GAAW,IAAI,UACtF;EACF,CAAC,CACL,IACA,CAAC;CACP;AACF;AASA,SAAgB,qBACd,OACA,QACA,qBACmC;CACnC,MAAM,eACJ,MAAM,WAAW,KAAA,KAAa,MAAM,iBAAiB,KAAA,KAAa,MAAM,yBAAyB,KAAA;CACnG,MAAM,eAAe,MAAM,gBAAgB,KAAA,KAAa,CAAC;CAIzD,IAAI,UAAU,CAAC,iBAAiB,CAAC,iBAAiB,OAAO,qBAAqB,OAAO,kBACnF;CAGF,MAAM,kBAAkB,MAAM,WAAW,MAAM,gBAAgB,KAAA,IAAY,QAAQ,SAAS,KAAA;CAC5F,MAAM,eAAe,MAAM,gBAAgB,KAAA,IAAY,QAAQ,SAAS,KAAA;CACxE,MAAM,wBACJ,MAAM,iBAAiB,KAAA,KAAa,QAAQ,iBAAiB,KAAA,IACzD,kBAAkB,OAAO,cAAc,MAAM,YAAY,IACxD,MAAM,iBAAiB,eAAe,QAAQ,eAAe,KAAA;CACpE,MAAM,uBAAuB,MAAM,wBAAwB,QAAQ;CACnE,MAAM,iBACJ,MAAM,WAAW,KAAA,KAAc,MAAM,gBAAgB,KAAA,KAAa,QAAQ,mBAAmB;CAE/F,OAAO;EACL,GAAG;EACH,GAAI,oBAAoB,KAAA,IAAY,EAAE,QAAQ,gBAAgB,IAAI,CAAC;EACnE;EACA,mBAAmB,MAAM,WAAW,KAAA;EACpC,GAAI,iBAAiB,KAAA,IAAY,EAAE,aAAa,IAAI,CAAC;EACrD,GAAI,0BAA0B,KAAA,IAAY,EAAE,cAAc,sBAAsB,IAAI,CAAC;EACrF,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACrE,GAAI,wBAAwB,KAAA,IAAY,EAAE,oBAAoB,IAAI,CAAC;CACrE;AACF"}

package/dist/default/player/container.js

@@ -1,15 +1,17 @@
-import { useTranslator } from "../i18n/context.js";
+import { I18nContext, useTranslator } from "../i18n/context.js";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useContainerAttach } from "./context.js";
 import { PopupGroupProvider } from "./popup-group-context.js";
 import { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, createPopupGroup, focusContainer } from "@videojs/core/dom";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useContext, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { labelText } from "@videojs/core/i18n/text/container";
+import { getTextDirection } from "@videojs/utils/i18n";
 //#region src/player/container.tsx
-const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_CONTAINER_TAB_INDEX, role = DEFAULT_CONTAINER_ROLE, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_CONTAINER_TAB_INDEX, role = DEFAULT_CONTAINER_ROLE, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, lang: langProp, dir: dirProp, ...props }, ref) {
 	const setContainer = useContainerAttach();
 	const translator = useTranslator();
+	const i18n = useContext(I18nContext);
 	const [popupGroup] = useState(() => createPopupGroup());
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(ref, internalRef);
@@ -23,14 +25,21 @@ const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_C
 		if (!el) return;
 		focusContainer(el);
 	};
+	const accessibleNameProps = ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	} : { "aria-label": translator(labelText) };
+	const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : void 0);
+	const localeProps = {
+		lang,
+		dir: dirProp ?? (lang ? getTextDirection(lang) : void 0)
+	};
 	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
 		role,
 		tabIndex,
-		...ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? {
-			"aria-label": ariaLabel,
-			"aria-labelledby": ariaLabelledBy
-		} : { "aria-label": translator(labelText) },
+		...accessibleNameProps,
+		...localeProps,
 		...props,
 		onPointerUp: handlePointerUp,
 		children: /* @__PURE__ */ jsx(PopupGroupProvider, {

package/dist/default/player/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const [popupGroup] = useState(() => createPopupGroup());\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...props}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;AAyBA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,eAAe,EAAE;CACnB;CAOA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GATF,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;GAAE,cAAc;GAAW,mBAAmB;EAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;EAQxC,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["import {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport { getTextDirection } from '@videojs/utils/i18n';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { I18nContext, useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    lang: langProp,\n    dir: dirProp,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const i18n = useContext(I18nContext);\n  const [popupGroup] = useState(() => createPopupGroup());\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n  const lang = langProp ?? (i18n?.localeFromProp ? i18n.locale : undefined);\n  const localeProps = {\n    lang,\n    dir: dirProp ?? (lang ? getTextDirection(lang) : undefined),\n  };\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...localeProps}\n      {...props}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,MAAM,UACN,KAAK,SACL,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,OAAO,WAAW,WAAW;CACnC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,eAAe,EAAE;CACnB;CAEA,MAAM,sBACJ,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;EAAE,cAAc;EAAW,mBAAmB;CAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;CAC5C,MAAM,OAAO,aAAa,MAAM,iBAAiB,KAAK,SAAS,KAAA;CAC/D,MAAM,cAAc;EAClB;EACA,KAAK,YAAY,OAAO,iBAAiB,IAAI,IAAI,KAAA;CACnD;CAEA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}

package/dist/default/presets/audio/minimal-skin.css

@@ -170,6 +170,10 @@
   text-shadow: 0 1px 0 var(--shadow-current-color);
   background-color: var(--controls-background-color);
   backdrop-filter: var(--controls-backdrop-filter);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time-controls {
@@ -179,12 +183,20 @@
   gap: calc(var(--spacing) * 3);
   align-items: center;
   container: media-time-controls / inline-size;
+
+  &:dir(rtl) {
+    flex-direction: row;
+  }
 }
 
 .media-minimal-skin .media-time-group {
   display: flex;
   gap: calc(var(--spacing) * 1);
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time {
@@ -219,6 +231,10 @@
 @container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
+
+    &:dir(rtl) {
+      flex-direction: row-reverse;
+    }
   }
 
   .media-minimal-skin .media-time--duration,
@@ -417,6 +433,10 @@
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-badge {
@@ -439,10 +459,15 @@
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-minimal-skin .media-icon--flipped {
+.media-minimal-skin .media-icon--flipped,
+.media-minimal-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-minimal-skin .media-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -986,6 +1011,10 @@
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1027,7 +1056,7 @@
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1071,8 +1100,7 @@
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
   }
 
@@ -1105,8 +1133,8 @@
   }
 
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1123,8 +1151,8 @@
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
@@ -1164,6 +1192,10 @@
       translate: -100% 0;
     }
 
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
+
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {

package/dist/default/presets/audio/skin.css

@@ -195,6 +195,10 @@
   container: media-controls / inline-size;
   text-shadow: 0 1px 0 var(--shadow-current-color);
   border-radius: calc(Infinity * 1px);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-time-controls {
@@ -204,6 +208,10 @@
   align-items: center;
   container: media-time-controls / inline-size;
 
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
+
   > .media-time:last-child {
     @container media-time-controls (width < 16rem) {
       display: none;
@@ -408,6 +416,10 @@
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-badge {
@@ -430,10 +442,15 @@
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-default-skin .media-icon--flipped {
+.media-default-skin .media-icon--flipped,
+.media-default-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-default-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-default-skin .media-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -978,6 +995,10 @@
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1020,7 +1041,7 @@
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1064,8 +1085,7 @@
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
 
     .media-icon {
@@ -1102,8 +1122,8 @@
   }
 
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1120,8 +1140,8 @@
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
@@ -1161,6 +1181,10 @@
       translate: -100% 0;
     }
 
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
+
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {

package/dist/default/presets/live-audio/minimal-skin.css

@@ -170,6 +170,10 @@
   text-shadow: 0 1px 0 var(--shadow-current-color);
   background-color: var(--controls-background-color);
   backdrop-filter: var(--controls-backdrop-filter);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time-controls {
@@ -179,12 +183,20 @@
   gap: calc(var(--spacing) * 3);
   align-items: center;
   container: media-time-controls / inline-size;
+
+  &:dir(rtl) {
+    flex-direction: row;
+  }
 }
 
 .media-minimal-skin .media-time-group {
   display: flex;
   gap: calc(var(--spacing) * 1);
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-time {
@@ -219,6 +231,10 @@
 @container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
+
+    &:dir(rtl) {
+      flex-direction: row-reverse;
+    }
   }
 
   .media-minimal-skin .media-time--duration,
@@ -417,6 +433,10 @@
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-minimal-skin .media-badge {
@@ -439,10 +459,15 @@
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-minimal-skin .media-icon--flipped {
+.media-minimal-skin .media-icon--flipped,
+.media-minimal-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-minimal-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-minimal-skin .media-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -986,6 +1011,10 @@
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1027,7 +1056,7 @@
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1071,8 +1100,7 @@
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
   }
 
@@ -1105,8 +1133,8 @@
   }
 
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1123,8 +1151,8 @@
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
@@ -1164,6 +1192,10 @@
       translate: -100% 0;
     }
 
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
+
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {

package/dist/default/presets/live-audio/skin.css

@@ -195,6 +195,10 @@
   container: media-controls / inline-size;
   text-shadow: 0 1px 0 var(--shadow-current-color);
   border-radius: calc(Infinity * 1px);
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-time-controls {
@@ -204,6 +208,10 @@
   align-items: center;
   container: media-time-controls / inline-size;
 
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
+
   > .media-time:last-child {
     @container media-time-controls (width < 16rem) {
       display: none;
@@ -408,6 +416,10 @@
   display: flex;
   gap: 1px;
   align-items: center;
+
+  &:dir(rtl) {
+    flex-direction: row-reverse;
+  }
 }
 
 .media-default-skin .media-badge {
@@ -430,10 +442,15 @@
   width: var(--media-icon-size);
   height: var(--media-icon-size);
 }
-.media-default-skin .media-icon--flipped {
+.media-default-skin .media-icon--flipped,
+.media-default-skin:dir(rtl) .media-menu__chevron {
   scale: -1 1;
 }
 
+.media-default-skin:dir(rtl) .media-menu__chevron.media-icon--flipped {
+  scale: 1 1;
+}
+
 .media-default-skin .media-slider {
   --track-size: calc(var(--spacing) * 1);
   --track-highlighted-size: calc(var(--spacing) * 1.75);
@@ -978,6 +995,10 @@
       filter: blur(8px);
       translate: 100% 0;
     }
+
+    &:dir(rtl):where([data-starting-style], [data-ending-style]) {
+      translate: -100% 0;
+    }
   }
 
   .media-menu__separator {
@@ -1020,7 +1041,7 @@
     gap: calc(var(--spacing) * 1.5);
     align-items: center;
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    text-align: left;
+    text-align: start;
     text-shadow: 0 1px 0 var(--shadow-current-color);
     cursor: pointer;
     user-select: none;
@@ -1064,8 +1085,7 @@
 
   .media-menu__indicator {
     flex-shrink: 0;
-    margin-right: calc(var(--spacing) * -1);
-    margin-left: auto;
+    margin-inline: auto calc(var(--spacing) * -1);
     opacity: 0;
 
     .media-icon {
@@ -1102,8 +1122,8 @@
   }
 
   .media-menu__tier {
+    padding-inline-start: calc(var(--spacing) * 0.5);
     padding-top: 1px;
-    padding-left: calc(var(--spacing) * 0.5);
     font-size: var(--font-size-tiny);
     font-weight: 600;
     line-height: 1;
@@ -1120,8 +1140,8 @@
     gap: calc(var(--spacing) * 1);
     align-items: center;
     min-width: 0;
-    padding-left: calc(var(--spacing) * 2);
-    margin-left: auto;
+    padding-inline-start: calc(var(--spacing) * 2);
+    margin-inline-start: auto;
     color: oklch(from currentColor l c h / 0.65);
   }
 
@@ -1161,6 +1181,10 @@
       translate: -100% 0;
     }
 
+    &:dir(rtl)[data-submenu-expanded="true"] > :not([data-submenu]) {
+      translate: 100% 0;
+    }
+
     /* WebKit can restart the covered-content transition while the
        anchor-positioned highlight remains active. */
     &[data-submenu-expanded] > :not([data-submenu])::before {