@ui5/webcomponents 2.8.0-rc.1 → 2.8.0-rc.3

package/src/themes/Avatar.css

@@ -20,7 +20,7 @@
 	color: var(--sapButton_Active_TextColor);
 }
 
-:host([interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+:host([interactive]:not([hidden]):not([disabled]):not(:active):not([focused]):hover) {
 	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
 }
 
@@ -153,6 +153,10 @@
 	color: var(--ui5-avatar-accent6-color);
 	border-color: var(--ui5-avatar-accent6-border-color);
 }
+:host([_color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_6_Hover_Background);
+}
 
 :host([_color-scheme="Accent1"]),
 :host([ui5-avatar][color-scheme="Accent1"]) {
@@ -161,6 +165,11 @@
 	border-color: var(--ui5-avatar-accent1-border-color);
 }
 
+:host([_color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_1_Hover_Background);
+}
+
 :host([_color-scheme="Accent2"]),
 :host([ui5-avatar][color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
@@ -168,6 +177,11 @@
 	border-color: var(--ui5-avatar-accent2-border-color);
 }
 
+:host([_color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_2_Hover_Background);
+}
+
 :host([_color-scheme="Accent3"]),
 :host([ui5-avatar][color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
@@ -175,6 +189,11 @@
 	border-color: var(--ui5-avatar-accent3-border-color);
 }
 
+:host([_color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_3_Hover_Background);
+}
+
 :host([_color-scheme="Accent4"]),
 :host([ui5-avatar][color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
@@ -182,6 +201,11 @@
 	border-color: var(--ui5-avatar-accent4-border-color);
 }
 
+:host([_color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_4_Hover_Background);
+}
+
 :host([_color-scheme="Accent5"]),
 :host([ui5-avatar][color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
@@ -189,6 +213,11 @@
 	border-color: var(--ui5-avatar-accent5-border-color);
 }
 
+:host([_color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_5_Hover_Background);
+}
+
 :host([_color-scheme="Accent7"]),
 :host([ui5-avatar][color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
@@ -196,6 +225,11 @@
 	border-color: var(--ui5-avatar-accent7-border-color);
 }
 
+:host([_color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_7_Hover_Background);
+}
+
 :host([_color-scheme="Accent8"]),
 :host([ui5-avatar][color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
@@ -203,6 +237,11 @@
 	border-color: var(--ui5-avatar-accent8-border-color);
 }
 
+:host([_color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_8_Hover_Background);
+}
+
 :host([_color-scheme="Accent9"]),
 :host([ui5-avatar][color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
@@ -210,6 +249,11 @@
 	border-color: var(--ui5-avatar-accent9-border-color);
 }
 
+:host([_color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_9_Hover_Background);
+}
+
 :host([_color-scheme="Accent10"]),
 :host([ui5-avatar][color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
@@ -217,11 +261,16 @@
 	border-color: var(--ui5-avatar-accent10-border-color);
 }
 
+:host([_color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover),
+:host([ui5-avatar][color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover) {
+	background-color: var(--sapAvatar_10_Hover_Background);
+}
+
 :host([_color-scheme="Placeholder"]),
 :host([ui5-avatar][color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
-	border-color: var(--ui5-avatar-placeholder-border-color);
+	border-color: var(--sapAvatar_Lite_BorderColor);
 }
 
 :host([_has-image]) {

package/src/themes/CheckBox.css

@@ -115,7 +115,7 @@
 	position: relative;
 	display: inline-flex;
 	align-items: center;
-	width: 100%;
+	max-width: 100%;
 	min-height: var(--_ui5_checkbox_width_height);
 	min-width: var(--_ui5_checkbox_width_height);
 	padding: 0 var(--_ui5_checkbox_wrapper_padding);

package/src/themes/List.css

@@ -90,6 +90,7 @@
 	height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
 	font-family: "72override", var(--sapFontFamily);
+	position: relative;
 }
 
 .ui5-list-nodata:focus::after {
@@ -98,7 +99,6 @@
 	position: absolute;
 	inset: 0.125rem;
 	pointer-events: none;
-	top: calc(50% + 0.125rem);
 }
 
 .ui5-list-nodata-text {

package/src/themes/Menu.css

@@ -1,3 +1,10 @@
+:host {
+	line-height: initial;
+}
+
+::slotted([ui5-menu-item]) {
+	line-height: inherit;
+  }
 
 .ui5-menu-rp[ui5-responsive-popover]::part(header),
 .ui5-menu-rp[ui5-responsive-popover]::part(content),

package/src/themes/PopupsCommon.css

@@ -33,6 +33,13 @@
     flex: auto;
 }
 
+/* when the content is keyboard focusable scroll container */
+.ui5-popup-content:focus {
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+    border-radius: var(--_ui5_popup_border_radius);
+}
+
 .ui5-popup-footer-root {
     background: var(--sapPageFooter_Background);
     border-top: 1px solid var(--sapPageFooter_BorderColor);
@@ -79,10 +86,6 @@
     display: none;
 }
 
-:host([no-scrolling]) .ui5-popup-content {
-    overflow: hidden;
-}
-
 /*** Responsive paddings for the content***/
 :host([media-range="S"]) .ui5-popup-content {
 	padding: 1rem var(--_ui5_popup_content_padding_s);

package/src/themes/Tag.css

@@ -14,7 +14,7 @@
 
 .ui5-tag-root {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	justify-content: center;
 	width: 100%;
 	min-width: 1.125em;
@@ -74,11 +74,6 @@
 	align-self: flex-start;
 }
 
-:host([wrapping-type="None"]) [ui5-icon],
-:host([wrapping-type="None"]) ::slotted([ui5-icon]) {
-	align-self: auto;
-}
-
 /* Value State Design Types */
 .ui5-tag-root {
 	background-color: var(--sapNeutralBackground);

package/src/themes/Text.css

@@ -1,22 +1,26 @@
 :host {
-	display: inline-block;
 	max-width: 100%;
 	font-size: var(--sapFontSize);
 	font-family: var(--sapFontFamily);
 	color: var(--sapTextColor);
 	line-height: normal;
-	white-space: pre-line;
-	word-wrap: break-word;
 	cursor: text;
+	overflow: hidden;
+}
+
+:host([max-lines="1"]) {
+	display: inline-block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-:host([max-lines]) {
+:host(:not([max-lines="1"])) {
 	display: -webkit-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;
-	overflow: hidden;
 	white-space: normal;
+	word-wrap: break-word;
 }
 
 .empty-indicator-aria-label {

package/src/themes/Toast.css

@@ -1,6 +1,6 @@
 :host {
 	font-family: "72override", var(--sapFontFamily);
-	color: var(--sapList_TextColor);
+	color: var(--sapContent_ContrastTextColor);
 	font-size: var(--sapFontSize);
 	position: fixed;
 	display: none;

package/src/themes/base/Avatar-parameters.css

@@ -1,5 +1,5 @@
 :root {
-	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem;
+	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem var();
 	--ui5-avatar-initials-color: var(--sapContent_ImagePlaceholderForegroundColor);
 	--ui5-avatar-border-radius: .25rem;
 	--ui5-avatar-border-radius-img-deduction: 0.0625rem;

package/src/themes/base/Toast-parameters.css

@@ -1,7 +1,7 @@
 :root {
 	--_ui5_toast_vertical_offset: 3rem;
 	--_ui5_toast_horizontal_offset: 2rem;
-	--_ui5_toast_background: var(--sapList_Background);
-	--_ui5_toast_shadow: var(--sapContent_Shadow2);
+	--_ui5_toast_background: var(--sapIndicationColor_9_Background);
+	--_ui5_toast_shadow: var(--sapContent_Lite_Shadow);
 	--_ui5_toast_offset_width: -0.1875rem;
 }

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

@@ -1,6 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
+	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem var( --sapAvatar_Hover_BorderColor);
 	--_ui5_avatar_focus_offset: 0.1875rem;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-border-radius: var(--sapElement_BorderCornerRadius);
@@ -32,7 +33,7 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapContent_ImagePlaceholderForegroundColor);
+	--ui5-avatar-placeholder-color:  var(--sapAvatar_Lite_Background);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);
@@ -44,7 +45,7 @@
 	--ui5-avatar-accent8-border-color: var(--sapAvatar_8_BorderColor);
 	--ui5-avatar-accent9-border-color: var(--sapAvatar_9_BorderColor);
 	--ui5-avatar-accent10-border-color: var(--sapAvatar_10_BorderColor);
-	--ui5-avatar-placeholder-border-color: var(--sapContent_ImagePlaceholderBackground);
+	--ui5-avatar-placeholder-border-color: var(--sapContent_ImagePlaceholderForegroundColor);
 
 	--_ui5_avatar_icon_XS: var(--_ui5_avatar_fontsize_XS);
 	--_ui5_avatar_icon_S: var(--_ui5_avatar_fontsize_S);

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

@@ -1,6 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
+	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem var( --sapAvatar_Hover_BorderColor);
 	--_ui5_avatar_focus_offset: 0.1875rem;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-border-radius: var(--sapElement_BorderCornerRadius);
@@ -44,7 +45,7 @@
 	--ui5-avatar-accent8-border-color: var(--sapAvatar_8_BorderColor);
 	--ui5-avatar-accent9-border-color: var(--sapAvatar_9_BorderColor);
 	--ui5-avatar-accent10-border-color: var(--sapAvatar_10_BorderColor);
-	--ui5-avatar-placeholder-border-color: var(--sapContent_ImagePlaceholderBackground);
+	--ui5-avatar-placeholder-border-color: var(--sapAvatar_Lite_BorderColor);
 
 	--_ui5_avatar_icon_XS: var(--_ui5_avatar_fontsize_XS);
 	--_ui5_avatar_icon_S: var(--_ui5_avatar_fontsize_S);

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

@@ -1,6 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
+	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem var( --sapAvatar_Hover_BorderColor);
 	--_ui5_avatar_focus_offset: 0.125rem;
 	--ui5-avatar-hover-box-shadow-offset: 0px;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
@@ -33,7 +34,7 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapContent_ImagePlaceholderForegroundColor);
+	--ui5-avatar-placeholder-color:  var(--sapAvatar_Lite_Background);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);
@@ -45,7 +46,7 @@
 	--ui5-avatar-accent8-border-color: var(--sapAvatar_8_BorderColor);
 	--ui5-avatar-accent9-border-color: var(--sapAvatar_9_BorderColor);
 	--ui5-avatar-accent10-border-color: var(--sapAvatar_10_BorderColor);
-	--ui5-avatar-placeholder-border-color: var(--sapGroup_ContentBorderColor);
+	--ui5-avatar-placeholder-border-color: var(--sapAvatar_Lite_BorderColor);
 
 	--_ui5_avatar_icon_XS: var(--_ui5_avatar_fontsize_XS);
 	--_ui5_avatar_icon_S: var(--_ui5_avatar_fontsize_S);

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

@@ -1,6 +1,7 @@
 @import "../base/Avatar-parameters.css";
 
 :root {
+	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem var( --sapAvatar_Hover_BorderColor);
 	--_ui5_avatar_focus_offset: 0.125rem;
 	--ui5-avatar-hover-box-shadow-offset: 0px;
 	--ui5-avatar-initials-border: 0.0625rem solid var(--sapAvatar_1_BorderColor);
@@ -33,7 +34,7 @@
 	--ui5-avatar-accent8-color: var(--sapAvatar_8_TextColor);
 	--ui5-avatar-accent9-color: var(--sapAvatar_9_TextColor);
 	--ui5-avatar-accent10-color:  var(--sapAvatar_10_TextColor);
-	--ui5-avatar-placeholder-color:  var(--sapContent_ImagePlaceholderForegroundColor);
+	--ui5-avatar-placeholder-color:  var(--sapAvatar_Lite_Background);
 
 	--ui5-avatar-accent1-border-color: var(--sapAvatar_1_BorderColor);
 	--ui5-avatar-accent2-border-color: var(--sapAvatar_2_BorderColor);
@@ -45,7 +46,7 @@
 	--ui5-avatar-accent8-border-color: var(--sapAvatar_8_BorderColor);
 	--ui5-avatar-accent9-border-color: var(--sapAvatar_9_BorderColor);
 	--ui5-avatar-accent10-border-color: var(--sapAvatar_10_BorderColor);
-	--ui5-avatar-placeholder-border-color: var(--sapGroup_ContentBorderColor);
+	--ui5-avatar-placeholder-border-color: var(--sapAvatar_Lite_BorderColor);
 
 	--_ui5_avatar_icon_XS: var(--_ui5_avatar_fontsize_XS);
 	--_ui5_avatar_icon_S: var(--_ui5_avatar_fontsize_S);

package/dist/SuggestionItemGroupTemplate.d.ts

@@ -1,2 +0,0 @@
-import type SuggestionItemGroup from "./SuggestionItemGroup.js";
-export default function SuggestionItemGroupTemplate(this: SuggestionItemGroup): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SuggestionItemGroupTemplate.js

@@ -1,5 +0,0 @@
-import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
-export default function SuggestionItemGroupTemplate() {
-    return ListItemGroupTemplate.call(this);
-}
-//# sourceMappingURL=SuggestionItemGroupTemplate.js.map

package/dist/SuggestionItemGroupTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SuggestionItemGroupTemplate.js","sourceRoot":"","sources":["../src/SuggestionItemGroupTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAG/D,MAAM,CAAC,OAAO,UAAU,2BAA2B;IAClD,OAAO,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import ListItemGroupTemplate from \"./ListItemGroupTemplate.js\";\nimport type SuggestionItemGroup from \"./SuggestionItemGroup.js\";\n\nexport default function SuggestionItemGroupTemplate(this: SuggestionItemGroup) {\n\treturn ListItemGroupTemplate.call(this);\n}\n"]}

package/src/SuggestionItemGroupTemplate.tsx

@@ -1,6 +0,0 @@
-import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
-import type SuggestionItemGroup from "./SuggestionItemGroup.js";
-
-export default function SuggestionItemGroupTemplate(this: SuggestionItemGroup) {
-	return ListItemGroupTemplate.call(this);
-}