@infineon/infineon-design-system-stencil 33.1.1--canary.1818.40b59d3e7e35c19c1cd5c4976a5aecca37653bcd.0 → 33.1.1--canary.1826.80f5b1bc68c2582aa6b8c111ec42ccf8d0eeb4a7.0

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

@@ -19,7 +19,7 @@ export class IconButton {
         }
     }
     render() {
-        return (h(Host, { key: '3cc21055a0545976f5375b3e43fe8dec7cc3e28c' }, this.href ? (h("a", { "aria-disabled": this.disabled, "aria-label": 'a clickable icon button', ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.icon }))) : (h("button", { class: this.getClassNames(), type: "button" }, h("ifx-icon", { icon: this.icon })))));
+        return (h(Host, { key: 'c68864f2ea93894b6f55bc863f227fe19abd76e5', "aria-disabled": this.disabled, "aria-label": this.AriaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.icon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.icon })))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"
@@ -192,6 +192,25 @@ export class IconButton {
                 "attribute": "shape",
                 "reflect": false,
                 "defaultValue": "'round'"
+            },
+            "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/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.href ? (\n          <a\n            aria-disabled={this.disabled}\n            aria-label='a clickable icon button'\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined}\n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Prop() AriaLabel: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  \n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.AriaLabel}> \n        {this.href ? (\n          <a\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined} \n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"]}

package/dist/collection/components/icon-button/icon-button.stories.js

@@ -10,6 +10,7 @@ export default {
         href: '',
         target: '_blank',
         shape: 'round',
+        AriaLabel: 'Icon Button',
     },
     argTypes: {
         icon: {
@@ -89,9 +90,16 @@ export default {
                 }
             }
         },
+        AriaLabel: {
+            control: { type: 'text' },
+            description: 'Set the aria label of the icon button. Enhances accessibility.',
+            table: {
+                category: 'ifx-icon-button props'
+            }
+        },
     },
 };
-const DefaultTemplate = args => `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}"  size="${args.size}" disabled="${args.disabled}">
+const DefaultTemplate = args => `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}"  size="${args.size}" disabled="${args.disabled}" aria-label="${args.AriaLabel}">
   </ifx-icon-button>`;
 export const Default = DefaultTemplate.bind({});
 //# sourceMappingURL=icon-button.stories.js.map

package/dist/collection/components/icon-button/icon-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE;QACR,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,OAAO;KACf;IAED,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,2BAA2B;YACxC,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;YAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,4CAA4C;YACzD,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,6EAA6E;YAC1F,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACxB,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,qEAAqE;YAClF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,uCAAuC;YACpD,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC5B,KAAK,EAAE;gBACL,QAAQ,EAAE,uBAAuB;gBACjC,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAC7B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAEtB,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/Icon Button',\n  tags: ['autodocs'],\n\n  args: {\n    variant: 'primary',\n    size: 'm',\n    disabled: false,\n    icon: 'c-info-24',\n    href: '',\n    target: '_blank',\n    shape: 'round',\n  },\n\n  argTypes: {\n    icon: {\n      description: 'The icon to be displayed.',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'c-info-24'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the icon button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the icon button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    href: {\n      description: 'Specifies the URL to which the icon button will link.',\n      table: {\n        category: 'ifx-icon-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',\n      control: 'radio',\n      options: ['s', 'm', 'l'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m | l'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked URL when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n    shape: {\n      description: 'Defines the shape of the icon button.',\n      control: 'radio',\n      options: ['round', 'square'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'round'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\"  size=\"${args.size}\" disabled=\"${args.disabled}\">\n  </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Icon Button',\n  tags: ['autodocs'],\n\n  args: {\n    variant: 'primary',\n    size: 'm',\n    disabled: false,\n    icon: 'c-info-24',\n    href: '',\n    target: '_blank',\n    shape: 'round',\n    AriaLabel: 'Icon Button',\n  },\n\n  argTypes: {\n    icon: {\n      description: 'The icon to be displayed.',\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'c-info-24'\n        }\n      }\n    },\n    variant: {\n      description: 'Sets the style variant of the icon button.',\n      control: 'radio',\n      options: ['primary', 'secondary', 'tertiary'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'primary'\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the icon button when set to true.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'false'\n        }\n      }\n    },\n    href: {\n      description: 'Specifies the URL to which the icon button will link.',\n      table: {\n        category: 'ifx-icon-button props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).',\n      control: 'radio',\n      options: ['s', 'm', 'l'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m | l'\n        }\n      }\n    },\n    target: {\n      description: 'Determines where to open the linked URL when the button is clicked.',\n      control: 'radio',\n      options: ['_blank', '_self', '_parent'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: '_blank'\n        }\n      }\n    },\n    shape: {\n      description: 'Defines the shape of the icon button.',\n      control: 'radio',\n      options: ['round', 'square'],\n      table: {\n        category: 'ifx-icon-button props',\n        defaultValue: {\n          summary: 'round'\n        }\n      }\n    },\n    AriaLabel: {\n      control: { type: 'text' },\n      description: 'Set the aria label of the icon button. Enhances accessibility.',\n      table: {\n        category: 'ifx-icon-button props'\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args =>\n  `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\"  size=\"${args.size}\" disabled=\"${args.disabled}\" aria-label=\"${args.AriaLabel}\">\n  </ifx-icon-button>`;\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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

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

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -18,7 +18,7 @@
   height: 100%;
   z-index: 1060;
   overflow-y: auto;
-  font-family: var(--ifx-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: var(--ifx-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: var(--ifx-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: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -9,7 +9,7 @@
 }
 
 .navbar__wrapper {
-  font-family: var(--ifx-font-family, Source Sans 3);
+  font-family: var(--ifx-font-family);
   height: 63px;
   position: sticky;
   z-index: 1030;
@@ -223,7 +223,7 @@
   padding: 8px 40px;
   gap: 16px;
   background-color: #FFFFFF;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -55,7 +55,7 @@
   text-decoration: none;
   color: #1D1D1D;
   cursor: pointer;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -18,7 +18,7 @@
   border-right: 1px solid #EEEDED;
   width: 264px;
   height: 100%;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -9,7 +9,7 @@
   align-items: center;
   padding: 8px 16px;
   background-color: #FFFFFF;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 

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

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -13,7 +13,7 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -20,7 +20,7 @@
   width: 100%;
   overflow: hidden;
   background-color: #EEEDED;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -28,7 +28,7 @@
   padding: 0px;
   gap: 8px;
   cursor: pointer;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -10,7 +10,7 @@
 
 .radio-button-group {
   display: flex;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -16,7 +16,7 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -11,7 +11,7 @@
   box-sizing: border-box;
   background-color: #FFFFFF;
   width: 100%;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 

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

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

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

@@ -1,12 +1,12 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --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: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -8,7 +8,7 @@
 ===============================*/
 .ifx-select-container {
   box-sizing: border-box;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -13,7 +13,7 @@
   align-items: center;
   padding: 0 8px;
   border-radius: 9999px;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 

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

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

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

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

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: var(--ifx-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: var(--ifx-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,7 @@ input[class^=ag-][type=range]:disabled {
 }
 
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -8794,7 +8794,7 @@ input[class^=ag-][type=range]:disabled {
   font-weight: 600;
   line-height: 20px;
   color: #1D1D1D;
-  font-family: var(--ifx-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,7 @@ input[class^=ag-][type=range]:disabled {
 }
 
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -8734,7 +8734,7 @@ input[class^=ag-][type=range]:disabled {
   font-weight: 600;
   line-height: 20px;
   color: #1D1D1D;
-  font-family: var(--ifx-font-family, Source Sans 3);
+  font-family: var(--ifx-font-family);
 }
 
 .ag-row-focus {

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

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

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

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -15,7 +15,7 @@
   border-radius: 9999px;
   background-color: #FFFFFF;
   gap: 8px;
-  font-family: var(--ifx-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,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -17,7 +17,7 @@
   order: 0;
   align-self: stretch;
   flex-grow: 0;
-  font-family: var(--ifx-font-family, Source Sans 3);
+  font-family: var(--ifx-font-family);
 }
 .textInput__container.disabled .textInput__top-wrapper label {
   color: #575352;

package/dist/collection/components/textarea/textarea.css

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

package/dist/collection/components/tooltip/tooltip.css

@@ -1,5 +1,5 @@
 :root {
-  --ifx-font-family: Source Sans 3;
+  --ifx-font-family: "Source Sans 3";
   font-family: var(--ifx-font-family, sans-serif);
 }
 
@@ -11,7 +11,7 @@
   display: inline-flex;
   flex-direction: column;
   position: relative;
-  font-family: var(--ifx-font-family, Source Sans 3);
+  font-family: var(--ifx-font-family);
 }
 
 .tooltip-extended, .tooltip-compact, .tooltip-dismissible {

package/dist/collection/index.js

@@ -1,3 +1,2 @@
-import "./global/font-import"; // CSS gets loaded
 export * from './components';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC,CAAC,kBAAkB;AACjD,cAAc,cAAc,CAAC","sourcesContent":["import './global/font-import'; // CSS gets loaded\nexport * from './components';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

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

@@ -1,4 +1,4 @@
-import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-3854eb62.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-94e019a6.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-b619515f.js';
+import { A as Accordion, d as defineCustomElement$1 } from './p-905fb988.js';
 
 const IfxAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-alert.js

@@ -1,4 +1,4 @@
-import { A as Alert, d as defineCustomElement$1 } from './p-642c6a2e.js';
+import { A as Alert, d as defineCustomElement$1 } from './p-493b7a31.js';
 
 const IfxAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-badge.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-2cc378b8.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, Source Sans 3);font-size:0.875rem;line-height:1.25rem;font-weight:400;color:#1D1D1D}";
+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;
 
 const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends H {