@sapudex/web-components 2.14.0 → 2.16.0

package/cypress/specs/Breadcrumbs.cy.tsx

@@ -0,0 +1,77 @@
+import { UDExBreadcrumbs, UDExBreadcrumbsItem } from "../support/component-imports.js";
+
+const breadcrumbs = <UDExBreadcrumbs id="breadcrumbs" class="udex-breadcrumbs">
+  <UDExBreadcrumbsItem
+    href="https://www.sap.com"
+    target="_blank"
+    icon="home"
+    accessible-name="Home page">
+    SAP Home
+  </UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Second Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Third Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Fourth Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Fifth level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Sixth Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Seventh level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Eight Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Ninth Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem>Current Page</UDExBreadcrumbsItem>
+</UDExBreadcrumbs>
+
+const breadcrumbsShowItemsHigher = <UDExBreadcrumbs
+  id="breadcrumbs-show-items-higher"
+  show-items="10"
+  class="udex-breadcrumbs">
+  <UDExBreadcrumbsItem
+    href="https://www.sap.com"
+    target="_blank"
+    icon="home"
+    accessible-name="Home page">
+    SAP Home
+  </UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Second Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Third Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Fourth Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Fifth level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Sixth Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Seventh level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Eight Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Ninth Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem>Current Page</UDExBreadcrumbsItem>
+</UDExBreadcrumbs>
+
+describe("Breadcrumbs", () => {
+  beforeEach(() => {
+    cy.mount(breadcrumbs);
+  });
+
+  it("tests if web component is correctly rendered", () => {
+    cy.get("#breadcrumbs").shadow().find(".ui5-breadcrumbs-root").should("be.visible");
+  });
+
+  it("tests if items that fit the container are visible", () => {
+    cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__item--visible").should("have.length", 3);
+  });
+
+  it("tests if items that don't fit are rendered in dropdown", () => {
+    cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+    cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__item--hidden").should("have.length", 10);
+  });
+
+  it("tests if the dropdown is opened after clicking on arrow item", () => {
+    cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+    cy.get("#breadcrumbs").shadow().find("[udex-dropdown]").should("have.attr", "open");
+  });
+
+  it("tests if the first arrow item is focused after pressing \"Escape\" key inside the dropdown on the first dropdown item", () => {
+    cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+    cy.get("body").realType("{esc}");
+    cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").should("be.focused");
+  });
+
+  it("tests if all items are rendered if showItems property is higher than number of available items", () => {
+    cy.mount(breadcrumbsShowItemsHigher);
+    cy.get("#breadcrumbs-show-items-higher").shadow().find(".udex-breadcrumbs__item--visible").should("have.length", 9);
+  });
+});

package/cypress/specs/FilterMenu.cy.tsx

@@ -124,14 +124,14 @@ const filterMenuSingleWithSearch = <>
 const filterMenuSelectAll = <>
   <span id="resultSelectAll"></span>
   <UDExFilterMenu
-  id="filter-menu-select-all"
-  mode={UDExListMode.MultiSelect}
-  filter-name="Filter Name">
-  <UDExFilterMenuSelectAll>
-    <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
-    <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
-  </UDExFilterMenuSelectAll>
-</UDExFilterMenu>
+    id="filter-menu-select-all"
+    mode={UDExListMode.MultiSelect}
+    filter-name="Filter Name">
+    <UDExFilterMenuSelectAll>
+      <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+    </UDExFilterMenuSelectAll>
+  </UDExFilterMenu>
 </>
 
 describe("Filter Menu component", () => {
@@ -559,45 +559,21 @@ describe("Filter Menu component", () => {
         .shadow().find("udex-list-item").should("have.text", "Select All");
     });
 
-    it("header is not selected if at least one element is selected", () => {
-      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
-      cy.get("@list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("firstItem");
-
-      cy.get("@firstItem").click();
-
-      cy.get("@selectAllHeader").should("not.have.attr", "selected");
-    });
-
-    it("unselect all items when user clicks on select all header", () => {
-      cy.get("[udex-filter-menu]").shadow()
-        .find("udex-list-select-all")
-        .find("udex-list-item").as("item");
-      cy.get("@item").eq(0).shadow().find(".udex-list__item").as("firstItem");
-      cy.get("@item").eq(1).shadow().find(".udex-list__item").as("secondItem");
-
-      cy.get("[udex-filter-menu]")
-        .shadow().find("udex-list-select-all")
-        .shadow().find("udex-list-item")
-        .shadow().find(".udex-list__item")
-        .as("selectAllHeader");
-
-      cy.get("@firstItem").click();
-      cy.get("@secondItem").click();
-
-      cy.get("@firstItem").should("have.attr", "data-selected", "true");
-      cy.get("@secondItem").should("have.attr", "data-selected", "true");
-      cy.get("@selectAllHeader").should("have.attr", "data-selected", "false");
-
-      cy.get("@selectAllHeader").click();
-
-      cy.get("@firstItem").should("have.attr", "data-selected", "false");
-      cy.get("@secondItem").should("have.attr", "data-selected", "false");
-    });
-
     it("select all header focus on pressed letter", () => {
       cy.realPress("p");
       cy.get("[udex-filter-menu]").shadow().find("udex-list-item").eq(1).should("have.attr", "focused");
     });
+
+    it("emit select-all when Select All header clicked", () => {
+      let selectAllEmitted = false;
+      cy.get("[udex-filter-menu]").then(menu => {
+        menu.get(0).addEventListener('ui5-select-all', function() {
+          selectAllEmitted = true;
+        });
+      });
+
+      cy.get("@selectAllHeader").click().then(() => expect(selectAllEmitted).to.be.true);
+    });
   });
 
   describe("Filter Menu focus state tests", () => {

package/cypress/specs/HeroBanner.cy.tsx

@@ -8,9 +8,9 @@ const backgroundImageLabel = "Hero Banner background image label";
 const backgroundImageSrc = "./stories/hero-banner/bg1.png";
 const backgroundVideoSrc = "./stories/hero-banner-bg-video.mp4";
 const mediaContentImage = "./stories/hero-banner/bg6.jpg";
-const linearGradient = "linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%)";
+const linearGradient = "linear-gradient(rgb(30, 87, 153) 0%, rgb(125, 185, 232) 100%)";
 const contentText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere in massa id fringilla. Nunc rutrum turpis purus, et dignissim arcu gravida ut. Morbi sed sem ac magna consectetur tincidunt dapibus sed ipsum.";
-const backgroundColor = "#fbdab9";
+const backgroundColor = "rgb(251, 218, 185)";
 
 const heroBanner = <>
   <UDExHeroBanner
@@ -115,7 +115,7 @@ describe("Hero Banner component", () => {
     });
 
     it("tests if correct background color is applied", () => {
-      cy.get("@heroBannerDefault").find(".udex-hero-banner").should("have.attr", "style", `background-color: ${backgroundColor}; `);
+      cy.get("@heroBannerDefault").find(".udex-hero-banner").should("have.attr", "style", `background-color: ${backgroundColor};`);
     });
 
     it("tests if correct breadcrumbs is applied", () => {
@@ -143,14 +143,14 @@ describe("Hero Banner component", () => {
     });
 
     it("tests if correct background video label is applied", () => {
-      cy.get("@videoBackground").find("video.udex-hero-banner__background-video").should("have.attr", "alt", backgroundVideoLabel);
+      cy.get("@videoBackground").find("video.udex-hero-banner__background-video").should("have.attr", "aria-label", backgroundVideoLabel);
     });
   });
 
   describe("Hero Banner with gradient", () => {
     it("tests if correct gradient background is applied", () => {
       cy.mount(heroBannerWithGradient);
-      cy.get("#heroBannerWithGradient").shadow().find(".udex-hero-banner").should("have.attr", "style", `background-color: transparent; background-image:${linearGradient}`);
+      cy.get("#heroBannerWithGradient").shadow().find(".udex-hero-banner").should("have.attr", "style", `background-color: transparent; background-image: ${linearGradient};`);
     });
   });
 
@@ -164,7 +164,7 @@ describe("Hero Banner component", () => {
     });
 
     it("tests if defaults for properties are correctly applied", () => {
-      cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner").should("have.attr", "style", "background-color: transparent; ");
+      cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner").should("have.attr", "style", "background-color: transparent;");
 
       cy.get("#heroBannerWithAdditionalContent").shadow().find(".udex-hero-banner__background-image").should("not.exist");
 

package/cypress/specs/InputGroup.cy.tsx

@@ -0,0 +1,47 @@
+import { UDExInputGroup, UDExCheckbox } from "../support/component-imports.js";
+
+const groupOrientation = "Horizontal";
+const groupState = "Error";
+const groupText = "Error message";
+const groupName = "test-name"
+
+const simpleGroup = <UDExInputGroup></UDExInputGroup>
+const checkboxGroup = <UDExInputGroup orientation={groupOrientation} valueState={groupState} supportingText={groupText} groupName={groupName}>
+  <UDExCheckbox text="Text option 1"></UDExCheckbox>
+  <UDExCheckbox text="Text option 2"></UDExCheckbox>
+</UDExInputGroup>
+
+describe("Input Group", () => {
+  beforeEach(() => {
+    cy.mount(checkboxGroup);
+  });
+
+  it("renders input group", () => {
+    cy.get("[udex-input-group]").shadow().find(".udex-input-group__container").should("be.visible");
+  });
+
+  it("renders input group with error message", () => {
+    cy.get("[udex-input-group]").shadow().find("[udex-status-message]").should("be.visible");
+    cy.get("[udex-input-group]").shadow().find("[udex-status-message]").shadow().find(".udex-status-message").should("have.text", groupText);
+  });
+
+  it("renders input group with custom name", () => {
+    cy.get("[udex-input-group]").find("[udex-checkbox]").should("have.attr", "name", groupName);
+  });
+
+  it("renders input group with horizontal orientation", () => {
+    cy.get("[udex-input-group]").should("have.attr", "orientation", groupOrientation);
+  });
+
+  it("renders input group with proper items length", () => {
+    cy.get("[udex-input-group]").shadow().find(".udex-input-group__item").should("have.length", 2);
+  });
+
+  it("renders input group with defaults", () => {
+    cy.mount(simpleGroup)
+    cy.get("[udex-input-group]").shadow().find(".udex-input-group__container").should("exist");
+    cy.get("[udex-input-group]").shadow().find(".udex-input-group__content").should("exist");
+    cy.get("[udex-input-group]").should("have.attr", "orientation", "Vertical");
+    cy.get("[udex-input-group]").shadow().find("[udex-status-message]").should("not.exist");
+  });
+});

package/cypress/specs/RatingBar.cy.tsx

@@ -0,0 +1,41 @@
+import { UDExRatingBar } from "../support/component-imports.js";
+
+const ratingBar = <UDExRatingBar id="rating-bar1" percentage={50} rating={4}></UDExRatingBar>
+
+const ratingBarWithPercentage = <UDExRatingBar id="rating-bar2" percentage={50} rating={4} show-percentage></UDExRatingBar>
+
+const ratingBarWithHighRating = <UDExRatingBar id="rating-bar3" percentage={120} rating={400}></UDExRatingBar>
+
+const ratingBarWithNegativeRating = <UDExRatingBar id="rating-bar4" percentage={30} rating={-400}></UDExRatingBar>
+
+describe("RatingBar", () => {
+  it("Tests basic rating bar rendering specified progress", () => {
+    cy.mount(ratingBar);
+    cy.get("#rating-bar1").shadow().find(".udex-rating-bar__track").invoke("width").then((trackWidth) => {
+      const expectedWidth = Math.round(0.5 * trackWidth);
+      const width = cy.get("#rating-bar1").shadow().find(".udex-rating-bar__progress").invoke("width");
+      const widthRounded = width.then((w) => Math.round(w as number));
+      widthRounded.should("equal", expectedWidth);
+    });
+  });
+
+  it("Tests basic rating bar rendering rating", () => {
+    cy.mount(ratingBar);
+    cy.get("#rating-bar1").shadow().find(".udex-rating-bar__rating").should("have.text", "4");
+  });
+
+  it("Tests basic rating bar rendering breakdown", () => {
+    cy.mount(ratingBarWithPercentage);
+    cy.get("#rating-bar2").shadow().find(".udex-rating-bar__percentage").should("have.text", "50%");
+  });
+
+  it("Tests rating bar rendering maximum rating when rating exceeds it", () => {
+    cy.mount(ratingBarWithNegativeRating);
+    cy.get("#rating-bar4").shadow().find(".udex-rating-bar__rating").should("have.text", "0");
+  });
+
+  it("Tests rating bar rendering minimum rating when rating exceeds it", () => {
+    cy.mount(ratingBarWithHighRating);
+    cy.get("#rating-bar3").shadow().find(".udex-rating-bar__rating").should("have.text", "5");
+  });
+});

package/cypress/specs/Tooltip.cy.tsx

@@ -80,21 +80,16 @@ describe("Tooltip", () => {
         </>
       );
 
-      cy.get('#udex-tooltip').as("tooltip")
-      .invoke('attr', 'open', 'true');
+      cy.get('#udex-tooltip').shadow().find(".udex-tooltip__pane").as("tooltip").invoke('attr', 'open', 'true');
     
-      cy.get("@tooltip")
-          .should("have.attr", "open");
+      cy.get("@tooltip").should("have.attr", "open");
 
       cy.get("body").realClick();
 
-      cy.get("@tooltip")
-          .should("not.have.attr", "open");
+      cy.get("@tooltip").should("not.have.attr", "open");
 
-      cy.get('#udex-tooltip').as("tooltip")
-      .invoke('attr', 'open', 'true');
+      cy.get('#udex-tooltip').as("tooltip").invoke('attr', 'open', 'true');
     
-      cy.get("@tooltip")
-          .should("have.attr", "open");
+      cy.get("@tooltip").should("have.attr", "open");
   });
-});
+});

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

@@ -57,6 +57,8 @@ import UDExQuote from "../../instrumented/Quote.js";
 import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
 import UDExMessageStrip from "../../instrumented/MessageStrip.js";
 import UDExHeroBanner from "../../instrumented/HeroBanner.js";
+import UDExCheckbox from "../../instrumented/Checkbox.js";
+import UDExInputGroup from "../../instrumented/InputGroup.js";
 
 export {
   UDExAccordion,
@@ -118,4 +120,6 @@ export {
   UDExMastheadProfileMenu,
   UDExMessageStrip,
   UDExHeroBanner,
+  UDExCheckbox,
+  UDExInputGroup
 };

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

@@ -57,6 +57,8 @@ import UDExQuote from "../../src/Quote.js";
 import UDExMastheadProfileMenu from "../../src/MastheadProfileMenu.js";
 import UDExMessageStrip from "../../src/MessageStrip.js";
 import UDExHeroBanner from "../../src/HeroBanner.js";
+import UDExCheckbox from "../../src/Checkbox.js";
+import UDExInputGroup from "../../src/InputGroup.js";
 
 export {
   UDExAccordion,
@@ -118,4 +120,6 @@ export {
   UDExMastheadProfileMenu,
   UDExMessageStrip,
   UDExHeroBanner,
+  UDExCheckbox,
+  UDExInputGroup
 };

package/dist/Accordion.js

@@ -13,7 +13,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isSpace, isUp, isDown, isEnd, isHome, isTabPrevious, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
 import AccordionTemplate from "./AccordionTemplate.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
 // Styles
@@ -79,40 +79,54 @@ let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
         }
     }
     keydownHandler(e) {
-        if (e.key !== "Tab") {
-            e.preventDefault();
-        }
-        const len = this._items.length;
+        const activeItem = this._items[this._activeItemIndex];
+        const previousItem = this._items[this._activeItemIndex - 1];
+        const isLastItem = this._activeItemIndex === this._items.length - 1;
+        const isFirstItem = this._activeItemIndex === 0;
+        const lastItem = this._items[this._items.length - 1];
+        const updateTabIndex = (elements, value) => {
+            elements.forEach(element => element.setAttribute("tabindex", value));
+        };
+        const getInteractiveElements = (item) => {
+            const selectors = ["button", "a[href]", "input", "select", "textarea", "[tabindex]"];
+            return item.querySelectorAll(selectors.join(","));
+        };
+        const handleTabNavigation = (keyboardEvent) => {
+            if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {
+                updateTabIndex(getInteractiveElements(activeItem), "-1");
+                return true;
+            }
+            if ((activeItem?.expanded && isTabNext(e))
+                || (previousItem?.expanded && isTabPrevious(e))
+                || (isFirstItem && isTabPrevious(e))) {
+                return true;
+            }
+            if (isEnter(e) && isLastItem) {
+                updateTabIndex(getInteractiveElements(activeItem), "0");
+            }
+            return false;
+        };
         const focusOnItem = (itemIndex) => {
             const item = this._items[itemIndex];
             this._activeItemIndex = itemIndex;
             item?.shadowRoot?.querySelector(".udex-accordion-item__header")?.focus();
         };
-        switch (e.key) {
-            case "Home":
-                focusOnItem(0);
-                break;
-            case "End":
-                focusOnItem(len - 1);
-                break;
-            case "ArrowUp":
-                if (this._activeItemIndex > 0) {
-                    focusOnItem(this._activeItemIndex - 1);
-                }
-                else if (this._activeItemIndex === 0) {
-                    focusOnItem(len - 1);
-                }
-                break;
-            case "ArrowDown":
-                if (this._activeItemIndex < len - 1) {
-                    focusOnItem(this._activeItemIndex + 1);
-                }
-                else if (this._activeItemIndex === len - 1) {
-                    focusOnItem(0);
-                }
-                break;
-            default:
-                break;
+        if (handleTabNavigation(e)) {
+            return;
+        }
+        e.preventDefault();
+        const len = this._items.length;
+        if (isHome(e)) {
+            focusOnItem(0);
+        }
+        if (isEnd(e)) {
+            focusOnItem(len - 1);
+        }
+        if (isTabPrevious(e) || isUp(e)) {
+            focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);
+        }
+        if (isTabNext(e) || isDown(e)) {
+            focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);
         }
     }
     itemFocusHandler(e) {

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n    const len = this._items.length;\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    switch (e.key) {\n    case \"Home\":\n      focusOnItem(0);\n      break;\n    case \"End\":\n      focusOnItem(len - 1);\n      break;\n    case \"ArrowUp\":\n      if (this._activeItemIndex > 0) {\n        focusOnItem(this._activeItemIndex - 1);\n      } else if (this._activeItemIndex === 0) {\n        focusOnItem(len - 1);\n      }\n      break;\n    case \"ArrowDown\":\n      if (this._activeItemIndex < len - 1) {\n        focusOnItem(this._activeItemIndex + 1);\n      } else if (this._activeItemIndex === len - 1) {\n        focusOnItem(0);\n      }\n      break;\n    default:\n      break;\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,+CAA+C,CAAC;AACvD,OAAO,EACL,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,GACxE,MAAM,sCAAsC,CAAC;AAC9C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE7E,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D,MAAM,CAAN,IAAY,0BAOX;AAPD,WAAY,0BAA0B;IACpC,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;AACX,CAAC,EAPW,0BAA0B,KAA1B,0BAA0B,QAOrC;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AAeH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IA8DpC;QACE,KAAK,EAAE,CAAC;QAxBV;;;;;WAKG;QAED,kBAAa,GAA+B,0BAA0B,CAAC,EAAE,CAAC;QAkB1E,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACzE,CAAC;IAED,eAAe,CAAC,MAAe;QAC7B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB,CAAC,CAAgB;QAClC,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;QAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACpE,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,KAAK,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAErD,MAAM,cAAc,GAAG,CAAC,QAA6B,EAAE,KAAa,EAAE,EAAE;YACtE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,CAAC,IAAiB,EAAE,EAAE;YACnD,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;YACrF,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAAG,CAAC,aAA4B,EAAE,EAAE;YAC3D,IAAI,UAAU,IAAI,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACjE,cAAc,CAAC,sBAAsB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC;gBACzD,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,CAAC,UAAU,EAAE,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;mBACrC,CAAC,YAAY,EAAE,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;mBAC5C,CAAC,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvC,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,UAAU,EAAE,CAAC;gBAC7B,cAAc,CAAC,sBAAsB,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1D,CAAC;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,EAAE;YACxC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;YACjC,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,8BAA8B,CAAiB,EAAE,KAAK,EAAE,CAAC;QAC5F,CAAC,CAAC;QAEF,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAE/B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,WAAW,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC;QAED,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YACb,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAChC,WAAW,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC/E,CAAC;QAED,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9B,WAAW,CAAC,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/E,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,CAAc;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,uBAAuB;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,YAAY;YACtB,CAAC,CAAC,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC;YAChD,CAAC,CAAC,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YAC1B,OAAO;gBACL,IAAI,EAAE,EAAE;aACT,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAzKG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDACtB;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACC;AAQ3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACL;AASpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACP;AASlB;IADD,QAAQ,EAAE;oDACiE;AAS1E;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;6CAChC;AAG7B;IADN,IAAI,CAAC,yBAAyB,CAAC;uCACF;AA1D1B,aAAa;IAdlB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,YAAY;QACpB,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEnC,aAAa,CAoLlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter, isSpace, isUp, isDown, isEnd, isHome, isTabPrevious, isTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    const activeItem = this._items[this._activeItemIndex];\n    const previousItem = this._items[this._activeItemIndex - 1];\n    const isLastItem = this._activeItemIndex === this._items.length - 1;\n    const isFirstItem = this._activeItemIndex === 0;\n    const lastItem = this._items[this._items.length - 1];\n\n    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n      elements.forEach(element => element.setAttribute(\"tabindex\", value));\n    };\n\n    const getInteractiveElements = (item: HTMLElement) => {\n      const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n      return item.querySelectorAll(selectors.join(\",\"));\n    };\n\n    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n        updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n        return true;\n      }\n\n      if ((activeItem?.expanded && isTabNext(e))\n        || (previousItem?.expanded && isTabPrevious(e))\n        || (isFirstItem && isTabPrevious(e))) {\n        return true;\n      }\n\n      if (isEnter(e) && isLastItem) {\n        updateTabIndex(getInteractiveElements(activeItem), \"0\");\n      }\n\n      return false;\n    };\n\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    if (handleTabNavigation(e)) {\n      return;\n    }\n\n    e.preventDefault();\n    const len = this._items.length;\n\n    if (isHome(e)) {\n      focusOnItem(0);\n    }\n\n    if (isEnd(e)) {\n      focusOnItem(len - 1);\n    }\n\n    if (isTabPrevious(e) || isUp(e)) {\n      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n    }\n\n    if (isTabNext(e) || isDown(e)) {\n      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}

package/dist/Breadcrumbs.d.ts

@@ -62,6 +62,8 @@ declare class UDExBreadcrumbs extends UI5Element {
     _responsivePopover?: UDExDropdown;
     _itemNavigation?: ItemNavigation;
     _shouldFocusFirstVisibleItem: boolean;
+    _rootClass: string;
+    constructor();
     onBeforeRendering(): void;
     onAfterRendering(): void;
     _preprocessItems(): void;

package/dist/Breadcrumbs.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var UDExBreadcrumbs_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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";
@@ -19,7 +19,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import UI5BreadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/home.js";
-import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
+import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
@@ -27,7 +27,6 @@ import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL } from "./gener
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
 import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
-const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
 /**
  * @class
  *
@@ -47,7 +46,7 @@ const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
  */
 let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Element {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Defines how many breadcrumb items should be visible
          *
@@ -55,6 +54,7 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
          * @public
          */
         this.showItems = 3;
+        this._rootClass = "udex-breadcrumbs";
     }
     onBeforeRendering() {
         this._preprocessItems();
@@ -139,7 +139,7 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
         this._itemNavigation?.setCurrentItem(currentItem);
     }
     _handleKeydown(e) {
-        const itemIndex = e.target.getAttribute("index");
+        const itemIndex = e.target.getAttribute("data-index");
         const isLastItem = itemIndex === (this.items.length - 2).toString();
         const isFirstItem = itemIndex === "0";
         if (isTabNext(e) && isLastItem) {
@@ -199,7 +199,8 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
         return this._getItems().filter(i => this._isItemVisible(i));
     }
     get _triggerClass() {
-        return this._dropdownOpened ? triggerActiveClass : "";
+        const rootClass = "udex-breadcrumbs";
+        return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
     }
     get _accessibleNameText() {
         return UDExBreadcrumbs_1.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
@@ -223,7 +224,7 @@ __decorate([
 UDExBreadcrumbs = UDExBreadcrumbs_1 = __decorate([
     customElement({
         tag: "udex-breadcrumbs",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],
         template: BreadcrumbsTemplate,
         dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],