@ui5/webcomponents 1.24.19 → 1.24.21

package/src/SplitButton.hbs

@@ -20,29 +20,29 @@
 		@touchstart={{_textButtonPress}}
 		@mousedown={{_textButtonPress}}
 		@mouseup={{_textButtonRelease}}
-		@focusin={{_textButtonFocusIn}}
+		@focusin={{_onInnerButtonFocusIn}}
 		@focusout={{_onFocusOut}}
 	>
 		{{#if isTextButton}}
 			<slot></slot>
 		{{/if}}
 	</ui5-button>
-		<ui5-button
-			class="ui5-split-arrow-button"
-			design="{{design}}"
-			icon="slim-arrow-down"
-			tabindex="-1"
-			?disabled="{{disabled}}"
-			?active="{{effectiveActiveArrowButton}}"
-			tooltip="{{accInfo.arrowButton.title}}"
-			.accessibilityAttributes={{accInfo.arrowButton.accessibilityAttributes}}
-			@click="{{_handleArrowButtonAction}}"
-			@mousedown={{_arrowButtonPress}}
-			@mouseup={{_arrowButtonRelease}}
-			@focusin={{_setTabIndexValue}}
-			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
-		>
-		</ui5-button>
+	<ui5-button
+		class="ui5-split-arrow-button"
+		design="{{design}}"
+		icon="slim-arrow-down"
+		tabindex="-1"
+		?disabled="{{disabled}}"
+		?active="{{effectiveActiveArrowButton}}"
+		tooltip="{{accInfo.arrowButton.title}}"
+		.accessibilityAttributes={{accInfo.arrowButton.accessibilityAttributes}}
+		@click="{{_handleArrowButtonAction}}"
+		@mousedown={{_arrowButtonPress}}
+		@mouseup={{_arrowButtonRelease}}
+		@focusin={{_onInnerButtonFocusIn}}
+		@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
+	>
+	</ui5-button>
 	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInfo.root.description}} {{accInfo.root.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 

package/src/themes/Button.css

@@ -111,9 +111,12 @@
 	pointer-events: none;
 }
 
-:host([focused]:not([active])) .ui5-button-root:after,
-:host([focused][active][design="Emphasized"]) .ui5-button-root:after,
-:host([focused][active]) .ui5-button-root:before {
+:host([desktop]:not([active])) .ui5-button-root:focus-within:after,
+:host(:not([active])) .ui5-button-root:focus-visible:after,
+:host([desktop][active][design="Emphasized"]) .ui5-button-root:focus-within:after,
+:host([active][design="Emphasized"]) .ui5-button-root:focus-visible:after,
+:host([desktop][active]) .ui5-button-root:focus-within:before,
+:host([active]) .ui5-button-root:focus-visible:before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -125,15 +128,18 @@
 	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
-:host([focused][active]) .ui5-button-root:before {
+:host([desktop][active]) .ui5-button-root:focus-within:before,
+:host([active]) .ui5-button-root:focus-visible:before {
 	border-color: var(--_ui5_button_pressed_focused_border_color);
 }
 
-:host([design="Emphasized"][focused]) .ui5-button-root:after {
+:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:after,
+:host([design="Emphasized"]) .ui5-button-root:focus-visible:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 }
 
-:host([design="Emphasized"][focused]) .ui5-button-root:before {
+:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:before,
+:host([design="Emphasized"]) .ui5-button-root:focus-visible:before  {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -246,13 +252,15 @@ bdi {
 	color: var(--sapButton_Emphasized_Active_TextColor);
 }
 
-:host([design="Emphasized"][focused]) .ui5-button-root:after {
+:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:after,
+:host([design="Emphasized"]) .ui5-button-root:focus-visible:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 	outline: none;
 }
 
 /* Belize related */
-:host([design="Emphasized"][focused][active]:not([non-interactive])) .ui5-button-root:after {
+:host([design="Emphasized"][desktop][active]:not([non-interactive])) .ui5-button-root:focus-within:after,
+:host([design="Emphasized"][active]:not([non-interactive])) .ui5-button-root:focus-visible:after  {
 	border-color: var(--_ui5_button_emphasized_focused_active_border_color);
 }
 
@@ -277,18 +285,22 @@ bdi {
 }
 
 /* SegmentedButton and ToggleButton */
-:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after,
-:host([pressed][focused]) .ui5-button-root:after {
+:host([ui5-segmented-button-item][active][desktop]) .ui5-button-root:focus-within:after,
+:host([ui5-segmented-button-item][active]) .ui5-button-root:focus-visible:after,
+:host([pressed][desktop]) .ui5-button-root:focus-within:after,
+:host([pressed]) .ui5-button-root:focus-visible:after  {
 	border-color: var(--_ui5_button_pressed_focused_border_color);
 	outline: none;
 }
 
-:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after {
+:host([ui5-segmented-button-item][desktop]:not(:last-child)) .ui5-button-root:focus-within:after,
+:host([ui5-segmented-button-item]:not(:last-child)) .ui5-button-root:focus-visible:after {
 	border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
 }
 
-:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
+:host([ui5-segmented-button-item][desktop]:not(:first-child)) .ui5-button-root:focus-within:after,
+:host([ui5-segmented-button-item]:not(:first-child)) .ui5-button-root:focus-visible:after {
 	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
 }

package/src/themes/SplitButton.css

@@ -90,11 +90,13 @@
 	color: var(--_ui5_split_button_transparent_hover_color);
 }
 
-:host([focused]) .ui5-split-button-root {
+:host([desktop]) .ui5-split-button-root:focus-within,
+.ui5-split-button-root:focus-visible{
 	outline: 0;
 }
 
-:host([focused]) .ui5-split-button-root:after {
+:host([desktop]) .ui5-split-button-root:focus-within:after,
+.ui5-split-button-root:focus-visible:after {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -104,7 +106,8 @@
 	border-radius: var(--_ui5_split_button_focused_border_radius);
 }
 
-:host([design="Emphasized"][focused]) .ui5-split-button-root:after {
+:host([design="Emphasized"][desktop]) .ui5-split-button-root:focus-within:after,
+:host([design="Emphasized"]) .ui5-split-button-root:focus-visible:after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }
 
@@ -305,12 +308,14 @@
 
 
 
-.ui5-split-arrow-button[focused]::part(button)::after {
+.ui5-split-arrow-button[desktop]::part(button):focus-within::after,
+.ui5-split-arrow-button::part(button):focus-visible::after {
 	border-start-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 	border-end-start-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 }
 
-.ui5-split-text-button[focused]::part(button)::after {
+.ui5-split-arrow-button[desktop]::part(button):focus-within::after,
+.ui5-split-text-button::part(button):focus-visible::after  {
 	border-start-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 	border-end-end-radius: var(--_ui5_split_button_inner_focused_border_radius_inner);
 }

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);