@ui5/webcomponents 2.21.0-rc.3 → 2.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.21.0-rc.3",
+  "version": "2.21.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.21.0-rc.3",
-    "@ui5/webcomponents-icons": "2.21.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.21.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.21.0-rc.3",
-    "@ui5/webcomponents-localization": "2.21.0-rc.3",
-    "@ui5/webcomponents-theming": "2.21.0-rc.3"
+    "@ui5/webcomponents-base": "2.21.0",
+    "@ui5/webcomponents-icons": "2.21.0",
+    "@ui5/webcomponents-icons-business-suite": "2.21.0",
+    "@ui5/webcomponents-icons-tnt": "2.21.0",
+    "@ui5/webcomponents-localization": "2.21.0",
+    "@ui5/webcomponents-theming": "2.21.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.21.0-rc.3",
+    "@ui5/webcomponents-tools": "2.21.0",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "a30970028a6aa6511315fc6b9f24e44ace0e66b1"
+  "gitHead": "a0d9146d9d08f171cabe6d826f104897261a139b"
 }

package/src/InputTemplate.tsx

@@ -30,7 +30,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						style={this.styles.innerInput}
 						type={this.inputNativeType}
 						inner-input
-						inner-input-with-icon={!!this.icon.length}
+						inner-input-with-icon={this.iconsCount > 0}
 						disabled={this.disabled}
 						readonly={this._readonly}
 						value={this.value}

package/src/MultiComboBoxTemplate.tsx

@@ -65,6 +65,7 @@ export default function MultiComboBoxTemplate(this: MultiComboBox) {
 				id="ui5-multi-combobox-input"
 				value={this.value}
 				inner-input
+				inner-input-with-icon={this._effectiveShowClearIcon || !!this.icon || !this.readonly}
 				placeholder={this._getPlaceholder}
 				disabled={this.disabled}
 				readonly={this.readonly}

package/src/TableHeaderRowTemplate.tsx

@@ -16,7 +16,6 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 					aria-description={this._selectionCellAriaDescription}
 					aria-colindex={ariaColIndex++}
 					data-ui5-table-selection-cell
-					data-ui5-table-cell-fixed
 					data-ui5-acc-text=""
 				>
 					{ !this._isMultiSelect ?

package/src/TableRowTemplate.tsx

@@ -13,8 +13,8 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				<TableCell id="selection-cell"
 					aria-selected={this._isSelected}
 					aria-colindex={ariaColIndex++}
+					data-border-merged={this._firstVisibleCell?.merged ? "" : null}
 					data-ui5-table-selection-cell
-					data-ui5-table-cell-fixed
 					data-ui5-acc-text=""
 				>
 					{ this._isMultiSelect ?

package/src/themes/Breadcrumbs.css

@@ -51,7 +51,7 @@
     width: var(--sapFontSize);
     height: var(--sapFontSize);
     padding-left: .675rem;
-    vertical-align: text-top;
+    vertical-align: middle;
     color: var(--sapLinkColor);
 }
 
@@ -61,10 +61,11 @@
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
-    vertical-align: middle;
     position: absolute;
     left: 0;
-    bottom: 0;
+    top: 0.1rem;
+    line-height: 1rem;
+    vertical-align: middle;
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link]::part(root),
@@ -78,11 +79,11 @@
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
     content: "";
     position: absolute;
-    border-bottom: 0.0625rem solid;
-    top: 0;
+    height: 0.0725rem;
+    background-color: currentColor;
     left: 0;
-    bottom: 1px;
     right: 0;
+    bottom: 0.3475rem;
 }
 
 .ui5-breadcrumbs-popover {

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;

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

@@ -43,6 +43,7 @@
 @import "./SplitButton-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "../base/Text-parameters.css";
 @import "./TextArea-parameters.css";

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

@@ -43,6 +43,7 @@
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
 @import "../base/Table-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "../base/Text-parameters.css";
 @import "./TextArea-parameters.css";