@ui5/webcomponents-fiori 2.27.0-rc.1 → 2.27.0

package/src/themes/ShellBarItem.css

@@ -25,30 +25,48 @@
 
 [ui5-li]::part(icon) {
 	color: var(--sapList_TextColor);
+	align-self: center;
 }
 
-[ui5-li]:after {
-	position: relative;
-	width: fit-content;
+/* Keep the text wrapper hugging its content so the badge sits right after
+   the item text (Figma spec) instead of being pushed to the far end. */
+[ui5-li] {
+	--_ui5_li_text_wrapper_flex: 0 1 auto;
+}
+
+[ui5-li]::part(additional-text) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	height: 1rem;
 	min-width: 1rem;
-	background: var(--sapContent_BadgeBackground);
-	border: var(--_ui5_shellbar_button_badge_border);
-	color: var(--sapContent_BadgeTextColor);
-	bottom: calc(100% + 0.0625rem);
-	left: 1.25rem;
 	padding: 0 0.3125rem;
 	border-radius: 0.5rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	border: var(--_ui5_shellbar_button_badge_border);
+	background: var(--sapContent_BadgeBackground);
+	color: var(--sapContent_BadgeTextColor);
 	font-size: var(--sapFontSmallSize);
-	font-family: var(--sapFontFamily);
-	z-index: 2;
+	font-family: var(--sapFontBoldFamily);
+	font-weight: bold;
+	white-space: nowrap;
+	flex-shrink: 0;
 	box-sizing: border-box;
 	pointer-events: none;
+	/* The hover rule in ListItemBase has specificity (0,6,0); !important is
+	   the only practical way to ensure no text-shadow on the badge pill. */
+	text-shadow: none !important;
+	align-self: center;
+	/* ~4px gap after the item text, per Figma spec. */
+	margin-inline-start: 0.25rem;
+}
+
+/* Override active-state color from ListItem.css (specificity 0,3,0). */
+[ui5-li][active][actionable]::part(additional-text) {
+	color: var(--sapContent_BadgeTextColor);
+	background: var(--sapContent_BadgeBackground);
 }
 
-[ui5-li][data-count]:after {
-	content: attr(data-count);
-}
+/* Override wrapping-type=Normal left-padding from ListItem.css (0,3,0). */
+[ui5-li][wrapping-type="Normal"][additional-text]::part(additional-text) {
+	padding-inline-start: 0.3125rem;
+}

package/src/themes/ShellBarPopover.css

@@ -14,30 +14,4 @@
 
 .ui5-shellbar-overflow-popover [ui5-li]::part(title) {
 	font-size: var(--sapFontSize);
-}
-
-.ui5-shellbar-overflow-popover [ui5-li]:after {
-	position: relative;
-	width: fit-content;
-	height: 1rem;
-	min-width: 1rem;
-	background: var(--sapContent_BadgeBackground);
-	border: var(--_ui5_shellbar_button_badge_border);
-	color: var(--sapContent_BadgeTextColor);
-	bottom: calc(100% + 0.0625rem);
-	left: 1.25rem;
-	padding: 0 0.3125rem;
-	border-radius: 0.5rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: var(--sapFontSmallSize);
-	font-family: var(--sapFontFamily);
-	z-index: 2;
-	box-sizing: border-box;
-	pointer-events: none;
-}
-
-.ui5-shellbar-overflow-popover [ui5-li][data-count]:after {
-	content: attr(data-count);
 }

package/src/themes/TimelineGroupItem.css

@@ -24,6 +24,7 @@
 	display: flex;
 	justify-content: space-between;
 	gap: 0.125rem;
+	margin-inline-end: calc(-1 * var(--_ui5_TimelineItem_bubble_border_right));
 }
 
 .ui5-tlgi-icon-placeholder {

package/src/themes/TimelineItem.css

@@ -164,6 +164,7 @@
 	flex: 1;
 	position: relative;
 	margin-left: .5rem;
+	margin-inline-end: calc(-1 * var(--_ui5_TimelineItem_bubble_border_right));
 	padding: var(--_ui5_TimelineItem_bubble_content_padding);
 	word-break: break-word;
 }
@@ -173,6 +174,14 @@
 	margin-left: 0;
 }
 
+:host([layout="Vertical"][first-item-in-timeline]) .ui5-tli-bubble {
+	margin-block-start: calc(-1 * var(--_ui5_TimelineItem_bubble_border_top));
+}
+
+:host([layout="Vertical"][last-item]) .ui5-tli-bubble {
+	margin-block-end: calc(-1 * var(--_ui5_TimelineItem_bubble_border_bottom));
+}
+
 .ui5-tli-bubble:focus {
 	outline: none;
 }

package/src/themes/UserSettingsNotificationsView.css

@@ -0,0 +1,22 @@
+.ui5-user-settings-notifications-view-content {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.ui5-user-settings-notifications-view-list {
+	padding: 0;
+	margin: 0;
+	--ui5-group-header-listitem-background-color: var(--sapList_Background);
+}
+
+.ui5-user-settings-notifications-view-form {
+	background: var(--sapGroup_ContentBackground);
+	border-bottom: 0.0625rem solid var(--sapList_BorderColor);
+	overflow: visible;
+}
+
+slot[name="additionalContent"]::slotted(*) {
+	display: block;
+}
+

package/src/themes/UserSettingsNotificationsViewGroup.css

@@ -0,0 +1,8 @@
+:host {
+	background: var(--sapList_Background);
+}
+
+::part(header) {
+	background: var(--sapList_Background);
+	border-bottom: none;
+}

package/src/themes/UserSettingsNotificationsViewItem.css

@@ -0,0 +1,152 @@
+:host {
+	--_ui5_user_settings_notifications_item_end_margin: 0.75rem;
+	min-height: var(--sapElement_LineHeight);
+	overflow: visible;
+}
+
+.ui5-li-root,
+.ui5-li-content {
+	overflow: visible;
+}
+
+.ui5-user-settings-notifications-form-item {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	min-height: var(--sapElement_LineHeight);
+	padding: var(--_ui5_list_item_base_padding, 0 1rem);
+	box-sizing: border-box;
+	background: var(--sapList_Background);
+	outline: none;
+	position: relative;
+	cursor: default;
+}
+
+@media (hover: hover) {
+	.ui5-user-settings-notifications-form-item:hover {
+		background: var(--sapList_Hover_Background);
+	}
+}
+
+:host([navigable]) .ui5-user-settings-notifications-form-item {
+	cursor: pointer;
+}
+
+.ui5-user-settings-notifications-form-item .ui5-user-settings-notifications-item-end {
+	padding-inline-end: var(--_ui5_list_item_icon_size, 1.125rem);
+}
+
+:host([navigable]) .ui5-user-settings-notifications-form-item .ui5-user-settings-notifications-item-end {
+	padding-inline-end: 0.25rem;
+}
+
+.ui5-user-settings-notifications-form-item .ui5-user-settings-notifications-item {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.ui5-user-settings-notifications-item-arrow {
+	flex-shrink: 0;
+}
+
+:host([desktop]) .ui5-user-settings-notifications-form-item:focus::after,
+.ui5-user-settings-notifications-form-item:focus-visible::after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	inset: 0.125rem;
+	pointer-events: none;
+}
+
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_user_settings_notifications_item_end_margin: 1rem;
+		min-height: var(--sapElement_Compact_LineHeight);
+	}
+}
+
+.ui5-user-settings-notifications-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.ui5-user-settings-notifications-item-start {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+	gap: 0.75rem;
+}
+
+.ui5-user-settings-notifications-item-texts {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.ui5-user-settings-notifications-item-title {
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontLargeSize);
+	font-weight: normal;
+	color: var(--sapList_TextColor);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@container style(--ui5_content_density: compact) {
+	.ui5-user-settings-notifications-item-title {
+		font-size: var(--sapFontSize);
+	}
+}
+
+.ui5-user-settings-notifications-item-byline {
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+	color: var(--sapContent_LabelColor);
+	padding-top: 0.5rem;
+	padding-bottom: 0.125rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.ui5-user-settings-notifications-item-end {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	margin-inline-start: var(--_ui5_user_settings_notifications_item_end_margin);
+	padding-inline-end: 0.25rem;
+	overflow: visible;
+}
+
+/* Reserve space equal to the navigation icon min-width so the switch stays
+   consistently aligned across navigable and non-navigable items in the same list. */
+:host(:not([navigable])) .ui5-user-settings-notifications-item-end {
+	padding-inline-end: calc(var(--_ui5_list_item_icon_size, 1.125rem) + 0.25rem);
+}
+
+.ui5-user-settings-notifications-item.has-byline {
+	align-items: stretch;
+	min-height: 5rem;
+}
+
+@container style(--ui5_content_density: compact) {
+	.ui5-user-settings-notifications-item.has-byline {
+		min-height: 4rem;
+	}
+}
+
+.has-byline .ui5-user-settings-notifications-item-start {
+	align-items: center;
+}
+
+.has-byline .ui5-user-settings-notifications-item-title {
+	padding-top: 0.125rem;
+}

package/src/themes/WizardTab.css

@@ -70,7 +70,8 @@
 	cursor: pointer;
 }
 
-.ui5-wiz-step-root:focus .ui5-wiz-step-main {
+:host([desktop]) .ui5-wiz-step-root:focus .ui5-wiz-step-main,
+.ui5-wiz-step-root:focus-visible .ui5-wiz-step-main {
 	outline: var(--_ui5_wiz_tab_focus_outline);
 	outline-offset: 1px;
 	border-radius: var(--_ui5_wiz_tab_focus_border_radius);