@ui5/webcomponents 2.0.0-rc.5 → 2.0.0

package/src/i18n/messagebundle_zh_TW.properties

@@ -19,8 +19,6 @@ AVATAR_GROUP_ARIA_LABEL_GROUP=結合虛擬個人頭像。
 
 AVATAR_GROUP_MOVE=按箭頭鍵以移動。
 
-TAG_DESCRIPTION_BADGE=徽章
-
 TAG_DESCRIPTION_TAG=標籤
 
 TAG_ROLE_DESCRIPTION=標籤按鈕
@@ -103,6 +101,12 @@ DATETIME_DESCRIPTION=日期時間輸入
 
 DATERANGE_DESCRIPTION=日期範圍輸入
 
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=選擇日期
+
+DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME=選擇日期和時間
+
+DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=選擇日期範圍
+
 DELETE=刪除
 
 FILEUPLOAD_BROWSE=瀏覽...
@@ -251,6 +255,8 @@ TIMEPICKER_CANCEL_BUTTON=取消
 
 TIMEPICKER_INPUT_DESCRIPTION=時間輸入
 
+TIMEPICKER_POPOVER_ACCESSIBLE_NAME=選擇時間
+
 TIMEPICKER_CLOCK_DIAL_LABEL=鐘面
 
 TIMEPICKER_INPUTS_ENTER_HOURS=請輸入小時
@@ -351,3 +357,10 @@ FORM_SELECTABLE_REQUIRED=請在清單中選擇項目。
 FORM_SELECTABLE_REQUIRED2=請選擇其中一個選項。
 
 FORM_TEXTFIELD_REQUIRED=請填寫此欄位。
+
+TABLE_SELECTION=選擇
+TABLE_ROW_SELECTOR=列選擇器
+TABLE_NO_DATA=無資料
+TABLE_ROW_POPIN=列對話方塊
+TABLE_MORE=更多
+TABLE_MORE_DESCRIPTION=按下 Enter 或空格鍵載入更多列

package/src/themes/Avatar.css

@@ -24,7 +24,7 @@
 	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
 }
 
-:host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus-within,
+:host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus,
 :host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
@@ -263,10 +263,6 @@
 
 	--_ui5-tag-height: 1.125rem;
 	--_ui5-tag-border-radius: 50%;
-
-	--ui5-tag-color-scheme-1-background: var(--sapButton_Emphasized_Background);
-	--ui5-tag-color-scheme-1-color: var(--sapButton_Emphasized_TextColor);
-	--ui5-tag-color-scheme-1-border: var(--sapButton_Emphasized_BorderColor);
 }
 
 :host([_size="L"]) ::slotted([slot="badge"]),

package/src/themes/AvatarGroup.css

@@ -13,7 +13,7 @@
 	outline: none;
 }
 
-:host([type="Group"][desktop]) .ui5-avatar-group-items:focus-within,
+:host([type="Group"][desktop]) .ui5-avatar-group-items:focus,
 :host([type="Group"]) .ui5-avatar-group-items:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
@@ -56,8 +56,8 @@
 	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
-::slotted([ui5-button][desktop]:focus-within),
-.ui5-avatar-group-overflow-btn[desktop]:focus-within {
+::slotted([ui5-button][desktop]:focus),
+.ui5-avatar-group-overflow-btn[desktop]:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_overflow_button_focus_offset);
 }

package/src/themes/BusyIndicator.css

@@ -89,6 +89,10 @@
 	flex-direction: column;
 }
 
+:host(:not(:empty)) .ui5-busy-indicator-busy-area {
+	background-color: var(--_ui5_busy_indicator_block_layer);
+}
+
 :host([desktop]) .ui5-busy-indicator-busy-area:focus,
 .ui5-busy-indicator-busy-area:focus-visible {
 	outline: var(--_ui5_busy_indicator_focus_outline);

package/src/themes/Calendar.css

@@ -2,6 +2,12 @@
     display: inline-block;
 }
 
+.ui5-cal-root .ui5-calheader {
+    display: block;
+    height: var(--_ui5_calendar_header_height);
+    font-family: var(--_ui5_button_fontFamily);
+}
+
 .ui5-cal-root {
     background: var(--sapList_Background);
     box-sizing: border-box;
@@ -14,11 +20,6 @@
     overflow: hidden;
 }
 
-.ui5-cal-root [ui5-calendar-header] {
-    height: var(--_ui5_calendar_header_height);
-    font-family: var(--_ui5_button_fontFamily);
-}
-
 .ui5-cal-root .ui5-cal-content {
     padding: 0 var(--_ui5_calendar_left_right_padding) var(--_ui5_calendar_top_bottom_padding);
 }

package/src/themes/CheckBox.css

@@ -43,7 +43,7 @@
 }
 
 /* wrap */
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root {
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root {
 	min-height: auto;
 	box-sizing: border-box;
 	align-items: flex-start;
@@ -51,19 +51,14 @@
 	padding-bottom: var(--_ui5_checkbox_root_side_padding);
 }
 
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-inner,
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-label {
-	margin-top: var(--_ui5_checkbox_wrapped_content_margin_top);
-}
-
-:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-label {
+:host(:not([wrapping-type="None"])[text]) .ui5-checkbox-root .ui5-checkbox-label {
 	overflow-wrap: break-word;
 	align-self: center;
 }
 
-:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus-within::before,
-:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
-	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
+:host([desktop][text]:not([wrapping-type="None"])) .ui5-checkbox-root:focus::before,
+.ui5-checkbox-root[text]:focus-visible::before {
+	inset-block: var(--_ui5_checkbox_wrapped_focus_inset_block);
 }
 
 /* value states */
@@ -133,7 +128,7 @@
 }
 
 /* focused */
-:host([desktop]) .ui5-checkbox-root:focus-within::before,
+:host([desktop]) .ui5-checkbox-root:focus::before,
 .ui5-checkbox-root:focus-visible::before {
 	display: var(--_ui5_checkbox_focus_outline_display);
 	content: "";
@@ -148,7 +143,7 @@
 	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
 }
 
-:host([text]) .ui5-checkbox-root:focus-within::before,
+:host([text]) .ui5-checkbox-root:focus::before,
 :host([text]) .ui5-checkbox-root:focus-visible::before {
 	inset-inline-end: 0;
 }

package/src/themes/Icon.css

@@ -50,7 +50,7 @@
 	color: var(--sapPositiveElementColor);
 }
 
-:host([mode="Interactive"][desktop]) .ui5-icon-root:focus-within,
+:host([mode="Interactive"][desktop]) .ui5-icon-root:focus,
 :host([mode="Interactive"]) .ui5-icon-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--ui5-icon-focus-border-radius);

package/src/themes/Link.css

@@ -71,11 +71,38 @@
 	color: inherit;
 }
 
+/* For cases when the text wraps, the icon should be displayed at the last row */
+:host([wrapping-type="None"][end-icon]) .ui5-link-root {
+	display: inline-flex;
+	align-items: end;
+}
+
 :host .ui5-link-root {
 	outline-offset: -0.0625rem;
 	border-radius: var(--_ui5_link_focus_border-radius);
 }
 
+.ui5-link-icon, 
+.ui5-link-end-icon {
+	color: inherit;
+	flex-shrink: 0;
+}
+
+.ui5-link-icon {
+	float: inline-start;
+	margin-inline-end: 0.125rem;
+}
+
+.ui5-link-end-icon {
+	margin-inline-start: 0.125rem;
+	vertical-align: bottom;
+}
+
+.ui5-link-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 :host([focused]) .ui5-link-root,
 :host([design="Subtle"][focused]) .ui5-link-root {
 	background-color: var(--_ui5_link_focus_background_color);

package/src/themes/ListItem.css

@@ -48,7 +48,7 @@
 	height: 5rem;
 }
 
-:host([_has-image-content]) {
+:host([_has-image]) {
 	height: 5rem;
 }
 
@@ -56,6 +56,13 @@
 	height: 3rem;
 }
 
+::slotted(img[slot="image"]){
+	width: var(--_ui5_list_item_img_size);
+	height: var(--_ui5_list_item_img_size);
+	border-radius: var(--ui5-avatar-border-radius);
+	object-fit: contain
+}
+
 :host([description]) .ui5-li-root {
 	padding: 1rem;
 }
@@ -108,14 +115,7 @@
 	align-self: flex-end;
 }
 
-.ui5-li-img {
-	width: var(--_ui5_list_item_img_size);
-	height: var(--_ui5_list_item_img_size);
-	border-radius: var(--ui5-avatar-border-radius);
-}
-
-.ui5-li-img,
-.ui5-li-imgContent {
+.ui5-li-image {
 	min-width: var(--_ui5_list_item_img_size);
 	min-height: var(--_ui5_list_item_img_size);
 	margin-top: var(--_ui5_list_item_img_top_margin);
@@ -123,10 +123,6 @@
 	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
 }
 
-.ui5-li-img-inner {
-	object-fit: contain;
-}
-
 .ui5-li-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);

package/src/themes/ListItemBase.css

@@ -1,6 +1,8 @@
 :host {
-	height: var(--_ui5_list_item_base_height);
 	box-sizing: border-box;
+	height: var(--_ui5_list_item_base_height);
+	background-color: var(--ui5-listitem-background-color);
+	border-bottom: 0.0625rem solid transparent;
 }
 
 :host(:not([hidden])) {
@@ -17,29 +19,29 @@
 	cursor: pointer;
 }
 
-:host([has-border]) .ui5-li-root {
+:host([has-border]) {
 	border-bottom: var(--ui5-listitem-border-bottom);
 }
 
 /* selected */
-:host([selected]) .ui5-li-root {
+:host([selected]) {
 	background-color: var(--sapList_SelectionBackgroundColor);
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
 }
 
 /* hovered */
-:host([actionable]:not([active], [selected]):hover) .ui5-li-root {
+:host([actionable]:not([active], [selected]):hover) {
 	background-color: var(--sapList_Hover_Background);
 }
 
 /* selected and hovered */
-:host([actionable][selected]:not([active], [data-moving]):hover) .ui5-li-root {
+:host([actionable][selected]:not([active], [data-moving]):hover) {
 	background-color: var(--sapList_Hover_SelectionBackground);
 }
 
 /* selected and active */
-:host([active][actionable]:not([data-moving])) .ui5-li-root,
-:host([active][actionable][selected]:not([data-moving])) .ui5-li-root {
+:host([active][actionable]:not([data-moving])),
+:host([active][actionable][selected]:not([data-moving])) {
 	background-color: var(--sapList_Active_Background);
 }
 
@@ -65,8 +67,7 @@
 	height: 100%;
 	padding: var(--_ui5_list_item_base_padding);
 	box-sizing: border-box;
-	background-color: var(--ui5-listitem-background-color);
-	border-bottom: 0.0625rem solid transparent;
+	background-color: inherit;
 }
 
 .ui5-li-root.ui5-li--focusable {

package/src/themes/MenuItem.css

@@ -77,10 +77,6 @@
 	padding: var(--_ui5_menu_item_padding);
 }
 
-:host([starts-section]) {
-	border-top: 1px solid var(--sapGroup_ContentBorderColor);
-}
-
 :host::part(content) {
 	padding-inline-end: 0.25rem;
 }

package/src/themes/MenuSeparator.css

@@ -0,0 +1,11 @@
+:host {
+	border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+	min-height: 0.125rem;
+}
+
+.ui5-menu-separator {
+	border: inherit;
+	min-height: inherit;
+	background: inherit;
+	opacity: 1;
+}

package/src/themes/SegmentedButtonItem.css

@@ -60,6 +60,11 @@
 .ui5-segmented-button-item-icon {
 	color: inherit;
 	flex-shrink: 0;
+	padding-inline-end: 0.375rem;
+}
+
+:host([icon-only]) .ui5-segmented-button-item-icon {
+	padding-inline-end: 0;
 }
 
 :host([icon-only]) .ui5-segmented-button-item-root {
@@ -97,7 +102,8 @@
 	/* calculating the minimum width by removing the icon size  */
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
-:host([disabled]:active) {
+
+:host([disabled]) {
 	pointer-events: none;
 }
 

package/src/themes/SuggestionItem.css

@@ -0,0 +1,14 @@
+:host([ui5-suggestion-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-suggestion-item]) .ui5-li-root {
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-suggestion-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}

package/src/themes/SuggestionItemCustom.css

@@ -0,0 +1,3 @@
+:host {
+	height: var(--_ui5_list_item_dropdown_base_height);
+}

package/src/themes/Suggestions.css

@@ -11,11 +11,6 @@
 	padding: 0 1rem;
 }
 
-.ui5-suggestions-popover [ui5-li]::part(icon),
-.ui5-suggestions-popover [ui5-li-suggestion-item]::part(icon) {
-	color: var(--sapList_TextColor);
-}
-
 .input-root-phone.native-input-wrapper {
 	display: contents;
 }

package/src/themes/TabContainer.css

@@ -4,7 +4,7 @@
 /* Global Base parameters        */
 /* ============================= */
 :host(:not([hidden])) {
-	display: inline-block;
+	display: block;
 	width: 100%;
 }
 

package/src/themes/Table.css

@@ -0,0 +1,42 @@
+:host {
+	display: block;
+    position: relative;
+    color: var(--sapList_TextColor);
+    font: var(--sapFontSize) var(--sapFontFamily);
+}
+
+:host([hidden]) {
+    display: none;
+}
+
+#table {
+    display: grid;
+    grid-auto-rows: minmax(min-content, auto);
+    background: var(--sapList_Background);
+}
+
+#nodata-cell {
+    grid-column: 1 / -1;
+    justify-content: center;
+}
+
+#footer {
+    grid-column: 1 / -1;
+    grid-template-rows: subgrid;
+    height: fit-content;
+}
+
+#growing-cell {
+    grid-column: 1 / -1;
+    justify-content: center;
+    padding: 0;
+    border-top: 1px solid var(--sapList_BorderColor);
+    box-sizing: border-box;
+}
+
+#loading {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    z-index: 2;
+}

package/src/themes/TableCell.css

@@ -0,0 +1,9 @@
+:host([_popin]) {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    align-items: center;
+}
+
+.popin-colon {
+    padding-inline-end: 0.5rem;
+}

package/src/themes/TableCellBase.css

@@ -0,0 +1,21 @@
+:host {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: var(--_ui5_table_cell_valign);
+    min-width: var(--_ui5_table_cell_min_width);
+    max-width: 100%;
+    overflow: clip;
+    overflow-clip-margin: content-box;
+    padding: var(--_ui5_table_cell_padding);
+    box-sizing: border-box;
+}
+
+:host(: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;
+}

package/src/themes/TableGrowing.css

@@ -0,0 +1,41 @@
+:host {
+	/** Growing Control spans the whole row **/
+	flex-grow: 1;
+}
+
+#growing-button:focus {
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+}
+
+#growing-button {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    cursor: pointer;
+}
+
+@media (hover: hover) {
+    #growing-button:hover {
+        background: var(--sapButton_Hover_Background);
+    }
+}
+
+#growing-button:active,#growing-button[active] {
+    background: var(--sapList_Active_Background);
+}
+
+#growing-text {
+    padding: 1rem 0 1rem 0;
+    font-size: var(--sapFontSize);
+    color: var(--sapButton_TextColor);
+    font-weight: bold;
+}
+
+#growing-subtext {
+    padding-bottom: 1rem;
+    color: var(--sapButton_TextColor);
+}

package/src/themes/TableHeaderCell.css

@@ -0,0 +1,8 @@
+:host {
+    font-family: var(--sapFontSemiboldDuplexFamily);
+    color: var(--sapList_HeaderTextColor);
+}
+
+:host(:empty) {
+    padding: 0;
+}

package/src/themes/TableHeaderRow.css

@@ -0,0 +1,20 @@
+:host {
+    background: var(--sapList_HeaderBackground);
+    grid-template-rows: var(--_ui5_list_item_base_height);
+    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
+}
+
+:host([hidden]) {
+    display: none;
+}
+
+:host([sticky]) {
+    position: sticky;
+    top: var(--ui5_grid_sticky_top, 0);
+    z-index: 1;
+}
+
+#popin-cell {
+    padding: 0;
+    width: 0;
+}

package/src/themes/TableRow.css

@@ -0,0 +1,48 @@
+:host {
+	background: var(--sapList_Background);
+}
+
+: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 {
+	grid-row: span 2;
+	min-width: 0;
+	padding: 0;
+}
+
+:host([navigated]) #navigated-cell {
+    background-color: var(--sapList_SelectionBorderColor);
+}
+
+:host([navigated]) #popin-cell {
+	grid-column: 1 / -2;
+}

package/src/themes/TableRowBase.css

@@ -0,0 +1,20 @@
+:host {
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([tabindex]:focus) {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+}
+
+#selection-cell {
+	padding: 0;
+}
+
+#selection-component {
+	vertical-align: middle;
+}