@infineon/infineon-design-system-stencil 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0 → 30.9.3--canary.1640.e9ef59f97cf624f94f0207779497ed5e51e1ed11.0

package/dist/types/components/tabs/tabs.stories.d.ts

@@ -2,50 +2,130 @@ declare const _default: {
     title: string;
     tags: string[];
     component: string;
+    args: {
+        amountOfTabs: number;
+        orientation: string;
+        icon: string;
+        header: string;
+        disabled: boolean;
+        fullWidth: boolean;
+    };
     argTypes: {
         amountOfTabs: {
             name: string;
             control: string;
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
         };
         orientation: {
-            name: string;
             options: string[];
             control: {
                 type: string;
             };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
         };
         icon: {
             name: string;
             control: {
                 type: string;
             };
+            options: any[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
         };
         fullWidth: {
-            name: string;
             control: {
                 type: string;
             };
             description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
         };
         iconPosition: {
-            name: string;
             options: string[];
             control: {
                 type: string;
             };
-            if: {
-                arg: string;
-                eq: boolean;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
             };
         };
         activeTabIndex: {
-            name: string;
             description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        header: {
+            control: string;
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
         };
-        ifxTabChange: {
+        ifxChange: {
             action: string;
             description: string;
             table: {
+                category: string;
                 type: {
                     summary: string;
                     detail: string;
@@ -56,4 +136,3 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const Disabled: any;

package/dist/types/components/tag/tag.stories.d.ts

@@ -6,11 +6,31 @@ declare const _default: {
         icon: string;
     };
     argTypes: {
+        label: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
         icon: {
             options: any[];
             control: {
                 type: string;
             };
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
         };
     };
 };

package/dist/types/components/text-field/text-field.stories.d.ts

@@ -1,49 +1,145 @@
 declare const _default: {
     title: string;
     args: {
+        label: string;
+        error: boolean;
         disabled: boolean;
         size: string;
+        icon: string;
         success: boolean;
-        label: string;
         placeholder: string;
-        error: boolean;
         caption: string;
         required: boolean;
         optional: boolean;
-        icon: string;
         name: string;
         showDeleteIcon: boolean;
+        maxlength: string;
+        value: string;
     };
     argTypes: {
+        label: {
+            name: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        error: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        disabled: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
         size: {
             description: string;
             options: string[];
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         icon: {
+            description: string;
             options: any[];
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        success: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        placeholder: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        caption: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        required: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        optional: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
             };
         };
         name: {
             description: string;
+            table: {
+                category: string;
+            };
+        };
+        showDeleteIcon: {
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
         };
         maxlength: {
             description: string;
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
             };
         };
-        showDeleteIcon: {
+        value: {
             description: string;
+            control: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
         };
         ifxInput: {
             action: string;
             description: string;
             table: {
+                category: string;
                 type: {
                     summary: string;
                     detail: string;

package/dist/types/components/tooltip/tooltip.stories.d.ts

@@ -9,30 +9,65 @@ declare const _default: {
         icon: string;
     };
     argTypes: {
+        text: {
+            description: string;
+            control: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
         icon: {
+            description: string;
             options: any[];
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                    defaultValue: {
+                        summary: string;
+                    };
+                };
             };
         };
         position: {
+            description: string;
             options: string[];
-            control: {
-                type: string;
+            control: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         variant: {
+            description: string;
+            control: string;
             options: string[];
-            control: {
-                type: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
             };
         };
         header: {
+            description: string;
             control: string;
             if: {
                 arg: string;
                 neq: string;
             };
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
         };
     };
 };

package/dist/types/components.d.ts

@@ -24,7 +24,7 @@ export namespace Components {
         "autoCollapse": boolean;
     }
     interface IfxAccordionItem {
-        "AriaLive": number;
+        "AriaLevel": number;
         "caption": string;
         "open": boolean;
     }
@@ -47,9 +47,9 @@ export namespace Components {
     interface IfxBreadcrumbItem {
     }
     interface IfxBreadcrumbItemLabel {
+        "href": string;
         "icon": string;
         "target": string;
-        "url": string;
     }
     interface IfxButton {
         "AriaLabel": string;
@@ -436,7 +436,6 @@ export namespace Components {
         "numberIndicator": string;
         "setActiveClasses": () => Promise<void>;
         "target": string;
-        "value": string;
     }
     interface IfxSidebarTitle {
     }
@@ -462,7 +461,7 @@ export namespace Components {
     }
     interface IfxStatus {
         "border": boolean;
-        "color": 'engineering-100' | 'engineering-200' | 'engineering-300' | 'engineering-400' | 'engineering-500' | 'engineering-600' | 'ocean-100' | 'ocean-200' | 'ocean-300' | 'ocean-400' | 'ocean-500' | 'ocean-600' | 'ocean-700' | 'red-500' | 'red-600' | 'red-700' | 'orange-500' | 'green-500' | 'lawn-400' | 'lawn-500' | 'lawn-700' | 'berry-400' | 'berry-500' | 'sun-400' | 'sun-500' | 'sand-400' | 'sand-500';
+        "color": 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry';
         "label": string;
     }
     interface IfxStep {
@@ -716,8 +715,8 @@ declare global {
         new (): HTMLIfxAccordionElement;
     };
     interface HTMLIfxAccordionItemElementEventMap {
-        "ifxItemOpen": any;
-        "ifxItemClose": any;
+        "ifxOpen": any;
+        "ifxClose": any;
     }
     interface HTMLIfxAccordionItemElement extends Components.IfxAccordionItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxAccordionItemElementEventMap>(type: K, listener: (this: HTMLIfxAccordionItemElement, ev: IfxAccordionItemCustomEvent<HTMLIfxAccordionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -862,7 +861,7 @@ declare global {
         new (): HTMLIfxCheckboxElement;
     };
     interface HTMLIfxChipElementEventMap {
-        "ifxChipChange": { previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string };
+        "ifxChange": { previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string };
     }
     interface HTMLIfxChipElement extends Components.IfxChip, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxChipElementEventMap>(type: K, listener: (this: HTMLIfxChipElement, ev: IfxChipCustomEvent<HTMLIfxChipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1169,8 +1168,8 @@ declare global {
         new (): HTMLIfxListEntryElement;
     };
     interface HTMLIfxModalElementEventMap {
-        "ifxModalOpen": any;
-        "ifxModalClose": any;
+        "ifxOpen": any;
+        "ifxClose": any;
     }
     interface HTMLIfxModalElement extends Components.IfxModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxModalElementEventMap>(type: K, listener: (this: HTMLIfxModalElement, ev: IfxModalCustomEvent<HTMLIfxModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1188,7 +1187,7 @@ declare global {
     };
     interface HTMLIfxMultiselectElementEventMap {
         "ifxSelect": any;
-        "ifxMultiselectIsOpen": any;
+        "ifxOpen": any;
     }
     interface HTMLIfxMultiselectElement extends Components.IfxMultiselect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxMultiselectElementEventMap>(type: K, listener: (this: HTMLIfxMultiselectElement, ev: IfxMultiselectCustomEvent<HTMLIfxMultiselectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1264,8 +1263,6 @@ declare global {
     };
     interface HTMLIfxPaginationElementEventMap {
         "ifxPageChange": any;
-        "ifxNextPage": any;
-        "ifxPrevPage": any;
     }
     interface HTMLIfxPaginationElement extends Components.IfxPagination, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxPaginationElementEventMap>(type: K, listener: (this: HTMLIfxPaginationElement, ev: IfxPaginationCustomEvent<HTMLIfxPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1306,7 +1303,7 @@ declare global {
     };
     interface HTMLIfxSearchBarElementEventMap {
         "ifxInput": any;
-        "ifxSearchBarIsOpen": any;
+        "ifxOpen": any;
     }
     interface HTMLIfxSearchBarElement extends Components.IfxSearchBar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxSearchBarElementEventMap>(type: K, listener: (this: HTMLIfxSearchBarElement, ev: IfxSearchBarCustomEvent<HTMLIfxSearchBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1532,7 +1529,7 @@ declare global {
         new (): HTMLIfxTableElement;
     };
     interface HTMLIfxTabsElementEventMap {
-        "ifxTabChange": any;
+        "ifxChange": any;
     }
     interface HTMLIfxTabsElement extends Components.IfxTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxTabsElementEventMap>(type: K, listener: (this: HTMLIfxTabsElement, ev: IfxTabsCustomEvent<HTMLIfxTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1676,10 +1673,10 @@ declare namespace LocalJSX {
         "autoCollapse"?: boolean;
     }
     interface IfxAccordionItem {
-        "AriaLive"?: number;
+        "AriaLevel"?: number;
         "caption"?: string;
-        "onIfxItemClose"?: (event: IfxAccordionItemCustomEvent<any>) => void;
-        "onIfxItemOpen"?: (event: IfxAccordionItemCustomEvent<any>) => void;
+        "onIfxClose"?: (event: IfxAccordionItemCustomEvent<any>) => void;
+        "onIfxOpen"?: (event: IfxAccordionItemCustomEvent<any>) => void;
         "open"?: boolean;
     }
     interface IfxAlert {
@@ -1702,10 +1699,10 @@ declare namespace LocalJSX {
     interface IfxBreadcrumbItem {
     }
     interface IfxBreadcrumbItemLabel {
+        "href"?: string;
         "icon"?: string;
         "onBreadcrumbMenuIconWrapper"?: (event: IfxBreadcrumbItemLabelCustomEvent<CustomEvent>) => void;
         "target"?: string;
-        "url"?: string;
     }
     interface IfxButton {
         "AriaLabel"?: string;
@@ -1749,7 +1746,7 @@ declare namespace LocalJSX {
     }
     interface IfxChip {
         "AriaLabel"?: string;
-        "onIfxChipChange"?: (event: IfxChipCustomEvent<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>) => void;
+        "onIfxChange"?: (event: IfxChipCustomEvent<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>) => void;
         "placeholder"?: string;
         "readOnly"?: boolean;
         "size"?: 'small' | 'large';
@@ -1893,8 +1890,8 @@ declare namespace LocalJSX {
         "caption"?: string;
         "closeOnOverlayClick"?: boolean;
         "okButtonLabel"?: string;
-        "onIfxModalClose"?: (event: IfxModalCustomEvent<any>) => void;
-        "onIfxModalOpen"?: (event: IfxModalCustomEvent<any>) => void;
+        "onIfxClose"?: (event: IfxModalCustomEvent<any>) => void;
+        "onIfxOpen"?: (event: IfxModalCustomEvent<any>) => void;
         "opened"?: boolean;
         "showCloseButton"?: boolean;
         "size"?: 's' | 'm' | 'l';
@@ -1908,7 +1905,7 @@ declare namespace LocalJSX {
         "label"?: string;
         "maxItemCount"?: number;
         "name"?: string;
-        "onIfxMultiselectIsOpen"?: (event: IfxMultiselectCustomEvent<any>) => void;
+        "onIfxOpen"?: (event: IfxMultiselectCustomEvent<any>) => void;
         "onIfxSelect"?: (event: IfxMultiselectCustomEvent<any>) => void;
         "options"?: any[] | string;
         "placeholder"?: string;
@@ -1954,9 +1951,7 @@ declare namespace LocalJSX {
     }
     interface IfxPagination {
         "currentPage"?: number;
-        "onIfxNextPage"?: (event: IfxPaginationCustomEvent<any>) => void;
         "onIfxPageChange"?: (event: IfxPaginationCustomEvent<any>) => void;
-        "onIfxPrevPage"?: (event: IfxPaginationCustomEvent<any>) => void;
         "total"?: number;
     }
     interface IfxProgressBar {
@@ -1978,7 +1973,7 @@ declare namespace LocalJSX {
         "isOpen"?: boolean;
         "maxlength"?: number;
         "onIfxInput"?: (event: IfxSearchBarCustomEvent<any>) => void;
-        "onIfxSearchBarIsOpen"?: (event: IfxSearchBarCustomEvent<any>) => void;
+        "onIfxOpen"?: (event: IfxSearchBarCustomEvent<any>) => void;
         "value"?: string;
     }
     interface IfxSearchField {
@@ -2086,7 +2081,6 @@ declare namespace LocalJSX {
         "onIfxSidebarMenu"?: (event: IfxSidebarItemCustomEvent<any>) => void;
         "onIfxSidebarNavigationItem"?: (event: IfxSidebarItemCustomEvent<any>) => void;
         "target"?: string;
-        "value"?: string;
     }
     interface IfxSidebarTitle {
     }
@@ -2113,7 +2107,7 @@ declare namespace LocalJSX {
     }
     interface IfxStatus {
         "border"?: boolean;
-        "color"?: 'engineering-100' | 'engineering-200' | 'engineering-300' | 'engineering-400' | 'engineering-500' | 'engineering-600' | 'ocean-100' | 'ocean-200' | 'ocean-300' | 'ocean-400' | 'ocean-500' | 'ocean-600' | 'ocean-700' | 'red-500' | 'red-600' | 'red-700' | 'orange-500' | 'green-500' | 'lawn-400' | 'lawn-500' | 'lawn-700' | 'berry-400' | 'berry-500' | 'sun-400' | 'sun-500' | 'sand-400' | 'sand-500';
+        "color"?: 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry';
         "label"?: string;
     }
     interface IfxStep {
@@ -2159,7 +2153,7 @@ declare namespace LocalJSX {
     interface IfxTabs {
         "activeTabIndex"?: number;
         "fullWidth"?: boolean;
-        "onIfxTabChange"?: (event: IfxTabsCustomEvent<any>) => void;
+        "onIfxChange"?: (event: IfxTabsCustomEvent<any>) => void;
         "orientation"?: string;
     }
     interface IfxTag {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0",
+  "version": "30.9.3--canary.1640.e9ef59f97cf624f94f0207779497ed5e51e1ed11.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
@@ -50,6 +50,7 @@
     "classnames": "^2.3.2",
     "glob": "^11.0.0",
     "i": "^0.3.7",
+    "lerna": "8.1.9",
     "npm": "^10.2.1",
     "npm-run-all": "^4.1.5",
     "prettier-standalone": "^1.3.1-0"
@@ -86,7 +87,7 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "ncp": "^2.0.0",
-    "puppeteer": "^21.9.0",
+    "puppeteer": "^24.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.78.0",

package/dist/components/p-6613f3b4.js.map

@@ -1 +0,0 @@
-{"file":"p-6613f3b4.js","mappings":"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","names":[],"sources":["src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChipChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChipChange: emitIfxChipChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon={`check${this.chipState.size === 'small' ? '12' : '16'}`}> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}"],"version":3}