@infineon/infineon-design-system-stencil 37.12.1--canary.1987.8b23614a9e4df18a96139785aa829abbea3e4844.0 → 37.12.1--canary.1988.0b48931149b6c948a2f5eb2523b0ca83cf81d9ce.0

package/dist/cjs/ifx-accordion_2.cjs.entry.js

@@ -32,7 +32,7 @@ const Accordion = class {
         }
     }
     render() {
-        return (index.h("div", { key: '903cc44b4886b77e59e66ab2a5cdf681dafeb9bc', class: "accordion-wrapper" }, index.h("slot", { key: 'e0abec42188606e8c80fc3db44fba19a7aa69ed8' })));
+        return (index.h("div", { key: '9710667abc27fc6c6cfa6f2c696bcd0c9ca16f68', class: "accordion-wrapper" }, index.h("slot", { key: 'e619068facc88777b79567655ee68e5f7ee71c81' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -116,7 +116,7 @@ const IfxAccordionItem = class {
         }
     }
     render() {
-        return (index.h("div", { key: '6f314f7ff18566be1de5fb8c169405df296ba346', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: '0c20697cd02a7af28f481c7104a6b100ad478081', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, index.h("span", { key: 'd41d3016e5f967f361dea497486673d786ba3d83', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '27308dfb2a2cd73303705521a41f706482cb8da3', icon: "chevron-down-16" })), index.h("span", { key: 'c71749876b23310d9d9037552dcb4800f3b16d13', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '23d3f2ee657ff35edd3d341e883aadb6d1858c79', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '3716d880d2c26471e515ba60a0b1227758130a09', class: "inner-content" }, index.h("slot", { key: '0ae80ac1d41934a1e3a84e3d3a8bdc97b5cf1e2c' })))));
+        return (index.h("div", { key: '206187381ed2e547d06b5f80a4242b00cb4fae7b', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: 'b785160b699319231d33c138b5261b4506bdd34f', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: '0', ref: (el) => (this.titleEl = el) }, index.h("span", { key: 'cb79f51abfc5d928c918e946f83d4edab86e2d3a', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '64f4f0ae6689d5f792d4d4442e76d026930235cd', icon: "chevron-down-16" })), index.h("span", { key: '3c1a8df6433eb2672db86ffafaae7f9e56191477', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: 'bf7f7db86e29675051c16a17dfcc72c92a8b2cc7', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '284276193e0ae2e06ee52282afd4c2879c26b897', class: "inner-content" }, index.h("slot", { key: '361b1da7d3764271836dd3bb7e9c00eb446f84d0' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-alert_2.cjs.entry.js

@@ -186,7 +186,7 @@ const Template = class {
         }
     }
     render() {
-        return (index.h("div", { key: '1de8086432131979b1290ea28de6027cf52aa043' }, this.isTemplatePage
+        return (index.h("div", { key: '9469a3c0365fda40118db7b8e9ae3a11cff21db4' }, this.isTemplatePage
             ?
                 index.h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     index.h("div", null, index.h("h3", null, "Your repository is getting ready.."), index.h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && index.h("div", null, index.h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && index.h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && index.h("div", null, this.repoError))

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

@@ -20,7 +20,7 @@ const Badge = class {
         }
     }
     render() {
-        return (index.h("div", { key: '44c69d2270a76422607d74bba05e797512662f3d', class: "badge__container" }, index.h("slot", { key: '27f45fcfd63386ea536d965f3555a073ebc2e6d8' })));
+        return (index.h("div", { key: '1c8355a9f85324e21ad3fb0a7f84f2f63e0fad77', class: "badge__container" }, index.h("slot", { key: 'fe5006e14d56cf2e65f12587b00f13d6e0daec42' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-basic-table.cjs.entry.js

@@ -189,7 +189,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: '5968712e3cbe5605b5128dc19997941d18d21ffc' }, index.h("div", { key: '8a39d36f4006095de577777bb8c31f2ba3b9a2ee', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: '8dd8dfaa472da2cd56ade80f5105cdbebeb8013b', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: '395e4ddc1ba33a2870d67ffdcebeb5b399c69821' }, index.h("div", { key: 'ebc6800aeb7fd146008485363bda1be11f8de555', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'f1e7ec2a0a79e153304f73013ddc6f6c9ab09bfb', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -19,7 +19,7 @@ const BreadcrumbItemLabel = class {
         this.breadcrumbMenuIconWrapper.emit(menuWrapper);
     }
     render() {
-        return (index.h("a", { key: '856f06f931087b841e5f0350f1eb03e83b70e598', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, index.h("ifx-icon", { key: 'b67ee6634bea1f1626e073c1cf4238d12e0e8902', icon: this.icon, "aria-hidden": "true" }), index.h("span", { key: '270394a637cc6dd822d74d47dcc0bce51e9455c5', class: "label-wrapper" }, index.h("slot", { key: 'a2c15ce4581d3323d52fe931706ed86f3a777e08' })), index.h("span", { key: 'f013021b230b0a83a9fc1133d395f91c74cec4c4', class: "menu-icon-wrapper", "aria-hiden": "true" }, index.h("ifx-icon", { key: 'b22c149f7cb47f43054ba7e7a2ca669a94f2d8bc', icon: "chevron-down-16" }))));
+        return (index.h("a", { key: 'b1db58a07f820f1f3cf81bc1e8169694c4acc26b', href: this.href, target: this.target, class: "breadcrumb-item-label-container", role: 'link' }, index.h("ifx-icon", { key: '92b54db27eafce93d4ae34077273a2d0d9f4669d', icon: this.icon, "aria-hidden": "true" }), index.h("span", { key: '725e2350f54b94cdd6668cbc478ae59be2a0830d', class: "label-wrapper" }, index.h("slot", { key: '2ae0189cc69497a1ade1b91de4ab502f07d479fc' })), index.h("span", { key: '723d007b995282119366f201d89fcd8e021cf917', class: "menu-icon-wrapper", "aria-hiden": "true" }, index.h("ifx-icon", { key: '2293c222d6ca3f02e5cdc36df9a8ec18c3cf355e', icon: "chevron-down-16" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -104,7 +104,7 @@ const BreadcrumbItem = class {
         }
     }
     render() {
-        return (index.h("li", { key: '5779bbe0854a084c33c1bb535655fe484165784e', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, index.h("li", { key: '63e956424dda4002a84c7da17bfe42b3f7f830b0', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, index.h("slot", { key: '14f66501d9ac8efc9ff9e6b771757e30c70814a6', name: 'label' }), index.h("div", { key: '9620ab0608dc5c74aa39fe321a332421ee4c76b3', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, index.h("slot", { key: 'c4e6e9b1650f2467876f7824201139b369625b3d' }))), !this.isLastItem && index.h("span", { key: '5c028ab8720841b8a2777a84d7ad3f933ab43b79', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
+        return (index.h("li", { key: '5af0a3fa94501cd75cbf71f65ee1ba7c0e35b4fe', class: 'breadcrumb-parent', "aria-current": `${this.isLastItem ? 'page' : ""}` }, index.h("li", { key: 'cad4a66147e8cfb08a54600bfd7b49caa73aeaf4', role: "button", tabindex: this.hasDropdownMenu ? 0 : -1, class: "breadcrumb-wrapper", onClick: () => this.toggleDropdownMenu(), "aria-controls": this.uniqueId, "aria-haspopup": "menu", "aria-label": "Toggle dropdown menu" }, index.h("slot", { key: '8e04912766549eb02867926b00f87ea2cfccea17', name: 'label' }), index.h("div", { key: '0ee67245fda42fe903e9b5d43bbf017e5e8b0be9', id: this.uniqueId, class: "dropdown-menu", "aria-expanded": this.isDropdownMenuOpen(), "aria-label": "Dropdown menu" }, index.h("slot", { key: '6bfd1019813184782b0ea056f5d62e94dd354aaa' }))), !this.isLastItem && index.h("span", { key: '5d55031d1a5be2cfe79a40ded6601ed36516a907', class: "breadcrumb-divider", "aria-hidden": "true" }, "/")));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -43,7 +43,7 @@ const Breadcrumb = class {
         }
     }
     render() {
-        return (index.h("nav", { key: '0b2fef450a8e44e157630158ab05ae6d06c578fd', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: '365f7936e4f212fe1af6cb00452b2b97e3ac59a1', class: "breadcrumb" }, index.h("slot", { key: 'd8186a51bddd3d8913fb55a1b5c6202fc1c79acc' }))));
+        return (index.h("nav", { key: 'a4dcaa64ef482b645a469bf60243178493ba77e6', "aria-label": "Page navigation breadcrumb" }, index.h("ol", { key: 'ebf7f50ef36a498717b8f3f06b946ae95d60d719', class: "breadcrumb" }, index.h("slot", { key: '42960ed2a93d8495357010406fc83bf6454ff84a' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-button.cjs.entry.js

@@ -110,7 +110,7 @@ const Button = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '52f47e2aea09c5c3c75507f5b0c2d683f2d82a01' }, index.h("a", { key: '042e9e5e6990e6f5e421b8cdce802ab3802309bc', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, index.h("slot", { key: 'eb5fa24cbf39aeef2060ea71604c2c503cd20fbe' }))));
+        return (index.h(index.Host, { key: '2728238bd4afa7c7fe1a7ac7087bda17e2451887' }, index.h("a", { key: '778d12bfc48ca1cb5e239e3d5e0b0ff088834d3e', role: this.href ? 'link' : 'button', tabIndex: this.disabled ? -1 : 0, ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.internalHref : undefined, target: this.target, onClick: this.handleClick, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onFocus: (event) => this.handleFocus(event), "aria-disabled": this.disabled ? 'true' : null, "aria-describedby": this.theme === 'danger' ? 'Dangerous action' : undefined, "aria-label": this.ariaLabel || undefined }, index.h("slot", { key: 'bb0aa387fc434eacc9622746941674a73eb3dd3b' }))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"

package/dist/cjs/ifx-card-headline.cjs.entry.js

@@ -26,7 +26,7 @@ const CardHeadline = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3599127fad1e7dc563064d38df9996bcd7bd9217', class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, index.h("div", { key: '643428271dec2bdf71c7059bf6e28c00cae9438b', class: `card-headline ${this.direction}` }, index.h("slot", { key: '3b7ec4e25a399e96a0db4f03d793109eabf08fff' }))));
+        return (index.h("div", { key: 'e57b15dce2ae9edb507ab94eae13d7567ea2f760', class: `card__headline-wrapper ${this.hasDesc ? 'withDesc' : ""}` }, index.h("div", { key: '28abd2e7ea55b36c89d8708c2974b4cb267bff8e', class: `card-headline ${this.direction}` }, index.h("slot", { key: '61df77ff5f1a9eb22c59ca53da7fea2d8390eb63' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card-image.cjs.entry.js

@@ -22,7 +22,7 @@ const CardImage = class {
         this.handlePosition(this.position);
     }
     render() {
-        return (index.h("img", { key: 'e08992cdb9c62e7b4f98d58d39457702233ee300', src: this.src, alt: this.alt, class: "card-image" }));
+        return (index.h("img", { key: '3ca9e9494f660c533374b9a798b192f5d0aa124e', src: this.src, alt: this.alt, class: "card-image" }));
     }
 };
 CardImage.style = IfxCardImageStyle0;

package/dist/cjs/ifx-card-links.cjs.entry.js

@@ -12,7 +12,7 @@ const CardLinks = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '2f4e55e1890a5d5f749d0e951d6971d8cf1b0875', class: 'container' }, index.h("slot", { key: '7e0c1226088fcd91ffee21b817f89970bc3ab772' })));
+        return (index.h("div", { key: 'd002b5767f2ddb0f7d74e5de5a17e54496d514f3', class: 'container' }, index.h("slot", { key: 'fdfc69fee5c94b0d6ac404e2d24e692861ba4545' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card-overline.cjs.entry.js

@@ -12,7 +12,7 @@ const CardOverline = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'edb86d9c621859391a960610c81ab5fa3a3558fd', class: "card-overline" }, index.h("slot", { key: '2b4846831c111a2b598b6632559b5346c152568f' })));
+        return (index.h("div", { key: '6c8dfef2d2eea31b9634528ce5731524e89deb89', class: "card-overline" }, index.h("slot", { key: '96157299497e82fedc9729be00b0333f5bd06382' })));
     }
 };
 CardOverline.style = IfxCardOverlineStyle0;

package/dist/cjs/ifx-card-text.cjs.entry.js

@@ -19,7 +19,7 @@ const CardText = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'fea1823e8000b8699142eefb127eb1716a606bcd', class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, index.h("div", { key: 'ee9baf1f210a6bf109669d3dbb075f56cf52ee22', class: `card-text` }, index.h("slot", { key: 'd4e94f54325b349d0a908f1812412e4a6ff1adad' }))));
+        return (index.h("div", { key: '305718a9029d1fde13e9aa643e72f8e520402a71', class: `card__text-wrapper ${this.hasBtn ? 'hasBtn' : ""}` }, index.h("div", { key: 'e7d8f660da3e91d1582127574c8b33a3bad28711', class: `card-text` }, index.h("slot", { key: 'f80c5455c35d6cf6480e47bd8962fd8a136f9240' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-7f4df11a.js');
 const frameworkDetection = require('./framework-detection-39905fc2.js');
 const domUtils = require('./dom-utils-2c4573c2.js');
 
-const cardCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:2px solid #EEEDED;border-radius:2px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
+const cardCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}";
 const IfxCardStyle0 = cardCss;
 
 const Card = class {
@@ -23,14 +23,24 @@ const Card = class {
     handleComponentAdjustment() {
         const image = this.el.querySelector('ifx-card-image');
         const links = this.el.querySelector('ifx-card-links');
-        this.noImg = !image;
-        this.noBtns = !links;
+        if (!image) {
+            this.noImg = true;
+        }
+        else
+            this.noImg = false;
+        if (!links) {
+            this.noBtns = true;
+        }
+        else
+            this.noBtns = false;
         if (this.href.trim() === "") {
             this.internalHref = undefined;
         }
-        else {
+        else
             this.internalHref = this.href;
-        }
+    }
+    handleClassList(el, type, className) {
+        el.classList[type](className);
     }
     componentWillLoad() {
         this.handleComponentAdjustment();
@@ -45,12 +55,12 @@ const Card = class {
         this.handleComponentAdjustment();
     }
     render() {
-        return (index.h(index.Host, { key: '7a0780953a6893b1e7178cf52bbb4a0c90808bbf' }, index.h("div", { key: 'c4e49dbe8a1bc2a8cef3952cf70a88d47bb2e7c9', "aria-label": this.ariaLabel, class: `card 
-            ${this.noBtns ? 'noBtns' : ""}
-            ${this.direction} 
-            ${this.alignment}`, role: "group" }, this.direction === 'horizontal' &&
-            index.h("div", { key: '086a7287530747bda7154ea6ed5c80984bf2b3f3', class: "horizontal" }, index.h("a", { key: 'a1bd2d0ab3f203f712d3222fe71199da1e5c24e9', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, index.h("slot", { key: 'be5e480eaebc91de9f71c6953e90362879e7319a', name: "img" })), index.h("div", { key: '7bd12a56a66a2219059fdc9cd8ef1a77a68ae75b', class: 'lower__body-wrapper' }, index.h("a", { key: '9fdb1755fd1d2932008b2618c7fd89ff3f74453e', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, id: "upper-body-content" }, index.h("slot", { key: '508c537f02b9f8d8a360b104d534ce35f03b8b90' })), index.h("div", { key: 'd1866385d1aa28b74b56d0a64cd9d9e3fd4b7c5e' }, index.h("slot", { key: 'b6dcc04698bf10714ad473b19087eaa52fcad056', name: 'buttons' })))), this.direction === 'vertical' &&
-            index.h("div", { key: 'ab2bf4432da21fcb6ea4fbd383a883aa5bb09cc1', class: "vertical" }, index.h("a", { key: '8ca38de22e688384623f91e43968000cd0332e2c', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, index.h("div", { key: 'd5ece9e569b659ae75bd734ecee28acb0ed8a524', class: `card-img ${this.noImg ? 'noImage' : ""}` }, index.h("slot", { key: '20f8143a1581d32bd95a44cf355668868ae33503', name: "img" })), index.h("div", { key: 'b233b26f896472f79f02997292cfe80d8656fa6a', class: 'upper-body', id: "upper-body-content" }, index.h("slot", { key: '255dcd8f6bca0ed8506e00c1ee2cbcf5a02d1023' }))), index.h("div", { key: '5f30be5b734b4f2467180119c366c6bb87718ca5', class: 'lower__body-wrapper', role: "group", "aria-labelledby": "upper-body-content" }, index.h("slot", { key: '252604784de1be77af048feba37610a5be244d50', name: 'buttons' }))))));
+        return (index.h(index.Host, { key: 'd07e98daedf904aef49a0d8cc12bfd0456432bf3' }, index.h("div", { key: '06fa5ab99428d284b1ea11af7addfa6c2853ab37', "aria-label": this.ariaLabel, class: `card 
+          ${this.noBtns ? 'noBtns' : ""}
+          ${this.direction} 
+          ${this.alignment}`, role: "region" }, this.direction === 'horizontal' &&
+            index.h("div", { key: '41c062f9414e0603cc0908a791a81a5c451eebe1', class: "horizontal" }, index.h("a", { key: '2f6c911923d7e2934398271580183aec74013e5d', class: `card-img ${this.noImg ? 'noImage' : ""} ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, index.h("slot", { key: '02e9a8e6453f4e126bf39c48bce3d25ef1c062a6', name: "img" })), index.h("div", { key: 'f3966dd3ae5c33b271c7127db45e19ace51ee67b', class: 'lower__body-wrapper' }, index.h("a", { key: '2b812db8e76e6ed0180994a9a68363c1faeeee3e', class: `upper-body ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref }, index.h("slot", { key: '7d8e9b4c1b8cef3a8b26b6c1869b9cbceac4de7c' })), index.h("div", { key: 'd9460914375c08f05c62056ce4aee49535a925af' }, index.h("slot", { key: '411bf1e3dd19346173beb06202390ce732bc0a13', name: 'buttons' })))), this.direction === 'vertical' &&
+            index.h("div", { key: '70696b98465b1b26c1d510f5d9492339f6004907', class: "vertical" }, index.h("a", { key: 'dc9d5d4a8d7241290f90bbe71852c6910926bbe3', class: `upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`, href: this.internalHref, target: this.target }, index.h("div", { key: 'e6e6d8f406349af5cb4a701157ae74f19a6153b4', class: `card-img ${this.noImg ? 'noImage' : ""}` }, index.h("slot", { key: 'faa6416889199bd658da8638f21c015cfd1927f1', name: "img" })), index.h("div", { key: 'd0baef784e032b0c5ae80dc1bfe19aeb3a3c9798', class: 'upper-body' }, index.h("slot", { key: 'b62ee64aa4c1e7b2d87d4a932768c92d54193faa' }))), index.h("div", { key: '4327daa92e4fd7d3666405f003685aa7e854fdac', class: 'lower__body-wrapper' }, index.h("slot", { key: 'a804832254dfa3fff3eb61d5cd709e40aa591178', name: 'buttons' }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-card.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-card.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 2px solid tokens.$ifxColorEngineering200;\n  border-radius: 2px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail;\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image');\n    const links = this.el.querySelector('ifx-card-links');\n\n    this.noImg = !image;\n    this.noBtns = !links;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  componentWillLoad() {\n    this.handleComponentAdjustment();\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-card', await framework);\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div \n          aria-label={this.ariaLabel} \n          class={\n            `card \n            ${this.noBtns ? 'noBtns' : \"\"}\n            ${this.direction} \n            ${this.alignment}`\n          }\n          role=\"group\"\n        >\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a \n                class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \n                href={this.internalHref}\n              >\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a \n                  class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \n                  href={this.internalHref}\n                  id=\"upper-body-content\"\n                >\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a \n                class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \n                href={this.internalHref} \n                target={this.target}\n              >\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body' id=\"upper-body-content\">\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ifx-card.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    if (!image) {\n      this.noImg = true;\n    } else this.noImg = false;\n\n    if (!links) {\n      this.noBtns = true;\n    } else this.noBtns = false;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n\n  componentWillLoad() {\n    this.handleComponentAdjustment()\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-card', await framework)\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment()\n  }\n\nrender() {\n    return (\n      <Host>\n        <div aria-label={this.ariaLabel} class={\n          `card \n          ${this.noBtns ? 'noBtns' : \"\"}\n          ${this.direction} \n          ${this.alignment}`\n        }\n        role=\"region\">\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body'>\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-checkbox-group.cjs.entry.js

@@ -57,7 +57,7 @@ const CheckboxGroup = class {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (index.h("div", { key: 'b3f10b860ca3a976439a7be6d24a92a4214aabbc', class: 'checkbox-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: '4d77558d3af07c48db430b3df5fa2aeeb288ee51', class: `checkbox-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '634221dfaef08e771d56ad17e3618e6dc2e3c59e', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (index.h("div", { key: '4505e1aa565fe9d41fa6543dc7930f5b6e362f17', class: 'checkbox-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: '3dbb044ccbb1b776d0e7c23a5e678c4edb6640ee', class: `checkbox-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '9dd54927fe6e3c4aa9c81d1f9200d9b54879e812', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-checkbox.cjs.entry.js

@@ -117,12 +117,12 @@ const Checkbox = class {
         if (slot) {
             hasSlot = true;
         }
-        return (index.h("div", { key: '74b7d4a1cefb72dd1992d5e110ebae6404bbdf17', class: "checkbox__container" }, index.h("input", { key: 'bbad3134c03a0e1e72c1c8238026d20d2057a3e1', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), index.h("div", { key: '388061c34044e550385d0ae52f371e6164054990', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper 
+        return (index.h("div", { key: '3df0d73fb0899835c86d4459cad05be4f95dfb51', class: "checkbox__container" }, index.h("input", { key: '2ba53dd63ce5e1ec9dd924cbd6d755e335fabcab', type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.value}`, disabled: this.disabled ? true : undefined }), index.h("div", { key: '225c538e38b88ae23b5b9f441e4f494bfa43d183', tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.internalChecked.toString(), "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper 
           ${this.getCheckedClassName()}
         ${this.size === "m" ? "checkbox-m" : ""}
         ${this.indeterminate ? 'indeterminate' : ""}
-        ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && index.h("ifx-icon", { key: 'd0edce274f2c5929f711184b4e63de5c1399d6db', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
-            index.h("div", { key: '630e47c8d98d5d3bd222e4c07f651010ed7470ff', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, index.h("slot", { key: '4474b7ba1c18a6404951f7c40953b8ee0101b751' }))));
+        ${this.disabled ? 'disabled' : ""}` }, this.internalChecked && !this.internalIndeterminate && index.h("ifx-icon", { key: '7e67f21231706fce949a18fbb240b6c621753a46', icon: "check-16", "aria-hidden": "true" })), hasSlot &&
+            index.h("div", { key: 'e58d050584edd7d56c26bc7edf0a94c0a850f6c6', id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, index.h("slot", { key: 'e6eb0a844540ff3dfab30d8007213776ef222a9c' }))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-chip_3.cjs.entry.js

@@ -273,17 +273,17 @@ const Chip = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'c62bb701a1c1f86a192fb033913fe080568ca998', class: 'chip' }, index.h("div", { key: 'ad5e28f9956e8196be89a1805f6e0cbe7f920b6f', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
+        return (index.h("div", { key: '30a1878b591cd1e28bec6730915e8f15c16446a6', class: 'chip' }, index.h("div", { key: 'fdb77886a913adfe8a09056616114491f1f34d8a', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, index.h("div", { key: 'ac373317983c2981e46411c03613efe5d21b53c5', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, index.h("div", { key: 'ce2b8ffe9349c0d2a233b827b70f7b9f16d2be8b', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            index.h("div", { key: 'fcb947e3479d55ba328017c52ecc977ca08b9508', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            index.h("ifx-indicator", { key: 'd020940bbb686b1092b80fb418c3f3b5b7f763a0', variant: 'number', number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            index.h("div", { key: 'a7fa39998c461851afc9d7b9f8d390dd85cd3d3b', class: 'wrapper__open-button' }, index.h("ifx-icon", { key: 1, icon: `chevron-down-16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
-            index.h("div", { key: 'c0aeb3bca549ba6696ac9ac62ad9860de9867e44', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            index.h("div", { key: 'e689165a99b8692479d0e1e8a18a82da852e7ae4', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            index.h("div", { key: 'cb0f2a113f3773429100d167fc2bcc9f139b3caa', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, index.h("slot", { key: 'fe800e6907110ca6a44a425095911620fbb0b27b' }))));
+            index.h("div", { key: '17ce6143b42a000bba87d8588e7436c11efdff71', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            index.h("ifx-indicator", { key: 'a51e3a699a9808fc33d7185219f363ba8e414a68', variant: 'number', number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            index.h("div", { key: '12dba021a8d5ac23c036efcb4a3ce5e410a60cc6', class: 'wrapper__open-button' }, index.h("ifx-icon", { key: 1, icon: `chevron-down-16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
+            index.h("div", { key: 'c1662da3b221e70e86c6a6f992878942665a5967', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            index.h("div", { key: '2e04731c7ebd83e731b871ac5fff6d516b866acc', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, index.h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            index.h("div", { key: 'aca1b06665a5bf285a4be04d9fc76a2441c36dd9', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, index.h("slot", { key: 'e49145310bfe71466274aae0e898c23be25ff58b' }))));
     }
     get chip() { return index.getElement(this); }
     static get watchers() { return {
@@ -355,9 +355,9 @@ const ChipItem = class {
         this.handleSelectedState();
     }
     render() {
-        return (index.h("div", { key: '7ceff18d0a41b419a188d925fd854cc97d7a9ecd', class: `chip-item chip-item--${this.chipState.size} 
+        return (index.h("div", { key: 'c8c38d43195149c6f8b3c9213d1f510a3a6dc2f2', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            index.h("ifx-checkbox", { key: 'd2f717951d288aa0863081e54cabf7edd1c6f7e6', checked: this.selected, tabIndex: -1, size: 's' }), index.h("div", { key: 'fff335d9009c93863012f6a4307ed4322413c4f7', class: 'chip-item__label' }, " ", index.h("slot", { key: 'a093e9caf2eecba28c58674dde3f788be1f5849b' }), " "), index.h("div", { key: 'ea76c6b3d0bdd2a687acfbe323ebd9e6d6034a40', class: 'chip-item__selected-indicator' }, index.h("ifx-icon", { key: '5d0ae125cb1ea0297d81d773c9981bd13f0c5759', icon: 'check-16' }, " "))));
+            index.h("ifx-checkbox", { key: '8244c0df2c66fa5425818080e0fe6662e7b08645', checked: this.selected, tabIndex: -1, size: 's' }), index.h("div", { key: 'edb6e6d9ffc8b17eabcd36438c004e0d33f2383c', class: 'chip-item__label' }, " ", index.h("slot", { key: '9b0a97c36a44d8ba4d04f73f69e926e61d21a571' }), " "), index.h("div", { key: 'c0aaab015fcbbe6620b9d04f32d9c3374f1209f2', class: 'chip-item__selected-indicator' }, index.h("ifx-icon", { key: '11776f5c57a74eec0f5f8e3c3730fa492caaac23', icon: 'check-16' }, " "))));
     }
     get chipItem() { return index.getElement(this); }
     static get watchers() { return {
@@ -528,7 +528,7 @@ const Pagination = class {
         this.initPagination();
     }
     render() {
-        return (index.h("div", { key: '14f71cd0291d0b01d3b9da91ecec8d3908796107', class: "container" }, index.h("div", { key: 'd28f3b1a05cd937eec0efa30b661c1e5671542d3', class: "items__per-page-wrapper" }, index.h("div", { key: '504286b0c1d4d1a77e283612389e2f0a98f76ce3', class: "items__per-page-label" }, "Results per Page"), index.h("div", { key: '61fb210192777dc3ebf7810f0d311eae2abd3dc3', class: "items__per-page-field" }, index.h("ifx-select", { key: 'a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), index.h("div", { key: '72e40aa84cb9ba69cb4fcbe8d057cf8c6067ac13', class: "items__total-wrapper" }, index.h("div", { key: 'bf3777a0d9c82cda57125b8bab4a1cdb49f1cfb2', class: "pagination" }, index.h("ifx-icon-button", { key: '1041953d7d5e7703e7f2af21f9724ffd01af950f', class: "prev", icon: "arrow-left-16", "aria-label": 'Previous Page', onClick: () => this.changePage(this.internalPage - 1) }), index.h("ol", { key: '160b31ae8e82368c888aba5bada15d4ed715aa1f' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (index.h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, index.h("a", { href: "javascript:void(0)" }, page))) : (index.h("li", { class: "ellipsis", key: `ellipsis-${i}` }, index.h("span", null, "..."))))), index.h("ifx-icon-button", { key: '6f27ec1678f20be69f6ce8d6b4914b72f066ea2c', class: "next", icon: "arrow-right-16", "aria-label": 'Next Page', onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (index.h("div", { key: 'b2028a16a7390336330e8838e6c43fba67c81655', class: "container" }, index.h("div", { key: '4ddc7c973d8800c68aea3a0e7d215f34c2f75bc4', class: "items__per-page-wrapper" }, index.h("div", { key: 'bbf6a9cfd3f7a62521d4f0963826c7d628a03f45', class: "items__per-page-label" }, "Results per Page"), index.h("div", { key: 'e0d94361d7d3a9772d1841420c14f4f45fb936cf', class: "items__per-page-field" }, index.h("ifx-select", { key: 'cff446337baf432025042c8c0787a67d18f3bfe3', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), index.h("div", { key: 'ba9fa41879de87ebb961273b1b6a3638c710988b', class: "items__total-wrapper" }, index.h("div", { key: '71cee88905576b29265784f2aa8266e7b903fac8', class: "pagination" }, index.h("ifx-icon-button", { key: 'b8a9e827b7901bd7af91bc66f026362af7985af7', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), index.h("ol", { key: 'a3a5bc1b0e9aba3de29d9a459bd7f8fc730c979a' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (index.h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, index.h("a", { href: "javascript:void(0)" }, page))) : (index.h("li", { class: "ellipsis", key: `ellipsis-${i}` }, index.h("span", null, "..."))))), index.h("ifx-icon-button", { key: 'ffd1e5695dbc22c4443a5236879ee9b0c0e8a88b', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {