@ui5/webcomponents 2.10.0-rc.0 → 2.10.0-rc.2

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/BusyIndicator.css

@@ -91,8 +91,8 @@
 	border-radius: inherit;
 }
 
-:host(:not(:empty)) .ui5-busy-indicator-busy-area {
-	background-color: var(--_ui5_busy_indicator_block_layer);
+:host([active]) ::slotted(*) {
+	opacity: var(--sapContent_DisabledOpacity);	
 }
 
 :host([desktop]) .ui5-busy-indicator-busy-area:focus,

package/src/themes/ListItem.css

@@ -82,7 +82,7 @@
 	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
 }
 
-:host([description]) .ui5-li-root {
+:host([wrapping-type="None"][description]) .ui5-li-root {
 	padding: 1rem;
 }
 
@@ -141,6 +141,10 @@
 	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
 }
 
+:host([icon-end]) .ui5-li-icon {
+	padding-inline-start: var(--_ui5_list_item_icon_padding-inline-end);
+}
+
 .ui5-li-detailbtn,
 .ui5-li-deletebtn {
 	display: flex;
@@ -163,15 +167,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([_selection-mode="SingleStart"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="SingleStart"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="Multiple"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="SingleEnd"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="SingleEnd"]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 
@@ -205,3 +209,64 @@
 :host([highlight="Information"]) .ui5-li-highlight {
 	background: var(--sapInformativeTextColor);
 }
+
+/* wrapping */
+:host([wrapping-type="Normal"][description]),
+:host([wrapping-type="Normal"][has-title][description]),
+:host([wrapping-type="Normal"][has-title][image]) {
+	height: auto;
+	min-height: 5rem;
+}
+
+:host([wrapping-type="Normal"][description]) .ui5-li-content,
+:host([wrapping-type="Normal"][image]) .ui5-li-content {
+	height: auto;
+	min-height: 3rem;
+}
+
+:host([wrapping-type="Normal"][has-title][description]) .ui5-li-title {
+	padding-bottom: .75rem;
+}
+
+:host([wrapping-type="Normal"][additional-text]) .ui5-li-additional-text {
+	padding-inline-start: .75rem;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper {
+	flex-direction: column;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper .ui5-li-additional-text {
+	white-space: normal;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"]) .ui5-li-singlesel-radiobtn {
+	display: flex;
+	align-self: flex-start;
+}
+
+:host([wrapping-type="Normal"][description]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"][description]) .ui5-li-singlesel-radiobtn {
+	margin-top: 0;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-icon,
+:host([wrapping-type="Normal"]) .ui5-li-image {
+	display: flex;
+	align-self: flex-start;
+}
+
+:host([wrapping-type="Normal"][icon-end]) .ui5-li-icon {
+	margin-top: var(--_ui5_list_item_content_vertical_offset);
+}
+
+:host([wrapping-type="Normal"]) ::slotted([ui5-avatar][slot="image"]) {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-detailbtn,
+:host([wrapping-type="Normal"]) .ui5-li-deletebtn {
+	margin-inline-start: .875rem;
+}

package/src/themes/Table.css

@@ -54,6 +54,6 @@
     z-index: 2;
 }
 
-#loading[_is-busy] {
-	background-color: var(--_ui5_busy_indicator_block_layer);
+:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
+    opacity: var(--sapContent_DisabledOpacity);
 }

package/src/themes/TableHeaderRow.css

@@ -2,6 +2,7 @@
     background: var(--sapList_HeaderBackground);
     border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
     border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
+    grid-template-rows: auto 0px;
 }
 
 :host([hidden]) {
@@ -17,4 +18,5 @@
 #popin-cell {
     padding: 0;
     width: 0;
+    height: 0;
 }

package/src/themes/TableRow.css

@@ -79,6 +79,10 @@
 	grid-column: 1 / -2;
 }
 
+#selection-cell ~ #popin-cell {
+	grid-column-start: 2;
+}
+
 #actions-cell {
 	display: flex;
 	align-items: center;

package/src/themes/TableRowBase.css

@@ -5,8 +5,6 @@
 	min-height: var(--_ui5_list_item_base_height);
 	box-sizing: border-box;
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-	border-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-	border-left: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 	overflow: clip;
 }
 
@@ -20,6 +18,17 @@
 	clip-path: inset(var(--sapContent_FocusWidth)); /* focus outline should not overlap sticky cells */
 }
 
+::slotted([ui5-table-cell]:first-of-type),
+::slotted([ui5-table-header-cell]:first-of-type),
+#popin-cell {
+	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
+}
+
+#selection-cell + ::slotted([ui5-table-cell-base]:first-of-type),
+#selection-cell ~ #popin-cell {
+	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
+}
+
 #selection-cell {
 	padding: 0;
 	left: 0;

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

@@ -1,5 +1,4 @@
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 20%);
-}
+}

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

@@ -2,6 +2,7 @@
 	--_ui5_table_cell_valign: center;
 	--_ui5_table_cell_min_width: 2.75rem;
 	--_ui5_table_navigated_cell_width: 0.25rem;
+	--_ui5_first_table_cell_horizontal_padding: 1rem;
 	--_ui5_table_cell_horizontal_padding: 0.5rem;
 	--_ui5_table_cell_vertical_padding: 0.25rem;
 	--_ui5_table_row_actions_gap: 0.25rem;

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

@@ -88,7 +88,7 @@
 	--_ui5_list_item_base_height: var(--sapElement_LineHeight);
 	--_ui5_list_item_base_padding: 0 1rem;
 	--_ui5_list_item_icon_size: 1.125rem;
-	--_ui5_list_item_icon_padding-inline-end: 0.5rem;
+	--_ui5_list_item_icon_padding-inline-end: 0.75rem;
 	--_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding));
 	--_ui5_list_item_content_vertical_offset: calc((var(--_ui5_list_item_base_height) - var(--_ui5_list_item_title_size)) / 2);
 	--_ui5_group_header_list_item_height: 2.75rem;

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -2,7 +2,6 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "./Bar-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,7 +1,6 @@
 @import "./Avatar-parameters.css";
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
-@import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
 @import "../base/CalendarLegend-parameters.css";

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

@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }

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

@@ -2,5 +2,4 @@
 
 :root {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
 }

package/src/themes/sap_fiori_3_hcb/BusyIndicator-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/BusyIndicator-parameters.css";
-
-:root {
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
-}

package/src/themes/sap_fiori_3_hcw/BusyIndicator-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/BusyIndicator-parameters.css";
-
-:root {
-	--_ui5_busy_indicator_block_layer: color-mix(in oklch, transparent, var(--sapBlockLayer_Background) 30%);
-}