@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/src/themes/MenuListItem.css

@@ -0,0 +1,100 @@
+:host([disabled]) {
+	pointer-events: initial;
+	opacity: initial;
+}
+
+:host([disabled])::part(content) {
+	opacity: var(--_ui5-listitembase_disabled_opacity);
+}
+
+/* hovered and active */
+:host([disabled][actionable]:not([active]):not([selected]):hover),
+:host([disabled][active][actionable]) {
+	background: var(--ui5-listitem-background-color);
+}
+
+/* active */
+:host([disabled][active][actionable]) .ui5-li-root .ui5-li-icon {
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
+:host([active][actionable]:not([disabled]))::part(content),
+:host([active][actionable]:not([disabled]))::part(additional-text)  {
+	color: var(--sapList_Active_TextColor);
+}
+
+:host([focused]:not([active]):not([disabled])) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+:host(:not([is-phone]))::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+:host::part(additional-text) {
+	margin: unset;
+	margin-inline-start: 1rem;
+	color: var(--sapContent_LabelColor);
+	min-width: max-content;
+}
+
+.ui5-menu-item-text {
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+	display: inline-block;
+}
+
+.ui5-menu-item-dummy-icon {
+	visibility: hidden;
+}
+
+:host::part(title) {
+	font-size: var(--sapFontSize);
+	padding-top: 0.125rem;
+}
+
+:host([icon]:not([is-phone]))::part(title),
+:host([is-phone]:not([icon=""]))::part(title) {
+	padding-top: 0;
+}
+
+:host(:not([is-phone]))::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+:host([starts-section]) {
+	border-top: 1px solid var(--sapGroup_ContentBorderColor);
+}
+
+:host::part(content) {
+	padding-inline-end: 0.5rem;
+}
+
+.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-item-icon-end {
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-start: 0.5rem;
+	pointer-events: none;
+	position: absolute;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
+}
+
+.ui5-menu-item-dummy-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-end: 0.5rem;
+	pointer-events: none;
+}

package/src/themes/MessageStrip.css

@@ -55,12 +55,12 @@
 	color: var(--sapNegativeElementColor);
 }
 
-.ui5-message-strip-root--warning {
+.ui5-message-strip-root--critical {
 	background-color: var(--sapWarningBackground);
 	border-color: var(--sapMessage_WarningBorderColor);
 }
 
-.ui5-message-strip-root--warning .ui5-message-strip-icon {
+.ui5-message-strip-root--critical .ui5-message-strip-icon {
 	color: var(--sapCriticalElementColor);
 }
 
@@ -88,4 +88,157 @@
 	position: absolute;
 	top: var(--_ui5_message_strip_close_button_top);
 	inset-inline-end: var(--_ui5_message_strip_close_button_right);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-1,
+:host(:not([color-scheme])[design="ColorSet1"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_1_Background);
+	border-color: var(--sapIndicationColor_1_BorderColor);
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_2_Background);
+	border-color: var(--sapIndicationColor_2_BorderColor);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_3_Background);
+	border-color: var(--sapIndicationColor_3_BorderColor);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_4_Background);
+	border-color: var(--sapIndicationColor_4_BorderColor);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_5_Background);
+	border-color: var(--sapIndicationColor_5_BorderColor);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_6_Background);
+	border-color: var(--sapIndicationColor_6_BorderColor);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_7_Background);
+	border-color: var(--sapIndicationColor_7_BorderColor);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_8_Background);
+	border-color: var(--sapIndicationColor_8_BorderColor);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_9_Background);
+	border-color: var(--sapIndicationColor_9_BorderColor);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_10_Background);
+	border-color: var(--sapIndicationColor_10_BorderColor);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-2,
+:host(:not([color-scheme])[design="ColorSet2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_1_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_1_set_2_border_color)
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_2_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_2_set_2_border_color);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_3_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_3_set_2_border_color);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_4_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_4_set_2_border_color);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_5_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_5_set_2_border_color);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_6_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_6_set_2_border_color);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_7_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_7_set_2_border_color);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_8_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_8_set_2_border_color);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_9_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_9_set_2_border_color);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_10_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_10_set_2_border_color);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root ::slotted([slot="icon"]){
+	color: var(--sapContent_ContrastIconColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapTextColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button {
+	color: var(--_ui5_message_strip_close_button_color_set_1_color);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button,
+:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) { 
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:hover {
+	border-color: var(--sapContent_ContrastIconColor);
+	background-color: var(--_ui5_message_strip_close_button_color_set_1_background);
+	color: var(--_ui5_message_strip_close_button_color_set_1_hover_color);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:hover {
+	background-color: var(--_ui5_message_strip_close_button_color_set_2_background);
+	border-color: var(--sapContent_IconColor);
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_ContrastIconColor);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):after,
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):before {
+	border-color: var(--sapContent_ContrastFocusColor);
 }

package/src/themes/MonthPicker.css

@@ -1,3 +1,4 @@
+
 :host(:not([hidden])) {
 	display: block;
 }
@@ -8,6 +9,7 @@
 }
 
 .ui5-mp-root {
+	box-sizing: border-box;
 	padding: 2rem 0 1rem 0;
 	display: flex;
 	flex-direction: column;
@@ -86,3 +88,24 @@
 	align-items: center;
 	width: 100%;
 }
+
+/* Switching to a two column layout */
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-root,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-root {
+	display: grid;
+	padding: 0.5625rem 0;
+	grid-template-columns: repeat(2, 1fr);
+	gap: var(--_ui5_monthpicker_item_margin);
+}
+
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-item,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-item {
+	margin: 0;
+	width: auto;
+}
+
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-quarter,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-quarter {
+	width: 100%;
+	display: contents;
+}

package/src/themes/MultiComboBox.css

@@ -35,6 +35,10 @@
 	color: var(--sapLinkColor);
 }
 
+:host([disabled]) .ui5-multi-combobox-tokenizer {
+	opacity: 100%;
+}
+
 .ui5-multi-combobox-tokenizer::part(n-more-text) {
 	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
 }

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,73 @@
+@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);
+    min-width: 10rem;
+    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;
+}
+
+.ui5-sn-item-external-link-icon {
+	color: var(--_ui5_side_navigation_external_link_icon_color);
+	min-width: 2rem;
+	height: 0.875rem;
+}

package/src/themes/Panel.css

@@ -54,7 +54,7 @@
 	border: var(--_ui5_panel_focus_border);
 	border-radius: var(--_ui5_panel_border_radius);
 	top: var(--_ui5_panel_focus_offset);
-	bottom: var(--_ui5_panel_focus_offset);
+	bottom: var(--_ui5_panel_focus_bottom_offset);
 	left: var(--_ui5_panel_focus_offset);
 	right: var(--_ui5_panel_focus_offset);
 }

package/src/themes/Popover.css

@@ -8,58 +8,58 @@
 	box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
 }
 
-:host([opened][actual-placement-type="Top"]) {
+:host([opened][actual-placement="Top"]) {
 	margin-top: var(--_ui5-popover-margin-bottom);
 }
 
-:host([opened][actual-placement-type="Bottom"]) {
+:host([opened][actual-placement="Bottom"]) {
 	margin-top: var(--_ui5-popover-margin-top);
 }
 
 /* pointing upward arrow */
-:host([actual-placement-type="Bottom"]) .ui5-popover-arrow {
+:host([actual-placement="Bottom"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
 	top: -0.5rem;
 	height: 0.5625rem;
 }
 
-:host([actual-placement-type="Bottom"]) .ui5-popover-arrow:after {
+:host([actual-placement="Bottom"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_upward_arrow_margin);
 }
 
 /* pointing right arrow */
-:host([actual-placement-type="Left"]) .ui5-popover-arrow {
+:host([actual-placement="Start"]) .ui5-popover-arrow {
 	top: calc(50% - 0.5625rem);
 	right: -0.5625rem;
 	width: 0.5625rem;
 }
 
-:host([actual-placement-type="Left"]) .ui5-popover-arrow:after {
+:host([actual-placement="Start"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_right_arrow_margin);
 }
 
 /* pointing downward arrow */
-:host([actual-placement-type="Top"]) .ui5-popover-arrow {
+:host([actual-placement="Top"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
 	height: 0.5625rem;
 	top: 100%;
 }
 
-:host([actual-placement-type="Top"]) .ui5-popover-arrow:after {
+:host([actual-placement="Top"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_downward_arrow_margin);
 }
 
 /* pointing left arrow */
-:host(:not([actual-placement-type])) .ui5-popover-arrow,
-:host([actual-placement-type="Right"]) .ui5-popover-arrow {
+:host(:not([actual-placement])) .ui5-popover-arrow,
+:host([actual-placement="End"]) .ui5-popover-arrow {
 	left: -0.5625rem;
 	top: calc(50% - 0.5625rem);
 	width: 0.5625rem;
 	height: 1rem;
 }
 
-:host(:not([actual-placement-type])) .ui5-popover-arrow:after,
-:host([actual-placement-type="Right"]) .ui5-popover-arrow:after {
+:host(:not([actual-placement])) .ui5-popover-arrow:after,
+:host([actual-placement="End"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_left_arrow_margin);
 }
 
@@ -89,3 +89,11 @@
 	box-shadow: var(--_ui5_popover_box_shadow);
 	transform: rotate(-45deg);
 }
+
+:host([modal])::backdrop {
+	background-color: var(--_ui5_popup_block_layer_background);
+}
+
+:host([modal]) .ui5-block-layer {
+	display: block;
+}

package/src/themes/Popup.css

@@ -1,5 +1,8 @@
 :host {
     min-width: 1px; /** So that it can always get focus **/
-    display: none;
-    position: fixed;
+    overflow: visible;
+    border: none;
+    inset: "unset";
+    margin: 0;
+    padding: 0;
 }

package/src/themes/PopupBlockLayer.css

@@ -0,0 +1,8 @@
+.ui5-block-layer {
+	position: fixed;
+	z-index: -1;
+	display: none;
+	inset: -500px;
+	outline: none;
+	pointer-events: all;
+}

package/src/themes/PopupsCommon.css

@@ -1,5 +1,4 @@
 :host {
-    display: none;
     position: fixed;
     background: var(--sapGroup_ContentBackground);
     border-radius: var(--_ui5_popup_border_radius);
@@ -7,15 +6,19 @@
     box-sizing: border-box;
 }
 
+:host([open]) {
+	display: flex;
+}
+
 .ui5-popup-root {
     background: inherit;
     border-radius: inherit;
     width: 100%;
-    height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    flex: 1 1 auto;
     outline: none;
 }
 
@@ -27,6 +30,7 @@
 
 .ui5-popup-content {
     color: var(--sapTextColor);
+    flex: auto;
 }
 
 .ui5-popup-footer-root {
@@ -77,7 +81,7 @@
     display: none;
 }
 
-:host([disable-scrolling]) .ui5-popup-content {
+:host([no-scrolling]) .ui5-popup-content {
     overflow: hidden;
 }