@ui5/webcomponents-fiori 1.2.6 → 1.4.0

package/src/themes/NotificationListItem.css

@@ -69,22 +69,19 @@
 	flex-direction: row-reverse;
 	position: relative;
 	width: 100%;
-	padding: 1rem 0.5rem 1rem 1rem;
+	padding-inline: 1rem 0.5rem;
+	padding-block: 1rem;
 	box-sizing: border-box;
 	cursor: pointer;
 }
 
-[dir="rtl"].ui5-nli-root {
-	padding: 1rem 1rem 1rem 0.5rem;
-}
-
 .ui5-nli-content {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
 	min-width: 0; /* fixes Chrome flex issue */
 	width: 100%;
-	padding: 0 1rem 0 0.75rem;
+	padding-inline: 0.75rem 1rem;
 	font-family: "72override", var(--sapFontFamily);
 	box-sizing: border-box;
 }
@@ -112,7 +109,6 @@
 	color: var(--sapTextColor);
 	font-size: var(--sapFontSize);
 	box-sizing: border-box;
-	box-sizing: border-box;
 }
 
 /*  Footer */
@@ -123,23 +119,17 @@
 	padding-top: 0.5rem;
 	box-sizing: border-box;
 	flex-wrap: wrap;
+	align-items: center;
 }
 
 .ui5-nli-footer-divider {
 	position: relative;
 	align-items: center;
-	margin-left: 0.5rem;
-	margin-right: 0.625rem;
-}
-
-.ui5-nli-footer-divider::after {
-	position: absolute;
-	content: ".";
-	top: -20%;
+	margin-inline: 0.5rem;
 }
 
 .ui5-nli-footer-showMore {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 ::slotted([slot^="footnotes"]) {
@@ -154,15 +144,4 @@
 .ui5-nli-actions {
 	display: flex;
 	box-sizing: border-box;
-}
-
-/* RTL */
-
-[dir="rtl"] .ui5-nli-footer-divider {
-	margin-right: 0.5rem;
-	margin-left: 0.625rem;
-}
-
-[dir="rtl"] .ui5-nli-footer-showMore {
-	margin-right: 1rem;
-}
+}

package/src/themes/NotificationListItemBase.css

@@ -41,17 +41,9 @@
 
 .ui5-nli-action {
 	flex-shrink: 0;
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 }
 
 .ui5-nli-overflow-btn {
-	margin-right: 0.5rem;
-}
-
-[dir="rtl"] .ui5-nli-group-action {
-	margin-left: 0.5rem;
-}
-
-[dir="rtl"] .ui5-nli-overflow-btn {
-	margin-left: 0.5rem;
+	margin-inline-end: 0.5rem;
 }

package/src/themes/NotificationOverflowActionsPopover.css

@@ -0,0 +1,8 @@
+.ui5-notification-overflow-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.ui5-notification-overflow-popover::part(content) {
+	padding: var(--_ui5-notification-overflow-popover-padding);
+}

package/src/themes/NotificationPrioIcon.css

@@ -1,7 +1,7 @@
 .ui5-prio-icon {
 	min-width: 1rem;
 	min-height: 1rem;
-	padding-right: 0.5rem;
+	padding-inline-end: 0.625rem;
 }
 
 .ui5-prio-icon--message-error {
@@ -14,9 +14,4 @@
 
 .ui5-prio-icon--message-success {
 	color: var(--sapPositiveElementColor);
-}
-
-[dir=rtl] .ui5-prio-icon {
-	padding-left: .5rem;
-	padding-right: 0rem;
 }

package/src/themes/Page.css

@@ -2,7 +2,7 @@
 :host(:not([hidden])) {
     width: 100%;
     height: 100%;
-    display: inline-block;
+    display: block;
 }
 
 .ui5-page-root {
@@ -54,6 +54,11 @@
     padding: 0 .25rem;
 }
 
+:host([media-range="S"]) ::slotted([ui5-bar][design="Footer"]) {
+    box-sizing: border-box;
+    padding: 0 .25rem;
+}
+
 :host([media-range="M"]) .ui5-page-content-root,
 :host([media-range="L"]) .ui5-page-content-root,
 :host([media-range="M"][floating-footer]) .ui5-page-footer-root,
@@ -67,6 +72,12 @@
     padding: 0 1.25rem;
 }
 
+:host([media-range="M"]) ::slotted([ui5-bar][design="Footer"]),
+:host([media-range="L"]) ::slotted([ui5-bar][design="Footer"]) {
+    box-sizing: border-box;
+    padding: 0 1.25rem;
+}
+
 :host([media-range="XL"]) .ui5-page-content-root,
 :host([media-range="XL"][floating-footer]) .ui5-page-footer-root {
 	padding: 0 3rem;
@@ -77,6 +88,11 @@
     padding: 0 2.25rem;
 }
 
+:host([media-range="XL"]) ::slotted([ui5-bar][design="Footer"]) {
+    box-sizing: border-box;
+    padding: 0 2.25rem;
+}
+
 :host([disable-scrolling]) .ui5-page-content-root {
     overflow: hidden;
 }
@@ -99,7 +115,7 @@
 }
 
 :host([background-design="Transparent"]) {
-    background-color: transparent;
+    background-color: var(--_ui5_page_transparent_bg);
 }
 
 :host([background-design="List"]) {

package/src/themes/ShellBar.css

@@ -3,13 +3,17 @@
 	width: 100%;
 }
 
+:host {
+	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
+}
+
 .ui5-shellbar-root {
 	position: relative;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	background: var(--sapShellColor);
-	height: 2.75rem;
+	height: var(--_ui5_shellbar_root_height);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
@@ -22,14 +26,14 @@
 ::slotted([ui5-button][slot="startButton"]) {
 	height: 2.25rem;
 	padding: 0;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	border: none;
 	background: transparent;
 	outline-color: var(--_ui5_shellbar_logo_outline_color);
 	color: var(--sapShell_TextColor);
 	box-sizing: border-box;
 	cursor: pointer;
-	border-radius: 0.25rem;
+	border-radius: var(--_ui5_shellbar_button_border_radius);
 	position: relative;
 	font-size: 0.75rem;
 	font-weight: bold;
@@ -60,6 +64,9 @@
 	color: var(--_ui5_shellbar_button_active_color);
 }
 
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow {
+	border-top-color: var(--_ui5_shellbar_button_active_color);
+}
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
@@ -86,7 +93,7 @@ slot[name="profile"] {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	margin: 0;
-	font-size: 0.75rem;
+	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -99,11 +106,11 @@ slot[name="profile"] {
 }
 
 :host(:not([primary-title])) .ui5-shellbar-menu-button span {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-menu-button span {
-	margin-left: .5rem;
+	margin-inline-start: .5rem;
 }
 
 .ui5-shellbar-secondary-title {
@@ -120,7 +127,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
 	display: inline-block;
-	margin-left: 0.375rem;
+	margin-inline-start: 0.375rem;
 	width: 10px;
 	height: 10px;
 	width: 0px;
@@ -141,7 +148,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-overflow-container-middle {
 	align-self: center;
-	height: 2.5rem;
+	height: var(--_ui5_shellbar_overflow_container_middle_height);
 	width: 0;
 	flex-shrink: 0;
 }
@@ -163,51 +170,66 @@ slot[name="profile"] {
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-root {
-	padding: 0.25rem 1rem;
+	padding: 0 1rem;
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0.25rem 1rem;
+	padding: 0 1rem;
 }
 
 :host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
-	margin-right: 0;
+	margin-inline-end: 0;
 }
 
 :host([breakpoint-size="M"]) .ui5-shellbar-root {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="L"]) .ui5-shellbar-root {
-	padding: 0.25rem 2rem;
+	padding: 0 2rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-root {
-	padding: 0.25rem 3rem;
+	padding: 0 3rem;
 }
 
 :host([breakpoint-size="XXL"]) .ui5-shellbar-root {
-	padding: 0.25rem 3rem;
+	padding: 0 3rem;
 }
 
 .ui5-shellbar-logo {
 	cursor: pointer;
 	max-height: 2rem;
+	overflow: hidden;
 }
 
 .ui5-shellbar-logo:focus {
 	outline: var(--_ui5_shellbar_logo_outline);
-	outline-offset: var(--_ui5_shellbar_outline_offset);
+	outline-offset: var(--_ui5_shellbar_logo_outline_offset);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
+}
+
+.ui5-shellbar-logo:hover {
+	box-shadow: var(--_ui5_shellbar_button_box_shadow);
+	border-radius: var(--_ui5_shellbar_logo_border_radius);
 }
 
 .ui5-shellbar-button {
 	width: 2.5rem;
 }
 
+.ui5-shellbar-search-button {
+	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_search_button_border_radius);
+	--_ui5_shellbar_button_border_radius: var(--_ui5_shellbar_search_button_border_radius);
+	height: var(--_ui5_shellbar_search_button_size);
+	width: var(--_ui5_shellbar_search_button_size);
+	min-width: var(--_ui5_shellbar_search_button_size);
+}
+
 .ui5-shellbar-image-buttonImage {
 	border-radius: 50%;
 	width: 1.75rem;
@@ -227,8 +249,9 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-left {
+	padding: 0 0.125rem;
 	justify-content: flex-start;
-	margin-right: 0.5rem;
+	margin-inline-end: 0.5rem;
 	max-width: 75%;
 	flex-shrink: 0;
 	flex-grow: 0;
@@ -248,24 +271,26 @@ slot[name="profile"] {
 	padding: 0.25rem 0.5rem;
 	cursor: text;
 	-webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
 	user-select: text;
 }
 
 .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
 	-webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
 	user-select: none;
 	cursor: pointer;
+	border: var(--_ui5_shellbar_button_border);
 }
 
 :host(:not([with-logo])) .ui5-shellbar-menu-button {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-overflow-container-right {
+	padding: 0 0.125rem;
 	display: block;
 	overflow: hidden;
 	box-sizing: border-box;
@@ -279,12 +304,15 @@ slot[name="profile"] {
 }
 
 :host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
-	margin-left: 8rem;
+	margin-inline-start: 8rem;
 }
 
 .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
 	justify-content: flex-end;
+	height: inherit;
+	align-items: center;
+	float: var(--_ui5_shellbar_overflow_container_float);
 }
 
 .ui5-shellbar-overflow-button {
@@ -305,7 +333,7 @@ slot[name="profile"] {
 }
 
 :host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .ui5-shellbar-overflow-button-shown {
@@ -318,16 +346,17 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-coPilot {
+	height: 100%;
 	background-color: transparent;
 	cursor: pointer;
 }
 
 :host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 :host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
-	margin-left: 1rem;
+	margin-inline-start: 1rem;
 }
 
 :host(:not([notifications-count])) .ui5-shellbar-bell-button {
@@ -341,6 +370,7 @@ slot[name="profile"] {
 	height: 1rem;
 	min-width: 1rem;
 	background: var(--sapContent_BadgeBackground);
+	border: var(--_ui5_shellbar_button_badge_border);
 	color: var(--sapContent_BadgeTextColor);
 	top: 0.125rem;
 	left: 1.5rem;
@@ -364,13 +394,14 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-menu-button {
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 }
 
 .ui5-shellbar-search-field {
+	align-items: center;
 	flex-grow: 1;
 	min-width: 240px;
-	margin-left: 0.5rem;
+	margin-inline-start: 0.5rem;
 	max-width: 25rem;
 }
 
@@ -397,15 +428,20 @@ slot[name="profile"] {
 }
 
 ::slotted([ui5-input]) {
-	background-color: var(--sapShellColor);
-	border: 1px solid var(--sapShell_InteractiveBorderColor);
-	color: var(--sapShell_TextColor);
-	height: 100%;
+	background: var(--_ui5_shellbar_search_field_background);
+	border: var(--_ui5_shellbar_search_field_border);
+	color: var(--_ui5_shellbar_search_field_color);
+	height: 2.25rem;
 	width: 100%;
 }
 
+::slotted([ui5-input]:hover) {
+	background: var(--_ui5_shellbar_search_field_background_hover);
+	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
+}
+
 ::slotted([ui5-input][focused]) {
-	outline: 1px dotted var(--sapContent_ContrastFocusColor);
+	outline: var(--_ui5_shellbar_search_field_outline_focused);
 }
 
 ::slotted([slot="logo"]) {
@@ -437,9 +473,11 @@ slot[name="profile"] {
 	position: relative;
 	outline: none;
 	box-sizing: border-box;
+	height: 100%;
 }
 
 .ui5-shellbar-copilot-wrapper:hover {
+	border-radius: var(--sapButton_BorderCornerRadius);
 	background: var(--sapShell_Hover_Background);
 }
 
@@ -448,17 +486,27 @@ slot[name="profile"] {
 	background: var(--sapShell_Active_Background);
 }
 
+.ui5-shellbar-copilot-wrapper:hover::after,
 .ui5-shellbar-copilot-wrapper:focus::after {
 	content: "";
 	position: absolute;
-	height: calc(100% - 0.75rem);
-	border: var(--_ui5_shellbar_logo_outline);
-	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
+	left: var(--_ui5_shellbar_copilot_focus_offset);
+	right: var(--_ui5_shellbar_copilot_focus_offset);
+	top: var(--_ui5_shellbar_copilot_focus_offset);
+	bottom: var(--_ui5_shellbar_copilot_focus_offset);
+	outline: none;
 	pointer-events: none;
-	left: 0;
-	top: 0.25rem;
-	right: 0;
-	z-index: 1;
+	border-radius: var(--_ui5_shellbar_logo_outline_border_radius);
+}
+
+.ui5-shellbar-copilot-wrapper:hover::after {
+	background: transparent;
+	box-shadow: var(--sapContent_Interaction_Shadow);
+	
+}
+
+.ui5-shellbar-copilot-wrapper:focus::after {
+	border: var(--_ui5_shellbar_logo_outline);
 }
 
 .ui5-shellbar-co-pilot-placeholder {
@@ -490,41 +538,8 @@ slot[name="profile"] {
 	stop-opacity: 0.2;
 }
 
-:host [dir="rtl"] ::slotted([ui5-button][slot="startButton"]) {
-	margin-left: 0.5rem;
-	margin-right: 0;
-}
-
-:host [dir="rtl"] .ui5-shellbar-menu-button {
-	margin-right: 0.5rem;
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
-	margin-right: 0.375rem;
-	margin-left: 0;
-}
-
-:host(:not([show-search-field])) [dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-right: 8rem;
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-left: 0;
-}
-
-[dir="rtl"] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
-	float: left;
-}
-
-:host([breakpoint-size="S"]) [dir="rtl"] .ui5-shellbar-overflow-container-right {
-	margin-right: 0;
-}
-
 ::slotted([ui5-button][slot="startButton"]) {
-	margin-right: 0.5rem;
-	margin-left: 0;
+	margin-inline: 0 0.5rem;
 	justify-content: center;
 	align-items: center;
 }

package/src/themes/ShellBarPopover.css

@@ -0,0 +1,5 @@
+.ui5-shellbar-menu-popover::part(content),
+.ui5-shellbar-overflow-popover::part(content) {
+	padding: 0;
+}
+

package/src/themes/SideNavigation.css

@@ -2,39 +2,61 @@
     display: inline-block;
     width: 15rem;
     height: 100%;
-    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
     transition: width .25s;
-    --_ui5-tree-toggle-box-width: 1rem;
+    --_ui5-tree-toggle-box-width: var(--_ui5_side_navigation_icon_padding);
+    --_ui5_list_item_icon_size: var(--_ui5_side_navigation_icon_size);
+    --_ui5-tree-toggle-icon-size: var(--_ui5_side_navigation_toggle_icon_size);
+    --_ui5_list_item_title_size: var(--sapFontLargeSize);
+    --_ui5_list_item_icon_padding-inline-end: var(--_ui5_side_navigation_icon_padding);
+    --_ui5-tree-indent-step: var(--_ui5_side_navigation_indent_step);
 }
 
 :host([collapsed]) {
-    width: 3rem;
-    min-width: 3rem;
+    width: var(--_ui5_side_navigation_collapsed_state_width);
+}
+
+.ui5-sn-root {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    background: var(--sapList_Background);
+    border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
+    box-shadow: var(--sapContent_Shadow0);
+}
+
+.ui5-sn-items-tree {
+    overflow: auto;
 }
 
 .ui5-sn-bottom-content-border {
     width: 100%;
-    padding: 0 0.5rem;
+    padding: 0 1rem;
     margin: 0.25rem 0;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
 }
 
+:host([collapsed]) .ui5-sn-bottom-content-border {
+    padding: 0 0.5rem;
+}
+
 .ui5-sn-bottom-content-border > span {
-    width: 90%;
+    width: 100%;
     height: .125rem;
-    background: var(--sapList_GroupHeaderBorderColor);
+    background: var(--_ui5_side_navigation_separator_backgound);
 }
 
-.ui5-sn-root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background: var( --sapList_Background);
+.ui5-sn-spacer {
+    flex: 1;
+    min-height: 0;
 }
 
-.ui5-sn-spacer {
-    flex: auto;
-    min-height: 3rem;
+[ui5-tree]::part(toggle-icon) {
+    color: var(--sapContent_NonInteractiveIconColor);
+}
+
+[ui5-tree]::part(icon) {
+    color: var(--_ui5_side_navigation_icon_color);
 }

package/src/themes/SideNavigationPopover.css

@@ -1,9 +1,3 @@
-.ui5-side-navigation-popover [ui5-li][focused]:first-child::part(native-li)::after {
-	border-top-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-top-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
-
-.ui5-side-navigation-popover [ui5-li][focused]:last-child::part(native-li)::after {
-	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
-	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
-}
+.ui5-side-navigation-popover::part(content) {
+	padding: 0;
+}

package/src/themes/Timeline.css

@@ -31,22 +31,11 @@
 
 :host([layout="Horizontal"]) .ui5-timeline-list-item {
 	display: inline-block;
-	margin-left: var(--_ui5_tl_li_margin_bottom);
+	margin-inline-start: var(--_ui5_tl_li_margin_bottom);
 }
 
 :host([layout="Horizontal"]) .ui5-timeline-scroll-container {
 	overflow: auto;
 	/* The padding values of the parent container are added to the size of scroll container */
-	width: calc(100% + 0.5rem);
-}
-
-:host([layout="Horizontal"]) [dir=rtl] .ui5-timeline-list-item {
-	display: inline-block;
-	margin-left: inherit;
-	margin-right: var(--_ui5_tl_li_margin_bottom);
-}
-
-:host([layout="Horizontal"]) [dir=rtl] .ui5-timeline-scroll-container {
-	/* The padding values of the parent container are added to the size of scroll container */
-	width: calc(100% - 0.5rem);
+	width: calc(100% + var(--_ui5_timeline_scroll_container_offset));
 }