@ui5/webcomponents 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

package/src/i18n/messagebundle_vi.properties

@@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} kết quả có sẵn
 
 INPUT_SUGGESTIONS_NO_HIT=Không có kết quả
 
+INPUT_CLEAR_ICON_ACC_NAME=Xóa
+
 LINK_SUBTLE=Tinh tế
 
 LINK_EMPHASIZED=Được nhấn mạnh
@@ -139,11 +141,13 @@ MESSAGE_STRIP_INFORMATION=Thanh thông tin
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+RADIO_BUTTON_GROUP_REQUIRED=Chọn một trong các tùy chọn khả dụng.
+
 VALUE_STATE_ERROR_ALREADY_SELECTED=Giá trị này đã được chọn.
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=Đầu vào đa giá trị
 
-MULTIINPUT_SHOW_MORE_TOKENS={0} Nhiều hơn
+MULTIINPUT_SHOW_MORE_TOKENS={0} thêm
 
 PANEL_ICON=Mở rộng/Thu gọn
 
@@ -157,6 +161,8 @@ RATING_INDICATOR_TOOLTIP_TEXT=Đánh giá
 
 RATING_INDICATOR_TEXT=Chỉ báo xếp hạng
 
+RATING_INDICATOR_ARIA_DESCRIPTION=Được yêu cầu
+
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Từ chối
 
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=Nhóm nút được phân đoạn
@@ -179,6 +185,8 @@ ARIA_LABEL_ROW_SELECTION=Lựa chọn mục
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Lựa chọn tất cả hàng
 
+ARIA_LABEL_EMPTY_CELL=Trống
+
 TAB_ARIA_DESIGN_POSITIVE=Dương
 
 TAB_ARIA_DESIGN_NEGATIVE=Âm
@@ -217,6 +225,16 @@ TIMEPICKER_CANCEL_BUTTON=Hủy
 
 TIMEPICKER_INPUT_DESCRIPTION=Nhập thời gian
 
+TIMEPICKER_CLOCK_DIAL_LABEL=Quay số đồng hồ
+
+TIMEPICKER_INPUTS_ENTER_HOURS=Vui lòng nhập giờ
+
+TIMEPICKER_INPUTS_ENTER_MINUTES=Vui lòng nhập phút
+
+TIMEPICKER_INPUTS_ENTER_SECONDS=Vui lòng nhập giây
+
+DURATION_INPUT_DESCRIPTION=Nhập khoảng thời gian
+
 DATETIME_PICKER_DATE_BUTTON=Ngày
 
 DATETIME_PICKER_TIME_BUTTON=Thời gian
@@ -233,6 +251,8 @@ TOKENIZER_ARIA_LABEL=Công cụ thẻ hóa
 
 TOKENIZER_POPOVER_REMOVE=Loại bỏ
 
+TOKENIZER_SHOW_ALL_ITEMS={0} mục
+
 TREE_ITEM_ARIA_LABEL=Mục cây
 
 TREE_ITEM_EXPAND_NODE=Mở rộng nút
@@ -280,3 +300,14 @@ SPLIT_BUTTON_KEYBOARD_HINT=Nhấn Phím cách hoặc Enter để kích hoa
 MENU_BACK_BUTTON_ARIA_LABEL=Quay lại
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=Từ chối
+
+DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Đầu mục tương tác
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Sử dụng tổ hợp phím Shift+Mũi tên để định kích cỡ lại
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Sử dụng phím Mũi tên để chuyển
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Sử dụng phím Mũi tên để chuyển, phím Shift+Mũi tên để định kích cỡ lại
+LABEL_COLON=:
+
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Tùy chọn bổ sung

package/src/i18n/messagebundle_zh_CN.properties

@@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 个结果可用
 
 INPUT_SUGGESTIONS_NO_HIT=无结果
 
+INPUT_CLEAR_ICON_ACC_NAME=清除
+
 LINK_SUBTLE=隐蔽
 
 LINK_EMPHASIZED=加重
@@ -139,6 +141,8 @@ MESSAGE_STRIP_INFORMATION=信息栏
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=确定
 
+RADIO_BUTTON_GROUP_REQUIRED=选择其中一个可用的选项。
+
 VALUE_STATE_ERROR_ALREADY_SELECTED=已选择此值。
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=多值输入
@@ -157,6 +161,8 @@ RATING_INDICATOR_TOOLTIP_TEXT=评级
 
 RATING_INDICATOR_TEXT=评级指示器
 
+RATING_INDICATOR_ARIA_DESCRIPTION=必需
+
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒绝
 
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=分段式按钮组
@@ -179,6 +185,8 @@ ARIA_LABEL_ROW_SELECTION=项目选择
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=选择所有行
 
+ARIA_LABEL_EMPTY_CELL=空
+
 TAB_ARIA_DESIGN_POSITIVE=积极
 
 TAB_ARIA_DESIGN_NEGATIVE=消极
@@ -217,6 +225,16 @@ TIMEPICKER_CANCEL_BUTTON=取消
 
 TIMEPICKER_INPUT_DESCRIPTION=时间输入
 
+TIMEPICKER_CLOCK_DIAL_LABEL=钟表盘
+
+TIMEPICKER_INPUTS_ENTER_HOURS=请输入小时
+
+TIMEPICKER_INPUTS_ENTER_MINUTES=请输入分钟
+
+TIMEPICKER_INPUTS_ENTER_SECONDS=请输入秒
+
+DURATION_INPUT_DESCRIPTION=持续时间输入
+
 DATETIME_PICKER_DATE_BUTTON=日期
 
 DATETIME_PICKER_TIME_BUTTON=时间
@@ -233,6 +251,8 @@ TOKENIZER_ARIA_LABEL=分词器
 
 TOKENIZER_POPOVER_REMOVE=移除
 
+TOKENIZER_SHOW_ALL_ITEMS={0} 个项目
+
 TREE_ITEM_ARIA_LABEL=树项目
 
 TREE_ITEM_EXPAND_NODE=展开节点
@@ -280,3 +300,14 @@ SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt +
 MENU_BACK_BUTTON_ARIA_LABEL=返回
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝
+
+DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=交互式抬头
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=使用 Shift+箭头键重新调整大小
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=使用箭头键进行移动
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=使用箭头键进行移动，使用 Shift+箭头键重新调整大小
+LABEL_COLON=：
+
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=附加选项

package/src/i18n/messagebundle_zh_TW.properties

@@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 個可用的結果
 
 INPUT_SUGGESTIONS_NO_HIT=沒有結果
 
+INPUT_CLEAR_ICON_ACC_NAME=清除
+
 LINK_SUBTLE=輕微
 
 LINK_EMPHASIZED=強調
@@ -139,11 +141,13 @@ MESSAGE_STRIP_INFORMATION=資訊列
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=確定
 
+RADIO_BUTTON_GROUP_REQUIRED=請選擇其中一個可用的選項。
+
 VALUE_STATE_ERROR_ALREADY_SELECTED=已選擇此值。
 
 MULTIINPUT_ROLEDESCRIPTION_TEXT=多重值輸入
 
-MULTIINPUT_SHOW_MORE_TOKENS=超過 {0} 個
+MULTIINPUT_SHOW_MORE_TOKENS=更多 ({0} 個)
 
 PANEL_ICON=展開/收縮
 
@@ -157,6 +161,8 @@ RATING_INDICATOR_TOOLTIP_TEXT=分級
 
 RATING_INDICATOR_TEXT=分級指示碼
 
+RATING_INDICATOR_ARIA_DESCRIPTION=必要
+
 RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=拒絕
 
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=區段按鈕群組
@@ -179,6 +185,8 @@ ARIA_LABEL_ROW_SELECTION=項目選擇
 
 ARIA_LABEL_SELECT_ALL_CHECKBOX=選擇所有列
 
+ARIA_LABEL_EMPTY_CELL=空白
+
 TAB_ARIA_DESIGN_POSITIVE=正面
 
 TAB_ARIA_DESIGN_NEGATIVE=負面
@@ -217,6 +225,16 @@ TIMEPICKER_CANCEL_BUTTON=取消
 
 TIMEPICKER_INPUT_DESCRIPTION=時間輸入
 
+TIMEPICKER_CLOCK_DIAL_LABEL=鐘面
+
+TIMEPICKER_INPUTS_ENTER_HOURS=請輸入小時
+
+TIMEPICKER_INPUTS_ENTER_MINUTES=請輸入分鐘
+
+TIMEPICKER_INPUTS_ENTER_SECONDS=請輸入秒數
+
+DURATION_INPUT_DESCRIPTION=持續期輸入
+
 DATETIME_PICKER_DATE_BUTTON=日期
 
 DATETIME_PICKER_TIME_BUTTON=時間
@@ -233,6 +251,8 @@ TOKENIZER_ARIA_LABEL=表徵參數量化器
 
 TOKENIZER_POPOVER_REMOVE=移除
 
+TOKENIZER_SHOW_ALL_ITEMS={0} 個項目
+
 TREE_ITEM_ARIA_LABEL=樹狀結構項目
 
 TREE_ITEM_EXPAND_NODE=展開節點
@@ -280,3 +300,14 @@ SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以
 MENU_BACK_BUTTON_ARIA_LABEL=返回
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕
+
+DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=互動表頭
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=使用　Shift　+　箭頭鍵以調整大小
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=使用箭頭鍵以移動
+
+DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=使用箭頭鍵以移動，使用　Shift　+　箭頭鍵以調整大小
+LABEL_COLON=：
+
+TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=附加選項

package/src/themes/Avatar.css

@@ -4,18 +4,38 @@
 	position: relative;
 }
 
-/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+/* The ui5_hovered class is set by FileUploader to indicate hover state of the control */
 :host(:not([hidden]).ui5_hovered) {
 	opacity: .7;
 }
 
-:host([focused]) {
+:host(:is([interactive]):not([disabled])) {
+	cursor: pointer;
+}
+
+:host(:is([interactive][pressed]):not([hidden])) {
+	background: var(--sapButton_Active_Background);
+	border-color: var(--sapButton_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
+:host(:is([interactive][pressed]):not([hidden]):hover) {
+	background: var(--sapButton_Selected_Hover_Background);
+	border-color: var(--sapButton_Selected_Hover_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+:host(:is([interactive]):not([hidden]):not([pressed]):not([disabled]):hover) {
+	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
+}
+
+:host(:is([interactive][focused]):not([hidden]):not([pressed])) {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
-:host([interactive]) {
-	cursor: pointer;
+:host(:is([disabled])) {
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 :host {
@@ -37,7 +57,6 @@
 }
 
 /* Sizes */
-
 :host([_size="XS"]),
 :host([size="XS"]) {
 	height: 2rem;
@@ -208,6 +227,7 @@
 }
 
 :host([_has-image]) {
+	color: var(--ui5-avatar-accent10-color);
 	background-color: transparent;
 	vertical-align: middle;
 }

package/src/themes/AvatarGroup.css

@@ -5,6 +5,10 @@
 	width: 100%;
 }
 
+:host {
+	--_ui5_button_focused_border: var(--_ui5_avatar_group_button_focus_border);
+}
+
 .ui5-avatar-group-items:focus {
 	outline: none;
 }

package/src/themes/Badge.css

@@ -3,24 +3,21 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	vertical-align: top;
-	height: 1rem;
+	height: var(--_ui5-badge-height);
 	min-width: 1.125em;
 	max-width: 100%;
-	padding: 0 0.3125em;
-	color: var(--sapAccentColor1);
-	background: var(--sapLegendBackgroundColor1);
-	border: 0.0625em solid;
-	border-radius: 0.5rem;
+	padding-inline: var(--_ui5-badge-padding-inline);
+	border: var(--_ui5-badge-border);
+	border-color: var(--_ui5-badge-default-border-color);
+	background: var(--_ui5-badge-default-background);
+	color: var(--_ui5-badge-default-color);
+	border-radius: var(--_ui5-badge-border-radius);
 	box-sizing: border-box;
-	font-family: "72override", var(--sapFontFamily);
-	font-weight: bold;
+	font-family: var(--_ui5-badge-font);
+	font-weight: var(--_ui5-badge-font-weight);
+	font-size: var(--_ui5-badge-font-size);
 	text-align: center;
-	letter-spacing: 0.0125em;
-}
-
-:host([color-scheme]:hover),
-:host(:not([color-scheme]):hover) {
-	cursor: var(--_ui5-badge-cursor);
+	letter-spacing: var(--_ui5-badge-letter-spacing);
 }
 
 .ui5-badge-root {
@@ -38,18 +35,13 @@
 	white-space: nowrap;
 	font-weight: inherit;
 	text-overflow: ellipsis;
-	line-height: 1;
-	text-transform: uppercase;
+	text-transform: var(--_ui5-badge-text-transform);
 	letter-spacing: inherit;
-	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
-}
-
-:host(:hover) .ui5-badge-text {
-	cursor: var(--_ui5-badge-cursor);
+	font-size: inherit;
 }
 
 :host([_icon-only]) {
-	padding: 0 0.1875em;
+	padding-inline: var(--_ui5-badge-padding-inline-icon-only);
 }
 
 ::slotted([ui5-icon]) {
@@ -61,7 +53,7 @@
 }
 
 :host([_has-icon]) .ui5-badge-text {
-	padding-inline-start: 0.125rem;
+	padding-inline-start: var(--_ui5-badge-icon-gap);
 }
 
 /* Scheme 1 */

package/src/themes/BusyIndicator.css

@@ -7,7 +7,7 @@
 }
 
 :host([size="Small"]) .ui5-busy-indicator-root {
-	min-width: 1.5rem;
+	min-width: 1.625rem; /*width of the dots plus the gap between them*/
 	min-height: .5rem;
 }
 
@@ -20,12 +20,22 @@
 	height: .5rem;
 }
 
+:host([size="Small"]) .ui5-busy-indicator-circle:first-child,
+:host([size="Small"]) .ui5-busy-indicator-circle:nth-child(2) {
+	margin-inline-end: 0.0625rem;
+}
+
 :host(:not([size])) .ui5-busy-indicator-root,
 :host([size="Medium"]) .ui5-busy-indicator-root {
-	min-width: 3rem;
+	min-width: 3.375rem; /*width of the dots plus the gap between them*/
 	min-height: 1rem;
 }
 
+:host([size="Medium"]) .ui5-busy-indicator-circle:first-child,
+:host([size="Medium"]) .ui5-busy-indicator-circle:nth-child(2) {
+	margin-inline-end: 0.1875rem;
+}
+
 :host(:not([size])[text]:not([text=""])) .ui5-busy-indicator-root,
 :host([size="Medium"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 2.25rem;
@@ -38,10 +48,15 @@
 }
 
 :host([size="Large"]) .ui5-busy-indicator-root {
-	min-width: 6rem;
+	min-width: 6.5rem; /*width of the dots plus the gap between them*/
 	min-height: 2rem;
 }
 
+:host([size="Large"]) .ui5-busy-indicator-circle:first-child,
+:host([size="Large"]) .ui5-busy-indicator-circle:nth-child(2) {
+	margin-inline-end: 0.25rem;
+}
+
 :host([size="Large"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 3.25rem;
 }
@@ -74,7 +89,7 @@
 	flex-direction: column;
 }
 
-.ui5-busy-indicator-busy-area:focus-visible {
+.ui5-busy-indicator-busy-area:focus {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
     border-radius: var(--_ui5_busy_indicator_focus_border_radius);

package/src/themes/Button.css

@@ -54,7 +54,6 @@
 :host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
 :host(:not([hidden]):not([disabled]).ui5_hovered) {
 	background: var(--sapButton_Hover_Background);
-	box-shadow: var(--sapContent_Interaction_Shadow);
 	border: 1px solid var(--sapButton_Hover_BorderColor);
 	color: var(--sapButton_Hover_TextColor);
 }
@@ -168,7 +167,6 @@ bdi {
 :host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Accept_Hover_Background);
 	border-color: var(--sapButton_Accept_Hover_BorderColor);
-	box-shadow: var(--sapContent_Positive_Shadow);
 	color: var(--sapButton_Accept_Hover_TextColor);
 }
 
@@ -189,7 +187,6 @@ bdi {
 :host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Reject_Hover_Background);
 	border-color: var(--sapButton_Reject_Hover_BorderColor);
-	box-shadow: var(--sapContent_Negative_Shadow);
 	color: var(--sapButton_Reject_Hover_TextColor);
 }
 
@@ -211,7 +208,6 @@ bdi {
 	background-color: var(--sapButton_Attention_Hover_Background);
 	border-color: var(--sapButton_Attention_Hover_BorderColor);
 	color: var(--sapButton_Attention_Hover_TextColor);
-	box-shadow: var(--sapContent_Critical_Shadow)
 }
 
 :host([ui5-button][design="Attention"][active]:not([non-interactive])) {
@@ -225,7 +221,7 @@ bdi {
 	border-color: var(--sapButton_Emphasized_BorderColor);
 	border-width: var(--_ui5_button_emphasized_border_width);
 	color: var(--sapButton_Emphasized_TextColor);
-	font-weight: var(--_ui5_button_emphasized_font_weight);
+	font-weight: var(--sapButton_Emphasized_FontWeight);
 }
 
 /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
@@ -235,7 +231,6 @@ bdi {
 	border-color: var(--sapButton_Emphasized_Hover_BorderColor);
 	border-width: var(--_ui5_button_emphasized_border_width);
 	color: var(--sapButton_Emphasized_Hover_TextColor);
-	box-shadow: none;
 }
 
 :host([ui5-button][design="Empasized"][active]:not([non-interactive])) {
@@ -245,10 +240,15 @@ bdi {
 }
 
 :host([design="Emphasized"][focused]) .ui5-button-root:after {
-	border-color: var(--sapContent_ContrastFocusColor);
+	border-color: var(--_ui5_button_emphasized_focused_border_color);
 	outline: none;
 }
 
+/* Belize related */
+:host([design="Emphasized"][focused][active]:not([non-interactive])) .ui5-button-root:after {
+	border-color: var(--_ui5_button_emphasized_focused_active_border_color);
+}
+
 :host([design="Transparent"]) {
 	background-color: var(--sapButton_Lite_Background);
 	color: var(--sapButton_Lite_TextColor);
@@ -260,7 +260,6 @@ bdi {
 :host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
 	background-color: var(--sapButton_Lite_Hover_Background);
 	border-color: var(--sapButton_Lite_Hover_BorderColor);
-	box-shadow: var(--sapContent_Interaction_Shadow);
 	color: var(--sapButton_Lite_Hover_TextColor);
 }
 
@@ -285,4 +284,4 @@ bdi {
 :host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
 	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
-}
+}

package/src/themes/CalendarHeader.css

@@ -30,8 +30,8 @@
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:active,
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:focus,
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled {
-	pointer-events: none;
 	opacity: 0.4;
+	cursor: default;
 	outline: none;
 	background-color: var(--sapButton_Lite_Background);
 	color: var(--sapButton_Lite_TextColor);

package/src/themes/Card.css

@@ -33,7 +33,7 @@
 }
 
 .ui5-card-root.ui5-card--nocontent .ui5-card-header-root  {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 .ui5-card--nocontent ::slotted([ui5-card-header]) {

package/src/themes/CardHeader.css

@@ -29,7 +29,7 @@
 }
 
 /* cannot be combined with the above style, because :has selector breaks the whole style if FF */
-.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus-visible):before {
+.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before {
 	outline: none;
 	content: "";
 	position: absolute;

package/src/themes/Carousel.css

@@ -8,7 +8,7 @@
     height: 100%;
 }
 
-.ui5-carousel-root:focus-visible {
+.ui5-carousel-root:focus {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 
@@ -18,6 +18,15 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    background: var(--ui5_carousel_background_color_translucent);
+}
+
+.ui5-carousel-background-solid {
+    background: var(--ui5_carousel_background_color_solid);
+}
+
+.ui5-carousel-background-transparent {
+    background: transparent;
 }
 
 .ui5-carousel-viewport {
@@ -28,6 +37,9 @@
     flex-direction: column;
     align-items: flex-start;
     overflow: hidden;
+    padding: 1px;
+    flex: 1;
+    min-height: 0;
 }
 
 .ui5-carousel-viewport.ui5-carousel-viewport--single {
@@ -40,7 +52,6 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    background: var(--ui5_carousel_background_color);
     transition: transform 0.5s cubic-bezier(.46, 0, .44, 1);
     will-change: transform;
 }
@@ -70,9 +81,9 @@
 
 .ui5-carousel-navigation-arrows {
     width: 100%;
-    padding:0 0.5rem;
+    padding: 0 0.5rem;
     position: absolute;
-    top: calc(50% - var(--ui5_carousel_button_size));
+    top: calc(50% - var(--ui5_carousel_button_size) / 2);
     left: 0;
     display: flex;
     justify-content: space-between;
@@ -91,8 +102,23 @@
     flex-wrap: nowrap;
     justify-content: center;
     align-items: center;
+    box-sizing: border-box;
+}
+
+.ui5-carousel-navigation-wrapper-bg-solid {
     background: var(--sapPageFooter_Background);
-    border-top: 1px solid var(--sapPageFooter_BorderColor);
+}
+
+.ui5-carousel-navigation-wrapper-bg-translucent {
+    background: var(--ui5_carousel_background_color_translucent);
+}
+
+.ui5-carousel-navigation-wrapper-bg-transparent {
+    background: transparent;
+}
+
+.ui5-carousel-navigation-wrapper-border-solid {
+    border-top: var(--sapElement_BorderWidth) solid var(--sapList_BorderColor);
 }
 
 .ui5-carousel-navigation-wrapper.ui5-carousel-navigation-with-buttons {
@@ -106,7 +132,6 @@
     box-shadow: none;
     cursor: pointer;
     outline-offset: .1rem;
-
     --_ui5_button_focused_border_radius: 50%;
 }
 
@@ -114,6 +139,10 @@
     box-shadow: var(--sapContent_Shadow1);
 }
 
+.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:active {
+    box-shadow: var(--ui5_carousel_navigation_button_active_box_shadow);
+}
+
 .ui5-carousel-navigation-button--hidden {
     visibility: hidden;
     padding: 0;
@@ -128,6 +157,7 @@
 }
 
 .ui5-carousel-navigation-dot {
+    box-sizing: border-box;
     width: var(--ui5_carousel_inactive_dot_size);
     height: var(--ui5_carousel_inactive_dot_size);
     margin: var(--ui5_carousel_inactive_dot_margin);
@@ -144,3 +174,14 @@
     background-color: var(--ui5_carousel_active_dot_background);
     border: var(--ui5_carousel_active_dot_border);
 }
+
+.ui5-carousel-navigation-text {
+    font-family: var(--sapFontFamily);
+    font-size: var(--sapFontSize);
+    font-weight: normal;
+    color: var(--sapPageFooter_TextColor);
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+}

package/src/themes/CheckBox.css

@@ -12,6 +12,10 @@
 	border-radius: var(--_ui5_checkbox_border_radius);
 	transition: var(--_ui5_checkbox_transition);
 	cursor: pointer;
+	user-select: none;
+  	-moz-user-select: none;
+  	-webkit-user-select: none;
+  	-ms-user-select: none;
 }
 
 /* disabled */
@@ -235,8 +239,6 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	pointer-events: none;
-	user-select: none;
-	-webkit-user-select: none;
 	color: var(--_ui5_checkbox_label_color);
 }
 

package/src/themes/ColorPalettePopover.css

@@ -16,6 +16,10 @@
 	padding: 0;
 }
 
+[ui5-title], [ui5-button] {
+	margin-bottom: 1rem;
+}
+
 .ui5-cp-item-container {
 	padding: 0.3125rem 0.6875rem;
 }