@sapudex/web-components 2.59.0 → 2.61.0

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

@@ -3312,7 +3312,14 @@
         {
           "name": "max-dropdown-height",
           "description": "Defines the height of the dropdown opened on mobile screen.",
-          "values": []
+          "values": [
+            { "name": "`${number}px`" },
+            { "name": "`${number}vh`" },
+            { "name": "`${number}vw`" },
+            { "name": "`${number}rem`" },
+            { "name": "`${number}em`" },
+            { "name": "`${number}%`" }
+          ]
         },
         {
           "name": "mobile-menu-opener-aria-label",
@@ -3947,6 +3954,16 @@
           "name": "is-fixed-in-place",
           "description": "Defines if Side Navigation is fixed in place or scrollable with the content.",
           "values": []
+        },
+        {
+          "name": "placement",
+          "description": "Defines which side the navigation panel is on.",
+          "values": [{ "name": "Left" }, { "name": "Right" }]
+        },
+        {
+          "name": "variant",
+          "description": "Defines the variant of the component.",
+          "values": [{ "name": "Full" }, { "name": "Content" }]
         }
       ],
       "references": []
@@ -3971,8 +3988,14 @@
     },
     {
       "name": "udex-side-navigation-sub-item",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-sub-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n---\n",
-      "attributes": [],
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-sub-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the level-3 sub-items slotted inside this sub-item.",
+      "attributes": [
+        {
+          "name": "expanded",
+          "description": "Defines whether the sub-item is expanded (shows level-3 children).",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -4409,6 +4432,15 @@
           "name": "icon",
           "description": "Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.",
           "values": []
+        },
+        {
+          "name": "vertical-align",
+          "description": "Determines the vertical alignment of the cell content.",
+          "values": [
+            { "name": "Top" },
+            { "name": "Center" },
+            { "name": "Bottom" }
+          ]
         }
       ],
       "references": []
@@ -4487,6 +4519,15 @@
           "name": "interactive",
           "description": "Defines the interactive state of the row.",
           "values": []
+        },
+        {
+          "name": "vertical-align",
+          "description": "Determines the vertical alignment of all cells in the row.\nApplies to every cell that does not define its own verticalAlign.",
+          "values": [
+            { "name": "Top" },
+            { "name": "Center" },
+            { "name": "Bottom" }
+          ]
         }
       ],
       "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.59.0",
+  "version": "2.61.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -7687,7 +7687,9 @@
             {
               "name": "max-dropdown-height",
               "description": "Defines the height of the dropdown opened on mobile screen.",
-              "value": { "type": "string" }
+              "value": {
+                "type": "`${number}px` | `${number}vh` | `${number}vw` | `${number}rem` | `${number}em` | `${number}%`"
+              }
             },
             {
               "name": "mobile-menu-opener-aria-label",
@@ -7733,7 +7735,9 @@
               {
                 "name": "max-dropdown-height",
                 "description": "Defines the height of the dropdown opened on mobile screen.",
-                "value": { "type": "string" }
+                "value": {
+                  "type": "`${number}px` | `${number}vh` | `${number}vw` | `${number}rem` | `${number}em` | `${number}%`"
+                }
               },
               {
                 "name": "mobile-menu-opener-aria-label",
@@ -9133,6 +9137,19 @@
               "name": "is-fixed-in-place",
               "description": "Defines if Side Navigation is fixed in place or scrollable with the content.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "Defines which side the navigation panel is on.",
+              "value": { "type": "\"Left\" | \"Right\"", "default": "\"Left\"" }
+            },
+            {
+              "name": "variant",
+              "description": "Defines the variant of the component.",
+              "value": {
+                "type": "\"Full\" | \"Content\"",
+                "default": "\"Full\""
+              }
             }
           ],
           "events": [],
@@ -9142,6 +9159,16 @@
                 "name": "is-fixed-in-place",
                 "description": "Defines if Side Navigation is fixed in place or scrollable with the content.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "placement",
+                "description": "Defines which side the navigation panel is on.",
+                "value": { "type": "\"Left\" | \"Right\"" }
+              },
+              {
+                "name": "variant",
+                "description": "Defines the variant of the component.",
+                "value": { "type": "\"Full\" | \"Content\"" }
               }
             ],
             "events": []
@@ -9183,11 +9210,32 @@
         },
         {
           "name": "udex-side-navigation-sub-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-side-navigation-sub-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigationSubItem.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-sub-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the level-3 sub-items slotted inside this sub-item.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "expanded",
+              "description": "Defines whether the sub-item is expanded (shows level-3 children).",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the level-3 sub-items slotted inside this sub-item."
+            }
+          ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "expanded",
+                "description": "Defines whether the sub-item is expanded (shows level-3 children).",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "udex-slider",
@@ -10088,6 +10136,14 @@
               "name": "icon",
               "description": "Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "vertical-align",
+              "description": "Determines the vertical alignment of the cell content.",
+              "value": {
+                "type": "\"Top\" | \"Center\" | \"Bottom\"",
+                "default": "\"Center\""
+              }
             }
           ],
           "slots": [
@@ -10110,6 +10166,11 @@
                 "name": "icon",
                 "description": "Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "vertical-align",
+                "description": "Determines the vertical alignment of the cell content.",
+                "value": { "type": "\"Top\" | \"Center\" | \"Bottom\"" }
               }
             ],
             "events": []
@@ -10256,6 +10317,14 @@
               "name": "interactive",
               "description": "Defines the interactive state of the row.",
               "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "vertical-align",
+              "description": "Determines the vertical alignment of all cells in the row.\nApplies to every cell that does not define its own verticalAlign.",
+              "value": {
+                "type": "\"Top\" | \"Center\" | \"Bottom\"",
+                "default": "\"Center\""
+              }
             }
           ],
           "slots": [
@@ -10276,6 +10345,11 @@
                 "name": "interactive",
                 "description": "Defines the interactive state of the row.",
                 "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "vertical-align",
+                "description": "Determines the vertical alignment of all cells in the row.\nApplies to every cell that does not define its own verticalAlign.",
+                "value": { "type": "\"Top\" | \"Center\" | \"Bottom\"" }
               }
             ],
             "events": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.59.0",
+  "version": "2.61.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/run-cypress.js

@@ -9,4 +9,11 @@ const specArg = inputSpec
 
 const command = `npx cypress run --component --browser chrome ${specArg}`;
 
-execSync(command, { stdio: "inherit" });
+// ELECTRON_RUN_AS_NODE is set by VS Code / Claude Code and causes the Cypress
+// Electron binary to start as a plain Node process instead of an Electron app,
+// breaking its internal path resolution.  Remove it so Cypress starts correctly
+// regardless of whether this script is invoked from an IDE terminal or a shell.
+const env = { ...process.env };
+delete env.ELECTRON_RUN_AS_NODE;
+
+execSync(command, { stdio: "inherit", env });

package/src/Carousel.ts

@@ -219,6 +219,7 @@ class UDExCarousel extends UI5Element {
   _autoplayMinTimeBetweenToggle = 250;
   _autoplayManualStop = false;
   _resizeHandler: ResizeObserverCallback;
+  _resizeRafHandle: number | null = null;
 
   constructor() {
     super();
@@ -238,6 +239,11 @@ class UDExCarousel extends UI5Element {
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._resizeHandler);
 
+    if (this._resizeRafHandle !== null) {
+      cancelAnimationFrame(this._resizeRafHandle);
+      this._resizeRafHandle = null;
+    }
+
     if (this._autoplayInterval) {
       clearInterval(this._autoplayInterval);
     }
@@ -248,7 +254,17 @@ class UDExCarousel extends UI5Element {
   }
 
   _onResize(): void {
-    this._hasManyPages = this._carousel?.hasManyPages ?? false;
+    if (this._resizeRafHandle !== null) {
+      cancelAnimationFrame(this._resizeRafHandle);
+    }
+    // Defer until after the inner UI5 carousel has processed its own resize
+    // (outer element's ResizeObserver fires before inner element's, so the inner
+    // carousel's effectiveItemsPerPage and _currentPageIndex are still stale here)
+    this._resizeRafHandle = requestAnimationFrame(() => {
+      this._resizeRafHandle = null;
+      this._hasManyPages = this._carousel?.hasManyPages ?? false;
+      this._calculateDisabledButtonsState();
+    });
   }
 
   _autoplayLoop = () => {

package/src/ListGroupHeaderBase.ts

@@ -233,6 +233,15 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get singleCollapsibleHeaderRole(): string {
+    // In aria-activedescendant mode (SelectBox/CountrySelector) the HOST element
+    // carries the treeitem role + state (set via SearchableListBaseTemplate's
+    // hostAriaAttrs). The inner focusable div must then be presentational, otherwise
+    // it is a second treeitem nested inside the host treeitem with no owning
+    // tree/group — the "role not inside the required context" axe/SiteImprove error.
+    // Mirrors UDExListItem.roleItem, which is presentational under _useHostAriaRole.
+    if (this._useHostAriaRole) {
+      return "presentation";
+    }
     return this._treeMode ? "treeitem" : "button";
   }
 

package/src/ListGroupHeaderTemplate.tsx

@@ -85,6 +85,20 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
   // (aria-activedescendant, _useHostAriaRole) and non-tree modes, which keep the flat
   // structure with the content region emitted as a sibling by the template body.
   const nested = this.isTreeAccessibleRole && !this._useHostAriaRole;
+  // In aria-activedescendant mode (SelectBox) the HOST element is the treeitem and
+  // already carries aria-expanded + the accessible name. This inner div must then be
+  // presentational (singleCollapsibleHeaderRole) and must NOT duplicate those states,
+  // otherwise it is a second treeitem nested inside the host treeitem with no owning
+  // tree/group (axe/SiteImprove aria-required-parent). It stays focusable, though:
+  // clicking the collapsible-header body relies on it receiving DOM focus to redirect
+  // focus back to the combobox input — the same focusable, role="presentation" shape
+  // the list-item [part=item] divs already use. The real-focus (FilterMenu) path keeps
+  // the treeitem semantics plus controls/labelling on this div.
+  const headerAriaAttrs = this._useHostAriaRole ? {} : {
+    "aria-expanded": this.expanded,
+    "aria-controls": this.ariaControlsId,
+    "aria-labelledby": this.collapsibleHeaderLabelledBy,
+  };
   return (
     <div
       class={`udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`}
@@ -93,9 +107,7 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
       role={this.singleCollapsibleHeaderRole as AriaRole}
       tabIndex={0}
       onKeyDown={this.handleKeyDown}
-      aria-expanded={this.expanded}
-      aria-controls={this.ariaControlsId}
-      aria-labelledby={this.collapsibleHeaderLabelledBy}
+      {...headerAriaAttrs}
       _tab-index={Number(this._effectiveTabIndex)}>
       {nested ? (
         <>

package/src/MastheadCountrySelectorTemplate.tsx

@@ -45,12 +45,13 @@ function activeRegionView(this: UDExMastheadCountrySelector) {
       )}
       <div class="udex-masthead-country-selector__list-container">
         <div class="udex-masthead-country-selector__list-wrap" onScroll={this.handleCountryListShadowVisible}>
-          <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
+          <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries">
             {this._activeCountries.map((country, index) => (
-              <li role="none" key={index}>
+              <li key={index}>
                 <UDExMastheadMenuItem
                   class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                   onClick={this.handleCountryClick as any}
+                  accessible-role="link"
                   url={country.url}
                   label={country.displayTitle}
                   index={index}

package/src/Pagination.ts

@@ -18,6 +18,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import translate from "./utils/translate.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Template
 import PaginationTemplate from "./PaginationTemplate.js";
@@ -149,8 +150,6 @@ class UDExPagination extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static readonly AUTO_DISPLAY_BREAKPOINT = 980;
-
   _pages: Page[];
   _visiblePages: Page[];
 
@@ -200,7 +199,7 @@ class UDExPagination extends UI5Element {
   }
 
   get _displayType(): `${UDExDisplayType}` {
-    return window.innerWidth > UDExPagination.AUTO_DISPLAY_BREAKPOINT
+    return BreakpointUtils.isAbove("M")
       ? UDExDisplayType.desktop
       : UDExDisplayType.mobile;
   }

package/src/SearchableListBaseTemplate.tsx

@@ -179,7 +179,6 @@ function renderListItem(
   const effectiveRole = accessibleRole ?? (role !== "none" ? role : undefined) ?? "option";
   const hostRole = activeDescendantMode ? (effectiveRole as AriaRole) : (role as AriaRole);
   const hostAriaAttrs = activeDescendantMode ? {
-    "aria-label": "test",
     // option role (listbox): always aria-selected; treeitem + MultiSelect: aria-checked only
     "aria-selected": (effectiveRole !== "treeitem" || !modeMultiSelect) ? (item.selected ? "true" : "false") as string : undefined,
     "aria-checked": (effectiveRole === "treeitem" && !!modeMultiSelect) ? (item.indeterminate ? "mixed" : (item.selected ? "true" : "false")) as string : undefined,

package/src/SecondaryNavigation.ts

@@ -21,6 +21,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import translate from "./utils/translate.js";
+import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
@@ -180,7 +181,7 @@ class UDExSecondaryNavigation extends UI5Element {
    * @public
    */
   @property({ type: String })
-    maxDropdownHeight!: string;
+    maxDropdownHeight!: RelativeValue;
 
   @property({ type: Boolean, noAttribute: true })
     _selectedMore!: boolean;

package/src/SecondaryNavigationItem.ts

@@ -32,6 +32,11 @@ type UDExSecondaryNavigationItemSubItemClickEventDetail = {
   originalEvent: PointerEvent | KeyboardEvent
 }
 
+const DROPDOWN_MAX_HEIGHT_VAR = {
+  desktop: "--udex-secondary-navigation-item-dropdown-desktop-max-height",
+  mobile: "--udex-secondary-navigation-item-dropdown-mobile-max-height",
+} as const;
+
 /**
  * @class
  *
@@ -394,24 +399,27 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   setDesktopDropdownMaxHeight(): void {
     const { top } = this.dropdown.getBoundingClientRect();
     const maxHeight = window.innerHeight - top - DESKTOP_DROPDOWN_BOTTOM_GAP;
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-desktop-max-height", `${maxHeight}px`);
+    this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.desktop, `${maxHeight}px`);
   }
 
   setMobileDropdownMaxHeight(): void {
     if (!this._maxHeight || this._dropdownMaxHeightExceeds || !this.heightSatisfiesType) {
-      const secondaryNavigationMobileTrigger = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
-      const maxDropdownHeight = window.innerHeight - secondaryNavigationMobileTrigger.clientHeight;
-      this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${maxDropdownHeight}px`);
+      const { clientHeight } = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!;
+      const { top } = this.getBoundingClientRect();
+      const maxDropdownHeight = window.innerHeight - top - clientHeight;
+
+      this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.mobile, `${maxDropdownHeight}px`);
       return;
     }
 
-    this.style.setProperty("--udex-secondary-navigation-item-dropdown-mobile-max-height", `${this._maxHeight}`);
+    this.style.setProperty(DROPDOWN_MAX_HEIGHT_VAR.mobile, `${this._maxHeight}`);
   }
 
   get _dropdownMaxHeightExceeds(): boolean {
     const normalizedHeight = parseRelativeUnits(this._maxHeight, this.dropdown);
+    const { top } = this.getBoundingClientRect();
     const secondaryNavigationMobileTriggerHeight = this.shadowRoot!.querySelector(".udex-secondary-navigation__item")!.clientHeight;
-    return normalizedHeight >= window.innerHeight - secondaryNavigationMobileTriggerHeight;
+    return normalizedHeight >= window.innerHeight - top - secondaryNavigationMobileTriggerHeight;
   }
 
   get heightSatisfiesType(): boolean {

package/src/SecondaryNavigationTemplate.tsx

@@ -41,7 +41,7 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
                   subItems={item.items ?? []}
                   onui5-sub-item-click={this.handleSubItemClick}
                   onui5-nav-item-click={this.handleItemClick}
-                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                  _navItemsLength={this.visibleItems.length}>
                 </UDExSecondaryNavigationItem>
               </li>
             ))}
@@ -53,7 +53,7 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
                   onui5-nav-item-click={this.handleItemClick}
                   label={this.moreButtonText}
                   subItems={this._overflowItems}
-                  {...{ "_nav-items-length": this.visibleItems.length }}>
+                  _navItemsLength={this.visibleItems.length}>
                 </UDExSecondaryNavigationItem>
               </li>
             )}
@@ -75,10 +75,8 @@ export default function SecondaryNavigationTemplate(this: UDExSecondaryNavigatio
         onui5-sub-item-click={this.handleSubItemClick}
         onKeyDown={this.handleKeyDown}
         subItems={this.parsedItems}
-        {...{
-          "_is-mobile-menu-opener": "",
-          "_max-height": this.maxDropdownHeight
-        }}>
+        _maxHeight={this.maxDropdownHeight}
+        _is-mobile-menu-opener={true}>
         {this.hasMobileButtonsSlot && (
           <div className="udex-secondary-navigation__buttons" onClick={this.handleMobileButtonsClick}>
             <slot name="buttons"></slot>

package/src/SelectBase.ts

@@ -353,6 +353,31 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._setActiveDescendant(items[firstIndex], false);
   }
 
+  /**
+   * Establishes the initial aria-activedescendant when the dropdown opens, without moving
+   * DOM focus. In SingleSelect mode the currently selected item is activated so reopening
+   * restores focus to it; when nothing is selected (or in other modes) the first navigable
+   * item is activated instead.
+   */
+  _activateSelectedOrFirstItem(): void {
+    const items = this._list?.getKeyboardNavigationItems();
+    if (!items?.length) {
+      return;
+    }
+
+    const firstIndex = (items[0]?.nonInteractive && !items[0]?.collapsible) ? 1 : 0;
+    const selectedIndex = this.modeSingleSelect
+      ? items.findIndex(item => item.selected && !item.isGroup)
+      : -1;
+    const targetIndex = selectedIndex >= 0 ? selectedIndex : firstIndex;
+
+    this._list.setTabIndexByIndex(items, targetIndex);
+    this._setActiveDescendant(items[targetIndex], false);
+    if (this.showImageFlags) {
+      this.handleImagePosition(items, targetIndex);
+    }
+  }
+
   /**
    * Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
    */
@@ -490,48 +515,6 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._navigateToIndex(items, firstIndex);
   }
 
-  handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
-    const nextIndex = currentSelectedIndex + 1;
-    const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
-    const isNonInteractive = items[nextSelectIndex].nonInteractive && !items[nextSelectIndex].collapsible;
-
-    if (isNonInteractive) {
-      const skipIndex = nextSelectIndex + 1 > lastItemIndex ? 0 : nextSelectIndex + 1;
-      this._selectedOption = items[skipIndex].label;
-      if (this.showImageFlags) {
-        this.handleImagePosition(items, skipIndex);
-      }
-      return;
-    }
-
-    this._selectedOption = items[nextSelectIndex].label;
-
-    if (this.showImageFlags) {
-      this.handleImagePosition(items, nextSelectIndex);
-    }
-  }
-
-  handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
-    const prevIndex = currentSelectedIndex - 1;
-    const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
-    const isNonInteractive = items[previousSelectIndex].nonInteractive && !items[previousSelectIndex].collapsible;
-
-    if (isNonInteractive) {
-      const skipIndex = previousSelectIndex === 0 ? lastItemIndex : previousSelectIndex - 1;
-      this._selectedOption = items[skipIndex].label;
-      if (this.showImageFlags) {
-        this.handleImagePosition(items, skipIndex);
-      }
-      return;
-    }
-
-    this._selectedOption = items[previousSelectIndex].label;
-
-    if (this.showImageFlags) {
-      this.handleImagePosition(items, previousSelectIndex);
-    }
-  }
-
   handleLetterKeyPress(e: KeyboardEvent) {
     e.stopPropagation();
     e.preventDefault();
@@ -638,10 +621,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (isDownAndPopoverClosed) {
       e.preventDefault();
       this.openDropdown();
-      this._activateFirstItem();
-      if (this.showImageFlags) {
-        this.handleImagePosition(items, firstIndex);
-      }
+      this._activateSelectedOrFirstItem();
       return;
     }
 
@@ -740,7 +720,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
 
     // Sync _selectedOption display for the first item (used when popover just opened via click).
-    if (!this._activeDescendantItem && hasItems) {
+    if (popoverOpened && !this._activeDescendantItem && hasItems) {
       this._selectedOption = items[firstIndex].label;
     }
   }
@@ -799,6 +779,9 @@ class UDExSelectBase extends UDExSearchableListBase {
       this._expandCollapsedGroupsWithSelection();
       return renderFinished();
     }).then(() => {
+      if (!this._activeDescendantItem) {
+        this._activateSelectedOrFirstItem();
+      }
       this._handleDropdownScroll();
       this._announceCurrentOrFirst();
     }).catch(() => {});

package/src/SideNavigation.ts

@@ -6,6 +6,16 @@ import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 
+export enum UDExSideNavigationVariant {
+  Full = "Full",
+  Content = "Content",
+}
+
+export enum UDExSideNavigationPlacement {
+  Left = "Left",
+  Right = "Right",
+}
+
 /**
  * @class
  *
@@ -38,6 +48,31 @@ class UDExSideNavigation extends SideNavigation {
    */
   @property({ type: Boolean })
     isFixedInPlace!: boolean;
+
+  /**
+   * Defines the variant of the component.
+   *
+   * @default "Full"
+   * @public
+   */
+  @property()
+    variant: `${UDExSideNavigationVariant}` = UDExSideNavigationVariant.Full;
+
+  /**
+   * Defines which side the navigation panel is on.
+   *
+   * @default "Left"
+   * @public
+   */
+  @property()
+    placement: `${UDExSideNavigationPlacement}` = UDExSideNavigationPlacement.Left;
+
+  onBeforeRendering() {
+    super.onBeforeRendering();
+    this.querySelectorAll("[udex-side-navigation-item], [udex-side-navigation-sub-item]").forEach(item => {
+      item.setAttribute("variant", this.variant);
+    });
+  }
 }
 
 UDExSideNavigation.define();