@ui5/webcomponents 2.3.0 → 2.4.0-rc.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.3.0",
+  "version": "2.4.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2572,7 +2572,7 @@
         },
         {
           "name": "ui5-dialog",
-          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -2655,19 +2655,19 @@
           "events": [
             {
               "name": "before-open",
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
             },
             {
               "name": "open",
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened."
             },
             {
               "name": "before-close",
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
             },
             {
               "name": "close",
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed."
             }
           ],
           "js": {
@@ -2738,19 +2738,19 @@
             "events": [
               {
                 "name": "before-open",
-                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
               },
               {
                 "name": "open",
-                "description": "Fired after the component is opened. **This event does not bubble.**"
+                "description": "Fired after the component is opened."
               },
               {
                 "name": "before-close",
-                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
               },
               {
                 "name": "close",
-                "description": "Fired after the component is closed. **This event does not bubble.**"
+                "description": "Fired after the component is closed."
               }
             ]
           }
@@ -5361,7 +5361,7 @@
         },
         {
           "name": "ui5-popover",
-          "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -5465,19 +5465,19 @@
           "events": [
             {
               "name": "before-open",
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
             },
             {
               "name": "open",
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened."
             },
             {
               "name": "before-close",
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
             },
             {
               "name": "close",
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed."
             }
           ],
           "js": {
@@ -5567,19 +5567,19 @@
             "events": [
               {
                 "name": "before-open",
-                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
               },
               {
                 "name": "open",
-                "description": "Fired after the component is opened. **This event does not bubble.**"
+                "description": "Fired after the component is opened."
               },
               {
                 "name": "before-close",
-                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
               },
               {
                 "name": "close",
-                "description": "Fired after the component is closed. **This event does not bubble.**"
+                "description": "Fired after the component is closed."
               }
             ]
           }
@@ -6039,7 +6039,7 @@
         },
         {
           "name": "ui5-responsive-popover",
-          "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -6133,19 +6133,19 @@
           "events": [
             {
               "name": "before-open",
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
             },
             {
               "name": "open",
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened."
             },
             {
               "name": "before-close",
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
             },
             {
               "name": "close",
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed."
             }
           ],
           "js": {
@@ -6235,19 +6235,19 @@
             "events": [
               {
                 "name": "before-open",
-                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
               },
               {
                 "name": "open",
-                "description": "Fired after the component is opened. **This event does not bubble.**"
+                "description": "Fired after the component is opened."
               },
               {
                 "name": "before-close",
-                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
               },
               {
                 "name": "close",
-                "description": "Fired after the component is closed. **This event does not bubble.**"
+                "description": "Fired after the component is closed."
               }
             ]
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.3.0",
+  "version": "2.4.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,17 +50,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.3.0",
-    "@ui5/webcomponents-icons": "2.3.0",
-    "@ui5/webcomponents-icons-business-suite": "2.3.0",
-    "@ui5/webcomponents-icons-tnt": "2.3.0",
-    "@ui5/webcomponents-localization": "2.3.0",
-    "@ui5/webcomponents-theming": "2.3.0"
+    "@ui5/webcomponents-base": "2.4.0-rc.0",
+    "@ui5/webcomponents-icons": "2.4.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.4.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.4.0-rc.0",
+    "@ui5/webcomponents-localization": "2.4.0-rc.0",
+    "@ui5/webcomponents-theming": "2.4.0-rc.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.3.0",
+    "@ui5/webcomponents-tools": "2.4.0-rc.0",
     "chromedriver": "^128.0.3",
     "lit": "^2.0.0"
   },
-  "gitHead": "ce9e1d4d18110e7d6352f63347ed80249588aff9"
+  "gitHead": "464fc0e663f3e1142cdbba076cad777cf6ab2738"
 }

package/src/Link.hbs

@@ -13,7 +13,6 @@
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
 	@focusin={{_onfocusin}}
-	@focusout={{_onfocusout}}
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>

package/src/List.hbs

@@ -19,7 +19,7 @@
 	<ui5-busy-indicator
 		id="{{_id}}-busyIndicator"
 		delay="{{loadingDelay}}"
-		?active="{{loading}}"
+		?active="{{showBusyIndicatorOverlay}}"
 		class="ui5-list-busy-indicator"
 	>
 	<div class="ui5-list-scroll-container">
@@ -96,6 +96,12 @@
 			@mouseup="{{_onLoadMoreMouseup}}"
 			growing-button-inner
 		>
+			{{#if loading}}
+				<ui5-busy-indicator
+					delay="{{loadingDelay}}"
+					active>
+				</ui5-busy-indicator>
+			{{/if}}
 			<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
 		</div>
 	</div>

package/src/TimeSelectionClocks.hbs

@@ -5,7 +5,6 @@
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@focusin={{_clocksFocusIn}}
-	@focusout={{_clocksFocusOut}}
 	format-pattern="{{formatPattern}}"
 >
 	<div
@@ -24,7 +23,6 @@
 			.valueText="{{this.textValue}}"
 			.accessibleName="{{this.label}}"
 			.pressed="{{this.active}}"
-			?focused="{{this.focused}}"
 			@focusin="{{../_buttonFocusIn}}"
 		>{{this.stringValue}}</ui5-toggle-spin-button>
 	{{/each}}

package/src/themes/ColorPaletteItem.css

@@ -112,7 +112,7 @@
 
 :host([selected]:not([_disabled]):not([on-phone]):not(:focus):not(:hover)) .ui5-cp-item::after,
 :host([selected]:not([_disabled]):not([on-phone]):not(:focus):hover) .ui5-cp-item::after,
-:host(:not([selected]):hover) .ui5-cp-item::after {
+:host(:not([selected]):not([on-phone]):hover) .ui5-cp-item::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -135,4 +135,26 @@
 	border: var(--_ui5_color-palette-item-before-focus-color);
 	border-radius: var(--_ui5_color-palette-item-before-focus-border-radius);
 	pointer-events: none;
+}
+
+/* Focus on mobile ONLY with external keyboard/mouse */
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before,
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	pointer-events: none;
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-before-focus-color);
+	border-radius: var(--_ui5_color-palette-item-after-focus-border-radius);
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-after-mobile-focus-border);
 }

package/src/themes/GrowingButton.css

@@ -13,7 +13,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	flex-direction: column;
+	flex-direction: row;
 	min-height: var(--_ui5_load_more_text_height);
 	width: 100%;
 	color: var(--sapButton_TextColor);
@@ -46,7 +46,6 @@
 
 [growing-button-text],
 [growing-button-subtext] {
-	width: 100%;
 	text-align: center;
 	font-family: "72override", var(--sapFontFamily);
 	white-space: nowrap;
@@ -62,6 +61,10 @@
 	font-weight: bold;
 }
 
+:host([loading]) [growing-button-text]{
+	padding-left: 0.5rem;
+}
+
 [growing-button-subtext] {
 	font-size: var(--sapFontSize);
 	padding: var(--_ui5_load_more_desc_padding);

package/src/themes/Input.css

@@ -108,7 +108,6 @@
 	-moz-appearance: textfield;
 	padding: var(--_ui5_input_inner_padding);
 	box-sizing: border-box;
-	min-width: var(--_ui5_input_min_width);
 	width: 100%;
 	text-align: inherit;
 	text-overflow: ellipsis;

package/src/themes/Link.css

@@ -103,21 +103,25 @@
 	text-overflow: ellipsis;
 }
 
-:host([focused]) .ui5-link-root,
-:host([design="Subtle"][focused]) .ui5-link-root {
+.ui5-link-root:focus-visible,
+:host([desktop]) .ui5-link-root:focus-within,
+:host([design="Subtle"]) .ui5-link-root:focus-visible,
+:host([design="Subtle"][desktop]) .ui5-link-root:focus-within {
 	background-color: var(--_ui5_link_focus_background_color);
 	outline: var(--_ui5_link_outline);
 	border-radius: var(--_ui5_link_focus_border-radius);
 	text-shadow: none;
+	color: var(--_ui5_link_focus_color);
 }
 
-:host([focused]),
-:host([design="Subtle"][focused]) {
-	color:  var(--_ui5_link_focus_color);
+:host(:not([desktop])) .ui5-link-root:focus-visible,
+:host([desktop]:focus-within),
+:host([design="Subtle"][desktop]:focus-within) {
 	text-decoration: var(--_ui5_link_focus_text_decoration);
 }
 
-:host([focused]:hover:not(:active)) {
+:host([desktop]:hover:not(:active):focus-within),
+:host([design="Subtle"][desktop]:hover:not(:active):focus-within) {
 	color: var(--_ui5_link_focused_hover_text_color);
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

package/src/themes/ListItemBase.css

@@ -15,7 +15,7 @@
 }
 
 /* actionable (type="Active" + desktop) */
-:host([actionable]:not([disabled])) {
+:host([actionable]:not([disabled]):not(ui5-li-group-header)) {
 	cursor: pointer;
 }
 
@@ -30,8 +30,8 @@
 }
 
 /* hovered */
-:host([actionable]:not([active], [selected]):hover) {
-	background-color: var(--sapList_Hover_Background);
+:host([actionable]:not([active]):not([selected]):not(ui5-li-group-header):hover) {
+    background-color: var(--sapList_Hover_Background);
 }
 
 /* selected and hovered */

package/src/themes/ListItemGroupHeader.css

@@ -10,6 +10,10 @@
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
 }
 
+:host([actionable]:not([disabled])) {
+	cursor: default;
+}
+
 .ui5-li-root.ui5-ghli-root {
 	padding-top: 0.5rem;
 	color: currentColor;

package/src/themes/Switch.css

@@ -120,7 +120,8 @@
 }
 
 /* switch focused */
-.ui5-switch--desktop.ui5-switch-root:focus::after {
+.ui5-switch-root:focus-visible::after,
+.ui5-switch--desktop.ui5-switch-root:focus-within::after {
 	content: "";
 	position: absolute;
 	inset-inline-start: var(--_ui5_switch_root_outline_left);

package/src/themes/base/ColorPalette-parameters.css

@@ -24,4 +24,7 @@
 	--_ui5_color-palette-item-after-focus-not-selected-border: 0.0625rem dotted black;
 	--_ui5_color-palette-item-after-not-focus-color: 0.0625rem solid var(--sapGroup_ContentBackground);
 	--_ui5_color-palette-item-selected-focused-border: 0.0625rem solid var(--sapGroup_ContentBackground);
+	--_ui5-color-palette-item-mobile-focus-inset: 0.625rem;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem;
+	--_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color);
 }

package/src/themes/sap_horizon/ColorPalette-parameters.css

@@ -21,4 +21,7 @@
 	--_ui5_color-palette-item-selected-focused-border-before: -0.0625rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
 }

package/src/themes/sap_horizon_dark/ColorPalette-parameters.css

@@ -21,4 +21,7 @@
 	--_ui5_color-palette-item-selected-focused-border-before: -0.0625rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }

package/src/themes/sap_horizon_dark_exp/ColorPalette-parameters.css

@@ -19,4 +19,7 @@
 	--_ui5_color-palette-item-hover-inner-border-radius: 0.375rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }

package/src/themes/sap_horizon_exp/ColorPalette-parameters.css

@@ -19,4 +19,7 @@
 	--_ui5_color-palette-item-hover-inner-border-radius: 0.375rem;
 	--_ui5_color-palette-item-after-focus-not-selected-border: none;
 	--_ui5_color-palette-item-selected-focused-border: none;
+	--_ui5_color-palette-item-after-mobile-focus-border: none;
+	--_ui5-color-palette-item-mobile-focus-inset: 0px;
+	--_ui5_color-palette-item-mobile-focus-sides-inset: -0.375rem -0.375rem;
 }