Merge remote-tracking branch 'origin/main' into carousel_navigate_to

Author: TeodorTaushanov

AGENTS.md

@@ -38,6 +38,12 @@ cd packages/main
 yarn test:cypress:single cypress/specs/Button.cy.tsx  # Single test file
 ```
 
+### Documentation Website
+```bash
+cd packages/website
+yarn start  # Starts Docusaurus on http://localhost:3000
+```
+
 ### Build & Test Flow
 
 **Build steps** (always run from root folder):

docs/2-advanced/11-styles.md

@@ -47,6 +47,24 @@ ui5-card-header::part(status) {
 
 <b>Note:</b> All available shadow parts are described in the API reference as part of the "Overview" section of each component.
 
+## Usage of CSS Custom States
+
+Components can expose custom states that reflect their internal state using the [CSS custom state pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:state). This allows you to apply styles based on component-specific conditions without relying on classes or attributes.
+
+<b>For example:</b> You can style a component differently based on its custom state:
+
+```html
+<ui5-toolbar-item></ui5-toolbar-item>
+```
+
+```css
+ui5-toolbar-item:state(overflowed) {
+  flex-direction: column
+}
+```
+
+<b>Note:</b> All available custom states are described in the API reference as part of the "Overview" section of each component.
+
 ## Changing CSS Variables
 
 The UI5 WebComponents leverage CSS variables, so if you inspect the elements inside the Shadow DOM, you will probably find which variable you need to change. Check the list of all [Global CSS Variables](https://github.com/SAP/theming-base-content/blob/master/content/Base/baseLib/sap_horizon/css_variables.css) that we use in the component. Altering them will change the component appearance.

package.json

@@ -11,7 +11,10 @@
   "type": "module",
   "scripts": {
     "generate": "yarn workspaces foreach --all --parallel run generate",
-    "generateAPI": "yarn workspaces foreach --all --parallel run generateAPI",
+    "generateAPI": "yarn generateCEM && yarn mergeCEM && yarn validateCEM",
+    "generateCEM": "yarn workspaces foreach --all --parallel run generateCEM",
+    "mergeCEM": "yarn workspaces foreach --all --parallel run mergeCEM",
+    "validateCEM": "yarn workspaces foreach --all --parallel run validateCEM",
     "generateProd": "yarn workspaces foreach --all --parallel run generateProd",
     "ts": "tsc -b",
     "bundle": "yarn workspaces foreach --all --parallel run bundle",

packages/ai/package.json

@@ -22,7 +22,9 @@
     "build": "wc-dev build",
     "watch": "wc-dev watch",
     "generate": "wc-dev generate",
-    "generateAPI": "wc-dev generateAPI",
+    "generateCEM": "wc-dev generateAPI.generateCEM",
+    "mergeCEM": "wc-dev generateAPI.mergeCEM",
+    "validateCEM": "wc-dev generateAPI.validateCEM",
     "bundle": "wc-dev build.bundle",
     "test": "yarn test:cypress",
     "test:cypress": "wc-dev test-cy-ci",

packages/base/cypress/specs/UI5ElementPropsAndAttrs.cy.tsx

@@ -78,7 +78,7 @@ describe("Properties and attributes convert to each other", () => {
 			.should("not.have.attr", "object-prop");
 	});
 
-	it("Tests that array properties have no attributes", () => {
+	it("Tests that array properties have attributes", () => {
 		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
@@ -88,7 +88,7 @@ describe("Properties and attributes convert to each other", () => {
 			.invoke("prop", "multiProp", ["a", "b"]);
 
 		cy.get("@testGeneric")
-			.should("not.have.attr", "multi-prop");
+			.should("have.attr", "multi-prop", '["a","b"]');
 	});
 
 	it("Tests that noAttribute properties have no attributes", () => {

packages/base/package-scripts.cjs

@@ -70,12 +70,12 @@ const scripts = {
 			"ui5": `ui5nps-script "${LIB}copy-and-watch/index.js" "dist/sap/**/*" dist/prod/sap/`,
 			"preact": `ui5nps-script "${LIB}copy-and-watch/index.js" "dist/thirdparty/preact/**/*.js" dist/prod/thirdparty/preact/`,
 			"assets": `ui5nps-script "${LIB}copy-and-watch/index.js" "dist/generated/assets/**/*.json" dist/prod/generated/assets/`,
-	}
-},
+		}
+	},
 	generateAPI: {
-		default: "ui5nps generateAPI.generateCEM generateAPI.validateCEM",
 		generateCEM: `ui5nps-script "${LIB}/cem/cem.js" analyze --config "${LIB}cem/custom-elements-manifest.config.mjs"`,
 		validateCEM: `ui5nps-script "${LIB}/cem/validate.js"`,
+		mergeCEM: `ui5nps-script "${LIB}cem/merge.mjs"`,
 	},
 	watch: {
 		default: 'ui5nps-p watch.src watch.styles', // concurently

packages/base/package.json

@@ -48,7 +48,9 @@
     "start": "wc-dev start",
     "build": "wc-dev build",
     "generate": "wc-dev generate",
-    "generateAPI": "wc-dev generateAPI",
+    "generateCEM": "wc-dev generateAPI.generateCEM",
+    "mergeCEM": "wc-dev generateAPI.mergeCEM",
+    "validateCEM": "wc-dev generateAPI.validateCEM",
     "generateProd": "wc-dev generateProd",
     "bundle": "wc-dev build.bundle",
     "test": "wc-dev test",

packages/base/src/UI5Element.ts

@@ -80,6 +80,15 @@ const defaultConverter = {
 		if (type === Number) {
 			return value === null ? undefined : parseFloat(value);
 		}
+
+		if (type === Object || type === Array) {
+			try {
+				return JSON.parse(value as string) as object | Array<unknown>;
+			} catch {
+				return value;
+			}
+		}
+
 		return value;
 	},
 	toAttribute(value: unknown, type: unknown) {
@@ -89,7 +98,7 @@ const defaultConverter = {
 
 		// don't set attributes for arrays and objects
 		if (type === Object || type === Array) {
-			return null;
+			return JSON.stringify(value);
 		}
 
 		// object, array, other

packages/base/src/UI5ElementMetadata.ts

@@ -133,7 +133,7 @@ class UI5ElementMetadata {
 	 */
 	hasAttribute(propName: string): boolean {
 		const propData = this.getProperties()[propName];
-		return propData.type !== Object && propData.type !== Array && !propData.noAttribute;
+		return propData.type !== Object && !propData.noAttribute;
 	}
 
 	/**

packages/compat/package.json

@@ -22,7 +22,9 @@
     "build": "wc-dev build",
     "watch": "wc-dev watch",
     "generate": "wc-dev generate",
-    "generateAPI": "wc-dev generateAPI",
+    "generateCEM": "wc-dev generateAPI.generateCEM",
+    "mergeCEM": "wc-dev generateAPI.mergeCEM",
+    "validateCEM": "wc-dev generateAPI.validateCEM",
     "bundle": "wc-dev build.bundle",
     "test": "yarn test:cypress",
     "test:cypress": "wc-dev test-cy-ci",