@openui5/sap.ui.webc.common 1.93.3 → 1.96.2

package/.reuse/dep5

@@ -309,7 +309,7 @@ License: MIT
 Comment: these files belong to: lodash
 
 Files: src/sap.ui.core/src/sap/ui/thirdparty/hyphenopoly/*
-Copyright: 2018 Mathias Nater
+Copyright: 2021 Mathias Nater
 License: MIT
 Comment: these files belong to: Hyphenopoly
 
@@ -347,11 +347,6 @@ Copyright: 2013 Ariya Hidayat and other contributors
 License: BSD-2-Clause
 Comment: these files belong to: Esprima
 
-Files: src/sap.ui.documentation/src/sap/ui/documentation/sdk/thirdparty/google-code-prettify/*
-Copyright: 2006 Google Inc.
-License: Apache-2.0
-Comment: these files belong to: google-code-prettify
-
 Files: src/sap.ui.documentation/src/sap/ui/documentation/sdk/thirdparty/highlight.js/*
 Copyright: 2006-2020, Ivan Sagalaev
 License: BSD-3-Clause
@@ -405,6 +400,11 @@ Copyright: 2014 Vitaly Puzrin, Alex Kocharin
 License: MIT
 Comment: these files belong to: Markdown-it
 
+Files: src/sap.ui.integration/test/sap/ui/integration/demokit/cardExplorer/webapp/thirdparty/ajv/ajv.min.js
+Copyright: 2015-2017 Evgeny Poberezkin
+License: MIT
+Comment: these files belong to: ajv
+
 
 # Library: sap.ui.mdc:
 
@@ -452,11 +452,6 @@ Copyright: 2009-2014, Alexis Sellier <self@cloudhead.net>
 License: Apache-2.0
 Comment: these files belong to: LESS
 
-Files: ../test/sap/ui/integration/demokit/cardExplorer/webapp/thirdparty/ajv/ajv.min.js
-Copyright: 2015-2017 Evgeny Poberezkin
-License: MIT
-Comment: these files belong to: ajv
-
 Files: lib/jsdoc/ui5/plugin.js
 Copyright:
     2009-2021 SAP SE or an SAP affiliate company and OpenUI5 contributors

package/THIRDPARTY.txt

@@ -6,7 +6,7 @@ The full text of all referenced licenses is appended at the end of this file.
 
 Library: sap.ui.codeeditor:
 
-Component: Ace (Ajax.org Cloud9 Editor), version: 1.4.4
+Component: Ace (Ajax.org Cloud9 Editor), version: 1.4.13
 Copyright: 2010, Ajax.org B.V.
 License: BSD-3-Clause
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/BSD-3-Clause.txt
@@ -279,8 +279,8 @@ License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.core/src/sap/ui/base/util/restricted/_/lodash.custom.js
 
-Component: Hyphenopoly, version: 2.4.0
-Copyright: 2018 Mathias Nater
+Component: Hyphenopoly, version: 3.4.0
+Copyright: 2021 Mathias Nater
 License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/hyphenopoly/*
@@ -324,12 +324,6 @@ License: BSD-2-Clause
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/BSD-2-Clause.txt
 Contained in: src/sap.ui.documentation/src/sap/ui/documentation/sdk/thirdparty/esprima.js
 
-Component: google-code-prettify, version: 20130304
-Copyright: 2006 Google Inc.
-License: Apache-2.0
-License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
-Contained in: src/sap.ui.documentation/src/sap/ui/documentation/sdk/thirdparty/google-code-prettify/*
-
 Component: highlight.js, version: 10.4.1
 Copyright: 2006-2020, Ivan Sagalaev
 License: BSD-3-Clause
@@ -376,7 +370,7 @@ License: Unicode-DFS-2015
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Unicode-DFS-2015.txt
 Contained in: src/sap.ui.integration/src/sap/ui/integration/thirdparty/webcomponents/Unicode-Data-Files-LICENSE.txt
 
-Component: Adaptive Cards, version: 1.2.3
+Component: Adaptive Cards, version: 2.9.0
 Copyright: 2017 Microsoft
 License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
@@ -395,6 +389,12 @@ License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.integration/src/sap/ui/integration/thirdparty/markdown-it.js
 
+Component: ajv, version: 6.12.3
+Copyright: 2015-2017 Evgeny Poberezkin
+License: MIT
+License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
+Contained in: src/sap.ui.integration/test/sap/ui/integration/demokit/cardExplorer/webapp/thirdparty/ajv/ajv.min.js
+
 
 Library: sap.ui.mdc:
 
@@ -450,12 +450,6 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: src/testsuite-utils/src/main/resources/META-INF/less/less.js
 
-Component: ajv, version: 6.12.3
-Copyright: 2015-2017 Evgeny Poberezkin
-License: MIT
-License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
-Contained in: ../test/sap/ui/integration/demokit/cardExplorer/webapp/thirdparty/ajv/ajv.min.js
-
 Component: JSDoc 3, version: 3.6.7
 Copyright: 2011-present Michael Mathews micmath@gmail.com and the contributors to JSDoc
 License: Apache-2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.webc.common",
-  "version": "1.93.3",
+  "version": "1.96.2",
   "description": "OpenUI5 UI Library sap.ui.webc.common",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -16,6 +16,6 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.93.3"
+    "@openui5/sap.ui.core": "1.96.2"
   }
 }

package/src/sap/ui/webc/common/.library

@@ -3,7 +3,7 @@
 
 	<name>sap.ui.webc.common</name>
 	<vendor>SAP SE</vendor>
-	<version>1.93.3</version>
+	<version>1.96.2</version>
 	<copyright>OpenUI5
  * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>

package/src/sap/ui/webc/common/WebComponent.js

@@ -47,9 +47,18 @@ sap.ui.define([
 		 *
 		 * @private
 		 * @param obj
+		 * @param level
+		 * @param maxLevel
 		 * @returns {Object}
 		 */
-		var fnConvert = function(obj) {
+		var fnConvert = function(obj, level, maxLevel) {
+			if (level === undefined) {
+				level = 0;
+			}
+			if (maxLevel === undefined) {
+				maxLevel = 2;
+			}
+
 			// Null
 			if (obj == null) {
 				return obj;
@@ -61,20 +70,22 @@ sap.ui.define([
 				return oControl ? oControl : obj;
 			}
 
-			// Array
-			if (Array.isArray(obj)) {
-				return obj.map(fnConvert);
-			}
+			if (level < maxLevel) {
+				// Array
+				if (Array.isArray(obj)) {
+					return obj.map(fnConvert, level + 1, maxLevel);
+				}
 
-			// Object
-			if (typeof obj === "object") {
-				var oResult = {};
-				for (var i in obj) {
-					if (obj.hasOwnProperty(i)) {
-						oResult[i] = fnConvert(obj[i]);
+				// Object
+				if (typeof obj === "object") {
+					var oResult = {};
+					for (var i in obj) {
+						if (obj.hasOwnProperty(i)) {
+							oResult[i] = fnConvert(obj[i], level + 1, maxLevel);
+						}
 					}
+					return oResult;
 				}
-				return oResult;
 			}
 
 			// Anything else
@@ -93,7 +104,7 @@ sap.ui.define([
 		 *
 		 * @extends sap.ui.core.Control
 		 * @author SAP SE
-		 * @version 1.93.3
+		 * @version 1.96.2
 		 * @public
 		 * @since 1.92.0
 		 * @alias sap.ui.webc.common.WebComponent
@@ -111,6 +122,8 @@ sap.ui.define([
 			constructor : function(sId, mSettings) {
 				Control.apply(this, arguments);
 
+				this.__onInvalidationBound = this.__onInvalidation.bind(this);
+
 				// After the DOM element is rendered for the first time, attach the invalidation callback (in __onAfterRenderingDelegate)
 				this.__delegates = {
 					onAfterRendering: this.__onAfterRenderingDelegate
@@ -235,11 +248,15 @@ sap.ui.define([
 		 */
 		WebComponent.prototype.__onAfterRenderingDelegate = function() {
 			var oDomRef = this.getDomRef();
-			oDomRef.onInvalidation = this.__onInvalidation.bind(this);
-			if (oDomRef._individualSlot) {
-				this.__slot = oDomRef._individualSlot; // If the component creates individual slots for children, f.e. columns-3 or default-1, update the __slot property, otherwise RenderManager will set the normal slot name, f.e. columns or ""
-			}
-			this.__updateObjectProperties(oDomRef);
+
+			window.customElements.whenDefined(oDomRef.localName).then(function() {
+				oDomRef.attachInvalidate(this.__onInvalidationBound);
+
+				if (oDomRef._individualSlot) {
+					this.__slot = oDomRef._individualSlot; // If the component creates individual slots for children, f.e. columns-3 or default-1, update the __slot property, otherwise RenderManager will set the normal slot name, f.e. columns or ""
+				}
+				this.__updateObjectProperties(oDomRef);
+			}.bind(this));
 		};
 
 		/**
@@ -251,10 +268,10 @@ sap.ui.define([
 			var oAttrProperties = this.getMetadata().getPropertiesByMapping("attribute");
 			for (var sPropName in oAttrProperties) {
 				var oPropData = oAttrProperties[sPropName];
+				var vPropValue = oPropData.get(this);
 
-				if (oPropData.type === "object") {
+				if (oPropData.type === "object" || typeof vPropValue === "object") {
 					var sWebComponentPropName = oPropData._sMapTo ? oPropData._sMapTo : sPropName;
-					var vPropValue = oPropData.get(this);
 					oDomRef[sWebComponentPropName] = vPropValue;
 				}
 			}
@@ -344,8 +361,12 @@ sap.ui.define([
 
 
 		WebComponent.prototype.destroy = function() {
+			var oDomRef = this.getDomRef();
 			this.__detachCustomEventsListeners();
-			this.detachBrowserEvent("_property-change", this.__onPropertyChange, this);
+			if (oDomRef && typeof oDomRef.detachInvalidate === "function") {
+				oDomRef.detachInvalidate(this.__onInvalidationBound);
+			}
+
 			return Control.prototype.destroy.call(this, arguments);
 		};
 

package/src/sap/ui/webc/common/WebComponentMetadata.js

@@ -22,7 +22,7 @@ sap.ui.define([
 		 *
 		 * @class
 		 * @author SAP SE
-		 * @version 1.93.3
+		 * @version 1.96.2
 		 * @since 1.92.0
 		 * @experimental Since 1.92.0 The API might change. It is not intended for productive usage yet!
 		 * @alias sap.ui.webc.common.WebComponentMetadata

package/src/sap/ui/webc/common/WebComponentRenderer.js

@@ -72,12 +72,12 @@ sap.ui.define([
 			var oAttrProperties = oWebComponent.getMetadata().getPropertiesByMapping("attribute");
 			for (var sPropName in oAttrProperties) {
 				var oPropData = oAttrProperties[sPropName];
-				if (oPropData.type === "object") {
-					continue; // Properties of type "object" are set during onAfterRendering
+				var vPropValue = oPropData.get(oWebComponent);
+				if (oPropData.type === "object" || typeof vPropValue === "object") {
+					continue; // Properties of type "object" and custom-type properties with object values are set during onAfterRendering
 				}
 
 				var sAttrName = oPropData._sMapTo ? oPropData._sMapTo : hyphenate(sPropName);
-				var vPropValue = oPropData.get(oWebComponent);
 				if (oPropData._fnMappingFormatter) {
 					vPropValue = oWebComponent[oPropData._fnMappingFormatter].call(oWebComponent, vPropValue);
 				}

package/src/sap/ui/webc/common/library.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	// delegate further initialization of this library to the Core
 	sap.ui.getCore().initLibrary({
 		name : "sap.ui.webc.common",
-		version: "1.93.3",
+		version: "1.96.2",
 		dependencies : ["sap.ui.core"],
 		noLibraryCSS: true,
 		designtime: "sap/ui/webc/common/designtime/library.designtime",
@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.webc
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 * @public
 	 * @since 1.92.0
 	 * @experimental Since 1.92.0
@@ -57,7 +57,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.webc.common
 	 * @author SAP SE
-	 * @version 1.93.3
+	 * @version 1.96.2
 	 * @public
 	 * @since 1.92.0
 	 * @experimental Since 1.92.0

package/src/sap/ui/webc/common/thirdparty/base/Device.js

@@ -62,6 +62,7 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const supportsTouch = () => touch;
 	const isIE = () => ie;
 	const isSafari = () => safari;
+	const isChrome = () => chrome;
 	const isTablet = () => {
 		detectTablet();
 		return (touch || isWindows8OrAbove()) && tablet;
@@ -74,6 +75,7 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 		return (!isTablet() && !isPhone()) || isWindows8OrAbove();
 	};
 
+	exports.isChrome = isChrome;
 	exports.isDesktop = isDesktop;
 	exports.isIE = isIE;
 	exports.isPhone = isPhone;

package/src/sap/ui/webc/common/thirdparty/base/EventProvider.js

@@ -2,40 +2,38 @@ sap.ui.define(function () { 'use strict';
 
 	class EventProvider {
 		constructor() {
-			this._eventRegistry = {};
+			this._eventRegistry = new Map();
 		}
 		attachEvent(eventName, fnFunction) {
 			const eventRegistry = this._eventRegistry;
-			let eventListeners = eventRegistry[eventName];
+			const eventListeners = eventRegistry.get(eventName);
 			if (!Array.isArray(eventListeners)) {
-				eventRegistry[eventName] = [];
-				eventListeners = eventRegistry[eventName];
+				eventRegistry.set(eventName, [fnFunction]);
+				return;
+			}
+			if (!eventListeners.includes(fnFunction)) {
+				eventListeners.push(fnFunction);
 			}
-			eventListeners.push({
-				"function": fnFunction,
-			});
 		}
 		detachEvent(eventName, fnFunction) {
 			const eventRegistry = this._eventRegistry;
-			let eventListeners = eventRegistry[eventName];
+			let eventListeners = eventRegistry.get(eventName);
 			if (!eventListeners) {
 				return;
 			}
-			eventListeners = eventListeners.filter(event => {
-				return event["function"] !== fnFunction;
-			});
+			eventListeners = eventListeners.filter(fn => fn !== fnFunction);
 			if (eventListeners.length === 0) {
-				delete eventRegistry[eventName];
+				eventRegistry.delete(eventName);
 			}
 		}
 		fireEvent(eventName, data) {
 			const eventRegistry = this._eventRegistry;
-			const eventListeners = eventRegistry[eventName];
+			const eventListeners = eventRegistry.get(eventName);
 			if (!eventListeners) {
 				return [];
 			}
-			return eventListeners.map(event => {
-				return event["function"].call(this, data);
+			return eventListeners.map(fn => {
+				return fn.call(this, data);
 			});
 		}
 		fireEventAsync(eventName, data) {
@@ -43,20 +41,14 @@ sap.ui.define(function () { 'use strict';
 		}
 		isHandlerAttached(eventName, fnFunction) {
 			const eventRegistry = this._eventRegistry;
-			const eventListeners = eventRegistry[eventName];
+			const eventListeners = eventRegistry.get(eventName);
 			if (!eventListeners) {
 				return false;
 			}
-			for (let i = 0; i < eventListeners.length; i++) {
-				const event = eventListeners[i];
-				if (event["function"] === fnFunction) {
-					return true;
-				}
-			}
-			return false;
+			return eventListeners.includes(fnFunction);
 		}
 		hasListeners(eventName) {
-			return !!this._eventRegistry[eventName];
+			return !!this._eventRegistry.get(eventName);
 		}
 	}
 

package/src/sap/ui/webc/common/thirdparty/base/FontFace.js

@@ -17,7 +17,7 @@ sap.ui.define(['./util/createStyleInHead', './FeaturesRegistry'], function (crea
 			url(${font72RegularWoff2}) format("woff2"),
 			url(${font72RegularWoff}) format("woff");
 	}
-
+	
 	@font-face {
 		font-family: "72full";
 		font-style: normal;
@@ -25,9 +25,9 @@ sap.ui.define(['./util/createStyleInHead', './FeaturesRegistry'], function (crea
 		src: local('72-full'),
 			url(${font72RegularFullWoff2}) format("woff2"),
 			url(${font72RegularFullWoff}) format("woff");
-
+		
 	}
-
+	
 	@font-face {
 		font-family: "72";
 		font-style: normal;
@@ -36,7 +36,7 @@ sap.ui.define(['./util/createStyleInHead', './FeaturesRegistry'], function (crea
 			url(${font72BoldWoff2}) format("woff2"),
 			url(${font72BoldWoff}) format("woff");
 	}
-
+	
 	@font-face {
 		font-family: "72full";
 		font-style: normal;

package/src/sap/ui/webc/common/thirdparty/base/Keys.js

@@ -118,6 +118,8 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const isDownCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, false);
 	const isUpShift = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, false, false, true);
 	const isDownShift = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, false, false, true);
+	const isLeftShift = event => (event.key ? (event.key === "ArrowLeft" || event.key === "Left") : event.keyCode === KeyCodes.ARROW_LEFT) && checkModifierKeys(event, false, false, true);
+	const isRightShift = event => (event.key ? (event.key === "ArrowRight" || event.key === "Right") : event.keyCode === KeyCodes.ARROW_RIGHT) && checkModifierKeys(event, false, false, true);
 	const isUpShiftCtrl = event => (event.key ? (event.key === "ArrowUp" || event.key === "Up") : event.keyCode === KeyCodes.ARROW_UP) && checkModifierKeys(event, true, false, true);
 	const isDownShiftCtrl = event => (event.key ? (event.key === "ArrowDown" || event.key === "Down") : event.keyCode === KeyCodes.ARROW_DOWN) && checkModifierKeys(event, true, false, true);
 	const isHome = event => (event.key ? event.key === "Home" : event.keyCode === KeyCodes.HOME) && !hasModifierKeys(event);
@@ -132,7 +134,9 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	const isPageUp = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && !hasModifierKeys(event);
 	const isPageDown = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && !hasModifierKeys(event);
 	const isPageUpShift = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, false, true);
+	const isPageUpAlt = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, false, true, false);
 	const isPageDownShift = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, false, true);
+	const isPageDownAlt = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, false, true, false);
 	const isPageUpShiftCtrl = event => (event.key ? event.key === "PageUp" : event.keyCode === KeyCodes.PAGE_UP) && checkModifierKeys(event, true, false, true);
 	const isPageDownShiftCtrl = event => (event.key ? event.key === "PageDown" : event.keyCode === KeyCodes.PAGE_DOWN) && checkModifierKeys(event, true, false, true);
 	const isPlus = event => (event.key ? event.key === "+" : event.keyCode === KeyCodes.PLUS) || (event.keyCode === KeyCodes.NUMPAD_PLUS && !hasModifierKeys(event));
@@ -147,6 +151,7 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 		return event.key === "F4" && !hasModifierKeys(event);
 	};
 	const isF4Shift = event => (event.key ? event.key === "F4" : event.keyCode === KeyCodes.F4) && checkModifierKeys(event, false, false, true);
+	const isF7 = event => (event.key ? event.key === "F7" : event.keyCode === KeyCodes.F7) && !hasModifierKeys(event);
 	const isShowByArrows = event => {
 		return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event,  false,  true,  false);
 	};
@@ -167,20 +172,25 @@ sap.ui.define(['exports'], function (exports) { 'use strict';
 	exports.isEscape = isEscape;
 	exports.isF4 = isF4;
 	exports.isF4Shift = isF4Shift;
+	exports.isF7 = isF7;
 	exports.isHome = isHome;
 	exports.isHomeCtrl = isHomeCtrl;
 	exports.isLeft = isLeft;
 	exports.isLeftCtrl = isLeftCtrl;
+	exports.isLeftShift = isLeftShift;
 	exports.isMinus = isMinus;
 	exports.isPageDown = isPageDown;
+	exports.isPageDownAlt = isPageDownAlt;
 	exports.isPageDownShift = isPageDownShift;
 	exports.isPageDownShiftCtrl = isPageDownShiftCtrl;
 	exports.isPageUp = isPageUp;
+	exports.isPageUpAlt = isPageUpAlt;
 	exports.isPageUpShift = isPageUpShift;
 	exports.isPageUpShiftCtrl = isPageUpShiftCtrl;
 	exports.isPlus = isPlus;
 	exports.isRight = isRight;
 	exports.isRightCtrl = isRightCtrl;
+	exports.isRightShift = isRightShift;
 	exports.isShow = isShow;
 	exports.isSpace = isSpace;
 	exports.isSpaceShift = isSpaceShift;

package/src/sap/ui/webc/common/thirdparty/base/StaticAreaItem.js

@@ -1,4 +1,4 @@
-sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffectiveContentDensity', './CustomElementsScope'], function (StaticArea, updateShadowRoot, Render, getEffectiveContentDensity, CustomElementsScope) { 'use strict';
+sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffectiveContentDensity', './CustomElementsScope', './locale/getEffectiveDir'], function (StaticArea, updateShadowRoot, Render, getEffectiveContentDensity, CustomElementsScope, getEffectiveDir) { 'use strict';
 
 	class StaticAreaItem extends HTMLElement {
 		constructor() {
@@ -13,6 +13,7 @@ sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffe
 		update() {
 			if (this._rendered) {
 				this._updateContentDensity();
+				this._updateDirection();
 				updateShadowRoot(this.ownerElement, true);
 			}
 		}
@@ -25,6 +26,14 @@ sap.ui.define(['./StaticArea', './updateShadowRoot', './Render', './util/getEffe
 				this.classList.remove("ui5-content-density-compact");
 			}
 		}
+		_updateDirection() {
+			const dir = getEffectiveDir(this.ownerElement);
+			if (dir) {
+				this.setAttribute("dir", dir);
+			} else {
+				this.removeAttribute("dir");
+			}
+		}
 		async getDomRef() {
 			this._updateContentDensity();
 			if (!this._rendered) {

package/src/sap/ui/webc/common/thirdparty/base/SystemCSSVars.js

@@ -4,17 +4,17 @@ sap.ui.define(['./util/createStyleInHead'], function (createStyleInHead) { 'use
 	:root {
 		--_ui5_content_density:cozy;
 	}
-
+	
 	[data-ui5-compact-size],
 	.ui5-content-density-compact,
 	.sapUiSizeCompact {
 		--_ui5_content_density:compact;
 	}
-
+	
 	[dir="rtl"] {
 		--_ui5_dir:rtl;
 	}
-
+	
 	[dir="ltr"] {
 		--_ui5_dir:ltr;
 	}