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

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

@@ -1,4 +1,4 @@
-:root {
+:host {
     --ui5_carousel_button_size: 2.25rem;
     --ui5_carousel_inactive_dot_size: 0.5rem;
     --ui5_carousel_inactive_dot_margin: 0 0.25rem;

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

@@ -1,7 +1,7 @@
 
 @import "../base/CheckBox-parameters.css";
 
-:root {
+:host {
 --_ui5_checkbox_inner_border_radius: 0;
 --_ui5_checkbox_checkmark_color: var(--sapContent_IconColor);
 --_ui5_checkbox_inner_error_border: 0.125rem dashed var(--sapField_InvalidColor);

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

@@ -1,6 +1,6 @@
 @import "../base/ColorPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_color_picker_slider_handle_box_shadow: inset 0 0 0 0.125rem var(--sapContent_ForegroundColor);
     --_ui5_color_picker_slider_handle_inner_border_color: var(--sapContent_ForegroundColor);
 	--_ui5_color_picker_circle_outer_border: 0.125rem solid var(--sapContent_ContrastShadowColor);

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

@@ -1,6 +1,6 @@
 @import "../base/DayPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_daypicker_item_border: none;
 	--_ui5_daypicker_item_selected_background: var(--sapContent_Selected_Background);
 	--_ui5_daypicker_dayname_color: var(--sapContent_LabelColor);

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

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

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

@@ -1,5 +1,5 @@
 @import "../base/FileUploader-parameters.css";
 
-:root {
+:host {
 	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
 }

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

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_padding: 0.25rem;
 	--_ui5_load_more_border: 1px solid var(--sapButton_BorderColor);
 	--_ui5_load_more_border_radius: 0.375rem;

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

@@ -1,6 +1,6 @@
 @import "../base/Input-parameters.css";
 
-:root {
+:host {
 	--_ui5_input_focus_border_width: 0.125rem;
 	--_ui5_input_state_border_width: 0.125rem;
 	--_ui5-input-border: 1px solid var(--sapField_BorderColor);
@@ -20,9 +20,9 @@
 	--_ui5-input_error_placeholder_color: var(--sapField_TextColor);
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_input_information_icon_padding: .25rem .4375rem;
-	--_ui5_input_information_custom_icon_padding: .25rem .5rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_input_information_icon_padding: .25rem .4375rem;
+		--_ui5_input_information_custom_icon_padding: .25rem .5rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Link-parameters.css";
 
-:root {
+:host {
 	--_ui5_link_text_decoration: underline;
 	--_ui5_link_hover_text_decoration: none;
 	--_ui5_link_active_text_decoration: none;

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

@@ -1,3 +1,3 @@
-:root {
-	--_ui5_list_buttons_left_space: 0.25rem;
+:host {
+	--_ui5_list_buttons_left_space: 0.25rem;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/MessageStrip-parameters.css";
 
-:root{
+:host{
 	--_ui5_message_strip_border_width: var(--sapMessage_BorderWidth);
 	--_ui5_message_strip_icon_top: 0.375rem;
 	--_ui5_message_strip_close_button_color_set_1_background: var(--sapMessage_Button_Hover_Background);

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

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

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

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

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

@@ -1,5 +1,5 @@
 @import "../base/PopupBlockLayer-parameters.css";
 
-:root {
+:host {
 	--_ui5_popup_block_layer_opacity: 0.3;
 }

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

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

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

@@ -1,6 +1,6 @@
 @import "../base/ProgressIndicator-parameters.css";
 
-:root {
+:host {
     --_ui5_progress_indicator_value_state_none: var(--sapHighlightColor);
     --_ui5_progress_indicator_value_state_error: var(--sapHighlightColor);
     --_ui5_progress_indicator_value_state_warning: var(--sapHighlightColor);

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

@@ -1,6 +1,6 @@
 @import "../base/RadioButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_radio_button_checked_fill: var(--sapContent_IconColor);
 	--_ui5_radio_button_checked_warning_fill: var(--sapContent_IconColor);
 	--_ui5_radio_button_checked_error_fill: var(--sapContent_IconColor);

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

@@ -1,5 +1,5 @@
 @import "../base/Select-parameters.css";
 
-:root {
+:host {
 	--_ui5_select_hover_icon_left_border: 0.0625rem solid var(--sapField_Hover_BorderColor);
 }

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

@@ -1,14 +1,37 @@
 @import "../base/SliderBase-parameters.css";
 
-:root {
-	--_ui5_slider_inner_height: 0.375rem;
+:host {
+	--_ui5_slider_inner_height: 0.375rem; /* Total height including border */
+	--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
+	--_ui5_slider_progress_box_sizing: border-box;
 	--_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor);
 	--_ui5_slider_progress_border_radius: 0.375rem;
 	--_ui5_range_slider_handle_background: transparent;
-	--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
-	--_ui5_slider_handle_height: 1.65rem;
-	--_ui5_slider_handle_width: 1.65rem;
-	--_ui5_slider_handle_top: -0.75rem;
+	--_ui5_slider_handle_width: 1.875rem;
+	--_ui5_slider_handle_height: 1.875rem;
+	--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
+	--_ui5_slider_handle_border_radius: 1rem;
+	--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
+	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_slider_progress_background: var(--sapSelectedColor);
-	--_ui5_slider_tickmark_top: -0.2525rem;
+	--_ui5_slider_tickmark_height: 1rem;
+	--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
+	--_ui5_slider_active_progress_border: none;
+	--_ui5_slider_active_progress_left: 0rem;
+	--_ui5_slider_active_progress_top: 0;
+	--_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height);
+	--_ui5_slider_no_tickmarks_active_progress_border: none;
+	--_ui5_slider_no_tickmarks_active_progress_left: 0;
+	--_ui5_slider_no_tickmarks_active_progress_top: 0;
+	--_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height);
+}
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_slider_handle_width: 1.5rem;
+		--_ui5_slider_handle_height: 1.5rem;
+		--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
+		--_ui5_slider_tickmark_height: 0.75rem;
+		--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
+	}
 }

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

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

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

@@ -1,6 +1,6 @@
 @import "../base/Switch-parameters.css";
 
-:root {
+:host {
 	/* Switch */
 	--_ui5_switch_root_after_outline: none;
 	--_ui5_switch_focus_outline: 0.125rem dotted var(--sapContent_FocusColor);

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

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

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

@@ -1,6 +1,6 @@
 @import "../base/Tag-parameters.css";
 
-:root {
+:host {
 
 	--ui5-tag-text-shadow: none;
 	--ui5-tag-contrast-text-shadow: none;

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

@@ -1,6 +1,6 @@
 @import "../base/TextArea-parameters.css";
 
-:root {
+:host {
 	--_ui5_textarea_placeholder_font_style: normal;
 	--_ui5_textarea_value_state_error_warning_placeholder_font_weight: bold;
 	--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
@@ -22,18 +22,18 @@
 	--_ui5_textarea_inner_width: 100%;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_textarea_padding_top: 0.0625rem;
-	--_ui5_textarea_padding_bottom: 0.0625rem;
-	--_ui5_textarea_padding_top_readonly: 0.0625rem;
-	--_ui5_textarea_padding_bottom_readonly: 0.0625rem;
-	--_ui5_textarea_padding_top_error_warning: 0.0625rem;
-	--_ui5_textarea_padding_bottom_error_warning: 0.0625rem;
-	--_ui5_textarea_padding_top_information: 0.125rem;
-	--_ui5_textarea_padding_bottom_information: 0.125rem;
-	--_ui5_textarea_padding_right_and_left: 0.375rem;
-	--_ui5_textarea_padding_right_and_left_information: 0.4375rem;
-	--_ui5_textarea_padding_right_and_left_readonly: 0.375rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_textarea_padding_top: 0.0625rem;
+		--_ui5_textarea_padding_bottom: 0.0625rem;
+		--_ui5_textarea_padding_top_readonly: 0.0625rem;
+		--_ui5_textarea_padding_bottom_readonly: 0.0625rem;
+		--_ui5_textarea_padding_top_error_warning: 0.0625rem;
+		--_ui5_textarea_padding_bottom_error_warning: 0.0625rem;
+		--_ui5_textarea_padding_top_information: 0.125rem;
+		--_ui5_textarea_padding_bottom_information: 0.125rem;
+		--_ui5_textarea_padding_right_and_left: 0.375rem;
+		--_ui5_textarea_padding_right_and_left_information: 0.4375rem;
+		--_ui5_textarea_padding_right_and_left_readonly: 0.375rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Token-parameters.css";
 
-:root {
+:host {
 	--_ui5_token_border_radius: 0.25rem;
 	--_ui5_token_focus_outline_width: 0.125rem;
 	--_ui5_token_readonly_background: var(--sapField_ReadOnly_Background);

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

@@ -1,6 +1,6 @@
 @import "../base/ValueStateMessage-parameters.css";
 
-:root {
+:host {
 	--_ui5_value_state_message_border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
 	--_ui5_value_state_header_offset: -0.1875rem;
 	--_ui5_value_state_header_box_shadow_error: inset 0 -0.125rem var(--sapField_InvalidColor);

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

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

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

@@ -1,21 +1,17 @@
 @import "../base/sizes-parameters.css";
-:root {
-	/* Slider, Range Slider */
-	--_ui5_slider_handle_width: 1.25rem;
-	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_top: -0.5rem;
 
+:host {
 	/* ColorPicker */
 	--_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	/* CheckBox */
-	--_ui5_checkbox_focus_position: 0.3125rem;
-	--_ui5_checkbox_wrapped_focus_inset_block: 0.1875rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* CheckBox */
+		--_ui5_checkbox_focus_position: 0.3125rem;
+		--_ui5_checkbox_wrapped_focus_inset_block: 0.1875rem;
 
-	/* ColorPicker */
-	--_ui5_color_picker_slider_handle_container_margin_top: none;
+		/* ColorPicker */
+		--_ui5_color_picker_slider_handle_container_margin_top: none;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Avatar-parameters.css";
 
-:root {
+:host {
 	--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);

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

@@ -1,5 +1,5 @@
 @import "../base/AvatarGroup-parameters.css";
 
-:root {
+:host {
 	--_ui5_avatar_group_focus_border_radius: 0.375rem;
 }

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

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5_breadcrumbs_margin: 0 0 0.5rem 0;
 }

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

@@ -1,5 +1,5 @@
 @import "../base/BusyIndicator-parameters.css";
 
-:root {
+:host {
 	--_ui5_busy_indicator_color: var(--sapContent_BusyColor);
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Button-parameters.css";
 
-:root {
+:host {
 	--_ui5_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_button_focused_border_radius: 0.375rem;
 	--_ui5_button_focused_inner_border_radius: 0.375rem;

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

@@ -1,6 +1,6 @@
 @import "../base/CalendarHeader-parameters";
 
-:root {
+:host {
 	--_ui5_calendar_header_middle_button_focus_after_width: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_height: calc(100% - 0.375rem);
 	--_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;

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

@@ -1,6 +1,6 @@
 @import "../base/CalendarLegendItem-parameters.css";
 
-:root {
+:host {
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0.125rem;
 	--_ui5-calendar-legend-item-box-dot-display: block;

package/src/themes/sap_horizon/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/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/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/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/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/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/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);
@@ -64,4 +64,3 @@
 	--_ui5_daypicker_item_now_specialday_width: calc(100% - 0.5rem);
 
 }
- 

package/src/themes/sap_horizon/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/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/Icon-parameters.css

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

package/src/themes/sap_horizon/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/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/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/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/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/MessageStrip-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/MessageStrip-parameters.css";
 
-:root{
+:host{
 	--_ui5_message_strip_close_button_right: 0.1875rem;
 }

package/src/themes/sap_horizon/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/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/PopupsCommon-parameters.css

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