@sapudex/web-components 2.57.0 → 2.59.0

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.57.0",
+  "version": "2.59.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -9801,6 +9801,11 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>udex-tab-navigation</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/TabNavigation.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Fires when the tab was clicked.\n- **tab-select** - Fired when a tab is selected.\n\n### **Slots:**\n - **default** - Defines the tabs and content.\n- **footer** - Defines optional content rendered below the tab list in Vertical orientation.\nUse to place a button or any action element beneath the tabs.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the tab list.\n\nWhen set, screen readers announce this text as the name of the tab group\n(e.g. \"Profile navigation\") as focus enters the tabs. When empty, the tab\nlist is exposed by its role only, with no accessible name.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "auto-play",
               "description": "Enables automatic tab switching for Vertical orientation.",
@@ -9878,6 +9883,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the tab list.\n\nWhen set, screen readers announce this text as the name of the tab group\n(e.g. \"Profile navigation\") as focus enters the tabs. When empty, the tab\nlist is exposed by its role only, with no accessible name.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "auto-play",
                 "description": "Enables automatic tab switching for Vertical orientation.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.57.0",
+  "version": "2.59.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.25.0",
-    "@ui5/webcomponents-base": "2.25.0",
-    "@ui5/webcomponents-fiori": "2.25.0",
-    "@ui5/webcomponents-icons": "2.25.0",
-    "@ui5/webcomponents-localization": "2.25.0",
-    "@ui5/webcomponents-theming": "2.25.0",
+    "@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",
     "@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.25.0",
+    "@ui5/webcomponents-tools": "2.27.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/List.ts

@@ -215,6 +215,7 @@ class UDExList extends UI5Element {
     if (target.isGroup && target.hasAttribute("collapsible") && target.collapsed) {
       target.collapsed = false;
       this.setCollapsedItems(false, target);
+      this.fireAccordionToggle(target);
     }
   }
 
@@ -223,9 +224,25 @@ class UDExList extends UI5Element {
     if (target.isGroup && target.hasAttribute("collapsible") && !target.collapsed) {
       target.collapsed = true;
       this.setCollapsedItems(true, target);
+      this.fireAccordionToggle(target);
     }
   }
 
+  /**
+   * Arrow-key expand/collapse toggles `collapsed` directly here (multi-select
+   * headers deliver Left/Right to the List, not to the header's own key handler),
+   * so the `accordion-icon-click` event that drives the collapse/expand live-region
+   * announcement is never fired on this path. Re-emit it from the header so
+   * SearchableListBase announces the new state to screen readers, matching the
+   * chevron/pointer and single-select paths.
+   */
+  fireAccordionToggle(target: UDExListItemBase): void {
+    target.dispatchEvent(new CustomEvent("accordion-icon-click", {
+      bubbles: true,
+      detail: { collapsed: target.collapsed },
+    }));
+  }
+
   handleUpArrow(e: KeyboardEvent): void {
     e.preventDefault();
     const items = this.getKeyboardNavigationItems();
@@ -606,9 +623,14 @@ class UDExList extends UI5Element {
     return this.accessibleRole !== "listbox" ? this.accessibleRole : "list";
   }
 
-  /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
+  /**
+   * aria-multiselectable is exposed for every MultiSelect list — the flat listbox
+   * and the collapsible tree alike. It is required so the screen reader announces
+   * each option's selected / not-selected state (from aria-selected) instead of
+   * treating the container as single-select and announcing only the active option.
+   */
   get _listAriaMultiSelectable(): string | undefined {
-    return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;
+    return this.modeMultiSelect ? "true" : undefined;
   }
 }
 

package/src/ListGroupHeaderBase.ts

@@ -46,6 +46,19 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   @property({ type: Boolean })
     _treeMode: boolean = false;
 
+  /**
+   * Marks the group as a self-contained role="listbox" (FilterMenu real-focus
+   * SingleSelect, non-collapsible groups). When true, this group's options are
+   * wrapped in their own listbox so JAWS counts them natively per group. Set by
+   * the parent (SearchableListBase.isPerGroupListbox) only when the whole list is
+   * grouped; the outer #udex-list drops its listbox role in that case.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _groupAsListbox: boolean = false;
+
   /**
    * Slot for group header list items.
    *
@@ -210,10 +223,29 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     return this._treeMode;
   }
 
+  // FilterMenu real-focus SingleSelect non-collapsible group: its options are
+  // rendered inside their own role="listbox" so JAWS counts them natively per
+  // group ("1 of 4"). JAWS ignores role="group" boundaries and author
+  // aria-posinset within a single listbox, but counts reliably within a flat
+  // listbox. Excludes SelectBox (_useHostAriaRole) and tree mode.
+  get isPerGroupListbox(): boolean {
+    return this._groupAsListbox && !this._useHostAriaRole && !this._treeMode;
+  }
+
   get singleCollapsibleHeaderRole(): string {
     return this._treeMode ? "treeitem" : "button";
   }
 
+  // Pins the collapsible header's accessible name to its heading (+ supporting text)
+  // so the decorative expand/collapse chevron button — a child of the header — does
+  // not fold its "Expand"/"Collapse" label into the header's name. The chevron is a
+  // mouse affordance only (tabindex=-1); its state is already conveyed by
+  // aria-expanded, so excluding its name avoids announcing "Collapse" alongside the
+  // spoken "expanded"/"collapsed" state.
+  get collapsibleHeaderLabelledBy(): string {
+    return this.supportingText ? "group-heading group-supporting-text" : "group-heading";
+  }
+
   get collapsibleHeaderAccessibleRole(): string {
     return this._treeMode ? "treeitem" : "button";
   }
@@ -222,7 +254,13 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     if (this._useHostAriaRole) {
       return "presentation";
     }
-    return this._treeMode ? "none" : "group";
+    // 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.
+    if (this._treeMode || this.isPerGroupListbox) {
+      return "none";
+    }
+    return "group";
   }
 
   get contentRegionRole(): string {
@@ -230,7 +268,11 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get nonCollapsibleContainerRole(): string {
-    return "group";
+    // The single role="group" for non-collapsible headers lives on the outer
+    // div.udex-list__group wrapper (groupWrapperRole = "group" in non-tree mode,
+    // labelled by aria-labelledby="group-heading"). This container div must be
+    // transparent so that extra "group group" announcements are avoided.
+    return "none";
   }
 
   get nonCollapsibleHeaderAccessibleRole(): string | undefined {

package/src/ListGroupHeaderTemplate.tsx

@@ -35,18 +35,11 @@ function SingleGroupHeader(this: UDExListGroupHeader) {
   );
 }
 
-function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
+// The visible header row of the single-select collapsible group: number/icon,
+// heading + supporting text, and the expand/collapse chevron.
+function SingleCollapsibleHeaderRow(this: UDExListGroupHeader) {
   return (
-    <div
-      class={`udex-list__group-content udex-list__group-header-wrap ${this.sizeClass}`}
-      part="group-item"
-      id={`${this._id}_group-content__focusable`}
-      role={this.singleCollapsibleHeaderRole as AriaRole}
-      tabIndex={0}
-      onKeyDown={this.handleKeyDown}
-      aria-expanded={this.expanded}
-      aria-controls={this.ariaControlsId}
-      _tab-index={Number(this._effectiveTabIndex)}>
+    <>
       {this.typeNumber && <span class="udex-list__number">{this.numberOfItem}.</span>}
       {this.typeCircle && <span class="udex-list__circle">&#x2022;</span>}
       {this.typeIcon && (
@@ -65,7 +58,7 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
           {...({ innerHTML: this.label } as object)}>
         </span>
         {this.supportingText && (
-          <span class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
+          <span id="group-supporting-text" class={`udex-list__supporting-text ${this.sizeClass}`}>{this.supportingText}</span>
         )}
       </div>
       <div class="udex-list__group-heading__icon-wrapper">
@@ -74,12 +67,48 @@ function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
           design="Tertiary"
           class="udex-list__group-heading__icon"
           onClick={this.handleCollapseIconClick as unknown as EventListener}
+          onMouseDown={this.handleCollapseIconMouseDown}
           tabindex={-1}
           accessible-name={this.expandButtonAccessibleName}
           icon={slimArrowRight}
           {...({ "mode": "Interactive" } as object)}
         />
       </div>
+    </>
+  );
+}
+
+function SingleGroupHeaderCollapsible(this: UDExListGroupHeader) {
+  // Conformant WAI-ARIA tree (FilterMenu real focus): nest the child role="group"
+  // INSIDE this treeitem so screen readers count children per group natively — no
+  // explicit aria-posinset/aria-setsize (which JAWS distrusts). Excludes SelectBox
+  // (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;
+  return (
+    <div
+      class={`udex-list__group-content ${nested ? "udex-list__group-content--nested " : ""}udex-list__group-header-wrap ${this.sizeClass}`}
+      part="group-item"
+      id={`${this._id}_group-content__focusable`}
+      role={this.singleCollapsibleHeaderRole as AriaRole}
+      tabIndex={0}
+      onKeyDown={this.handleKeyDown}
+      aria-expanded={this.expanded}
+      aria-controls={this.ariaControlsId}
+      aria-labelledby={this.collapsibleHeaderLabelledBy}
+      _tab-index={Number(this._effectiveTabIndex)}>
+      {nested ? (
+        <>
+          <div class="udex-list__group-header-row">
+            {SingleCollapsibleHeaderRow.call(this)}
+          </div>
+          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+            <slot></slot>
+          </div>
+        </>
+      ) : (
+        SingleCollapsibleHeaderRow.call(this)
+      )}
     </div>
   );
 }
@@ -116,6 +145,8 @@ function MultiOrRadioGroupHeader(this: UDExListGroupHeader) {
       accessible-role={this.nonCollapsibleHeaderAccessibleRole}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
+      _aria-pos-in-set={this._ariaPosInSet}
+      _aria-set-size={this._ariaSetSize}
       _icon={this._icon}
       _filtered={this._filtered}
     />
@@ -177,6 +208,8 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
       onAccordionIconClick={this.handleCollapseIconClick as EventListener}
       _additional-class-name={this._additionalClassName}
       _tab-index={Number(this._effectiveTabIndex)}
+      _aria-pos-in-set={this._ariaPosInSet}
+      _aria-set-size={this._ariaSetSize}
       _icon={this._icon}
       _filtered={this._filtered}
     />
@@ -184,12 +217,16 @@ function MultiOrRadioGroupHeaderCollapsible(this: UDExListGroupHeader) {
 }
 
 export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
+  // Single-select real-focus tree: SingleGroupHeaderCollapsible now emits the
+  // role="group" content region as a CHILD of the treeitem (conformant nesting),
+  // so the template body must not also emit it as a sibling.
+  const singleSelectNested = this.isTreeAccessibleRole && !this.useListItemHeader && !this._useHostAriaRole;
   return (
     <div
       part="item"
       class="udex-list__group"
       role={this.groupWrapperRole as AriaRole}
-      aria-labelledby={!this.isTreeAccessibleRole ? "group-heading" : undefined}>
+      aria-labelledby={(!this.isTreeAccessibleRole && !this.isPerGroupListbox) ? "group-heading" : undefined}>
       {this.collapsible ? (
         <div
           class="udex-list__group-list"
@@ -199,28 +236,42 @@ export default function ListGroupHeaderTemplate(this: UDExListGroupHeader) {
             ? MultiOrRadioGroupHeaderCollapsible.call(this)
             : SingleGroupHeaderCollapsible.call(this)
           }
-          <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
-            {this.isTreeAccessibleRole ? (
-              <slot></slot>
-            ) : (
-              <div role="listbox" aria-label="group">
+          {!singleSelectNested && (
+            <div id={this.ariaControlsId} role={this.contentRegionRole as AriaRole} class="udex-list__group-list__content">
+              {this.isTreeAccessibleRole ? (
                 <slot></slot>
-              </div>
-            )}
-          </div>
+              ) : (
+                <div role="listbox" aria-label="group">
+                  <slot></slot>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       ) : (
         <div
           role={this.nonCollapsibleContainerRole as AriaRole}
           class="udex-list__group-list"
-          aria-label="group"
           onui5-item-press={this.getHandleGroupItemsClick}
           {...({ name: "group" } as object)}>
           {this.modeMultiSelectOrRadioGroup
             ? MultiOrRadioGroupHeader.call(this)
             : SingleGroupHeader.call(this)
           }
-          <slot></slot>
+          {this.isTreeAccessibleRole ? (
+            <div role="group">
+              <slot></slot>
+            </div>
+          ) : this.isPerGroupListbox ? (
+            // Each group is its own labelled listbox: JAWS counts the options natively
+            // per group ("Python, 1 of 4"). The outer #udex-list is presentational
+            // (SearchableListBase.isPerGroupListbox) so this is not a nested listbox.
+            <div role="listbox" aria-labelledby="group-heading">
+              <slot></slot>
+            </div>
+          ) : (
+            <slot></slot>
+          )}
         </div>
       )}
     </div>

package/src/ListItem.ts

@@ -398,27 +398,38 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get ariaSelectedValue(): "true" | "false" | undefined {
-    if (this.effectiveRole !== "treeitem") {
+    // RadioGroup conveys its state through the radio control, never aria-selected.
+    if (this.modeRadioGroup) {
+      return undefined;
+    }
+    // MultiSelect treeitems convey state via aria-checked (see ariaCheckedValue).
+    // Every other selectable node — listbox options in both SingleSelect AND
+    // MultiSelect, plus SingleSelect treeitems — announces its state natively
+    // through aria-selected so the screen reader re-reads it when focus is on the
+    // item and when Enter/Space toggles it.
+    if (this.roleItem === "treeitem" && this.modeMultiSelect) {
       return undefined;
     }
-    // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
-    if (this.modeMultiSelect) {
+    // Gated on the actual rendered role of the [part=item] div — never the
+    // presentational inner div used in aria-activedescendant mode (SelectBox sets
+    // aria-selected on the host).
+    if (this.roleItem !== "treeitem" && this.roleItem !== "option") {
       return undefined;
     }
     return this.selected ? "true" : "false";
   }
 
   get ariaExpandedValue(): "true" | "false" | undefined {
+    // aria-expanded is exposed ONLY on collapsible headers — a node the user can
+    // actually expand/collapse. Non-collapsible group headers must NOT report an
+    // expanded/collapsed state (nothing to toggle); the tree hierarchy is conveyed
+    // structurally by the nested role="group", not by aria-expanded.
     if (!this.collapsible) {
       return undefined;
     }
     return this.expanded ? "true" : "false";
   }
 
-  get checkboxAriaHidden(): boolean {
-    return this.effectiveRole === "treeitem";
-  }
-
   get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }
@@ -450,14 +461,6 @@ class UDExListItem extends UDExListItemBase {
     return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
 
-  get itemDescribedBy(): string {
-    return `${this._id}-invisibleText-describedby`;
-  }
-
-  get itemState(): string {
-    return this.selected ? "Selected" : "Not selected";
-  }
-
   get ratingAriaLabel(): string {
     const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
     const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";

package/src/ListItemBase.ts

@@ -240,6 +240,27 @@ class UDExListItemBase extends UI5Element {
   @property({ type: Boolean })
     _useHostAriaRole: boolean = false;
 
+  /**
+   * Explicit 1-based position of this treeitem within its own group, for a grouped
+   * tree structure. The sibling-group tree markup makes JAWS/NVDA compute a flattened
+   * posinset/setsize across all groups; setting these explicitly restores the
+   * per-group count so each item announces "N of <items in this group>".
+   * Only rendered on real treeitems (never in aria-activedescendant mode).
+   *
+   * @private
+   */
+  @property({ type: Number })
+    _ariaPosInSet?: number;
+
+  /**
+   * Explicit set size (number of treeitems within this item's own group) — the
+   * companion to {@link _ariaPosInSet}.
+   *
+   * @private
+   */
+  @property({ type: Number })
+    _ariaSetSize?: number;
+
   /**
    * Defines the tab index of the component.
    *
@@ -311,6 +332,15 @@ class UDExListItemBase extends UI5Element {
 
   handleCollapseIconMouseDown(e: MouseEvent) {
     e.stopPropagation();
+    // In aria-activedescendant mode (SelectBox) DOM focus must stay on the search
+    // input. Preventing the mousedown default stops the chevron/header body div from
+    // stealing focus, which would otherwise trigger a focusout→refocus + scroll-into-view
+    // that shifts the chevron out from under the pointer and eats the first click.
+    // Real-focus components (FilterMenu/List) leave _useHostAriaRole false and are
+    // unaffected. The click still fires, so collapse/expand happens on the first click.
+    if (this._useHostAriaRole) {
+      e.preventDefault();
+    }
   }
 
   handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {

package/src/ListItemTemplate.tsx

@@ -126,7 +126,6 @@ function ContentList(this: UDExListItem) {
         )}
       </div>
       <div class="hidden" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>
-      <div class="hidden" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>
     </div>
   );
 }
@@ -144,6 +143,8 @@ export default function ListItemTemplate(this: UDExListItem) {
           aria-checked={this.ariaCheckedValue}
           aria-selected={this.ariaSelectedValue}
           aria-expanded={this.ariaExpandedValue}
+          aria-posinset={this._ariaPosInSet || undefined}
+          aria-setsize={this._ariaSetSize || undefined}
           onFocusIn={this.handleFocusIn}
           onFocusOut={this.handleFocusOut}
           onClick={this.handleItemClick}
@@ -152,8 +153,7 @@ export default function ListItemTemplate(this: UDExListItem) {
           onKeyUp={this.handleKeyUp}
           onKeyDown={this.handleKeyDown}
           {...({ divider: this.divider, "_id": this._id } as object)}
-          data-selected={this.selected}
-          aria-describedby={this.itemDescribedBy}>
+          data-selected={this.selected}>
           {this.modeMultiSelect && (
             <UDExCheckbox
               class="udex-list__checkbox"
@@ -163,7 +163,7 @@ export default function ListItemTemplate(this: UDExListItem) {
               accessible-name={`checkbox ${this.stateAccessibleName}`}
               checked={this.selected}
               disabled={this.disabled}
-              aria-hidden={this.checkboxAriaHidden ? "true" : undefined}
+              aria-hidden="true"
             />
           )}
           {this.modeRadioGroup && (

package/src/MastheadCountrySelector.ts

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -9,8 +9,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
-import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
-import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCountrySelectorTemplate.lit.js";
+import { Mode as UDExSearchMode } from "./Search.js";
+import MastheadCountrySelectorTemplate from "./MastheadCountrySelectorTemplate.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
@@ -77,10 +77,10 @@ type UDExMastheadCountrySelectorSearchEventDetail = {
  */
 @customElement({
   tag: "udex-masthead-country-selector",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: MastheadCountrySelectorCss,
   template: MastheadCountrySelectorTemplate,
-  dependencies: [UI5Icon, UDExMastheadMenuItem, UDExSearch],
+  dependencies: [UI5Icon, UDExMastheadMenuItem],
 })
 
 /**

package/src/MastheadCountrySelectorTemplate.tsx

@@ -0,0 +1,98 @@
+import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import UDExSearch from "./Search.js";
+
+export default function MastheadCountrySelectorTemplate(this: UDExMastheadCountrySelector) {
+  return (
+    <div class="udex-masthead-country-selector">
+      {this._isActiveRegionOpen ? activeRegionView.call(this) : regionsView.call(this)}
+    </div>
+  );
+}
+
+function activeRegionView(this: UDExMastheadCountrySelector) {
+  return (
+    <>
+      <span class="udex-masthead-country-selector__title">{this.countryTitle}</span>
+      {!this.isSingleMode && (
+        <UDExMastheadMenuItem
+          class="udex-masthead-country-selector__region-back-item"
+          accessible-role="button"
+          onClick={this.backToRegions}
+          label={this._activeRegion?.title}
+          type="Button"
+          part="menu-item"
+          icon-start={true}
+          {...{ "_accessible-name": this.backToRegionListAccessibleName, "is-back": "" }}>
+        </UDExMastheadMenuItem>
+      )}
+      {!this.hideSearch && (
+        <>
+          <UDExSearch
+            class="udex-masthead-country-selector__search"
+            onui5-handle-value-search={this.handleSearch}
+            onui5-handle-value-reset={this.handleSearchReset}
+            onui5-submit-search-value={this.handleSearch}
+            language-voice={this.languageVoice}
+            label={this.searchLabel}
+            mode={this.homeSearchMode}
+            show-voice-button={this.showSearchVoiceButton}
+            non-interactive-submit-button={true}
+            show-submit-button={true}>
+          </UDExSearch>
+          <span aria-live="polite" aria-atomic="true" class="hidden">{this._accSearchResultInfo}</span>
+        </>
+      )}
+      <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">
+            {this._activeCountries.map((country, index) => (
+              <li role="none" key={index}>
+                <UDExMastheadMenuItem
+                  class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
+                  onClick={this.handleCountryClick as any}
+                  url={country.url}
+                  label={country.displayTitle}
+                  index={index}
+                  part="menu-item"
+                  {...{
+                    "_country-code": country.countryCode,
+                    "is-nav-item": "",
+                    ...(country.active ? { "_is-active-country": "" } : {}),
+                  }}>
+                </UDExMastheadMenuItem>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function regionsView(this: UDExMastheadCountrySelector) {
+  return (
+    <>
+      <span class="udex-masthead-country-selector__title">{this.regionTitle}</span>
+      <ul class="udex-masthead-country-selector__list">
+        {this.regionsData.map((region, index) => (
+          <li key={index}>
+            <UDExMastheadMenuItem
+              onClick={this.handleRegionClick as any}
+              index={index}
+              accessible-role="button"
+              class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
+              aria-haspopup="true"
+              type="Button"
+              part="menu-item"
+              has-border={true}
+              icon-end={true}
+              label={region.title}
+              {...{ "is-nav-item": "" }}>
+            </UDExMastheadMenuItem>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}