feat: update to UI5 Web Components 2.21.0 (#8444)

Lukas742 · renovate[bot] · web-flow · commit 09447b817e19 · 2026-04-07T13:49:26.000Z
Co-authored-by: renovate[bot] &lt;29139614+renovate[bot]@users.noreply.github.com&gt;
diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json
@@ -14575,13 +14575,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/fcl-utils/FCLLayout.js",
+      "path": "dist/illustrations/AllIllustrations.js",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "dist/illustrations/AllIllustrations.js",
+      "path": "dist/fcl-utils/FCLLayout.js",
       "declarations": [],
       "exports": []
     },
@@ -14681,6 +14681,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/upload-utils/UploadCollectionBodyDnD.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/FCLLayout.js",
@@ -16965,12 +16971,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/upload-utils/UploadCollectionBodyDnD.js",
-      "declarations": [],
-      "exports": []
     }
   ]
 }
diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
@@ -11,6 +11,8 @@ export const MAPPED_THEMES = [
   { value: 'sap_horizon_dark', title: 'Evening Horizon (Dark)' },
   { value: 'sap_horizon_hcb', title: 'Horizon High Contrast Black' },
   { value: 'sap_horizon_hcw', title: 'Horizon High Contrast White' },
+  { value: 'sap_horizon_auto', title: 'OS Adaptive Horizon Theme' },
+  { value: 'sap_horizon_hc_auto', title: 'OS Adaptive High Contrast Horizon Theme' },
   { value: 'sap_fiori_3', title: 'Quartz Light' },
   { value: 'sap_fiori_3_dark', title: 'Quartz Dark' },
   { value: 'sap_fiori_3_hcb', title: 'Quartz High Contrast Black' },
diff --git a/config/version-info.json b/config/version-info.json
@@ -62,5 +62,6 @@
   "2.17.0": "2.17.0",
   "2.18.0": "2.18.0",
   "2.19.0": "2.19.0",
-  "2.20.0": "2.20.0"
+  "2.20.0": "2.20.0",
+  "2.21.0": "2.21.0"
 }
diff --git a/docs/Welcome.mdx b/docs/Welcome.mdx
@@ -169,6 +169,8 @@ Available Themes:
 - `sap_horizon_dark`
 - `sap_horizon_hcb`
 - `sap_horizon_hcw`
+- `sap_horizon_auto`
+- `sap_horizon_hc_auto`
 
 - `sap_fiori_3`
 - `sap_fiori_3_dark`
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -91,6 +91,8 @@ const config = tseslint.config(
             'sap_horizon_dark',
             'sap_horizon_hcb',
             'sap_horizon_hcw',
+            'sap_horizon_auto',
+            'sap_horizon_hc_auto',
           ],
         },
       ],
diff --git a/examples/nextjs-app/app/components/AppShellBar.tsx b/examples/nextjs-app/app/components/AppShellBar.tsx
@@ -24,6 +24,8 @@ const THEMES = [
   { key: 'sap_horizon_dark', value: 'Evening Horizon (Dark)' },
   { key: 'sap_horizon_hcb', value: 'Horizon High Contrast Black' },
   { key: 'sap_horizon_hcw', value: 'Horizon High Contrast White' },
+  { key: 'sap_horizon_auto', value: 'OS Adaptive Horizon Theme' },
+  { key: 'sap_horizon_hc_auto', value: 'OS Adaptive High Contrast Horizon Theme' },
 ];
 
 export function AppShellBar() {
diff --git a/examples/react-router-ts/app/components/AppShellBar.tsx b/examples/react-router-ts/app/components/AppShellBar.tsx
@@ -22,6 +22,8 @@ const THEMES = [
   { key: 'sap_horizon_dark', value: 'Evening Horizon (Dark)' },
   { key: 'sap_horizon_hcb', value: 'Horizon High Contrast Black' },
   { key: 'sap_horizon_hcw', value: 'Horizon High Contrast White' },
+  { key: 'sap_horizon_auto', value: 'OS Adaptive Horizon Theme' },
+  { key: 'sap_horizon_hc_auto', value: 'OS Adaptive High Contrast Horizon Theme' },
 ];
 
 export function AppShellBar() {
diff --git a/examples/vite-ts/src/AppShell.tsx b/examples/vite-ts/src/AppShell.tsx
@@ -29,6 +29,8 @@ const THEMES = [
   { key: 'sap_horizon_dark', value: 'Evening Horizon (Dark)' },
   { key: 'sap_horizon_hcb', value: 'Horizon High Contrast Black' },
   { key: 'sap_horizon_hcw', value: 'Horizon High Contrast White' },
+  { key: 'sap_horizon_auto', value: 'OS Adaptive Horizon Theme' },
+  { key: 'sap_horizon_hc_auto', value: 'OS Adaptive High Contrast Horizon Theme' },
 ];
 
 function AppShell() {
diff --git a/package.json b/package.json
@@ -44,11 +44,11 @@
     "@storybook/addon-a11y": "10.3.4",
     "@storybook/addon-docs": "10.3.4",
     "@storybook/react-vite": "10.3.4",
-    "@ui5/webcomponents": "2.20.2",
-    "@ui5/webcomponents-ai": "2.20.2",
-    "@ui5/webcomponents-compat": "2.20.2",
-    "@ui5/webcomponents-fiori": "2.20.2",
-    "@ui5/webcomponents-icons": "2.20.2",
+    "@ui5/webcomponents": "2.21.0",
+    "@ui5/webcomponents-ai": "2.21.0",
+    "@ui5/webcomponents-compat": "2.21.0",
+    "@ui5/webcomponents-fiori": "2.21.0",
+    "@ui5/webcomponents-icons": "2.21.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "remark-gfm": "4.0.1",
@@ -72,7 +72,7 @@
     "@types/node": "24.12.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@ui5/webcomponents-tools": "2.20.2",
+    "@ui5/webcomponents-tools": "2.21.0",
     "@vitejs/plugin-react": "6.0.1",
     "chromatic": "16.1.0",
     "cssnano": "7.1.4",
diff --git a/packages/ai/package.json b/packages/ai/package.json
@@ -53,7 +53,7 @@
     "@ui5/webcomponents-react-base": "workspace:~"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-ai": "~2.20.0",
+    "@ui5/webcomponents-ai": "~2.21.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.20.0",
+    "@ui5/webcomponents-base": "~2.21.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {
diff --git a/packages/base/src/styling/ThemingParameters.ts b/packages/base/src/styling/ThemingParameters.ts
@@ -1474,6 +1474,10 @@ export const ThemingParameters = {
   sapChart_Sequence_Neutral_Minus5: 'var(--sapChart_Sequence_Neutral_Minus5)',
   sapChart_Sequence_Neutral_Minus5_TextColor: 'var(--sapChart_Sequence_Neutral_Minus5_TextColor)',
   sapChart_Sequence_Neutral_Minus5_TextShadow: 'var(--sapChart_Sequence_Neutral_Minus5_TextShadow)',
+  sapBreakpoint_S_Min: 'var(--sapBreakpoint_S_Min)',
+  sapBreakpoint_M_Min: 'var(--sapBreakpoint_M_Min)',
+  sapBreakpoint_L_Min: 'var(--sapBreakpoint_L_Min)',
+  sapBreakpoint_XL_Min: 'var(--sapBreakpoint_XL_Min)',
   'sapFontUrl_SAP-icons_ttf': 'var(--sapFontUrl_SAP-icons_ttf)',
   'sapFontUrl_SAP-icons_woff': 'var(--sapFontUrl_SAP-icons_woff)',
   'sapFontUrl_SAP-icons_woff2': 'var(--sapFontUrl_SAP-icons_woff2)',
@@ -1535,8 +1539,5 @@ export const ThemingParameters = {
   sapHighlightTextColor: 'var(--sapHighlightTextColor)',
   sapButton_Emphasized_FontWeight: 'var(--sapButton_Emphasized_FontWeight)',
   sapShell_BackgroundGradient: 'var(--sapShell_BackgroundGradient)',
-  sapBreakpoint_S_Min: 'var(--sapBreakpoint_S_Min)',
-  sapBreakpoint_M_Min: 'var(--sapBreakpoint_M_Min)',
-  sapBreakpoint_L_Min: 'var(--sapBreakpoint_L_Min)',
-  sapBreakpoint_XL_Min: 'var(--sapBreakpoint_XL_Min)',
+  sapAt: 'var(--sapAt)',
 };
diff --git a/packages/charts/package.json b/packages/charts/package.json
@@ -131,8 +131,8 @@
     "recharts": "2.15.4"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.20.0",
-    "@ui5/webcomponents-react-base": "~2.20.0",
+    "@ui5/webcomponents-react": "~2.21.0",
+    "@ui5/webcomponents-react-base": "~2.21.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {
diff --git a/packages/compat/package.json b/packages/compat/package.json
@@ -93,8 +93,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.20.0",
-    "@ui5/webcomponents-react": "~2.20.0",
+    "@ui5/webcomponents-compat": "~2.21.0",
+    "@ui5/webcomponents-react": "~2.21.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
diff --git 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.20.0",
-    "@ui5/webcomponents-base": "~2.20.0",
+    "@ui5/webcomponents": "~2.21.0",
+    "@ui5/webcomponents-base": "~2.21.0",
     "cypress": "^12 || ^13 || ^14 || ^15"
   },
   "peerDependenciesMeta": {
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -820,10 +820,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~2.20.0",
-    "@ui5/webcomponents-base": "~2.20.0",
-    "@ui5/webcomponents-fiori": "~2.20.0",
-    "@ui5/webcomponents-icons": "~2.20.0",
+    "@ui5/webcomponents": "~2.21.0",
+    "@ui5/webcomponents-base": "~2.21.0",
+    "@ui5/webcomponents-fiori": "~2.21.0",
+    "@ui5/webcomponents-icons": "~2.21.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -35,7 +35,8 @@ export const Expandable = (props: CellInstance) => {
     classes: classNames,
   } = webComponentsReactProperties;
   const currentTheme = useCurrentTheme();
-  const shouldRenderButton = currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark';
+  const shouldRenderButton =
+    currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark' || currentTheme === 'sap_horizon_auto';
   const tableColumns = columns.filter(
     ({ id }) =>
       id !== '__ui5wcr__internal_selection_column' &&
diff --git a/packages/main/src/components/Splitter/index.tsx b/packages/main/src/components/Splitter/index.tsx
@@ -287,7 +287,8 @@ const Splitter = forwardRef<HTMLDivElement, SplitterPropTypes>((props, ref) => {
     currentTheme === 'sap_fiori_3_hcb' ||
     currentTheme === 'sap_fiori_3_hcw' ||
     currentTheme === 'sap_horizon_hcb' ||
-    currentTheme === 'sap_horizon_hcw';
+    currentTheme === 'sap_horizon_hcw' ||
+    currentTheme === 'sap_horizon_hc_auto';
 
   return (
     <div
diff --git a/packages/main/src/components/ThemeProvider/ThemeProvider.css b/packages/main/src/components/ThemeProvider/ThemeProvider.css
@@ -2,14 +2,9 @@
 
 @import './Sizes.css';
 @import '../../themes/base.css';
-@import '../../themes/sap_belize.css';
-@import '../../themes/sap_belize_hcb.css';
-@import '../../themes/sap_belize_hcw.css';
 @import '../../themes/sap_fiori_3.css';
 @import '../../themes/sap_fiori_3_dark.css';
 @import '../../themes/sap_fiori_3_hcb.css';
 @import '../../themes/sap_fiori_3_hcw.css';
 @import '../../themes/sap_horizon.css';
-@import '../../themes/sap_horizon_dark.css';
-@import '../../themes/sap_horizon_hcb.css';
-@import '../../themes/sap_horizon_hcw.css';
+@import '../../themes/sap_horizon_hc.css';
diff --git a/packages/main/src/enums/Theme.ts b/packages/main/src/enums/Theme.ts
@@ -7,4 +7,6 @@ export enum Theme {
   sap_horizon_dark = 'sap_horizon_dark',
   sap_horizon_hcb = 'sap_horizon_hcb',
   sap_horizon_hcw = 'sap_horizon_hcw',
+  sap_horizon_auto = 'sap_horizon_auto',
+  sap_horizon_hc_auto = 'sap_horizon_hc_auto',
 }
diff --git a/packages/main/src/themes/sap_belize.css b/packages/main/src/themes/sap_belize.css
diff --git a/packages/main/src/themes/sap_belize_hcb.css b/packages/main/src/themes/sap_belize_hcb.css
diff --git a/packages/main/src/themes/sap_belize_hcw.css b/packages/main/src/themes/sap_belize_hcw.css
diff --git a/packages/main/src/themes/sap_horizon.css b/packages/main/src/themes/sap_horizon.css
@@ -1,4 +1,4 @@
-[data-sap-theme='sap_horizon'] {
+[data-sap-theme^='sap_horizon']:not([data-sap-theme^='sap_horizon_hc']) {
   --_ui5wcr_Toolbar_FocusShadow: inset 0 0 0 0.125rem var(--sapContent_FocusColor);
   --_ui5wcr_Toolbar_FocusOutline: none;
   --_ui5wcr_ActionSheet_HeaderBoxShadow: var(--sapContent_HeaderShadow);
diff --git a/packages/main/src/themes/sap_horizon_dark.css b/packages/main/src/themes/sap_horizon_dark.css
diff --git a/packages/main/src/themes/sap_horizon_hc.css b/packages/main/src/themes/sap_horizon_hc.css
@@ -1,4 +1,4 @@
-[data-sap-theme='sap_horizon_hcb'] {
+[data-sap-theme^='sap_horizon_hc'] {
   --_ui5wcr_Splitter_BarOutline: 0.15rem dotted var(--sapGroup_ContentBorderColor);
   --_ui5wcr_Splitter_BarBorderFocus: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
   --_ui5wcr_Splitter_BarBorderStyle: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
diff --git a/packages/main/src/themes/sap_horizon_hcw.css b/packages/main/src/themes/sap_horizon_hcw.css
diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx
@@ -93,6 +93,18 @@ interface ButtonAttributes {
    */
   endIcon?: string | undefined;
 
+  /**
+   * Associates the button with a form element by the form's `id` attribute.
+   * When set, the button can submit or reset the specified form even if the button
+   * is not a descendant of that form.
+   *
+   * **Note:** This property takes effect only when the button's "type" property is set to "Submit" or "Reset".
+   *
+   * **Note:** Available since [v2.21.0](https://github.com/UI5/webcomponents/releases/tag/v2.21.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  form?: string | undefined;
+
   /**
    * Defines the icon, displayed as graphical element within the component.
    * The SAP-icons font provides numerous options.
@@ -227,6 +239,7 @@ const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
     'accessibleRole',
     'design',
     'endIcon',
+    'form',
     'icon',
     'loadingDelay',
     'tooltip',
diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx
@@ -164,8 +164,6 @@ interface DialogPropTypes
   /**
    * Defines the footer HTML Element.
    *
-   * **Note:** When a `Bar` is used in the footer, you should remove the default dialog's paddings.
-   *
    * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="footer"`).
    * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
    *
@@ -179,8 +177,6 @@ interface DialogPropTypes
   /**
    * Defines the header HTML Element.
    *
-   * **Note:** When a `Bar` is used in the header, you should remove the default dialog's paddings.
-   *
    * **Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.
    * `accessibleName` should be used.
    *
diff --git a/packages/main/src/webComponents/Icon/index.tsx b/packages/main/src/webComponents/Icon/index.tsx
diff --git a/packages/main/src/webComponents/Switch/index.tsx b/packages/main/src/webComponents/Switch/index.tsx
diff --git a/packages/main/src/webComponents/TableCell/index.tsx b/packages/main/src/webComponents/TableCell/index.tsx
diff --git a/packages/main/src/webComponents/TimePicker/index.tsx b/packages/main/src/webComponents/TimePicker/index.tsx
diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -14575,13 +14575,13 @@`
`14575`	`14575`	`},`
`14576`	`14576`	`{`
`14577`	`14577`	`"kind": "javascript-module",`
`14578`		`- "path": "dist/fcl-utils/FCLLayout.js",`
	`14578`	`+ "path": "dist/illustrations/AllIllustrations.js",`
`14579`	`14579`	`"declarations": [],`
`14580`	`14580`	`"exports": []`
`14581`	`14581`	`},`
`14582`	`14582`	`{`
`14583`	`14583`	`"kind": "javascript-module",`
`14584`		`- "path": "dist/illustrations/AllIllustrations.js",`
	`14584`	`+ "path": "dist/fcl-utils/FCLLayout.js",`
`14585`	`14585`	`"declarations": [],`
`14586`	`14586`	`"exports": []`
`14587`	`14587`	`},`
`@@ -14681,6 +14681,12 @@`
`14681`	`14681`	`}`
`14682`	`14682`	`]`
`14683`	`14683`	`},`
	`14684`	`+ {`
	`14685`	`+ "kind": "javascript-module",`
	`14686`	`+ "path": "dist/upload-utils/UploadCollectionBodyDnD.js",`
	`14687`	`+ "declarations": [],`
	`14688`	`+ "exports": []`
	`14689`	`+ },`
`14684`	`14690`	`{`
`14685`	`14691`	`"kind": "javascript-module",`
`14686`	`14692`	`"path": "dist/types/FCLLayout.js",`
`@@ -16965,12 +16971,6 @@`
`16965`	`16971`	`}`
`16966`	`16972`	`}`
`16967`	`16973`	`]`
`16968`		`- },`
`16969`		`- {`
`16970`		`- "kind": "javascript-module",`
`16971`		`- "path": "dist/upload-utils/UploadCollectionBodyDnD.js",`
`16972`		`- "declarations": [],`
`16973`		`- "exports": []`
`16974`	`16974`	`}`
`16975`	`16975`	`]`
`16976`	`16976`	`}`
Original file line number	Diff line number	Diff line change
`@@ -62,5 +62,6 @@`
`62`	`62`	`"2.17.0": "2.17.0",`
`63`	`63`	`"2.18.0": "2.18.0",`
`64`	`64`	`"2.19.0": "2.19.0",`
`65`		`- "2.20.0": "2.20.0"`
	`65`	`+ "2.20.0": "2.20.0",`
	`66`	`+ "2.21.0": "2.21.0"`
`66`	`67`	`}`