@sapudex/web-components 2.62.0 → 2.63.1

package/cypress/specs/ListItem.cy.tsx

@@ -223,7 +223,8 @@ describe("ListItem", () => {
     });
 
     describe("Standalone rated MultiSelect preservation", () => {
-      it("keeps real focus and selection on the inner option while retaining the standalone checkbox and rating names", () => {
+      // Updated: decorative checkboxes are unnamed in every mode; the real-focus row owns the complete rating name.
+      it("keeps real focus and native selection on the fully named inner option with an unnamed decorative checkbox", () => {
         cy.mount(
           <div>
             <button id="before-rated-list-item">Previous</button>
@@ -238,6 +239,7 @@ describe("ListItem", () => {
             expect($row).to.have.attr("role", "option");
             expect($row).to.have.attr("tabindex", "0");
             expect($row).to.have.attr("aria-selected", String(UDExSelected));
+            expect($row).to.have.attr("aria-label", "Rated choice Rating 4.0, Total 20, Rating Indicator 4 of 5");
             expect($row).not.to.have.attr("aria-checked");
           });
           UDExItem().should($host => {
@@ -249,12 +251,12 @@ describe("ListItem", () => {
             expect($checkbox).to.have.attr("aria-hidden", "true");
             expect($checkbox).to.have.attr("tabindex", "-1");
             expect($checkbox[0]).to.have.property("checked", UDExSelected);
-            // Standalone real-focus items retain the existing name, including its trailing space.
-            const UDExName = `checkbox ${UDExSelected ? "Selected" : "Unselected"} `;
-            expect($checkbox[0]).to.have.property("accessibleName", UDExName);
-            expect($checkbox).to.have.attr("accessible-name", UDExName);
+            expect($checkbox).not.to.have.attr("accessible-name");
+            expect($checkbox).not.to.have.attr("aria-label");
+            expect(($checkbox[0] as HTMLElement & { accessibleName?: string }).accessibleName || "").to.equal("");
           });
-          UDExItem().shadow().find(".udex-list__content-wrap").should("have.attr", "aria-label", "Rated choice");
+          UDExItem().shadow().find(".udex-list__content-wrap")
+            .should("have.attr", "aria-label", "Rated choice Rating 4.0, Total 20, Rating Indicator 4 of 5");
           UDExItem().shadow().find("[udex-rating-indicator]").should($rating => {
             expect($rating).to.have.attr("aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
             expect($rating).to.have.attr("disabled");
@@ -272,6 +274,232 @@ describe("ListItem", () => {
       });
     });
 
+    describe("Accessible row name ownership", () => {
+      const normalizeText = (text: string | null) => (text || "").replace(/\s+/g, " ").trim();
+
+      function flattenedTextContent(node: Node): string {
+        if (node.nodeType === Node.ELEMENT_NODE && (node as Element).localName === "slot") {
+          const assigned = (node as HTMLSlotElement).assignedNodes({ flatten: true });
+          const nodes = assigned.length ? assigned : Array.from(node.childNodes);
+          return nodes.map(flattenedTextContent).join("");
+        }
+        if (!node.hasChildNodes()) {
+          return node.textContent || "";
+        }
+        // Preserve the raw text-node sequence, including adjacent inline elements, without adding separators.
+        return Array.from(node.childNodes).map(flattenedTextContent).join("");
+      }
+
+      function assertVisibleName(item: Cypress.Chainable<JQuery<HTMLElement>>, expected: string,
+        { owner = "row", name = expected, slotted = false }:
+        { owner?: "row" | "content" | "host"; name?: string; slotted?: boolean } = {}) {
+        item.shadow().find(".udex-list__content-wrap").should($wrapper => {
+          const wrapper = $wrapper[0];
+          const root = wrapper.getRootNode() as ShadowRoot;
+          const row = root.querySelector('[part="item"]')!;
+          const content = wrapper.querySelector(".udex-list__content")!;
+          const visibleText = normalizeText(slotted ? flattenedTextContent(content) : content.textContent);
+          expect(visibleText, "raw shared-container text retains literal word boundaries").to.equal(expected);
+          expect(wrapper).to.have.attr("aria-label", name);
+          const nameId = wrapper.getAttribute("aria-labelledby")!;
+          expect(nameId).to.equal(`${wrapper.getAttribute("_id")}-invisibleText`);
+          const source = root.getElementById(nameId);
+          expect(source, "hidden name source resolves in the row's own shadow root").not.to.equal(null);
+          expect(source!.getRootNode()).to.equal(root);
+          expect(source).to.have.class("hidden");
+          expect(normalizeText(source!.textContent)).to.equal(name);
+          if (owner === "row") {
+            expect(row).to.have.attr("aria-label", name);
+          } else {
+            expect(row).not.to.have.attr("aria-label");
+            if (owner === "host") {
+              expect(root.host).to.have.attr("aria-label", name);
+            }
+          }
+          if (name === expected) {
+            expect(normalizeText(source!.textContent)).to.equal(visibleText);
+          }
+        });
+      }
+
+      [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.SingleContent].forEach(mode => {
+        it(`preserves raw label/support/additional boundaries and local name ownership in ${mode}`, () => {
+          cy.mount(
+            <div>
+              <button id="before-boundary-item">Previous</button>
+              <UDExListItem id="boundary-item" mode={mode} label="<b>Java</b>Script"
+                supportingText="Frontend web development" additionalText="Code JS" />
+            </div>
+          );
+          const item = () => cy.get("#boundary-item");
+          const row = () => item().shadow().find('[part="item"]');
+          const singleContent = mode === UDExListMode.SingleContent;
+          if (!singleContent) {
+            cy.get("#before-boundary-item").realClick();
+            cy.realPress("Tab");
+            row().should("be.focused");
+            row().should("have.attr", "aria-selected", "false");
+          }
+          row().should("have.attr", "role", singleContent ? "listitem" : "option");
+          assertVisibleName(item(), "JavaScript Frontend web development Code JS",
+            { owner: singleContent ? "content" : "row" });
+          item().shadow().find(".udex-list__text-holder").should($holder => {
+            expect(normalizeText($holder[0].textContent)).to.equal("JavaScript Frontend web development");
+          });
+          item().shadow().find('[part="title"]').should("have.text", "JavaScript");
+          item().shadow().find('[part="title"] b').should("have.text", "Java");
+        });
+      });
+
+      it("preserves raw label/support/additional boundaries with a host-owned name and presentational native row", () => {
+        const expected = "JavaScript Frontend web development Code JS";
+        cy.mount(<UDExListItem id="host-boundary-item" mode={UDExListMode.MultiSelect}
+          _useHostAriaRole={true} role="option" aria-label={expected} aria-selected="false"
+          label="<b>Java</b>Script" supportingText="Frontend web development" additionalText="Code JS" />);
+        const item = () => cy.get("#host-boundary-item");
+        assertVisibleName(item(), expected, { owner: "host" });
+        item().shadow().find('[part="title"]').should("have.text", "JavaScript");
+        item().shadow().find('[part="item"]').should($row => {
+          expect($row).to.have.attr("role", "presentation");
+          ["aria-label", "aria-selected", "aria-checked", "tabindex"].forEach(attribute => {
+            expect($row).not.to.have.attr(attribute);
+          });
+        });
+      });
+
+      it("preserves literal boundaries with supporting-only or additional-only secondary text", () => {
+        cy.wrap([
+          { supportingText: "Frontend web development", additionalText: "", expected: "JavaScript Frontend web development" },
+          { supportingText: "", additionalText: "Code JS", expected: "JavaScript Code JS" },
+        ]).each(testCase => {
+          cy.mount(<UDExListItem id="partial-boundary-item" mode={UDExListMode.SingleSelect}
+            label="<b>Java</b>Script" supportingText={testCase.supportingText} additionalText={testCase.additionalText} />);
+          const item = () => cy.get("#partial-boundary-item");
+          assertVisibleName(item(), testCase.expected);
+          item().shadow().find('[part="title"]').should("have.text", "JavaScript");
+          item().shadow().find(testCase.supportingText ? '[part="additional-text"]' : '[part="supporting"]')
+            .should("not.exist");
+        });
+      });
+
+      it("removes and restores supporting text without concatenating label and additional text while focused", () => {
+        cy.mount(
+          <div>
+            <button id="before-reactive-boundary-item">Previous</button>
+            <UDExListItem id="reactive-boundary-item" mode={UDExListMode.MultiSelect}
+              label="<b>Java</b>Script" supportingText="Frontend web development" additionalText="Code JS" />
+          </div>
+        );
+        const item = () => cy.get("#reactive-boundary-item");
+        const row = () => item().shadow().find('[part="item"]');
+        cy.get("#before-reactive-boundary-item").realClick();
+        cy.realPress("Tab");
+        row().should("be.focused");
+        assertVisibleName(item(), "JavaScript Frontend web development Code JS");
+        item().invoke("prop", "supportingText", "");
+        assertVisibleName(item(), "JavaScript Code JS");
+        item().shadow().find('[part="supporting"]').should("not.exist");
+        row().should("be.focused");
+        item().invoke("prop", "supportingText", "Digital Builders");
+        assertVisibleName(item(), "JavaScript Digital Builders Code JS");
+        item().shadow().find('[part="title"]').should("have.text", "JavaScript");
+        row().should("be.focused");
+      });
+
+      // Updated: flatten the shared slot container without inserting whitespace, checking hidden names even during overrides.
+      it("names a real-focus row from default slotted text before support and additional text, restoring it after an explicit override", () => {
+        cy.mount(
+          <div>
+            <button id="before-slotted-list-item">Previous</button>
+            <UDExListItem id="slotted-name-item" mode={UDExListMode.MultiSelect}
+              supportingText="Choice support" additionalText="Code A">
+              {"  Slotted \n "}<span id="slotted-choice-label"><b>choice</b>{" label"}</span>{" \t text"}
+            </UDExListItem>
+          </div>
+        );
+        const UDExItem = () => cy.get("#slotted-name-item");
+        const UDExRow = () => UDExItem().shadow().find('[part="item"]');
+        const UDExFullName = "Slotted choice label text Choice support Code A";
+        const UDExAssertSlottedName = (UDExName: string) => {
+          assertVisibleName(UDExItem(), UDExFullName, { name: UDExName, slotted: true });
+          UDExItem().should($item => {
+            expect($item).not.to.have.attr("label");
+            expect(($item[0] as UDExListItem).label || "").to.equal("");
+          });
+          UDExRow().should("be.focused").should($row => {
+            expect($row).to.have.attr("role", "option");
+            expect($row).to.have.attr("aria-label", UDExName);
+            expect($row).to.have.attr("aria-selected", "false");
+            expect($row).not.to.have.attr("aria-checked");
+          });
+          UDExItem().shadow().find('slot[part="content"]').should($slot => {
+            expect(normalizeText(flattenedTextContent($slot[0]))).to.equal("Slotted choice label text");
+          });
+          UDExItem().find("#slotted-choice-label").should("be.visible").and("have.text", "choice label");
+          UDExItem().find("#slotted-choice-label b").should("be.visible").and("have.text", "choice");
+          UDExItem().shadow().find('[part="supporting"]').should("have.text", "Choice support");
+          UDExItem().shadow().find('[part="additional-text"]').should("have.text", "Code A");
+        };
+
+        cy.get("#before-slotted-list-item").realClick();
+        cy.realPress("Tab");
+        UDExAssertSlottedName(UDExFullName);
+        UDExItem().invoke("prop", "accessibleName", "Explicit slotted choice");
+        UDExAssertSlottedName("Explicit slotted choice");
+        UDExItem().invoke("prop", "accessibleName", "");
+        UDExAssertSlottedName(UDExFullName);
+      });
+
+      // Updated: verify the referenced hidden source independently without equating visible text to an override.
+      it("keeps an explicit row name instead of appending visible support, additional text or rating metadata", () => {
+        cy.mount(<UDExListItem id="explicit-name-item" mode={UDExListMode.MultiSelect}
+          accessibleName="Explicit choice" label="<b>Rated</b> choice" supportingText="Choice support"
+          additionalText="Code A" rating="4" ratingCount="4.0" totalCount="20" />);
+        const UDExRow = () => cy.get("#explicit-name-item").shadow().find('[part="item"]');
+        const assertNameSource = (expected: string) => {
+          UDExRow().should("have.attr", "aria-label", expected);
+          cy.get("#explicit-name-item").shadow().find(".udex-list__content-wrap").should($wrapper => {
+            const root = $wrapper[0].getRootNode() as ShadowRoot;
+            expect($wrapper).to.have.attr("aria-label", expected);
+            const source = root.getElementById($wrapper[0].getAttribute("aria-labelledby")!);
+            expect(source, "explicit name source resolves in the native row's shadow root").not.to.equal(null);
+            expect(source!.getRootNode()).to.equal(root);
+            expect(source).to.have.class("hidden");
+            expect(normalizeText(source!.textContent)).to.equal(expected);
+          });
+          cy.get("#explicit-name-item").shadow().find('[part="title"]').should("have.text", "Rated choice");
+        };
+        assertNameSource("Explicit choice");
+        cy.get("#explicit-name-item").invoke("prop", "accessibleName", "");
+        assertNameSource("Rated choice Choice support Code A Rating 4.0, Total 20, Rating Indicator 4 of 5");
+        cy.get("#explicit-name-item").invoke("prop", "accessibleName", "Restored override");
+        assertNameSource("Restored override");
+      });
+
+      it("does not duplicate the host-owned name or state on a presentational inner row", () => {
+        cy.mount(<UDExListItem id="host-named-item" mode={UDExListMode.MultiSelect}
+          _useHostAriaRole={true} role="option" aria-label="Host-owned choice" aria-selected="true"
+          selected accessibleName="Explicit inner name" label="Visible choice" supportingText="Choice support" />);
+        cy.get("#host-named-item").should($host => {
+          expect($host).to.have.attr("role", "option");
+          expect($host).to.have.attr("aria-label", "Host-owned choice");
+          expect($host).to.have.attr("aria-selected", "true");
+        });
+        cy.get("#host-named-item").shadow().find('[part="item"]').should($row => {
+          expect($row).to.have.attr("role", "presentation");
+          ["aria-label", "aria-selected", "aria-checked", "tabindex"].forEach(UDExAttribute => {
+            expect($row).not.to.have.attr(UDExAttribute);
+          });
+        });
+        cy.get("#host-named-item").shadow().find("[udex-checkbox]").should($checkbox => {
+          expect($checkbox).to.have.attr("aria-hidden", "true");
+          expect($checkbox).to.have.attr("tabindex", "-1");
+          expect($checkbox).not.to.have.attr("accessible-name");
+          expect($checkbox[0]).to.have.property("checked", true);
+        });
+      });
+    });
+
     // Added: unit-level coverage for the WCAG 4.1.2 Treeview Checkbox pattern getter
     // (ariaCheckedValue). It only activates when the item's accessible-role ===
     // "treeitem" (set by SearchableListBase in the tree pattern). The inner checkbox

package/cypress/specs/MastheadCountrySelector.cy.tsx

@@ -0,0 +1,177 @@
+import { UDExMastheadCountrySelector } from "../support/component-imports.js";
+
+const singleRegion = JSON.stringify([
+  {
+    title: "Europe",
+    countries: [
+      { displayTitle: "Germany", countryCode: "DE", url: "/germany/store.html" },
+      { displayTitle: "France", countryCode: "FR", url: "/france/store.html" },
+      { displayTitle: "Poland", countryCode: "PL", url: "/poland/store.html" },
+    ],
+  },
+]);
+
+const multiRegion = JSON.stringify([
+  {
+    title: "Americas",
+    countries: [
+      { displayTitle: "Canada", countryCode: "CA", url: "/canada/store.html" },
+      { displayTitle: "Brazil", countryCode: "BR", url: "/brazil/store.html" },
+    ],
+  },
+  {
+    title: "Europe",
+    countries: [
+      { displayTitle: "Germany", countryCode: "DE", url: "/germany/store.html" },
+      { displayTitle: "France", countryCode: "FR", url: "/france/store.html" },
+    ],
+  },
+]);
+
+describe("MastheadCountrySelector", () => {
+  describe("accessibleNameSearch property", () => {
+    it("passes accessible-name to the search field when set", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector"
+          accessible-name-search="Search countries"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("have.attr", "accessible-name", "Search countries");
+    });
+
+    it("applies accessible-name as aria-label on the search input", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-aria"
+          accessible-name-search="Find a country"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "aria-label", "Find a country");
+    });
+
+    it("does not set accessible-name on search when property is empty", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-no-a11y-name"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("not.have.attr", "accessible-name");
+    });
+  });
+
+  describe("accessibleNameSearchResetIcon property", () => {
+    it("passes accessible-name-reset-icon to the search field when set", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-reset-icon"
+          accessible-name-search-reset-icon="Clear search"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("have.attr", "accessible-name-reset-icon", "Clear search");
+    });
+
+    it("does not set accessible-name-reset-icon on search when property is empty", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-no-reset-icon-name"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("not.have.attr", "accessible-name-reset-icon");
+    });
+  });
+
+  describe("regions view", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-multi"
+          region-title="Choose your Region"
+          country-title="Choose your Country"
+          search-label="Search"
+          regions={multiRegion}>
+        </UDExMastheadCountrySelector>
+      );
+      cy.get("[udex-masthead-country-selector]").shadow().as("shadow");
+    });
+
+    it("renders region title", () => {
+      cy.get("@shadow").find(".udex-masthead-country-selector__title").should("have.text", "Choose your Region");
+    });
+
+    it("renders region items", () => {
+      cy.get("@shadow").find(".udex-masthead-country-selector__item_region").should("have.length", 2);
+    });
+
+    it("opens country list on region item click", () => {
+      cy.get("@shadow").find(".udex-masthead-country-selector__item_region").first().click();
+      cy.get("@shadow").find(".udex-masthead-country-selector__list_countries").should("exist");
+    });
+  });
+
+  describe("single region mode", () => {
+    it("shows the country list directly without region selection", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-single"
+          country-title="Choose your Country"
+          search-label="Search"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find(".udex-masthead-country-selector__list_countries")
+        .should("exist");
+    });
+  });
+
+  describe("hideSearch property", () => {
+    it("hides the search field when hideSearch is true", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-no-search"
+          hide-search
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("not.exist");
+    });
+  });
+});

package/cypress/specs/SelectBox.cy.tsx

@@ -3020,10 +3020,15 @@ describe("SelectBox", () => {
             .to.deep.equal([$host[0]]);
         });
       });
-      // Preserve rendered title checks in addition to the complete host aria-label.
+      // Updated: the full accessible name includes metadata; the visible title is only the primary label.
       UDExActiveHost().then($host => {
         if ($host.is("[udex-list-item]")) {
-          cy.wrap($host).shadow().find(".udex-list__content-wrap").should("have.attr", "aria-label", UDExLabel);
+          cy.wrap($host).shadow().find(".udex-list__content-wrap").should($content => {
+            expect($content).to.have.attr("aria-label", UDExAccessibleName);
+            const labelId = $content.attr("aria-labelledby")!;
+            const root = $content[0].getRootNode() as ShadowRoot;
+            expect(root.getElementById(labelId)?.textContent).to.equal(UDExAccessibleName);
+          });
           cy.wrap($host).shadow().find('[part="title"]').should("have.text", UDExLabel);
         }
       });

package/cypress/specs/SelectBoxAccessibility.cy.tsx

@@ -260,14 +260,14 @@ function UDExAssertNativeHostStates() {
 }
 
 function UDExAssertLeafName(UDExHost: Cypress.Chainable<JQuery<HTMLElement>>, UDExLabel: string, UDExSupportingText = "", UDExAdditionalText = "") {
-  // Active-descendant hosts expose the complete name, including text outside the title.
-  UDExHost.should("have.attr", "aria-label", [UDExLabel, UDExSupportingText, UDExAdditionalText].filter(Boolean).join(" "));
-  // Keep the rendered title/name-source checks, including after search highlighting.
+  const accessibleName = [UDExLabel, UDExSupportingText, UDExAdditionalText].filter(Boolean).join(" ");
+  // Updated: hosts and both wrapper name sources expose the full name, not just the visible title.
+  UDExHost.should("have.attr", "aria-label", accessibleName);
   UDExHost.shadow().find(".udex-list__content-wrap").should($content => {
-    expect($content).to.have.attr("aria-label", UDExLabel);
+    expect($content).to.have.attr("aria-label", accessibleName);
     const UDExLabelId = $content.attr("aria-labelledby")!;
     const UDExRoot = $content[0].getRootNode() as ShadowRoot;
-    expect(UDExRoot.getElementById(UDExLabelId)?.textContent).to.equal(UDExLabel);
+    expect(UDExRoot.getElementById(UDExLabelId)?.textContent).to.equal(accessibleName);
     expect($content.find('[part="title"]').text()).to.equal(UDExLabel);
   });
 }

package/cypress/specs/SideNavigation.cy.tsx

@@ -507,3 +507,52 @@ describe("SideNavigation - group collapse not blocked by selected child", () =>
     cy.get("[udex-side-navigation-item]").first().should("have.attr", "expanded");
   });
 });
+
+describe("SideNavigation - additionalContent slot", () => {
+  it("renders the additional-content area when content is slotted", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        <div slot="additionalContent">
+          <p>Lorem ipsum dolor sit amet</p>
+          <button>Button</button>
+        </div>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation]")
+      .shadow()
+      .find(".udex-side-navigation__additional-content")
+      .should("exist");
+  });
+
+  it("does not render the additional-content area when the slot is empty", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation]")
+      .shadow()
+      .find(".udex-side-navigation__additional-content")
+      .should("not.exist");
+  });
+
+  it("projects the slotted content into the additional-content area", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        <div slot="additionalContent">
+          <button type="button">Call to action</button>
+        </div>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation]")
+      .shadow()
+      .find(".udex-side-navigation__additional-content slot[name='additionalContent']")
+      .should("exist");
+    cy.get("[udex-side-navigation] [slot='additionalContent'] button").should(
+      "have.text",
+      "Call to action",
+    );
+  });
+});

package/cypress/specs/SideNavigationMobile.cy.tsx

@@ -0,0 +1,69 @@
+import {
+  UDExSideNavigationMobile,
+  UDExSideNavigationItem,
+} from "../support/component-imports.js";
+
+describe("SideNavigationMobile - additionalContent slot", () => {
+  const getAdditionalContent = () =>
+    cy.get("[udex-side-navigation-mobile]")
+      .shadow()
+      .find("[udex-side-navigation]")
+      .shadow()
+      .find(".udex-side-navigation__additional-content");
+
+  it("renders the additional-content area inside the inner nav when content is slotted", () => {
+    cy.mount(
+      <UDExSideNavigationMobile>
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        <div slot="additionalContent">
+          <button type="button">Button</button>
+        </div>
+      </UDExSideNavigationMobile>,
+    );
+
+    getAdditionalContent().should("exist");
+  });
+
+  it("does not render the additional-content area when the slot is empty", () => {
+    cy.mount(
+      <UDExSideNavigationMobile>
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+      </UDExSideNavigationMobile>,
+    );
+
+    getAdditionalContent().should("not.exist");
+  });
+
+  it("projects the slotted content into the inner nav's additionalContent slot", () => {
+    cy.mount(
+      <UDExSideNavigationMobile>
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        <div slot="additionalContent">
+          <button type="button">Call to action</button>
+        </div>
+      </UDExSideNavigationMobile>,
+    );
+
+    getAdditionalContent()
+      .find("slot[name='additionalContent']")
+      .should("exist");
+    cy.get("[udex-side-navigation-mobile]")
+      .shadow()
+      .find("[udex-side-navigation] [slot='additionalContent'] button")
+      .should("have.text", "Call to action");
+  });
+
+  it("renders the additional-content area alongside fixed items", () => {
+    cy.mount(
+      <UDExSideNavigationMobile>
+        <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        <UDExSideNavigationItem slot="fixedItems" text="Fixed 1"></UDExSideNavigationItem>
+        <div slot="additionalContent">
+          <button type="button">Button</button>
+        </div>
+      </UDExSideNavigationMobile>,
+    );
+
+    getAdditionalContent().should("exist");
+  });
+});

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

@@ -40,6 +40,7 @@ import UDExList from "../../instrumented/List.js";
 import UDExListGroupHeader from "../../instrumented/ListGroupHeader.js";
 import UDExListItem from "../../instrumented/ListItem.js";
 import UDExMastheadItem from "../../instrumented/MastheadItem.js";
+import UDExMastheadCountrySelector from "../../instrumented/MastheadCountrySelector.js";
 import UDExMastheadMenu from "../../instrumented/MastheadMenu.js";
 import UDExMastheadMobileMenu from "../../instrumented/MastheadMobileMenu.js";
 import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
@@ -61,6 +62,7 @@ import UDExSecondaryNavigation from "../../instrumented/SecondaryNavigation.js";
 import UDExSelectBox from "../../instrumented/SelectBox.js";
 import UDExSideNavigation from "../../instrumented/SideNavigation.js";
 import UDExSideNavigationItem from "../../instrumented/SideNavigationItem.js";
+import UDExSideNavigationMobile from "../../instrumented/SideNavigationMobile.js";
 import UDExSideNavigationSubItem from "../../instrumented/SideNavigationSubItem.js";
 import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
 import UDExSelectBoxItem from "../../instrumented/SelectBoxItem.js";
@@ -135,6 +137,7 @@ export {
   UDExListItem,
   UDExListGroupHeader,
   UDExMastheadItem,
+  UDExMastheadCountrySelector,
   UDExMastheadMenu,
   UDExMastheadMobileMenu,
   UDExMastheadProfileMenu,
@@ -156,6 +159,7 @@ export {
   UDExSelectBox,
   UDExSideNavigation,
   UDExSideNavigationItem,
+  UDExSideNavigationMobile,
   UDExSideNavigationSubItem,
   UDExSelectBoxGroupHeader,
   UDExSelectBoxItem,