@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/themes/FormLayout.css

@@ -0,0 +1,159 @@
+/* 
+* The Form layout is divided into one or more columns. 
+* XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
+*/
+/* 
+* S max-width: 600px - container padding 24px
+*/
+
+/* S - 1 column */
+@container (max-width: 600px) {
+	.ui5-form-layout {
+		grid-template-columns: 1fr;
+	}
+
+	::slotted(*) {
+		justify-self: start;
+	}
+	::slotted(:nth-child(2n)){
+		margin-bottom: 0.5rem;
+	}
+}
+
+/* M  - 1 column by default, up to 2 columns */
+@container (width > 600px) and (width <= 1024px) {
+	.ui5-form-layout {
+		grid-template-columns: 1fr;
+	}
+	:host([columns-m="1"]) .ui5-form-layout {
+		grid-template-columns: 1fr;
+	}
+	:host([columns-m="2"]) .ui5-form-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.ui5-form-column-spanM-2 {
+		grid-column: span 2;
+	}
+
+	.ui5-form-column-spanM-2 .ui5-form-group-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+/* L - 2 columns by default, up to 3 columns */
+@container (width > 1024px) and (width <= 1440px) {
+
+	.ui5-form-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.ui5-form-column {
+		grid-template-columns: 1fr;
+	}
+
+	:host([columns-l="1"]) .ui5-form-layout {
+		grid-template-columns: 1fr;
+	}
+	:host([columns-l="2"]) .ui5-form-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	:host([columns-l="3"]) .ui5-form-layout {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	.ui5-form-column-spanL-2 {
+		grid-column: span 2;
+	}
+	.ui5-form-column-spanL-2 .ui5-form-group-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.ui5-form-column-spanL-3 {
+		grid-column: span 3;
+	}
+	.ui5-form-column-spanL-3 .ui5-form-group-layout {
+		grid-template-columns: repeat(3, 1fr);
+	}
+}
+
+/* XL - 2 columns by default, up to 6 */
+@container (min-width: 1441px) {
+	.ui5-form-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	:host([columns-xl="1"]) .ui5-form-layout {
+		grid-template-columns: 1fr;
+	}
+	:host([columns-xl="2"]) .ui5-form-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	:host([columns-xl="3"]) .ui5-form-layout {
+		grid-template-columns: repeat(3, 1fr);
+	}
+	:host([columns-xl="4"]) .ui5-form-layout {
+		grid-template-columns: repeat(4, 1fr);
+	}
+	:host([columns-xl="5"]) .ui5-form-layout {
+		grid-template-columns: repeat(5, 1fr);
+	}
+	:host([columns-xl="6"]) .ui5-form-layout {
+		grid-template-columns: repeat(6, 1fr);
+	}
+
+	.ui5-form-column-spanXL-2 {
+		grid-column: span 2;
+	}
+	.ui5-form-column-spanXL-2 .ui5-form-group-layout {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.ui5-form-column-spanXL-3 {
+		grid-column: span 3;
+	}
+	.ui5-form-column-spanXL-3 .ui5-form-group-layout {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	.ui5-form-column-spanXL-4 {
+		grid-column: span 4;
+	}
+	.ui5-form-column-spanXL-4 .ui5-form-group-layout {
+		grid-template-columns: repeat(4, 1fr);
+
+	}
+
+	.ui5-form-column-spanXL-5 {
+		grid-column: span 5;
+	}
+	.ui5-form-column-spanXL-5 .ui5-form-group-layout {
+		grid-template-columns: repeat(5, 1fr);
+
+	}
+
+	.ui5-form-column-spanXL-6 {
+		grid-column: span 6;
+	}
+	.ui5-form-column-spanXL-6 .ui5-form-group-layout {
+		grid-template-columns: repeat(6, 1fr);
+	}
+}
+
+.ui5-form-item-span-2 {
+	grid-column: span 2;
+}
+
+.ui5-form-item-span-3 {
+	grid-column: span 3;
+}
+
+.ui5-form-item-span-4 {
+	grid-column: span 4;
+}
+
+.ui5-form-item-span-5 {
+	grid-column: span 5;
+}
+.ui5-form-item-span-6 {
+	grid-column: span 6;
+}

package/src/themes/Icon.css

@@ -17,7 +17,7 @@
 	display: inline-block;
 	width: 1rem;
 	height: 1rem;
-	color: var(--sapContent_NonInteractiveIconColor);
+	color: var(--sapContent_IconColor);
 	fill: currentColor;
 	outline: none;
 }
@@ -30,10 +30,6 @@
 	color: var(--sapCriticalElementColor);
 }
 
-:host([design="Default"]) {
-	color: var(--sapContent_IconColor);
-}
-
 :host([design="Information"]) {
 	color: var(--sapInformativeElementColor);
 }
@@ -54,7 +50,8 @@
 	color: var(--sapPositiveElementColor);
 }
 
-:host([interactive][focused]) .ui5-icon-root {
+:host([mode="Interactive"][desktop]) .ui5-icon-root:focus-within,
+:host([mode="Interactive"]) .ui5-icon-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--ui5-icon-focus-border-radius);
 }
@@ -68,7 +65,7 @@
 }
 
 
-:host([interactive]) {
+:host([mode="Interactive"]) {
 	cursor: pointer;
 }
 

package/src/themes/Input.css

@@ -172,29 +172,29 @@
 	padding-right: 0.125rem;
 }
 
-:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
+:host([value-state="Negative"]) [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="Error"]) [inner-input]::-moz-placeholder {
+:host([value-state="Negative"]) [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="Warning"]) [inner-input]::-webkit-input-placeholder {
+:host([value-state="Critical"]) [inner-input]::-webkit-input-placeholder {
 	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
-:host([value-state="Warning"]) [inner-input]::-moz-placeholder {
+:host([value-state="Critical"]) [inner-input]::-moz-placeholder {
 	font-weight: var(--_ui5_input_value_state_error_warning_placeholder_font_weight);
 }
 
-:host([value-state="Success"]) [inner-input]::-webkit-input-placeholder {
+:host([value-state="Positive"]) [inner-input]::-webkit-input-placeholder {
 	color: var(--_ui5_input_placeholder_color);
 }
 
-:host([value-state="Success"]) [inner-input]::-moz-placeholder {
+:host([value-state="Positive"]) [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="Error"]) [inner-input],
-:host([value-state="Warning"]) [inner-input] {
+:host([value-state="Negative"]) [inner-input],
+:host([value-state="Critical"]) [inner-input] {
 	font-style: var(--_ui5_input_error_warning_font_style);
 	text-indent: var(--_ui5_input_error_warning_text_indent);
 }
 
-:host([value-state="Error"]) [inner-input] {
+:host([value-state="Negative"]) [inner-input] {
 	font-weight: var(--_ui5_input_error_font_weight);
 }
 
-:host([value-state="Warning"]) [inner-input] {
+:host([value-state="Critical"]) [inner-input] {
 	font-weight: var(--_ui5_input_warning_font_weight);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) {
+:host([value-state="Negative"]: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="Error"][focused]:not([opened]):not([readonly])) {
+:host([value-state="Negative"][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([opened]):not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Negative"][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="Error"]:not([readonly])) .ui5-input-root::before{
+:host([value-state="Negative"]:not([readonly])) .ui5-input-root::before{
 	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])[focused][opened]:hover) {
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover),
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover) {
 	background-color: var(--_ui5_input_value_state_error_hover_background);
 	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])),
-:host([value-state="Warning"]:not([readonly]):not([disabled])),
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
 :host([value-state="Information"]:not([readonly]):not([disabled])) {
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Warning"]:not([readonly]):not([disabled])) {
+:host([value-state="Critical"]: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="Warning"][focused]:not([opened]):not([readonly])) {
+:host([value-state="Critical"][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([opened]):not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Critical"][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="Warning"]:not([readonly])) .ui5-input-root::before{
+:host([value-state="Critical"]:not([readonly])) .ui5-input-root::before{
 	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])[focused][opened]:hover)  {
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover),
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover)  {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
-:host([value-state="Success"]:not([readonly]):not([disabled])) {
+:host([value-state="Positive"]: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="Success"][focused]:not([opened]):not([readonly])) {
+:host([value-state="Positive"][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([opened]):not([readonly])) .ui5-input-focusable-element:after {
+:host([value-state="Positive"][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="Success"]:not([readonly])) .ui5-input-root::before{
+:host([value-state="Positive"]:not([readonly])) .ui5-input-root::before{
 	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])[focused][opened]:hover) {
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover),
+:host([value-state="Positive"]: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="Error"]) [input-icon],
-:host([value-state="Warning"]) [input-icon]{
+:host([value-state="Negative"]) .inputIcon,
+:host([value-state="Critical"]) .inputIcon{
 	padding: var(--_ui5_input_error_warning_icon_padding);
 }
 
-:host([value-state="Error"][focused]) [input-icon],
-:host([value-state="Warning"][focused]) [input-icon]{
+:host([value-state="Negative"][focused]) .inputIcon,
+:host([value-state="Critical"][focused]) .inputIcon{
 	padding: var(--_ui5_input_error_warning_focused_icon_padding);
 }
 
-:host([value-state="Information"]) [input-icon] {
+:host([value-state="Information"]) .inputIcon {
 	padding: var(--_ui5_input_information_icon_padding);
 }
 
-:host([value-state="Information"][focused]) [input-icon] {
+:host([value-state="Information"][focused]) .inputIcon {
 	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"]) {
+: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"]) {
 	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"]) {
+: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"]) {
 	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="Error"]) [input-icon]:active,
-:host([value-state="Error"]) [input-icon][pressed] {
+:host([value-state="Negative"]) .inputIcon:active,
+:host([value-state="Negative"]) .inputIcon[pressed] {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 	color: var(--_ui5_input_icon_error_pressed_color);
 }
 
-:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
+:host([value-state="Negative"]) .inputIcon:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }
 
-:host([value-state="Warning"]) [input-icon]:active,
-:host([value-state="Warning"]) [input-icon][pressed] {
+:host([value-state="Critical"]) .inputIcon:active,
+:host([value-state="Critical"]) .inputIcon[pressed] {
 	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
 	color: var(--_ui5_input_icon_warning_pressed_color);
 }
 
-:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover {
+:host([value-state="Critical"]) .inputIcon:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
 }
 
-:host([value-state="Information"]) [input-icon]:active,
-:host([value-state="Information"]) [input-icon][pressed] {
+:host([value-state="Information"]) .inputIcon:active,
+:host([value-state="Information"]) .inputIcon[pressed] {
 	box-shadow: var(--_ui5_input_information_icon_box_shadow);
 	color: var(--_ui5_input_icon_information_pressed_color);
 }
 
-:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover {
+:host([value-state="Information"]) .inputIcon:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_information_icon_box_shadow);
 }
 
-:host([value-state="Success"]) [input-icon]:active,
-:host([value-state="Success"]) [input-icon][pressed] {
+:host([value-state="Positive"]) .inputIcon:active,
+:host([value-state="Positive"]) .inputIcon[pressed] {
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 	color: var(--_ui5_input_icon_success_pressed_color);
 }
 
-:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover {
+:host([value-state="Positive"]) .inputIcon: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="Success"])) .ui5-input-clear-icon-wrapper {
+:host([value-state]:not([value-state="None"]):not([value-state="Positive"])) .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 {
+:host([value-state="Positive"]) .ui5-input-clear-icon-wrapper {
 	height: var(--_ui5_input_icon_wrapper_success_state_height);
 }
 

package/src/themes/InputIcon.css

@@ -1,11 +1,4 @@
-/*
-	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] {
+.inputIcon {
 	color: var(--_ui5_input_icon_color);
 	cursor: pointer;
 	outline: none;
@@ -16,26 +9,26 @@
 	border-radius: var(--_ui5_input_icon_border_radius);
 }
 
-[input-icon][pressed] {
+.inputIcon[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);
 }
 
-[input-icon]:active {
+.inputIcon: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);
 }
 
-[input-icon]:not([pressed]):not(:active):hover {
+.inputIcon:not([pressed]):not(:active):hover {
 	background: var(--_ui5_input_icon_hover_bg);
 	box-shadow: var(--_ui5_input_icon_box_shadow);
 }
 
-[input-icon]:hover {
+.inputIcon: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,38 +18,37 @@
 	border-color: var(--_ui5_input_disabled_border_color);
 }
 
-:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover {
+:host([value-state="Negative"]) .inputIcon: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 {
+:host([value-state="Critical"]) .inputIcon: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 {
+:host([value-state="Information"]) .inputIcon: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 {
+:host([value-state="Positive"]) .inputIcon:not([pressed]):not(:active):hover {
 	box-shadow: var(--_ui5_input_success_icon_box_shadow);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) {
+:host([value-state="Negative"]: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])) {
+:host([value-state="Critical"]: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])) {
+:host([value-state="Positive"]:not([readonly]):not([disabled])) {
 	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--_ui5_input_value_state_success_border_color);
@@ -65,35 +64,35 @@
 	box-shadow: var(--sapField_InformationShadow);
 }
 
-:host([value-state="Error"]) [input-icon]:active,
-:host([value-state="Error"]) [input-icon][pressed] {
+:host([value-state="Negative"]) .inputIcon:active,
+:host([value-state="Negative"]) .inputIcon[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] {
+:host([value-state="Critical"]) .inputIcon:active,
+:host([value-state="Critical"]) .inputIcon[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] {
+:host([value-state="Information"]) .inputIcon:active,
+:host([value-state="Information"]) .inputIcon[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] {
+:host([value-state="Positive"]) .inputIcon:active,
+:host([value-state="Positive"]) .inputIcon[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]{
+:host([value-state="Negative"]) .inputIcon,
+:host([value-state="Critical"]) .inputIcon {
 	padding: var(--_ui5_input_error_warning_icon_padding);
 }
 
-:host([value-state="Information"]) [input-icon] {
+:host([value-state="Information"]) .inputIcon {
 	padding: var(--_ui5_input_information_icon_padding);
 }

package/src/themes/Label.css

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

package/src/themes/Link.css

@@ -72,14 +72,14 @@
 }
 
 :host .ui5-link-root {
-	border: var(--_ui5_link_border);
+	outline-offset: -0.0625rem;
 	border-radius: var(--_ui5_link_focus_border-radius);
 }
 
 :host([focused]) .ui5-link-root,
 :host([design="Subtle"][focused]) .ui5-link-root {
 	background-color: var(--_ui5_link_focus_background_color);
-	border: var(--_ui5_link_border_focus);
+	outline: var(--_ui5_link_outline);
 	border-radius: var(--_ui5_link_focus_border-radius);
 	text-shadow: none;
 }