@infineon/infineon-design-system-stencil 33.1.1--canary.1818.9d0a456ff7511e284942d424fe3fbe95edc8d85e.0 → 33.1.1--canary.1827.0eabedc97f4e514129bb536649b389971d5464b1.0

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -14,7 +15,7 @@
   justify-content: center;
   align-items: center;
   background-color: #FFFFFF;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .footer__container .footer__wrapper {
   display: flex;

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

@@ -16,7 +16,7 @@
   border-radius: 1px;
   line-height: 1.5rem;
   outline: none;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   text-decoration: none;
   user-select: none;
   border: 1px solid rgba(0, 0, 0, 0);

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -15,7 +16,7 @@
   color: #0A8276;
   gap: 8px;
   line-height: 1.6;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .link:hover {
   cursor: pointer;

package/dist/collection/components/link/link.js

@@ -23,8 +23,17 @@ export class Link {
     componentWillRender() {
         this.setInternalStates();
     }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            event.preventDefault();
+        }
+        else if (event.key === 'Enter') {
+            window.open(this.internalHref, this.internalTarget);
+            event.preventDefault();
+        }
+    }
     render() {
-        return (h("a", { key: '04893aa3a068872a42cff24d577c8ddd332d6230', "aria-label": 'a navigation link button', href: this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '7dfbe5e88b88cf912da4c40eed427694b291928c' })));
+        return (h("a", { key: 'dffdc45942266f26e5c4fc17d79297763c34ead0', role: "link", "aria-label": this.AriaLabel, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : this.internalHref, download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '7eec485a0ff5228eeef11304c12dd7511cbb4ef6' })));
     }
     getSizeClass() {
         const small = this.size === 's' ? 'small' : null;
@@ -203,6 +212,25 @@ export class Link {
                 "setter": false,
                 "attribute": "download",
                 "reflect": false
+            },
+            "AriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State } from \"@stencil/core\";\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n\n  render() {\n    return (\n      <a aria-label='a navigation link button' href={this.internalHref} download={this.download} target={this.internalTarget} class={this.linkClassNames()}>\n        <slot></slot>\n      </a>\n    )\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State } from \"@stencil/core\";\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @Prop() AriaLabel: string;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    } else if (event.key === 'Enter') {\n      window.open(this.internalHref, this.internalTarget);\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <a\n        role=\"link\"\n        aria-label={this.AriaLabel}\n        aria-disabled={this.disabled || !this.internalHref}\n        href={this.disabled ? undefined : this.internalHref}\n        download={this.download}\n        target={this.internalTarget}\n        class={this.linkClassNames()}>\n        <slot></slot>\n      </a>)\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}"]}

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

@@ -8,7 +8,8 @@ export default {
         size: 'm',
         disabled: false,
         variant: 'bold',
-        download: ""
+        download: "",
+        AriaLabel: 'Link',
     },
     argTypes: {
         label: {
@@ -18,6 +19,17 @@ export default {
                 category: 'story controls',
             }
         },
+        AriaLabel: {
+            name: 'AriaLabel',
+            description: 'Set the aria-label of *<ifx-link>*. Enhances accessibility.',
+            control: 'text',
+            table: {
+                category: 'ifx-link props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         href: {
             description: 'Specifies the URL of the link.',
             table: {
@@ -84,7 +96,7 @@ export default {
         },
     },
 };
-const DefaultTemplate = args => `<ifx-link href="${args.href}" target="${args.target}" size="${args.size}" variant="${args.variant}" disabled="${args.disabled}" download="${args.download}" >
+const DefaultTemplate = args => `<ifx-link href="${args.href}" aria-label="${args.AriaLabel}" target="${args.target}" size="${args.size}" variant="${args.variant}" disabled="${args.disabled}" download="${args.download}" >
   ${args.label}
   </ifx-link>`;
 export const Default = DefaultTemplate.bind({});

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

@@ -1 +1 @@
-{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,EAAE;KACb;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;YACjC,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kFAAkF;YAC/F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,gBAAgB;iBAC1B;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;YAChD,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO,eAAe,IAAI,CAAC,QAAQ,eAAe,IAAI,CAAC,QAAQ;IACxJ,IAAI,CAAC,KAAK;cACA,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAC9B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;IAChG,IAAI,CAAC,KAAK;;cAEA,CAAC;AAEf,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'Components/Link',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Link',\n    href: '',\n    target: '_blank',\n    size: 'm',\n    disabled: false,\n    variant: 'bold',\n    download: \"\"\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Link',\n      description: 'Set the label of *<ifx-link>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    href: {\n      description: 'Specifies the URL of the link.',\n      table: {\n        category: 'ifx-link props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked URL when the link is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the link.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    download: {\n      description: 'Sets the download attribute',\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'string'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',\n      control: 'radio',\n      options: ['s', 'm', 'l', 'xl'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m | l | xl'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the link.',\n      control: 'radio',\n      options: ['bold', 'underlined', 'title', 'menu'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'bold'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" disabled=\"${args.disabled}\" download=\"${args.download}\" >\n  ${args.label}\n  </ifx-link>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst TemplateWithIcon = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n  ${args.label}\n  <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\n  </ifx-link>`;\n\nexport const WithIcon = TemplateWithIcon.bind({});\n"]}
+{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,MAAM;KAClB;IAED,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,SAAS,EAAC;YACR,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,6DAA6D;YAC1E,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,mEAAmE;YAChF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,oBAAoB;YACjC,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kFAAkF;YAC/F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,gBAAgB;iBAC1B;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;YAChD,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE;oBACZ,OAAO,EAAE,MAAM;iBAChB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,mBAAmB,IAAI,CAAC,IAAI,iBAAiB,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO,eAAe,IAAI,CAAC,QAAQ,eAAe,IAAI,CAAC,QAAQ;IACvL,IAAI,CAAC,KAAK;cACA,CAAC;AAEf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAC9B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;IAChG,IAAI,CAAC,KAAK;;cAEA,CAAC;AAEf,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'Components/Link',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Link',\n    href: '',\n    target: '_blank',\n    size: 'm',\n    disabled: false,\n    variant: 'bold',\n    download: \"\",\n    AriaLabel: 'Link',\n  },\n\n  argTypes: {\n    label: {\n      name: 'Label of Link',\n      description: 'Set the label of *<ifx-link>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    AriaLabel:{\n      name: 'AriaLabel',\n      description: 'Set the aria-label of *<ifx-link>*. Enhances accessibility.',\n      control: 'text',\n      table: {\n        category: 'ifx-link props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    href: {\n      description: 'Specifies the URL of the link.',\n      table: {\n        category: 'ifx-link props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked URL when the link is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the link.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    download: {\n      description: 'Sets the download attribute',\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'string'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)',\n      control: 'radio',\n      options: ['s', 'm', 'l', 'xl'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m | l | xl'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the link.',\n      control: 'radio',\n      options: ['bold', 'underlined', 'title', 'menu'],\n      table: {\n        category: 'ifx-link props',\n        defaultValue: {\n          summary: 'bold'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-link href=\"${args.href}\" aria-label=\"${args.AriaLabel}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" disabled=\"${args.disabled}\" download=\"${args.download}\" >\n  ${args.label}\n  </ifx-link>`;\n\nexport const Default = DefaultTemplate.bind({});\n\nconst TemplateWithIcon = args =>\n  `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n  ${args.label}\n  <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\n  </ifx-link>`;\n\nexport const WithIcon = TemplateWithIcon.bind({});\n"]}

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -17,7 +18,7 @@
   height: 100%;
   z-index: 1060;
   overflow-y: auto;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 
 .modal-container.open {

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

@@ -11,7 +11,7 @@
   flex: none;
   order: 0;
   flex-grow: 0;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   text-decoration: none;
   font-weight: 400;
   font-size: 16px;
@@ -184,7 +184,7 @@
   box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);
   border: 1px solid #EEEDED;
   padding: 8px 0px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .navbar-menu.open:not(.itemInMobileMenu) {
   display: flex;
@@ -230,7 +230,7 @@
   justify-content: space-between;
   padding: 8px 16px;
   gap: 8px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .navbar__item.menuItem.hide {
   display: none;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -8,7 +9,7 @@
 }
 
 .navbar__wrapper {
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   height: 63px;
   position: sticky;
   z-index: 1030;
@@ -222,7 +223,7 @@
   padding: 8px 40px;
   gap: 16px;
   background-color: #FFFFFF;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .navbar__container.expanded {
   justify-content: initial;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -54,7 +55,7 @@
   text-decoration: none;
   color: #1D1D1D;
   cursor: pointer;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .sidebar__nav-item.extra-padding__bottom {
   padding: 8px 0px 16px 0px;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -17,7 +18,7 @@
   border-right: 1px solid #EEEDED;
   width: 264px;
   height: 100%;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .sidebar__container .sidebar__top-container {
   display: flex;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .ifx-notification__wrapper {
@@ -8,7 +9,7 @@
   align-items: center;
   padding: 8px 16px;
   background-color: #FFFFFF;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   color: #1D1D1D;
   border: 1px solid #EEEDED;
 }

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {

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

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -12,7 +13,7 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .container .items__per-page-wrapper {
   display: flex;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -19,7 +20,7 @@
   width: 100%;
   overflow: hidden;
   background-color: #EEEDED;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 .progress-bar.s {
   height: 4px;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -27,7 +28,7 @@
   padding: 0px;
   gap: 8px;
   cursor: pointer;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .radioButton__container.m .radioButton__wrapper {
   width: 24px;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .radio-button-group-container {
@@ -9,7 +10,7 @@
 
 .radio-button-group {
   display: flex;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   gap: 8px;
 }
 .radio-button-group.horizontal {

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -15,7 +16,7 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .search-bar.closed {
   display: flex;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -10,7 +11,7 @@
   box-sizing: border-box;
   background-color: #FFFFFF;
   width: 100%;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .search-field .search-field__wrapper {
   box-sizing: border-box;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .segment {

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .group {

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

@@ -1,11 +1,12 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .ifx-multiselect-container {
   position: relative;
   box-sizing: border-box;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .ifx-multiselect-container.small-select {
   height: 36px;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 /*===============================
@@ -7,7 +8,7 @@
 ===============================*/
 .ifx-select-container {
   box-sizing: border-box;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   /*
   START Select options: item alignment
   */

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {

package/dist/collection/components/status/status.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -12,7 +13,7 @@
   align-items: center;
   padding: 0 8px;
   border-radius: 9999px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .container.no-border {
   padding: 0;

package/dist/collection/components/stepper/step/step.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .step-wrapper {

package/dist/collection/components/stepper/stepper.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .stepper {

package/dist/collection/components/switch/switch.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 /* switch.css */

package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.css

@@ -5,7 +5,7 @@
   align-items: flex-start;
   align-self: stretch;
   gap: 4px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   background: #EEEDED;
 }
 
@@ -15,7 +15,7 @@
   align-items: flex-start;
   align-self: stretch;
   gap: 4px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 
 .topbar-filter-search-wrapper ifx-search-field {

package/dist/collection/components/table-advanced-version/table.css

@@ -8644,7 +8644,8 @@ input[class^=ag-][type=range]:disabled {
 }
 
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .zebra .ag-row-odd {
@@ -8793,7 +8794,7 @@ input[class^=ag-][type=range]:disabled {
   font-weight: 600;
   line-height: 20px;
   color: #1D1D1D;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 
 .ag-row-focus {

package/dist/collection/components/table-basic-version/table.css

@@ -8644,7 +8644,8 @@ input[class^=ag-][type=range]:disabled {
 }
 
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 .zebra .ag-row-odd {
@@ -8733,7 +8734,7 @@ input[class^=ag-][type=range]:disabled {
   font-weight: 600;
   line-height: 20px;
   color: #1D1D1D;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 
 .ag-row-focus {

package/dist/collection/components/tabs/tabs.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -8,7 +9,7 @@
 
 .tabs {
   display: flex;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
   width: 100%;
 }
 

package/dist/collection/components/tag/tag.css

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -14,7 +15,7 @@
   border-radius: 9999px;
   background-color: #FFFFFF;
   gap: 8px;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .container:hover {
   cursor: pointer;

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

@@ -1,5 +1,6 @@
 :root {
-  font-family: "Source Sans 3", sans-serif;
+  --ifx-font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family, sans-serif);
 }
 
 :host {
@@ -16,7 +17,7 @@
   order: 0;
   align-self: stretch;
   flex-grow: 0;
-  font-family: "Source Sans 3";
+  font-family: var(--ifx-font-family);
 }
 .textInput__container.disabled .textInput__top-wrapper label {
   color: #575352;