@sapudex/web-components 2.36.0 → 2.37.0

package/cypress/specs/Pagination.cy.tsx

@@ -0,0 +1,52 @@
+import { UDExPagination } from "../support/component-imports.js";
+
+describe("UDExPagination", () => {
+  describe("Focus management — _pageFocusedManually flag reset", () => {
+    it("does not call focusActivePage on programmatic currentPageIndex change after a user click", () => {
+      // Mount pagination with enough pages to navigate
+      cy.mount(
+        <div>
+          <button id="external-focus-target">External</button>
+          <UDExPagination id="pagination" pages={5} currentPageIndex={0} />
+        </div>,
+      );
+
+      // Wait for the component to render fully
+      cy.get("[udex-pagination]")
+        .shadow()
+        .find(".udex-pagination__page[data-index='0']")
+        .should("exist");
+
+      // Click on page 3 (index 2) — this sets _pageFocusedManually = true,
+      // triggers re-render, focusActivePage() runs and resets the flag
+      cy.get("[udex-pagination]")
+        .shadow()
+        .find(".udex-pagination__page[data-index='2']")
+        .click();
+
+      // Verify the click was registered (page 3 is now active)
+      cy.get("[udex-pagination]")
+        .shadow()
+        .find(".udex-pagination__page[data-index='2']")
+        .should("have.attr", "active");
+
+      // Move focus to an external element so we can detect if focus moves back
+      cy.get("#external-focus-target").focus();
+      cy.get("#external-focus-target").should("have.focus");
+
+      // Programmatically change currentPageIndex — this should NOT trigger focusActivePage
+      // because _pageFocusedManually was already consumed (reset to false) on the prior render
+      cy.get("[udex-pagination]").then(($el) => {
+        ($el[0] as any).currentPageIndex = 4;
+      });
+
+      // Allow time for re-render to complete
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(100);
+
+      // Assert that focus did NOT move to the pagination page button.
+      // Focus should remain on the external button.
+      cy.get("#external-focus-target").should("have.focus");
+    });
+  });
+});

package/cypress/specs/SelectBox.cy.tsx

@@ -1155,7 +1155,7 @@ describe("SelectBox", () => {
         .find("udex-tag-group").shadow()
         .find("udex-tag")
         .first()
-        .should("have.attr", "text", "5 stars");
+        .should("have.attr", "text", "5 stars");
     });
 
     it("MultiSelect mode - no single-label shown after opening dropdown and clicking outside", () => {

package/cypress/specs/TabNavigation.cy.tsx

@@ -1613,6 +1613,320 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  // ── Disabled tab behaviour ──────────────────────────────────────────────────
+
+  describe("Disabled tab", () => {
+    describe("Rendering", () => {
+      it("renders aria-disabled='true' on a disabled tab button", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-disabled", "true");
+      });
+
+      it("does not set native disabled attribute — tab remains in DOM for assistive technology", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("not.have.attr", "disabled");
+      });
+
+      it("applies disabled opacity style to the disabled tab button", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-disabled='true']")
+          .should("have.css", "opacity", "0.4");
+      });
+
+      it("does not apply aria-disabled on enabled tabs", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("not.have.attr", "aria-disabled");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("not.have.attr", "aria-disabled");
+      });
+    });
+
+    describe("Interaction", () => {
+      it("does not change the selected tab when a disabled tab is clicked", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Force click because pointer-events: none prevents normal click
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click({ force: true });
+
+        // Tab 1 should remain selected
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 1");
+
+        // Tab 2 should NOT be selected
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "false");
+      });
+
+      it("does not fire tab-select event when a disabled tab is clicked", () => {
+        const tabSelectHandler = cy.stub().as("tabSelect");
+
+        cy.mount(
+          <UDExTabNavigation onTabSelect={tabSelectHandler}>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click({ force: true });
+
+        cy.get("@tabSelect").should("not.have.been.called");
+      });
+    });
+
+    describe("Keyboard navigation", () => {
+      it("disabled tab has tabindex='-1' even when it would otherwise be the roving-tabindex target", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // The disabled tab should always have tabindex -1
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-disabled='true']")
+          .should("have.attr", "tabindex", "-1");
+      });
+
+      it("arrow-key navigation skips disabled tab (ArrowRight)", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Focus Tab 1 and press ArrowRight — should skip Tab 2 (disabled) and land on Tab 3
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips disabled tab (ArrowLeft)", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1"><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3" selected><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Focus Tab 3 and press ArrowLeft — should skip Tab 2 (disabled) and land on Tab 1
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("ArrowLeft");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips multiple consecutive disabled tabs", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3" disabled><div>Content 3</div></UDExTab>
+            <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips disabled tabs in vertical mode (ArrowDown)", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Vertical">
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowDown");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+    });
+
+    describe("Default selection", () => {
+      it("selects the first non-disabled tab when the first tab is disabled and none are explicitly selected", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 2");
+      });
+
+      it("selects the first non-disabled tab when multiple leading tabs are disabled", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+            <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+      });
+
+      it("ignores selected attribute on a disabled tab and falls back to first enabled tab", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // The disabled tab cannot be selected, so the first enabled tab is chosen
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 2");
+      });
+    });
+
+    describe("Auto-play skips disabled tabs", () => {
+      it("auto-play advances past disabled tabs", () => {
+        cy.clock(0, ["setInterval", "clearInterval"]);
+        cy.mount(
+          <UDExTabNavigation
+            orientation="Vertical"
+            autoPlay
+            autoPlayInterval={1000}
+          >
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // After 1 tick, auto-play should skip disabled Tab 2 and select Tab 3
+        cy.tick(1000);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+      });
+    });
+  });
+
   // ── Process Tab variant ──────────────────────────────────────────────────────
 
   describe("TabNavigation - Process Tab variant", () => {

package/cypress/specs/Table.cy.tsx

@@ -269,6 +269,10 @@ describe("Table", () => {
     cy.get("#table").shadow().find(".udex-table").should("have.attr", "aria-label", "table devices")
   });
 
+  it("header holder has role presentation to be transparent in the ARIA tree", () => {
+    cy.get("#table").shadow().find(".udex-table__header-holder").should("have.attr", "role", "presentation");
+  });
+
   it("renders the right amount of header rows",  () => {
     cy.get("#table").find("udex-table-header-row").should("have.length", 1)
   });
@@ -357,3 +361,169 @@ describe("Table", () => {
     })
   });
 });
+
+const multipleGroupRowsTable = <UDExTable id="table-multi-group">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableGroupRow id="group-row-1" group-title="Group A" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item A1</UDExTableCell>
+      <UDExTableCell>$100</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+  <UDExTableGroupRow id="group-row-2" group-title="Group B" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item B1</UDExTableCell>
+      <UDExTableCell>$200</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+  <UDExTableGroupRow id="group-row-3" group-title="Group C" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item C1</UDExTableCell>
+      <UDExTableCell>$300</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+</UDExTable>;
+
+describe("TableGroupRow Accessibility", () => {
+  beforeEach(() => {
+    cy.mount(multipleGroupRowsTable);
+  });
+
+  it("generates unique button IDs for each collapsible group row", () => {
+    const ids: string[] = [];
+
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-btn").invoke("attr", "id").then(id => {
+        expect(id).to.match(/^udex-table-group-opener-/);
+        ids.push(id as string);
+      });
+    }).then(() => {
+      const uniqueIds = new Set(ids);
+      expect(uniqueIds.size).to.equal(ids.length, "All group row button IDs must be unique");
+    });
+  });
+
+  it("button aria-controls references an existing element in the shadow DOM", () => {
+    cy.get("#group-row-1").shadow().find(".udex-table-grow-btn").then($btn => {
+      const controlsId = $btn.attr("aria-controls");
+      expect(controlsId).to.match(/^udex-table-group-rows-/);
+      cy.get("#group-row-1").shadow().find(`#${controlsId}`).should("exist").and("have.class", "udex-table-grow-rows");
+    });
+  });
+
+  it("button aria-controls value matches the rows container ID on the same instance", () => {
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-btn").invoke("attr", "aria-controls").then(controlsValue => {
+        cy.wrap($groupRow).shadow().find(".udex-table-grow-rows").invoke("attr", "id").should("equal", controlsValue);
+      });
+    });
+  });
+
+  it("each rows container has a unique ID matching its group row instance", () => {
+    const containerIds: string[] = [];
+
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-rows").invoke("attr", "id").then(id => {
+        expect(id).to.match(/^udex-table-group-rows-/);
+        containerIds.push(id as string);
+      });
+    }).then(() => {
+      const uniqueIds = new Set(containerIds);
+      expect(uniqueIds.size).to.equal(containerIds.length, "All rows container IDs must be unique");
+    });
+  });
+});
+
+const nonCollapsibleGroupRowTable = <UDExTable id="table-non-collapsible-group">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableGroupRow id="non-collapsible-group" group-title="Static Group">
+    <UDExTableRow>
+      <UDExTableCell>Item 1</UDExTableCell>
+      <UDExTableCell>$50</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+</UDExTable>;
+
+describe("TableGroupRow ARIA Structure", () => {
+  describe("Collapsible group row", () => {
+    beforeEach(() => {
+      cy.mount(multipleGroupRowsTable);
+    });
+
+    it("contains a div with role='row' and class 'udex-table-group-header-row'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='row']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-row");
+    });
+
+    it("the row wrapper contains a div with role='rowheader'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='row'] > div[role='rowheader']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-cell");
+    });
+
+    it("the rowheader contains the button with class 'udex-table-grow-btn'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='rowheader'] > button.udex-table-grow-btn")
+        .should("exist");
+    });
+
+    it("the row and rowheader wrappers have display:contents", () => {
+      cy.get("#group-row-1").shadow().find(".udex-table-group-header-row").then($row => {
+        expect(window.getComputedStyle($row[0]).display).to.equal("contents");
+      });
+      cy.get("#group-row-1").shadow().find(".udex-table-group-header-cell").then($cell => {
+        expect(window.getComputedStyle($cell[0]).display).to.equal("contents");
+      });
+    });
+
+    it("all collapsible group rows have the row > rowheader > button structure", () => {
+      cy.get("[udex-table-group-row]").each($groupRow => {
+        cy.wrap($groupRow).shadow().find("div[role='row'] > div[role='rowheader'] > button.udex-table-grow-btn")
+          .should("exist");
+      });
+    });
+  });
+
+  describe("Non-collapsible group row", () => {
+    beforeEach(() => {
+      cy.mount(nonCollapsibleGroupRowTable);
+    });
+
+    it("contains a div with role='row' and class 'udex-table-group-header-row'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='row']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-row");
+    });
+
+    it("the row wrapper contains a div with role='rowheader'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='row'] > div[role='rowheader']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-cell");
+    });
+
+    it("the rowheader contains a div (not button) with class 'udex-table-grow-btn'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='rowheader'] > div.udex-table-grow-btn")
+        .should("exist");
+    });
+
+    it("the non-collapsible title div displays the group title", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='rowheader'] .udex-table-grow-btn")
+        .should("have.text", "Static Group");
+    });
+
+    it("the row and rowheader wrappers have display:contents", () => {
+      cy.get("#non-collapsible-group").shadow().find(".udex-table-group-header-row").then($row => {
+        expect(window.getComputedStyle($row[0]).display).to.equal("contents");
+      });
+      cy.get("#non-collapsible-group").shadow().find(".udex-table-group-header-cell").then($cell => {
+        expect(window.getComputedStyle($cell[0]).display).to.equal("contents");
+      });
+    });
+  });
+});

package/cypress/support/component-imports.instrumented.ts

@@ -43,6 +43,7 @@ import UDExMessageStrip from "../../instrumented/MessageStrip.js";
 import UDExModal from "../../instrumented/Modal.js";
 import UDExSearch from "../../instrumented/Search.js";
 import UDExMediaPlayer from "../../instrumented/MediaPlayer.js";
+import UDExPagination from "../../instrumented/Pagination.js";
 import UDExPasswordField from "../../instrumented/PasswordField.js";
 import UDExPhoneNumberField from "../../instrumented/PhoneNumberField.js";
 import UDExPromoTile from "../../instrumented/PromoTile.js";
@@ -128,6 +129,7 @@ export {
   UDExModal,
   UDExMediaPlayer,
   UDExSearch,
+  UDExPagination,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

package/cypress/support/component-imports.src.ts

@@ -43,6 +43,7 @@ import UDExMessageStrip from "../../src/MessageStrip.js";
 import UDExModal from "../../src/Modal.js";
 import UDExSearch from "../../src/Search.js";
 import UDExMediaPlayer from "../../src/MediaPlayer.js";
+import UDExPagination from "../../src/Pagination.js";
 import UDExPasswordField from "../../src/PasswordField.js";
 import UDExPhoneNumberField from "../../src/PhoneNumberField.js";
 import UDExPromoTile from "../../src/PromoTile.js";
@@ -128,6 +129,7 @@ export {
   UDExModal,
   UDExMediaPlayer,
   UDExSearch,
+  UDExPagination,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

package/dist/CountrySelector.d.ts

@@ -71,6 +71,8 @@ declare class UDExCountrySelector extends UDExSelectBase {
     prepareCountrySelectorItems(): void;
     getItemTemplate(country: Country): string | undefined;
     getCountryLabel(countryName?: string, localName?: string): string | null;
+    get countryFlag(): object;
+    get searchableList(): import("@ui5/webcomponents-base").JSX.Element;
     get selectedCountryName(): string | null;
     get flagAriaLabel(): string;
     get selectedCountryFlagX(): string | undefined;

package/dist/CountrySelector.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UI5Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
@@ -20,7 +20,9 @@ import UDExSelectBase from "./SelectBase.js";
 import UDExListItem from "./ListItem.js";
 import UDExTextField from "./TextField.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
+import SelectBoxTemplate from "./SelectBoxTemplate.js";
+import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 // Styles
 import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -143,6 +145,13 @@ let UDExCountrySelector = class UDExCountrySelector extends UDExSelectBase {
     getCountryLabel(countryName, localName) {
         return localName ? `${countryName} (${localName})` : countryName || null;
     }
+    get countryFlag() {
+        return CountrySelectorTemplate.call(this);
+    }
+    get searchableList() {
+        this.defaultAccessibleRole = this._listBoxRole;
+        return SearchableListBaseTemplate.call(this);
+    }
     get selectedCountryName() {
         return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
     }
@@ -174,7 +183,7 @@ __decorate([
 UDExCountrySelector = __decorate([
     customElement({
         tag: "udex-country-selector",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [
             TextFieldCss,
             SelectBaseCss,