@ui5/webcomponents 2.27.0-rc.1 → 2.27.0

package/src/i18n/messagebundle_zh_TW.properties

@@ -222,6 +222,8 @@ SELECT_ROLE_DESCRIPTION=清單方塊
 
 SELECT_OPTIONS=選擇選項
 
+SELECT_OPTIONS_IN_GROUPS={1} 個群組中有 {0} 個結果
+
 SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=選擇：
 
 SELECT_LISTBOX_LABEL=全部項目
@@ -454,6 +456,10 @@ TOKENIZER_DIALOG_CANCEL_BUTTON=取消
 
 TOKENIZER_DIALOG_OK_BUTTON=確定
 
+TOKENIZER_TOKEN_DELETED_SINGULAR=已刪除 1 個權杖
+
+TOKENIZER_TOKEN_DELETED_PLURAL=已刪除 {0} 個權杖
+
 TREE_ITEM_ARIA_LABEL=樹狀結構項目
 
 TREE_ITEM_EXPAND_NODE=展開節點
@@ -524,6 +530,8 @@ DAY_PICKER_SELECTED_RANGE_END={0} 最後一個日期範圍
 
 DAY_PICKER_WEEK_NUMBER_TEXT=週數
 
+DAY_PICKER_CALENDAR_WEEK=曆週 {0}
+
 DAY_PICKER_NON_WORKING_DAY=非工作日
 
 DAY_PICKER_TODAY=今天
@@ -538,16 +546,15 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION=按 F2 鍵輸入值。
 
 SLIDER_TOOLTIP_INPUT_LABEL=目前值
 
-STEPINPUT_DEC_ICON_TITLE=減少
-
-STEPINPUT_INC_ICON_TITLE=增加
+NUMBERINPUT_DEC_ICON_TITLE=減少
 
-STEPINPUT_PATTER_MISSMATCH=此格式不受支援，請輸入 {0} 位小數的數字。
+NUMBERINPUT_INC_ICON_TITLE=增加
 
-STEPINPUT_RANGEOVERFLOW=輸入的數字小於 {0} 的最大值。
+NUMBERINPUT_PATTERN_MISSMATCH=此格式不受支援，請輸入 {0} 位小數的數字。
 
-STEPINPUT_RANGEUNDERFLOW=輸入的數字大於 {0} 的最小值。
+NUMBERINPUT_RANGEOVERFLOW=輸入的數字小於 {0} 的最大值。
 
+NUMBERINPUT_RANGEUNDERFLOW=輸入的數字大於 {0} 的最小值。
 SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作

package/src/themes/AvatarBadge.css

@@ -38,6 +38,18 @@
 	color: var(--sapInformativeTextColor);
 }
 
+/* Extended color palette - applies only when state is None */
+:host([color-scheme="1"][state="None"]) { background: var(--sapIndicationColor_1_Background); border-color: var(--sapIndicationColor_1_BorderColor); color: var(--sapIndicationColor_1_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="2"][state="None"]) { background: var(--sapIndicationColor_2_Background); border-color: var(--sapIndicationColor_2_BorderColor); color: var(--sapIndicationColor_2_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="3"][state="None"]) { background: var(--sapIndicationColor_3_Background); border-color: var(--sapIndicationColor_3_BorderColor); color: var(--sapIndicationColor_3_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="4"][state="None"]) { background: var(--sapIndicationColor_4_Background); border-color: var(--sapIndicationColor_4_BorderColor); color: var(--sapIndicationColor_4_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="5"][state="None"]) { background: var(--sapIndicationColor_5_Background); border-color: var(--sapIndicationColor_5_BorderColor); color: var(--sapIndicationColor_5_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="6"][state="None"]) { background: var(--sapIndicationColor_6_Background); border-color: var(--sapIndicationColor_6_BorderColor); color: var(--sapIndicationColor_6_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="7"][state="None"]) { background: var(--sapIndicationColor_7_Background); border-color: var(--sapIndicationColor_7_BorderColor); color: var(--sapIndicationColor_7_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="8"][state="None"]) { background: var(--sapIndicationColor_8_Background); border-color: var(--sapIndicationColor_8_BorderColor); color: var(--sapIndicationColor_8_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="9"][state="None"]) { background: var(--sapIndicationColor_9_Background); border-color: var(--sapIndicationColor_9_BorderColor); color: var(--sapIndicationColor_9_TextColor); box-shadow: var(--sapContent_Shadow1); }
+:host([color-scheme="10"][state="None"]) { background: var(--sapIndicationColor_10_Background); border-color: var(--sapIndicationColor_10_BorderColor); color: var(--sapIndicationColor_10_TextColor); box-shadow: var(--sapContent_Shadow1); }
+
 .ui5-avatar-badge-icon {
 	width: var(--_ui5-avatar-badge-icon-size);
 	height: var(--_ui5-avatar-badge-icon-size);

package/src/themes/CalendarHeader.css

@@ -44,23 +44,24 @@
 }
 
 .ui5-calheader-arrowbtn:hover {
-	background-color: var(--sapButton_Hover_Background);
-	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapButton_Lite_Hover_Background);
+	color: var(--sapButton_Lite_Hover_TextColor);
 	box-shadow: var(--_ui5_calendar_header_arrow_button_box_shadow);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
 }
 
 .ui5-calheader-arrowbtn:active {
 	background-color: var(--sapButton_Active_Background);
 	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Lite_Active_BorderColor);
 }
 
 .ui5-calheader-arrowbtn,
 .ui5-calheader-middlebtn {
-	border: var(--_ui5_calendar_header_arrow_button_border);
-	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius, var(--sapButton_BorderCornerRadius));
 	display:flex;
 	background-color: var(--sapButton_Lite_Background);
-	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .ui5-calheader-middlebtn {
@@ -103,7 +104,7 @@
 
 .ui5-calheader-middlebtn:focus, .ui5-calheader-arrowbtn:focus {
 	border: var(--_ui5_calendar_header_middle_button_focus_border);
-	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius);
+	border-radius: var(--_ui5_calendar_header_middle_button_focus_border_radius, var(--sapButton_BorderCornerRadius));
 	outline: var(--_ui5_calendar_header_middle_button_focus_outline);
 	outline-offset: -0.125rem;
 	background: var(--_ui5_calendar_header_middle_button_focus_background);

package/src/themes/CardHeader.css

@@ -4,6 +4,7 @@
 	position: relative;
 	display: flex;
 	align-items: center;
+	gap: 1rem;
 	padding: var(--_ui5_card_header_padding);
 	outline: none;
 }
@@ -74,15 +75,6 @@
 	pointer-events: none;
 }
 
-.ui5-card-header-first-line {
-	display: flex;
-	flex-flow: row;
-	justify-content: space-between;
-}
-
-.ui5-card-header-additionalText {
-	flex: none;
-}
 
 .ui5-card-header .ui5-card-header-avatar {
 	height: 3rem;
@@ -112,13 +104,11 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapTile_TextColor);
-	text-align: left;
+	text-align: end;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
 	vertical-align: middle;
-	margin-inline-start: 1rem;
-	margin-block-start: 0.125rem;
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-header-title {
@@ -155,8 +145,16 @@
 	-webkit-line-clamp: 3;
 }
 
-.ui5-card-header-action {
+.ui5-card-header-action-and-additional-text {
 	display: flex;
-	padding-inline-start: 1rem;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 0.25rem;
 	align-self: flex-start;
+}
+
+.ui5-card-header-action-and-additional-text ::slotted([slot="action"]) {
+	position: relative;
+	top: -0.5rem;
+	inset-inline-end: -0.5rem;
 }

package/src/themes/DynamicDateRangePopover.css

@@ -107,11 +107,10 @@
 }
 
 .ui5-ddr-arrow-back-btn {
-	border: var(--_ui5_calendar_header_arrow_button_border);
-	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
+	border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius, var(--sapButton_BorderCornerRadius));
 	display:flex;
 	background-color: var(--sapButton_Lite_Background);
-	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .ui5-ddr-arrow-back-btn-arrow-icon {

package/src/themes/ListItemBase.css

@@ -102,7 +102,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	flex: auto;
+	flex: var(--_ui5_li_text_wrapper_flex, auto);
 	min-width: 1px;
 	line-height: normal;
 }

package/src/themes/RatingIndicator.css

@@ -29,7 +29,8 @@
 	opacity: .9;
 }
 
-:host([_focused]) {
+:host([desktop]:not([disabled]):not([display-only])) .ui5-rating-indicator-root:focus,
+:host(:not([disabled]):not([display-only])) .ui5-rating-indicator-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: var(--_ui5_rating_indicator_outline_offset);
 	border-radius: var(--_ui5_rating_indicator_border_radius);

package/src/themes/Token.css

@@ -63,7 +63,8 @@
 	padding: var(--_ui5_token_readonly_padding);
 }
 
-:host([selected]) .ui5-token--wrapper:focus {
+:host([desktop][selected]) .ui5-token--wrapper:focus,
+:host([selected]) .ui5-token--wrapper:focus-visible {
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
@@ -94,12 +95,14 @@
 	font-family: var(--_ui5_token_selected_text_font_family);
 }
 
-.ui5-token--wrapper:focus {
+:host([desktop]) .ui5-token--wrapper:focus,
+.ui5-token--wrapper:focus-visible {
 	outline-offset: var(--_ui5_token_outline_offset);
 	outline: var(--_ui5_token_focus_outline);
 }
 
-.ui5-token--wrapper:focus::after {
+:host([desktop]) .ui5-token--wrapper:focus::after,
+.ui5-token--wrapper:focus-visible::after {
 	content: var(--ui5_token_focus_pseudo_element_content);
 	position: absolute;
 	pointer-events: none;

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

@@ -1,11 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
-	--_ui5_calendar_header_arrow_button_border: 1px solid var(--sapButton_BorderColor);
-	--_ui5_calendar_header_arrow_button_border_radius: 0.375rem;
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-}
+}

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

@@ -1,11 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
-	--_ui5_calendar_header_arrow_button_border: 1px solid var(--sapButton_BorderColor);
-	--_ui5_calendar_header_arrow_button_border_radius: 0.375rem;
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-}
+}

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

@@ -5,7 +5,6 @@
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;
 	--_ui5_calendar_header_middle_button_focus_after_left_offset: 0.125rem;
-	--_ui5_calendar_header_arrow_button_border: 0.0625rem solid var(--sapList_Hover_Background);
 	--_ui5_calendar_header_arrow_button_border_radius: 0.5rem;
 	--_ui5_calendar_header_arrow_button_box_shadow: 0 0 0.125rem 0 rgb(85 107 130 / 72%);
 	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;

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

@@ -5,7 +5,6 @@
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;
 	--_ui5_calendar_header_middle_button_focus_after_left_offset: 0.125rem;
-	--_ui5_calendar_header_arrow_button_border: 0.0625rem solid var(--sapList_Hover_Background);
 	--_ui5_calendar_header_arrow_button_border_radius: 0.5rem;
 	--_ui5_calendar_header_arrow_button_box_shadow: 0 0 0.125rem 0 rgb(85 107 130 / 72%);
 	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;

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

@@ -1,10 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-	--_ui5_calendar_header_arrow_button_border: none;
-}
+}

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

@@ -1,10 +1,10 @@
 @import "../base/CalendarHeader-parameters.css";
 
 :host {
+	--_ui5_calendar_header_arrow_button_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_width: 5.75rem;
 	--_ui5_calendar_header_middle_button_flex: auto;
-	--_ui5_calendar_header_middle_button_focus_border_radius: 0.5rem;
+	--_ui5_calendar_header_middle_button_focus_border_radius: var(--sapButton_BorderCornerRadius);
 	--_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_calendar_header_middle_button_focus_after_display: none;
-	--_ui5_calendar_header_arrow_button_border: none;
-}
+}