@sapudex/web-components 2.60.0 → 2.62.0

package/cypress/specs/SideNavigation.cy.tsx

@@ -0,0 +1,509 @@
+import {
+  UDExSideNavigation,
+  UDExSideNavigationItem,
+  UDExSideNavigationSubItem,
+} from "../support/component-imports.js";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SideNav = UDExSideNavigation as any;
+
+describe("SideNavigation - placement property", () => {
+  describe("Host attribute reflection", () => {
+    it("reflects placement 'Left' as the default host attribute", () => {
+      cy.mount(
+        <SideNav id="side-nav">
+          <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        </SideNav>,
+      );
+
+      cy.get("[udex-side-navigation]").should("have.attr", "placement", "Left");
+    });
+
+    it("reflects placement 'Right' when set on the host", () => {
+      cy.mount(
+        <SideNav id="side-nav" placement="Right">
+          <UDExSideNavigationItem text="Item 1"></UDExSideNavigationItem>
+        </SideNav>,
+      );
+
+      cy.get("[udex-side-navigation]").should("have.attr", "placement", "Right");
+    });
+  });
+
+});
+
+describe("SideNavigation - third-level nesting", () => {
+  const mountWithThirdLevel = (subItemExpanded = false) => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item 1" {...(subItemExpanded ? { expanded: true } as any : {})}>
+            <UDExSideNavigationSubItem text="Sub Item 1.1"></UDExSideNavigationSubItem>
+            <UDExSideNavigationSubItem text="Sub Item 1.2"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+  };
+
+  it("renders a toggle icon on a level-2 sub-item that has children", () => {
+    mountWithThirdLevel();
+    cy.get("[udex-side-navigation-sub-item]").first()
+      .shadow()
+      .find(".ui5-sn-item-toggle-icon")
+      .should("exist");
+  });
+
+  it("expands level-3 children when the level-2 sub-item is clicked", () => {
+    mountWithThirdLevel(false);
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item").click();
+    cy.get("[udex-side-navigation-sub-item]").first().should("have.attr", "expanded");
+  });
+
+  it("collapses level-3 children when an expanded level-2 sub-item is clicked again", () => {
+    mountWithThirdLevel(true);
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item").click();
+    cy.get("[udex-side-navigation-sub-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("sets the nested attribute on level-3 sub-items", () => {
+    mountWithThirdLevel(true);
+    cy.get("[udex-side-navigation-sub-item][nested]").should("have.length", 2);
+  });
+
+  // Updated: nested-item-click removed (#2822) — level-3 leaves now fire the standard
+  // bubbling selection-change on the host and gain the selected attribute, like level 1/2.
+  it("fires selection-change on the host when a leaf level-3 sub-item is clicked", () => {
+    mountWithThirdLevel(true);
+    const onSelectionChange = cy.stub().as("selectionChange");
+    cy.get("[udex-side-navigation]").then(($el) => {
+      $el[0].addEventListener("selection-change", onSelectionChange);
+    });
+    cy.get("[udex-side-navigation-sub-item][nested]").first().shadow().find(".ui5-sn-item").click();
+    cy.get("@selectionChange").should("have.been.calledOnce");
+    cy.get("[udex-side-navigation-sub-item][nested]").first().then(($leaf) => {
+      cy.get("@selectionChange").should((stub) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const detail = (stub as any).firstCall.args[0].detail;
+        expect(detail.item).to.equal($leaf[0]);
+      });
+    });
+    cy.get("[udex-side-navigation-sub-item][nested]").first().should("have.attr", "selected");
+  });
+
+  // Updated: nested-item-click (and its preventDefault capability) removed (#2822) —
+  // a level-3 leaf with an href now navigates natively, matching level-1/level-2 leaves.
+  it("navigates natively when a level-3 leaf with an href is clicked", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item 1" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Sub Item 1.1" href="#section-1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-sub-item][nested]").first().shadow().find(".ui5-sn-item").click();
+    cy.url().should("include", "section-1");
+  });
+});
+
+describe("SideNavigation - cross-level deselection (#2822)", () => {
+  // Added: the component now overrides selectableItems/allItems so the base selection
+  // sweep reaches level 3 — selecting any item deselects the previously selected item
+  // at any level, across levels.
+  const clickLeaf = (text: string) => {
+    cy.get(`[udex-side-navigation-sub-item][text="${text}"]`).shadow().find(".ui5-sn-item").click();
+  };
+
+  const mountTwoThirdLevelBranches = () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item A" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Leaf A.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item B" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Leaf B.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+  };
+
+  it("deselects a level-3 leaf when a different level-3 leaf under another parent is selected", () => {
+    mountTwoThirdLevelBranches();
+    clickLeaf("Leaf A.1");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("have.attr", "selected");
+    clickLeaf("Leaf B.1");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("not.have.attr", "selected");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf B.1"]`).should("have.attr", "selected");
+  });
+
+  it("deselects a level-1 leaf when a level-3 leaf is selected", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1 Leaf" href="#l1"></UDExSideNavigationItem>
+        <UDExSideNavigationItem text="Item 2" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item A" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Leaf A.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get(`[udex-side-navigation-item][text="L1 Leaf"]`).shadow().find(".ui5-sn-item").click();
+    cy.get(`[udex-side-navigation-item][text="L1 Leaf"]`).should("have.attr", "selected");
+    clickLeaf("Leaf A.1");
+    cy.get(`[udex-side-navigation-item][text="L1 Leaf"]`).should("not.have.attr", "selected");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("have.attr", "selected");
+  });
+
+  it("deselects a level-3 leaf when a level-2 leaf is selected", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item A" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Leaf A.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+          <UDExSideNavigationSubItem text="L2 Leaf"></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    clickLeaf("Leaf A.1");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("have.attr", "selected");
+    clickLeaf("L2 Leaf");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("not.have.attr", "selected");
+    cy.get(`[udex-side-navigation-sub-item][text="L2 Leaf"]`).should("have.attr", "selected");
+  });
+
+  it("moves selection to a level-3 leaf on click (sideNavigation selection wiring regression guard)", () => {
+    mountTwoThirdLevelBranches();
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("not.have.attr", "selected");
+    clickLeaf("Leaf A.1");
+    cy.get(`[udex-side-navigation-sub-item][text="Leaf A.1"]`).should("have.attr", "selected");
+  });
+});
+
+describe("SideNavigation - grouping item click toggles expand/collapse", () => {
+  // A parent item that has children toggles expand/collapse on title click and never
+  // navigates: the click is preventDefault'd + stopPropagation'd so it does not reach a
+  // host/document listener. This holds for both level-1 items and level-2 group sub-items.
+  // A parent with children must not carry an href — only leaf items navigate.
+  it("level-1 group expands on title click and does not propagate to a host listener", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1">
+          <UDExSideNavigationSubItem text="L2"></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    const onHostClick = cy.stub().as("hostClick");
+    cy.get("[udex-side-navigation]").then(($el) => {
+      $el[0].addEventListener("click", onHostClick);
+    });
+    cy.get("[udex-side-navigation-item]").first().should("not.have.attr", "expanded");
+    cy.get("[udex-side-navigation-item]").first().shadow().find(".ui5-sn-item").first().realClick();
+    cy.get("[udex-side-navigation-item]").first().should("have.attr", "expanded");
+    cy.get("@hostClick").should("not.have.been.called");
+  });
+
+  it("level-1 group collapses on a second title click", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1" expanded>
+          <UDExSideNavigationSubItem text="L2"></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-item]").first().shadow().find(".ui5-sn-item").first().realClick();
+    cy.get("[udex-side-navigation-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("level-1 group expands when the arrow icon is clicked", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1">
+          <UDExSideNavigationSubItem text="L2"></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-item]").first().shadow().find(".ui5-sn-item-toggle-icon").realClick();
+    cy.get("[udex-side-navigation-item]").first().should("have.attr", "expanded");
+  });
+
+  it("level-2 group expands on title click and does not propagate to a host listener", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1" expanded>
+          <UDExSideNavigationSubItem text="L2">
+            <UDExSideNavigationSubItem text="L3"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    const onHostClick = cy.stub().as("hostClick");
+    cy.get("[udex-side-navigation]").then(($el) => {
+      $el[0].addEventListener("click", onHostClick);
+    });
+    cy.get("[udex-side-navigation-sub-item]").first().should("not.have.attr", "expanded");
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item").first().realClick();
+    cy.get("[udex-side-navigation-sub-item]").first().should("have.attr", "expanded");
+    cy.get("@hostClick").should("not.have.been.called");
+  });
+
+  it("level-2 group collapses on a second title click", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="L2" {...({ expanded: true } as any)}>
+            <UDExSideNavigationSubItem text="L3"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item").first().realClick();
+    cy.get("[udex-side-navigation-sub-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("level-2 group expands when the arrow icon is clicked", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1" expanded>
+          <UDExSideNavigationSubItem text="L2">
+            <UDExSideNavigationSubItem text="L3"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item-toggle-icon").realClick();
+    cy.get("[udex-side-navigation-sub-item]").first().should("have.attr", "expanded");
+  });
+});
+
+describe("SideNavigation - third-level keyboard navigation", () => {
+  const mountExpandedThreeLevels = () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item 1" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Sub Item 1.1"></UDExSideNavigationSubItem>
+            <UDExSideNavigationSubItem text="Sub Item 1.2"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+  };
+
+  it("includes expanded level-3 items in the parent level-2 focusableItems", () => {
+    mountExpandedThreeLevels();
+    cy.get("[udex-side-navigation-sub-item]").first().then(($el) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const focusable = ($el[0] as any).focusableItems as HTMLElement[];
+      // the level-2 group itself plus its two level-3 children
+      expect(focusable).to.have.length(3);
+      expect(focusable[1].getAttribute("text")).to.equal("Sub Item 1.1");
+      expect(focusable[2].getAttribute("text")).to.equal("Sub Item 1.2");
+    });
+  });
+
+  it("excludes collapsed level-3 items from the parent level-2 focusableItems", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          <UDExSideNavigationSubItem text="Sub Item 1">
+            <UDExSideNavigationSubItem text="Sub Item 1.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-sub-item]").first().then(($el) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const focusable = ($el[0] as any).focusableItems as HTMLElement[];
+      // only the group itself when collapsed
+      expect(focusable).to.have.length(1);
+    });
+  });
+
+  it("reaches a level-3 item by walking down with the ArrowDown key", () => {
+    mountExpandedThreeLevels();
+    cy.get("[udex-side-navigation-item]").first().shadow().find(".ui5-sn-item").first()
+      .then(($el) => { ($el[0] as HTMLElement).focus(); });
+    // Item 1 -> Sub Item 1 -> Sub Item 1.1
+    cy.realPress("ArrowDown");
+    cy.realPress("ArrowDown");
+    cy.focused().should(($el) => {
+      const host = ($el[0].getRootNode() as ShadowRoot).host as HTMLElement;
+      expect(host.getAttribute("text")).to.equal("Sub Item 1.1");
+    });
+  });
+});
+
+describe("SideNavigation - third-level expand/collapse via keyboard", () => {
+  const mountGroup = (expanded = false) => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item 1" {...(expanded ? { expanded: true } as any : {})}>
+            <UDExSideNavigationSubItem text="Sub Item 1.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item").first()
+      .then(($el) => { ($el[0] as HTMLElement).focus(); });
+  };
+
+  it("expands a collapsed group sub-item with ArrowRight", () => {
+    mountGroup(false);
+    cy.realPress("ArrowRight");
+    cy.get("[udex-side-navigation-sub-item]").first().should("have.attr", "expanded");
+  });
+
+  it("collapses an expanded group sub-item with ArrowLeft", () => {
+    mountGroup(true);
+    cy.realPress("ArrowLeft");
+    cy.get("[udex-side-navigation-sub-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("expands a collapsed group sub-item with the Plus key", () => {
+    mountGroup(false);
+    cy.realPress("+");
+    cy.get("[udex-side-navigation-sub-item]").first().should("have.attr", "expanded");
+  });
+
+  it("collapses an expanded group sub-item with the Minus key", () => {
+    mountGroup(true);
+    cy.realPress("-");
+    cy.get("[udex-side-navigation-sub-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("keeps expand/collapse working after a level-3 child is selected", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item 1" {...{ expanded: true } as any}>
+            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+            <UDExSideNavigationSubItem text="Sub Item 1.1" {...{ selected: true } as any}></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-sub-item]").first().shadow().find(".ui5-sn-item").first()
+      .then(($el) => { ($el[0] as HTMLElement).focus(); });
+    cy.realPress("ArrowLeft");
+    cy.get("[udex-side-navigation-sub-item]").first().should("not.have.attr", "expanded");
+    cy.realPress("ArrowRight");
+    cy.get("[udex-side-navigation-sub-item]").first().should("have.attr", "expanded");
+  });
+});
+
+describe("SideNavigation - third-level keyboard selection", () => {
+  const mountLeaf = () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="Item 1" expanded>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="Sub Item 1" {...{ expanded: true } as any}>
+            <UDExSideNavigationSubItem text="Sub Item 1.1"></UDExSideNavigationSubItem>
+          </UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+  };
+
+  // Updated: nested-item-click removed (#2822) — Enter on a focused level-3 leaf now
+  // fires the standard bubbling selection-change on the host.
+  it("fires selection-change when Enter is pressed on a focused level-3 item", () => {
+    mountLeaf();
+    const onSelectionChange = cy.stub().as("selectionChange");
+    cy.get("[udex-side-navigation]").then(($el) => {
+      $el[0].addEventListener("selection-change", onSelectionChange);
+    });
+    cy.get("[udex-side-navigation-sub-item][nested]").first().shadow().find(".ui5-sn-item").first()
+      .then(($el) => { ($el[0] as HTMLElement).focus(); });
+    cy.realPress("Enter");
+    cy.get("@selectionChange").should("have.been.calledOnce");
+    cy.get("[udex-side-navigation-sub-item][nested]").first().then(($leaf) => {
+      cy.get("@selectionChange").should((stub) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const detail = (stub as any).firstCall.args[0].detail;
+        expect(detail.item).to.equal($leaf[0]);
+      });
+    });
+  });
+
+  // Updated: nested-item-click removed (#2822) — Space on a focused level-3 leaf now
+  // fires the standard bubbling selection-change on the host.
+  it("fires selection-change when Space is pressed on a focused level-3 item", () => {
+    mountLeaf();
+    const onSelectionChange = cy.stub().as("selectionChange");
+    cy.get("[udex-side-navigation]").then(($el) => {
+      $el[0].addEventListener("selection-change", onSelectionChange);
+    });
+    cy.get("[udex-side-navigation-sub-item][nested]").first().shadow().find(".ui5-sn-item").first()
+      .then(($el) => { ($el[0] as HTMLElement).focus(); });
+    cy.realPress("Space");
+    cy.get("@selectionChange").should("have.been.calledOnce");
+    cy.get("[udex-side-navigation-sub-item][nested]").first().then(($leaf) => {
+      cy.get("@selectionChange").should((stub) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const detail = (stub as any).firstCall.args[0].detail;
+        expect(detail.item).to.equal($leaf[0]);
+      });
+    });
+  });
+});
+
+describe("SideNavigation - group collapse not blocked by selected child", () => {
+  it("collapses a level-1 group via ArrowLeft even when a direct child is selected", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <UDExSideNavigationItem text="L1" {...({ expanded: true } as any)}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="L2" {...({ selected: true } as any)}></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-item]").first().shadow().find(".ui5-sn-item").first()
+      .then(($el) => { ($el[0] as HTMLElement).focus(); });
+    cy.realPress("ArrowLeft");
+    cy.get("[udex-side-navigation-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("collapses a level-1 group via click even when a direct child is selected", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <UDExSideNavigationItem text="L1" {...({ expanded: true } as any)}>
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="L2" {...({ selected: true } as any)}></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-item]").first().shadow().find(".ui5-sn-item").first().realClick();
+    cy.get("[udex-side-navigation-item]").first().should("not.have.attr", "expanded");
+  });
+
+  it("opens a level-1 group on initial render when a child starts selected", () => {
+    cy.mount(
+      <SideNav id="side-nav">
+        <UDExSideNavigationItem text="L1">
+          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+          <UDExSideNavigationSubItem text="L2" {...({ selected: true } as any)}></UDExSideNavigationSubItem>
+        </UDExSideNavigationItem>
+      </SideNav>,
+    );
+    cy.get("[udex-side-navigation-item]").first().should("have.attr", "expanded");
+  });
+});

package/cypress/specs/Table.cy.tsx

@@ -1,4 +1,5 @@
 import { UDExTable, UDExTableHeaderRow, UDExTableHeaderCell, UDExTableRow, UDExTableGroupRow, UDExTableCell, UDExButton, UDExLink, UDExRatingIndicator } from "../support/component-imports.js";
+import { UDExTableCellVerticalAlign } from "../../src/types/Table.js";
 
 const defaultTable = <UDExTable
     id="table"
@@ -527,3 +528,92 @@ describe("TableGroupRow ARIA Structure", () => {
     });
   });
 });
+
+const cellVerticalAlignTable = <UDExTable id="cell-va-table">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Stock</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Qty</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableRow>
+    <UDExTableCell id="cva-cell-top" vertical-align="Top">Item</UDExTableCell>
+    <UDExTableCell id="cva-cell-bottom" vertical-align="Bottom">$100</UDExTableCell>
+    <UDExTableCell id="cva-cell-center" vertical-align="Center">5</UDExTableCell>
+    <UDExTableCell id="cva-cell-default">10</UDExTableCell>
+  </UDExTableRow>
+</UDExTable>;
+
+const rowVerticalAlignTable = <UDExTable id="row-va-table">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell id="rva-header">Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableRow id="rva-row-aligned" vertical-align="Top">
+    <UDExTableCell id="rva-cell-inherit">Item 1</UDExTableCell>
+    <UDExTableCell id="rva-cell-override" vertical-align="Bottom">$100</UDExTableCell>
+    <UDExTableCell id="rva-cell-explicit-center" vertical-align="Center">5</UDExTableCell>
+  </UDExTableRow>
+  <UDExTableRow id="rva-row-plain">
+    <UDExTableCell id="rva-cell-plain">Item 2</UDExTableCell>
+    <UDExTableCell>$200</UDExTableCell>
+  </UDExTableRow>
+</UDExTable>;
+
+describe("TableCell and TableRow verticalAlign", () => {
+  describe("cell-level (UDExTableCell)", () => {
+    beforeEach(() => {
+      cy.mount(cellVerticalAlignTable);
+    });
+
+    it("cell with vertical-align='Top' gets align-items: flex-start", () => {
+      cy.get("#cva-cell-top").should("have.css", "align-items", "flex-start");
+    });
+
+    it("cell with vertical-align='Bottom' gets align-items: flex-end", () => {
+      cy.get("#cva-cell-bottom").should("have.css", "align-items", "flex-end");
+    });
+
+    it("cell with vertical-align='Center' gets align-items: center", () => {
+      cy.get("#cva-cell-center").should("have.css", "align-items", "center");
+    });
+
+    it("cell without vertical-align defaults to align-items: center", () => {
+      cy.get("#cva-cell-default").should("have.css", "align-items", "center");
+    });
+
+    it("cell verticalAlign property defaults to 'Center'", () => {
+      cy.get("#cva-cell-default").then($cell => {
+        expect(($cell[0] as UDExTableCell).verticalAlign).to.equal(UDExTableCellVerticalAlign.Center);
+      });
+    });
+  });
+
+  describe("row-level (UDExTableRow)", () => {
+    beforeEach(() => {
+      cy.mount(rowVerticalAlignTable);
+    });
+
+    it("row vertical-align propagates to a cell without its own vertical-align", () => {
+      cy.get("#rva-cell-inherit").should("have.css", "align-items", "flex-start");
+    });
+
+    it("a cell's own vertical-align overrides the row's vertical-align", () => {
+      cy.get("#rva-cell-override").should("have.css", "align-items", "flex-end");
+    });
+
+    it("a cell in a row without vertical-align defaults to align-items: center", () => {
+      cy.get("#rva-cell-plain").should("have.css", "align-items", "center");
+    });
+
+    it("row verticalAlign property defaults to 'Center'", () => {
+      cy.get("#rva-row-plain").then($row => {
+        expect(($row[0] as UDExTableRow).verticalAlign).to.equal(UDExTableCellVerticalAlign.Center);
+      });
+    });
+
+    it("a cell left at the default 'Center' takes the aligned row's value", () => {
+      cy.get("#rva-cell-explicit-center").should("have.css", "align-items", "flex-start");
+    });
+  });
+});