@ui5/webcomponents 1.3.0 → 1.5.0

package/src/i18n/messagebundle_vi.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=Thay đổi màu
 
 COLOR_PALETTE_MORE_COLORS_TEXT=Nhiều màu hơn...
 
+COLORPICKER_ALPHA_SLIDER=Kiểm soát Alpha
+
+COLORPICKER_HUE_SLIDER=Kiểm soát sắc độ màu
+
+COLORPICKER_HEX=Thập lục phân
+
+COLORPICKER_RED=Đỏ
+
+COLORPICKER_GREEN=Xanh lá cây
+
+COLORPICKER_BLUE=Xanh da trời
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=Mở trình chọn
 
 DATEPICKER_DATE_DESCRIPTION=Nhập ngày
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Nút được phân đoạn
 
 SLIDER_ARIA_DESCRIPTION=Điều khiển thanh trượt
 
-SWITCH_ON=Bật
-
-SWITCH_OFF=Tắt
-
 LOAD_MORE_TEXT=Thêm
 
 TABLE_HEADER_ROW_TEXT=Hàng tiêu đề
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=Nút phân chia
 
 SPLIT_BUTTON_KEYBOARD_HINT=Nhấn Phím cách hoặc Enter để kích hoạt thao tác mặc định và Alt + Mũi tên xuống hoặc F4 để kích hoạt thao tác mũi tên
 
+MENU_BACK_BUTTON_ARIA_LABEL=Quay lại
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=Từ chối

package/src/i18n/messagebundle_zh_CN.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改颜色
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多颜色...
 
+COLORPICKER_ALPHA_SLIDER=Alpha 控制
+
+COLORPICKER_HUE_SLIDER=色度控制
+
+COLORPICKER_HEX=十六进制
+
+COLORPICKER_RED=红色
+
+COLORPICKER_GREEN=绿色
+
+COLORPICKER_BLUE=蓝色
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=打开选取器
 
 DATEPICKER_DATE_DESCRIPTION=日期输入
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=分段式按钮
 
 SLIDER_ARIA_DESCRIPTION=滑块手柄
 
-SWITCH_ON=开
-
-SWITCH_OFF=关
-
 LOAD_MORE_TEXT=更多
 
 TABLE_HEADER_ROW_TEXT=抬头行
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=拆分按钮
 
 SPLIT_BUTTON_KEYBOARD_HINT=按空格键或 Enter 触发缺省操作，按 Alt + 向下箭头或 F4 触发箭头操作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒绝

package/src/i18n/messagebundle_zh_TW.properties

@@ -59,6 +59,20 @@ COLOR_PALETTE_DIALOG_TITLE=更改色彩
 
 COLOR_PALETTE_MORE_COLORS_TEXT=更多色彩...
 
+COLORPICKER_ALPHA_SLIDER=Alpha 控制
+
+COLORPICKER_HUE_SLIDER=色調控制
+
+COLORPICKER_HEX=十六進位
+
+COLORPICKER_RED=紅色
+
+COLORPICKER_GREEN=綠色
+
+COLORPICKER_BLUE=藍色
+
+COLORPICKER_ALPHA=Alpha
+
 DATEPICKER_OPEN_ICON_TITLE=開啟選擇器
 
 DATEPICKER_DATE_DESCRIPTION=日期輸入
@@ -151,10 +165,6 @@ SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=區段按鈕
 
 SLIDER_ARIA_DESCRIPTION=滑桿控點
 
-SWITCH_ON=開啟
-
-SWITCH_OFF=關閉
-
 LOAD_MORE_TEXT=較多
 
 TABLE_HEADER_ROW_TEXT=表頭列
@@ -245,3 +255,6 @@ SPLIT_BUTTON_DESCRIPTION=分割按鈕
 
 SPLIT_BUTTON_KEYBOARD_HINT=按下空格鍵或 Enter 以驅動預設動作，以及 Alt + 向下箭頭或 F4 以驅動箭頭動作
 
+MENU_BACK_BUTTON_ARIA_LABEL=返回
+
+MENU_CLOSE_BUTTON_ARIA_LABEL=拒絕

package/src/themes/AvatarGroup.css

@@ -10,6 +10,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -41,8 +42,8 @@
 
 ::slotted([ui5-button][focused]),
 .ui5-avatar-group-overflow-btn[focused] {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Badge.css

@@ -2,21 +2,19 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	height: var(--_ui5-badge-height);
+	height: 1rem;
 	min-width: 1.125em;
 	max-width: 100%;
 	padding: 0 0.3125em;
 	color: var(--sapAccentColor1);
 	background: var(--sapLegendBackgroundColor1);
-	border: var(--_ui5-badge-border);
-	border-inline-start: var(--_ui5-badge-left-border);
-	border-radius: var(--_ui5-badge-border-radius);
+	border: 0.0625em solid;
+	border-radius: 0.5rem;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
-	font-weight: var(--_ui5-badge-font-weight);
+	font-weight: bold;
 	text-align: center;
 	letter-spacing: 0.0125em;
-	transition: all .2s ease-in-out;
 }
 
 :host([color-scheme]:hover),
@@ -30,7 +28,7 @@
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
-	pointer-events: var(--_ui5_badge_pointer_events);
+	pointer-events: none;
 }
 
 .ui5-badge-text {
@@ -40,9 +38,9 @@
 	font-weight: inherit;
 	text-overflow: ellipsis;
 	line-height: 1;
-	text-transform: var(--_ui5-badge-text-transform);
+	text-transform: uppercase;
 	letter-spacing: inherit;
-	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
 }
 
 :host(:hover) .ui5-badge-text {
@@ -61,11 +59,6 @@
 	color: inherit;
 }
 
-/* IE 11 specific selector */
-[ui5-badge] [ui5-icon][slot="icon"] {
-	display: flex;
-}
-
 :host([_has-icon]) .ui5-badge-text {
 	padding-inline-start: 0.125rem;
 }
@@ -77,16 +70,6 @@
 	color: var(--ui5-badge-color-scheme-1-color);
 }
 
-:host([color-scheme="1"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-1-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-1-shadow);
-}
-
-:host([active][color-scheme="1"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
-	color: var(--ui5-badge-color-scheme-1-active-color);
-}
-
 /* Scheme 2 */
 :host([color-scheme="2"]) {
 	background-color: var(--ui5-badge-color-scheme-2-background);
@@ -94,16 +77,6 @@
 	color: var(--ui5-badge-color-scheme-2-color);
 }
 
-:host([color-scheme="2"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-2-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-2-shadow);
-}
-
-:host([active][color-scheme="2"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
-	color: var(--ui5-badge-color-scheme-2-active-color);
-}
-
 /* Scheme 3 */
 :host([color-scheme="3"]) {
 	background-color: var(--ui5-badge-color-scheme-3-background);
@@ -111,16 +84,6 @@
 	color: var(--ui5-badge-color-scheme-3-color);
 }
 
-:host([color-scheme="3"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-3-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-3-shadow);
-}
-
-:host([active][color-scheme="3"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
-	color: var(--ui5-badge-color-scheme-3-active-color);
-}
-
 /* Scheme 4 */
 :host([color-scheme="4"]) {
 	background-color: var(--ui5-badge-color-scheme-4-background);
@@ -128,16 +91,6 @@
 	color: var(--ui5-badge-color-scheme-4-color);
 }
 
-:host([color-scheme="4"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-4-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-4-shadow);
-}
-
-:host([active][color-scheme="4"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-4-active-shadow);
-	color: var(--ui5-badge-color-scheme-4-active-color);
-}
-
 /* Scheme 5 */
 :host([color-scheme="5"]) {
 	background-color: var(--ui5-badge-color-scheme-5-background);
@@ -145,16 +98,6 @@
 	color: var(--ui5-badge-color-scheme-5-color);
 }
 
-:host([color-scheme="5"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-5-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-5-shadow);
-}
-
-:host([active][color-scheme="5"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
-	color: var(--ui5-badge-color-scheme-5-active-color);
-}
-
 /* Scheme 6 */
 :host([color-scheme="6"]) {
 	background-color: var(--ui5-badge-color-scheme-6-background);
@@ -162,16 +105,6 @@
 	color: var(--ui5-badge-color-scheme-6-color);
 }
 
-:host([color-scheme="6"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-6-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-6-shadow);
-}
-
-:host([active][color-scheme="6"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
-	color: var(--ui5-badge-color-scheme-6-active-color);
-}
-
 /* Scheme 7 */
 :host([color-scheme="7"]) {
 	background-color: var(--ui5-badge-color-scheme-7-background);
@@ -179,16 +112,6 @@
 	color: var(--ui5-badge-color-scheme-7-color);
 }
 
-:host([color-scheme="7"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-7-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-7-shadow);
-}
-
-:host([active][color-scheme="7"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
-	color: var(--ui5-badge-color-scheme-7-active-color);
-}
-
 /* Scheme 8 */
 :host([color-scheme="8"]) {
 	background-color: var(--ui5-badge-color-scheme-8-background);
@@ -196,16 +119,6 @@
 	color: var(--ui5-badge-color-scheme-8-color);
 }
 
-:host([color-scheme="8"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-8-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-8-shadow);
-}
-
-:host([active][color-scheme="8"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
-	color: var(--ui5-badge-color-scheme-8-active-color);
-}
-
 /* Scheme 9 */
 :host([color-scheme="9"]) {
 	background-color: var(--ui5-badge-color-scheme-9-background);
@@ -213,29 +126,9 @@
 	color: var(--ui5-badge-color-scheme-9-color);
 }
 
-:host([color-scheme="9"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-9-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-9-shadow);
-}
-
-:host([active][color-scheme="9"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
-	color: var(--ui5-badge-color-scheme-9-active-color);
-}
-
 /* Scheme 10 */
 :host([color-scheme="10"]) {
 	background-color: var(--ui5-badge-color-scheme-10-background);
 	border-color: var(--ui5-badge-color-scheme-10-border);
 	color: var(--ui5-badge-color-scheme-10-color);
 }
-
-:host([color-scheme="10"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-10-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-10-shadow);
-}
-
-:host([active][color-scheme="10"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
-	color: var(--ui5-badge-color-scheme-10-active-color);
-}

package/src/themes/Breadcrumbs.css

@@ -25,8 +25,8 @@
 }
 
 .ui5-breadcrumbs-current-location > span:focus {
-	outline-offset: -1px;
-	outline: 1px dotted var(--sapContent_FocusColor);
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
@@ -41,6 +41,10 @@
     color: var(--sapLinkColor);
 }
 
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+    color: var(--_ui5_link_focus_color);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
     vertical-align: middle;

package/src/themes/BusyIndicator.css

@@ -6,17 +6,6 @@
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([_is-busy]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
-	opacity: 0.6;
-}
-
-/**
- * IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
- */
-:host([_is-busy]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
-	opacity: 0.95;
-}
-
 :host([size="Small"]) .ui5-busy-indicator-root {
 	min-width: 1.5rem;
 	min-height: .5rem;
@@ -131,13 +120,11 @@
 	0%, 50%, 100% {
 		-webkit-transform: scale(0.5);
 		-moz-transform: scale(0.5);
-		-ms-transform: scale(0.5);
 		transform: scale(0.5);
 	}
 	25% {
 		-webkit-transform: scale(1);
 		-moz-transform: scale(1);
-		-ms-transform: scale(1);
 		transform: scale(1);
 	}
 }

package/src/themes/Button.css

@@ -47,7 +47,6 @@
 	line-height: inherit;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 }
 

package/src/themes/Calendar.css

@@ -7,7 +7,7 @@
     box-sizing: border-box;
     height: var(--_ui5_calendar_height);
     width: var(--_ui5_calendar_width);
-    margin: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
+    padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end;

package/src/themes/CalendarHeader.css

@@ -17,12 +17,13 @@
 	align-items: center;
 	width: var(--_ui5_calendar_header_arrow_button_width);
 	background-color: var(--sapButton_Lite_Background);
-	color: var(--sapButton_TextColor);
+	color: var(--sapButton_Lite_TextColor);
 	cursor: pointer;
 	overflow: hidden;
 	white-space: nowrap;
 	padding: 0;
 	font-size: var(--sapFontSize);
+	user-select: none;
 }
 
 .ui5-calheader-arrowbtn.ui5-calheader-arrowbtn-disabled:hover,
@@ -33,7 +34,7 @@
 	opacity: 0.4;
 	outline: none;
 	background-color: var(--sapButton_Lite_Background);
-	color: var(--sapButton_TextColor);
+	color: var(--sapButton_Lite_TextColor);
 }
 
 [hidden].ui5-calheader-arrowbtn.ui5-calheader-middlebtn {
@@ -46,7 +47,7 @@
 
 .ui5-calheader-arrowbtn:hover {
 	background-color: var(--sapButton_Hover_Background);
-	color: var(--sapButton_Hover_TextColor);
+	color: var(--sapButton_Lite_TextColor);
 	box-shadow: var(--_ui5_calendar_header_arrow_button_box_shadow);
 }
 
@@ -60,7 +61,8 @@
 	border: var(--_ui5_calendar_header_arrow_button_border);
 	border-radius: var(--_ui5_calendar_header_arrow_button_border_radius);
 	display:flex;
-	background-color: var(--_ui5_calendar_header_button_background_color);
+	background-color: var(--sapButton_Lite_Background);
+	border-color: var(--sapButton_Lite_BorderColor);
 }
 
 .ui5-calheader-middlebtn {
@@ -91,14 +93,13 @@
 }
 
 .ui5-calheader-middlebtn {
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--_ui5_button_fontFamily);
 	width: var(--_ui5_calendar_header_middle_button_width);
 	flex: var(--_ui5_calendar_header_middle_button_flex);
 	position: relative;
 	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 }
 
@@ -129,4 +130,4 @@
 
 .ui5-calheader-middlebtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
-}
+}

package/src/themes/CardHeader.css

@@ -12,7 +12,7 @@
 	align-items: flex-start;
 }
 
-.ui5-card-header:focus:before {
+.ui5-card-header:not(.ui5-card-header-hide-focus):focus-within:before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -28,6 +28,16 @@
 	border-bottom-right-radius: var(--_ui5_card_header_focus_bottom_radius);
 }
 
+.ui5-card-header-focusable-element:focus {
+	outline: none;
+}
+
+.ui5-card-header-focusable-element {
+	display: inherit;
+	align-items: inherit;
+	flex: 1;
+}
+
 .ui5-card-header.ui5-card-header--interactive:hover {
 	cursor: pointer;
 	background: var(--_ui5_card_header_hover_bg);
@@ -86,7 +96,8 @@
 	overflow: hidden;
 	white-space: nowrap;
 	vertical-align: middle;
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
+	margin-block-start: 0.125rem;
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-header-title {

package/src/themes/Carousel.css

@@ -40,7 +40,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    background: var(--sapBackgroundColor);
+    background: var(--ui5_carousel_background_color);
     transition: transform 0.5s cubic-bezier(.46, 0, .44, 1);
     will-change: transform;
 }
@@ -72,7 +72,7 @@
     width: 100%;
     padding:0 0.5rem;
     position: absolute;
-    top: calc(50% - 2.5rem);
+    top: calc(50% - var(--ui5_carousel_button_size));
     left: 0;
     display: flex;
     justify-content: space-between;
@@ -106,6 +106,12 @@
     box-shadow: none;
     cursor: pointer;
     outline-offset: .1rem;
+
+    --_ui5_button_focused_border_radius: 50%;
+}
+
+.ui5-carousel-navigation-arrows .ui5-carousel-navigation-button {
+    box-shadow: var(--sapContent_Shadow1);
 }
 
 .ui5-carousel-navigation-button--hidden {
@@ -122,12 +128,12 @@
 }
 
 .ui5-carousel-navigation-dot {
-    width: var(--ui5_carousel_width);
-    height: var(--ui5_carousel_height);
-    margin: var(--ui5_carousel_margin);
+    width: var(--ui5_carousel_inactive_dot_size);
+    height: var(--ui5_carousel_inactive_dot_size);
+    margin: var(--ui5_carousel_inactive_dot_margin);
     border-radius: 50%;
-    background-color: var(--ui5_carousel_dot_background);
-    border: var(--ui5_carousel_dot_border);
+    background-color: var(--ui5_carousel_inactive_dot_background);
+    border: var(--ui5_carousel_inactive_dot_border);
     transition: background-color .1s ease-in;
 }
 
@@ -135,6 +141,6 @@
     width: .5rem;
     height: .5rem;
     margin: 0 .25rem;
-    background-color: var(--sapSelectedColor);
-    border: var(--ui5_carousel_dot_border);
+    background-color: var(--ui5_carousel_active_dot_background);
+    border: var(--ui5_carousel_active_dot_border);
 }

package/src/themes/CheckBox.css

@@ -145,15 +145,6 @@
 	box-sizing: border-box;
 }
 
-/* Fixes IE11 bug for flex + min-height
-https://github.com/philipwalton/flexbugs/issues/231
-*/
-.ui5-checkbox-root::after {
-	content: "";
-	min-height: inherit;
-	font-size: 0;
-}
-
 /* focused */
 .ui5-checkbox-root:focus::before {
 	display: var(--_ui5_checkbox_focus_outline_display);
@@ -254,7 +245,6 @@ https://github.com/philipwalton/flexbugs/issues/231
 	overflow: hidden;
 	pointer-events: none;
 	user-select: none;
-	-ms-user-select: none;
 	-webkit-user-select: none;
 	color: var(--_ui5_checkbox_label_color);
 }

package/src/themes/ColorPalette.css

@@ -69,4 +69,9 @@
 .ui5-cp-separator {
 	height: 0.0625rem;
 	background: var(--sapToolbar_SeparatorColor);
+}
+
+.ui5-cp-default-color-button,
+.ui5-cp-more-colors {
+	padding: 0.0625rem;
 }