@sapudex/web-components 2.56.0 → 2.58.0

package/cypress/specs/TabNavigation.cy.tsx

@@ -1,5 +1,6 @@
 import UDExTabNavigation, { UDExTabNavigationOrientation, UDExTabNavigationPlacement, UDExTabNavigationVerticalAlignment } from "../../src/TabNavigation.js";
 import UDExTab from "../../src/Tab.js";
+import UDExLink from "../../src/Link.js";
 
 // ─── Process Tab fixtures ─────────────────────────────────────────────────────
 
@@ -223,12 +224,12 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find(".udex-tab-navigation__root")
           .should("be.visible");
-        
+
         // All tabs should be visible without overflow
         cy.get("[udex-tab-navigation]")
           .find("udex-tab")
           .should("have.length", 5);
-        
+
         cy.get("[udex-tab-navigation]")
           .shadow()
           .find("button[role='tab']")
@@ -250,7 +251,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "General Settings");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("h3")
@@ -270,7 +271,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "Notifications");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("h3")
@@ -279,7 +280,7 @@ describe("Tab Navigation component", () => {
 
       it("emits tab-select event on tab change", () => {
         const tabSelectHandler = cy.stub().as("tabSelect");
-        
+
         cy.mount(
           <UDExTabNavigation orientation="Vertical" onTabSelect={tabSelectHandler}>
             <UDExTab text="Tab 1" selected>
@@ -468,11 +469,11 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find(".udex-tab-navigation__root")
           .should("be.visible");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab")
           .should("have.length", 3);
-        
+
         cy.get("[udex-tab-navigation]")
           .shadow()
           .find("button[role='tab']")
@@ -484,7 +485,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "Tab 1");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("p")
@@ -504,7 +505,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "Tab 3");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("p")
@@ -826,15 +827,15 @@ describe("Tab Navigation component", () => {
       it("displays body text content correctly for each vertical tab", () => {
         cy.mount(
           <UDExTabNavigation orientation="Vertical">
-            <UDExTab 
-              text="Settings" 
-              bodyText="Configure your preferences" 
+            <UDExTab
+              text="Settings"
+              bodyText="Configure your preferences"
               selected
             >
               <div>Settings content</div>
             </UDExTab>
-            <UDExTab 
-              text="Account" 
+            <UDExTab
+              text="Account"
               bodyText="Manage your account"
             >
               <div>Account content</div>
@@ -1046,7 +1047,7 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
           <UDExTab text="Account" body-text="Privacy settings" selected>
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
@@ -1065,8 +1066,8 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
           <UDExTab text="Account" selected>
-            <udex-link slot="link" href="https://sap.com/privacy" design="Default">Privacy Policy</udex-link>
-            <udex-link slot="link" href="https://sap.com/terms" design="Default">Terms of Service</udex-link>
+            <UDExLink slot="link" href="https://sap.com/privacy" design="Default">Privacy Policy</UDExLink>
+            <UDExLink slot="link" href="https://sap.com/terms" design="Default">Terms of Service</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
@@ -1085,11 +1086,11 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
           <UDExTab text="Account" selected>
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
-            <udex-link slot="link" href="https://sap.com/" design="Default">Terms of Service</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Terms of Service</UDExLink>
             <div>Settings content</div>
           </UDExTab>
         </UDExTabNavigation>
@@ -1117,7 +1118,7 @@ describe("Tab Navigation component", () => {
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Settings content</div>
           </UDExTab>
         </UDExTabNavigation>
@@ -1139,7 +1140,7 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Horizontal}>
           <UDExTab text="Account" selected>
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
@@ -1983,6 +1984,198 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  // DOM-measurement-based overflow does not work in Cypress component tests
+  // (see the skipped overflow suites above), so we move tabs into the overflow
+  // popover programmatically. The popover only renders once _overflowItems has
+  // length, so we populate it first, wait for the popover to mount, then open it.
+  const openOverflowPopover = (overflowStartIndex: number) => {
+    // 1. Set _overflowItems and stub updateOverflowItems so onBeforeRendering
+    //    cannot reset it back to [] (which it would, because no tabs are hidden
+    //    in the Cypress layout environment).
+    cy.get("[udex-tab-navigation]").then($el => {
+      const nav = $el[0] as any;
+      // Stub first so onBeforeRendering cannot reset _overflowItems.
+      nav.updateOverflowItems = () => {};
+      // Setting the property triggers the internal re-render via the UI5 setter.
+      nav._overflowItems = Array.from(nav.items).slice(overflowStartIndex);
+    });
+
+    // 2. Once the popover is in the DOM, open it using the More button as opener.
+    cy.get("[udex-tab-navigation]").shadow().find("[ui5-popover]").should("exist");
+    cy.get("[udex-tab-navigation]").then($el => {
+      const nav = $el[0] as any;
+      nav._popover = nav.getResponsePopover();
+      nav._popover.opener = nav.getMoreButton();
+      nav._popover.open = true;
+      nav._isExpanded = true;
+      // updateOverflowItems is stubbed, so it never removes the hidden attribute.
+      // Unhide the More button so it can receive focus (e.g. on Escape).
+      nav.getMoreButton()?.removeAttribute("hidden");
+    });
+
+    // 3. Wait for the overflow tab buttons to be in the DOM.
+    cy.get("[udex-tab-navigation]")
+      .shadow()
+      .find(".udex-tab-overflow__button")
+      .should("exist");
+  };
+
+  describe("Overflow dropdown — disabled tab navigation", () => {
+
+    it("disabled item has aria-disabled and is not interactive", () => {
+      const tabSelectStub = cy.stub().as("tabSelect");
+
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        $el[0].addEventListener("tab-select", tabSelectStub);
+      });
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3
+
+      // The disabled overflow item reflects aria-disabled="true".
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-overflow__button[aria-disabled='true']")
+        .should("contain.text", "Tab 2");
+
+      // Clicking the disabled item must not select it nor fire tab-select.
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-overflow__button[aria-disabled='true']")
+        .click({ force: true });
+
+      cy.get("@tabSelect").should("not.have.been.called");
+
+      // Tab 1 remains the selected (active) header tab.
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active")
+        .should("contain.text", "Tab 1");
+    });
+
+    it("arrow navigation skips disabled items", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4" disabled><div>Content 4</div></UDExTab>
+          <UDExTab text="Tab 5"><div>Content 5</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3, Tab 4 (disabled), Tab 5
+
+      // ArrowDown from Tab 3 (index 1) skips disabled Tab 4 and lands on Tab 5.
+      // onNextItemInPopover sets tabindex="0" on the destination item.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        items.forEach((item, i) => item.setAttribute("tabindex", i === 1 ? "0" : "-1"));
+        nav.onNextItemInPopover(items[1]);
+      });
+      cy.get("[udex-tab-navigation]").shadow()
+        .find(".udex-tab-overflow__button").contains("Tab 5")
+        .should("have.attr", "tabindex", "0");
+
+      // ArrowUp from Tab 3 (index 1) skips disabled Tab 2 and wraps back to Tab 5.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        items.forEach((item, i) => item.setAttribute("tabindex", i === 1 ? "0" : "-1"));
+        nav.onPreviousItemInPopover(items[1]);
+      });
+      cy.get("[udex-tab-navigation]").shadow()
+        .find(".udex-tab-overflow__button").contains("Tab 5")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("focus moves to first non-disabled item on open when first item is disabled", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3, Tab 4
+
+      // onFocusFirstItemPopover sets tabindex="0" on the first non-disabled item.
+      cy.get("[udex-tab-navigation]").then($el => {
+        ($el[0] as any).onFocusFirstItemPopover();
+      });
+      cy.get("[udex-tab-navigation]").shadow()
+        .find(".udex-tab-overflow__button").contains("Tab 3")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("Home key moves focus to first non-disabled item", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3, Tab 4
+
+      // Spy on .focus() calls to assert which item handleHome targets.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        let focusedItem: HTMLElement | undefined;
+        items.forEach(item => {
+          const orig = item.focus.bind(item);
+          item.focus = () => { focusedItem = item; orig(); };
+        });
+        const e = new KeyboardEvent("keydown", { key: "Home", keyCode: 36, bubbles: true, cancelable: true });
+        nav.handleHome(e);
+        // Tab 3 (index 1) is the first non-disabled item; Tab 2 (index 0) must be skipped.
+        expect(focusedItem).to.equal(items[1]);
+      });
+    });
+
+    it("End key moves focus to last non-disabled item", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          <UDExTab text="Tab 5" disabled><div>Content 5</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(2); // overflow: Tab 3, Tab 4, Tab 5 (disabled)
+
+      // Spy on .focus() calls to assert which item handleEnd targets.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        let focusedItem: HTMLElement | undefined;
+        items.forEach(item => {
+          const orig = item.focus.bind(item);
+          item.focus = () => { focusedItem = item; orig(); };
+        });
+        const e = new KeyboardEvent("keydown", { key: "End", keyCode: 35, bubbles: true, cancelable: true });
+        nav.handleEnd(e);
+        // Tab 4 (index 1) is the last non-disabled item; Tab 5 (index 2) must be skipped.
+        expect(focusedItem).to.equal(items[1]);
+      });
+    });
+  });
+
   // ── Process Tab variant ──────────────────────────────────────────────────────
 
   describe("TabNavigation - Process Tab variant", () => {
@@ -2376,4 +2569,87 @@ describe("Tab Navigation component", () => {
       });
     });
   });
+
+  describe("Overflow dropdown — focus management", () => {
+    it("pressing Escape closes the popover and moves focus to the More button", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const e = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, bubbles: true, cancelable: true });
+        nav.handleEscape(e);
+      });
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("[ui5-popover]")
+        .should("not.have.attr", "open");
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-more")
+        .shadow()
+        .find("button")
+        .should("be.focused");
+    });
+
+    it("clicking an overflow item moves focus to the selected tab in the header", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-overflow__button")
+        .contains("Tab 2")
+        .click({ force: true });
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab[aria-selected='true']")
+        .should("contain.text", "Tab 2")
+        .and("be.focused");
+    });
+
+    it("pressing Enter on an overflow item moves focus to the selected tab in the header", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        const tab2Item = items.find((item) => item.textContent?.trim().startsWith("Tab 2"))!;
+        const e = new KeyboardEvent("keydown", { key: "Enter", keyCode: 13, bubbles: true, cancelable: true });
+        Object.defineProperty(e, "target", { value: tab2Item, configurable: true });
+        nav.handleEnterOrSpace(e);
+      });
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab[aria-selected='true']")
+        .should("contain.text", "Tab 2")
+        .and("be.focused");
+    });
+  });
 });

package/cypress/specs/TagGroup.cy.tsx

@@ -210,4 +210,39 @@ describe("TagGroup", () => {
     });
   });
 
+  describe("Keyboard navigation with nonSelectable tags", () => {
+    const nonSelectableTagGroup = <UDExTagGroup>
+      {Array.from({ length: 16 }, (_, i) => (
+        <UDExTag nonSelectable text={`Tag ${i + 1}`} icon="employee"></UDExTag>
+      ))}
+    </UDExTagGroup>;
+
+    it("Shift+Tab from overflow button focuses last visible nonSelectable tag's button", () => {
+      cy.mount(<div><button id="before">before</button>{nonSelectableTagGroup}</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 through each visible tag's button + 1 more to land on the "n more" button
+        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("button").should("be.focused");
+      });
+    });
+  });
 });

package/dist/Carousel.d.ts

@@ -4,12 +4,17 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.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 { UI5CustomEvent } from "@ui5/webcomponents-base";
 export declare enum UDExCarouselNavigationPosition {
     top = "top",
     bottom = "bottom"
 }
+export declare enum UDExCarouselPageIndicatorType {
+    Default = "Default",
+    Numeric = "Numeric",
+    None = "None"
+}
 export declare enum UDExCarouselButtonDesign {
     Secondary = "Secondary",
     Tertiary = "Tertiary"
@@ -106,7 +111,7 @@ declare class UDExCarousel extends UI5Element {
      * @default "Default"
      * @public
      */
-    pageIndicatorType: `${CarouselPageIndicatorType}`;
+    pageIndicatorType: `${UDExCarouselPageIndicatorType}`;
     /**
      * Defines the prev button is disabled
      *
@@ -171,8 +176,9 @@ declare class UDExCarousel extends UI5Element {
     };
     get _hidePageIndicator(): boolean;
     get _carousel(): UI5Carousel | null;
-    get _isBottomNavigation(): boolean;
+    get _isBottomDotNavigation(): boolean;
     get autoplayToggleButtonTooltipText(): string;
+    get sanitizedPageIndicatorType(): `${CarouselPageIndicatorType}`;
 }
 export default UDExCarousel;
 export type { CarouselNavigateEventDetail, UDExCarouselAutoplayToggleEventDetails };

package/dist/Carousel.js

@@ -25,6 +25,12 @@ export var UDExCarouselNavigationPosition;
     UDExCarouselNavigationPosition["top"] = "top";
     UDExCarouselNavigationPosition["bottom"] = "bottom";
 })(UDExCarouselNavigationPosition || (UDExCarouselNavigationPosition = {}));
+export var UDExCarouselPageIndicatorType;
+(function (UDExCarouselPageIndicatorType) {
+    UDExCarouselPageIndicatorType["Default"] = "Default";
+    UDExCarouselPageIndicatorType["Numeric"] = "Numeric";
+    UDExCarouselPageIndicatorType["None"] = "None";
+})(UDExCarouselPageIndicatorType || (UDExCarouselPageIndicatorType = {}));
 export var UDExCarouselButtonDesign;
 (function (UDExCarouselButtonDesign) {
     UDExCarouselButtonDesign["Secondary"] = "Secondary";
@@ -220,14 +226,14 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         if (this.isPrevButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel.navigateLeft();
+        this._carousel.navigateArrowLeft();
         this._calculateDisabledButtonsState();
     }
     _nextButtonClick() {
         if (this.isNextButtonDisabled || !this._carousel) {
             return;
         }
-        this._carousel.navigateRight();
+        this._carousel.navigateArrowRight();
         this._calculateDisabledButtonsState();
     }
     _onkeydown(e) {
@@ -246,8 +252,13 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         return translate(UDExCarousel_1, CAROUSEL_PREVIOUS_ARROW_TEXT);
     }
     get carouselClass() {
-        const classes = "udex-carousel";
-        return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+        let classes = "udex-carousel";
+        classes += ` udex-carousel__navigation--${this.navigationPlacement}`;
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            classes += " udex-carousel__navigation--bottom-buttons-only";
+        }
+        return classes;
     }
     get navigationWrapperClass() {
         let _class = "udex-carousel__navigation-wrapper";
@@ -264,6 +275,10 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         return _class;
     }
     get buttonDesign() {
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            return UDExCarouselButtonDesign.Secondary;
+        }
         return this.navigationPlacement === UDExCarouselNavigationPosition.top
             ? UDExCarouselButtonDesign.Secondary
             : UDExCarouselButtonDesign.Tertiary;
@@ -275,19 +290,33 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         };
     }
     get _hidePageIndicator() {
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            return true;
+        }
         return this.navigationPlacement === UDExCarouselNavigationPosition.top;
     }
     get _carousel() {
         return this.shadowRoot.querySelector("[ui5-carousel]");
     }
-    get _isBottomNavigation() {
-        return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+    get _isBottomDotNavigation() {
+        if (this.navigationPlacement === UDExCarouselNavigationPosition.bottom
+            && this.pageIndicatorType !== UDExCarouselPageIndicatorType.None) {
+            return true;
+        }
+        return false;
     }
     get autoplayToggleButtonTooltipText() {
         return this._autoplayIsPaused
             ? translate(UDExCarousel_1, CAROUSEL_AUTOPLAY_TOGGLE_START)
             : translate(UDExCarousel_1, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
     }
+    get sanitizedPageIndicatorType() {
+        if (this.pageIndicatorType === UDExCarouselPageIndicatorType.None) {
+            return UDExCarouselPageIndicatorType.Default;
+        }
+        return this.pageIndicatorType;
+    }
 };
 __decorate([
     property()