@ui5/webcomponents-fiori 2.24.0-rc.1 → 2.24.0

package/src/themes/HeroBanner.css

@@ -16,13 +16,11 @@
 .ui5-banner-root {
 	box-sizing: border-box;
 	min-height: 5.75rem;
-	max-height: 24rem;
 	border-radius: inherit;
 	background-color: inherit;
 	background-image: inherit;
 	background-size: inherit;
 	box-shadow: var(--_ui5_banner_box_shadow);
-	border: var(--_ui5_banner_border);
 	overflow: hidden;
 	position: relative;
 }
@@ -43,8 +41,7 @@
 .ui5-banner-header {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: space-between;
 	gap: 1rem;
 }
@@ -52,7 +49,7 @@
 .ui5-banner-header-text {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
+	gap: 0.25rem;
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -313,18 +310,6 @@
 	grid-row: 2;
 }
 
-/* L → XS (≤1024px): Heading max 3 lines */
-@container (max-width: 1024px) {
-	.ui5-banner-heading {
-		display: -webkit-box;
-		-webkit-line-clamp: 3;
-		line-clamp: 3;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
 /* XS (≤599px): collapse split layouts to stacked column */
 @container (max-width: 599px) {
 	.ui5-banner-content.ui5-banner-columns-equal,
@@ -333,12 +318,30 @@
 		flex-direction: column;
 	}
 
-	.ui5-banner-block-start {
+	:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item) .ui5-banner-header,
+	:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)) .ui5-banner-header {
+		align-self: flex-start;
+	}
+
+	.ui5-banner-header {
 		order: 1;
+		flex-direction: column;
+		align-items: flex-start;
 	}
 
-	.ui5-banner-block-end {
+	.ui5-banner-actions,
+	.ui5-banner-actions-grid-item {
 		order: 2;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.ui5-banner-block-start {
+		order: 3;
+	}
+
+	.ui5-banner-block-end {
+		order: 4;
 	}
 
 	/* BottomStart no-columnsRatio grid collapses to column */

package/src/themes/IllustratedMessage.css

@@ -184,55 +184,55 @@
 }
 
 .sapIllus_BackgroundColor {
-    fill: var(--sapIllus_BackgroundColor);
+    fill: var(--sapContent_Illustrative_Color7);
 }
 
 .sapIllus_BrandColorPrimary {
-    fill: var(--sapIllus_BrandColorPrimary);
+    fill: var(--sapContent_Illustrative_Color1);
 }
 
 .sapIllus_BrandColorSecondary {
-    fill: var(--sapIllus_BrandColorSecondary);
+    fill: var(--sapContent_Illustrative_Color2);
 }
 
 .sapIllus_StrokeDetailColor {
-    fill: var(--sapIllus_StrokeDetailColor);
+    fill: var(--sapContent_Illustrative_Color4);
 }
 
 .sapIllus_Layering1 {
-    fill: var(--sapIllus_Layering1);
+    fill: var(--sapContent_Illustrative_Color5);
 }
 
 .sapIllus_Layering2 {
-    fill: var(--sapIllus_Layering2);
+    fill: var(--sapContent_Illustrative_Color6);
 }
 
 .sapIllus_ObjectFillColor {
-    fill: var(--sapIllus_ObjectFillColor);
+    fill: var(--sapContent_Illustrative_Color8);
 }
 
 .sapIllus_AccentColor {
-    fill: var(--sapIllus_AccentColor);
+    fill: var(--sapContent_Illustrative_Color3);
 }
 
 .sapIllus_NoColor {
-    fill: var(--sapIllus_NoColor);
+    fill: none;
 }
 
 .sapIllus_PatternShadow {
-    fill: var(--sapIllus_PatternShadow);
+    fill: url(#sapIllus_PatternShadow);
 }
 
 .sapIllus_PatternHighlight {
-    fill: var(--sapIllus_PatternHighlight);
+    fill: url(#sapIllus_PatternHighlight);
 }
 
 .sapIllus_NoColor_Fill {
-    fill: var(--sapIllus_NoColor);
+    fill: none;
 }
 .sapIllus_BrandColorPrimary_Fill {
-    fill: var(--sapIllus_BrandColorPrimary);
+    fill: var(--sapContent_Illustrative_Color1);
 }
 .sapIllus_ObjectFillColor_Fill {
-    fill: var(--sapIllus_ObjectFillColor);
+    fill: var(--sapContent_Illustrative_Color8);
 }

package/src/themes/Search.css

@@ -2,6 +2,7 @@
 
 .ui5-search-popover {
 	width: var(--search_width);
+	max-height: var(--_ui5_search_popover_max_height);
 	margin-top: .25rem;
 	box-sizing: border-box;
 }

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

@@ -2,7 +2,6 @@
 	--_ui5_banner_background: var(--sapShell_HeroBanner_Background);
 	--_ui5_banner_text_color: var(--sapShell_HeroBanner_TextColor);
 	--_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);
-	--_ui5_banner_border: 0.0625rem solid var(--sapTile_BorderColor);
 	--_ui5_banner_box_shadow: var(--sapContent_Shadow0);
 	--_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);
 }

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

@@ -1,6 +1,7 @@
 :host {
 	--_ui5_search_item_vertical_padding: 1rem;
 	--_ui5_search_byline_vertical_padding: .5rem;
+	--_ui5_search_popover_max_height: 39rem;
 }
 
 @container style(--ui5_content_density: compact) {

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "../base/NotificationListItem-parameters.css";

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "../base/NotificationListItem-parameters.css";

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "../base/NotificationListItem-parameters.css";

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "../base/NotificationListItem-parameters.css";

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

@@ -2,7 +2,6 @@
 @import "./HeroBanner-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "./NotificationListItem-parameters.css";

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

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "./NotificationListItem-parameters.css";

package/src/themes/sap_horizon_dark_exp/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "../base/Page-parameters.css";

package/src/themes/sap_horizon_exp/parameters-bundle.css

@@ -1,7 +1,6 @@
 @import "../base/HeroBanner-parameters.css";
 @import "../sap_horizon/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "../base/Page-parameters.css";

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

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "./NotificationListItem-parameters.css";

package/src/themes/sap_horizon_hcb_exp/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "./Page-parameters.css";

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

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "./NotificationListItem-parameters.css";

package/src/themes/sap_horizon_hcw_exp/parameters-bundle.css

@@ -1,6 +1,5 @@
 @import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
-@import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
 @import "../base/MediaGalleryItem-parameters.css";
 @import "./Page-parameters.css";

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

@@ -1,13 +0,0 @@
-:host {
-    --sapIllus_BrandColorPrimary: var(--sapContent_Illustrative_Color1);
-    --sapIllus_BrandColorSecondary: var(--sapContent_Illustrative_Color2);
-    --sapIllus_StrokeDetailColor: var(--sapContent_Illustrative_Color4);
-    --sapIllus_Layering1: var(--sapContent_Illustrative_Color5);
-    --sapIllus_Layering2: var(--sapContent_Illustrative_Color6);
-    --sapIllus_BackgroundColor: var(--sapContent_Illustrative_Color7);
-    --sapIllus_ObjectFillColor: var(--sapContent_Illustrative_Color8);
-    --sapIllus_AccentColor: var(--sapContent_Illustrative_Color3);
-    --sapIllus_NoColor: none;
-    --sapIllus_PatternShadow: url(#sapIllus_PatternShadow);
-    --sapIllus_PatternHighlight: url(#sapIllus_PatternHighlight);
-  }