@ui5/webcomponents-base 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/asset-registries/Themes.d.ts

@@ -1,9 +1,12 @@
 type ThemeData = string;
 type ThemeLoader = (themeName: string) => Promise<string>;
-declare const registerThemePropertiesLoader: (packageName: string, themeName: string, loader: ThemeLoader) => void;
+type CSSVariablesTarget = "root" | "host";
+declare const registerThemePropertiesLoader: (packageName: string, themeName: string, loader: ThemeLoader, cssVariablesTarget?: CSSVariablesTarget) => void;
 declare const registerCustomThemePropertiesLoader: (packageName: string, themeName: string, loader: ThemeLoader) => void;
 declare const getThemeProperties: (packageName: string, themeName: string, externalThemeName?: string) => Promise<string | undefined>;
-declare const getRegisteredPackages: () => Set<string>;
+declare const getRegisteredPackages: () => Map<string, {
+    cssVariablesTarget: CSSVariablesTarget;
+}>;
 declare const isThemeRegistered: (theme: string) => boolean;
 export { registerThemePropertiesLoader, registerCustomThemePropertiesLoader, getThemeProperties, getRegisteredPackages, isThemeRegistered, };
 export type { ThemeData, ThemeLoader, };

package/dist/asset-registries/Themes.js

@@ -4,11 +4,11 @@ import { fireThemeRegistered } from "../theming/ThemeRegistered.js";
 const themeStyles = new Map();
 const loaders = new Map();
 const customLoaders = new Map();
-const registeredPackages = new Set();
+const registeredPackages = new Map();
 const registeredThemes = new Set();
-const registerThemePropertiesLoader = (packageName, themeName, loader) => {
+const registerThemePropertiesLoader = (packageName, themeName, loader, cssVariablesTarget = "root") => {
     loaders.set(`${packageName}/${themeName}`, loader);
-    registeredPackages.add(packageName);
+    registeredPackages.set(packageName, { cssVariablesTarget });
     registeredThemes.add(themeName);
     fireThemeRegistered(themeName);
 };

package/dist/asset-registries/Themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"Themes.js","sourceRoot":"","sources":["../../src/asset-registries/Themes.ts"],"names":[],"mappings":"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","sourcesContent":["import { DEFAULT_THEME } from \"../generated/AssetParameters.js\";\nimport { mergeStyles } from \"../ManagedStyles.js\";\nimport { fireThemeRegistered } from \"../theming/ThemeRegistered.js\";\n\ntype ThemeData = string;\ntype ThemeLoader = (themeName: string) => Promise<string>;\n\nconst themeStyles = new Map<string, string>();\nconst loaders = new Map<string, ThemeLoader>();\nconst customLoaders = new Map<string, ThemeLoader>();\nconst registeredPackages = new Set<string>();\nconst registeredThemes = new Set<string>();\n\nconst registerThemePropertiesLoader = (packageName: string, themeName: string, loader: ThemeLoader) => {\n\tloaders.set(`${packageName}/${themeName}`, loader);\n\tregisteredPackages.add(packageName);\n\tregisteredThemes.add(themeName);\n\tfireThemeRegistered(themeName);\n};\n\nconst registerCustomThemePropertiesLoader = (packageName: string, themeName: string, loader: ThemeLoader) => {\n\tcustomLoaders.set(`${packageName}/${themeName}`, loader);\n};\n\nconst getThemeProperties = async (packageName: string, themeName: string, externalThemeName?: string) => {\n\tconst cacheKey = `${packageName}_${themeName}_${externalThemeName || \"\"}`;\n\tconst cachedStyleData = themeStyles.get(cacheKey);\n\tif (cachedStyleData !== undefined) { // it's valid for style to be an empty string\n\t\treturn cachedStyleData;\n\t}\n\n\tif (!registeredThemes.has(themeName)) {\n\t\tconst regThemesStr = [...registeredThemes.values()].join(\", \");\n\t\tconsole.warn(`You have requested a non-registered theme ${themeName} - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */\n\t\treturn _getThemeProperties(packageName, DEFAULT_THEME);\n\t}\n\n\tconst [style, customStyle] = await Promise.all([\n\t\t_getThemeProperties(packageName, themeName),\n\t\texternalThemeName ? _getThemeProperties(packageName, externalThemeName, true) : undefined,\n\t]);\n\n\tconst styleData = mergeStyles(style, customStyle);\n\tif (styleData) {\n\t\tthemeStyles.set(cacheKey, styleData);\n\t}\n\n\treturn styleData;\n};\n\nconst _getThemeProperties = async (packageName: string, themeName: string, forCustomTheme = false) => {\n\tconst loadersMap = forCustomTheme ? customLoaders : loaders;\n\tconst loader = loadersMap.get(`${packageName}/${themeName}`);\n\tif (!loader) {\n\t\t// no themes for package\n\t\tif (!forCustomTheme) {\n\t\t\tconsole.error(`Theme [${themeName}] not registered for package [${packageName}]`); /* eslint-disable-line */\n\t\t}\n\t\treturn;\n\t}\n\tlet data;\n\ttry {\n\t\tdata = await loader(themeName);\n\t} catch (error: unknown) {\n\t\tconst e = error as Error;\n\t\tconsole.error(packageName, e.message); /* eslint-disable-line */\n\t\treturn;\n\t}\n\n\treturn data;\n};\n\nconst getRegisteredPackages = () => {\n\treturn registeredPackages;\n};\n\nconst isThemeRegistered = (theme: string) => {\n\treturn registeredThemes.has(theme);\n};\n\nexport {\n\tregisterThemePropertiesLoader,\n\tregisterCustomThemePropertiesLoader,\n\tgetThemeProperties,\n\tgetRegisteredPackages,\n\tisThemeRegistered,\n};\n\nexport type {\n\tThemeData,\n\tThemeLoader,\n};\n"]}
+{"version":3,"file":"Themes.js","sourceRoot":"","sources":["../../src/asset-registries/Themes.ts"],"names":[],"mappings":"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","sourcesContent":["import { DEFAULT_THEME } from \"../generated/AssetParameters.js\";\nimport { mergeStyles } from \"../ManagedStyles.js\";\nimport { fireThemeRegistered } from \"../theming/ThemeRegistered.js\";\n\ntype ThemeData = string;\ntype ThemeLoader = (themeName: string) => Promise<string>;\n\ntype CSSVariablesTarget = \"root\" | \"host\";\n\nconst themeStyles = new Map<string, string>();\nconst loaders = new Map<string, ThemeLoader>();\nconst customLoaders = new Map<string, ThemeLoader>();\nconst registeredPackages = new Map<string, { cssVariablesTarget: CSSVariablesTarget }>();\nconst registeredThemes = new Set<string>();\n\nconst registerThemePropertiesLoader = (packageName: string, themeName: string, loader: ThemeLoader, cssVariablesTarget: CSSVariablesTarget = \"root\") => {\n\tloaders.set(`${packageName}/${themeName}`, loader);\n\tregisteredPackages.set(packageName, { cssVariablesTarget });\n\tregisteredThemes.add(themeName);\n\tfireThemeRegistered(themeName);\n};\n\nconst registerCustomThemePropertiesLoader = (packageName: string, themeName: string, loader: ThemeLoader) => {\n\tcustomLoaders.set(`${packageName}/${themeName}`, loader);\n};\n\nconst getThemeProperties = async (packageName: string, themeName: string, externalThemeName?: string) => {\n\tconst cacheKey = `${packageName}_${themeName}_${externalThemeName || \"\"}`;\n\tconst cachedStyleData = themeStyles.get(cacheKey);\n\tif (cachedStyleData !== undefined) { // it's valid for style to be an empty string\n\t\treturn cachedStyleData;\n\t}\n\n\tif (!registeredThemes.has(themeName)) {\n\t\tconst regThemesStr = [...registeredThemes.values()].join(\", \");\n\t\tconsole.warn(`You have requested a non-registered theme ${themeName} - falling back to ${DEFAULT_THEME}. Registered themes are: ${regThemesStr}`); /* eslint-disable-line */\n\t\treturn _getThemeProperties(packageName, DEFAULT_THEME);\n\t}\n\n\tconst [style, customStyle] = await Promise.all([\n\t\t_getThemeProperties(packageName, themeName),\n\t\texternalThemeName ? _getThemeProperties(packageName, externalThemeName, true) : undefined,\n\t]);\n\n\tconst styleData = mergeStyles(style, customStyle);\n\tif (styleData) {\n\t\tthemeStyles.set(cacheKey, styleData);\n\t}\n\n\treturn styleData;\n};\n\nconst _getThemeProperties = async (packageName: string, themeName: string, forCustomTheme = false) => {\n\tconst loadersMap = forCustomTheme ? customLoaders : loaders;\n\tconst loader = loadersMap.get(`${packageName}/${themeName}`);\n\tif (!loader) {\n\t\t// no themes for package\n\t\tif (!forCustomTheme) {\n\t\t\tconsole.error(`Theme [${themeName}] not registered for package [${packageName}]`); /* eslint-disable-line */\n\t\t}\n\t\treturn;\n\t}\n\tlet data;\n\ttry {\n\t\tdata = await loader(themeName);\n\t} catch (error: unknown) {\n\t\tconst e = error as Error;\n\t\tconsole.error(packageName, e.message); /* eslint-disable-line */\n\t\treturn;\n\t}\n\n\treturn data;\n};\n\nconst getRegisteredPackages = () => {\n\treturn registeredPackages;\n};\n\nconst isThemeRegistered = (theme: string) => {\n\treturn registeredThemes.has(theme);\n};\n\nexport {\n\tregisterThemePropertiesLoader,\n\tregisterCustomThemePropertiesLoader,\n\tgetThemeProperties,\n\tgetRegisteredPackages,\n\tisThemeRegistered,\n};\n\nexport type {\n\tThemeData,\n\tThemeLoader,\n};\n"]}

package/dist/config/ConfigurationSync.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Stores value in shared map and fires a cross-runtime config change event.
+ * The firing runtime's own handler is skipped via the skip-guard pattern.
+ */
+declare const fireConfigChange: (name: string, value: unknown) => void;
+/**
+ * Registers a per-setting cross-runtime listener.
+ * The handler is only called when another runtime fires the change.
+ */
+declare const attachConfigChange: (name: string, handler: (value: any) => void) => void;
+/**
+ * Reads the last-set value from the shared values map.
+ * Used by late-booting runtimes to pick up values already set by others.
+ */
+declare const getSharedValue: <T>(name: string) => T | undefined;
+export { fireConfigChange, attachConfigChange, getSharedValue };

package/dist/config/ConfigurationSync.js

@@ -0,0 +1,42 @@
+import getSharedResource from "../getSharedResource.js";
+import EventProvider from "../EventProvider.js";
+const getEventProvider = () => getSharedResource("ConfigChange.eventProvider", new EventProvider());
+const getSharedValues = () => getSharedResource("ConfigChange.values", {});
+const CONFIG_CHANGE = "configChange";
+// Module-level skip flags — each runtime copy has its own Set,
+// so a runtime's own handler correctly skips when it fires.
+const skipFlags = new Set();
+/**
+ * Stores value in shared map and fires a cross-runtime config change event.
+ * The firing runtime's own handler is skipped via the skip-guard pattern.
+ */
+const fireConfigChange = (name, value) => {
+    getSharedValues()[name] = value;
+    skipFlags.add(name);
+    try {
+        getEventProvider().fireEvent(CONFIG_CHANGE, { name, value });
+    }
+    finally {
+        skipFlags.delete(name);
+    }
+};
+/**
+ * Registers a per-setting cross-runtime listener.
+ * The handler is only called when another runtime fires the change.
+ */
+const attachConfigChange = (name, handler) => {
+    getEventProvider().attachEvent(CONFIG_CHANGE, (detail) => {
+        if (detail.name === name && !skipFlags.has(name)) {
+            handler(detail.value);
+        }
+    });
+};
+/**
+ * Reads the last-set value from the shared values map.
+ * Used by late-booting runtimes to pick up values already set by others.
+ */
+const getSharedValue = (name) => {
+    return getSharedValues()[name];
+};
+export { fireConfigChange, attachConfigChange, getSharedValue };
+//# sourceMappingURL=ConfigurationSync.js.map

package/dist/config/ConfigurationSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationSync.js","sourceRoot":"","sources":["../../src/config/ConfigurationSync.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAIhD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAC,4BAA4B,EAAE,IAAI,aAAa,EAA4B,CAAC,CAAC;AAC9H,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAA0B,qBAAqB,EAAE,EAAE,CAAC,CAAC;AAEpG,MAAM,aAAa,GAAG,cAAc,CAAC;AAErC,+DAA+D;AAC/D,4DAA4D;AAC5D,MAAM,SAAS,GAAG,IAAI,GAAG,EAAU,CAAC;AAEpC;;;GAGG;AACH,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,KAAc,EAAQ,EAAE;IAC/D,eAAe,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;IAEhC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACpB,IAAI,CAAC;QACJ,gBAAgB,EAAE,CAAC,SAAS,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9D,CAAC;YAAS,CAAC;QACV,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;AACF,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAE,OAA6B,EAAQ,EAAE;IAChF,gBAAgB,EAAE,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC,MAA0B,EAAE,EAAE;QAC5E,IAAI,MAAM,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,cAAc,GAAG,CAAI,IAAY,EAAiB,EAAE;IACzD,OAAO,eAAe,EAAE,CAAC,IAAI,CAAkB,CAAC;AACjD,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import getSharedResource from \"../getSharedResource.js\";\nimport EventProvider from \"../EventProvider.js\";\n\ntype ConfigChangeDetail = { name: string; value: unknown };\n\nconst getEventProvider = () => getSharedResource(\"ConfigChange.eventProvider\", new EventProvider<ConfigChangeDetail, void>());\nconst getSharedValues = () => getSharedResource<Record<string, unknown>>(\"ConfigChange.values\", {});\n\nconst CONFIG_CHANGE = \"configChange\";\n\n// Module-level skip flags — each runtime copy has its own Set,\n// so a runtime's own handler correctly skips when it fires.\nconst skipFlags = new Set<string>();\n\n/**\n * Stores value in shared map and fires a cross-runtime config change event.\n * The firing runtime's own handler is skipped via the skip-guard pattern.\n */\nconst fireConfigChange = (name: string, value: unknown): void => {\n\tgetSharedValues()[name] = value;\n\n\tskipFlags.add(name);\n\ttry {\n\t\tgetEventProvider().fireEvent(CONFIG_CHANGE, { name, value });\n\t} finally {\n\t\tskipFlags.delete(name);\n\t}\n};\n\n/**\n * Registers a per-setting cross-runtime listener.\n * The handler is only called when another runtime fires the change.\n */\nconst attachConfigChange = (name: string, handler: (value: any) => void): void => { // eslint-disable-line\n\tgetEventProvider().attachEvent(CONFIG_CHANGE, (detail: ConfigChangeDetail) => {\n\t\tif (detail.name === name && !skipFlags.has(name)) {\n\t\t\thandler(detail.value);\n\t\t}\n\t});\n};\n\n/**\n * Reads the last-set value from the shared values map.\n * Used by late-booting runtimes to pick up values already set by others.\n */\nconst getSharedValue = <T>(name: string): T | undefined => {\n\treturn getSharedValues()[name] as T | undefined;\n};\n\nexport { fireConfigChange, attachConfigChange, getSharedValue };\n"]}

package/dist/config/Language.js

@@ -4,6 +4,7 @@ import { reRenderAllUI5Elements } from "../Render.js";
 import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
 import { isBooted } from "../Boot.js";
 import { attachConfigurationReset } from "./ConfigurationReset.js";
+import { fireConfigChange, attachConfigChange, getSharedValue } from "./ConfigurationSync.js";
 let curLanguage;
 let fetchDefaultLanguage;
 attachConfigurationReset(() => {
@@ -18,6 +19,16 @@ attachConfigurationReset(() => {
 // Once all necessary language data has been loaded, the language change
 // will trigger a re-render of all language-aware components.
 let languageChangePending = false;
+attachConfigChange("language", (language) => {
+    curLanguage = language;
+    languageChangePending = true;
+    fireLanguageChange(language).then(() => {
+        languageChangePending = false;
+        if (isBooted()) {
+            reRenderAllUI5Elements({ languageAware: true });
+        }
+    });
+});
 const getLanguageChangePending = () => languageChangePending;
 /**
  * Returns the currently configured language, or the browser language as a fallback.
@@ -26,7 +37,7 @@ const getLanguageChangePending = () => languageChangePending;
  */
 const getLanguage = () => {
     if (curLanguage === undefined) {
-        curLanguage = getConfiguredLanguage();
+        curLanguage = getSharedValue("language") ?? getConfiguredLanguage();
     }
     return curLanguage;
 };
@@ -44,6 +55,7 @@ const setLanguage = async (language) => {
     }
     languageChangePending = true;
     curLanguage = language;
+    fireConfigChange("language", language);
     await fireLanguageChange(language);
     languageChangePending = false;
     if (isBooted()) {

package/dist/config/Language.js.map

@@ -1 +1 @@
-{"version":3,"file":"Language.js","sourceRoot":"","sources":["../../src/config/Language.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,WAAW,IAAI,qBAAqB,EACpC,uBAAuB,IAAI,iCAAiC,GAC5D,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,IAAI,WAA+B,CAAC;AACpC,IAAI,oBAAyC,CAAC;AAE9C,wBAAwB,CAAC,GAAG,EAAE;IAC7B,WAAW,GAAG,SAAS,CAAC;IACxB,oBAAoB,GAAG,SAAS,CAAC;AAClC,CAAC,CAAC,CAAC;AAEH,8EAA8E;AAC9E,yEAAyE;AACzE,sFAAsF;AACtF,uDAAuD;AACvD,oDAAoD;AACpD,wEAAwE;AACxE,6DAA6D;AAC7D,IAAI,qBAAqB,GAAG,KAAK,CAAC;AAElC,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC;AAE7D;;;;GAIG;AACH,MAAM,WAAW,GAAG,GAAuB,EAAE;IAC5C,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC/B,WAAW,GAAG,qBAAqB,EAAE,CAAC;IACvC,CAAC;IACD,OAAO,WAAW,CAAC;AACpB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,KAAK,EAAE,QAAgB,EAAiB,EAAE;IAC7D,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;IACR,CAAC;IAED,qBAAqB,GAAG,IAAI,CAAC;IAC7B,WAAW,GAAG,QAAQ,CAAC;IAEvB,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEnC,qBAAqB,GAAG,KAAK,CAAC;IAE9B,IAAI,QAAQ,EAAE,EAAE,CAAC;QAChB,MAAM,sBAAsB,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;AACF,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,kBAAkB,GAAG,GAAW,EAAE;IACvC,OAAO,gBAAgB,CAAC;AACzB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,uBAAuB,GAAG,CAAC,gBAAyB,EAAE,EAAE;IAC7D,oBAAoB,GAAG,gBAAgB,CAAC;AACzC,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,uBAAuB,GAAG,GAAY,EAAE;IAC7C,IAAI,oBAAoB,KAAK,SAAS,EAAE,CAAC;QACxC,oBAAoB,GAAG,iCAAiC,EAAE,CAAC;IAC5D,CAAC;IAED,OAAO,oBAAoB,CAAC;AAC7B,CAAC,CAAC;AAEF,OAAO,EACN,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,GACxB,CAAC","sourcesContent":["import {\n\tgetLanguage as getConfiguredLanguage,\n\tgetFetchDefaultLanguage as getConfiguredFetchDefaultLanguage,\n} from \"../InitialConfiguration.js\";\nimport { fireLanguageChange } from \"../locale/languageChange.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport { DEFAULT_LANGUAGE } from \"../generated/AssetParameters.js\";\nimport { isBooted } from \"../Boot.js\";\nimport { attachConfigurationReset } from \"./ConfigurationReset.js\";\n\nlet curLanguage: string | undefined;\nlet fetchDefaultLanguage: boolean | undefined;\n\nattachConfigurationReset(() => {\n\tcurLanguage = undefined;\n\tfetchDefaultLanguage = undefined;\n});\n\n// Flag indicating that a language change is in progress and not yet complete.\n// While this flag is true, language-aware components will not re-render.\n// These components may rely on language-specific data (e.g., CLDR, language bundles),\n// which might be unavailable during the loading phase.\n// During this phase, all re-rendering is postponed.\n// Once all necessary language data has been loaded, the language change\n// will trigger a re-render of all language-aware components.\nlet languageChangePending = false;\n\nconst getLanguageChangePending = () => languageChangePending;\n\n/**\n * Returns the currently configured language, or the browser language as a fallback.\n * @public\n * @returns {string}\n */\nconst getLanguage = (): string | undefined => {\n\tif (curLanguage === undefined) {\n\t\tcurLanguage = getConfiguredLanguage();\n\t}\n\treturn curLanguage;\n};\n\n/**\n * Changes the current language, re-fetches all message bundles, updates all language-aware components\n * and returns a promise that resolves when all rendering is done.\n *\n * @param {string} language\n * @public\n * @returns {Promise<void>}\n */\nconst setLanguage = async (language: string): Promise<void> => {\n\tif (curLanguage === language) {\n\t\treturn;\n\t}\n\n\tlanguageChangePending = true;\n\tcurLanguage = language;\n\n\tawait fireLanguageChange(language);\n\n\tlanguageChangePending = false;\n\n\tif (isBooted()) {\n\t\tawait reRenderAllUI5Elements({ languageAware: true });\n\t}\n};\n\n/**\n * Returns the default languague.\n *\n * Note: Default language might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultLanguage = (): string => {\n\treturn DEFAULT_LANGUAGE;\n};\n\n/**\n * Defines if the default language, that is inlined, should be\n * fetched over the network instead of using the inlined one.\n * **Note:** By default the language will not be fetched.\n *\n * @public\n * @param {boolean} fetchDefaultLang\n */\nconst setFetchDefaultLanguage = (fetchDefaultLang: boolean) => {\n\tfetchDefaultLanguage = fetchDefaultLang;\n};\n\n/**\n * Returns if the default language, that is inlined, should be fetched over the network.\n * @public\n * @returns {boolean}\n */\nconst getFetchDefaultLanguage = (): boolean => {\n\tif (fetchDefaultLanguage === undefined) {\n\t\tfetchDefaultLanguage = getConfiguredFetchDefaultLanguage();\n\t}\n\n\treturn fetchDefaultLanguage;\n};\n\nexport {\n\tgetLanguage,\n\tsetLanguage,\n\tgetDefaultLanguage,\n\tsetFetchDefaultLanguage,\n\tgetFetchDefaultLanguage,\n\tgetLanguageChangePending,\n};\n"]}
+{"version":3,"file":"Language.js","sourceRoot":"","sources":["../../src/config/Language.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,WAAW,IAAI,qBAAqB,EACpC,uBAAuB,IAAI,iCAAiC,GAC5D,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE9F,IAAI,WAA+B,CAAC;AACpC,IAAI,oBAAyC,CAAC;AAE9C,wBAAwB,CAAC,GAAG,EAAE;IAC7B,WAAW,GAAG,SAAS,CAAC;IACxB,oBAAoB,GAAG,SAAS,CAAC;AAClC,CAAC,CAAC,CAAC;AAEH,8EAA8E;AAC9E,yEAAyE;AACzE,sFAAsF;AACtF,uDAAuD;AACvD,oDAAoD;AACpD,wEAAwE;AACxE,6DAA6D;AAC7D,IAAI,qBAAqB,GAAG,KAAK,CAAC;AAElC,kBAAkB,CAAC,UAAU,EAAE,CAAC,QAAgB,EAAE,EAAE;IACnD,WAAW,GAAG,QAAQ,CAAC;IACvB,qBAAqB,GAAG,IAAI,CAAC;IAC7B,kBAAkB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;QACtC,qBAAqB,GAAG,KAAK,CAAC;QAC9B,IAAI,QAAQ,EAAE,EAAE,CAAC;YAChB,sBAAsB,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACjD,CAAC;IACF,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,qBAAqB,CAAC;AAE7D;;;;GAIG;AACH,MAAM,WAAW,GAAG,GAAuB,EAAE;IAC5C,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC/B,WAAW,GAAG,cAAc,CAAS,UAAU,CAAC,IAAI,qBAAqB,EAAE,CAAC;IAC7E,CAAC;IACD,OAAO,WAAW,CAAC;AACpB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,KAAK,EAAE,QAAgB,EAAiB,EAAE;IAC7D,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;IACR,CAAC;IAED,qBAAqB,GAAG,IAAI,CAAC;IAC7B,WAAW,GAAG,QAAQ,CAAC;IAEvB,gBAAgB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAEvC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEnC,qBAAqB,GAAG,KAAK,CAAC;IAE9B,IAAI,QAAQ,EAAE,EAAE,CAAC;QAChB,MAAM,sBAAsB,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC;AACF,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,kBAAkB,GAAG,GAAW,EAAE;IACvC,OAAO,gBAAgB,CAAC;AACzB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,uBAAuB,GAAG,CAAC,gBAAyB,EAAE,EAAE;IAC7D,oBAAoB,GAAG,gBAAgB,CAAC;AACzC,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,uBAAuB,GAAG,GAAY,EAAE;IAC7C,IAAI,oBAAoB,KAAK,SAAS,EAAE,CAAC;QACxC,oBAAoB,GAAG,iCAAiC,EAAE,CAAC;IAC5D,CAAC;IAED,OAAO,oBAAoB,CAAC;AAC7B,CAAC,CAAC;AAEF,OAAO,EACN,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,GACxB,CAAC","sourcesContent":["import {\n\tgetLanguage as getConfiguredLanguage,\n\tgetFetchDefaultLanguage as getConfiguredFetchDefaultLanguage,\n} from \"../InitialConfiguration.js\";\nimport { fireLanguageChange } from \"../locale/languageChange.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport { DEFAULT_LANGUAGE } from \"../generated/AssetParameters.js\";\nimport { isBooted } from \"../Boot.js\";\nimport { attachConfigurationReset } from \"./ConfigurationReset.js\";\nimport { fireConfigChange, attachConfigChange, getSharedValue } from \"./ConfigurationSync.js\";\n\nlet curLanguage: string | undefined;\nlet fetchDefaultLanguage: boolean | undefined;\n\nattachConfigurationReset(() => {\n\tcurLanguage = undefined;\n\tfetchDefaultLanguage = undefined;\n});\n\n// Flag indicating that a language change is in progress and not yet complete.\n// While this flag is true, language-aware components will not re-render.\n// These components may rely on language-specific data (e.g., CLDR, language bundles),\n// which might be unavailable during the loading phase.\n// During this phase, all re-rendering is postponed.\n// Once all necessary language data has been loaded, the language change\n// will trigger a re-render of all language-aware components.\nlet languageChangePending = false;\n\nattachConfigChange(\"language\", (language: string) => {\n\tcurLanguage = language;\n\tlanguageChangePending = true;\n\tfireLanguageChange(language).then(() => {\n\t\tlanguageChangePending = false;\n\t\tif (isBooted()) {\n\t\t\treRenderAllUI5Elements({ languageAware: true });\n\t\t}\n\t});\n});\n\nconst getLanguageChangePending = () => languageChangePending;\n\n/**\n * Returns the currently configured language, or the browser language as a fallback.\n * @public\n * @returns {string}\n */\nconst getLanguage = (): string | undefined => {\n\tif (curLanguage === undefined) {\n\t\tcurLanguage = getSharedValue<string>(\"language\") ?? getConfiguredLanguage();\n\t}\n\treturn curLanguage;\n};\n\n/**\n * Changes the current language, re-fetches all message bundles, updates all language-aware components\n * and returns a promise that resolves when all rendering is done.\n *\n * @param {string} language\n * @public\n * @returns {Promise<void>}\n */\nconst setLanguage = async (language: string): Promise<void> => {\n\tif (curLanguage === language) {\n\t\treturn;\n\t}\n\n\tlanguageChangePending = true;\n\tcurLanguage = language;\n\n\tfireConfigChange(\"language\", language);\n\n\tawait fireLanguageChange(language);\n\n\tlanguageChangePending = false;\n\n\tif (isBooted()) {\n\t\tawait reRenderAllUI5Elements({ languageAware: true });\n\t}\n};\n\n/**\n * Returns the default languague.\n *\n * Note: Default language might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultLanguage = (): string => {\n\treturn DEFAULT_LANGUAGE;\n};\n\n/**\n * Defines if the default language, that is inlined, should be\n * fetched over the network instead of using the inlined one.\n * **Note:** By default the language will not be fetched.\n *\n * @public\n * @param {boolean} fetchDefaultLang\n */\nconst setFetchDefaultLanguage = (fetchDefaultLang: boolean) => {\n\tfetchDefaultLanguage = fetchDefaultLang;\n};\n\n/**\n * Returns if the default language, that is inlined, should be fetched over the network.\n * @public\n * @returns {boolean}\n */\nconst getFetchDefaultLanguage = (): boolean => {\n\tif (fetchDefaultLanguage === undefined) {\n\t\tfetchDefaultLanguage = getConfiguredFetchDefaultLanguage();\n\t}\n\n\treturn fetchDefaultLanguage;\n};\n\nexport {\n\tgetLanguage,\n\tsetLanguage,\n\tgetDefaultLanguage,\n\tsetFetchDefaultLanguage,\n\tgetFetchDefaultLanguage,\n\tgetLanguageChangePending,\n};\n"]}

package/dist/config/Theme.d.ts

@@ -36,4 +36,16 @@ declare const isTheme: (theme: string) => boolean;
  */
 declare const isLegacyThemeFamily: () => boolean;
 declare const isLegacyThemeFamilyAsync: () => Promise<boolean>;
-export { getTheme, setTheme, isTheme, isLegacyThemeFamily, isLegacyThemeFamilyAsync, getDefaultTheme, };
+/**
+ * Returns the base theme of external theme.
+ * @private
+ * @returns {string | undefined} the base theme name
+ */
+declare const getBaseTheme: () => string | undefined;
+/**
+ * Sets the base theme of the current external theme.
+ * @param { string | undefined } theme the name of the new base theme
+ * @private
+ */
+declare const setBaseTheme: (theme: string | undefined) => void;
+export { getTheme, setTheme, isTheme, isLegacyThemeFamily, isLegacyThemeFamilyAsync, getDefaultTheme, getBaseTheme, setBaseTheme, };

package/dist/config/Theme.js

@@ -5,10 +5,18 @@ import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js";
 import { DEFAULT_THEME, SUPPORTED_THEMES } from "../generated/AssetParameters.js";
 import { boot, isBooted } from "../Boot.js";
 import { attachConfigurationReset } from "./ConfigurationReset.js";
+import { fireConfigChange, attachConfigChange, getSharedValue } from "./ConfigurationSync.js";
 let curTheme;
+let curBaseTheme;
 attachConfigurationReset(() => {
     curTheme = undefined;
 });
+attachConfigChange("theme", (theme) => {
+    curTheme = theme;
+    if (isBooted()) {
+        applyTheme(curTheme).then(() => reRenderAllUI5Elements({ themeAware: true }));
+    }
+});
 /**
  * Returns the current theme.
  * @public
@@ -16,7 +24,7 @@ attachConfigurationReset(() => {
  */
 const getTheme = () => {
     if (curTheme === undefined) {
-        curTheme = getConfiguredTheme();
+        curTheme = getSharedValue("theme") ?? getConfiguredTheme();
     }
     return curTheme;
 };
@@ -31,6 +39,7 @@ const setTheme = async (theme) => {
         return;
     }
     curTheme = theme;
+    fireConfigChange("theme", theme);
     if (isBooted()) {
         // Update CSS Custom Properties
         await applyTheme(curTheme);
@@ -76,5 +85,21 @@ const isLegacyThemeFamilyAsync = async () => {
     return isLegacyThemeFamily();
 };
 const isKnownTheme = (theme) => SUPPORTED_THEMES.includes(theme);
-export { getTheme, setTheme, isTheme, isLegacyThemeFamily, isLegacyThemeFamilyAsync, getDefaultTheme, };
+/**
+ * Returns the base theme of external theme.
+ * @private
+ * @returns {string | undefined} the base theme name
+ */
+const getBaseTheme = () => {
+    return curBaseTheme;
+};
+/**
+ * Sets the base theme of the current external theme.
+ * @param { string | undefined } theme the name of the new base theme
+ * @private
+ */
+const setBaseTheme = (theme) => {
+    curBaseTheme = theme;
+};
+export { getTheme, setTheme, isTheme, isLegacyThemeFamily, isLegacyThemeFamilyAsync, getDefaultTheme, getBaseTheme, setBaseTheme, };
 //# sourceMappingURL=Theme.js.map

package/dist/config/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/config/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,qBAAqB,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,IAAI,QAA4B,CAAC;AAEjC,wBAAwB,CAAC,GAAG,EAAE;IAC7B,QAAQ,GAAG,SAAS,CAAC;AACtB,CAAC,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,QAAQ,GAAG,GAAW,EAAE;IAC7B,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC5B,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACjC,CAAC;IAED,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,QAAQ,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IACvD,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;QACxB,OAAO;IACR,CAAC;IAED,QAAQ,GAAG,KAAK,CAAC;IAEjB,IAAI,QAAQ,EAAE,EAAE,CAAC;QAChB,+BAA+B;QAC/B,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC3B,MAAM,sBAAsB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,CAAC;AACF,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,GAAW,EAAE;IACpC,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;IACjC,OAAO,QAAQ,EAAE,KAAK,KAAK,CAAC;AAC7B,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAChC,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,qBAAqB,EAAE,EAAE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,EAAE,CAAC;IACb,OAAO,mBAAmB,EAAE,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEzE,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,GACf,CAAC","sourcesContent":["import { getTheme as getConfiguredTheme } from \"../InitialConfiguration.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport applyTheme from \"../theming/applyTheme.js\";\nimport getThemeDesignerTheme from \"../theming/getThemeDesignerTheme.js\";\nimport { DEFAULT_THEME, SUPPORTED_THEMES } from \"../generated/AssetParameters.js\";\nimport { boot, isBooted } from \"../Boot.js\";\nimport { attachConfigurationReset } from \"./ConfigurationReset.js\";\n\nlet curTheme: string | undefined;\n\nattachConfigurationReset(() => {\n\tcurTheme = undefined;\n});\n\n/**\n * Returns the current theme.\n * @public\n * @returns {string} the current theme name\n */\nconst getTheme = (): string => {\n\tif (curTheme === undefined) {\n\t\tcurTheme = getConfiguredTheme();\n\t}\n\n\treturn curTheme;\n};\n\n/**\n * Applies a new theme after fetching its assets from the network.\n * @public\n * @param {string} theme the name of the new theme\n * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM\n */\nconst setTheme = async (theme: string): Promise<void> => {\n\tif (curTheme === theme) {\n\t\treturn;\n\t}\n\n\tcurTheme = theme;\n\n\tif (isBooted()) {\n\t\t// Update CSS Custom Properties\n\t\tawait applyTheme(curTheme);\n\t\tawait reRenderAllUI5Elements({ themeAware: true });\n\t}\n};\n\n/**\n * Returns the default theme.\n *\n * Note: Default theme might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultTheme = (): string => {\n\treturn DEFAULT_THEME;\n};\n\n/**\n * Returns if the given theme name is the one currently applied.\n * @private\n * @param {string} theme\n * @returns {boolean}\n */\nconst isTheme = (theme: string) => {\n\treturn getTheme() === theme;\n};\n\n/**\n * Returns if the currently set theme is part of legacy theme families (\"sap_fiori_3\").\n * **Note**: in addition, the method checks the base theme of a custom theme, built via the ThemeDesigner.\n *\n * @private\n * @returns { boolean }\n */\nconst isLegacyThemeFamily = () => {\n\tconst currentTheme = getTheme();\n\n\tif (!isKnownTheme(currentTheme)) {\n\t\treturn !getThemeDesignerTheme()?.baseThemeName?.startsWith(\"sap_horizon\");\n\t}\n\n\treturn !currentTheme.startsWith(\"sap_horizon\");\n};\n\nconst isLegacyThemeFamilyAsync = async () => {\n\tawait boot();\n\treturn isLegacyThemeFamily();\n};\n\nconst isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);\n\nexport {\n\tgetTheme,\n\tsetTheme,\n\tisTheme,\n\tisLegacyThemeFamily,\n\tisLegacyThemeFamilyAsync,\n\tgetDefaultTheme,\n};\n"]}
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/config/Theme.ts"],"names":[],"mappings":"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","sourcesContent":["import { getTheme as getConfiguredTheme } from \"../InitialConfiguration.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport applyTheme from \"../theming/applyTheme.js\";\nimport getThemeDesignerTheme from \"../theming/getThemeDesignerTheme.js\";\nimport { DEFAULT_THEME, SUPPORTED_THEMES } from \"../generated/AssetParameters.js\";\nimport { boot, isBooted } from \"../Boot.js\";\nimport { attachConfigurationReset } from \"./ConfigurationReset.js\";\nimport { fireConfigChange, attachConfigChange, getSharedValue } from \"./ConfigurationSync.js\";\n\nlet curTheme: string | undefined;\nlet curBaseTheme: string | undefined;\n\nattachConfigurationReset(() => {\n\tcurTheme = undefined;\n});\n\nattachConfigChange(\"theme\", (theme: string) => {\n\tcurTheme = theme;\n\tif (isBooted()) {\n\t\tapplyTheme(curTheme).then(() => reRenderAllUI5Elements({ themeAware: true }));\n\t}\n});\n\n/**\n * Returns the current theme.\n * @public\n * @returns {string} the current theme name\n */\nconst getTheme = (): string => {\n\tif (curTheme === undefined) {\n\t\tcurTheme = getSharedValue<string>(\"theme\") ?? getConfiguredTheme();\n\t}\n\n\treturn curTheme;\n};\n\n/**\n * Applies a new theme after fetching its assets from the network.\n * @public\n * @param {string} theme the name of the new theme\n * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM\n */\nconst setTheme = async (theme: string): Promise<void> => {\n\tif (curTheme === theme) {\n\t\treturn;\n\t}\n\n\tcurTheme = theme;\n\n\tfireConfigChange(\"theme\", theme);\n\n\tif (isBooted()) {\n\t\t// Update CSS Custom Properties\n\t\tawait applyTheme(curTheme);\n\t\tawait reRenderAllUI5Elements({ themeAware: true });\n\t}\n};\n\n/**\n * Returns the default theme.\n *\n * Note: Default theme might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultTheme = (): string => {\n\treturn DEFAULT_THEME;\n};\n\n/**\n * Returns if the given theme name is the one currently applied.\n * @private\n * @param {string} theme\n * @returns {boolean}\n */\nconst isTheme = (theme: string) => {\n\treturn getTheme() === theme;\n};\n\n/**\n * Returns if the currently set theme is part of legacy theme families (\"sap_fiori_3\").\n * **Note**: in addition, the method checks the base theme of a custom theme, built via the ThemeDesigner.\n *\n * @private\n * @returns { boolean }\n */\nconst isLegacyThemeFamily = () => {\n\tconst currentTheme = getTheme();\n\n\tif (!isKnownTheme(currentTheme)) {\n\t\treturn !getThemeDesignerTheme()?.baseThemeName?.startsWith(\"sap_horizon\");\n\t}\n\n\treturn !currentTheme.startsWith(\"sap_horizon\");\n};\n\nconst isLegacyThemeFamilyAsync = async () => {\n\tawait boot();\n\treturn isLegacyThemeFamily();\n};\n\nconst isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);\n\n/**\n * Returns the base theme of external theme.\n * @private\n * @returns {string | undefined} the base theme name\n */\nconst getBaseTheme = (): string | undefined => {\n\treturn curBaseTheme;\n};\n\n/**\n * Sets the base theme of the current external theme.\n * @param { string | undefined } theme the name of the new base theme\n * @private\n */\nconst setBaseTheme = (theme: string | undefined): void => {\n\tcurBaseTheme = theme;\n};\n\nexport {\n\tgetTheme,\n\tsetTheme,\n\tisTheme,\n\tisLegacyThemeFamily,\n\tisLegacyThemeFamilyAsync,\n\tgetDefaultTheme,\n\tgetBaseTheme,\n\tsetBaseTheme,\n};\n"]}

package/dist/config/ThemeRoot.js

@@ -43,21 +43,26 @@ const setThemeRoot = (themeRoot) => {
         return;
     }
     currThemeRoot = themeRoot;
-    if (!validateThemeRoot(themeRoot)) {
-        console.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the "setThemeRoot" description.`); // eslint-disable-line
-        return;
-    }
     return attachCustomThemeStylesToHead(getTheme());
 };
-const formatThemeLink = (theme) => {
-    return `${getThemeRoot()}Base/baseLib/${theme}/css_variables.css`; // theme root is always set at this point.
+const formatThemeLink = (theme, validatedThemeRoot) => {
+    return `${validatedThemeRoot}Base/baseLib/${theme}/css_variables.css`;
 };
 const attachCustomThemeStylesToHead = async (theme) => {
     const link = document.querySelector(`[sap-ui-webcomponents-theme="${theme}"]`);
     if (link) {
         document.head.removeChild(link);
     }
-    await createLinkInHead(formatThemeLink(theme), { "sap-ui-webcomponents-theme": theme });
+    const themeRoot = getThemeRoot();
+    if (!themeRoot) {
+        return;
+    }
+    const validatedThemeRoot = validateThemeRoot(themeRoot);
+    if (!validatedThemeRoot) {
+        console.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the "setThemeRoot" description.`); // eslint-disable-line
+        return;
+    }
+    await createLinkInHead(formatThemeLink(theme, validatedThemeRoot), { "sap-ui-webcomponents-theme": theme });
 };
 export { getThemeRoot, setThemeRoot, attachCustomThemeStylesToHead, };
 //# sourceMappingURL=ThemeRoot.js.map

package/dist/config/ThemeRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeRoot.js","sourceRoot":"","sources":["../../src/config/ThemeRoot.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,IAAI,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,IAAI,aAAiC,CAAC;AAEtC,wBAAwB,CAAC,GAAG,EAAE;IAC7B,aAAa,GAAG,SAAS,CAAC;AAC3B,CAAC,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,YAAY,GAAG,GAAuB,EAAE;IAC7C,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QACjC,aAAa,GAAG,sBAAsB,EAAE,CAAC;IAC1C,CAAC;IAED,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,YAAY,GAAG,CAAC,SAAiB,EAA6B,EAAE;IACrE,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QACjC,OAAO;IACR,CAAC;IAED,aAAa,GAAG,SAAS,CAAC;IAE1B,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC;QACnC,OAAO,CAAC,IAAI,CAAC,OAAO,SAAS,0FAA0F,CAAC,CAAC,CAAC,sBAAsB;QAChJ,OAAO;IACR,CAAC;IAED,OAAO,6BAA6B,CAAC,QAAQ,EAAE,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;IACzC,OAAO,GAAG,YAAY,EAAG,gBAAgB,KAAK,oBAAoB,CAAC,CAAC,0CAA0C;AAC/G,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IAC5E,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,gCAAgC,KAAK,IAAI,CAAC,CAAC;IAE/E,IAAI,IAAI,EAAE,CAAC;QACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,MAAM,gBAAgB,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,EAAE,4BAA4B,EAAE,KAAK,EAAE,CAAC,CAAC;AACzF,CAAC,CAAC;AAEF,OAAO,EACN,YAAY,EACZ,YAAY,EACZ,6BAA6B,GAC7B,CAAC","sourcesContent":["import createLinkInHead from \"../util/createLinkInHead.js\";\nimport validateThemeRoot from \"../validateThemeRoot.js\";\nimport { getThemeRoot as getConfiguredThemeRoot } from \"../InitialConfiguration.js\";\nimport { getTheme } from \"./Theme.js\";\nimport { attachConfigurationReset } from \"./ConfigurationReset.js\";\n\nlet currThemeRoot: string | undefined;\n\nattachConfigurationReset(() => {\n\tcurrThemeRoot = undefined;\n});\n\n/**\n * Returns the current theme root.\n *\n * @public\n * @since 1.14.0\n * @returns { string } the current theme root\n */\nconst getThemeRoot = (): string | undefined => {\n\tif (currThemeRoot === undefined) {\n\t\tcurrThemeRoot = getConfiguredThemeRoot();\n\t}\n\n\treturn currThemeRoot;\n};\n\n/**\n * Sets theme root for the current theme.\n * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.\n *\n * **Note:** The feature is specific to custom themes, created with the `UI Theme Designer`.\n * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.\n *\n * **Note:** Certain security restrictions will apply before fetching the theme assets.\n * Absolute URLs to a different origin than the current page will result in using the current page as an origin.\n *\n * **Important:** To use this feature you must explicitly allow specific origins by using &lt;meta name=\"sap-allowed-theme-origins\" content=\"https://my-example-host.com/\"&gt; tag inside the &lt;head&gt; of the page.\n * Failing to do so will result in a warning in the console and the theme root will not be set.\n *\n * @public\n * @since 1.14.0\n * @param { string } themeRoot the new theme root\n * @returns { Promise<void> }\n */\nconst setThemeRoot = (themeRoot: string): Promise<void> | undefined => {\n\tif (currThemeRoot === themeRoot) {\n\t\treturn;\n\t}\n\n\tcurrThemeRoot = themeRoot;\n\n\tif (!validateThemeRoot(themeRoot)) {\n\t\tconsole.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the \"setThemeRoot\" description.`); // eslint-disable-line\n\t\treturn;\n\t}\n\n\treturn attachCustomThemeStylesToHead(getTheme());\n};\n\nconst formatThemeLink = (theme: string) => {\n\treturn `${getThemeRoot()!}Base/baseLib/${theme}/css_variables.css`; // theme root is always set at this point.\n};\n\nconst attachCustomThemeStylesToHead = async (theme: string): Promise<void> => {\n\tconst link = document.querySelector(`[sap-ui-webcomponents-theme=\"${theme}\"]`);\n\n\tif (link) {\n\t\tdocument.head.removeChild(link);\n\t}\n\n\tawait createLinkInHead(formatThemeLink(theme), { \"sap-ui-webcomponents-theme\": theme });\n};\n\nexport {\n\tgetThemeRoot,\n\tsetThemeRoot,\n\tattachCustomThemeStylesToHead,\n};\n"]}
+{"version":3,"file":"ThemeRoot.js","sourceRoot":"","sources":["../../src/config/ThemeRoot.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,IAAI,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,IAAI,aAAiC,CAAC;AAEtC,wBAAwB,CAAC,GAAG,EAAE;IAC7B,aAAa,GAAG,SAAS,CAAC;AAC3B,CAAC,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,YAAY,GAAG,GAAuB,EAAE;IAC7C,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QACjC,aAAa,GAAG,sBAAsB,EAAE,CAAC;IAC1C,CAAC;IAED,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,YAAY,GAAG,CAAC,SAAiB,EAA6B,EAAE;IACrE,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;QACjC,OAAO;IACR,CAAC;IAED,aAAa,GAAG,SAAS,CAAC;IAE1B,OAAO,6BAA6B,CAAC,QAAQ,EAAE,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,kBAA0B,EAAE,EAAE;IACrE,OAAO,GAAG,kBAAkB,gBAAgB,KAAK,oBAAoB,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IAC5E,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,gCAAgC,KAAK,IAAI,CAAC,CAAC;IAE/E,IAAI,IAAI,EAAE,CAAC;QACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,IAAI,CAAC,SAAS,EAAE,CAAC;QAChB,OAAO;IACR,CAAC;IAED,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IAExD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACzB,OAAO,CAAC,IAAI,CAAC,OAAO,SAAS,0FAA0F,CAAC,CAAC,CAAC,sBAAsB;QAChJ,OAAO;IACR,CAAC;IAED,MAAM,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,kBAAkB,CAAC,EAAE,EAAE,4BAA4B,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7G,CAAC,CAAC;AAEF,OAAO,EACN,YAAY,EACZ,YAAY,EACZ,6BAA6B,GAC7B,CAAC","sourcesContent":["import createLinkInHead from \"../util/createLinkInHead.js\";\nimport validateThemeRoot from \"../validateThemeRoot.js\";\nimport { getThemeRoot as getConfiguredThemeRoot } from \"../InitialConfiguration.js\";\nimport { getTheme } from \"./Theme.js\";\nimport { attachConfigurationReset } from \"./ConfigurationReset.js\";\n\nlet currThemeRoot: string | undefined;\n\nattachConfigurationReset(() => {\n\tcurrThemeRoot = undefined;\n});\n\n/**\n * Returns the current theme root.\n *\n * @public\n * @since 1.14.0\n * @returns { string } the current theme root\n */\nconst getThemeRoot = (): string | undefined => {\n\tif (currThemeRoot === undefined) {\n\t\tcurrThemeRoot = getConfiguredThemeRoot();\n\t}\n\n\treturn currThemeRoot;\n};\n\n/**\n * Sets theme root for the current theme.\n * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.\n *\n * **Note:** The feature is specific to custom themes, created with the `UI Theme Designer`.\n * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.\n *\n * **Note:** Certain security restrictions will apply before fetching the theme assets.\n * Absolute URLs to a different origin than the current page will result in using the current page as an origin.\n *\n * **Important:** To use this feature you must explicitly allow specific origins by using &lt;meta name=\"sap-allowed-theme-origins\" content=\"https://my-example-host.com/\"&gt; tag inside the &lt;head&gt; of the page.\n * Failing to do so will result in a warning in the console and the theme root will not be set.\n *\n * @public\n * @since 1.14.0\n * @param { string } themeRoot the new theme root\n * @returns { Promise<void> }\n */\nconst setThemeRoot = (themeRoot: string): Promise<void> | undefined => {\n\tif (currThemeRoot === themeRoot) {\n\t\treturn;\n\t}\n\n\tcurrThemeRoot = themeRoot;\n\n\treturn attachCustomThemeStylesToHead(getTheme());\n};\n\nconst formatThemeLink = (theme: string, validatedThemeRoot: string) => {\n\treturn `${validatedThemeRoot}Base/baseLib/${theme}/css_variables.css`;\n};\n\nconst attachCustomThemeStylesToHead = async (theme: string): Promise<void> => {\n\tconst link = document.querySelector(`[sap-ui-webcomponents-theme=\"${theme}\"]`);\n\n\tif (link) {\n\t\tdocument.head.removeChild(link);\n\t}\n\n\tconst themeRoot = getThemeRoot();\n\n\tif (!themeRoot) {\n\t\treturn;\n\t}\n\n\tconst validatedThemeRoot = validateThemeRoot(themeRoot);\n\n\tif (!validatedThemeRoot) {\n\t\tconsole.warn(`The ${themeRoot} is not valid. Check the allowed origins as suggested in the \"setThemeRoot\" description.`); // eslint-disable-line\n\t\treturn;\n\t}\n\n\tawait createLinkInHead(formatThemeLink(theme, validatedThemeRoot), { \"sap-ui-webcomponents-theme\": theme });\n};\n\nexport {\n\tgetThemeRoot,\n\tsetThemeRoot,\n\tattachCustomThemeStylesToHead,\n};\n"]}

package/dist/config/UrlParams.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Returns if the "ignoreUrlParams" configuration is set.
+ * @public
+ * @since 2.23.0
+ * @returns { boolean }
+ */
+declare const getIgnoreUrlParams: () => boolean;
+/**
+ * Defines the "ignoreUrlParams" setting.
+ *
+ * - When set to "true", the framework will not process URL parameters
+ * (e.g. sap-ui-theme, sap-ui-language) during initialization.
+ * - When set to "false" (default), URL parameters are processed normally.
+ *
+ * @public
+ * @since 2.23.0
+ * @param { boolean } ignoreUrlParams
+ */
+declare const setIgnoreUrlParams: (ignoreUrlParams: boolean) => void;
+export { getIgnoreUrlParams, setIgnoreUrlParams, };

package/dist/config/UrlParams.js

@@ -0,0 +1,30 @@
+import { getIgnoreUrlParams as getConfiguredIgnoreUrlParams } from "../InitialConfiguration.js";
+let _ignoreUrlParams;
+/**
+ * Returns if the "ignoreUrlParams" configuration is set.
+ * @public
+ * @since 2.23.0
+ * @returns { boolean }
+ */
+const getIgnoreUrlParams = () => {
+    if (_ignoreUrlParams === undefined) {
+        _ignoreUrlParams = getConfiguredIgnoreUrlParams();
+    }
+    return _ignoreUrlParams;
+};
+/**
+ * Defines the "ignoreUrlParams" setting.
+ *
+ * - When set to "true", the framework will not process URL parameters
+ * (e.g. sap-ui-theme, sap-ui-language) during initialization.
+ * - When set to "false" (default), URL parameters are processed normally.
+ *
+ * @public
+ * @since 2.23.0
+ * @param { boolean } ignoreUrlParams
+ */
+const setIgnoreUrlParams = (ignoreUrlParams) => {
+    _ignoreUrlParams = ignoreUrlParams;
+};
+export { getIgnoreUrlParams, setIgnoreUrlParams, };
+//# sourceMappingURL=UrlParams.js.map

package/dist/config/UrlParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlParams.js","sourceRoot":"","sources":["../../src/config/UrlParams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAEhG,IAAI,gBAAyB,CAAC;AAE9B;;;;;GAKG;AACH,MAAM,kBAAkB,GAAG,GAAY,EAAE;IACxC,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;QACpC,gBAAgB,GAAG,4BAA4B,EAAE,CAAC;IACnD,CAAC;IAED,OAAO,gBAAgB,CAAC;AACzB,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,kBAAkB,GAAG,CAAC,eAAwB,EAAE,EAAE;IACvD,gBAAgB,GAAG,eAAe,CAAC;AACpC,CAAC,CAAC;AAEF,OAAO,EACN,kBAAkB,EAClB,kBAAkB,GAClB,CAAC","sourcesContent":["import { getIgnoreUrlParams as getConfiguredIgnoreUrlParams } from \"../InitialConfiguration.js\";\n\nlet _ignoreUrlParams: boolean;\n\n/**\n * Returns if the \"ignoreUrlParams\" configuration is set.\n * @public\n * @since 2.23.0\n * @returns { boolean }\n */\nconst getIgnoreUrlParams = (): boolean => {\n\tif (_ignoreUrlParams === undefined) {\n\t\t_ignoreUrlParams = getConfiguredIgnoreUrlParams();\n\t}\n\n\treturn _ignoreUrlParams;\n};\n\n/**\n * Defines the \"ignoreUrlParams\" setting.\n *\n * - When set to \"true\", the framework will not process URL parameters\n * (e.g. sap-ui-theme, sap-ui-language) during initialization.\n * - When set to \"false\" (default), URL parameters are processed normally.\n *\n * @public\n * @since 2.23.0\n * @param { boolean } ignoreUrlParams\n */\nconst setIgnoreUrlParams = (ignoreUrlParams: boolean) => {\n\t_ignoreUrlParams = ignoreUrlParams;\n};\n\nexport {\n\tgetIgnoreUrlParams,\n\tsetIgnoreUrlParams,\n};\n"]}

package/dist/createReactComponent.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React wrapper factory for UI5 Web Components.
+ *
+ * This lightweight factory creates typed React components that wrap UI5 Web Components.
+ * It handles:
+ * - Event prop conversion (onXxx → ui5-xxx event listeners)
+ * - Ref forwarding
+ * - Children handling
+ *
+ * Note: Supports React >=19.
+ *
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ *
+ * @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
+ * @returns A React component that renders the custom element with proper TypeScript types
+ * @since 2.21.0
+ * @example
+ * import Button from "@ui5/webcomponents/dist/Button.js";
+ * const ReactButton = createReactComponent(Button);
+ */
+export default function createReactComponent<T extends typeof UI5Element>(klass: T): (props: InstanceType<T>["_jsxProps"]) => import("react").DOMElement<Record<string, unknown>, Element>;

package/dist/createReactComponent.js

@@ -0,0 +1,51 @@
+/**
+ * React wrapper factory for UI5 Web Components.
+ *
+ * This lightweight factory creates typed React components that wrap UI5 Web Components.
+ * It handles:
+ * - Event prop conversion (onXxx → ui5-xxx event listeners)
+ * - Ref forwarding
+ * - Children handling
+ *
+ * Note: Supports React >=19.
+ *
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+import { createElement } from "react";
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ *
+ * @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
+ * @returns A React component that renders the custom element with proper TypeScript types
+ * @since 2.21.0
+ * @example
+ * import Button from "@ui5/webcomponents/dist/Button.js";
+ * const ReactButton = createReactComponent(Button);
+ */
+export default function createReactComponent(klass) {
+    const tag = klass.getMetadata().getTag();
+    return function Component(props) {
+        const patchedProps = {};
+        Object.entries(props).forEach(([key, value]) => {
+            if (key.startsWith("on") && typeof value === "function") {
+                // React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,
+                // hiding CustomEvent.detail under nativeEvent.detail.
+                // Patch all event handlers to restore detail from nativeEvent.
+                const originalHandler = value;
+                patchedProps[key] = (e) => {
+                    const nativeDetail = e.nativeEvent?.detail;
+                    if (nativeDetail !== undefined) {
+                        e.detail = nativeDetail;
+                    }
+                    originalHandler(e);
+                };
+            }
+            else {
+                patchedProps[key] = value;
+            }
+        });
+        return createElement(tag, patchedProps);
+    };
+}
+//# sourceMappingURL=createReactComponent.js.map

package/dist/createReactComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReactComponent.js","sourceRoot":"","sources":["../src/createReactComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAA8B,KAAQ;IACjF,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;IAEzC,OAAO,SAAS,SAAS,CAAC,KAAmC;QAC5D,MAAM,YAAY,GAA4B,EAAE,CAAC;QAEjD,MAAM,CAAC,OAAO,CAAC,KAAgC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACzE,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;gBACzD,4EAA4E;gBAC5E,sDAAsD;gBACtD,+DAA+D;gBAC/D,MAAM,eAAe,GAAG,KAAK,CAAC;gBAC9B,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAQ,EAAE,EAAE;oBAChC,MAAM,YAAY,GAAI,CAAsD,CAAC,WAAW,EAAE,MAAM,CAAC;oBACjG,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;wBAC/B,CAAoC,CAAC,MAAM,GAAG,YAAY,CAAC;oBAC7D,CAAC;oBACD,eAAe,CAAC,CAAC,CAAC,CAAC;gBACpB,CAAC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACP,YAAY,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YAC3B,CAAC;QACF,CAAC,CAAC,CAAC;QAEH,OAAO,aAAa,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IACzC,CAAC,CAAC;AACH,CAAC","sourcesContent":["/**\n * React wrapper factory for UI5 Web Components.\n *\n * This lightweight factory creates typed React components that wrap UI5 Web Components.\n * It handles:\n * - Event prop conversion (onXxx → ui5-xxx event listeners)\n * - Ref forwarding\n * - Children handling\n *\n * Note: Supports React >=19.\n *\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport { createElement } from \"react\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\n *\n * @param ComponentClass - The UI5 Web Component class (e.g., Button from \"@ui5/webcomponents/dist/Button.js\")\n * @returns A React component that renders the custom element with proper TypeScript types\n * @since 2.21.0\n * @example\n * import Button from \"@ui5/webcomponents/dist/Button.js\";\n * const ReactButton = createReactComponent(Button);\n */\nexport default function createReactComponent<T extends typeof UI5Element>(klass: T) {\n\tconst tag = klass.getMetadata().getTag();\n\n\treturn function Component(props: InstanceType<T>[\"_jsxProps\"]) {\n\t\tconst patchedProps: Record<string, unknown> = {};\n\n\t\tObject.entries(props as Record<string, unknown>).forEach(([key, value]) => {\n\t\t\tif (key.startsWith(\"on\") && typeof value === \"function\") {\n\t\t\t\t// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,\n\t\t\t\t// hiding CustomEvent.detail under nativeEvent.detail.\n\t\t\t\t// Patch all event handlers to restore detail from nativeEvent.\n\t\t\t\tconst originalHandler = value;\n\t\t\t\tpatchedProps[key] = (e: Event) => {\n\t\t\t\t\tconst nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;\n\t\t\t\t\tif (nativeDetail !== undefined) {\n\t\t\t\t\t\t(e as unknown as { detail: unknown }).detail = nativeDetail;\n\t\t\t\t\t}\n\t\t\t\t\toriginalHandler(e);\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tpatchedProps[key] = value;\n\t\t\t}\n\t\t});\n\n\t\treturn createElement(tag, patchedProps);\n\t};\n}\n"]}

package/dist/css/OpenUI5PopupStyles.css

@@ -2,4 +2,9 @@
 	border: none;
 	overflow: visible;
 	margin: 0;
+}
+
+.sapUiBLy[popover] {
+	width: 100%;
+	height: 100%;
 }

package/dist/css/SystemCSSVars.css

@@ -1,9 +1,34 @@
 :root {
-    --_ui5_content_density:cozy;
+	/*
+	Use a non-existent variable to always trigger the fallback.
+	Because this variable is never defined, the fallback is used
+	in all cases.
+
+	Using `initial` as a fallback can work only for properties
+	that treat it as an invalid value. To avoid this inconsistency,
+	we intentionally reference an undefined variable, which is
+	always considered invalid and undefined.
+	*/
+	--_ui5-cozy-size: var(--_ui5-f2d95f8);
+
+	--_ui5-compact-size: ;
+	--_ui5_content_density: cozy;
 }
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-    --_ui5_content_density:compact;
-}
+	--_ui5-cozy-size: ;
+	/*
+	Use a non-existent variable to always trigger the fallback.
+	Because this variable is never defined, the fallback is used
+	in all cases.
+
+	Using `initial` as a fallback can work only for properties
+	that treat it as an invalid value. To avoid this inconsistency,
+	we intentionally reference an undefined variable, which is
+	always considered invalid and undefined.
+	*/
+	--_ui5-compact-size: var(--_ui5-f2d95f8);
+	--_ui5_content_density: compact;
+}