@sapudex/web-components 2.39.0 → 2.41.0

package/cypress/specs/SelectBox.cy.tsx

@@ -1317,4 +1317,461 @@ describe("SelectBox", () => {
       cy.get("#test-modal").should("not.have.attr", "open");
     });
   });
+
+  describe("Select Box footer slot", () => {
+    const selectBoxWithFooter = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="Programming languages">
+        <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+        <UDExButton id="footer-action" slot="footer" design="Tertiary">Apply</UDExButton>
+      </UDExSelectBox>
+      <button id="next-btn">Next</button>
+    </div>;
+
+    const selectBoxWithoutFooter = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="Programming languages">
+        <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    it("hasFooter getter is true when a slot=\"footer\" element is provided", () => {
+      cy.mount(selectBoxWithFooter);
+
+      cy.get("#select-box").then($el => {
+        expect(($el[0] as any).hasFooter).to.equal(true);
+      });
+    });
+
+    it("hasFooter getter is false when no slot=\"footer\" element is provided", () => {
+      cy.mount(selectBoxWithoutFooter);
+
+      cy.get("#select-box").then($el => {
+        expect(($el[0] as any).hasFooter).to.equal(false);
+      });
+    });
+
+    it("renders the footer slot inside the popover when slot=\"footer\" content is provided and dropdown is open", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // The component template renders an internal <slot name="footer" slot="footer">
+      // inside the popover, which forwards the projected button into the popover's footer area.
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .find('slot[name="footer"][slot="footer"]')
+        .should("exist");
+
+      // The slotted button itself remains in light DOM with slot="footer".
+      cy.get("#select-box")
+        .find('[slot="footer"]#footer-action')
+        .should("exist");
+    });
+
+    it("does NOT render the internal footer slot in the popover when no slot=\"footer\" content is provided", () => {
+      cy.mount(selectBoxWithoutFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // No footer-forwarding slot should be rendered when hasFooter is false.
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .find('slot[name="footer"]')
+        .should("not.exist");
+    });
+
+    // Updated: covers Fix 1 — handleInputFocusOut now treats footer elements as
+    // "inside the component" so a real click on the footer button moves focus to it
+    // without closing the dropdown.
+    it("clicking the footer button moves focus to it and keeps the dropdown open", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // realClick triggers a real focusout on the search input with the footer
+      // button as the relatedTarget — the path that previously closed the dropdown.
+      cy.get("#select-box").find("#footer-action").realClick();
+
+      cy.get("#select-box").find("#footer-action").should("be.focused");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+    });
+
+    it("pressing Escape while the footer button is focused closes the dropdown", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").find("#footer-action").then($btn => {
+        ($btn[0] as HTMLElement).focus();
+      });
+
+      cy.get("#select-box").find("#footer-action").should("be.focused");
+
+      cy.realPress("Escape");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+    });
+
+    // Updated: handleKeyDownDropdown footer branch now intercepts Tab to close the
+    // dropdown and move focus to the next focusable element after the component.
+    // (Previously Tab from the footer kept the dropdown open and propagated natively.)
+    it("pressing Tab while focus is in the footer closes the dropdown and moves focus to the next element after the component", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").find("#footer-action").then($btn => {
+        ($btn[0] as HTMLElement).focus();
+      });
+      cy.get("#select-box").find("#footer-action").should("be.focused");
+
+      cy.realPress("Tab");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("#next-btn").should("be.focused");
+    });
+
+    // Updated: handleKeyDownDropdown footer branch now redirects Shift+Tab to the
+    // last list item (via _focusLastListItem) instead of jumping straight back to
+    // the search input. The dropdown stays open. The base-class behaviour that
+    // moves focus from the last list item back to the search input on a second
+    // Shift+Tab is covered elsewhere in this spec.
+    it("pressing Shift+Tab while focus is in the footer moves focus to the last list item and keeps the dropdown open", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").find("#footer-action").then($btn => {
+        ($btn[0] as HTMLElement).focus();
+      });
+      cy.get("#select-box").find("#footer-action").should("be.focused");
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item")
+        .last()
+        .should("be.focused");
+    });
+
+    // when hasFooter is true, pressing Tab on a focused list item moves focus to the
+    // first footer element and keeps the dropdown open.
+    it("pressing Tab while a list item is focused moves focus to the first footer element and keeps the dropdown open", () => {
+      cy.mount(selectBoxWithFooter);
+
+      // Open the dropdown and move focus into the list via ArrowDown.
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .click()
+        .realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // A list item should now be focused (not the search input).
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      // Tab should be intercepted and focus redirected into the footer.
+      cy.realPress("Tab");
+
+      cy.get("#select-box").find("#footer-action").should("be.focused");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+    });
+
+    it("calling close() programmatically while focus is in the footer closes the dropdown", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").find("#footer-action").then($btn => {
+        ($btn[0] as HTMLElement).focus();
+      });
+
+      cy.get("#select-box").then($el => {
+        ($el[0] as any).close();
+      });
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+    });
+
+    // Added: covers the SearchableListBase._validItems filter — foreign elements
+    // placed in the default slot without slot="footer" (e.g. a stray udex-button)
+    // must be ignored by getProcessedItems/selectedItems/nonGroupItems and never
+    // rendered as udex-list-item entries in the dropdown.
+    it("ignores non-list-item elements placed in the default slot and does not render them as udex-list-item entries", () => {
+      const selectBoxWithStrayButton = <div style="width: 350px; position:relative;">
+        <UDExSelectBox id="select-box-stray" label="Programming languages">
+          <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+          <UDExButton id="stray-button" design="Tertiary">Stray</UDExButton>
+        </UDExSelectBox>
+      </div>;
+
+      cy.mount(selectBoxWithStrayButton);
+      cy.get("#select-box-stray").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box-stray").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // The stray button must not be promoted into the rendered list.
+      cy.get("#select-box-stray").shadow()
+        .find("udex-list-item#stray-button")
+        .should("not.exist");
+
+      // Only the three UDExSelectBoxItem children should render as list items.
+      cy.get("#select-box-stray").shadow()
+        .find("udex-list-item")
+        .should("have.length", 3);
+
+      // The stray button still exists in light DOM — it is just silently ignored
+      // by the list, not removed from the component.
+      cy.get("#select-box-stray").find("#stray-button").should("exist");
+    });
+
+    it("emits close event when Escape is pressed inside the footer", () => {
+      cy.mount(selectBoxWithFooter);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("close", cy.stub().as("close"));
+      });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").find("#footer-action").then($btn => {
+        ($btn[0] as HTMLElement).focus();
+      });
+      cy.realPress("Escape");
+
+      cy.get("@close").should("have.been.called");
+    });
+  });
+
+  describe("SelectBox keyboard navigation with action icon buttons", () => {
+    const shortComponentWithFocusTargets = <div style="width: 350px; position:relative;">
+      <a id="previous-focus" href="#">Previous focusable element</a>
+      <UDExSelectBox id="select-box" height="400px" label="Programming languages" supportingText="category lists">
+        <UDExSelectBoxItem label="JavaScript" additionalText="Additional Text">
+          <UDExButton id='firstIcon' accessible-name='Action' slot='firstIcon' design='Tertiary' icon='action' size='Small'></UDExButton>
+          <UDExButton id='secondIcon' accessible-name='Email' slot='secondIcon' design='Tertiary' icon='email' size='Small'></UDExButton>
+        </UDExSelectBoxItem>
+        <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+      </UDExSelectBox>
+      <a id="next-focus" href="#">Next focusable element</a>
+    </div>;
+
+    const openDropdownOnFirstItem = () => {
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .click()
+        .realPress("ArrowDown");
+    };
+
+    it("Tab from list item closes dropdown and moves focus to next element outside component", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("Tab");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("#next-focus").should("be.focused");
+    });
+
+    it("Shift+Tab from list item closes dropdown and moves focus to search input", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("be.focused");
+    });
+
+    it("Escape from list item closes dropdown and returns focus to trigger", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("Escape");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("be.focused");
+    });
+
+    it("ArrowRight from list item focuses firstIcon button", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+
+      cy.get("#select-box").shadow().find("#firstIcon").should("be.focused");
+    });
+
+    it("ArrowRight from firstIcon button focuses secondIcon button", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowRight");
+
+      cy.get("#select-box").shadow().find("#secondIcon").should("be.focused");
+    });
+
+    it("ArrowRight from secondIcon button stays on secondIcon", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowRight");
+
+      cy.get("#select-box").shadow().find("#secondIcon").should("be.focused");
+    });
+
+    it("ArrowLeft from secondIcon button focuses firstIcon button", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowLeft");
+
+      cy.get("#select-box").shadow().find("#firstIcon").should("be.focused");
+    });
+
+    it("ArrowLeft from firstIcon button focuses list item", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowLeft");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+    });
+
+    it("ArrowDown from firstIcon button navigates to next list item", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("be.focused");
+    });
+
+    it("ArrowUp from firstIcon button navigates to previous list item (wraps to last)", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").last()
+        .should("be.focused");
+    });
+
+    it("ArrowDown from secondIcon button navigates to next list item", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowRight");
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("be.focused");
+    });
+
+    it("Escape from icon button closes dropdown and returns focus to input", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("Escape");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("be.focused");
+    });
+
+    it("Tab from icon button closes dropdown and moves focus to next element", () => {
+      cy.mount(shortComponentWithFocusTargets);
+      openDropdownOnFirstItem();
+
+      cy.realPress("ArrowRight");
+      cy.realPress("Tab");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("#next-focus").should("be.focused");
+    });
+  });
 });

package/cypress/specs/Tile.cy.tsx

@@ -0,0 +1,96 @@
+import { UDExTile } from "../support/component-imports.js";
+
+const interactiveTile = (
+  <UDExTile interactive href="https://example.com" accessibleName="Interactive tile">
+    Interactive content
+  </UDExTile>
+);
+
+const nonInteractiveTile = (
+  <UDExTile>Generic content</UDExTile>
+);
+
+const focusFixture = (
+  <>
+    <button id="before-tile" type="button">before</button>
+    <UDExTile interactive href="https://example.com" accessibleName="Interactive tile">
+      Interactive content
+    </UDExTile>
+  </>
+);
+
+const nonInteractiveFocusFixture = (
+  <>
+    <button id="before-tile" type="button">before</button>
+    <UDExTile>Generic content</UDExTile>
+  </>
+);
+
+describe("UDExTile - interactive mode", () => {
+  it("reflects the interactive property as the [interactive] attribute on the host", () => {
+    cy.mount(interactiveTile);
+    cy.get("[udex-tile]").should("have.attr", "interactive");
+  });
+
+  it("renders an anchor (a.udex-tile) so the :host([interactive]) cursor rule applies", () => {
+    // The :host([interactive]) .udex-tile { cursor: pointer; } rule fires when
+    // both preconditions hold:
+    //   1. The host carries the [interactive] attribute.
+    //   2. An element with class .udex-tile exists in the shadow root.
+    // Asserting both preconditions is the JS-observable proxy for "cursor:pointer
+    // is in effect" without reading computed style.
+    cy.mount(interactiveTile);
+    cy.get("[udex-tile]").should("have.attr", "interactive");
+    cy.get("[udex-tile]")
+      .shadow()
+      .find("a.udex-tile")
+      .should("exist")
+      .and("have.attr", "href", "https://example.com");
+  });
+
+  it("does not render an anchor when interactive is not set (non-interactive root is a div)", () => {
+    cy.mount(nonInteractiveTile);
+    cy.get("[udex-tile]").should("not.have.attr", "interactive");
+    cy.get("[udex-tile]").shadow().find("a.udex-tile").should("not.exist");
+    cy.get("[udex-tile]").shadow().find("div.udex-tile").should("exist");
+  });
+});
+
+describe("UDExTile - keyboard focus", () => {
+  it("interactive tile becomes focused when reached via Tab", () => {
+    // The :host([interactive]) .udex-tile:focus-visible { outline: 2px solid ... }
+    // rule fires when the inner anchor matches :focus-visible. We verify the
+    // JS-observable precondition: after Tab from the previous focusable element,
+    // the inner a.udex-tile receives DOM focus and the host carries [interactive].
+    cy.mount(focusFixture);
+    cy.get("#before-tile").focus();
+    cy.realPress("Tab");
+
+    cy.get("[udex-tile]").should("have.attr", "interactive");
+    cy.get("[udex-tile]")
+      .shadow()
+      .find("a.udex-tile")
+      .should("have.attr", "tabindex", "0")
+      .and("be.focused");
+  });
+
+  it("non-interactive tile is not reachable via Tab and does not receive focus", () => {
+    // Non-interactive renders <div class="udex-tile"> with no tabindex, so Tab
+    // does not land focus inside the shadow root. This is the JS-observable
+    // proxy for "no focus outline appears on non-interactive tiles".
+    cy.mount(nonInteractiveFocusFixture);
+    cy.get("#before-tile").focus();
+    cy.realPress("Tab");
+
+    cy.get("[udex-tile]").should("not.have.attr", "interactive");
+    cy.get("[udex-tile]").shadow().find("div.udex-tile").should("not.have.attr", "tabindex");
+    cy.get("[udex-tile]")
+      .shadow()
+      .find(".udex-tile")
+      .then(($el) => {
+        // The shadow root's :focus pseudo should not match the tile root, since
+        // it is not focusable.
+        expect($el.is(":focus")).to.equal(false);
+      });
+  });
+});

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

@@ -12,6 +12,7 @@ import UDExContact from "../../instrumented/Contact.js";
 import UDExContactItem from "../../instrumented/ContactItem.js";
 import UDExCountrySelector from "../../instrumented/CountrySelector.js";
 import UDExDivider from "../../instrumented/Divider.js";
+import UDExDropdown from "../../instrumented/Dropdown.js";
 import UDExEventRibbon from "../../instrumented/EventRibbon.js";
 import UDExFeed from "../../instrumented/Feed.js";
 import UDExFeedItem from "../../instrumented/FeedItem.js";
@@ -75,6 +76,7 @@ import UDExTag from "../../instrumented/Tag.js";
 import UDExTagGroup from "../../instrumented/TagGroup.js";
 import UDExTextArea from "../../instrumented/TextArea.js";
 import UDExTextField from "../../instrumented/TextField.js";
+import UDExTile from "../../instrumented/Tile.js";
 import UDExToast from "../../instrumented/Toast.js";
 import UDExTooltip from "../../instrumented/Tooltip.js";
 import UDExTruncatedText from "../../instrumented/TruncatedText.js";
@@ -98,6 +100,7 @@ export {
   UDExContactItem,
   UDExCountrySelector,
   UDExDivider,
+  UDExDropdown,
   UDExEventRibbon,
   UDExFeed,
   UDExFeedItem,
@@ -161,6 +164,7 @@ export {
   UDExTagGroup,
   UDExTextArea,
   UDExTextField,
+  UDExTile,
   UDExToast,
   UDExTooltip,
   UDExTruncatedText,

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

@@ -12,6 +12,7 @@ import UDExContact from "../../src/Contact.js";
 import UDExContactItem from "../../src/ContactItem.js";
 import UDExCountrySelector from "../../src/CountrySelector.js";
 import UDExDivider from "../../src/Divider.js";
+import UDExDropdown from "../../src/Dropdown.js";
 import UDExEventRibbon from "../../src/EventRibbon.js";
 import UDExFeed from "../../src/Feed.js";
 import UDExFeedItem from "../../src/FeedItem.js";
@@ -75,6 +76,7 @@ import UDExTag from "../../src/Tag.js";
 import UDExTagGroup from "../../src/TagGroup.js";
 import UDExTextArea from "../../src/TextArea.js";
 import UDExTextField from "../../src/TextField.js";
+import UDExTile from "../../src/Tile.js";
 import UDExToast from "../../src/Toast.js";
 import UDExTooltip from "../../src/Tooltip.js";
 import UDExTruncatedText from "../../src/TruncatedText.js";
@@ -98,6 +100,7 @@ export {
   UDExContactItem,
   UDExCountrySelector,
   UDExDivider,
+  UDExDropdown,
   UDExEventRibbon,
   UDExFeed,
   UDExFeedItem,
@@ -161,6 +164,7 @@ export {
   UDExTagGroup,
   UDExTextArea,
   UDExTextField,
+  UDExTile,
   UDExToast,
   UDExTooltip,
   UDExTruncatedText,

package/dist/Dropdown.d.ts

@@ -26,5 +26,10 @@ declare class UDExDropdown extends Popover {
     constructor();
     onAfterRendering(): void;
     setContentHeight(): void;
+    forwardToLast(): Promise<void>;
+    forwardToFirst(): Promise<void>;
+    private _getOpenerHost;
+    private _moveFocusAfter;
+    private _firstFocusableIn;
 }
 export default UDExDropdown;