@ui5/webcomponents 2.24.0-rc.1 → 2.24.0-rc.3

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.24.0-rc.1",
+  "version": "2.24.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -340,7 +340,7 @@
             },
             {
               "name": "accessible-role",
-              "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.",
+              "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
               "value": {
                 "type": "\"None\" | \"Toolbar\"",
                 "default": "\"Toolbar\""
@@ -384,7 +384,7 @@
               },
               {
                 "name": "accessible-role",
-                "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.",
+                "description": "Specifies the ARIA role applied to the component for accessibility purposes.\n\n**Note:**\n\n- By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\n- Use the default accessibleRole value \"Toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\n- If there is only one or no active element, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role implies a grouping of multiple interactive controls.",
                 "value": { "type": "\"None\" | \"Toolbar\"" }
               },
               {
@@ -403,6 +403,11 @@
           "description": "### Overview\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n\nYou can choose the type of separator to be used from a number of predefined options.\n\n### Keyboard Handling\nThe `ui5-breadcrumbs` provides advanced keyboard handling.\n\n- [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.\n- [Space],[Enter] - Activates the focused item and triggers the `item-click` event.\n- [Escape] - Closes the drop-down.\n- [Left] - If the drop-down is closed - navigates one item to the left.\n- [Right] - If the drop-down is closed - navigates one item to the right.\n- [Up] - If the drop-down is open - moves focus to the next item.\n- [Down] - If the drop-down is open - moves focus to the previous item.\n- [Home] - Navigates to the first item.\n- [End] - Navigates to the last item.\n---\n\n\n### **Events:**\n - **item-click** - Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "design",
               "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator",
@@ -434,6 +439,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "design",
                 "description": "Defines the visual appearance of the last BreadcrumbsItem.\n\nThe Breadcrumbs supports two visual appearances for the last BreadcrumbsItem:\n- \"Standard\" - displaying the last item as \"current page\" (bold and without separator)\n- \"NoCurrentPage\" - displaying the last item as a regular BreadcrumbsItem, followed by separator",
@@ -2190,6 +2200,55 @@
             ]
           }
         },
+        {
+          "name": "ui5-cb-item-custom",
+          "description": "The `ui5-cb-item-custom` is a combobox item component\nthat allows placing custom content inside a combobox item.\nThe `text` property is used for filtering and auto-complete.\nFor highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.\n---\n\n\n### **Events:**\n - **click** - 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`.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "text",
+              "description": "Defines the text of the component.\nUsed for filtering, autocomplete, and mobile rendering.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.\nUsed for programmatic selection via the `selectedValue` property.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the content of the component."
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "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`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "text",
+                "description": "Defines the text of the component.\nUsed for filtering, autocomplete, and mobile rendering.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.\nUsed for programmatic selection via the `selectedValue` property.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "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`."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-cb-item-group",
           "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-cb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
@@ -3659,7 +3718,7 @@
         },
         {
           "name": "ui5-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` and the header is focused, 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` and the header is focused, 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\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
+          "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\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -6815,6 +6874,55 @@
             ]
           }
         },
+        {
+          "name": "ui5-mcb-item-custom",
+          "description": "The `ui5-mcb-item-custom` is a multi-combobox item component\nthat allows placing custom content inside a multi-combobox item.\nThe `text` property is used for filtering and token display.\nFor highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`.\n---\n\n\n### **Events:**\n - **click** - 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`.\n\n### **Slots:**\n - **default** - Defines the content of the component.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "text",
+              "description": "Defines the text of the component.\nUsed for filtering and token display.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.\nUsed for programmatic selection via selectedValues property.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the content of the component."
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "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`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "text",
+                "description": "Defines the text of the component.\nUsed for filtering and token display.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.\nUsed for programmatic selection via selectedValues property.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "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`."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-mcb-item-group",
           "description": "The `ui5-mcb-item-group` is type of suggestion item,\nthat can be used to split the `ui5-multi-combobox` suggestions into groups.\n---\n\n\n### **Events:**\n - **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-mcb-item-group</code>.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.24.0-rc.1",
+  "version": "2.24.0-rc.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.24.0-rc.1",
-    "@ui5/webcomponents-icons": "2.24.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.24.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.24.0-rc.1",
-    "@ui5/webcomponents-localization": "2.24.0-rc.1",
-    "@ui5/webcomponents-theming": "2.24.0-rc.1"
+    "@ui5/webcomponents-base": "2.24.0-rc.3",
+    "@ui5/webcomponents-icons": "2.24.0-rc.3",
+    "@ui5/webcomponents-icons-business-suite": "2.24.0-rc.3",
+    "@ui5/webcomponents-icons-tnt": "2.24.0-rc.3",
+    "@ui5/webcomponents-localization": "2.24.0-rc.3",
+    "@ui5/webcomponents-theming": "2.24.0-rc.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.24.0-rc.1",
+    "@ui5/webcomponents-tools": "2.24.0-rc.3",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "b9131bd79fbbe253503cb85eae4e013ba46e4313"
+  "gitHead": "4e2fcc7b63a5a9156ecb89f839a698f2a59743b2"
 }

package/src/ComboBoxItemCustomTemplate.tsx

@@ -0,0 +1,10 @@
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type ComboBoxItemCustom from "./ComboBoxItemCustom.js";
+
+export default function ComboBoxItemCustomTemplate(this: ComboBoxItemCustom) {
+	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: ComboBoxItemCustom) {
+	return <slot></slot>;
+}

package/src/ComboBoxPopoverTemplate.tsx

@@ -67,11 +67,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 										return item.items
 											.filter(nestedItem => !!nestedItem)
 											.map(nestedItem =>
-												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
+												<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
 											);
 									}
 									// For regular items
-									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
+									return <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
 								})}
 							</Input>
 						</div>

package/src/DialogTemplate.tsx

@@ -19,10 +19,6 @@ function beforeContent(this: Dialog) {
 				id="ui5-popup-header"
 				role="region"
 				aria-label={this._headerAriaLabel}
-				aria-describedby={this.effectiveAriaDescribedBy}
-				aria-roledescription={this.ariaRoleDescriptionHeaderText}
-				tabIndex={this._headerTabIndex}
-				onKeyDown={this._onDragOrResizeKeyDown}
 				onMouseDown={this._onDragMouseDown}
 				part="header"
 				// state={this.state}
@@ -35,16 +31,6 @@ function beforeContent(this: Dialog) {
 					:
 					<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
 				}
-
-				{this.resizable ?
-					this.draggable ?
-						<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggableAndResizable}</span>
-						:
-						<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextResizable}</span>
-					:
-					this.draggable &&
-						<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggable}</span>
-				}
 			</div>
 		}
 	</>);
@@ -66,9 +52,30 @@ function afterContent(this: Dialog) {
 			<div
 				class="ui5-popup-resize-handle"
 				onMouseDown={this._onResizeMouseDown}
+				title={this._resizeHandleTooltip}
 			>
 				<Icon name={resizeCorner}></Icon>
 			</div>
 		}
+		{this._movable &&
+			<>
+				<span
+					id={`${this._id}-dragResizeHandler`}
+					class="ui5-popup-drag-resize-handler ui5-hidden-text"
+					tabIndex={this._dragResizeHandleTabIndex}
+					role="img"
+					aria-roledescription={this._dragResizeHandleAriaRoleDescription}
+					aria-label={this._dragResizeHandleAriaLabel}
+					aria-describedby={this._dragResizeHandleAriaDescribedBy}
+					onKeyDown={this._onDragOrResizeKeyDown}
+				></span>
+				{this.ariaDescribedByHandlerText &&
+					<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHandlerText}</span>
+				}
+				{this.dialogAriaDescribedByText &&
+					<span id={`${this._id}-dialog-descr`} aria-hidden="true" class="ui5-hidden-text">{this.dialogAriaDescribedByText}</span>
+				}
+			</>
+		}
 	</>);
 }

package/src/MultiComboBoxItemCustomTemplate.tsx

@@ -0,0 +1,22 @@
+import CheckBox from "./CheckBox.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+import type MultiComboBoxItemCustom from "./MultiComboBoxItemCustom.js";
+
+export default function MultiComboBoxItemCustomTemplate(this: MultiComboBoxItemCustom) {
+	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+
+function listItemContent(this: MultiComboBoxItemCustom) {
+	return (
+		<>
+			<CheckBox
+				disabled={this._readonly}
+				checked={this.selected}
+				_accInfo={this.checkBoxAccInfo}
+			/>
+			<div part="content" id="content" class="ui5-li-content">
+				<slot></slot>
+			</div>
+		</>
+	);
+}

package/src/i18n/messagebundle.properties

@@ -832,17 +832,38 @@ MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Additional Actions
 #XACT: ARIA information for the Menu Item loading state
 MENU_ITEM_LOADING=Loading
 
-#XACT: ARIA announcement for roldesecription attribute of Dialog header
-DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interactive Header
+#XACT: ARIA announcement for describedby attribute of resizable Dialog
+DIALOG_ARIA_DESCRIBEDBY_RESIZABLE=Use Shift+Arrow keys to resize
 
-#XACT: ARIA announcement for describedby attribute of resizable Dialog header
-DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Use Shift+Arrow keys to resize
+#XACT: ARIA announcement for describedby attribute of draggable Dialog
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
 
-#XACT: ARIA announcement for describedby attribute of draggable Dialog header
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Use Arrow keys to move
+#XACT: ARIA announcement for describedby attribute of draggable and resizable Dialog
+DIALOG_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
 
-#XACT: ARIA announcement for describedby attribute of draggable and resizable Dialog header
-DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Use Arrow keys to move, Shift+Arrow keys to resize
+#XACT: ARIA announcement for describedby attribute informing users how to reach drag and resize handle
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE_RESIZABLE=Tab to the end of dialog to reach drag and resize handle.
+
+#XACT: ARIA announcement for describedby attribute informing users how to reach drag handle
+DIALOG_ARIA_DESCRIBEDBY_REACH_DRAGGABLE=Tab to the end of dialog to reach drag handle.
+
+#XACT: ARIA announcement for describedby attribute informing users how to reach resize handle
+DIALOG_ARIA_DESCRIBEDBY_REACH_RESIZABLE=Tab to the end of dialog to reach resize handle.
+
+#XACT: Tooltip for the resize handle icon in the Dialog
+DIALOG_RESIZE_HANDLE_TOOLTIP=Drag handle to resize (Shift+Arrow)
+
+#XACT: ARIA label for drag and resize handle
+DIALOG_DRAG_AND_RESIZE_HANDLE_ARIA_LABEL=Drag and resize dialog
+
+#XACT: ARIA label for drag handle
+DIALOG_DRAG_HANDLE_ARIA_LABEL=Drag dialog
+
+#XACT: ARIA label for resize handle
+DIALOG_RESIZE_HANDLE_ARIA_LABEL=Resize dialog
+
+#XACT: ARIA role description for drag/resize handle
+DIALOG_HANDLE_ARIA_ROLEDESCRIPTION=Handle
 
 #XACT: ARIA label for the Dialog header region
 DIALOG_HEADER_ARIA_LABEL=Header

package/src/themes/ComboBoxItemCustom.css

@@ -0,0 +1,14 @@
+:host([ui5-cb-item-custom]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item-custom]) .ui5-li-root {
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item-custom]) .ui5-li-content {
+	padding-bottom: .5rem;
+	padding-top: .5rem;
+	box-sizing: border-box;
+}

package/src/themes/Dialog.css

@@ -102,17 +102,22 @@
 	outline: none;
 }
 
-:host([desktop]) .ui5-popup-header-root:focus:after,
-.ui5-popup-header-root:focus-visible:after {
+.ui5-popup-drag-resize-handler:focus {
+	outline: none;
+}
+
+.ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus)::before {
 	content: '';
 	position: absolute;
-	left: var(--_ui5_dialog_header_focus_left_offset);
-	bottom: var(--_ui5_dialog_header_focus_bottom_offset);
-	right: var(--_ui5_dialog_header_focus_right_offset);
-	top: var(--_ui5_dialog_header_focus_top_offset);
+	inset: var(--_ui5_dialog_focus_outline_offset);
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	border-radius: var(--_ui5_dialog_header_border_radius) var(--_ui5_dialog_header_border_radius) 0 0;
+	border-radius: var(--sapElement_BorderCornerRadius);
 	pointer-events: none;
+	z-index: 5;
+}
+
+:host([resizable]) .ui5-popup-root:has(.ui5-popup-drag-resize-handler:focus)::before {
+	border-end-end-radius: var(--_ui5_dialog_resizable_bottom_right_radius);
 }
 
 :host([stretch]) .ui5-popup-content {

package/src/themes/FormItemSpan.css

@@ -11,7 +11,7 @@
 	--ui5-form-item-label-padding-internal: 0.625rem 0.25rem 0 0.25rem;
 }
 
-@container (max-width: 599px) {
+@container (width < 600px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
@@ -24,7 +24,7 @@
 	}
 }
 
-@container (min-width: 600px) and (max-width: 1023px) {
+@container (600px <= width < 1024px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
@@ -37,7 +37,7 @@
 	}
 }
 
-@container (min-width: 1024px) and (max-width: 1439px) {
+@container (1024px <= width < 1440px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
@@ -50,7 +50,7 @@
 	}
 }
 
-@container (min-width: 1440px) {
+@container (width >= 1440px) {
 	.ui5-form-item,
 	.ui5-form-group {
 		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);

package/src/themes/FormLayout.css

@@ -7,7 +7,7 @@
 */
 
 /* S - 1 column */
-@container (max-width: 599px) {
+@container (width < 600px) {
 	.ui5-form-layout {
 		grid-template-columns: repeat(var(--ui5-form-columns-s), 1fr);
 	}
@@ -30,7 +30,7 @@
 }
 
 /* M  - 1 column by default, up to 2 columns */
-@container (min-width: 600px) and (max-width: 1023px) {
+@container (600px <= width < 1024px) {
 	.ui5-form-layout {
 		grid-template-columns: repeat(var(--ui5-form-columns-m), 1fr);
 	}
@@ -45,7 +45,7 @@
 }
 
 /* L - 2 columns by default, up to 3 columns */
-@container (min-width: 1024px) and (max-width: 1439px) {
+@container (1024px <= width < 1440px) {
 
 	.ui5-form-layout {
 		grid-template-columns: repeat(var(--ui5-form-columns-l), 1fr);
@@ -61,7 +61,7 @@
 }
 
 /* XL - 3 columns by default, up to 6 */
-@container (min-width: 1440px) {
+@container (width >= 1440px) {
 	.ui5-form-layout {
 		grid-template-columns: repeat(var(--ui5-form-columns-xl), 1fr);
 	}

package/src/themes/MultiComboBoxItemCustom.css

@@ -0,0 +1,19 @@
+:host([ui5-mcb-item-custom]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item-custom]) .ui5-li-root {
+	padding-inline-start: 0;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item-custom]) .ui5-li-content {
+	padding-bottom: .5rem;
+	padding-top: .5rem;
+	box-sizing: border-box;
+}
+
+:host([ui5-mcb-item-custom]) [ui5-checkbox] {
+	overflow: visible;
+}

package/src/themes/base/Dialog-parameters.css

@@ -1,8 +1,5 @@
 :host {
-	--_ui5_dialog_header_focus_bottom_offset: 3px;
-	--_ui5_dialog_header_focus_top_offset: 2px;
-	--_ui5_dialog_header_focus_left_offset: 2px;
-	--_ui5_dialog_header_focus_right_offset: 2px;
-	--_ui5_dialog_header_border_radius: 0px;
 	--_ui5_dialog_header_state_line_height: 0.0625rem;
+	--_ui5_dialog_focus_outline_offset: 0.0625rem;
+	--_ui5_dialog_resizable_bottom_right_radius: 1.75rem;
 }

package/src/themes/sap_horizon/Dialog-parameters.css

@@ -1,9 +1 @@
 @import "../base/Dialog-parameters.css";
-
-:host {
-	--_ui5_dialog_header_focus_bottom_offset: 2px;
-	--_ui5_dialog_header_focus_top_offset: 1px;
-	--_ui5_dialog_header_focus_left_offset: 1px;
-	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
-}

package/src/themes/sap_horizon_dark/Dialog-parameters.css

@@ -1,9 +1 @@
 @import "../base/Dialog-parameters.css";
-
-:host {
-	--_ui5_dialog_header_focus_bottom_offset: 2px;
-	--_ui5_dialog_header_focus_top_offset: 1px;
-	--_ui5_dialog_header_focus_left_offset: 1px;
-	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
-}