@ui5/webcomponents 0.0.0-453158269 → 0.0.0-4738ea0dc

package/src/themes/ListItem.css

@@ -27,6 +27,16 @@
 	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
+/* navigated */
+:host([navigated]) .ui5-li-root .ui5-li-navigated {
+	width: 0.1875rem;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: var(--sapList_SelectionBorderColor);
+}
+
 /* active */
 :host([active][actionable]) .ui5-li-root .ui5-li-icon {
 	color: var(--sapList_Active_TextColor);
@@ -65,6 +75,10 @@
 	height: 5rem;
 }
 
+:host([_has-image-content]) {
+	height: 5rem;
+}
+
 :host([image]) .ui5-li-content {
 	height: 3rem;
 }
@@ -106,13 +120,21 @@
 }
 
 .ui5-li-additional-text,
-.ui5-li-title,
+:host(:not([wrapping-type="Normal"])) .ui5-li-title,
 .ui5-li-desc {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
+:host([wrapping-type="Normal"]) {
+	height: auto;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-content {
+	margin: var(--_ui5_list_item_content_vertical_offset) 0;
+}
+
 .ui5-li-desc {
 	color: var(--sapContent_LabelColor);
 	font-size: var(--sapFontSize);
@@ -133,13 +155,17 @@
 
 .ui5-li-img {
 	width: var(--_ui5_list_item_img_size);
-	min-width: var(--_ui5_list_item_img_size);
 	height: var(--_ui5_list_item_img_size);
+	border-radius: var(--ui5-avatar-border-radius);
+}
+
+.ui5-li-img,
+.ui5-li-imgContent {
+	min-width: var(--_ui5_list_item_img_size);
 	min-height: var(--_ui5_list_item_img_size);
 	margin-top: var(--_ui5_list_item_img_top_margin);
 	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
 	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
-	border-radius: 0.25rem;
 }
 
 .ui5-li-img-inner {
@@ -157,10 +183,7 @@
 	display: flex;
 	align-items: center;
 	flex: auto;
-	white-space: nowrap;
 	overflow: hidden;
-	text-overflow: ellipsis;
-	pointer-events: none; /* IE specific */
 }
 
 .ui5-li-detailbtn,
@@ -199,4 +222,4 @@
 
 :host [ui5-checkbox].ui5-li-singlesel-radiobtn {
 	margin-right: var(--_ui5_list_item_cb_margin_right);
-}
+}

package/src/themes/ListItemBase.css

@@ -79,8 +79,6 @@
 
 .ui5-li-content {
 	max-width: 100%;
-	min-height: 1px; /* IE specific: fixes vertical centering with flex  */
 	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapList_TextColor);
-	pointer-events: none;  /* IE specific: fixes focus crrectly applied*/
 }

package/src/themes/Menu.css

@@ -15,7 +15,9 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding-inline-start: 0.5rem;
-	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning as float and inline-block are incompatible */
+	pointer-events: none;
+	position: absolute;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
 }
 
 .ui5-menu-item-no-icon-end {
@@ -24,7 +26,12 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding-inline-start: 0.5rem;
-	float: var(--_ui5-menu_item_icon_float); /* TODO: refactor icon positioning a float and inline-block are incompatible */
+	pointer-events: none;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
+}
+
+.ui5-menu-item[additional-text] .ui5-menu-item-no-icon-end {
+	display: none;
 }
 
 .ui5-menu-item-dummy-icon {
@@ -33,6 +40,7 @@
 	display: inline-block;
 	vertical-align: middle;
 	padding-inline-end: 0.5rem;
+	pointer-events: none;
 }
 
 .ui5-menu-dialog-header {
@@ -66,6 +74,16 @@
 	margin-right: 1rem;
 }
 
+.ui5-menu-item::part(title) {
+    font-size: var(--sapFontSize);
+	padding-top: 0.125rem;
+}
+
+.ui5-menu-item[icon]:not([is-phone])::part(title),
+.ui5-menu-item[is-phone]:not([icon=""])::part(title) {
+	padding-top: 0;
+}
+
 .ui5-menu-item:not([is-phone])::part(native-li) {
 	padding: var(--_ui5_menu_item_padding);
 }
@@ -85,4 +103,10 @@
 .ui5-menu-rp[sub-menu] {
 	margin-top: 0.25rem;
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
+}
+
+.ui5-menu-item::part(additional-text) {
+	margin-inline-start: var(--_ui5_menu_item_additional_text_start_margin);
+	color: var(--sapContent_LabelColor);
+	min-width: max-content;
 }

package/src/themes/MonthPicker.css

@@ -19,6 +19,7 @@
 
 .ui5-mp-item {
 	display: flex;
+	flex-direction: column;
 	width: calc(33.333% - 0.125rem);
 	height: var(--_ui5_month_picker_item_height);
 	color: var(--sapButton_Lite_TextColor);
@@ -29,7 +30,6 @@
 	box-sizing: border-box;
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none;
 	user-select: none;
 	cursor: default;
 	outline: none;
@@ -38,11 +38,17 @@
 	border-radius: var(--_ui5_monthpicker_item_border_radius);
 }
 
+.ui5-dp-monthsectext {
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
 .ui5-mp-item:hover {
 	background-color: var(--sapList_Hover_Background);
 }
 
-.ui5-mp-item.ui5-mp-item--selected {
+.ui5-mp-item.ui5-mp-item--selected,
+.ui5-mp-item.ui5-mp-item--selected .ui5-dp-monthsectext {
 	box-shadow: var(--_ui5_monthpicker_item_selected_box_shadow);
 	font-weight: var(--_ui5_monthpicker_item_selected_font_wieght);
 	background-color: var(--_ui5_monthpicker_item_selected_background_color);
@@ -59,7 +65,7 @@
 }
 
 .ui5-mp-item.ui5-mp-item--selected:focus::after {
-	border-color: var(--sapContent_ContrastFocusColor);
+	border-color: var(--_ui5_monthpicker_item_focus_after_border);
 }
 
 .ui5-mp-item.ui5-mp-item--selected:hover {

package/src/themes/MultiComboBox.css

@@ -2,6 +2,14 @@
 @import "./InputIcon.css";
 @import "./InvisibleTextStyles.css";
 
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
 :host(:not([hidden])) {
 	display: inline-block;
 }
@@ -15,27 +23,30 @@
 }
 
 .ui5-multi-combobox-tokenizer {
-	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
-	min-width: 0px;
 	height: 100%;
 }
 
-/* Workaround for IE */
-[ui5-multi-combobox] {
-	width: 100%;
+:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
 }
 
-[ui5-multi-combobox] [ui5-tokenizer] {
-	flex: 3;
+.ui5-multi-combobox-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
 }
 
-[ui5-icon] {
-	border-top-right-radius: var(--ui5-multi_bombobox_icon_border_top_right_radius);
-    border-bottom-right-radius: var(--ui5-multi_bombobox_icon_border_bottom_right_radius);
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
 }
 
-:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
-	color: var(--sapLinkColor);
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
 }

package/src/themes/MultiInput.css

@@ -1,18 +1,38 @@
 @import "./InputIcon.css";
 
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
 .ui5-multi-input-tokenizer {
-	max-width: calc(100% - 3rem - var(--_ui5_input_icon_min_width));
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
 	border: none;
 	width: auto;
-	min-width: 0px;
 	height: 100%;
 }
 
-/* Workaround for IE */
-[ui5-multi-input] [ui5-tokenizer] {
-	flex: 3;
-}
-
 :host([readonly]) .ui5-multi-input-tokenizer::part(n-more-text) {
 	color: var(--sapLinkColor);
-}
+}
+
+.ui5-multi-input-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
+}

package/src/themes/Panel.css

@@ -21,6 +21,7 @@
 .ui5-panel-header {
 	min-height: var(--_ui5_panel_header_height);
 	width: 100%;
+	position: relative;
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
@@ -37,21 +38,24 @@
 	transition: transform 0.4s ease-out;
 }
 
-:host(:not([_has-header])) .ui5-panel-header-button {
-	pointer-events: none;
-}
-
 :host(:not([_has-header]):not([fixed])) .ui5-panel-header {
 	cursor: pointer;
 }
 
-:host(:not([_has-header]):not([fixed])) .ui5-panel-header:focus {
-	outline: var(--_ui5_panel_focus_border);
-	outline-offset: var(--_ui5_panel_outline_offset);
+:host(:not([_has-header]):not([fixed])) .ui5-panel-header:focus::after {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	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);
+	left: var(--_ui5_panel_focus_offset);
+	right: var(--_ui5_panel_focus_offset);
 }
 
-:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus {
+:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus:after {
 	border-radius: var(--_ui5_panel_border_radius_expanded);
 }
 

package/src/themes/PopupsCommon.css

@@ -20,12 +20,6 @@
     outline: none;
 }
 
-@media screen and (-ms-high-contrast: active) {
-    .ui5-popup-root {
-        border: 1px solid var(--sapPageFooter_BorderColor);
-    }
-}
-
 .ui5-popup-root .ui5-popup-header-root {
     color: var(--sapPageHeader_TextColor);
     box-shadow: var(--sapContent_HeaderShadow);

package/src/themes/RadioButton.css

@@ -42,7 +42,7 @@
 }
 
 /* focused */
-:host(:not([disabled])) .ui5-radio-root:focus:before {
+:host(:not([disabled])) .ui5-radio-root:focus-visible:before {
 	content: "";
 	display: var(--_ui5_radio_button_focus_outline);
 	position: absolute;
@@ -56,11 +56,11 @@
 }
 
 /* horizon readonly focus */
-:host(:not([disabled])[readonly]) .ui5-radio-root:focus:before {
+:host(:not([disabled])[readonly]) .ui5-radio-root:focus-visible:before {
 	border: var(--_ui5_radio_button_border_width) var(--_ui5_radio_button_border_readonly_focus_style) var(--sapContent_FocusColor);
 }
 
-:host(:not([disabled])) .ui5-radio-root:focus {
+:host(:not([disabled])) .ui5-radio-root:focus-visible {
 	border-radius: var(--_ui5_radio_button_border_radius);
 	border: var(--_ui5_radio_button_focus_border);
 }
@@ -84,7 +84,7 @@
 	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
 }
 
-.ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer, 
+.ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer,
 :host([checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
 	fill: var(--_ui5_radio_button_hover_fill);
 }
@@ -100,7 +100,7 @@
 }
 
 /* with label */
-:host([text]) .ui5-radio-root:focus:before {
+:host([text]) .ui5-radio-root:focus-visible:before {
 	inset-inline: var(--_ui5_radio_button_focus_dist) 0;
 }
 
@@ -234,7 +234,7 @@
 	vertical-align: top;
 }
 
-.ui5-radio-inner:focus {
+.ui5-radio-inner {
 	outline: none;
 }
 
@@ -267,7 +267,7 @@
 
 :host([wrapping-type="Normal"][text]) [ui5-label].ui5-radio-label {
 	padding: var(--_ui5_radio_button_label_side_padding) 0;
-	word-break: break-all;
+	overflow-wrap: break-word;
 }
 
 /* SVG */

package/src/themes/ResponsivePopoverCommon.css

@@ -79,11 +79,6 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-[inner-input]:-ms-input-placeholder {
-	font-style: italic;
-	color: var(--sapField_PlaceholderTextColor);
-}
-
 .input-root-phone[value-state]:not([value-state="None"]) {
 	border-width: var(--_ui5_input_state_border_width);
 }
@@ -161,12 +156,6 @@
 	border-color: var(--_ui5_input_focused_value_state_information_border_color);
 }
 
-/* Remove IE's defaut clear button */
-[inner-input]::-ms-clear {
-	height: 0;
-	width: 0;
-}
-
 /* MultiComboBox & MultiInput specific */
 .ui5-multi-combobox-toggle-button {
 	margin-left: 0.5rem;

package/src/themes/Select.css

@@ -2,6 +2,7 @@
 @import "./Input.css";
 
 .ui5-select-root {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -22,7 +23,7 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: var(--_ui5_select_label_olor);
+	color: var(--_ui5_select_label_color);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;

package/src/themes/SelectPopover.css

@@ -6,3 +6,7 @@
 .ui5-select-popover [ui5-li] {
 	height: var(--_ui5_list_item_dropdown_base_height);
 }
+
+.ui5-select-popover [ui5-li]::part(icon) {
+	color: var(--sapList_TextColor);
+}

package/src/themes/SliderBase.css

@@ -11,7 +11,6 @@
 	cursor: pointer;
 	vertical-align: top;
 	width: 100%;
-	height: 3.3125rem;
 }
 
 :host(:not([hidden])) {
@@ -21,10 +20,9 @@
 .ui5-slider-root {
 	box-sizing: border-box;
 	height: 3.3125rem;
-	padding: 1rem 0;
 	outline: none;
+	padding: var(--_ui5_slider_padding);
 	touch-action: none;
-	-ms-touch-action: pan-y;
 }
 
 .ui5-slider-inner {
@@ -147,7 +145,7 @@
 	outline: var(--_ui5_slider_handle_active_focused_outline);
 }
 
-.ui5-slider-handle.ui5-slider-handle--start:focus, 
+.ui5-slider-handle.ui5-slider-handle--start:focus,
 .ui5-slider-handle--end:focus {
 	border: var(--_ui5_slider_handle_focus_border);
 }
@@ -245,4 +243,4 @@
 	position: absolute;
 	border-radius: var(--_ui5_slider_handle_border_radius);
 	pointer-events: none;
-}
+}

package/src/themes/StepInput.css

@@ -4,6 +4,9 @@
 :host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
+	line-height: normal;
+	letter-spacing: normal;
+	word-spacing: normal;
 }
 
 :host {
@@ -83,7 +86,7 @@
 :host([value-state="Information"]:not([readonly]):not([disabled])[focused]),
 :host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){
 	background-color: var(--sapField_Focus_Background);
-} 
+}
 
 :host([value-state="Success"]:not([readonly]):not([disabled]))::after,
 :host([value-state="Error"]:not([readonly]):not([disabled]))::after,
@@ -147,12 +150,16 @@
 	vertical-align: top;
 	margin-top: var(--_ui5_step_input_input_margin_top);
 	min-width: var(--_ui5_step_input_min_width);
+	padding-inline-start: var(--_ui5_step_input_padding);
+	padding-inline-end: var(--_ui5_step_input_padding);
 	position: relative;
-	padding: 0px 2.5rem 0px 2.4375rem;
 	outline: none;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
 }
 
-:host .ui5-step-input-input[readonly] { 
+:host .ui5-step-input-input[readonly] {
 	padding: 0;
 }
 
@@ -163,6 +170,9 @@
 
 :host .ui5-step-input-root {
 	white-space: nowrap;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
 }
 
 :host .ui5-step-input-input[text-align=left] {

package/src/themes/Suggestions.css

@@ -15,3 +15,8 @@
 .ui5-suggestions-popover [ui5-li-suggestion-item] {
 	height: var(--_ui5_list_item_dropdown_base_height);
 }
+
+.ui5-suggestions-popover [ui5-li]::part(icon),
+.ui5-suggestions-popover [ui5-li-suggestion-item]::part(icon) {
+	color: var(--sapList_TextColor);
+}

package/src/themes/Switch.css

@@ -110,7 +110,6 @@
 	white-space: nowrap;
 	user-select: none;
 	-webkit-user-select: none;
-	-ms-user-select: none;
 }
 
 .ui5-switch-handle,
@@ -262,7 +261,7 @@
 .ui5-switch-root.ui5-switch--no-label .ui5-switch-text {
 	display: flex;
 	justify-content: center;
-	
+
 }
 
 .ui5-switch--no-label .ui5-switch-no-label-icon-on,
@@ -276,7 +275,7 @@
 .ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off {
 	width: var(--_ui5_switch_icon_width);
 	height: var(--_ui5_switch_icon_height)
-} 
+}
 
 .ui5-switch-root .ui5-switch-text {
 	font-family: var(--_ui5_switch_text_font_family);
@@ -295,7 +294,7 @@
 
 :host([active]) .ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled) .ui5-switch-track {
 	background: var( --_ui5-switch_track-off-active-background);
-} 
+}
 
 /* active & on */
 

package/src/themes/TabContainer.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 /* ============================= */
 /* Global Base parameters        */
 /* ============================= */
@@ -20,8 +22,8 @@
 	padding: 0 1rem;
 	display: flex;
 	align-items: center;
+	background-color: var(--_ui5_tc_header_background);
 	height: var(--_ui5_tc_header_height);
-	background-color: var(--sapObjectHeader_Background);
 	box-shadow: var(--_ui5_tc_header_box_shadow);
 	box-sizing: border-box;
 }
@@ -30,6 +32,14 @@
 	border-top: var(--_ui5_tc_header_border_bottom);
 }
 
+:host([header-background-design="Transparent"]) .ui5-tc__header {
+	background-color: transparent;
+}
+
+:host([header-background-design="Translucent"]) .ui5-tc__header {
+	background-color: var(--_ui5_tc_header_background_translucent);
+}
+
 .ui5-tc-root.ui5-tc--textOnly .ui5-tc__header {
 	height: var(--_ui5_tc_header_height_text_only);
 }
@@ -82,7 +92,7 @@
 	display: flex;
 	height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */
 	padding: 1rem 2rem;
-	background-color: var(--sapGroup_ContentBackground);
+	background-color: var(--_ui5_tc_content_background);
 	border-bottom: var(--_ui5_tc_content_border_bottom);
 	box-sizing: border-box;
 }
@@ -91,6 +101,14 @@
 	border-top: var(--_ui5_tc_content_border_bottom);
 }
 
+:host([content-background-design="Transparent"]) .ui5-tc__content {
+	background-color: transparent;
+}
+
+:host([content-background-design="Translucent"]) .ui5-tc__content {
+	background-color: var(--_ui5_tc_content_background_translucent);
+}
+
 .ui5-tc__content--collapsed {
 	display: none;
 }
@@ -126,4 +144,4 @@
 
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
-}
+}

package/src/themes/TabInOverflow.css

@@ -1,4 +1,5 @@
 @import "./TabSemanticIcon.css";
+@import "./InvisibleTextStyles.css";
 
 .ui5-tab-overflow-item {
 	color: var(--_ui5_tc_overflowItem_default_color);