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

package/src/themes/TextArea.css

@@ -109,8 +109,8 @@
 	right: var(--_ui5_textarea_readonly_focus_offset);
 }
 
-:host([focused][value-state="Error"]:not([disabled])) .ui5-textarea-wrapper::after,
-:host([focused][value-state="Warning"]:not([disabled])) .ui5-textarea-wrapper::after,
+:host([focused][value-state="Negative"]:not([disabled])) .ui5-textarea-wrapper::after,
+:host([focused][value-state="Critical"]:not([disabled])) .ui5-textarea-wrapper::after,
 :host([focused][value-state="Information"]:not([disabled])) .ui5-textarea-wrapper::after {
 	top: var(--_ui5_textarea_value_state_focus_offset);
 	bottom: var(--_ui5_textarea_value_state_focus_offset);
@@ -160,6 +160,7 @@
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	white-space: pre-wrap;
+	overflow-y: auto;
 }
 
 :host([style*="height"]) .ui5-textarea-root,
@@ -177,43 +178,43 @@
 	min-height: calc(2 * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([growing]):not([growing-max-lines]) .ui5-textarea-inner {
+:host([growing]):not([growing-max-rows]) .ui5-textarea-inner {
 	max-height: 100%;
 }
 
-:host([growing-max-lines]) .ui5-textarea-mirror {
-	max-height: calc((var(--_textarea_growing_max_lines) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+:host([growing-max-rows]) .ui5-textarea-mirror {
+	max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
 :host([rows="1"]) .ui5-textarea-inner {
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([growing-max-lines="1"]) .ui5-textarea-inner, :host([growing-max-lines="1"]) .ui5-textarea-mirror {
+:host([growing-max-rows="1"]) .ui5-textarea-inner, :host([growing-max-rows="1"]) .ui5-textarea-mirror {
 	max-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([rows="1"][growing-max-lines]) .ui5-textarea-inner, :host([rows="1"][growing-max-lines]) .ui5-textarea-mirror {
+:host([rows="1"][growing-max-rows]) .ui5-textarea-inner, :host([rows="1"][growing-max-rows]) .ui5-textarea-mirror {
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
-	max-height: calc((var(--_textarea_growing_max_lines) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+	max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([rows="1"][value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
-:host([rows="1"][value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+:host([rows="1"][value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([rows="1"][value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
 	height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
 }
 
-:host([value-state="Error"]) .ui5-textarea-mirror,
-:host([value-state="Warning"]) .ui5-textarea-mirror {
+:host([value-state="Negative"]) .ui5-textarea-mirror,
+:host([value-state="Critical"]) .ui5-textarea-mirror {
 	padding-top: var(--_ui5_textarea_padding_top_error_warning);
 	padding-bottom: var(--_ui5_textarea_padding_bottom_error_warning);
 	min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
 }
 
-:host([growing-max-lines="1"][value-state="Error"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Error"]) .ui5-textarea-mirror
-:host([growing-max-lines="1"][value-state="Warning"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Warning"]) .ui5-textarea-mirror {
+:host([growing-max-rows="1"][value-state="Negative"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Negative"]) .ui5-textarea-mirror
+:host([growing-max-rows="1"][value-state="Critical"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Critical"]) .ui5-textarea-mirror {
 	max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning);
 	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning);
 }
@@ -229,7 +230,7 @@
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information));
 }
 
-:host([growing-max-lines="1"][value-state="Information"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Information"]) .ui5-textarea-mirror {
+:host([growing-max-rows="1"][value-state="Information"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Information"]) .ui5-textarea-mirror {
 	max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top__ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom__ui5_textarea_padding_top_information);
 	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_information);
 }
@@ -273,96 +274,96 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-:host([value-state="Error"]) .ui5-textarea-inner::-webkit-input-placeholder {
+:host([value-state="Negative"]) .ui5-textarea-inner::-webkit-input-placeholder {
 	/* Chrome/Opera/Safari */
 	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--_ui5_textarea_error_placeholder_color);
 }
 
-:host([value-state="Error"]) .ui5-textarea-inner::-moz-placeholder {
+:host([value-state="Negative"]) .ui5-textarea-inner::-moz-placeholder {
 	/* Firefox 19+ */
 	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--_ui5_textarea_error_placeholder_color);
 }
 
-:host([value-state="Warning"]) .ui5-textarea-inner::-moz-placeholder {
+:host([value-state="Critical"]) .ui5-textarea-inner::-moz-placeholder {
 	/* Firefox 19+ */
 	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-:host([value-state="Warning"]) .ui5-textarea-inner::-webkit-input-placeholder {
+:host([value-state="Critical"]) .ui5-textarea-inner::-webkit-input-placeholder {
 	font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
 	font-style: var(--_ui5_textarea_error_placeholder_font_style);
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	background: var(--sapField_InvalidBackgroundStyle);
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--sapField_InvalidColor);
 	box-shadow: var(--sapField_InvalidShadow);
 }
 
-:host([value-state="Error"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+:host([value-state="Negative"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	background-color: var(--_ui5_textarea_focused_value_state_error_background);
 	border-color: var(--sapField_InvalidColor);
 }
 
-:host([value-state="Error"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper:after {
+:host([value-state="Negative"][focused]:not([readonly]):not([disabled])) .ui5-textarea-wrapper:after {
 	border-color: var(--_ui5_textarea_focused_value_state_error_focus_outline_color);
 }
 
-:host([value-state="Error"]:not([readonly]):not([focused]):not([disabled]):hover) .ui5-textarea-wrapper {
+:host([value-state="Negative"]:not([readonly]):not([focused]):not([disabled]):hover) .ui5-textarea-wrapper {
 	background-color: var(--_ui5_textarea_error_hover_background_color);
 	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
-:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
 	font-style: var(--_ui5_textarea_error_warning_font_style);
 	font-weight: var(--_ui5_textarea_error_warning_font_weight);
 	padding: var(--_ui5_textarea_padding_top_error_warning) var(--_ui5_textarea_padding_right_and_left_error_warning) var(--_ui5_textarea_padding_bottom_error_warning);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper,
-:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper,
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	border-style: var(--_ui5_textarea_error_warning_border_style);
 	border-width: var(--_ui5_textarea_state_border_width);
 	padding: var(--_ui5_textarea_warning_error_wrapper_padding);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
-:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
 :host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
 	border-style: none;
 }
 
-:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	background: var(--sapField_WarningBackgroundStyle);
 	background-color: var(--sapField_WarningBackground);
 	border-color: var(--sapField_WarningColor);
 	box-shadow: var(--sapField_WarningShadow);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper {
+:host([value-state="Critical"][focused]:not([readonly])) .ui5-textarea-wrapper {
 	background-color: var(--_ui5_textarea_focused_value_state_warning_background);
 	border-color: var(--sapField_WarningColor);
 }
 
-:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
+:host([value-state="Critical"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
 	border-color: var(--_ui5_textarea_focused_value_state_warning_focus_outline_color);
 }
 
-:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+:host([value-state="Critical"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
-:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper {
 	background: var(--sapField_SuccessBackgroundStyle);
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--sapField_SuccessColor);
@@ -371,22 +372,22 @@
 	padding: var(--_ui5_textarea_success_wrapper_padding);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-wrapper {
+:host([value-state="Positive"][focused]:not([readonly])) .ui5-textarea-wrapper {
 	background-color: var(--_ui5_textarea_focused_value_state_success_background);
 	border-color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
+:host([value-state="Positive"][focused]:not([readonly])) .ui5-textarea-wrapper:after {
 	border-color: var(--_ui5_textarea_focused_value_state_success_focus_outline_color);
 }
 
 
-:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
+:host([value-state="Positive"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--sapField_Hover_SuccessShadow);
 }
 
-:host([value-state][value-state="Success"]) .ui5-textarea-inner {
+:host([value-state][value-state="Positive"]) .ui5-textarea-inner {
 	border-radius: var(--sapField_BorderCornerRadius);
 }
 
@@ -434,11 +435,11 @@
 	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([value-state="Error"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Negative"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Warning"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Critical"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
@@ -446,7 +447,7 @@
 	background-color: var(--sapScrollBar_TrackColor);
 }
 
-:host([value-state="Success"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
+:host([value-state="Positive"]) :not(.ui5-content-native-scrollbars) ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
 }
 

package/src/themes/TimePicker.css

@@ -15,9 +15,13 @@
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-time_picker_border_radius);
 	margin: var(--_ui5_input_margin_top_bottom) 0;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
 }
 
-:host([value-state="Error"]) {
+:host([value-state="Negative"]) {
 	background-color: var(--sapField_InvalidBackground);
 }
 

package/src/themes/TimePickerPopover.css

@@ -1,3 +1,7 @@
+.ui5-time-picker-popover {
+	width: 20rem;
+}
+
 .ui5-time-picker-footer {
 	height: fit-content;
 	display: flex;

package/src/themes/TimeSelectionClocks.css

@@ -1,8 +1,7 @@
 .ui5-time-picker-tsc-container {
 	margin: 0 auto;
 	box-sizing: border-box;
-	width: 20rem;
-	height: 23.75rem;
+	width: 100%;
 	padding: 1rem;
 	text-align: center;
 }
@@ -16,7 +15,7 @@
 	justify-content: center;
 	align-items: center;
 	padding-bottom: 1rem;
-	width: 18rem;
+	width: 100%;
 }
 
 .ui5-time-picker-tsc-buttons span[separator] {
@@ -31,7 +30,6 @@
 .ui5-time-picker-tsc-clocks {
     display: block;
     text-align: center;
-    width: 18rem;
-    height: 18rem;
+    width: 100%;
     touch-action: none;
 }

package/src/themes/Title.css

@@ -19,7 +19,6 @@
 	box-sizing: border-box;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	white-space: nowrap;
 	max-width: 100%;
 	vertical-align: bottom;
 	-webkit-margin-before: 0;
@@ -30,11 +29,19 @@
 	cursor: inherit;
 }
 
-:host([wrapping-type="Normal"]) .ui5-title-root,
-:host([wrapping-type="Normal"]) ::slotted(*) {
+:host {
 	white-space: pre-line;
 }
 
+:host([wrapping-type="None"]) {
+	white-space: nowrap;
+}
+
+.ui5-title-root,
+:host ::slotted(*) {
+	white-space: inherit;
+}
+
 ::slotted(*) {
 	font-size: inherit;
 	font-family: inherit;

package/src/themes/Toast.css

@@ -2,91 +2,92 @@
 	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapList_TextColor);
 	font-size: var(--sapFontSize);
-}
-
-:host([open]) .ui5-toast-root {
-	display: block;
-}
-
-.ui5-toast-root {
 	position: fixed;
 	display: none;
 	box-sizing: border-box;
 	max-width: 15rem;
 	overflow: hidden;
-	padding: 1rem;
 	background: var(--_ui5_toast_background);
 	box-shadow: var(--_ui5_toast_shadow);
 	border-radius: var(--sapElement_BorderCornerRadius);
 	transition-property: opacity;
 	opacity: 1;
-	font-family: inherit;
-	color: inherit;
-	font-weight: inherit;
-	font-size: inherit;
 	word-wrap: break-word;
 	text-align: center;
 	text-overflow: ellipsis;
 	white-space: pre-line;
+	padding: 1rem;
+}
+
+.ui5-toast-root {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	outline: none;
+	box-sizing: border-box;
+}
+
+:host([open]) {
+	display: block;
 }
 
-:host(:not([placement])) .ui5-toast-root {
+:host(:not([placement])) {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="TopStart"]) .ui5-toast-root {
+:host([placement="TopStart"]) {
 	top: var(--_ui5_toast_vertical_offset);
 	left: var(--_ui5_toast_horizontal_offset);
 }
 
-:host([placement="MiddleStart"]) .ui5-toast-root {
+:host([placement="MiddleStart"]) {
 	left: var(--_ui5_toast_horizontal_offset);
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-:host([placement="BottomStart"]) .ui5-toast-root {
+:host([placement="BottomStart"]) {
 	left: var(--_ui5_toast_horizontal_offset);
 	bottom: var(--_ui5_toast_vertical_offset);
 }
 
- :host([placement="TopCenter"]) .ui5-toast-root {
+ :host([placement="TopCenter"]) {
 	top: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="MiddleCenter"]) .ui5-toast-root {
+:host([placement="MiddleCenter"]) {
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%, -50%);
 }
 
-:host([placement="BottomCenter"]) .ui5-toast-root {
+:host([placement="BottomCenter"]) {
 	bottom: var(--_ui5_toast_vertical_offset);
 	left: 50%;
 	transform: translateX(-50%);
 }
 
-:host([placement="TopEnd"]) .ui5-toast-root {
+:host([placement="TopEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	top: var(--_ui5_toast_vertical_offset);
 }
 
-:host([placement="MiddleEnd"]) .ui5-toast-root {
+:host([placement="MiddleEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	top: 50%;
 	transform: translateY(-50%);
 }
 
-:host([placement="BottomEnd"]) .ui5-toast-root {
+:host([placement="BottomEnd"]) {
 	right: var(--_ui5_toast_horizontal_offset);
 	bottom: var(--_ui5_toast_vertical_offset);
 }
 
-:host([focused]) .ui5-toast-root {
+:host([focused]) {
 	outline-width: var(--sapContent_FocusWidth);
 	outline-style: var(--sapContent_FocusStyle);
 	outline-color: var(--sapContent_FocusColor);

package/src/themes/ToggleButton.css

@@ -29,10 +29,10 @@
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([active][focused]),
-:host([design="Default"][active][focused]),
-:host([design="Transparent"][active][focused]),
-:host([design="Emphasized"][active][focused]) {
+:host([active]:not([disabled])),
+:host([design="Default"][active]:not([disabled])),
+:host([design="Transparent"][active]:not([disabled])),
+:host([design="Emphasized"][active]:not([disabled])) {
 	background: var(--sapButton_Active_Background);
 	border-color: var(--sapButton_Active_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
@@ -53,7 +53,7 @@
 	color: var(--sapButton_Reject_Selected_TextColor);
 }
 
-:host([design="Negative"][active][focused]) {
+:host([design="Negative"][active]:not([disabled])) {
 	background: var(--sapButton_Reject_Active_Background);
 	border-color: var(--sapButton_Reject_Active_BorderColor);
 	color: var(--sapButton_Reject_Active_TextColor);
@@ -78,7 +78,7 @@
 	color: var(--sapButton_Accept_Selected_TextColor);
 }
 
-:host([design="Positive"][active][focused]) {
+:host([design="Positive"][active]:not([disabled])) {
 	background: var(--sapButton_Accept_Active_Background);
 	border-color: var(--sapButton_Accept_Active_BorderColor);
 	color: var(--sapButton_Accept_Selected_TextColor);
@@ -103,7 +103,7 @@
 	color: var(--sapButton_Attention_Selected_TextColor);
 }
 
-:host([design="Attention"][active][focused]) {
+:host([design="Attention"][active]:not([disabled])) { 
 	background: var(--sapButton_Attention_Active_Background);
 	border-color: var(--sapButton_Attention_Active_BorderColor);
 	color: var(--sapButton_Attention_Active_TextColor);

package/src/themes/Token.css

@@ -18,30 +18,25 @@
 
 :host(:not([readonly]):hover) {
 	background: var(--sapButton_Hover_Background);
-	border-color: var(--_ui5_token_hover_border_color);
 }
 
-:host([selected]:not([readonly])) {
-	color: var(--sapButton_Selected_TextColor);
-}
-
-:host([selected]:not([readonly])) {
+:host([selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
+	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]:not([readonly])) .ui5-token--wrapper {
+:host([selected]) .ui5-token--wrapper {
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
 	border-bottom-left-radius: var(--_ui5_token_selected_internal_border_bottom_radius);
 	border-bottom-right-radius: var(--_ui5_token_selected_internal_border_bottom_radius);
 }
 
-:host([selected]:not([readonly]):hover) {
+:host([selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
-	border-color: var(--_ui5_token_selected_hover_border_color);
 }
 
-:host([readonly]) {
+:host([readonly]:not([selected])) {
 	background: var(--_ui5_token_readonly_background);
 	border-color: var(--sapField_ReadOnly_BorderColor);
 	color: var(--_ui5_token_readonly_color);
@@ -55,13 +50,13 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([selected]:not([readonly])) .ui5-token--text,
-:host([selected]:not([readonly])) .ui5-token--icon {
+:host([selected]) .ui5-token--text,
+:host([selected]) .ui5-token--icon {
 	top: var(--_ui5_token_text_icon_top);
 	position: relative;
 }
 
-:host([focused][selected]:not([readonly]):not(:hover)) {
+:host([focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);
@@ -72,7 +67,7 @@
 	align-items: center;
 	height: 100%;
 	width: 100%;
-	cursor: default;
+	cursor: pointer;
 	padding-inline-start: var(--_ui5_token_left_padding);
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
@@ -105,7 +100,7 @@
 	right: var(--_ui5_token_focus_offset);
 }
 
-:host([focused][selected]:not([readonly])) .ui5-token--wrapper:focus::after {
+:host([focused][selected]) .ui5-token--wrapper:focus::after {
 	bottom: var(--_ui5_token_selected_focused_offset_bottom)
 }
 

package/src/themes/Tokenizer.css

@@ -3,27 +3,32 @@
 :host {
 	display: inline-block;
 	box-sizing: border-box;
-	border: 1px solid black;
+	border: none;
 	height: 2.25rem;
 }
 
+:host([disabled]) {
+	opacity: 40%;
+	pointer-events: none;
+}
+
+:host(:not([expanded])) .ui5-tokenizer-root {
+	overflow: hidden;
+}
+
+:host([_tokens-count="0"]) .ui5-tokenizer-root {
+	padding: 0;
+}
+
 .ui5-tokenizer-root {
 	height: 100%;
 	display: flex;
 	align-items: center;
-	overflow-x: scroll;
 	box-sizing: border-box;
+	touch-action: none;
 	font-family: "72override", var(--sapFontFamily);
 }
 
-.ui5-tokenizer-no-padding {
-	padding: 0;
-}
-
-.ui5-tokenizer-root.ui5-tokenizer-nmore--wrapper {
-	overflow: hidden;
-}
-
 .ui5-tokenizer--token--wrapper {
 	display: inline-flex;
 	align-items: center;
@@ -63,3 +68,12 @@
 	font-weight: normal;
 	color: var(--_ui5_tokenizer_n_more_text_color);
 }
+
+.ui5-tokenizer-more-text:hover {
+	text-decoration: underline;
+}
+
+/* Underline needs to be removed on mousedown. */
+.ui5-tokenizer-more-text:active {
+	text-decoration: none;
+}

package/src/themes/TokenizerPopover.css

@@ -3,7 +3,15 @@
 	padding: 0;
 }
 
-#ui5-tokenizer-dialog-confirm-btn {
+[ui5-responsive-popover] .ui5-responsive-popover-header {
+	min-height: 2rem;
+}
+
+[ui5-responsive-popover] .ui5-responsive-popover-header .row{
+	justify-content: left;
+}
+
+[ui5-responsive-popover] [ui5-button] {
 	height: 100%;
 	min-width: 4rem;
 }
@@ -11,4 +19,8 @@
 [ui5-responsive-popover] {
 	margin-top: var(--_ui5_tokenizer-popover_offset);
 	margin-inline-start: calc(-1 * var(--_ui5_tokenizer_padding));
-}
+}
+
+.ui5-responsive-popover-footer [ui5-button]:first-child{
+	margin-right: 1rem;
+}

package/src/themes/TreeItem.css

@@ -21,7 +21,7 @@
 }
 
 :host([_toggle-button-end]:not([selected])) .ui5-li-root-tree:hover,
-:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
+:host(:not([_selection-mode="None"]):not([_selection-mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
 	background: var(--sapList_Hover_Background);
 	cursor: pointer;
 }
@@ -42,7 +42,7 @@
 	background: var(--sapList_SelectionBackgroundColor);
 }
 
-:host([_mode]:not([_mode="None"]):not([_mode="Delete"]):not([active]):not([selected])) .ui5-li-root-tree:hover {
+:host(:not([_selection-mode="None"]):not([_selection-mode="Delete"]):not([active])[selected]) .ui5-li-root-tree:hover {
 	background-color: var(--sapList_Hover_SelectionBackground);
 	cursor: pointer;
 }

package/src/themes/ValueStateMessage.css

@@ -118,7 +118,7 @@
 	flex-direction: column;
 }
 
-.ui5-popover-with-value-state-header-phone .ui5-valuestatemessage-root + [ui5-list] {
+.ui5-popover-with-value-state-header-phone [ui5-list] {
 	overflow: auto;
 }