@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/src/themes/Input.css

@@ -172,29 +172,29 @@
 	padding-right: 0.125rem;
 }
 
-:host([value-state="Negative"]) [inner-input]::-webkit-input-placeholder {
+:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
 	color: var(--_ui5-input_error_placeholder_color);
 	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
-:host([value-state="Negative"]) [inner-input]::-moz-placeholder {
+:host([value-state="Error"]) [inner-input]::-moz-placeholder {
 	color: var(--_ui5-input_error_placeholder_color);
 	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
-:host([value-state="Critical"]) [inner-input]::-webkit-input-placeholder {
+:host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder {
 	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
-:host([value-state="Critical"]) [inner-input]::-moz-placeholder {
+:host([value-state="Warning"]) [inner-input]::-moz-placeholder {
 	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
-:host([value-state="Positive"]) [inner-input]::-webkit-input-placeholder {
+:host([value-state="Success"]) [inner-input]::-webkit-input-placeholder {
 	color: var(--_ui5_input_placeholder_color);
 }
 
-:host([value-state="Positive"]) [inner-input]::-moz-placeholder {
+:host([value-state="Success"]) [inner-input]::-moz-placeholder {
 	color: var(--_ui5_input_placeholder_color);
 }
 
@@ -246,79 +246,79 @@
 	border-width: var(--_ui5_input_state_border_width);
 }
 
-:host([value-state="Negative"]) [inner-input],
-:host([value-state="Critical"]) [inner-input] {
+:host([value-state="Error"]) [inner-input],
+:host([value-state="Warning"]) [inner-input] {
 	font-style: var(--_ui5_input_error_warning_font_style);
 	text-indent: var(--_ui5_input_error_warning_text_indent);
 }
 
-:host([value-state="Negative"]) [inner-input] {
+:host([value-state="Error"]) [inner-input] {
 	font-weight: var(--_ui5_input_error_font_weight);
 }
 
-:host([value-state="Critical"]) [inner-input] {
+:host([value-state="Warning"]) [inner-input] {
 	font-weight: var(--_ui5_input_warning_font_weight);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled])) {
+: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="Negative"][focused]:not([opened]):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="Negative"][focused]:not([opened]):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);
 }
 
-:host([value-state="Negative"]:not([readonly])) .ui5-input-root::before{
+:host([value-state="Error"]:not([readonly])) .ui5-input-root::before{
 	background-color: var(--_ui5-input-value-state-error-border-botom-color);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([focused]):hover),
-:host([value-state="Negative"]:not([readonly])[focused][opened]: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(--sapField_Hover_InvalidShadow);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled])),
-:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Error"]:not([readonly]):not([disabled])),
+:host([value-state="Warning"]:not([readonly]):not([disabled])),
 :host([value-state="Information"]:not([readonly]):not([disabled])) {
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Critical"]:not([readonly]):not([disabled])) {
+: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="Critical"][focused]:not([opened]):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="Critical"][focused]:not([opened]):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);
 }
 
-:host([value-state="Critical"]:not([readonly])) .ui5-input-root::before{
+:host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{
 	background-color: var(--_ui5_input_value_state_warning_border_botom_color);
 }
 
-:host([value-state="Critical"]:not([readonly]):not([focused]):hover),
-:host([value-state="Critical"]:not([readonly])[focused][opened]: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(--sapField_Hover_WarningShadow);
 }
 
-:host([value-state="Positive"]:not([readonly]):not([disabled])) {
+: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);
@@ -326,21 +326,21 @@
 	box-shadow: var(--sapField_SuccessShadow);
 }
 
-:host([value-state="Positive"][focused]:not([opened]):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="Positive"][focused]:not([opened]):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);
 }
 
-:host([value-state="Positive"]:not([readonly])) .ui5-input-root::before{
+:host([value-state="Success"]:not([readonly])) .ui5-input-root::before{
 	background-color: var(--_ui5_input_value_state_success_border_botom_color);
 }
 
-:host([value-state="Positive"]:not([readonly]):not([focused]):hover),
-:host([value-state="Positive"]:not([readonly])[focused][opened]: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(--sapField_Hover_SuccessShadow);
 }
@@ -389,33 +389,33 @@
 	box-sizing: content-box !important;
 }
 
-:host([value-state="Negative"]) .inputIcon,
-:host([value-state="Critical"]) .inputIcon{
+:host([value-state="Error"]) [input-icon],
+:host([value-state="Warning"]) [input-icon]{
 	padding: var(--_ui5_input_error_warning_icon_padding);
 }
 
-:host([value-state="Negative"][focused]) .inputIcon,
-:host([value-state="Critical"][focused]) .inputIcon{
+: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"]) .inputIcon {
+:host([value-state="Information"]) [input-icon] {
 	padding: var(--_ui5_input_information_icon_padding);
 }
 
-:host([value-state="Information"][focused]) .inputIcon {
+:host([value-state="Information"][focused]) [input-icon] {
 	padding: var(--_ui5_input_information_focused_icon_padding);
 }
 
-:host([value-state="Negative"]) ::slotted(.inputIcon[ui5-icon]),
-:host([value-state="Negative"]) ::slotted([ui5-icon][slot="icon"]),
-:host([value-state="Critical"]) ::slotted([ui5-icon][slot="icon"]) {
+: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="Negative"][focused]) ::slotted(.inputIcon[ui5-icon]),
-:host([value-state="Negative"][focused]) ::slotted([ui5-icon][slot="icon"]),
-:host([value-state="Critical"][focused]) ::slotted([ui5-icon][slot="icon"]) {
+: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);
 }
 
@@ -427,43 +427,43 @@
 	padding: var(--_ui5_input_information_custom_focused_icon_padding);
 }
 
-:host([value-state="Negative"]) .inputIcon:active,
-:host([value-state="Negative"]) .inputIcon[pressed] {
+: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="Negative"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }
 
-:host([value-state="Critical"]) .inputIcon:active,
-:host([value-state="Critical"]) .inputIcon[pressed] {
+: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="Critical"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
 }
 
-:host([value-state="Information"]) .inputIcon:active,
-:host([value-state="Information"]) .inputIcon[pressed] {
+: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="Information"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_information_icon_box_shadow);
 }
 
-:host([value-state="Positive"]) .inputIcon:active,
-:host([value-state="Positive"]) .inputIcon[pressed] {
+: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="Positive"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 
@@ -478,12 +478,12 @@
 	box-sizing: border-box;
 }
 
-:host([value-state]:not([value-state="None"]):not([value-state="Positive"])) .ui5-input-clear-icon-wrapper {
+: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="Positive"]) .ui5-input-clear-icon-wrapper {
+:host([value-state="Success"]) .ui5-input-clear-icon-wrapper {
 	height: var(--_ui5_input_icon_wrapper_success_state_height);
 }
 

package/src/themes/InputIcon.css

@@ -1,4 +1,11 @@
-.inputIcon {
+/*
+	This CSS file enables visual alignment of all icons within input elements.
+	API:
+	- add input-icon attribute to an icon
+	- [Optional] pressed attribute set to the icon will enable additional styling (check MultiComboBox, Select, etc.)
+*/
+
+[input-icon] {
 	color: var(--_ui5_input_icon_color);
 	cursor: pointer;
 	outline: none;
@@ -9,26 +16,26 @@
 	border-radius: var(--_ui5_input_icon_border_radius);
 }
 
-.inputIcon[pressed] {
+[input-icon][pressed] {
 	background: var(--_ui5_input_icon_pressed_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
-.inputIcon:active {
+[input-icon]:active {
 	background-color: var(--sapButton_Active_Background);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	color: var(--_ui5_input_icon_pressed_color);
 }
 
-.inputIcon:not([pressed]):not(:active):hover {
+[input-icon]:not([pressed]):not(:active):hover {
 	background: var(--_ui5_input_icon_hover_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 }
 
-.inputIcon:hover {
+[input-icon]:hover {
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
-}
+}

package/src/themes/InputSharedStyles.css

@@ -18,37 +18,38 @@
 	border-color: var(--_ui5_input_disabled_border_color);
 }
 
-:host([value-state="Negative"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }
 
-:host([value-state="Critical"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
 }
 
-:host([value-state="Information"]) .inputIcon:not([pressed]):not(:active):hover {
+:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_information_icon_box_shadow);
 }
 
-:host([value-state="Positive"]) .inputIcon:not([pressed]):not(:active):hover {
+
+:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 
-:host([value-state="Negative"]:not([readonly]):not([disabled])) {
+: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="Critical"]:not([readonly]):not([disabled])) {
+: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="Positive"]:not([readonly]):not([disabled])) {
+: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);
@@ -64,35 +65,35 @@
 	box-shadow: var(--sapField_InformationShadow);
 }
 
-:host([value-state="Negative"]) .inputIcon:active,
-:host([value-state="Negative"]) .inputIcon[pressed] {
+: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="Critical"]) .inputIcon:active,
-:host([value-state="Critical"]) .inputIcon[pressed] {
+: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"]) .inputIcon:active,
-:host([value-state="Information"]) .inputIcon[pressed] {
+: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="Positive"]) .inputIcon:active,
-:host([value-state="Positive"]) .inputIcon[pressed] {
+: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="Negative"]) .inputIcon,
-:host([value-state="Critical"]) .inputIcon {
+:host([value-state="Error"]) [input-icon],
+:host([value-state="Warning"]) [input-icon]{
 	padding: var(--_ui5_input_error_warning_icon_padding);
 }
 
-:host([value-state="Information"]) .inputIcon {
+:host([value-state="Information"]) [input-icon] {
 	padding: var(--_ui5_input_information_icon_padding);
 }

package/src/themes/Label.css

@@ -16,19 +16,16 @@
 	cursor: inherit;
 }
 
-:host {
+:host([wrapping-type="Normal"]) .ui5-label-root {
 	white-space: normal;
 }
 
-:host([wrapping-type="None"]) {
-	white-space: nowrap;
-}
-
-:host([wrapping-type="None"]) .ui5-label-root {
+:host(:not([wrapping-type="Normal"])) .ui5-label-root {
 	display: inline-flex;
+	white-space: nowrap;
 }
 
-:host([wrapping-type="None"]) .ui5-label-text-wrapper {
+:host(:not([wrapping-type="Normal"])) .ui5-label-text-wrapper {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	display: inline-block;

package/src/themes/List.css

@@ -16,11 +16,11 @@
 	border-bottom: 0;
 }
 
-:host([loading]) {
+:host([busy]) {
 	opacity: 0.72;
 }
 
-:host([loading]) .ui5-list-loading-row {
+:host([busy]) .ui5-list-busy-row {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -29,7 +29,7 @@
 	outline: none;
 }
 
-:host([loading]) .ui5-list-loading-ind {
+:host([busy]) .ui5-list-busy-ind {
 	position: absolute;
 	top: 50%;
 	left: 50%;

package/src/themes/ListItem.css

@@ -50,15 +50,15 @@
 }
 
 /* [ui5-li]: additionalTextState */
-:host([additional-text-state="Critical"]) .ui5-li-additional-text {
+:host([additional-text-state="Warning"]) .ui5-li-additional-text {
 	color: var(--sapCriticalTextColor);
 }
 
-:host([additional-text-state="Positive"]) .ui5-li-additional-text {
+:host([additional-text-state="Success"]) .ui5-li-additional-text {
 	color: var(--sapPositiveTextColor);
 }
 
-:host([additional-text-state="Negative"]) .ui5-li-additional-text {
+:host([additional-text-state="Error"]) .ui5-li-additional-text {
 	color: var(--sapNegativeTextColor);
 }
 
@@ -207,15 +207,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([_selection-mode="SingleStart"]) .ui5-li-root {
+:host([_mode="SingleSelectBegin"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="Multiple"]) .ui5-li-root {
+:host([_mode="MultiSelect"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="SingleEnd"]) .ui5-li-root {
+:host([_mode="SingleSelectEnd"]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 
@@ -234,15 +234,15 @@
     box-sizing: border-box;
 }
 
-:host([highlight="Negative"]) .ui5-li-highlight {
+:host([highlight="Error"]) .ui5-li-highlight {
 	background: var(--sapNegativeTextColor);
 }
 
-:host([highlight="Critical"]) .ui5-li-highlight {
+:host([highlight="Warning"]) .ui5-li-highlight {
 	background: var(--sapCriticalTextColor);
 }
 
-:host([highlight="Positive"]) .ui5-li-highlight {
+:host([highlight="Success"]) .ui5-li-highlight {
 	background: var(--sapPositiveTextColor);
 }
 

package/src/themes/Menu.css

@@ -50,7 +50,7 @@
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
 }
 
-.ui5-menu-rp[sub-menu][actual-placement="Start"] {
+.ui5-menu-rp[sub-menu][actual-placement-type="Left"] {
 	margin-top: 0.25rem;
 	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
 }