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

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;
 	}