@sapudex/web-components 2.61.0 → 2.63.0

package/dist/messagebundle.properties

@@ -242,6 +242,9 @@ COLLAPSE=Collapse
 EXPANDED=expanded
 COLLAPSED=collapsed
 
+#Supplemental position announcements for grouped Select Box navigation
+SELECT_BOX_ITEM_LEVEL=level {0}
+
 #SecondaryNavigationSubItem Aria label for back button
 BACK_BUTTON_LABEL=return back
 

package/dist/vscode.html-custom-data.json

@@ -72,7 +72,7 @@
     },
     {
       "name": "udex-accordion-spotlight",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nVertical accordion navigation with spotlight layout. Items are listed on the\nleft; the expanded panel is displayed on the right (desktop) or inline below\nthe heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-spotlight</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fired when the expanded item clicked.\n\n### **Slots:**\n - **default** - The slotted AccordionSpotlightItem elements.\n- **footer** - Defines optional content rendered below the navigation items.\nUse to place a button or any action element beneath the items.\n- **media** - Persistent media area shown in <code>Static</code> media mode.\nPlace an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\nit remains visible regardless of which item is currently expanded.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nVertical accordion navigation with spotlight layout. Items are listed on the\nleft; the expanded panel is displayed on the right (desktop) or inline below\nthe heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-spotlight</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fired when the expanded item clicked.\n\n### **Slots:**\n - **default** - The slotted AccordionSpotlightItem elements.\n\n<code>invalidateOnChildChange</code> lets the component react when an item's\n<code>selected</code> property is set programmatically, so\n<code>item.selected = true</code> switches the expanded item at runtime.\n- **footer** - Defines optional content rendered below the navigation items.\nUse to place a button or any action element beneath the items.\n- **media** - Persistent media area shown in <code>Static</code> media mode.\nPlace an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\nit remains visible regardless of which item is currently expanded.",
       "attributes": [
         {
           "name": "auto-play",
@@ -118,7 +118,7 @@
         },
         {
           "name": "selected",
-          "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection.",
+          "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection, or at runtime\n(<code>item.selected = true</code>) to expand this item programmatically —\nthe parent deselects the other items automatically.",
           "values": []
         },
         {
@@ -2178,6 +2178,16 @@
       "name": "udex-masthead-country-selector",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>masthead-country-selector</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadCountrySelector.js\";</code>\n---\n\n\n### **Events:**\n - **country-item-click** - Fires when region item is clicked\n- **country-selector-search** - Fired event when the user typed to search field.\n- **region-item-click** - Fires when region item is clicked",
       "attributes": [
+        {
+          "name": "accessible-name-search",
+          "description": "Defines the accessible ARIA name of the search field.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-search-reset-icon",
+          "description": "Defines the accessible ARIA name of the search reset icon.",
+          "values": []
+        },
         {
           "name": "active-country-code",
           "description": "Defines active country code of the regions menu",
@@ -3244,7 +3254,7 @@
         },
         {
           "name": "open-suggestion-popup",
-          "description": "Defines open suggestion popover.",
+          "description": "Programmatically controls the visibility of the suggestion popover.\nSet to <code>true</code> to open the popover; set to <code>false</code> to close it.\nUse this property when the host application needs to control the popover state manually,\nfor example after receiving an asynchronous API response.\nThe <code>suggestionList</code> property must be populated with data for suggestions to appear.\nUse either this property or <code>showSuggestedPopover</code> — avoid using both simultaneously.",
           "values": []
         },
         {
@@ -3259,7 +3269,7 @@
         },
         {
           "name": "show-suggested-popover",
-          "description": "Defines display the suggestion popover in the component.",
+          "description": "Enables the suggestion popover to open automatically as the user types.\nThe popover opens when the input has 2 or more characters and closes when cleared.\nUse this property for automatic, input-driven popover management.\nFor programmatic control from the host application, use <code>openSuggestionPopup</code> instead.",
           "values": []
         },
         {
@@ -3948,7 +3958,7 @@
     },
     {
       "name": "udex-side-navigation",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n\n\n### **Slots:**\n - **additionalContent** - Defines additional free-form content rendered in a dedicated area at the bottom\nof the component, below the navigation items.",
       "attributes": [
         {
           "name": "is-fixed-in-place",
@@ -3982,7 +3992,7 @@
     },
     {
       "name": "udex-side-navigation-mobile",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-mobile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items.\n- **fixedItems** - Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-mobile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n\n\n### **Slots:**\n - **additionalContent** - Defines additional free-form content rendered in a dedicated area at the bottom\nof the dropdown, below the navigation items.\n- **default** - Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items.\n- **fixedItems** - Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)",
       "attributes": [],
       "references": []
     },

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.61.0",
+  "version": "2.63.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -180,7 +180,7 @@
         },
         {
           "name": "udex-accordion-spotlight",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nVertical accordion navigation with spotlight layout. Items are listed on the\nleft; the expanded panel is displayed on the right (desktop) or inline below\nthe heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-spotlight</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fired when the expanded item clicked.\n\n### **Slots:**\n - **default** - The slotted AccordionSpotlightItem elements.\n- **footer** - Defines optional content rendered below the navigation items.\nUse to place a button or any action element beneath the items.\n- **media** - Persistent media area shown in <code>Static</code> media mode.\nPlace an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\nit remains visible regardless of which item is currently expanded.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\nVertical accordion navigation with spotlight layout. Items are listed on the\nleft; the expanded panel is displayed on the right (desktop) or inline below\nthe heading (mobile). Follows the WAI-ARIA APG Accordion pattern.\n\n<h3>Usage</h3>\n\nFor the <code>udex-accordion-spotlight</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/AccordionSpotlight.js\";</code>\n---\n\n\n### **Events:**\n - **item-click** - Fired when the expanded item clicked.\n\n### **Slots:**\n - **default** - The slotted AccordionSpotlightItem elements.\n\n<code>invalidateOnChildChange</code> lets the component react when an item's\n<code>selected</code> property is set programmatically, so\n<code>item.selected = true</code> switches the expanded item at runtime.\n- **footer** - Defines optional content rendered below the navigation items.\nUse to place a button or any action element beneath the items.\n- **media** - Persistent media area shown in <code>Static</code> media mode.\nPlace an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;\nit remains visible regardless of which item is currently expanded.",
           "doc-url": "",
           "attributes": [
             {
@@ -220,7 +220,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "The slotted AccordionSpotlightItem elements."
+              "description": "The slotted AccordionSpotlightItem elements.\n\n<code>invalidateOnChildChange</code> lets the component react when an item's\n<code>selected</code> property is set programmatically, so\n<code>item.selected = true</code> switches the expanded item at runtime."
             },
             {
               "name": "footer",
@@ -290,7 +290,7 @@
             },
             {
               "name": "selected",
-              "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection.",
+              "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection, or at runtime\n(<code>item.selected = true</code>) to expand this item programmatically —\nthe parent deselects the other items automatically.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -319,7 +319,7 @@
               },
               {
                 "name": "selected",
-                "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection.",
+                "description": "Whether this item is currently expanded.\nSet on the element directly to control the initial selection, or at runtime\n(<code>item.selected = true</code>) to expand this item programmatically —\nthe parent deselects the other items automatically.",
                 "value": { "type": "boolean" }
               },
               {
@@ -4939,6 +4939,16 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>masthead-country-selector</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadCountrySelector.js\";</code>\n---\n\n\n### **Events:**\n - **country-item-click** - Fires when region item is clicked\n- **country-selector-search** - Fired event when the user typed to search field.\n- **region-item-click** - Fires when region item is clicked",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name-search",
+              "description": "Defines the accessible ARIA name of the search field.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "accessible-name-search-reset-icon",
+              "description": "Defines the accessible ARIA name of the search reset icon.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "active-country-code",
               "description": "Defines active country code of the regions menu",
@@ -5001,6 +5011,16 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name-search",
+                "description": "Defines the accessible ARIA name of the search field.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "accessible-name-search-reset-icon",
+                "description": "Defines the accessible ARIA name of the search reset icon.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "active-country-code",
                 "description": "Defines active country code of the regions menu",
@@ -7441,7 +7461,7 @@
             },
             {
               "name": "open-suggestion-popup",
-              "description": "Defines open suggestion popover.",
+              "description": "Programmatically controls the visibility of the suggestion popover.\nSet to <code>true</code> to open the popover; set to <code>false</code> to close it.\nUse this property when the host application needs to control the popover state manually,\nfor example after receiving an asynchronous API response.\nThe <code>suggestionList</code> property must be populated with data for suggestions to appear.\nUse either this property or <code>showSuggestedPopover</code> — avoid using both simultaneously.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -7456,7 +7476,7 @@
             },
             {
               "name": "show-suggested-popover",
-              "description": "Defines display the suggestion popover in the component.",
+              "description": "Enables the suggestion popover to open automatically as the user types.\nThe popover opens when the input has 2 or more characters and closes when cleared.\nUse this property for automatic, input-driven popover management.\nFor programmatic control from the host application, use <code>openSuggestionPopup</code> instead.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -7584,7 +7604,7 @@
               },
               {
                 "name": "open-suggestion-popup",
-                "description": "Defines open suggestion popover.",
+                "description": "Programmatically controls the visibility of the suggestion popover.\nSet to <code>true</code> to open the popover; set to <code>false</code> to close it.\nUse this property when the host application needs to control the popover state manually,\nfor example after receiving an asynchronous API response.\nThe <code>suggestionList</code> property must be populated with data for suggestions to appear.\nUse either this property or <code>showSuggestedPopover</code> — avoid using both simultaneously.",
                 "value": { "type": "boolean" }
               },
               {
@@ -7599,7 +7619,7 @@
               },
               {
                 "name": "show-suggested-popover",
-                "description": "Defines display the suggestion popover in the component.",
+                "description": "Enables the suggestion popover to open automatically as the user types.\nThe popover opens when the input has 2 or more characters and closes when cleared.\nUse this property for automatic, input-driven popover management.\nFor programmatic control from the host application, use <code>openSuggestionPopup</code> instead.",
                 "value": { "type": "boolean" }
               },
               {
@@ -9130,7 +9150,7 @@
         },
         {
           "name": "udex-side-navigation",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n\n\n### **Slots:**\n - **additionalContent** - Defines additional free-form content rendered in a dedicated area at the bottom\nof the component, below the navigation items.",
           "doc-url": "",
           "attributes": [
             {
@@ -9152,6 +9172,12 @@
               }
             }
           ],
+          "slots": [
+            {
+              "name": "additionalContent",
+              "description": "Defines additional free-form content rendered in a dedicated area at the bottom\nof the component, below the navigation items."
+            }
+          ],
           "events": [],
           "js": {
             "properties": [
@@ -9192,10 +9218,14 @@
         },
         {
           "name": "udex-side-navigation-mobile",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-mobile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items.\n- **fixedItems** - Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-mobile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n---\n\n\n### **Slots:**\n - **additionalContent** - Defines additional free-form content rendered in a dedicated area at the bottom\nof the dropdown, below the navigation items.\n- **default** - Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items.\n- **fixedItems** - Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)",
           "doc-url": "",
           "attributes": [],
           "slots": [
+            {
+              "name": "additionalContent",
+              "description": "Defines additional free-form content rendered in a dedicated area at the bottom\nof the dropdown, below the navigation items."
+            },
             {
               "name": "default",
               "description": "Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items."

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.61.0",
+  "version": "2.63.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.27.0",
-    "@ui5/webcomponents-base": "2.27.0",
-    "@ui5/webcomponents-fiori": "2.27.0",
-    "@ui5/webcomponents-icons": "2.27.0",
-    "@ui5/webcomponents-localization": "2.27.0",
-    "@ui5/webcomponents-theming": "2.27.0",
+    "@ui5/webcomponents": "2.28.1",
+    "@ui5/webcomponents-base": "2.28.1",
+    "@ui5/webcomponents-fiori": "2.28.1",
+    "@ui5/webcomponents-icons": "2.28.1",
+    "@ui5/webcomponents-localization": "2.28.1",
+    "@ui5/webcomponents-theming": "2.28.1",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.27.0",
+    "@ui5/webcomponents-tools": "2.28.1",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/AccordionItemTemplate.tsx

@@ -56,6 +56,7 @@ export default function AccordionItemTemplate(this: AccordionItem) {
       <div
         id={ariaControlsId}
         aria-hidden={!this.expanded}
+        inert={!this.expanded}
         aria-labelledby={ariaLabelledbyId}
         className={`${rootClass}__content ${titleClass}`}
         onKeyDown={this.contentKeydown}

package/src/AccordionSpotlight.ts

@@ -75,13 +75,14 @@ class UDExAccordionSpotlight extends UI5Element {
   };
 
   /**
-   * The index of the currently expanded item (0-based).
-   * Derived from items' <code>selected</code> attribute; kept in sync by the parent.
+   * The index of the currently expanded item (0-based), or <code>-1</code> when
+   * no item is expanded. Derived from items' <code>selected</code> attribute;
+   * kept in sync by the parent.
    *
    * @private
    */
   @property({ type: Number, noAttribute: true })
-    _selectedIndex: number = 0;
+    _selectedIndex: number = -1;
 
   /**
    * Vertical alignment of the navigation sidebar relative to the content panel.
@@ -155,9 +156,18 @@ class UDExAccordionSpotlight extends UI5Element {
   /**
    * The slotted AccordionSpotlightItem elements.
    *
+   * <code>invalidateOnChildChange</code> lets the component react when an item's
+   * <code>selected</code> property is set programmatically, so
+   * <code>item.selected = true</code> switches the expanded item at runtime.
+   *
    * @public
    */
-  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+  @slot({
+    type: HTMLElement,
+    "default": true,
+    individualSlots: true,
+    invalidateOnChildChange: true,
+  })
     items!: DefaultSlot<AccordionSpotlightItem>;
 
   /**
@@ -235,8 +245,27 @@ class UDExAccordionSpotlight extends UI5Element {
       return;
     }
 
-    const foundIndex = this.items.findIndex(item => item.selected);
-    const activeIndex = foundIndex === -1 ? 0 : foundIndex;
+    const selectedIndexes = this.items.reduce<number[]>((acc, item, index) => {
+      if (item.selected) {
+        acc.push(index);
+      }
+      return acc;
+    }, []);
+
+    // Prefer a selected item that differs from the currently tracked index — it
+    // signals a selection requested via `item.selected = true`. Otherwise keep
+    // the current index if it is still selected. When no item is selected, leave
+    // the component with no active item (-1) rather than forcing the first one.
+    let activeIndex: number;
+    const newlySelected = selectedIndexes.find(index => index !== this._selectedIndex);
+    if (newlySelected !== undefined) {
+      activeIndex = newlySelected;
+    } else if (selectedIndexes.includes(this._selectedIndex)) {
+      activeIndex = this._selectedIndex;
+    } else {
+      activeIndex = selectedIndexes[0] ?? -1;
+    }
+
     this._selectedIndex = activeIndex;
 
     this.items.forEach((item, index) => {

package/src/AccordionSpotlightItem.ts

@@ -57,7 +57,9 @@ class UDExAccordionSpotlightItem extends UI5Element {
 
   /**
    * Whether this item is currently expanded.
-   * Set on the element directly to control the initial selection.
+   * Set on the element directly to control the initial selection, or at runtime
+   * (<code>item.selected = true</code>) to expand this item programmatically —
+   * the parent deselects the other items automatically.
    *
    * @default false
    * @public

package/src/Carousel.ts

@@ -369,8 +369,7 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateArrowLeft();
-    this._calculateDisabledButtonsState();
+    this._navigateToPage(-1);
   }
 
   _nextButtonClick() {
@@ -378,7 +377,27 @@ class UDExCarousel extends UI5Element {
       return;
     }
 
-    this._carousel.navigateArrowRight();
+    this._navigateToPage(1);
+  }
+
+  _navigateToPage(direction: 1 | -1) {
+    const carousel = this._carousel;
+    if (!carousel) {
+      return;
+    }
+
+    let newPageIndex = carousel._currentPageIndex + direction;
+
+    if (this.cyclic) {
+      const lastPageIndex = carousel.items.length - carousel.effectiveItemsPerPage;
+      if (newPageIndex > lastPageIndex) {
+        newPageIndex = 0;
+      } else if (newPageIndex < 0) {
+        newPageIndex = carousel.items.length - 1;
+      }
+    }
+
+    carousel._changePageIndex(newPageIndex);
     this._calculateDisabledButtonsState();
   }
 

package/src/CountrySelector.ts

@@ -154,9 +154,7 @@ class UDExCountrySelector extends UDExSelectBase {
   }
 
   handleDropdownClose(): void {
-    this._setActiveDescendant(null);
-    this._open = false;
-    this.fireEventDropdownClose();
+    this._finishDropdownClose();
   }
 
   handleOutsideClick(): void {

package/src/List.ts

@@ -174,6 +174,14 @@ class UDExList extends UI5Element {
   static i18nBundle: I18nBundle;
 
   onBeforeRendering(): void {
+    if (this._hasHostAriaRole) {
+      const label = this.modeSelected ? this.ariaLabelModeText : this.singleContentAriaLabel;
+      if (label) {
+        this.setAttribute("aria-label", label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
     this.prepareListItemsMode();
     this._focusHandler.resetMatchingItems();
     this._focusHandler._focusableListItems = this.getKeyboardNavigationItems();
@@ -495,7 +503,7 @@ class UDExList extends UI5Element {
   }
 
   prepareListItemsMode(): void {
-    const treeMode = this._hasCollapsibleGroups;
+    const treeMode = this.modeSelected && this._hasCollapsibleGroups;
     this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
@@ -503,10 +511,14 @@ class UDExList extends UI5Element {
       item._icon = this.itemIcon;
       item._tabIndex = this.getTabIndex(index, item);
       if (item.isGroup) {
-        // Only upgrade _treeMode to true; never force it to false, since
-        // SearchableListBaseTemplate may have set _tree-mode=true externally.
-        if (treeMode) {
+        // Track only List-owned upgrades so mode changes can reset them without
+        // removing tree semantics supplied by SelectBox/SearchableListBase.
+        if (treeMode && !item._treeMode) {
           item._treeMode = true;
+          item.setAttribute("_list-managed-tree-mode", "");
+        } else if (!treeMode && item.hasAttribute("_list-managed-tree-mode")) {
+          item._treeMode = false;
+          item.removeAttribute("_list-managed-tree-mode");
         }
       } else if (treeMode) {
         // Set accessibleRole for standalone List tree mode.
@@ -615,6 +627,11 @@ class UDExList extends UI5Element {
     return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
   }
 
+  /** @private Whether the list's owning role is already exposed on its host. */
+  get _hasHostAriaRole(): boolean {
+    return ["tree", "listbox", "list"].includes(this.getAttribute("role") || "");
+  }
+
   /**
    * Role for SingleContent mode. listbox/option is for selection widgets only;
    * SingleContent is informational so "list"/"listitem" is the correct semantic.

package/src/ListGroupHeader.ts

@@ -7,7 +7,7 @@ import {
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import ListGroupHeaderTemplate from "./ListGroupHeaderTemplate.js";
-import { UDExListItemSize } from "./types/List.js";
+import { UDExListItemSize, UDExListMode } from "./types/List.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 import type UDExListItemBase from "./ListItemBase.js";
 
@@ -85,6 +85,10 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
+    if (this.mode === UDExListMode.SingleContent && (isEnter(e) || isSpace(e))) {
+      this.handleCollapseIconClick(e);
+      return;
+    }
     if (isLeft(e) && !this.collapsed) {
       this.handleCollapseIconClick(e);
       return;

package/src/ListGroupHeaderBase.ts

@@ -4,6 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import UDExListItemBase from "./ListItemBase.js";
+import { UDExListMode } from "./types/List.js";
 
 const listGroupHeaderClass: string = "udex-list__group-header";
 
@@ -220,7 +221,14 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get isTreeAccessibleRole(): boolean {
-    return this._treeMode;
+    // Host-owned tree semantics must not depend on the child's rendering order
+    // or a subsequent List mode-preparation pass.
+    return this._treeMode || (this._useHostAriaRole && this.getAttribute("role") === "treeitem");
+  }
+
+  /** @private Informational groups outside a host-owned or externally supplied tree. */
+  get isSingleContentList(): boolean {
+    return this.mode === UDExListMode.SingleContent && !this._treeMode && !this._useHostAriaRole;
   }
 
   // FilterMenu real-focus SingleSelect non-collapsible group: its options are
@@ -263,6 +271,9 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
+    if (this.isSingleContentList) {
+      return "listitem";
+    }
     // Tree mode keeps the treeitem/group nesting; per-group-listbox mode moves the
     // single labelled role="listbox" onto the inner options wrapper — the outer div
     // is transparent so screen readers don't announce a redundant "group" around it.
@@ -273,7 +284,10 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get contentRegionRole(): string {
-    return this._treeMode ? "group" : "region";
+    if (this.isSingleContentList) {
+      return "list";
+    }
+    return this.isTreeAccessibleRole ? "group" : "region";
   }
 
   get nonCollapsibleContainerRole(): string {