@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.0.0-3790e6927 to 0.0.0-38861c872

dist/asset-registries/i18n.js

@@ -66,3 +66,4 @@ import getLocale from "../locale/getLocale.js";
     const region = getLocale().getRegion();
-    let localeId = language + (region ? `-${region}` : ``);
+    const variant = getLocale().getVariant();
+    let localeId = language + (region ? `-${region}` : ``) + (variant ? `-${variant}` : ``);
     if (useFallbackBundle(packageName, localeId)) {
@@ -69,0 +70,0 @@ localeId = normalizeLocale(localeId);

dist/asset-registries/Icons.d.ts

 import type { I18nText } from "../i18nBundle.js";
 import type { TemplateFunction } from "../renderer/executeTemplate.js";
-type IconLoader = (collectionName: string) => Promise<CollectionData>;
+type IconLoader = (collectionName: string) => Promise<CollectionData | Array<CollectionData>>;
 type CollectionData = {
     collection: string;
     packageName: string;
+    themeFamily?: "legacy" | "sap_horizon";
     version?: string;
@@ -26,4 +27,4 @@ data: Record<string, {
 declare const registerIcon: (name: string, iconData: IconData) => void;
-declare const getIconDataSync: (name: string) => IconData | undefined;
-declare const getIconData: (name: string) => Promise<IconData | "ICON_NOT_FOUND" | undefined>;
+declare const getIconDataSync: (iconName: string) => IconData | undefined;
+declare const getIconData: (iconName: string) => Promise<IconData | "ICON_NOT_FOUND" | undefined>;
 /**
@@ -30,0 +31,0 @@ * Returns the accessible name for the given icon,

dist/asset-registries/Icons.js

 import getSharedResource from "../getSharedResource.js";
-import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
-import { getEffectiveIconCollection } from "../config/Icons.js";
+import { getIconCollectionByAlias } from "./util/IconCollectionsAlias.js";
+import { registerIconCollectionForTheme } from "./util/IconCollectionsByTheme.js";
+import getEffectiveIconCollection from "./util/getIconCollectionByTheme.js";
 import { getI18nBundle } from "../i18nBundle.js";
+const DEFAULT_THEME_FAMILY = "legacy"; // includes sap_belize_* and sap_fiori_*
 const loaders = new Map();
@@ -48,8 +50,5 @@ const registry = getSharedResource("SVGIcons.registry", new Map());
 /**
- * Processes the full icon name and splits it into - "name", "collection"
- * to form the proper registry key ("collection/name") under which the icon is registered:
- *
+ * Processes the full icon name and splits it into - "name", "collection".
  * - removes legacy protocol ("sap-icon://")
  * - resolves aliases (f.e "SAP-icons-TNT/actor" => "tnt/actor")
- * - determines theme dependant icon collection (f.e "home" => "SAP-icons-v4/home" in Quartz | "SAP-icons-v5/home" in Horizon)
  *
@@ -70,15 +69,13 @@ * @param { string } name
     }
-    collection = getEffectiveIconCollection(collection);
-    const registryKey = `${collection}/${name}`;
-    return { name, collection, registryKey };
+    return { name, collection };
 };
-const getIconDataSync = (name) => {
-    const { registryKey } = processName(name);
-    return registry.get(registryKey);
+const getIconDataSync = (iconName) => {
+    const { name, collection } = processName(iconName);
+    return getRegisteredIconData(collection, name);
 };
-const getIconData = async (name) => {
-    const { collection, registryKey } = processName(name);
+const getIconData = async (iconName) => {
+    const { name, collection } = processName(iconName);
     let iconData = ICON_NOT_FOUND;
     try {
-        iconData = (await _loadIconCollectionOnce(collection));
+        iconData = (await _loadIconCollectionOnce(getEffectiveIconCollection(collection)));
     }
@@ -92,6 +89,20 @@ catch (error) {
     }
-    if (!registry.has(registryKey)) {
-        // not filled by another await. many getters will await on the same loader, but fill only once
+    const registeredIconData = getRegisteredIconData(collection, name);
+    if (registeredIconData) {
+        return registeredIconData;
+    }
+    // not filled by another await. many getters will await on the same loader, but fill only once
+    if (Array.isArray(iconData)) {
+        iconData.forEach(data => {
+            _fillRegistry(data);
+            registerIconCollectionForTheme(collection, { [data.themeFamily || DEFAULT_THEME_FAMILY]: data.collection });
+        });
+    }
+    else {
         _fillRegistry(iconData);
     }
+    return getRegisteredIconData(collection, name);
+};
+const getRegisteredIconData = (collection, name) => {
+    const registryKey = `${getEffectiveIconCollection(collection)}/${name}`;
     return registry.get(registryKey);
@@ -98,0 +109,0 @@ };

dist/asset-registries/Illustrations.d.ts

@@ -12,2 +12,3 @@ import type { I18nText } from "../i18nBundle.js";
     set: string;
+    collection: string;
 };
@@ -14,0 +15,0 @@ declare const registerIllustration: (name: string, data: IllustrationData) => void;

dist/asset-registries/Illustrations.js

 import getSharedResource from "../getSharedResource.js";
+import { getTheme } from "../config/Theme.js";
+const IllustrationCollections = new Map([
+    ["sap_horizon", "V5"],
+    ["sap_horizon_dark", "V5"],
+    ["sap_horizon_hcb", "V5/HC"],
+    ["sap_horizon_hcw", "V5/HC"],
+]);
+const FALLBACK_COLLECTION = "V4";
 const loaders = new Map();
 const registry = getSharedResource("SVGIllustration.registry", new Map());
 const illustrationPromises = getSharedResource("SVGIllustration.promises", new Map());
+const getCollection = () => {
+    const theme = getTheme();
+    if (IllustrationCollections.has(theme)) {
+        return IllustrationCollections.get(theme);
+    }
+    return FALLBACK_COLLECTION;
+};
+/**
+ * Processes the name of the illustration
+ * The name is used to generate the registry key and the loader key
+ * The registry key is used to store and get the illustration data from the registry
+ * The loader key is used to store and get the illustration loader from the loaders map
+ * The function generates the correct registry key and loader key based on whether an loader exists for the illustration
+ * If there is no loader registered for the collection, it falls back to the default collection
+ */
+const processName = (name) => {
+    let collection = getCollection();
+    const [set, illustrationName] = name.split("/");
+    let registryKey = `${set}/${collection}/${illustrationName}`;
+    if (!loaders.has(registryKey) && collection !== FALLBACK_COLLECTION) {
+        collection = FALLBACK_COLLECTION;
+        registryKey = `${set}/${collection}/${illustrationName}`;
+    }
+    return {
+        registryKey,
+        collection,
+    };
+};
 const registerIllustration = (name, data) => {
-    registry.set(`${data.set}/${name}`, {
+    const collection = data.collection || FALLBACK_COLLECTION;
+    registry.set(`${data.set}/${collection}/${name}`, {
         dialogSvg: data.dialogSvg,
@@ -17,31 +54,24 @@ sceneSvg: data.sceneSvg,
 };
-const _loadIllustrationOnce = async (illustrationName) => {
-    if (!illustrationPromises.has(illustrationName)) {
-        if (!loaders.has(illustrationName)) {
-            const illustrationPath = illustrationName.startsWith("Tnt") ? `tnt/${illustrationName.replace(/^Tnt/, "")}` : illustrationName;
+const _loadIllustrationOnce = (illustrationName) => {
+    const { registryKey } = processName(illustrationName);
+    if (!illustrationPromises.has(registryKey)) {
+        if (!loaders.has(registryKey)) {
+            const illustrationPath = illustrationName.startsWith("fiori/") ? illustrationName.replace("fiori/", "") : illustrationName;
             throw new Error(`No loader registered for the ${illustrationName} illustration. Probably you forgot to import the "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js" module. Or you can import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module that will make all illustrations available, but fetch only the ones used.`);
         }
-        const loadIllustrations = loaders.get(illustrationName);
-        illustrationPromises.set(illustrationName, loadIllustrations(illustrationName));
+        const loadIllustrations = loaders.get(registryKey);
+        illustrationPromises.set(registryKey, loadIllustrations(registryKey));
     }
-    return illustrationPromises.get(illustrationName);
+    return illustrationPromises.get(registryKey);
 };
 const getIllustrationDataSync = (illustrationName) => {
-    let set = "fiori";
-    if (illustrationName.startsWith("Tnt")) {
-        set = "tnt";
-        illustrationName = illustrationName.replace(/^Tnt/, "");
-    }
-    return registry.get(`${set}/${illustrationName}`);
+    const { registryKey } = processName(illustrationName);
+    return registry.get(registryKey);
 };
 const getIllustrationData = async (illustrationName) => {
-    let set = "fiori";
+    const { registryKey } = processName(illustrationName);
     await _loadIllustrationOnce(illustrationName);
-    if (illustrationName.startsWith("Tnt")) {
-        set = "tnt";
-        illustrationName = illustrationName.replace(/^Tnt/, "");
-    }
-    return registry.get(`${set}/${illustrationName}`);
+    return registry.get(registryKey);
 };
 export { getIllustrationDataSync, registerIllustration, registerIllustrationLoader, getIllustrationData, };
 //# sourceMappingURL=Illustrations.js.map

dist/asset-registries/Themes.d.ts

@@ -1,2 +0,2 @@
-import { StyleData, StyleDataCSP } from "../types.js";
+import type { StyleData, StyleDataCSP } from "../ManagedStyles.js";
 type ThemeData = {
@@ -7,6 +7,7 @@ _: StyleDataCSP;
 declare const registerThemePropertiesLoader: (packageName: string, themeName: string, loader: ThemeLoader) => void;
-declare const getThemeProperties: (packageName: string, themeName: string) => Promise<StyleData | undefined>;
+declare const registerCustomThemePropertiesLoader: (packageName: string, themeName: string, loader: ThemeLoader) => void;
+declare const getThemeProperties: (packageName: string, themeName: string, externalThemeName?: string) => Promise<StyleData | undefined>;
 declare const getRegisteredPackages: () => Set<string>;
 declare const isThemeRegistered: (theme: string) => boolean;
-export { registerThemePropertiesLoader, getThemeProperties, getRegisteredPackages, isThemeRegistered, };
+export { registerThemePropertiesLoader, registerCustomThemePropertiesLoader, getThemeProperties, getRegisteredPackages, isThemeRegistered, };
 export type { ThemeData, ThemeLoader, };

dist/asset-registries/Themes.js

 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
+import { mergeStyles } from "../ManagedStyles.js";
 import { fireThemeRegistered } from "../theming/ThemeRegistered.js";
 const themeStyles = new Map();
 const loaders = new Map();
+const customLoaders = new Map();
 const registeredPackages = new Set();
@@ -13,6 +15,10 @@ const registeredThemes = new Set();
 };
-const getThemeProperties = async (packageName, themeName) => {
-    const style = themeStyles.get(`${packageName}_${themeName}`);
-    if (style !== undefined) { // it's valid for style to be an empty string
-        return style;
+const registerCustomThemePropertiesLoader = (packageName, themeName, loader) => {
+    customLoaders.set(`${packageName}/${themeName}`, loader);
+};
+const getThemeProperties = async (packageName, themeName, externalThemeName) => {
+    const cacheKey = `${packageName}_${themeName}_${externalThemeName || ""}`;
+    const cachedStyleData = themeStyles.get(cacheKey);
+    if (cachedStyleData !== undefined) { // it's valid for style to be an empty string
+        return cachedStyleData;
     }
@@ -24,9 +30,20 @@ if (!registeredThemes.has(themeName)) {
     }
-    return _getThemeProperties(packageName, themeName);
+    const [style, customStyle] = await Promise.all([
+        _getThemeProperties(packageName, themeName),
+        externalThemeName ? _getThemeProperties(packageName, externalThemeName, true) : undefined,
+    ]);
+    const styleData = mergeStyles(style, customStyle);
+    if (styleData) {
+        themeStyles.set(cacheKey, styleData);
+    }
+    return styleData;
 };
-const _getThemeProperties = async (packageName, themeName) => {
-    const loader = loaders.get(`${packageName}/${themeName}`);
+const _getThemeProperties = async (packageName, themeName, forCustomTheme = false) => {
+    const loadersMap = forCustomTheme ? customLoaders : loaders;
+    const loader = loadersMap.get(`${packageName}/${themeName}`);
     if (!loader) {
         // no themes for package
-        console.error(`Theme [${themeName}] not registered for package [${packageName}]`); /* eslint-disable-line */
+        if (!forCustomTheme) {
+            console.error(`Theme [${themeName}] not registered for package [${packageName}]`); /* eslint-disable-line */
+        }
         return;
@@ -44,3 +61,2 @@ }
     const themeProps = data._ || data; // Refactor: remove _ everywhere
-    themeStyles.set(`${packageName}_${themeName}`, themeProps);
     return themeProps;
@@ -54,3 +70,3 @@ };
 };
-export { registerThemePropertiesLoader, getThemeProperties, getRegisteredPackages, isThemeRegistered, };
+export { registerThemePropertiesLoader, registerCustomThemePropertiesLoader, getThemeProperties, getRegisteredPackages, isThemeRegistered, };
 //# sourceMappingURL=Themes.js.map

dist/AssetRegistry.d.ts

 import { registerI18nLoader } from "./asset-registries/i18n.js";
 import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
-import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
+import { registerThemePropertiesLoader, registerCustomThemePropertiesLoader } from "./asset-registries/Themes.js";
 import { registerIconLoader } from "./asset-registries/Icons.js";
-export { registerI18nLoader, registerLocaleDataLoader, registerThemePropertiesLoader, registerIconLoader, };
+export { registerI18nLoader, registerLocaleDataLoader, registerThemePropertiesLoader, registerCustomThemePropertiesLoader, registerIconLoader, };

dist/AssetRegistry.js

 import { registerI18nLoader } from "./asset-registries/i18n.js";
 import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
-import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
+import { registerThemePropertiesLoader, registerCustomThemePropertiesLoader } from "./asset-registries/Themes.js";
 import { registerIconLoader } from "./asset-registries/Icons.js";
-export { registerI18nLoader, registerLocaleDataLoader, registerThemePropertiesLoader, registerIconLoader, };
+export { registerI18nLoader, registerLocaleDataLoader, registerThemePropertiesLoader, registerCustomThemePropertiesLoader, registerIconLoader, };
 //# sourceMappingURL=AssetRegistry.js.map

dist/Boot.js

@@ -38,3 +38,3 @@ import whenDOMReady from "./util/whenDOMReady.js";
         const openUI5Support = getFeature("OpenUI5Support");
-        const isOpenUI5Loaded = openUI5Support ? openUI5Support.isLoaded() : false;
+        const isOpenUI5Loaded = openUI5Support ? openUI5Support.isOpenUI5Detected() : false;
         const f6Navigation = getFeature("F6Navigation");
@@ -41,0 +41,0 @@ if (openUI5Support) {

dist/config/CalendarType.d.ts

@@ -8,2 +8,9 @@ import CalendarType from "../types/CalendarType.js";
 declare const getCalendarType: () => CalendarType;
-export { getCalendarType };
+/**
+ * Returns the configured secondary calendar type.
+ * @public
+ * @returns { CalendarType | undefined } the effective calendar type
+ * @since 1.18.0
+ */
+declare const getSecondaryCalendarType: () => CalendarType | undefined;
+export { getCalendarType, getSecondaryCalendarType, };

dist/config/CalendarType.js

 import CalendarType from "../types/CalendarType.js";
-import { getCalendarType as getConfiguredCalendarType } from "../InitialConfiguration.js";
+import { getCalendarType as getConfiguredCalendarType, getSecondaryCalendarType as getConfiguredSecondaryCalendarType, } from "../InitialConfiguration.js";
 let calendarType;
+let secondaryCalendarType;
 /**
@@ -18,3 +19,18 @@ * Returns the configured or default calendar type.
 };
-export { getCalendarType }; // eslint-disable-line
+/**
+ * Returns the configured secondary calendar type.
+ * @public
+ * @returns { CalendarType | undefined } the effective calendar type
+ * @since 1.18.0
+ */
+const getSecondaryCalendarType = () => {
+    if (secondaryCalendarType === undefined) {
+        secondaryCalendarType = getConfiguredSecondaryCalendarType();
+    }
+    if (secondaryCalendarType && secondaryCalendarType in CalendarType) {
+        return secondaryCalendarType;
+    }
+    return secondaryCalendarType;
+};
+export { getCalendarType, getSecondaryCalendarType, };
 //# sourceMappingURL=CalendarType.js.map

dist/config/Icons.d.ts

@@ -1,10 +0,2 @@
-type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | "business-suite-v1" | "business-suite-v2" | string;
-declare enum RegisteredIconCollection {
-    SAPIconsV4 = "SAP-icons-v4",
-    SAPIconsV5 = "SAP-icons-v5",
-    SAPIconsTNTV2 = "tnt-v2",
-    SAPIconsTNTV3 = "tnt-v3",
-    SAPBSIconsV1 = "business-suite-v1",
-    SAPBSIconsV2 = "business-suite-v2"
-}
+type IconCollection = string;
 /**
@@ -47,10 +39,3 @@ * Sets the default icon collection for a given theme.
 declare const getDefaultIconCollection: (theme: string) => string | undefined;
-/**
- * Returns the effective icon collection,
- * based on the default icon collection configuration and the current theme:
- * @param { IconCollection } collectionName
- * @returns { IconCollection } the effective collection name
- */
-declare const getEffectiveIconCollection: (collectionName?: IconCollection) => IconCollection;
-export { setDefaultIconCollection, getDefaultIconCollection, getEffectiveIconCollection, RegisteredIconCollection, };
+export { setDefaultIconCollection, getDefaultIconCollection, };
 export type { IconCollection, };

dist/config/Icons.js

@@ -1,14 +0,2 @@
-import { getTheme, isLegacyThemeFamily } from "./Theme.js";
-import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
 const IconCollectionConfiguration = new Map();
-// All registered icon collections - all icon collections resolves to these options at the end
-var RegisteredIconCollection;
-(function (RegisteredIconCollection) {
-    RegisteredIconCollection["SAPIconsV4"] = "SAP-icons-v4";
-    RegisteredIconCollection["SAPIconsV5"] = "SAP-icons-v5";
-    RegisteredIconCollection["SAPIconsTNTV2"] = "tnt-v2";
-    RegisteredIconCollection["SAPIconsTNTV3"] = "tnt-v3";
-    RegisteredIconCollection["SAPBSIconsV1"] = "business-suite-v1";
-    RegisteredIconCollection["SAPBSIconsV2"] = "business-suite-v2";
-})(RegisteredIconCollection || (RegisteredIconCollection = {}));
 /**
@@ -55,50 +43,3 @@ * Sets the default icon collection for a given theme.
 };
-/**
- * Returns the effective icon collection,
- * based on the default icon collection configuration and the current theme:
- * @param { IconCollection } collectionName
- * @returns { IconCollection } the effective collection name
- */
-const getEffectiveIconCollection = (collectionName) => {
-    const currentTheme = getTheme();
-    const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
-    // when no collection is set and default collection is configured - return the configured icon collection
-    if (!collectionName && currentThemeConfiguration) {
-        return getIconCollectionByAlias(currentThemeConfiguration);
-    }
-    // when collection is set - return the theme dependant icon collection
-    // when collection is not set and there is no default icon collection configured - return theme dependant icon collection
-    return getIconCollectionByTheme(collectionName);
-};
-/**
- * Returns the icon theme dependant collection, based on the collection name and current theme as follows:
- *
- * - "no collection" resolves to "SAP-icons-v4" in "Quartz" and "Belize", and to "SAP-icons-v5" in "Horizon" (or as confugred via setDefaultIconCollection)
- * - "SAP-icons-v4" (and its alias "SAP-icons") forces "SAP-icons v4" in any theme and resolves to itself "SAP-icons-v4"
- * - "SAP-icons-v5" (and its alias "horizon") forces  "SAP-icons v5" in any theme and resolves to itself "SAP-icons-v5"
- * - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
- * - "tnt-v2" forces "TNT icons v2" in any theme and resolves to itself "tnt-v2"
- * - "tnt-v3" forces "TNT icons v3" in any theme and resolves to itself "tnt-v3"
- * - "business-suite" (and its alias "BusinessSuiteInAppSymbols") resolves to "business-suite-v1" in "Quartz", "Belize", and resolves to "business-suite-v2" in "Horizon"
- * - "business-suite-v1" forces "Business Suite icons v1" in any theme and resolves to itself "business-suite-v1"
- * - "business-suite-v2" forces "Business Suite icons v2" in any theme and resolves to itself "business-suite-v2"
- *
- * <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3", "business-suite-v1" and "business-suite-v2" are just returned
- * @param { IconCollection } collectionName
- * @returns { RegisteredIconCollection } the registered collection name
- */
-const getIconCollectionByTheme = (collectionName) => {
-    const legacyThemeFamily = isLegacyThemeFamily();
-    if (!collectionName) {
-        return legacyThemeFamily ? RegisteredIconCollection.SAPIconsV4 : RegisteredIconCollection.SAPIconsV5;
-    }
-    if (collectionName === "tnt") {
-        return legacyThemeFamily ? RegisteredIconCollection.SAPIconsTNTV2 : RegisteredIconCollection.SAPIconsTNTV3;
-    }
-    if (collectionName === "business-suite") {
-        return legacyThemeFamily ? RegisteredIconCollection.SAPBSIconsV1 : RegisteredIconCollection.SAPBSIconsV2;
-    }
-    return collectionName;
-};
-export { setDefaultIconCollection, getDefaultIconCollection, getEffectiveIconCollection, RegisteredIconCollection, };
+export { setDefaultIconCollection, getDefaultIconCollection, };
 //# sourceMappingURL=Icons.js.map

dist/CustomElementsScope.d.ts

@@ -1,7 +0,7 @@
-import { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
+import { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, getScopedVarName } from "./CustomElementsScopeUtils.js";
 declare class LitStatic {
-    static html: (strings: TemplateStringsArray, ...values: unknown[]) => import("lit-html").TemplateResult<1 | 2>;
-    static svg: (strings: TemplateStringsArray, ...values: unknown[]) => import("lit-html").TemplateResult<1 | 2>;
+    static html: (strings: TemplateStringsArray, ...values: unknown[]) => import("lit-html").TemplateResult;
+    static svg: (strings: TemplateStringsArray, ...values: unknown[]) => import("lit-html").TemplateResult;
     static unsafeStatic: (value: string) => object;
 }
-export { LitStatic, setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, };
+export { LitStatic, setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, getScopedVarName, };

dist/CustomElementsScope.js

 import { html, svg, unsafeStatic, } from "lit-html/static.js";
-import { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, } from "./CustomElementsScopeUtils.js";
+import { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, getScopedVarName, } from "./CustomElementsScopeUtils.js";
 import { registerFeature } from "./FeaturesRegistry.js";
@@ -10,3 +10,3 @@ class LitStatic {
 registerFeature("LitStatic", LitStatic);
-export { LitStatic, setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, };
+export { LitStatic, setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, getScopedVarName, };
 //# sourceMappingURL=CustomElementsScope.js.map

dist/CustomElementsScopeUtils.d.ts

@@ -55,2 +55,9 @@ type Rules = {
 declare const getEffectiveScopingSuffixForTag: (tag: string) => string | undefined;
-export { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, };
+/**
+ * @public
+ * Used for getting a scoped name for a CSS variable using the same transformation used in the build
+ * @name the name of the css variable as written in the code
+ * @returns a variable name with the current version inserted as available at runtime
+ */
+declare const getScopedVarName: (name: string) => string;
+export { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, getScopedVarName, };

dist/CustomElementsScopeUtils.js

@@ -0,1 +1,2 @@
+import VersionInfo from "./generated/VersionInfo.js";
 let suf;
@@ -89,3 +90,14 @@ let rulesObj = {
 };
-export { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, };
+/**
+ * @public
+ * Used for getting a scoped name for a CSS variable using the same transformation used in the build
+ * @name the name of the css variable as written in the code
+ * @returns a variable name with the current version inserted as available at runtime
+ */
+const getScopedVarName = (name) => {
+    const versionStr = `v${VersionInfo.version.replaceAll(".", "-")}`;
+    const expr = /(--_?ui5)([^,:)\s]+)/g;
+    return name.replaceAll(expr, `$1-${versionStr}$2`);
+};
+export { setCustomElementsScopingSuffix, getCustomElementsScopingSuffix, setCustomElementsScopingRules, getCustomElementsScopingRules, shouldScopeCustomElement, getEffectiveScopingSuffixForTag, getScopedVarName, };
 //# sourceMappingURL=CustomElementsScopeUtils.js.map

dist/decorators/customElement.d.ts

@@ -11,3 +11,3 @@ import type UI5Element from "../UI5Element.js";
  */
-declare const customElement: (tagNameOrComponentSettings: string | {
+declare const customElement: (tagNameOrComponentSettings?: string | {
     tag?: string;
@@ -14,0 +14,0 @@ renderer?: Renderer;

dist/decorators/customElement.js

@@ -7,3 +7,3 @@ /**
  */
-const customElement = (tagNameOrComponentSettings) => {
+const customElement = (tagNameOrComponentSettings = {}) => {
     return (target) => {
@@ -10,0 +10,0 @@ if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {

dist/delegate/ItemNavigation.d.ts

@@ -59,2 +59,3 @@ import NavigationMode from "../types/NavigationMode.js";
     _skipItemsSize: number | null;
+    _initBound: () => void;
     /**
@@ -61,0 +62,0 @@ *

dist/delegate/ItemNavigation.js

@@ -60,5 +60,4 @@ import { isDown, isUp, isLeft, isRight, isHome, isEnd, isPageDown, isPageUp, } from "../Keys.js";
         this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this));
-        this.rootWebComponent._onComponentStateFinalized = () => {
-            this._init();
-        };
+        this._initBound = this._init.bind(this);
+        this.rootWebComponent.attachComponentStateFinalized(this._initBound);
         if (typeof options.getItemsCallback !== "function") {
@@ -280,3 +279,3 @@ throw new Error("getItemsCallback is required");
         if (currentItem) {
-            currentItem.focus({ focusVisible: true });
+            currentItem.focus();
         }
@@ -313,3 +312,3 @@ }
         if (currentItem.id) {
-            return currentItemDOMRef.querySelector(`#${currentItem.id}`);
+            return currentItemDOMRef.querySelector(`[id="${currentItem.id}"]`);
         }
@@ -316,0 +315,0 @@ }

dist/delegate/ResizeHandler.d.ts

@@ -10,13 +10,11 @@ type ResizeObserverCallback = () => Promise<void> | void;
     /**
-     * @static
      * @public
-     * @param {*} element UI5 Web Component or DOM Element to be observed
-     * @param {*} callback Callback to be executed
+     * @param element UI5 Web Component or DOM Element to be observed
+     * @param callback Callback to be executed
      */
     static register(element: HTMLElement, callback: ResizeObserverCallback): void;
     /**
-     * @static
      * @public
-     * @param {*} element UI5 Web Component or DOM Element to be unobserved
-     * @param {*} callback Callback to be removed
+     * @param element UI5 Web Component or DOM Element to be unobserved
+     * @param callback Callback to be removed
      */
@@ -23,0 +21,0 @@ static deregister(element: HTMLElement, callback: ResizeObserverCallback): void;

dist/delegate/ResizeHandler.js

@@ -50,6 +50,5 @@ import { instanceOfUI5Element } from "../UI5Element.js";
     /**
-     * @static
      * @public
-     * @param {*} element UI5 Web Component or DOM Element to be observed
-     * @param {*} callback Callback to be executed
+     * @param element UI5 Web Component or DOM Element to be observed
+     * @param callback Callback to be executed
      */
@@ -69,6 +68,5 @@ static register(element, callback) {
     /**
-     * @static
      * @public
-     * @param {*} element UI5 Web Component or DOM Element to be unobserved
-     * @param {*} callback Callback to be removed
+     * @param element UI5 Web Component or DOM Element to be unobserved
+     * @param callback Callback to be removed
      */
@@ -75,0 +73,0 @@ static deregister(element, callback) {

dist/delegate/ScrollEnablement.js

@@ -95,3 +95,3 @@ import { supportsTouch } from "../Device.js";
         }
-        if (!this.supportsTouch) {
+        if (!touch) {
             document.addEventListener("mouseup", this.mouseUp, { passive: true });
@@ -105,3 +105,3 @@ document.addEventListener("mousemove", this.mouseMove, { passive: true });
         }
-        if (this.supportsTouch && event instanceof TouchEvent) {
+        if (touch) {
             this._prevDragX = touch.pageX;
@@ -108,0 +108,0 @@ this._prevDragY = touch.pageY;

dist/Device.d.ts

@@ -11,3 +11,4 @@ declare const supportsTouch: () => boolean;
 declare const isIOS: () => boolean;
+declare const isMac: () => boolean;
 declare const isAndroid: () => boolean;
-export { supportsTouch, isIE, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, };
+export { supportsTouch, isIE, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, isMac, };

dist/Device.js

@@ -51,2 +51,8 @@ const isSSR = typeof document === "undefined";
     },
+    get macOS() {
+        if (isSSR) {
+            return false;
+        }
+        return !!navigator.userAgent.match(/Macintosh|Mac OS X/i);
+    },
     get iOS() {
@@ -163,6 +169,9 @@ if (isSSR) {
 };
+const isMac = () => {
+    return internals.macOS;
+};
 const isAndroid = () => {
     return internals.android || internals.androidPhone;
 };
-export { supportsTouch, isIE, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, };
+export { supportsTouch, isIE, isSafari, isChrome, isFirefox, isPhone, isTablet, isDesktop, isCombi, isIOS, isAndroid, isMac, };
 //# sourceMappingURL=Device.js.map

dist/features/OpenUI5Enablement.d.ts

@@ -5,3 +5,3 @@ import { TemplateResult } from "lit-html";
 declare class OpenUI5Enablement {
-    static wrapTemplateResultInBusyMarkup(html: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult, host: OpenUI5Element, templateResult: TemplateResult): TemplateResult<1 | 2>;
+    static wrapTemplateResultInBusyMarkup(html: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult, host: OpenUI5Element, templateResult: TemplateResult): TemplateResult;
     static enrichBusyIndicatorSettings(klass: typeof UI5Element): void;
@@ -8,0 +8,0 @@ static enrichBusyIndicatorMetadata(klass: typeof UI5Element): void;

dist/features/OpenUI5Support.d.ts

 import { CLDRData } from "../asset-registries/LocaleData.js";
 import type { LegacyDateCalendarCustomizing } from "../features/LegacyDateFormats.js";
 declare class OpenUI5Support {
-    static isLoaded(): boolean;
+    static isAtLeastVersion116(): boolean;
+    static isOpenUI5Detected(): boolean;
     static init(): Promise<void>;
     static getConfigurationSettingsObject(): {
+        animationMode?: undefined;
+        language?: undefined;
+        theme?: undefined;
+        themeRoot?: undefined;
+        rtl?: undefined;
+        timezone?: undefined;
+        calendarType?: undefined;
+        formatSettings?: undefined;
+    } | {
         animationMode: string;
@@ -15,6 +25,6 @@ language: string;
         formatSettings: {
-            firstDayOfWeek: any;
+            firstDayOfWeek: number | undefined;
             legacyDateCalendarCustomizing: LegacyDateCalendarCustomizing;
         };
-    } | undefined;
+    };
     static getLocaleDataObject(): CLDRData | undefined;
@@ -21,0 +31,0 @@ static _listenForThemeChange(): void;

dist/features/OpenUI5Support.js

 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
 import { getCurrentZIndex } from "../util/PopupUtils.js";
-const getCore = () => {
-    return window.sap?.ui?.getCore?.();
-};
 class OpenUI5Support {
-    static isLoaded() {
-        return !!getCore();
+    static isAtLeastVersion116() {
+        const version = window.sap.ui.version;
+        const parts = version.split(".");
+        if (!parts || parts.length < 2) {
+            return false;
+        }
+        return parseInt(parts[0]) > 1 || parseInt(parts[1]) >= 116;
     }
+    static isOpenUI5Detected() {
+        return typeof window.sap?.ui?.require === "function";
+    }
     static init() {
-        const core = getCore();
-        if (!core) {
+        if (!OpenUI5Support.isOpenUI5Detected()) {
             return Promise.resolve();
         }
         return new Promise(resolve => {
-            core.attachInit(() => {
-                window.sap.ui.require(["sap/ui/core/LocaleData", "sap/ui/core/Popup"], (LocaleData, Popup) => {
-                    Popup.setInitialZIndex(getCurrentZIndex());
-                    resolve();
-                });
+            window.sap.ui.require(["sap/ui/core/Core"], async (Core) => {
+                const callback = () => {
+                    let deps = ["sap/ui/core/Popup", "sap/ui/core/LocaleData"];
+                    if (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core
+                        deps = [
+                            ...deps,
+                            "sap/base/i18n/Formatting",
+                            "sap/base/i18n/Localization",
+                            "sap/ui/core/ControlBehavior",
+                            "sap/ui/core/Theming",
+                            "sap/ui/core/date/CalendarUtils",
+                        ];
+                    }
+                    window.sap.ui.require(deps, (Popup) => {
+                        Popup.setInitialZIndex(getCurrentZIndex());
+                        resolve();
+                    });
+                };
+                if (OpenUI5Support.isAtLeastVersion116()) {
+                    await Core.ready();
+                    callback();
+                }
+                else {
+                    Core.attachInit(callback);
+                }
             });
@@ -26,7 +50,28 @@ });
     static getConfigurationSettingsObject() {
-        const core = getCore();
-        if (!core) {
-            return;
+        if (!OpenUI5Support.isOpenUI5Detected()) {
+            return {};
         }
-        const config = core.getConfiguration();
+        if (OpenUI5Support.isAtLeastVersion116()) {
+            const ControlBehavior = window.sap.ui.require("sap/ui/core/ControlBehavior");
+            const Localization = window.sap.ui.require("sap/base/i18n/Localization");
+            const Theming = window.sap.ui.require("sap/ui/core/Theming");
+            const Formatting = window.sap.ui.require("sap/base/i18n/Formatting");
+            const CalendarUtils = window.sap.ui.require("sap/ui/core/date/CalendarUtils");
+            return {
+                animationMode: ControlBehavior.getAnimationMode(),
+                language: Localization.getLanguage(),
+                theme: Theming.getTheme(),
+                themeRoot: Theming.getThemeRoot(),
+                rtl: Localization.getRTL(),
+                timezone: Localization.getTimezone(),
+                calendarType: Formatting.getCalendarType(),
+                formatSettings: {
+                    firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek,
+                    legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.()
+                        ?? Formatting.getLegacyDateCalendarCustomizing?.(),
+                },
+            };
+        }
+        const Core = window.sap.ui.require("sap/ui/core/Core");
+        const config = Core.getConfiguration();
         const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
@@ -48,20 +93,31 @@ return {
     static getLocaleDataObject() {
-        const core = getCore();
-        if (!core) {
+        if (!OpenUI5Support.isOpenUI5Detected()) {
             return;
         }
-        const config = core.getConfiguration();
         const LocaleData = window.sap.ui.require("sap/ui/core/LocaleData");
+        if (OpenUI5Support.isAtLeastVersion116()) {
+            const Localization = window.sap.ui.require("sap/base/i18n/Localization");
+            return LocaleData.getInstance(Localization.getLanguageTag())._get();
+        }
+        const Core = window.sap.ui.require("sap/ui/core/Core");
+        const config = Core.getConfiguration();
         return LocaleData.getInstance(config.getLocale())._get();
     }
     static _listenForThemeChange() {
-        const core = getCore();
-        const config = core.getConfiguration();
-        core.attachThemeChanged(async () => {
-            await setTheme(config.getTheme());
-        });
+        if (OpenUI5Support.isAtLeastVersion116()) {
+            const Theming = window.sap.ui.require("sap/ui/core/Theming");
+            Theming.attachApplied(() => {
+                setTheme(Theming.getTheme());
+            });
+        }
+        else {
+            const Core = window.sap.ui.require("sap/ui/core/Core");
+            const config = Core.getConfiguration();
+            Core.attachThemeChanged(() => {
+                setTheme(config.getTheme());
+            });
+        }
     }
     static attachListeners() {
-        const core = getCore();
-        if (!core) {
+        if (!OpenUI5Support.isOpenUI5Detected()) {
             return;
@@ -72,4 +128,3 @@ }
     static cssVariablesLoaded() {
-        const core = getCore();
-        if (!core) {
+        if (!OpenUI5Support.isOpenUI5Detected()) {
             return;
@@ -79,3 +134,3 @@ }
         if (!link) {
-            return;
+            return false;
         }
@@ -85,12 +140,13 @@ return !!link.href.match(/\/css(-|_)variables\.css/);
     static getNextZIndex() {
-        const core = getCore();
-        if (!core) {
+        if (!OpenUI5Support.isOpenUI5Detected()) {
             return;
         }
         const Popup = window.sap.ui.require("sap/ui/core/Popup");
+        if (!Popup) {
+            console.warn(`The OpenUI5Support feature hasn't been initialized properly. Make sure you import the "@ui5/webcomponents-base/dist/features/OpenUI5Support.js" module before all components' modules.`); // eslint-disable-line
+        }
         return Popup.getNextZIndex();
     }
     static setInitialZIndex() {
-        const core = getCore();
-        if (!core) {
+        if (!OpenUI5Support.isOpenUI5Detected()) {
             return;
@@ -97,0 +153,0 @@ }

dist/FontFace.js

@@ -8,3 +8,3 @@ import { hasStyle, createStyle } from "./ManagedStyles.js";
     // Only set the main font if there is no OpenUI5 support, or there is, but OpenUI5 is not loaded
-    if (!openUI5Support || !openUI5Support.isLoaded()) {
+    if (!openUI5Support || !openUI5Support.isOpenUI5Detected()) {
         insertMainFontFace();
@@ -11,0 +11,0 @@ }

dist/generated/AssetParameters.js

@@ -1,3 +0,2 @@
-const assetParameters = {"themes":{"default":"sap_fiori_3","all":["sap_fiori_3","sap_fiori_3_dark","sap_belize","sap_belize_hcb","sap_belize_hcw","sap_fiori_3_hcb","sap_fiori_3_hcw","sap_horizon","sap_horizon_dark","sap_horizon_hcb","sap_horizon_hcw","sap_horizon_exp"]},"languages":{"default":"en","all":["ar","bg","ca","cs","cy","da","de","el","en","en_GB","en_US_sappsd","en_US_saprigi","en_US_saptrc","es","es_MX","et","fi","fr","fr_CA","hi","hr","hu","in","it","iw","ja","kk","ko","lt","lv","ms","nl","no","pl","pt_PT","pt","ro","ru","sh","sk","sl","sv","th","tr","uk","vi","zh_CN","zh_TW"]},"locales":{"default":"en","all":["ar","ar_EG","ar_SA","bg","ca","cs","da","de","de_AT","de_CH","el","el_CY","en","en_AU","en_GB","en_HK","en_IE","en_IN","en_NZ","en_PG","en_SG","en_ZA","es","es_AR","es_BO","es_CL","es_CO","es_MX","es_PE","es_UY","es_VE","et","fa","fi","fr","fr_BE","fr_CA","fr_CH","fr_LU","he","hi","hr","hu","id","it","it_CH","ja","kk","ko","lt","lv","ms","nb","nl","nl_BE","pl","pt","pt_PT","ro","ru","ru_UA","sk","sl","sr","sr_Latn","sv","th","tr","uk","vi","zh_CN","zh_HK","zh_SG","zh_TW"]}};
-
+const assetParameters = { "themes": { "default": "sap_horizon", "all": ["sap_fiori_3", "sap_fiori_3_dark", "sap_belize", "sap_belize_hcb", "sap_belize_hcw", "sap_fiori_3_hcb", "sap_fiori_3_hcw", "sap_horizon", "sap_horizon_dark", "sap_horizon_hcb", "sap_horizon_hcw", "sap_horizon_exp", "sap_horizon_dark_exp", "sap_horizon_hcb_exp", "sap_horizon_hcw_exp"] }, "languages": { "default": "en", "all": ["ar", "bg", "ca", "cnr", "cs", "cy", "da", "de", "el", "en", "en_GB", "en_US_sappsd", "en_US_saprigi", "en_US_saptrc", "es", "es_MX", "et", "fi", "fr", "fr_CA", "hi", "hr", "hu", "in", "it", "iw", "ja", "kk", "ko", "lt", "lv", "mk", "ms", "nl", "no", "pl", "pt_PT", "pt", "ro", "ru", "sh", "sk", "sl", "sr", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_TW"] }, "locales": { "default": "en", "all": ["ar", "ar_EG", "ar_SA", "bg", "ca", "cs", "da", "de", "de_AT", "de_CH", "el", "el_CY", "en", "en_AU", "en_GB", "en_HK", "en_IE", "en_IN", "en_NZ", "en_PG", "en_SG", "en_ZA", "es", "es_AR", "es_BO", "es_CL", "es_CO", "es_MX", "es_PE", "es_UY", "es_VE", "et", "fa", "fi", "fr", "fr_BE", "fr_CA", "fr_CH", "fr_LU", "he", "hi", "hr", "hu", "id", "it", "it_CH", "ja", "kk", "ko", "lt", "lv", "ms", "nb", "nl", "nl_BE", "pl", "pt", "pt_PT", "ro", "ru", "ru_UA", "sk", "sl", "sr", "sr_Latn", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_HK", "zh_SG", "zh_TW"] } };
 const DEFAULT_THEME = assetParameters.themes.default;
@@ -8,9 +7,3 @@ const SUPPORTED_THEMES = assetParameters.themes.all;
 const SUPPORTED_LOCALES = assetParameters.locales.all;
-
-export {
-	DEFAULT_THEME,
-	SUPPORTED_THEMES,
-	DEFAULT_LANGUAGE,
-	DEFAULT_LOCALE,
-	SUPPORTED_LOCALES,
-};
+export { DEFAULT_THEME, SUPPORTED_THEMES, DEFAULT_LANGUAGE, DEFAULT_LOCALE, SUPPORTED_LOCALES, };
+//# sourceMappingURL=AssetParameters.js.map

dist/generated/css/FontFace.css.js

 const styleData = {
     packageName: "@ui5/webcomponents-base",
     fileName: "FontFace.css",
-    content: `@font-face{font-family:"72";font-style:normal;font-weight:400;src:local("72"),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:"72full";font-style:normal;font-weight:400;src:local('72-full'),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:"72";font-style:normal;font-weight:700;src:local('72-Bold'),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:"72full";font-style:normal;font-weight:700;src:local('72-Bold-full'),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72-Bold';font-style:normal;src:local('72-Bold'),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72-Boldfull';font-style:normal;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72-Light';font-style:normal;src:local('72-Light'),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72-Lightfull';font-style:normal;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:"72Black";font-style:bold;font-weight:900;src:local('72Black'),url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2")}`,
+    content: `@font-face{font-family:"72";font-style:normal;font-weight:400;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Regular.woff2?ui5-webcomponents) format("woff2"),local("72");unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:"72full";font-style:normal;font-weight:400;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Regular-full.woff2?ui5-webcomponents) format("woff2"),local('72-full')}@font-face{font-family:"72";font-style:normal;font-weight:700;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),local('72-Bold');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:"72full";font-style:normal;font-weight:700;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72-Bold';font-style:normal;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2"),local('72-Bold');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:'72-Boldfull';font-style:normal;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72-Light';font-style:normal;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Light.woff2?ui5-webcomponents) format("woff2"),local('72-Light');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:'72-Lightfull';font-style:normal;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2")}@font-face{font-family:'72Mono';src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72Mono-Regular.woff2?ui5-webcomponents) format('woff2'),local('72Mono');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:'72Monofull';src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72Mono-Regular-full.woff2?ui5-webcomponents) format('woff2')}@font-face{font-family:'72Mono-Bold';src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72Mono-Bold.woff2?ui5-webcomponents) format('woff2'),local('72Mono-Bold');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:'72Mono-Boldfull';src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72Mono-Bold-full.woff2?ui5-webcomponents) format('woff2')}@font-face{font-family:"72Black";font-style:bold;font-weight:900;src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2"),local('72Black');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}@font-face{font-family:'72Blackfull';src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black-full.woff2?ui5-webcomponents) format('woff2')}@font-face{font-family:"72-SemiboldDuplex";src:url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-SemiboldDuplex.woff2?ui5-webcomponents) format("woff2"),local('72-SemiboldDuplex');unicode-range:U+00,U+0D,U+20-7E,U+A0-FF,U+131,U+152-153,U+161,U+178,U+17D-17E,U+192,U+237,U+2C6,U+2DC,U+3BC,U+1E9E,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122}`,
 };
 export default styleData;
 //# sourceMappingURL=FontFace.css.js.map

dist/generated/templates/elements/WithComplexTemplateTemplate.lit.d.ts

 import type UI5Element from "../../../UI5Element.js";
 import type WithComplexTemplate from "../../../../test/elements/WithComplexTemplate.js";
-declare function block0(this: WithComplexTemplate, context: UI5Element, tags: string[], suffix: string | undefined): import("lit-html").TemplateResult<1 | 2>;
+declare function block0(this: WithComplexTemplate, context: UI5Element, tags: string[], suffix: string | undefined): import("lit-html").TemplateResult;
 export default block0;

dist/generated/VersionInfo.js

 const VersionInfo = {
-	version: "0.0.0-3790e6927",
-	major: 0,
-	minor: 0,
-	patch: 0,
-	suffix: "-3790e6927",
-	isNext: true,
-	buildTime: 1685705454,
+    version: "1.22.0-rc.0",
+    major: 1,
+    minor: 22,
+    patch: 0,
+    suffix: "-rc.0",
+    isNext: false,
+    buildTime: 1705492078,
 };
-export default VersionInfo;
+export default VersionInfo;
+//# sourceMappingURL=VersionInfo.js.map

dist/i18nBundle.d.ts

@@ -18,7 +18,6 @@ import { registerI18nLoader } from "./asset-registries/i18n.js";
      * @public
-     * @param {Object|String} textObj key/defaultText pair or just the key
+     * @param textObj key/defaultText pair or just the key
      * @param params Values for the placeholders
-     * @returns {string}
      */
-    getText(textObj: I18nText, ...params: Array<number | string>): string;
+    getText(textObj: I18nText | string, ...params: Array<number | string>): string;
 }
@@ -30,3 +29,2 @@ /**
  * @param packageName
- * @returns { Promise<I18nBundle> }
  */
@@ -33,0 +31,0 @@ declare const getI18nBundle: (packageName: string) => Promise<I18nBundle>;

dist/i18nBundle.js

@@ -17,5 +17,4 @@ import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
      * @public
-     * @param {Object|String} textObj key/defaultText pair or just the key
+     * @param textObj key/defaultText pair or just the key
      * @param params Values for the placeholders
-     * @returns {string}
      */
@@ -43,3 +42,2 @@ getText(textObj, ...params) {
  * @param packageName
- * @returns { I18nBundle }
  */
@@ -59,3 +57,2 @@ const getI18nBundleSync = (packageName) => {
  * @param packageName
- * @returns { Promise<I18nBundle> }
  */
@@ -62,0 +59,0 @@ const getI18nBundle = async (packageName) => {

dist/InitialConfiguration.d.ts

@@ -21,2 +21,3 @@ import type { FormatSettings } from "./config/FormatSettings.js";
 declare const getCalendarType: () => CalendarType | undefined;
+declare const getSecondaryCalendarType: () => CalendarType | undefined;
 /**
@@ -28,2 +29,2 @@ * Returns the configured IANA timezone ID.
 declare const getFormatSettings: () => FormatSettings;
-export { getAnimationMode, getTheme, getThemeRoot, getRTL, getLanguage, getFetchDefaultLanguage, getNoConflict, getCalendarType, getTimezone, getFormatSettings, };
+export { getAnimationMode, getTheme, getThemeRoot, getRTL, getLanguage, getFetchDefaultLanguage, getNoConflict, getCalendarType, getSecondaryCalendarType, getTimezone, getFormatSettings, };

dist/InitialConfiguration.js

@@ -15,2 +15,3 @@ import merge from "./thirdparty/merge.js";
     calendarType: undefined,
+    secondaryCalendarType: undefined,
     noConflict: false,
@@ -62,2 +63,6 @@ formatSettings: {},
 };
+const getSecondaryCalendarType = () => {
+    initConfiguration();
+    return initialConfig.secondaryCalendarType;
+};
 /**
@@ -139,3 +144,3 @@ * Returns the configured IANA timezone ID.
     const openUI5Support = getFeature("OpenUI5Support");
-    if (!openUI5Support || !openUI5Support.isLoaded()) {
+    if (!openUI5Support || !openUI5Support.isOpenUI5Detected()) {
         return;
@@ -158,3 +163,3 @@ }
 };
-export { getAnimationMode, getTheme, getThemeRoot, getRTL, getLanguage, getFetchDefaultLanguage, getNoConflict, getCalendarType, getTimezone, getFormatSettings, };
+export { getAnimationMode, getTheme, getThemeRoot, getRTL, getLanguage, getFetchDefaultLanguage, getNoConflict, getCalendarType, getSecondaryCalendarType, getTimezone, getFormatSettings, };
 //# sourceMappingURL=InitialConfiguration.js.map

dist/Keys.d.ts

@@ -57,2 +57,6 @@ declare const isEnter: (event: KeyboardEvent) => boolean;
 declare const isCtrlV: (event: KeyboardEvent) => boolean;
-export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF4, isF4Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isDeleteShift, isInsertShift, isInsertCtrl, };
+declare const isKeyA: (event: KeyboardEvent) => boolean;
+declare const isKeyP: (event: KeyboardEvent) => boolean;
+declare const isNumber: (event: KeyboardEvent) => boolean;
+declare const isColon: (event: KeyboardEvent) => boolean;
+export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF4, isF4Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isKeyA, isKeyP, isDeleteShift, isInsertShift, isInsertCtrl, isNumber, isColon, };

dist/Keys.js

@@ -1,106 +0,105 @@
-var KeyCodes;
-(function (KeyCodes) {
-    KeyCodes[KeyCodes["BACKSPACE"] = 8] = "BACKSPACE";
-    KeyCodes[KeyCodes["TAB"] = 9] = "TAB";
-    KeyCodes[KeyCodes["ENTER"] = 13] = "ENTER";
-    KeyCodes[KeyCodes["SHIFT"] = 16] = "SHIFT";
-    KeyCodes[KeyCodes["CONTROL"] = 17] = "CONTROL";
-    KeyCodes[KeyCodes["ALT"] = 18] = "ALT";
-    KeyCodes[KeyCodes["BREAK"] = 19] = "BREAK";
-    KeyCodes[KeyCodes["CAPS_LOCK"] = 20] = "CAPS_LOCK";
-    KeyCodes[KeyCodes["ESCAPE"] = 27] = "ESCAPE";
-    KeyCodes[KeyCodes["SPACE"] = 32] = "SPACE";
-    KeyCodes[KeyCodes["PAGE_UP"] = 33] = "PAGE_UP";
-    KeyCodes[KeyCodes["PAGE_DOWN"] = 34] = "PAGE_DOWN";
-    KeyCodes[KeyCodes["END"] = 35] = "END";
-    KeyCodes[KeyCodes["HOME"] = 36] = "HOME";
-    KeyCodes[KeyCodes["ARROW_LEFT"] = 37] = "ARROW_LEFT";
-    KeyCodes[KeyCodes["ARROW_UP"] = 38] = "ARROW_UP";
-    KeyCodes[KeyCodes["ARROW_RIGHT"] = 39] = "ARROW_RIGHT";
-    KeyCodes[KeyCodes["ARROW_DOWN"] = 40] = "ARROW_DOWN";
-    KeyCodes[KeyCodes["PRINT"] = 44] = "PRINT";
-    KeyCodes[KeyCodes["INSERT"] = 45] = "INSERT";
-    KeyCodes[KeyCodes["DELETE"] = 46] = "DELETE";
-    KeyCodes[KeyCodes["DIGIT_0"] = 48] = "DIGIT_0";
-    KeyCodes[KeyCodes["DIGIT_1"] = 49] = "DIGIT_1";
-    KeyCodes[KeyCodes["DIGIT_2"] = 50] = "DIGIT_2";
-    KeyCodes[KeyCodes["DIGIT_3"] = 51] = "DIGIT_3";
-    KeyCodes[KeyCodes["DIGIT_4"] = 52] = "DIGIT_4";
-    KeyCodes[KeyCodes["DIGIT_5"] = 53] = "DIGIT_5";
-    KeyCodes[KeyCodes["DIGIT_6"] = 54] = "DIGIT_6";
-    KeyCodes[KeyCodes["DIGIT_7"] = 55] = "DIGIT_7";
-    KeyCodes[KeyCodes["DIGIT_8"] = 56] = "DIGIT_8";
-    KeyCodes[KeyCodes["DIGIT_9"] = 57] = "DIGIT_9";
-    KeyCodes[KeyCodes["A"] = 65] = "A";
-    KeyCodes[KeyCodes["B"] = 66] = "B";
-    KeyCodes[KeyCodes["C"] = 67] = "C";
-    KeyCodes[KeyCodes["D"] = 68] = "D";
-    KeyCodes[KeyCodes["E"] = 69] = "E";
-    KeyCodes[KeyCodes["F"] = 70] = "F";
-    KeyCodes[KeyCodes["G"] = 71] = "G";
-    KeyCodes[KeyCodes["H"] = 72] = "H";
-    KeyCodes[KeyCodes["I"] = 73] = "I";
-    KeyCodes[KeyCodes["J"] = 74] = "J";
-    KeyCodes[KeyCodes["K"] = 75] = "K";
-    KeyCodes[KeyCodes["L"] = 76] = "L";
-    KeyCodes[KeyCodes["M"] = 77] = "M";
-    KeyCodes[KeyCodes["N"] = 78] = "N";
-    KeyCodes[KeyCodes["O"] = 79] = "O";
-    KeyCodes[KeyCodes["P"] = 80] = "P";
-    KeyCodes[KeyCodes["Q"] = 81] = "Q";
-    KeyCodes[KeyCodes["R"] = 82] = "R";
-    KeyCodes[KeyCodes["S"] = 83] = "S";
-    KeyCodes[KeyCodes["T"] = 84] = "T";
-    KeyCodes[KeyCodes["U"] = 85] = "U";
-    KeyCodes[KeyCodes["V"] = 86] = "V";
-    KeyCodes[KeyCodes["W"] = 87] = "W";
-    KeyCodes[KeyCodes["X"] = 88] = "X";
-    KeyCodes[KeyCodes["Y"] = 89] = "Y";
-    KeyCodes[KeyCodes["Z"] = 90] = "Z";
-    KeyCodes[KeyCodes["WINDOWS"] = 91] = "WINDOWS";
-    KeyCodes[KeyCodes["CONTEXT_MENU"] = 93] = "CONTEXT_MENU";
-    KeyCodes[KeyCodes["TURN_OFF"] = 94] = "TURN_OFF";
-    KeyCodes[KeyCodes["SLEEP"] = 95] = "SLEEP";
-    KeyCodes[KeyCodes["NUMPAD_0"] = 96] = "NUMPAD_0";
-    KeyCodes[KeyCodes["NUMPAD_1"] = 97] = "NUMPAD_1";
-    KeyCodes[KeyCodes["NUMPAD_2"] = 98] = "NUMPAD_2";
-    KeyCodes[KeyCodes["NUMPAD_3"] = 99] = "NUMPAD_3";
-    KeyCodes[KeyCodes["NUMPAD_4"] = 100] = "NUMPAD_4";
-    KeyCodes[KeyCodes["NUMPAD_5"] = 101] = "NUMPAD_5";
-    KeyCodes[KeyCodes["NUMPAD_6"] = 102] = "NUMPAD_6";
-    KeyCodes[KeyCodes["NUMPAD_7"] = 103] = "NUMPAD_7";
-    KeyCodes[KeyCodes["NUMPAD_8"] = 104] = "NUMPAD_8";
-    KeyCodes[KeyCodes["NUMPAD_9"] = 105] = "NUMPAD_9";
-    KeyCodes[KeyCodes["NUMPAD_ASTERISK"] = 106] = "NUMPAD_ASTERISK";
-    KeyCodes[KeyCodes["NUMPAD_PLUS"] = 107] = "NUMPAD_PLUS";
-    KeyCodes[KeyCodes["NUMPAD_MINUS"] = 109] = "NUMPAD_MINUS";
-    KeyCodes[KeyCodes["NUMPAD_COMMA"] = 110] = "NUMPAD_COMMA";
-    KeyCodes[KeyCodes["NUMPAD_SLASH"] = 111] = "NUMPAD_SLASH";
-    KeyCodes[KeyCodes["F1"] = 112] = "F1";
-    KeyCodes[KeyCodes["F2"] = 113] = "F2";
-    KeyCodes[KeyCodes["F3"] = 114] = "F3";
-    KeyCodes[KeyCodes["F4"] = 115] = "F4";
-    KeyCodes[KeyCodes["F5"] = 116] = "F5";
-    KeyCodes[KeyCodes["F6"] = 117] = "F6";
-    KeyCodes[KeyCodes["F7"] = 118] = "F7";
-    KeyCodes[KeyCodes["F8"] = 119] = "F8";
-    KeyCodes[KeyCodes["F9"] = 120] = "F9";
-    KeyCodes[KeyCodes["F10"] = 121] = "F10";
-    KeyCodes[KeyCodes["F11"] = 122] = "F11";
-    KeyCodes[KeyCodes["F12"] = 123] = "F12";
-    KeyCodes[KeyCodes["NUM_LOCK"] = 144] = "NUM_LOCK";
-    KeyCodes[KeyCodes["SCROLL_LOCK"] = 145] = "SCROLL_LOCK";
-    KeyCodes[KeyCodes["OPEN_BRACKET"] = 186] = "OPEN_BRACKET";
-    KeyCodes[KeyCodes["PLUS"] = 187] = "PLUS";
-    KeyCodes[KeyCodes["COMMA"] = 188] = "COMMA";
-    KeyCodes[KeyCodes["SLASH"] = 189] = "SLASH";
-    KeyCodes[KeyCodes["DOT"] = 190] = "DOT";
-    KeyCodes[KeyCodes["PIPE"] = 191] = "PIPE";
-    KeyCodes[KeyCodes["SEMICOLON"] = 192] = "SEMICOLON";
-    KeyCodes[KeyCodes["MINUS"] = 219] = "MINUS";
-    KeyCodes[KeyCodes["GREAT_ACCENT"] = 220] = "GREAT_ACCENT";
-    KeyCodes[KeyCodes["EQUALS"] = 221] = "EQUALS";
-    KeyCodes[KeyCodes["SINGLE_QUOTE"] = 222] = "SINGLE_QUOTE";
-    KeyCodes[KeyCodes["BACKSLASH"] = 226] = "BACKSLASH";
-})(KeyCodes || (KeyCodes = {}));
+const KeyCodes = {
+    BACKSPACE: 8,
+    TAB: 9,
+    ENTER: 13,
+    SHIFT: 16,
+    CONTROL: 17,
+    ALT: 18,
+    BREAK: 19,
+    CAPS_LOCK: 20,
+    ESCAPE: 27,
+    SPACE: 32,
+    PAGE_UP: 33,
+    PAGE_DOWN: 34,
+    END: 35,
+    HOME: 36,
+    ARROW_LEFT: 37,
+    ARROW_UP: 38,
+    ARROW_RIGHT: 39,
+    ARROW_DOWN: 40,
+    PRINT: 44,
+    INSERT: 45,
+    DELETE: 46,
+    DIGIT_0: 48,
+    DIGIT_1: 49,
+    DIGIT_2: 50,
+    DIGIT_3: 51,
+    DIGIT_4: 52,
+    DIGIT_5: 53,
+    DIGIT_6: 54,
+    DIGIT_7: 55,
+    DIGIT_8: 56,
+    DIGIT_9: 57,
+    A: 65,
+    B: 66,
+    C: 67,
+    D: 68,
+    E: 69,
+    F: 70,
+    G: 71,
+    H: 72,
+    I: 73,
+    J: 74,
+    K: 75,
+    L: 76,
+    M: 77,
+    N: 78,
+    O: 79,
+    P: 80,
+    Q: 81,
+    R: 82,
+    S: 83,
+    T: 84,
+    U: 85,
+    V: 86,
+    W: 87,
+    X: 88,
+    Y: 89,
+    Z: 90,
+    WINDOWS: 91,
+    CONTEXT_MENU: 93,
+    TURN_OFF: 94,
+    SLEEP: 95,
+    NUMPAD_0: 96,
+    NUMPAD_1: 97,
+    NUMPAD_2: 98,
+    NUMPAD_3: 99,
+    NUMPAD_4: 100,
+    NUMPAD_5: 101,
+    NUMPAD_6: 102,
+    NUMPAD_7: 103,
+    NUMPAD_8: 104,
+    NUMPAD_9: 105,
+    NUMPAD_ASTERISK: 106,
+    NUMPAD_PLUS: 107,
+    NUMPAD_MINUS: 109,
+    NUMPAD_COMMA: 110,
+    NUMPAD_SLASH: 111,
+    F1: 112,
+    F2: 113,
+    F3: 114,
+    F4: 115,
+    F5: 116,
+    F6: 117,
+    F7: 118,
+    F8: 119,
+    F9: 120,
+    F10: 121,
+    F11: 122,
+    F12: 123,
+    NUM_LOCK: 144,
+    SCROLL_LOCK: 145,
+    COLON: 186,
+    PLUS: 187,
+    COMMA: 188,
+    SLASH: 189,
+    DOT: 190,
+    PIPE: 191,
+    SEMICOLON: 192,
+    MINUS: 219,
+    GREAT_ACCENT: 220,
+    EQUALS: 221,
+    SINGLE_QUOTE: 222,
+    BACKSLASH: 226,
+};
 const isEnter = (event) => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && !hasModifierKeys(event);
@@ -174,6 +173,10 @@ const isEnterShift = (event) => (event.key ? event.key === "Enter" : event.keyCode === KeyCodes.ENTER) && checkModifierKeys(event, false, false, true);
 const isCtrlV = (event) => ((event.key === "V" || event.key === "v") || event.which === KeyCodes.V) && checkModifierKeys(event, true, false, false);
+const isKeyA = (event) => ((event.key === "A" || event.key === "a") || event.which === KeyCodes.A) && checkModifierKeys(event, false, false, false);
+const isKeyP = (event) => ((event.key === "P" || event.key === "p") || event.which === KeyCodes.P) && checkModifierKeys(event, false, false, false);
 const hasModifierKeys = (event) => event.shiftKey || event.altKey || getCtrlKey(event);
 const getCtrlKey = (event) => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
 const checkModifierKeys = (event, bCtrlKey, bAltKey, bShiftKey) => event.shiftKey === bShiftKey && event.altKey === bAltKey && getCtrlKey(event) === bCtrlKey;
-export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF4, isF4Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isDeleteShift, isInsertShift, isInsertCtrl, };
+const isNumber = (event) => ((event.key ? "0123456789".indexOf(event.key) !== -1 : event.keyCode >= KeyCodes.DIGIT_0 && event.keyCode <= KeyCodes.DIGIT_9) && checkModifierKeys(event, false, false, false));
+const isColon = (event) => ((event.key ? event.key === ":" : event.keyCode === KeyCodes.COLON) && checkModifierKeys(event, false, false, true));
+export { isEnter, isEnterShift, isSpace, isSpaceShift, isSpaceCtrl, isLeft, isRight, isUp, isDown, isLeftCtrl, isRightCtrl, isUpCtrl, isDownCtrl, isUpShift, isDownShift, isUpAlt, isDownAlt, isLeftShift, isRightShift, isLeftShiftCtrl, isRightShiftCtrl, isUpShiftCtrl, isDownShiftCtrl, isHome, isEnd, isPlus, isMinus, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, isEscape, isTabNext, isTabPrevious, isBackSpace, isDelete, isShow, isF4, isF4Shift, isF6Previous, isF6Next, isF7, isPageUp, isPageDown, isPageUpShift, isPageUpAlt, isPageDownShift, isPageDownAlt, isPageUpShiftCtrl, isPageDownShiftCtrl, isShift, isCtrlA, isCtrlV, isKeyA, isKeyP, isDeleteShift, isInsertShift, isInsertCtrl, isNumber, isColon, };
 //# sourceMappingURL=Keys.js.map

dist/ManagedStyles.d.ts

 import { StyleData, StyleDataCSP } from "./types.js";
-declare const createStyle: (data: StyleData, name: string, value?: string) => void;
-declare const updateStyle: (data: StyleData, name: string, value?: string) => void;
+declare const createStyle: (data: StyleData, name: string, value?: string, theme?: string) => void;
+declare const updateStyle: (data: StyleData, name: string, value?: string, theme?: string) => void;
 declare const hasStyle: (name: string, value?: string) => boolean;
 declare const removeStyle: (name: string, value?: string) => void;
-declare const createOrUpdateStyle: (data: StyleData, name: string, value?: string) => void;
-export { createStyle, hasStyle, updateStyle, removeStyle, createOrUpdateStyle, };
+declare const createOrUpdateStyle: (data: StyleData, name: string, value?: string, theme?: string) => void;
+declare const mergeStyles: (style1?: StyleData, style2?: StyleData) => StyleData | undefined;
+export { createStyle, hasStyle, updateStyle, removeStyle, createOrUpdateStyle, mergeStyles, };
 export type { StyleData, StyleDataCSP, };

dist/ManagedStyles.js

 import createStyleInHead from "./util/createStyleInHead.js";
 import createLinkInHead from "./util/createLinkInHead.js";
 import { shouldUseLinks, getUrl } from "./CSP.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
+import { isSafari } from "./Device.js";
+import { getCurrentRuntimeIndex, compareRuntimes } from "./Runtimes.js";
 const getStyleId = (name, value) => {
     return value ? `${name}|${value}` : name;
 };
-const createStyle = (data, name, value = "") => {
-    let content = typeof data === "string" ? data : data.content;
-    if (content.includes("[_ui5host]")) {
-        content = content.replaceAll("[_ui5host]", `[_ui5rt${getCurrentRuntimeIndex()}]`);
+const shouldUpdate = (runtimeIndex) => {
+    if (runtimeIndex === undefined) {
+        return true;
     }
+    return compareRuntimes(getCurrentRuntimeIndex(), parseInt(runtimeIndex)) === 1; // 1 means the current is newer, 0 means the same, -1 means the resource's runtime is newer
+};
+const createStyle = (data, name, value = "", theme) => {
+    const content = typeof data === "string" ? data : data.content;
+    const currentRuntimeIndex = getCurrentRuntimeIndex();
     if (shouldUseLinks()) {
         const attributes = {};
         attributes[name] = value;
+        if (theme) {
+            attributes["data-ui5-runtime-index"] = currentRuntimeIndex;
+            attributes["data-ui5-theme"] = theme;
+        }
         const href = getUrl(data.packageName, data.fileName);
         createLinkInHead(href, attributes);
     }
-    else if (document.adoptedStyleSheets) {
+    else if (document.adoptedStyleSheets && !isSafari()) {
         const stylesheet = new CSSStyleSheet();
         stylesheet.replaceSync(content);
         stylesheet._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later
+        if (theme) {
+            stylesheet._ui5RuntimeIndex = currentRuntimeIndex;
+            stylesheet._ui5Theme = theme;
+        }
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
@@ -28,25 +41,63 @@ }
         attributes[name] = value;
+        if (theme) {
+            attributes["data-ui5-runtime-index"] = currentRuntimeIndex;
+            attributes["data-ui5-theme"] = theme;
+        }
         createStyleInHead(content, attributes);
     }
 };
-const updateStyle = (data, name, value = "") => {
-    let content = typeof data === "string" ? data : data.content;
-    if (content.includes("[_ui5host]")) {
-        content = content.replaceAll("[_ui5host]", `[_ui5rt${getCurrentRuntimeIndex()}]`);
-    }
+const updateStyle = (data, name, value = "", theme) => {
+    const content = typeof data === "string" ? data : data.content;
+    const currentRuntimeIndex = getCurrentRuntimeIndex();
     if (shouldUseLinks()) {
         const link = document.querySelector(`head>link[${name}="${value}"]`);
-        link.href = getUrl(data.packageName, data.fileName);
+        const href = getUrl(data.packageName, data.fileName);
+        if (!theme) {
+            link.href = href;
+        }
+        else {
+            const linkRuntimeIndex = link.getAttribute("data-ui5-runtime-index") || undefined;
+            const linkTheme = link.getAttribute("data-ui5-theme");
+            if (linkTheme !== theme || shouldUpdate(linkRuntimeIndex)) {
+                link.href = href;
+                link.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex));
+                link.setAttribute("data-ui5-theme", theme);
+            }
+        }
     }
-    else if (document.adoptedStyleSheets) {
+    else if (document.adoptedStyleSheets && !isSafari()) {
         const stylesheet = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
-        if (stylesheet) {
+        if (!stylesheet) {
+            return;
+        }
+        if (!theme) {
             stylesheet.replaceSync(content || "");
         }
+        else {
+            const stylesheetRuntimeIndex = stylesheet._ui5RuntimeIndex;
+            const stylesheetTheme = stylesheet._ui5Theme;
+            if (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) {
+                stylesheet.replaceSync(content || "");
+                stylesheet._ui5RuntimeIndex = String(currentRuntimeIndex);
+                stylesheet._ui5Theme = theme;
+            }
+        }
     }
     else {
         const style = document.querySelector(`head>style[${name}="${value}"]`);
-        if (style) {
+        if (!style) {
+            return;
+        }
+        if (!theme) {
             style.textContent = content || "";
         }
+        else {
+            const styleRuntimeIndex = style.getAttribute("data-ui5-runtime-index") || undefined;
+            const styleTheme = style.getAttribute("data-ui5-theme");
+            if (styleTheme !== theme || shouldUpdate(styleRuntimeIndex)) {
+                style.textContent = content || "";
+                style.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex));
+                style.setAttribute("data-ui5-theme", theme);
+            }
+        }
     }
@@ -58,6 +109,7 @@ };
     }
-    if (document.adoptedStyleSheets) {
-        return !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
+    const styleElement = document.querySelector(`head>style[${name}="${value}"]`);
+    if (document.adoptedStyleSheets && !isSafari()) {
+        return !!styleElement || !!document.adoptedStyleSheets.find(sh => sh._ui5StyleId === getStyleId(name, value));
     }
-    return !!document.querySelector(`head>style[${name}="${value}"]`);
+    return !!styleElement;
 };
@@ -69,3 +121,3 @@ const removeStyle = (name, value = "") => {
     }
-    else if (document.adoptedStyleSheets) {
+    else if (document.adoptedStyleSheets && !isSafari()) {
         document.adoptedStyleSheets = document.adoptedStyleSheets.filter(sh => sh._ui5StyleId !== getStyleId(name, value));
@@ -78,11 +130,28 @@ }
 };
-const createOrUpdateStyle = (data, name, value = "") => {
+const createOrUpdateStyle = (data, name, value = "", theme) => {
     if (hasStyle(name, value)) {
-        updateStyle(data, name, value);
+        updateStyle(data, name, value, theme);
     }
     else {
-        createStyle(data, name, value);
+        createStyle(data, name, value, theme);
     }
 };
-export { createStyle, hasStyle, updateStyle, removeStyle, createOrUpdateStyle, };
+const mergeStyles = (style1, style2) => {
+    if (style1 === undefined) {
+        return style2;
+    }
+    if (style2 === undefined) {
+        return style1;
+    }
+    const style2Content = typeof style2 === "string" ? style2 : style2.content;
+    if (typeof style1 === "string") {
+        return `${style1} ${style2Content}`;
+    }
+    return {
+        content: `${style1.content} ${style2Content}`,
+        packageName: style1.packageName,
+        fileName: style1.fileName,
+    };
+};
+export { createStyle, hasStyle, updateStyle, removeStyle, createOrUpdateStyle, mergeStyles, };
 //# sourceMappingURL=ManagedStyles.js.map

dist/MediaRange.d.ts

@@ -5,4 +5,2 @@ type Range = Map<string, Array<number>>;
  *
- * @namespace
- * @name MediaRange.RANGESETS
  * @public
@@ -22,3 +20,2 @@ */
      *
-     * @name MediaRange.RANGESETS.RANGE_4STEPS
      * @public
@@ -30,5 +27,2 @@ */
  * API for screen width changes.
- *
- * @namespace
- * @name MediaRange
  */
@@ -35,0 +29,0 @@ declare const MediaRange: {

dist/MediaRange.js

@@ -10,4 +10,2 @@ const mediaRanges = new Map();
  *
- * @namespace
- * @name MediaRange.RANGESETS
  * @public
@@ -28,3 +26,2 @@ */
      *
-     * @name MediaRange.RANGESETS.RANGE_4STEPS
      * @public
@@ -50,6 +47,5 @@ */
  *
- * @param {string} name The name of the range set to be initialized.
+ * @param name The name of the range set to be initialized.
  * The name must be a valid id and consist only of letters and numeric digits.
- * @param {Range} [range] The given range set.
- * @name MediaRange.initRangeSet
+ * @param range The given range set.
  */
@@ -65,9 +61,6 @@ const initRangeSet = (name, range) => {
  *
- * @param {string} name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet})
- * @param {number} [width] An optional width, based on which the range should be determined;
+ * @param name The name of the range set. The range set must be initialized beforehand ({@link MediaRange.initRangeSet})
+ * @param [width] An optional width, based on which the range should be determined;
  * If <code>width</code> is not provided, the window size will be used.
- * @returns {string} The name of the current active interval of the range set.
- *
- * @name MediaRange.getCurrentRange
- * @function
+ * @returns The name of the current active interval of the range set.
  * @public
@@ -91,5 +84,2 @@ */
  * API for screen width changes.
- *
- * @namespace
- * @name MediaRange
  */
@@ -96,0 +86,0 @@ const MediaRange = {

dist/renderer/LitRenderer.d.ts

 import { TemplateResult } from "lit-html";
 import type { Renderer } from "../UI5Element.js";
-declare const effectiveHtml: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult<1 | 2>;
-declare const effectiveSvg: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult<1 | 2>;
+declare const effectiveHtml: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult;
+declare const effectiveSvg: (strings: TemplateStringsArray, ...values: Array<unknown>) => TemplateResult;
 declare const litRender: Renderer;
@@ -6,0 +6,0 @@ declare const scopeTag: (tag: string, tags: Array<string>, suffix: string) => object | undefined;

dist/StaticAreaItem.d.ts

 import "./StaticArea.js";
 import type UI5Element from "./UI5Element.js";
 /**
- *
  * @class
- * @author SAP SE
  * @private
@@ -14,3 +12,3 @@ */
     /**
-     * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item
+     * @param ownerElement the UI5Element instance that owns this static area item
      */
@@ -22,2 +20,3 @@ setOwnerElement(ownerElement: UI5Element): void;
     update(): void;
+    updateAdditionalProperties(): void;
     /**
@@ -31,4 +30,4 @@ * Sets the correct content density based on the owner element's state
     /**
+     * Returns reference to the DOM element where the current fragment is added.
      * @protected
-     * Returns reference to the DOM element where the current fragment is added.
      */
@@ -35,0 +34,0 @@ getDomRef(): Promise<ShadowRoot | null>;

dist/StaticAreaItem.js

@@ -7,9 +7,6 @@ import "./StaticArea.js";
 import getEffectiveDir from "./locale/getEffectiveDir.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 const pureTagName = "ui5-static-area-item";
 const popupIntegrationAttr = "data-sap-ui-integration-popup-content";
 /**
- *
  * @class
- * @author SAP SE
  * @private
@@ -24,3 +21,3 @@ */
     /**
-     * @param {UI5Element} ownerElement the UI5Element instance that owns this static area item
+     * @param ownerElement the UI5Element instance that owns this static area item
      */
@@ -39,8 +36,11 @@ setOwnerElement(ownerElement) {
         if (this._rendered) {
-            this._updateAdditionalAttrs();
-            this._updateContentDensity();
-            this._updateDirection();
+            this.updateAdditionalProperties();
             updateShadowRoot(this.ownerElement, true);
         }
     }
+    updateAdditionalProperties() {
+        this._updateAdditionalAttrs();
+        this._updateContentDensity();
+        this._updateDirection();
+    }
     /**
@@ -72,4 +72,2 @@ * Sets the correct content density based on the owner element's state
     _updateAdditionalAttrs() {
-        this.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, "");
-        this.setAttribute("_ui5host", "");
         this.setAttribute(pureTagName, "");
@@ -79,7 +77,7 @@ this.setAttribute(popupIntegrationAttr, "");
     /**
+     * Returns reference to the DOM element where the current fragment is added.
      * @protected
-     * Returns reference to the DOM element where the current fragment is added.
      */
     async getDomRef() {
-        this._updateContentDensity();
+        this.updateAdditionalProperties();
         if (!this._rendered) {
@@ -86,0 +84,0 @@ this._rendered = true;

dist/theming/applyTheme.js

@@ -20,3 +20,3 @@ import { getThemeProperties, getRegisteredPackages, isThemeRegistered } from "../asset-registries/Themes.js";
     if (cssData) {
-        createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE);
+        createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE, theme);
     }
@@ -27,3 +27,3 @@ };
 };
-const loadComponentPackages = async (theme) => {
+const loadComponentPackages = async (theme, externalThemeName) => {
     const registeredPackages = getRegisteredPackages();
@@ -34,3 +34,3 @@ const packagesStylesPromises = [...registeredPackages].map(async (packageName) => {
         }
-        const cssData = await getThemeProperties(packageName, theme);
+        const cssData = await getThemeProperties(packageName, theme, externalThemeName);
         if (cssData) {
@@ -50,3 +50,3 @@ createOrUpdateStyle(cssData, `data-ui5-component-properties-${getCurrentRuntimeIndex()}`, packageName);
     const openUI5Support = getFeature("OpenUI5Support");
-    if (openUI5Support) {
+    if (openUI5Support && openUI5Support.isOpenUI5Detected()) {
         const varsLoaded = openUI5Support.cssVariablesLoaded();
@@ -76,3 +76,3 @@ if (varsLoaded) {
     const packagesTheme = isThemeRegistered(theme) ? theme : extTheme && extTheme.baseThemeName;
-    await loadComponentPackages(packagesTheme || DEFAULT_THEME);
+    await loadComponentPackages(packagesTheme || DEFAULT_THEME, extTheme && extTheme.themeName === theme ? theme : undefined);
     fireThemeLoaded(theme);
@@ -79,0 +79,0 @@ };

dist/types/AnimationMode.d.ts

 /**
  * Different types of AnimationMode.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.AnimationMode
  */
@@ -13,3 +9,2 @@ declare enum AnimationMode {
      * @public
-     * @type {Full}
      */
@@ -19,3 +14,2 @@ Full = "full",
      * @public
-     * @type {Basic}
      */
@@ -25,3 +19,2 @@ Basic = "basic",
      * @public
-     * @type {Minimal}
      */
@@ -31,3 +24,2 @@ Minimal = "minimal",
      * @public
-     * @type {None}
      */
@@ -34,0 +26,0 @@ None = "none"

dist/types/AnimationMode.js

 /**
  * Different types of AnimationMode.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.AnimationMode
  */
@@ -14,3 +10,2 @@ var AnimationMode;
      * @public
-     * @type {Full}
      */
@@ -20,3 +15,2 @@ AnimationMode["Full"] = "full";
      * @public
-     * @type {Basic}
      */
@@ -26,3 +20,2 @@ AnimationMode["Basic"] = "basic";
      * @public
-     * @type {Minimal}
      */
@@ -32,3 +25,2 @@ AnimationMode["Minimal"] = "minimal";
      * @public
-     * @type {None}
      */
@@ -35,0 +27,0 @@ AnimationMode["None"] = "none";

dist/types/CalendarType.d.ts

 /**
  * Different calendar types.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.CalendarType
  */
@@ -13,3 +9,2 @@ declare enum CalendarType {
      * @public
-     * @type {Gregorian}
      */
@@ -19,3 +14,2 @@ Gregorian = "Gregorian",
      * @public
-     * @type {Islamic}
      */
@@ -25,3 +19,2 @@ Islamic = "Islamic",
      * @public
-     * @type {Japanese}
      */
@@ -31,3 +24,2 @@ Japanese = "Japanese",
      * @public
-     * @type {Buddhist}
      */
@@ -37,3 +29,2 @@ Buddhist = "Buddhist",
      * @public
-     * @type {Persian}
      */
@@ -40,0 +31,0 @@ Persian = "Persian"

dist/types/CalendarType.js

 /**
  * Different calendar types.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.CalendarType
  */
@@ -14,3 +10,2 @@ var CalendarType;
      * @public
-     * @type {Gregorian}
      */
@@ -20,3 +15,2 @@ CalendarType["Gregorian"] = "Gregorian";
      * @public
-     * @type {Islamic}
      */
@@ -26,3 +20,2 @@ CalendarType["Islamic"] = "Islamic";
      * @public
-     * @type {Japanese}
      */
@@ -32,3 +25,2 @@ CalendarType["Japanese"] = "Japanese";
      * @public
-     * @type {Buddhist}
      */
@@ -38,3 +30,2 @@ CalendarType["Buddhist"] = "Buddhist";
      * @public
-     * @type {Persian}
      */
@@ -41,0 +32,0 @@ CalendarType["Persian"] = "Persian";

dist/types/CSSColor.d.ts

@@ -6,6 +6,2 @@ import DataType from "./DataType.js";
  *
- * @extends sap.ui.webc.base.types.DataType
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.base.types.CSSColor
  * @public
@@ -12,0 +8,0 @@ */

dist/types/CSSColor.js

@@ -6,6 +6,2 @@ import DataType from "./DataType.js";
  *
- * @extends sap.ui.webc.base.types.DataType
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.base.types.CSSColor
  * @public
@@ -12,0 +8,0 @@ */

dist/types/DataType.d.ts

 import { PropertyValue } from "../UI5ElementMetadata.js";
 /**
+ * @class
  * Base class for all data types.
  *
- * @class
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.base.types.DataType
  * @public
@@ -15,4 +12,2 @@ */
      * @public
-     * @abstract
-     * @returns {Boolean}
      */
@@ -19,0 +14,0 @@ static isValid(value: any): boolean;

dist/types/DataType.js

 /**
+ * @class
  * Base class for all data types.
  *
- * @class
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.base.types.DataType
  * @public
@@ -14,4 +11,2 @@ */
      * @public
-     * @abstract
-     * @returns {Boolean}
      */
@@ -18,0 +13,0 @@ // eslint-disable-next-line

dist/types/DOMReference.d.ts

@@ -7,6 +7,2 @@ import DataType from "./DataType.js";
  *
- * @constructor
- * @extends sap.ui.webc.base.types.DataType
- * @author SAP SE
- * @alias sap.ui.webc.base.types.DOMReference
  * @public
@@ -13,0 +9,0 @@ */

dist/types/DOMReference.js

@@ -7,6 +7,2 @@ import DataType from "./DataType.js";
  *
- * @constructor
- * @extends sap.ui.webc.base.types.DataType
- * @author SAP SE
- * @alias sap.ui.webc.base.types.DOMReference
  * @public
@@ -13,0 +9,0 @@ */

dist/types/Float.d.ts

@@ -8,5 +8,2 @@ import { PropertyValue } from "../UI5ElementMetadata.js";
  * @constructor
- * @extends sap.ui.webc.base.types.DataType
- * @author SAP SE
- * @alias sap.ui.webc.base.types.Float
  * @public
@@ -13,0 +10,0 @@ */

dist/types/Float.js

@@ -7,5 +7,2 @@ import DataType from "./DataType.js";
  * @constructor
- * @extends sap.ui.webc.base.types.DataType
- * @author SAP SE
- * @alias sap.ui.webc.base.types.Float
  * @public
@@ -12,0 +9,0 @@ */

dist/types/Integer.d.ts

@@ -8,5 +8,2 @@ import { PropertyValue } from "../UI5ElementMetadata.js";
  * @constructor
- * @extends sap.ui.webc.base.types.DataType
- * @author SAP SE
- * @alias sap.ui.webc.base.types.Integer
  * @public
@@ -13,0 +10,0 @@ */

dist/types/Integer.js

@@ -7,5 +7,2 @@ import DataType from "./DataType.js";
  * @constructor
- * @extends sap.ui.webc.base.types.DataType
- * @author SAP SE
- * @alias sap.ui.webc.base.types.Integer
  * @public
@@ -12,0 +9,0 @@ */

dist/types/InvisibleMessageMode.d.ts

 /**
  * Enumeration for different mode behaviors of the InvisibleMessage.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.InvisibleMessageMode
  */
-declare enum InvisibleMessageMode {
+declare const InvisibleMessageMode: {
     /**
@@ -15,12 +11,11 @@ * Indicates that updates to the region should be presented at the next graceful opportunity,
      * @public
-     * @type {Polite}
      */
-    Polite = "Polite",
+    readonly Polite: "Polite";
     /**
      * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
      * @public
-     * @type {Assertive}
      */
-    Assertive = "Assertive"
-}
+    readonly Assertive: "Assertive";
+};
+type InvisibleMessageMode = typeof InvisibleMessageMode[keyof typeof InvisibleMessageMode];
 export default InvisibleMessageMode;

dist/types/InvisibleMessageMode.js

 /**
  * Enumeration for different mode behaviors of the InvisibleMessage.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.InvisibleMessageMode
  */
-var InvisibleMessageMode;
-(function (InvisibleMessageMode) {
+const InvisibleMessageMode = {
     /**
@@ -16,13 +11,11 @@ * Indicates that updates to the region should be presented at the next graceful opportunity,
      * @public
-     * @type {Polite}
      */
-    InvisibleMessageMode["Polite"] = "Polite";
+    Polite: "Polite",
     /**
      * Indicates that updates to the region have the highest priority and should be presented to the user immediately.
      * @public
-     * @type {Assertive}
      */
-    InvisibleMessageMode["Assertive"] = "Assertive";
-})(InvisibleMessageMode || (InvisibleMessageMode = {}));
+    Assertive: "Assertive",
+};
 export default InvisibleMessageMode;
 //# sourceMappingURL=InvisibleMessageMode.js.map

dist/types/ItemNavigationBehavior.d.ts

 /**
  * Different behavior for ItemNavigation.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.ItemNavigationBehavior
  */
@@ -14,3 +10,2 @@ declare enum ItemNavigationBehavior {
      * @public
-     * @type {Static}
      */
@@ -21,3 +16,2 @@ Static = "Static",
      * @public
-     * @type {Cyclic}
      */
@@ -24,0 +18,0 @@ Cyclic = "Cyclic"

dist/types/ItemNavigationBehavior.js

 /**
  * Different behavior for ItemNavigation.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.ItemNavigationBehavior
  */
@@ -15,3 +11,2 @@ var ItemNavigationBehavior;
      * @public
-     * @type {Static}
      */
@@ -22,3 +17,2 @@ ItemNavigationBehavior["Static"] = "Static";
      * @public
-     * @type {Cyclic}
      */
@@ -25,0 +19,0 @@ ItemNavigationBehavior["Cyclic"] = "Cyclic";

dist/types/NavigationMode.d.ts

 /**
  * Different navigation modes for ItemNavigation.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.NavigationMode
  */
@@ -13,3 +9,2 @@ declare enum NavigationMode {
      * @public
-     * @type {Auto}
      */
@@ -19,3 +14,2 @@ Auto = "Auto",
      * @public
-     * @type {Vertical}
      */
@@ -25,3 +19,2 @@ Vertical = "Vertical",
      * @public
-     * @type {Horizontal}
      */
@@ -31,3 +24,2 @@ Horizontal = "Horizontal",
      * @public
-     * @type {Paging}
      */
@@ -34,0 +26,0 @@ Paging = "Paging"

dist/types/NavigationMode.js

 /**
  * Different navigation modes for ItemNavigation.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.NavigationMode
  */
@@ -14,3 +10,2 @@ var NavigationMode;
      * @public
-     * @type {Auto}
      */
@@ -20,3 +15,2 @@ NavigationMode["Auto"] = "Auto";
      * @public
-     * @type {Vertical}
      */
@@ -26,3 +20,2 @@ NavigationMode["Vertical"] = "Vertical";
      * @public
-     * @type {Horizontal}
      */
@@ -32,3 +25,2 @@ NavigationMode["Horizontal"] = "Horizontal";
      * @public
-     * @type {Paging}
      */
@@ -35,0 +27,0 @@ NavigationMode["Paging"] = "Paging";

dist/types/ValueState.d.ts

 /**
  * Different types of ValueStates.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.ValueState
  */
 declare enum ValueState {
     /**
-     *
      * @public
-     * @type {None}
      */
     None = "None",
     /**
-     *
      * @public
-     * @type {Success}
      */
     Success = "Success",
     /**
-     *
      * @public
-     * @type {Warning}
      */
     Warning = "Warning",
     /**
-     *
      * @public
-     * @type {Error}
      */
     Error = "Error",
     /**
-     *
      * @public
-     * @type {Information}
      */
@@ -40,0 +26,0 @@ Information = "Information"

dist/types/ValueState.js

 /**
  * Different types of ValueStates.
  *
- * @readonly
- * @enum {string}
  * @public
- * @author SAP SE
- * @alias sap.ui.webc.base.types.ValueState
  */
@@ -13,29 +9,19 @@ var ValueState;
     /**
-     *
      * @public
-     * @type {None}
      */
     ValueState["None"] = "None";
     /**
-     *
      * @public
-     * @type {Success}
      */
     ValueState["Success"] = "Success";
     /**
-     *
      * @public
-     * @type {Warning}
      */
     ValueState["Warning"] = "Warning";
     /**
-     *
      * @public
-     * @type {Error}
      */
     ValueState["Error"] = "Error";
     /**
-     *
      * @public
-     * @type {Information}
      */
@@ -42,0 +28,0 @@ ValueState["Information"] = "Information";

dist/UI5Element.d.ts

@@ -29,8 +29,5 @@ import UI5ElementMetadata, { Slot, SlotValue, State, PropertyValue, Metadata } from "./UI5ElementMetadata.js";
 /**
+ * @class
  * Base class for all UI5 Web Components
  *
- * @class
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.base.UI5Element
  * @extends HTMLElement
@@ -43,3 +40,4 @@ * @public
     _changedState: Array<ChangeInfo>;
-    _eventProvider: EventProvider<InvalidationInfo, void>;
+    _invalidationEventProvider: EventProvider<InvalidationInfo, void>;
+    _componentStateFinalizedEventProvider: EventProvider<void, void>;
     _inDOM: boolean;
@@ -54,3 +52,2 @@ _fullyConnected: boolean;
     _state: State;
-    _onComponentStateFinalized?: () => void;
     _getRealDomRef?: () => HTMLElement;
@@ -131,3 +128,3 @@ staticAreaItem?: StaticAreaItem;
      *
-     * @param {InvalidationInfo} callback
+     * @param callback
      * @public
@@ -139,3 +136,3 @@ */
      *
-     * @param {InvalidationInfo} callback
+     * @param callback
      * @public
@@ -147,4 +144,4 @@ */
      *
-     * @param {sting} slotName the slot in which a child was invalidated
-     * @param { ChangeInfo } childChangeInfo the changeInfo object for the child in the given slot
+     * @param slotName the slot in which a child was invalidated
+     * @param childChangeInfo the changeInfo object for the child in the given slot
      * @private
@@ -174,6 +171,5 @@ */
      * @param slotName the name of the slot, where the child is
-     * @returns {ChildChangeListener}
      * @private
      */
-    _getChildChangeListener(slotName: string): ChildChangeListener | undefined;
+    _getChildChangeListener(slotName: string): ChildChangeListener;
     /**
@@ -183,3 +179,2 @@ * Returns a singleton slotchange event listener that invalidates the component due to changes in the given slot
      * @param slotName the name of the slot, where the slot element (whose slotchange event we're listening to) is
-     * @returns {SlotChangeListener}
      * @private
@@ -268,3 +263,3 @@ */
      * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
-     * @param {FocusOptions} focusOptions additional options for the focus
+     * @param focusOptions additional options for the focus
      * @public
@@ -280,3 +275,3 @@ */
      * @param bubbles - true, if the event bubbles
-     * @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise
+     * @returns false, if the event was cancelled (preventDefault called), true otherwise
      */
@@ -290,4 +285,18 @@ fireEvent<T>(name: string, data?: T, cancelable?: boolean, bubbles?: boolean): boolean;
      */
-    getSlottedNodes<T = Node>(slotName: string): T[];
+    getSlottedNodes<T = Node>(slotName: string): Array<T>;
     /**
+     * Attach a callback that will be executed whenever the component's state is finalized
+     *
+     * @param callback
+     * @public
+     */
+    attachComponentStateFinalized(callback: () => void): void;
+    /**
+     * Detach the callback that is executed whenever the component's state is finalized
+     *
+     * @param callback
+     * @public
+     */
+    detachComponentStateFinalized(callback: () => void): void;
+    /**
      * Determines whether the component should be rendered in RTL mode or not.
@@ -297,3 +306,3 @@ * Returns: "rtl", "ltr" or undefined
      * @public
-     * @returns {String|undefined}
+     * @default undefined
      */
@@ -303,4 +312,4 @@ get effectiveDir(): string | undefined;
      * Used to duck-type UI5 elements without using instanceof
-     * @returns {boolean}
      * @public
+     * @default true
      */
@@ -358,7 +367,5 @@ get isUI5Element(): boolean;
      */
-    static getUniqueDependencies(this: typeof UI5Element): (typeof UI5Element)[];
+    static getUniqueDependencies(this: typeof UI5Element): Array<typeof UI5Element>;
     /**
      * Returns a promise that resolves whenever all dependencies for this UI5 Web Component have resolved
-     *
-     * @returns {Promise}
      */
@@ -370,3 +377,2 @@ static whenDependenciesDefined(): Promise<Array<typeof UI5Element>>;
      * @protected
-     * @returns {Promise<void>}
      */
@@ -377,3 +383,2 @@ static onDefine(): Promise<void>;
      * @public
-     * @returns {Promise<UI5Element>}
      */
@@ -385,3 +390,2 @@ static define(): Promise<typeof UI5Element>;
      * @public
-     * @returns {UI5ElementMetadata}
      */
@@ -392,3 +396,2 @@ static getMetadata(): UI5ElementMetadata;
  * Always use duck-typing to cover all runtimes on the page.
- * @returns {boolean}
  */
@@ -395,0 +398,0 @@ declare const instanceOfUI5Element: (object: any) => object is UI5Element;

dist/UI5Element.js

@@ -21,3 +21,2 @@ import merge from "./thirdparty/merge.js";
 import executeTemplate from "./renderer/executeTemplate.js";
-import { getCurrentRuntimeIndex } from "./Runtimes.js";
 let autoId = 0;
@@ -41,11 +40,8 @@ const elementTimeouts = new Map();
     renderDeferred(this);
-    this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
+    this._invalidationEventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 }
 /**
+ * @class
  * Base class for all UI5 Web Components
  *
- * @class
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.base.UI5Element
  * @extends HTMLElement
@@ -64,3 +60,4 @@ * @public
         this._slotChangeListeners = new Map(); // used to store lazy listeners per slot for the slotchange event of all slot children inside that slot
-        this._eventProvider = new EventProvider(); // used by parent components for listening to changes to child components
+        this._invalidationEventProvider = new EventProvider(); // used by parent components for listening to changes to child components
+        this._componentStateFinalizedEventProvider = new EventProvider(); // used by friend classes for synchronization
         let deferredResolve;
@@ -104,4 +101,2 @@ this._domRefReadyPromise = new Promise(resolve => {
         const ctor = this.constructor;
-        this.setAttribute(`_ui5rt${getCurrentRuntimeIndex()}`, "");
-        this.setAttribute("_ui5host", "");
         this.setAttribute(ctor.getMetadata().getPureTag(), "");
@@ -171,10 +166,12 @@ if (ctor.getMetadata().supportsF6FastNavigation()) {
         const ctor = this.constructor;
-        const shouldObserveChildren = ctor.getMetadata().hasSlots();
+        const metadata = ctor.getMetadata();
+        const shouldObserveChildren = metadata.hasSlots();
         if (!shouldObserveChildren) {
             return;
         }
-        const canSlotText = ctor.getMetadata().canSlotText();
+        const canSlotText = metadata.canSlotText();
+        const hasClonedSlot = Object.keys(metadata.getSlots()).some(slotName => metadata.getSlots()[slotName].cloned);
         const mutationObserverOptions = {
             childList: true,
-            subtree: canSlotText,
+            subtree: canSlotText || hasClonedSlot,
             characterData: canSlotText,
@@ -327,7 +324,7 @@ };
      *
-     * @param {InvalidationInfo} callback
+     * @param callback
      * @public
      */
     attachInvalidate(callback) {
-        this._eventProvider.attachEvent("invalidate", callback);
+        this._invalidationEventProvider.attachEvent("invalidate", callback);
     }
@@ -337,7 +334,7 @@ /**
      *
-     * @param {InvalidationInfo} callback
+     * @param callback
      * @public
      */
     detachInvalidate(callback) {
-        this._eventProvider.detachEvent("invalidate", callback);
+        this._invalidationEventProvider.detachEvent("invalidate", callback);
     }
@@ -347,4 +344,4 @@ /**
      *
-     * @param {sting} slotName the slot in which a child was invalidated
-     * @param { ChangeInfo } childChangeInfo the changeInfo object for the child in the given slot
+     * @param slotName the slot in which a child was invalidated
+     * @param childChangeInfo the changeInfo object for the child in the given slot
      * @private
@@ -459,3 +456,2 @@ */
      * @param slotName the name of the slot, where the child is
-     * @returns {ChildChangeListener}
      * @private
@@ -473,3 +469,2 @@ */
      * @param slotName the name of the slot, where the slot element (whose slotchange event we're listening to) is
-     * @returns {SlotChangeListener}
      * @private
@@ -550,5 +545,3 @@ */
         // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered
-        if (this._onComponentStateFinalized) {
-            this._onComponentStateFinalized();
-        }
+        this._componentStateFinalizedEventProvider.fireEvent("componentStateFinalized");
         // resume normal invalidation handling
@@ -653,3 +646,3 @@ this._suppressInvalidation = false;
      * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
-     * @param {FocusOptions} focusOptions additional options for the focus
+     * @param focusOptions additional options for the focus
      * @public
@@ -671,3 +664,3 @@ */
      * @param bubbles - true, if the event bubbles
-     * @returns {boolean} false, if the event was cancelled (preventDefault called), true otherwise
+     * @returns false, if the event was cancelled (preventDefault called), true otherwise
      */
@@ -678,3 +671,3 @@ fireEvent(name, data, cancelable = false, bubbles = true) {
         if (camelCaseEventName !== name) {
-            return eventResult && this._fireEvent(camelCaseEventName, data, cancelable);
+            return eventResult && this._fireEvent(camelCaseEventName, data, cancelable, bubbles);
         }
@@ -715,2 +708,20 @@ return eventResult;
     /**
+     * Attach a callback that will be executed whenever the component's state is finalized
+     *
+     * @param callback
+     * @public
+     */
+    attachComponentStateFinalized(callback) {
+        this._componentStateFinalizedEventProvider.attachEvent("componentStateFinalized", callback);
+    }
+    /**
+     * Detach the callback that is executed whenever the component's state is finalized
+     *
+     * @param callback
+     * @public
+     */
+    detachComponentStateFinalized(callback) {
+        this._componentStateFinalizedEventProvider.detachEvent("componentStateFinalized", callback);
+    }
+    /**
      * Determines whether the component should be rendered in RTL mode or not.
@@ -720,3 +731,3 @@ * Returns: "rtl", "ltr" or undefined
      * @public
-     * @returns {String|undefined}
+     * @default undefined
      */
@@ -729,4 +740,4 @@ get effectiveDir() {
      * Used to duck-type UI5 elements without using instanceof
-     * @returns {boolean}
      * @public
+     * @default true
      */
@@ -910,4 +921,2 @@ get isUI5Element() {
      * Returns a promise that resolves whenever all dependencies for this UI5 Web Component have resolved
-     *
-     * @returns {Promise}
      */
@@ -921,3 +930,2 @@ static whenDependenciesDefined() {
      * @protected
-     * @returns {Promise<void>}
      */
@@ -930,3 +938,2 @@ static async onDefine() {
      * @public
-     * @returns {Promise<UI5Element>}
      */
@@ -941,3 +948,3 @@ static async define() {
         const definedLocally = isTagRegistered(tag);
-        const definedGlobally = customElements.get(tag);
+        const definedGlobally = window.customElements.get(tag);
         if (definedGlobally && !definedLocally) {
@@ -958,3 +965,2 @@ recordTagRegistrationFailure(tag);
      * @public
-     * @returns {UI5ElementMetadata}
      */
@@ -983,3 +989,2 @@ static getMetadata() {
  * Always use duck-typing to cover all runtimes on the page.
- * @returns {boolean}
  */
@@ -986,0 +991,0 @@ const instanceOfUI5Element = (object) => {

dist/UI5ElementMetadata.d.ts

@@ -12,2 +12,3 @@ import DataType from "./types/DataType.js";
     invalidateOnChildChange?: boolean | SlotInvalidation;
+    cloned?: boolean;
 };
@@ -37,3 +38,2 @@ type SlotValue = Node;
 /**
- *
  * @class
@@ -58,3 +58,3 @@ * @public
      * <b>Note:</b> Only intended for use by UI5Element.js
-     * @pubic
+     * @public
      */
@@ -76,3 +76,2 @@ static validateSlotValue(value: Node, slotData: Slot): Node;
      * @param propName
-     * @returns {boolean}
      */
@@ -83,14 +82,11 @@ hasAttribute(propName: string): boolean;
      * @public
-     * @returns {string[]}
      */
-    getPropertiesList(): string[];
+    getPropertiesList(): Array<string>;
     /**
      * Returns an array with the attributes of the UI5 Element (in kebab-case)
      * @public
-     * @returns {string[]}
      */
-    getAttributesList(): string[];
+    getAttributesList(): Array<string>;
     /**
      * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
-     * @returns {boolean}
      */
@@ -135,3 +131,2 @@ canSlotText(): boolean;
      * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
-     * @returns {boolean}
      */
@@ -141,3 +136,2 @@ isLanguageAware(): boolean;
      * Determines whether this UI5 Element has any theme dependant carachteristics.
-     * @returns {boolean}
      */
@@ -152,3 +146,2 @@ isThemeAware(): boolean;
      * @param name the name of the property/slot that changed
-     * @returns {boolean}
      */
@@ -155,0 +148,0 @@ shouldInvalidateOnChildChange(slotName: string, type: "property" | "slot", name: string): boolean;

dist/UI5ElementMetadata.js

@@ -5,3 +5,2 @@ import { camelToKebabCase } from "./util/StringHelper.js";
 /**
- *
  * @class
@@ -72,3 +71,3 @@ * @public
      * <b>Note:</b> Only intended for use by UI5Element.js
-     * @pubic
+     * @public
      */
@@ -104,3 +103,2 @@ static validateSlotValue(value, slotData) {
      * @param propName
-     * @returns {boolean}
      */
@@ -114,3 +112,2 @@ hasAttribute(propName) {
      * @public
-     * @returns {string[]}
      */
@@ -123,3 +120,2 @@ getPropertiesList() {
      * @public
-     * @returns {string[]}
      */
@@ -131,7 +127,5 @@ getAttributesList() {
      * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
-     * @returns {boolean}
      */
     canSlotText() {
-        const defaultSlot = this.getSlots().default;
-        return defaultSlot && defaultSlot.type === Node;
+        return (this.getSlots().default)?.type === Node;
     }
@@ -198,3 +192,2 @@ /**
      * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
-     * @returns {boolean}
      */
@@ -206,3 +199,2 @@ isLanguageAware() {
      * Determines whether this UI5 Element has any theme dependant carachteristics.
-     * @returns {boolean}
      */
@@ -219,3 +211,2 @@ isThemeAware() {
      * @param name the name of the property/slot that changed
-     * @returns {boolean}
      */
@@ -280,2 +271,3 @@ shouldInvalidateOnChildChange(slotName, type, name) {
     if (!propertyType || propertyType === String) {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string -- if an object is passed as a value to a string property, this was an error so displaying [object Object] will indicate the issue to the developer
         return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
@@ -282,0 +274,0 @@ }

dist/updateShadowRoot.js

@@ -5,2 +5,3 @@ import getConstructableStyle from "./theming/getConstructableStyle.js";
 import { shouldUseLinks } from "./CSP.js";
+import { isSafari } from "./Device.js";
 /**
@@ -29,3 +30,3 @@ * Updates the shadow root of a UI5Element or its static area item
     }
-    else if (document.adoptedStyleSheets) { // Chrome
+    else if (document.adoptedStyleSheets && !isSafari()) { // Chrome
         shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
@@ -32,0 +33,0 @@ }

dist/util/ColorConversion.js

@@ -8,153 +8,152 @@ /**
  */
-var CSSColors;
-(function (CSSColors) {
-    CSSColors["aliceblue"] = "f0f8ff";
-    CSSColors["antiquewhite"] = "faebd7";
-    CSSColors["aqua"] = "00ffff";
-    CSSColors["aquamarine"] = "7fffd4";
-    CSSColors["azure"] = "f0ffff";
-    CSSColors["beige"] = "f5f5dc";
-    CSSColors["bisque"] = "ffe4c4";
-    CSSColors["black"] = "000000";
-    CSSColors["blanchedalmond"] = "ffebcd";
-    CSSColors["blue"] = "0000ff";
-    CSSColors["blueviolet"] = "8a2be2";
-    CSSColors["brown"] = "a52a2a";
-    CSSColors["burlywood"] = "deb887";
-    CSSColors["cadetblue"] = "5f9ea0";
-    CSSColors["chartreuse"] = "7fff00";
-    CSSColors["chocolate"] = "d2691e";
-    CSSColors["coral"] = "ff7f50";
-    CSSColors["cornflowerblue"] = "6495ed";
-    CSSColors["cornsilk"] = "fff8dc";
-    CSSColors["crimson"] = "dc143c";
-    CSSColors["cyan"] = "00ffff";
-    CSSColors["darkblue"] = "00008b";
-    CSSColors["darkcyan"] = "008b8b";
-    CSSColors["darkgoldenrod"] = "b8860b";
-    CSSColors["darkgray"] = "a9a9a9";
-    CSSColors["darkgrey"] = "a9a9a9";
-    CSSColors["darkgreen"] = "006400";
-    CSSColors["darkkhaki"] = "bdb76b";
-    CSSColors["darkmagenta"] = "8b008b";
-    CSSColors["darkolivegreen"] = "556b2f";
-    CSSColors["darkorange"] = "ff8c00";
-    CSSColors["darkorchid"] = "9932cc";
-    CSSColors["darkred"] = "8b0000";
-    CSSColors["darksalmon"] = "e9967a";
-    CSSColors["darkseagreen"] = "8fbc8f";
-    CSSColors["darkslateblue"] = "483d8b";
-    CSSColors["darkslategray"] = "2f4f4f";
-    CSSColors["darkslategrey"] = "2f4f4f";
-    CSSColors["darkturquoise"] = "00ced1";
-    CSSColors["darkviolet"] = "9400d3";
-    CSSColors["deeppink"] = "ff1493";
-    CSSColors["deepskyblue"] = "00bfff";
-    CSSColors["dimgray"] = "696969";
-    CSSColors["dimgrey"] = "696969";
-    CSSColors["dodgerblue"] = "1e90ff";
-    CSSColors["firebrick"] = "b22222";
-    CSSColors["floralwhite"] = "fffaf0";
-    CSSColors["forestgreen"] = "228b22";
-    CSSColors["fuchsia"] = "ff00ff";
-    CSSColors["gainsboro"] = "dcdcdc";
-    CSSColors["ghostwhite"] = "f8f8ff";
-    CSSColors["gold"] = "ffd700";
-    CSSColors["goldenrod"] = "daa520";
-    CSSColors["gray"] = "808080";
-    CSSColors["grey"] = "808080";
-    CSSColors["green"] = "008000";
-    CSSColors["greenyellow"] = "adff2f";
-    CSSColors["honeydew"] = "f0fff0";
-    CSSColors["hotpink"] = "ff69b4";
-    CSSColors["indianred"] = "cd5c5c";
-    CSSColors["indigo"] = "4b0082";
-    CSSColors["ivory"] = "fffff0";
-    CSSColors["khaki"] = "f0e68c";
-    CSSColors["lavender"] = "e6e6fa";
-    CSSColors["lavenderblush"] = "fff0f5";
-    CSSColors["lawngreen"] = "7cfc00";
-    CSSColors["lemonchiffon"] = "fffacd";
-    CSSColors["lightblue"] = "add8e6";
-    CSSColors["lightcoral"] = "f08080";
-    CSSColors["lightcyan"] = "e0ffff";
-    CSSColors["lightgoldenrodyellow"] = "fafad2";
-    CSSColors["lightgray"] = "d3d3d3";
-    CSSColors["lightgrey"] = "d3d3d3";
-    CSSColors["lightgreen"] = "90ee90";
-    CSSColors["lightpink"] = "ffb6c1";
-    CSSColors["lightsalmon"] = "ffa07a";
-    CSSColors["lightseagreen"] = "20b2aa";
-    CSSColors["lightskyblue"] = "87cefa";
-    CSSColors["lightslategray"] = "778899";
-    CSSColors["lightslategrey"] = "778899";
-    CSSColors["lightsteelblue"] = "b0c4de";
-    CSSColors["lightyellow"] = "ffffe0";
-    CSSColors["lime"] = "00ff00";
-    CSSColors["limegreen"] = "32cd32";
-    CSSColors["linen"] = "faf0e6";
-    CSSColors["magenta"] = "ff00ff";
-    CSSColors["maroon"] = "800000";
-    CSSColors["mediumaquamarine"] = "66cdaa";
-    CSSColors["mediumblue"] = "0000cd";
-    CSSColors["mediumorchid"] = "ba55d3";
-    CSSColors["mediumpurple"] = "9370db";
-    CSSColors["mediumseagreen"] = "3cb371";
-    CSSColors["mediumslateblue"] = "7b68ee";
-    CSSColors["mediumspringgreen"] = "00fa9a";
-    CSSColors["mediumturquoise"] = "48d1cc";
-    CSSColors["mediumvioletred"] = "c71585";
-    CSSColors["midnightblue"] = "191970";
-    CSSColors["mintcream"] = "f5fffa";
-    CSSColors["mistyrose"] = "ffe4e1";
-    CSSColors["moccasin"] = "ffe4b5";
-    CSSColors["navajowhite"] = "ffdead";
-    CSSColors["navy"] = "000080";
-    CSSColors["oldlace"] = "fdf5e6";
-    CSSColors["olive"] = "808000";
-    CSSColors["olivedrab"] = "6b8e23";
-    CSSColors["orange"] = "ffa500";
-    CSSColors["orangered"] = "ff4500";
-    CSSColors["orchid"] = "da70d6";
-    CSSColors["palegoldenrod"] = "eee8aa";
-    CSSColors["palegreen"] = "98fb98";
-    CSSColors["paleturquoise"] = "afeeee";
-    CSSColors["palevioletred"] = "db7093";
-    CSSColors["papayawhip"] = "ffefd5";
-    CSSColors["peachpuff"] = "ffdab9";
-    CSSColors["peru"] = "cd853f";
-    CSSColors["pink"] = "ffc0cb";
-    CSSColors["plum"] = "dda0dd";
-    CSSColors["powderblue"] = "b0e0e6";
-    CSSColors["purple"] = "800080";
-    CSSColors["red"] = "ff0000";
-    CSSColors["rosybrown"] = "bc8f8f";
-    CSSColors["royalblue"] = "4169e1";
-    CSSColors["saddlebrown"] = "8b4513";
-    CSSColors["salmon"] = "fa8072";
-    CSSColors["sandybrown"] = "f4a460";
-    CSSColors["seagreen"] = "2e8b57";
-    CSSColors["seashell"] = "fff5ee";
-    CSSColors["sienna"] = "a0522d";
-    CSSColors["silver"] = "c0c0c0";
-    CSSColors["skyblue"] = "87ceeb";
-    CSSColors["slateblue"] = "6a5acd";
-    CSSColors["slategray"] = "708090";
-    CSSColors["slategrey"] = "708090";
-    CSSColors["snow"] = "fffafa";
-    CSSColors["springgreen"] = "00ff7f";
-    CSSColors["steelblue"] = "4682b4";
-    CSSColors["tan"] = "d2b48c";
-    CSSColors["teal"] = "008080";
-    CSSColors["thistle"] = "d8bfd8";
-    CSSColors["tomato"] = "ff6347";
-    CSSColors["turquoise"] = "40e0d0";
-    CSSColors["violet"] = "ee82ee";
-    CSSColors["wheat"] = "f5deb3";
-    CSSColors["white"] = "ffffff";
-    CSSColors["whitesmoke"] = "f5f5f5";
-    CSSColors["yellow"] = "ffff00";
-    CSSColors["yellowgreen"] = "9acd32";
-    CSSColors["transparent"] = "00000000";
-})(CSSColors || (CSSColors = {}));
+const CSSColors = new Map([
+    ["aliceblue", "f0f8ff"],
+    ["antiquewhite", "faebd7"],
+    ["aqua", "00ffff"],
+    ["aquamarine", "7fffd4"],
+    ["azure", "f0ffff"],
+    ["beige", "f5f5dc"],
+    ["bisque", "ffe4c4"],
+    ["black", "000000"],
+    ["blanchedalmond", "ffebcd"],
+    ["blue", "0000ff"],
+    ["blueviolet", "8a2be2"],
+    ["brown", "a52a2a"],
+    ["burlywood", "deb887"],
+    ["cadetblue", "5f9ea0"],
+    ["chartreuse", "7fff00"],
+    ["chocolate", "d2691e"],
+    ["coral", "ff7f50"],
+    ["cornflowerblue", "6495ed"],
+    ["cornsilk", "fff8dc"],
+    ["crimson", "dc143c"],
+    ["cyan", "00ffff"],
+    ["darkblue", "00008b"],
+    ["darkcyan", "008b8b"],
+    ["darkgoldenrod", "b8860b"],
+    ["darkgray", "a9a9a9"],
+    ["darkgrey", "a9a9a9"],
+    ["darkgreen", "006400"],
+    ["darkkhaki", "bdb76b"],
+    ["darkmagenta", "8b008b"],
+    ["darkolivegreen", "556b2f"],
+    ["darkorange", "ff8c00"],
+    ["darkorchid", "9932cc"],
+    ["darkred", "8b0000"],
+    ["darksalmon", "e9967a"],
+    ["darkseagreen", "8fbc8f"],
+    ["darkslateblue", "483d8b"],
+    ["darkslategray", "2f4f4f"],
+    ["darkslategrey", "2f4f4f"],
+    ["darkturquoise", "00ced1"],
+    ["darkviolet", "9400d3"],
+    ["deeppink", "ff1493"],
+    ["deepskyblue", "00bfff"],
+    ["dimgray", "696969"],
+    ["dimgrey", "696969"],
+    ["dodgerblue", "1e90ff"],
+    ["firebrick", "b22222"],
+    ["floralwhite", "fffaf0"],
+    ["forestgreen", "228b22"],
+    ["fuchsia", "ff00ff"],
+    ["gainsboro", "dcdcdc"],
+    ["ghostwhite", "f8f8ff"],
+    ["gold", "ffd700"],
+    ["goldenrod", "daa520"],
+    ["gray", "808080"],
+    ["grey", "808080"],
+    ["green", "008000"],
+    ["greenyellow", "adff2f"],
+    ["honeydew", "f0fff0"],
+    ["hotpink", "ff69b4"],
+    ["indianred", "cd5c5c"],
+    ["indigo", "4b0082"],
+    ["ivory", "fffff0"],
+    ["khaki", "f0e68c"],
+    ["lavender", "e6e6fa"],
+    ["lavenderblush", "fff0f5"],
+    ["lawngreen", "7cfc00"],
+    ["lemonchiffon", "fffacd"],
+    ["lightblue", "add8e6"],
+    ["lightcoral", "f08080"],
+    ["lightcyan", "e0ffff"],
+    ["lightgoldenrodyellow", "fafad2"],
+    ["lightgray", "d3d3d3"],
+    ["lightgrey", "d3d3d3"],
+    ["lightgreen", "90ee90"],
+    ["lightpink", "ffb6c1"],
+    ["lightsalmon", "ffa07a"],
+    ["lightseagreen", "20b2aa"],
+    ["lightskyblue", "87cefa"],
+    ["lightslategray", "778899"],
+    ["lightslategrey", "778899"],
+    ["lightsteelblue", "b0c4de"],
+    ["lightyellow", "ffffe0"],
+    ["lime", "00ff00"],
+    ["limegreen", "32cd32"],
+    ["linen", "faf0e6"],
+    ["magenta", "ff00ff"],
+    ["maroon", "800000"],
+    ["mediumaquamarine", "66cdaa"],
+    ["mediumblue", "0000cd"],
+    ["mediumorchid", "ba55d3"],
+    ["mediumpurple", "9370db"],
+    ["mediumseagreen", "3cb371"],
+    ["mediumslateblue", "7b68ee"],
+    ["mediumspringgreen", "00fa9a"],
+    ["mediumturquoise", "48d1cc"],
+    ["mediumvioletred", "c71585"],
+    ["midnightblue", "191970"],
+    ["mintcream", "f5fffa"],
+    ["mistyrose", "ffe4e1"],
+    ["moccasin", "ffe4b5"],
+    ["navajowhite", "ffdead"],
+    ["navy", "000080"],
+    ["oldlace", "fdf5e6"],
+    ["olive", "808000"],
+    ["olivedrab", "6b8e23"],
+    ["orange", "ffa500"],
+    ["orangered", "ff4500"],
+    ["orchid", "da70d6"],
+    ["palegoldenrod", "eee8aa"],
+    ["palegreen", "98fb98"],
+    ["paleturquoise", "afeeee"],
+    ["palevioletred", "db7093"],
+    ["papayawhip", "ffefd5"],
+    ["peachpuff", "ffdab9"],
+    ["peru", "cd853f"],
+    ["pink", "ffc0cb"],
+    ["plum", "dda0dd"],
+    ["powderblue", "b0e0e6"],
+    ["purple", "800080"],
+    ["red", "ff0000"],
+    ["rosybrown", "bc8f8f"],
+    ["royalblue", "4169e1"],
+    ["saddlebrown", "8b4513"],
+    ["salmon", "fa8072"],
+    ["sandybrown", "f4a460"],
+    ["seagreen", "2e8b57"],
+    ["seashell", "fff5ee"],
+    ["sienna", "a0522d"],
+    ["silver", "c0c0c0"],
+    ["skyblue", "87ceeb"],
+    ["slateblue", "6a5acd"],
+    ["slategray", "708090"],
+    ["slategrey", "708090"],
+    ["snow", "fffafa"],
+    ["springgreen", "00ff7f"],
+    ["steelblue", "4682b4"],
+    ["tan", "d2b48c"],
+    ["teal", "008080"],
+    ["thistle", "d8bfd8"],
+    ["tomato", "ff6347"],
+    ["turquoise", "40e0d0"],
+    ["violet", "ee82ee"],
+    ["wheat", "f5deb3"],
+    ["white", "ffffff"],
+    ["whitesmoke", "f5f5f5"],
+    ["yellow", "ffff00"],
+    ["yellowgreen", "9acd32"],
+    ["transparent", "00000000"],
+]);
 const getRGBColor = (color) => {
@@ -178,4 +177,4 @@ if (color.startsWith("rgba")) {
     // Css Color
-    if (color in CSSColors) {
-        color = CSSColors[color];
+    if (CSSColors.has(color)) {
+        color = CSSColors.get(color);
     }
@@ -220,57 +219,63 @@ return HEXToRGB(color);
     // Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html
-    const C = (1 - Math.abs((2 * color.l) - 1)) * color.s, X = C * (1 - Math.abs(((color.h / 60) % 2) - 1)), m = color.l - C / 2;
-    let tempColor;
-    switch (Math.round(color.h / 60)) {
-        // 0 ≤ H < 60
+    let saturation = color.s * 100, lightness = color.l * 100, red, green, blue;
+    if (saturation > 100) {
+        saturation = 1;
+    }
+    else if (saturation < 0) {
+        saturation = 0;
+    }
+    else {
+        saturation /= 100;
+    }
+    if (lightness > 100) {
+        lightness = 1;
+    }
+    else if (lightness < 0) {
+        lightness = 0;
+    }
+    else {
+        lightness /= 100;
+    }
+    const hue = color.h, d = saturation * (1 - Math.abs(2 * lightness - 1)), m = 255 * (lightness - 0.5 * d), x = d * (1 - Math.abs(((hue / 60) % 2) - 1)), i = Math.floor(hue / 60), m255x = m + 255 * x, m255d = m + 255 * d;
+    switch (i) {
         case 0:
-            tempColor = {
-                r: C,
-                g: X,
-                b: 0,
-            };
+            red = m255d;
+            green = m255x;
+            blue = m;
             break;
-        // 60 ≤ H < 120
         case 1:
-            tempColor = {
-                r: X,
-                g: C,
-                b: 0,
-            };
+            red = m255x;
+            green = m255d;
+            blue = m;
             break;
-        // 120 ≤ H < 180
         case 2:
-            tempColor = {
-                r: 0,
-                g: C,
-                b: X,
-            };
+            red = m;
+            green = m255d;
+            blue = m255x;
             break;
-        // 180 ≤ H < 240
         case 3:
-            tempColor = {
-                r: 0,
-                g: X,
-                b: C,
-            };
+            red = m;
+            green = m255x;
+            blue = m255d;
             break;
-        // 240 ≤ H < 300
         case 4:
-            tempColor = {
-                r: X,
-                g: 0,
-                b: C,
-            };
+            red = m255x;
+            green = m;
+            blue = m255d;
             break;
-        // 300 ≤ H < 360
+        case 5:
+            red = m255d;
+            green = m;
+            blue = m255x;
+            break;
         default:
-            tempColor = {
-                r: C,
-                g: 0,
-                b: X,
-            };
+            red = 0;
+            green = 0;
+            blue = 0;
+            break;
     }
     return {
-        r: Math.floor((tempColor.r + m) * 255),
-        g: Math.floor((tempColor.g + m) * 255),
-        b: Math.floor((tempColor.b + m) * 255),
+        r: Math.round(red),
+        g: Math.round(green),
+        b: Math.round(blue),
     };
@@ -277,0 +282,0 @@ };

dist/util/detectNavigatorLanguage.d.ts

@@ -1,2 +0,2 @@
-declare const _default: () => string;
-export default _default;
+declare const detectNavigatorLanguage: () => string;
+export default detectNavigatorLanguage;

dist/util/detectNavigatorLanguage.js

 import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
-export default () => {
+const detectNavigatorLanguage = () => {
     const browserLanguages = navigator.languages;
@@ -10,2 +10,3 @@ const navigatorLanguage = () => {
 };
+export default detectNavigatorLanguage;
 //# sourceMappingURL=detectNavigatorLanguage.js.map

dist/util/getClassCopy.d.ts

@@ -7,5 +7,6 @@ import type UI5Element from "../UI5Element.js";
         _changedState: import("../UI5Element.js").ChangeInfo[];
-        _eventProvider: import("../EventProvider.js").default<import("../UI5Element.js").ChangeInfo & {
+        _invalidationEventProvider: import("../EventProvider.js").default<import("../UI5Element.js").ChangeInfo & {
             target: UI5Element;
         }, void>;
+        _componentStateFinalizedEventProvider: import("../EventProvider.js").default<void, void>;
         _inDOM: boolean;
@@ -22,3 +23,2 @@ _fullyConnected: boolean;
         _state: import("../UI5ElementMetadata.js").State;
-        _onComponentStateFinalized?: (() => void) | undefined;
         _getRealDomRef?: (() => HTMLElement) | undefined;
@@ -51,5 +51,5 @@ staticAreaItem?: import("../StaticAreaItem.js").default | undefined;
         _upgradeAllProperties(): void;
-        _getChildChangeListener(slotName: string): ((param: import("../UI5Element.js").ChangeInfo & {
+        _getChildChangeListener(slotName: string): (param: import("../UI5Element.js").ChangeInfo & {
             target: UI5Element;
-        }) => void) | undefined;
+        }) => void;
         _getSlotChangeListener(slotName: string): (this: HTMLSlotElement, ev: Event) => void;
@@ -72,2 +72,4 @@ _attachSlotChange(child: HTMLSlotElement, slotName: string): void;
         getSlottedNodes<T_2 = Node>(slotName: string): T_2[];
+        attachComponentStateFinalized(callback: () => void): void;
+        detachComponentStateFinalized(callback: () => void): void;
         readonly effectiveDir: string | undefined;
@@ -92,2 +94,3 @@ readonly isUI5Element: boolean;
         outerText: string;
+        popover: string | null;
         spellcheck: boolean;
@@ -98,2 +101,5 @@ title: string;
         click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(force?: boolean | undefined): void;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -127,5 +133,8 @@ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         attachShadow(init: ShadowRootInit): ShadowRoot;
+        checkVisibility(options?: CheckVisibilityOptions | undefined): boolean;
         closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
         closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        closest<K_4 extends keyof MathMLElementTagNameMap>(selector: K_4): MathMLElementTagNameMap[K_4] | null;
         closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
         getAttribute(qualifiedName: string): string | null;
@@ -139,7 +148,10 @@ getAttributeNS(namespace: string | null, localName: string): string | null;
         getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
-        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
-        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+        getElementsByTagName<K_5 extends keyof HTMLElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<HTMLElementTagNameMap[K_5]>;
+        getElementsByTagName<K_6 extends keyof SVGElementTagNameMap>(qualifiedName: K_6): HTMLCollectionOf<SVGElementTagNameMap[K_6]>;
+        getElementsByTagName<K_7 extends keyof MathMLElementTagNameMap>(qualifiedName: K_7): HTMLCollectionOf<MathMLElementTagNameMap[K_7]>;
+        getElementsByTagName<K_8 extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K_8): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K_8]>;
         getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
         getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
         getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
@@ -202,20 +214,20 @@ hasAttribute(qualifiedName: string): boolean;
         replaceChild<T_6 extends Node>(node: Node, child: T_6): T_6;
-        readonly ATTRIBUTE_NODE: number;
-        readonly CDATA_SECTION_NODE: number;
-        readonly COMMENT_NODE: number;
-        readonly DOCUMENT_FRAGMENT_NODE: number;
-        readonly DOCUMENT_NODE: number;
-        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
-        readonly DOCUMENT_POSITION_CONTAINS: number;
-        readonly DOCUMENT_POSITION_DISCONNECTED: number;
-        readonly DOCUMENT_POSITION_FOLLOWING: number;
-        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
-        readonly DOCUMENT_POSITION_PRECEDING: number;
-        readonly DOCUMENT_TYPE_NODE: number;
-        readonly ELEMENT_NODE: number;
-        readonly ENTITY_NODE: number;
-        readonly ENTITY_REFERENCE_NODE: number;
-        readonly NOTATION_NODE: number;
-        readonly PROCESSING_INSTRUCTION_NODE: number;
-        readonly TEXT_NODE: number;
+        readonly ELEMENT_NODE: 1;
+        readonly ATTRIBUTE_NODE: 2;
+        readonly TEXT_NODE: 3;
+        readonly CDATA_SECTION_NODE: 4;
+        readonly ENTITY_REFERENCE_NODE: 5;
+        readonly ENTITY_NODE: 6;
+        readonly PROCESSING_INSTRUCTION_NODE: 7;
+        readonly COMMENT_NODE: 8;
+        readonly DOCUMENT_NODE: 9;
+        readonly DOCUMENT_TYPE_NODE: 10;
+        readonly DOCUMENT_FRAGMENT_NODE: 11;
+        readonly NOTATION_NODE: 12;
+        readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+        readonly DOCUMENT_POSITION_PRECEDING: 2;
+        readonly DOCUMENT_POSITION_FOLLOWING: 4;
+        readonly DOCUMENT_POSITION_CONTAINS: 8;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
         dispatchEvent(event: Event): boolean;
@@ -228,3 +240,2 @@ ariaAtomic: string | null;
         ariaColIndex: string | null;
-        ariaColIndexText: string | null;
         ariaColSpan: string | null;
@@ -253,3 +264,2 @@ ariaCurrent: string | null;
         ariaRowIndex: string | null;
-        ariaRowIndexText: string | null;
         ariaRowSpan: string | null;
@@ -279,13 +289,15 @@ ariaSelected: string | null;
         prepend(...nodes: (string | Node)[]): void;
-        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
-        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+        querySelector<K_9 extends keyof HTMLElementTagNameMap>(selectors: K_9): HTMLElementTagNameMap[K_9] | null;
+        querySelector<K_10 extends keyof SVGElementTagNameMap>(selectors: K_10): SVGElementTagNameMap[K_10] | null;
+        querySelector<K_11 extends keyof MathMLElementTagNameMap>(selectors: K_11): MathMLElementTagNameMap[K_11] | null;
+        querySelector<K_12 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_12): HTMLElementDeprecatedTagNameMap[K_12] | null;
         querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
-        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
-        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+        querySelectorAll<K_13 extends keyof HTMLElementTagNameMap>(selectors: K_13): NodeListOf<HTMLElementTagNameMap[K_13]>;
+        querySelectorAll<K_14 extends keyof SVGElementTagNameMap>(selectors: K_14): NodeListOf<SVGElementTagNameMap[K_14]>;
+        querySelectorAll<K_15 extends keyof MathMLElementTagNameMap>(selectors: K_15): NodeListOf<MathMLElementTagNameMap[K_15]>;
+        querySelectorAll<K_16 extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K_16): NodeListOf<HTMLElementDeprecatedTagNameMap[K_16]>;
         querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
         replaceChildren(...nodes: (string | Node)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
-        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
-        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        readonly attributeStyleMap: StylePropertyMap;
         readonly style: CSSStyleDeclaration;
@@ -311,3 +323,5 @@ contentEditable: string;
         oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
         oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
         ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
@@ -345,2 +359,3 @@ ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
         onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
         onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -362,2 +377,3 @@ onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
@@ -364,0 +380,0 @@ onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;

dist/util/getDesigntimePropertyAsArray.d.ts

@@ -1,2 +0,2 @@
-declare const _default: (value: string) => string[] | null;
-export default _default;
+declare const designTimePropertyAsArray: (value: string) => string[] | null;
+export default designTimePropertyAsArray;

dist/util/getDesigntimePropertyAsArray.js

@@ -1,5 +0,6 @@
-export default (value) => {
+const designTimePropertyAsArray = (value) => {
     const m = /\$([-a-z0-9A-Z._]+)(?::([^$]*))?\$/.exec(value);
     return m && m[2] ? m[2].split(/,/) : null;
 };
+export default designTimePropertyAsArray;
 //# sourceMappingURL=getDesigntimePropertyAsArray.js.map

dist/util/InvisibleMessage.d.ts

@@ -9,3 +9,3 @@ import InvisibleMessageMode from "../types/InvisibleMessageMode.js";
  */
-declare const announce: (message: string, mode: `${InvisibleMessageMode}`) => void;
+declare const announce: (message: string, mode: InvisibleMessageMode) => void;
 export default announce;

dist/util/PopupUtils.js

@@ -64,3 +64,3 @@ import getSharedResource from "../getSharedResource.js";
     const openUI5Support = getFeature("OpenUI5Support");
-    if (openUI5Support && openUI5Support.isLoaded()) { // use OpenUI5 for getting z-index values, if loaded
+    if (openUI5Support && openUI5Support.isOpenUI5Detected()) { // use OpenUI5 for getting z-index values, if loaded
         return openUI5Support.getNextZIndex();
@@ -67,0 +67,0 @@ }

index.js

 // animations/
 import scroll from "./dist/animations/scroll.js";
 import slideDown from "./dist/animations/slideDown.js";
-import slideUp from "./dist/animations/slideup.js";
+import slideUp from "./dist/animations/slideUp.js";
 
@@ -13,5 +13,5 @@ // config/
 	getDefaultIconCollection,
-	getEffectiveIconCollection,
-	RegisteredIconCollection,
 } from "./dist/config/Icons.js";
+import { RegisteredIconCollection } from "./dist/asset-registries/util/IconCollectionsByTheme.js";
+import getEffectiveIconCollection from "./dist/asset-registries/util/getIconCollectionsByTheme.js";
 import {
@@ -18,0 +18,0 @@ getLanguage,

lib/generate-asset-parameters/index.js

@@ -21,4 +21,4 @@ import fs from "fs/promises";
 const generate = async () => {
-	await fs.mkdir("dist/generated/", { recursive: true });
-	return fs.writeFile("dist/generated/AssetParameters.js", fileContent);
+	await fs.mkdir("src/generated/", { recursive: true });
+	return fs.writeFile("src/generated/AssetParameters.ts", fileContent);
 }
@@ -25,0 +25,0 @@

lib/generate-version-info/index.js

@@ -26,4 +26,4 @@ import fs from "fs/promises";
 
-	await fs.mkdir("dist/generated/", { recursive: true });
-	await fs.writeFile("dist/generated/VersionInfo.js", fileContent);
+	await fs.mkdir("src/generated/", { recursive: true });
+	await fs.writeFile("src/generated/VersionInfo.ts", fileContent);
 }
@@ -30,0 +30,0 @@

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-3790e6927",
+  "version": "0.0.0-38861c872",
   "description": "UI5 Web Components: webcomponents.base",
@@ -31,4 +31,7 @@ "author": "SAP SE (https://www.sap.com)",
     "build": "nps build",
+    "generate": "nps generate",
+    "generateAPI": "nps generateAPI",
+    "bundle": "nps build.bundle",
     "test": "nps test",
-    "prepublishOnly": "npm run clean && npm run build"
+    "prepublishOnly": "tsc"
   },
@@ -40,5 +43,5 @@ "dependencies": {
     "@buxlabs/amd-to-es6": "0.16.1",
-    "@openui5/sap.ui.core": "1.112.0",
-    "@ui5/webcomponents-tools": "0.0.0-3790e6927",
-    "chromedriver": "112.0.0",
+    "@openui5/sap.ui.core": "1.116.0",
+    "@ui5/webcomponents-tools": "0.0.0-38861c872",
+    "chromedriver": "119.0.1",
     "clean-css": "^5.2.2",
@@ -45,0 +48,0 @@ "copy-and-watch": "^0.1.5",

README.md

 ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
+
 # UI5 Web Components - Base
@@ -68,3 +69,3 @@
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
 
@@ -71,0 +72,0 @@ ## Contribute

tsconfig.json

@@ -5,2 +5,3 @@ {
       "target": "ES2021",
+      "lib": ["DOM", "DOM.Iterable", "ES2023"],
       // Generate d.ts files
@@ -14,3 +15,6 @@ "declaration": true,
       "moduleResolution": "node",
+      "composite": true,
+      "rootDir": "src",
+      "tsBuildInfoFile": "dist/.tsbuildinfo",
     },
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1723027

increased by28.73%

Number of package files

485

increased by4.53%

Lines of code

26255

increased by62.87%

Number of lines in readme file

77

increased by1.32%

Number of medium supply chain risk alerts

3

decreased by-50%

No dependency changes