@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/themes/List.css

@@ -16,11 +16,11 @@
 	border-bottom: 0;
 }
 
-:host([busy]) {
+:host([loading]) {
 	opacity: 0.72;
 }
 
-:host([busy]) .ui5-list-busy-row {
+:host([loading]) .ui5-list-loading-row {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -29,7 +29,7 @@
 	outline: none;
 }
 
-:host([busy]) .ui5-list-busy-ind {
+:host([loading]) .ui5-list-loading-ind {
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -114,4 +114,9 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+}
+
+:host([growing="Scroll"]) .ui5-list-end-marker {
+	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
+	display: inline-block;
 }

package/src/themes/ListItem.css

@@ -1,32 +1,5 @@
 @import "./InvisibleTextStyles.css";
 
-/* actionable (type="Active" + desktop) */
-:host([actionable]:not([disabled])) {
-	cursor: pointer;
-}
-
-/* selected and hovered */
-:host([selected][actionable]:not([active]):hover) {
-	background : var(--sapList_Hover_SelectionBackground);
-}
-
-/* selected and active */
-:host([active][actionable]),
-:host([selected][active][actionable]) {
-	background: var(--sapList_Active_Background);
-}
-
-/* hovered */
-:host([actionable]:not([active]):not([selected]):hover) {
-	background : var(--sapList_Hover_Background);
-}
-
-/* focused */
-:host([active][actionable]) .ui5-li-root.ui5-li--focusable:focus,
-:host([active][actionable]) .ui5-li-root.ui5-li--focusable .ui5-li-content:focus {
-	outline-color: var(--sapContent_ContrastFocusColor);
-}
-
 /* navigated */
 :host([navigated]) .ui5-li-root .ui5-li-navigated {
 	width: 0.1875rem;
@@ -50,15 +23,15 @@
 }
 
 /* [ui5-li]: additionalTextState */
-:host([additional-text-state="Warning"]) .ui5-li-additional-text {
+:host([additional-text-state="Critical"]) .ui5-li-additional-text {
 	color: var(--sapCriticalTextColor);
 }
 
-:host([additional-text-state="Success"]) .ui5-li-additional-text {
+:host([additional-text-state="Positive"]) .ui5-li-additional-text {
 	color: var(--sapPositiveTextColor);
 }
 
-:host([additional-text-state="Error"]) .ui5-li-additional-text {
+:host([additional-text-state="Negative"]) .ui5-li-additional-text {
 	color: var(--sapNegativeTextColor);
 }
 
@@ -96,11 +69,7 @@
 }
 
 .ui5-li-text-wrapper {
-	display: flex;
 	flex-direction: column;
-	flex: auto;
-	min-width: 1px;
-	line-height: normal;
 }
 
 :host([description]) .ui5-li-text-wrapper {
@@ -114,11 +83,6 @@
 	justify-content: space-between;
 }
 
-.ui5-li-title {
-	color: var(--sapList_TextColor);
-	font-size: var(--_ui5_list_item_title_size);
-}
-
 .ui5-li-additional-text,
 :host(:not([wrapping-type="Normal"])) .ui5-li-title,
 .ui5-li-desc {
@@ -140,14 +104,6 @@
 	font-size: var(--sapFontSize);
 }
 
-.ui5-li-additional-text {
-	margin: 0 0.25rem;
-	color: var(--sapNeutralTextColor);
-	font-size: var(--sapFontSize);
-	min-width: 3.75rem;
-	text-align: end;
-}
-
 :host([description]) .ui5-li-additional-text {
 	align-self: flex-end;
 }
@@ -178,13 +134,6 @@
 	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
 }
 
-.ui5-li-content {
-	display: flex;
-	align-items: center;
-	flex: auto;
-	overflow: hidden;
-}
-
 .ui5-li-detailbtn,
 .ui5-li-deletebtn {
 	display: flex;
@@ -207,18 +156,45 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([_mode="SingleSelectBegin"]) .ui5-li-root {
+:host([_selection-mode="SingleStart"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_mode="MultiSelect"]) .ui5-li-root {
+:host([_selection-mode="Multiple"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_mode="SingleSelectEnd"]) .ui5-li-root {
+:host([_selection-mode="SingleEnd"]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 
 :host [ui5-checkbox].ui5-li-singlesel-radiobtn {
 	margin-right: var(--_ui5_list_item_cb_margin_right);
 }
+
+/* highlight */
+.ui5-li-highlight {
+	position: absolute;
+    width: 0.375rem;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    border-inline-end: 0.0625rem solid var(--ui5-listitem-background-color);
+    box-sizing: border-box;
+}
+
+:host([highlight="Negative"]) .ui5-li-highlight {
+	background: var(--sapNegativeTextColor);
+}
+
+:host([highlight="Critical"]) .ui5-li-highlight {
+	background: var(--sapCriticalTextColor);
+}
+
+:host([highlight="Positive"]) .ui5-li-highlight {
+	background: var(--sapPositiveTextColor);
+}
+
+:host([highlight="Information"]) .ui5-li-highlight {
+	background: var(--sapInformativeTextColor);
+}

package/src/themes/ListItemAdditionalText.css

@@ -0,0 +1,10 @@
+.ui5-li-additional-text {
+	margin: 0 0.25rem;
+	color: var(--sapNeutralTextColor);
+	font-size: var(--sapFontSize);
+	min-width: 3.75rem;
+	text-align: end;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}

package/src/themes/ListItemBase.css

@@ -14,6 +14,33 @@
 	background: var(--sapList_SelectionBackgroundColor);
 }
 
+/* actionable (type="Active" + desktop) */
+:host([actionable]:not([disabled])) {
+	cursor: pointer;
+}
+
+/* selected and hovered */
+:host([selected][actionable]:not([active]):not([data-moving]):hover) {
+	background : var(--sapList_Hover_SelectionBackground);
+}
+
+/* selected and active */
+:host([active][actionable]:not([data-moving])),
+:host([selected][active][actionable]:not([data-moving])) {
+	background: var(--sapList_Active_Background);
+}
+
+/* hovered */
+:host([actionable]:not([active]):not([selected]):hover) {
+	background : var(--sapList_Hover_Background);
+}
+
+/* focused */
+:host([active][actionable]) .ui5-li-root.ui5-li--focusable:focus,
+:host([active][actionable]) .ui5-li-root.ui5-li--focusable .ui5-li-content:focus {
+	outline-color: var(--sapContent_ContrastFocusColor);
+}
+
 :host([has-border]) {
 	border-bottom: var(--ui5-listitem-border-bottom);
 }
@@ -37,8 +64,25 @@
 	align-items: center;
 	width: 100%;
 	height: 100%;
-	padding: 0 1rem;
+	padding: var(--_ui5_list_item_base_padding);
 	box-sizing: border-box;
+	background: inherit;
+}
+
+.ui5-li-content {
+	display: flex;
+	align-items: center;
+	flex: auto;
+	overflow: hidden;
+}
+
+.ui5-li-text-wrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	flex: auto;
+	min-width: 1px;
+	line-height: normal;
 }
 
 /* focused */
@@ -46,7 +90,7 @@
 	outline: none;
 }
 
-:host([focused]) .ui5-li-root.ui5-li--focusable:after {
+:host([focused]:not([data-moving])) .ui5-li-root.ui5-li--focusable:after {
 	content: "";
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	position: absolute;
@@ -55,7 +99,7 @@
 	pointer-events: none;
 }
 
-:host([focused]) .ui5-li-content:focus:after {
+:host([focused]:not(data-moving)) .ui5-li-root .ui5-li-content:focus:after {
 	content: "";
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	position: absolute;
@@ -80,3 +124,8 @@
 	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapList_TextColor);
 }
+
+.ui5-li-content .ui5-li-title {
+	color: var(--sapList_TextColor);
+	font-size: var(--_ui5_list_item_title_size);
+}

package/src/themes/ListItemGroup.css

@@ -0,0 +1,13 @@
+@import "./InvisibleTextStyles.css";
+
+:host {
+	height: var(--_ui5_group_header_list_item_height);
+	background: var(--ui5-group-header-listitem-background-color);
+	color: var(--sapList_TableGroupHeaderTextColor);
+}
+
+.ui5-group-li-root {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}

package/src/themes/{GroupHeaderListItem.css → ListItemGroupHeader.css}

@@ -27,3 +27,7 @@
 	font-weight: bold;
 	font-family: var(--sapFontHeaderFamily);
 }
+
+.ui5-li-content {
+	width: 100%;
+}

package/src/themes/ListItemIcon.css

@@ -0,0 +1,6 @@
+.ui5-li-icon {
+	color: var(--sapList_TextColor);
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
+}

package/src/themes/Menu.css

@@ -8,47 +8,6 @@
 .ui5-menu-rp[ui5-responsive-popover] {
 	box-shadow: var(--sapContent_Shadow1);
 	border-radius: var(--_ui5_menu_popover_border_radius);
-	max-width: 20rem;
-}
-
-.ui5-menu-item-icon-end {
-	display: inline-block;
-	vertical-align: middle;
-	padding-inline-start: 0.5rem;
-	pointer-events: none;
-	position: absolute;
-	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
-}
-
-.ui5-menu-item-no-icon-end {
-	min-width: var(--_ui5_list_item_icon_size);
-	min-height: var(--_ui5_list_item_icon_size);
-	display: inline-block;
-	vertical-align: middle;
-	padding-inline-start: 0.5rem;
-	pointer-events: none;
-	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
-}
-
-.ui5-menu-item[additional-text] .ui5-menu-item-no-icon-end {
-	display: none;
-}
-
-.ui5-menu-item-dummy-icon {
-	min-width: var(--_ui5_list_item_icon_size);
-	min-height: var(--_ui5_list_item_icon_size);
-	display: inline-block;
-	vertical-align: middle;
-	padding-inline-end: 0.5rem;
-	pointer-events: none;
-}
-
-.ui5-menu-item-submenu-icon {
-	min-width: var(--_ui5_list_item_icon_size);
-	min-height: var(--_ui5_list_item_icon_size);
-	display: inline-block;
-	vertical-align: middle;
-	pointer-events: none;
 }
 
 .ui5-menu-busy-indicator {
@@ -85,56 +44,3 @@
 .ui5-menu-back-button {
 	margin-right: 1rem;
 }
-
-.ui5-menu-item::part(title) {
-    font-size: var(--sapFontSize);
-	padding-top: 0.125rem;
-}
-
-.ui5-menu-item[icon]:not([is-phone])::part(title),
-.ui5-menu-item[is-phone]:not([icon=""])::part(title) {
-	padding-top: 0;
-}
-
-.ui5-menu-item:not([is-phone])::part(native-li) {
-	padding: var(--_ui5_menu_item_padding);
-}
-
-.ui5-menu-item[starts-section] {
-	border-top: 1px solid var(--sapGroup_ContentBorderColor);
-}
-
-.ui5-menu-item[active] .ui5-menu-item-icon-end {
-	color: var(--sapList_Active_TextColor);
-}
-
-.ui5-menu-item[focused]:not([active]) {
-	background-color: var(--sapList_Hover_Background);
-}
-
-.ui5-menu-rp[sub-menu] {
-	margin-top: 0.25rem;
-	margin-inline: var(--_ui5_menu_submenu_margin_offset);
-}
-
-.ui5-menu-rp[sub-menu][actual-placement-type="Left"] {
-	margin-top: 0.25rem;
-	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
-}
-
-.ui5-menu-item::part(additional-text) {
-	margin-inline-start: var(--_ui5_menu_item_additional_text_start_margin);
-	color: var(--sapContent_LabelColor);
-	min-width: max-content;
-}
-
-.ui5-menu-item-text {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	pointer-events: none;
-}
-
-.ui5-menu-item-text:has(.ui5-menu-item-submenu-icon) {
-	padding-inline-end: 1rem;
-}

package/src/themes/MenuItem.css

@@ -0,0 +1,112 @@
+@import "./Menu.css";
+
+.ui5-menu-rp[sub-menu] {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_margin_offset);
+}
+
+.ui5-menu-rp[sub-menu][actual-placement="Start"] {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
+}
+
+:host([disabled]) {
+	pointer-events: initial;
+	opacity: initial;
+}
+
+:host([disabled])::part(content) {
+	opacity: var(--_ui5-listitembase_disabled_opacity);
+}
+
+/* hovered and active */
+:host([disabled][actionable]:not([active]):not([selected]):hover),
+:host([disabled][active][actionable]) {
+	background: var(--ui5-listitem-background-color);
+}
+
+/* active */
+:host([disabled][active][actionable]) .ui5-li-root .ui5-li-icon {
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
+:host([active][actionable]:not([disabled]))::part(content),
+:host([active][actionable]:not([disabled]))::part(additional-text)  {
+	color: var(--sapList_Active_TextColor);
+}
+
+:host([focused]:not([active]):not([disabled])) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+:host(:not([is-phone]))::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+:host::part(additional-text) {
+	margin: unset;
+	margin-inline-start: 1rem;
+	color: var(--sapContent_LabelColor);
+	min-width: max-content;
+}
+
+.ui5-menu-item-text {
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+	display: inline-block;
+}
+
+.ui5-menu-item-dummy-icon {
+	visibility: hidden;
+}
+
+:host::part(title) {
+	font-size: var(--sapFontSize);
+	padding-top: 0.125rem;
+}
+
+:host([icon]:not([is-phone]))::part(title),
+:host([is-phone]:not([icon=""]))::part(title) {
+	padding-top: 0;
+}
+
+:host(:not([is-phone]))::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+:host([starts-section]) {
+	border-top: 1px solid var(--sapGroup_ContentBorderColor);
+}
+
+:host::part(content) {
+	padding-inline-end: 0.5rem;
+}
+
+.ui5-menu-item-submenu-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	pointer-events: none;
+}
+
+.ui5-menu-item-icon-end {
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-start: 0.5rem;
+	pointer-events: none;
+	position: absolute;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
+}
+
+.ui5-menu-item-dummy-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-end: 0.5rem;
+	pointer-events: none;
+}

package/src/themes/MessageStrip.css

@@ -55,12 +55,12 @@
 	color: var(--sapNegativeElementColor);
 }
 
-.ui5-message-strip-root--warning {
+.ui5-message-strip-root--critical {
 	background-color: var(--sapWarningBackground);
 	border-color: var(--sapMessage_WarningBorderColor);
 }
 
-.ui5-message-strip-root--warning .ui5-message-strip-icon {
+.ui5-message-strip-root--critical .ui5-message-strip-icon {
 	color: var(--sapCriticalElementColor);
 }
 
@@ -88,4 +88,157 @@
 	position: absolute;
 	top: var(--_ui5_message_strip_close_button_top);
 	inset-inline-end: var(--_ui5_message_strip_close_button_right);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-1,
+:host(:not([color-scheme])[design="ColorSet1"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_1_Background);
+	border-color: var(--sapIndicationColor_1_BorderColor);
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_2_Background);
+	border-color: var(--sapIndicationColor_2_BorderColor);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_3_Background);
+	border-color: var(--sapIndicationColor_3_BorderColor);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_4_Background);
+	border-color: var(--sapIndicationColor_4_BorderColor);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_5_Background);
+	border-color: var(--sapIndicationColor_5_BorderColor);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_6_Background);
+	border-color: var(--sapIndicationColor_6_BorderColor);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_7_Background);
+	border-color: var(--sapIndicationColor_7_BorderColor);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_8_Background);
+	border-color: var(--sapIndicationColor_8_BorderColor);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_9_Background);
+	border-color: var(--sapIndicationColor_9_BorderColor);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_10_Background);
+	border-color: var(--sapIndicationColor_10_BorderColor);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-2,
+:host(:not([color-scheme])[design="ColorSet2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_1_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_1_set_2_border_color)
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_2_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_2_set_2_border_color);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_3_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_3_set_2_border_color);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_4_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_4_set_2_border_color);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_5_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_5_set_2_border_color);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_6_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_6_set_2_border_color);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_7_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_7_set_2_border_color);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_8_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_8_set_2_border_color);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_9_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_9_set_2_border_color);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_10_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_10_set_2_border_color);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root ::slotted([slot="icon"]){
+	color: var(--sapContent_ContrastIconColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapTextColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button {
+	color: var(--_ui5_message_strip_close_button_color_set_1_color);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button,
+:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) { 
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:hover {
+	border-color: var(--sapContent_ContrastIconColor);
+	background-color: var(--_ui5_message_strip_close_button_color_set_1_background);
+	color: var(--_ui5_message_strip_close_button_color_set_1_hover_color);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:hover {
+	background-color: var(--_ui5_message_strip_close_button_color_set_2_background);
+	border-color: var(--sapContent_IconColor);
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_ContrastIconColor);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):after,
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):before {
+	border-color: var(--sapContent_ContrastFocusColor);
 }