@ui5/webcomponents-base 0.0.0-96e98c995 → 0.0.0-974b11d82

package/src/config/Icons.ts

@@ -1,59 +1,126 @@
 import { getTheme, isThemeFamily } from "./Theme.js";
+import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js";
 
 const IconCollectionConfiguration = new Map<string, string>();
 
-enum IconCollection {
-	v4 = "SAP-icons",
-	v5 = "SAP-icons-v5",
+// All supported icon collections + unknown custom ones
+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;
+
+// All registered icon collections - all icon collections resolves to these options at the end
+enum RegisteredIconCollection {
+	SAPIconsV4 = "SAP-icons-v4",
+	SAPIconsV5 = "SAP-icons-v5",
+	SAPIconsTNTV2 = "tnt-v2",
+	SAPIconsTNTV3 = "tnt-v3",
+	SAPBSIconsV1 = "business-suite-v1",
+	SAPBSIconsV2 = "business-suite-v2",
 }
 
 /**
- * Sets the default icon collection (SAP-icons font v4 or SAP-icons font v5) per theme,
- * which will be applied in case icon collection is not specified.
+ * Sets the default icon collection for a given theme.
+ *
+ * SAP Icons is the default icon collection (that resolves to SAP-icons version 5.x in Horizon theme family and SAP-icons version 4.x in all other themes)
+ * and to display icons from other collections, you have to specify the icon collection in addition to the icon name, for example: "tnt/actor", "business-suite/1x2-grid-layout", etc.
+ * This method allows setting another (built-in or custom) icon collection as default per theme.
+ *
+ * <b>Usage</b>
+ * <b>For example</b>, to make "SAP-icons version 5.x" the default icon collection in "sap_fiori_3":
+ *
+ * <pre>
+ * setDefaultIconCollection("sap_fiori_3", "SAP-icons-v5");
+ *
+ * <ui5-icon name="home"></ui5-icon>
+ * </pre>
+ *
+ * <b>For example</b>, to make a custom icon collection (with name "my-custom-collection") the default icon collection in "sap_fiori_3":
+ *
+ * <pre>
+ * setDefaultIconCollection("sap_fiori_3", "my-custom-collection");
+ *
+ * <ui5-icon name="custom-icon-name"></ui5-icon>
+ * </pre>
  *
- * Note: by default SAP-icons-v5 is used in all SAP Horizon variants and SAP-icons-v4 for all the rest.
  * @public
- * @param {string} theme
- * @param {IconCollection} collectionName
+ * @param { string } theme
+ * @param { string } collectionName
  */
-const setDefaultIconCollection = (theme: string, collectionName: "horizon" | IconCollection) => {
-	if (collectionName === "horizon") {
-		collectionName = IconCollection.v5;
-	}
-
+const setDefaultIconCollection = (theme: string, collectionName: IconCollection) => {
 	IconCollectionConfiguration.set(theme, collectionName);
 };
 
 /**
- * Returns the default icon collection (v4 or v5) for given theme,
- * that is configured.
+ * Returns the configured default icon collection for a given theme.
  *
- * @param {string} theme
+ * @param { string } theme
  * @public
- * @returns {string | undefined}
+ * @returns { string | undefined }
  */
 const getDefaultIconCollection = (theme: string): string | undefined => {
 	return IconCollectionConfiguration.get(theme);
 };
 
 /**
- * Returns the effective icon collection that will be applied for icon web components
- * whenever namespace is not specified.
- * @returns {string}
+ * 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 getEffectiveDefaultIconCollection = () => {
+const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollection => {
 	const currentTheme = getTheme();
 	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
 
-	if (currentThemeConfiguration) {
-		return currentThemeConfiguration;
+	// when no collection is set and default collection is configured - return the configured icon collection
+	if (!collectionName && currentThemeConfiguration) {
+		return getIconCollectionByAlias(currentThemeConfiguration);
 	}
 
-	return isThemeFamily("sap_horizon") ? IconCollection.v5 : IconCollection.v4;
+	// 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?: IconCollection): RegisteredIconCollection => {
+	const horizonThemeFamily = isThemeFamily("sap_horizon");
+
+	if (!collectionName) {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsV5 : RegisteredIconCollection.SAPIconsV4;
+	}
+
+	if (collectionName === "tnt") {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPIconsTNTV3 : RegisteredIconCollection.SAPIconsTNTV2;
+	}
+
+	if (collectionName === "business-suite") {
+		return horizonThemeFamily ? RegisteredIconCollection.SAPBSIconsV2 : RegisteredIconCollection.SAPBSIconsV1;
+	}
+
+	return collectionName as RegisteredIconCollection;
 };
 
 export {
 	setDefaultIconCollection,
 	getDefaultIconCollection,
-	getEffectiveDefaultIconCollection,
+	getEffectiveIconCollection,
+	RegisteredIconCollection,
+};
+
+export type {
+	IconCollection,
 };

package/src/config/RTL.ts

@@ -29,6 +29,10 @@ const impliesRTL = (language: string) => {
  * @returns {boolean} whether RTL should be used
  */
 const getRTL = (): boolean => {
+	if (typeof document === "undefined") {
+		return false;
+	}
+
 	const configurationRTL = getConfiguredRTL();
 
 	if (configurationRTL !== undefined) {

package/src/decorators/customElement.ts

@@ -1,16 +1,56 @@
+import type UI5Element from "../UI5Element.js";
+import type { Renderer } from "../UI5Element.js";
+import type { TemplateFunction as Template } from "../renderer/executeTemplate.js";
+import type { ComponentStylesData as Styles } from "../types.js";
+
 /**
  * Returns a custom element class decorator.
  *
- * @param { string } tag
+ * @param { string | object } tagNameOrComponentSettings
  * @returns { ClassDecorator }
  */
-const customElement = (tag: string): ClassDecorator => {
+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,
+}): ClassDecorator => {
 	return (target: any) => {
 		if (!Object.prototype.hasOwnProperty.call(target, "decoratorMetadata")) {
 			target.decoratorMetadata = {};
 		}
 
+		if (typeof tagNameOrComponentSettings === "string") {
+			target.decoratorMetadata.tag = tagNameOrComponentSettings;
+			return;
+		}
+
+		const {
+			tag,
+			languageAware = false,
+			themeAware = false,
+			fastNavigation = false,
+		 } = tagNameOrComponentSettings;
+
 		target.decoratorMetadata.tag = tag;
+		target.decoratorMetadata.languageAware = languageAware;
+		target.decoratorMetadata.themeAware = themeAware;
+		target.decoratorMetadata.fastNavigation = fastNavigation;
+
+		["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
+			const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
+			const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];
+
+			customElementEntityValue && Object.defineProperty(target, customElementEntity, {
+				get: () => customElementEntityValue,
+			});
+		});
 	};
 };
 

package/src/delegate/ResizeHandler.ts

@@ -1,6 +1,6 @@
 import { instanceOfUI5Element } from "../UI5Element.js";
 
-type ResizeObserverCallback = () => void;
+type ResizeObserverCallback = () => Promise<void> | void;
 
 let resizeObserver: ResizeObserver;
 const observedElements = new Map<HTMLElement, Array<ResizeObserverCallback>>();
@@ -10,7 +10,9 @@ const getResizeObserver = () => {
 		resizeObserver = new window.ResizeObserver(entries => {
 			entries.forEach(entry => {
 				const callbacks = observedElements.get(entry.target as HTMLElement);
-				callbacks?.forEach((callback: ResizeObserverCallback) => callback());
+				// Callbacks could be async and we need to handle returned promises to comply with the eslint "no-misused-promises" rule.
+				// Although Promise.all awaits all, we don't additonal task after calling the callbacks and should not make any difference.
+				callbacks && Promise.all(callbacks.map((callback: ResizeObserverCallback) => callback()));
 			});
 		});
 	}
@@ -93,3 +95,6 @@ class ResizeHandler {
 }
 
 export default ResizeHandler;
+export type {
+	ResizeObserverCallback,
+};

package/src/features/F6Navigation.ts

@@ -3,6 +3,7 @@ import { isF6Next, isF6Previous } from "../Keys.js";
 import { instanceOfUI5Element } from "../UI5Element.js";
 import { getFirstFocusableElement } from "../util/FocusableElements.js";
 import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
+import isElementClickable from "../util/isElementClickable.js";
 
 class F6Navigation {
 	static _instance: F6Navigation;
@@ -19,56 +20,61 @@ class F6Navigation {
 		document.addEventListener("keydown", this.keydownHandler);
 	}
 
-	async _keydownHandler(event: KeyboardEvent) {
-		if (isF6Next(event)) {
-			this.updateGroups();
+	async groupElementToFocus(nextElement: HTMLElement) {
+		const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
 
-			if (this.groups.length < 1) {
-				return;
+		if (nextElementDomRef) {
+			if (isElementClickable(nextElementDomRef)) {
+				return nextElementDomRef;
 			}
 
-			event.preventDefault();
+			const elementToFocus = await getFirstFocusableElement(nextElementDomRef);
 
-			let nextIndex = -1;
-			let nextElement;
-			if (this.selectedGroup) {
-				nextIndex = this.groups.indexOf(this.selectedGroup);
+			if (elementToFocus) {
+				return elementToFocus;
 			}
+		}
+	}
+
+	async findNextFocusableGroupElement(currentIndex: number) {
+		let elementToFocus;
 
-			if (nextIndex > -1) {
-				if (nextIndex + 1 >= this.groups.length) {
-					nextElement = this.groups[0];
+		/* eslint-disable no-await-in-loop */
+		for (let index = 0; index < this.groups.length; index++) {
+			let nextElement;
+
+			if (currentIndex > -1) {
+				if (currentIndex + 1 >= this.groups.length) {
+					currentIndex = 0;
+					nextElement = this.groups[currentIndex];
 				} else {
-					nextElement = this.groups[nextIndex + 1];
+					currentIndex += 1;
+					nextElement = this.groups[currentIndex];
 				}
 			} else {
-				nextElement = this.groups[0];
+				currentIndex = 0;
+				nextElement = this.groups[currentIndex];
 			}
 
-			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+			elementToFocus = await this.groupElementToFocus(nextElement);
 
-			if (nextElementDomRef) {
-				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
-				elementToFocus?.focus();
+			if (elementToFocus) {
+				break;
 			}
 		}
+		/* eslint-enable no-await-in-loop */
 
-		if (isF6Previous(event)) {
-			this.updateGroups();
-
-			if (this.groups.length < 1) {
-				return;
-			}
+		return elementToFocus;
+	}
 
-			event.preventDefault();
+	async findPreviousFocusableGroupElement(currentIndex: number) {
+		let elementToFocus;
 
-			let nextIndex = -1;
+		/* eslint-disable no-await-in-loop */
+		for (let index = 0; index < this.groups.length; index++) {
 			let nextElement;
-			if (this.selectedGroup) {
-				nextIndex = this.groups.indexOf(this.selectedGroup);
-			}
 
-			if (nextIndex > 0) {
+			if (currentIndex > 0) {
 				// Handle the situation where the first focusable element of two neighbor groups is the same
 				// For example:
 				// <ui5-flexible-column-layout>
@@ -77,22 +83,70 @@ class F6Navigation {
 				//     </ui5-list>
 				// </ui5-flexible-column-layout>
 				// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
+				const firstFocusable = await this.groupElementToFocus(this.groups[currentIndex - 1]);
+				const shouldSkipParent = firstFocusable === await this.groupElementToFocus(this.groups[currentIndex]);
 
-				const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
-				const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
+				currentIndex = shouldSkipParent ? currentIndex - 2 : currentIndex - 1;
 
-				nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
+				if (currentIndex < 0) {
+					currentIndex = this.groups.length - 1;
+				}
+
+				nextElement = this.groups[currentIndex];
 			} else {
-				nextElement = this.groups[this.groups.length - 1];
+				currentIndex = this.groups.length - 1;
+				nextElement = this.groups[currentIndex];
 			}
 
-			const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+			elementToFocus = await this.groupElementToFocus(nextElement);
 
-			if (nextElementDomRef) {
-				const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
-				elementToFocus?.focus();
+			if (elementToFocus) {
+				break;
 			}
 		}
+		/* eslint-enable no-await-in-loop */
+
+		return elementToFocus;
+	}
+
+	async _keydownHandler(event: KeyboardEvent) {
+		const forward = isF6Next(event);
+		const backward = isF6Previous(event);
+		if (!(forward || backward)) {
+			return;
+		}
+
+		this.updateGroups();
+
+		if (this.groups.length < 1) {
+			return;
+		}
+
+		event.preventDefault();
+
+		let elementToFocus;
+
+		if (this.groups.length === 0) {
+			elementToFocus = await this.groupElementToFocus(this.groups[0]);
+
+			return elementToFocus?.focus();
+		}
+
+		let currentIndex = -1;
+
+		if (this.selectedGroup) {
+			currentIndex = this.groups.indexOf(this.selectedGroup);
+		}
+
+		if (forward) {
+			elementToFocus = await this.findNextFocusableGroupElement(currentIndex);
+		}
+
+		if (backward) {
+			elementToFocus = await this.findPreviousFocusableGroupElement(currentIndex);
+		}
+
+		elementToFocus?.focus();
 	}
 
 	removeEventListeners() {
@@ -109,19 +163,19 @@ class F6Navigation {
 		let element: Element | null | ParentNode = this.deepActive(root);
 
 		while (element && (element as Element).getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
-		   element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
+			element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
 		}
 
 		this.selectedGroup = element as HTMLElement;
-	 }
+	}
 
-	 deepActive(root: DocumentOrShadowRoot): Element | null {
+	deepActive(root: DocumentOrShadowRoot): Element | null {
 		if (root.activeElement && root.activeElement.shadowRoot) {
-		   return this.deepActive(root.activeElement.shadowRoot);
+			return this.deepActive(root.activeElement.shadowRoot);
 		}
 
 		return root.activeElement;
-	 }
+	}
 
 	destroy() {
 		this.removeEventListeners();

package/src/features/LegacyDateFormats.ts

@@ -0,0 +1,40 @@
+import { getFormatSettings } from "../InitialConfiguration.js";
+import type { FormatSettings } from "../config/FormatSettings.js";
+import { registerFeature } from "../FeaturesRegistry.js";
+
+// Allows specifying the customizing data for Islamic calendar support
+// dateFormat - The date format
+// islamicMonthStart - The Islamic date in string format // 14360101
+// gregDate - Corresponding Gregorian date to the Islamic one in string format // 20141024
+type IslamicToGregorianMapping = {
+	dateFormat: string,
+	islamicMonthStart: string,
+	gregDate: string,
+};
+type LegacyDateCalendarCustomizing = Array<IslamicToGregorianMapping>;
+
+let formatSettings: FormatSettings;
+
+class LegacyDateFormats {
+	/**
+	 * Returns the currently set customizing data for Islamic calendar support
+	 *
+	 * @return {object[]} Returns an array that contains the customizing data.
+	 * @public
+	 */
+	static getLegacyDateCalendarCustomizing(this: void): LegacyDateCalendarCustomizing {
+		if (formatSettings === undefined) {
+			formatSettings = getFormatSettings();
+		}
+
+		return formatSettings.legacyDateCalendarCustomizing || [];
+	}
+}
+
+registerFeature("LegacyDateFormats", LegacyDateFormats);
+
+export default LegacyDateFormats;
+export type {
+	FormatSettings,
+	LegacyDateCalendarCustomizing,
+};

package/src/features/OpenUI5Support.ts

@@ -2,6 +2,7 @@ import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
 import { getCurrentZIndex } from "../util/PopupUtils.js";
 import { CLDRData } from "../asset-registries/LocaleData.js";
+import type { LegacyDateCalendarCustomizing } from "../features/LegacyDateFormats.js";
 
 type OpenUI5Popup = {
 	setInitialZIndex: (zIndex: number) => void,
@@ -22,6 +23,9 @@ type OpenUI5CoreConfiguration = {
 	getRTL: () => string,
 	getCalendarType: () => string,
 	getLocale: () => string,
+	getFormatSettings: () => {
+		getLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing;
+	}
 };
 
 type LocaleData = {
@@ -76,6 +80,7 @@ class OpenUI5Support {
 			calendarType: config.getCalendarType(),
 			formatSettings: {
 				firstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,
+				legacyDateCalendarCustomizing: config.getFormatSettings().getLegacyDateCalendarCustomizing(),
 			},
 		};
 	}

package/src/generated/css/BusyIndicator.css.ts

@@ -0,0 +1,9 @@
+import type { StyleData } from "../../types.js";
+
+const styleData: StyleData = {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "BusyIndicator.css",
+	content: `.busy-indicator-wrapper{position:relative;height:100%;width:100%}.busy-indicator-overlay{display:var(--ui5_web_components_busy_indicator_display);position:absolute;inset:0;background:var(--ui5_web_components_busy_indicator_background-color);z-index:99}.busy-indicator-busy-area{display:var(--ui5_web_components_busy_indicator_display);position:absolute;z-index:99;inset:0;justify-content:center;align-items:center;background-color:inherit;flex-direction:column;color:var(--_ui5_busy_indicator_color)}:host([__is-busy]) .busy-indicator-wrapper>:not(.busy-indicator-busy-area):not(.busy-indicator-overlay):not([busy-indicator-before-span]){--ui5_web_components_busy_indicator_display:none}.busy-indicator-busy-area:focus{outline:var(--_ui5_busy_indicator_focus_outline);outline-offset:-.125rem}.busy-indicator-circle{width:1rem;height:1rem;display:inline-block;background-color:currentColor;border-radius:50%}.circle-animation-0{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11)}.circle-animation-1{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11);animation-delay:.2s}.circle-animation-2{animation:grow 1.6s infinite cubic-bezier(.32,.06,.85,1.11);animation-delay:.4s}.sapUiLocalBusy{--ui5_web_components_busy_indicator_display:none}.busy-indicator-wrapper [ui5-busy-indicator]{display:none}@keyframes grow{0%,100%,50%{-webkit-transform:scale(.5);-moz-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}25%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}`,
+};
+
+export default styleData;

package/src/generated/css/FontFace.css.ts

@@ -0,0 +1,9 @@
+import type { StyleData } from "../../types.js";
+
+const styleData: 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")}`,
+};
+
+export default styleData;

package/src/generated/css/OverrideFontFace.css.ts

@@ -0,0 +1,9 @@
+import type { StyleData } from "../../types.js";
+
+const styleData: StyleData = {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "OverrideFontFace.css",
+	content: `@font-face{font-family:'72override';unicode-range:U+0102-0103,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EB7,U+1EB8-1EC7,U+1EC8-1ECB,U+1ECC-1EE3,U+1EE4-1EF1,U+1EF4-1EF7;src:local('Arial'),local('Helvetica'),local('sans-serif')}`,
+};
+
+export default styleData;

package/src/generated/css/SystemCSSVars.css.ts

@@ -0,0 +1,9 @@
+import type { StyleData } from "../../types.js";
+
+const styleData: StyleData = {
+	packageName: "@ui5/webcomponents-base",
+	fileName: "SystemCSSVars.css",
+	content: `:root{--_ui5_content_density:cozy}.sapUiSizeCompact,.ui5-content-density-compact,[data-ui5-compact-size]{--_ui5_content_density:compact}[dir=rtl]{--_ui5_dir:rtl}[dir=ltr]{--_ui5_dir:ltr}`,
+};
+
+export default styleData;

package/src/getSharedResource.ts

@@ -1,6 +1,11 @@
 import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
 
-const getSharedResourcesInstance = () => getSingletonElementInstance("ui5-shared-resources", document.head);
+const getSharedResourcesInstance = (): Record<string, unknown> | null => {
+	if (typeof document === "undefined") {
+		return null;
+	}
+	return getSingletonElementInstance("ui5-shared-resources", document.head) as unknown as Record<string, unknown>;
+};
 
 /**
  * Use this method to initialize/get resources that you would like to be shared among UI5 Web Components runtime instances.
@@ -15,6 +20,10 @@ const getSharedResource = <T>(namespace: string, initialValue: T): T => {
 	const parts = namespace.split(".");
 	let current = getSharedResourcesInstance() as Record<string, any>;
 
+	if (!current) {
+		return initialValue;
+	}
+
 	for (let i = 0; i < parts.length; i++) {
 		const part = parts[i];
 		const lastPart = i === parts.length - 1;

package/src/global.d.ts

@@ -1,5 +1,3 @@
-import { StyleData } from "./types.js";
-
 export {};
 
 declare global {
@@ -19,10 +17,6 @@ declare global {
 		chrome: any;
 		v8: any;
 	}
-	module "*.css.js" {
-		const content: StyleData;
-		export default content;
-	}
 
 	module "*generated/AssetParameters.js" {
 		const DEFAULT_THEME: string;

package/src/renderer/LitRenderer.ts

@@ -3,13 +3,13 @@ import {
 	html,
 	svg,
 	TemplateResult,
-	RenderOptions,
 } from "lit-html";
 
 import { getFeature } from "../FeaturesRegistry.js";
 import type { LitStatic } from "../CustomElementsScope.js";
 import type OpenUI5Enablement from "../features/OpenUI5Enablement.js";
 import type UI5Element from "../UI5Element.js";
+import type { Renderer, RendererOptions } from "../UI5Element.js";
 import { TemplateFunctionResult } from "./executeTemplate.js";
 
 const effectiveHtml = (strings: TemplateStringsArray, ...values: Array<unknown>) => {
@@ -24,7 +24,7 @@ const effectiveSvg = (strings: TemplateStringsArray, ...values: Array<unknown>)
 	return fn(strings, ...values);
 };
 
-const litRender = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RenderOptions) => {
+const litRender: Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, styleStrOrHrefsArr: string | Array<string> | undefined, forStaticArea: boolean, options: RendererOptions) => {
 	const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
 	if (openUI5Enablement && !forStaticArea) {
 		templateResult = openUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, options.host as UI5Element, templateResult as TemplateResult);