npm - @ui5/webcomponents-fiori - Versions diffs - 2.19.0-rc.2 → 2.19.0-rc.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

package/src/themes/sap_fiori_3_hcb/FlexibleColumnLayout-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
-:root {
+:host {
 	--_ui5_fcl_solid_bg: var(--sapBackgroundColor);
 	--_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
-	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #000);
-	--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #000);
+	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #000);
+	--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #000);
 }

package/src/themes/sap_fiori_3_hcb/MediaGallery-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
 	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
 	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);

package/src/themes/sap_fiori_3_hcb/Page-parameters.css CHANGED Viewed

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

package/src/themes/sap_fiori_3_hcb/ProductSwitchItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/ProductSwitchItem-parameters.css";
-:root {
+:host {
 	--_ui5_product_switch_item_outline_offset: -.25rem;
 	--_ui5_product_switch_item_border: 1px solid var(--sapField_BorderColor);
 }

package/src/themes/sap_fiori_3_hcb/SearchField-parameters.css CHANGED Viewed

@@ -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;
@@ -26,4 +26,5 @@
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
 	--_ui5-search-loading-overlay-transparency: 0.30;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

package/src/themes/sap_fiori_3_hcb/ShellBar-parameters.css CHANGED Viewed

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

package/src/themes/sap_fiori_3_hcb/TimelineItem-parameters.css CHANGED Viewed

@@ -1,14 +1,14 @@
 @import "../base/TimelineItem-parameters.css";
-:root {
+:host {
 	--_ui5_TimelineItem_bubble_rtl_left_offset: -0.1875rem;
 	--_ui5_TimelineItem_bubble_rtl_right_offset: -0.6875rem;
 }
-[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/UploadCollection-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/UploadCollection-parameters.css";
-:root {
+:host {
 	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
 	--ui5_upload_collection_drop_overlay_background: transparent;

package/src/themes/sap_fiori_3_hcb/WizardTab-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/WizardTab-parameters.css";
-:root {
+:host {
 	--_ui5_wiz_tab_focus_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_wiz_tab_selection_line: var(--sapTextColor);
 	--_ui5_wiz_tab_border: 1px solid var(--sapTextColor);

package/src/themes/sap_fiori_3_hcw/DynamicPageTitle-parameters.css CHANGED Viewed

@@ -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);
 }

package/src/themes/sap_fiori_3_hcw/FlexibleColumnLayout-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
-:root {
+:host {
 	--_ui5_fcl_solid_bg: var(--sapBackgroundColor);
 	--_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
-	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #fff);
-	--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #fff);
+	--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapObjectHeader_BorderColor), #fff);
+	--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapObjectHeader_BorderColor), #fff);
 }

package/src/themes/sap_fiori_3_hcw/MediaGallery-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
 	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
 	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);

package/src/themes/sap_fiori_3_hcw/Page-parameters.css CHANGED Viewed

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

package/src/themes/sap_fiori_3_hcw/ProductSwitchItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/ProductSwitchItem-parameters.css";
-:root {
+:host {
 	--_ui5_product_switch_item_outline_offset: -.25rem;
 	--_ui5_product_switch_item_border: 1px solid var(--sapField_BorderColor);
 }

package/src/themes/sap_fiori_3_hcw/SearchField-parameters.css CHANGED Viewed

@@ -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-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
 	--_ui5-search-loading-overlay-transparency: 0.30;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

package/src/themes/sap_fiori_3_hcw/ShellBar-parameters.css CHANGED Viewed

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

package/src/themes/sap_fiori_3_hcw/TimelineItem-parameters.css CHANGED Viewed

@@ -1,14 +1,14 @@
 @import "../base/TimelineItem-parameters.css";
-:root {
+:host {
 	--_ui5_TimelineItem_bubble_rtl_left_offset: -0.1875rem;
 	--_ui5_TimelineItem_bubble_rtl_right_offset: -0.6875rem;
 }
-[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_hcw/UploadCollection-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/UploadCollection-parameters.css";
-:root {
+:host {
 	--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
 	--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
 }

package/src/themes/sap_fiori_3_hcw/WizardTab-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/WizardTab-parameters.css";
-:root {
+:host {
 	--_ui5_wiz_tab_focus_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_wiz_tab_selection_line: var(--sapTextColor);
 	--_ui5_wiz_tab_border: 1px solid var(--sapTextColor);

package/src/themes/sap_horizon/DynamicPageHeaderActions-parameters.css CHANGED Viewed

@@ -1,5 +1,5 @@
 @import "../base/DynamicPageHeaderActions-parameters.css";
-:root {
+:host {
 	--_ui5_dynamic_page_actions-lines-color: var(--sapObjectHeader_BorderColor);
 	--_ui5_dynamic_page_header-actions-background-pressed: var(--_ui5_dynamic_page_header-actions-background);
 	--_ui5_dynamic_page_header-actions-color-pressed: var(--_ui5_dynamic_page_header-actions-color);

package/src/themes/sap_horizon/DynamicPageTitle-parameters.css CHANGED Viewed

@@ -1,5 +1,5 @@
 @import "../base/DynamicPageTitle-parameters.css";
-:root {
+:host {
     --_ui5_dynamic_page_title_focus_outline_offset: -0.125rem;
 }

package/src/themes/sap_horizon/FlexibleColumnLayout-parameters.css CHANGED Viewed

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
 }

package/src/themes/sap_horizon/MediaGallery-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
 	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
 	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);

package/src/themes/sap_horizon/NotificationListItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/NotificationListItem-parameters.css";
-:root {
+:host {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
 	--_ui5-notification_group_header-padding: 0.5rem;

package/src/themes/sap_horizon/ProductSwitchItem-parameters.css CHANGED Viewed

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

package/src/themes/sap_horizon/ShellBar-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_shellbar_root_height: 3.25rem;
 	--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
 	--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);
@@ -23,7 +23,7 @@
 	--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
 }
-:root {
+:host {
 	--_ui5_shellbar_input_border_radius: 1.125rem;
 	--_ui5_shellbar_input_focus_border_radius: 1.125rem;
 	--_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground);

package/src/themes/sap_horizon/SideNavigation-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/SideNavigation-parameters.css";
-:root {
+:host {
 	--_ui5_side_navigation_width: 16rem;
 	--_ui5_side_navigation_collapsed_width: 4rem;
@@ -8,7 +8,7 @@
 	--_ui5_side_navigation_navigation_separator_margin_collapsed: var(--_ui5_side_navigation_navigation_separator_margin);
 	--_ui5_side_navigation_navigation_separator_background_color: var(--sapToolbar_SeparatorColor);
 	--_ui5_side_navigation_navigation_separator_radius: 0.125rem;
-	--_ui5_side_navigation_navigation_separator_height:  0.0625rem;
+	--_ui5_side_navigation_navigation_separator_height: 0.0625rem;
 	--_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor);
 	--_ui5_side_navigation_border_right: 0;
 	--_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);
@@ -26,8 +26,8 @@
 	--_ui5_side_navigation_item_padding_left: 1rem;
 	--_ui5_side_navigation_item_focus_border_offset: calc(-1 * var(--sapContent_FocusWidth));
 	--_ui5_side_navigation_item_focus_border_radius: calc(var(--_ui5_side_navigation_item_border_radius) + var(--sapContent_FocusWidth));
-	--_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 0.188rem 100%  no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_SelectionBackgroundColor);
-	--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 0.188rem 100%  no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_Hover_SelectionBackground);
+	--_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 0.188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_SelectionBackgroundColor);
+	--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 0.188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_Hover_SelectionBackground);
 	--_ui5_side_navigation_selected_border_style_color: none;
 	--_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color);
 	--_ui5_side_navigation_group_icon_width: 2.5rem;
@@ -48,8 +48,8 @@
 	--_ui5_side_navigation_item_collapsed_padding: 3rem;
 }
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_side_navigation_item_height: 2rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_side_navigation_item_height: 2rem;
+	}
 }

package/src/themes/sap_horizon/TimelineItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/TimelineItem-parameters.css";
-:root {
+:host {
 	--_ui5_TimelineItem_bubble_border_width: 0.125rem;
 	--_ui5_TimelineItem_bubble_border_style: solid;
 	--_ui5_TimelineItem_bubble_border_radius: var(--sapElement_BorderCornerRadius);

package/src/themes/sap_horizon/UploadCollection-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/UploadCollection-parameters.css";
-:root {
+:host {
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
 	--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);
 	--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);

package/src/themes/sap_horizon/Wizard-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/Wizard-parameters.css";
-:root {
+:host {
     --_ui5_wiz_content_item_wrapper_padding: 1rem;
     --_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);
 }

package/src/themes/sap_horizon/WizardTab-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/WizardTab-parameters.css";
-:root {
+:host {
 	--_ui5_wiz_tab_title_color: var(--sapTextColor);
 	--_ui5_wiz_tab_title_font_family: var(--sapFontBoldFamily);
 	--_ui5_wiz_tab_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);

package/src/themes/sap_horizon_dark/FlexibleColumnLayout-parameters.css CHANGED Viewed

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
 }

package/src/themes/sap_horizon_dark/MediaGallery-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_media_gallery_overflow_btn_background:  var(--sapButton_Background);
 	--_ui5_media_gallery_overflow_btn_color:  var(--sapButton_TextColor);
 	--_ui5_media_gallery_overflow_btn_border:  1px solid var(--sapButton_BorderColor);

package/src/themes/sap_horizon_dark/NotificationListItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/NotificationListItem-parameters.css";
-:root {
+:host {
 	--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);
 	--_ui5-notification_group_header-border-bottom-width: 0;
 	--_ui5-notification_group_header-padding: 0.5rem;

package/src/themes/sap_horizon_dark/ProductSwitchItem-parameters.css CHANGED Viewed

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

package/src/themes/sap_horizon_dark/ShellBar-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_shellbar_root_height: 3.25rem;
 	--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
 	--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);
@@ -23,7 +23,7 @@
 	--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
 }
-:root {
+:host {
 	--_ui5_shellbar_input_border_radius: 1.125rem;
 	--_ui5_shellbar_input_focus_border_radius: 1.125rem;
 	--_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground);

package/src/themes/sap_horizon_dark/SideNavigation-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/SideNavigation-parameters.css";
-:root {
+:host {
 	--_ui5_side_navigation_width: 16rem;
 	--_ui5_side_navigation_collapsed_width: 4rem;
@@ -8,7 +8,7 @@
 	--_ui5_side_navigation_navigation_separator_margin_collapsed: var(--_ui5_side_navigation_navigation_separator_margin);
 	--_ui5_side_navigation_navigation_separator_background_color: var(--sapToolbar_SeparatorColor);
 	--_ui5_side_navigation_navigation_separator_radius: 0.125rem;
-	--_ui5_side_navigation_navigation_separator_height:  0.0625rem;
+	--_ui5_side_navigation_navigation_separator_height: 0.0625rem;
 	--_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor);
 	--_ui5_side_navigation_border_right: 0;
 	--_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);
@@ -26,8 +26,8 @@
 	--_ui5_side_navigation_item_padding_left: 1rem;
 	--_ui5_side_navigation_item_focus_border_offset: calc(-1 * var(--sapContent_FocusWidth));
 	--_ui5_side_navigation_item_focus_border_radius: calc(var(--_ui5_side_navigation_item_border_radius) + var(--sapContent_FocusWidth));
-	--_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 0.188rem 100%  no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_SelectionBackgroundColor);
-	--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 0.188rem 100%  no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_Hover_SelectionBackground);
+	--_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 0.188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_SelectionBackgroundColor);
+	--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / 0.188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_Hover_SelectionBackground);
 	--_ui5_side_navigation_selected_border_style_color: none;
 	--_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color);
 	--_ui5_side_navigation_group_icon_width: 2.5rem;
@@ -48,8 +48,8 @@
 	--_ui5_side_navigation_item_collapsed_padding: 3rem;
 }
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_side_navigation_item_height: 2rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_side_navigation_item_height: 2rem;
+	}
 }

package/src/themes/sap_horizon_dark/TimelineItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/TimelineItem-parameters.css";
-:root {
+:host {
 	--_ui5_TimelineItem_bubble_border_width: 0.125rem;
 	--_ui5_TimelineItem_bubble_border_style: solid;
 	--_ui5_TimelineItem_bubble_border_radius: var(--sapElement_BorderCornerRadius);

package/src/themes/sap_horizon_dark/UploadCollection-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/UploadCollection-parameters.css";
-:root {
+:host {
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
 	--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);
 	--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);

package/src/themes/sap_horizon_dark/Wizard-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/Wizard-parameters.css";
-:root {
+:host {
     --_ui5_wiz_content_item_wrapper_padding: 1rem;
     --_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);
 }

package/src/themes/sap_horizon_dark/WizardTab-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/WizardTab-parameters.css";
-:root {
+:host {
 	--_ui5_wiz_tab_title_color: var(--sapTextColor);
 	--_ui5_wiz_tab_title_font_family: var(--sapFontBoldFamily);
 	--_ui5_wiz_tab_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);

package/src/themes/sap_horizon_dark_exp/FlexibleColumnLayout-parameters.css CHANGED Viewed

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
 }

package/src/themes/sap_horizon_dark_exp/NotificationListItem-parameters.css CHANGED Viewed

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5-notification_item-border-radius: 0.75rem;
 }

package/src/themes/sap_horizon_dark_exp/ProductSwitchItem-parameters.css CHANGED Viewed

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

package/src/themes/sap_horizon_dark_exp/ShellBar-parameters.css CHANGED Viewed

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

package/src/themes/sap_horizon_dark_exp/SideNavigation-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/SideNavigation-parameters.css";
-:root {
+:host {
 	--_ui5_side_navigation_width: 16rem;
 	--_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);
 	--_ui5_side_navigation_icon_padding_inline_end: 0.4375rem;
@@ -10,8 +10,8 @@
 	--_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out;
 }
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_side_navigation_item_height: 2rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_side_navigation_item_height: 2rem;
+	}
 }

package/src/themes/sap_horizon_dark_exp/TimelineItem-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/TimelineItem-parameters.css";
-:root {
+:host {
 	--_ui5_TimelineItem_bubble_border_width: 0.125rem;
 	--_ui5_TimelineItem_bubble_border_style: solid;
 	--_ui5_TimelineItem_bubble_border_radius: var(--sapElement_BorderCornerRadius);

package/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css CHANGED Viewed

@@ -1,5 +1,5 @@
 @import "../base/UploadCollection-parameters.css";
-:root {
+:host {
 	--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
 }

package/src/themes/sap_horizon_dark_exp/Wizard-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/Wizard-parameters.css";
-:root {
+:host {
     --_ui5_wiz_content_item_wrapper_padding: 1rem;
     --_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);
 }

package/src/themes/sap_horizon_dark_exp/WizardTab-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/WizardTab-parameters.css";
-:root {
+:host {
 	--_ui5_wiz_tab_title_color: var(--sapTextColor);
 	--_ui5_wiz_tab_title_font_family: var(--sapFontBoldFamily);
 	--_ui5_wiz_tab_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);

package/src/themes/sap_horizon_exp/FlexibleColumnLayout-parameters.css CHANGED Viewed

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5_fcl_column_border: solid 0.0625rem var(--sapGroup_ContentBorderColor);
 }

package/src/themes/sap_horizon_exp/NotificationListItem-parameters.css CHANGED Viewed

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5-notification_item-border-radius: 0.75rem;
 }

package/src/themes/sap_horizon_exp/ProductSwitchItem-parameters.css CHANGED Viewed

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

package/src/themes/sap_horizon_exp/ShellBar-parameters.css CHANGED Viewed

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_shellbar_root_height: 3.25rem;
 	--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);
 	--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);
@@ -21,7 +21,7 @@
 	--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);
 }
-:root {
+:host {
 	--_ui5_shellbar_input_border_radius: 1.125rem;
 	--_ui5_shellbar_input_focus_border_radius: 1.125rem;
 	--_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground);

package/src/themes/sap_horizon_exp/SideNavigation-parameters.css CHANGED Viewed

@@ -1,6 +1,6 @@
 @import "../base/SideNavigation-parameters.css";
-:root {
+:host {
 	--_ui5_side_navigation_width: 16rem;
 	--_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);
 	--_ui5_side_navigation_icon_padding_inline_end: 0.4375rem;
@@ -10,8 +10,8 @@
 	--_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out;
 }
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_side_navigation_item_height: 2rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_side_navigation_item_height: 2rem;
+	}
 }