From 75944a7bc4cc3317174e1438fd0f8ac82dc789f5 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Wed, 29 Jul 2026 14:36:38 +0200 Subject: [PATCH] feat: update to UI5 Web Components 2.25.0 --- .../custom-element-manifests/fiori.json | 49 +++- .storybook/custom-element-manifests/main.json | 219 ++++++++++++++---- config/version-info.json | 3 +- package.json | 12 +- packages/ai/package.json | 2 +- packages/base/package.json | 2 +- packages/compat/package.json | 4 +- packages/cypress-commands/package.json | 4 +- packages/main/package.json | 12 +- .../main/src/webComponents/Dialog/index.tsx | 22 +- .../webComponents/DynamicDateRange/index.tsx | 10 +- .../main/src/webComponents/Input/Input.mdx | 15 +- .../src/webComponents/Input/Input.stories.tsx | 16 ++ .../src/webComponents/InputIcon/index.tsx | 65 ++++++ .../src/webComponents/MenuSeparator/index.tsx | 20 +- .../main/src/webComponents/Toolbar/index.tsx | 13 +- .../src/webComponents/ToolbarSelect/index.tsx | 2 + .../ToolbarSelectOption/index.tsx | 10 +- .../main/src/webComponents/UserMenu/index.tsx | 2 +- .../UserSettingsDialog/index.tsx | 46 +++- packages/main/src/webComponents/index.ts | 1 + .../mcp-server/src/utils/component-config.ts | 1 + yarn.lock | 190 +++++++-------- 23 files changed, 535 insertions(+), 185 deletions(-) create mode 100644 packages/main/src/webComponents/InputIcon/index.tsx diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index f4f082f34b1..8ce7e194a25 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -11987,7 +11987,7 @@ "default": "false", "description": "Defines whether the avatar of the selected account is interactive (focusable and pressable).\n\nWhen `false` (default), the avatar is rendered as a non-interactive image\nand is not announced as a button by screen readers.\n\n**Note:** When `showEditButton` is set to `true`, the avatar is treated as interactive\nregardless of this property's value, to preserve the edit affordance.", "privacy": "public", - "_ui5since": "2.25.0" + "_ui5since": "2.24.0" }, { "kind": "field", @@ -14201,6 +14201,16 @@ "description": "Defines, if the User Settings Dialog is opened.", "privacy": "public" }, + { + "kind": "field", + "name": "saveMode", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether the dialog offers Save and Cancel actions in its footer.\n\nWhen true, the footer renders a Save (Emphasized) and a Cancel button\ninstead of the default Close button. Save and Cancel each fire a\ncorresponding event; the application is responsible for closing the\ndialog (typically after persisting or discarding the changes).", + "privacy": "public" + }, { "kind": "field", "name": "showSearchField", @@ -14219,18 +14229,29 @@ "type": { "text": "CustomEvent" }, - "description": "Fired before the settings dialog is closed.", + "description": "Fired before the settings dialog is closed.\n\n**Note:** This event is cancelable via `preventDefault()`, allowing the application to keep the\ndialog open — for example, to prompt the user about unsaved changes before dismissal.", "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": false }, + { + "name": "cancel", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the Cancel button in the footer is clicked.\nThe dialog does not close automatically — the application is responsible\nfor closing it after discarding the changes.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, { "name": "close", "_ui5privacy": "public", "type": { "text": "CustomEvent" }, - "description": "Fired when a settings dialog is closed.", + "description": "Fired when the settings dialog is closed.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false @@ -14241,7 +14262,18 @@ "type": { "text": "CustomEvent" }, - "description": "Fired when a settings dialog is open.", + "description": "Fired when the settings dialog is opened.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": false + }, + { + "name": "save", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the Save button in the footer is clicked.\nThe dialog does not close automatically — the application is responsible\nfor closing it after persisting the changes.", "_ui5Cancelable": false, "_ui5allowPreventDefault": false, "_ui5Bubbles": false @@ -14301,6 +14333,15 @@ "text": "boolean" } }, + { + "description": "Defines whether the dialog offers Save and Cancel actions in its footer.\n\nWhen true, the footer renders a Save (Emphasized) and a Cancel button\ninstead of the default Close button. Save and Cancel each fire a\ncorresponding event; the application is responsible for closing the\ndialog (typically after persisting or discarding the changes).", + "name": "save-mode", + "default": "false", + "fieldName": "saveMode", + "type": { + "text": "boolean" + } + }, { "description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.", "name": "show-search-field", diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json index 2d4e64ef923..5b0929a70ed 100644 --- a/.storybook/custom-element-manifests/main.json +++ b/.storybook/custom-element-manifests/main.json @@ -9338,7 +9338,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", + "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n#### Fullscreen\nWhen the `ui5-dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode\nwith the following keyboard shortcut:\n\n- [Shift] + [Ctrl] + [F] - Toggle fullscreen mode.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`", "name": "Dialog", "cssParts": [ { @@ -9531,6 +9531,17 @@ "privacy": "public", "_ui5since": "1.0.0-rc.10" }, + { + "kind": "field", + "name": "showFullscreenButton", + "type": { + "text": "boolean" + }, + "default": "false", + "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.", + "privacy": "public", + "_ui5since": "2.25.0" + }, { "kind": "field", "name": "state", @@ -9669,6 +9680,15 @@ "text": "boolean" } }, + { + "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.", + "name": "show-fullscreen-button", + "default": "false", + "fieldName": "showFullscreenButton", + "type": { + "text": "boolean" + } + }, { "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.", "name": "state", @@ -9920,6 +9940,17 @@ "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n- \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n- \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`", "name": "DynamicDateRange", "members": [ + { + "kind": "field", + "name": "accessibleNameRef", + "type": { + "text": "string | undefined" + }, + "description": "Receives id(or many ids) of the elements that label the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.25.0" + }, { "kind": "field", "name": "options", @@ -9992,6 +10023,15 @@ } ], "attributes": [ + { + "description": "Receives id(or many ids) of the elements that label the component.", + "name": "accessible-name-ref", + "default": "undefined", + "fieldName": "accessibleNameRef", + "type": { + "text": "string | undefined" + } + }, { "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"", "name": "options", @@ -11211,6 +11251,12 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/IToolbarArrowNavProvider.js", + "declarations": [], + "exports": [] + }, { "kind": "javascript-module", "path": "dist/Icon.js", @@ -11974,6 +12020,99 @@ } ] }, + { + "kind": "javascript-module", + "path": "dist/InputIcon.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\nThe `ui5-input-icon` component represents an interactive icon that can be placed inside an `ui5-input` component.\nUnlike the standard `ui5-icon`, this component provides button-like behavior with hover, focus, and active states,\nmatching the visual style of the input's built-in clear icon.\n\n### Usage\nUse `ui5-input-icon` for interactive icons that users can click (e.g., search, voice input, camera).\nFor decorative icons, use the standard `ui5-icon` component instead.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/InputIcon.js\";`", + "name": "InputIcon", + "members": [ + { + "kind": "field", + "name": "accessibleName", + "type": { + "text": "string | undefined" + }, + "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip.", + "default": "undefined", + "privacy": "public" + }, + { + "kind": "field", + "name": "name", + "type": { + "text": "string | undefined" + }, + "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.", + "default": "undefined", + "privacy": "public" + } + ], + "events": [ + { + "name": "click", + "_ui5privacy": "public", + "type": { + "text": "CustomEvent" + }, + "description": "Fired when the `ui5-input-icon` is activated either with a click/tap or by using the Enter or Space key.", + "_ui5Cancelable": false, + "_ui5allowPreventDefault": false, + "_ui5Bubbles": true + } + ], + "attributes": [ + { + "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip.", + "name": "accessible-name", + "default": "undefined", + "fieldName": "accessibleName", + "type": { + "text": "string | undefined" + } + }, + { + "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.", + "name": "name", + "default": "undefined", + "fieldName": "name", + "type": { + "text": "string | undefined" + } + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-input-icon", + "customElement": true, + "_ui5since": "2.25.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "InputIcon", + "module": "dist/InputIcon.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-input-icon", + "declaration": { + "name": "InputIcon", + "module": "dist/InputIcon.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/Label.js", @@ -15774,9 +15913,9 @@ "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.", "name": "MenuSeparator", "superclass": { - "name": "ListItemBase", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" }, "tagName": "ui5-menu-separator", "customElement": true, @@ -15789,37 +15928,6 @@ "module": "dist/Menu.js" } ], - "events": [ - { - "name": "click", - "_ui5privacy": "public", - "type": { - "text": "CustomEvent", - "references": [ - { - "name": "ListItemBaseClickEventDetail", - "package": "@ui5/webcomponents", - "module": "dist/ListItemBase.js" - } - ] - }, - "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.", - "_ui5Cancelable": false, - "_ui5allowPreventDefault": false, - "_ui5Bubbles": true, - "_ui5since": "2.23.0", - "_ui5parameters": [ - { - "type": { - "text": "Event" - }, - "name": "originalEvent", - "_ui5privacy": "public", - "description": "The original event from the user interaction." - } - ] - } - ], "members": [] } ], @@ -31225,7 +31333,7 @@ "declarations": [ { "kind": "class", - "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`", + "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- [Left]/[Right] - navigate among toolbar items\n- [Home]/[End] - move to first/last toolbar item\n- [Tab] / [Shift]+[Tab] - exit the toolbar\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`", "name": "Toolbar", "slots": [ { @@ -31252,7 +31360,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the accessible ARIA name of the component.\n\n**Note:** It is strongly recommended to always set this property or `accessibleNameRef`\nwhen the toolbar has `role=\"toolbar\"` (i.e. when it contains more than one interactive item).\nWithout an accessible name, screen readers will announce the toolbar without any context,\nmaking it harder for keyboard-only and AT users to understand its purpose.", "default": "undefined", "privacy": "public" }, @@ -31262,7 +31370,7 @@ "type": { "text": "string | undefined" }, - "description": "Receives id(or many ids) of the elements that label the input.", + "description": "Receives id(or many ids) of the elements that label the input.\n\n**Note:** When the toolbar has `role=\"toolbar\"`, at least one of `accessibleName` or\n`accessibleNameRef` should be provided to satisfy WCAG 2.1 success criterion 4.1.2.", "default": "undefined", "privacy": "public" }, @@ -31326,7 +31434,7 @@ ], "attributes": [ { - "description": "Defines the accessible ARIA name of the component.", + "description": "Defines the accessible ARIA name of the component.\n\n**Note:** It is strongly recommended to always set this property or `accessibleNameRef`\nwhen the toolbar has `role=\"toolbar\"` (i.e. when it contains more than one interactive item).\nWithout an accessible name, screen readers will announce the toolbar without any context,\nmaking it harder for keyboard-only and AT users to understand its purpose.", "name": "accessible-name", "default": "undefined", "fieldName": "accessibleName", @@ -31335,7 +31443,7 @@ } }, { - "description": "Receives id(or many ids) of the elements that label the input.", + "description": "Receives id(or many ids) of the elements that label the input.\n\n**Note:** When the toolbar has `role=\"toolbar\"`, at least one of `accessibleName` or\n`accessibleNameRef` should be provided to satisfy WCAG 2.1 success criterion 4.1.2.", "name": "accessible-name-ref", "default": "undefined", "fieldName": "accessibleNameRef", @@ -31739,7 +31847,7 @@ { "kind": "interface", "name": "IToolbarItemContent", - "description": "Interface for the slotted item in `ui5-toolbar-item`.\n\nIt could be any HTMLElement or UI5 Web Component with option to specify custom overflow closing events and overflow behavior.", + "description": "Interface for the slotted item in `ui5-toolbar-item`.\n\nIt could be any HTMLElement or UI5 Web Component with option to specify custom overflow closing events and overflow behavior.\nComponents that also implement `IToolbarArrowNavProvider` can report their internal navigation boundary\nstate to the toolbar for caret-aware arrow-key handling.", "_ui5privacy": "public", "_ui5since": "2.20.0" }, @@ -32086,6 +32194,7 @@ "_ui5Cancelable": true, "_ui5allowPreventDefault": true, "_ui5Bubbles": true, + "_ui5since": "2.25.0", "_ui5parameters": [ { "type": { @@ -32094,6 +32203,14 @@ "name": "selectedOption", "_ui5privacy": "public", "description": "the selected option." + }, + { + "type": { + "text": "HTMLElement" + }, + "name": "selectedToolbarOption", + "_ui5privacy": "public", + "description": "the original toolbar select option." } ] }, @@ -32260,6 +32377,17 @@ "type": { "text": "boolean" } + }, + { + "kind": "field", + "name": "value", + "type": { + "text": "string | undefined" + }, + "description": "Defines the value of the component.", + "default": "undefined", + "privacy": "public", + "_ui5since": "2.25.0" } ], "attributes": [ @@ -32271,6 +32399,15 @@ "type": { "text": "any" } + }, + { + "description": "Defines the value of the component.", + "name": "value", + "default": "undefined", + "fieldName": "value", + "type": { + "text": "string | undefined" + } } ], "superclass": { diff --git a/config/version-info.json b/config/version-info.json index c463b9aacb6..dd1d2802dc1 100644 --- a/config/version-info.json +++ b/config/version-info.json @@ -66,5 +66,6 @@ "2.21.0": "2.21.0", "2.22.0": "2.22.0", "2.23.0": "2.23.0", - "2.24.0": "2.24.0" + "2.24.0": "2.24.0", + "2.25.0": "2.25.0" } diff --git a/package.json b/package.json index f3c64db6998..7ff84ac7c99 100644 --- a/package.json +++ b/package.json @@ -48,11 +48,11 @@ "@storybook/addon-a11y": "10.4.6", "@storybook/addon-docs": "10.4.6", "@storybook/react-vite": "10.4.6", - "@ui5/webcomponents": "2.24.0", - "@ui5/webcomponents-ai": "2.24.0", - "@ui5/webcomponents-compat": "2.24.0", - "@ui5/webcomponents-fiori": "2.24.0", - "@ui5/webcomponents-icons": "2.24.0", + "@ui5/webcomponents": "2.25.0", + "@ui5/webcomponents-ai": "2.25.0", + "@ui5/webcomponents-compat": "2.25.0", + "@ui5/webcomponents-fiori": "2.25.0", + "@ui5/webcomponents-icons": "2.25.0", "react": "19.2.8", "react-dom": "19.2.8", "remark-gfm": "4.0.1", @@ -76,7 +76,7 @@ "@types/node": "24.13.3", "@types/react": "19.2.17", "@types/react-dom": "19.2.3", - "@ui5/webcomponents-tools": "2.24.0", + "@ui5/webcomponents-tools": "2.25.0", "@vitejs/plugin-react": "6.0.4", "chromatic": "17.8.0", "cssnano": "8.0.2", diff --git a/packages/ai/package.json b/packages/ai/package.json index 5ec49a53741..63067ef2a23 100644 --- a/packages/ai/package.json +++ b/packages/ai/package.json @@ -53,7 +53,7 @@ "@ui5/webcomponents-react-base": "workspace:~" }, "peerDependencies": { - "@ui5/webcomponents-ai": "~2.24.0", + "@ui5/webcomponents-ai": "~2.25.0", "react": "^18 || ^19" }, "publishConfig": { diff --git a/packages/base/package.json b/packages/base/package.json index 017a6a4f090..a164e5a2508 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -88,7 +88,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~2.24.0", + "@ui5/webcomponents-base": "~2.25.0", "react": "^18 || ^19" }, "peerDependenciesMeta": { diff --git a/packages/compat/package.json b/packages/compat/package.json index 7c8693af9e7..c1acf023956 100644 --- a/packages/compat/package.json +++ b/packages/compat/package.json @@ -93,8 +93,8 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents-compat": "~2.24.0", - "@ui5/webcomponents-react": "~2.24.0", + "@ui5/webcomponents-compat": "~2.25.0", + "@ui5/webcomponents-react": "~2.25.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json index a6d8d15afc8..fec76772a5c 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.24.0", - "@ui5/webcomponents-base": "~2.24.0", + "@ui5/webcomponents": "~2.25.0", + "@ui5/webcomponents-base": "~2.25.0", "cypress": "^12 || ^13 || ^14 || ^15" }, "peerDependenciesMeta": { diff --git a/packages/main/package.json b/packages/main/package.json index e79ffd9194a..11bdde715e4 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -339,6 +339,10 @@ "types": "./dist/webComponents/Input/index.d.ts", "default": "./dist/webComponents/Input/index.js" }, + "./InputIcon": { + "types": "./dist/webComponents/InputIcon/index.d.ts", + "default": "./dist/webComponents/InputIcon/index.js" + }, "./Label": { "types": "./dist/webComponents/Label/index.d.ts", "default": "./dist/webComponents/Label/index.js" @@ -839,10 +843,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~2.24.0", - "@ui5/webcomponents-base": "~2.24.0", - "@ui5/webcomponents-fiori": "~2.24.0", - "@ui5/webcomponents-icons": "~2.24.0", + "@ui5/webcomponents": "~2.25.0", + "@ui5/webcomponents-base": "~2.25.0", + "@ui5/webcomponents-fiori": "~2.25.0", + "@ui5/webcomponents-icons": "~2.25.0", "react": "^18 || ^19", "react-dom": "^18 || ^19" }, diff --git a/packages/main/src/webComponents/Dialog/index.tsx b/packages/main/src/webComponents/Dialog/index.tsx index 39bd2d0df5e..b1cd280e034 100644 --- a/packages/main/src/webComponents/Dialog/index.tsx +++ b/packages/main/src/webComponents/Dialog/index.tsx @@ -112,6 +112,20 @@ interface DialogAttributes { */ resizable?: boolean; + /** + * Defines whether a fullscreen toggle button is shown in the dialog header. + * When pressed, it toggles the `stretch` property. + * The fullscreen button is not available on phone devices. + * + * **Note:** The fullscreen button is not available on phone devices, + * nor when a custom header slot is provided — the application is expected + * to render its own toggle inside the custom header in those cases. + * + * **Note:** Available since [v2.25.0](https://github.com/UI5/webcomponents/releases/tag/v2.25.0) of **@ui5/webcomponents**. + * @default false + */ + showFullscreenButton?: boolean; + /** * Defines the state of the `Dialog`. * @@ -272,6 +286,12 @@ interface DialogPropTypes * - [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog. * - [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog. * + * #### Fullscreen + * When the `Dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode + * with the following keyboard shortcut: + * + * - [Shift] + [Ctrl] + [F] - Toggle fullscreen mode. + * * * * __Note:__ This is a UI5 Web Component! [Dialog UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/Dialog) | [Repository](https://github.com/UI5/webcomponents) @@ -288,7 +308,7 @@ const Dialog = withWebComponent( 'initialFocus', 'state', ], - ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'stretch'], + ['draggable', 'open', 'preventFocusRestore', 'preventInitialFocus', 'resizable', 'showFullscreenButton', 'stretch'], ['footer', 'header'], ['before-close', 'before-open', 'close', 'open'], ); diff --git a/packages/main/src/webComponents/DynamicDateRange/index.tsx b/packages/main/src/webComponents/DynamicDateRange/index.tsx index d51d85593b0..5c16240f2ba 100644 --- a/packages/main/src/webComponents/DynamicDateRange/index.tsx +++ b/packages/main/src/webComponents/DynamicDateRange/index.tsx @@ -6,6 +6,14 @@ import { withWebComponent } from '@ui5/webcomponents-react-base'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface DynamicDateRangeAttributes { + /** + * Receives id(or many ids) of the elements that label the component. + * + * **Note:** Available since [v2.25.0](https://github.com/UI5/webcomponents/releases/tag/v2.25.0) of **@ui5/webcomponents**. + * @default undefined + */ + accessibleNameRef?: string | undefined; + /** * Defines the options listed as a string, separated by commas and using capital case. * Example: "TODAY, YESTERDAY, DATERANGE" @@ -84,7 +92,7 @@ interface DynamicDateRangePropTypes */ const DynamicDateRange = withWebComponent( 'ui5-dynamic-date-range', - ['options', 'value'], + ['accessibleNameRef', 'options', 'value'], [], [], ['change'], diff --git a/packages/main/src/webComponents/Input/Input.mdx b/packages/main/src/webComponents/Input/Input.mdx index e2e87ba7c86..6027b9f254b 100644 --- a/packages/main/src/webComponents/Input/Input.mdx +++ b/packages/main/src/webComponents/Input/Input.mdx @@ -1,6 +1,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components'; import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { InputIcon } from '../InputIcon'; import { SuggestionItemGroup } from '../SuggestionItemGroup'; import { SuggestionItem } from '../SuggestionItem'; import * as ComponentStories from './Input.stories'; @@ -8,7 +9,7 @@ import { excludePropsForAbstract } from '@sb/utils'; - +
@@ -51,8 +52,20 @@ The `SuggestionItem` represents the suggestion item of the `Input` +### Input with InputIcon + +The `InputIcon` component represents an interactive icon that can be placed inside an `Input` via the `icon` slot. +Unlike the standard `Icon`, it provides button-like behavior with hover, focus, and active states. + + + {SubcomponentsSection} +## InputIcon + + + + ## SuggestionItem diff --git a/packages/main/src/webComponents/Input/Input.stories.tsx b/packages/main/src/webComponents/Input/Input.stories.tsx index b2acc5aa5f1..a1aa699dea3 100644 --- a/packages/main/src/webComponents/Input/Input.stories.tsx +++ b/packages/main/src/webComponents/Input/Input.stories.tsx @@ -2,8 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import InputType from '@ui5/webcomponents/dist/types/InputType.js'; import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; +import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; import { useState } from 'react'; import { Icon } from '../Icon/index.js'; +import { InputIcon } from '../InputIcon/index.js'; import { SuggestionItem } from '../SuggestionItem/index.js'; import { SuggestionItemGroup } from '../SuggestionItemGroup/index.js'; import { Input } from './index.js'; @@ -74,3 +76,17 @@ export const WithSuggestionItem: Story = { ); }, }; + +export const WithInputIcon: Story = { + name: 'with InputIcon', + argTypes: { + icon: { control: { disable: true } }, + }, + args: { + placeholder: 'Search', + icon: , + }, + render: (args) => { + return ; + }, +}; diff --git a/packages/main/src/webComponents/InputIcon/index.tsx b/packages/main/src/webComponents/InputIcon/index.tsx new file mode 100644 index 00000000000..c15d7cab6a5 --- /dev/null +++ b/packages/main/src/webComponents/InputIcon/index.tsx @@ -0,0 +1,65 @@ +'use client'; + +import '@ui5/webcomponents/dist/InputIcon.js'; +import { withWebComponent } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; + +interface InputIconAttributes { + /** + * Defines the accessible name of the icon. + * + * **Note:** This property is used for accessibility purposes and will be announced by screen readers. + * When set, it is also rendered as a native `title` tooltip. + * @default undefined + */ + accessibleName?: string | undefined; + + /** + * Defines the icon name to be displayed. + * + * **Note:** Make sure you import the desired icon before using it. + * @default undefined + */ + name?: string | undefined; +} + +interface InputIconDomRef extends Required, Ui5DomRef {} + +interface InputIconPropTypes extends InputIconAttributes, Omit { + /** + * Fired when the `InputIcon` is activated either with a click/tap or by using the Enter or Space key. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|✅| + */ + onClick?: (event: Ui5CustomEvent) => void; +} + +/** + * The `InputIcon` component represents an interactive icon that can be placed inside an `Input` component. + * Unlike the standard `Icon`, this component provides button-like behavior with hover, focus, and active states, + * matching the visual style of the input's built-in clear icon. + * + * ### Usage + * Use `InputIcon` for interactive icons that users can click (e.g., search, voice input, camera). + * For decorative icons, use the standard `Icon` component instead. + * + * + * + * __Note:__ This is a UI5 Web Component! [InputIcon UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/InputIcon) | [Repository](https://github.com/UI5/webcomponents) + * + * @since [2.25.0](https://github.com/UI5/webcomponents/releases/tag/v2.25.0) of __@ui5/webcomponents__. + */ +const InputIcon = withWebComponent( + 'ui5-input-icon', + ['accessibleName', 'name'], + [], + [], + ['click'], +); + +InputIcon.displayName = 'InputIcon'; + +export { InputIcon }; +export type { InputIconDomRef, InputIconPropTypes }; diff --git a/packages/main/src/webComponents/MenuSeparator/index.tsx b/packages/main/src/webComponents/MenuSeparator/index.tsx index f6c25cdee12..051dbae3665 100644 --- a/packages/main/src/webComponents/MenuSeparator/index.tsx +++ b/packages/main/src/webComponents/MenuSeparator/index.tsx @@ -1,28 +1,14 @@ 'use client'; import '@ui5/webcomponents/dist/MenuSeparator.js'; -import type { ListItemBaseClickEventDetail } from '@ui5/webcomponents/dist/ListItemBase.js'; import { withWebComponent } from '@ui5/webcomponents-react-base'; -import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; +import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base'; interface MenuSeparatorAttributes {} interface MenuSeparatorDomRef extends Required, Ui5DomRef {} -interface MenuSeparatorPropTypes extends MenuSeparatorAttributes, Omit { - /** - * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key. - * - * **Note:** The event will not be fired if the `disabled` property is set to `true`. - * - * **Note:** Available since [v2.23.0](https://github.com/UI5/webcomponents/releases/tag/v2.23.0) of **@ui5/webcomponents**. - * - * | cancelable | bubbles | - * | :--------: | :-----: | - * | ❌|✅| - */ - onClick?: (event: Ui5CustomEvent) => void; -} +interface MenuSeparatorPropTypes extends MenuSeparatorAttributes, CommonProps {} /** * The `MenuSeparator` represents a horizontal line to separate menu items inside a `Menu`. @@ -36,7 +22,7 @@ const MenuSeparator = withWebComponent, Ui5DomRef {} @@ -37,7 +45,7 @@ interface ToolbarSelectOptionPropTypes */ const ToolbarSelectOption = withWebComponent( 'ui5-toolbar-select-option', - [], + ['value'], ['selected'], [], [], diff --git a/packages/main/src/webComponents/UserMenu/index.tsx b/packages/main/src/webComponents/UserMenu/index.tsx index 76abbb7f2aa..2e0e1e5508a 100644 --- a/packages/main/src/webComponents/UserMenu/index.tsx +++ b/packages/main/src/webComponents/UserMenu/index.tsx @@ -19,7 +19,7 @@ interface UserMenuAttributes { * **Note:** When `showEditButton` is set to `true`, the avatar is treated as interactive * regardless of this property's value, to preserve the edit affordance. * - * **Note:** Available since [v2.25.0](https://github.com/UI5/webcomponents/releases/tag/v2.25.0) of **@ui5/webcomponents-fiori**. + * **Note:** Available since [v2.24.0](https://github.com/UI5/webcomponents/releases/tag/v2.24.0) of **@ui5/webcomponents-fiori**. * @default false */ avatarInteractive?: boolean; diff --git a/packages/main/src/webComponents/UserSettingsDialog/index.tsx b/packages/main/src/webComponents/UserSettingsDialog/index.tsx index e8ae0e5aa91..faf816bb974 100644 --- a/packages/main/src/webComponents/UserSettingsDialog/index.tsx +++ b/packages/main/src/webComponents/UserSettingsDialog/index.tsx @@ -19,6 +19,17 @@ interface UserSettingsDialogAttributes { */ open?: boolean; + /** + * Defines whether the dialog offers Save and Cancel actions in its footer. + * + * When true, the footer renders a Save (Emphasized) and a Cancel button + * instead of the default Close button. Save and Cancel each fire a + * corresponding event; the application is responsible for closing the + * dialog (typically after persisting or discarding the changes). + * @default false + */ + saveMode?: boolean; + /** * Defines if the Search Field would be displayed. * @@ -39,8 +50,10 @@ interface UserSettingsDialogPropTypes | 'children' | 'fixedItems' | 'onBeforeClose' + | 'onCancel' | 'onClose' | 'onOpen' + | 'onSave' | 'onSelectionChange' > { /** @@ -67,6 +80,9 @@ interface UserSettingsDialogPropTypes /** * Fired before the settings dialog is closed. * + * **Note:** This event is cancelable via `preventDefault()`, allowing the application to keep the + * dialog open — for example, to prompt the user about unsaved changes before dismissal. + * * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. * * | cancelable | bubbles | @@ -76,7 +92,18 @@ interface UserSettingsDialogPropTypes onBeforeClose?: (event: Ui5CustomEvent) => void; /** - * Fired when a settings dialog is closed. + * Fired when the Cancel button in the footer is clicked. + * The dialog does not close automatically — the application is responsible + * for closing it after discarding the changes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onCancel?: (event: Ui5CustomEvent) => void; + + /** + * Fired when the settings dialog is closed. * * | cancelable | bubbles | * | :--------: | :-----: | @@ -85,7 +112,7 @@ interface UserSettingsDialogPropTypes onClose?: (event: Ui5CustomEvent) => void; /** - * Fired when a settings dialog is open. + * Fired when the settings dialog is opened. * * | cancelable | bubbles | * | :--------: | :-----: | @@ -93,6 +120,17 @@ interface UserSettingsDialogPropTypes */ onOpen?: (event: Ui5CustomEvent) => void; + /** + * Fired when the Save button in the footer is clicked. + * The dialog does not close automatically — the application is responsible + * for closing it after persisting the changes. + * + * | cancelable | bubbles | + * | :--------: | :-----: | + * | ❌|❌| + */ + onSave?: (event: Ui5CustomEvent) => void; + /** * Fired when an item is selected. * @@ -118,9 +156,9 @@ interface UserSettingsDialogPropTypes const UserSettingsDialog = withWebComponent( 'ui5-user-settings-dialog', ['headerText'], - ['open', 'showSearchField'], + ['open', 'saveMode', 'showSearchField'], ['fixedItems'], - ['before-close', 'close', 'open', 'selection-change'], + ['before-close', 'cancel', 'close', 'open', 'save', 'selection-change'], ); UserSettingsDialog.displayName = 'UserSettingsDialog'; diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts index 0ad9defab07..a5defe5c1c2 100644 --- a/packages/main/src/webComponents/index.ts +++ b/packages/main/src/webComponents/index.ts @@ -47,6 +47,7 @@ export * from './HeroBanner/index.js'; export * from './Icon/index.js'; export * from './IllustratedMessage/index.js'; export * from './Input/index.js'; +export * from './InputIcon/index.js'; export * from './Label/index.js'; export * from './Link/index.js'; export * from './List/index.js'; diff --git a/packages/mcp-server/src/utils/component-config.ts b/packages/mcp-server/src/utils/component-config.ts index 6888bd2d083..625b31569c0 100644 --- a/packages/mcp-server/src/utils/component-config.ts +++ b/packages/mcp-server/src/utils/component-config.ts @@ -96,6 +96,7 @@ export const WEB_COMPONENT_CATEGORIES = { 'DynamicDateRange', 'FileUploader', 'Input', + 'InputIcon', 'MultiComboBox', 'MultiComboBoxItem', 'MultiComboBoxItemCustom', diff --git a/yarn.lock b/yarn.lock index bd961333719..0cb09062075 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5749,26 +5749,26 @@ __metadata: dependencies: "@ui5/webcomponents-react-base": "workspace:~" peerDependencies: - "@ui5/webcomponents-ai": ~2.24.0 + "@ui5/webcomponents-ai": ~2.25.0 react: ^18 || ^19 languageName: unknown linkType: soft -"@ui5/webcomponents-ai@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-ai@npm:2.24.0" +"@ui5/webcomponents-ai@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-ai@npm:2.25.0" dependencies: - "@ui5/webcomponents": "npm:2.24.0" - "@ui5/webcomponents-base": "npm:2.24.0" - "@ui5/webcomponents-icons": "npm:2.24.0" - "@ui5/webcomponents-theming": "npm:2.24.0" - checksum: 10c0/f2e7a66bb209e392b5035c76b11ee6dfc01b5f6b2516d80b8ec87265bf864f550f62b8df1511f88a6966e49623e8dff91ddf72e12189f91100386ee228dbc648 + "@ui5/webcomponents": "npm:2.25.0" + "@ui5/webcomponents-base": "npm:2.25.0" + "@ui5/webcomponents-icons": "npm:2.25.0" + "@ui5/webcomponents-theming": "npm:2.25.0" + checksum: 10c0/8079f0b6cce0c268a0dae85cbec4fa3f4bb25e8fee0c964617f03381714fb2a4d01c9e588ff1e3c8716d194bcded34ef6ceee6ed904bac95a1d0fe5a3b7f0449 languageName: node linkType: hard -"@ui5/webcomponents-base@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-base@npm:2.24.0" +"@ui5/webcomponents-base@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-base@npm:2.25.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" @@ -5777,19 +5777,19 @@ __metadata: peerDependenciesMeta: react: optional: true - checksum: 10c0/4f3eea8575a10842d3b676f3c371697d031410530e2c2f14b8d286cdb0b90544ca38ce9dc0381a0a910c3a1806c4bfe93c8670fbf189cd91fa08c67e3032e0c1 + checksum: 10c0/6e858da3adbb225fea0b9035fc8dc9d534db5055bf911d48b7512d600e7100fd70366461e3641815a440bd509a8aa0d0d9da112fcb59e441bdf9fd81868732ea languageName: node linkType: hard -"@ui5/webcomponents-compat@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-compat@npm:2.24.0" +"@ui5/webcomponents-compat@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-compat@npm:2.25.0" dependencies: - "@ui5/webcomponents": "npm:2.24.0" - "@ui5/webcomponents-base": "npm:2.24.0" - "@ui5/webcomponents-icons": "npm:2.24.0" - "@ui5/webcomponents-theming": "npm:2.24.0" - checksum: 10c0/938496b279784bcba5418d6df2470058e94b6d3dec8df81571fd1a8af04269c5bfb553197948dfa48f39ecbd78ccf927b531f0fe4fb7bb734164f7727a94615b + "@ui5/webcomponents": "npm:2.25.0" + "@ui5/webcomponents-base": "npm:2.25.0" + "@ui5/webcomponents-icons": "npm:2.25.0" + "@ui5/webcomponents-theming": "npm:2.25.0" + checksum: 10c0/60efc22dbff4569377450bd457d24988aa6a96a83eb1cbdba09a3de55c431ceb022b25433a95ebd4bf5041db326e2cdb140e796864dfb133bc66d90ed7b4ad52 languageName: node linkType: hard @@ -5797,8 +5797,8 @@ __metadata: version: 0.0.0-use.local resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands" peerDependencies: - "@ui5/webcomponents": ~2.24.0 - "@ui5/webcomponents-base": ~2.24.0 + "@ui5/webcomponents": ~2.25.0 + "@ui5/webcomponents-base": ~2.25.0 cypress: ^12 || ^13 || ^14 || ^15 peerDependenciesMeta: "@ui5/webcomponents": @@ -5808,53 +5808,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-fiori@npm:2.24.0" +"@ui5/webcomponents-fiori@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-fiori@npm:2.25.0" dependencies: - "@ui5/webcomponents": "npm:2.24.0" - "@ui5/webcomponents-base": "npm:2.24.0" - "@ui5/webcomponents-icons": "npm:2.24.0" - "@ui5/webcomponents-theming": "npm:2.24.0" + "@ui5/webcomponents": "npm:2.25.0" + "@ui5/webcomponents-base": "npm:2.25.0" + "@ui5/webcomponents-icons": "npm:2.25.0" + "@ui5/webcomponents-theming": "npm:2.25.0" "@zxing/library": "npm:^0.21.3" - checksum: 10c0/e7982e7d6a7a26f42c32474290d4fd90de3179a5b3accb5b9502a832eca0d100f93c0ac8f4cf41c0e20e5720fe73f9bb5309d39aa9ca0283488c96205f6b543c + checksum: 10c0/2fd0525bcd8e6e77451e8fe3546034ce43aebf11396a2d038f249d520975fde8db483842b6352fad07c9e3fe7afa7a899ece1deb4148d59dc59ab4ea82da2dcf languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:2.24.0" +"@ui5/webcomponents-icons-business-suite@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:2.25.0" dependencies: - "@ui5/webcomponents-base": "npm:2.24.0" - checksum: 10c0/4e4ee95cbdf781c128325005032e3aeac6e88427d0b7ed2c77c04e5dbae88a6076e73047a637d8aa39dc4b8caec8c88d8691d4e5215b214fff31474295d78aec + "@ui5/webcomponents-base": "npm:2.25.0" + checksum: 10c0/900fbd5c8d31c6311439f801f040bdd3d80e72383f1326c4cc0d5cb8ad8a2009dc1667578c7fa06b6d049d4b3f720c4947dc6da0699f1ec8d516ccd79f91857e languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:2.24.0" +"@ui5/webcomponents-icons-tnt@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:2.25.0" dependencies: - "@ui5/webcomponents-base": "npm:2.24.0" - checksum: 10c0/5268d30262e12aad3f5f1946bb87b64944f4eb2e2830f656f91992c13c8ae57748efe1463386a16f45bd75691f49ee4d75377c23454b176363516a98b1676687 + "@ui5/webcomponents-base": "npm:2.25.0" + checksum: 10c0/bd02424ba7894bf4b8b33c85cc120cfa9b2f721d11428b94ef3d334a8a0b55dc0e73911627ec7c02aa44373647755090521dd34edfe6454424a6db15fc57daf4 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-icons@npm:2.24.0" +"@ui5/webcomponents-icons@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-icons@npm:2.25.0" dependencies: - "@ui5/webcomponents-base": "npm:2.24.0" - checksum: 10c0/fe6969a7f30b4d131224dec1c7a93e61962e0eb497e189693f89812d0e4e0a171de428befeceaef858d7b0ef1bd9d51263a1afe82a6646ef5c165de94364e554 + "@ui5/webcomponents-base": "npm:2.25.0" + checksum: 10c0/7ad34ccf486c40b0a73f252af9dad4a59f3009c479e105bec69ddfd86d71dbfaaae7efe1594869a240c509f5694ee0e4b5c0831836cda6da96536a34532593ef languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-localization@npm:2.24.0" +"@ui5/webcomponents-localization@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-localization@npm:2.25.0" dependencies: "@types/openui5": "npm:^1.146.0" - "@ui5/webcomponents-base": "npm:2.24.0" - checksum: 10c0/44abac600236aff50c4460064b0b828a0fb498c072d8e02e9898298e52dfae0a76cd74cb560d2a9381792a53894a221026c52dda59ecfcf9b5cb8963195daf19 + "@ui5/webcomponents-base": "npm:2.25.0" + checksum: 10c0/d93d803bc7008022af1d570e4ac05684b0fa60bf14b015456aab83558f7eb5bc267c8329f074d38e74346cb77e9bb7863f9dcfc9837921ac4a3c0a9128058cd4 languageName: node linkType: hard @@ -5863,7 +5863,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~2.24.0 + "@ui5/webcomponents-base": ~2.25.0 react: ^18 || ^19 peerDependenciesMeta: "@types/react": @@ -5905,8 +5905,8 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents-compat": ~2.24.0 - "@ui5/webcomponents-react": ~2.24.0 + "@ui5/webcomponents-compat": ~2.25.0 + "@ui5/webcomponents-react": ~2.25.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5946,10 +5946,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~2.24.0 - "@ui5/webcomponents-base": ~2.24.0 - "@ui5/webcomponents-fiori": ~2.24.0 - "@ui5/webcomponents-icons": ~2.24.0 + "@ui5/webcomponents": ~2.25.0 + "@ui5/webcomponents-base": ~2.25.0 + "@ui5/webcomponents-fiori": ~2.25.0 + "@ui5/webcomponents-icons": ~2.25.0 react: ^18 || ^19 react-dom: ^18 || ^19 peerDependenciesMeta: @@ -5966,29 +5966,29 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-theming@npm:2.24.0" +"@ui5/webcomponents-theming@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-theming@npm:2.25.0" dependencies: "@sap-theming/theming-base-content": "npm:11.36.4" - "@ui5/webcomponents-base": "npm:2.24.0" - checksum: 10c0/43fffe69c4b9b8b77e10012a83a433f81f12a8b7f5a5b66b38f2f881d6c191720cc090ea5b1d5c4e127783dc275c9bd0c3bb9d2c7971e695216f9dac8a38d47b + "@ui5/webcomponents-base": "npm:2.25.0" + checksum: 10c0/7747676f3e19b11933216f865140bd7805bf9ffab101e7e7aa6a869b805a771f5655038a60d86115ced5da3cd04fbd839063616d745a19ae1ce181ca4d625659 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents-tools@npm:2.24.0" +"@ui5/webcomponents-tools@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents-tools@npm:2.25.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.10.10" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" "@typescript-eslint/parser": "npm:^6.9.0" - "@wdio/cli": "npm:^7.19.7" - "@wdio/dot-reporter": "npm:^7.19.7" - "@wdio/local-runner": "npm:^7.19.7" - "@wdio/mocha-framework": "npm:^7.19.7" - "@wdio/spec-reporter": "npm:^7.19.7" - "@wdio/static-server-service": "npm:^7.19.5" + "@wdio/cli": "npm:^7.40.0" + "@wdio/dot-reporter": "npm:^7.40.0" + "@wdio/local-runner": "npm:^7.40.0" + "@wdio/mocha-framework": "npm:^7.40.0" + "@wdio/spec-reporter": "npm:^7.40.0" + "@wdio/static-server-service": "npm:^7.40.0" ajv: "npm:^8.12.0" cem-plugin-vs-code-custom-data-generator: "npm:^1.4.2" chai: "npm:^4.3.4" @@ -6035,21 +6035,21 @@ __metadata: ui5nps: bin/ui5nps.js wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/654b101f70729b81086f686229617a357608238185ea1688bb8b429c25a4d878162f381d16ecb9f46cce980046e8101b1151ecc1b27ccae3d53340d6fc5737a0 + checksum: 10c0/3badbf80e8189b913c2ecb47fc019a4864488154df9b689c64f733762fe54ae8585787fea71e99370a6fd7fdec8ba2cc895ef176004c969a1ba804b9e5fbb515 languageName: node linkType: hard -"@ui5/webcomponents@npm:2.24.0": - version: 2.24.0 - resolution: "@ui5/webcomponents@npm:2.24.0" +"@ui5/webcomponents@npm:2.25.0": + version: 2.25.0 + resolution: "@ui5/webcomponents@npm:2.25.0" dependencies: - "@ui5/webcomponents-base": "npm:2.24.0" - "@ui5/webcomponents-icons": "npm:2.24.0" - "@ui5/webcomponents-icons-business-suite": "npm:2.24.0" - "@ui5/webcomponents-icons-tnt": "npm:2.24.0" - "@ui5/webcomponents-localization": "npm:2.24.0" - "@ui5/webcomponents-theming": "npm:2.24.0" - checksum: 10c0/f768b81419ec7d2b47d7690df6c51da2ed6555e1c7416a806c470ea2cd24d4ea9ca168b85fdc9dd35f0f2e88a773fae3886f2b03f01f4bc0b3b7b3574b270d4c + "@ui5/webcomponents-base": "npm:2.25.0" + "@ui5/webcomponents-icons": "npm:2.25.0" + "@ui5/webcomponents-icons-business-suite": "npm:2.25.0" + "@ui5/webcomponents-icons-tnt": "npm:2.25.0" + "@ui5/webcomponents-localization": "npm:2.25.0" + "@ui5/webcomponents-theming": "npm:2.25.0" + checksum: 10c0/91bcf5dd1699dad73505c47d96c2df90b3c2dd9567fc9c84b48ce38860c0b1642d5e1a6ea3297848edb5084a794a5f58a6c459ca02cfb8de10a98e8e3fbbab3b languageName: node linkType: hard @@ -6366,7 +6366,7 @@ __metadata: languageName: node linkType: hard -"@wdio/cli@npm:^7.19.7": +"@wdio/cli@npm:^7.40.0": version: 7.40.0 resolution: "@wdio/cli@npm:7.40.0" dependencies: @@ -6418,7 +6418,7 @@ __metadata: languageName: node linkType: hard -"@wdio/dot-reporter@npm:^7.19.7": +"@wdio/dot-reporter@npm:^7.40.0": version: 7.40.0 resolution: "@wdio/dot-reporter@npm:7.40.0" dependencies: @@ -6431,7 +6431,7 @@ __metadata: languageName: node linkType: hard -"@wdio/local-runner@npm:^7.19.7": +"@wdio/local-runner@npm:^7.40.0": version: 7.40.0 resolution: "@wdio/local-runner@npm:7.40.0" dependencies: @@ -6461,7 +6461,7 @@ __metadata: languageName: node linkType: hard -"@wdio/mocha-framework@npm:^7.19.7": +"@wdio/mocha-framework@npm:^7.40.0": version: 7.40.0 resolution: "@wdio/mocha-framework@npm:7.40.0" dependencies: @@ -6525,7 +6525,7 @@ __metadata: languageName: node linkType: hard -"@wdio/spec-reporter@npm:^7.19.7": +"@wdio/spec-reporter@npm:^7.40.0": version: 7.40.0 resolution: "@wdio/spec-reporter@npm:7.40.0" dependencies: @@ -6541,7 +6541,7 @@ __metadata: languageName: node linkType: hard -"@wdio/static-server-service@npm:^7.19.5": +"@wdio/static-server-service@npm:^7.40.0": version: 7.40.0 resolution: "@wdio/static-server-service@npm:7.40.0" dependencies: @@ -22245,12 +22245,12 @@ __metadata: "@types/node": "npm:24.13.3" "@types/react": "npm:19.2.17" "@types/react-dom": "npm:19.2.3" - "@ui5/webcomponents": "npm:2.24.0" - "@ui5/webcomponents-ai": "npm:2.24.0" - "@ui5/webcomponents-compat": "npm:2.24.0" - "@ui5/webcomponents-fiori": "npm:2.24.0" - "@ui5/webcomponents-icons": "npm:2.24.0" - "@ui5/webcomponents-tools": "npm:2.24.0" + "@ui5/webcomponents": "npm:2.25.0" + "@ui5/webcomponents-ai": "npm:2.25.0" + "@ui5/webcomponents-compat": "npm:2.25.0" + "@ui5/webcomponents-fiori": "npm:2.25.0" + "@ui5/webcomponents-icons": "npm:2.25.0" + "@ui5/webcomponents-tools": "npm:2.25.0" "@vitejs/plugin-react": "npm:6.0.4" chromatic: "npm:17.8.0" cssnano: "npm:8.0.2"