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

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

@@ -1,6 +1,6 @@
 @import "../base/Card-parameters.css";
 
-:root {
+:host {
 	--_ui5_card_hover_box_shadow: var(--sapContent_Shadow2);
 	--_ui5_card_header_focus_offset: 0px;
 	--_ui5_card_header_focus_radius: var(--_ui5_card_border-radius);

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

@@ -1,5 +1,5 @@
 @import "../base/Carousel-parameters.css";
 
-:root {
+:host {
 	--ui5_carousel_navigation_button_active_box_shadow: none;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/CheckBox-parameters.css";
 
-:root {
+:host {
 	--_ui5_checkbox_wrapper_padding: .6875rem;
 	--_ui5_checkbox_width_height: 2.75rem;
 	--_ui5_checkbox_icon_size: 1rem;

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

@@ -1,6 +1,6 @@
 @import "../base/ColorPalette-parameters.css";
 
-:root {
+:host {
 	--_ui5_color-palette-item-hover-margin: 0.0625rem;
 	--_ui5_color-palette-row-height: 9.5rem;
 	--_ui5_color-palette-button-height: 3rem;

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

@@ -1,6 +1,6 @@
 @import "../base/ColorPicker-parameters.css";
 
-:root {
+:host {
     --_ui5_color_picker_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
     --_ui5_color_picker_slider_handle_outline_hover: 0.125rem solid var(--sapContent_FocusColor);
     --_ui5_color_picker_slider_handle_outline_focus: 0.125rem solid var(--sapContent_FocusColor);

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

@@ -1,5 +1,5 @@
 @import "../base/DatePicker-parameters.css";
 
-:root {
+:host {
     --_ui5-datepicker_border_radius: 0.25rem;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/DayPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_daypicker_item_border_radius: 0.4375rem;
 	--_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapList_SelectionBorderColor);
 	--_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor);

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

@@ -1,6 +1,6 @@
 @import "../base/Dialog-parameters.css";
 
-:root {
+:host {
 	--_ui5_dialog_header_focus_bottom_offset: 2px;
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;

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

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_outline_width: var(--sapContent_FocusWidth);
 	--_ui5_load_more_border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }

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

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--ui5-icon-focus-border-radius: 0.25rem;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Input-parameters.css";
 
-:root {
+:host {
 	--_ui5-input-border: none;
 	--_ui5_input_hover_border: none;
 	--_ui5_input_focus_border_radius: 0.25rem;
@@ -30,16 +30,16 @@
 	--_ui5_input_icon_wrapper_success_state_height: calc(100% - var(--_ui5_input_value_state_success_border_width));
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem;
-	--_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem;
-	--_ui5_input_error_warning_icon_padding: .3125rem .5rem .1875rem .5rem;
-	--_ui5_input_error_warning_focused_icon_padding: .3125rem .5rem .25rem .5rem;
-	--_ui5_input_custom_icon_padding: .3125rem .5rem .25rem .5rem;
-	--_ui5_input_error_warning_custom_icon_padding: .3125rem .5rem .1875rem .5rem;
-	--_ui5_input_error_warning_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem;
-	--_ui5_input_information_custom_icon_padding: .3125rem .5rem .1875rem .5rem;
-	--_ui5_input_information_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem;
+		--_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem;
+		--_ui5_input_error_warning_icon_padding: .3125rem .5rem .1875rem .5rem;
+		--_ui5_input_error_warning_focused_icon_padding: .3125rem .5rem .25rem .5rem;
+		--_ui5_input_custom_icon_padding: .3125rem .5rem .25rem .5rem;
+		--_ui5_input_error_warning_custom_icon_padding: .3125rem .5rem .1875rem .5rem;
+		--_ui5_input_error_warning_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem;
+		--_ui5_input_information_custom_icon_padding: .3125rem .5rem .1875rem .5rem;
+		--_ui5_input_information_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/InputIcon-parameters.css";
 
-:root {
+:host {
 	--_ui5_input_icon_padding: .625rem .625rem .5625rem .625rem;
 	--_ui5_input_icon_hover_bg: var(--sapField_Focus_Background);
 	--_ui5_input_icon_pressed_color: var(--sapButton_Active_TextColor);
@@ -17,8 +17,8 @@
 	--_ui5_input_icon_success_pressed_color: var(--sapButton_Accept_Selected_TextColor);
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_input_icon_padding: .3125rem .5rem .25rem .5rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_input_icon_padding: .3125rem .5rem .25rem .5rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Link-parameters.css";
 
-:root {
+:host {
 	--_ui5_link_text_decoration: var(--sapLink_TextDecoration);
 	--_ui5_link_hover_text_decoration: var(--sapLink_Hover_TextDecoration);
 	--_ui5_link_focused_hover_text_decoration: none;

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

@@ -1,5 +1,5 @@
 @import "../base/List-parameters.css";
 
-:root {
+:host {
 	--ui5_list_footer_text_color: var(--sapList_FooterTextColor);
 }

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

@@ -1,5 +1,5 @@
 @import "../base/Menu-parameters.css";
 
-:root {
+:host {
 	--_ui5_menu_popover_border_radius: var(--sapPopover_BorderCornerRadius);
 }

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

@@ -1,6 +1,6 @@
 @import "../base/MessageStrip-parameters.css";
 
-:root{
+:host{
 	--_ui5_message_strip_close_button_right: 0.1875rem;
 	--_ui5_message_strip_close_button_color_set_1_background: var(--sapMessage_Button_Hover_Background);
 	--_ui5_message_strip_close_button_color_set_2_background: var(--sapMessage_Button_Hover_Background);

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

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

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

@@ -1,6 +1,6 @@
 @import "../base/Panel-parameters.css";
 
-:root {
+:host {
 	--_ui5_panel_border_radius: var(--sapGroup_BorderCornerRadius);
 	--_ui5_panel_border_bottom: none;
 	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);

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

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

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

@@ -1,6 +1,6 @@
 @import "../base/RadioButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_radio_button_hover_fill: var(--sapField_Selector_Hover_Background);
 	--_ui5_radio_button_hover_fill_error: var(--sapField_Selector_Hover_InvalidBackground);
 	--_ui5_radio_button_hover_fill_warning: var(--sapField_Selector_Hover_WarningBackground);
@@ -11,7 +11,7 @@
 	--_ui5_radio_button_label_color: var(--sapField_TextColor);
 	--_ui5_radio_button_inner_ring_radius: 27.5%;
 	--_ui5_radio_button_outer_ring_padding: 0 0.6875rem;
-	--_ui5_radio_button_read_only_border_type: 4,2;
+	--_ui5_radio_button_read_only_border_type: 4, 2;
 	--_ui5_radio_button_inner_ring_color: var(--sapContent_Selected_ForegroundColor);
 	--_ui5_radio_button_checked_warning_fill: var(--sapField_WarningColor);
 	--_ui5_radio_button_read_only_inner_ring_color: var(--sapField_TextColor);
@@ -19,9 +19,9 @@
 	--_ui5_radio_button_focus_dist: 0.375rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
-	--_ui5_radio_button_focus_dist: 0.1875rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_radio_button_outer_ring_padding: 0 0.5rem;
+		--_ui5_radio_button_focus_dist: 0.1875rem;
+	}
 }

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

@@ -1,17 +1,17 @@
 @import "../base/RatingIndicator-parameters.css";
 
-:root {
+:host {
 	--_ui5_rating_indicator_readonly_item_height: 0.75em;
 	--_ui5_rating_indicator_readonly_item_width: 0.75em;
 	--_ui5_rating_indicator_readonly_item_spacing: 0.1875rem 0.1875rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_rating_indicator_item_height: 1em;
-	--_ui5_rating_indicator_item_width: 1em;
-	--_ui5_rating_indicator_readonly_item_height: 0.75em;
-	--_ui5_rating_indicator_readonly_item_width: 0.75em;
-	--_ui5_rating_indicator_component_spacing: 0.5rem 0;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_rating_indicator_item_height: 1em;
+		--_ui5_rating_indicator_item_width: 1em;
+		--_ui5_rating_indicator_readonly_item_height: 0.75em;
+		--_ui5_rating_indicator_readonly_item_width: 0.75em;
+		--_ui5_rating_indicator_component_spacing: 0.5rem 0;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/SegmentedButtton-parameters.css";
 
-:root {
+:host {
 	--_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background);
 	--_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor);
 	--_ui5_segmented_btn_hover_box_shadow: none;

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

@@ -1,6 +1,6 @@
 @import "../base/Select-parameters.css";
 
-:root {
+:host {
 	--_ui5_select_hover_icon_left_border: none;
 	--_ui5_select_icon_wrapper_height: calc(100% - 0.0625rem);
 	--_ui5_select_icon_wrapper_state_height: calc(100% - 0.125rem);

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

@@ -1,9 +1,8 @@
 @import "../base/SliderBase-parameters.css";
 
-:root {
+:host {
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
 	--_ui5_slider_progress_container_dot_display: block;
-	--_ui5_slider_inner_min_width: 4rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor);
@@ -11,9 +10,6 @@
 	--_ui5_slider_handle_icon_display: inline-block;
 	--_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor);
 	--_ui5_slider_handle_border_radius: 0.5rem;
-	--_ui5_slider_handle_height: 1.5rem;
-	--_ui5_slider_handle_width: 2rem;
-	--_ui5_slider_handle_top: -0.625rem;
 	--_ui5_slider_handle_font_family: "SAP-icons";
 	--_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor);
 	--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor);
@@ -27,45 +23,28 @@
 	--_ui5_range_slider_legacy_progress_focus_display: none;
 	--_ui5_range_slider_progress_focus_display: block;
 	--_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor);
-	--_ui5_slider_label_fontsize: var(--sapFontSmallSize);
-	--_ui5_slider_label_color: var(--sapContent_LabelColor);
-	--_ui5_slider_tooltip_min_width: 2rem;
 	--_ui5_slider_tooltip_padding: 0.25rem;
-	--_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize);
-	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
 	--_ui5_slider_tooltip_height: 1.375rem;
 	--_ui5_slider_handle_focus_width: 1px;
-	--_ui5_slider_start_end_point_size: .5rem;
-	--_ui5_slider_start_end_point_left: -.75rem;
-	--_ui5_slider_start_end_point_top: -0.125rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_slider_tooltip_border_box: border-box;
-
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -1.063rem;
-	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
+	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 0.375rem);
+	--_ui5_range_slider_progress_focus_top: calc(-1 * ((var(--_ui5_slider_handle_height) / 2) + 0.1875rem) + var(--_ui5_slider_progress_border_width));
+	--_ui5_range_slider_progress_focus_left: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
+	--_ui5_range_slider_progress_focus_right: calc(-1 * ((var(--_ui5_slider_handle_width) / 2) + 0.1875rem + var(--_ui5_slider_progress_border_width)));
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
-	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
-	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
 	--_ui5_range_slider_root_hover_handle_icon_display: inline-block;
 	--_ui5_range_slider_root_hover_handle_bg: var(--_ui5_slider_handle_hover_background);
 	--_ui5_range_slider_root_active_handle_icon_display: none;
-	--_ui5_slider_tickmark_height: .5rem;
-	--_ui5_slider_tickmark_top: -2px;
 	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground);
-	--_ui5_slider_tooltip_bottom: 2rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_slider_handle_width: 1.5rem;
-	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
-	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.938rem;
-	--_ui5_slider_tooltip_bottom: 1.75rem;
-	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
-	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_slider_tooltip_bottom: 1.75rem;
+		--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/SplitButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;

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

@@ -1,6 +1,6 @@
 @import "../base/StepInput-parameters.css";
 
-:root {
+:host {
 	--_ui5_step_input_input_error_background_color: inherit;
 	--_ui5-step_input_button_state_hover_background_color: var(--sapField_Hover_Background);
 	--_ui5_step_input_border_style: none;

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

@@ -1,5 +1,6 @@
 @import "../base/Switch-parameters.css";
-:root {
+
+:host {
 	/* Switch */
 	--_ui5_switch_width: 2.5rem;
 	--_ui5_switch_min_width: none;
@@ -97,7 +98,7 @@
 	--_ui5_switch_text_font_size: var(--sapFontLargeSize);
 	--_ui5_switch_text_width: 1.25rem;
 
-	--_ui5_switch_text_with_label_font_family: "72-Condensed-Bold" , "72" , "72full" , Arial, Helvetica, sans-serif;
+	--_ui5_switch_text_with_label_font_family: "72-Condensed-Bold", "72", "72full", Arial, Helvetica, sans-serif;
 	--_ui5_switch_text_with_label_font_size: var(--sapFontSmallSize);
 	--_ui5_switch_text_with_label_width: 1.75rem;
 
@@ -123,28 +124,28 @@
 	--_ui5_switch_icon_height: 1rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_switch_width: 2.75rem;
-	--_ui5_switch_min_width: none;
-	--_ui5_switch_with_label_width: 2.75rem;
-	--_ui5_switch_root_outline_top: 0.25rem;
-	--_ui5_switch_root_outline_bottom: 0.25rem;
-	--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
-	--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
-	--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
-	--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
-	--_ui5_switch_track_width: 2.75rem;
-	--_ui5_switch_track_height: 1.25rem;
-	--_ui5_switch_track_with_label_width: 2.75rem;
-	--_ui5_switch_track_with_label_height: 1.25rem;
-	--_ui5_switch_handle_width: 1.25rem;
-	--_ui5_switch_handle_height: 1rem;
-	--_ui5_switch_handle_with_label_width: 1.75rem;
-	--_ui5_switch_handle_with_label_height: 1rem;
-	--_ui5_switch_text_font_size: var(--sapFontSize);
-	--_ui5_switch_text_width: 1rem;
-	--_ui5_switch_text_active_left: 0.1875rem;
-	--_ui5_switch_text_active_left_alternate: 0.0625rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_switch_width: 2.75rem;
+		--_ui5_switch_min_width: none;
+		--_ui5_switch_with_label_width: 2.75rem;
+		--_ui5_switch_root_outline_top: 0.25rem;
+		--_ui5_switch_root_outline_bottom: 0.25rem;
+		--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
+		--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
+		--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
+		--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
+		--_ui5_switch_track_width: 2.75rem;
+		--_ui5_switch_track_height: 1.25rem;
+		--_ui5_switch_track_with_label_width: 2.75rem;
+		--_ui5_switch_track_with_label_height: 1.25rem;
+		--_ui5_switch_handle_width: 1.25rem;
+		--_ui5_switch_handle_height: 1rem;
+		--_ui5_switch_handle_with_label_width: 1.75rem;
+		--_ui5_switch_handle_with_label_height: 1rem;
+		--_ui5_switch_text_font_size: var(--sapFontSize);
+		--_ui5_switch_text_width: 1rem;
+		--_ui5_switch_text_active_left: 0.1875rem;
+		--_ui5_switch_text_active_left_alternate: 0.0625rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/TabContainer-parameters.css";
 
-:root {
+:host {
 	--_ui5_tc_header_border_bottom: 0.0625rem solid var(--sapObjectHeader_Background);
 
 	/* Header Item */

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

@@ -1,6 +1,6 @@
 @import "../base/Tag-parameters.css";
 
-:root {
+:host {
 	--_ui5-tag-text-padding: 0.1875rem 0.25rem;
 	--_ui5-tag-padding-inline-icon-only: 0.313rem;
 	--_ui5-tag-text-transform: none;

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

@@ -1,6 +1,6 @@
 @import "../base/TextArea-parameters.css";
 
-:root {
+:host {
 	--_ui5_textarea_hover_border: none;
 	--_ui5_textarea_focus_border_radius: 0.25rem;
 	--_ui5_textarea_line_height: 1.5;
@@ -18,7 +18,7 @@
 	--_ui5_textarea_value_state_focus_offset: 1px;
 	--_ui5_textarea_wrapper_padding: 0.0625rem;
 	--_ui5_textarea_success_wrapper_padding: 0.0625rem;
-	--_ui5_textarea_warning_error_wrapper_padding:  0.0625rem 0.0625rem 0.125rem 0.0625rem;
+	--_ui5_textarea_warning_error_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 	--_ui5_textarea_information_wrapper_padding: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
 	--_ui5_textarea_inner_width: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding)));
 	--_ui5_textarea_padding_top: 0.5rem;
@@ -34,17 +34,17 @@
 	--_ui5_textarea_readonly_border_style: dashed;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_textarea_padding_top: 0.1875rem;
-	--_ui5_textarea_padding_bottom: 0.125rem;
-	--_ui5_textarea_padding_bottom_readonly: 0.0625rem;
-	--_ui5_textarea_padding_top_error_warning: 0.1875rem;
-	--_ui5_textarea_padding_bottom_error_warning: 0.125rem;
-	--_ui5_textarea_padding_top_information: 0.1875rem;
-	--_ui5_textarea_padding_bottom_information: 0.125rem;
-	--_ui5_textarea_padding_right_and_left: 0.5rem;
-	--_ui5_textarea_padding_right_and_left_error_warning: 0.5rem;
-	--_ui5_textarea_padding_right_and_left_information: 0.5rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_textarea_padding_top: 0.1875rem;
+		--_ui5_textarea_padding_bottom: 0.125rem;
+		--_ui5_textarea_padding_bottom_readonly: 0.0625rem;
+		--_ui5_textarea_padding_top_error_warning: 0.1875rem;
+		--_ui5_textarea_padding_bottom_error_warning: 0.125rem;
+		--_ui5_textarea_padding_top_information: 0.1875rem;
+		--_ui5_textarea_padding_bottom_information: 0.125rem;
+		--_ui5_textarea_padding_right_and_left: 0.5rem;
+		--_ui5_textarea_padding_right_and_left_error_warning: 0.5rem;
+		--_ui5_textarea_padding_right_and_left_information: 0.5rem;
+	}
 }

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

@@ -1,5 +1,5 @@
 @import "../base/TimePicker-parameters.css";
 
-:root {
+:host {
 	--_ui5-time_picker_border_radius: 0.25rem;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Token-parameters.css";
 
-:root {
+:host {
 	--_ui5_token_focus_outline_width: 0.0625rem;
 	--_ui5_token_selected_focus_outline: none;
 	--_ui5_token_focus_outline: none;
@@ -16,8 +16,8 @@
 	--_ui5_token_readonly_padding: 0.25rem 0.3125rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_token_outline_offset: 0;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_token_outline_offset: 0;
+	}
 }

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

@@ -1,5 +1,5 @@
 @import "../base/Tokenizer-parameters.css";
 
-:root {
+:host {
 	--_ui5_tokenizer_n_more_text_color: var(--sapLinkColor);
 }

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

@@ -1,6 +1,6 @@
 @import "../base/ValueStateMessage-parameters.css";
 
-:root {
+:host {
 	--_ui5_input_value_state_icon_display: inline-block;
 	--_ui5_value_state_message_padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 	--_ui5_value_state_header_padding: .5rem .5rem .5rem 1.875rem;

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

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