@infineon/infineon-design-system-stencil 18.2.3 → 18.2.4

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f6246dff.js');
+const index = require('./index-5b8201e9.js');
 
 /*
  Stencil Client Patch Esm v3.3.1 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-accordion-item.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"hasIcon":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-accordion.cjs",[[1,"ifx-accordion",null,[[16,"ifxItemOpened","onIfxItemOpened"]]]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"checked":[1028],"error":[4],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar"]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag",{"label":[1]}]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1025],"href":[1],"target":[1],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"hasSlot":[32],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
+  return index.bootstrapLazy([["ifx-search-bar.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}]]],["ifx-dropdown-item.cjs",[[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-accordion-item.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-navbar.cjs",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}]]],["ifx-navbar-menu-item.cjs",[[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"hasIcon":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-accordion.cjs",[[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-dropdown-menu.cjs",[[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"checked":[1028],"error":[4],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar"]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag",{"label":[1]}]]],["ifx-icon.cjs",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1025],"href":[1],"target":[1],"setFocus":[64]}]]],["ifx-checkbox.cjs",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"hasSlot":[32],"internalValue":[32]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-link_2.cjs",[[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}]]]], options);
   });
 };
 

package/dist/collection/components/accordion/accordion.css

@@ -191,4 +191,5 @@
 .accordion-wrapper {
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }

package/dist/collection/components/accordion/accordion.js

@@ -1,12 +1,17 @@
 //ifxAccordion.tsx
 import { h } from '@stencil/core';
-export class IfxAccordion {
-  async onIfxItemOpened(event) {
-    const items = Array.from(this.el.shadowRoot.querySelectorAll('ifx-accordion-item'));
-    for (const item of items) {
-      const itemElement = item;
-      if (itemElement !== event.target && (await itemElement.isOpen())) {
-        itemElement.close();
+export class Accordion {
+  constructor() {
+    this.autoCollapse = false;
+  }
+  async onItemOpen(event) {
+    if (this.autoCollapse) {
+      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
+      for (const item of items) {
+        const itemElement = item;
+        if (itemElement !== event.target && (await itemElement.isOpen())) {
+          itemElement.close();
+        }
       }
     }
   }
@@ -25,12 +30,34 @@ export class IfxAccordion {
       "$": ["accordion.css"]
     };
   }
+  static get properties() {
+    return {
+      "autoCollapse": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-collapse",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{
-        "name": "ifxItemOpened",
-        "method": "onIfxItemOpened",
-        "target": "body",
+        "name": "ifxItemOpen",
+        "method": "onItemOpen",
+        "target": undefined,
         "capture": false,
         "passive": false
       }];

package/dist/collection/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAO9D,MAAM,OAAO,YAAY;EAIvB,KAAK,CAAC,eAAe,CAAC,KAAkB;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACpF,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;MACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;MACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;QAChE,WAAW,CAAC,KAAK,EAAE,CAAC;OACrB;KACF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordion.tsx\nimport { Component, h, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class IfxAccordion {\n  @Element() el: HTMLElement;\n\n  @Listen('ifxItemOpened', { target: 'body' })\n  async onIfxItemOpened(event: CustomEvent) {\n    const items = Array.from(this.el.shadowRoot.querySelectorAll('ifx-accordion-item'));\n    for (const item of items) {\n      const itemElement = item as HTMLIfxAccordionItemElement;\n      if (itemElement !== event.target && (await itemElement.isOpen())) {\n        itemElement.close();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOpE,MAAM,OAAO,SAAS;;wBAEY,KAAK;;EAGrC,KAAK,CAAC,UAAU,CAAC,KAAkB;IACjC,IAAG,IAAI,CAAC,YAAY,EAAE;MACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;UAChE,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;OACF;KACF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if(this.autoCollapse) { \n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.isOpen())) {\n          itemElement.close();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/accordion/accordion.stories.js

@@ -18,8 +18,8 @@ const Template = (args) => {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
       </p>
     `;
-    item.addEventListener('ifxItemOpened', action('ifxItemOpened'));
-    item.addEventListener('ifxItemClosed', action('ifxItemClosed'));
+    item.addEventListener('ifxItemOpen', action('ifxItemOpen'));
+    item.addEventListener('ifxItemClose', action('ifxItemClose'));
     accordionElement.append(item);
   }
   return accordionElement;

package/dist/collection/components/accordion/accordion.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,SAAS,EAAE,eAAe;EAC1B,QAAQ,EAAE;IACR,aAAa,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;GACrC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAEjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE;IAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC1D,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACrD,IAAI,CAAC,SAAS,GAAG;;4BAEO,CAAC,GAAG,CAAC;;;;KAI5B,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IAChE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IAEhE,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;GAC/B;EAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,aAAa,EAAE,CAAC;CACjB,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Accordion',\n  component: 'ifx-accordion',\n  argTypes: {\n    amountOfItems: { control: 'number' },\n  },\n};\n\nconst Template = (args) => {\n  const accordionElement = document.createElement('ifx-accordion');\n\n  for (let i = 0; i < args.amountOfItems; i++) {\n    const item = document.createElement('ifx-accordion-item');\n    item.setAttribute('caption', `Item Title #${i + 1}`);\n    item.innerHTML = `\n      <p>\n        Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n      </p>\n    `;\n    item.addEventListener('ifxItemOpened', action('ifxItemOpened'));\n    item.addEventListener('ifxItemClosed', action('ifxItemClosed'));\n\n    accordionElement.append(item);\n  }\n\n  return accordionElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  amountOfItems: 3\n};"]}
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,SAAS,EAAE,eAAe;EAC1B,QAAQ,EAAE;IACR,aAAa,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;GACrC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAEjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE;IAC3C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC1D,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IACrD,IAAI,CAAC,SAAS,GAAG;;4BAEO,CAAC,GAAG,CAAC;;;;KAI5B,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5D,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;IAE9D,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;GAC/B;EAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,aAAa,EAAE,CAAC;CACjB,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Accordion',\n  component: 'ifx-accordion',\n  argTypes: {\n    amountOfItems: { control: 'number' },\n  },\n};\n\nconst Template = (args) => {\n  const accordionElement = document.createElement('ifx-accordion');\n\n  for (let i = 0; i < args.amountOfItems; i++) {\n    const item = document.createElement('ifx-accordion-item');\n    item.setAttribute('caption', `Item Title #${i + 1}`);\n    item.innerHTML = `\n      <p>\n        Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n      </p>\n    `;\n    item.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n    item.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n    accordionElement.append(item);\n  }\n\n  return accordionElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  amountOfItems: 3\n};"]}

package/dist/collection/components/accordion/accordionItem.css

@@ -184,10 +184,6 @@
   font-family: "Source Sans Pro";
 }
 
-:host {
-  display: block;
-}
-
 .accordion-item {
   border-radius: 3px;
   overflow: hidden;
@@ -219,13 +215,14 @@
   transition: max-height 0.3s ease-in-out;
 }
 
-.accordion-content ::slotted(p) {
-  margin: 0;
-  padding: 0;
-}
-
 .inner-content {
   padding: 24px;
+  white-space: pre-wrap;
+  /* wraps text at spaces and within words */
+  word-wrap: break-word;
+  /* breaks text within a word if necessary */
+  overflow-wrap: anywhere;
+  /* breaks text at arbitrary points when needed */
 }
 
 .accordion-icon {
@@ -236,5 +233,5 @@
 }
 
 .accordion-item.open .accordion-icon {
-  transform: rotate(90deg);
+  transform: rotate(-180deg);
 }

package/dist/collection/components/accordion/accordionItem.js

@@ -8,13 +8,13 @@ export class IfxAccordionItem {
   toggleOpen() {
     this.open = !this.open;
     if (this.open) {
-      this.ifxItemOpened.emit();
+      this.ifxItemOpen.emit();
     }
     else {
-      this.ifxItemClosed.emit();
+      this.ifxItemClose.emit();
     }
   }
-  componentDidRender() {
+  componentDidUpdate() {
     if (this.open) {
       this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
     }
@@ -24,13 +24,13 @@ export class IfxAccordionItem {
   }
   async close() {
     this.open = false;
-    this.ifxItemClosed.emit();
+    this.ifxItemClose.emit();
   }
   async isOpen() {
     return this.open;
   }
   render() {
-    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-right-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
+    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
   }
   static get is() { return "ifx-accordion-item"; }
   static get encapsulation() { return "shadow"; }
@@ -72,8 +72,8 @@ export class IfxAccordionItem {
   }
   static get events() {
     return [{
-        "method": "ifxItemOpened",
-        "name": "ifxItemOpened",
+        "method": "ifxItemOpen",
+        "name": "ifxItemOpen",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -87,8 +87,8 @@ export class IfxAccordionItem {
           "references": {}
         }
       }, {
-        "method": "ifxItemClosed",
-        "name": "ifxItemClosed",
+        "method": "ifxItemClose",
+        "name": "ifxItemClose",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/accordion/accordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,gBAAgB;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;EACH,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;EAC5B,CAAC;EAGD,KAAK,CAAC,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;EACnB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QAC3D,YAAM,KAAK,EAAC,gBAAgB;UAC1B,gBAAU,IAAI,EAAC,kBAAkB,GAAG,CAC/B;QACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD;MACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;QAC9E,WAAK,KAAK,EAAC,eAAe;UACxB,eAAQ,CACJ,CACF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @State() open: boolean = false;\n  @Event() ifxItemOpened: EventEmitter;\n  @Event() ifxItemClosed: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpened.emit();\n    } else {\n      this.ifxItemClosed.emit();\n    }\n  }\n\n  componentDidRender() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClosed.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-right-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,gBAAgB;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;EACH,CAAC;EAGD,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAC3B,CAAC;EAGD,KAAK,CAAC,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;EACnB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;QAC3D,YAAM,KAAK,EAAC,gBAAgB;UAC1B,gBAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B;QACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD;MACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC;QAC9E,WAAK,KAAK,EAAC,eAAe;UACxB,eAAQ,CACJ,CACF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @State() open: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpen.emit();\n    } else {\n      this.ifxItemClose.emit();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClose.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/components/ifx-accordion-item.js

@@ -1,28 +1,28 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './infineonIconStencil.js';
 
-const accordionItemCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.accordion-content ::slotted(p){margin:0;padding:0}.inner-content{padding:24px}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(90deg)}";
+const accordionItemCss = "*{font-family:\"Source Sans Pro\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.inner-content{padding:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 
 const IfxAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class IfxAccordionItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.ifxItemOpened = createEvent(this, "ifxItemOpened", 7);
-    this.ifxItemClosed = createEvent(this, "ifxItemClosed", 7);
+    this.ifxItemOpen = createEvent(this, "ifxItemOpen", 7);
+    this.ifxItemClose = createEvent(this, "ifxItemClose", 7);
     this.caption = undefined;
     this.open = false;
   }
   toggleOpen() {
     this.open = !this.open;
     if (this.open) {
-      this.ifxItemOpened.emit();
+      this.ifxItemOpen.emit();
     }
     else {
-      this.ifxItemClosed.emit();
+      this.ifxItemClose.emit();
     }
   }
-  componentDidRender() {
+  componentDidUpdate() {
     if (this.open) {
       this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
     }
@@ -32,13 +32,13 @@ const IfxAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class IfxAccordionIt
   }
   async close() {
     this.open = false;
-    this.ifxItemClosed.emit();
+    this.ifxItemClose.emit();
   }
   async isOpen() {
     return this.open;
   }
   render() {
-    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-right-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
+    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
   }
   static get style() { return accordionItemCss; }
 }, [1, "ifx-accordion-item", {

package/dist/components/ifx-accordion-item.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,orBAAorB;;MCQhsBA,kBAAgB;;;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3D,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,IAAI,EAAC,kBAAkB,GAAG,CAC/B,EACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9E,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxAccordionItem"],"sources":["./src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","./src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.accordion-content ::slotted(p) {\n  margin: 0;\n  padding: 0;\n}\n\n.inner-content {\n  padding: 24px;\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(90deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @State() open: boolean = false;\n  @Event() ifxItemOpened: EventEmitter;\n  @Event() ifxItemClosed: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpened.emit();\n    } else {\n      this.ifxItemClosed.emit();\n    }\n  }\n\n  componentDidRender() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClosed.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-right-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,irBAAirB;;MCQ7rBA,kBAAgB;;;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3D,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B,EACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9E,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxAccordionItem"],"sources":["./src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","./src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n// :host {\n//   display: block;\n// }\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.inner-content {\n  padding: 24px;\n  white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @State() open: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpen.emit();\n    } else {\n      this.ifxItemClose.emit();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClose.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-accordion.js

@@ -1,19 +1,22 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column}";
+const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px}";
 
-const IfxAccordion$1 = /*@__PURE__*/ proxyCustomElement(class IfxAccordion extends HTMLElement {
+const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.autoCollapse = false;
   }
-  async onIfxItemOpened(event) {
-    const items = Array.from(this.el.shadowRoot.querySelectorAll('ifx-accordion-item'));
-    for (const item of items) {
-      const itemElement = item;
-      if (itemElement !== event.target && (await itemElement.isOpen())) {
-        itemElement.close();
+  async onItemOpen(event) {
+    if (this.autoCollapse) {
+      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
+      for (const item of items) {
+        const itemElement = item;
+        if (itemElement !== event.target && (await itemElement.isOpen())) {
+          itemElement.close();
+        }
       }
     }
   }
@@ -22,7 +25,9 @@ const IfxAccordion$1 = /*@__PURE__*/ proxyCustomElement(class IfxAccordion exten
   }
   get el() { return this; }
   static get style() { return accordionCss; }
-}, [1, "ifx-accordion", undefined, [[16, "ifxItemOpened", "onIfxItemOpened"]]]);
+}, [1, "ifx-accordion", {
+    "autoCollapse": [4, "auto-collapse"]
+  }, [[0, "ifxItemOpen", "onItemOpen"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -31,13 +36,13 @@ function defineCustomElement$1() {
   components.forEach(tagName => { switch (tagName) {
     case "ifx-accordion":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, IfxAccordion$1);
+        customElements.define(tagName, Accordion);
       }
       break;
   } });
 }
 
-const IfxAccordion = IfxAccordion$1;
+const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;
 
 export { IfxAccordion, defineCustomElement };

package/dist/components/ifx-accordion.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8GAA8G;;MCQtHA,cAAY;;;;;;EAIvB,MAAM,eAAe,CAAC,KAAkB;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACpF,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;MACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;MACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;QAChE,WAAW,CAAC,KAAK,EAAE,CAAC;OACrB;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxAccordion"],"sources":["./src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class IfxAccordion {\n  @Element() el: HTMLElement;\n\n  @Listen('ifxItemOpened', { target: 'body' })\n  async onIfxItemOpened(event: CustomEvent) {\n    const items = Array.from(this.el.shadowRoot.querySelectorAll('ifx-accordion-item'));\n    for (const item of items) {\n      const itemElement = item as HTMLIfxAccordionItemElement;\n      if (itemElement !== event.target && (await itemElement.isOpen())) {\n        itemElement.close();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sHAAsH;;MCQ9H,SAAS;;;;;wBAEY,KAAK;;EAGrC,MAAM,UAAU,CAAC,KAAkB;IACjC,IAAG,IAAI,CAAC,YAAY,EAAE;MACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;UAChE,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;OACF;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if(this.autoCollapse) { \n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.isOpen())) {\n          itemElement.close();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ifx-accordion-item.entry.js

@@ -1,25 +1,25 @@
-import { r as registerInstance, c as createEvent, h } from './index-6c912e7e.js';
+import { r as registerInstance, c as createEvent, h } from './index-2f901f5e.js';
 
-const accordionItemCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.accordion-content ::slotted(p){margin:0;padding:0}.inner-content{padding:24px}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(90deg)}";
+const accordionItemCss = "*{font-family:\"Source Sans Pro\"}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s}.accordion-title:hover{border:1px solid #ebe9e9;background-color:#ebe9e9}.accordion-title{display:flex;align-items:center;padding:1rem;color:#378375;border:1px solid #ebe9e9;cursor:pointer}.accordion-caption{font-weight:600;font-size:1rem}.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out}.inner-content{padding:24px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s;margin-right:0.5rem}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";
 
 const IfxAccordionItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.ifxItemOpened = createEvent(this, "ifxItemOpened", 7);
-    this.ifxItemClosed = createEvent(this, "ifxItemClosed", 7);
+    this.ifxItemOpen = createEvent(this, "ifxItemOpen", 7);
+    this.ifxItemClose = createEvent(this, "ifxItemClose", 7);
     this.caption = undefined;
     this.open = false;
   }
   toggleOpen() {
     this.open = !this.open;
     if (this.open) {
-      this.ifxItemOpened.emit();
+      this.ifxItemOpen.emit();
     }
     else {
-      this.ifxItemClosed.emit();
+      this.ifxItemClose.emit();
     }
   }
-  componentDidRender() {
+  componentDidUpdate() {
     if (this.open) {
       this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
     }
@@ -29,13 +29,13 @@ const IfxAccordionItem = class {
   }
   async close() {
     this.open = false;
-    this.ifxItemClosed.emit();
+    this.ifxItemClose.emit();
   }
   async isOpen() {
     return this.open;
   }
   render() {
-    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-right-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
+    return (h("div", { class: `accordion-item ${this.open ? 'open' : ''}` }, h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, h("span", { class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-12" })), h("span", { class: "accordion-caption" }, this.caption)), h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, h("div", { class: "inner-content" }, h("slot", null)))));
   }
 };
 IfxAccordionItem.style = accordionItemCss;

package/dist/esm/ifx-accordion-item.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion-item.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,orBAAorB;;MCQhsB,gBAAgB;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;SAAM;MACL,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;KAC3B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;GAC3B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3D,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,IAAI,EAAC,kBAAkB,GAAG,CAC/B,EACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9E,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","./src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.accordion-content ::slotted(p) {\n  margin: 0;\n  padding: 0;\n}\n\n.inner-content {\n  padding: 24px;\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(90deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @State() open: boolean = false;\n  @Event() ifxItemOpened: EventEmitter;\n  @Event() ifxItemClosed: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpened.emit();\n    } else {\n      this.ifxItemClosed.emit();\n    }\n  }\n\n  componentDidRender() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClosed.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-right-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-accordion-item.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,irBAAirB;;MCQ7rB,gBAAgB;;;;;;gBAEF,KAAK;;EAK9B,UAAU;IACR,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACL,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI,CAAC;KACrE;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;KACtC;GACF;EAGD,MAAM,KAAK;IACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;GAC1B;EAGD,MAAM,MAAM;IACV,OAAO,IAAI,CAAC,IAAI,CAAC;GAClB;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE,EAAE,IACrD,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAC3D,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gBAAU,IAAI,EAAC,iBAAiB,GAAG,CAC9B,EACP,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,OAAO,CAAQ,CACjD,EACN,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,IAC9E,WAAK,KAAK,EAAC,eAAe,IACxB,eAAQ,CACJ,CACF,CACF,EACN;GACH;;;;;;","names":[],"sources":["./src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","./src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n// :host {\n//   display: block;\n// }\n\n.accordion-item {\n  border-radius: 3px;\n  overflow: hidden;\n  transition: all 0.3s;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$color-gray-200;\n  background-color: tokens.$color-gray-200;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  color: tokens.$color-default-500;\n  border: 1px solid tokens.$color-gray-200;\n  cursor: pointer;\n}\n\n.accordion-caption {\n  font-weight: tokens.$font-weight-semi-bold;\n  font-size: tokens.$font-size-m;\n}\n\n.accordion-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out;\n}\n\n.inner-content {\n  padding: 24px;\n  white-space: pre-wrap;\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  /* breaks text at arbitrary points when needed */\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: inline-block;\n  transition: transform 0.3s;\n  margin-right: 0.5rem;\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class IfxAccordionItem {\n  @Prop() caption: string;\n  @State() open: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n  toggleOpen() {\n    this.open = !this.open;\n    if (this.open) {\n      this.ifxItemOpen.emit();\n    } else {\n      this.ifxItemClose.emit();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.open) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  @Method()\n  async close() {\n    this.open = false;\n    this.ifxItemClose.emit();\n  }\n\n  @Method()\n  async isOpen(): Promise<boolean> {\n    return this.open;\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.open ? 'open' : ''}`}>\n        <div class=\"accordion-title\" onClick={() => this.toggleOpen()}>\n          <span class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\" />\n          </span>\n          <span class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)}>\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ifx-accordion.entry.js

@@ -1,17 +1,20 @@
-import { r as registerInstance, h, g as getElement } from './index-6c912e7e.js';
+import { r as registerInstance, h, g as getElement } from './index-2f901f5e.js';
 
-const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column}";
+const accordionCss = "*{font-family:\"Source Sans Pro\"}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px}";
 
-const IfxAccordion = class {
+const Accordion = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.autoCollapse = false;
   }
-  async onIfxItemOpened(event) {
-    const items = Array.from(this.el.shadowRoot.querySelectorAll('ifx-accordion-item'));
-    for (const item of items) {
-      const itemElement = item;
-      if (itemElement !== event.target && (await itemElement.isOpen())) {
-        itemElement.close();
+  async onItemOpen(event) {
+    if (this.autoCollapse) {
+      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
+      for (const item of items) {
+        const itemElement = item;
+        if (itemElement !== event.target && (await itemElement.isOpen())) {
+          itemElement.close();
+        }
       }
     }
   }
@@ -20,8 +23,8 @@ const IfxAccordion = class {
   }
   get el() { return getElement(this); }
 };
-IfxAccordion.style = accordionCss;
+Accordion.style = accordionCss;
 
-export { IfxAccordion as ifx_accordion };
+export { Accordion as ifx_accordion };
 
 //# sourceMappingURL=ifx-accordion.entry.js.map

package/dist/esm/ifx-accordion.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,8GAA8G;;MCQtH,YAAY;;;;EAIvB,MAAM,eAAe,CAAC,KAAkB;IACtC,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACpF,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;MACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;MACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;QAChE,WAAW,CAAC,KAAK,EAAE,CAAC;OACrB;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAQ,CACJ,EACN;GACH;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class IfxAccordion {\n  @Element() el: HTMLElement;\n\n  @Listen('ifxItemOpened', { target: 'body' })\n  async onIfxItemOpened(event: CustomEvent) {\n    const items = Array.from(this.el.shadowRoot.querySelectorAll('ifx-accordion-item'));\n    for (const item of items) {\n      const itemElement = item as HTMLIfxAccordionItemElement;\n      if (itemElement !== event.target && (await itemElement.isOpen())) {\n        itemElement.close();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-accordion.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sHAAsH;;MCQ9H,SAAS;;;wBAEY,KAAK;;EAGrC,MAAM,UAAU,CAAC,KAAkB;IACjC,IAAG,IAAI,CAAC,YAAY,EAAE;MACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;MACzE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,MAAM,WAAW,GAAG,IAAmC,CAAC;QACxD,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE;UAChE,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;OACF;KACF;GACF;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAQ,CACJ,EACN;GACH;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}","//ifxAccordion.tsx\nimport { Component, h, Listen, Element, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  @Listen('ifxItemOpen')\n  async onItemOpen(event: CustomEvent) {\n    if(this.autoCollapse) { \n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.isOpen())) {\n          itemElement.close();\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ifx-alert.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-6c912e7e.js';
+import { r as registerInstance, c as createEvent, h } from './index-2f901f5e.js';
 
 const alertCss = "*{font-family:\"Source Sans Pro\"}.alert{display:flex;border:1px solid #378375;border-radius:1px;color:#1d1d1d;background-color:#ffffff}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper a{line-height:0;color:#1d1d1d}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#378375}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1d1d1d;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #378375}.alert.primary .icon-wrapper{background-color:#378375;color:#ffffff}.alert.secondary{border:1px solid #ab377a}.alert.secondary .icon-wrapper{background-color:#ab377a;color:#ffffff}.alert.success{border:1px solid #aec067}.alert.success .icon-wrapper{background-color:#aec067;color:#ffffff}.alert.danger{border:1px solid #cd002f}.alert.danger .icon-wrapper{background-color:#cd002f;color:#ffffff}.alert.warning{border:1px solid #f07f3c}.alert.warning .icon-wrapper{background-color:#f07f3c;color:#ffffff}";
 

package/dist/esm/ifx-badge.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-6c912e7e.js';
+import { r as registerInstance, h } from './index-2f901f5e.js';
 
 const badgeCss = "*{font-family:\"Source Sans Pro\"}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #ebe9e9;background-color:#ebe9e9;border-radius:100px;font-size:14px;line-height:20px;font-weight:400;color:#1d1d1d}";
 

package/dist/esm/ifx-breadcrumb-item-label.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c912e7e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2f901f5e.js';
 
 const breadcrumbItemLabelCss = ".breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1d1d1d}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
 

package/dist/esm/ifx-breadcrumb-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-6c912e7e.js';
+import { r as registerInstance, h, g as getElement } from './index-2f901f5e.js';
 
 const breadcrumbItemCss = ".breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1d1d1d;font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#dcd5d7;line-height:13px;font-size:20px;margin-right:12px}";
 

package/dist/esm/ifx-breadcrumb.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-6c912e7e.js';
+import { r as registerInstance, h } from './index-2f901f5e.js';
 
 const breadcrumbCss = ".breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:\"Source Sans Pro\";font-size:0.8125rem;align-items:flex-start}";