Merge branch 'main' into itb-transparency

SAP · Oct 24, 2024 · 2b7eee8 · 2b7eee8
2 parents b92d30c + f3fd7c0
commit 2b7eee8
Show file tree

Hide file tree

Showing 79 changed files with 510 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* boot sequence ([#10042](https://github.com/SAP/ui5-webcomponents/issues/10042)) ([106373d](https://github.com/SAP/ui5-webcomponents/commit/106373d4585dd2c5fa458ffccd513596289a2f79))
+* **ui5-list:** growing button loading layout fixed ([#10043](https://github.com/SAP/ui5-webcomponents/issues/10043)) ([efd7e6a](https://github.com/SAP/ui5-webcomponents/commit/efd7e6ad4f27befb5fb1316e8163456c6b77726f)), closes [#9977](https://github.com/SAP/ui5-webcomponents/issues/9977) [#10047](https://github.com/SAP/ui5-webcomponents/issues/10047)
+* **ui5-notification-list:** fix header bar visibility ([#10010](https://github.com/SAP/ui5-webcomponents/issues/10010)) ([95db5c6](https://github.com/SAP/ui5-webcomponents/commit/95db5c63a3c21ba2d948f5070f3bd1ba85e584ef)), closes [#9995](https://github.com/SAP/ui5-webcomponents/issues/9995)
+* **ui5-slider, ui5-range-slider:** adjust aria-attributes ([#10039](https://github.com/SAP/ui5-webcomponents/issues/10039)) ([ed3abfc](https://github.com/SAP/ui5-webcomponents/commit/ed3abfcf2eec5469bd18ac5becf29e34e427a2f1)), closes [#9547](https://github.com/SAP/ui5-webcomponents/issues/9547)
+* **ui5-split-button:** adjust focus outline on keydown ([#10001](https://github.com/SAP/ui5-webcomponents/issues/10001)) ([898db40](https://github.com/SAP/ui5-webcomponents/commit/898db4031d5710b890a0a9d76c34216cf35a969b))
+* **ui5-table:** wrong horiz. alignm. behavior and wrong texts ([#10040](https://github.com/SAP/ui5-webcomponents/issues/10040)) ([f3da992](https://github.com/SAP/ui5-webcomponents/commit/f3da99295b4255e8f22b58f4ed72561fa0bbe215)), closes [#9639](https://github.com/SAP/ui5-webcomponents/issues/9639) [#10017](https://github.com/SAP/ui5-webcomponents/issues/10017)
+
+
+### Features
+
+* **ui5-barcode-scanner-dialog:** added support for custom header and footer slots ([#10066](https://github.com/SAP/ui5-webcomponents/issues/10066)) ([4d06b2e](https://github.com/SAP/ui5-webcomponents/commit/4d06b2e94024e1cf6e121650453362ca79fc8836)), closes [#8919](https://github.com/SAP/ui5-webcomponents/issues/8919)
+* **ui5-filter-item, ui5-sort-item,..:** add selected `filterItems` to `ui5-confirm` event details ([#9838](https://github.com/SAP/ui5-webcomponents/issues/9838)) ([56ad311](https://github.com/SAP/ui5-webcomponents/commit/56ad3115affe17f453a30ac0880ac879dbbd763b))
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/docs/2-advanced/09-accessibility.md b/docs/2-advanced/09-accessibility.md
@@ -63,6 +63,74 @@ Theming is an important aspect when it comes to a UI5 Web Components application
 
 For more information regarding the available themes and how to use them, see the [Configuration](../2-advanced/01-configuration.md) section.
 
+### Theme Selection According to OS Settings
+
+The UI5 Web Components framework does not offer a built-in mechanism for selecting themes based on the users' OS settings. However, we recommend using standard APIs to implement OS-based theme selection in applications built with UI5 Web Components.
+
+In the next sections, we will demonstrate one of the possible approaches to detect and apply a theme that aligns with the user's OS preferences. However, you are free to explore and develop your own detection and matching algorithm.
+
+#### Light | Dark
+
+To synchronize theme switching with the OS's light or dark mode, you can use the [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS Media feature, as shown in the next example:
+
+Check `prefers-color-scheme` for `dark` or `light` and apply one of the availabe light/dark themes (Horizon Morning, Horizon Evening, ect.)
+
+```ts
+import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+
+const darkColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+setTheme(darkColorScheme ? "sap_horizon_dark" : "sap_horizon");
+```
+
+#### Contrast 
+
+To switch to a high contrast theme when the OS does, you can use [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and  [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) (detecting MacOS contrast preferences and Windows high contrast themes) CSS features, as shown in the next example:
+
+Check `prefers-color-scheme` for `dark` or `light` and `prefers-contrast` for `more`, and apply one of the available high contrast themes (Horizon High Contrast White or Horizon High Contrast Black)
+
+```ts
+import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+
+const darkColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+const prefersContrastMore = window.matchMedia("(prefers-contrast: more)").matches;
+const prefersContrastCustom = window.matchMedia("(prefers-contrast: custom)").matches;
+const prefersContrast = prefersContrastMore || prefersContrastCustom;
+
+if (prefersContrast) {
+	setTheme(darkColorScheme ? "sap_horizon_hcb" : "sap_horizon_hcw");
+}
+```
+
+**Note:** In addition to detecting contrast mode, you need to check for light and dark modes via `prefers-color-scheme` to pick between the High Contrast Black and High Contrast White themes.
+
+The examples above will work for initial loading. However, to react on dynamic changes of the user preferences, you need to attach for the media query `change` event, fired when the status of media query support changes.
+
+Here is the full solution, listening for changes of the OS settings and considering light, dark and contrast preferences:
+
+```ts
+import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+
+const darkColorScheme = window.matchMedia("(prefers-color-scheme: dark)");
+const prefersContrastMore = window.matchMedia("(prefers-contrast: more)");
+const prefersContrastCustom = window.matchMedia("(prefers-contrast: custom)");
+
+const applyOSThemePreferences = () => {
+	if (prefersContrastMore.matches || prefersContrastCustom.matches) {
+		setTheme(darkColorScheme.matches ? "sap_horizon_hcb" : "sap_horizon_hcw");
+	} else {
+		setTheme(darkColorScheme.matches ? "sap_horizon_dark" : "sap_horizon");
+	}
+}
+
+darkColorScheme.onchange = applyOSThemePreferences;
+prefersContrastMore.onchange = applyOSThemePreferences;
+prefersContrastCustom.onchange = applyOSThemePreferences;
+
+applyOSThemePreferences();
+```
+
+Although you've learned how to detect OS settings and apply the corresponding theme, we recommend allowing users to decide whether the theme should always match the OS setting OS settings by providing application settings and not forcing the OS settings by default.
 
 ## Accessibility APIs
 

diff --git a/lerna.json b/lerna.json
@@ -14,7 +14,7 @@
     "packages/create-package",
     "packages/compat"
   ],
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "command": {
     "publish": {
       "allowBranch": "*",

diff --git a/packages/ai/CHANGELOG.md b/packages/ai/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/ai/package.json b/packages/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -45,13 +45,13 @@
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.4.0-rc.1",
-    "@ui5/webcomponents-base": "2.4.0-rc.1",
-    "@ui5/webcomponents-icons": "2.4.0-rc.1",
-    "@ui5/webcomponents-theming": "2.4.0-rc.1"
+    "@ui5/webcomponents": "2.4.0-rc.2",
+    "@ui5/webcomponents-base": "2.4.0-rc.2",
+    "@ui5/webcomponents-icons": "2.4.0-rc.2",
+    "@ui5/webcomponents-theming": "2.4.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-tools": "2.4.0-rc.2",
     "chromedriver": "^129.0.0"
   }
 }
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* boot sequence ([#10042](https://github.com/SAP/ui5-webcomponents/issues/10042)) ([106373d](https://github.com/SAP/ui5-webcomponents/commit/106373d4585dd2c5fa458ffccd513596289a2f79))
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/base/package.json b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@openui5/sap.ui.core": "1.120.17",
-    "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-tools": "2.4.0-rc.2",
     "chromedriver": "^129.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",

diff --git a/packages/compat/CHANGELOG.md b/packages/compat/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-compat
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/compat/package.json b/packages/compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-compat",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: webcomponents.compat",
   "ui5": {
     "webComponentsPackage": true
@@ -45,13 +45,13 @@
     "directory": "packages/compat"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.4.0-rc.1",
-    "@ui5/webcomponents-base": "2.4.0-rc.1",
-    "@ui5/webcomponents-icons": "2.4.0-rc.1",
-    "@ui5/webcomponents-theming": "2.4.0-rc.1"
+    "@ui5/webcomponents": "2.4.0-rc.2",
+    "@ui5/webcomponents-base": "2.4.0-rc.2",
+    "@ui5/webcomponents-icons": "2.4.0-rc.2",
+    "@ui5/webcomponents-theming": "2.4.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-tools": "2.4.0-rc.2",
     "chromedriver": "^129.0.0"
   }
 }
diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/create-package/package.json b/packages/create-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md
@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* **ui5-notification-list:** fix header bar visibility ([#10010](https://github.com/SAP/ui5-webcomponents/issues/10010)) ([95db5c6](https://github.com/SAP/ui5-webcomponents/commit/95db5c63a3c21ba2d948f5070f3bd1ba85e584ef)), closes [#9995](https://github.com/SAP/ui5-webcomponents/issues/9995)
+
+
+### Features
+
+* **ui5-barcode-scanner-dialog:** added support for custom header and footer slots ([#10066](https://github.com/SAP/ui5-webcomponents/issues/10066)) ([4d06b2e](https://github.com/SAP/ui5-webcomponents/commit/4d06b2e94024e1cf6e121650453362ca79fc8836)), closes [#8919](https://github.com/SAP/ui5-webcomponents/issues/8919)
+* **ui5-filter-item, ui5-sort-item,..:** add selected `filterItems` to `ui5-confirm` event details ([#9838](https://github.com/SAP/ui5-webcomponents/issues/9838)) ([56ad311](https://github.com/SAP/ui5-webcomponents/commit/56ad3115affe17f453a30ac0880ac879dbbd763b))
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/fiori/package.json b/packages/fiori/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -53,14 +53,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.4.0-rc.1",
-    "@ui5/webcomponents-base": "2.4.0-rc.1",
-    "@ui5/webcomponents-icons": "2.4.0-rc.1",
-    "@ui5/webcomponents-theming": "2.4.0-rc.1",
+    "@ui5/webcomponents": "2.4.0-rc.2",
+    "@ui5/webcomponents-base": "2.4.0-rc.2",
+    "@ui5/webcomponents-icons": "2.4.0-rc.2",
+    "@ui5/webcomponents-theming": "2.4.0-rc.2",
     "@zxing/library": "^0.17.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-tools": "2.4.0-rc.2",
     "chromedriver": "^129.0.0",
     "lit": "^2.0.0"
   }

diff --git a/packages/fiori/src/themes/base/DynamicPage-parameters.css b/packages/fiori/src/themes/base/DynamicPage-parameters.css
@@ -7,7 +7,7 @@
     --_ui5_dynamic_page_title_padding_XL: 0.5rem 3rem;
     --_ui5_dynamic_page_header_padding_S: 0.5rem 1rem 0.125rem;/* 1px padding-bottom added to ensue box-shadow is not overlapped */
     --_ui5_dynamic_page_header_padding_M: 1rem 2rem;
-    --_ui5_dynamic_page_header_padding_L: 1rem 3rem;
+    --_ui5_dynamic_page_header_padding_L: 1rem 2rem;
     --_ui5_dynamic_page_header_padding_XL: 1rem 3rem;
     --_ui5_dynamic_page_content_padding_S: 2rem 1rem 0;
     --_ui5_dynamic_page_content_padding_M: 2rem 2rem 0;

diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-business-suite",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "directory": "packages/icons-business-suite"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.4.0-rc.1"
+    "@ui5/webcomponents-base": "2.4.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.1"
+    "@ui5/webcomponents-tools": "2.4.0-rc.2"
   }
 }
diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.1...v2.4.0-rc.2) (2024-10-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
 # [2.4.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2024-10-17)
 
 

diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-tnt",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.2",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "directory": "packages/icons-tnt"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.4.0-rc.1"
+    "@ui5/webcomponents-base": "2.4.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.1"
+    "@ui5/webcomponents-tools": "2.4.0-rc.2"
   }
 }