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

package/src/themes/RatingIndicator.css

@@ -6,7 +6,7 @@
 }
 
 :host([disabled]) {
-	opacity: .4;
+	opacity: var(--sapContent_DisabledOpacity);
 	cursor: initial;
 	outline: none;
 }
@@ -94,16 +94,16 @@
 
 .ui5-rating-indicator-item [ui5-icon].ui5-rating-indicator-half-icon {
 	position: absolute;
-    inset-inline-start: 50%;
-    color: var(--sapContent_RatedColor);
+	inset-inline-start: 50%;
+	color: var(--sapContent_RatedColor);
 }
 
 .ui5-rating-indicator-half-icon-wrapper {
 	width: 100%;
-    height: 100%;
-    position: absolute;
-    inset-inline-start: -50%;
-    top: 0;
-    z-index: 32;
-    overflow: hidden;
+	height: 100%;
+	position: absolute;
+	inset-inline-start: -50%;
+	top: 0;
+	z-index: 32;
+	overflow: hidden;
 }

package/src/themes/SegmentedButton.css

@@ -8,8 +8,6 @@
 
 .ui5-segmented-button-root {
 	width: inherit;
-	display: grid;
-	grid-template-columns: repeat(var(--_ui5_segmented_btn_items_count), minmax(var(--_ui5_button_base_min_width), 1fr));
 	margin: 0;
 	padding: 0;
 	background-color: var(--sapButton_Background);
@@ -17,6 +15,16 @@
 	box-shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor);
 }
 
+.ui5-segmented-button-root-equal-sized-items {
+	display: grid;
+	grid-template-columns: repeat(var(--_ui5_segmented_btn_items_count), minmax(var(--_ui5_button_base_min_width), 1fr));
+}
+
+.ui5-segmented-button-root-content-fit-items {
+	display: inline-flex;
+	gap: 0;
+}
+
 ::slotted([ui5-segmented-button-item]) {
 	border-radius: var(--sapButton_Segment_BorderCornerRadius);
 	border-color: var(--_ui5_segmented_btn_border_color);

package/src/themes/StepInput.css

@@ -163,25 +163,32 @@
 }
 
 :host .ui5-step-input-root {
-	white-space: nowrap;
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
 	height: inherit;
 }
 
-:host .ui5-step-input-input[text-align=left] {
+:host .ui5-step-input-input::part(input) {
+	white-space: nowrap;
+}
+
+:host .ui5-step-input-input[text-align=left]::part(input) {
 	text-align: left;
 }
 
-:host .ui5-step-input-input[text-align=center] {
+:host .ui5-step-input-input[text-align=center]::part(input) {
 	text-align: center;
 }
 
-:host .ui5-step-input-input[text-align=right] {
+:host .ui5-step-input-input[text-align=right]::part(input) {
 	text-align: right;
 }
 
+::slotted([slot="valueStateMessage"]) {
+	text-align: left;
+}
+
 :host .ui5-step-icon {
 	position: absolute;
 	display: var(--_ui5_step_input_button_display);

package/src/themes/Table.css

@@ -31,20 +31,6 @@
 	justify-content: center;
 }
 
-#footer {
-	grid-column: 1 / -1;
-	grid-template-rows: subgrid;
-	height: fit-content;
-}
-
-#growing-cell {
-	grid-column: 1 / -1;
-	justify-content: center;
-	padding: 0;
-	border-top: 1px solid var(--sapList_BorderColor);
-	box-sizing: border-box;
-}
-
 #loading {
 	position: absolute;
 	inset: 0;

package/src/themes/TableGrowing.css

@@ -1,23 +1,16 @@
 @import "./InvisibleTextStyles.css";
 
-:host {
-	/** Growing Control spans the whole row **/
-	flex-grow: 1;
-}
-
-#button:focus {
-	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
-}
-
 #button {
-	margin: 0;
-	padding: 0;
 	display: flex;
-	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 	cursor: pointer;
+	border-bottom: 1px solid var(--sapList_BorderColor);
+}
+
+#button:focus {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
 }
 
 @media (hover: hover) {
@@ -32,7 +25,7 @@
 }
 
 #text {
-	padding: 1rem 0 1rem 0;
+	padding: 1rem 0;
 	font-size: var(--sapFontSize);
 	color: var(--sapButton_TextColor);
 	font-weight: bold;

package/src/themes/TableHeaderRow.css

@@ -26,6 +26,7 @@
 	height: var(--_ui5_checkbox_inner_width_height);
 }
 
+#popin-cell-content,
 #actions-cell-content {
 	position: absolute;
 	clip: rect(0, 0, 0, 0);

package/src/themes/TableRow.css

@@ -2,19 +2,15 @@
 	background: var(--sapList_Background);
 }
 
-:host([position]) {
-	height: var(--row-height);
+:host([_alternate]) {
+	background: var(--_ui5_table_row_alternating_background);
 }
 
 :host([aria-selected=true]) {
-	background-color: var(--sapList_SelectionBackgroundColor);
+	background: var(--sapList_SelectionBackgroundColor);
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
 }
 
-:host([_interactive]) {
-	cursor: pointer;
-}
-
 @media (hover: hover) {
 	:host([_interactive]:hover) {
 		background: var(--sapList_Hover_Background);
@@ -31,6 +27,14 @@
 	background: var(--sapList_Active_Background);
 }
 
+:host([position]) {
+	height: var(--row-height);
+}
+
+:host([_interactive]) {
+	cursor: pointer;
+}
+
 #popin-cell {
 	align-content: initial;
 	flex-direction: column;
@@ -54,7 +58,7 @@
 :host([navigated]) #navigated {
 	position: absolute;
 	inset: 0;
-	background-color: var(--sapList_SelectionBorderColor);
+	background: var(--sapList_SelectionBorderColor);
 }
 
 :host([tabindex]:focus) #navigated {

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

@@ -1,7 +1,7 @@
 :root {
     --ui5_carousel_background_color_solid: var(--sapGroup_ContentBackground);
     --ui5_carousel_background_color_translucent: var(--sapBackgroundColor);
-    --ui5_carousel_button_size: 2.5rem;
+    --ui5_carousel_button_size: 2.25rem;
     --ui5_carousel_inactive_dot_size: 0.25rem;
     --ui5_carousel_inactive_dot_margin: 0 0.375rem;
     --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);

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

@@ -6,4 +6,8 @@
 	--_ui5_table_cell_horizontal_padding: 0.5rem;
 	--_ui5_table_cell_vertical_padding: 0.25rem;
 	--_ui5_table_row_actions_gap: 0.25rem;
+	--_ui5_table_row_alternating_background: var(--sapTableRow_AlternatingBackground, var(--sapList_AlternatingBackground));
+	--_ui5_table_row_alternating_hover_background: var(--sapTableRow_AlternatingHoverBackground, var(--sapList_Hover_Background));
+	--_ui5_table_row_alternating_selection_background: var(--sapTableRow_AlternatingSelectionBackground, var(--sapList_SelectionBackgroundColor));
+	--_ui5_table_row_alternating_selection_hover_background: var(--sapTableRow_AlternatingSelectionHoverBackground, var(--sapList_Hover_SelectionBackground));
 }

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

@@ -167,7 +167,7 @@
 	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
 
 	/* ShellBar */
-	--_ui5-shellbar-separator-height: 1.5rem;
+	--_ui5-shellbar-separator-height: 2rem;
 }
 
 [data-ui5-compact-size],
@@ -406,5 +406,5 @@
 	--_ui5_dynamic_page_title_actions_separator_height: var(--_ui5-toolbar-separator-height);
 
 	/* ShellBar */
-	--_ui5-shellbar-separator-height: 1.5rem;
+	--_ui5-shellbar-separator-height: 2rem;
 }

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

@@ -1,5 +1,5 @@
 :root {
-    --ui5_carousel_button_size: 2.5rem;
+    --ui5_carousel_button_size: 2.25rem;
     --ui5_carousel_inactive_dot_size: 0.5rem;
     --ui5_carousel_inactive_dot_margin: 0 0.25rem;
     --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);

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

@@ -1,5 +1,5 @@
 :root {
-    --ui5_carousel_button_size: 2.5rem;
+    --ui5_carousel_button_size: 2.25rem;
     --ui5_carousel_inactive_dot_size: 0.5rem;
     --ui5_carousel_inactive_dot_margin: 0 0.25rem;
     --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);

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

@@ -1,5 +1,5 @@
 :root {
-	--ui5_carousel_button_size: 2.5rem;
+	--ui5_carousel_button_size: 2.25rem;
 	--ui5_carousel_inactive_dot_size: 0.5rem;
 	--ui5_carousel_inactive_dot_margin: 0 0.25rem;
 	--ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);

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

@@ -1,5 +1,5 @@
 :root {
-    --ui5_carousel_button_size: 2.5rem;
+    --ui5_carousel_button_size: 2.25rem;
     --ui5_carousel_inactive_dot_size: 0.5rem;
     --ui5_carousel_inactive_dot_margin: 0 0.25rem;
     --ui5_carousel_inactive_dot_border: 1px solid var(--sapContent_ForegroundBorderColor);