Merge remote-tracking branch 'origin/main' into fix-wdio-tests

.gitignore

@@ -7,6 +7,10 @@ dist
 **/test/test-elements/generated
 .dev-server-port
 
+# Code coverage
+coverage
+.nyc_output
+
 # scoping feature generated entry points for vite consumption
 packages/compat/test/pages/scoped
 packages/main/test/pages/scoped

CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+
+### Bug Fixes
+
+* **popup:** applying focus twice ([#10556](https://github.com/SAP/ui5-webcomponents/issues/10556)) ([27721a9](https://github.com/SAP/ui5-webcomponents/commit/27721a9518ac03efc0d2fb764442334bb07c6daf))
+* **ui5-card:** fix accessibiity role position ([#10437](https://github.com/SAP/ui5-webcomponents/issues/10437)) ([c9d7f3f](https://github.com/SAP/ui5-webcomponents/commit/c9d7f3ffec9ce02d465de03a5a946144ba31f0d5))
+* **ui5-dynamic-page:** prevent layout shift with container queries ([#10578](https://github.com/SAP/ui5-webcomponents/issues/10578)) ([c2c3608](https://github.com/SAP/ui5-webcomponents/commit/c2c36080b956312e04fa8231d86e1517a58bd811)), closes [#10564](https://github.com/SAP/ui5-webcomponents/issues/10564)
+* **ui5-dynamic-page:** remove redundant padding ([#10448](https://github.com/SAP/ui5-webcomponents/issues/10448)) ([491538b](https://github.com/SAP/ui5-webcomponents/commit/491538befe698e2c8957549be9d0eccf9014bd7e)), closes [#10413](https://github.com/SAP/ui5-webcomponents/issues/10413)
+* **ui5-page:** fix floating footer layout ([#10496](https://github.com/SAP/ui5-webcomponents/issues/10496)) ([19f7857](https://github.com/SAP/ui5-webcomponents/commit/19f7857ffed9672d3560e6f5a365436119061846)), closes [#10358](https://github.com/SAP/ui5-webcomponents/issues/10358)
+* **ui5-side-navigation:** corrects playground sample  ([#10625](https://github.com/SAP/ui5-webcomponents/issues/10625)) ([5a668b4](https://github.com/SAP/ui5-webcomponents/commit/5a668b4dd242f9867584eee4abab97f60b6f9e9d)), closes [#10592](https://github.com/SAP/ui5-webcomponents/issues/10592)
+* **ui5-tab:** semantic icon is properly aligned in high contrast themes ([#10467](https://github.com/SAP/ui5-webcomponents/issues/10467)) ([e263974](https://github.com/SAP/ui5-webcomponents/commit/e2639745f6aa1ae669dce7f3205a531a672ed711)), closes [#10455](https://github.com/SAP/ui5-webcomponents/issues/10455)
+* **ui5-time-picker:** display value state message in popover headers ([#10582](https://github.com/SAP/ui5-webcomponents/issues/10582)) ([df57f06](https://github.com/SAP/ui5-webcomponents/commit/df57f06a5e10f44ac784b33bc79b1e705f106476))
+* **ui5-toolbar:** correct event handlers attachment ([#10546](https://github.com/SAP/ui5-webcomponents/issues/10546)) ([f6d6c67](https://github.com/SAP/ui5-webcomponents/commit/f6d6c6703a02785fc790ef0794c972aeee115c60))
+* **ui5-tree:** improve keydown handling in content slot ([#10520](https://github.com/SAP/ui5-webcomponents/issues/10520)) ([1e01523](https://github.com/SAP/ui5-webcomponents/commit/1e01523569701da558d0ee3470c6936358dea457)), closes [#10474](https://github.com/SAP/ui5-webcomponents/issues/10474)
+* **ui5-wizard:** replace resize observer with container query ([#7996](https://github.com/SAP/ui5-webcomponents/issues/7996)) ([475c293](https://github.com/SAP/ui5-webcomponents/commit/475c293fe5797aee9dd8a160d69c7baa118a6f07)), closes [#7666](https://github.com/SAP/ui5-webcomponents/issues/7666)
+
+
+### Features
+
+* **ui5-color-picker:** add HSL color selection ([#10157](https://github.com/SAP/ui5-webcomponents/issues/10157)) ([8d0e5a4](https://github.com/SAP/ui5-webcomponents/commit/8d0e5a492c9705499571ef223524f051454e766c)), closes [#10275](https://github.com/SAP/ui5-webcomponents/issues/10275)
+* **ui5-flexible-column-layout:** add arrow icon functionality ([#10362](https://github.com/SAP/ui5-webcomponents/issues/10362)) ([61b94ae](https://github.com/SAP/ui5-webcomponents/commit/61b94aece6b41fa438df9d0e9b5dc60f28bae55d))
+* **ui5-shellbar:** introduce content slot ([#10595](https://github.com/SAP/ui5-webcomponents/issues/10595)) ([c8b8696](https://github.com/SAP/ui5-webcomponents/commit/c8b86964a8dfe906176bf106f80d278d910f3f8f))
+* **ui5-timeline-item:** introduce `state` property ([#10277](https://github.com/SAP/ui5-webcomponents/issues/10277)) ([b378604](https://github.com/SAP/ui5-webcomponents/commit/b378604e008efbf71054e72583ff8fd9fd227275))
+* update business-suite/icons to v2.087 & 1.087 ([#10605](https://github.com/SAP/ui5-webcomponents/issues/10605)) ([6b7dbf0](https://github.com/SAP/ui5-webcomponents/commit/6b7dbf09dd253de3e399d257441a386dc000c5ff))
+* update tnt/icons to v3.5 & 2.11 ([#10600](https://github.com/SAP/ui5-webcomponents/issues/10600)) ([5d4e3ba](https://github.com/SAP/ui5-webcomponents/commit/5d4e3ba1a74b2f4bea2321371656cbdbebc27975))
+
+
+
+
+
 # [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
 
 

docs/2-advanced/05-using-features.md

@@ -20,30 +20,22 @@ You can import the feature file from the respective NPM package:
 
 `import "@ui5/<PACKAGE-NAME>/dist/features/<FEATURE-NAME>.js`
 
+As of `2.7.0` some component features are automatically loaded on demand, but can still be pre-loaded to skip the dynamic import, if that's what you prefer. Refer to the table below for details:
+
 ## Component Features
 
 Currently, only a few components offer additional features:
 
 | Package        | Affected Components                                | Feature Import                                                       | Description                                                                                             |
 |----------------|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `main`         | `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
-| `main`         | `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Adds support for input suggestions while typing                                                                  |
+| `main`         | `ui5-color-palette`                               | dynamically loaded if `showMoreColors` is set to `true` (to pre-load: `import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"` )        | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
+| `main`         | `ui5-input`                                       | dynamically loaded if `showSuggestions` is set to `true`(to pre-load: `import "@ui5/webcomponents/dist/features/InputSuggestions.js"` )              | Adds support for input suggestions while typing                                                                  |
 | `main`         | Multiple (e.g., `ui5-input`, `ui5-date-picker`)   | `@ui5/webcomponents/dist/features/InputElementsFormSupport.js`       | Adds support for the use of input components within forms                                                          |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js` | Adds support for the Buddhist calendars                                                                   |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Islamic.js`  | Adds support for the Islamic calendars                                                                    |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Japanese.js` | Adds support for the Japanese calendars                                                                   |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Persian.js`  | Adds support for the Persian calendars                                                                    |
 
-**Note:** Features must be imported before all component modules to ensure the feature is enabled before to the components' definition. For example:
-
-```js
-import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;";
-
-import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Link.js";
-import "@ui5/webcomponents/dist/Input.js";
-```
-
 ## Framework Features
 
 | Package        | Affects                                           | Feature Import                                                       | Description                                                                                             |

docs/4-development/10-testing.md

@@ -4,7 +4,7 @@
 The test framework of choice for UI5 Web Components is [WebdriverIO](https://webdriver.io/) or WDIO for short.
 It has a straightforward API - [https://webdriver.io/docs/api.html](https://webdriver.io/docs/api.html), and has excellent support for Web Components.
 
-The browser of choice for test execution is [Google Chrome](https://www.google.com/chrome/), respectively the WebDriver used is [ChromeDriver](https://chromedriver.chromium.org/).  
+The browser of choice for test execution is [Google Chrome](https://www.google.com/chrome/), respectively the WebDriver used is [ChromeDriver](https://chromedriver.chromium.org/).
 
 ### Prerequisites
 
@@ -16,24 +16,24 @@ You can install it with `npm`:
  - `npm i --save-dev chromedriver`
 
 or with `yarn`:
- - `yarn add -D chromedriver` 
+ - `yarn add -D chromedriver`
 
 **Note:** Google Chrome and ChromeDriver need to be the same version to work together. Whenever you update Google Chrome on
 your system (or it updates automatically, if allowed), you are expected to also update ChromeDriver to the respective version.
 
 ### Running the tests
 
-#### 1. Test configuration 
+#### 1. Test configuration
 
 The configuration for WDIO can be found in the `config/` directory under `wdio.conf.js`.
 
-As explained [here](./01-package.md) in the section about the `config/` directory, you can 
+As explained [here](./01-package.md) in the section about the `config/` directory, you can
 customize, or even completely replace the default configuration.
 
 However, before doing so, please note the following two benefits of working with the default configuration, provided by UI5 Web Components:
- - Hooks, synchronizing the execution of all relevant WDIO commands (e.g. `click`, `url`, `$`, `$$`) with the rendering of the framework to 
+ - Hooks, synchronizing the execution of all relevant WDIO commands (e.g. `click`, `url`, `$`, `$$`) with the rendering of the framework to
  ensure consistency when reading or changing the state of the components.
- - Additional API methods: `setProperty`, `setAttribute`, `removeAttribute`, `hasClass`. 
+ - Additional API methods: `setProperty`, `setAttribute`, `removeAttribute`, `hasClass`.
 
 So our recommendation would be to modify it, if necessary, but not completely replace it.
 
@@ -74,7 +74,7 @@ describe("ui5-demo rendering", async () => {
 		assert.ok(innerContent, "content rendered");
 	});
 });
-``` 
+```
 
 Key points:
    - Load the test page with the `browser.url` command. You can do this once for each test suite or for each individual test.
@@ -87,7 +87,7 @@ Key points:
 
 For WDIO capabilities, see:
    - Official API: [https://webdriver.io/docs/api.html](https://webdriver.io/docs/api.html).
-   - Additional commands provided in our standard WDIO configuration: `setProperty`, `setAttribute`, `removeAttribute`, `hasClass`.    
+   - Additional commands provided in our standard WDIO configuration: `setProperty`, `setAttribute`, `removeAttribute`, `hasClass`.
 
 **Note:** The standard WDIO configuration we provide automatically synchronizes all test commands' execution with the framework rendering cycle.
 Therefore, in the example above, the `shadow$` command will internally wait for all rendering to be over before being executed. The
@@ -100,19 +100,19 @@ Debugging with WDIO is really simple. Just follow these 3 steps:
 1. Change the WDIO configuration file `config/wdio.conf.js` to disable `headless` mode for Google Chrome as follows:
 
 	From:
-	
+
 	```js
 	module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js");
 	```
-	
+
 	to:
 
 	```js
     const result = require("@ui5/webcomponents-tools/components-package/wdio.js");
     result.config.capabilities[0]["goog:chromeOptions"].args = ['--disable-gpu']; // From: ['--disable-gpu', '--headless']
     module.exports = result;
     ```
-    
+
     If you happen to debug often, it's recommended to keep the file in this format and just comment out the middle line when you're done debugging.
 
 2. Set a breakpoint with `browser.debug` somewhere in your test:
@@ -124,29 +124,29 @@ Debugging with WDIO is really simple. Just follow these 3 steps:
         assert.ok(innerContent, "content rendered");
     });
 	```
-	
+
 	For more on `debug`, see [https://webdriver.io/docs/api/browser/debug.html](https://webdriver.io/docs/api/browser/debug.html).
 
 3. Run the single test spec and wait for the browser to open and pause on your breakpoint:
 
  - Run the dev server, if you haven't already:
-	
-	`yarn start` 
-	
-	or 
-	
+
+	`yarn start`
+
+	or
+
 	`npm run start`.
 
  - Run the single test spec:
-	
-	`yarn test test/specs/Demo.spec.js` 
-	
-	or 
-	
+
+	`yarn test test/specs/Demo.spec.js`
+
+	or
+
 	`npm run test test/specs/Demo.spec.js`.
-	  
-Google Chrome will then open in a new window, controlled by WDIO via the ChromeDriver, and your test will pause on your 
-breakpoint of choice. Proceed to debug normally.	 
+
+Google Chrome will then open in a new window, controlled by WDIO via the ChromeDriver, and your test will pause on your
+breakpoint of choice. Proceed to debug normally.
 
 ### Best practices for writing tests
 
@@ -174,7 +174,7 @@ Use:
 Preferred:
  ```js
 assert.ok(await browser.$(<SELECTOR>).isExisting())
-``` 
+```
 
 instead of:
 
@@ -433,3 +433,16 @@ describe("My Component Tests", () => {
 });
 ```
 
+
+### Code coverage
+
+Cypress tests automatically run with instrumentation switched on. To see the code coverage report, run the following commands:
+```sh
+# build the project
+yarn build
+# run the tests for a pacakge
+cd packages/main
+yarn test:cypress
+# start a static server in the `coverage` folder and inspect the results in the browser
+http-server coverage
+```

lerna.json

@@ -14,7 +14,7 @@
     "packages/create-package",
     "packages/compat"
   ],
-  "version": "2.7.0-rc.0",
+  "version": "2.7.0-rc.1",
   "command": {
     "publish": {
       "allowBranch": "*",

package.json

@@ -47,7 +47,7 @@
     "ci:deploy:nightly": "DEPLOY_NIGHTLY=true yarn ci:testbuild && yarn generateAPI && yarn workspace @ui5/webcomponents-website ci:build:nightly",
 
     "ci:test:base": "yarn workspace @ui5/webcomponents-base test",
-    "ci:test:main:suite-1": "yarn workspace @ui5/webcomponents test:ssr && yarn workspace @ui5/webcomponents test:suite-1",
+    "ci:test:main:suite-1": "yarn workspace @ui5/webcomponents test:ssr && yarn workspace @ui5/webcomponents test:vitest && yarn workspace @ui5/webcomponents test:suite-1",
     "ci:test:main:suite-2": "yarn workspace @ui5/webcomponents test:cypress && yarn workspace @ui5/webcomponents test:suite-2",
     "ci:test:fiori": "yarn workspace @ui5/webcomponents-fiori test:ssr && yarn workspace @ui5/webcomponents-fiori test:cypress && yarn workspace @ui5/webcomponents-fiori test",
     "ci:test:compat": "yarn workspace @ui5/webcomponents-compat test:ssr && yarn workspace @ui5/webcomponents-compat test",

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.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
 # [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
 
 

packages/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "2.7.0-rc.0",
+  "version": "2.7.0-rc.1",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -45,13 +45,13 @@
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.7.0-rc.0",
-    "@ui5/webcomponents-base": "2.7.0-rc.0",
-    "@ui5/webcomponents-icons": "2.7.0-rc.0",
-    "@ui5/webcomponents-theming": "2.7.0-rc.0"
+    "@ui5/webcomponents": "2.7.0-rc.1",
+    "@ui5/webcomponents-base": "2.7.0-rc.1",
+    "@ui5/webcomponents-icons": "2.7.0-rc.1",
+    "@ui5/webcomponents-theming": "2.7.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.7.0-rc.0",
+    "@ui5/webcomponents-tools": "2.7.0-rc.1",
     "chromedriver": "^131.0.0"
   }
 }

packages/ai/src/PromptInput.ts

@@ -183,8 +183,6 @@ class PromptInput extends UI5Element {
 	/**
 	 * Defines whether the component should show suggestions, if such are present.
 	 *
-	 * **Note:** You need to import the `InputSuggestions` module
-	 * from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality.
 	 * @default false
 	 * @public
 	 */
@@ -199,11 +197,6 @@ class PromptInput extends UI5Element {
 	 *
 	 * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
 	 *
-	 * **Note:** Importing the Input Suggestions Support feature:
-	 *
-	 * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";`
-	 *
-	 * automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.
 	 * @public
 	 */
 		@slot({ type: HTMLElement, "default": true })

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.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+
+### Features
+
+* **ui5-color-picker:** add HSL color selection ([#10157](https://github.com/SAP/ui5-webcomponents/issues/10157)) ([8d0e5a4](https://github.com/SAP/ui5-webcomponents/commit/8d0e5a492c9705499571ef223524f051454e766c)), closes [#10275](https://github.com/SAP/ui5-webcomponents/issues/10275)
+
+
+
+
+
 # [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
 
 

packages/base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "2.7.0-rc.0",
+  "version": "2.7.0-rc.1",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@openui5/sap.ui.core": "1.120.17",
-    "@ui5/webcomponents-tools": "2.7.0-rc.0",
+    "@ui5/webcomponents-tools": "2.7.0-rc.1",
     "chromedriver": "^131.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",