@ui5/webcomponents-fiori 2.19.0-rc.2 → 2.19.0-rc.3

package/src/themes/ShellBar.css

@@ -9,13 +9,22 @@
 }
 
 :host {
+	box-shadow: inset 0 -0.0625rem 0 0 var(--sapPageHeader_BorderColor);
+}
+
+::slotted([ui5-input]) {
 	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
 	--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
 	--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
 	--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
 	--_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
 	--_ui5_input_margin_top_bottom: 0;
-	box-shadow: inset 0 -0.0625rem 0 0 var(--sapPageHeader_BorderColor);
+}
+
+::slotted([ui5-button]),
+[ui5-button],
+::slotted([ui5-toggle-button]),
+[ui5-toggle-button] {
 	/* Overwrite the default button styles to fulfill no "compact" mode of ui5-shellbar */
 	--_ui5_button_base_min_width: 2.25rem;
 	--_ui5_button_base_padding: 0.5625rem;
@@ -92,7 +101,7 @@
 ::slotted([ui5-button][active]),
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
 .ui5-shellbar-button[active],
-.ui5-shellbar-image-button:active{
+.ui5-shellbar-image-button:active {
 	background: var(--sapShell_Active_Background);
 	border-color: var(--sapButton_Lite_Active_BorderColor);
 	color: var(--_ui5_shellbar_button_active_color);
@@ -243,7 +252,7 @@ slot[name="profile"] {
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
-.ui5-shellbar-overflow-container > .ui5-shellbar-logo:hover,
+.ui5-shellbar-overflow-container>.ui5-shellbar-logo:hover,
 .ui5-shellbar-logo-area:hover {
 	box-shadow: var(--_ui5_shellbar_button_box_shadow);
 	border-radius: var(--_ui5_shellbar_logo_border_radius);
@@ -282,11 +291,11 @@ slot[name="profile"] {
 	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
 }
 
-.ui5-shellbar-cancel-button{
+.ui5-shellbar-cancel-button {
 	color: var(--_ui5-shellbar_cancel-button-color);
 }
 
-.ui5-shellbar-cancel-button:hover{
+.ui5-shellbar-cancel-button:hover {
 	color: var(--_ui5-shellbar_cancel-button-color);
 }
 
@@ -307,7 +316,7 @@ slot[name="profile"] {
 	flex-shrink: 0;
 }
 
-.ui5-shellbar-overflow-container-left > :nth-child(n) {
+.ui5-shellbar-overflow-container-left> :nth-child(n) {
 	margin-inline-end: 0.5rem;
 }
 
@@ -402,15 +411,15 @@ slot[name="profile"] {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
- 	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
+	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
 }
 
 .ui5-shellbar-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"] {
-    inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
+	inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
 }
 
 .ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"] {
-    inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
+	inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
 }
 
 .ui5-shellbar-menu-button {
@@ -425,7 +434,7 @@ slot[name="profile"] {
 	margin-inline-start: 0.5rem;
 }
 
-.ui5-shellbar-overflow-container-right-child > :first-child {
+.ui5-shellbar-overflow-container-right-child> :first-child {
 	margin-inline-start: 0;
 }
 

package/src/themes/UserMenu.css

@@ -52,11 +52,15 @@
     overflow: hidden;
 }
 
-.ui5-user-menu--selected-account-avatar {
+.ui5-user-menu-selected-account-avatar {
     margin-block-start: 0.25rem;
     margin-block-end: 0.5rem;
 }
 
+.ui5-user-menu-avatar-img {
+	object-fit: cover;
+}
+
 .ui5-user-menu-selected-account-title {
 	text-align: center;
     margin-block: 0.25rem;

package/src/themes/UserMenuItem.css

@@ -1,5 +1,6 @@
 :host {
     height: 40px;
+	border: none;
 }
 
 :host(:last-of-type) {

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

@@ -1,4 +1,4 @@
-:root {
+:host {
     --_ui5_dynamic_page_footer_spacer: 4rem;
 
     --_ui5_dynamic_page_title_padding_S: 0.5rem 1rem;

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

@@ -1,4 +1,4 @@
-:root {
+:host {
     --_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);
     --_ui5_dynamic_page_header-actions-box-shadow: var(--sapContent_Shadow0);
     --_ui5_dynamic_page_header-box-shadow: var(--sapContent_HeaderShadow);

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_dynamic_page_actions-lines-color: transparent;
 	--_ui5_dynamic_page_header-actions-background: var(--sapObjectHeader_Background);
 	--_ui5_dynamic_page_header-actions-color: var(--sapButton_TextColor);

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_dynamic_page_title_padding_top: 0.5rem;
     --_ui5_dynamic_page_title_padding_bottom: 0.5rem;
     --_ui5_dynamic_page_title_min_height: 4rem;

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_fcl_solid_bg: var(--sapShell_Background);
 	--_ui5_fcl_column_border: none;
 	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), transparent);

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

@@ -1,13 +1,13 @@
-:root {
-    --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);
+: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);
   }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Neutral_Background);
 	--_ui5_media_gallery_overflow_btn_color:  var(--sapBaseColor);
 	--_ui5_media_gallery_overflow_btn_border:  none;

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_media_gallery_thumbnail_border: 1px solid var(--sapContent_ForegroundColor);
 	--_ui5_media_gallery_thumbnail_selected_border: 2px solid var(--sapSelectedColor);
 	--_ui5_media_gallery_thumbnail_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5-notification_item-border-radius: 0px;
 	--_ui5-notification_group_header-border-bottom-width: 0.0625rem;
 	--_ui5-notification_group_header-margin: 0px;
@@ -23,11 +23,11 @@
 	--_ui5-notification_item-growing-btn-background-color-active: var(--sapList_Active_Background);
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5-notification_item-description-margin-top: 0.5rem;
-	--_ui5-notification_item-footer-margin-top: 0.5rem;
-	--_ui5-notification_item-title-padding-end-two-buttons: 3.875rem;
-	--_ui5-notification_item-title-padding-end-one-button: 1.875rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5-notification_item-description-margin-top: 0.5rem;
+		--_ui5-notification_item-footer-margin-top: 0.5rem;
+		--_ui5-notification_item-title-padding-end-two-buttons: 3.875rem;
+		--_ui5-notification_item-title-padding-end-one-button: 1.875rem;
+	}
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_page_list_bg: var(--sapGroup_ContentBackground);
 	--_ui5_page_transparent_bg: transparent;
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_product_switch_item_width: 11.25rem;
 	--_ui5_product_switch_item_height: 7rem;
 	--_ui5_product_switch_item_active_outline_color: var(--sapContent_ContrastFocusColor);

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

@@ -1,10 +1,10 @@
-:root {
+:host {
 	--_ui5_search_item_vertical_padding: 1rem;
 	--_ui5_search_byline_vertical_padding: .5rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_search_item_vertical_padding: 0.5rem;
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_search_item_vertical_padding: 0.5rem;
+	}
+}

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_search_icon_border_radius: 1.125rem;
 	--_ui5_search_input_border_radius: 1.125rem;
 	--_ui5-search-border: none;
@@ -28,4 +28,5 @@
 	--_ui5-search-select-height: 1.625rem;
 	--_ui5-search-loading-overlay-background: var(--sapBackgroundColor);
 	--_ui5-search-loading-overlay-transparency: 0.72;
+	--_ui5-search-field-text-color: var(--sapField_TextColor);
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_shellbar_root_height: 2.75rem;
 	--_ui5_shellbar_logo_outline_color: var(--sapContent_ContrastFocusColor);
 	--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);

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

@@ -1,6 +1,6 @@
 /* fiori 3 */
 
-:root {
+:host {
 	--_ui5_side_navigation_width: 15rem;
 	--_ui5_side_navigation_collapsed_width: 3rem;
 
@@ -67,11 +67,11 @@
 	--_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
-	--_ui5_side_navigation_item_height: 2rem;
-	--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
-	--_ui5_side_navigation_item_margin: 0.5rem;
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
+		--_ui5_side_navigation_item_height: 2rem;
+		--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
+		--_ui5_side_navigation_item_margin: 0.5rem;
+	}
+}

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

@@ -1,14 +1,14 @@
-:root {
+:host {
 	--_ui5_timeline_tlgi_line_horizontal_height: 14.8125rem;
 	--_ui5_timeline_tlgi_root_horizontal_height: 19.9375rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_timeline_tlgi_compact_icon_before_height: calc(100% + 1.5rem);
-	--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5_timeline_tlgi_compact_icon_before_height);
-	--_ui5_timeline_tlgi_horizontal_compact_root_margin_left: 0.5rem;
-	--_ui5_timeline_tlgi_compact_root_gap: 0.5rem;
-	--_ui5_timeline_tlgi_root_horizontal_height: 19.375rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_timeline_tlgi_compact_icon_before_height: calc(100% + 1.5rem);
+		--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5_timeline_tlgi_compact_icon_before_height);
+		--_ui5_timeline_tlgi_horizontal_compact_root_margin_left: 0.5rem;
+		--_ui5_timeline_tlgi_compact_root_gap: 0.5rem;
+		--_ui5_timeline_tlgi_root_horizontal_height: 19.375rem;
+	}
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_TimelineItem_arrow_size: 1.625rem;
 	--_ui5_TimelineItem_bubble_border_width: 0.0625rem;
 	--_ui5_TimelineItem_bubble_border_style: dotted;
@@ -42,29 +42,29 @@
 	--_ui5_timeline_tli_horizontal_indicator_short_after_width: 100%;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	/* Timeline (container) */
-	--_ui5_tl_bubble_padding: .5rem;
-	--_ui5_tl_padding: .5rem;
-	--_ui5_tl_li_margin_bottom: .5rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* Timeline (container) */
+		--_ui5_tl_bubble_padding: .5rem;
+		--_ui5_tl_padding: .5rem;
+		--_ui5_tl_li_margin_bottom: .5rem;
 
-	/* TimelineItem */
-	--_ui5_timeline_tli_indicator_before_bottom: -0.75rem;
-	--_ui5_timeline_tli_indicator_before_right: -0.5rem;
-	--_ui5_timeline_tli_indicator_before_without_icon_bottom: -1rem;
-	--_ui5_timeline_tli_indicator_before_without_icon_right: -0.8125rem;
+		/* TimelineItem */
+		--_ui5_timeline_tli_indicator_before_bottom: -0.75rem;
+		--_ui5_timeline_tli_indicator_before_right: -0.5rem;
+		--_ui5_timeline_tli_indicator_before_without_icon_bottom: -1rem;
+		--_ui5_timeline_tli_indicator_before_without_icon_right: -0.8125rem;
 
-	/* TimelineItem COMPACT */
-	--_ui5_timeline_tli_indicator_before_height: calc(100% - 1.25rem);
-	--_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5_timeline_tli_indicator_after_height);
-	--_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5_timeline_tli_indicator_after_height);
-	--_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5_timeline_tli_indicator_after_height);
-	--_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5_timeline_tli_indicator_after_height);
-	--_ui5_timeline_tli_indicator_after_top: calc(-100% + 0.9375rem);
-	--_ui5_timeline_tli_indicator_after_height: calc(100% - 0.75rem);
-	--_ui5_timeline_tli_horizontal_indicator_after_left: 1.8625rem;
-	--_ui5_timeline_tli_horizontal_indicator_short_after_width: calc(100% - 1rem);
-	--_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: calc(100% - 0.625rem);
+		/* TimelineItem COMPACT */
+		--_ui5_timeline_tli_indicator_before_height: calc(100% - 1.25rem);
+		--_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5_timeline_tli_indicator_after_height);
+		--_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5_timeline_tli_indicator_after_height);
+		--_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5_timeline_tli_indicator_after_height);
+		--_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5_timeline_tli_indicator_after_height);
+		--_ui5_timeline_tli_indicator_after_top: calc(-100% + 0.9375rem);
+		--_ui5_timeline_tli_indicator_after_height: calc(100% - 0.75rem);
+		--_ui5_timeline_tli_horizontal_indicator_after_left: 1.8625rem;
+		--_ui5_timeline_tli_horizontal_indicator_short_after_width: calc(100% - 1rem);
+		--_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: calc(100% - 0.625rem);
+	}
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.125rem solid var(--sapContent_DragAndDropActiveColor);
 	--ui5_upload_collection_drop_overlay_background: transparent;

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

@@ -1,13 +1,13 @@
-:root {
+:host {
 	--_ui5_user_settings_avatar_cozy_display: inline-block;
 	--_ui5_user_settings_avatar_compact_display: none;
 	--_ui5_user_settings_item_title_font_size: var(--sapFontSize);
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_user_settings_avatar_cozy_display: none;
-	--_ui5_user_settings_avatar_compact_display: inline-block;
-	--_ui5_user_settings_item_title_font_size: var(--sapFontLargeSize);
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_user_settings_avatar_cozy_display: none;
+		--_ui5_user_settings_avatar_compact_display: inline-block;
+		--_ui5_user_settings_item_title_font_size: var(--sapFontLargeSize);
+	}
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_vsd_header_container: 2.75rem;
 	--_ui5_vsd_sub_header_container_height: 2.75rem;
 	--_ui5_vsd_content_li_padding: 0.375rem;
@@ -6,10 +6,10 @@
 	--_ui5_vsd_expand_content_height: 26.1875rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_vsd_header_container: 2.5rem;
-	--_ui5_vsd_sub_header_container_height: 2rem;
-	--_ui5_vsd_expand_content_height: 25.4375rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_vsd_header_container: 2.5rem;
+		--_ui5_vsd_sub_header_container_height: 2rem;
+		--_ui5_vsd_expand_content_height: 25.4375rem;
+	}
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
     --_ui5_wiz_content_item_wrapper_padding: 0rem;
     --_ui5_wiz_content_item_wrapper_bg: var(--sapBackgroundColor);
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_wiz_tab_focus_outline: 1px dotted var(--sapContent_FocusColor);
 	--_ui5_wiz_tab_selected_bg: var(--sapSelectedColor);
 	--_ui5_wiz_tab_border: 1px solid var(--sapSelectedColor);

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

@@ -1,5 +1,4 @@
-:root,
-:dir(ltr) {
+:host {
 	--_ui5_timeline_scroll_container_offset: 0.5rem;
 	--_ui5_shellbar_notification_btn_count_offset: 0.125rem;
 	--_ui5_side_navigation_item_expand_icon_hover_left: auto;

package/src/themes/sap_belize/DynamicPage-parameters.css

@@ -1,4 +1,4 @@
-:root {
+:host {
     /* paddings */
     --_ui5_dynamic_page_title_padding_S: 0.5rem 0rem 0.5rem 1rem;
     --_ui5_dynamic_page_title_padding_M: 0.5rem 1rem 0.5rem 2rem;

package/src/themes/sap_belize_hcb/DynamicPageTitle-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/DynamicPageTitle-parameters.css";
 
-:root {
+:host {
     --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
     --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 }

package/src/themes/sap_belize_hcw/DynamicPageTitle-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/DynamicPageTitle-parameters.css";
 
-:root {
+:host {
     --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
     --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 }

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

@@ -1,5 +1,5 @@
 @import "../base/DynamicPageHeaderActions-parameters.css";
 
-:root {
+:host {
 	--_ui5_dynamic_page_actions-lines-color: var(--sapHighlightColor);
 }

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

@@ -1,4 +1,4 @@
 @import "../base/DynamicPageTitle-parameters.css";
-:root {
+:host {
     --_ui5_dynamic_page_title_min_height: 3rem;
 }

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

@@ -1,10 +1,10 @@
 @import "../base/SearchField-parameters.css";
 
-:root {
+:host {
 	--_ui5_search_icon_border_radius: 0.375rem;
 	--_ui5_search_input_border_radius: none;
 	--_ui5-search-border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
-	--_ui5-search-wrapper-background: none;
+	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
@@ -25,4 +25,5 @@
 	--_ui5_search_input_end_padding: 0.25rem;
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

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

@@ -1,5 +1,5 @@
-@import "../base/ShellBar-parameters.css";
-
-:root {
-	--_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
+@import "../base/ShellBar-parameters.css";
+
+:host {
+	--_ui5_shellbar_button_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor);
 }

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

@@ -1,12 +1,12 @@
 @import "../base/TimelineGroupItem-parameters.css";
 
-:root {
+:host {
 	--_ui5_timeline_tlgi_line_horizontal_height: 16.375rem;
 	--_ui5_timeline_tlgi_root_horizontal_height: 21.53125rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
+	}
 }

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

@@ -1,11 +1,11 @@
 @import "../base/TimelineItem-parameters.css";
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	/* Timeline Item COMPACT - sap_fiori_3 specific values */
-	--_ui5_timeline_tli_indicator_after_height: 50%;
-	--_ui5_timeline_tli_indicator_after_top: -50%;
-	--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
-	--_ui5_timeline_tli_icon_horizontal_indicator_after_width: calc(100% - 0.75rem);
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* Timeline Item COMPACT - sap_fiori_3 specific values */
+		--_ui5_timeline_tli_indicator_after_height: 50%;
+		--_ui5_timeline_tli_indicator_after_top: -50%;
+		--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
+		--_ui5_timeline_tli_icon_horizontal_indicator_after_width: calc(100% - 0.75rem);
+	}
+}

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

@@ -1,10 +1,10 @@
 @import "../base/SearchField-parameters.css";
 
-:root {
+:host {
 	--_ui5_search_icon_border_radius: 0.375rem;
 	--_ui5_search_input_border_radius: none;
 	--_ui5-search-border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
-	--_ui5-search-wrapper-background: none;
+	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
@@ -24,4 +24,5 @@
 	--_ui5_search_input_end_padding: 0.25rem;
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

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

@@ -1,5 +1,5 @@
-@import "../base/ShellBar-parameters.css";
-
-:root {
-	--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
+@import "../base/ShellBar-parameters.css";
+
+:host {
+	--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
 }

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

@@ -1,9 +1,9 @@
 @import "../base/TimelineItem-parameters.css";
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_timeline_tli_indicator_after_height: 50%;
-	--_ui5_timeline_tli_indicator_after_top: -50%;
-	--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_timeline_tli_indicator_after_height: 50%;
+		--_ui5_timeline_tli_indicator_after_top: -50%;
+		--_ui5_timeline_tli_horizontal_indicator_after_width: calc(100% - 1rem);
+	}
+}

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

@@ -1,6 +1,6 @@
 @import "../sap_fiori_3/DynamicPageTitle-parameters.css";
 
-:root {
+:host {
     --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
     --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 }