@ui5/webcomponents 2.6.2-rc.0 → 2.7.0-rc.0

package/src/i18n/messagebundle_vi.properties

@@ -116,7 +116,7 @@ DELETE=Xóa
 EMPTY_INDICATOR_SYMBOL=–
 EMPTY_INDICATOR_ACCESSIBLE_TEXT=Giá trị trống
 
-EXPANDABLE_TEXT_SHOW_MORE=Hiển thị thêm
+EXPANDABLE_TEXT_SHOW_MORE=Hiển thị nhiều hơn
 
 EXPANDABLE_TEXT_SHOW_LESS=Hiển thị ít hơn
 
@@ -174,15 +174,15 @@ ARIA_LABEL_LIST_MULTISELECTABLE=Chứa mục có đa lựa chọn
 
 ARIA_LABEL_LIST_DELETABLE=Chứa mục có thể xóa
 
-MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Information Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Đóng thanh thông tin của thông tin
 
-MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Positive Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Đóng thanh thông tin tích cực
 
-MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=Negative Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=Đóng thanh thông tin tiêu cực
 
-MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=Critical Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=Đóng thanh thông tin quan trọng
 
-MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=Custom Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=Đóng thanh thông tin tùy chỉnh
 
 MESSAGE_STRIP_CLOSABLE=Có thể đóng
 

package/src/i18n/messagebundle_zh_CN.properties

@@ -174,15 +174,15 @@ ARIA_LABEL_LIST_MULTISELECTABLE=包含可多重选择的项目
 
 ARIA_LABEL_LIST_DELETABLE=包含可删除的项目
 
-MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Information Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=信息的信息栏关闭
 
-MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Positive Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=正面信息栏关闭
 
-MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=Negative Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=负面信息栏关闭
 
-MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=Critical Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=关键信息栏关闭
 
-MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=Custom Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=自定义信息栏关闭
 
 MESSAGE_STRIP_CLOSABLE=可关闭
 

package/src/i18n/messagebundle_zh_TW.properties

@@ -174,15 +174,15 @@ ARIA_LABEL_LIST_MULTISELECTABLE=包含可多重選擇的項目
 
 ARIA_LABEL_LIST_DELETABLE=包含可刪除的項目
 
-MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Information Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=資訊的資訊列關閉
 
-MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Positive Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=正向資訊列關閉
 
-MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=Negative Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_NEGATIVE=負向資訊列關閉
 
-MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=Critical Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_CRITICAL=重要資訊列關閉
 
-MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=Custom Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM=自訂資訊列關閉
 
 MESSAGE_STRIP_CLOSABLE=可關閉
 

package/src/themes/FormItem.css

@@ -17,6 +17,7 @@
 :host([column-span="5"]) {
 	grid-column: span 5;
 }
+
 :host([column-span="6"]) {
 	grid-column: span 6;
 }
@@ -40,6 +41,8 @@
 }
 
 .ui5-form-item-content {
+	overflow: hidden;
+	width: 100%;
 	display: flex;
 	padding: 0 0.25rem;
 }
@@ -57,13 +60,9 @@
 	box-sizing: border-box;
 }
 
-::slotted([ui5-input]) {
+::slotted(*) {
 	width: 100%;
 }
-::slotted([ui5-select]) {
-	width: 100%;
-}
-
 
 @container (max-width: 600px) {
 	:host {

package/src/themes/Label.css

@@ -44,7 +44,7 @@
 :host([required]) .ui5-label-required-colon:after {
 	content:"*";
 	color: var(--sapField_RequiredColor);
-	font-size: 1.25rem;
+	font-size: var(--sapFontLargeSize);
 	font-weight: bold;
 	position: relative;
 	font-style: normal;

package/src/themes/NavigationMenuItem.css

@@ -21,6 +21,9 @@
 	color: var(--sapList_TextColor);
 	font-weight: bold;
 	font-size: var(--sapFontSize);
+}
+
+:host([ui5-navigation-menu-item][selected]) {
 	border-bottom: none;
 }
 
@@ -38,7 +41,6 @@
 }
 
 .ui5-navigation-menu-item-root .ui5-sn-item-external-link-icon {
-	color: var(--_ui5_side_navigation_external_link_icon_color);
 	min-width: 2rem;
 	height: 0.875rem;
 }

package/src/themes/Switch.css

@@ -88,15 +88,6 @@
 	width: var(--_ui5_switch_handle_with_label_width);
 }
 
-.ui5-switch-handle-icon {
-	display: var(--_ui5-switch-handle-icon-display);
-	transition: var(--_ui5_switch_track_transition);
-}
-
-:host([checked]) .ui5-switch-handle-icon {
-	color: var(--_ui5-switch_track-on-background)
-}
-
 .ui5-switch-text {
 	display: flex;
 	justify-content: center;

package/src/themes/TableCellBase.css

@@ -6,7 +6,7 @@
     max-width: 100%;
     overflow: clip;
     overflow-clip-margin: content-box;
-    padding: var(--_ui5_table_cell_padding);
+    padding: var(--_ui5_table_cell_vertical_padding) var(--_ui5_table_cell_horizontal_padding);
     box-sizing: border-box;
 }
 

package/src/themes/TableRow.css

@@ -1,73 +1,96 @@
-:host {
-	background: var(--sapList_Background);
-}
-
-:host([position]) {
-	height: var(--row-height);
-	overflow: clip;
-}
-
-:host([aria-selected=true]) {
-	background-color: 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);
-	}
-	:host([_interactive][aria-selected=true]:hover) {
-		background: var(--sapList_Hover_SelectionBackground);
-	}
-}
-
-:host([_interactive]:active),
-:host([_interactive][_active]),
-:host([_interactive][aria-selected=true]:active),
-:host([_interactive][aria-selected=true][_active]) {
-	background: var(--sapList_Active_Background);
-}
-
-#popin-cell {
-	align-content: initial;
-	flex-direction: column;
-	grid-column: 1 / -1;
-}
-
-#navigated-cell {
-	position: relative;
-	overflow: visible;
-	grid-row: span 2;
-	min-width: 0;
-	padding: 0;
-	position: sticky;
-	right: 0;
-}
-
-:dir(rtl)#navigated-cell {
-	left: 0;
-}
-
-:host([navigated]) #navigated {
-	position: absolute;
-	inset: 0;
-    background-color: var(--sapList_SelectionBorderColor);
-}
-
-:host([tabindex]:focus) #navigated {
-	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 2px;
-	top: 3px;
-}
-
-:host([tabindex]:focus) #navigated:dir(rtl) {
-	transform: translateX(var(--_ui5_table_navigated_cell_width));
-}
-
-:host([navigated]) #popin-cell {
-	grid-column: 1 / -2;
-}
+:host {
+	background: var(--sapList_Background);
+}
+
+:host([position]) {
+	height: var(--row-height);
+	overflow: clip;
+}
+
+:host([aria-selected=true]) {
+	background-color: 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);
+	}
+	:host([_interactive][aria-selected=true]:hover) {
+		background: var(--sapList_Hover_SelectionBackground);
+	}
+}
+
+:host([_interactive]:active),
+:host([_interactive][_active]),
+:host([_interactive][aria-selected=true]:active),
+:host([_interactive][aria-selected=true][_active]) {
+	background: var(--sapList_Active_Background);
+}
+
+#popin-cell {
+	align-content: initial;
+	flex-direction: column;
+	grid-column: 1 / -1;
+}
+
+#navigated-cell {
+	position: sticky;
+	right: 0;
+	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;
+    background-color: var(--sapList_SelectionBorderColor);
+}
+
+:host([tabindex]:focus) #navigated {
+	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+	bottom: 2px;
+	top: 3px;
+}
+
+:host([tabindex]:focus) #navigated:dir(rtl) {
+	transform: translateX(var(--_ui5_table_navigated_cell_width));
+}
+
+:host([tabindex]:focus) #navigated-cell {
+	clip-path: inset(var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1));
+}
+
+:host([tabindex]:focus) #navigated-cell:dir(rtl) {
+	clip-path: inset(var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth));
+}
+
+:host([navigated]) #popin-cell {
+	grid-column: 1 / -2;
+}
+
+#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);
+}

package/src/themes/TableRowActionBase.css

@@ -0,0 +1,13 @@
+:host([invisible]) {
+    display: block;
+    width: var(--_ui5_button_base_min_width);
+}
+
+:host([_fixed]) {
+    margin-inline-start: auto;
+}
+
+[ui5-icon] {
+    display: flex;
+    width: var(--_ui5_button_base_min_width);
+}

package/src/themes/TableRowBase.css

@@ -14,6 +14,11 @@
 	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
 }
 
+:host([tabindex]:focus) #selection-cell,
+:host([tabindex]:focus) #actions-cell {
+	clip-path: inset(var(--sapContent_FocusWidth)); /* focus outline should not overlap sticky cells */
+}
+
 #selection-cell {
 	padding: 0;
 	left: 0;
@@ -27,10 +32,13 @@
 	vertical-align: middle;
 }
 
-/** Focus outline for the selection cell */
-:host([tabindex]:focus) #selection-cell {
-    outline: none;
-    box-shadow: var(--_ui5_table_shadow_border_top),
-				var(--_ui5_table_shadow_border_left),
-				var(--_ui5_table_shadow_border_bottom); /* There is a 1px difference between row and cell, therefore the outline is also 1px difference between their outline offsets */
+#actions-cell {
+	position: sticky;
+	right: 0;
+	background-color: inherit;
+	flex-wrap: nowrap;
 }
+
+:dir(rtl)#actions-cell {
+	left: 0;
+}

package/src/themes/Toolbar.css

@@ -20,7 +20,6 @@
 	display: inherit;
 	align-items: inherit;
 	justify-content: inherit;
-	gap: var(--_ui5-toolbar-items-gap);
 }
 
 .ui5-tb-items-full-width {
@@ -31,6 +30,19 @@
 	flex-shrink: 0;
 }
 
+.ui5-tb-item {
+	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
+	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
+}
+
+/* Last visible element should not have margins.
+Last element is: overflow button or tb-item when overflow button is hidden */
+.ui5-tb-overflow-btn,
+.ui5-tb-items:has(.ui5-tb-overflow-btn-hidden) .ui5-tb-item:nth-last-child(2) {
+	margin-inline-end: 0;
+	margin-inline-start: 0;
+}
+
 .ui5-tb-separator {
 	height: var(--_ui5-toolbar-separator-height);
 	width: 0.0625rem;

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

@@ -100,7 +100,6 @@
 	--_ui5_switch_handle_semantic_on_hover_box_shadow: var(--sapContent_Informative_Shadow);
 	--_ui5_switch_handle_semantic_off_hover_box_shadow: var(--sapContent_Negative_Shadow);
 
-	--_ui5-switch-handle-icon-display: none;
 	--_ui5_switch_handle_left: -0.0625rem;
 	--_ui5-switch-slider-texts-display: inline;
 

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

@@ -2,13 +2,7 @@
 	--_ui5_table_cell_valign: center;
 	--_ui5_table_cell_min_width: 2.75rem;
 	--_ui5_table_navigated_cell_width: 0.25rem;
-	--_ui5_table_shadow_border_left: inset var(--sapContent_FocusWidth) 0 var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_right: inset calc(-1 * var(--sapContent_FocusWidth)) 0 var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_top: inset 0 var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_bottom: inset 0 -1px var(--sapContent_FocusColor);
-}
-
-[dir="rtl"] {
-	--_ui5_table_shadow_border_left:  inset calc(-1 * var(--sapContent_FocusWidth)) 0 var(--sapContent_FocusColor);
-	--_ui5_table_shadow_border_right: inset var(--sapContent_FocusWidth) 0 var(--sapContent_FocusColor);
+	--_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/Toolbar-parameters.css

@@ -1,5 +1,6 @@
 :root {
     --_ui5-toolbar-padding-left: 0.5rem;
 	--_ui5-toolbar-padding-right: 0.5rem;
-	--_ui5-toolbar-items-gap: 0.25rem;
+	--_ui5-toolbar-item-margin-left: 0;
+	--_ui5-toolbar-item-margin-right: 0.25rem;
 }

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

@@ -101,9 +101,6 @@
 	--_ui5_tl_li_margin_bottom: 1.625rem;
 
 	/*switch*/
-	--_ui5_switch_focus_width_size_horizon_exp: calc(100% + 4px);
-	--_ui5_switch_focus_height_size_horizon_exp: calc(100% + 4px);
-
 	--_ui5_tc_item_text: 3rem;
 	--_ui5_tc_item_height: 4.75rem;
 	--_ui5_tc_item_text_only_height: 2.75rem;
@@ -339,9 +336,6 @@
 	/* Responsive Popover */
 	--_ui5-responsive_popover_header_height: 2.5rem;
 
-	/* Side Navigation */
-	--ui5_side_navigation_item_height: 2rem;
-
 	/* Slider */
 	--_ui5_slider_handle_height: 1.25rem;
 	--_ui5_slider_handle_width: 1.5rem;

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

@@ -1,6 +1,11 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
+	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
+	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
+	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
+	--_ui5_radio_button_hover_fill_success: var(--sapField_Selector_Hover_SuccessBackground);
+	--_ui5_radio_button_hover_fill_information: var(--sapField_Selector_Hover_InformationBackground);
 	--_ui5_radio_button_border_width: var(--sapContent_FocusWidth);
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
@@ -11,7 +16,6 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_hover_fill: var(--sapContent_Selected_Hover_Background);
 	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 

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

@@ -1,6 +1,11 @@
 @import "../base/RadioButton-parameters.css";
 
 :root {
+	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
+	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
+	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
+	--_ui5_radio_button_hover_fill_success: var(--sapField_Selector_Hover_SuccessBackground);
+	--_ui5_radio_button_hover_fill_information: var(--sapField_Selector_Hover_InformationBackground);
 	--_ui5_radio_button_border_width: var(--sapContent_FocusWidth);
 	--_ui5_radio_button_border_radius: 0.5rem;
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
@@ -11,7 +16,6 @@
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
 	--_ui5_radio_button_read_only_border_width: var(--sapElement_BorderWidth);
-	--_ui5_radio_button_hover_fill: var(--sapContent_Selected_Hover_Background);
 	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 

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

@@ -52,6 +52,7 @@
 @import "./ToggleButton-parameters.css";
 @import "./YearPicker-parameters.css";
 @import "./CalendarHeader-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
 @import "./MultiComboBox-parameters.css";

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

@@ -2,11 +2,11 @@
 
 :root {
 	--_ui5_radio_button_checked_fill: var(--sapContent_IconColor);
-	--_ui5_radio_button_hover_fill_error: var(--sapField_InvalidBackground);
-	--_ui5_radio_button_hover_fill_warning: var(--sapField_WarningBackground);
-	--_ui5_radio_button_hover_fill_success: var(--sapField_SuccessBackground);
-	--_ui5_radio_button_hover_fill_information: var(--sapField_InformationBackground);
-	--_ui5_radio_button_hover_fill: var(--sapSelectedColor);
+	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
+	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
+	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
+	--_ui5_radio_button_hover_fill_success: var(--sapField_Selector_Hover_SuccessBackground);
+	--_ui5_radio_button_hover_fill_information: var(--sapField_Selector_Hover_InformationBackground);
 	--_ui5_radio_button_border_width: 0.125rem;
 	--_ui5_radio_button_warning_error_border_dash: 5;
 	--_ui5_radio_button_inner_ring_radius: 27.5%;

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

@@ -2,15 +2,15 @@
 
 :root {
 	--_ui5_radio_button_checked_fill: var(--sapContent_IconColor);
-	--_ui5_radio_button_hover_fill_error: var(--sapField_InvalidBackground);
-	--_ui5_radio_button_hover_fill_warning: var(--sapField_WarningBackground);
-	--_ui5_radio_button_hover_fill_success: var(--sapField_SuccessBackground);
-	--_ui5_radio_button_hover_fill_information: var(--sapField_InformationBackground);
+	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
+	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
+	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
+	--_ui5_radio_button_hover_fill_success: var(--sapField_Selector_Hover_SuccessBackground);
+	--_ui5_radio_button_hover_fill_information: var(--sapField_Selector_Hover_InformationBackground);
 	--_ui5_radio_button_checked_warning_fill: var(--sapContent_IconColor);
 	--_ui5_radio_button_checked_error_fill: var(--sapContent_IconColor);
 	--_ui5_radio_button_checked_success_fill: var(--sapContent_IconColor);
 	--_ui5_radio_button_checked_information_fill: var(--sapContent_IconColor);
-	--_ui5_radio_button_hover_fill: var(--sapSelectedColor);
 	--_ui5_radio_button_border_width: 0.125rem;
 	--_ui5_radio_button_warning_error_border_dash: 5;
 	--_ui5_radio_button_inner_ring_radius: 27.5%;