@ui5/webcomponents-base 0.0.0-7b7921cd9 → 0.0.0-7c7170d4a

package/dist/config/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/config/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,qBAAqB,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAElF,IAAI,QAAgB,CAAC;AAErB;;;;GAIG;AACH,MAAM,QAAQ,GAAG,GAAW,EAAE;IAC7B,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC3B,QAAQ,GAAG,kBAAkB,EAAE,CAAC;KAChC;IAED,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,QAAQ,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IACvD,IAAI,QAAQ,KAAK,KAAK,EAAE;QACvB,OAAO;KACP;IAED,QAAQ,GAAG,KAAK,CAAC;IAEjB,+BAA+B;IAC/B,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC3B,MAAM,sBAAsB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,GAAW,EAAE;IACpC,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;IACjC,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAChC,OAAO,YAAY,KAAK,KAAK,IAAI,YAAY,KAAK,GAAG,KAAK,MAAM,CAAC;AAClE,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAChC,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;QAChC,OAAO,CAAC,qBAAqB,EAAE,EAAE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;KAC1E;IAED,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEzE,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,eAAe,GACf,CAAC","sourcesContent":["import { getTheme as getConfiguredTheme } from \"../InitialConfiguration.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport applyTheme from \"../theming/applyTheme.js\";\nimport getThemeDesignerTheme from \"../theming/getThemeDesignerTheme.js\";\nimport { DEFAULT_THEME, SUPPORTED_THEMES } from \"../generated/AssetParameters.js\";\n\nlet curTheme: string;\n\n/**\n * Returns the current theme.\n * @public\n * @returns {string} the current theme name\n */\nconst getTheme = (): string => {\n\tif (curTheme === undefined) {\n\t\tcurTheme = getConfiguredTheme();\n\t}\n\n\treturn curTheme;\n};\n\n/**\n * Applies a new theme after fetching its assets from the network.\n * @public\n * @param {string} theme the name of the new theme\n * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM\n */\nconst setTheme = async (theme: string): Promise<void> => {\n\tif (curTheme === theme) {\n\t\treturn;\n\t}\n\n\tcurTheme = theme;\n\n\t// Update CSS Custom Properties\n\tawait applyTheme(curTheme);\n\tawait reRenderAllUI5Elements({ themeAware: true });\n};\n\n/**\n * Returns the default theme.\n *\n * Note: Default theme might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultTheme = (): string => {\n\treturn DEFAULT_THEME;\n};\n\n/**\n * Returns if the given theme name is the one currently applied.\n * @private\n * @param {string} theme\n * @returns {boolean}\n */\nconst isTheme = (theme: string) => {\n\tconst currentTheme = getTheme();\n\treturn currentTheme === theme || currentTheme === `${theme}_exp`;\n};\n\n/**\n * Returns if the currently set theme is part of legacy theme families (\"sap_belize\" or \"sap_fiori_3\").\n * <b>Note</b>: in addition, the method checks the base theme of a custom theme, built via the ThemeDesigner.\n *\n * @private\n * @returns { boolean }\n */\nconst isLegacyThemeFamily = () => {\n\tconst currentTheme = getTheme();\n\n\tif (!isKnownTheme(currentTheme)) {\n\t\treturn !getThemeDesignerTheme()?.baseThemeName?.startsWith(\"sap_horizon\");\n\t}\n\n\treturn !currentTheme.startsWith(\"sap_horizon\");\n};\n\nconst isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);\n\nexport {\n\tgetTheme,\n\tsetTheme,\n\tisTheme,\n\tisLegacyThemeFamily,\n\tgetDefaultTheme,\n};\n"]}
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/config/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,qBAAqB,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE5C,IAAI,QAAgB,CAAC;AAErB;;;;GAIG;AACH,MAAM,QAAQ,GAAG,GAAW,EAAE;IAC7B,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC3B,QAAQ,GAAG,kBAAkB,EAAE,CAAC;KAChC;IAED,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,QAAQ,GAAG,KAAK,EAAE,KAAa,EAAiB,EAAE;IACvD,IAAI,QAAQ,KAAK,KAAK,EAAE;QACvB,OAAO;KACP;IAED,QAAQ,GAAG,KAAK,CAAC;IAEjB,IAAI,QAAQ,EAAE,EAAE;QACf,+BAA+B;QAC/B,MAAM,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC3B,MAAM,sBAAsB,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;KACnD;AACF,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,GAAW,EAAE;IACpC,OAAO,aAAa,CAAC;AACtB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;IACjC,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAChC,OAAO,YAAY,KAAK,KAAK,IAAI,YAAY,KAAK,GAAG,KAAK,MAAM,CAAC;AAClE,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,mBAAmB,GAAG,GAAG,EAAE;IAChC,MAAM,YAAY,GAAG,QAAQ,EAAE,CAAC;IAEhC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;QAChC,OAAO,CAAC,qBAAqB,EAAE,EAAE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;KAC1E;IAED,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,wBAAwB,GAAG,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,EAAE,CAAC;IACb,OAAO,mBAAmB,EAAE,CAAC;AAC9B,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEzE,OAAO,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,GACf,CAAC","sourcesContent":["import { getTheme as getConfiguredTheme } from \"../InitialConfiguration.js\";\nimport { reRenderAllUI5Elements } from \"../Render.js\";\nimport applyTheme from \"../theming/applyTheme.js\";\nimport getThemeDesignerTheme from \"../theming/getThemeDesignerTheme.js\";\nimport { DEFAULT_THEME, SUPPORTED_THEMES } from \"../generated/AssetParameters.js\";\nimport { boot, isBooted } from \"../Boot.js\";\n\nlet curTheme: string;\n\n/**\n * Returns the current theme.\n * @public\n * @returns {string} the current theme name\n */\nconst getTheme = (): string => {\n\tif (curTheme === undefined) {\n\t\tcurTheme = getConfiguredTheme();\n\t}\n\n\treturn curTheme;\n};\n\n/**\n * Applies a new theme after fetching its assets from the network.\n * @public\n * @param {string} theme the name of the new theme\n * @returns {Promise<void>} a promise that is resolved when the new theme assets have been fetched and applied to the DOM\n */\nconst setTheme = async (theme: string): Promise<void> => {\n\tif (curTheme === theme) {\n\t\treturn;\n\t}\n\n\tcurTheme = theme;\n\n\tif (isBooted()) {\n\t\t// Update CSS Custom Properties\n\t\tawait applyTheme(curTheme);\n\t\tawait reRenderAllUI5Elements({ themeAware: true });\n\t}\n};\n\n/**\n * Returns the default theme.\n *\n * Note: Default theme might be different than the configurated one.\n *\n * @public\n * @returns {string}\n */\nconst getDefaultTheme = (): string => {\n\treturn DEFAULT_THEME;\n};\n\n/**\n * Returns if the given theme name is the one currently applied.\n * @private\n * @param {string} theme\n * @returns {boolean}\n */\nconst isTheme = (theme: string) => {\n\tconst currentTheme = getTheme();\n\treturn currentTheme === theme || currentTheme === `${theme}_exp`;\n};\n\n/**\n * Returns if the currently set theme is part of legacy theme families (\"sap_fiori_3\").\n * **Note**: in addition, the method checks the base theme of a custom theme, built via the ThemeDesigner.\n *\n * @private\n * @returns { boolean }\n */\nconst isLegacyThemeFamily = () => {\n\tconst currentTheme = getTheme();\n\n\tif (!isKnownTheme(currentTheme)) {\n\t\treturn !getThemeDesignerTheme()?.baseThemeName?.startsWith(\"sap_horizon\");\n\t}\n\n\treturn !currentTheme.startsWith(\"sap_horizon\");\n};\n\nconst isLegacyThemeFamilyAsync = async () => {\n\tawait boot();\n\treturn isLegacyThemeFamily();\n};\n\nconst isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);\n\nexport {\n\tgetTheme,\n\tsetTheme,\n\tisTheme,\n\tisLegacyThemeFamily,\n\tisLegacyThemeFamilyAsync,\n\tgetDefaultTheme,\n};\n"]}

package/dist/config/ThemeRoot.d.ts

@@ -10,12 +10,10 @@ declare const getThemeRoot: () => string | undefined;
  * Sets theme root for the current theme.
  * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.
  *
- * <b>Note:</b> The feature is specific to custom themes, created with the `UI Theme Designer`.
+ * **Note:** The feature is specific to custom themes, created with the `UI Theme Designer`.
  * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.
  *
- * <br/>
- *
- * <b>Note:</b> Certain security restrictions will apply before fetching the theme assets.
+ * **Note:** Certain security restrictions will apply before fetching the theme assets.
  * Absolute URLs to a different origin than the current page will result in using the current page as an origin.
  * To allow specific origins, use &lt;meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/"&gt; tag inside the &lt;head&gt; of the page.
  *

package/dist/config/ThemeRoot.js

@@ -20,12 +20,10 @@ const getThemeRoot = () => {
  * Sets theme root for the current theme.
  * When set, the framework will validate the theme root and fetch the theme styles (CSS variables) from this location.
  *
- * <b>Note:</b> The feature is specific to custom themes, created with the `UI Theme Designer`.
+ * **Note:** The feature is specific to custom themes, created with the `UI Theme Designer`.
  * The provided theme root is used only as a base to construct the actual location of the theme styles: `{themeRoot}/.../css_variables.css`.
  *
- * <br/>
- *
- * <b>Note:</b> Certain security restrictions will apply before fetching the theme assets.
+ * **Note:** Certain security restrictions will apply before fetching the theme assets.
  * Absolute URLs to a different origin than the current page will result in using the current page as an origin.
  * To allow specific origins, use &lt;meta name="sap-allowedThemeOrigins" content="https://my-example-host.com/"&gt; tag inside the &lt;head&gt; of the page.
  *

package/dist/config/ThemeRoot.js.map

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

package/dist/config/Timezone.d.ts

@@ -7,7 +7,7 @@
 declare const getTimezone: () => string | undefined;
 /**
  * Sets the IANA timezone ID.
- * <b>For example:</b> "America/New_York", "Europe/London", "Australia/Sydney", "Asia/Bishkek", etc.
+ * **For example:** "America/New_York", "Europe/London", "Australia/Sydney", "Asia/Bishkek", etc.
  *>
  * @param {string} timezone
  * @private

package/dist/config/Timezone.js

@@ -14,7 +14,7 @@ const getTimezone = () => {
 };
 /**
  * Sets the IANA timezone ID.
- * <b>For example:</b> "America/New_York", "Europe/London", "Australia/Sydney", "Asia/Bishkek", etc.
+ * **For example:** "America/New_York", "Europe/London", "Australia/Sydney", "Asia/Bishkek", etc.
  *>
  * @param {string} timezone
  * @private

package/dist/config/Timezone.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timezone.js","sourceRoot":"","sources":["../../src/config/Timezone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAElF,IAAI,YAAgC,CAAC;AAErC;;;;;GAKG;AACH,MAAM,WAAW,GAAG,GAAuB,EAAE;IAC5C,IAAI,YAAY,KAAK,SAAS,EAAE;QAC/B,YAAY,GAAG,qBAAqB,EAAE,CAAC;KACvC;IACD,OAAO,YAAY,CAAC;AACrB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,EAAE;IACxC,IAAI,YAAY,KAAK,QAAQ,EAAE;QAC9B,OAAO;KACP;IAED,YAAY,GAAG,QAAQ,CAAC;AACzB,CAAC,CAAC;AAEF,OAAO,EACN,WAAW,EACX,WAAW,GACX,CAAC","sourcesContent":["import { getTimezone as getConfiguredTimezone } from \"../InitialConfiguration.js\";\n\nlet currTimezone: string | undefined;\n\n/**\n * Returns the configured IANA timezone ID.\n *\n * @private\n * @returns {string}\n */\nconst getTimezone = (): string | undefined => {\n\tif (currTimezone === undefined) {\n\t\tcurrTimezone = getConfiguredTimezone();\n\t}\n\treturn currTimezone;\n};\n\n/**\n * Sets the IANA timezone ID.\n * <b>For example:</b> \"America/New_York\", \"Europe/London\", \"Australia/Sydney\", \"Asia/Bishkek\", etc.\n *>\n * @param {string} timezone\n * @private\n * @returns { Promise<void> }\n */\nconst setTimezone = (timezone: string) => {\n\tif (currTimezone === timezone) {\n\t\treturn;\n\t}\n\n\tcurrTimezone = timezone;\n};\n\nexport {\n\tgetTimezone,\n\tsetTimezone,\n};\n"]}
+{"version":3,"file":"Timezone.js","sourceRoot":"","sources":["../../src/config/Timezone.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAElF,IAAI,YAAgC,CAAC;AAErC;;;;;GAKG;AACH,MAAM,WAAW,GAAG,GAAuB,EAAE;IAC5C,IAAI,YAAY,KAAK,SAAS,EAAE;QAC/B,YAAY,GAAG,qBAAqB,EAAE,CAAC;KACvC;IACD,OAAO,YAAY,CAAC;AACrB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,EAAE;IACxC,IAAI,YAAY,KAAK,QAAQ,EAAE;QAC9B,OAAO;KACP;IAED,YAAY,GAAG,QAAQ,CAAC;AACzB,CAAC,CAAC;AAEF,OAAO,EACN,WAAW,EACX,WAAW,GACX,CAAC","sourcesContent":["import { getTimezone as getConfiguredTimezone } from \"../InitialConfiguration.js\";\n\nlet currTimezone: string | undefined;\n\n/**\n * Returns the configured IANA timezone ID.\n *\n * @private\n * @returns {string}\n */\nconst getTimezone = (): string | undefined => {\n\tif (currTimezone === undefined) {\n\t\tcurrTimezone = getConfiguredTimezone();\n\t}\n\treturn currTimezone;\n};\n\n/**\n * Sets the IANA timezone ID.\n * **For example:** \"America/New_York\", \"Europe/London\", \"Australia/Sydney\", \"Asia/Bishkek\", etc.\n *>\n * @param {string} timezone\n * @private\n * @returns { Promise<void> }\n */\nconst setTimezone = (timezone: string) => {\n\tif (currTimezone === timezone) {\n\t\treturn;\n\t}\n\n\tcurrTimezone = timezone;\n};\n\nexport {\n\tgetTimezone,\n\tsetTimezone,\n};\n"]}

package/dist/connectToComponent.d.ts

@@ -0,0 +1,9 @@
+import type UI5Element from "./UI5Element.js";
+type ConnectOptions = {
+    host: UI5Element;
+    propName: string;
+    onConnect?: (friend: HTMLElement) => void;
+    onDisconnect?: (friend: HTMLElement) => void;
+};
+declare const connectToComponent: (options: ConnectOptions) => HTMLElement | undefined;
+export default connectToComponent;

package/dist/connectToComponent.js

@@ -0,0 +1,59 @@
+import { renderDeferred } from "./Render.js";
+const MISSING_ELEMENT_POLL_TIMEOUT = 500; // how often to poll for not-yet-in-DOM friend elements
+const connections = new Map();
+const intervals = new Map();
+const connectToComponent = (options) => {
+    const host = options.host;
+    const propName = options.propName;
+    const friend = host[propName];
+    let connectedTo;
+    if (friend === undefined || friend === "") {
+        connectedTo = undefined; // do not return early even if a "menu" property is not set - it may have been set before and cleanup must run
+    }
+    else if (friend instanceof HTMLElement) {
+        connectedTo = friend;
+    }
+    else {
+        const rootNode = host.getRootNode();
+        connectedTo = (rootNode.getElementById && rootNode.getElementById(friend)) || undefined;
+    }
+    const key = `${host._id}-${propName}`;
+    const prevConnectedTo = connections.get(key);
+    // Not connected - return undefined
+    if (!connectedTo) {
+        if (prevConnectedTo) { // but first disconnect, if needed
+            options.onDisconnect && options.onDisconnect(prevConnectedTo);
+            connections.delete(key);
+        }
+        // if friend element not in DOM yet, start polling
+        if (typeof friend === "string" && friend && !intervals.has(key)) {
+            const interval = setInterval(() => {
+                const rootNode = host.getRootNode();
+                const found = (rootNode.getElementById && rootNode.getElementById(friend));
+                if (found) {
+                    clearInterval(intervals.get(key));
+                    intervals.delete(key);
+                    renderDeferred(host);
+                }
+            }, MISSING_ELEMENT_POLL_TIMEOUT);
+            intervals.set(key, interval);
+        }
+        return;
+    }
+    // If connected, but still polling, stop polling
+    if (intervals.has(key)) {
+        clearInterval(intervals.get(key));
+        intervals.delete(key);
+    }
+    // Connected - either for the first time, or to something else
+    if (prevConnectedTo !== connectedTo) {
+        if (prevConnectedTo) {
+            options.onDisconnect && options.onDisconnect(prevConnectedTo);
+        }
+        options.onConnect && options.onConnect(connectedTo);
+        connections.set(key, connectedTo);
+    }
+    return connections.get(key);
+};
+export default connectToComponent;
+//# sourceMappingURL=connectToComponent.js.map

package/dist/connectToComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectToComponent.js","sourceRoot":"","sources":["../src/connectToComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,MAAM,4BAA4B,GAAG,GAAG,CAAC,CAAC,uDAAuD;AACjG,MAAM,WAAW,GAAG,IAAI,GAAG,EAAuB,CAAC;AACnD,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoB,CAAC;AAS9C,MAAM,kBAAkB,GAAG,CAAC,OAAuB,EAA2B,EAAE;IAC/E,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IAClC,MAAM,MAAM,GAAG,IAAI,CAAC,QAA6B,CAAqC,CAAC;IAEvF,IAAI,WAAoC,CAAC;IACzC,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,EAAE,EAAE;QAC1C,WAAW,GAAG,SAAS,CAAC,CAAC,8GAA8G;KACvI;SAAM,IAAI,MAAM,YAAY,WAAW,EAAE;QACzC,WAAW,GAAG,MAAM,CAAC;KACrB;SAAM;QACN,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAc,CAAC;QAChD,WAAW,GAAG,CAAC,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,IAAI,SAAS,CAAC;KACxF;IAED,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,QAAQ,EAAE,CAAC;IACtC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE7C,mCAAmC;IACnC,IAAI,CAAC,WAAW,EAAE;QACjB,IAAI,eAAe,EAAE,EAAE,kCAAkC;YACxD,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;YAC9D,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SACxB;QAED,kDAAkD;QAClD,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAChE,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;gBACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAc,CAAC;gBAChD,MAAM,KAAK,GAAG,CAAC,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;gBAE3E,IAAI,KAAK,EAAE;oBACV,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;oBAClC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;oBACtB,cAAc,CAAC,IAAI,CAAC,CAAC;iBACrB;YACF,CAAC,EAAE,4BAA4B,CAAC,CAAC;YACjC,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SAC7B;QAED,OAAO;KACP;IAED,gDAAgD;IAChD,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACvB,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAClC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;KACtB;IAED,8DAA8D;IAC9D,IAAI,eAAe,KAAK,WAAW,EAAE;QACpC,IAAI,eAAe,EAAE;YACpB,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;SAC9D;QACD,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACpD,WAAW,CAAC,GAAG,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;KAClC;IAED,OAAO,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import type UI5Element from \"./UI5Element.js\";\nimport { renderDeferred } from \"./Render.js\";\nimport { Interval } from \"./types.js\";\n\nconst MISSING_ELEMENT_POLL_TIMEOUT = 500; // how often to poll for not-yet-in-DOM friend elements\nconst connections = new Map<string, HTMLElement>();\nconst intervals = new Map<string, Interval>();\n\ntype ConnectOptions = {\n\thost: UI5Element;\n\tpropName: string;\n\tonConnect?: (friend: HTMLElement) => void;\n\tonDisconnect?: (friend: HTMLElement) => void;\n}\n\nconst connectToComponent = (options: ConnectOptions): HTMLElement | undefined => {\n\tconst host = options.host;\n\tconst propName = options.propName;\n\tconst friend = host[propName as keyof typeof host] as HTMLElement | string | undefined;\n\n\tlet connectedTo: HTMLElement | undefined;\n\tif (friend === undefined || friend === \"\") {\n\t\tconnectedTo = undefined; // do not return early even if a \"menu\" property is not set - it may have been set before and cleanup must run\n\t} else if (friend instanceof HTMLElement) {\n\t\tconnectedTo = friend;\n\t} else {\n\t\tconst rootNode = host.getRootNode() as Document;\n\t\tconnectedTo = (rootNode.getElementById && rootNode.getElementById(friend)) || undefined;\n\t}\n\n\tconst key = `${host._id}-${propName}`;\n\tconst prevConnectedTo = connections.get(key);\n\n\t// Not connected - return undefined\n\tif (!connectedTo) {\n\t\tif (prevConnectedTo) { // but first disconnect, if needed\n\t\t\toptions.onDisconnect && options.onDisconnect(prevConnectedTo);\n\t\t\tconnections.delete(key);\n\t\t}\n\n\t\t// if friend element not in DOM yet, start polling\n\t\tif (typeof friend === \"string\" && friend && !intervals.has(key)) {\n\t\t\tconst interval = setInterval(() => {\n\t\t\t\tconst rootNode = host.getRootNode() as Document;\n\t\t\t\tconst found = (rootNode.getElementById && rootNode.getElementById(friend));\n\n\t\t\t\tif (found) {\n\t\t\t\t\tclearInterval(intervals.get(key));\n\t\t\t\t\tintervals.delete(key);\n\t\t\t\t\trenderDeferred(host);\n\t\t\t\t}\n\t\t\t}, MISSING_ELEMENT_POLL_TIMEOUT);\n\t\t\tintervals.set(key, interval);\n\t\t}\n\n\t\treturn;\n\t}\n\n\t// If connected, but still polling, stop polling\n\tif (intervals.has(key)) {\n\t\tclearInterval(intervals.get(key));\n\t\tintervals.delete(key);\n\t}\n\n\t// Connected - either for the first time, or to something else\n\tif (prevConnectedTo !== connectedTo) {\n\t\tif (prevConnectedTo) {\n\t\t\toptions.onDisconnect && options.onDisconnect(prevConnectedTo);\n\t\t}\n\t\toptions.onConnect && options.onConnect(connectedTo);\n\t\tconnections.set(key, connectedTo);\n\t}\n\n\treturn connections.get(key);\n};\n\nexport default connectToComponent;\n"]}

package/dist/css/FontFace.css

@@ -2,65 +2,95 @@
     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");
+    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: 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");
-
+    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: local('72-Bold'),
-    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+    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: 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");
+    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: local('72-Bold'),
-    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Bold.woff2?ui5-webcomponents) format("woff2");
+    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_fiori_3/fonts/72-Bold-full.woff2?ui5-webcomponents) format("woff2");
+    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: local('72-Light'),
-        url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2?ui5-webcomponents) format("woff2");
+    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_fiori_3/fonts/72-Light-full.woff2?ui5-webcomponents) format("woff2");
+    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: local('72Black'),
-    url(https://sdk.openui5.org/resources/sap/ui/core/themes/sap_horizon/fonts/72-Black.woff2?ui5-webcomponents) format("woff2");
+    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;
+}

package/dist/css/SystemCSSVars.css

@@ -7,11 +7,3 @@
 .sapUiSizeCompact {
     --_ui5_content_density:compact;
 }
-
-[dir="rtl"] {
-    --_ui5_dir:rtl;
-}
-
-[dir="ltr"] {
-    --_ui5_dir:ltr;
-}

package/dist/decorators/customElement.d.ts

@@ -8,16 +8,16 @@ import type { ComponentStylesData as Styles } from "../types.js";
  * @param { string | object } tagNameOrComponentSettings
  * @returns { ClassDecorator }
  */
-declare const customElement: (tagNameOrComponentSettings: string | {
+declare const customElement: (tagNameOrComponentSettings?: string | {
     tag?: string;
     renderer?: Renderer;
     styles?: Styles;
     template?: Template;
     dependencies?: Array<typeof UI5Element>;
-    staticAreaStyles?: Styles;
-    staticAreaTemplate?: Template;
     languageAware?: boolean;
     themeAware?: boolean;
     fastNavigation?: boolean;
+    formAssociated?: boolean;
+    shadowRootOptions?: Partial<ShadowRootInit>;
 }) => ClassDecorator;
 export default customElement;

package/dist/decorators/customElement.js

@@ -4,7 +4,7 @@
  * @param { string | object } tagNameOrComponentSettings
  * @returns { ClassDecorator }
  */
-const customElement = (tagNameOrComponentSettings) => {
+const customElement = (tagNameOrComponentSettings = {}) => {
     return (target) => {
         if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {
             target.metadata = {};
@@ -13,7 +13,7 @@ const customElement = (tagNameOrComponentSettings) => {
             target.metadata.tag = tagNameOrComponentSettings;
             return;
         }
-        const { tag, languageAware, themeAware, fastNavigation, } = tagNameOrComponentSettings;
+        const { tag, languageAware, themeAware, fastNavigation, formAssociated, shadowRootOptions, } = tagNameOrComponentSettings;
         target.metadata.tag = tag;
         if (languageAware) {
             target.metadata.languageAware = languageAware;
@@ -24,11 +24,16 @@ const customElement = (tagNameOrComponentSettings) => {
         if (fastNavigation) {
             target.metadata.fastNavigation = fastNavigation;
         }
-        ["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity) => {
-            const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
-            const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity];
+        if (formAssociated) {
+            target.metadata.formAssociated = formAssociated;
+        }
+        if (shadowRootOptions) {
+            target.metadata.shadowRootOptions = shadowRootOptions;
+        }
+        ["renderer", "template", "styles", "dependencies"].forEach((customElementEntity) => {
+            const customElementEntityValue = tagNameOrComponentSettings[customElementEntity];
             customElementEntityValue && Object.defineProperty(target, customElementEntity, {
-                get: () => customElementEntityValue,
+                get: () => tagNameOrComponentSettings[customElementEntity],
             });
         });
     };

package/dist/decorators/customElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"customElement.js","sourceRoot":"","sources":["../../src/decorators/customElement.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CAAC,0BAWtB,EAAkB,EAAE;IACpB,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,IAAI,OAAO,0BAA0B,KAAK,QAAQ,EAAE;YACnD,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,0BAA0B,CAAC;YACjD,OAAO;SACP;QAED,MAAM,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,cAAc,GACb,GAAG,0BAA0B,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QAC1B,IAAI,aAAa,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;QACD,IAAI,UAAU,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC;SACxC;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QAED,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,oBAAoB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,mBAA2B,EAAE,EAAE;YAC9I,MAAM,oBAAoB,GAAG,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACjG,MAAM,wBAAwB,GAAG,0BAA0B,CAAC,oBAAwC,CAAC,CAAC;YAEtG,wBAAwB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,mBAAmB,EAAE;gBAC9E,GAAG,EAAE,GAAG,EAAE,CAAC,wBAAwB;aACnC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport type { Renderer } from \"../UI5Element.js\";\nimport type { TemplateFunction as Template } from \"../renderer/executeTemplate.js\";\nimport type { ComponentStylesData as Styles } from \"../types.js\";\n\n/**\n * Returns a custom element class decorator.\n *\n * @param { string | object } tagNameOrComponentSettings\n * @returns { ClassDecorator }\n */\nconst customElement = (tagNameOrComponentSettings: string | {\n\ttag?: string,\n\trenderer?: Renderer,\n\tstyles?: Styles,\n\ttemplate?: Template,\n\tdependencies?: Array<typeof UI5Element>,\n\tstaticAreaStyles?: Styles,\n\tstaticAreaTemplate?: Template,\n\tlanguageAware?: boolean,\n\tthemeAware?: boolean,\n\tfastNavigation?: boolean,\n}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tif (typeof tagNameOrComponentSettings === \"string\") {\n\t\t\ttarget.metadata.tag = tagNameOrComponentSettings;\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\ttag,\n\t\t\tlanguageAware,\n\t\t\tthemeAware,\n\t\t\tfastNavigation,\n\t\t } = tagNameOrComponentSettings;\n\n\t\ttarget.metadata.tag = tag;\n\t\tif (languageAware) {\n\t\t\ttarget.metadata.languageAware = languageAware;\n\t\t}\n\t\tif (themeAware) {\n\t\t\ttarget.metadata.themeAware = themeAware;\n\t\t}\n\t\tif (fastNavigation) {\n\t\t\ttarget.metadata.fastNavigation = fastNavigation;\n\t\t}\n\n\t\t[\"render\", \"renderer\", \"template\", \"staticAreaTemplate\", \"styles\", \"staticAreaStyles\", \"dependencies\"].forEach((customElementEntity: string) => {\n\t\t\tconst _customElementEntity = customElementEntity === \"render\" ? \"renderer\" : customElementEntity;\n\t\t\tconst customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];\n\n\t\t\tcustomElementEntityValue && Object.defineProperty(target, customElementEntity, {\n\t\t\t\tget: () => customElementEntityValue,\n\t\t\t});\n\t\t});\n\t};\n};\n\nexport default customElement;\n"]}
+{"version":3,"file":"customElement.js","sourceRoot":"","sources":["../../src/decorators/customElement.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CAAC,6BAWnB,EAAE,EAAkB,EAAE;IACzB,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,IAAI,OAAO,0BAA0B,KAAK,QAAQ,EAAE;YACnD,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,0BAA0B,CAAC;YACjD,OAAO;SACP;QAED,MAAM,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,cAAc,EACd,cAAc,EACd,iBAAiB,GAChB,GAAG,0BAA0B,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QAC1B,IAAI,aAAa,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;QACD,IAAI,UAAU,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC;SACxC;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QAED,IAAI,iBAAiB,EAAE;YACtB,MAAM,CAAC,QAAQ,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;SACtD;QAED,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,mBAA2B,EAAE,EAAE;YAC1F,MAAM,wBAAwB,GAAG,0BAA0B,CAAC,mBAAuC,CAAC,CAAC;YAErG,wBAAwB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,mBAAmB,EAAE;gBAC9E,GAAG,EAAE,GAAG,EAAE,CAAC,0BAA0B,CAAC,mBAAuC,CAAC;aAC9E,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport type { Renderer } from \"../UI5Element.js\";\nimport type { TemplateFunction as Template } from \"../renderer/executeTemplate.js\";\nimport type { ComponentStylesData as Styles } from \"../types.js\";\n\n/**\n * Returns a custom element class decorator.\n *\n * @param { string | object } tagNameOrComponentSettings\n * @returns { ClassDecorator }\n */\nconst customElement = (tagNameOrComponentSettings: string | {\n\ttag?: string,\n\trenderer?: Renderer,\n\tstyles?: Styles,\n\ttemplate?: Template,\n\tdependencies?: Array<typeof UI5Element>,\n\tlanguageAware?: boolean,\n\tthemeAware?: boolean,\n\tfastNavigation?: boolean,\n\tformAssociated?: boolean,\n\tshadowRootOptions?: Partial<ShadowRootInit>,\n} = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tif (typeof tagNameOrComponentSettings === \"string\") {\n\t\t\ttarget.metadata.tag = tagNameOrComponentSettings;\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\ttag,\n\t\t\tlanguageAware,\n\t\t\tthemeAware,\n\t\t\tfastNavigation,\n\t\t\tformAssociated,\n\t\t\tshadowRootOptions,\n\t\t } = tagNameOrComponentSettings;\n\n\t\ttarget.metadata.tag = tag;\n\t\tif (languageAware) {\n\t\t\ttarget.metadata.languageAware = languageAware;\n\t\t}\n\t\tif (themeAware) {\n\t\t\ttarget.metadata.themeAware = themeAware;\n\t\t}\n\t\tif (fastNavigation) {\n\t\t\ttarget.metadata.fastNavigation = fastNavigation;\n\t\t}\n\t\tif (formAssociated) {\n\t\t\ttarget.metadata.formAssociated = formAssociated;\n\t\t}\n\n\t\tif (shadowRootOptions) {\n\t\t\ttarget.metadata.shadowRootOptions = shadowRootOptions;\n\t\t}\n\n\t\t[\"renderer\", \"template\", \"styles\", \"dependencies\"].forEach((customElementEntity: string) => {\n\t\t\tconst customElementEntityValue = tagNameOrComponentSettings[customElementEntity as keyof typeof tag];\n\n\t\t\tcustomElementEntityValue && Object.defineProperty(target, customElementEntity, {\n\t\t\t\tget: () => tagNameOrComponentSettings[customElementEntity as keyof typeof tag],\n\t\t\t});\n\t\t});\n\t};\n};\n\nexport default customElement;\n"]}

package/dist/decorators/event.d.ts

@@ -1,4 +1,3 @@
-import { EventData } from "../UI5ElementMetadata.js";
 /**
  * Returns an event class decorator.
  *
@@ -6,5 +5,9 @@ import { EventData } from "../UI5ElementMetadata.js";
  * @param { EventData } data the event data
  * @returns { ClassDecorator }
  */
-declare const event: (name: string, data?: EventData) => ClassDecorator;
+declare const event: <EventDetail>(name: string, data?: {
+    detail?: Record<keyof EventDetail, {
+        type: any;
+    }> | undefined;
+}) => ClassDecorator;
 export default event;

package/dist/decorators/event.js.map

@@ -1 +1 @@
-{"version":3,"file":"event.js","sourceRoot":"","sources":["../../src/decorators/event.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,OAAkB,EAAE,EAAkB,EAAE;IACpE,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACrB,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;YAC1B,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;SAC5B;IACF,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { EventData } from \"../UI5ElementMetadata.js\";\n\n/**\n * Returns an event class decorator.\n *\n * @param { string } name the event name\n * @param { EventData } data the event data\n * @returns { ClassDecorator }\n */\nconst event = (name: string, data: EventData = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tconst metadata = target.metadata;\n\t\tif (!metadata.events) {\n\t\t\tmetadata.events = {};\n\t\t}\n\n\t\tconst eventsMetadata = metadata.events;\n\t\tif (!eventsMetadata[name]) {\n\t\t\teventsMetadata[name] = data;\n\t\t}\n\t};\n};\n\nexport default event;\n"]}
+{"version":3,"file":"event.js","sourceRoot":"","sources":["../../src/decorators/event.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,CAAc,IAAY,EAAE,OAA8D,EAAE,EAAkB,EAAE;IAC7H,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACrB,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;YAC1B,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;SAC5B;IACF,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["/**\n * Returns an event class decorator.\n *\n * @param { string } name the event name\n * @param { EventData } data the event data\n * @returns { ClassDecorator }\n */\nconst event = <EventDetail>(name: string, data: { detail?: Record<keyof EventDetail, { type: any }> } = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tconst metadata = target.metadata;\n\t\tif (!metadata.events) {\n\t\t\tmetadata.events = {};\n\t\t}\n\n\t\tconst eventsMetadata = metadata.events;\n\t\tif (!eventsMetadata[name]) {\n\t\t\teventsMetadata[name] = data;\n\t\t}\n\t};\n};\n\nexport default event;\n"]}

package/dist/decorators.d.ts

@@ -0,0 +1,5 @@
+import customElement from "./decorators/customElement.js";
+import event from "./decorators/event.js";
+import property from "./decorators/property.js";
+import slot from "./decorators/slot.js";
+export { customElement, event, property, slot, };

package/dist/decorators.js

@@ -0,0 +1,6 @@
+import customElement from "./decorators/customElement.js";
+import event from "./decorators/event.js";
+import property from "./decorators/property.js";
+import slot from "./decorators/slot.js";
+export { customElement, event, property, slot, };
+//# sourceMappingURL=decorators.js.map

package/dist/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../src/decorators.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,EACN,aAAa,EACb,KAAK,EACL,QAAQ,EACR,IAAI,GACJ,CAAC","sourcesContent":["import customElement from \"./decorators/customElement.js\";\nimport event from \"./decorators/event.js\";\nimport property from \"./decorators/property.js\";\nimport slot from \"./decorators/slot.js\";\n\nexport {\n\tcustomElement,\n\tevent,\n\tproperty,\n\tslot,\n};\n"]}

package/dist/delegate/ItemNavigation.d.ts

@@ -3,7 +3,7 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 import type UI5Element from "../UI5Element.js";
 interface ITabbable {
     id: string;
-    _tabIndex: string;
+    forcedTabIndex: string;
 }
 type ItemNavigationOptions = {
     currentIndex?: number;
@@ -27,18 +27,18 @@ type ItemNavigationOptions = {
  * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
  *
  * Each item passed to ItemNavigation via "getItemsCallback" must be:
- *  - A) either a UI5Element with a "_tabIndex" property
- *  - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
+ *  - A) either a UI5Element with a "forcedTabIndex" property
+ *  - B) or an Object with "id" and "forcedTabIndex" properties which represents a part of the root component's shadow DOM.
  *    The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
  *    This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
  *    and the developer has the responsibility to update the "tabindex" in the component's DOM.
  *  - C) a combination of the above
  *
- * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
- * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
- * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
- * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
- * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
+ * Whenever the user navigates with the keyboard, ItemNavigation will modify the "forcedTabIndex" properties of the items.
+ * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "forcedTabIndex" ItemNavigation set to them to the "tabindex" property).
+ * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "forcedTabIndex" property.
+ * If the items are Objects with "id" and "forcedTabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
+ * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "forcedTabIndex" is changed deeply.
  *
  * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
  * This is most commonly required if the user for example clicks on an item and thus selects it directly.
@@ -56,6 +56,7 @@ declare class ItemNavigation {
     _navigationMode: NavigationMode;
     _affectedPropertiesNames: Array<string>;
     _skipItemsSize: number | null;
+    _initBound: () => void;
     /**
      *
      * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)

package/dist/delegate/ItemNavigation.js

@@ -16,18 +16,18 @@ import { instanceOfUI5Element } from "../UI5Element.js";
  * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
  *
  * Each item passed to ItemNavigation via "getItemsCallback" must be:
- *  - A) either a UI5Element with a "_tabIndex" property
- *  - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
+ *  - A) either a UI5Element with a "forcedTabIndex" property
+ *  - B) or an Object with "id" and "forcedTabIndex" properties which represents a part of the root component's shadow DOM.
  *    The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
  *    This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
  *    and the developer has the responsibility to update the "tabindex" in the component's DOM.
  *  - C) a combination of the above
  *
- * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
- * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
- * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
- * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
- * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
+ * Whenever the user navigates with the keyboard, ItemNavigation will modify the "forcedTabIndex" properties of the items.
+ * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "forcedTabIndex" ItemNavigation set to them to the "tabindex" property).
+ * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "forcedTabIndex" property.
+ * If the items are Objects with "id" and "forcedTabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
+ * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "forcedTabIndex" is changed deeply.
  *
  * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
  * This is most commonly required if the user for example clicks on an item and thus selects it directly.
@@ -57,9 +57,8 @@ class ItemNavigation {
         }
         this.rootWebComponent = rootWebComponent;
         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") {
             throw new Error("getItemsCallback is required");
         }
@@ -98,7 +97,7 @@ class ItemNavigation {
     }
     _init() {
         this._getItems().forEach((item, idx) => {
-            item._tabIndex = (idx === this._currentIndex) ? "0" : "-1";
+            item.forcedTabIndex = (idx === this._currentIndex) ? "0" : "-1";
         });
     }
     _onkeydown(event) {
@@ -266,7 +265,7 @@ class ItemNavigation {
     _applyTabIndex() {
         const items = this._getItems();
         for (let i = 0; i < items.length; i++) {
-            items[i]._tabIndex = i === this._currentIndex ? "0" : "-1";
+            items[i].forcedTabIndex = i === this._currentIndex ? "0" : "-1";
         }
         this._affectedPropertiesNames.forEach(propName => {
             const prop = this.rootWebComponent[propName];
@@ -276,7 +275,7 @@ class ItemNavigation {
     _focusCurrentItem() {
         const currentItem = this._getCurrentItem();
         if (currentItem) {
-            currentItem.focus({ focusVisible: true });
+            currentItem.focus();
         }
     }
     _canNavigate() {
@@ -308,7 +307,7 @@ class ItemNavigation {
             return;
         }
         if (currentItem.id) {
-            return currentItemDOMRef.querySelector(`#${currentItem.id}`);
+            return currentItemDOMRef.querySelector(`[id="${currentItem.id}"]`);
         }
     }
 }