@ui5/webcomponents 2.21.0-rc.2 → 2.21.0-rc.4

package/src/themes/ComboBox.css

@@ -8,4 +8,8 @@
 	width: 100%;
 	height: 100%;
 	border-radius: var(--_ui5_input_border_radius);
+}
+
+:host(:not([readonly])) [inner-input] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
 }

package/src/themes/DateTimePickerPopover.css

@@ -4,7 +4,9 @@
 }
 
 :host .ui5-date-picker-popover:not([on-phone]) .ui5-popover-header {
-	width: 20rem;
+	width: 100%;
+	max-width: 100%;
+	display: block;
 }
 
 .ui5-dt-picker-content {

package/src/themes/MultiComboBox.css

@@ -25,7 +25,7 @@
 
 .ui5-multi-combobox-tokenizer {
 	min-width: var(--_ui5_input_tokenizer_min_width);
-	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	height: 100%;
@@ -48,7 +48,9 @@
 }
 
 :host([tokenizer-available]) [inner-input] {
-	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+	padding-inline-start: 0;
+	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
+	min-width: var(--_ui5_input_min_width_tokenizer_available);
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {

package/src/themes/MultiInput.css

@@ -10,7 +10,7 @@
 
 .ui5-multi-input-tokenizer {
 	min-width: var(--_ui5_input_tokenizer_min_width);
-	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	max-width: calc(100% - var(--_ui5_input_min_width_tokenizer_available) - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
 	height: 100%;
@@ -29,7 +29,9 @@
 }
 
 :host([tokenizer-available]) [inner-input] {
-	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+	padding-inline-start: 0;
+	padding-inline-end: var(--_ui5_input_inner_with_tokenizer_padding_inline_end);
+	min-width: var(--_ui5_input_min_width_tokenizer_available);
 }
 
 :host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {

package/src/themes/TableCell.css

@@ -1,7 +1,24 @@
+:host {
+	border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+}
+
+:host([merged]),
+:host([data-border-merged]) {
+	--_ui5_table_cell_merged_border_color: var(--_ui5_table_cell_border_merged) transparent;
+	border-top-color: var(--_ui5_table_cell_merged_border_color, var(--sapList_BorderColor));
+}
+
+:host([merged]) ::slotted(*) {
+	--_ui5_table_cell_merged_content_opacity: var(--_ui5_table_cell_content_merged) 0;
+	opacity: var(--_ui5_table_cell_merged_content_opacity, 1);
+	transition: opacity 300ms ease;
+}
+
 :host([_popin]) {
 	padding-inline-start: 0;
 	padding-inline-end: 0;
 	align-items: center;
+	border-top: none;
 }
 
 :host([_popin]) #popin-header {

package/src/themes/TableCellBase.css

@@ -18,15 +18,4 @@
 :host([tabindex]:focus) {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
-}
-
-:host(#selection-cell) {
-	width: auto;
-	min-width: auto;
-	background-color: inherit;
-}
-
-:host([data-ui5-table-cell-fixed]) {
-	position: sticky;
-	z-index: 1;
 }

package/src/themes/TableHeaderRow.css

@@ -1,6 +1,6 @@
 :host {
 	background: var(--sapList_HeaderBackground);
-	border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+	border-top: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
 	grid-template-rows: auto 0px;
 }

package/src/themes/TableRow.css

@@ -6,9 +6,30 @@
 	background: var(--_ui5_table_row_alternating_background);
 }
 
-:host([aria-selected=true]) {
+:host(:first-of-type) > [ui5-table-cell],
+:host(:first-of-type) > ::slotted([ui5-table-cell]) {
+	border-top: none;
+}
+
+:host(:last-of-type) {
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_TableFooterBorder);
+}
+
+:host([aria-selected="true"]) {
 	background: var(--sapList_SelectionBackgroundColor);
-	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
+	box-shadow: inset 0 calc(-1 * var(--sapList_BorderWidth)) 0 0 var(--sapList_SelectionBorderColor);
+}
+
+:host(:not([_haspopin])) {
+	/* Use CSS Space Toggles until if() or container style queries are widely supported */
+	--_ui5_table_cell_border_merged: ;
+	--_ui5_table_cell_content_merged: ;
+}
+
+:host(:not([_haspopin]):active),
+:host(:not([_haspopin]):focus-within) {
+	/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
+	--_ui5_table_cell_content_merged: initial;
 }
 
 @media (hover: hover) {
@@ -18,10 +39,14 @@
 	:host([_interactive][aria-selected=true]:hover) {
 		background: var(--sapList_Hover_SelectionBackground);
 	}
+	:host(:not([_haspopin]):hover) {
+		/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
+		--_ui5_table_cell_content_merged: initial;
+	}
 }
 
 :host([_interactive][_active]),
-:host([_interactive][aria-selected=true][_active]) {
+:host([_interactive][aria-selected="true"][_active]) {
 	background: var(--sapList_Active_Background);
 }
 
@@ -34,35 +59,34 @@
 }
 
 #popin-cell {
+	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
 	align-content: initial;
 	flex-direction: column;
 	grid-column: 1 / -1;
+	border-top: none;
 }
 
 #navigated-cell {
-	position: sticky;
-	right: 0;
+ 	position: sticky;
+	inset-inline-end: 0;
+	z-index: 1;
+	background-color: inherit;
 	overflow: visible;
 	grid-row: span 2;
 	min-width: 0;
 	padding: 0;
-	background: inherit;
-}
-
-:dir(rtl)#navigated-cell {
-	left: 0;
 }
 
 :host([navigated]) #navigated {
 	position: absolute;
-	inset: 0;
+	inset: -1px 0px 0px 1px;
 	background: var(--sapList_SelectionBorderColor);
 }
 
 :host([tabindex]:focus) #navigated {
 	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 2px;
-	top: 3px;
+	bottom: 3px;
+	top: 2px;
 }
 
 :host([tabindex]:focus) #navigated:dir(rtl) {
@@ -83,19 +107,13 @@
 
 #selection-cell ~ #popin-cell {
 	grid-column-start: 2;
+	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
 }
 
 #actions-cell {
-	display: flex;
-	align-items: center;
 	gap: var(--_ui5_table_row_actions_gap);
 }
 
 #actions-cell:has(+ #navigated-cell) {
-	right: var(--_ui5_table_navigated_cell_width);
-	overflow: auto;
-}
-
-:dir(rtl)#actions-cell:has(+ #navigated-cell) {
-	left: var(--_ui5_table_navigated_cell_width);
+	inset-inline-end: var(--_ui5_table_navigated_cell_width);
 }

package/src/themes/TableRowBase.css

@@ -4,7 +4,6 @@
 	grid-column: 1 / -1;
 	min-height: var(--_ui5_list_item_base_height);
 	box-sizing: content-box;
-	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 	overflow: clip;
 }
 
@@ -18,40 +17,33 @@
 	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 {
+::slotted([ui5-table-cell-base]:first-of-type) {
 	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
 }
 
-#selection-cell + ::slotted([ui5-table-cell-base]:first-of-type),
-#selection-cell ~ #popin-cell {
+#selection-cell + ::slotted([ui5-table-cell-base]:first-of-type) {
 	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
 }
 
-#selection-cell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0;
-	left: 0;
-}
-
-:dir(rtl)#selection-cell {
-	right: 0;
+#selection-cell,
+#actions-cell {
+	background-color: inherit;
+	clip-path: inset(0px 0px 1px 0px); /* selection border should not overlap with sticky cells */
+ 	position: sticky;
+	z-index: 1;
 }
 
-#selection-component {
-	vertical-align: middle;
+#selection-cell {
+	padding: 0;
+	inset-inline-start: 0;
+	min-width: auto;
 }
 
 #actions-cell {
-	position: sticky;
-	right: 0;
-	background-color: inherit;
-	flex-wrap: nowrap;
+	inset-inline-end: 0;
 }
 
-:dir(rtl)#actions-cell {
-	left: 0;
+#selection-cell[tabindex]:focus,
+#actions-cell[tabindex]:focus {
+	clip-path: inset(0px);
 }

package/src/themes/Token.css

@@ -12,6 +12,10 @@
 	margin-inline-end: var(--_ui5_token_right_margin);
 }
 
+:host([last-visible-token]) {
+	margin-inline-end: 0;
+}
+
 :host([overflows]) {
 	display: none;
 }

package/src/themes/Tokenizer.css

@@ -87,7 +87,7 @@
 
 .ui5-tokenizer-more-text {
 	display: inline-block;
-	margin-inline-start: .25rem;
+	margin-inline-start: var(--_ui5_token_right_margin);
 	cursor: pointer;
 	white-space: nowrap;
 	font-size: var(--sapFontSize);

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

@@ -74,7 +74,8 @@
 	--_ui5_input_inner_padding: 0 0.625rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
 	--_ui5_input_inner_space_to_tokenizer: 0.125rem;
-	--_ui5_input_inner_space_to_n_more_text: 0.1875rem;
+	--_ui5_input_inner_space_to_n_more_text: 0.3125rem;
+	--_ui5_input_inner_with_tokenizer_padding_inline_end: 0.3125rem;
 	--_ui5_list_no_data_height: 3rem;
 	--_ui5_list_item_cb_margin_right: 0;
 	--_ui5_list_item_title_size: var(--sapFontLargeSize);
@@ -103,7 +104,7 @@
 	--_ui5_popup_default_header_height: 2.75rem;
 
 	--_ui5_year_picker_item_height: 3rem;
-	--_ui5_tokenizer_padding: 0.25rem;
+	--_ui5_tokenizer_padding: 0.3125rem;
 	--_ui5_token_height: 1.625rem;
 	--_ui5_token_icon_size: .75rem;
 	--_ui5_token_icon_padding: 0.25rem 0.5rem;
@@ -267,9 +268,10 @@
 		/* Input */
 		--_ui5_input_height: var(--sapElement_Compact_Height);
 		--_ui5_input_inner_padding: 0 0.5rem;
-		--_ui5_input_inner_padding_with_icon: 0 0.2rem 0 0.5rem;
+		--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.5rem;
 		--_ui5_input_inner_space_to_tokenizer: 0.125rem;
-		--_ui5_input_inner_space_to_n_more_text: 0.125rem;
+		--_ui5_input_inner_space_to_n_more_text: 0.25rem;
+		--_ui5_input_inner_with_tokenizer_padding_inline_end: 0.25rem;
 		--_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width);
 		--_ui5_input_min_width_tokenizer_available: 2rem;
 
@@ -351,6 +353,9 @@
 		--_ui5-tree-toggle-box-height: 1.5rem;
 		--_ui5-tree-toggle-icon-size: 0.8125rem;
 
+		/* Tokenizer */
+		--_ui5_tokenizer_padding: 0.25rem;
+
 		/* Toolbar */
 		--_ui5-toolbar-separator-height: 1.5rem;
 		--_ui5-toolbar-height: 2rem;