@infineon/infineon-design-system-stencil 30.9.2--canary.1640.55f6082d40b32de317977a352b37983c1f14902c.0 → 30.9.2--canary.1640.c975b901d4687359a30b31a7f68f83e3017eabd6.0

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

@@ -57,31 +57,31 @@ export default {
                 }
             }
         },
-        ifxItemOpen: {
-            action: 'ifxItemOpen',
+        ifxOpen: {
+            action: 'ifxOpen',
             description: 'Event emitted when an accordion item is opened.',
             table: {
                 category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: `React: onIfxItemOpen={handleOpen}
-            Vue: @ifxItemOpen="handleOpen"
-            Angular: (ifxItemOpen)="handleOpen()"
-            VanillaJs: .addEventListener("ifxItemOpen", (event) => {/*handle open*/});`
+                    detail: `React: onIfxOpen={handleOpen}
+            Vue: @ifxOpen="handleOpen"
+            Angular: (ifxOpen)="handleOpen()"
+            VanillaJs: .addEventListener("ifxOpen", (event) => {/*handle open*/});`
                 }
             },
         },
-        ifxItemClose: {
-            action: 'ifxItemClose',
+        ifxClose: {
+            action: 'ifxClose',
             description: 'Event emitted when an accordion item is closed.',
             table: {
                 category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: `React: onIfxItemClose={handleClose}
-          Vue: @ifxItemClose="handleClose"
-          Angular: (ifxItemClose)="handleClose()"
-          VanillaJs: .addEventListener("ifxItemClose", (event) => {/*handle close*/});`
+                    detail: `React: onIfxClose={handleClose}
+          Vue: @ifxClose="handleClose"
+          Angular: (ifxClose)="handleClose()"
+          VanillaJs: .addEventListener("ifxClose", (event) => {/*handle close*/});`
                 }
             },
         }
@@ -94,16 +94,16 @@ const Template = args => {
     initialItem.setAttribute('open', `true`);
     initialItem.setAttribute('aria-level', args.AriaLevel);
     initialItem.setAttribute('mutable', args.mutable);
-    initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));
-    initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));
+    initialItem.addEventListener('ifxOpen', action('ifxOpen'));
+    initialItem.addEventListener('ifxClose', action('ifxClose'));
     initialItem.innerHTML = `
   Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
 `;
     initialItem.setAttribute('caption', `Label`);
-    initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));
-    initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));
+    initialItem.addEventListener('ifxOpen', action('ifxOpen'));
+    initialItem.addEventListener('ifxClose', action('ifxClose'));
     accordionElement.append(initialItem);
     accordionElement.setAttribute('auto-collapse', args.autoCollapse);
     for (let i = 1; i < args.amountOfItems; i++) {
@@ -117,8 +117,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.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     `;
-        item.addEventListener('ifxItemOpen', action('ifxItemOpen'));
-        item.addEventListener('ifxItemClose', action('ifxItemClose'));
+        item.addEventListener('ifxOpen', action('ifxOpen'));
+        item.addEventListener('ifxClose', action('ifxClose'));
         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":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Accordion',\n  component: 'ifx-accordion',\n  //tags: ['autodocs'],\n\n  args: {\n    amountOfItems: 3,\n    AriaLevel: 3,\n    autoCollapse: false,\n  },\n\n  argTypes: {\n    amountOfItems: { \n      control: 'number', \n      name: 'Amount of Items',\n      description: 'Control the number of *<ifx-accordion-item>*.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'number'\n        }\n      }\n    },\n    AriaLevel: {\n      control: 'number', \n      min: 1, \n      max: 6, \n      description: 'The aria-level attribute for the accordion item header.',\n      table: {\n        defaultValue: {summary: '3'},\n      category: 'ifx-accordion-item props',\n      type: {\n        summary: 'number'\n      }\n    }  \n  },  \n    mutable: {\n      control: 'boolean',\n      description: 'Set the mutable attribute.',\n      table: {\n        category: 'ifx-accordion-item props',\n        defaultValue: {summary: 'true'},\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    autoCollapse: {\n      control: 'boolean',\n      description: 'Collapse the other items when one item is opened.',\n      table: {\n        category: 'ifx-accordion props',\n        defaultValue: { \n          summary: 'false' \n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    ifxItemOpen: { \n      action: 'ifxItemOpen',\n      description: 'Event emitted when an accordion item is opened.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:`React: onIfxItemOpen={handleOpen}\n            Vue: @ifxItemOpen=\"handleOpen\"\n            Angular: (ifxItemOpen)=\"handleOpen()\"\n            VanillaJs: .addEventListener(\"ifxItemOpen\", (event) => {/*handle open*/});`\n            }\n          },\n      },\n    ifxItemClose: { \n      action: 'ifxItemClose',\n      description: 'Event emitted when an accordion item is closed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: \n          `React: onIfxItemClose={handleClose}\n          Vue: @ifxItemClose=\"handleClose\"\n          Angular: (ifxItemClose)=\"handleClose()\"\n          VanillaJs: .addEventListener(\"ifxItemClose\", (event) => {/*handle close*/});`\n        }\n      },\n    }\n  },\n};\n\nconst Template = args => {\n  const accordionElement = document.createElement('ifx-accordion');\n  const initialItem = document.createElement('ifx-accordion-item');\n  initialItem.setAttribute('caption', `Label`);\n  initialItem.setAttribute('open', `true`);\n  initialItem.setAttribute('aria-level', args.AriaLevel);\n  initialItem.setAttribute('mutable', args.mutable);\n  initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n  initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n  initialItem.innerHTML = `\n  Content for Initial Item. 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`;\ninitialItem.setAttribute('caption', `Label`);\n  initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen'));\n  initialItem.addEventListener('ifxItemClose', action('ifxItemClose'));\n\n  accordionElement.append(initialItem);\n\n  accordionElement.setAttribute('auto-collapse', args.autoCollapse);\n  for (let i = 1; i < args.amountOfItems; i++) {\n    const item = document.createElement('ifx-accordion-item');\n    item.setAttribute('caption', `Label`);\n    item.setAttribute('open', `false`);\n    item.setAttribute('aria-level', args.AriaLevel);\n    item.setAttribute('mutable', args.mutable);\n\n    item.innerHTML = `\n        Content for Item #${\n          i + 1\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        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    `;\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  mutable: true,\n};\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;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,qBAAqB;IAErB,IAAI,EAAE;QACJ,aAAa,EAAE,CAAC;QAChB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,KAAK;KACpB;IAED,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,OAAO,EAAE,QAAQ;YACjB,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,+CAA+C;YAC5D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;YACN,WAAW,EAAE,yDAAyD;YACtE,KAAK,EAAE;gBACL,YAAY,EAAE,EAAC,OAAO,EAAE,GAAG,EAAC;gBAC9B,QAAQ,EAAE,0BAA0B;gBACpC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACC,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,0BAA0B;gBACpC,YAAY,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC;gBAC/B,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,qBAAqB;gBAC/B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAC;;;mFAGkE;iBACtE;aACF;SACJ;QACH,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,iDAAiD;YAC9D,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACN;;;mFAGyE;iBAC1E;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACjE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjE,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC7C,WAAW,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,WAAW,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAE7D,WAAW,CAAC,SAAS,GAAG;;;;CAIzB,CAAC;IACF,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC3C,WAAW,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,WAAW,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAE7D,gBAAgB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAErC,gBAAgB,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAClE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE3C,IAAI,CAAC,SAAS,GAAG;4BAEX,CAAC,GAAG,CACN;;;KAGH,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;QACpD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;QAEtD,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,aAAa,EAAE,CAAC;IAChB,OAAO,EAAE,IAAI;CACd,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Accordion',\n  component: 'ifx-accordion',\n  //tags: ['autodocs'],\n\n  args: {\n    amountOfItems: 3,\n    AriaLevel: 3,\n    autoCollapse: false,\n  },\n\n  argTypes: {\n    amountOfItems: { \n      control: 'number', \n      name: 'Amount of Items',\n      description: 'Control the number of *<ifx-accordion-item>*.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: 'number'\n        }\n      }\n    },\n    AriaLevel: {\n      control: 'number', \n      min: 1, \n      max: 6, \n      description: 'The aria-level attribute for the accordion item header.',\n      table: {\n        defaultValue: {summary: '3'},\n      category: 'ifx-accordion-item props',\n      type: {\n        summary: 'number'\n      }\n    }  \n  },  \n    mutable: {\n      control: 'boolean',\n      description: 'Set the mutable attribute.',\n      table: {\n        category: 'ifx-accordion-item props',\n        defaultValue: {summary: 'true'},\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    autoCollapse: {\n      control: 'boolean',\n      description: 'Collapse the other items when one item is opened.',\n      table: {\n        category: 'ifx-accordion props',\n        defaultValue: { \n          summary: 'false' \n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    ifxOpen: { \n      action: 'ifxOpen',\n      description: 'Event emitted when an accordion item is opened.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:`React: onIfxOpen={handleOpen}\n            Vue: @ifxOpen=\"handleOpen\"\n            Angular: (ifxOpen)=\"handleOpen()\"\n            VanillaJs: .addEventListener(\"ifxOpen\", (event) => {/*handle open*/});`\n            }\n          },\n      },\n    ifxClose: { \n      action: 'ifxClose',\n      description: 'Event emitted when an accordion item is closed.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: \n          `React: onIfxClose={handleClose}\n          Vue: @ifxClose=\"handleClose\"\n          Angular: (ifxClose)=\"handleClose()\"\n          VanillaJs: .addEventListener(\"ifxClose\", (event) => {/*handle close*/});`\n        }\n      },\n    }\n  },\n};\n\nconst Template = args => {\n  const accordionElement = document.createElement('ifx-accordion');\n  const initialItem = document.createElement('ifx-accordion-item');\n  initialItem.setAttribute('caption', `Label`);\n  initialItem.setAttribute('open', `true`);\n  initialItem.setAttribute('aria-level', args.AriaLevel);\n  initialItem.setAttribute('mutable', args.mutable);\n  initialItem.addEventListener('ifxOpen', action('ifxOpen'));\n  initialItem.addEventListener('ifxClose', action('ifxClose'));\n\n  initialItem.innerHTML = `\n  Content for Initial Item. 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`;\ninitialItem.setAttribute('caption', `Label`);\n  initialItem.addEventListener('ifxOpen', action('ifxOpen'));\n  initialItem.addEventListener('ifxClose', action('ifxClose'));\n\n  accordionElement.append(initialItem);\n\n  accordionElement.setAttribute('auto-collapse', args.autoCollapse);\n  for (let i = 1; i < args.amountOfItems; i++) {\n    const item = document.createElement('ifx-accordion-item');\n    item.setAttribute('caption', `Label`);\n    item.setAttribute('open', `false`);\n    item.setAttribute('aria-level', args.AriaLevel);\n    item.setAttribute('mutable', args.mutable);\n\n    item.innerHTML = `\n        Content for Item #${\n          i + 1\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        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    `;\n    item.addEventListener('ifxOpen', action('ifxOpen'));\n    item.addEventListener('ifxClose', action('ifxClose'));\n\n    accordionElement.append(item);\n  }\n\n  return accordionElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  amountOfItems: 3,\n  mutable: true,\n};\n"]}

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

@@ -23,10 +23,10 @@ export class IfxAccordionItem {
         this.internalOpen = !this.internalOpen;
         this.open = this.internalOpen;
         if (this.internalOpen) {
-            this.ifxItemOpen.emit({ isOpen: this.internalOpen });
+            this.ifxOpen.emit({ isOpen: this.internalOpen });
         }
         else {
-            this.ifxItemClose.emit({ isClosed: !this.internalOpen });
+            this.ifxClose.emit({ isClosed: !this.internalOpen });
         }
     }
     openAccordionItem() {
@@ -68,7 +68,7 @@ export class IfxAccordionItem {
         }
     }
     render() {
-        return (h("div", { key: '81ca5bfa7f1766eb5b2657b4e2df0019cde776aa', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '0b4daafa22e601cbf1ad1efbe79665c19b751fde', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, h("span", { key: 'e48ea5054c730b317df221a3f191d13186af1932', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'e9581b95bb5a60319c1537c3de6525030d56bf2c', icon: "chevron-down-12" })), h("span", { key: '28862a5c2e3c801b6be02d38c20bd91dce003cbf', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: 'bfe16bfca9899e00e3356bf723caeec83e256486', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '1da3e12ea0120b6450f3f88c3a81e40b9c0c2cd5', class: "inner-content" }, h("slot", { key: '229dec050d2cf0fdd1f78b03dc37e831869c624d', onSlotchange: (e) => this.handleSlotChange(e) })))));
+        return (h("div", { key: '90b42fe0fdc59bcb707cdbd345d457a651cadd34', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '691f906ddcf27924b85cb06a7cd1d469bed4b57d', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0' }, h("span", { key: '5a83c087659f68747176e3bc26d6653b4db9dcaf', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '050e89939de98c6e22b6a0563ebc7213e7204b0f', icon: "chevron-down-12" })), h("span", { key: '960c0ba799af03b588ac53dd5ef4b3071e2f83f4', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '64a83fedce2c9b0b9a5c65a7fbcd3b76e156dd56', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '59033c70e0ac0990cd7bdf60e131d2091339b314', class: "inner-content" }, h("slot", { key: 'a73b3a5b932c9e71275dd4735142cd4fc222e404', onSlotchange: (e) => this.handleSlotChange(e) })))));
     }
     static get is() { return "ifx-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -152,8 +152,8 @@ export class IfxAccordionItem {
     }
     static get events() {
         return [{
-                "method": "ifxItemOpen",
-                "name": "ifxItemOpen",
+                "method": "ifxOpen",
+                "name": "ifxOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -167,8 +167,8 @@ export class IfxAccordionItem {
                     "references": {}
                 }
             }, {
-                "method": "ifxItemClose",
-                "name": "ifxItemClose",
+                "method": "ifxClose",
+                "name": "ifxClose",
                 "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":"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","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } 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  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxItemOpen: EventEmitter;\n  @Event() ifxItemClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxItemOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxItemClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"accordionItem.js","sourceRoot":"","sources":["../../../src/components/accordion/accordionItem.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen } 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  @Prop({\n    mutable: true,\n  }) open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.openAccordionItem()\n  }\n\n  componentDidUpdate() {\n    this.openAccordionItem()\n  }\n\n\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;\n    } else {\n      this.contentEl.style.maxHeight = '0';\n    }\n  }\n\n  handleSlotChange(e) {\n    const slotElement = e.target;\n    const nodes = slotElement.assignedNodes();\n    \n    if(nodes.length > 0) {\n      nodes.forEach(node => {\n        const observer = new MutationObserver((mutationsList, _) => {\n          for(let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n              if (this.internalOpen) {\n                this.openAccordionItem();\n              }\n            }\n          }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n      });\n    }\n\n    if (this.internalOpen) {\n      this.openAccordionItem();\n    }\n  }\n\n  \n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div role=\"button\" aria-expanded={this.internalOpen} aria-controls=\"accordion-content\" class=\"accordion-title\" onClick={() => this.toggleOpen()} tabindex='0'>\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-12\"/>\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">{this.caption}</span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={(el) => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot onSlotchange={(e) => this.handleSlotChange(e)} />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 export class BreadcrumbItemLabel {
     constructor() {
         this.icon = undefined;
-        this.url = undefined;
+        this.href = undefined;
         this.target = "_self";
     }
     componentDidLoad() {
@@ -11,7 +11,7 @@ export class BreadcrumbItemLabel {
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (h("a", { key: '16ddbc6dfce781d06c5e852423d1646426c6fb04', href: this.url, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: '6d62e4f854b7ea735c46a3849a92c09a8d222e54', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '452dc64f08a93f4872f0f033b0b7016073818aab', class: "label-wrapper" }, h("slot", { key: '0a522ff8d13c3133367e62b50480af2dc970961d' })), h("span", { key: '7f5d3a5305ad187e312ae20a59610c9cfe4b13cf', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: '07dc7f9912e3d87f286273e5758490f39df31d0d', icon: "chevron-down-12" }))));
+        return (h("a", { key: '856f06f931087b841e5f0350f1eb03e83b70e598', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, h("ifx-icon", { key: 'b67ee6634bea1f1626e073c1cf4238d12e0e8902', icon: this.icon, "aria-hidden": "true" }), h("span", { key: '270394a637cc6dd822d74d47dcc0bce51e9455c5', class: "label-wrapper" }, h("slot", { key: 'a2c15ce4581d3323d52fe931706ed86f3a777e08' })), h("span", { key: 'f013021b230b0a83a9fc1133d395f91c74cec4c4', class: "menu-icon-wrapper", "aria-hiden": "true" }, h("ifx-icon", { key: 'b22c149f7cb47f43054ba7e7a2ca669a94f2d8bc', icon: "chevron-down-12" }))));
     }
     static get is() { return "ifx-breadcrumb-item-label"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,7 @@ export class BreadcrumbItemLabel {
                 "attribute": "icon",
                 "reflect": false
             },
-            "url": {
+            "href": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -62,7 +62,7 @@ export class BreadcrumbItemLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
+                "attribute": "href",
                 "reflect": false
             },
             "target": {

package/dist/collection/components/breadcrumb/breadcrumb-item-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;;;;sBAGL,OAAO;;IAIhC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YACzF,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() url: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.url} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb-item-label.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,mBAAmB;;;;sBAGL,OAAO;;IAIhC,gBAAgB;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAA;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAA;QACjE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM;YAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY;YACzD,6DAAM,KAAK,EAAC,eAAe;gBACzB,8DAAQ,CACH;YACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM;gBAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb-item-label',\n  styleUrl: 'breadcrumb-item-label.scss',\n  shadow: true,\n})\nexport class BreadcrumbItemLabel {\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = \"_self\"\n  @Element() el;\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n  componentDidLoad() { \n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n  }\n\n  render() {\n    return (\n      <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n        <span class=\"label-wrapper\">\n          <slot />\n        </span>\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n        <ifx-icon icon=\"chevron-down-12\"></ifx-icon>\n       </span>\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -18,15 +18,15 @@ export class Breadcrumb {
                     const breadcrumbItem = node;
                     const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');
                     const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');
-                    if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {
-                        throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');
+                    if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {
+                        throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');
                     }
                 }
             }
         }
     }
     render() {
-        return (h("nav", { key: '82aec60bebf9a71d7cdcfc2916f91c0e36dee868', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '70bae75b26b5df4c509f16c0ab8e2b10333de8ac', class: "breadcrumb" }, h("slot", { key: '1cb28e3640f20319349b4f6d3cb1568508d3b1ba' }))));
+        return (h("nav", { key: '3d01af951d4a6a396545eb9cf26454cbe2b31ed0', "aria-label": "Page navigation breadcrumb" }, h("ol", { key: '95ae08a0de7099ecd7c3aa963c1bf9952918ecda', class: "breadcrumb" }, h("slot", { key: 'e9fed255fa08b28c8974498d329df69b1e92edf5' }))));
     }
     static get is() { return "ifx-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,UAAU;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE,CAAC;YACR,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE,CAAC;oBAC5C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,kBAAkB,EAAE,CAAC;wBAClE,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;oBACrF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,4BAA4B;YAC1C,2DAAI,KAAK,EAAC,YAAY;gBACpB,8DAAQ,CACL,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('url') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a url and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,UAAU;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE,CAAC;YACR,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC9C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE,CAAC;oBAC5C,MAAM,cAAc,GAAG,IAAoC,CAAC;oBAC5D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;oBACtF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;oBAC7E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE,CAAC;wBACnE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;oBACtF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,4BAA4B;YAC1C,2DAAI,KAAK,EAAC,YAAY;gBACpB,8DAAQ,CACL,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true\n})\nexport class Breadcrumb {\n  @Element() el;\n\n  componentDidLoad() {\n    const element = this.el.shadowRoot.firstChild;\n    this.validateBreadcrumbItemStructure(element);\n  }\n\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\n    if (!element) {\n      console.error('element not found');\n      return;\n    }\n  \n    const slot = element.querySelector('slot');\n    if(slot) { \n      const assignedNodes = slot.assignedNodes();\n  \n      for (let i = 0; i < assignedNodes.length; i++) {\n        const node = assignedNodes[i];\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n          if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n            throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Page navigation breadcrumb\">\n        <ol class=\"breadcrumb\">\n          <slot />\n        </ol>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -6,7 +6,8 @@ export default {
     args: {
         icon: '',
         iconArialLabel: '',
-        url: 'http://google.com',
+        href: 'http://yahoo.com',
+        hrefOfDropdownItem: 'http://google.com',
         target: '_self',
     },
     argTypes: {
@@ -50,9 +51,23 @@ export default {
                 }
             }
         },
-        url: {
+        href: {
             control: { type: 'text' },
-            description: 'Set the url of the link.',
+            description: 'Set the href of the breadcrumb item.',
+            table: {
+                category: 'ifx-breadcrumb-item-label props',
+                defaultValue: {
+                    summary: ''
+                },
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        hrefOfDropdownItem: {
+            name: 'href',
+            control: { type: 'text' },
+            description: 'Set the href of the dropdown item.',
             table: {
                 category: 'ifx-dropdown-item props',
                 defaultValue: {
@@ -65,7 +80,7 @@ export default {
         },
         ifxDropdownMenuItem: {
             action: 'ifxDropdownMenuItem',
-            description: 'Custom event emitted when an item is selected.',
+            description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',
             table: {
                 category: 'custom events',
                 type: {
@@ -81,27 +96,27 @@ const DefaultTemplate = args => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `<ifx-breadcrumb>
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 1</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="${args.href}"">Breadcrumb 1</ifx-breadcrumb-item-label>
     <ifx-dropdown-menu>
-      <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>
-      <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-      <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-      <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
+      <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+      <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
     </ifx-dropdown-menu>
   </ifx-breadcrumb-item>
 
   <ifx-breadcrumb-item>
     <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}">Breadcrumb 2</ifx-breadcrumb-item-label>
     <ifx-dropdown-menu>
-    <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>
-    <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-    <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-    <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
+    <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+    <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
     </ifx-dropdown-menu>
   </ifx-breadcrumb-item>
 
   <ifx-breadcrumb-item>
-    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+    <ifx-breadcrumb-item-label slot="label" icon="${args.icon ? icon : ''}" href="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
   </ifx-breadcrumb-item>
 </ifx-breadcrumb>`;
     const breadcrumb = wrapper.querySelector('ifx-breadcrumb');

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  tags: ['autodocs'],\n\n  args: {\n    icon: '',\n    iconArialLabel: '',\n    url: 'http://google.com',\n    target: '_self',\n  },\n  argTypes: {\n    icon: {\n      control: { type: 'select' },\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      control: { type: 'text' },\n      description: 'Set the target of the link.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: '_self'\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    iconArialLabel: {\n      control: { type: 'text' },\n      description: 'Set the aria label of the icon.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    url: {\n      control: { type: 'text' },\n      description: 'Set the url of the link.',\n      table: {\n        category: 'ifx-dropdown-item props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    ifxDropdownMenuItem: {\n      action: 'ifxDropdownMenuItem',\n      description: 'Custom event emitted when an item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const icon = args.icon === 'none' ? '' : args.icon;\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `<ifx-breadcrumb>\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 1</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n      <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n      <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n    <ifx-dropdown-item url=${args.url}>Google</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://bing.com\">Bing</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n    <ifx-dropdown-item url=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" url=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n  </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n  const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n  // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n  const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n  breadcrumbItems.forEach(breadcrumbItem => {\n    const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n    dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n  });\n\n  return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  tags: ['autodocs'],\n\n  args: {\n    icon: '',\n    iconArialLabel: '',\n    href: 'http://yahoo.com',\n    hrefOfDropdownItem: 'http://google.com',\n    target: '_self',\n  },\n  argTypes: {\n    icon: {\n      control: { type: 'select' },\n      options: ['none', ...Object.values(icons).map(i => i['name'])],\n      description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      control: { type: 'text' },\n      description: 'Set the target of the link.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: '_self'\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    iconArialLabel: {\n      control: { type: 'text' },\n      description: 'Set the aria label of the icon.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    href: {\n      control: { type: 'text' },\n      description: 'Set the href of the breadcrumb item.',\n      table: {\n        category: 'ifx-breadcrumb-item-label props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    hrefOfDropdownItem: {\n      name: 'href',\n      control: { type: 'text' },\n      description: 'Set the href of the dropdown item.',\n      table: {\n        category: 'ifx-dropdown-item props',\n        defaultValue: {\n          summary: ''\n        },\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    ifxDropdownMenuItem: {\n      action: 'ifxDropdownMenuItem',\n      description: 'Custom event emitted by ifx-dropdown-menu when an item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxDropdownMenuItem={handleChange}\\nVue:@ifxDropdownMenuItem=\"handleChange\"\\nAngular:(ifxDropdownMenuItem)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxDropdownMenuItem\", (event) => {//handle change});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const icon = args.icon === 'none' ? '' : args.icon;\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `<ifx-breadcrumb>\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"${args.href}\"\">Breadcrumb 1</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n      <ifx-dropdown-item href=${args.hrefOfDropdownItem}>Google</ifx-dropdown-item>\n      <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\n      <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n      <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\">Breadcrumb 2</ifx-breadcrumb-item-label>\n    <ifx-dropdown-menu>\n    <ifx-dropdown-item href=${args.href}>Google</ifx-dropdown-item>\n    <ifx-dropdown-item href=\"http://bing.com\">Bing</ifx-dropdown-item>\n    <ifx-dropdown-item href=\"http://yahoo.com\">Yahoo</ifx-dropdown-item>\n    <ifx-dropdown-item href=\"http://naver.com\">Naver</ifx-dropdown-item>\n    </ifx-dropdown-menu>\n  </ifx-breadcrumb-item>\n\n  <ifx-breadcrumb-item>\n    <ifx-breadcrumb-item-label slot=\"label\" icon=\"${args.icon ? icon : ''}\" href=\"http://google.com\">Breadcrumb 3</ifx-breadcrumb-item-label>\n  </ifx-breadcrumb-item>\n</ifx-breadcrumb>`;\n\n  const breadcrumb = wrapper.querySelector('ifx-breadcrumb') as HTMLElement;\n  // Loop through each breadcrumb item and attach event listeners to its dropdown menu\n  const breadcrumbItems = breadcrumb.querySelectorAll('ifx-breadcrumb-item');\n  breadcrumbItems.forEach(breadcrumbItem => {\n    const dropdownMenu = breadcrumbItem.querySelector('ifx-dropdown-menu');\n    dropdownMenu?.addEventListener('ifxDropdownMenuItem', action('ifxDropdownMenuItem'));\n  });\n\n  return wrapper;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -19,12 +19,9 @@ export default {
     argTypes: {
         label: {
             name: 'Label of Button',
-            description: 'Sets the text displayed on the button.',
+            description: 'Sets the text displayed on the *<ifx-button>*.',
             table: {
                 category: 'story controls',
-                type: {
-                    summary: '<ifx-button> `label` </ifx-button>'
-                }
             }
         },
         icon: {

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

@@ -1 +1 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Button',\n    variant: 'primary',\n    theme: 'default',\n    type: 'button',\n    size: 'm',\n    fullWidth: false,\n    disabled: false,\n    icon: '',\n    iconPosition: 'left',\n    href: false,\n    url: '',\n    target: '_blank',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Button',\n      description: 'Sets the text displayed on the button.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: '<ifx-button> `label` </ifx-button>'\n        }\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed.',\n      control: 'select',\n      options: Object.values(icons).map(i => i['name']),\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    theme: {\n      description: 'Specifies the theme style of the button.',\n      control: 'radio',\n      options: ['default', 'danger', 'inverse'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'default'\n        }\n      }\n    },\n    type: {\n      description: 'Sets the type attribute of the button.',\n      control: 'radio',\n      options: ['button', 'submit', 'reset'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'button'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',\n      control: 'radio',\n      options: ['xs', 's', 'm', 'l'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    fullWidth: {\n      description: 'When set to **true**, expands the button to take the full width of its container.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    iconPosition: {\n      description: 'Determines the position of an icon within the button if an icon is used.',\n      control: 'radio',\n      options: ['left', 'right'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'left'\n        }\n      }\n    },\n    href: {\n      description: 'When set to **true**, treats the button as a link by setting a URL.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    url: {\n      description: 'Specifies the destination URL for the button when it acts as a link.',\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked document when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,EAAE;QACR,YAAY,EAAE,MAAM;QACpB,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,EAAE;QACP,MAAM,EAAE,QAAQ;KACjB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,2BAA2B;YACxC,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,0CAA0C;YACvD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;YACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+EAA+E;YAC5F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,mFAAmF;YAChG,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,GAAG,EAAE;YACH,WAAW,EAAE,sEAAsE;YACnF,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,0EAA0E;YACvF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,qBAAqB,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,SAAS;IAC5N,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,EAAE;cAC3N,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Button',\n    variant: 'primary',\n    theme: 'default',\n    type: 'button',\n    size: 'm',\n    fullWidth: false,\n    disabled: false,\n    icon: '',\n    iconPosition: 'left',\n    href: false,\n    url: '',\n    target: '_blank',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Button',\n      description: 'Sets the text displayed on the *<ifx-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed.',\n      control: 'select',\n      options: Object.values(icons).map(i => i['name']),\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    theme: {\n      description: 'Specifies the theme style of the button.',\n      control: 'radio',\n      options: ['default', 'danger', 'inverse'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'default'\n        }\n      }\n    },\n    type: {\n      description: 'Sets the type attribute of the button.',\n      control: 'radio',\n      options: ['button', 'submit', 'reset'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'button'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the button. Options: xs (32px) s (36px),  m (40px), l (48px)',\n      control: 'radio',\n      options: ['xs', 's', 'm', 'l'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    fullWidth: {\n      description: 'When set to **true**, expands the button to take the full width of its container.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    iconPosition: {\n      description: 'Determines the position of an icon within the button if an icon is used.',\n      control: 'radio',\n      options: ['left', 'right'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'left'\n        }\n      }\n    },\n    href: {\n      description: 'When set to **true**, treats the button as a link by setting a URL.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    url: {\n      description: 'Specifies the destination URL for the button when it acts as a link.',\n      table: {\n        category: 'ifx-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked document when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-button type=\"${args.type}\" disabled=\"${args.disabled}\" variant=\"${args.variant}\" size=\"${args.size}\" target=\"${args.target}\" theme=\"${args.theme}\" ${args.href ? `href=\"${args.url}\"` : ''} full-width=\"${args.fullWidth}\">\n  ${args.icon && args.iconPosition.toUpperCase() === 'LEFT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''}${args.label}${args.icon && args.iconPosition.toUpperCase() === 'RIGHT' ? `<ifx-icon icon=\"${args.icon}\"></ifx-icon>` : ''} \n</ifx-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -11,6 +11,7 @@ export default {
         target: '_blank',
         position: 'right',
         src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',
+        AriaLabel: 'Card',
     },
     argTypes: {
         overline: {
@@ -61,6 +62,13 @@ export default {
             options: ['horizontal', 'vertical'],
             control: { type: 'radio' },
         },
+        AriaLabel: {
+            control: { type: 'text' },
+            description: 'Sets the aria-label attribute of the card. Enhances accessibility.',
+            table: {
+                category: 'ifx-card props',
+            },
+        },
         position: {
             description: 'Sets the position of the image in the card.',
             table: {
@@ -88,16 +96,6 @@ export default {
             options: ['_blank', '_self', '_parent'],
             control: { type: 'radio' },
         },
-        isHovered: {
-            description: 'Changes the color of the headline when hovered.',
-            type: 'boolean',
-            table: {
-                defaultValue: {
-                    summary: false
-                },
-                category: 'ifx-card-headline props',
-            },
-        },
         src: {
             description: 'Sets the image source.',
             type: { name: 'string' },
@@ -114,7 +112,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
+const DefaultTemplate = args => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}" aria-label="${args.AriaLabel}">
     <ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
     ${args.overline
     ? `<ifx-card-overline>

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

@@ -1 +1 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  args: {\n    overline: 'Overline',\n    headline: 'Headline',\n    description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n    direction: 'vertical',\n    button: 'button',\n    href: '',\n    target: '_blank',\n    position: 'right',\n    src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n  },\n\n  argTypes: {\n    overline: {\n      name: 'Overline',\n      description: 'Sets the overline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    description: {\n      name: 'Description',\n      description: 'Sets the description text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    button: {\n      name: 'Button',\n      options: ['button', 'link', 'none'],\n      description: 'Sets the button type of the card.',\n      control: { type: 'radio' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    direction: {\n      description: 'Sets the direction of the card layout.',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: 'vertical',\n        },\n        type: {\n          summary: 'horizontal | vertical',\n          disable: true,\n        },\n      },\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n    },\n\n    position: {\n      description: 'Sets the position of the image in the card.',\n      table: {\n        category: 'ifx-card-image props',\n      },\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      if: { arg: 'direction', eq: 'horizontal' },\n    },\n    href: {\n      description: 'Sets the hyperlink reference.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n    target: {\n      description: 'Sets the target of the hyperlink reference',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: '_self',\n        },\n      },\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n    isHovered: {\n      description: 'Changes the color of the headline when hovered.',\n      type: 'boolean',\n      table: {\n        defaultValue: {\n          summary: false\n        },\n        category: 'ifx-card-headline props',\n      },\n    },\n    src: {\n      description: 'Sets the image source.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n    alt: {\n      description: 'Sets the alternative text for the image.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n        ${args.headline}\n        </ifx-card-headline>`\n    : ''\n  }\n     ${args.description\n    ? `<ifx-card-text>\n        ${args.description}\n        </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n      ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n            <ifx-link href=\"https://google.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n            <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n          </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  alt: 'Coffee',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n          ${args.headline}\n          </ifx-card-headline>`\n    : ''\n  }\n        ${args.description\n    ? `<ifx-card-text>\n            ${args.description}\n            </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n          ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n          <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n        </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n  direction: 'horizontal',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n  direction: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  args: {\n    overline: 'Overline',\n    headline: 'Headline',\n    description: \"Some quick example text to build on the card title and make up the bulk of the card's content.\",\n    direction: 'vertical',\n    button: 'button',\n    href: '',\n    target: '_blank',\n    position: 'right',\n    src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n    AriaLabel: 'Card',\n  },\n\n  argTypes: {\n    overline: {\n      name: 'Overline',\n      description: 'Sets the overline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Sets the headline text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    description: {\n      name: 'Description',\n      description: 'Sets the description text of the card.',\n      type: { name: 'string' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    button: {\n      name: 'Button',\n      options: ['button', 'link', 'none'],\n      description: 'Sets the button type of the card.',\n      control: { type: 'radio' },\n      table: {\n        category: 'story controls',\n      },\n    },\n    direction: {\n      description: 'Sets the direction of the card layout.',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: 'vertical',\n        },\n        type: {\n          summary: 'horizontal | vertical',\n          disable: true,\n        },\n      },\n      options: ['horizontal', 'vertical'],\n      control: { type: 'radio' },\n    },\n    AriaLabel: {\n      control: { type: 'text' },\n      description: 'Sets the aria-label attribute of the card. Enhances accessibility.',\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n\n    position: {\n      description: 'Sets the position of the image in the card.',\n      table: {\n        category: 'ifx-card-image props',\n      },\n      options: ['left', 'right'],\n      control: { type: 'radio' },\n      if: { arg: 'direction', eq: 'horizontal' },\n    },\n    href: {\n      description: 'Sets the hyperlink reference.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card props',\n      },\n    },\n    target: {\n      description: 'Sets the target of the hyperlink reference',\n      table: {\n        category: 'ifx-card props',\n        defaultValue: {\n          summary: '_self',\n        },\n      },\n      options: ['_blank', '_self', '_parent'],\n      control: { type: 'radio' },\n    },\n    src: {\n      description: 'Sets the image source.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n    alt: {\n      description: 'Sets the alternative text for the image.',\n      type: { name: 'string' },\n      table: {\n        category: 'ifx-card-image props',\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\" aria-label=\"${args.AriaLabel}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n        ${args.headline}\n        </ifx-card-headline>`\n    : ''\n  }\n     ${args.description\n    ? `<ifx-card-text>\n        ${args.description}\n        </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n      ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n            <ifx-link href=\"https://google.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n            <ifx-link href=\"https://yahoo.com\" target=\"_blank\">\n              <ifx-icon icon=\"calendar16\"></ifx-icon>\n              Link\n            </ifx-link>\n          </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  alt: 'Coffee',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\n\nconst HorizontalTemplate = args =>\n  `<ifx-card direction=\"${args.direction}\" href=\"${args.href}\" target=\"${args.target}\">\n    <ifx-card-image position=\"${args.position}\" src=\"${args.src}\" alt=\"${args.alt}\" slot=\"img\"></ifx-card-image>\n    ${args.overline\n    ? `<ifx-card-overline>\n        ${args.overline}\n        </ifx-card-overline>`\n    : ''\n  }\n      ${args.headline\n    ? `<ifx-card-headline>\n          ${args.headline}\n          </ifx-card-headline>`\n    : ''\n  }\n        ${args.description\n    ? `<ifx-card-text>\n            ${args.description}\n            </ifx-card-text>`\n    : ''\n  }\n      ${args.button === 'button'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-button variant=\"primary\">Button</ifx-button>\n          <ifx-button variant=\"secondary\">Button</ifx-button>\n          </ifx-card-links>`\n    : ''\n  }\n          ${args.button === 'link'\n    ? `<ifx-card-links slot=\"buttons\">\n          <ifx-link color=\"primary\" href=\"https://google.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n          <ifx-link color=\"primary\" href=\"https://yahoo.com\" target=\"_blank\" underline=\"false\">\n            <ifx-icon icon=\"calendar16\"></ifx-icon>\n            Link\n          </ifx-link>\n        </ifx-card-links>`\n    : ''\n  }\n  </ifx-card>`;\n\nexport const Horizontal = HorizontalTemplate.bind({});\nHorizontal.args = {\n  direction: 'horizontal',\n  src: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg',\n};\nHorizontal.argTypes = {\n  direction: {\n    table: {\n      disable: true,\n    },\n  },\n};\n"]}

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

@@ -14,12 +14,9 @@ export default {
     argTypes: {
         label: {
             name: 'Label of Checkbox',
-            description: 'Sets the label of *<ifx-checkbox>*.',
+            description: 'Set the label displayed next to *<ifx-checkbox>*.',
             table: {
                 category: 'story controls',
-                type: {
-                    summary: '<ifx-checkbox> `label` </ifx-checkbox>'
-                }
             }
         },
         error: {