@sapudex/web-components 2.44.0 → 2.45.0

package/cypress/specs/DatePicker.cy.tsx

@@ -0,0 +1,259 @@
+import { UDExDatePicker } from "../support/component-imports.js";
+
+describe("Date Picker", () => {
+  describe("formatPattern as native placeholder", () => {
+    // Updated: TextField now only renders the placeholder on the native input while active (focused),
+    // to avoid overlap with the floating label. Each test asserts absent before focus, present after focus.
+    // The placeholder is derived from `_effectivePlaceholder` — which returns
+    // `getFormat().oFormatOptions.pattern || formatPattern`. With the default
+    // `formatPattern = "MMM dd, yyyy"`, UI5's DateFormat honors that pattern, so the
+    // resolved value matches the property value.
+    it("passes the default formatPattern as the inner text field's native input placeholder when active", () => {
+      cy.mount(<UDExDatePicker id="defaultDatePicker" label="Date"></UDExDatePicker>);
+
+      // Before focus: placeholder is not rendered on the native input.
+      cy.get("#defaultDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .then($input => {
+          const placeholder = $input.attr("placeholder");
+          expect(placeholder === undefined || placeholder === "").to.equal(true);
+        });
+
+      // Focus the native input to switch the field to active state.
+      cy.get("#defaultDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      // After focus: the default formatPattern is exposed as the native placeholder.
+      cy.get("#defaultDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+    });
+
+    // Updated: same active-gate applies for explicit formatPattern.
+    it("passes an explicit formatPattern to the inner text field's native input placeholder when active", () => {
+      cy.mount(
+        <UDExDatePicker
+          id="customPatternDatePicker"
+          label="Date"
+          formatPattern="MM/dd/yyyy"
+        ></UDExDatePicker>,
+      );
+
+      // Before focus: placeholder is absent.
+      cy.get("#customPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .then($input => {
+          const placeholder = $input.attr("placeholder");
+          expect(placeholder === undefined || placeholder === "").to.equal(true);
+        });
+
+      // Focus, then assert the explicit pattern is rendered.
+      cy.get("#customPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#customPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MM/dd/yyyy");
+    });
+
+    // Updated: reactive update is only observable while the field is active.
+    it("updates the native input placeholder when formatPattern changes (while active)", () => {
+      cy.mount(
+        <UDExDatePicker
+          id="reactivePatternDatePicker"
+          formatPattern="MMM dd, yyyy"
+        ></UDExDatePicker>,
+      );
+
+      // Focus so the placeholder is actually rendered on the native input.
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+
+      cy.get("#reactivePatternDatePicker").then($el => {
+        ($el[0] as unknown as { formatPattern: string }).formatPattern = "MM/dd/yyyy";
+      });
+
+      // Keep focus so the field remains active, then assert the updated pattern is reflected.
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MM/dd/yyyy");
+    });
+
+    // Added: DatePicker forwards its resolved placeholder to the inner UDExTextField, which
+    // now renders the native placeholder without focus when no label is set. Assert visible
+    // before focus so the no-label branch of `active || !this.label` is exercised.
+    it("renders the default formatPattern as the native input placeholder without focus when no label is set", () => {
+      cy.mount(<UDExDatePicker id="noLabelDatePicker"></UDExDatePicker>);
+
+      // DatePicker has no `label` set, so the inner TextField skips the active gate.
+      cy.get("#noLabelDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+    });
+
+    // Updated: `_effectivePlaceholder` now falls back to `UDExDatePicker.DEFAULT_FORMAT_PATTERN`
+    // ("MMM dd, yyyy") whenever `formatPattern` is falsy — covers both the "never set" case and
+    // the Storybook case where clearing the control sets `format-pattern=""` on the attribute,
+    // which would otherwise override the class-level default of the property.
+    it("uses the default formatPattern as placeholder when formatPattern is not explicitly set", () => {
+      cy.mount(<UDExDatePicker id="defaultPatternDatePicker" label="Date"></UDExDatePicker>);
+
+      cy.get("#defaultPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#defaultPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+
+      // Case 2: explicit empty-string attribute (Storybook's cleared-control behavior).
+      // Mount with `format-pattern=""` set via the attribute so it overrides the class default,
+      // and confirm the getter still surfaces "MMM dd, yyyy" as the native placeholder.
+      cy.mount(
+        <UDExDatePicker
+          id="emptyPatternDatePicker"
+          label="Date"
+          format-pattern=""
+        ></UDExDatePicker>,
+      );
+
+      // Sanity check: the attribute is truly the empty string on the host, so the property
+      // is falsy and the fallback branch of `_effectivePlaceholder` is what's being exercised.
+      cy.get("#emptyPatternDatePicker").should("have.attr", "format-pattern", "");
+      cy.get("#emptyPatternDatePicker").then($el => {
+        const dp = $el[0] as unknown as { formatPattern: string };
+        expect(dp.formatPattern).to.equal("");
+      });
+
+      cy.get("#emptyPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#emptyPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+    });
+  });
+
+  describe("calendar timestamp navigation", () => {
+    // Regression coverage for the fix that forwards `_calendarTimestamp` to the inner
+    // `udex-calendar`. UI5's Calendar guards `timestamp` behind an internal
+    // `_valueIsProcessed` flag after first render — without this forwarding, the calendar
+    // stays on the initial (empty) month when the popover opens after a date is typed.
+    // The visual month is a CSS/render concern, so these tests assert the JS-observable
+    // contract: the getter and the property flow-through to the child element.
+
+    it("_calendarTimestamp returns a non-zero UTC seconds timestamp for a valid value", () => {
+      cy.mount(
+        <UDExDatePicker id="tsDatePicker" value="May 16, 2026"></UDExDatePicker>,
+      );
+
+      cy.get("#tsDatePicker").then($el => {
+        const dp = $el[0] as unknown as { _calendarTimestamp: number | undefined };
+        expect(dp._calendarTimestamp).to.be.a("number");
+        expect(dp._calendarTimestamp).to.be.greaterThan(0);
+      });
+    });
+
+    it("_calendarTimestamp is undefined when value is empty", () => {
+      cy.mount(<UDExDatePicker id="emptyTsDatePicker"></UDExDatePicker>);
+
+      cy.get("#emptyTsDatePicker").then($el => {
+        const dp = $el[0] as unknown as { _calendarTimestamp: number | undefined };
+        // `_extractFirstTimestamp` returns undefined for empty/invalid values.
+        // eslint-disable-next-line no-unused-expressions
+        expect(dp._calendarTimestamp).to.be.undefined;
+      });
+    });
+
+    it("forwards _calendarTimestamp as the `timestamp` property on the inner udex-calendar", () => {
+      cy.mount(
+        <UDExDatePicker
+          id="forwardTsDatePicker"
+          value="May 16, 2026"
+        ></UDExDatePicker>,
+      );
+
+      // Open the popover via the public API so the calendar is rendered into the tree.
+      // Avoids coupling to the icon-button shadow DOM shape of the inner TextField.
+      cy.get("#forwardTsDatePicker").then($el => {
+        ($el[0] as unknown as { showCalendar: () => void }).showCalendar();
+      });
+
+      // Read the DatePicker's `_calendarTimestamp` first, then assert the inner
+      // udex-calendar's `timestamp` property matches.
+      cy.get("#forwardTsDatePicker").then($el => {
+        const dp = $el[0] as unknown as { _calendarTimestamp: number | undefined };
+        const expected = dp._calendarTimestamp;
+        expect(expected, "DatePicker should expose a numeric _calendarTimestamp").to.be.a(
+          "number",
+        );
+
+        cy.get("#forwardTsDatePicker")
+          .shadow()
+          .find("udex-calendar")
+          .should("exist")
+          .then($cal => {
+            const cal = $cal[0] as unknown as { timestamp: number | undefined };
+            expect(cal.timestamp).to.equal(expected);
+          });
+      });
+    });
+  });
+});

package/cypress/specs/MastheadItem.cy.tsx

@@ -0,0 +1,88 @@
+import {
+  UDExMastheadItem,
+  UDExMastheadMenu,
+  UDExMastheadMobileMenu,
+} from "../support/component-imports.js";
+import { subItemsProduct } from "../fixtures/masthead-shell.js";
+
+describe("Masthead item dropdown scroll behavior", () => {
+  beforeEach(() => {
+    cy.viewport(800, 900);
+    cy.mount(
+      <UDExMastheadItem id="test-item" accessible-name="Products">
+        Products
+        <UDExMastheadMenu
+          id="test-menu"
+          slot="dropdown"
+          menu-title="Menu"
+          subItems={JSON.stringify(subItemsProduct)}
+        />
+      </UDExMastheadItem>,
+    );
+  });
+
+  it("scrolls dropdown-holder to top when item is deselected on mobile", () => {
+    cy.get("#test-item").then($item => {
+      ($item[0] as any).selected = true;
+    });
+
+    cy.get("#test-item")
+      .shadow()
+      .find(".udex-masthead-item__dropdown-holder")
+      .should("exist");
+
+    cy.get("#test-item").then($item => {
+      const item = $item[0] as any;
+      const holder = item.shadowRoot.querySelector(
+        ".udex-masthead-item__dropdown-holder",
+      ) as HTMLElement;
+      const scrollToSpy = cy.spy(holder, "scrollTo");
+      holder.scrollTop = 200;
+
+      item.selected = false;
+
+      expect(scrollToSpy).to.have.been.calledOnce;
+      expect(scrollToSpy).to.have.been.calledWith({ top: 0 });
+    });
+  });
+
+  it("does not scroll when item is deselected on desktop", () => {
+    cy.viewport(1920, 1080);
+
+    cy.get("#test-item").then($item => {
+      const item = $item[0] as any;
+      const scrollSpy = cy.spy(item, "dropdownScrollToTop");
+
+      item.selected = true;
+      item.selected = false;
+
+      expect(scrollSpy).to.not.have.been.called;
+    });
+  });
+
+  it("calls mobileMenuScrollToTop on the slotted mobile menu when deselected on mobile", () => {
+    cy.viewport(800, 900);
+
+    cy.mount(
+      <UDExMastheadItem id="menu-btn-item" accessible-name="menu" icon="menu2">
+        <UDExMastheadMobileMenu id="mobile-menu" slot="dropdown" />
+      </UDExMastheadItem>,
+    );
+
+    cy.get("#menu-btn-item").invoke("attr", "_is-menu-open-btn", "");
+
+    cy.get("#menu-btn-item").then($item => {
+      ($item[0] as any).selected = true;
+    });
+
+    cy.get("#mobile-menu").then($menu => {
+      const mobileMenu = $menu[0] as any;
+      const scrollSpy = cy.spy(mobileMenu, "mobileMenuScrollToTop");
+
+      const item = document.querySelector<any>("#menu-btn-item");
+      item.selected = false;
+
+      expect(scrollSpy).to.have.been.calledOnce;
+    });
+  });
+});

package/cypress/specs/MastheadShell.cy.tsx

@@ -577,7 +577,9 @@ describe("MastheadShell Default component", () => {
     });
 
     it("'ui5-profile-click' emits when clicking profile item", () => {
-      cy.get("#profile-item").click();
+      cy.get("#profile-item").then($el => {
+        $el[0].dispatchEvent(new CustomEvent("click-default", { bubbles: true, composed: true }));
+      });
       cy.get("#eventComp").should("have.text", "ui5-profile-click");
     });
 

package/cypress/specs/TagGroup.cy.tsx

@@ -106,4 +106,108 @@ describe("TagGroup", () => {
     cy.get("[udex-tag-group]").shadow().find("[udex-tooltip]").should("have.attr", "accessible-name", "Hidden tags");
   });
 
+  describe("Keyboard focus with hidden tags", () => {
+    it("keeps the 'n more' button visible when a visible tag receives focus (overflow case)", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      // Wait until TagGroup has processed overflow state before navigating
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+    });
+
+    it("keeps the 'n more' button reachable across successive focus moves between tags", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+
+      cy.realPress("Tab");
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+    });
+
+    it("does not collapse the tokenizer on focusin when there are no hidden tags (no regression)", () => {
+      cy.mount(<div><button id="before">before</button>{expandedTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("@tokenizer").should("have.attr", "expanded");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").should("have.attr", "expanded");
+    });
+
+    it("Tab on the last visible tag moves focus to the 'n more' button (overflow case)", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const visibleCount = totalCount - nMoreCount;
+        cy.get("#before").focus();
+        // Tab to enter group (1) + Tab through each visible tag to reach the last
+        Cypress._.times(visibleCount, () => cy.realPress("Tab"));
+      });
+
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.focused");
+    });
+
+    it("Shift+Tab on the 'n more' button moves focus back to the last visible tag", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const visibleCount = totalCount - nMoreCount;
+        cy.get("#before").focus();
+        // Tab through all visible tags + 1 to land on "n more"
+        Cypress._.times(visibleCount + 1, () => cy.realPress("Tab"));
+      });
+
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.focused");
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const lastVisibleToken = ($tokenizer[0] as any)._tokens[totalCount - nMoreCount - 1];
+        cy.wrap(lastVisibleToken).shadow().find("a, [tabindex='0']").first().should("be.focused");
+      });
+    });
+
+    it("keeps the 'n more' button present in shadow DOM whenever a visible tag is focused", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("exist").and("be.visible");
+    });
+  });
+
 });

package/cypress/specs/TextField.cy.tsx

@@ -103,7 +103,7 @@ describe("Text Field", () => {
   });
 
   it("Supporting text span doesn't appear by default", () => {
-    cy.get("#defaultTextField").shadow().get("span").should("not.exist",);
+    cy.get("#defaultTextField").shadow().find("span").should("not.exist");
   });
 
   it("\"aria-describedby\" attribute is set", () => {
@@ -138,6 +138,69 @@ describe("Text Field", () => {
     })
   });
 
+  describe("placeholder", () => {
+    // Updated: placeholder now only renders when the field is active (focused) so
+    // it does not visually overlap the floating label when the field is empty and blurred.
+    it("does not render a non-empty placeholder on the native input by default", () => {
+      cy.get("#defaultTextField").shadow().find("input").then($input => {
+        const placeholder = $input.attr("placeholder");
+        // Placeholder attribute may be absent or present as empty string when unset
+        expect(placeholder === undefined || placeholder === "").to.equal(true);
+      });
+    });
+
+    // Updated: placeholder is now gated on `active`. Assert absent before focus, present after focus.
+    it("does not render the placeholder on the native input until the field is active (focused)", () => {
+      const PLACEHOLDER_VALUE = "Enter your name";
+      cy.mount(<UDExTextField placeholder={PLACEHOLDER_VALUE} label="Name" id="placeholderTextField"></UDExTextField>);
+
+      // Before focus: placeholder should not be present (attribute absent or empty).
+      cy.get("#placeholderTextField").shadow().find("input").then($input => {
+        const placeholder = $input.attr("placeholder");
+        expect(placeholder === undefined || placeholder === "").to.equal(true);
+      });
+
+      // Focus the native input to switch the field to active state.
+      cy.get("#placeholderTextField").shadow().find("input").focus();
+
+      // After focus: placeholder should be rendered on the native input.
+      cy.get("#placeholderTextField").shadow().find("input")
+        .should("have.attr", "placeholder", PLACEHOLDER_VALUE);
+    });
+
+    // Updated: when no label is present, there is nothing to overlap the placeholder area,
+    // so the placeholder is rendered on the native input at all times (not gated on `active`).
+    it("renders the placeholder on the native input without focus when no label is set", () => {
+      const PLACEHOLDER_VALUE = "Enter your name";
+      cy.mount(
+        <UDExTextField placeholder={PLACEHOLDER_VALUE} id="noLabelPlaceholderTextField"></UDExTextField>,
+      );
+
+      // No label => `active || !this.label` is true even before focus.
+      cy.get("#noLabelPlaceholderTextField").shadow().find("input")
+        .should("have.attr", "placeholder", PLACEHOLDER_VALUE);
+    });
+
+    // Updated: propagation now only observable while the field is active — focus, then assert reactive update.
+    it("updates the native input placeholder when the property changes (while active)", () => {
+      cy.mount(<UDExTextField placeholder="Original" id="reactivePlaceholder"></UDExTextField>);
+
+      // Focus first so the placeholder is actually rendered on the native input.
+      cy.get("#reactivePlaceholder").shadow().find("input").focus();
+      cy.get("#reactivePlaceholder").shadow().find("input")
+        .should("have.attr", "placeholder", "Original");
+
+      cy.get("#reactivePlaceholder").then($el => {
+        ($el[0] as unknown as { placeholder: string }).placeholder = "Updated";
+      });
+
+      // Keep focus on the input so `active` stays true, and assert the new value is reflected.
+      cy.get("#reactivePlaceholder").shadow().find("input").focus();
+      cy.get("#reactivePlaceholder").shadow().find("input")
+        .should("have.attr", "placeholder", "Updated");
+    });
+  });
+
   it("sets object fieldRef current to input element inside shadow root", () => {
     const fieldRefObj = { current: null as HTMLInputElement | null };
     cy.mount(<UDExTextField fieldRef={fieldRefObj}></UDExTextField>);

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

@@ -11,6 +11,7 @@ import UDExCheckbox from "../../instrumented/Checkbox.js";
 import UDExContact from "../../instrumented/Contact.js";
 import UDExContactItem from "../../instrumented/ContactItem.js";
 import UDExCountrySelector from "../../instrumented/CountrySelector.js";
+import UDExDatePicker from "../../instrumented/DatePicker.js";
 import UDExDivider from "../../instrumented/Divider.js";
 import UDExDropdown from "../../instrumented/Dropdown.js";
 import UDExEventRibbon from "../../instrumented/EventRibbon.js";
@@ -99,6 +100,7 @@ export {
   UDExContact,
   UDExContactItem,
   UDExCountrySelector,
+  UDExDatePicker,
   UDExDivider,
   UDExDropdown,
   UDExEventRibbon,

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

@@ -11,6 +11,7 @@ import UDExCheckbox from "../../src/Checkbox.js";
 import UDExContact from "../../src/Contact.js";
 import UDExContactItem from "../../src/ContactItem.js";
 import UDExCountrySelector from "../../src/CountrySelector.js";
+import UDExDatePicker from "../../src/DatePicker.js";
 import UDExDivider from "../../src/Divider.js";
 import UDExDropdown from "../../src/Dropdown.js";
 import UDExEventRibbon from "../../src/EventRibbon.js";
@@ -99,6 +100,7 @@ export {
   UDExContact,
   UDExContactItem,
   UDExCountrySelector,
+  UDExDatePicker,
   UDExDivider,
   UDExDropdown,
   UDExEventRibbon,

package/dist/Carousel.d.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import type { CarouselNavigateEventDetail } from "@ui5/webcomponents/dist/Carousel.js";
 import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
 import type UDExButton from "./Button.js";
@@ -32,6 +33,9 @@ export declare enum UDExCarouselButtonDesign {
  * @public
  */
 declare class UDExCarousel extends UI5Element {
+    eventDetails: {
+        "navigate": CarouselNavigateEventDetail;
+    };
     /**
      * Defines the position of the navigation.
      * <br><br>
@@ -112,7 +116,7 @@ declare class UDExCarousel extends UI5Element {
     _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
     _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
     _onkeydown(e: KeyboardEvent): void;
-    _handleNavigate(): void;
+    _handleNavigate(e: UI5CustomEvent<UI5Carousel, "navigate">): void;
     onAfterRendering(): void;
 }
 export default UDExCarousel;

package/dist/Carousel.js

@@ -9,6 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isUp, isDown, isRight, isLeft, } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -144,8 +145,9 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
             this._calculateDisabledButtonsState();
         }
     }
-    _handleNavigate() {
+    _handleNavigate(e) {
         this._calculateDisabledButtonsState();
+        this.fireDecoratorEvent("navigate", e.detail);
     }
     onAfterRendering() {
         redirectAttributes(this, "carousel");
@@ -183,6 +185,13 @@ UDExCarousel = UDExCarousel_1 = __decorate([
         styles: CarouselCss,
         template: CarouselTemplate,
     })
+    /**
+     * Triggered when carousel navigates to a new slide
+     * @public
+     * @param { CustomEvent }
+     */
+    ,
+    event("navigate")
 ], UDExCarousel);
 UDExCarousel.define();
 export default UDExCarousel;