@ui5/webcomponents 2.10.0-rc.1 → 2.10.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.10.0-rc.1",
+  "version": "2.10.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -452,7 +452,7 @@
         },
         {
           "name": "ui5-button",
-          "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
+          "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.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 text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
           "doc-url": "",
           "attributes": [
             {
@@ -538,7 +538,7 @@
           "events": [
             {
               "name": "click",
-              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+              "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": {
@@ -609,7 +609,7 @@
             "events": [
               {
                 "name": "click",
-                "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+                "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`."
               }
             ]
           }
@@ -1276,7 +1276,7 @@
             },
             {
               "name": "required",
-              "description": "Defines whether the component is required.",
+              "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1351,7 +1351,7 @@
               },
               {
                 "name": "required",
-                "description": "Defines whether the component is required.",
+                "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.",
                 "value": { "type": "boolean" }
               },
               {
@@ -9357,7 +9357,7 @@
         },
         {
           "name": "ui5-toggle-button",
-          "description": "### Overview\n\nThe `ui5-toggle-button` component is an enhanced `ui5-button`\nthat can be toggled between pressed and normal states.\nUsers can use the `ui5-toggle-button` as a switch to turn a setting on or off.\nIt can also be used to represent an independent choice similar to a check box.\n\nClicking or tapping on a `ui5-toggle-button` changes its state to `pressed`. The button returns to\nits initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any `ui5-toggle-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ToggleButton.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
+          "description": "### Overview\n\nThe `ui5-toggle-button` component is an enhanced `ui5-button`\nthat can be toggled between pressed and normal states.\nUsers can use the `ui5-toggle-button` as a switch to turn a setting on or off.\nIt can also be used to represent an independent choice similar to a check box.\n\nClicking or tapping on a `ui5-toggle-button` changes its state to `pressed`. The button returns to\nits initial state when the user clicks or taps on it again.\nBy applying additional custom CSS-styling classes, apps can give a different style to any `ui5-toggle-button`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ToggleButton.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 text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
           "doc-url": "",
           "attributes": [
             {
@@ -9448,7 +9448,7 @@
           "events": [
             {
               "name": "click",
-              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+              "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": {
@@ -9524,7 +9524,7 @@
             "events": [
               {
                 "name": "click",
-                "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
+                "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`."
               }
             ]
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.10.0-rc.1",
+  "version": "2.10.0-rc.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.10.0-rc.1",
-    "@ui5/webcomponents-icons": "2.10.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.10.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.10.0-rc.1",
-    "@ui5/webcomponents-localization": "2.10.0-rc.1",
-    "@ui5/webcomponents-theming": "2.10.0-rc.1"
+    "@ui5/webcomponents-base": "2.10.0-rc.3",
+    "@ui5/webcomponents-icons": "2.10.0-rc.3",
+    "@ui5/webcomponents-icons-business-suite": "2.10.0-rc.3",
+    "@ui5/webcomponents-icons-tnt": "2.10.0-rc.3",
+    "@ui5/webcomponents-localization": "2.10.0-rc.3",
+    "@ui5/webcomponents-theming": "2.10.0-rc.3"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.10.0-rc.1",
+    "@ui5/webcomponents-tools": "2.10.0-rc.3",
     "chromedriver": "^135.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "30fe06a368825d1cdfdccb68e5c5a4806af98a4b"
+  "gitHead": "930bdc688d96e3bacf4b3d77d7e1d5388c90be41"
 }

package/src/AvatarGroupTemplate.tsx

@@ -19,6 +19,7 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
 				<slot onClick={this.onAvatarClick} onui5-click={this.onAvatarUI5Click}></slot>
 
 				{this._customOverflowButton ?
+					// @ts-expect-error
 					<slot onClick={this.onOverflowButtonClick} name="overflowButton"></slot>
 					:
 					<Button

package/src/ButtonTemplate.tsx

@@ -36,7 +36,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			aria-controls={this.accessibilityAttributes.controls}
 			aria-haspopup={this._hasPopup}
 			aria-label={this.ariaLabelText}
-			aria-describedby={this.ariaDescribedbyText}
 			aria-description={this.ariaDescriptionText}
 			title={this.buttonTitle}
 			part="button"
@@ -48,7 +47,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 					name={this.icon}
 					mode="Decorative"
 					part="icon"
-					showTooltip={this.showIconTooltip}
 				/>
 			}
 
@@ -67,10 +65,6 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				/>
 			}
 
-			{this.hasButtonType &&
-				<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{this.buttonTypeText}</span>
-			}
-
 			{this.shouldRenderBadge &&
 				<slot name="badge"/>
 			}

package/src/TableTemplate.tsx

@@ -27,7 +27,7 @@ export default function TableTemplate(this: Table) {
 					<TableRow id="no-data-row">
 						<TableCell id="no-data-cell" data-excluded-from-navigation horizontal-align="Center">
 							{ this.noData.length > 0 ?
-								<slot name="no-data"></slot>
+								<slot name="noData"></slot>
 								:
 								this._effectiveNoDataText
 							}

package/src/i18n/messagebundle.properties

@@ -76,6 +76,9 @@ BUTTON_ARIA_TYPE_REJECT=Negative Action
 #XACT: ARIA announcement for the emphasized button
 BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized
 
+#XACT: ARIA announcement for the warning button
+BUTTON_ARIA_TYPE_ATTENTION=Warning
+
 #XACT: Text for Today item in CalendarLegend
 CAL_LEGEND_TODAY_TEXT=Today
 

package/src/themes/Breadcrumbs.css

@@ -47,7 +47,7 @@
     color: var(--sapLinkColor);
 }
 
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper:focus-within [ui5-link] [ui5-icon] {
     color: var(--_ui5_link_focus_color);
 }
 

package/src/themes/CalendarLegendItem.css

@@ -42,7 +42,20 @@
 
 :host([type="Selected"]) .ui5-calendar-legend-item-box {
 	background: var(--sapContent_Selected_Background);
-	border: 0.0625rem solid var(--sapContent_FocusColor);
+	border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+}
+
+/* Dot in the middle of the box */
+:host([type="Selected"]) .ui5-calendar-legend-item-box::after {
+	content: "";
+	display: var(--_ui5-calendar-legend-item-box-dot-display); /* Dot should be visible only in sap_horizon and sap_horizon_dark themes */
+	width: 0.25rem;
+	height: 0.25rem;
+	background: var(--sapContent_Selected_TextColor);
+	border-radius: 50%;
+	position: relative;
+	inset-block-start: 0.3125rem;
+	inset-inline-end: -0.3125rem;
 }
 
 :host([type="NonWorking"]) .ui5-calendar-legend-item-box {

package/src/themes/CheckBox.css

@@ -5,6 +5,19 @@
 	display: inline-block;
 }
 
+:host([required]) {
+	vertical-align: middle;
+}
+
+:host([required]) .ui5-checkbox-label:after {
+	content:"*";
+	margin-inline-start: .125rem;
+	color: var(--sapField_RequiredColor);
+	font-size: var(--sapFontLargeSize);
+	font-family: var(--sapFontFamily);
+	font-weight: bold;
+}
+
 :host {
 	overflow: hidden;
 	max-width: 100%;

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

@@ -4,4 +4,5 @@
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0;
 	--_ui5-calendar-legend-item-root-width: 7.75rem;
+	--_ui5-calendar-legend-item-box-dot-display: none;
 }

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

@@ -332,7 +332,7 @@
 	--_ui5_year_picker_item_height: 2rem;
 	--_ui5_panel_header_height: 2rem;
 	--_ui5_panel_button_root_height: 2rem;
-	--_ui5_panel_button_root_width: 2.5rem;
+	--_ui5_panel_button_root_width: 2.75rem;
 
 	--_ui5_token_height: 1.25rem;
 	--_ui5_token_right_margin: 0.25rem;

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

@@ -3,4 +3,5 @@
 :root {
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0.125rem;
+	--_ui5-calendar-legend-item-box-dot-display: block;
 }

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

@@ -3,4 +3,5 @@
 :root {
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0.125rem;
+	--_ui5-calendar-legend-item-box-dot-display: block;
 }