@infineon/infineon-design-system-stencil 31.0.0--canary.1697.223df0ff1431a5398fd1261ed013c9dd2a89e7a0.0 → 31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.0

package/dist/collection/components/text-field/text-field.stories.js

@@ -4,43 +4,145 @@ export default {
     title: 'Components/Text Field',
     // tags: ['autodocs'],
     args: {
+        label: 'Label',
+        error: false,
         disabled: false,
         size: 'm',
+        icon: 'c-info-16',
         success: false,
-        label: 'Label',
         placeholder: 'Placeholder',
-        error: false,
         caption: 'Caption',
         required: true,
         optional: false,
-        icon: 'c-info-16',
         name: 'text-field',
-        showDeleteIcon: false
+        showDeleteIcon: false,
+        maxlength: '',
+        value: '',
     },
     argTypes: {
+        label: {
+            name: 'Label of Text Field',
+            description: 'The text label displayed above the *<ifx-text-field>*.',
+            table: {
+                category: 'story controls',
+            }
+        },
+        error: {
+            description: 'Indicates an error state for the text field.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the text field.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
         size: {
             description: 'Size options: s (36px) and m (40px) - default: m',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         icon: {
+            description: 'Specifies an icon to display within the text field.',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            control: 'select',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: 'c-info-16'
+                }
+            }
+        },
+        success: {
+            description: 'Indicates a successful state for the text field.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        placeholder: {
+            description: 'Displays a placeholder text inside the text field when it is empty.',
+            table: {
+                category: 'ifx-text-field props',
+            }
+        },
+        caption: {
+            description: 'Text displayed below the text field to provide additional information.',
+            table: {
+                category: 'ifx-text-field props',
+            }
+        },
+        required: {
+            description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to **true**.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        optional: {
+            description: 'Indicates that the field is optional.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-text-field props',
+            }
+        },
+        showDeleteIcon: {
+            description: 'Displays a delete icon inside the text field when set to **true**, allowing user to clear the input content.',
+            table: {
+                category: 'ifx-text-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         maxlength: {
-            description: 'Maximum input length',
-            control: { type: 'number' }
+            description: 'Specifies the maximum number of characters that can be entered into the text field.',
+            control: 'number',
+            table: {
+                category: 'ifx-text-field props',
+            }
         },
-        showDeleteIcon: {
-            description: 'Show the delete icon'
+        value: {
+            description: 'The value of the text field. It is used for the form submission.',
+            control: 'text',
+            table: {
+                category: 'ifx-text-field props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
         ifxInput: {
             action: 'ifxInput',
-            description: 'Custom event',
+            description: 'Custom event emitted on input change.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
@@ -49,7 +151,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {
+const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value }) => {
     const element = document.createElement('ifx-text-field');
     element.setAttribute('error', error);
     element.setAttribute('disabled', disabled);
@@ -62,6 +164,7 @@ const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, c
     element.setAttribute('optional', optional);
     element.setAttribute('name', name);
     element.setAttribute('show-delete-icon', showDeleteIcon);
+    element.setAttribute('value', value);
     if (maxlength)
         element.setAttribute('maxlength', maxlength);
     element.addEventListener('ifxInput', action('ifxInput'));

package/dist/collection/components/text-field/text-field.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.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/Text Field',\n  // tags: ['autodocs'],\n\n  args: {\n    disabled: false,\n    size: 'm',\n    success: false,\n    label: 'Label',\n    placeholder: 'Placeholder',\n    error: false,\n    caption: 'Caption',\n    required: true,\n    optional: false,\n    icon: 'c-info-16',\n    name: 'text-field',\n    showDeleteIcon: false\n  },\n\n  argTypes: {\n    size: {\n      description: 'Size options: s (36px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    maxlength: {\n      description: 'Maximum input length',\n      control: {type: 'number'}\n    },\n    showDeleteIcon: {\n      description: 'Show the delete icon'\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'Custom event',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon }) => {\n  const element = document.createElement('ifx-text-field');\n  element.setAttribute('error', error);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('size', size);\n  element.setAttribute('icon', icon);\n  element.setAttribute('success', success);\n  element.setAttribute('placeholder', placeholder);\n  element.setAttribute('caption', caption);\n  element.setAttribute('required', required);\n  element.setAttribute('optional', optional);\n  element.setAttribute('name', name);\n  element.setAttribute('show-delete-icon', showDeleteIcon);\n  if (maxlength) element.setAttribute('maxlength', maxlength);\n\n  element.addEventListener('ifxInput', action('ifxInput'));\n\n\n  const slotContent = document.createTextNode(label);\n  element.appendChild(slotContent);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.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/Text Field',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Label',\n    error: false,\n    disabled: false,\n    size: 'm',\n    icon: 'c-info-16',\n    success: false,\n    placeholder: 'Placeholder',\n    caption: 'Caption',\n    required: true,\n    optional: false,\n    name: 'text-field',\n    showDeleteIcon: false,\n    maxlength: '',\n    value: '',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Text Field',\n      description: 'The text label displayed above the *<ifx-text-field>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    error: {\n      description: 'Indicates an error state for the text field.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the text field.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    size: {\n      description: 'Size options: s (36px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: 'radio',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    icon: {\n      description: 'Specifies an icon to display within the text field.',\n      options: Object.values(icons).map(i => i['name']),\n      control: 'select',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: 'c-info-16'\n        }\n      }\n    },\n    success: {\n      description: 'Indicates a successful state for the text field.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    placeholder: {\n      description: 'Displays a placeholder text inside the text field when it is empty.',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    caption: {\n      description: 'Text displayed below the text field to provide additional information.',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    required: {\n      description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to **true**.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    optional: {\n      description: 'Indicates that the field is optional.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    showDeleteIcon: {\n      description: 'Displays a delete icon inside the text field when set to **true**, allowing user to clear the input content.',\n      table: {\n        category: 'ifx-text-field props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    maxlength: {\n      description: 'Specifies the maximum number of characters that can be entered into the text field.',\n      control: 'number',\n      table: {\n        category: 'ifx-text-field props',\n      }\n    },\n    value: {\n      description: 'The value of the text field. It is used for the form submission.',\n      control: 'text',\n      table: {\n        category: 'ifx-text-field props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'Custom event emitted on input change.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value }) => {\n  const element = document.createElement('ifx-text-field');\n  element.setAttribute('error', error);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('size', size);\n  element.setAttribute('icon', icon);\n  element.setAttribute('success', success);\n  element.setAttribute('placeholder', placeholder);\n  element.setAttribute('caption', caption);\n  element.setAttribute('required', required);\n  element.setAttribute('optional', optional);\n  element.setAttribute('name', name);\n  element.setAttribute('show-delete-icon', showDeleteIcon);\n  element.setAttribute('value', value);\n  if (maxlength) element.setAttribute('maxlength', maxlength);\n\n  element.addEventListener('ifxInput', action('ifxInput'));\n\n\n  const slotContent = document.createTextNode(label);\n  element.appendChild(slotContent);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -129,9 +129,7 @@ export default {
             },
         },
         ifxInput: {
-            description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.\n
-	event.detail: string
-			`,
+            description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,
             table: {
                 category: 'custom events',
                 type: {

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption:'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \n*Note: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.*`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.\\n\n\tevent.detail: string\n\t\t\t`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/*handle input*/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}
+{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption: 'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \n*Note: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.*`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/*handle input*/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}

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

@@ -10,19 +10,63 @@ export default {
         icon: 'c-info-24',
     },
     argTypes: {
+        text: {
+            description: 'Defines the main content of the tooltip.',
+            control: 'text',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         icon: {
+            description: 'The icon to be displayed. This control is only applicable when the variant is set to ***extended***.',
             options: Object.values(icons).map(i => i['name']),
-            control: { type: 'select' },
+            control: 'select',
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string',
+                    defaultValue: {
+                        summary: 'c-info-24'
+                    }
+                }
+            }
         },
         position: {
+            description: 'Determines the position of the tooltip relative to the reference element.',
             options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],
-            control: { type: 'radio' },
+            control: 'radio',
+            table: {
+                category: 'ifx-tooltip props',
+                defaultValue: {
+                    summary: 'auto'
+                }
+            }
         },
         variant: {
+            description: 'Sets the style variant of the tooltip.',
+            control: 'radio',
             options: ['compact', 'dismissible', 'extended'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-tooltip props',
+                defaultValue: {
+                    summary: 'compact'
+                }
+            }
+        },
+        header: {
+            description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to ***dismissible*** or ***extended***.',
+            control: 'text',
+            if: { arg: 'variant', neq: 'compact' },
+            table: {
+                category: 'ifx-tooltip props',
+                type: {
+                    summary: 'string'
+                }
+            }
         },
-        header: { control: 'text', if: { arg: 'variant', neq: 'compact' } },
     },
 };
 const DefaultTemplate = ({ header, text, variant, position, icon }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,MAAM,EAAE,kBAAkB;QAC1B,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,WAAW;KAClB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;YACzG,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,CAAC;YAC/C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;KACpE;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACtD,IAAI,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,UAAU,EAAE,CAAC;QACxD,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACzC,CAAC;IACD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC/E,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEnC,OAAO,CAAC,WAAW,GAAG,8CAA8C,OAAO,KAAG,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,wCAAwC;IAE9J,OAAO,OAAO,CAAC;AACjB,CAAC,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/Tooltip',\n  tags: ['autodocs'],\n  args: {\n    header: 'Tooltip headline',\n    text: \"Hi, I'm a tooltip\",\n    position: 'auto',\n    variant: 'compact',\n    icon: 'c-info-24',\n  },\n  argTypes: {\n    icon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    position: {\n      options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['compact', 'dismissible', 'extended'],\n      control: { type: 'radio' },\n    },\n    header: { control: 'text', if: { arg: 'variant', neq: 'compact' } },\n  },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n  const element = document.createElement('ifx-tooltip');\n  if (variant === 'dismissible' || variant === 'extended') {\n    element.setAttribute('header', header);\n  }\n  element.setAttribute('text', text);\n  element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n  element.setAttribute('position', position);\n  element.setAttribute('icon', icon);\n\n  element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Tooltip',\n  tags: ['autodocs'],\n  args: {\n    header: 'Tooltip headline',\n    text: \"Hi, I'm a tooltip\",\n    position: 'auto',\n    variant: 'compact',\n    icon: 'c-info-24',\n  },\n  argTypes: {\n    text: {\n      description: 'Defines the main content of the tooltip.',\n      control: 'text',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    icon: {\n      description: 'The icon to be displayed. This control is only applicable when the variant is set to ***extended***.',\n      options: Object.values(icons).map(i => i['name']),\n      control: 'select',\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string',\n          defaultValue: {\n            summary: 'c-info-24'\n          }\n        }\n      }\n    },\n    position: {\n      description: 'Determines the position of the tooltip relative to the reference element.',\n      options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n      control: 'radio',\n      table: {\n        category: 'ifx-tooltip props',\n        defaultValue: {\n          summary: 'auto'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the tooltip.',\n      control: 'radio',\n      options: ['compact', 'dismissible', 'extended'],\n      table: {\n        category: 'ifx-tooltip props',\n        defaultValue: {\n          summary: 'compact'\n        }\n      }\n    },\n    header: {\n      description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to ***dismissible*** or ***extended***.',\n      control: 'text', \n      if: { arg: 'variant', neq: 'compact' },\n      table: {\n        category: 'ifx-tooltip props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon }) => {\n  const element = document.createElement('ifx-tooltip');\n  if (variant === 'dismissible' || variant === 'extended') {\n    element.setAttribute('header', header);\n  }\n  element.setAttribute('text', text);\n  element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n  element.setAttribute('position', position);\n  element.setAttribute('icon', icon);\n\n  element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

@@ -1,4 +1,4 @@
-import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-ff48962a.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-6d09225b.js';
 
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-accordion.js

@@ -1,4 +1,4 @@
-import { A as Accordion, d as defineCustomElement$1 } from './p-654ff7d8.js';
+import { A as Accordion, d as defineCustomElement$1 } from './p-8b04d988.js';
 
 const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-alert.js

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
-import { d as defineCustomElement$2 } from './p-828bbb25.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-434f667f.js';
+import { d as defineCustomElement$2 } from './p-d2bece93.js';
 
 const alertCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:var(--ifx-font-family);box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}";
 const IfxAlertStyle0 = alertCss;

package/dist/components/ifx-badge.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const badgeCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.badge__container{display:inline-flex;justify-content:center;align-items:center;padding:4px 8px;gap:8px;border:1px solid #EEEDED;background-color:#EEEDED;border-radius:100px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
 const IfxBadgeStyle0 = badgeCss;

package/dist/components/ifx-basic-table.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-434f667f.js';
 import { c as createGrid } from './p-1429e9ea.js';
 import { c as classNames } from './p-5cdc6210.js';
 

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
-import { d as defineCustomElement$2 } from './p-828bbb25.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-434f667f.js';
+import { d as defineCustomElement$2 } from './p-d2bece93.js';
 
 const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
 const IfxBreadcrumbItemLabelStyle0 = breadcrumbItemLabelCss;
@@ -18,13 +18,13 @@ const BreadcrumbItemLabel = /*@__PURE__*/ proxyCustomElement(class BreadcrumbIte
         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" }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbItemLabelStyle0; }
 }, [1, "ifx-breadcrumb-item-label", {
         "icon": [1],
-        "url": [1],
+        "href": [1],
         "target": [1]
     }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;IALhC;;;;;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,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;KACjD;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IACzF,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzD,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,EACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","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":"ifx-breadcrumb-item-label.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,swBAAswB,CAAC;AACtyB,qCAAe,sBAAsB;;MCMxB,mBAAmB;IALhC;;;;;QAQU,WAAM,GAAW,OAAO,CAAA;KAuBjC;IAnBC,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;KACjD;IAED,MAAM;QACJ,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,IAC1F,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,iBAAc,MAAM,GAAY,EACzD,6DAAM,KAAK,EAAC,eAAe,IACzB,8DAAQ,CACH,EACR,6DAAM,KAAK,EAAC,mBAAmB,gBAAY,MAAM,IAChD,iEAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace100;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.margin {\n    margin-left: 16px;\n  }\n\n  & ifx-icon:empty {\n    display: none;\n  }\n\n  & .label-icon-wrapper {\n    display: inline-flex;\n  }\n\n  & .menu-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n\n    &.hide {\n      display: none;\n    }\n\n    & ifx-icon {\n      transition: .3s;\n    }\n\n    &.show {\n      & ifx-icon {\n        transition: .3s;\n        transform: rotate(180deg);\n      }\n    }\n  }\n}","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"],"version":3}

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";
 const IfxBreadcrumbItemStyle0 = breadcrumbItemCss;

package/dist/components/ifx-breadcrumb.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
 const IfxBreadcrumbStyle0 = breadcrumbCss;
@@ -27,15 +27,15 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
                     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' }))));
     }
     get el() { return this; }
     static get style() { return IfxBreadcrumbStyle0; }

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

@@ -1 +1 @@
-{"file":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,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;wBACjE,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;qBACpF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","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":"ifx-breadcrumb.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8QAA8Q,CAAC;AACrS,4BAAe,aAAa;;MCMf,UAAU;;;;;;IAGrB,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC;KAC/C;IAEO,+BAA+B,CAAC,OAAoB;QAC1D,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YACnC,OAAO;SACR;QAED,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAG,IAAI,EAAE;YACP,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAE3C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC7C,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;gBAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,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;wBAClE,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC,CAAC;qBACrF;iBACF;aACF;SACF;KACF;IAED,MAAM;QACJ,QACE,0EAAgB,4BAA4B,IAC1C,2DAAI,KAAK,EAAC,YAAY,IACpB,8DAAQ,CACL,CACD,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.breadcrumb {\n  list-style: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  flex-direction: row;\n  font-family: var(--ifx-font-family);\n  font-size: tokens.$ifxFontSizeS;\n  align-items: flex-start;\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n//   color: tokens.$ifxColorEngineering300;\n//   margin: 0 16px;\n// }","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"],"version":3}

package/dist/components/ifx-button.js

@@ -1,4 +1,4 @@
-import { B as Button, d as defineCustomElement$1 } from './p-5bc6d67d.js';
+import { B as Button, d as defineCustomElement$1 } from './p-c344fb60.js';
 
 const IfxButton = Button;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-card-headline.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const cardHeadlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__headline-wrapper{padding-bottom:16px}.card__headline-wrapper.withDesc{padding-bottom:8px}.card-headline{margin-top:0;padding-top:0;font-family:var(--ifx-font-family);font-weight:600;font-size:1.5rem;line-height:2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.card-headline.horizontal{font-size:1.25rem;line-height:28px}";
 const IfxCardHeadlineStyle0 = cardHeadlineCss;

package/dist/components/ifx-card-image.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-434f667f.js';
 
 const cardImageCss = ".card-image{width:100%;height:100%;vertical-align:bottom;object-fit:cover}";
 const IfxCardImageStyle0 = cardImageCss;

package/dist/components/ifx-card-links.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const cardLinksCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.container{display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:#1D1D1D;padding:0px 24px 24px 24px;word-wrap:break-word;overflow-wrap:anywhere;}.container:hover{cursor:initial}";
 const IfxCardLinksStyle0 = cardLinksCss;

package/dist/components/ifx-card-overline.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const cardOverlineCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}";
 const IfxCardOverlineStyle0 = cardOverlineCss;

package/dist/components/ifx-card-text.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h } from './p-434f667f.js';
 
 const cardTextCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{pointer-events:none}.card__text-wrapper{padding-bottom:0px}.card__text-wrapper.hasBtn{padding-bottom:16px}.card-text{line-height:1.5rem;font-size:1rem;font-weight:400;white-space:wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}";
 const IfxCardTextStyle0 = cardTextCss;

package/dist/components/ifx-card.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-434f667f.js';
 
 const cardCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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;

package/dist/components/ifx-checkbox.js

@@ -1,4 +1,4 @@
-import { C as Checkbox, d as defineCustomElement$1 } from './p-6fd6d1a9.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-23308a28.js';
 
 const IfxCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-e57d6c00.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-c5056a89.js';
 
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-0fce434b.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-9c4bd9ce.js';
 
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-content-switcher-item.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-434f667f.js';
 
 const contentSwitcherItemCss = ".ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:\"Source Sans 3\";font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0A8276;background-color:#FFFFFF;border:3px solid #0A8276}.ifx-content-switcher-item:hover{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C;cursor:pointer}.ifx-content-switcher-item:active{color:#08665C;background-color:#FFFFFF;border:3px solid #06534B}.ifx-content-switcher-item:focus{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C}";
 const IfxContentSwitcherItemStyle0 = contentSwitcherItemCss;

package/dist/components/ifx-content-switcher.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-3ee20ed5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-434f667f.js';
 
 const contentSwitcherCss = ".ifx-content-switcher{background-color:#FFFFFF;border:1px solid #BFBBBB;border-radius:9999px;height:36px;width:fit-content;box-sizing:border-box;display:flex;flex-direction:row;align-items:center}.ifx-content-switcher ::slotted(ifx-content-switcher-item){position:relative}.ifx-content-switcher ::slotted(ifx-content-switcher-item:first-child){left:-1px;margin-right:-1px}.ifx-content-switcher ::slotted(ifx-content-switcher-item:last-child){right:-1px;margin-left:-1px}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider){width:1px;height:20px;background-color:#8D8786;margin:0px 1px;visibility:visible}.ifx-content-switcher ::slotted(.ifx-content-switcher-divider.hidden){visibility:hidden}";
 const IfxContentSwitcherStyle0 = contentSwitcherCss;