@ui5/webcomponents-fiori 2.28.0-rc.0 → 2.29.0-rc.0

package/src/SideNavigationItemTemplate.tsx

@@ -52,12 +52,14 @@ function ItemTemplate(this: SideNavigationItem) {
 					:
 					this.icon && <Icon class="ui5-sn-item-icon" name={this.icon}/>
 				}
-				<div class="ui5-sn-item-text" id={this._textId} dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
-				{this.hasTag &&
-					<div id={this._tagId} class="ui5-sn-item-tag-slot">
-						<slot name="tag"></slot>
-					</div>
-				}
+				<div class="ui5-sn-item-text-tag-container">
+					<div class="ui5-sn-item-text" id={this._textId} dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
+					{this.hasTag &&
+						<div class="ui5-sn-item-tag-slot" aria-hidden="true">
+							<slot name="tag"></slot>
+						</div>
+					}
+				</div>
 				{this.sideNavCollapsed ?
 					!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
@@ -90,6 +92,9 @@ function ItemTemplate(this: SideNavigationItem) {
 			{this._selectableItemDescriptionText &&
 				<span id={this._selectableItemDescriptionId} class="ui5-hidden-text">{this._selectableItemDescriptionText}</span>
 			}
+			{this.hasTag &&
+				<span id={this._tagId} class="ui5-hidden-text">{this._tagDescriptionText}</span>
+			}
 		</>
 	);
 }

package/src/SideNavigationSearchFieldTemplate.tsx

@@ -23,7 +23,6 @@ export default function SideNavigationSearchFieldTemplate(this: SideNavigationSe
 					class="ui5-side-navigation-search-field-search-icon"
 					name={search}
 					accessibleName={this._translations.searchIcon}
-					hideTooltip={true}
 					onClick={this._handleSearchIconPress}
 				/>
 			</Input>

package/src/SideNavigationSubItemTemplate.tsx

@@ -29,18 +29,23 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
 				{this.icon &&
 					<Icon class="ui5-sn-item-icon" name={this.icon}/>
 				}
-				<div class="ui5-sn-item-text" id={this._textId} dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
-				{this.hasTag &&
-					<div id={this._tagId} class="ui5-sn-item-tag-slot">
-						<slot name="tag"></slot>
-					</div>
-				}
+				<div class="ui5-sn-item-text-tag-container">
+					<div class="ui5-sn-item-text" id={this._textId} dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
+					{this.hasTag &&
+						<div class="ui5-sn-item-tag-slot" aria-hidden="true">
+							<slot name="tag"></slot>
+						</div>
+					}
+				</div>
 				{this.isExternalLink &&
 					<Icon class="ui5-sn-item-external-link-icon"
 						  name={arrowRight}
 					/>
 				}
 			</EffectiveTag>
+			{this.hasTag &&
+				<span id={this._tagId} class="ui5-hidden-text">{this._tagDescriptionText}</span>
+			}
 		</li>
 	);
 }

package/src/i18n/messagebundle.properties

@@ -515,6 +515,9 @@ SIDE_NAVIGATION_SEARCH_FIELD_PLACEHOLDER=Find in Navigation
 #XACT: Default ARIA label for the side navigation search field
 SIDE_NAVIGATION_SEARCH_FIELD_LABEL=Side navigation filter
 
+#XACT: Accessible description of a side navigation item's indication tag, where {0} is the tag text
+SIDE_NAVIGATION_LIST_ITEM_TAG_TEXT=Tag {0}
+
 #XACT: Default ARIA description for the side navigation search field
 SIDE_NAVIGATION_SEARCH_DESCRIPTION=Results update as you type. Press Enter for the number of results
 

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -340,6 +340,12 @@ SEARCH_FIELD_LABEL=‍‌​‌‌‍‌​‍‍​‌‌‍‍‌‍
 
 SEARCH_FIELD_PLACEHOLDER_WITH_SCOPE=‌​‌‍​​​‌​‌‌​​​‌‌‌​‍‍​‍‌​​‍‌‌​‌‌‍‍‍‌‍​‍‌‍‌Search in: ​​​{0}‌‌‌
 
+SIDE_NAVIGATION_SEARCH_FIELD_PLACEHOLDER=‍‍‌‍‍‌‌‍‍‍​‌​‍‌‍​​​‌‌​‌‌‌‌​​​‍​​‌‌‌‌‍​​​Find in Navigation
+
+SIDE_NAVIGATION_SEARCH_FIELD_LABEL=‌‍‌‌‌‌‌‌​​‌‌‍‍​​​​‍‌​‍‌​‌‍‌‍​‌‍​‌‍‍‍‍‍Side navigation filter
+
+SIDE_NAVIGATION_SEARCH_DESCRIPTION=‌​‍​‍‌‌​​‌​​‌‌‌‌​‌​‍​​​​‌‍‌​‌​‌​‍​‍‌‌​‍​‍Results update as you type. Press Enter for the number of results
+
 SEARCH_FIELD_CLEAR_ICON=‍‍​‍​​‍‌​‌‌‍​‍​‌‍‍‍‌‍​​​‍‍‌‌‌‌​​​‍​‌‌‍‌‌Clear Search
 
 SEARCH_FIELD_SEARCH_ICON=‌​‍‌​​‌‌‍‌‌​‌‍‌‍‌​‌‍‍​‌‍‍‌‌​‍‍‌‌​‍‌​‌‌‌‍‌Search
@@ -376,6 +382,10 @@ SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL=‌‌‌‌​‌‍‌​​‌
 
 SIDE_NAVIGATION_FIXED_LIST_LABEL=‌​​​​​​‍​‍‍‍​​‌​‌​‌‌‌‍​‌​‌‍‍​​‍​​‌​‍​‌‍Footer Navigation Menu
 
+SIDE_NAVIGATION_SEARCH_MATCH_COUNT_SINGULAR=‌​​‍​‌​​‌​​​‌‌‌‌​‌‌‌​‍​​‍​‍‍​​‍‌‌​‌​‌‌‍‍​​​​{0}‌‌‌ match found
+
+SIDE_NAVIGATION_SEARCH_MATCH_COUNT_PLURAL=‌​​‌‌​‍‍​‍‍‌‌​‌​‍‍‍‌‌‌​‌​‌‌‌‌​​​‍​​‍‌‍​‌​​​​{0}‌‌‌ matches found
+
 SIDE_NAVIGATION_ICON_COLLAPSE=‌‌​‍‌‍‍‌‌‌‍‌‍‍‌‍‍‍‌‍‌‌‍‍‌‍​‍‍‌‌​​‍​​‍​​​‌Collapse
 
 SIDE_NAVIGATION_ICON_EXPAND=‍‌​‍‌‌​‍‌​‍‍​‌‌‍‍​‌‌‌‌​​‌​‍‌‍​​‌​‌‌‌‍​‍​Expand

package/src/shellbar/templates/ShellBarSearchLegacyTemplate.tsx

@@ -6,9 +6,13 @@ function ShellBarSearchField(this: ShellBar) {
 	return (
 		// .ui5-shellbar-search-field-area is used to measure the width of
 		// the search field. It must be present even if the search is in full-width mode.
-		<div class="ui5-shellbar-search-field-area">
+		// The `ui5-shellbar-gap-start` lives on the area (always rendered) rather than on the
+		// inner field (rendered only in-bar), so the measured width stays identical whether the
+		// search is in the bar or in full-width mode - otherwise the 8px gap would be counted
+		// only in-bar, shifting the overflow measurement and causing a render loop.
+		<div class="ui5-shellbar-search-field-area ui5-shellbar-gap-start">
 			{this.showSearchField && !this.showFullWidthSearch && (
-				<div class="ui5-shellbar-search-field ui5-shellbar-gap-start">
+				<div class="ui5-shellbar-search-field">
 					<slot name="searchField"></slot>
 				</div>
 			)}

package/src/themes/NavigationMenuItem.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host::part(native-li)::after {
 	border-radius: 0.375rem;
 	inset: 0;
@@ -92,10 +94,25 @@
 	margin-block-end: var(--_ui5_side_navigation_item_bottom_margin);
 }
 
+.ui5-navmenu-item-text-tag-container {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	column-gap: 0.5rem;
+	row-gap: 0.25rem;
+}
+
+.ui5-navmenu-item-text {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .ui5-navmenu-item-tag-container {
 	display: inline-flex;
 	align-items: center;
-	margin-inline-start: 0.5rem;
-	height: 1.375rem;
+	margin-inline-start: 0;
 	min-width: 1.375rem;
 }

package/src/themes/ShellBarLegacy.css

@@ -6,6 +6,8 @@
 	cursor: pointer;
 	display: flex;
 	align-items: center;
+	padding-block: 0.0625rem;
+	padding-inline: 0.25rem;
 }
 
 .ui5-shellbar-logo-area,
@@ -43,8 +45,6 @@
 
 ::slotted([slot="logo"]) {
 	max-height: 1.875rem;
-	padding-block: 0.0625rem;
-	padding-inline: 0.25rem;
 }
 
 ::slotted([slot="logo"]):active {

package/src/themes/SideNavigationGroup.css

@@ -7,11 +7,18 @@
 
 .ui5-sn-item.ui5-sn-item-group {
 	min-height: 2rem;
-	padding-inline-start: var(--_ui5_side_navigation_group_padding);;
+	padding-inline-start: var(--_ui5_side_navigation_group_padding);
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 }
 
+/* group has no text-tag container: the text fills the row (pushing the toggle icon to the end)
+   and carries the vertical margin that gives the group its height. */
+.ui5-sn-item.ui5-sn-item-group .ui5-sn-item-text {
+	flex: 1;
+	margin-block: var(--_ui5_side_navigation_item_margin);
+}
+
 .ui5-sn-item.ui5-sn-item-group:hover .ui5-sn-item-toggle-icon,
 .ui5-sn-item.ui5-sn-item-group:focus .ui5-sn-item-toggle-icon {
 	display: block;

package/src/themes/SideNavigationItem.css

@@ -1,5 +1,4 @@
 @import "./SideNavigationItemBase.css";
-@import "./InvisibleTextStyles.css";
 
 :host {
 	color: var(--sapList_TextColor);
@@ -17,10 +16,14 @@
 }
 
 :host([in-popover]) .ui5-sn-item-level1 .ui5-sn-item-text {
-	margin: 0 0.375rem 0 0;
+	margin: 0;
 	line-height: var(--_ui5_side_navigation_popup_title_line_height);
 }
 
+:host([in-popover]) .ui5-sn-item-level1 .ui5-sn-item-text-tag-container {
+	padding-inline-end: 0.5rem;
+}
+
 .ui5-sn-item.ui5-sn-item-level1.ui5-sn-item-overflow {
 	margin-top: auto;
 }

package/src/themes/SideNavigationItemBase.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	display: block;
 }
@@ -212,7 +214,6 @@ and there is an additional border that appears on hover. */
 :host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
 	width: var(--_ui5_side_navigation_expand_icon_width);
 	padding-inline-end: 0.375rem;
-	padding-block: var(--_ui5_side_navigation_item_expand_arrow_padding);
 	margin-inline-start: 0.5rem;
 	height: var(--sapElement_Condensed_Height);
 }
@@ -336,9 +337,17 @@ and there is an additional border that appears on hover. */
 	display: none;
 }
 
-.ui5-sn-item-text {
+.ui5-sn-item-text-tag-container {
 	flex: 1;
 	min-width: 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.ui5-sn-item-text {
+	min-width: 0;
 }
 
 :host([side-nav-collapsed]) .ui5-sn-item-text,
@@ -354,28 +363,25 @@ and there is an additional border that appears on hover. */
 	white-space: nowrap;
 }
 
-:host(:not([side-nav-collapsed]):not([in-popover])) .ui5-sn-item-text {
-	margin: var(--_ui5_side_navigation_item_margin) 0;
+:host(:not([side-nav-collapsed])) .ui5-sn-item-text {
+	margin: 0;
+}
+
+:host(:not([side-nav-collapsed]):not([design="Action"])) .ui5-sn-item:not(.ui5-sn-item-group) {
+	padding-block: var(--_ui5_side_navigation_item_margin);
 }
 
-:host(:not([side-nav-collapsed])) .ui5-sn-item:not(.ui5-sn-item-group):not(.ui5-sn-item-with-expander) .ui5-sn-item-text {
+:host(:not([side-nav-collapsed]):not([in-popover])) .ui5-sn-item:not(.ui5-sn-item-group):not(.ui5-sn-item-with-expander) .ui5-sn-item-text-tag-container:not(:has(+ .ui5-sn-item-toggle-icon)):not(:has(+ .ui5-sn-item-external-link-icon)) {
 	padding-inline-end: 0.375rem;
 }
 
 .ui5-sn-item-tag-slot {
-	padding-inline-start: 0.5rem;
-	padding-inline-end: 0.375rem;
 	display: inline-flex;
 	align-items: center;
 }
 
-.ui5-sn-item-tag-slot:has(+ .ui5-sn-item-toggle-icon),
-.ui5-sn-item-tag-slot:has(+ .ui5-sn-item-external-link-icon) {
-	padding-inline-end: 0;
-}
-
-.ui5-sn-item-tag-slot + .ui5-sn-item-toggle-icon,
-.ui5-sn-item-tag-slot + .ui5-sn-item-external-link-icon {
+.ui5-sn-item-text-tag-container + .ui5-sn-item-toggle-icon,
+.ui5-sn-item-text-tag-container + .ui5-sn-item-external-link-icon {
 	margin-inline-start: 0.375rem;
 }
 
@@ -390,7 +396,21 @@ and there is an additional border that appears on hover. */
 
 :host([in-popover]) .ui5-sn-item-tag-slot {
 	display: inline-flex;
-	padding-inline-end: 0.5rem;
+}
+
+/* Collapsed rail hover/focus flyout: tag stays on one line and truncates at 6rem.
+   The popover (in-popover) is NOT clamped - the tag shows full and the popover widens. */
+:host([side-nav-collapsed]) .ui5-sn-item-text-tag-container {
+	flex-wrap: nowrap;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item-tag-slot {
+	max-width: 6rem;
+	overflow: hidden;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item-tag-slot ::slotted([slot="tag"]) {
+	max-width: 6rem;
 }
 
 :host([side-nav-collapsed]) .ui5-sn-item-with-expander .ui5-sn-item-icon::after {

package/src/themes/UserSettingsNotificationsViewItem.css

@@ -58,7 +58,7 @@
 	pointer-events: none;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_user_settings_notifications_item_end_margin: 1rem;
 		min-height: var(--sapElement_Compact_LineHeight);
@@ -99,7 +99,7 @@
 	text-overflow: ellipsis;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	.ui5-user-settings-notifications-item-title {
 		font-size: var(--sapFontSize);
 	}
@@ -137,7 +137,7 @@
 	min-height: 5rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	.ui5-user-settings-notifications-item.has-byline {
 		min-height: 4rem;
 	}

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

@@ -23,7 +23,7 @@
 	--_ui5-notification_item-growing-btn-background-color-active: var(--sapList_Active_Background);
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5-notification_item-description-margin-top: 0.5rem;
 		--_ui5-notification_item-footer-margin-top: 0.5rem;

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

@@ -4,7 +4,7 @@
 	--_ui5_search_popover_max_height: 39rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_search_item_vertical_padding: 0.5rem;
 	}

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

@@ -24,7 +24,6 @@
 	--_ui5_side_navigation_item_border_width: 0;
 	--_ui5_side_navigation_item_height: 2.75rem;
 	--_ui5_side_navigation_item_margin: 0.875rem;
-	--_ui5_side_navigation_item_expand_arrow_padding: 0.6875rem;
 	--_ui5_side_navigation_item_border_radius: 0;
 	--_ui5_side_navigation_item_bottom_margin: 0;
 	--_ui5_side_navigation_item_padding_start_in_popup: var(--_ui5_side_navigation_group_icon_width);
@@ -66,10 +65,9 @@
 	--_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
-		--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
 		--_ui5_side_navigation_item_margin: 0.5rem;
 	}
 }

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

@@ -3,7 +3,7 @@
 	--_ui5_timeline_tlgi_root_horizontal_height: 19.9375rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_timeline_tlgi_compact_icon_before_height: calc(100% + 1.5rem);
 		--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5_timeline_tlgi_compact_icon_before_height);

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

@@ -42,7 +42,7 @@
 	--_ui5_timeline_tli_horizontal_indicator_short_after_width: 100%;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		/* Timeline (container) */
 		--_ui5_tl_bubble_padding: .5rem;

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

@@ -4,7 +4,7 @@
 	--_ui5_user_settings_item_title_font_size: var(--sapFontSize);
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_user_settings_avatar_cozy_display: none;
 		--_ui5_user_settings_avatar_compact_display: inline-block;

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

@@ -6,7 +6,7 @@
 	--_ui5_vsd_expand_content_height: 26.1875rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_vsd_header_container: 2.5rem;
 		--_ui5_vsd_sub_header_container_height: 2rem;

package/src/themes/sap_fiori_3/TimelineGroupItem-parameters.css

@@ -5,7 +5,7 @@
 	--_ui5_timeline_tlgi_root_horizontal_height: 21.53125rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
 	}

package/src/themes/sap_fiori_3/TimelineItem-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TimelineItem-parameters.css";
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		/* Timeline Item COMPACT - sap_fiori_3 specific values */
 		--_ui5_timeline_tli_indicator_after_height: 50%;

package/src/themes/sap_fiori_3_dark/TimelineItem-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TimelineItem-parameters.css";
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_timeline_tli_indicator_after_height: 50%;
 		--_ui5_timeline_tli_indicator_after_top: -50%;

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

@@ -5,7 +5,7 @@
 	--_ui5_TimelineItem_bubble_rtl_right_offset: -0.6875rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_timeline_tli_indicator_after_height: 50%;
 		--_ui5_timeline_tli_indicator_after_top: -50%;

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

@@ -5,7 +5,7 @@
 	--_ui5_TimelineItem_bubble_rtl_right_offset: -0.6875rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_timeline_tli_indicator_after_height: 50%;
 		--_ui5_timeline_tli_indicator_after_top: -50%;

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

@@ -46,7 +46,7 @@
 	--_ui5_side_navigation_item_collapsed_padding: 3rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

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

@@ -46,7 +46,7 @@
 	--_ui5_side_navigation_item_collapsed_padding: 3rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

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

@@ -10,7 +10,7 @@
 	--_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

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

@@ -10,7 +10,7 @@
 	--_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

package/src/themes/sap_horizon_hcb/SideNavigation-parameters.css

@@ -44,7 +44,7 @@
 	--_ui5_side_navigation_item_collapsed_padding: 3rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

package/src/themes/sap_horizon_hcb_exp/SideNavigation-parameters.css

@@ -9,7 +9,7 @@
 	--_ui5_side_navigation_item_height: 2.5rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

package/src/themes/sap_horizon_hcw/SideNavigation-parameters.css

@@ -44,7 +44,7 @@
 	--_ui5_side_navigation_item_collapsed_padding: 3rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}

package/src/themes/sap_horizon_hcw_exp/SideNavigation-parameters.css

@@ -9,7 +9,7 @@
 	--_ui5_side_navigation_item_height: 2.5rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_side_navigation_item_height: 2rem;
 	}