@ui5/webcomponents 2.25.0 → 2.26.0-rc.0

package/src/i18n/messagebundle.properties

@@ -321,6 +321,12 @@ SELECT_ROLE_DESCRIPTION=Listbox
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 
+#XACT: ARIA announcement prefix for Select dialog accessible name on mobile (without trailing space)
+SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
+
+#XACT: ARIA accessible name for Select's listbox when no explicit label is provided
+SELECT_LISTBOX_LABEL=All Items
+
 #XTXT: MultiComboBox show selected items button accessible name
 SHOW_SELECTED_BUTTON=Show Selected Items Only
 
@@ -948,6 +954,8 @@ TABLE_ROW_ACTIONS=Row Actions
 TABLE_ROW_SINGLE_ACTION=1 row action available
 #XACT: Screenreader announcement when several actions are available
 TABLE_ROW_MULTIPLE_ACTIONS={0} row actions available
+#XTOL: Tooltip of the overflow button that reveals additional row actions
+TABLE_ROW_OVERFLOW_BUTTON=More actions
 #XACT: ARIA description for the row action navigation
 TABLE_NAVIGATION=Navigation
 #XTOL: Tooltip for the AI button in the column header to indicate that the column is generated by AI

package/src/themes/CheckBox.css

@@ -3,7 +3,8 @@
 @import "./FormComponents.css";
 
 :host(:not([hidden])) {
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
 }
 
 :host([required]) {
@@ -11,7 +12,6 @@
 }
 
 :host {
-	overflow: hidden;
 	max-width: 100%;
 	outline: none;
 	border-radius: var(--_ui5_checkbox_border_radius);
@@ -21,6 +21,7 @@
   	-moz-user-select: none;
   	-webkit-user-select: none;
   	-ms-user-select: none;
+	font-size: var(--sapFontSize);
 }
 
 /* disabled */
@@ -49,11 +50,7 @@
 
 /* wrap */
 :host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root {
-	min-height: auto;
-	box-sizing: border-box;
 	align-items: flex-start;
-	padding-top: var(--_ui5_checkbox_root_side_padding);
-	padding-bottom: var(--_ui5_checkbox_root_side_padding);
 }
 
 :host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root .ui5-checkbox-label {
@@ -120,16 +117,15 @@
 	position: relative;
 	display: inline-flex;
 	align-items: center;
+	overflow: hidden;
 	max-width: 100%;
-	min-height: var(--_ui5_checkbox_width_height);
-	min-width: var(--_ui5_checkbox_width_height);
-	padding: 0 var(--_ui5_checkbox_wrapper_padding);
+	padding-block: var(--_ui5_checkbox_root_side_padding);
+	padding-inline: var(--_ui5_checkbox_wrapper_padding);
 	box-sizing: border-box;
 	outline: none;
 	transition: var(--_ui5_checkbox_transition);
 	border: var(--_ui5_checkbox_default_focus_border);
 	border-radius: var(--_ui5_checkbox_border_radius);
-	box-sizing: border-box;
 }
 
 /* focused */
@@ -201,6 +197,7 @@
 	max-width: var(--_ui5_checkbox_inner_width_height);
 	height: var(--_ui5_checkbox_inner_width_height);
 	max-height: var(--_ui5_checkbox_inner_width_height);
+	flex-shrink: 0;
 	border: var(--_ui5_checkbox_inner_border);
 	border-radius: var(--_ui5_checkbox_inner_border_radius);
 	background: var(--_ui5_checkbox_inner_background);
@@ -237,6 +234,7 @@
 	overflow: hidden;
 	pointer-events: none;
 	color: var(--_ui5_checkbox_label_color);
+	font-size: inherit;
 }
 
 .ui5-checkbox-icon {
@@ -257,6 +255,8 @@
 
 :host([display-only]) .ui5-checkbox-display-only-icon-inner [ui5-icon] {
 	color: var(--sapTextColor);
+	width: var(--_ui5_checkbox_icon_size);
+	height: var(--_ui5_checkbox_icon_size);
 }
 
 :host([display-only]) .ui5-checkbox-display-only-icon-inner {

package/src/themes/DatePicker.css

@@ -24,6 +24,10 @@
 	-ms-user-select: none;
 }
 
+:host([show-clear-icon]) {
+	min-width: 15rem;
+}
+
 :host(:not([disabled]):not([readonly]):active) {
 	background: var(--_ui5-datepicker-hover-background);
 }
@@ -41,6 +45,7 @@
 }
 
 :host .ui5-date-picker-input {
+	width: 100%;
 	color: inherit;
 	background-color: inherit;
 	border-radius: inherit;

package/src/themes/RatingIndicator.css

@@ -13,17 +13,19 @@
 	outline: none;
 }
 
-:host([readonly]) {
+:host([readonly]),
+:host([display-only]) {
 	cursor: initial;
 }
 
-:host([readonly]) .ui5-rating-indicator-item-unsel {
+:host([readonly]) .ui5-rating-indicator-item-unsel,
+:host([display-only]) .ui5-rating-indicator-item-unsel {
 	padding-inline: var(--_ui5_rating_indicator_readonly_item_spacing);
 	width: var(--_ui5_rating_indicator_readonly_item_width);
 	height: var(--_ui5_rating_indicator_readonly_item_height);
 }
 
-:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover {
+:host(:not([readonly]):not([disabled]):not([display-only])) .ui5-rating-indicator-root:hover {
 	opacity: .9;
 }
 

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

@@ -1,6 +1,5 @@
 :host {
 	--_ui5_checkbox_wrapper_padding: .8125rem;
-	--_ui5_checkbox_width_height: 3rem;
 	--_ui5_checkbox_transition: unset;
 	--_ui5_checkbox_disabled_opacity: .5;
 	--_ui5_checkbox_border_radius: 0;
@@ -14,7 +13,7 @@
 	--_ui5_checkbox_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	--_ui5_checkbox_focus_border_radius: 0;
 	--_ui5_checkbox_outer_hover_background: transparent;
-	--_ui5_checkbox_inner_width_height: 1.375rem;
+	--_ui5_checkbox_inner_width_height: 1.5714em; /* 1.375rem */
 	--_ui5_checkbox_inner_border: solid .125rem var(--sapField_BorderColor);
 	--_ui5_checkbox_inner_hover_border_color: var(--sapField_HoverBorderColor);
 	--_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_HoverBorderColor);
@@ -36,7 +35,7 @@
 	--_ui5_checkbox_wrapped_focus_inset_block: var(--_ui5_checkbox_focus_position);
 	--_ui5_checkbox_compact_wrapper_padding: .5rem;
 	--_ui5_checkbox_compact_width_height: 2rem;
-	--_ui5_checkbox_compact_inner_size: 1rem;
+	--_ui5_checkbox_compact_inner_size: 1.1429em; /* 1rem */
 	--_ui5_checkbox_compact_focus_position: .375rem;
 	--_ui5_checkbox_label_color: var(--sapContent_LabelColor);
 	--_ui5_checkbox_label_offset: var(--_ui5_checkbox_wrapper_padding);

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

@@ -14,8 +14,8 @@
 	--_ui5_calendar_overlay_width: 16rem;
 
 	--_ui5_checkbox_root_side_padding: .6875rem;
-	--_ui5_checkbox_icon_size: 1rem;
-	--_ui5_checkbox_partially_icon_size: .75rem;
+	--_ui5_checkbox_icon_size: 1.1429em; /* 1rem */
+	--_ui5_checkbox_partially_icon_size: 0.8571em; /* 0.75rem */
 	--_ui5_custom_list_item_rb_min_width: 2.75rem;
 	--_ui5_day_picker_item_width: 2.25rem;
 	--_ui5_day_picker_item_height: 2.875rem;
@@ -194,13 +194,12 @@
 
 		/* CheckBox */
 		--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
-		--_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height);
 		--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
 		--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
 		--_ui5_checkbox_wrapped_focus_inset_block: var(--_ui5_checkbox_focus_position);
 		--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
-		--_ui5_checkbox_icon_size: .75rem;
-		--_ui5_checkbox_partially_icon_size: .5rem;
+		--_ui5_checkbox_icon_size: 0.8571em; /* 0.75rem */
+		--_ui5_checkbox_partially_icon_size: 0.5714em; /* 0.5rem */
 
 		/* ColorPicker */
 		--_ui5_color_picker_slider_progress_container_height: 1.125rem;

package/src/themes/sap_fiori_3/CheckBox-parameters.css

@@ -2,7 +2,6 @@
 
 :host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
-	--_ui5_checkbox_width_height: 2.75rem;
 	--_ui5_checkbox_inner_border: .0625rem solid var(--sapField_BorderColor);
 	--_ui5_checkbox_inner_border_radius: .125rem;
 	--_ui5_checkbox_wrapped_focus_padding: .5rem;

package/src/themes/sap_fiori_3_dark/CheckBox-parameters.css

@@ -2,7 +2,6 @@
 
 :host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
-	--_ui5_checkbox_width_height: 2.75rem;
 	--_ui5_checkbox_inner_border: .0625rem solid var(--sapField_BorderColor);
 	--_ui5_checkbox_inner_border_radius: .125rem;
 	--_ui5_checkbox_wrapped_focus_padding: .5rem;

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

@@ -2,8 +2,7 @@
 
 :host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
-	--_ui5_checkbox_width_height: 2.75rem;
-	--_ui5_checkbox_icon_size: 1rem;
+	--_ui5_checkbox_icon_size: 1.1429em; /* 1rem */
 	--_ui5_checkbox_label_color: var(--sapField_TextColor);
 	/* default checkbox*/
 	--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);

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

@@ -2,8 +2,7 @@
 
 :host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
-	--_ui5_checkbox_width_height: 2.75rem;
-	--_ui5_checkbox_icon_size: 1rem;
+	--_ui5_checkbox_icon_size: 1.1429em; /* 1rem */
 	--_ui5_checkbox_label_color: var(--sapField_TextColor);
 	/* default checkbox*/
 	--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);

package/src/themes/sap_horizon_hcb/CheckBox-parameters.css

@@ -2,8 +2,7 @@
 
 :host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
-	--_ui5_checkbox_width_height: 2.75rem;
-	--_ui5_checkbox_icon_size: 1rem;
+	--_ui5_checkbox_icon_size: 1.1429em; /* 1rem */
 	--_ui5_checkbox_label_color: var(--sapField_TextColor);
 	/* default checkbox*/
 	--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);

package/src/themes/sap_horizon_hcw/CheckBox-parameters.css

@@ -2,8 +2,7 @@
 
 :host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
-	--_ui5_checkbox_width_height: 2.75rem;
-	--_ui5_checkbox_icon_size: 1rem;
+	--_ui5_checkbox_icon_size: 1.1429em; /* 1rem */
 	--_ui5_checkbox_label_color: var(--sapField_TextColor);
 	/* default checkbox*/
 	--_ui5_checkbox_inner_border: solid var(--sapField_BorderWidth) var(--sapField_BorderColor);