@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/themes/Input.css

@@ -21,11 +21,14 @@
 	word-spacing: normal;
 	text-align: start;
 	transition: var(--_ui5_input_transition);
+}
+
+:host(:not([disabled])) {
 	background: var(--sapField_BackgroundStyle);
 	background-color: var(--_ui5_input_background_color);
 }
 
-:host([focused]) {
+:host([focused]:not([opened])) {
 	border-color: var(--_ui5_input_focused_border_color);
 	background-color: var(--sapField_Focus_Background);
 }
@@ -34,7 +37,7 @@
 	position: relative;
 }
 
-:host([focused]) .ui5-input-focusable-element::after {
+:host([focused]:not([opened])) .ui5-input-focusable-element::after {
 	content: var(--ui5_input_focus_pseudo_element_content);
 	position: absolute;
 	pointer-events: none;
@@ -221,12 +224,12 @@
 	background: var(--sapField_Hover_BackgroundStyle);
 	background-color: var(--sapField_Hover_Background);
 }
-:host(:not([value-state]):not([readonly])[focused]:hover),
-:host([value-state="None"]:not([readonly])[focused]:hover) {
+:host(:not([value-state]):not([readonly])[focused]:not([opened]):hover),
+:host([value-state="None"]:not([readonly])[focused]:not([opened]):hover) {
 	box-shadow: none;
 }
 
-:host([focused]) .ui5-input-root::before {
+:host([focused]):not([opened]) .ui5-input-root::before {
 	content: none;
 }
 
@@ -254,12 +257,12 @@
 	border-color: var(--_ui5_input_value_state_error_border_color);
 }
 
-:host([value-state="Error"][focused]:not([readonly])) {
+:host([value-state="Error"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_error_background);
 	border-color: var(--_ui5_input_focused_value_state_error_border_color);
 }
 
-:host([value-state="Error"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Error"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
 	border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
 }
 
@@ -267,7 +270,8 @@
 	background-color: var(--_ui5-input-value-state-error-border-botom-color);
 }
 
-:host([value-state="Error"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Error"]:not([readonly]):not([focused]):hover),
+:host([value-state="Error"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--_ui5_input_value_state_error_hover_background);
 	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
 }
@@ -284,12 +288,12 @@
 	border-color: var(--_ui5_input_value_state_warning_border_color);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) {
+:host([value-state="Warning"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_warning_background);
 	border-color: var(--_ui5_input_focused_value_state_warning_border_color);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Warning"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
 	border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
 }
 
@@ -297,7 +301,8 @@
 	background-color: var(--_ui5_input_value_state_warning_border_botom_color);
 }
 
-:host([value-state="Warning"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Warning"]:not([readonly]):not([focused]):hover),
+:host([value-state="Warning"]:not([readonly])[focused][opened]:hover)  {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
 }
@@ -309,12 +314,12 @@
 	border-width: var(--_ui5_input_value_state_success_border_width);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) {
+:host([value-state="Success"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_success_background);
 	border-color: var(--_ui5_input_focused_value_state_success_border_color);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Success"][focused]:not([opened]):not([readonly])) .ui5-input-focusable-element:after {
 	border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
 }
 
@@ -322,7 +327,8 @@
 	background-color: var(--_ui5_input_value_state_success_border_botom_color);
 }
 
-:host([value-state="Success"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Success"]:not([readonly]):not([focused]):hover),
+:host([value-state="Success"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
 }
@@ -334,7 +340,7 @@
 	border-width: var(--_ui5_input_information_border_width);
 }
 
-:host([value-state="Information"][focused]:not([readonly])) {
+:host([value-state="Information"][focused]:not([opened]):not([readonly])) {
 	background-color: var(--_ui5_input_focused_value_state_information_background);
 	border-color: var(--_ui5_input_focused_value_state_information_border_color);
 }
@@ -343,7 +349,8 @@
 	background-color: var(--_ui5_input_value_success_information_border_botom_color);
 }
 
-:host([value-state="Information"]:not([readonly]):not([focused]):hover) {
+:host([value-state="Information"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
 }
@@ -426,12 +433,33 @@
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 
+.ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_height);
+	padding: 0;
+	width: var(--_ui5_input_icon_width);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+:host([value-state]:not([value-state="None"]):not([value-state="Success"])) .ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_state_height);
+	vertical-align: top;
+}
 
+:host([value-state="Success"]) .ui5-input-clear-icon-wrapper {
+	height: var(--_ui5_input_icon_wrapper_success_state_height);
+}
 
+[ui5-icon].ui5-input-clear-icon {
+	padding: 0;
+	color: inherit;
+}
 
 /* Chrome, Safari, Edge, Opera */
 [inner-input]::-webkit-outer-spin-button,
 [inner-input]::-webkit-inner-spin-button {
-  -webkit-appearance: inherit;
-  margin: inherit;
+	-webkit-appearance: inherit;
+	margin: inherit;
 }

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;
 }
@@ -141,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 {

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

@@ -65,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/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;
@@ -41,13 +42,20 @@
 	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/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;
 }
 

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 {
@@ -150,6 +153,9 @@
 	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] { 
@@ -163,6 +169,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/TabContainer.css

@@ -20,8 +20,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 +30,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 +90,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 +99,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 +142,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);

package/src/themes/TabInStrip.css

@@ -28,7 +28,8 @@
 .ui5-tc__separator[hidden],
 .ui5-tab-strip-item[hidden],
 .ui5-tab-strip-item--textOnly[hidden],
-.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden] {
+.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden],
+.ui5-tab-strip-design-description {
 	display: none;
 }
 
@@ -132,11 +133,11 @@
 }
 
 /* the outline offset when focused */
-.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item-icon-outer:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent::after,
-.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::after {
+.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item-icon-outer:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::after {
 	left: var(--_ui5_tc_headerItemContent_focus_offset);
 	right: var(--_ui5_tc_headerItemContent_focus_offset);
 }
@@ -150,12 +151,12 @@
 	opacity: var(--sapContent_DisabledOpacity);
 }
 
-.ui5-tab-strip-item:focus {
+.ui5-tab-strip-item {
 	outline: none;
 }
 
-.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before,
-.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemText::before {
+.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemText::before,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus-visible .ui5-tab-strip-itemText::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -167,7 +168,7 @@
 	bottom: var(--_ui5_tc_headerItem_text_focus_border_offset_bottom);
 }
 
-.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent::before {
+.ui5-tab-strip-item--mixedMode:focus-visible .ui5-tab-strip-itemContent::before {
 	border-radius: var(--_ui5_tc_headerItem_focus_border_radius);
 	content: "";
 	pointer-events: none;
@@ -179,7 +180,7 @@
 	bottom: var(--_ui5_tc_headerItem_mixed_mode_focus_border_offset_bottom);
 }
 
-.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer::before {
+.ui5-tab-strip-item--withIcon:focus-visible .ui5-tab-strip-item-icon-outer::before {
 	content: "";
 	pointer-events: none;
 	position: absolute;

package/src/themes/Table.css

@@ -16,6 +16,12 @@ table {
 	border-collapse: collapse;
 }
 
+.ui5-table-header-row-navigated {
+    width: 0.1875rem;
+    background: var(--sapList_HeaderBackground);
+    vertical-align: middle;
+}
+
 .ui5-table-header-row {
 	color: var(--sapTextColor);
 	height: var(--ui5_table_header_row_height);
@@ -76,6 +82,10 @@ tr {
 	opacity: 0.72;
 }
 
+:host [growing-button] {
+	border-bottom: var(--_ui5_table_load_more_border-bottom);
+}
+
 .ui5-table-select-all-column {
 	width: var(--ui5_table_multiselect_column_width);
 	text-align: center;

package/src/themes/TableCell.css

@@ -19,6 +19,10 @@ td {
 	padding-top: .25rem;
 }
 
+:host([_popined-inline]) {
+	padding-top: 0;
+}
+
 ::slotted([ui5-label]) {
 	color: inherit;
 }

package/src/themes/TableColumn.css

@@ -14,7 +14,7 @@ th {
 }
 
 :host([first]) th {
-	padding-left: 1rem;
+	padding-inline-start: 1rem;
 }
 
 th ::slotted([ui5-label]) {

package/src/themes/TableRow.css

@@ -27,9 +27,9 @@
 	border-top: 1px solid var(--sapList_BorderColor);
 }
 
-.ui5-table-popin-row td {
+.ui5-table-popin-row td:not(.ui5-table-row-navigated) {
 	padding-top: .5rem;
-	padding-left: 1rem;
+	padding-inline-start: 1rem;
 }
 
 .ui5-table-popin-row:last-child td {
@@ -42,6 +42,15 @@
 	font-size: var(--sapFontSize);
 }
 
+.ui5-table-cell-display-inline {
+	margin-inline-start: 0.5rem;
+}
+
+.ui5-table-display-inline-container {
+	display: flex;
+	align-items: center;
+}
+
 .ui5-table-multi-select-cell {
 	padding: .25rem 0;
 	box-sizing: border-box;
@@ -61,7 +70,7 @@
 }
 
 :host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
-	padding-left: 1rem;
+	padding-inline-start: 1rem;
 }
 
 /** Hover **/
@@ -90,4 +99,25 @@
 :host([selected][type="Active"]) .ui5-table-row-root:hover:not(:active),
 :host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
 	background-color: var(--sapList_Hover_SelectionBackground);
-}
+}
+
+/** Navigated **/
+:host([navigated]) .ui5-table-row-root:focus .ui5-table-div-navigated {
+    width: 0.09375rem;
+	top: 2px;
+	inset-inline-end: 2px;
+	bottom: 1px;
+}
+
+:host([navigated]) .ui5-table-row-navigated {
+    vertical-align: middle;
+    padding: 0;
+    position: relative;
+}
+
+:host([navigated]) .ui5-table-div-navigated {
+	width: 0.1875rem;
+    position: absolute;
+	inset: 0;
+    background-color: var(--sapList_SelectionBorderColor);
+}