From b3c6dd35f631af2e6fa5d5e22fa62459ee4cc618 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 4 Aug 2025 16:24:22 +0200 Subject: [PATCH 1/6] update ui5wc/r deps --- package.json | 12 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/charts/package.json | 4 +- packages/compat/package.json | 4 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 8 +- yarn.lock | 170 ++++++++++++------------- 8 files changed, 103 insertions(+), 103 deletions(-) diff --git a/package.json b/package.json index dbf1b3ac4ed..958e70bcb97 100644 --- a/package.json +++ b/package.json @@ -44,11 +44,11 @@ "@storybook/react": "8.6.14", "@storybook/react-vite": "8.6.14", "@storybook/theming": "8.6.14", - "@ui5/webcomponents": "2.12.0", - "@ui5/webcomponents-ai": "2.12.0", - "@ui5/webcomponents-compat": "2.12.0", - "@ui5/webcomponents-fiori": "2.12.0", - "@ui5/webcomponents-icons": "2.12.0", + "@ui5/webcomponents": "2.13.0", + "@ui5/webcomponents-ai": "2.13.0", + "@ui5/webcomponents-compat": "2.13.0", + "@ui5/webcomponents-fiori": "2.13.0", + "@ui5/webcomponents-icons": "2.13.0", "react": "19.1.1", "react-dom": "19.1.1", "remark-gfm": "4.0.1", @@ -70,7 +70,7 @@ "@types/node": "22.17.0", "@types/react": "19.1.9", "@types/react-dom": "19.1.7", - "@ui5/webcomponents-tools": "2.12.0", + "@ui5/webcomponents-tools": "2.13.0", "@vitejs/plugin-react": "4.7.0", "chromatic": "13.1.3", "cssnano": "7.1.0", diff --git a/packages/ai/package.json b/packages/ai/package.json index ffb70276ccc..d34b264481f 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -33,7 +33,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.12.0", + "@ui5/webcomponents-ai": "~2.13.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index b1bcf9d72bd..ab514b20698 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -32,7 +32,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.12.0", + "@ui5/webcomponents-base": "~2.13.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index e84057dd73f..67da38e166c 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -39,8 +39,8 @@ "recharts": "2.15.4" }, "peerDependencies": { - "@ui5/webcomponents-react": "~2.12.0", - "@ui5/webcomponents-react-base": "~2.12.0", + "@ui5/webcomponents-react": "~2.13.0", + "@ui5/webcomponents-react-base": "~2.13.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/compat/package.json b/packages/compat/package.json index 00a2bebe077..4f6e8377b43 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -41,8 +41,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.12.0", - "@ui5/webcomponents-react": "~2.12.0", + "@ui5/webcomponents-compat": "~2.13.0", + "@ui5/webcomponents-react": "~2.13.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index b858ff31814..3c273655151 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.12.0", - "@ui5/webcomponents-base": "~2.12.0", + "@ui5/webcomponents": "~2.13.0", + "@ui5/webcomponents-base": "~2.13.0", "cypress": "^12 || ^13 || ^14" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 7916c296f51..856e51bf182 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -57,10 +57,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.12.0", - "@ui5/webcomponents-base": "~2.12.0", - "@ui5/webcomponents-fiori": "~2.12.0", - "@ui5/webcomponents-icons": "~2.12.0", + "@ui5/webcomponents": "~2.13.0", + "@ui5/webcomponents-base": "~2.13.0", + "@ui5/webcomponents-fiori": "~2.13.0", + "@ui5/webcomponents-icons": "~2.13.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index 279420e3010..2c72778f402 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6428,42 +6428,42 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.12.0 + "@ui5/webcomponents-ai": ~2.13.0 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-ai@npm:2.12.0" +"@ui5/webcomponents-ai@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-ai@npm:2.13.0" dependencies: - "@ui5/webcomponents": "npm:2.12.0" - "@ui5/webcomponents-base": "npm:2.12.0" - "@ui5/webcomponents-icons": "npm:2.12.0" - "@ui5/webcomponents-theming": "npm:2.12.0" - checksum: 10c0/ae35808a765b285625759e81a114a25f1282c9087c692baf792010e14d7c375a3fcffff3ed354bdaa29b742ac54da4327dab30593878af1db4514fcf6e533650 + "@ui5/webcomponents": "npm:2.13.0" + "@ui5/webcomponents-base": "npm:2.13.0" + "@ui5/webcomponents-icons": "npm:2.13.0" + "@ui5/webcomponents-theming": "npm:2.13.0" + checksum: 10c0/bade0fdadb9f5a6cfdac52b3516f1197f17622cd511a15a2657f0c3e048a3efe6f6c0ce5a5ad055cfc02b7d6c9d40330a5e6ccadbb6a5af9f26c3da5111d9cdb languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-base@npm:2.12.0" +"@ui5/webcomponents-base@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-base@npm:2.13.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/e2810288991b687535c9eec92a92486a6a6f0ee419ade6a8e153c8160824366ddaaebb30835b1f85b312c81ccf97d72ab505d9ca418b474795f25ab6a4ffb428 + checksum: 10c0/6e45b8cdd19bd108c82956b53a40e34b5a0dabbe08d8b3b1b5a38b9a4ae6473b95bb1c1ddfa6dc00843b43b5826a3978ccc789897db2e19c56f21363e44e6ca9 languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-compat@npm:2.12.0" +"@ui5/webcomponents-compat@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-compat@npm:2.13.0" dependencies: - "@ui5/webcomponents": "npm:2.12.0" - "@ui5/webcomponents-base": "npm:2.12.0" - "@ui5/webcomponents-icons": "npm:2.12.0" - "@ui5/webcomponents-theming": "npm:2.12.0" - checksum: 10c0/f2ef197e2a7fae73e7721ea7857bc03b9f6edd949a80a65787c103b9033a5cb649dcbfdd6d000335460feded89a1d94fd99873a0d2daa6ee7eeac3f75f25c695 + "@ui5/webcomponents": "npm:2.13.0" + "@ui5/webcomponents-base": "npm:2.13.0" + "@ui5/webcomponents-icons": "npm:2.13.0" + "@ui5/webcomponents-theming": "npm:2.13.0" + checksum: 10c0/5f9c6dc508601bd2c64a37eeec50b2617a3c675500a129c4d466fd62dfd630f7257754f9c4ca89db2346023c222a299c3373e653dc7e7ee94ccd4062f8a00125 languageName: node linkType: hard @@ -6471,8 +6471,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.12.0 - "@ui5/webcomponents-base": ~2.12.0 + "@ui5/webcomponents": ~2.13.0 + "@ui5/webcomponents-base": ~2.13.0 cypress: ^12 || ^13 || ^14 peerDependenciesMeta: "@ui5/webcomponents": @@ -6482,53 +6482,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-fiori@npm:2.12.0" +"@ui5/webcomponents-fiori@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-fiori@npm:2.13.0" dependencies: - "@ui5/webcomponents": "npm:2.12.0" - "@ui5/webcomponents-base": "npm:2.12.0" - "@ui5/webcomponents-icons": "npm:2.12.0" - "@ui5/webcomponents-theming": "npm:2.12.0" + "@ui5/webcomponents": "npm:2.13.0" + "@ui5/webcomponents-base": "npm:2.13.0" + "@ui5/webcomponents-icons": "npm:2.13.0" + "@ui5/webcomponents-theming": "npm:2.13.0" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/19807d4873878713fe4216855242f8cf1a69fe9a074ab9795147caf7f75b2f428e683d50f1e485ef2d4a9d2f3225a799e55698f0e188513fa164f3c6381de91c + checksum: 10c0/acdd08e2bba8498ef4173a1dbd9dcc4c1553242fda28376da9cc01793da00fbd3ec89bf5497ef9d9e6608e4642680177595b74d242d9b5e1ea6cb0e55afe4704 languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.12.0" +"@ui5/webcomponents-icons-business-suite@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.13.0" dependencies: - "@ui5/webcomponents-base": "npm:2.12.0" - checksum: 10c0/5c487e326582cda0b5caa4e48b596746ab924acc1addd0715ac8a1d67e8b060f7894f23741516b123fd79f55d328cd0a4f3103fc2eed4ce35804495ef0aa9126 + "@ui5/webcomponents-base": "npm:2.13.0" + checksum: 10c0/3b3ba9e147acd96345f0009d99eeaf23f5542f423d11320b334d1511ae526fdf2025b8383f6b96098a1f8469ba3410e275d36a9a55e39524f293e26c715f507b languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.12.0" +"@ui5/webcomponents-icons-tnt@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.13.0" dependencies: - "@ui5/webcomponents-base": "npm:2.12.0" - checksum: 10c0/40d38e3d0ac85f5c8dc671ca33289e65b04057c6a466be14d20d8ec5b715736356c923eb8cb361d56ee3a55d069812b831c84968d3b4a78f34acf9d0bd448e4e + "@ui5/webcomponents-base": "npm:2.13.0" + checksum: 10c0/177c3ec6372e060e6b9b3331bb595305b54ab61aa3f5cb7b1d69a948c7919e112510dedf9dbaa4ec896d097d8f9233f8096b6f16f75a181615c7b9e168671b16 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-icons@npm:2.12.0" +"@ui5/webcomponents-icons@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-icons@npm:2.13.0" dependencies: - "@ui5/webcomponents-base": "npm:2.12.0" - checksum: 10c0/5f93ea6d05c4028534cd2538d9ba32e1153e0477a9bb8aaec12dd0a2088ed02835a33f791a5759bfde0efac38c74b032016f25f7abe7f3e4c05a33c6b76e3da9 + "@ui5/webcomponents-base": "npm:2.13.0" + checksum: 10c0/745b0409648253f588504e6cad6a88e2ca132f4631c6791159e027879077229326a5bfe166e5b531fa47d4c68b69b65bf65cd55890b79309502b59623d9949e0 languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-localization@npm:2.12.0" +"@ui5/webcomponents-localization@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-localization@npm:2.13.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.12.0" - checksum: 10c0/b7e03d10a7007c20fd3183ad2e53021db61512ec053b5f8205fe13f7d4bbacf389fc384062880efa927cf7fbeb3110fee644ec9f9d818959f978a8c460bb3c6c + "@ui5/webcomponents-base": "npm:2.13.0" + checksum: 10c0/895348be79aba1b779a40dbb7582a898166943bea4a870a13f3257ae67483531e377f891e7a34495d89565a10edab2f494c71971f16b2ea35caddb9db6e4d3b4 languageName: node linkType: hard @@ -6537,7 +6537,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.12.0 + "@ui5/webcomponents-base": ~2.13.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -6555,8 +6555,8 @@ __metadata: react-content-loader: "npm:7.1.1" recharts: "npm:2.15.4" peerDependencies: - "@ui5/webcomponents-react": ~2.12.0 - "@ui5/webcomponents-react-base": ~2.12.0 + "@ui5/webcomponents-react": ~2.13.0 + "@ui5/webcomponents-react-base": ~2.13.0 react: ^18 || ^19 languageName: unknown linkType: soft @@ -6581,8 +6581,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.12.0 - "@ui5/webcomponents-react": ~2.12.0 + "@ui5/webcomponents-compat": ~2.13.0 + "@ui5/webcomponents-react": ~2.13.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -6608,10 +6608,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.12.0 - "@ui5/webcomponents-base": ~2.12.0 - "@ui5/webcomponents-fiori": ~2.12.0 - "@ui5/webcomponents-icons": ~2.12.0 + "@ui5/webcomponents": ~2.13.0 + "@ui5/webcomponents-base": ~2.13.0 + "@ui5/webcomponents-fiori": ~2.13.0 + "@ui5/webcomponents-icons": ~2.13.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -6626,19 +6626,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-theming@npm:2.12.0" +"@ui5/webcomponents-theming@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-theming@npm:2.13.0" dependencies: "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.12.0" - checksum: 10c0/339c20f3ad504e986225dda1d5801734ca3f852230a6b55fa92b5af427bd739e18fa082fc47207c65ddf347d089bd510a406a626122b5713ef552287946ed2d5 + "@ui5/webcomponents-base": "npm:2.13.0" + checksum: 10c0/9a4810883822e00eb9ca311a09d04ff91235fdf26c78e6c6d3092058f8c56045d19e88ba4c72ca814d67ee8a6664a3c5e30e12c7ea01d2837dd49bf6144cf383 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents-tools@npm:2.12.0" +"@ui5/webcomponents-tools@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents-tools@npm:2.13.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.4" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -6696,21 +6696,21 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/64afed3afe3ac7e766d737f013343031a57928eb3a47ac4be8b1846c72fa641db4a86a0fb0352a27289ae38f916e1737225a6a61b48d9f296e134167dd18e8ca + checksum: 10c0/586e6fdfe424663d04b46e41bd533e04de592303081c067cc0badf1c37af6ac95f68740ffda8119109e71b89b7e63d2329ed1c182197fc422bca3676b3c25984 languageName: node linkType: hard -"@ui5/webcomponents@npm:2.12.0": - version: 2.12.0 - resolution: "@ui5/webcomponents@npm:2.12.0" +"@ui5/webcomponents@npm:2.13.0": + version: 2.13.0 + resolution: "@ui5/webcomponents@npm:2.13.0" dependencies: - "@ui5/webcomponents-base": "npm:2.12.0" - "@ui5/webcomponents-icons": "npm:2.12.0" - "@ui5/webcomponents-icons-business-suite": "npm:2.12.0" - "@ui5/webcomponents-icons-tnt": "npm:2.12.0" - "@ui5/webcomponents-localization": "npm:2.12.0" - "@ui5/webcomponents-theming": "npm:2.12.0" - checksum: 10c0/6658a2ab459115b4507e71769efb2d11ba4afca123246937cd3b194bd1711d13daccfa3401e5c64cc4cde4365b1354a54a16ac93fdf91e593522f5e7535f0277 + "@ui5/webcomponents-base": "npm:2.13.0" + "@ui5/webcomponents-icons": "npm:2.13.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.13.0" + "@ui5/webcomponents-icons-tnt": "npm:2.13.0" + "@ui5/webcomponents-localization": "npm:2.13.0" + "@ui5/webcomponents-theming": "npm:2.13.0" + checksum: 10c0/d93b17a217b851c7a18140c6622610d7c18e097a90967de5e90f8c9bd2b4873f45b9ab2be2632ae98e93f0c97ef1bda5164ce1be87ed78fbab1c4ca4f91bc7ef languageName: node linkType: hard @@ -24426,12 +24426,12 @@ __metadata: "@types/node": "npm:22.17.0" "@types/react": "npm:19.1.9" "@types/react-dom": "npm:19.1.7" - "@ui5/webcomponents": "npm:2.12.0" - "@ui5/webcomponents-ai": "npm:2.12.0" - "@ui5/webcomponents-compat": "npm:2.12.0" - "@ui5/webcomponents-fiori": "npm:2.12.0" - "@ui5/webcomponents-icons": "npm:2.12.0" - "@ui5/webcomponents-tools": "npm:2.12.0" + "@ui5/webcomponents": "npm:2.13.0" + "@ui5/webcomponents-ai": "npm:2.13.0" + "@ui5/webcomponents-compat": "npm:2.13.0" + "@ui5/webcomponents-fiori": "npm:2.13.0" + "@ui5/webcomponents-icons": "npm:2.13.0" + "@ui5/webcomponents-tools": "npm:2.13.0" "@vitejs/plugin-react": "npm:4.7.0" chromatic: "npm:13.1.3" cssnano: "npm:7.1.0" From 17b26074896b931e29f9005a969ca7c4c1b48cae Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 4 Aug 2025 16:29:56 +0200 Subject: [PATCH 2/6] run `main` wrapper script --- .storybook/custom-element-manifests/ai.json | 27 ++ .../custom-element-manifests/fiori.json | 274 ++++++----- .storybook/custom-element-manifests/main.json | 440 ++++++++++++++++-- .../main/src/webComponents/Button/index.tsx | 21 +- .../main/src/webComponents/Calendar/index.tsx | 4 +- .../ColorPalettePopover/index.tsx | 2 +- .../main/src/webComponents/ComboBox/index.tsx | 1 + .../webComponents/ComboBoxItemGroup/index.tsx | 21 +- .../src/webComponents/DatePicker/index.tsx | 4 +- .../webComponents/DateRangePicker/index.tsx | 4 +- .../webComponents/DateTimePicker/index.tsx | 4 +- .../src/webComponents/FileUploader/index.tsx | 38 +- .../main/src/webComponents/Input/index.tsx | 1 + .../main/src/webComponents/List/index.tsx | 21 + .../src/webComponents/ListItemGroup/index.tsx | 21 +- .../main/src/webComponents/Menu/index.tsx | 2 +- .../src/webComponents/MultiComboBox/index.tsx | 1 + .../MultiComboBoxItemGroup/index.tsx | 21 +- .../NotificationListItem/index.tsx | 2 +- .../main/src/webComponents/Popover/index.tsx | 2 +- .../webComponents/ResponsivePopover/index.tsx | 2 +- .../src/webComponents/SearchItem/index.tsx | 8 +- .../webComponents/SearchItemGroup/index.tsx | 21 +- .../webComponents/ShellBarSearch/index.tsx | 8 +- .../src/webComponents/SplitButton/index.tsx | 26 +- .../SuggestionItemGroup/index.tsx | 21 +- .../main/src/webComponents/TableRow/index.tsx | 2 +- .../src/webComponents/ToggleButton/index.tsx | 21 +- .../main/src/webComponents/UserMenu/index.tsx | 2 +- 29 files changed, 842 insertions(+), 180 deletions(-) diff --git a/.storybook/custom-element-manifests/ai.json b/.storybook/custom-element-manifests/ai.json index 22678d5c378..a8dab28a182 100644 --- a/.storybook/custom-element-manifests/ai.json +++ b/.storybook/custom-element-manifests/ai.json @@ -95,6 +95,24 @@ "privacy": "public", "_ui5since": "2.6.0", "_ui5noAttribute": true + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "AIButtonAccessibilityAttributes", + "references": [ + { + "name": "AIButtonAccessibilityAttributes", + "package": "@ui5/webcomponents-ai", + "module": "dist/Button.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "privacy": "public", + "_ui5since": "2.6.0" } ], "events": [ @@ -157,6 +175,15 @@ "type": { "text": "boolean" } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThis property allows for fine-tuned control of ARIA attributes for screen reader support.\nIt accepts an object with the following optional fields:\n\n- **root**: Accessibility attributes that will be applied to the root element.\n - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog).\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Defines a human-readable description for the button's role.\n Accepts any string value.\n\n- **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element.\n - **hasPopup**: Indicates the type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "AIButtonAccessibilityAttributes" + } } ], "superclass": { diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index 5bcaef6d7c9..1190de2d4df 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -4949,7 +4949,7 @@ "description": "Fired when the `Close` button is pressed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, + "_ui5Bubbles": false, "_ui5parameters": [ { "type": { @@ -5980,6 +5980,16 @@ "description": "Defines whether the search item is selected.", "privacy": "public" }, + { + "kind": "field", + "name": "deletable", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the search item is deletable.", + "privacy": "public" + }, { "kind": "field", "name": "scopeName", @@ -6041,6 +6051,15 @@ "text": "boolean" } }, + { + "description": "Defines whether the search item is deletable.", + "name": "deletable", + "default": "false", + "fieldName": "deletable", + "type": { + "text": "boolean" + } + }, { "description": "Defines the scope of the search item", "name": "scope-name", @@ -6120,6 +6139,24 @@ "description": "Defines the accessible name of the header.", "privacy": "public", "default": "undefined" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" } ], "slots": [ @@ -7450,6 +7487,16 @@ "description": "Search field for the ShellBar component.", "name": "ShellBarSearch", "members": [ + { + "kind": "field", + "name": "autoOpen", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Indicates whether the suggestions popover should be opened on focus.", + "privacy": "public" + }, { "kind": "field", "name": "loading", @@ -7563,6 +7610,121 @@ } } ], + "attributes": [ + { + "description": "Indicates whether the suggestions popover should be opened on focus.", + "name": "auto-open", + "default": "false", + "fieldName": "autoOpen", + "type": { + "text": "boolean" + } + }, + { + "description": "Indicates whether a loading indicator should be shown in the popup.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, + { + "description": "Defines whether the value will be autcompleted to match an item.", + "name": "no-typeahead", + "default": "false", + "fieldName": "noTypeahead", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, + { + "description": "Indicates whether the items picker is open.", + "name": "open", + "default": "false", + "fieldName": "open", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Search", + "module": "dist/Search.js" + } + }, + { + "description": "Defines whether the clear icon of the search will be shown.", + "name": "show-clear-icon", + "default": "false", + "fieldName": "showClearIcon", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", + "name": "value", + "default": "\"\"", + "fieldName": "value", + "type": { + "text": "string" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", + "name": "placeholder", + "default": "undefined", + "fieldName": "placeholder", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + }, + { + "description": "Defines the accessible ARIA description of the field.", + "name": "accessible-description", + "default": "undefined", + "fieldName": "accessibleDescription", + "type": { + "text": "string | undefined" + }, + "inheritedFrom": { + "name": "SearchField", + "module": "dist/SearchField.js" + } + } + ], "superclass": { "name": "Search", "package": "@ui5/webcomponents-fiori", @@ -7684,112 +7846,6 @@ } } ], - "attributes": [ - { - "description": "Indicates whether a loading indicator should be shown in the popup.", - "name": "loading", - "default": "false", - "fieldName": "loading", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } - }, - { - "description": "Defines whether the value will be autcompleted to match an item.", - "name": "no-typeahead", - "default": "false", - "fieldName": "noTypeahead", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } - }, - { - "description": "Indicates whether the items picker is open.", - "name": "open", - "default": "false", - "fieldName": "open", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "Search", - "module": "dist/Search.js" - } - }, - { - "description": "Defines whether the clear icon of the search will be shown.", - "name": "show-clear-icon", - "default": "false", - "fieldName": "showClearIcon", - "type": { - "text": "boolean" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.", - "name": "value", - "default": "\"\"", - "fieldName": "value", - "type": { - "text": "string" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.", - "name": "placeholder", - "default": "undefined", - "fieldName": "placeholder", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "description": "Defines the accessible ARIA name of the component.", - "name": "accessible-name", - "default": "undefined", - "fieldName": "accessibleName", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - }, - { - "description": "Defines the accessible ARIA description of the field.", - "name": "accessible-description", - "default": "undefined", - "fieldName": "accessibleDescription", - "type": { - "text": "string | undefined" - }, - "inheritedFrom": { - "name": "SearchField", - "module": "dist/SearchField.js" - } - } - ], "events": [ { "name": "open", @@ -10777,7 +10833,7 @@ "kind": "field", "name": "opener", "type": { - "text": "HTMLElement | string | undefined" + "text": "HTMLElement | string | null | undefined" }, "description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", @@ -10997,7 +11053,7 @@ "default": "undefined", "fieldName": "opener", "type": { - "text": "string | HTMLElement | undefined" + "text": "string | HTMLElement | null | undefined" } }, { diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 8c7e12d697a..e5750c2848e 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -2,6 +2,21 @@ "schemaVersion": "1.0.0", "readme": "", "modules": [ + { + "kind": "javascript-module", + "path": "dist/bundle-assets/IconPensilLitTemplate.js", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "IconPensilLitTemplate", + "module": "dist/bundle-assets/IconPensilLitTemplate.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/colorpicker-utils/ColorValue.js", @@ -5556,6 +5571,28 @@ "description": "Describes the accessibility role of the button.\n\n**Note:** Use ButtonAccessibleRole.Link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.", "privacy": "public", "_ui5since": "1.23" + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "privacy": "public", + "_ui5since": "2.13.0" } ], "events": [ @@ -5730,6 +5767,24 @@ "type": { "text": "\"Button\" | \"Link\"" } + }, + { + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + } + }, + { + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + } } ], "superclass": { @@ -6075,7 +6130,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -6090,7 +6145,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -6218,7 +6273,7 @@ } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "min-date", "default": "\"\"", "fieldName": "minDate", @@ -6231,7 +6286,7 @@ } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "max-date", "default": "\"\"", "fieldName": "maxDate", @@ -6739,7 +6794,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -6754,7 +6809,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -6833,7 +6888,7 @@ } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "min-date", "default": "\"\"", "fieldName": "minDate", @@ -6846,7 +6901,7 @@ } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "max-date", "default": "\"\"", "fieldName": "maxDate", @@ -8195,7 +8250,7 @@ "kind": "field", "name": "opener", "type": { - "text": "HTMLElement | string | undefined" + "text": "HTMLElement | string | null | undefined" }, "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", @@ -8297,7 +8352,7 @@ "default": "undefined", "fieldName": "opener", "type": { - "text": "string | HTMLElement | undefined" + "text": "string | HTMLElement | null | undefined" } } ], @@ -8457,7 +8512,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n- Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`", + "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n- Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`", "name": "ComboBox", "slots": [ { @@ -9071,6 +9126,28 @@ "name": "ListItemGroup", "module": "dist/ListItemGroup.js" } + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "superclass": { @@ -9126,6 +9203,19 @@ "name": "ListItemGroup", "module": "dist/ListItemGroup.js" } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "events": [ @@ -9294,7 +9384,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6" }, @@ -9305,7 +9395,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6" }, @@ -9357,7 +9447,7 @@ } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "min-date", "default": "\"\"", "fieldName": "minDate", @@ -9366,7 +9456,7 @@ } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "max-date", "default": "\"\"", "fieldName": "maxDate", @@ -9688,7 +9778,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -9703,7 +9793,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -10017,7 +10107,7 @@ } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "min-date", "default": "\"\"", "fieldName": "minDate", @@ -10030,7 +10120,7 @@ } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "max-date", "default": "\"\"", "fieldName": "maxDate", @@ -10464,7 +10554,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -10479,7 +10569,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -10743,7 +10833,7 @@ } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "min-date", "default": "\"\"", "fieldName": "minDate", @@ -10756,7 +10846,7 @@ } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "max-date", "default": "\"\"", "fieldName": "maxDate", @@ -11328,7 +11418,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -11343,7 +11433,7 @@ "text": "string" }, "default": "\"\"", - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "privacy": "public", "_ui5since": "1.0.0-rc.6", "inheritedFrom": { @@ -11595,7 +11685,7 @@ } }, { - "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "min-date", "default": "\"\"", "fieldName": "minDate", @@ -11608,7 +11698,7 @@ } }, { - "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd).", "name": "max-date", "default": "\"\"", "fieldName": "maxDate", @@ -12663,7 +12753,7 @@ "slots": [ { "name": "default", - "description": "By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.", + "description": "This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog.\n\n**Note:** For best accessibility experience, set a `tabindex` of \"-1\" on your interactive element, or it will be set automatically.\nThis slot is intended for use cases where you want a button-only file uploader.\nIt is recommended to set `hideInput` property to \"true\" when using this slot.\nNot setting `hideInput` may negatively impact the screen reader users.", "_ui5propertyName": "content", "_ui5type": { "text": "Array" @@ -12698,7 +12788,7 @@ "text": "boolean" }, "default": "false", - "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.", + "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", "privacy": "public" }, { @@ -12781,6 +12871,39 @@ "description": "Defines the value state of the component.", "privacy": "public" }, + { + "kind": "field", + "name": "required", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the component is required.", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible ARIA name of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.13.0" + }, + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the input.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.13.0" + }, { "kind": "field", "name": "files", @@ -12870,7 +12993,7 @@ } }, { - "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.", + "description": "If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\n**Note:** Use this property in combination with the default slot to achieve a button-only file uploader design.", "name": "hide-input", "default": "false", "fieldName": "hideInput", @@ -12941,6 +13064,33 @@ "text": "\"None\" | \"Positive\" | \"Negative\" | \"Critical\" | \"Information\"" } }, + { + "description": "Defines whether the component is required.", + "name": "required", + "default": "false", + "fieldName": "required", + "type": { + "text": "boolean" + } + }, + { + "description": "Defines the accessible ARIA name of the component.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Receives id(or many ids) of the elements that label the input.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, { "description": "FileList of all selected files.", "name": "files", @@ -13671,7 +13821,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`", + "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`", "name": "Input", "cssParts": [ { @@ -14931,6 +15081,24 @@ "privacy": "public", "_ui5since": "1.0.0-rc.15" }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes", + "references": [ + { + "name": "ListAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/List.js" + } + ] + }, + "default": "{}", + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "privacy": "public", + "_ui5since": "2.13.0" + }, { "kind": "field", "name": "accessibleNameRef", @@ -15353,6 +15521,15 @@ "text": "string | undefined" } }, + { + "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "ListAccessibilityAttributes" + } + }, { "description": "Defines the IDs of the elements that label the component.", "name": "accessible-name-ref", @@ -16081,6 +16258,24 @@ "description": "Defines the accessible name of the header.", "privacy": "public", "default": "undefined" + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0" } ], "events": [ @@ -16177,6 +16372,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + } } ], "superclass": { @@ -16276,12 +16480,13 @@ ], "slots": [ { - "description": "Defines the custom formatted text of the component.\n\n**Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.\n\nUse the `default` slot only when custom formatting with HTML elements (e.g., ``, ``) is required.\nBe aware that wrapping (via `wrappingType=\"Normal\"`) may not function correctly with custom HTML content in the `default` slot.\n\nIf both `text` and `default` slot are used, the `text` property takes precedence.", "name": "default", - "_ui5privacy": "public", + "description": "Defines the custom formatted text of the component.\n\n**Note:** For optimal text wrapping and a consistent layout, it is strongly recommended to use the `text` property.\n\nUse the `default` slot only when custom formatting with HTML elements (e.g., ``, ``) is required.\nBe aware that wrapping (via `wrappingType=\"Normal\"`) may not function correctly with custom HTML content in the `default` slot.\n\nIf both `text` and `default` slot are used, the `text` property takes precedence.", + "_ui5propertyName": "content", "_ui5type": { "text": "Array" - } + }, + "_ui5privacy": "public" }, { "name": "image", @@ -16847,7 +17052,7 @@ "kind": "field", "name": "opener", "type": { - "text": "HTMLElement | string | undefined" + "text": "HTMLElement | string | null | undefined" }, "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.", "privacy": "public", @@ -17027,7 +17232,7 @@ "default": "undefined", "fieldName": "opener", "type": { - "text": "string | HTMLElement | undefined" + "text": "string | HTMLElement | null | undefined" } } ], @@ -17951,7 +18156,7 @@ }, { "kind": "class", - "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n- Tokenizer - a list of tokens with selected options.\n- Input field - displays the selected option/s as token/s. Users can type to filter the list.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n\n#### Tokens\n\n- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n- Delete - deletes the token and focuses the previous token.\n- Backspace - deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`", + "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n- Tokenizer - a list of tokens with selected options.\n- Input field - displays the selected option/s as token/s. Users can type to filter the list.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\n[Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n#### Tokens\n\n- Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n- Delete - deletes the token and focuses the previous token.\n- Backspace - deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.js\";`", "name": "MultiComboBox", "cssParts": [ { @@ -18630,6 +18835,28 @@ "name": "ListItemGroup", "module": "dist/ListItemGroup.js" } + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "superclass": { @@ -18684,6 +18911,19 @@ "name": "ListItemGroup", "module": "dist/ListItemGroup.js" } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "events": [ @@ -20287,7 +20527,7 @@ "privacy": "public", "default": "undefined", "type": { - "text": "HTMLElement | string | undefined" + "text": "HTMLElement | string | null | undefined" }, "_ui5since": "1.2.0" }, @@ -22320,7 +22560,7 @@ "privacy": "public", "default": "undefined", "type": { - "text": "HTMLElement | string | undefined" + "text": "HTMLElement | string | null | undefined" }, "_ui5since": "1.2.0", "inheritedFrom": { @@ -24440,6 +24680,24 @@ "description": "Defines the accessible ARIA name of the component.", "default": "undefined", "privacy": "public" + }, + { + "kind": "field", + "name": "accessibilityAttributes", + "type": { + "text": "SplitButtonAccessibilityAttributes", + "references": [ + { + "name": "SplitButtonAccessibilityAttributes", + "package": "@ui5/webcomponents", + "module": "dist/SplitButton.js" + } + ] + }, + "default": "{}", + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "privacy": "public", + "_ui5since": "2.13.0" } ], "events": [ @@ -24511,6 +24769,15 @@ "type": { "text": "string | undefined" } + }, + { + "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **roleDescription**: Provides a human-readable description for the role of the button.\n Accepts any string value.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.", + "name": "accessibility-attributes", + "default": "{}", + "fieldName": "accessibilityAttributes", + "type": { + "text": "SplitButtonAccessibilityAttributes" + } } ], "superclass": { @@ -25174,6 +25441,19 @@ "name": "ListItemGroup", "module": "dist/ListItemGroup.js" } + }, + { + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "name": "wrapping-type", + "default": "\"None\"", + "fieldName": "wrappingType", + "type": { + "text": "\"None\" | \"Normal\"" + }, + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "members": [ @@ -25204,6 +25484,28 @@ "name": "ListItemGroup", "module": "dist/ListItemGroup.js" } + }, + { + "kind": "field", + "name": "wrappingType", + "type": { + "text": "WrappingType", + "references": [ + { + "name": "WrappingType", + "package": "@ui5/webcomponents", + "module": "dist/types/WrappingType.js" + } + ] + }, + "default": "\"None\"", + "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.
\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).", + "privacy": "public", + "_ui5since": "2.15.0", + "inheritedFrom": { + "name": "ListItemGroup", + "module": "dist/ListItemGroup.js" + } } ], "events": [ @@ -27568,7 +27870,7 @@ "type": { "text": "number | undefined" }, - "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", "default": "undefined", "privacy": "public", "_ui5since": "2.5.0" @@ -27616,7 +27918,7 @@ } }, { - "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", + "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.", "name": "position", "default": "undefined", "fieldName": "position", @@ -30481,6 +30783,36 @@ "name": "Button", "module": "dist/Button.js" } + }, + { + "kind": "field", + "name": "loading", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "privacy": "public", + "_ui5since": "2.13.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "kind": "field", + "name": "loadingDelay", + "type": { + "text": "number" + }, + "default": "1000", + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "privacy": "public", + "_ui5since": "2.13.0", + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } } ], "attributes": [ @@ -30649,6 +30981,32 @@ "name": "Button", "module": "dist/Button.js" } + }, + { + "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.", + "name": "loading", + "default": "false", + "fieldName": "loading", + "type": { + "text": "boolean" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } + }, + { + "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.", + "name": "loading-delay", + "default": "1000", + "fieldName": "loadingDelay", + "type": { + "text": "number" + }, + "inheritedFrom": { + "name": "Button", + "module": "dist/Button.js" + } } ], "superclass": { diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 9338c6d0fab..e07101c1479 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -98,6 +98,24 @@ interface ButtonAttributes { */ icon?: string | undefined; + /** + * Defines whether the button shows a loading indicator. + * + * **Note:** If set to `true`, a busy indicator component will be displayed on the related button. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default false + */ + loading?: boolean; + + /** + * Specifies the delay in milliseconds before the loading indicator appears within the associated button. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default 1000 + */ + loadingDelay?: number; + /** * When set to `true`, the component will * automatically submit the nearest HTML form element on `press`. @@ -202,10 +220,11 @@ const Button = withWebComponent( 'design', 'endIcon', 'icon', + 'loadingDelay', 'tooltip', 'type', ], - ['disabled', 'submits'], + ['disabled', 'loading', 'submits'], ['badge'], ['click'], ); diff --git a/packages/main/src/webComponents/Calendar/index.tsx b/packages/main/src/webComponents/Calendar/index.tsx index d2b66713daa..08e8776d1a0 100644 --- a/packages/main/src/webComponents/Calendar/index.tsx +++ b/packages/main/src/webComponents/Calendar/index.tsx @@ -37,14 +37,14 @@ interface CalendarAttributes { /** * Determines the maximum date available for selection. * - * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd). */ maxDate?: string; /** * Determines the minimum date available for selection. * - * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd). */ minDate?: string; diff --git a/packages/main/src/webComponents/ColorPalettePopover/index.tsx b/packages/main/src/webComponents/ColorPalettePopover/index.tsx index f85d452a7e0..016e36eb9e0 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/index.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/index.tsx @@ -31,7 +31,7 @@ interface ColorPalettePopoverAttributes { * **Note:** Available since [v1.21.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.21.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: HTMLElement | string | undefined; + opener?: HTMLElement | string | null | undefined; /** * Defines whether the user can choose the default color from a button. diff --git a/packages/main/src/webComponents/ComboBox/index.tsx b/packages/main/src/webComponents/ComboBox/index.tsx index 537ce821882..5c210f38469 100644 --- a/packages/main/src/webComponents/ComboBox/index.tsx +++ b/packages/main/src/webComponents/ComboBox/index.tsx @@ -234,6 +234,7 @@ interface ComboBoxPropTypes * - [Page Up] - Moves selection up by page size (10 items by default). * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item. * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item. + * - [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links. * * * diff --git a/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx index ef0772a11a2..5bfbe3be9cf 100644 --- a/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx +++ b/packages/main/src/webComponents/ComboBoxItemGroup/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/ComboBoxItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -18,6 +19,24 @@ interface ComboBoxItemGroupAttributes { * @default undefined */ headerText?: string | undefined; + + /** + * Defines if the text of the component should wrap when it's too long. + * When set to "Normal", the content (title, description) will be wrapped + * using the `ExpandableText` component.
+ * + * The text can wrap up to 100 characters on small screens (size S) and + * up to 300 characters on larger screens (size M and above). When text exceeds + * these limits, it truncates with an ellipsis followed by a text expansion trigger. + * + * Available options are: + * - `None` (default) - The text will truncate with an ellipsis. + * - `Normal` - The text will wrap (without truncation). + * + * **Note:** Available since [v2.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + * @default "None" + */ + wrappingType?: WrappingType | keyof typeof WrappingType; } interface ComboBoxItemGroupDomRef extends Required, Ui5DomRef {} @@ -80,7 +99,7 @@ interface ComboBoxItemGroupPropTypes */ const ComboBoxItemGroup = withWebComponent( 'ui5-cb-item-group', - ['headerAccessibleName', 'headerText'], + ['headerAccessibleName', 'headerText', 'wrappingType'], [], ['header'], ['move-over', 'move'], diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx index aed09a40127..caf8cc0cf8d 100644 --- a/packages/main/src/webComponents/DatePicker/index.tsx +++ b/packages/main/src/webComponents/DatePicker/index.tsx @@ -58,14 +58,14 @@ interface DatePickerAttributes { /** * Determines the maximum date available for selection. * - * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd). */ maxDate?: string; /** * Determines the minimum date available for selection. * - * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd). */ minDate?: string; diff --git a/packages/main/src/webComponents/DateRangePicker/index.tsx b/packages/main/src/webComponents/DateRangePicker/index.tsx index 017d138216c..ac05428282d 100644 --- a/packages/main/src/webComponents/DateRangePicker/index.tsx +++ b/packages/main/src/webComponents/DateRangePicker/index.tsx @@ -65,14 +65,14 @@ interface DateRangePickerAttributes { /** * Determines the maximum date available for selection. * - * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd). */ maxDate?: string; /** * Determines the minimum date available for selection. * - * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd). */ minDate?: string; diff --git a/packages/main/src/webComponents/DateTimePicker/index.tsx b/packages/main/src/webComponents/DateTimePicker/index.tsx index 84f61bab39b..fa884c3b08a 100644 --- a/packages/main/src/webComponents/DateTimePicker/index.tsx +++ b/packages/main/src/webComponents/DateTimePicker/index.tsx @@ -58,14 +58,14 @@ interface DateTimePickerAttributes { /** * Determines the maximum date available for selection. * - * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (yyyy-MM-dd). */ maxDate?: string; /** * Determines the minimum date available for selection. * - * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). + * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (yyyy-MM-dd). */ minDate?: string; diff --git a/packages/main/src/webComponents/FileUploader/index.tsx b/packages/main/src/webComponents/FileUploader/index.tsx index d7e93e5d725..3a8030482e2 100644 --- a/packages/main/src/webComponents/FileUploader/index.tsx +++ b/packages/main/src/webComponents/FileUploader/index.tsx @@ -19,6 +19,22 @@ interface FileUploaderAttributes { */ accept?: string | undefined; + /** + * Defines the accessible ARIA name of the component. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Receives id(or many ids) of the elements that label the input. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines whether the component is in disabled state. * @@ -29,6 +45,8 @@ interface FileUploaderAttributes { /** * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered. + * + * **Note:** Use this property in combination with the default slot to achieve a button-only file uploader design. * @default false */ hideInput?: boolean; @@ -61,6 +79,14 @@ interface FileUploaderAttributes { */ placeholder?: string | undefined; + /** + * Defines whether the component is required. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default false + */ + required?: boolean; + /** * Defines the name/names of the file/files to upload. */ @@ -87,10 +113,12 @@ interface FileUploaderPropTypes keyof FileUploaderAttributes | 'children' | 'valueStateMessage' | 'onChange' | 'onFileSizeExceed' > { /** - * By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information. + * This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog. * - * **Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard. - * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience. + * **Note:** For best accessibility experience, set a `tabindex` of "-1" on your interactive element, or it will be set automatically. + * This slot is intended for use cases where you want a button-only file uploader. + * It is recommended to set `hideInput` property to "true" when using this slot. + * Not setting `hideInput` may negatively impact the screen reader users. */ children?: ReactNode | ReactNode[]; @@ -150,8 +178,8 @@ interface FileUploaderPropTypes */ const FileUploader = withWebComponent( 'ui5-file-uploader', - ['accept', 'maxFileSize', 'name', 'placeholder', 'value', 'valueState'], - ['disabled', 'hideInput', 'multiple'], + ['accept', 'accessibleName', 'accessibleNameRef', 'maxFileSize', 'name', 'placeholder', 'value', 'valueState'], + ['disabled', 'hideInput', 'multiple', 'required'], ['valueStateMessage'], ['change', 'file-size-exceed'], ); diff --git a/packages/main/src/webComponents/Input/index.tsx b/packages/main/src/webComponents/Input/index.tsx index d7f3b179ea5..48c1f401469 100644 --- a/packages/main/src/webComponents/Input/index.tsx +++ b/packages/main/src/webComponents/Input/index.tsx @@ -289,6 +289,7 @@ interface InputPropTypes * - [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly. * - [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing. * - [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing. + * - [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links. * * * diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index 6017e93347f..7392d51ae79 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/List.js'; import type { + ListAccessibilityAttributes, ListItemClickEventDetail, ListItemCloseEventDetail, ListItemDeleteEventDetail, @@ -19,6 +20,25 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface ListAttributes { + /** + * Defines additional accessibility attributes on different areas of the component. + * + * The accessibilityAttributes object has the following field: + * + * - **growingButton**: `growingButton.name`. + * + * The accessibility attributes support the following values: + * + * - **name**: Defines the accessible ARIA name of the growing button. + * Accepts any string. + * + * **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: ListAccessibilityAttributes; + /** * Defines the accessible description of the component. * @@ -323,6 +343,7 @@ interface ListPropTypes const List = withWebComponent( 'ui5-list', [ + 'accessibilityAttributes', 'accessibleDescription', 'accessibleDescriptionRef', 'accessibleName', diff --git a/packages/main/src/webComponents/ListItemGroup/index.tsx b/packages/main/src/webComponents/ListItemGroup/index.tsx index 189f4bd5f57..64d24954d24 100644 --- a/packages/main/src/webComponents/ListItemGroup/index.tsx +++ b/packages/main/src/webComponents/ListItemGroup/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/ListItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -18,6 +19,24 @@ interface ListItemGroupAttributes { * @default undefined */ headerText?: string | undefined; + + /** + * Defines if the text of the component should wrap when it's too long. + * When set to "Normal", the content (title, description) will be wrapped + * using the `ExpandableText` component.
+ * + * The text can wrap up to 100 characters on small screens (size S) and + * up to 300 characters on larger screens (size M and above). When text exceeds + * these limits, it truncates with an ellipsis followed by a text expansion trigger. + * + * Available options are: + * - `None` (default) - The text will truncate with an ellipsis. + * - `Normal` - The text will wrap (without truncation). + * + * **Note:** Available since [v2.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + * @default "None" + */ + wrappingType?: WrappingType | keyof typeof WrappingType; } interface ListItemGroupDomRef extends Required, Ui5DomRef {} @@ -84,7 +103,7 @@ interface ListItemGroupPropTypes */ const ListItemGroup = withWebComponent( 'ui5-li-group', - ['headerAccessibleName', 'headerText'], + ['headerAccessibleName', 'headerText', 'wrappingType'], [], ['header'], ['move-over', 'move'], diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx index bda101d9fcd..bd8ba0ea340 100644 --- a/packages/main/src/webComponents/Menu/index.tsx +++ b/packages/main/src/webComponents/Menu/index.tsx @@ -56,7 +56,7 @@ interface MenuAttributes { * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: HTMLElement | string | undefined; + opener?: HTMLElement | string | null | undefined; } interface MenuDomRef extends Required, Ui5DomRef {} diff --git a/packages/main/src/webComponents/MultiComboBox/index.tsx b/packages/main/src/webComponents/MultiComboBox/index.tsx index 8b5d066173f..9db4d7b5e5d 100644 --- a/packages/main/src/webComponents/MultiComboBox/index.tsx +++ b/packages/main/src/webComponents/MultiComboBox/index.tsx @@ -245,6 +245,7 @@ interface MultiComboBoxPropTypes * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys. * Once the drop-down is opened, you can use the `UP` and `DOWN` arrow keys * to navigate through the available options and select one by pressing the `Space` or `Enter` keys. + * [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links. * * #### Tokens * diff --git a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx index a10c5fc585a..3cad5f11c31 100644 --- a/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx +++ b/packages/main/src/webComponents/MultiComboBoxItemGroup/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/MultiComboBoxItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -18,6 +19,24 @@ interface MultiComboBoxItemGroupAttributes { * @default undefined */ headerText?: string | undefined; + + /** + * Defines if the text of the component should wrap when it's too long. + * When set to "Normal", the content (title, description) will be wrapped + * using the `ExpandableText` component.
+ * + * The text can wrap up to 100 characters on small screens (size S) and + * up to 300 characters on larger screens (size M and above). When text exceeds + * these limits, it truncates with an ellipsis followed by a text expansion trigger. + * + * Available options are: + * - `None` (default) - The text will truncate with an ellipsis. + * - `Normal` - The text will wrap (without truncation). + * + * **Note:** Available since [v2.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + * @default "None" + */ + wrappingType?: WrappingType | keyof typeof WrappingType; } interface MultiComboBoxItemGroupDomRef extends Required, Ui5DomRef {} @@ -81,7 +100,7 @@ interface MultiComboBoxItemGroupPropTypes */ const MultiComboBoxItemGroup = withWebComponent( 'ui5-mcb-item-group', - ['headerAccessibleName', 'headerText'], + ['headerAccessibleName', 'headerText', 'wrappingType'], [], ['header'], ['move-over', 'move'], diff --git a/packages/main/src/webComponents/NotificationListItem/index.tsx b/packages/main/src/webComponents/NotificationListItem/index.tsx index 1bf994439fe..2787d0b96ed 100644 --- a/packages/main/src/webComponents/NotificationListItem/index.tsx +++ b/packages/main/src/webComponents/NotificationListItem/index.tsx @@ -126,7 +126,7 @@ interface NotificationListItemPropTypes * * | cancelable | bubbles | * | :--------: | :-----: | - * | ❌|✅| + * | ❌|❌| */ onClose?: (event: Ui5CustomEvent) => void; } diff --git a/packages/main/src/webComponents/Popover/index.tsx b/packages/main/src/webComponents/Popover/index.tsx index 21e79f6d7f3..cae097137d7 100644 --- a/packages/main/src/webComponents/Popover/index.tsx +++ b/packages/main/src/webComponents/Popover/index.tsx @@ -109,7 +109,7 @@ interface PopoverAttributes { * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: HTMLElement | string | undefined; + opener?: HTMLElement | string | null | undefined; /** * Determines on which side the component is placed at. diff --git a/packages/main/src/webComponents/ResponsivePopover/index.tsx b/packages/main/src/webComponents/ResponsivePopover/index.tsx index fbfe155d3a6..7ca01dde224 100644 --- a/packages/main/src/webComponents/ResponsivePopover/index.tsx +++ b/packages/main/src/webComponents/ResponsivePopover/index.tsx @@ -109,7 +109,7 @@ interface ResponsivePopoverAttributes { * **Note:** Available since [v1.2.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.2.0) of **@ui5/webcomponents**. * @default undefined */ - opener?: HTMLElement | string | undefined; + opener?: HTMLElement | string | null | undefined; /** * Determines on which side the component is placed at. diff --git a/packages/main/src/webComponents/SearchItem/index.tsx b/packages/main/src/webComponents/SearchItem/index.tsx index fc594159474..bbe2d89592f 100644 --- a/packages/main/src/webComponents/SearchItem/index.tsx +++ b/packages/main/src/webComponents/SearchItem/index.tsx @@ -5,6 +5,12 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; interface SearchItemAttributes { + /** + * Defines whether the search item is deletable. + * @default false + */ + deletable?: boolean; + /** * Defines the description that appears right under the item text, if available. * @@ -80,7 +86,7 @@ interface SearchItemPropTypes const SearchItem = withWebComponent( 'ui5-search-item', ['description', 'icon', 'scopeName', 'text'], - ['selected'], + ['deletable', 'selected'], ['image'], ['delete'], ); diff --git a/packages/main/src/webComponents/SearchItemGroup/index.tsx b/packages/main/src/webComponents/SearchItemGroup/index.tsx index 966bc63c0cd..d4a53253cdb 100644 --- a/packages/main/src/webComponents/SearchItemGroup/index.tsx +++ b/packages/main/src/webComponents/SearchItemGroup/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents-fiori/dist/SearchItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -18,6 +19,24 @@ interface SearchItemGroupAttributes { * @default undefined */ headerText?: string | undefined; + + /** + * Defines if the text of the component should wrap when it's too long. + * When set to "Normal", the content (title, description) will be wrapped + * using the `ui5-expandable-text` component.
+ * + * The text can wrap up to 100 characters on small screens (size S) and + * up to 300 characters on larger screens (size M and above). When text exceeds + * these limits, it truncates with an ellipsis followed by a text expansion trigger. + * + * Available options are: + * - `None` (default) - The text will truncate with an ellipsis. + * - `Normal` - The text will wrap (without truncation). + * + * **Note:** Available since [v2.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents-fiori**. + * @default "None" + */ + wrappingType?: WrappingType | keyof typeof WrappingType; } interface SearchItemGroupDomRef extends Required, Ui5DomRef {} @@ -82,7 +101,7 @@ interface SearchItemGroupPropTypes */ const SearchItemGroup = withWebComponent( 'ui5-search-item-group', - ['headerAccessibleName', 'headerText'], + ['headerAccessibleName', 'headerText', 'wrappingType'], [], ['header'], ['move-over', 'move'], diff --git a/packages/main/src/webComponents/ShellBarSearch/index.tsx b/packages/main/src/webComponents/ShellBarSearch/index.tsx index 45314e91995..51d0a8d6cef 100644 --- a/packages/main/src/webComponents/ShellBarSearch/index.tsx +++ b/packages/main/src/webComponents/ShellBarSearch/index.tsx @@ -19,6 +19,12 @@ interface ShellBarSearchAttributes { */ accessibleName?: string | undefined; + /** + * Indicates whether the suggestions popover should be opened on focus. + * @default false + */ + autoOpen?: boolean; + /** * Indicates whether a loading indicator should be shown in the popup. * @default false @@ -200,7 +206,7 @@ interface ShellBarSearchPropTypes const ShellBarSearch = withWebComponent( 'ui5-shellbar-search', ['accessibleDescription', 'accessibleName', 'placeholder', 'value'], - ['loading', 'noTypeahead', 'open', 'showClearIcon'], + ['autoOpen', 'loading', 'noTypeahead', 'open', 'showClearIcon'], ['action', 'filterButton', 'illustration', 'messageArea', 'scopes'], ['close', 'input', 'open', 'scope-change', 'search'], ); diff --git a/packages/main/src/webComponents/SplitButton/index.tsx b/packages/main/src/webComponents/SplitButton/index.tsx index e593338ef1c..060e6b3cf38 100644 --- a/packages/main/src/webComponents/SplitButton/index.tsx +++ b/packages/main/src/webComponents/SplitButton/index.tsx @@ -1,12 +1,36 @@ 'use client'; import '@ui5/webcomponents/dist/SplitButton.js'; +import type { SplitButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/SplitButton.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface SplitButtonAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * The `accessibilityAttributes` property accepts an object with the following optional fields: + * + * - **root**: Attributes that will be applied to the main (text) button. + * - **hasPopup**: Indicates the presence and type of popup triggered by the button. + * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. + * - **roleDescription**: Provides a human-readable description for the role of the button. + * Accepts any string value. + * - **title**: Specifies a tooltip or description for screen readers. + * Accepts any string value. + * + * - **arrowButton**: Attributes applied specifically to the arrow (split) button. + * - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button. + * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. + * - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded. + * Accepts boolean values: `true` or `false`. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default {} + */ + accessibilityAttributes?: SplitButtonAccessibilityAttributes; + /** * Defines the accessible ARIA name of the component. * @default undefined @@ -117,7 +141,7 @@ interface SplitButtonPropTypes */ const SplitButton = withWebComponent( 'ui5-split-button', - ['accessibleName', 'design', 'icon'], + ['accessibilityAttributes', 'accessibleName', 'design', 'icon'], ['activeArrowButton', 'disabled'], [], ['arrow-click', 'click'], diff --git a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx index 276926139df..cd8dbc7f6f5 100644 --- a/packages/main/src/webComponents/SuggestionItemGroup/index.tsx +++ b/packages/main/src/webComponents/SuggestionItemGroup/index.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents/dist/SuggestionItemGroup.js'; import type { ListItemGroupMoveEventDetail } from '@ui5/webcomponents/dist/ListItemGroup.js'; +import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; @@ -18,6 +19,24 @@ interface SuggestionItemGroupAttributes { * @default undefined */ headerText?: string | undefined; + + /** + * Defines if the text of the component should wrap when it's too long. + * When set to "Normal", the content (title, description) will be wrapped + * using the `ExpandableText` component.
+ * + * The text can wrap up to 100 characters on small screens (size S) and + * up to 300 characters on larger screens (size M and above). When text exceeds + * these limits, it truncates with an ellipsis followed by a text expansion trigger. + * + * Available options are: + * - `None` (default) - The text will truncate with an ellipsis. + * - `Normal` - The text will wrap (without truncation). + * + * **Note:** Available since [v2.15.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.15.0) of **@ui5/webcomponents**. + * @default "None" + */ + wrappingType?: WrappingType | keyof typeof WrappingType; } interface SuggestionItemGroupDomRef extends Required, Ui5DomRef {} @@ -81,7 +100,7 @@ interface SuggestionItemGroupPropTypes */ const SuggestionItemGroup = withWebComponent( 'ui5-suggestion-item-group', - ['headerAccessibleName', 'headerText'], + ['headerAccessibleName', 'headerText', 'wrappingType'], [], ['header'], ['move-over', 'move'], diff --git a/packages/main/src/webComponents/TableRow/index.tsx b/packages/main/src/webComponents/TableRow/index.tsx index 00c2d36df18..fbe1a2a3423 100644 --- a/packages/main/src/webComponents/TableRow/index.tsx +++ b/packages/main/src/webComponents/TableRow/index.tsx @@ -27,7 +27,7 @@ interface TableRowAttributes { navigated?: boolean; /** - * Defines the position of the row related to the total number of rows within the table when the `TableVirtualizer` feature is used. + * Defines the 0-based position of the row related to the total number of rows within the table when the `TableVirtualizer` feature is used. * * **Note:** Available since [v2.5.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.5.0) of **@ui5/webcomponents**. * @default undefined diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx index 67bc5088faa..36ef66b8ab1 100644 --- a/packages/main/src/webComponents/ToggleButton/index.tsx +++ b/packages/main/src/webComponents/ToggleButton/index.tsx @@ -98,6 +98,24 @@ interface ToggleButtonAttributes { */ icon?: string | undefined; + /** + * Defines whether the button shows a loading indicator. + * + * **Note:** If set to `true`, a busy indicator component will be displayed on the related button. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default false + */ + loading?: boolean; + + /** + * Specifies the delay in milliseconds before the loading indicator appears within the associated button. + * + * **Note:** Available since [v2.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. + * @default 1000 + */ + loadingDelay?: number; + /** * Determines whether the component is displayed as pressed. * @default false @@ -200,10 +218,11 @@ const ToggleButton = withWebComponent 'design', 'endIcon', 'icon', + 'loadingDelay', 'tooltip', 'type', ], - ['disabled', 'pressed', 'submits'], + ['disabled', 'loading', 'pressed', 'submits'], ['badge'], ['click'], ); diff --git a/packages/main/src/webComponents/UserMenu/index.tsx b/packages/main/src/webComponents/UserMenu/index.tsx index 699b695b511..865a1ff9dc6 100644 --- a/packages/main/src/webComponents/UserMenu/index.tsx +++ b/packages/main/src/webComponents/UserMenu/index.tsx @@ -22,7 +22,7 @@ interface UserMenuAttributes { * You can only set the `opener` attribute to a DOM Reference when using JavaScript. * @default undefined */ - opener?: HTMLElement | string | undefined; + opener?: HTMLElement | string | null | undefined; /** * Defines if the User Menu shows the Edit Accounts option. From d934e246fd58e0b2e3b819ba3dad2644a654fcd4 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 4 Aug 2025 16:31:06 +0200 Subject: [PATCH 3/6] run `ai` wrapper script --- packages/ai/src/components/Button/index.tsx | 26 ++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/packages/ai/src/components/Button/index.tsx b/packages/ai/src/components/Button/index.tsx index eaa88487784..374a4b0726e 100644 --- a/packages/ai/src/components/Button/index.tsx +++ b/packages/ai/src/components/Button/index.tsx @@ -2,11 +2,35 @@ import '@ui5/webcomponents-ai/dist/Button.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; +import type { AIButtonAccessibilityAttributes } from '@ui5/webcomponents-ai/dist/Button.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface ButtonAttributes { + /** + * Defines the additional accessibility attributes that will be applied to the component. + * + * This property allows for fine-tuned control of ARIA attributes for screen reader support. + * It accepts an object with the following optional fields: + * + * - **root**: Accessibility attributes that will be applied to the root element. + * - **hasPopup**: Indicates the availability and type of interactive popup element (such as a menu or dialog). + * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. + * - **roleDescription**: Defines a human-readable description for the button's role. + * Accepts any string value. + * + * - **arrowButton**: Accessibility attributes that will be applied to the arrow (split) button element. + * - **hasPopup**: Indicates the type of popup triggered by the arrow button. + * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. + * - **expanded**: Indicates whether the popup controlled by the arrow button is currently expanded. + * Accepts boolean values: `true` or `false`. + * + * **Note:** Available since [v2.6.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.6.0) of **@ui5/webcomponents-ai**. + * @default {} + */ + accessibilityAttributes?: AIButtonAccessibilityAttributes; + /** * Defines the active state of the arrow button in split mode. * Set to true when the button is in split mode and a menu with additional options @@ -97,7 +121,7 @@ interface ButtonPropTypes */ const Button = withWebComponent( 'ui5-ai-button', - ['design', 'state'], + ['accessibilityAttributes', 'design', 'state'], ['arrowButtonPressed', 'disabled'], [], ['arrow-button-click', 'click'], From c36d076c42b3541056a88b1b260d9814f4df587c Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 5 Aug 2025 09:47:28 +0200 Subject: [PATCH 4/6] Update version-info.json --- config/version-info.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/config/version-info.json b/config/version-info.json index f8f2d93b48f..166ebdf8911 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -54,5 +54,6 @@ "2.9.0": "2.9.0", "2.10.0": "2.10.0", "2.11.0": "2.11.0", - "2.12.0": "2.12.0" + "2.12.0": "2.12.0", + "2.13.1": "2.13.0" } From 953db83b7949a2e467691b29e689a19658b24633 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 5 Aug 2025 15:58:21 +0200 Subject: [PATCH 5/6] ui5wc 2.13.1 --- package.json | 12 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/compat/package.json | 2 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 8 +- yarn.lock | 164 ++++++++++++------------- 7 files changed, 97 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index 643fea94566..33a5607948c 100644 --- a/package.json +++ b/package.json @@ -39,11 +39,11 @@ "@storybook/addon-a11y": "9.1.1", "@storybook/addon-docs": "9.1.1", "@storybook/react-vite": "9.1.1", - "@ui5/webcomponents": "2.13.0", - "@ui5/webcomponents-ai": "2.13.0", - "@ui5/webcomponents-compat": "2.13.0", - "@ui5/webcomponents-fiori": "2.13.0", - "@ui5/webcomponents-icons": "2.13.0", + "@ui5/webcomponents": "2.13.1", + "@ui5/webcomponents-ai": "2.13.1", + "@ui5/webcomponents-compat": "2.13.1", + "@ui5/webcomponents-fiori": "2.13.1", + "@ui5/webcomponents-icons": "2.13.1", "react": "19.1.1", "react-dom": "19.1.1", "remark-gfm": "4.0.1", @@ -65,7 +65,7 @@ "@types/node": "22.17.0", "@types/react": "19.1.9", "@types/react-dom": "19.1.7", - "@ui5/webcomponents-tools": "2.13.0", + "@ui5/webcomponents-tools": "2.13.1", "@vitejs/plugin-react": "4.7.0", "chromatic": "13.1.3", "cssnano": "7.1.0", diff --git a/packages/ai/package.json b/packages/ai/package.json index d34b264481f..515a444a996 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -33,7 +33,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.13.0", + "@ui5/webcomponents-ai": "~2.13.1", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index ab514b20698..1517bd45f0e 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -32,7 +32,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.13.0", + "@ui5/webcomponents-base": "~2.13.1", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/compat/package.json b/packages/compat/package.json index 4f6e8377b43..d9e6b2d52b0 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -41,7 +41,7 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.13.0", + "@ui5/webcomponents-compat": "~2.13.1", "@ui5/webcomponents-react": "~2.13.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index 3c273655151..e244d99121a 100644 --- a/packages/cypress-commands/package.json +++ b/packages/cypress-commands/package.json @@ -23,8 +23,8 @@ "clean": "rimraf dist api-commands.json api-queries.json" }, "peerDependencies": { - "@ui5/webcomponents": "~2.13.0", - "@ui5/webcomponents-base": "~2.13.0", + "@ui5/webcomponents": "~2.13.1", + "@ui5/webcomponents-base": "~2.13.1", "cypress": "^12 || ^13 || ^14" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index 856e51bf182..9e70d38a09a 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -57,10 +57,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.13.0", - "@ui5/webcomponents-base": "~2.13.0", - "@ui5/webcomponents-fiori": "~2.13.0", - "@ui5/webcomponents-icons": "~2.13.0", + "@ui5/webcomponents": "~2.13.1", + "@ui5/webcomponents-base": "~2.13.1", + "@ui5/webcomponents-fiori": "~2.13.1", + "@ui5/webcomponents-icons": "~2.13.1", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/yarn.lock b/yarn.lock index e5920d5f4c8..45f92dd0337 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4552,42 +4552,42 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.13.0 + "@ui5/webcomponents-ai": ~2.13.1 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-ai@npm:2.13.0" +"@ui5/webcomponents-ai@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-ai@npm:2.13.1" dependencies: - "@ui5/webcomponents": "npm:2.13.0" - "@ui5/webcomponents-base": "npm:2.13.0" - "@ui5/webcomponents-icons": "npm:2.13.0" - "@ui5/webcomponents-theming": "npm:2.13.0" - checksum: 10c0/bade0fdadb9f5a6cfdac52b3516f1197f17622cd511a15a2657f0c3e048a3efe6f6c0ce5a5ad055cfc02b7d6c9d40330a5e6ccadbb6a5af9f26c3da5111d9cdb + "@ui5/webcomponents": "npm:2.13.1" + "@ui5/webcomponents-base": "npm:2.13.1" + "@ui5/webcomponents-icons": "npm:2.13.1" + "@ui5/webcomponents-theming": "npm:2.13.1" + checksum: 10c0/0ff530fa0209711b028c89aa54b3d61982cbd17d40509ac940c7d07dd628d4f6d2fe35e477a26d8ba3a176ffef9b90bcf745eece8c802b3d29c4e57a99f9394f languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-base@npm:2.13.0" +"@ui5/webcomponents-base@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-base@npm:2.13.1" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/6e45b8cdd19bd108c82956b53a40e34b5a0dabbe08d8b3b1b5a38b9a4ae6473b95bb1c1ddfa6dc00843b43b5826a3978ccc789897db2e19c56f21363e44e6ca9 + checksum: 10c0/e06d38958ba6d7abc8da92db847c45fe7757a034133f88bcfdeed39d4b40b78a11b3648da74aadb66f15e027e5215b304646f72a0577ed77a457f9f9e90d5fad languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-compat@npm:2.13.0" +"@ui5/webcomponents-compat@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-compat@npm:2.13.1" dependencies: - "@ui5/webcomponents": "npm:2.13.0" - "@ui5/webcomponents-base": "npm:2.13.0" - "@ui5/webcomponents-icons": "npm:2.13.0" - "@ui5/webcomponents-theming": "npm:2.13.0" - checksum: 10c0/5f9c6dc508601bd2c64a37eeec50b2617a3c675500a129c4d466fd62dfd630f7257754f9c4ca89db2346023c222a299c3373e653dc7e7ee94ccd4062f8a00125 + "@ui5/webcomponents": "npm:2.13.1" + "@ui5/webcomponents-base": "npm:2.13.1" + "@ui5/webcomponents-icons": "npm:2.13.1" + "@ui5/webcomponents-theming": "npm:2.13.1" + checksum: 10c0/89754ab38943c309067e52bd2de777e1afb3b4b44e5aadb8e16d3a0c79cfcfb98ccc5de4166fd9a40d3f2cc1a69976f1d309d8bce43d7146a1f4c65dbf574546 languageName: node linkType: hard @@ -4595,8 +4595,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.13.0 - "@ui5/webcomponents-base": ~2.13.0 + "@ui5/webcomponents": ~2.13.1 + "@ui5/webcomponents-base": ~2.13.1 cypress: ^12 || ^13 || ^14 peerDependenciesMeta: "@ui5/webcomponents": @@ -4606,53 +4606,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-fiori@npm:2.13.0" +"@ui5/webcomponents-fiori@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-fiori@npm:2.13.1" dependencies: - "@ui5/webcomponents": "npm:2.13.0" - "@ui5/webcomponents-base": "npm:2.13.0" - "@ui5/webcomponents-icons": "npm:2.13.0" - "@ui5/webcomponents-theming": "npm:2.13.0" + "@ui5/webcomponents": "npm:2.13.1" + "@ui5/webcomponents-base": "npm:2.13.1" + "@ui5/webcomponents-icons": "npm:2.13.1" + "@ui5/webcomponents-theming": "npm:2.13.1" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/acdd08e2bba8498ef4173a1dbd9dcc4c1553242fda28376da9cc01793da00fbd3ec89bf5497ef9d9e6608e4642680177595b74d242d9b5e1ea6cb0e55afe4704 + checksum: 10c0/023eb6a1a9f044b4b6e9290edfbb4e3392fcb35621f75098d6fdb43b732499b7de63e02c3c5132de7a5d640422caa5a718742634ead5cdcf487e34b57f0250ce languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.13.0" +"@ui5/webcomponents-icons-business-suite@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.13.1" dependencies: - "@ui5/webcomponents-base": "npm:2.13.0" - checksum: 10c0/3b3ba9e147acd96345f0009d99eeaf23f5542f423d11320b334d1511ae526fdf2025b8383f6b96098a1f8469ba3410e275d36a9a55e39524f293e26c715f507b + "@ui5/webcomponents-base": "npm:2.13.1" + checksum: 10c0/2fded9f39e015b3336fd8ad2bcd2f2d5377b56c4c1937b2bfcc0849454c20114371511bed3ef3124b29ee68073abab7277605e0ed6cc7aeada7e605bba0ae847 languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.13.0" +"@ui5/webcomponents-icons-tnt@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.13.1" dependencies: - "@ui5/webcomponents-base": "npm:2.13.0" - checksum: 10c0/177c3ec6372e060e6b9b3331bb595305b54ab61aa3f5cb7b1d69a948c7919e112510dedf9dbaa4ec896d097d8f9233f8096b6f16f75a181615c7b9e168671b16 + "@ui5/webcomponents-base": "npm:2.13.1" + checksum: 10c0/3ecf52cb8cfb1357c350aa7891dcc9c55116d0170d50d78d4003c388d26290fe8deab1b150383a3a403dababf7516ba4538181364760c4037611e02e281dc3b7 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-icons@npm:2.13.0" +"@ui5/webcomponents-icons@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-icons@npm:2.13.1" dependencies: - "@ui5/webcomponents-base": "npm:2.13.0" - checksum: 10c0/745b0409648253f588504e6cad6a88e2ca132f4631c6791159e027879077229326a5bfe166e5b531fa47d4c68b69b65bf65cd55890b79309502b59623d9949e0 + "@ui5/webcomponents-base": "npm:2.13.1" + checksum: 10c0/5728d45ed254f5c1228e51bd467562b38708ea7b99cd01f6ed17cf038259873d1c08222d41aa3bc99cea7919d18601844c86205bc2408c83927c7e50ad289c7d languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-localization@npm:2.13.0" +"@ui5/webcomponents-localization@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-localization@npm:2.13.1" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:2.13.0" - checksum: 10c0/895348be79aba1b779a40dbb7582a898166943bea4a870a13f3257ae67483531e377f891e7a34495d89565a10edab2f494c71971f16b2ea35caddb9db6e4d3b4 + "@ui5/webcomponents-base": "npm:2.13.1" + checksum: 10c0/1246e7f0f9b69adc5984f9a7e477518143e06b565fa08ec9a5ca2419512b9325e87644c8d6ccb77f82a98751b869752ca5fa0615463576cd17ec28bc800ba270 languageName: node linkType: hard @@ -4661,7 +4661,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.13.0 + "@ui5/webcomponents-base": ~2.13.1 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -4705,7 +4705,7 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.13.0 + "@ui5/webcomponents-compat": ~2.13.1 "@ui5/webcomponents-react": ~2.13.0 react: ^18 || ^19 react-dom: ^18 || ^19 @@ -4732,10 +4732,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.13.0 - "@ui5/webcomponents-base": ~2.13.0 - "@ui5/webcomponents-fiori": ~2.13.0 - "@ui5/webcomponents-icons": ~2.13.0 + "@ui5/webcomponents": ~2.13.1 + "@ui5/webcomponents-base": ~2.13.1 + "@ui5/webcomponents-fiori": ~2.13.1 + "@ui5/webcomponents-icons": ~2.13.1 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -4750,19 +4750,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-theming@npm:2.13.0" +"@ui5/webcomponents-theming@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-theming@npm:2.13.1" dependencies: "@sap-theming/theming-base-content": "npm:11.29.3" - "@ui5/webcomponents-base": "npm:2.13.0" - checksum: 10c0/9a4810883822e00eb9ca311a09d04ff91235fdf26c78e6c6d3092058f8c56045d19e88ba4c72ca814d67ee8a6664a3c5e30e12c7ea01d2837dd49bf6144cf383 + "@ui5/webcomponents-base": "npm:2.13.1" + checksum: 10c0/415df491e04b06cd394e8f08b9e4941627068b0003691534d7ecc47ecbe97add2dc31c1dd65273540473a0bfd27804304e68fcfadd3ac2fbb0132bd239c8c029 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents-tools@npm:2.13.0" +"@ui5/webcomponents-tools@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents-tools@npm:2.13.1" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.4" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -4820,21 +4820,21 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/586e6fdfe424663d04b46e41bd533e04de592303081c067cc0badf1c37af6ac95f68740ffda8119109e71b89b7e63d2329ed1c182197fc422bca3676b3c25984 + checksum: 10c0/82f042103bd2441f9a803f7a15e4ba5d0130559ef784801c52979a6a342416b891e95c69fe03e0d4156be00df8537017c8220fb5557ba22b140339e2f5e773ae languageName: node linkType: hard -"@ui5/webcomponents@npm:2.13.0": - version: 2.13.0 - resolution: "@ui5/webcomponents@npm:2.13.0" +"@ui5/webcomponents@npm:2.13.1": + version: 2.13.1 + resolution: "@ui5/webcomponents@npm:2.13.1" dependencies: - "@ui5/webcomponents-base": "npm:2.13.0" - "@ui5/webcomponents-icons": "npm:2.13.0" - "@ui5/webcomponents-icons-business-suite": "npm:2.13.0" - "@ui5/webcomponents-icons-tnt": "npm:2.13.0" - "@ui5/webcomponents-localization": "npm:2.13.0" - "@ui5/webcomponents-theming": "npm:2.13.0" - checksum: 10c0/d93b17a217b851c7a18140c6622610d7c18e097a90967de5e90f8c9bd2b4873f45b9ab2be2632ae98e93f0c97ef1bda5164ce1be87ed78fbab1c4ca4f91bc7ef + "@ui5/webcomponents-base": "npm:2.13.1" + "@ui5/webcomponents-icons": "npm:2.13.1" + "@ui5/webcomponents-icons-business-suite": "npm:2.13.1" + "@ui5/webcomponents-icons-tnt": "npm:2.13.1" + "@ui5/webcomponents-localization": "npm:2.13.1" + "@ui5/webcomponents-theming": "npm:2.13.1" + checksum: 10c0/de73634844fa121db4ad3dd109559c830c6136d9254ead0111bf91dc74db0a303dbd21dd099034be0c461001867e65c671272c05b861184d70cf371eaf6de2df languageName: node linkType: hard @@ -19768,12 +19768,12 @@ __metadata: "@types/node": "npm:22.17.0" "@types/react": "npm:19.1.9" "@types/react-dom": "npm:19.1.7" - "@ui5/webcomponents": "npm:2.13.0" - "@ui5/webcomponents-ai": "npm:2.13.0" - "@ui5/webcomponents-compat": "npm:2.13.0" - "@ui5/webcomponents-fiori": "npm:2.13.0" - "@ui5/webcomponents-icons": "npm:2.13.0" - "@ui5/webcomponents-tools": "npm:2.13.0" + "@ui5/webcomponents": "npm:2.13.1" + "@ui5/webcomponents-ai": "npm:2.13.1" + "@ui5/webcomponents-compat": "npm:2.13.1" + "@ui5/webcomponents-fiori": "npm:2.13.1" + "@ui5/webcomponents-icons": "npm:2.13.1" + "@ui5/webcomponents-tools": "npm:2.13.1" "@vitejs/plugin-react": "npm:4.7.0" chromatic: "npm:13.1.3" cssnano: "npm:7.1.0" From 7ff61b989b1abbf3b7f12792241796cc50d69aa1 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 5 Aug 2025 15:58:57 +0200 Subject: [PATCH 6/6] [ci chromatic]