@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/src/themes/TableRowActionBase.css

@@ -1,14 +1,14 @@
 :host([invisible]) {
-    display: block;
-    width: var(--_ui5_button_base_min_width);
+	display: block;
+	width: var(--_ui5_button_base_min_width);
 }
 
 :host([_fixed]) {
-    margin-inline-start: auto;
+	margin-inline-start: auto;
 }
 
 [ui5-icon] {
-    display: flex;
-    width: var(--_ui5_button_base_min_width);
-    height: 0.75rem;
+	display: flex;
+	width: var(--_ui5_button_base_min_width);
+	height: 0.75rem;
 }

package/src/themes/TableRowBase.css

@@ -3,7 +3,7 @@
 	grid-template-columns: subgrid;
 	grid-column: 1 / -1;
 	min-height: var(--_ui5_list_item_base_height);
-	box-sizing: border-box;
+	box-sizing: content-box;
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 	overflow: clip;
 }
@@ -30,6 +30,9 @@
 }
 
 #selection-cell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	padding: 0;
 	left: 0;
 }

package/src/themes/Text.css

@@ -15,7 +15,7 @@
 }
 
 :host(:not([max-lines="1"])) {
-	display: -webkit-box;
+	display: -webkit-inline-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;

package/src/themes/TextArea.css

@@ -11,7 +11,7 @@
 	color: var(--sapField_TextColor);
 	min-height: var(--_ui5_textarea_min_height);
 	font-size: var(--sapFontSize);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-style: normal;
 	box-sizing: border-box;
 	line-height: var(--_ui5_textarea_line_height);
@@ -140,7 +140,7 @@
 :host([growing]) .ui5-textarea-inner {
 	box-sizing: border-box;
 	height: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding)));
-	width: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding)));
+	width: var(--_ui5_textarea_inner_width, calc(100% - (2 * var(--_ui5_textarea_wrapper_padding))));
 	position: absolute;
 }
 
@@ -159,7 +159,7 @@
 	min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 	padding: var(--_ui5_textarea_padding_top) var(--_ui5_textarea_padding_right_and_left) var(--_ui5_textarea_padding_bottom);
 	font-size: var(--sapFontSize);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	white-space: pre-wrap;
 	overflow-y: auto;
 }
@@ -175,7 +175,7 @@
 }
 
 /* If the 'rows' property is not set it defaults to 2 in the native TextArea element */
-:host:not([rows]) .ui5-textarea-inner {
+:host(:not([rows])) .ui5-textarea-inner  {
 	min-height: calc(2 * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
@@ -409,19 +409,10 @@
 	align-self: flex-end;
 	padding: 0.125rem 0.125rem 0.5rem;
 	color: var(--sapContent_LabelColor);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 }
 
 :host([readonly]) .ui5-textarea-exceeded-text, :host([disabled]) .ui5-textarea-exceeded-text {
 	display: none;
 }
-
-:host .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	border-top-right-radius: var(--sapField_BorderCornerRadius);
-	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
-}
-
-:host([focused]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-image: none;
-}

package/src/themes/TimePicker.css

@@ -27,7 +27,7 @@
 	background-color: var(--sapField_InvalidBackground);
 }
 
-:host(:not([disabled]):hover) {
+:host(:not([disabled]):not([readonly]):hover) {
 	background: var(--sapField_Hover_Background);
 }
 
@@ -49,6 +49,11 @@
 	height: inherit;
 }
 
+:host([disabled]) .ui5-time-picker-input {
+	background-color: var(--_ui5-input_disabled_background);
+	opacity: var(--_ui5_input_disabled_opacity);
+}
+
 .ui5-time-picker-popover::part(header) {
 	padding: 0;
 }

package/src/themes/TimePickerPopover.css

@@ -2,6 +2,13 @@
 	width: 20rem;
 }
 
+.ui5-time-picker-popover .ui5-responsive-popover-header .row {
+	justify-content: flex-start;
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader5Size);
+	color: var(--sapPageHeader_TextColor);
+}
+
 .ui5-time-picker-footer {
 	height: fit-content;
 	display: flex;

package/src/themes/Title.css

@@ -7,7 +7,7 @@
 	max-width: 100%;
 	color: var(--sapGroup_TitleTextColor);
 	font-size: var(--sapFontHeader5Size);
-	font-family: "72override", var(--sapFontHeaderFamily);
+	font-family: var(--sapFontHeaderFamily);
 	text-shadow: var(--sapContent_TextShadow);
 }
 

package/src/themes/Toast.css

@@ -1,5 +1,5 @@
 :host {
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	color: var(--sapContent_ContrastTextColor);
 	font-size: var(--sapFontSize);
 	position: fixed;
@@ -28,6 +28,10 @@
 	padding: 0;
 	outline: none;
 	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: fit-content;
 }
 
 :host([open]) {

package/src/themes/ToggleButton.css

@@ -38,6 +38,15 @@
 	color: var(--sapButton_Selected_TextColor);
 }
 
+:host([pressed][active]:not([disabled])),
+:host([design="Default"][pressed][active]:not([disabled])),
+:host([design="Transparent"][pressed][active]:not([disabled])),
+:host([design="Emphasized"][pressed][active]:not([disabled])) {
+	background: var(--sapButton_Selected_Hover_Background);
+	border-color: var(--sapButton_Selected_Hover_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
+}
+
 :host([pressed]:not([active]):not([non-interactive]):not([_is-touch])),
 :host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])),
 :host([design="Transparent"][pressed]:not([active]):not([non-interactive]):not([_is-touch])),
@@ -59,6 +68,12 @@
 	color: var(--sapButton_Reject_Active_TextColor);
 }
 
+:host([design="Negative"][pressed][active]:not([disabled])) {
+	background: var(--sapButton_Reject_Selected_Hover_Background);
+	border-color: var(--sapButton_Reject_Selected_Hover_BorderColor);
+	color: var(--sapButton_Reject_Selected_TextColor);
+}
+
 :host([design="Negative"][pressed][active]:hover),
 :host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
 	background: var(--sapButton_Reject_Selected_Hover_Background);
@@ -84,6 +99,12 @@
 	color: var(--sapButton_Accept_Selected_TextColor);
 }
 
+:host([design="Positive"][pressed][active]:not([disabled])) {
+	background: var(--sapButton_Accept_Selected_Hover_Background);
+	border-color: var(--sapButton_Accept_Selected_Hover_BorderColor);
+	color: var(--sapButton_Accept_Selected_TextColor);
+}
+
 :host([design="Positive"][pressed][active]:hover),
 :host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
 	background: var(--sapButton_Accept_Selected_Hover_Background);
@@ -109,6 +130,12 @@
 	color: var(--sapButton_Attention_Active_TextColor);
 }
 
+:host([design="Attention"][pressed][active]:not([disabled])) {
+	background: var(--sapButton_Attention_Selected_Hover_Background);
+	border-color: var(--sapButton_Attention_Selected_Hover_BorderColor);
+	color: var(--sapButton_Attention_Selected_TextColor);
+}
+
 :host([design="Attention"][pressed][active]:hover),
 :host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) {
 	background: var(--sapButton_Attention_Selected_Hover_Background);

package/src/themes/Token.css

@@ -20,13 +20,13 @@
 	background: var(--sapButton_Hover_Background);
 }
 
-:host([selected]) {
+:host(:not([readonly])[selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper::before {
+:host(:not([readonly])[selected]) .ui5-token--wrapper::before {
 	content: "";
 	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
@@ -40,7 +40,12 @@
 	pointer-events: none;
 }
 
-:host([selected]:hover) {
+:host([readonly][selected]) .ui5-token--text {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
+:host(:not([readonly])[selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
 }
 
@@ -58,7 +63,7 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([focused][selected]:not(:hover)) {
+:host(:not([readonly])[focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);
@@ -74,7 +79,7 @@
 	padding-inline-start: var(--_ui5_token_left_padding);
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	user-select: none;
 }
 .ui5-token--wrapper {

package/src/themes/Tokenizer.css

@@ -48,7 +48,7 @@
 	align-items: center;
 	box-sizing: border-box;
 	touch-action: none;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 }
 
 .ui5-tokenizer--token--wrapper {

package/src/themes/TokenizerPopover.css

@@ -21,6 +21,3 @@
 	margin-inline-start: calc(-1 * var(--_ui5_tokenizer_padding));
 }
 
-.ui5-responsive-popover-footer [ui5-button]:first-child{
-	margin-right: 1rem;
-}

package/src/themes/Toolbar.css

@@ -28,13 +28,27 @@
 
 .ui5-tb-item {
 	flex-shrink: 0;
+	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
+	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
 }
 
-.ui5-tb-item {
+.ui5-tb-spacer {
+	flex: 1 1 auto;
 	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
 	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
 }
 
+.ui5-tb-self-overflow {
+	min-width:  2.5rem;
+	flex-shrink: 1;
+	flex-grow: 1;
+
+}
+
+.ui5-tb-self-overflow-grow {
+	position: absolute;
+}
+
 /* Last visible element should not have margins.
 Last element is: overflow button or tb-item when overflow button is hidden */
 .ui5-tb-overflow-btn,
@@ -43,13 +57,6 @@ Last element is: overflow button or tb-item when overflow button is hidden */
 	margin-inline-start: 0;
 }
 
-.ui5-tb-separator {
-	height: var(--_ui5-toolbar-separator-height);
-	width: 0.0625rem;
-	background: var(--sapToolbar_SeparatorColor);
-	box-sizing: border-box;
-}
-
 .ui5-tb-overflow-btn-hidden {
 	visibility: hidden;
 	position: absolute;

package/src/themes/ToolbarButton.css

@@ -0,0 +1,10 @@
+:host([disabled]:active) {
+	pointer-events: none;
+}
+.ui5-tb-popover-item.ui5-tb-button::part(button) {
+	justify-content: start;
+}
+
+.ui5-tb-popover-item.ui5-tb-button[icon-only]::part(button) {
+	padding: 0 var(--_ui5_button_base_padding);
+}

package/src/themes/ToolbarItem.css

@@ -0,0 +1,8 @@
+:host {
+	display: inline-block;
+	height: 100%;
+}
+
+:host([is-overflowed]) ::slotted(*) {
+	width: 100%;
+}

package/src/themes/ToolbarPopover.css

@@ -6,13 +6,18 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	align-items: center;
+	align-items: flex-start;
 }
 
 .ui5-tb-popover-item {
 	width: 100%;
 }
 
+::slotted([slot^="default"])::part(button) {
+	width: 100%;
+	display: block;
+}
+
 .ui5-tb-popover-item:not(:last-child) {
 	margin-bottom: 0.25rem;
 }

package/src/themes/ToolbarSelect.css

@@ -1,8 +1,9 @@
 :host(:not([hidden])) {
-	width: 100%;
+    width: 100%;
 }
 
-:host [ui5-select] {
-	width: inherit;
+:host([is-overflowed]) .ui5-tb-popover-item {
+    align-items: inherit;
+    width: 100%;
 }
 

package/src/themes/ToolbarSeparator.css

@@ -0,0 +1,6 @@
+.ui5-tb-separator {
+	height: var(--_ui5-toolbar-separator-height);
+	width: 0.0625rem;
+	background: var(--sapToolbar_SeparatorColor);
+	box-sizing: border-box;
+}

package/src/themes/TreeItem.css

@@ -65,12 +65,20 @@
 }
 
 .ui5-li-tree-toggle-icon {
-	width: var(--_ui5-tree-toggle-icon-size);
-	height: var(--_ui5-tree-toggle-icon-size);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--_ui5-tree-toggle-box-width);
+	height: var(--_ui5-tree-toggle-box-height);
 	color: var(--sapContent_IconColor);
 	cursor: pointer;
 }
 
+.ui5-li-tree-toggle-icon::part(root) {
+	width: var(--_ui5-tree-toggle-icon-size);
+	height: var(--_ui5-tree-toggle-icon-size);
+}
+
 :host([actionable]) .ui5-li-tree-toggle-icon {
 	color: var(--sapButton_TextColor);
 }

package/src/themes/ValueStateMessage.css

@@ -36,7 +36,7 @@
 	display: inline-block;
 	color: var(--sapTextColor);
 	font-size: var(--sapFontSmallSize);
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	height: auto;
 	padding: var(--_ui5_value_state_message_padding);
 	overflow: hidden;
@@ -47,7 +47,10 @@
 }
 
 [ui5-responsive-popover] .ui5-valuestatemessage-header, [ui5-popover] .ui5-valuestatemessage-header  {
-	min-height: 2rem;
+	min-height: var(--_ui5_value_state_message_popover_header_min_height);
+	min-width: var(--_ui5_value_state_message_popover_header_min_width);
+	max-width: var(--_ui5_value_state_message_popover_header_max_width);
+	width: var(--_ui5_value_state_message_popover_header_width);
 }
 
 [ui5-responsive-popover] .ui5-valuestatemessage-header {
@@ -74,7 +77,7 @@
 	background: var(--sapInformationBackground);
 }
 
-.ui5-responsive-popover-header.ui5-responsive-popover-header--focused, .ui5-responsive-popover-header:focus {
+.ui5-responsive-popover-header:focus {
 	outline-offset: var(--_ui5_value_state_header_offset);
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
@@ -109,6 +112,7 @@
 	flex: none;
 	top: 0;
 	left: 0;
+	max-width: 100%;
 }
 
 .ui5-popover-with-value-state-header-phone::part(content) {

package/src/themes/ValueStateVariables.css

@@ -0,0 +1,27 @@
+:host([value-state="Negative"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_InvalidBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_InvalidBackground);
+	--ui5_value_state-box-shadow: var(--sapField_InvalidShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_WarningBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_WarningBackground);
+	--ui5_value_state-box-shadow: var(--sapField_WarningShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_SuccessBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_SuccessBackground);
+	--ui5_value_state-box-shadow: var(--sapField_SuccessShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_InformationBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_InformationBackground);
+	--ui5_value_state-box-shadow: var(--sapField_InformationShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_information_focus_outline_color);
+}

package/src/themes/YearPicker.css

@@ -11,7 +11,7 @@
 	padding: 2rem 0 1rem 0;
 	display: flex;
 	flex-direction: column;
-	font-family: "72override", var(--sapFontFamily);
+	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	justify-content: center;
 	align-items: center;
@@ -37,7 +37,7 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	cursor: default;
+	cursor: pointer;
 	outline: none;
 	position: relative;
 	border: var(--_ui5_yearpicker_item_border);

package/src/themes/YearRangePicker.css

@@ -0,0 +1,118 @@
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-yrp-root {
+	padding: 2rem 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-yrp-interval-container {
+	display: flex;
+	justify-content: space-evenly;
+	align-items: center;
+	width: 100%;
+}
+
+.ui5-yrp-item {
+	display: flex;
+	margin: var(--_ui5_yearpicker_item_margin);
+	width: calc(50% - 0.125rem);
+	height: var(--_ui5_year_picker_item_height);
+	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapButton_Lite_Background);
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: pointer;
+	outline: none;
+	position: relative;
+	border: var(--_ui5_yearpicker_item_border);
+	border-radius: var(--_ui5_yearpicker_item_border_radius);
+}
+
+.ui5-yrp-item-secondary-type {
+	flex-direction: column;
+	width: calc(50% - 0.125rem);
+}
+
+.ui5-yrp-item-sec-type {
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
+.ui5-yrp-item-one-column-view {
+	width: initial;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected,
+.ui5-yrp-item.ui5-yrp-item--selected-between {
+	background: var(--sapButton_Selected_Background);
+	border: var(--_ui5_yearpicker_item_selected_border);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected-between .ui5-yrp-item-sec-type {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item:hover {
+	background: var(--sapButton_Lite_Hover_Background);
+	border: var(--_ui5_yearpicker_item_hover_border);
+	color: var(--sapButton_Lite_Hover_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected:hover,
+.ui5-yrp-item.ui5-yrp-item--selected-between:hover {
+	background: var(--sapButton_Selected_Hover_Background);
+	border: var(--_ui5_yearpicker_item_selected_hover_border);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--selected:hover .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected-between:hover .ui5-yrp-item-sec-type {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-yrp-item:active,
+.ui5-yrp-item.ui5-yrp-item--selected:active,
+.ui5-yrp-item.ui5-yrp-item--selected-between:active {
+	background: var(--sapButton_Active_Background);
+	border: var(--_ui5_monthpicker_item_active_border);
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-yrp-item:active .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected:active .ui5-yrp-item-sec-type,
+.ui5-yrp-item.ui5-yrp-item--selected-between:active .ui5-yrp-item-sec-type  {
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-yrp-item.ui5-yrp-item--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.ui5-yrp-item:focus::after {
+	content: "";
+	position: absolute;
+	inset: 0.0625rem;
+	border: var(--_ui5_button_focused_border);
+	border-radius: var(--_ui5_button_focused_border_radius);
+}

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

@@ -1,9 +1,10 @@
-:root {
+:host {
 	--ui5-avatar-hover-box-shadow-offset: 0px 0px 0px 0.0625rem var();
 	--ui5-avatar-initials-color: var(--sapContent_ImagePlaceholderForegroundColor);
 	--ui5-avatar-border-radius: .25rem;
 	--ui5-avatar-border-radius-img-deduction: 0.0625rem;
 	--ui5-avatar-initials-border: none;
+	--ui5-avatar-optional-border: .0625rem solid var(--sapGroup_ContentBorderColor);
 	--ui5-avatar-accent1: var(--sapAccentColor1);
 	--ui5-avatar-accent2: var(--sapAccentColor2);
 	--ui5-avatar-accent3: var(--sapAccentColor3);

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

@@ -1,3 +1,4 @@
-:root {
+:host {
 	--_ui5_avatar_group_button_focus_border: none;
+	--_ui5_avatar_group_padding: 0.3rem;
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_bar_base_height: 2.75rem;
 	--_ui5_bar_subheader_height: 3rem;
 	--_ui5_bar-start-container-padding-start: 1rem;

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_busy_indicator_color: var(--sapContent_IconColor);
 	--_ui5_busy_indicator_focus_outline:  var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor);
 	--_ui5_button_focused_border_radius: 0.25rem;
 	--_ui5_button_focused_inner_border_radius: 0;

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

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--_ui5-button-badge-diameter: 0.75rem;
 }

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

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--_ui5_calendar_header_arrow_button_border: none;
 	--_ui5_calendar_header_arrow_button_border_radius: 0.25rem;
 	--_ui5_calendar_header_middle_button_width: 6.25rem;