Merge branch 'main' into calendar_tooltips

.github/workflows/ci-test-website.yaml

@@ -13,7 +13,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/ci-test.yaml

@@ -16,7 +16,7 @@ jobs:
 
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install Dependencies

.github/workflows/deploy-website-auto.yaml

@@ -16,7 +16,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/deploy-website-manually.yaml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/deploy-website-on-release.yaml

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install and Build

.github/workflows/issues-handling.yaml

@@ -16,7 +16,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/lint.yaml

@@ -13,7 +13,7 @@ jobs:
 
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install Dependencies

.github/workflows/merge-release-changelog.yaml

@@ -16,7 +16,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-downport.yaml

@@ -22,7 +22,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-experimental.yaml

@@ -10,7 +10,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-rc-auto.yaml

@@ -18,7 +18,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-rc.yaml

@@ -13,7 +13,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.github/workflows/release-stable.yaml

@@ -27,7 +27,7 @@ jobs:
         fetch-depth: 0
     - uses: actions/[email protected]
       with:
-        node-version: 20
+        node-version: 22
         cache: 'yarn'
 
     - name: Install

.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

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/02-component.md

@@ -58,39 +58,39 @@ class MyDemoComponent extends UI5Element {
 **Note:** As per the HTML specification, the tag name must contain a dash ('-').
 
 ### renderer
-This option specifies the rendering engine for the component. UI5 Web Components are agnostic of the DOM rendering engine used. However, all standard UI5 Web Components (`@ui5/webcomponents`, `@ui5/webcomponents-fiori`, etc.) use [lit-html](https://github.com/Polymer/lit-html) as the rendering technology of choice.
+This option specifies the rendering engine for the component. UI5 Web Components are agnostic of the DOM rendering engine used. However, all standard UI5 Web Components (`@ui5/webcomponents`, `@ui5/webcomponents-fiori`, etc.) use [preact](https://github.com/preactjs/preact) as the rendering technology of choice.
 
 ```ts
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
 @customElement({
-    renderer: litRender
+    renderer: jsxRenderer
 })
 class MyDemoComponent extends UI5Element {
     // class implementation
 }
 ```
 
 ### template
-This option accepts a template in a format that your defined renderer will understand.
+This option accepts a template in a format that your defined renderer will understand. Standard UI5 Web Components use JSX templates.
 
 ```ts
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import MyDemoComponentTemplate from "./generated/templates/MyDemoComponentTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import MyDemoComponentTemplate from "./MyDemoComponentTemplate.js";
 
 @customElement({
+    renderer: jsxRenderer,
     template: MyDemoComponentTemplate
 })
 class MyDemoComponent extends UI5Element {
     // class implementation
 }
 ```
 
-**Note:** Standard UI5 Web Components use Handlebars templates that are automatically converted to `lit-html` syntax by the build script. If you have a `MyDemoComponentTemplate.hbs`, the build script will create a `generated/templates/DemoTemplate.lit.ts` file for you.
-
 ### styles
 This option accepts either component styles or an array of component styles that should be inserted inside the shadow root of the component.