@ui5/webcomponents 0.0.0-cad512aa3 → 0.0.0-cb061e041

package/src/CheckBox.hbs

@@ -1,6 +1,7 @@
 <div
 	class="ui5-checkbox-root {{classes.main}}"
 	role="checkbox"
+	part="root"
 	aria-checked="{{effectiveAriaChecked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{effectiveAriaDisabled}}"

package/src/Icon.hbs

@@ -1,5 +1,6 @@
 <svg
 	class="ui5-icon-root"
+	part="root"
 	tabindex="{{_tabIndex}}"
 	dir="{{_dir}}"
 	viewBox="{{viewBox}}"
@@ -13,7 +14,6 @@
 	@focusout={{_onfocusout}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
-	@click={{_onclick}}
 >
 	{{#if hasIconTooltip}}
 		<title id="{{_id}}-tooltip">{{effectiveAccessibleName}}</title>

package/src/InputPopover.hbs

@@ -23,7 +23,7 @@
 				</ui5-button>
 			</div>
 			<div class="row">
-				<div class="input-root-phone">
+				<div class="input-root-phone native-input-wrapper">
 					<ui5-input
 						class="ui5-input-inner-phone"
 						type="{{inputType}}"

package/src/List.hbs

@@ -38,7 +38,7 @@
 			<slot></slot>
 
 			{{#if showNoDataText}}
-				<li id="{{_id}}-nodata" class="ui5-list-nodata" tabindex="{{noDataTabIndex}}">
+				<li id="{{_id}}-nodata" class="ui5-list-nodata">
 					<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
 						{{noDataText}}
 					</div>

package/src/Menu.hbs

@@ -50,9 +50,12 @@
 		<ui5-list
 			id="{{_id}}-menu-list"
 			mode="None"
+			?busy="{{busy}}"
+			busy-delay="{{busyDelay}}"
 			separators="None"
 			accessible-role="menu"
 			@ui5-item-click={{_itemClick}}
+			@mouseover="{{_busyMouseOver}}"
 		>
 		{{#each _currentItems}}
 			<ui5-li
@@ -79,7 +82,7 @@
 					</div>
 				{{/if}}
 				{{this.item.text}}
-				{{#if this.item.hasChildren}}
+				{{#if this.item.hasSubmenu}}
 					<ui5-icon
 						part="icon"
 						name="slim-arrow-right"
@@ -95,6 +98,14 @@
 			</ui5-li>
 		{{/each}}
 		</ui5-list>
+	{{else if busy}}
+		<ui5-busy-indicator
+			id="{{_id}}-menu-busy-indicator"
+			delay="{{busyDelay}}"
+			class="ui5-menu-busy-indicator"
+			@mouseover="{{_busyMouseOver}}"
+			active>
+		</ui5-busy-indicator>
 	{{/if}}
 	</div>
 </ui5-responsive-popover>

package/src/MonthPicker.hbs

@@ -7,7 +7,6 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@click={{_selectMonth}}
-	@focusin={{_onfocusin}}
 >
 	{{#each _months}}
 		<div class="ui5-mp-quarter">

package/src/MultiComboBox.hbs

@@ -42,7 +42,6 @@
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
 		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
 		@click={{_click}}
 		@focusin={{inputFocusIn}}
 		@focusout={{inputFocusOut}}

package/src/SelectPopover.hbs

@@ -43,7 +43,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-selection-change="{{_handleItemPress}}"
+			@ui5-item-click="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li

package/src/TabInStrip.hbs

@@ -1,5 +1,5 @@
 <div id="{{this._id}}"
-	class="{{this.stripClasses}}"
+	class="{{this.stripClasses.itemClasses}}"
 	tabindex="-1"
 	role="tab"
 	aria-roledescription="{{_roleDescription}}"
@@ -62,7 +62,5 @@
 	{{/if}}
 
 {{#*inline additionalText}}
-	{{#if this.additionalText}}
-		<span class="ui5-tab-strip-itemAdditionalText" id="{{this._id}}-additionalText">{{this.additionalText}}</span>
-	{{/if}}
+		<span class="{{this.stripClasses.additionalTextClasses}}" id="{{this._id}}-additionalText">{{this.additionalText}}</span>
 {{/inline}}

package/src/TreeItem.hbs

@@ -1,13 +1,12 @@
 {{>include "./TreeItemBase.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-li-tree-text-wrapper">
+	<div class="ui5-li-text-wrapper">
 		{{#if _showTitle}}
 			<div part="title" class="ui5-li-title">{{text}}</div>
 		{{/if}}
-
-		{{#if additionalText}}
-			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
-		{{/if}}
 	</div>
+	{{#if additionalText}}
+		<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+	{{/if}}
 {{/inline}}

package/src/YearPicker.hbs

@@ -7,7 +7,6 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@click={{_selectYear}}
-	@focusin={{_onfocusin}}
 >
 	{{#each _years}}
 		<div class="ui5-yp-interval-container">

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -217,8 +217,6 @@ TIMEPICKER_CANCEL_BUTTON=[[[Ĉąŋċēĺ∙∙∙∙∙∙∙∙]]]
 
 TIMEPICKER_INPUT_DESCRIPTION=[[[Ţįɱē Ĭŋρűţ∙∙∙∙]]]
 
-DURATION_INPUT_DESCRIPTION=[[[Ďűŗąţįŏŋ Ĭŋρűţ∙∙∙∙∙]]]
-
 DATETIME_PICKER_DATE_BUTTON=[[[Ďąţē]]]
 
 DATETIME_PICKER_TIME_BUTTON=[[[Ţįɱē]]]

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -217,8 +217,6 @@ TIMEPICKER_CANCEL_BUTTON=bOhRXp0DtEVqLvu/dvvQ5A_Cancel
 
 TIMEPICKER_INPUT_DESCRIPTION=5W4XgHn2RMpCgiWpkl9+Mw_Time Input
 
-DURATION_INPUT_DESCRIPTION=K8i+jptpLJGMAFLNWV5O5A_Duration Input
-
 DATETIME_PICKER_DATE_BUTTON=WMB6EthjmUNV8kYnBWYsPA_Date
 
 DATETIME_PICKER_TIME_BUTTON=DPfBbrbO+cqvGVOB6ECrSg_Time

package/src/themes/Avatar.css

@@ -216,6 +216,22 @@
 	color: inherit;
 }
 
+.ui5-avatar-icon ~ .ui5-avatar-initials,
+.ui5-avatar-icon ~ .ui5-avatar-icon-fallback {
+	display: none;
+}
+
+.ui5-avatar-initials:not(.ui5-avatar-initials-hidden) + .ui5-avatar-icon-fallback {
+	display: none;
+}
+
+.ui5-avatar-initials-hidden {
+	position: absolute;
+	visibility: hidden;
+	z-index: 0;
+	pointer-events: none;
+}
+
 /* Slotted Badge */
 ::slotted([slot="badge"]) {
 	position: absolute;

package/src/themes/AvatarGroup.css

@@ -1,6 +1,8 @@
 @import "./TapHighlightColor.css";
+
 :host(:not([hidden])) {
 	display: block;
+	width: 100%;
 }
 
 .ui5-avatar-group-items:focus {

package/src/themes/Breadcrumbs.css

@@ -1,3 +1,8 @@
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+}
+
 .ui5-breadcrumbs-root {
     white-space: nowrap;
     outline: none;

package/src/themes/BusyIndicator.css

@@ -57,6 +57,7 @@
 	align-items: center;
 	position: relative;
 	background-color: inherit;
+	height: inherit;
 }
 
 .ui5-busy-indicator-busy-area {

package/src/themes/Button.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 
 :host(:not([hidden])) {
@@ -107,7 +108,7 @@
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
 :host([disabled]:active) {
-		pointer-events: none;
+	pointer-events: none;
 }
 
 :host([focused]) .ui5-button-root:after {
@@ -119,7 +120,6 @@
 	right: 0.0625rem;
 	bottom: 0.0625rem;
 	border: var(--_ui5_button_focused_border);
-	pointer-events: none;
 	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
@@ -136,7 +136,6 @@
 	right: 0.0625rem;
 	bottom: 0.0625rem;
 	border: var(--_ui5_button_emphasized_focused_border_before);
-	pointer-events: none;
 	border-radius: var(--_ui5_button_focused_border_radius);
 }
 

package/src/themes/Card.css

@@ -19,11 +19,11 @@
 	box-sizing: border-box;
 }
 
-.ui5-card-root:hover {
+.ui5-card-root.ui5-card--interactive:hover {
 	box-shadow: var(--_ui5_card_hover_box_shadow);
 }
 
-.ui5-card-root:active {
+.ui5-card-root.ui5-card--interactive:active {
 	box-shadow: var(--_ui5_card_box_shadow);
 }
 

package/src/themes/CheckBox.css

@@ -35,7 +35,7 @@
 :host([readonly]:not([value-state="Warning"]):not([value-state="Error"])) .ui5-checkbox-inner {
 	background: var(--sapField_ReadOnly_Background);
 	border: var(--_ui5_checkbox_inner_readonly_border);
-	color: var(--sapContent_NonInteractiveIconColor);
+	color: var(--sapField_TextColor);
 }
 
 /* wrap */
@@ -63,59 +63,50 @@
 
 /* value states */
 :host([value-state="Error"]) .ui5-checkbox-inner,
-:host([value-state="Error"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
+:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_InvalidBackground);
 	border: var(--_ui5_checkbox_inner_error_border);
 	color: var(--sapField_InvalidColor);
 }
 
-:host([value-state="Error"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
-	box-shadow: var(--_ui5_checkbox_inner_error_box_shadow);
+:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_error_background_hover);
 }
 
 :host([value-state="Warning"]) .ui5-checkbox-inner,
-:host([value-state="Warning"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
+:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_WarningBackground);
 	border: var(--_ui5_checkbox_inner_warning_border);
 	color: var(--_ui5_checkbox_inner_warning_color);
 }
 
-:host([value-state="Warning"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
-	box-shadow: var(--_ui5_checkbox_inner_warning_box_shadow);
+:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_warning_background_hover);
 }
 
 :host([value-state="Information"]) .ui5-checkbox-inner,
-:host([value-state="Information"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
+:host([value-state="Information"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_InformationBackground);
 	border: var(--_ui5_checkbox_inner_information_border);
 	color: var(--_ui5_checkbox_inner_information_color);
 }
 
-:host([value-state="Information"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
-	box-shadow: var(--_ui5_checkbox_inner_information_box_shadow);
+:host([value-state="Information"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_information_background_hover);
 }
 
 
 :host([value-state="Success"]) .ui5-checkbox-inner,
-:host([value-state="Success"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover  {
+:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--sapField_SuccessBackground);
 	border: var(--_ui5_checkbox_inner_success_border);
 	color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Success"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover  {
-	box-shadow: var(--_ui5_checkbox_inner_success_box_shadow);
+:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--_ui5_checkbox_inner_success_background_hover);
 }
 
-:host(:not([value-state])) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover,
-:host([value-state="None"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
-	box-shadow: var(--_ui5_checkbox_inner_default_box_shadow);
-}
-
 :host([value-state="Warning"]) .ui5-checkbox-icon,
 :host([value-state="Warning"][indeterminate]) .ui5-checkbox-inner::after {
 	color: var(--_ui5_checkbox_checkmark_warning_color);
@@ -164,7 +155,6 @@
 /* hover */
 :host(:hover:not([disabled])) {
 	background: var(--_ui5_checkbox_outer_hover_background);
-	box-shadow: var(--_ui5_checkbox_box_shadow);
 }
 
 .ui5-checkbox--hoverable .ui5-checkbox-label:hover {
@@ -172,15 +162,15 @@
 }
 
 /* hover, not active, not checked */
-:host(:not([active]):not([checked]):not([value-state])) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover,
-:host(:not([active]):not([checked])[value-state="None"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
+:host(:not([active]):not([checked]):not([value-state])) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner,
+:host(:not([active]):not([checked])[value-state="None"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_hover_background);
 	border-color: var(--_ui5_checkbox_inner_hover_border_color);
 }
 
 /* hover, not active, checked */
-:host(:not([active])[checked]:not([value-state])) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover,
-:host(:not([active])[checked][value-state="None"]) .ui5-checkbox--hoverable .ui5-checkbox-inner:hover {
+:host(:not([active])[checked]:not([value-state])) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner,
+:host(:not([active])[checked][value-state="None"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_hover_background);
 	border-color: var(--_ui5_checkbox_inner_hover_checked_border_color);
 }
@@ -202,6 +192,7 @@
 :host([active][checked]:not([value-state]):not([disabled])) .ui5-checkbox-inner,
 :host([active][checked][value-state="None"]:not([disabled])) .ui5-checkbox-inner {
 	border-color: var(--_ui5_checkbox_inner_selected_border_color);
+	background-color: var(--_ui5_checkbox_active_background);
 }
 
 .ui5-checkbox-inner {

package/src/themes/ComboBox.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./Input.css";
 @import "./InputIcon.css";
 

package/src/themes/FileUploader.css

@@ -31,27 +31,27 @@
 :host(:not([value-state]):not([disabled]):hover) [ui5-input] {
 	border: var(--_ui5_file_uploader_hover_border);
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_Shadow);
 }
 
 :host([value-state="Error"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color);
-	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
 :host([value-state="Warning"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
 :host([value-state="Success"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
 :host([value-state="Information"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
 :host(:not([disabled]):active) [ui5-button] {

package/src/themes/FormComponents.css

@@ -0,0 +1,3 @@
+:host {
+	vertical-align: middle;
+}

package/src/themes/Input.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
 
@@ -19,13 +20,14 @@
 	box-sizing: border-box;
 	text-align: start;
 	transition: var(--_ui5_input_transition);
-}
-
-:host(:not([disabled])) {
 	background: var(--sapField_BackgroundStyle);
 	background-color: var(--_ui5_input_background_color);
 }
 
+:host(:not([readonly])) {
+	box-shadow: var(--sapField_Shadow);
+}
+
 :host([focused]:not([opened])) {
 	border-color: var(--_ui5_input_focused_border_color);
 	background-color: var(--sapField_Focus_Background);
@@ -218,7 +220,7 @@
 :host(:not([value-state]):not([readonly]):hover) {
 	border: var(--_ui5_input_hover_border);
 	border-color: var(--_ui5_input_focused_border_color);
-	box-shadow: var(--_ui5_input_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_Shadow);
 	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
 }
@@ -253,6 +255,7 @@
 	background: var(--sapField_InvalidBackgroundStyle);
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--_ui5_input_value_state_error_border_color);
+	box-shadow: var(--sapField_InvalidShadow);
 }
 
 :host([value-state="Error"][focused]:not([opened]):not([readonly])) {
@@ -271,7 +274,7 @@
 :host([value-state="Error"]:not([readonly]):not([focused]):hover),
 :host([value-state="Error"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--_ui5_input_value_state_error_hover_background);
-	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
 :host([value-state="Error"]:not([readonly]):not([disabled])),
@@ -284,6 +287,7 @@
 	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapField_WarningBackground);
 	border-color: var(--_ui5_input_value_state_warning_border_color);
+	box-shadow: var(--sapField_WarningShadow);
 }
 
 :host([value-state="Warning"][focused]:not([opened]):not([readonly])) {
@@ -302,7 +306,7 @@
 :host([value-state="Warning"]:not([readonly]):not([focused]):hover),
 :host([value-state="Warning"]:not([readonly])[focused][opened]:hover)  {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
 :host([value-state="Success"]:not([readonly]):not([disabled])) {
@@ -310,6 +314,7 @@
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--_ui5_input_value_state_success_border_color);
 	border-width: var(--_ui5_input_value_state_success_border_width);
+	box-shadow: var(--sapField_SuccessShadow);
 }
 
 :host([value-state="Success"][focused]:not([opened]):not([readonly])) {
@@ -328,7 +333,7 @@
 :host([value-state="Success"]:not([readonly]):not([focused]):hover),
 :host([value-state="Success"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
 :host([value-state="Information"]:not([readonly]):not([disabled])) {
@@ -336,6 +341,7 @@
 	background-color: var(--sapField_InformationBackground);
 	border-color: var(--_ui5_input_value_state_information_border_color);
 	border-width: var(--_ui5_input_information_border_width);
+	box-shadow: var(--sapField_InformationShadow);
 }
 
 :host([value-state="Information"][focused]:not([opened]):not([readonly])) {
@@ -350,7 +356,7 @@
 :host([value-state="Information"]:not([readonly]):not([focused]):hover),
 :host([value-state="Information"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
+	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
 /* Input Icon */

package/src/themes/Link.css

@@ -13,6 +13,8 @@
 	outline: none;
 	text-decoration: var(--_ui5_link_text_decoration);
 	text-shadow: var(--sapContent_TextShadow);
+	white-space: nowrap;
+	overflow-wrap: normal;
 }
 
 :host([disabled]) {
@@ -40,7 +42,7 @@
 	color: var(--sapLinkColor);
 }
 
-:host([wrapping-type="Normal"]) .ui5-link-root {
+:host([wrapping-type="Normal"]) {
 	white-space: normal;
 	overflow-wrap: break-word;
 }
@@ -49,11 +51,11 @@
 	width: 100%;
 	display: inline-block;
 	position: relative;
-	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	overflow-wrap: normal;
 	outline: none;
+	white-space: inherit;
+	overflow-wrap: inherit;
 	text-decoration: inherit;
 	color: inherit;
 }
@@ -83,6 +85,11 @@
 	text-decoration: var(--_ui5_link_hover_text_decoration);
 }
 
+:host([design="Subtle"]:hover) {
+	color: var(--sapLink_SubtleColor);
+	text-decoration: var(--_ui5_link_subtle_text_decoration_hover);
+}
+
 :host([focused]:hover) {
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

package/src/themes/Menu.css

@@ -43,6 +43,10 @@
 	pointer-events: none;
 }
 
+.ui5-menu-busy-indicator {
+	width: 100%;
+}
+
 .ui5-menu-dialog-header {
 	display: flex;
 	height: var(--_ui5-responsive_popover_header_height);
@@ -105,6 +109,11 @@
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
 }
 
+.ui5-menu-rp[sub-menu][actual-placement-type="Left"] {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
+}
+
 .ui5-menu-item::part(additional-text) {
 	margin-inline-start: var(--_ui5_menu_item_additional_text_start_margin);
 	color: var(--sapContent_LabelColor);

package/src/themes/MultiComboBox.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./Input.css";
 @import "./InputIcon.css";
 @import "./InvisibleTextStyles.css";

package/src/themes/Panel.css

@@ -81,7 +81,7 @@
 }
 
 .ui5-panel-content {
-	padding: 0.625rem 1rem 1.375rem 1rem;
+	padding: var(--_ui5_panel_content_padding);
 	background-color: var(--sapGroup_ContentBackground);
 	outline: none;
 	border-bottom-left-radius: var(--_ui5_panel_border_radius);

package/src/themes/ProgressIndicator.css

@@ -166,7 +166,7 @@
 }
 
 :host([disabled]) .ui5-progress-indicator-root {
-	opacity: 0.5;
+	opacity: 0.4;
 }
 
 /* Start and End points - Horizon */

package/src/themes/SegmentedButton.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 
 :host(:not([hidden])) {

package/src/themes/Select.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./InputIcon.css";
 @import "./Input.css";
 

package/src/themes/SplitButton.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./InvisibleTextStyles.css";
 
 :host(:not([hidden])) {