@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/src/themes/Input.css

@@ -24,7 +24,8 @@
 	background-color: var(--_ui5_input_background_color);
 }
 
-:host(:not([readonly])) {
+:host(:not([readonly])),
+:host([readonly][disabled]) {
 	box-shadow: var(--sapField_Shadow);
 }
 
@@ -50,6 +51,14 @@
 	right: var(--_ui5_input_focus_offset);
 }
 
+:host([focused][readonly]:not([opened])) .ui5-input-focusable-element::after {
+	top: var(--_ui5_input_readonly_focus_offset);
+	bottom: var(--_ui5_input_readonly_focus_offset);
+	left: var(--_ui5_input_readonly_focus_offset);
+	right: var(--_ui5_input_readonly_focus_offset);
+	border-radius: var(--_ui5_input_readonly_focus_border_radius);
+}
+
 .ui5-input-root::before {
 	content: "";
 	position: absolute;
@@ -210,7 +219,7 @@
 	border-radius: var(--_ui5_input_border_radius);
 }
 
-:host([readonly]) {
+:host([readonly]:not([disabled])) {
 	border-color: var(--_ui5_input_readonly_border_color);
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--_ui5_input_readonly_background);
@@ -376,6 +385,8 @@
 ::slotted([ui5-icon][slot="icon"]) {
 	align-self: start;
 	padding: var(--_ui5_input_custom_icon_padding);
+	/* Normalize like libraries overrule the selector, thefore we need !important */
+	box-sizing: content-box !important;
 }
 
 :host([value-state="Error"]) [input-icon],
@@ -383,20 +394,39 @@
 	padding: var(--_ui5_input_error_warning_icon_padding);
 }
 
+:host([value-state="Error"][focused]) [input-icon],
+:host([value-state="Warning"][focused]) [input-icon]{
+	padding: var(--_ui5_input_error_warning_focused_icon_padding);
+}
+
 :host([value-state="Information"]) [input-icon] {
 	padding: var(--_ui5_input_information_icon_padding);
 }
 
+:host([value-state="Information"][focused]) [input-icon] {
+	padding: var(--_ui5_input_information_focused_icon_padding);
+}
+
 :host([value-state="Error"]) ::slotted([input-icon][ui5-icon]),
 :host([value-state="Error"]) ::slotted([ui5-icon][slot="icon"]),
 :host([value-state="Warning"]) ::slotted([ui5-icon][slot="icon"]) {
 	padding: var(--_ui5_input_error_warning_custom_icon_padding);
 }
 
+:host([value-state="Error"][focused]) ::slotted([input-icon][ui5-icon]),
+:host([value-state="Error"][focused]) ::slotted([ui5-icon][slot="icon"]),
+:host([value-state="Warning"][focused]) ::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_error_warning_custom_focused_icon_padding);
+}
+
 :host([value-state="Information"]) ::slotted([ui5-icon][slot="icon"]) {
 	padding: var(--_ui5_input_information_custom_icon_padding);
 }
 
+:host([value-state="Information"][focused]) ::slotted([ui5-icon][slot="icon"]) {
+	padding: var(--_ui5_input_information_custom_focused_icon_padding);
+}
+
 :host([value-state="Error"]) [input-icon]:active,
 :host([value-state="Error"]) [input-icon][pressed] {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);

package/src/themes/InputSharedStyles.css

@@ -0,0 +1,99 @@
+/*
+	This CSS file enables visual alignment of all input elements:
+	- value states
+	- readonly and disabled states
+*/
+
+:host([readonly]:not([disabled])) {
+	border-color: var(--_ui5_input_readonly_border_color);
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--_ui5_input_readonly_background);
+}
+
+:host([disabled]) {
+	opacity: var(--_ui5_input_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
+	background-color: var(--_ui5-input_disabled_background);
+	border-color: var(--_ui5_input_disabled_border_color);
+}
+
+:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_error_icon_box_shadow);
+}
+
+:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
+}
+
+:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_information_icon_box_shadow);
+}
+
+
+:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover {
+	box-shadow: var(--_ui5_input_success_icon_box_shadow);
+}
+
+:host([value-state="Error"]:not([readonly]):not([disabled])) {
+	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="Warning"]:not([readonly]):not([disabled])) {
+	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="Success"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_SuccessBackgroundStyle);
+	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="Information"]:not([readonly]):not([disabled])) {
+	background: var(--sapField_InformationBackgroundStyle);
+	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="Error"]) [input-icon]:active,
+:host([value-state="Error"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_error_icon_box_shadow);
+	color: var(--_ui5_input_icon_error_pressed_color);
+}
+
+:host([value-state="Warning"]) [input-icon]:active,
+:host([value-state="Warning"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
+	color: var(--_ui5_input_icon_warning_pressed_color);
+}
+
+:host([value-state="Information"]) [input-icon]:active,
+:host([value-state="Information"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_information_icon_box_shadow);
+	color: var(--_ui5_input_icon_information_pressed_color);
+}
+
+:host([value-state="Success"]) [input-icon]:active,
+:host([value-state="Success"]) [input-icon][pressed] {
+	box-shadow: var(--_ui5_input_success_icon_box_shadow);
+	color: var(--_ui5_input_icon_success_pressed_color);
+}
+
+:host([value-state="Error"]) [input-icon],
+:host([value-state="Warning"]) [input-icon]{
+	padding: var(--_ui5_input_error_warning_icon_padding);
+}
+
+:host([value-state="Information"]) [input-icon] {
+	padding: var(--_ui5_input_information_icon_padding);
+}

package/src/themes/Label.css

@@ -21,46 +21,21 @@
 }
 
 :host(:not([wrapping-type="Normal"])) .ui5-label-root {
-	display: inline-block;
+	display: inline-flex;
 	white-space: nowrap;
 }
 
-bdi {
-	content: "";
-	padding-right: 0.075rem; /*1.2px - fix for last letter clipping issue when style is italic*/
-}
-
 :host(:not([wrapping-type="Normal"])) .ui5-label-text-wrapper {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	display: inline-block;
 	vertical-align: top;
-	max-width: 100%;
-}
-
-:host(:not([wrapping-type="Normal"])[required][show-colon]) .ui5-label-text-wrapper,
-:host(:not([wrapping-type="Normal"])[required][show-colon]) .ui5-label-text-wrapper.ui5-label-text-wrapper-safari {
-	max-width: calc(100% - .8rem);
-}
-
-:host(:not([wrapping-type="Normal"])[required]) .ui5-label-text-wrapper {
-	max-width: calc(100% - .475rem);
-}
-
-:host(:not([wrapping-type="Normal"])[required]) .ui5-label-text-wrapper.ui5-label-text-wrapper-safari {
-	max-width: calc(100% - .425rem);
-}
-
-:host(:not([wrapping-type="Normal"])[show-colon]) .ui5-label-text-wrapper {
-	max-width: calc(100% - 0.125rem);
-}
-
-:host([show-colon]) .ui5-label-required-colon {
-	margin-inline-start: -0.05rem; /*0.8px - fix for last letter clipping issue when style is italic*/
+	flex: 0 1 auto;
+	min-width: 0;
 }
 
 :host([show-colon]) .ui5-label-required-colon:before {
-	content: ":";
+	content: attr(data-colon);
 }
 
 :host([required]) .ui5-label-required-colon:after {
@@ -77,3 +52,12 @@ bdi {
 :host([required][show-colon]) .ui5-label-required-colon:after {
 	margin-inline-start: .125rem;
 }
+
+bdi {
+	padding-right: 0.075rem; /*1.2px - fix for last letter clipping issue when style is italic*/
+}
+
+:host([show-colon]) .ui5-label-required-colon {
+	margin-inline-start: -0.05rem; /*0.8px - fix for last letter clipping issue when style is italic*/
+	white-space: pre;
+}

package/src/themes/Link.css

@@ -17,6 +17,16 @@
 	overflow-wrap: normal;
 }
 
+:host(:hover) {
+	color: var(--sapLink_Hover_Color);
+	text-decoration: var(--_ui5_link_hover_text_decoration);
+}
+
+:host(:active) {
+	color: var(--sapLink_Active_Color);
+	text-decoration: var(--_ui5_link_active_text_decoration);
+}
+
 :host([disabled]) {
 	pointer-events: none;
 }
@@ -33,13 +43,14 @@
 	font-family: var(--sapFontBoldFamily);
 }
 
-:host([design="Subtle"]) .ui5-link-root {
+:host([design="Subtle"]) {
 	color: var(--sapLink_SubtleColor);
 	text-decoration: var(--_ui5_link_subtle_text_decoration);
 }
 
-:host([design="Subtle"]) .ui5-link-root:focus {
-	color: var(--sapLinkColor);
+:host([design="Subtle"]:hover:not(:active)) {
+	color: var(--sapLink_SubtleColor);
+	text-decoration: var(--_ui5_link_subtle_text_decoration_hover);
 }
 
 :host([wrapping-type="Normal"]) {
@@ -48,7 +59,7 @@
 }
 
 .ui5-link-root {
-	width: 100%;
+	max-width: 100%;
 	display: inline-block;
 	position: relative;
 	overflow: hidden;
@@ -60,11 +71,6 @@
 	color: inherit;
 }
 
-:host(:active) .ui5-link-root {
-	color: var(--sapLink_Active_Color);
-	text-decoration: var(--_ui5_link_active_text_decoration);
-}
-
 :host .ui5-link-root {
 	border: var(--_ui5_link_border);
 	border-radius: var(--_ui5_link_focus_border-radius);
@@ -73,27 +79,18 @@
 :host([focused]) .ui5-link-root,
 :host([design="Subtle"][focused]) .ui5-link-root {
 	background-color: var(--_ui5_link_focus_background_color);
-	color:  var(--_ui5_link_focus_color);
 	border: var(--_ui5_link_border_focus);
 	border-radius: var(--_ui5_link_focus_border-radius);
-	text-decoration: var(--_ui5_link_focus_text_decoration);
 	text-shadow: none;
 }
 
-:host(:hover) {
-	color: var(--sapLink_Hover_Color);
-	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);
+:host([focused]),
+:host([design="Subtle"][focused]) {
+	color:  var(--_ui5_link_focus_color);
+	text-decoration: var(--_ui5_link_focus_text_decoration);
 }
 
-:host([focused]:hover) .ui5-link-root {
+:host([focused]:hover:not(:active)) {
 	color: var(--_ui5_link_focused_hover_text_color);
+	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

package/src/themes/List.css

@@ -114,4 +114,9 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+}
+
+.ui5-list-end-marker {
+	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
+	display: inline-block;
 }

package/src/themes/ListItem.css

@@ -115,7 +115,7 @@
 }
 
 .ui5-li-title {
-	color: var(--sapTextColor);
+	color: var(--sapList_TextColor);
 	font-size: var(--_ui5_list_item_title_size);
 }
 
@@ -143,10 +143,9 @@
 .ui5-li-additional-text {
 	margin: 0 0.25rem;
 	color: var(--sapNeutralTextColor);
-	font-size: 0.875rem;
+	font-size: var(--sapFontSize);
 	min-width: 3.75rem;
 	text-align: end;
-	max-width: 40%;
 }
 
 :host([description]) .ui5-li-additional-text {

package/src/themes/ListItemBase.css

@@ -37,7 +37,7 @@
 	align-items: center;
 	width: 100%;
 	height: 100%;
-	padding: 0 1rem 0 1rem;
+	padding: 0 1rem;
 	box-sizing: border-box;
 }
 
@@ -50,10 +50,8 @@
 	content: "";
 	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	position: absolute;
-	top: 0.125rem;
-	right: 0.125rem;
-	bottom: 0.125rem;
-	left: 0.125rem;
+	border-radius: 0;
+	inset: 0.125rem;
 	pointer-events: none;
 }
 
@@ -73,8 +71,8 @@
 }
 
 :host([disabled]) {
-    opacity: var(--_ui5-listitembase_disabled_opacity);
-    pointer-events: none;
+	opacity: var(--_ui5-listitembase_disabled_opacity);
+	pointer-events: none;
 }
 
 .ui5-li-content {

package/src/themes/Menu.css

@@ -43,6 +43,14 @@
 	pointer-events: none;
 }
 
+.ui5-menu-item-submenu-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	pointer-events: none;
+}
+
 .ui5-menu-busy-indicator {
 	width: 100%;
 }
@@ -118,4 +126,15 @@
 	margin-inline-start: var(--_ui5_menu_item_additional_text_start_margin);
 	color: var(--sapContent_LabelColor);
 	min-width: max-content;
+}
+
+.ui5-menu-item-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+.ui5-menu-item-text:has(.ui5-menu-item-submenu-icon) {
+	padding-inline-end: 1rem;
 }

package/src/themes/MessageStrip.css

@@ -83,10 +83,8 @@
 
 /** Close button - always in compact mode **/
 .ui5-message-strip-close-button {
-	width: 2rem;
-	min-width: 2rem;
-	height: 1.65rem;
-	min-height: 1.65rem;
+	height: 1.625rem;
+	min-height: 1.625rem;
 	position: absolute;
 	top: var(--_ui5_message_strip_close_button_top);
 	inset-inline-end: var(--_ui5_message_strip_close_button_right);

package/src/themes/MultiComboBoxPopover.css

@@ -1,3 +1,34 @@
 .ui5-suggestions-popover .ui5-multi-combobox-all-items-list {
 	--_ui5_checkbox_width_height: var(--_ui5_list_item_dropdown_base_height);
+}
+
+.ui5-mcb-select-all-header {
+	width: 100%;
+	height: 44px;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	display: flex;
+	align-items: center;
+	font-family: "72override", var(--sapFontFamily);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--sapToolbar_Background);
+}
+
+.ui5-mcb-select-all-checkbox {
+	width: 100%;
+	font-family: var(--sapFontBoldFamily);
+}
+
+.ui5-mcb-select-all-checkbox::part(root):focus::before {
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: 0;
+	right: 2px;
+	left: 2px;
+	bottom: 0;
+	top: 0;
+}
+
+.ui5-mcb-select-all-checkbox::part(label) {
+	font-family: var(--sapFontBoldFamily);
 }

package/src/themes/NavigationMenu.css

@@ -0,0 +1,69 @@
+@import "./InvisibleTextStyles.css";
+
+.ui5-navigation-menu .ui5-navigation-menu-main {
+	padding: var(--_ui5_side_navigation_parent_popup_padding);
+}
+
+.ui5-navigation-menu .ui5-menu-item.ui5-navigation-menu-item::part(native-li) {
+    padding-left: 0.5rem;
+	width: auto;
+}
+.ui5-navigation-menu .ui5-menu-item.ui5-navigation-menu-item::part(native-li)::after {
+    border-radius: 0.375rem;
+    inset: 0;
+ }
+
+.ui5-navigation-menu .ui5-navigation-menu-item { 
+    display: flex;
+	align-items: center;
+	width: 100%;
+	box-sizing: border-box;
+	position: relative;
+	height: var(--_ui5_side_navigation_item_height);
+	min-height: var(--_ui5_side_navigation_item_height);
+	border-radius: 0.375rem;
+	transition: var(--_ui5_side_navigation_item_transition);
+	color: var(--sapList_TextColor);
+    font-weight: bold;
+    font-size: var(--sapFontSize);
+    border-bottom: none;
+}
+
+.ui5-navigation-menu .ui5-navigation-menu-item a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: var(--sapList_TextColor);
+}
+
+.ui5-navigation-menu[sub-menu] .ui5-navigation-menu-item {
+    font-weight: normal;
+}
+
+.ui5-menu-rp.ui5-navigation-menu {
+    box-shadow: var(--_ui5_side_navigation_popup_box_shadow);
+    width: auto;
+    min-width: 10rem;
+    height: auto;
+    background: var(--sapGroup_ContentBackground);
+    border: none;
+    border-radius: 0.75rem;
+}
+
+.ui5-navigation-menu .ui5-navigation-menu-item .ui5-menu-item-icon-end {
+    position: relative;
+    inset-inline-end: auto;
+    width: 0.75rem;
+    height: 0.75rem;
+    color: var(--sapList_TextColor);
+}
+
+.ui5-navigation-menu .ui5-navigation-menu-item::part(icon){
+    color: var(--sapList_TextColor);
+    min-width: 1rem;
+    min-height: 1rem;
+}
+
+.ui5-navigation-menu .ui5-menu-item[focused]:not([active]){
+    background: none;
+}

package/src/themes/Panel.css

@@ -28,6 +28,10 @@
 	outline: none;
 	box-sizing: border-box;
 	padding-right: var(--_ui5_panel_header_padding_right);
+	font-family: "72override", var(--sapFontHeaderFamily);
+	font-size: var(--sapGroup_Title_FontSize);
+	font-weight: normal;
+	color: var(--sapGroup_TitleTextColor);
 }
 
 .ui5-panel-header-icon {
@@ -68,16 +72,19 @@
 	width: 100%;
 }
 
+.ui5-panel-heading-wrapper.ui5-panel-heading-wrapper-sticky {
+    position: sticky;
+    top: 0;
+	background-color: var(--_ui5_panel_header_background_color);
+	z-index: 100; /* The z-index of the table header is 99 therefore to have table in the panel and panel header to be on top we need 100 */
+	border-radius: var(--_ui5_panel_border_radius);
+}
+
 .ui5-panel-header-title {
 	width: calc(100% - var(--_ui5_panel_button_root_width));
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	font-family: "72override", var(--sapFontHeaderFamily);
-	font-size: var(--sapGroup_Title_FontSize);
-	font-weight: normal;
-	color: var(--sapGroup_TitleTextColor);
-	font-weight: normal;
 }
 
 .ui5-panel-content {
@@ -86,6 +93,7 @@
 	outline: none;
 	border-bottom-left-radius: var(--_ui5_panel_border_radius);
 	border-bottom-right-radius: var(--_ui5_panel_border_radius);
+	overflow: auto;
 }
 
 .ui5-panel-header-button-root {
@@ -94,7 +102,7 @@
 	align-items: center;
 	flex-shrink: 0;
 	width: var(--_ui5_panel_button_root_width);
-	height: var(--_ui5_panel_button_root_width);
+	height: var(--_ui5_panel_button_root_height);
 	padding: var(--_ui5_panel_header_button_wrapper_padding);
 	box-sizing: border-box;
 }
@@ -136,4 +144,10 @@
 .ui5-panel-header-icon-wrapper,
 [ui5-button].ui5-panel-header-button-with-icon [ui5-icon] {
 	pointer-events: none;
+}
+
+.ui5-panel-root {
+	height: 100%;
+    display: flex;
+    flex-direction: column;
 }

package/src/themes/Popover.css

@@ -1,26 +1,13 @@
-.ui5-popover-arrow {
-	pointer-events: none;
-	display: block;
-	width: 1rem;
-	height: 1rem;
-	position: absolute;
-	overflow: hidden;
-}
-
-.ui5-popover-arrow:after {
-	content: "";
-	display: block;
-	width: 0.7rem;
-	height: 0.7rem;
-	background-color: var(--sapGroup_ContentBackground);
-	box-shadow: var(--sapContent_Shadow3);
-	transform: rotate(-45deg);
-}
-
 :host {
+	box-shadow: var(--_ui5_popover_box_shadow);
+	background-color: var(--_ui5_popover_background);
 	max-width: calc(100vw - (100vw - 100%) - 2 * var(--_ui5_popup_viewport_margin));
 }
 
+:host([hide-arrow]) {
+	box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
+}
+
 :host([opened][actual-placement-type="Top"]) {
 	margin-top: var(--_ui5-popover-margin-bottom);
 }
@@ -34,8 +21,8 @@
 	left: calc(50% - 0.5625rem);
 	top: -0.5rem;
 	height: 0.5625rem;
-
 }
+
 :host([actual-placement-type="Bottom"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_upward_arrow_margin);
 }
@@ -83,3 +70,22 @@
 .ui5-popover-root {
 	min-width: 6.25rem;
 }
+
+.ui5-popover-arrow {
+	pointer-events: none;
+	display: block;
+	width: 1rem;
+	height: 1rem;
+	position: absolute;
+	overflow: hidden;
+}
+
+.ui5-popover-arrow:after {
+	content: "";
+	display: block;
+	width: 0.7rem;
+	height: 0.7rem;
+	background-color: var(--_ui5_popover_background);
+	box-shadow: var(--_ui5_popover_box_shadow);
+	transform: rotate(-45deg);
+}

package/src/themes/PopupStaticAreaStyles.css

@@ -1,8 +1,7 @@
 .ui5-block-layer {
 	display: none;
 	position: fixed;
-	background-color: var(--sapBlockLayer_Background);
-	opacity: 0.6;
+	background-color: var(--_ui5_popup_block_layer_background);
 	top: -500px;
 	left: -500px;
 	right: -500px;