@infineon/infineon-design-system-stencil 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.0 → 39.5.2--canary.2093.6587af63bb759a16655a658c28ffa7d521cd4197.0

package/dist/cjs/infineon-design-system-stencil.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dc5gCGlQ.js');
+var index = require('./index-n_pDKBY2.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dc5gCGlQ.js');
+var index = require('./index-n_pDKBY2.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .accordion-item {

package/dist/collection/components/action-list/action-list-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .action-list-item {

package/dist/collection/components/action-list/action-list.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .action-list {

package/dist/collection/components/alert/alert.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .breadcrumb-item-label-container {

package/dist/collection/components/breadcrumb/breadcrumb-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .breadcrumb-parent {

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/button/button.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/card/card-headline/card-headline.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/card/card-links/card-links.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .container {

package/dist/collection/components/card/card-overline/card-overline.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/card/card-text/card-text.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/card/card.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .checkbox-group-container {

package/dist/collection/components/chip/chip-item/chip-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .chip-item {

package/dist/collection/components/chip/chip.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/date-picker/date-picker.css

@@ -41,7 +41,8 @@
   height: 100%;
 }
 .date__picker-input.firefox__classes {
-  padding: 8px 16px;
+  padding: 8px 14px;
+  box-sizing: border-box;
   color: #8D8786;
   font-size: 16px;
   text-transform: uppercase;
@@ -53,6 +54,22 @@
 .date__picker-input.firefox__classes:disabled {
   color: #FFFFFF;
 }
+.date__picker-input.firefox__classes ~ .icon__wrapper:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border: 2px solid #0A8276;
+  border-radius: 15%;
+}
+.date__picker-input.firefox__classes ~ .icon__wrapper::before {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  background-color: #FFFFFF;
+}
 .date__picker-input:focus:not(.error, .success) {
   border-color: #0A8276;
 }
@@ -151,4 +168,5 @@
 }
 .icon__wrapper ifx-icon {
   vertical-align: middle;
+  z-index: 1;
 }

package/dist/collection/components/date-picker/date-picker.js

@@ -45,8 +45,15 @@ export class DatePicker {
     }
     handleInputFocusOnIconClick() {
         const input = this.el.shadowRoot.querySelector('.date__picker-input');
-        if (input) {
-            input.focus();
+        if (!input || this.disabled)
+            return;
+        input.focus();
+        const anyInput = input;
+        if (typeof anyInput.showPicker === 'function') {
+            anyInput.showPicker();
+        }
+        else {
+            input.click();
         }
     }
     getBrowser() {
@@ -93,8 +100,8 @@ export class DatePicker {
     // }
     render() {
         var _a, _b;
-        return (h("div", { key: 'dbb6f430496fefe886885ab005652d412bd30ebf', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '1c2a66b095a48206cf2c9931452964ac7d87dc59', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: '0a754b66e239bae671a8c74ce2e0aa7ad5d47bcf', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '03eedd8172d239cc9bc7ed75a125e2d8213dce5c', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1ed8fb51d42502d703e564e53624b70e45334842', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'f1a55aa2e7ad2c9801b6a04a9a93d5b83fc63dac', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'e8109be168cf4e584350b2fe8cf98a908521eecd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'df37c5fb29c31594720e7e112e18cdbce996942f', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: 'c22af1e6c534c528303ba469198c82e98b0f3543', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '92f55b721ba28d03c44cbd7c41d73f4eb406a0ed', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '6a5b65024fd300a3bc3ca291fc997cdc293469d4', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '1030e1e0b62a4de49eda138244d1948d05004bf5', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1920b870b9bcecf70c1d838e23bbe02a798a4758', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'd99c5a5c0a7b07945aac1e2cb7804bae40fce921', class: "icon__wrapper", role: "button", tabIndex: this.getBrowser() === 'Firefox' ? 0 : undefined, onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '9c033c34dceafd092d384093d6029c86e70f842b', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '12a6a1f1a851b51f5400349ec49c5ecc217a5ec6', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     static get is() { return "ifx-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  // formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      //this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-date-picker', await framework)\n    }\n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"]}
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  // formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      //this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if (!input || this.disabled) return;\n\n    input.focus();\n\n    const anyInput = input as any;\n    if (typeof anyInput.showPicker === 'function') {\n      anyInput.showPicker();\n    } else {\n      input.click();\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-date-picker', await framework)\n    }\n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" tabIndex={ this.getBrowser() === 'Firefox' ? 0 : undefined } onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"]}

package/dist/collection/components/dropdown/dropdown-header/dropdown-header.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .dropdown-header {

package/dist/collection/components/dropdown/dropdown-item/dropdown-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .dropdown-item {

package/dist/collection/components/file-upload/file-upload.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/footer/footer-column.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .col {

package/dist/collection/components/footer/footer.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {
@@ -107,7 +107,7 @@
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: #1D1D1D;
+  color: #575352;
   flex-grow: 1;
 }
 .footer__container .footer__wrapper .footer__base .footer__info > ::slotted([slot=info]) {

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

@@ -3,7 +3,7 @@ export default {
     title: 'Components/Footer',
     tags: ['autodocs'],
     args: {
-        copyrightText: '© 1999 - 2024 Infineon Technologies AG',
+        copyrightText: '© 1999 - 2026 Infineon Technologies AG',
         href: 'http://infineon.com',
         icon: 'home-16',
         ariaLabelOfLink: 'Go to Homepage',
@@ -52,9 +52,6 @@ const DefaultTemplate = args => {
     return `
     <ifx-footer copyright-text="${args.copyrightText}">
     <div slot="socials">
-    <ifx-link variant="title" href="${args.href}" aria-label="${args.ariaLabelOfLink}">
-        <ifx-icon icon=${args.icon}></ifx-icon>
-      </ifx-link>
       <ifx-link variant="title" href="http://facebook.com/infineon" aria-label="Follow us on Facebook">
         <ifx-icon icon="facebook"></ifx-icon>
       </ifx-link>
@@ -95,31 +92,31 @@ const LargeTemplate = args => {
   <ifx-footer copyright-text="${args.copyrightText}">
   <ifx-footer-column slot="col">
     <h5 slot="title">Title</h5>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
   </ifx-footer-column>
   <ifx-footer-column slot="col">
     <h5 slot="title">Title</h5>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
   </ifx-footer-column>
   <ifx-footer-column slot="col">
     <h5 slot="title">Title</h5>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link href="#" variant="underlined" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link href="#" variant="menu" slot="link">Footer Link</ifx-link>
   </ifx-footer-column>
   <ifx-footer-column slot="col">
     <h5 slot="title">Title</h5>
-    <ifx-link variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link variant="underlined" slot="link">Footer Link</ifx-link>
-    <ifx-link variant="underlined" slot="link">Footer Link</ifx-link>
+    <ifx-link variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link variant="menu" slot="link">Footer Link</ifx-link>
+    <ifx-link variant="menu" slot="link">Footer Link</ifx-link>
   </ifx-footer-column>
   <div slot="socials">
     <ifx-link variant="title" href="http://facebook.com/infineon">

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

@@ -1 +1 @@
-{"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;QACvD,IAAI,EAAE,qBAAqB;QAC3B,IAAI,EAAE,SAAS;QACf,eAAe,EAAE,gBAAgB;KAClC;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,WAAW,EAAE,kCAAkC;YAC/C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;aAC7B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,eAAe,EAAE;YACf,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,2DAA2D;YACxE,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAC;oBACH,OAAO,EAAE,SAAS;oBAClB,MAAM,EAAE,iBAAiB;iBAC1B;aACF;SACF;KAEF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;sCAEd,IAAI,CAAC,IAAI,iBAAiB,IAAI,CAAC,eAAe;yBAC3D,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;gBAwBlB,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE;IAC3B,OAAO;8BACqB,IAAI,CAAC,aAAa;;6CAEH,IAAI,CAAC,eAAe,WAAW,IAAI,CAAC,IAAI;;;;;gBAKrE,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE;IAC3B,OAAO;gCACuB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoDpC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nexport default {\n  title: 'Components/Footer',\n  tags: ['autodocs'],\n  args: {\n    copyrightText: '© 1999 - 2024 Infineon Technologies AG',\n    href: 'http://infineon.com',\n    icon: 'home-16',\n    ariaLabelOfLink: 'Go to Homepage',\n  },\n  argTypes: {\n    copyrightText: {\n      description: 'Sets the text for the copyright.',\n      control: 'text',\n      table: {\n        category: 'ifx-footer props',\n      }\n    },\n    icon: {\n      description: 'Sets the icon for the footer.',\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    href: {\n      description: 'Sets the link for the footer.',\n      control: 'text',\n      table: {\n        category: 'ifx-link props',\n      },\n    },\n    ariaLabelOfLink: {\n      name: 'ariaLabel',\n      description: 'Sets the aria-label for the link. Enhances accessibility.',\n      control: 'text',\n      table: {\n        category: 'ifx-link props',\n        type:{\n          summary: 'Options',\n          detail: 'Follow us on...'\n        }\n      },\n    },\n    \n  },\n};\n\nconst DefaultTemplate = args => {\n  return `\n    <ifx-footer copyright-text=\"${args.copyrightText}\">\n    <div slot=\"socials\">\n    <ifx-link variant=\"title\" href=\"${args.href}\" aria-label=\"${args.ariaLabelOfLink}\">\n        <ifx-icon icon=${args.icon}></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\" aria-label=\"Follow us on Facebook\">\n        <ifx-icon icon=\"facebook\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\" aria-label=\"Follow us on Youtube\">\n        <ifx-icon icon=\"youtube\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\" aria-label=\"Follow us on Instagram\">\n        <ifx-icon icon=\"instagram\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\" aria-label=\"Follow us on LinkedIn\">\n        <ifx-icon icon=\"linkedin\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://xing.com/infineon\" aria-label=\"Follow us on Xing\">\n        <ifx-icon icon=\"xing\"></ifx-icon>\n      </ifx-link>\n    </div>\n    <div slot=\"info\">\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n    </div>\n  </ifx-footer>`;\n};\n\nconst SmallTemplate = args => {\n  return `\n<ifx-footer copyright-text=\"${args.copyrightText}\">\n    <div slot=\"info\">\n      <ifx-link variant=\"menu\" aria-label=\"${args.ariaLabelOfLink}\" href=\"${args.href}\" target=\"_blank\">Terms</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n    </div>\n  </ifx-footer>`;\n};\n\nconst LargeTemplate = args => {\n  return `\n  <ifx-footer copyright-text=\"${args.copyrightText}\">\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link variant=\"underlined\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <div slot=\"socials\">\n    <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n      <ifx-icon icon=\"facebook\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n      <ifx-icon icon=\"youtube\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n      <ifx-icon icon=\"instagram\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n      <ifx-icon icon=\"linkedin\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n      <ifx-icon icon=\"xing\"></ifx-icon>\n    </ifx-link>\n  </div>\n  <div slot=\"info\">\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n  </div>\n</ifx-footer>`;\n};\n\nexport const Small = SmallTemplate.bind({});\nexport const Medium = DefaultTemplate.bind({});\nexport const Large = LargeTemplate.bind({});\n"]}
+{"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,aAAa,EAAE,wCAAwC;QACvD,IAAI,EAAE,qBAAqB;QAC3B,IAAI,EAAE,SAAS;QACf,eAAe,EAAE,gBAAgB;KAClC;IACD,QAAQ,EAAE;QACR,aAAa,EAAE;YACb,WAAW,EAAE,kCAAkC;YAC/C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;aAC7B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,eAAe,EAAE;YACf,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,2DAA2D;YACxE,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAC;oBACH,OAAO,EAAE,SAAS;oBAClB,MAAM,EAAE,iBAAiB;iBAC1B;aACF;SACF;KAEF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,OAAO;kCACyB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;gBAwBpC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE;IAC3B,OAAO;8BACqB,IAAI,CAAC,aAAa;;6CAEH,IAAI,CAAC,eAAe,WAAW,IAAI,CAAC,IAAI;;;;;gBAKrE,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE;IAC3B,OAAO;gCACuB,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoDpC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,MAAM,CAAC,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons';\nexport default {\n  title: 'Components/Footer',\n  tags: ['autodocs'],\n  args: {\n    copyrightText: '© 1999 - 2026 Infineon Technologies AG',\n    href: 'http://infineon.com',\n    icon: 'home-16',\n    ariaLabelOfLink: 'Go to Homepage',\n  },\n  argTypes: {\n    copyrightText: {\n      description: 'Sets the text for the copyright.',\n      control: 'text',\n      table: {\n        category: 'ifx-footer props',\n      }\n    },\n    icon: {\n      description: 'Sets the icon for the footer.',\n      options: Object.keys(icons),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    href: {\n      description: 'Sets the link for the footer.',\n      control: 'text',\n      table: {\n        category: 'ifx-link props',\n      },\n    },\n    ariaLabelOfLink: {\n      name: 'ariaLabel',\n      description: 'Sets the aria-label for the link. Enhances accessibility.',\n      control: 'text',\n      table: {\n        category: 'ifx-link props',\n        type:{\n          summary: 'Options',\n          detail: 'Follow us on...'\n        }\n      },\n    },\n    \n  },\n};\n\nconst DefaultTemplate = args => {\n  return `\n    <ifx-footer copyright-text=\"${args.copyrightText}\">\n    <div slot=\"socials\">\n      <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\" aria-label=\"Follow us on Facebook\">\n        <ifx-icon icon=\"facebook\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\" aria-label=\"Follow us on Youtube\">\n        <ifx-icon icon=\"youtube\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\" aria-label=\"Follow us on Instagram\">\n        <ifx-icon icon=\"instagram\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\" aria-label=\"Follow us on LinkedIn\">\n        <ifx-icon icon=\"linkedin\"></ifx-icon>\n      </ifx-link>\n      <ifx-link variant=\"title\" href=\"http://xing.com/infineon\" aria-label=\"Follow us on Xing\">\n        <ifx-icon icon=\"xing\"></ifx-icon>\n      </ifx-link>\n    </div>\n    <div slot=\"info\">\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n    </div>\n  </ifx-footer>`;\n};\n\nconst SmallTemplate = args => {\n  return `\n<ifx-footer copyright-text=\"${args.copyrightText}\">\n    <div slot=\"info\">\n      <ifx-link variant=\"menu\" aria-label=\"${args.ariaLabelOfLink}\" href=\"${args.href}\" target=\"_blank\">Terms</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n      <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n    </div>\n  </ifx-footer>`;\n};\n\nconst LargeTemplate = args => {\n  return `\n  <ifx-footer copyright-text=\"${args.copyrightText}\">\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link href=\"#\" variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <ifx-footer-column slot=\"col\">\n    <h5 slot=\"title\">Title</h5>\n    <ifx-link variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n    <ifx-link variant=\"menu\" slot=\"link\">Footer Link</ifx-link>\n  </ifx-footer-column>\n  <div slot=\"socials\">\n    <ifx-link variant=\"title\" href=\"http://facebook.com/infineon\">\n      <ifx-icon icon=\"facebook\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://youtube.com/infineon\">\n      <ifx-icon icon=\"youtube\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://instagram.com/infineon\">\n      <ifx-icon icon=\"instagram\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://linkedin.com/infineon\">\n      <ifx-icon icon=\"linkedin\"></ifx-icon>\n    </ifx-link>\n    <ifx-link variant=\"title\" href=\"http://xing.com/infineon\">\n      <ifx-icon icon=\"xing\"></ifx-icon>\n    </ifx-link>\n  </div>\n  <div slot=\"info\">\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/terms\" target=\"_blank\">Terms</ifx-link>\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/imprint\" target=\"_blank\">Imprint</ifx-link>\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/privacy-policy\" target=\"_blank\">Privacy policy</ifx-link>\n    <ifx-link variant=\"menu\" href=\"https://yourwebsite.com/glossary\" target=\"_blank\">Glossary</ifx-link>\n  </div>\n</ifx-footer>`;\n};\n\nexport const Small = SmallTemplate.bind({});\nexport const Medium = DefaultTemplate.bind({});\nexport const Large = LargeTemplate.bind({});\n"]}

package/dist/collection/components/indicator/indicator.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/link/link.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/modal/modal.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/navigation/navbar/navbar.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/navigation/sidebar/sidebar-item.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/navigation/sidebar/sidebar-title.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/navigation/sidebar/sidebar.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/notification/notification.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .ifx-notification__wrapper {

package/dist/collection/components/pagination/pagination.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/progress-bar/progress-bar.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/radio-button/radio-button.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/radio-button-group/radio-button-group.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .radio-button-group-container {

package/dist/collection/components/search-bar/search-bar.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/search-field/search-field.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {

package/dist/collection/components/segmented-control/segment/segment.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .segment {

package/dist/collection/components/segmented-control/segmented-control.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .group {

package/dist/collection/components/select/multi-select/multiselect.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 .ifx-multiselect-container {

package/dist/collection/components/select/single-select/select.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 /*===============================

package/dist/collection/components/slider/slider.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: "Source Sans 3", "Arial, sans-serif";
+  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
 }
 
 :host {