@ui5/webcomponents 2.25.0-rc.3 → 2.25.0

package/src/themes/InputIcon.css

@@ -5,9 +5,14 @@
 
 .inputIcon {
 	color: var(--_ui5_input_icon_color);
-	cursor: pointer;
+	/* cursor / opacity / pointer-events are state-aware — parent Input publishes overrides on :host([disabled]).
+	   Defaults preserve the plain interactive appearance. */
+	cursor: var(--_ui5_input_icon_state_cursor, pointer);
+	opacity: var(--_ui5_input_icon_state_opacity, 1);
+	pointer-events: var(--_ui5_input_icon_state_pointer_events, auto);
 	outline: none;
-	padding: var(--_ui5_input_icon_padding);
+	/* padding is state-aware; parent Input publishes the state-specific value via CSS custom property */
+	padding: var(--_ui5_input_icon_state_padding, var(--_ui5_input_icon_padding));
 	border-inline-start: var(--_ui5_input_icon_border);
 	min-width: 1rem;
 	min-height: 1rem;
@@ -18,38 +23,33 @@
 }
 
 .inputIcon:focus-visible {
-	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_icon_state_focus_outline_color, var(--sapContent_FocusColor));
 	outline-offset: -0.125rem;
 }
 
 .inputIcon.inputIcon--pressed {
 	background: var(--_ui5_input_icon_pressed_bg);
-	box-shadow: var(--_ui5_input_icon_box_shadow);
+	/* box-shadow / color fall back to the plain variant when no value state is set */
+	box-shadow: var(--_ui5_input_icon_state_pressed_shadow, var(--_ui5_input_icon_box_shadow));
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
-	color: var(--_ui5_input_icon_pressed_color);
+	color: var(--_ui5_input_icon_state_pressed_color, var(--_ui5_input_icon_pressed_color));
 }
 
-.inputIcon:not(.inputIcon--disabled):active {
+.inputIcon:active {
 	background-color: var(--sapButton_Active_Background);
-	box-shadow: var(--_ui5_input_icon_box_shadow);
+	box-shadow: var(--_ui5_input_icon_state_pressed_shadow, var(--_ui5_input_icon_box_shadow));
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
-	color: var(--_ui5_input_icon_pressed_color);
+	color: var(--_ui5_input_icon_state_pressed_color, var(--_ui5_input_icon_pressed_color));
 }
 
-.inputIcon:not(.inputIcon--pressed):not(:active):not(.inputIcon--disabled):hover {
+.inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	background: var(--_ui5_input_icon_hover_bg);
-	box-shadow: var(--_ui5_input_icon_box_shadow);
+	box-shadow: var(--_ui5_input_icon_state_pressed_shadow, var(--_ui5_input_icon_box_shadow));
 }
 
-.inputIcon:not(.inputIcon--disabled):hover {
+.inputIcon:hover {
 	border-inline-start: var(--_ui5_select_hover_icon_left_border);
-	box-shadow: var(--_ui5_input_icon_box_shadow);
-}
-
-/* Disabled state styling */
-.inputIcon.inputIcon--disabled {
-	opacity: var(--sapContent_DisabledOpacity);
-	cursor: default;
+	box-shadow: var(--_ui5_input_icon_state_pressed_shadow, var(--_ui5_input_icon_box_shadow));
 }
 
 
@@ -63,73 +63,8 @@
 	flex-shrink: 0;
 }
 
-/* Value state styling */
-:host([value-state="Negative"]) .inputIcon,
-:host([value-state="Critical"]) .inputIcon {
-	padding: var(--_ui5_input_error_warning_icon_padding);
-}
-
-:host([value-state="Information"]) .inputIcon {
-	padding: var(--_ui5_input_information_icon_padding);
-}
-
-:host([value-state="Negative"]) .inputIcon:not(.inputIcon--disabled):active,
-:host([value-state="Negative"]) .inputIcon.inputIcon--pressed {
-	box-shadow: var(--_ui5_input_error_icon_box_shadow);
-	color: var(--_ui5_input_icon_error_pressed_color);
-}
-
-:host([value-state="Negative"]) .inputIcon:not(.inputIcon--pressed):not(:active):not(.inputIcon--disabled):hover {
-	box-shadow: var(--_ui5_input_error_icon_box_shadow);
-}
-
-:host([value-state="Critical"]) .inputIcon:not(.inputIcon--disabled):active,
-:host([value-state="Critical"]) .inputIcon.inputIcon--pressed {
-	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
-	color: var(--_ui5_input_icon_warning_pressed_color);
-}
-
-:host([value-state="Critical"]) .inputIcon:not(.inputIcon--pressed):not(:active):not(.inputIcon--disabled):hover {
-	box-shadow: var(--_ui5_input_warning_icon_box_shadow);
-}
-
-:host([value-state="Information"]) .inputIcon:not(.inputIcon--disabled):active,
-:host([value-state="Information"]) .inputIcon.inputIcon--pressed {
-	box-shadow: var(--_ui5_input_information_icon_box_shadow);
-	color: var(--_ui5_input_icon_information_pressed_color);
-}
-
-:host([value-state="Information"]) .inputIcon:not(.inputIcon--pressed):not(:active):not(.inputIcon--disabled):hover {
-	box-shadow: var(--_ui5_input_information_icon_box_shadow);
-}
-
-:host([value-state="Positive"]) .inputIcon:not(.inputIcon--disabled):active,
-:host([value-state="Positive"]) .inputIcon.inputIcon--pressed {
-	box-shadow: var(--_ui5_input_success_icon_box_shadow);
-	color: var(--_ui5_input_icon_success_pressed_color);
-}
-
-:host([value-state="Positive"]) .inputIcon:not(.inputIcon--pressed):not(:active):not(.inputIcon--disabled):hover {
-	box-shadow: var(--_ui5_input_success_icon_box_shadow);
-}
-
-/* Override focus outline colors for value states */
-:host([value-state="Negative"]) .inputIcon.inputIcon--focused {
-	outline-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
-	border-inline-start-color: var(--_ui5_input_focused_value_state_error_focus_outline_color);
-}
-
-:host([value-state="Critical"]) .inputIcon.inputIcon--focused {
-	outline-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
-	border-inline-start-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
-}
-
-:host([value-state="Information"]) .inputIcon.inputIcon--focused {
-	outline-color: var(--sapContent_FocusColor);
-	border-inline-start-color: var(--sapContent_FocusColor);
-}
-
-:host([value-state="Positive"]) .inputIcon.inputIcon--focused {
-	outline-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
-	border-inline-start-color: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+/* Focus-outline colour when the parent Input has a value state — driven by inherited CSS custom property */
+.inputIcon.inputIcon--focused {
+	outline-color: var(--_ui5_input_icon_state_focus_outline_color, var(--sapContent_FocusColor));
+	border-inline-start-color: var(--_ui5_input_icon_state_focus_outline_color);
 }

package/src/themes/MultiComboBoxPopover.css

@@ -9,6 +9,21 @@
 	top: 0;
 	z-index: 2;
 	background: var(--sapPageHeader_Background);
+	box-sizing: border-box;
+}
+
+.ui5-mcb-select-all-header:focus,
+.ui5-mcb-select-all-header:focus-within {
+	outline: none;
+}
+
+.ui5-mcb-select-all-header:focus::after,
+.ui5-mcb-select-all-header:focus-within::after {
+	content: "";
+	position: absolute;
+	inset: 2px;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	pointer-events: none;
 }
 
 .ui5-mcb-select-all-checkbox {
@@ -17,12 +32,7 @@
 }
 
 .ui5-mcb-select-all-checkbox::part(root):focus::before {
-	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	border-radius: 0;
-	right: 2px;
-	left: 2px;
-	bottom: 0;
-	top: 0;
+	display: none;
 }
 
 .ui5-mcb-select-all-checkbox::part(label) {