@infineon/infineon-design-system-stencil 32.0.0 → 32.1.0--canary.1681.8e7428ed830ca5c1505633fc0cd69c8ff7a84007.0

package/dist/types/components.d.ts

@@ -92,6 +92,16 @@ export namespace Components {
         "toggleCheckedState": (newVal: boolean) => Promise<void>;
         "value": string;
     }
+    interface IfxCheckboxGroup {
+        "alignment": 'horizontal' | 'vertical';
+        "captionText": string;
+        "groupLabelText": string;
+        "setGroupError": (error: boolean) => Promise<void>;
+        "showCaption": boolean;
+        "showCaptionIcon": boolean;
+        "showGroupLabel": boolean;
+        "size": string;
+    }
     interface IfxChip {
         "AriaLabel": string;
         "placeholder": string;
@@ -854,6 +864,7 @@ declare global {
     };
     interface HTMLIfxCheckboxElementEventMap {
         "ifxChange": any;
+        "ifxError": any;
     }
     interface HTMLIfxCheckboxElement extends Components.IfxCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIfxCheckboxElementEventMap>(type: K, listener: (this: HTMLIfxCheckboxElement, ev: IfxCheckboxCustomEvent<HTMLIfxCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -869,6 +880,12 @@ declare global {
         prototype: HTMLIfxCheckboxElement;
         new (): HTMLIfxCheckboxElement;
     };
+    interface HTMLIfxCheckboxGroupElement extends Components.IfxCheckboxGroup, HTMLStencilElement {
+    }
+    var HTMLIfxCheckboxGroupElement: {
+        prototype: HTMLIfxCheckboxGroupElement;
+        new (): HTMLIfxCheckboxGroupElement;
+    };
     interface HTMLIfxChipElementEventMap {
         "ifxChange": { previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string };
     }
@@ -1641,6 +1658,7 @@ declare global {
         "ifx-card-overline": HTMLIfxCardOverlineElement;
         "ifx-card-text": HTMLIfxCardTextElement;
         "ifx-checkbox": HTMLIfxCheckboxElement;
+        "ifx-checkbox-group": HTMLIfxCheckboxGroupElement;
         "ifx-chip": HTMLIfxChipElement;
         "ifx-chip-item": HTMLIfxChipItemElement;
         "ifx-content-switcher": HTMLIfxContentSwitcherElement;
@@ -1776,9 +1794,19 @@ declare namespace LocalJSX {
         "error"?: boolean;
         "indeterminate"?: boolean;
         "onIfxChange"?: (event: IfxCheckboxCustomEvent<any>) => void;
+        "onIfxError"?: (event: IfxCheckboxCustomEvent<any>) => void;
         "size"?: string;
         "value"?: string;
     }
+    interface IfxCheckboxGroup {
+        "alignment"?: 'horizontal' | 'vertical';
+        "captionText"?: string;
+        "groupLabelText"?: string;
+        "showCaption"?: boolean;
+        "showCaptionIcon"?: boolean;
+        "showGroupLabel"?: boolean;
+        "size"?: string;
+    }
     interface IfxChip {
         "AriaLabel"?: string;
         "onIfxChange"?: (event: IfxChipCustomEvent<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>) => void;
@@ -2260,6 +2288,7 @@ declare namespace LocalJSX {
         "ifx-card-overline": IfxCardOverline;
         "ifx-card-text": IfxCardText;
         "ifx-checkbox": IfxCheckbox;
+        "ifx-checkbox-group": IfxCheckboxGroup;
         "ifx-chip": IfxChip;
         "ifx-chip-item": IfxChipItem;
         "ifx-content-switcher": IfxContentSwitcher;
@@ -2342,6 +2371,7 @@ declare module "@stencil/core" {
             "ifx-card-overline": LocalJSX.IfxCardOverline & JSXBase.HTMLAttributes<HTMLIfxCardOverlineElement>;
             "ifx-card-text": LocalJSX.IfxCardText & JSXBase.HTMLAttributes<HTMLIfxCardTextElement>;
             "ifx-checkbox": LocalJSX.IfxCheckbox & JSXBase.HTMLAttributes<HTMLIfxCheckboxElement>;
+            "ifx-checkbox-group": LocalJSX.IfxCheckboxGroup & JSXBase.HTMLAttributes<HTMLIfxCheckboxGroupElement>;
             "ifx-chip": LocalJSX.IfxChip & JSXBase.HTMLAttributes<HTMLIfxChipElement>;
             "ifx-chip-item": LocalJSX.IfxChipItem & JSXBase.HTMLAttributes<HTMLIfxChipItemElement>;
             "ifx-content-switcher": LocalJSX.IfxContentSwitcher & JSXBase.HTMLAttributes<HTMLIfxContentSwitcherElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "32.0.0",
+  "version": "32.1.0--canary.1681.8e7428ed830ca5c1505633fc0cd69c8ff7a84007.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

package/dist/components/p-6d91c497.js.map

@@ -1 +0,0 @@
-{"file":"p-6d91c497.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,iuEAAiuE,CAAC;AACtvE,0BAAe,WAAW;;MCSb,QAAQ;IAPrB;;;;;;QAWU,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAY,KAAK,CAAC;QACzB,UAAK,GAAY,KAAK,CAAC;QACvB,SAAI,GAAW,GAAG,CAAC;QACnB,kBAAa,GAAY,KAAK,CAAC;KA4IxC;IAnIC,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;gBACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC5B,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;aACpC;iBAAM;gBACL,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;aAC9C;YAED,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;oBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACzC;qBAAM;oBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;iBAClC;aACF;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;aAClC;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC3C;KACF;IAGD,MAAM,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;KAC7B;IAGD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;KAC/B;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAID,oBAAoB,CAAC,QAAiB,EAAE,QAAiB;QACvD,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC;YACtC,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC;SAC9D;KACF;IAED,aAAa,CAAC,KAAK;;QAEjB,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,EAAE;YAChD,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,CAAC;KACjD;IAED,kBAAkB;QAChB,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC;KAC9D;;;;;IAOD,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;KACnC;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,OAAO,eAAe,CAAA;aACvB;iBAAM;gBACL,OAAO,OAAO,CAAA;aACf;SACF;aAAM,IAAI,IAAI,CAAC,eAAe,EAAE;YAC/B,OAAO,SAAS,CAAC;SAClB;;YAAM,OAAO,EAAE,CAAA;KACjB;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QAC/B,IAAI,OAAO,GAAG,KAAK,CAAC;QAEpB,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,IAAI,CAAC;SAChB;QAED,QACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DACE,IAAI,EAAC,UAAU,EACf,MAAM,QACN,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,EAAE,EAAC,UAAU,EACb,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,GAC1C,EAEF,4DACE,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,mBAC7D,IAAI,CAAC,QAAQ,qBACZ,OAAO,EACvB,KAAK,EAAE;YACL,IAAI,CAAC,mBAAmB,EAAE;UAC5B,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,YAAY,GAAG,EAAE;UACrC,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,EAAE;UACzC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEhC,IAAI,CAAC,eAAe,IAAI,iEAAU,IAAI,EAAC,UAAU,iBAAc,MAAM,GAAY,CAC9E,EACL,OAAO;YACN,4DAAK,EAAE,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAC/I,8DAAQ,CACJ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalChecked = true;\n        this.internalIndeterminate = false;\n      } else {\n        this.internalChecked = !this.internalChecked;\n      }\n      \n      if (this.internalChecked) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && <ifx-icon icon=\"check-12\"  aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/infineon-design-system-stencil/p-025924da.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c,h as i,g as t}from"./p-c808c7d2.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const o=s;const a=class{constructor(i){e(this,i);this.ifxChange=c(this,"ifxChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const c=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){c.classList.add("gap")}else{c.classList.remove("gap")}}componentDidLoad(){this.toggleLabelGap()}valueChanged(e,c){if(e!==c){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return i("div",{key:"7e20607f16e9fcd47e30f1b851d5dddbaf90514a",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},i("div",{key:"1154186734d042176d5d5843650b0cde4890be4c",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},i("div",{key:"b495c8cd62b3bd6a577f9942ddb88f7dbbc7ae29",class:"switch__checkbox-wrapper"},i("input",{key:"ba68653e86a3f801a77766625c2f303ba7098c9f",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),i("div",{key:"925e50cb39c9cdbef596db82a3f079471c7ef4fb",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),i("div",{key:"724eb84c9b3994d60339162392fe7df7a5dee5fe",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},i("label",{key:"81b1b498725340c17cf069502fa4befcc8a3697b",htmlFor:"switch"},i("slot",{key:"3b3800a830e33c76a86adac325ba2cf6e57ecd44",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return t(this)}static get watchers(){return{checked:["valueChanged"]}}};a.style=o;export{a as ifx_switch};
-//# sourceMappingURL=p-025924da.entry.js.map

package/dist/infineon-design-system-stencil/p-2fac384a.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e,g as o}from"./p-c808c7d2.js";const s=":host{position:relative;z-index:1000}.dropdown-menu{display:none;visibility:hidden;flex-direction:column;width:224px;max-height:289px;min-width:224px;overflow-y:auto;background:#FFFFFF;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)}.dropdown-menu.small{max-height:266px;max-width:186px;overflow-y:auto}.dropdown-menu.hideTopPadding{padding-top:0px}.dropdown-menu.show{display:flex;visibility:visible}";const d=s;const n=class{constructor(e){i(this,e);this.menuSize=t(this,"menuSize",7);this.ifxDropdownMenuItem=t(this,"ifxDropdownMenuItem",7);this.isOpen=false;this.size="l";this.hideTopPadding=false;this.filteredItems=[]}handleMenuFilter(i){const t=i.detail;this.filterDropdownItems(t)}handleDropdownItemValueEmission(i){this.ifxDropdownMenuItem.emit(i.detail)}filterDropdownItems(i){const t=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));let e,o;let s=i.toUpperCase();for(let i=0;i<t.length;i++){e=t[i];o=e.textContent||e.innerText;if(o.toUpperCase().indexOf(s)>-1){e.setAttribute("hide",false)}else{e.setAttribute("hide",true)}}}componentWillUpdate(){this.menuSize.emit(this.size)}componentWillLoad(){this.filteredItems=Array.from(this.el.querySelectorAll("ifx-dropdown-item"));const i=this.el.querySelector("ifx-search-field");const t=this.el.querySelector("ifx-dropdown-header");if(i||t){this.hideTopPadding=true}else this.hideTopPadding=false}render(){return e("div",{key:"6a0875682a7dbdf9734794347bd64148b4f2c8b5",class:`dropdown-menu \n      ${this.isOpen?"show":""} \n      ${this.hideTopPadding?"hideTopPadding":""}\n      ${this.size==="s"?"small":""}`},e("slot",{key:"0a89ee2b042f28395f977172d003575b1d080611"}))}get el(){return o(this)}};n.style=d;export{n as ifx_dropdown_menu};
-//# sourceMappingURL=p-2fac384a.entry.js.map

package/dist/infineon-design-system-stencil/p-332afce9.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as o}from"./p-c808c7d2.js";const e=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.dropdown-header{display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid #EEEDED;font-family:var(--ifx-font-family)}.dropdown-header span{color:#575352;font-family:var(--ifx-font-family);font-size:14px;font-style:normal;font-weight:400;line-height:20px;}';const d=e;const f=class{constructor(o){a(this,o)}render(){return o("div",{key:"b42dc08dabda81dd0e8e604d07c8409686a5f0fd",class:"dropdown-header"},o("span",{key:"9f699e2874688216d23da95c3b96d78caad78695"},o("slot",{key:"f8b69b6e6840fcc1c8f3b877a9361e192a1d76a0"})))}};f.style=d;export{f as ifx_dropdown_header};
-//# sourceMappingURL=p-332afce9.entry.js.map

package/dist/infineon-design-system-stencil/p-5031d738.entry.js

@@ -1,2 +0,0 @@
-import{r,h as o}from"./p-c808c7d2.js";const c=".dropdown-separator{height:1px;background-color:#EEEDED;margin:8px 16px}";const s=c;const a=class{constructor(o){r(this,o)}render(){return o("div",{key:"2c7435f309112c640c3ff68a244d3c663ceb5b7a",class:"dropdown-separator"})}};a.style=s;export{a as ifx_dropdown_separator};
-//# sourceMappingURL=p-5031d738.entry.js.map

package/dist/infineon-design-system-stencil/p-59888005.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as c,g as e}from"./p-c808c7d2.js";const a=":host{display:block}";const o=a;const r=class{constructor(c){t(this,c);this.tabHeaderChange=s(this,"tabHeaderChange",7);this.icon="";this.iconPosition="left"}componentWillUpdate(){this.tabHeaderChange.emit(this.header)}render(){return c("slot",{key:"68fdfaa881c7619f208c32bf8f1ec579997fc7cf"})}get el(){return e(this)}};r.style=o;export{r as ifx_tab};
-//# sourceMappingURL=p-59888005.entry.js.map

package/dist/infineon-design-system-stencil/p-5b444517.entry.js

@@ -1,2 +0,0 @@
-import{r,h as s}from"./p-c808c7d2.js";const o=":host{display:inline-block;cursor:pointer}";const c=o;const e=class{constructor(s){r(this,s);this.isOpen=false}render(){return s("slot",{key:"3e51ceb827b5c52cb850e6433d3235e9400fe5c0"})}};e.style=c;export{e as ifx_dropdown_trigger};
-//# sourceMappingURL=p-5b444517.entry.js.map

package/dist/infineon-design-system-stencil/p-d1efcac6.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s}from"./p-c808c7d2.js";const o=":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";const i=o;const a=class{constructor(s){t(this,s);this.isOpen=false;this.theme="default";this.size="m";this.hideArrow=false}render(){return s("ifx-button",{key:"4dc468fdf8211511a97d58441059b0ca44bb880c",variant:this.variant,theme:this.theme,size:this.size,disabled:this.disabled,class:"dropdown-trigger-button"},s("slot",{key:"5e77a7b367905623309508c784233784685caf94"}),!this.hideArrow&&s("ifx-icon",{key:"c60c753f1d57a4ab819a680c48fa1664704dc42b",icon:"chevron-down-12",class:`icon${this.isOpen?" rotate":""}`}))}};a.style=i;export{a as ifx_dropdown_trigger_button};
-//# sourceMappingURL=p-d1efcac6.entry.js.map

package/dist/infineon-design-system-stencil/p-eb752024.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as c,g as a}from"./p-c808c7d2.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=d;const b=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.innerHTML=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.innerHTML=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.innerHTML=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"ca3c8310ad317f2bce55a18a8a3cffbd4b9809fb",class:"container"},c("header",{key:"0676a8271dbefcc19ea915775889353b78e76aa1",class:"header"},c("div",{key:"f6b9420f624badeef88b363db60030a823c63f16",class:"header__info-wrapper"},c("div",{key:"79f2d7105c0f5f7a4c40e4ed0ad7c3c614ee79ac",class:"title"},"DDS Components Overview"),c("div",{key:"d8b708e9287e055f9164772ba9df1c286a3fa03a",class:"infoboard__wrapper"},c("div",{key:"72ee4009e82b1085c20e4c1042c8cb68bea87e64",class:"basic__info"},c("div",{key:"9d6779ef64d681d255344b1ea24b445bea0bc463"},"Total Number:"),c("div",{key:"926795a2dba61398b78975b532739f19fbcde80b"},c("ifx-number-indicator",{key:"9f84d42a217f7d060b908741281964e111619580",id:"number__indicator-total"}))),c("div",{key:"ea0e7cd607c1f93ca7ceeacf149c3e762fd849ca",class:"basic__info"},c("div",{key:"1ea7782112cafb8031ef385bd79d6c531810f0e7"},"Completed:"),c("div",{key:"e5a7deb30741ebfe49bd4d94db731b69c86e599c"},c("ifx-number-indicator",{key:"7f23f496e092620072611035bb2250bf5919cce5",id:"number__indicator-completed"}))),c("div",{key:"01d0f861f555f0e60c6a8a2d513241649a8301b7",class:"basic__info"},c("div",{key:"6084f3b7bba5810ed16df121a953864c026f86d4"},"In Progress:"),c("div",{key:"74d22aad00e2495c3c9bf3dab3f675ff3257dbc4"},c("ifx-number-indicator",{key:"d59565494d14dffb985a88af24d2d34480574e53",id:"number__indicator-planned"})))))),c("div",{key:"b9f72818d31f4dd85be575312e70abcf3fecaf03",class:"view"},c("div",{key:"9867aee3d100a50b6c9bd83bc9eb29556dce8897",class:"wrapper"},c("table",{key:"18a929925c3236ed37fd3e5c396bd044c7696636"},c("thead",{key:"ad7da6bc1ceaec28456d1c4c16365831ac1a60ff"},c("tr",{key:"09a3847e2f551bc083bac83a5f40af7d9b26e8a5"},c("th",{key:"e9bbfac65fa077813f8f5e57ef0556cfa762fc6e",class:"sticky-col second-col"},"Component"),c("th",{key:"62e6dc93a9091ec67a47ed36304f9323e1758136"},c("div",{key:"71c3cbaaf9c39516a72ee566af0260c8e0c98304",class:"version__wrapper"},c("span",{key:"21d66589a4a581064b17f792006f33dc376ef4c1"},"Version 1"))),c("th",{key:"9a78d5fb14ef287c8756054fc73a9fe0619e1778"},c("div",{key:"16606e8bb412cb0b1f1a77300143acf5fee5afa1",class:"version__wrapper"},c("span",{key:"4e5ee3bfeef2ef951b463b0db12627316c6b2c6d"},"Version 2"))),c("th",{key:"7bb8c744647b69ecdce4bdb9b25960de044392ac"},"Version 3"))),c("tbody",{key:"6a0b5bf697153c17de5239ab5ba5ce2c0b662fec"},c("tr",{key:"4b35600fedb93a7273ed9796309d0b0798eab586"},c("td",{key:"18b1ab8b946a94a0df1f31dab003cd3cd0460ad0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9f9583ee46a6fe2df24ef58f0542aa3a318ad946",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"741df479f3b98f175c64b97e4f9674b85dfcdbfe"},c("ul",{key:"1ee3c54cce8d7933473f9773fc3cee0566e9d36a"},c("li",{key:"caa1247bfce3f8db182b1e30eb376e0c2014ab08"},c("span",{key:"6d1c1bab4aa83db8f22be194d8a41ed554dcf80e"},c("ifx-icon",{key:"db154ba6ed91ece3a7d3d0c0ffeac5fcecff612c",class:"check__icon",icon:"check12"})),c("span",{key:"87623a3a99397d3689e3a18da0b828cbe3452182"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"2ffeebe94235f4302811958badb1f43ff72bde79"},c("span",{key:"b1a092c93b3501d5d11c01a285779a895e77445b"},c("ifx-icon",{key:"10ae6bcb0c9abc5387aa9c78da9d9988be27e7ce",class:"check__icon",icon:"check12"})),c("span",{key:"982485647ec5c8948e2b4c664c471a7f62119ad5"},"Adheres to web standards")),c("li",{key:"d2c6aa8064b4eca8d60efc150ad48bfad4cfa7d8"},c("span",{key:"efe6a75938a88aa241485a4d9aafe8a630f38983"},c("ifx-icon",{key:"bf5352ca14b5fea51f5263446cee7b0b8ea7a9fa",class:"check__icon",icon:"check12"})),c("span",{key:"4f5c4f7cfa49bd35bbecbbe405b6261fa44356c3"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"a93ccb811aa05743ffb6807dffa3c6e2f945a3c3"},c("ul",{key:"f593870bf247ff4173bf9f5ff44e372b4a66682c"},c("li",{key:"2195e3641838269a2e5637f9b13772d8fb248abe"},c("span",{key:"1e00a7bbf2e77b2504c2aefe524a7a4b3dc6e1f3"},c("ifx-icon",{key:"a1b3ae4923fde1e557df0a7d2c89c979e03c75eb",class:"check__icon",icon:"check12"})),c("span",{key:"2ebd7f142b1ab58c5a562cfc468adc8274039e1b"},"Auto collapse feature")),c("li",{key:"6e1c1f711e3867faf440abf53749e22332d74f54"},c("span",{key:"fe7770993702c0ca663cf6698272658645b72571"},c("ifx-icon",{key:"e582aec4f5db995ffb34f461dbfedfd72e8f5381",class:"check__icon",icon:"check12"})),c("span",{key:"ca0750b559365b793c9077466bee1adbc03a1047"},"Initial collapse feature")),c("li",{key:"121d3b2d82e4a599e6947367e3c43280065f1bb0"},c("span",{key:"c2446c01c5d01e5097072190fcbe34b54a708b01"},c("ifx-icon",{key:"e45f4988ad277f08ce959cc614e0d92c7a4b2c22",class:"check__icon",icon:"check12"})),c("span",{key:"aeb7120c154779ddefcdcbc464553b8284670e72"},"React, Vue and Angular wrapper integration")))),c("td",{key:"bf62b55fc1018ae411b4dedc41c253ffca2b28a8"})),c("tr",{key:"aa62b6436dba2de08b625424a5f8713d993900c0"},c("td",{key:"e067e7124ff0651017441c12cdfa56b25613e50b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0b96fd8cf83ec03c21f45d76f462d502a1fcfc5c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"28d2767ef999b6e2f96c4e4023a17efa4a2a713e"},c("ul",{key:"ce85adeb9c6aa1adef488006d436b80b4126ebbe"},c("li",{key:"d15b621da623f6c53a6e9a10587ec89cae15e19e"},c("span",{key:"0949fbc63c900cf97af5fb421bcde5050f646e79"},c("ifx-icon",{key:"f3bc5784b0f7420fa22b7b613053d27729b92420",class:"check__icon",icon:"check12"})),c("span",{key:"1ff70705c0859ec8d32bb5805a715c05804855bc"},"Provides a lightweight and customizable interface for presenting alerts, including options for different alert types (e.g., primary, success, danger, warning) and basic styling configurations")),c("li",{key:"a312085284b8b41e984a54d286c68889f3c9e2f8"},c("span",{key:"77831b44f076e197bc679c3e18de497901887222"},c("ifx-icon",{key:"c139c2085c225ce617fddf0d9505075fad107ebb",class:"check__icon",icon:"check12"})),c("span",{key:"bfd821990f7ab177bed7e41a1c0fa8ecb6d3dddc"},"Adheres to web standards")))),c("td",{key:"3812926554da1262c57e36785153ae2e6fa62098"},c("ul",{key:"1f4ef90af889cb8a8714591a2f4c6f57acb721d1"},c("li",{key:"568fac38e691c8f2d62f15918105e443f0752828"},c("span",{key:"d429badfa058903f30dd7d481ab020616080ee06"},c("ifx-icon",{key:"03ac84d67c27dfd06baa7b92ee0c863c9e81eda7",class:"check__icon",icon:"check12"})),c("span",{key:"b7508f13f1af4d71c4999a6894bef0bdddd1fb76"},"Configurable close button")),c("li",{key:"599e26819808b24a889430eee75ec668c9fae8b5"},c("span",{key:"5664a4fb9d062b845cf8573e6d1485d89e8875ef"},c("ifx-icon",{key:"1a18c13b1a9f415472e2d672304d186aeaa1c527",class:"check__icon",icon:"check12"})),c("span",{key:"e836af731eb06b57879480458ce332b1ed284a6f"},"Additional Info variant")),c("li",{key:"d12d18cae3c9bb2d3e55af2265c9b55146dbd060"},c("span",{key:"c9b277ee214281c1c2b53fda5da8b871caaf1904"},c("ifx-icon",{key:"331ec0c0a7b975bde0be5ec182eeef1ebe0ebda8",class:"check__icon",icon:"check12"})),c("span",{key:"c3dadbbcde88e579d36d1088c4ecf8debc4f5a98"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3b83a57a5697393b8cc2cb05de60bf32d0bca49c"})),c("tr",{key:"2dccf2e5c13278a20d726da24f89a17451a2a27c"},c("td",{key:"d69c69443517e3b5a1aede345bc20d4fcb6f377a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d32988ba8979f457fa6135f7082f77371822f1cc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"e101c6665e461f3ba5b5fe84f319917435e07db1"},c("ul",{key:"9d7a342ac84c8bdf2039a66bd2e25e1508c0c03c"},c("li",{key:"23a652ccb90e045d439b1c3c349819540c15c5bc"},c("span",{key:"27324d1b95e9c52131c0d29d2f23b9cc0d86af70"},c("ifx-icon",{key:"2a1169980e0a75a8582ed2abe51ac50a44191731",class:"check__icon",icon:"check12"})),c("span",{key:"404bbbf2c3f03325c33fa8f2390e21bff8a249c9"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"d7e6be905641666158c0ac14dab10a3448c8eaf9"},c("span",{key:"2e8c94995c2ed50bf9836eab2b18ec39cead0940"},c("ifx-icon",{key:"e6ac4fa5870783a9a8f76035200029a04f9d07f4",class:"check__icon",icon:"check12"})),c("span",{key:"4b01ad720a616165e750a2f6fc808630306a2fdc"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"552193418f94022faeb788421f308ddf50e07fe3"},c("ul",{key:"b773af5bca3d01171db94a998f484a713c761268"},c("li",{key:"9f1fb2f9867ecb0e99040514c4581706b763ee2b"},c("span",{key:"3364a590dbc0edb8e6f2dfa21cd0554450e55b6a"},c("ifx-icon",{key:"7e2195d569f9c431a0e86d17a06b443479f9b01e",class:"check__icon",icon:"check12"})),c("span",{key:"c0cbe3c76778775687368ff1c09a72955c83455b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5ec4de7627de88554141f36c9e6b0e3ad542afa9"})),c("tr",{key:"bf12833f07b550e93f19fb83a4f7f83c4a62c395"},c("td",{key:"da0f00b020ae6f7f47883535cc1644e42a86b1c5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e485092fe443a3640d608d84c67a8c97609134be",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"10676971314b609f7f2a2af187b7c547cfe0cba6"},c("ul",{key:"1c2eb802b2f029ac176b084f7550b97d7257e720"},c("li",{key:"a888a2a8ade8e28ebc6c616524d3b79c95b81f39"},c("span",{key:"328296aa044e6ae0a3c25e7023fd9769ab3aea23"},c("ifx-icon",{key:"274aac75f05d13e25ec5f59d105f115f823fe032",class:"check__icon",icon:"check12"})),c("span",{key:"b0e3904e34c6f070492ad9c23ba6ff34b01607cd"},"Provides a simple and customizable way to display a sequential trail of links or indicators,  representing the user's current location within a hierarchy of content")),c("li",{key:"097559b6b3af05c16fc23336ab332243322097d3"},c("span",{key:"70762e0af7d6b42737181c04c71d8eb067c263b9"},c("ifx-icon",{key:"bb1ae4adfe35a5b8f58d5245534ea36a70569a2a",class:"check__icon",icon:"check12"})),c("span",{key:"8f908cad75050bed5e541d36ed4788cfe5143218"},"Adheres to web standards")))),c("td",{key:"56dfb1f2fd5677ed11debf10df940956a5d1d667"},c("ul",{key:"a2ace425332e2ac50480d1c0894d9757b8d054ac"},c("li",{key:"c65e160123cb83072831c6bd2aad19b98843e233"},c("span",{key:"1982af53e658625d77f8b6b1aed9f2ef375f91f8"},c("ifx-icon",{key:"f948349d328be5ef5514040776a58d74adf6cedf",class:"check__icon",icon:"check12"})),c("span",{key:"46f7535f8b59723c1c923398d72488087dee210c"},"Possibility to add an icon")),c("li",{key:"2f3c2e1118e19e5c7d0d10594bc58ad5066c8d7d"},c("span",{key:"95b15d5d353a9ec4492311202cbe7f2956156576"},c("ifx-icon",{key:"0d251197abf784c238f8e76570ff7543cfbf40cc",class:"check__icon",icon:"check12"})),c("span",{key:"ab0e610fe33259cbc45c973f874096eda7e260b6"},"Incorporated dropdown-menu for individual items")),c("li",{key:"32ed182c76bca5a479055b48483ba00264e72001"},c("span",{key:"160604fd4fbac37f6b9c9d3c486904a2912d2bc8"},c("ifx-icon",{key:"5ec254ed8e1e8b25043362ef9cac50168f9fa03c",class:"check__icon",icon:"check12"})),c("span",{key:"492a770f0ca3df714270d1bf0d30d4e95c98e832"},"React, Vue and Angular wrapper integration")))),c("td",{key:"692b2198f9914ca13c3986e0a6ce45082f73ffc5"})),c("tr",{key:"7d12279f465dd972d36a76bee9a5262c9e6cd175"},c("td",{key:"c9097503fefc6f00766d33c5215ec35539b0b057",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"09940ec0e9078279e9485775224e250b72cffa7f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"af4521efcbb18ec7bc36a1f9c7b672431ad51ebb"},c("ul",{key:"947d74cce09279d27caa7e107371db12c82c58a9"},c("li",{key:"f048b19f757a6243ec01cf42be27aa9a8c939771"},c("span",{key:"a9da81d448e5aef3f9e5860da8f0102b22c24520"},c("ifx-icon",{key:"56069be8c06b115248df77c48c720a91b3a362ee",class:"check__icon",icon:"check12"})),c("span",{key:"4d420877e70aa9a8f51933bcd708b01e27a2ea16"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"807072181e5f7a3c94e948b3c8ac374150d9f421"},c("span",{key:"44adc4a96836144e2a98ad88f55f232b7912816c"},c("ifx-icon",{key:"011e0e21f94702858da89d728da91f95443e7a01",class:"check__icon",icon:"check12"})),c("span",{key:"218654d54aa86360e71dffa110a294ef88015b33"},"Adheres to web standards")))),c("td",{key:"c74889ca4cb050942cc4aa93d8640ea2b9944d2a"},c("ul",{key:"5c35b19a459f4c1d72020a87c2fc3c08fcaab23f"},c("li",{key:"03e76534ec5ee676972de7628cc502438d5f94e6"},c("span",{key:"3ff7386ba038ccdbf3a1507f11aaaa83efc0eb37"},c("ifx-icon",{key:"ebd7167aa6df6840c0c10db5c7a42a1d89d48e1f",class:"check__icon",icon:"check12"})),c("span",{key:"1773f81bcabf9c97fe45fc361972d089108c683f"},"fullWidth feature")),c("li",{key:"f80b5e58fed4e86732a32187cff63fa006fe2337"},c("span",{key:"ee49fc369d149610e8dfd5f351b590f0b8ff652f"},c("ifx-icon",{key:"6b833f8dc40aad9562d956deb932ddf86edf5a38",class:"check__icon",icon:"check12"})),c("span",{key:"d8b5ab1e8c08358803b1b6a24281f0d2cde17e6c"},"Icon integration")),c("li",{key:"4035b623d93a6cc6e56576ab0072c50aa01fd267"},c("span",{key:"01774d14dbe12000f485adc51aff4548ebfa6623"},c("ifx-icon",{key:"410b0b1479f48c2b7e4d95d808fc9505d6872d03",class:"check__icon",icon:"check12"})),c("span",{key:"1878a0270ff44a6d91d8eb8ed3a1fe7aee03bfb0"},"Link integration")),c("li",{key:"36245d557c208f7c0813cb3aea31fd397512773c"},c("span",{key:"ac8761299bbb9740c8758fc38b6b273a9f8d42f7"},c("ifx-icon",{key:"a1888a45f80823417b0889128bbc0fe57ca01715",class:"check__icon",icon:"check12"})),c("span",{key:"b699c891f71b1d1e632fa4d74d4ffae9077950dd"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c7f0cd9baa4aefefd02ef3da04d5e97a94d51de5"},c("ul",{key:"743847d49b51c1b48336aa57ab22a28730241f56"},c("li",{key:"17731d6ff85e051f11a67c15a13caeb95c7f756f"},c("span",{key:"2d3c7ff41321e9ed92227ea8ca5d97439bb53dba"},c("ifx-icon",{key:"185e10fcf1f5c4118c61767a6f497dc70e7fdc7a",class:"check__icon",icon:"check12"})),c("span",{key:"65985f67c112452ade82a15be7cbe9b11b87113f"},"Form integration"))))),c("tr",{key:"073978be5a2433cb26d159eb60db96622c9b52b1"},c("td",{key:"966c46a836b5bc4ccb877862794def34db64d161",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d222ddf565fd49381bc9a3e2001f8faca9ab8553",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"fa37fc021db910b6abd4a45aca2c121fede2cc15"},c("ul",{key:"4ab119e3a221cbfc2b35c7788350e365dcff715c"},c("li",{key:"6e41a8ad9a49c99fdb3eeae9f4fc085af43b36e8"},c("span",{key:"c42065d7a1b2dc3e01b0bc66b4f949149fea008f"},c("ifx-icon",{key:"128af1e24ab7ef10105a0b9bbc55b8f4ee9b49a9",class:"check__icon",icon:"check12"})),c("span",{key:"e74ec08463a610fd340053534e72ab3b251b13c7"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"fa6617fa4732dd5b8102f80ee64832daf7b06573"},c("span",{key:"0c58dcb3ff749ba092d3000944ee71c75ad00f05"},c("ifx-icon",{key:"0065adcce90c0c5800d629253058081024a01b70",class:"check__icon",icon:"check12"})),c("span",{key:"afb6313b28899b6784d209d4017244320a134785"},"Adheres to web standards")),c("li",{key:"ab7c0bb0481cd8a815e19165cf6480f3262b761c"},c("span",{key:"6af9d02c0ee64ae9126b5cd7ce282de3fcb2311c"},c("ifx-icon",{key:"a068465736c9774bae8d04a6b084b65e93ef8147",class:"check__icon",icon:"check12"})),c("span",{key:"5ab98bc11512de6966e4de04fdbe9f410916d854"},"Horizontal and Vertical layout")))),c("td",{key:"6461affe6f2169727626bc041f33d3cdb3c69e07"},c("ul",{key:"84363ddf7576f4c4822160ac5972edc289ec0941"},c("li",{key:"e49138d458c088c23a6790fc54ddb82449aaa065"},c("span",{key:"6a3030c16dee6f26caa268a7d99a3a4707ab0572"},c("ifx-icon",{key:"cb149db9244a3034084e4444260cdc1567db45aa",class:"check__icon",icon:"check12"})),c("span",{key:"e7982715ed5eb1979513f2adc61e1a187caa04cc"},"Possibility to embed multiple buttons")),c("li",{key:"ae862a2832efd043229df117de23e37384c5f421"},c("span",{key:"77b213a583708020c7a0f0cedbd7c2998c85bff2"},c("ifx-icon",{key:"62c48da400f8dbee5edc29a6b01d5269e4e21a2e",class:"check__icon",icon:"check12"})),c("span",{key:"5c35dd4b7cd4d0a26a6030c04db9a484436ca61e"},"A switch between a Link and a Button")),c("li",{key:"65fdbbce9db9e9110b7eb8172297461105759b81"},c("span",{key:"f1412ef7154aa6eeef2c354b3f524ffd1e15631b"},c("ifx-icon",{key:"f067209891c3c3b67586f803c5f13362a63d65ea",class:"check__icon",icon:"check12"})),c("span",{key:"af61076669311a485836f870b972a63114420489"},"Enhanced stylying behavior")),c("li",{key:"22de200062fc35c73896eb4b44bb96584a2952a4"},c("span",{key:"136519cd2c996fffd5282425bdb4b59886fffac6"},c("ifx-icon",{key:"9a97641d4723fb006ad73e66c46eb47e5593bffe",class:"check__icon",icon:"check12"})),c("span",{key:"28643f7ff87a9085323dcf1a63ae6586243a3f2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"25804542691d73bc2fd57f211c2da636a6e272db"})),c("tr",{key:"e5f8b5ace3be4c59db9ba81d407d394baeda11f5"},c("td",{key:"53e5f065d6b078819646eaa36e9de114506f5628",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2dcfd1775931a6dd35468093d6934d21462cc2e0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"e1532b4b8a420bd6b0d002a9c358272a960f9343"},c("ul",{key:"1a9af8f007873c07fbc9ace6dfa468a9b82736e2"},c("li",{key:"59c3d0e0447aa8bc362dc91e920423334ac5e2ca"},c("span",{key:"62988d2dce63777274e504688a7d55824b21f197"},c("ifx-icon",{key:"f8409f4aca853fdf5fe841ac4151b42a4b231b0e",class:"check__icon",icon:"check12"})),c("span",{key:"7bf203ddd371641983494c56e5da252e05f2c8ac"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"cb08b8f49a44ca3ce25eb196ea8825084d24a102"},c("span",{key:"b748594104b57b1e4d97a974c83e90c1438100e2"},c("ifx-icon",{key:"dce9314a00e10ffbca92fe5620be70af37cd6bbb",class:"check__icon",icon:"check12"})),c("span",{key:"69d4d30939b27bf71ff62a5b3e1fc4b839eac6f3"},"Adheres to web standards")))),c("td",{key:"9eab4c00ffaa821f0a37e91e994a148b88ad224f"},c("ul",{key:"79018660bd80be5f655dcef60a29917c0954824a"},c("li",{key:"b174369c51d4669625896ec0ed97559cf32042a7"},c("span",{key:"ae499dc8b4d8cb690e38147bf915c3132a9f65ce"},c("ifx-icon",{key:"7ef8d62dea8d03d9cf4eaa3e63aa2309a178d9d4",class:"check__icon",icon:"check12"})),c("span",{key:"45fce79459412e781f1e5734265a0deb94874c43"},"Indeterminate state variant")),c("li",{key:"1dfd98b62c8f87f3bc9d1db542934ec3a8f003d3"},c("span",{key:"6820901079a529ef1fd7d7c5dd8fb8fda9cc7cb5"},c("ifx-icon",{key:"cedb9bf658130e16111b6c01e9145a6ba0ea1211",class:"check__icon",icon:"check12"})),c("span",{key:"7ee92989d691173ee2a9b3c090c50fe12814d15b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2c22a72ee0064a2a4d42c23caff25536550572a2"})),c("tr",{key:"8cce7defe303b93086f6cc97c705d0115c9d7443"},c("td",{key:"7a31537ba869231c2417509226e8e8a29381059a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8f2dcbe679be1e392d5632f03b381387ea4e87d4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"bfd76a35363bbe9e33b082aec29a53451fc16762"},c("ul",{key:"adfb3282d7bd486f095b45898da20f39b9fe01fd"},c("li",{key:"2aef96de2c378be49fbf78c431714cc0db575e22"},c("span",{key:"5ffa6bc22d6ff0f0e9547fe711a165bdbb796de7"},c("ifx-icon",{key:"1c6b513f222c9251be5f676beca58d728419e89b",class:"check__icon",icon:"check12"})),c("span",{key:"4f80a4318f5fb10c4203918a48a2abf224b42d4b"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"7d045c5bae4c5880f815d728097c1055da6bc325"},c("span",{key:"276e13300124cc829bc28ee51adf53909e36f1f0"},c("ifx-icon",{key:"ad643b5be402f68379430b3d66b64ca5442bb93c",class:"check__icon",icon:"check12"})),c("span",{key:"d4ea5de078b3ea557c1faae495e913c67535e379"},"Adheres to web standards")))),c("td",{key:"468a0cc9fd6bacbdcd0b56bd96fabd7a11369c1d"},c("ul",{key:"fb6d7f9c1054d7cdeb17f0269d20fa6276d8ac08"},c("li",{key:"857ca8b843e04c7951da34faa94a64a7a0959ad3"},c("span",{key:"e77b57e4c444ac70736d5368383b61ab684732eb"},c("ifx-icon",{key:"6ad1be409c5c7ea7aa6a78a3a98a48eb69235926",class:"check__icon",icon:"check12"})),c("span",{key:"824f24eca38dfceb8f70288c4c08c798783014d4"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"81fab2d1a00159658693b3e1e2525d55e09d0ed5"},c("span",{key:"90035feffd96860f95b8e10f36b70c257aced043"},c("ifx-icon",{key:"0535f45b8a6f048ba8f453023c45b13250be836b",class:"check__icon",icon:"check12"})),c("span",{key:"a88606afef47e35921706377b86d55cdc979638c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"811e89d5942fa76a5d83931a92145b0ad3de9b0c"})),c("tr",{key:"96b324792cee3ec3f4e4198c4957852b50c6c167"},c("td",{key:"d8a8fa30f02f5ab92bc9fc2a1e901d95e2a41681",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e60526485e40d381402147e50af8d7bbc1097abb",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Date Picker")),c("td",{key:"25ee1fa072b09a2ad97cb15e1840ee1453583544"},c("ul",{key:"64444eae88f64ed5beab3405c3e0b7ef4279f318"},c("li",{key:"ec9795ca62ad50e179daf254fa9665bf2a0c7df4"},c("span",{key:"cbb8a7e9a1d68833f940893a50f291f47ab88860"},c("ifx-icon",{key:"63ce68a1b077d92bef217bd07dee341f6a84413e",class:"check__icon",icon:"check12"})),c("span",{key:"10a7d47ebaeb7fdac27a913f5a6504d971f484a2"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"0086c0c19124fbab5b25b5ab05a0fb8de8942057"},c("span",{key:"467346a20d64727ea2faf06fbf013a8e22076365"},c("ifx-icon",{key:"5fb3a04fafcbe3e5abb91408b8a8c2d1ac074e76",class:"check__icon",icon:"check12"})),c("span",{key:"1307e293b70767417a945dccf4e6250156856839"},"Cross browser compatibility")),c("li",{key:"e0dcbff2e50f4b2f7ec10c12a4ca159163fa1d9a"},c("span",{key:"2f87d3804766ee944caad52695d09d31a315785c"},c("ifx-icon",{key:"7bb65e3b2c122754f233c5c64dae1b5acdda6096",class:"check__icon",icon:"check12"})),c("span",{key:"b2450d7c9add50e72826b93776b19a9d43f2636e"},"Form integration")),c("li",{key:"3e512eb3e25c28174162a0be695f807d04c31cb9"},c("span",{key:"db10e4885e14d6e321251584b712c08d29cb5228"},c("ifx-icon",{key:"f9058a6d75d2103a8d75567888d717e9b2c88dcb",class:"check__icon",icon:"check12"})),c("span",{key:"f6a0ac9ac19101fa8805097fec38f1ef9c175f09"},"Adheres to web standards")))),c("td",{key:"de8d66036f95d8a7b0d395ff8c665c97bed248e4"},c("ul",{key:"5da0ed1a609ad61c3fead92f7cf1f2346ee40d88"},c("li",{key:"3b43d43ea565eb3500ca42642d075dc20e6d1e66"},c("span",{key:"389de31e3c4a3d86ac7e5af90895f130c03dfa08"},c("ifx-icon",{key:"82348cd9285c9b5cc0266080be4c5c34e3cc906a",class:"check__icon",icon:"check12"})),c("span",{key:"875c24cb28a583ae352b0076222bcfb0b2817e69"},"Range")),c("li",{key:"225f49951c514d7434ca5401f6abb8d4fb0febfa"},c("span",{key:"74260a89705baab307fc95c638aa93118129d85b"},c("ifx-icon",{key:"44a2584c2e08f12f2219d8c7c63a3abe9e1f3870",class:"check__icon",icon:"check12"})),c("span",{key:"3012dbcc92b6834f10e04d910c4b5024bc549a13"},"Default value")))),c("td",{key:"f9c783db16d608f3b2b2cbd479b882537a76ec3e"})),c("tr",{key:"32c06bb6a7ad47519dc77845622b8c077cf3545b"},c("td",{key:"48b2908fe64df0410f79530451bc3c6c2c5137e8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0ecb46ae355b9dbb2842998b1bcf8e24c30c8e2e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"9ea4a906113e4e851bb2d7d3771389be1eb18f6e"},c("ul",{key:"6c85a58d6d1e8c558208cb63aa8634bbb72d2729"},c("li",{key:"8bedbac536362a1c2f029cf9235a183ff035cfaf"},c("span",{key:"afa956e56b0b99d2a8cb9cb9612a1f6b44f7c175"},c("ifx-icon",{key:"4472408ff6909400b79ab6069ce04dfcec1e80f9",class:"check__icon",icon:"check12"})),c("span",{key:"448f0bcc3da48b167277caf9d79fe25791a3dec0"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"9a65f2d6db33dee28a68e929c83ba5b2ddaf4258"},c("span",{key:"403d996af567bda385adb6da567ce9b2546d23ed"},c("ifx-icon",{key:"9532abc8a47ba16685927fe4b0c00ad90dbaa936",class:"check__icon",icon:"check12"})),c("span",{key:"5e680066126e6b9ab068d4bf6c1fe86136762bff"},"Ensures consistent behavior and compatibility with web standards for a reliable user experience, while intentionally limiting customization options to emphasize a standardized appearance and behavior")))),c("td",{key:"3ba01abbe8f20b38a718bb5bf9f1d68a0c665207"},c("ul",{key:"ae64266b1f3be19044aa7035e7989bd5bcf2600a"},c("li",{key:"a0e29b55c30bb0df07db204af262c8d7d654ca35"},c("span",{key:"ce23f4ce6035b5aaa888647fe677e86526e77f71"},c("ifx-icon",{key:"1ead17135e94b4bbd55f0382a694ccb834047f3f",class:"check__icon",icon:"check12"})),c("span",{key:"3559b5ab317d300aca6f796cec3ddb31f1843cab"},"Search filter")),c("li",{key:"713df807fd45338c5df384f5a304c4c8bb64bfb9"},c("span",{key:"7b5e3898803cf6cc2f8ad34cdd53636f7eaa5dad"},c("ifx-icon",{key:"39eb41648470ddabdd87baf7b5081a81ccfd6ad7",class:"check__icon",icon:"check12"})),c("span",{key:"a6baeb09d8087f4a0735190bc023f4a530a9ebb1"},"Header section")),c("li",{key:"200b0e1842122801ffcc5ae3da6367a827b5629c"},c("span",{key:"ebc0ca220b9bb6456aef12c7957a315813dc19ef"},c("ifx-icon",{key:"ae3a4a4ec1cde11c374810aec38e0311832e58a4",class:"check__icon",icon:"check12"})),c("span",{key:"43c2700d66d2c0b403b98ee1148c0760b08af425"},"Menu Item Divider")),c("li",{key:"15c7d3bc95fb18a9b7287a505b708f9a07b223a7"},c("span",{key:"a92a0702e3b4c7951c54399c43c97ba9f733d53f"},c("ifx-icon",{key:"09496252f33eb587caaf330e94d82b77562c6b78",class:"check__icon",icon:"check12"})),c("span",{key:"b5a19ddb0b5ba69b9c12f4fcd82499233d1014a1"},"Icon incorporated")),c("li",{key:"42756e52088f528f508eb38dc15474c183d558c1"},c("span",{key:"f76d236a2c0783f83b4a8f7a537f1000f355e909"},c("ifx-icon",{key:"4a6ab3b210b1b72ffcb2d2f658dc254d0b0b2e27",class:"check__icon",icon:"check12"})),c("span",{key:"8c2248fd26a4a29b64cc2ab4359e5d74e9839fd4"},"Extended customization and configurations")),c("li",{key:"36d25fd7dc6aa254ad14838c41f20a110ac62436"},c("span",{key:"309584dbc9836508680bdf839aebdf6a5df8fc90"},c("ifx-icon",{key:"0548d084024c4deb9f010b5b3e0c398584c2d57a",class:"check__icon",icon:"check12"})),c("span",{key:"863fe2e9643e988672c5f6d472bbac2d3d4c853e"},"Separate label trigger")),c("li",{key:"b3e517beb884712beb4e94eccc8f0d1bf1effd9d"},c("span",{key:"6ef8d765a5b660698ccbe056c90ec893fefedfde"},c("ifx-icon",{key:"0b4fd917f97d62739decc6483ca15015955011b2",class:"check__icon",icon:"check12"})),c("span",{key:"24b0181638a97ae49c982a275a745375ab50d55f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f36cf5c1d2eb41c3fb21dd4024a7aae88334c819"})),c("tr",{key:"6f2ea4aaafbf715bde53459eb912329811b6dc50"},c("td",{key:"cd8eb9e6d6ab07abf816e195ba587203f9d3cefa",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b8718bb486b5741ada4df4922ceaa3b36fc0636b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"7816efb2b94fce1a598a12f9a8ec9d97e1434fc8"},c("ul",{key:"97934440d2817b679e896a3b6647e870611e12bf"},c("li",{key:"f5d7d88d3ec2a61ee232e9c0161b974034a61f8d"},c("span",{key:"e4b07de845c5ed9c1d60051153da7c8832d379e3"},c("ifx-icon",{key:"528100e0763929fa0c015076f838d2e6ba87c85b",class:"check__icon",icon:"check12"})),c("span",{key:"3cc2be87083b4e7e90d67399e6227ba11723885b"},"Provides a standardized and customizable way to display essential information, navigation links, and branding at the bottom of web pages or application interfaces")),c("li",{key:"a103022de87008e057ef4e8a86d31bb729dd8560"},c("span",{key:"1e2f54eb341f2cf6224b68a028a7aabd2e894480"},c("ifx-icon",{key:"2518bd2a77087da98f9706e82d5eb301f86a5043",class:"check__icon",icon:"check12"})),c("span",{key:"b6117adee36c130265bc8f95dddbd5c3c8a14ebf"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"e71cfaddc3e288da21faad54a2af30efea3c758e"},c("span",{key:"3e0b48ce85cde63f473fb5cdd4def8bd8c4df2fe"},c("ifx-icon",{key:"1d0cf6a531cffc30bd72046d7597fdd9323202b2",class:"check__icon",icon:"check12"})),c("span",{key:"f528fcac8998245ce4df78dbecc5703e53fb970e"},"Adheres to web standards")))),c("td",{key:"9e2eeabf4b8d579438db57f70d10c9e350ae9085"},c("ul",{key:"a09e70f0f122d2b3a2631f18a7e4ec5c6e13c35f"},c("li",{key:"f96afe27e8df142e0ec269d2127835dcb76d24ab"},c("span",{key:"5f2d586bd7ee4b3c53d59676a0d50f6ea5bdcfbb"},c("ifx-icon",{key:"23abba45cfcca5fd72e8d62fa276148fa10d12b4",class:"check__icon",icon:"check12"})),c("span",{key:"3dbc679b01da8bfd0495bc526f3fcfd8495a9393"},"Small, Medium and Large variants")),c("li",{key:"f5baf0f8c8a4cbd41cbd109b19c2f99f7a228eea"},c("span",{key:"25c9c6e0b7d1530f9023792c7a40840b175e40c6"},c("ifx-icon",{key:"50792a4ddcf9ac8d338f9cf95b6918b383bfcddc",class:"check__icon",icon:"check12"})),c("span",{key:"263629fc11d899afd53a041ec8316005caf02cd9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fd6d7d1e239d8112e684cdfa254cd9382b51a783"},c("ul",{key:"10a96228f0e3b92d449a6db9728572302244db44"},c("li",{key:"2948b4880320afaf7fe6156971edda2dabb018a5"},c("span",{key:"a848e817d17f3e1c09f959088451ff44e806e4fd"},c("ifx-icon",{key:"77a8b79aef1f0611e2dea8ed791cfd10197466ec",class:"check__icon",icon:"check12"})),c("span",{key:"1877d0de9c9d5f999e3c37eea90d70ccd5c1bf39"},"Customizable and removable links"))))),c("tr",{key:"f4e630d3206382d5e012669c03ca3ca1a4448b7a"},c("td",{key:"441222d92f97adc5a6af52e2588e1f9d6c532fef",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9ce9ee480ebcc12b38f15fa3181f62d5fd3fec60",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon-button--development",size:"s",variant:"bold"},"Icon Button")),c("td",{key:"9765ba45af6c6e858cb37a2c12d5c1ab272284e1"},c("ul",{key:"93621dfd931179badf5df3ba46be01e574c97f30"},c("li",{key:"3d4b42ffc2914496bc56a81719239952fe3602c2"},c("span",{key:"f93c9c86497739d28b3bde3e5215962825c6937b"},c("ifx-icon",{key:"9287c423870046994582bc432d3186bac97207d3",class:"check__icon",icon:"check12"})),c("span",{key:"164baa9c0e1ffa41b6bea9bee607d71e6480d78a"},"Offers a compact and interactive icon-based button element")),c("li",{key:"fd11c2d1aaf9ec98dcc75a645b5b04fe344423b9"},c("span",{key:"f37cb82e1bb9f8910d400ffb9c4fab748dab93f7"},c("ifx-icon",{key:"4493619722e9ac0bfe89cce4db02abcc6dae2227",class:"check__icon",icon:"check12"})),c("span",{key:"a4fdefd1586e59e69de77a775631800bc9b9582f"},"Provides a limited scope of customization")),c("li",{key:"f4b78e8cd96c30c7e055cac26aaf473c00fe259d"},c("span",{key:"622cbc2587c48de24be317c50ed6dd279adb921b"},c("ifx-icon",{key:"f1a979ecb736c15e6a3649b2b14be82316346288",class:"check__icon",icon:"check12"})),c("span",{key:"6a8623ff32d2c2335dc95b000531249ed01b2359"},"Adheres to web standards")))),c("td",{key:"08f8cd5412ce9bd93acf9acc7238c6401ad1b523"},c("ul",{key:"3d6f6aefa3bac4162376874c28f520230a77bee4"},c("li",{key:"24741945101e3942e3eb1d38d87774b5c8b13975"},c("span",{key:"2189fc6086caa84573c163b48918e7f4ede5411f"},c("ifx-icon",{key:"f38680659022b54811d3974d5653375771bdf39d",class:"check__icon",icon:"check12"})),c("span",{key:"73262adf9158f88f3658b17b15bb81346fcf49c5"},"Additional Round and Square shape variants")),c("li",{key:"72b54ab7a3ff994de2d2b7feaceb854b0d502d2b"},c("span",{key:"c34f47991887c00df82b0285413daf80a82d7e0f"},c("ifx-icon",{key:"928711a3504478f4d67bac640a2c8d183d175000",class:"check__icon",icon:"check12"})),c("span",{key:"78fdfa3b132635f7e2ebf9f7ae272528fd961978"},"Small, Medium and Large size")),c("li",{key:"e6b2eb9a77593dc2738becc8e708f3342124c087"},c("span",{key:"29f8e7a597cf6b2ea53e7da435649f9b7cb89278"},c("ifx-icon",{key:"453c1cec44df3d87f595fc4dcf5059f5e505b8a2",class:"check__icon",icon:"check12"})),c("span",{key:"f26106c0dd6d2adbb53139ceb5bea8579bc3296d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fcd3ccafe3d185a01bc62285baae9e51203bb049"})),c("tr",{key:"5a0a74d7cad2bf3eda8a949ba4475d0bf67acefe"},c("td",{key:"453352681708befc403454c00bed7f5a36d648ef",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"460a0d547cd85e2f1b4b1cb196ab28ca89e1ee89",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"1dca9ea3c4c28d31e26fc35d186025a7cfc06581"},c("ul",{key:"bce599c3c1544a5060dbc9ecddfc316db5a40c1e"},c("li",{key:"29b8bf32a56f197be1d3b8adae941f6c53200204"},c("span",{key:"ad10f45b343edf12c93c58d9f3cda43b160ce521"},c("ifx-icon",{key:"9625d319be570091aa2deb5e754c0614aba1d710",class:"check__icon",icon:"check12"})),c("span",{key:"95ec4802a40a675dcbbbb576ccaf759a09b939ea"},"Offers a wide range of iconography options, allowing developers to easily incorporate symbols, glyphs, or visual indicators to enhance the user interface and convey information or actions effectively")))),c("td",{key:"98ecb5e64eec6b1e17c00307ae830cf4f0642ec1"},c("ul",{key:"c992a5bc54c78e32aba375d4b9a8433f767bf498"},c("li",{key:"92566fb1382bcc6aa8abf2dbf12b9ac0e684afff"},c("span",{key:"2a5fc5fe270a59a8db78b487d5542799e3bd6fac"},c("ifx-icon",{key:"88dcbc905e8a9926e3c5ee272c1b30615a1d59bc",class:"check__icon",icon:"check12"})),c("span",{key:"7d0849fe4f1de501979733c384d6e58a02fd9255"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c356e47865f9f27e8eeb070d3bb05ed43c137a39"})),c("tr",{key:"e71d4c9b148fab720c381a5b82de2f16cffaf508"},c("td",{key:"197d5c0e96c28cad7d7a623382349faad90e7527",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ba70c439eaf8998003e2f15377f342c34e1568e4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"0412beb18e908da5509b278f20b60a08085bed50"},c("ul",{key:"abfea8b0b9900c28106a7d5725be72f79639d05e"},c("li",{key:"192ab65bc6d15e7b28d10bd5cac12fff0eabc9d3"},c("span",{key:"0f2ac55c5fccedc8890b015a105ea9b218532533"},c("ifx-icon",{key:"642c7e8cfd346460f932eacb1ce12f07d5bbefee",class:"check__icon",icon:"check12"})),c("span",{key:"90250ae8c30f1a7c1ba42a8d670429418dddd8cb"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"8ad4782c548401e99ff420da084e3f54a22438f4"},c("span",{key:"1e792376a8163dd6fbd9d3f555a27369e503ea1f"},c("ifx-icon",{key:"9c264665a8bdbfa60e828ef0a675d7777c919fea",class:"check__icon",icon:"check12"})),c("span",{key:"30107a99f9af99a290cb034d688d5727d1b6420b"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"7772f8fdb262a8040b834e6e89dae0bcb2c13ef7"},c("span",{key:"882f774126bbf980d2fc4c74a5e4327a2789b4fb"},c("ifx-icon",{key:"00f45f637414b2818e3e0604f364285232f925d0",class:"check__icon",icon:"check12"})),c("span",{key:"2d7353fb6b2f6512aec22d2ab0842528cddae1c6"},"Adheres to web standards")))),c("td",{key:"ecc8d3cb167026ce1672da1e55666939e585ef58"},c("ul",{key:"9e95660f41a48478a0bc2ad39e9a407e047205b7"},c("li",{key:"40cc34c8c1dec834f1bfe69db7d7e7465bfc34ae"},c("span",{key:"81fff9c06d23feca728330f0529e45fbe80594cf"},c("ifx-icon",{key:"c0eba9e78716525f1f20fdcaff1107050a4e26d0",class:"check__icon",icon:"check12"})),c("span",{key:"47ff5c6004a34d304c20d73d450caae008b91717"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"6876e7bd28f38baea29046621219e6dcb03fdb8a"},c("span",{key:"a9f6918bc1ba8071bbd4c6464261e16376ba3bc2"},c("ifx-icon",{key:"940a6434602123fff6dc9b78db2112c874e98e5c",class:"check__icon",icon:"check12"})),c("span",{key:"8da4e63dacbc907cdc8c8b961a697ec3a950ff94"},"Icon incorporated")),c("li",{key:"908b7a0f888eadc200445d8e71332dc53544579a"},c("span",{key:"4324f52860a4e117edf155454f94d90a043bbf29"},c("ifx-icon",{key:"156dc13ce8a075d92ca3f9815983846250ee0e1e",class:"check__icon",icon:"check12"})),c("span",{key:"aedba0f7371a86f5aeb40febc56c2845063206b5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"014942eec9953eada08bfb76729f2a1faf700ac7"},c("ul",{key:"8c98af3e431d161a65642cbfab83695e9f35228c"},c("li",{key:"31c1473881e14df106626736657e76ea6b93166e"},c("span",{key:"d8f56a33be55e5d50440d55c677be9df0dd80ef4"},c("ifx-icon",{key:"4ed11b736f769a2c30528a8bbb062d46cec88a22",class:"check__icon",icon:"check12"})),c("span",{key:"2b7df2121df9dcdcb3dacb5e6bb75a39d250a8ca"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"9f4406ebb0c2513e5aa04e26d1ad819366ee92e8"},c("td",{key:"5f082f4cdc625c8a66523a04bfb5327b76895c9c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2b8660bd769f1ffb28fcdb9b06c9b8dc58581f54",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"6693e8fff074d1b554e733f579da7043be05a36e"},c("ul",{key:"26f719484d9c46a99e0973d7518829b77217cc34"},c("li",{key:"dc5a1a8f10a27c4cc048a76d579db991acc9c3bb"},c("span",{key:"04cf8393ed3e5277b0b378d5c6e8dd087adad86d"},c("ifx-icon",{key:"bb3bf580d31deab1ebe3625a263af8b01d58d92e",class:"check__icon",icon:"check12"})),c("span",{key:"3dab27e4b8db51ace4f0538e93736313fc32ead2"},"Provides a customizable modal window, typically used for displaying contextual information, user interactions, or additional content without navigating away from the current context")),c("li",{key:"4ed4933bcd65463d90f5070d05bb08b694d7c418"},c("span",{key:"0a5c878dac807d04dd06cf064e9facf46f9b9162"},c("ifx-icon",{key:"66f25772101f49b347441db7c056cfde80d2dba9",class:"check__icon",icon:"check12"})),c("span",{key:"313eafe2d801ec9fd409d93fc02ae1d5cf69be6b"},"Adheres to webstandards")))),c("td",{key:"997ae2c61632c0a4a5c16f9496a9e21c537f57cc"},c("ul",{key:"e1ecafa6b82008cb54ac39fec1c9b95b55293809"},c("li",{key:"3b418901eb9d0f9e3c51f83498c1457be3da5def"},c("span",{key:"3b5ec43b0b9a60287360d7da2137b270c03dcb1c"},c("ifx-icon",{key:"c9a3064222ebdf2189813d4c94018ca294a860a0",class:"check__icon",icon:"check12"})),c("span",{key:"78e861ec69a6864795f287865652fdf1fffcbe3e"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"862c662769ea82ecb0fa5479760df140f8677ab6"},c("span",{key:"6173ff48360127720c9c4291870c5f2dea46cdcc"},c("ifx-icon",{key:"3a493b341834b448f988e4ce95dbfa576f27f521",class:"check__icon",icon:"check12"})),c("span",{key:"1fcfb49f5feb96a484bb14075efd2e243d85cab2"},"Extended customization")),c("li",{key:"675f1e19b5352fee0fc0f8cf5313e1c8249c9786"},c("span",{key:"da2515c5a6a4b5238912291ffc37394c74ab8d0c"},c("ifx-icon",{key:"8b264f47bbb85c70a4a905caf650d924d869697a",class:"check__icon",icon:"check12"})),c("span",{key:"149979d9a1b33b8c1dda722dd521bf4d0e4889f0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"479774393b15b64a2fcbf4b3594b4743cd20c704"},c("ul",{key:"83808e9bf52d8097a896347697990d8146d939bf"},c("li",{key:"080196ff03d7a8c43813841094e81296aceffe9a"},c("span",{key:"9027649c0b256d24dcd506b5708c0855edea04fb"},c("ifx-icon",{key:"3f602a86e7973bb8cdd5edd3f931b3e71f9941a2",class:"check__icon",icon:"check12"})),c("span",{key:"4a6bb5f85c9f55a9b7029d359f976ef9ea7b9192"},"Removable close button"))))),c("tr",{key:"75facc02da192b1e4a21a886257cb7f98ce4320e"},c("td",{key:"79e392c1eb6191a51eed6062c977a77ceb3efbff",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b12f18bf547a25e534c39abfa2b0b2f68fc12ba3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-navbar--development",size:"s",variant:"bold"},"Navbar")),c("td",{key:"4c405609a7deceab17c388b89a32ccf6eaf5c558"},c("ul",{key:"8eee3d16d07aa796b5b6c3119ba52e058b8accfe"},c("li",{key:"75e3f5b0398521908301cd93a6eec20c2da0b911"},c("span",{key:"889afe2eb7e32656f8684da007e10e46b2459aa3"},c("ifx-icon",{key:"f2eecae97b859b6bbf05ec33fc8a86e2962a6897",class:"check__icon",icon:"check12"})),c("span",{key:"a003ae55b064c0d458addeae28f22d643fdfd111"},"Provides a standardized and customizable navigation bar for organizing and presenting essential links, menus, branding, and interactive elements within a web application")),c("li",{key:"890c7008b4dd865b7809c47792dfc046dc5e624a"},c("span",{key:"5c302a12509b1f56acc34cf4e2c5f66fdec0f984"},c("ifx-icon",{key:"c18c2b3d92c62bba25fe41cd9491986188b4f0f7",class:"check__icon",icon:"check12"})),c("span",{key:"5c9265228645e60a6739069d799f62a784985cff"},"Adheres to web stadards")))),c("td",{key:"a83ae9d449985374a0edfc0f6ea4ac6b1c43d44d"},c("ul",{key:"ec25313dd64108b2f896f7ad2f1ebe4f6eb01393"},c("li",{key:"777e3e04e75578d225c58666c98221e91c46e849"},c("span",{key:"623c5f7eeb5444e06154b5c61326291229087bbf"},c("ifx-icon",{key:"906d955823cfdd69be5b36320676eefab7b5a7a9",class:"check__icon",icon:"check12"})),c("span",{key:"4b8b417dd4e5b256be3373720a3e8c25292ecf48"},"Navbar-profile component")),c("li",{key:"034770b910747bf88036bdccce3b9735604846a0"},c("span",{key:"6178cfb592d34316098709dc0d5b0c6373ceceef"},c("ifx-icon",{key:"a7727e251b2db43d4c6b06c594f6f280f894b8d2",class:"check__icon",icon:"check12"})),c("span",{key:"f326705499af50cbe10f665a7d72aab38be75b5b"},"Mobile Responsiveness")),c("li",{key:"cb73ddb37b5ac4fb1ca9bc4b2ed2708329248e3e"},c("span",{key:"f41b104b60a442134ef04e564807750a739c1cbb"},c("ifx-icon",{key:"9c5dd468952fcb961ab788d8804accba82788eba",class:"check__icon",icon:"check12"})),c("span",{key:"31adaceb1cc5b70f9356cfc2bae96ae374ca53d8"},"Mobile Sidebar")),c("li",{key:"2438f74d09a161d397c7a5ec48b214d435ab327c"},c("span",{key:"6961dfde65ad727ebf8e2185dcea3229098c0806"},c("ifx-icon",{key:"925e15a960116b493e95c275f6736b63abc5720e",class:"check__icon",icon:"check12"})),c("span",{key:"fc76b47cd950048a90ba3006061bb9e83630a28c"},"Extended customization")),c("li",{key:"b6cfbd70b5c751d8e4894acc26e86a3642eeab6c"},c("span",{key:"fbbffcb1182423ab8fc92e5e55585c7d302005c2"},c("ifx-icon",{key:"7266c69c334dc41b1016a1dcfd2e4c1ccb8d1af1",class:"check__icon",icon:"check12"})),c("span",{key:"410805fe33671ac2bc3f0103a1433bc6ebaa2a05"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b58e09880722ef0bb11ca1e37a1964ac6fa35bb3"})),c("tr",{key:"d9d22cf52fc9d71dee6d069d870062237a229fdd"},c("td",{key:"ecc3ab4421bed10b15aa10334a4fb868dc2defce",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b1a04ac1d13e820293c49462b44fc09eac61953b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-number-indicator--development",size:"s",variant:"bold"},"Number Indicator")),c("td",{key:"ea8661971ab13206c1631239224a134fd06a4e26"},c("ul",{key:"26e58f2572f07f48a492e1bf5043cc7d00e7bc0f"},c("li",{key:"4de280ac7f22feac8021c84db0fde0eea0548220"},c("span",{key:"8d27dd97584d2593a76a16737385f7dbfeb1982f"},c("ifx-icon",{key:"89fe500cab2a3125e692abb0ab19dcbdf08a1c38",class:"check__icon",icon:"check12"})),c("span",{key:"aa7b38ae2aac625d5cecb4eaa5b01ba3af58d46d"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"e6b4cde421aba8df2ea88daa5a63ceabe3915de4"},c("span",{key:"af1517d76ad855a009b6e6566fcf8b19aa009a0c"},c("ifx-icon",{key:"a8ed9c77a2fb4a92942860be7fe06562ec8ab523",class:"check__icon",icon:"check12"})),c("span",{key:"48f591cbf793326815cf086897a9ecfda9c90eab"},"Adheres to web standards")))),c("td",{key:"c5bc1ee41a71af94c32011ff1aa7dbb1d176e0c3"},c("ul",{key:"11ca9e077b53e41b2cece0fcc5ae5cbbb855ae76"},c("li",{key:"52a8a6bd2444f8150446971e22ba7a7e550757d3"},c("span",{key:"3f7036ae2a8793099f6743c7c577873630c59421"},c("ifx-icon",{key:"4dfe557803ac1d8041be1609ba850234c6d0d09d",class:"check__icon",icon:"check12"})),c("span",{key:"5d02a87f65e6497508adfeeb1768b88eff6d937f"},"Inverted option")),c("li",{key:"440afac063dfb46e1135151f37071319e0bf035d"},c("span",{key:"e15b23db80eed8ff01946dfc0d0adfad4438d529"},c("ifx-icon",{key:"24fd1b236ef7343b3ea55bcd8737fa3d864eb131",class:"check__icon",icon:"check12"})),c("span",{key:"7f73da4eca711f9b4402e4a6040d6531431c5013"},"React, Vue and Angular wrapper integration")))),c("td",{key:"42750659aa3814af184f4985461e86d5584c6752"})),c("tr",{key:"98e8d5503221ccbba0b42eb80c6c11e0166fb6d2"},c("td",{key:"c49bd697cf61d9f20fa9379b314e2953854b05df",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"acaa9cad577d58e6494c917bd94f6b17e18f5578",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"3050d2cd40412ecde5a6aad1861e397430b10b24"},c("ul",{key:"4f08b6d5ebe149c7616d87c73e1b33795623588e"},c("li",{key:"5fd7b2769738df0d8dbb77711fc0f3524bee1823"},c("span",{key:"f094c4cc730219072c17b1ca7979c8f7766f8b78"},c("ifx-icon",{key:"b05082bf6803a6e2f1ed4251654c9d554a0e9a53",class:"check__icon",icon:"check12"})),c("span",{key:"f7eb568b6c46980c9efb3cab22cfb12fcd6c7eee"},"Offers a configurable set of controls for navigating through sequential pages of content, typically used for displaying large datasets or segmented information")),c("li",{key:"65d8d61a86127c5e6ce97a7b3b3084602306b120"},c("span",{key:"3aa129689a675cf1e47bf07443bb362f44e81a40"},c("ifx-icon",{key:"0271d70ecb9b2037a8674ddbcf5582394a501a8d",class:"check__icon",icon:"check12"})),c("span",{key:"1cc8341398eaee4c4040a862d3918095172d03c5"},"Adheres to web standards")))),c("td",{key:"fc6dd671d6629ccca93060d133c6bb3973bcfc75"},c("ul",{key:"6673fdf20fbc1371d077f35355648cb22460cf83"},c("li",{key:"b77d0cf656874a0afa12396ad4f7bdad775cd70e"},c("span",{key:"d141c7ddec6ecc9d39c32e27c4f903b9e1c8dcc3"},c("ifx-icon",{key:"aa2d398c1413285a939ee8e9d0ed042f1fdb4b12",class:"check__icon",icon:"check12"})),c("span",{key:"bf363a3ff4d9f03139f51051a0b2b237ee65ddb5"},"Extended customization")),c("li",{key:"0d80b409f624346488a7afe5dcdc9340040ac417"},c("span",{key:"71c3cef39b4fea48cdda8057a51c7096361cb9cb"},c("ifx-icon",{key:"8db3b7b293ce8094e9832a33b7d74250738c5fd3",class:"check__icon",icon:"check12"})),c("span",{key:"2f7dc1d4dda1346af3b8fca20bbecb68e889d99c"},"Configurable Results Per Page option")),c("li",{key:"f1ac915f6807025847c99b6ec59a2b893a004f74"},c("span",{key:"8cbb8ad6db213b53ff27ea8b4271bb73f9e52473"},c("ifx-icon",{key:"c671540e9a643bb9fd195677215a2aa5b6e4bda1",class:"check__icon",icon:"check12"})),c("span",{key:"72e867aa775ef0d2f6ddc36c3bc347d101fa2c2a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b8e585f058131042e6699f2a6a54e9e1f53a171b"})),c("tr",{key:"c7a1505714f03d78155eb3f2eb0bcabd047e7d45"},c("td",{key:"11cdbfd3ef2026f229f31ee3a44f490441e7c91d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ff6cf7a20f207008edf83624635a7f71f236314c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-progress-bar--development",size:"s",variant:"bold"},"Progress Bar")),c("td",{key:"a72d4aa4e852904a2ce481f063fca7153f4479ab"},c("ul",{key:"9c4d5c8bbc5287a564bdf42132f9792077d8da14"},c("li",{key:"265b4b4686e01962fcffe9a258348eedacdbe168"},c("span",{key:"94f288241aadc95b7093e5afcf78146b5b573d6a"},c("ifx-icon",{key:"f6da7cf944af60a59cafa584e4dd6959465f4de7",class:"check__icon",icon:"check12"})),c("span",{key:"30429992402ab4b141596205966dbf3eff57d104"},"Offers a customizable and dynamic bar that visually represents the advancement of a process, typically used to convey loading status, or task completion")),c("li",{key:"246ebdeb662518c724c09b92c54c5edd8542edb7"},c("span",{key:"76cefc98fd8ba71e37e55e5b447a0f328bcd454e"},c("ifx-icon",{key:"2cde7efb3f18f6a86ae1bd0e1deb2516c1b5d41d",class:"check__icon",icon:"check12"})),c("span",{key:"a6f5bb043583c65b3bd79f4f1020971a34464b48"},"Adheres to web standards")))),c("td",{key:"28327f9e697aae11ac4657ce0c94f96c375e4231"},c("ul",{key:"ac97884f88421b1c7a304f30416549a562c422d6"},c("li",{key:"49bde10f03db8898dfcab2a2b346e0c6eb7c9f5b"},c("span",{key:"cbca33a7344b79faa4522990d000fefab4bad60a"},c("ifx-icon",{key:"4c75568540bd922e0a2666d028209b7825a12eff",class:"check__icon",icon:"check12"})),c("span",{key:"225bdbcf0dece019b92d349da52fa8f4aeac10d3"},"Extended customization")),c("li",{key:"d425cdb4da5fc4d7943897dfee3ebcad89f3dba4"},c("span",{key:"ec4fdc16f3f16ad2fee4fd1a0a20e6b095e6485d"},c("ifx-icon",{key:"8b8781ba38833666c7e49422739248e8d81deb69",class:"check__icon",icon:"check12"})),c("span",{key:"c5f77fd43cd04391bd749cbbe86f6bdedc8deaf0"},"Show percentage option")),c("li",{key:"7bf2e8024102f7f2dcf3ec4b9160436fccfe619d"},c("span",{key:"ca24a169ed72fe6db9273b1a9dbf4b53f3f1a48c"},c("ifx-icon",{key:"cb8bae9569b4704785ae4aa2d466c18aad057ab1",class:"check__icon",icon:"check12"})),c("span",{key:"748e1b6eed0f1daf8ea407c54e45256665fb9248"},"Small and With Label variants included")),c("li",{key:"39001cc2d4749dac0a49bde1e7d5cc1e97344546"},c("span",{key:"fb1c46233f85ec6a624fef2572648379be6ece14"},c("ifx-icon",{key:"2669bfc37fe0b146a3f6fa8c308677addb409b3f",class:"check__icon",icon:"check12"})),c("span",{key:"b6351f40cb326f53fc372a07921d826d551b4e39"},"React, Vue and Angular wrapper integration")))),c("td",{key:"db3d0f18ea4b2ab4c796a91a1c9ee866b7c30c2a"})),c("tr",{key:"4d46309c9005399acaa639e6b6464aa914d45c8d"},c("td",{key:"281143e4c61132ddd87d6afbf6541837ed1094c8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4fe9767a889915792516a8d93e4b1e9539546c06",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button--development",size:"s",variant:"bold"},"Radio Button")),c("td",{key:"c7d8207361e25743235dedea28e6310399b3e9cc"},c("ul",{key:"580f853cdc65de94a1232e541abe2b6c5d7cd975"},c("li",{key:"c626e4a61b9aba0bcfce9b9750cca04973f3acd7"},c("span",{key:"1aaf39d0b620b5410bf4e6cd9a098c26b80f833a"},c("ifx-icon",{key:"707fbe61784723d594636f8c62cc60f7247e66bc",class:"check__icon",icon:"check12"})),c("span",{key:"76df227afda5c271d56b07d735c79cc28c2702d1"},"Offers a customizable radio input, allowing users to make a single selection from a predefined list of options, typically used for multiple-choice selection or exclusive input")),c("li",{key:"36a47cd102028f8db25e2d891960e5f6d06cf570"},c("span",{key:"ea00bccac760675fc7c09aaf9c9bac28814f9c56"},c("ifx-icon",{key:"2b41cf4e0c81b44898df4a1a98f35b4efe603dbf",class:"check__icon",icon:"check12"})),c("span",{key:"b9356f9720675c55b94e42f030a146b5f8ed6625"},"Adheres to web standards")))),c("td",{key:"4cae464df807a5948c44a5236ea2e3182eafde17"},c("ul",{key:"9f0c85172cb11d8784a7e7c399af41914973b950"},c("li",{key:"b34fe7c9880b085448862078c75a1d3c166355c7"},c("span",{key:"11d9f2ea7964e032ab53266afb8f26eb7a39923e"},c("ifx-icon",{key:"52bc7d8d5b53c1158ea39fec8c68629d073f74e3",class:"check__icon",icon:"check12"})),c("span",{key:"523e86b532a4d5e3f55a27167bf34708eb9f3c62"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0ac5d417531e1c20a28f51cf0fdd57f76d8a8ff0"})),c("tr",{key:"953c3a211f583ceb713ab43f4f7c2ffb3984b7ed"},c("td",{key:"19ae9bed60647ccedbabe295294b6ba13ae295e6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9cfe96acb234a12ed230773afa696ff106f26436",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-bar--development",size:"s",variant:"bold"},"Search Bar")),c("td",{key:"0218158f7a0aff9f3deeab7526fcdc3a648c83f6"},c("ul",{key:"fdb0df3a0c7e90d784bea4df4f56b32847001d4d"},c("li",{key:"67e0bda163ff56b2b664f40cc47a8353f8025805"},c("span",{key:"63e11565321a368e764868ef83515f2d8d5dcb69"},c("ifx-icon",{key:"b197627ea1994d2e1dd9cefff4d3dfebfbbf48f5",class:"check__icon",icon:"check12"})),c("span",{key:"2fc36fd4f5bff9960596168efac15d7def9a123c"},"Offers a dynamic and customizable input area that allows users to input search terms and trigger search actions, typically used for querying and filtering content within the application")),c("li",{key:"810bfa8c06f3060e39a76ec199591715f8d4f1d2"},c("span",{key:"620480336562febda32c3f53ec6d7ea23d56db5d"},c("ifx-icon",{key:"ca59309ca1cd0434a38b56d3486ff32ab62aec55",class:"check__icon",icon:"check12"})),c("span",{key:"0a04f55e979ca5f44805757877ee55995afdec05"},"Adheres to web standards")))),c("td",{key:"ee75b2bdb262f380a82c3a4bb23a9b2bf8f85d87"},c("ul",{key:"a79fc2e01e7a9098c5b4f9f98ec31cf2350ed157"},c("li",{key:"e5b526833c618fbe7c695a10a6559bc8f42ce9df"},c("span",{key:"5dd4b528c619fad5877f920693558b24bf51e51b"},c("ifx-icon",{key:"e139e4c013990ba26fe7dfbbcee6fffc6ea1b2d3",class:"check__icon",icon:"check12"})),c("span",{key:"0d68a533e648591209fd05d8cc796aa7c9a5322c"},"Collapsable option")),c("li",{key:"8d37a9b42a2065c7356878fcc5f06a9be78b13f1"},c("span",{key:"fd53ffe67fedd0ff726f7eff3541dafa12758a02"},c("ifx-icon",{key:"eedbe82d067b0dac26d2a5d209de03de8c41ece0",class:"check__icon",icon:"check12"})),c("span",{key:"cfd05ec4d6a765c85e22b7d5b75321037279349b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"11afd814e627dba685170ada6cc047d3b5f18805"})),c("tr",{key:"570b297b10eef61db9628159824939f724767915"},c("td",{key:"24937320b9b48d6bb8e6829ed7c26ff134cab973",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1db7a5835f5e6185e01d44b6963a279e33e4ce0a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-field--development",size:"s",variant:"bold"},"Search Field")),c("td",{key:"a6636c15cef8fe9685cad8e4464ac1866374255e"},c("ul",{key:"0b49c5557f4d5f9044ff414c1f8de5ae69fd1593"},c("li",{key:"0839cb77cf6594164ca36514319dc3cb24253b96"},c("span",{key:"2468f1fd799978c21b57b65160974fdf04a72d7e"},c("ifx-icon",{key:"c960a0da1f92cb3f705f225889cd057a99db4027",class:"check__icon",icon:"check12"})),c("span",{key:"1c31d92a63fd1c7ae8d96c3b226221cfb1fadf20"},"Offers an interactive and adaptable input area that allows users to enter search terms and trigger search actions, facilitating efficient querying and filtering of content within the application")),c("li",{key:"6c54f1e10c99688ec8be003157573416443a27a7"},c("span",{key:"c849b2b1719f45cd44791a4e7f5a61171bead70c"},c("ifx-icon",{key:"e1380b5d43d1ec275fccf77754cc1733b4caad9a",class:"check__icon",icon:"check12"})),c("span",{key:"579f9d1d35ab15bae451a21b0f17e2d4fa806926"},"Adheres to web standards")))),c("td",{key:"0b6898c737bfbd42197c0f65776425d67a0be04b"},c("ul",{key:"0720043953e974acc28c2140f38651e7cf4a8e5e"},c("li",{key:"2864187c7329014138ea1421a621e17f25a7140a"},c("span",{key:"56478903fced5674410d74f7fc12fdd6d384b097"},c("ifx-icon",{key:"2e632a611980d94576e43ad63b62191e5013a733",class:"check__icon",icon:"check12"})),c("span",{key:"1b0015cb29d4fb327f779929e45c0742839995a4"},"Show Delete Icon option")),c("li",{key:"4eba0374b3a134502446542fb73429a99b920ca5"},c("span",{key:"5ea5ef00fe34dbe20da9d68399f0919b153b0922"},c("ifx-icon",{key:"5c70c509a998c7765ed5a09bd5f1df2cb8e55d3a",class:"check__icon",icon:"check12"})),c("span",{key:"205151cbb7720de3c446c5eb1c1c73bd4d7e9376"},"React, Vue and Angular wrapper integration")))),c("td",{key:"4244e19048164d8f5db5737858a3b7ae5f7d2c0c"})),c("tr",{key:"3fd07a4f55b14a255df36f8453bb1745df166e9b"},c("td",{key:"08e98ee1b57a0ae3f3be4f7b16d5af4020e6ff82",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1ff31790bd3263fd474214bc1499cb9c972edfb4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-single-select--development",size:"s",variant:"bold"},"Single Select")),c("td",{key:"8f0e6725d0a85c2f6235be2351e3bd4b283911cf"},c("ul",{key:"a4340e4c98b319e644bdc285f7bfb72076c9afed"},c("li",{key:"307e65fbb06715d637c4f8094586585621a3f4e4"},c("span",{key:"4b735983f454bf38211ebe71c4e84b573921321a"},c("ifx-icon",{key:"1ba3e4c56a649ed5acbab85012ea6895e85617ff",class:"check__icon",icon:"check12"})),c("span",{key:"17a81bc389efd020ed071237af3bcc195052cacc"},"Provides a user-friendly and interactive dropdown list for selecting a single option from a set of choices within a web application")))),c("td",{key:"a2d539408ecb06a6d5d8662ef3d43e8dc794390a"},c("ul",{key:"bec9dc2cd9ce9b5f4e8b33756ef2cc80f2f02675"},c("li",{key:"c374700276d133fd6ca9f6c01dcf3bf85826a1de"},c("span",{key:"efc060b5c5e29a7a7a2e2f2bcbfac43768a84e86"},c("ifx-icon",{key:"684dead270a1fb3f8ce9f1ba6ba72cbc4cea0083",class:"check__icon",icon:"check12"})),c("span",{key:"01c2976770a481c99fd8cc42cdb82cb1e33dee1b"},"Extended customization")),c("li",{key:"d80779e43d6c236d2499955402ad2f1372e982a6"},c("span",{key:"173cd304284e92fd95321d256456bb01fdb90287"},c("ifx-icon",{key:"309753bd19b29761259c40bcb6e7519326ea8087",class:"check__icon",icon:"check12"})),c("span",{key:"3db4ebd4a36ca69f4b08eaae2e402fed88e37da9"},"Option to enable and disable the search")),c("li",{key:"036359e150dfd79ccbd7528c119fa0d2d4324acc"},c("span",{key:"1c9464003284245d64d45f04538233fc1d3a5549"},c("ifx-icon",{key:"1697c819b6e1490e0ed221b5fab18ddcc176e6b6",class:"check__icon",icon:"check12"})),c("span",{key:"73eaf7553316cfba07edbf7e1e6659b51d2c1541"},"React, Vue and Angular wrapper integration")))),c("td",{key:"95d3d77d5764e92fa86765265eb6c003b07ab2df"})),c("tr",{key:"f22f002154ceefbf11754eb5f4c022f74fb95d0e"},c("td",{key:"946f311b88b827986a6beadfef2e519a9f74c70a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"13f737a5fbf49f509d434db45c80c2869769c2f3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-multi-select--development",size:"s",variant:"bold"},"Multi Select")),c("td",{key:"4fc4ec3022a96dc7dc5e320b63f0780b2c780410"},c("ul",{key:"64f361ac95f9316d3c01cac2f05ab59e61557f78"},c("li",{key:"4a8e609737b178d53339d86740001eb076d43265"},c("span",{key:"51083f0efd5079e2e3208c0eb0ce8856e8cfaf72"},c("ifx-icon",{key:"c5022f469ea0fe80babfbd86b8acbdf756892a06",class:"check__icon",icon:"check12"})),c("span",{key:"1b67ad6ce5bf7e52ebcb2e5e0f9ed882a02e3e92"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"819496c725ccbfdb090b6e0d186f5cfa14beb6a8"},c("span",{key:"e0f676080b288ceef02f6ecf341fd30001a1080f"},c("ifx-icon",{key:"eeebfa398a7afee7c4be5e7b552bd44a3f83694e",class:"check__icon",icon:"check12"})),c("span",{key:"fd74a148be481f700ff7d859be5d55cf78cc7513"},"Adheres to web standards")))),c("td",{key:"d21ebc6d44673124bd7556f5d0af68d8f3628f0b"},c("ul",{key:"336df045c33e55d5fc775bead86900bff6e16035"},c("li",{key:"9822fbd35592b9d0aa6e8069b4327769e2bd3c93"},c("span",{key:"df22717d81608308a30a7bd5f7a25a2a61795ea3"},c("ifx-icon",{key:"7bb257c5fcfa051bdfc0251b98a7bc67869c69b6",class:"check__icon",icon:"check12"})),c("span",{key:"edfe6bb339185797783dee696b1e49e9b4b75907"},"Extended customization")),c("li",{key:"a7ab9fd1affc0684f7261b9e31ad4160e17a9f7c"},c("span",{key:"14abf46888515146a849d7008002e14b87f0291a"},c("ifx-icon",{key:"eab68565cc2e9886b09ae1dbb7847fd2091bf079",class:"check__icon",icon:"check12"})),c("span",{key:"d1101f1b2f945b7bf097da1c1ffe72a11b7740c2"},"Nestable options")),c("li",{key:"aa76274138d5d31ece3d4fca9a161c5adb947745"},c("span",{key:"a20986571e83bbe2c6536a3bfc39a0124532b08a"},c("ifx-icon",{key:"1b8c398de1c08efb9438aa3a4a26e4423b49d90a",class:"check__icon",icon:"check12"})),c("span",{key:"d7d0a0851606086a650572c5c1c7bf1c4ac988e1"},"React, Vue and Angular wrapper integration")))),c("td",{key:"52e0f00e008f6d500351b8bc2f079a58b96345df"},c("ul",{key:"2599d5346304bf95a505ad3b79b70233f1a63321"},c("li",{key:"80fe005f0c2ff724831e4399f7a203ed8d7dc8de"},c("span",{key:"9ed7aebf166c2e18f4f264e10708c373d1d235ef"},c("ifx-icon",{key:"63a26865cc553bad292a611bd64b39c8dc393b45",class:"check__icon",icon:"check12"})),c("span",{key:"bef5e1de5c4330eccd7a7444e199521eaacf7c9f"},"Option to enable and disable the search"))))),c("tr",{key:"5684f4d0b9f1985dd68483b29fbf0473e3cfe9af"},c("td",{key:"a771ea5b869a732d17874bf3a12a2e8e5e618ee8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f456cf70e40ab4187721caf2562abedbbf2cd96d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-sidebar--development",size:"s",variant:"bold"},"Sidebar")),c("td",{key:"b7fec0ea159ae04dd4efd812d42138a65b1d19b8"},c("ul",{key:"eb6f8bf2a20b8df40ad069ecde7eb513c7af4d17"},c("li",{key:"c0c9c38e9c6f0bcf71c5b8874c2342834cb918fd"},c("span",{key:"86e4004d21d23ae702619f4c5e75e45a11b799d9"},c("ifx-icon",{key:"1b61a0b9bdc83808cd0783b41bf7b9a2a47c93bb",class:"check__icon",icon:"check12"})),c("span",{key:"b1c1f8d4cbe16f139b4c50ebe62f6ebc1eb73477"},"Offers a configurable and collapsible panel that typically occupies the side of the screen, allowing users to access additional sections, or menus while maintaining the main content area")),c("li",{key:"b3d13b96739d0d429f5c4a401c8eb99fab799ff6"},c("span",{key:"e01c9aa6c9bac1a12a9a74a1b5e768d5a0bff90a"},c("ifx-icon",{key:"d56ea17397991ff9868f7b35bb79573d1935b7f9",class:"check__icon",icon:"check12"})),c("span",{key:"8d540371dbd5cf9208721d47e4beb62c974e087d"},"Adheres to web standards")))),c("td",{key:"ffe60967e0f866780727150d9ae6682e7d545020"},c("ul",{key:"e21a2d2bd9c13a0400e1dd663918c0e33b4aac96"},c("li",{key:"0fa4661bc9d298c886d213aa217161b6b8d5dcf2"},c("span",{key:"ec465a59c5e0326169a571c863eb0db591896253"},c("ifx-icon",{key:"450f4cb9928ec189f7f05d23b190c35603d85407",class:"check__icon",icon:"check12"})),c("span",{key:"93439527108ef0ec8c92fccdd32140e82f5f3133"},"Extended customization")),c("li",{key:"aeae778a8b55adec99530cc216ea4f0f18d2ab02"},c("span",{key:"184e1e594e4b0be3270979a8911ca0f68976f472"},c("ifx-icon",{key:"57b62b1888c237e35fae42ab4eca7e66f607f20e",class:"check__icon",icon:"check12"})),c("span",{key:"9d4cbb8390588ff609b5a46bdb999f3388c37347"},"Multi-layer nestable items and menu")),c("li",{key:"e61349c056c443531275a94b7669c9772ebaf05d"},c("span",{key:"f24db761c6edbe59af5b8e862e2b5fcae3f86ab3"},c("ifx-icon",{key:"9fd4791d58ada3529234acc45614def9ae175634",class:"check__icon",icon:"check12"})),c("span",{key:"10be59304f7306f67a4cc72d5ed901e0c23eb1bb"},"Initial collapse option")),c("li",{key:"8d2bdce51539a401c1e78a04a733d2b9f5bd663a"},c("span",{key:"7dc45c162f5db4260297cbf9dc8cb50027c8228e"},c("ifx-icon",{key:"4b145defc85da9ab3c8057b2af69c47e11d9978e",class:"check__icon",icon:"check12"})),c("span",{key:"c4bd1911668d0597273a146b842af6d612e1328e"},"Active and action item feature")),c("li",{key:"b304e3bbd9b7d0f714b084ce33434014bc4b50f7"},c("span",{key:"45794ecdc22fc253319c7dd04122194f5a6ecf65"},c("ifx-icon",{key:"15608bf2024ebc8fec65d6e72eced88f80b0956c",class:"check__icon",icon:"check12"})),c("span",{key:"d6673a9916f252341602a34eca6f1f19438e135a"},"Number indicator integration")),c("li",{key:"2c700bb79dd7ac824504e5d133e4ee44e9698c60"},c("span",{key:"16aa8beabafbdf0cdb37530b8b478be9363b111e"},c("ifx-icon",{key:"0b18b6425171fcc51143a838ec8ffbd651ac4d72",class:"check__icon",icon:"check12"})),c("span",{key:"cbc40625e5cf51a0111cd667e78b95e6643135fa"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f34081c48932ac03a382cdc1b2fa35b7ac775861"},c("ul",{key:"a49c86108c896f7bcaeec9a7cf29a8a899d11df4"},c("li",{key:"b7f9aea7f025992882eec786b7ecaf05a198b1ef"},c("span",{key:"b30cc09cf0c59c6f614d4703ab9d9e213e235726"},c("ifx-icon",{key:"8e8e33a67738126df470ce306d0b7d2f6f1b4a36",class:"check__icon",icon:"check12"})),c("span",{key:"030abb84afc0e21d15235f1592315bade18ac16b"},"Removable Footer, Header and Logo")),c("li",{key:"2ba915b2916f3c1d97f6a65ff93814c1abe6cc9e"},c("span",{key:"8abae4240808ea9cc22b5fa9335da02a52c8c5c3"},c("ifx-icon",{key:"35ff62d1f32290c57855406efb5d52ef5ca2dcbf",class:"check__icon",icon:"check12"})),c("span",{key:"1374a3a971cff9d3165758764337be0d5e30b10b"},"Removable and customizable Links"))))),c("tr",{key:"88d2d88dfd20c70842e0b6297d20fc0b4cb5f64e"},c("td",{key:"e0c842a9692d51b2dcbc73da25e33e7e320a3bb1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"80c586e4e130723d47159073ccafde70e156c330",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"208f1cfe41d255fc3d6a934180fd2ddc0dec160a"},c("ul",{key:"6fb00158446f460d8301925d0513e4fc11d65c71"},c("li",{key:"99ed1cede7bc84eba0e9a73e9f4706623c10c1c5"},c("span",{key:"b9898dd8191a7a0d503881e017ec1702b5f3d4bc"},c("ifx-icon",{key:"1fc21037a3315aa129c61e536bfc8a543a176c1c",class:"check__icon",icon:"check12"})),c("span",{key:"e194ff3bbec27d2c2f613266acae11628063bd76"},"Provides an interactive and customizable input control for selecting a value within a defined range, often used for settings such as volume control, data selection, or numerical input")),c("li",{key:"2b512e8c33dcf1449057d07f469dc265ffc1236c"},c("span",{key:"f5bbad743ba830a5a9c6b34910b544277fc252b4"},c("ifx-icon",{key:"9f304fc9b7cb7d623ce8b5ca769d4778add40871",class:"check__icon",icon:"check12"})),c("span",{key:"7e077f846150e91f23764100e8aaf6533dcb1963"},"Adheres to web standards")))),c("td",{key:"5bffff37be5e116e3121fa36009b731b9bfb3f69"},c("ul",{key:"84b1d28ca332caa383f0317342db1508b07689cc"},c("li",{key:"1976af808c9e3f1201bc5b89a42a983220a172fa"},c("span",{key:"5147c06c9ac7dfe8b349aa58674b3288df74c2b4"},c("ifx-icon",{key:"57bd7011055bad88d04974789c41c83951bbd13e",class:"check__icon",icon:"check12"})),c("span",{key:"848511fe61518f0866f4dc2e77dd68e19e2c81b5"},"Icon incorporated")),c("li",{key:"473010486159b3b8f371aeffb716977b491bed1f"},c("span",{key:"2e66f338af4a5c35c6b60b07433a2f729f29e773"},c("ifx-icon",{key:"4dd34d397b68cd30dcbcaa9c237b1f0d2e606a3c",class:"check__icon",icon:"check12"})),c("span",{key:"6b161fc7953897119556d547abc2f07dc8b92773"},"Percentage variant")),c("li",{key:"9fbabfcd74c86bac28d9e2133117a6807e716774"},c("span",{key:"6ccef3e372c59be8013d193b59076110e9d4b701"},c("ifx-icon",{key:"1d91d54ac942101e1bb290296230f4a8ff1ecf34",class:"check__icon",icon:"check12"})),c("span",{key:"2c1b6066c145efdbaa11690ab783a879ab4db94f"},"Text variant")),c("li",{key:"1cf5d9d79adeb90daff3146ea14204196fec893b"},c("span",{key:"d7c8c15146782dbed65f741cbad0ec74e8239999"},c("ifx-icon",{key:"f0b3dee99da6afeed9e78ad2c668f78bfa4bcd1f",class:"check__icon",icon:"check12"})),c("span",{key:"43c7b975bb1f1df5c584f0dd380d75172a63054b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1c0a906689f071d3a2c640f0dcb783faf66e9183"})),c("tr",{key:"9d5da6a92fae73196c7aa28183230e7c5d937d25"},c("td",{key:"fc59b3614dd6ce3620061afc853745b692dd0af8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4e3cd94648c46f45c9df6db6e346f49b42a4d079",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"f7eee2b1d68c97d5b8029761c1a4c6dcd1823331"},c("ul",{key:"08fb556a9b79b85e44a5e9d93d2e0296364cb2c4"},c("li",{key:"053ccc678a65b35c247f0a234aa9282ed5fa4ebe"},c("span",{key:"a51bd366df1ca628de1620aa909886250fd6628a"},c("ifx-icon",{key:"956d6c91b804c840492d5093934a87e8d7f18931",class:"check__icon",icon:"check12"})),c("span",{key:"cbec58dac09cdea1bff3b28382980e735165c592"},"Offers a customizable and animated symbol that conveys to users that a task is in progress, typically used to signify loading content, data retrieval, or pending operations")),c("li",{key:"de8b4dd105e61b463777a06d6a306159862e66a8"},c("span",{key:"d6ce1d067e827da871c67595ff76243d3ba169fa"},c("ifx-icon",{key:"f5c03214c934d9bd8f87754f358f8a7f7b08d99a",class:"check__icon",icon:"check12"})),c("span",{key:"211beb691356082bf8640b2e722e591b73e2e400"},"Adheres to web standards")))),c("td",{key:"c7e361f780298445946d069721222c3802e7173f"},c("ul",{key:"586809196ae1bf55da98be5056ab51e49613a9cb"},c("li",{key:"4800a840ad132f0a5cfe3d38b1898e45a820ee3c"},c("span",{key:"05615fb8aa147ee147106875db78721e40a17ccc"},c("ifx-icon",{key:"09d9e681af5783801f3d07d7c2505984821eefbe",class:"check__icon",icon:"check12"})),c("span",{key:"7ec85dad2a507fdb2557e3af361f390e5125ddf8"},"Brand variant")),c("li",{key:"45eec7fdc98bb09456ac3cb57e73db1baf0a84da"},c("span",{key:"592c245d0a1046f0d6b08f7c799097a5703d7f44"},c("ifx-icon",{key:"701fbeb6134a57a29ddf41832f7b4ee4857b59f6",class:"check__icon",icon:"check12"})),c("span",{key:"56772d04bd3dfa57e6475efc442ad5acbe01fb2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7a72acd2e3249abab35366c65dd01e66e6412720"})),c("tr",{key:"142163c98a8812d28bf5260ed5e009bba7a0464a"},c("td",{key:"fbb0c91cb55abcad566a10fc31d4674ad0b13da0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4f9e6e8d7cd7bfb7e47b9cc4e9766784525c9cab",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"87f6b8531d4bf62aa7a1bf91d396ba8a0539ffa1"},c("ul",{key:"7310054b8286289b967b36eae3f1f8c8fb414dde"},c("li",{key:"9a930518d1ef490e4b033f0034c1088b6e67e959"},c("span",{key:"85510a557aa258fef3bd440cb4de7cef4902627e"},c("ifx-icon",{key:"6ea3dc4443def5a54eeedc91d83994f7c5b8f7ea",class:"check__icon",icon:"check12"})),c("span",{key:"7ff9ea0dfcdcb358c2c333ecca38c095194f850d"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"b250839ddbe30f033b8dcf97530ff40aa6a51034"},c("ul",{key:"283e452c2ad071403f222b6b50a36ec4421ec82c"},c("li",{key:"a97e2e789638082af061230ab1598a562bf7f446"},c("span",{key:"2dad81ea75715cf64e06e58e79dfd60fac039a69"},c("ifx-icon",{key:"56a66aed2016d96e6d2991776cb3ceb49d7cf461",class:"check__icon",icon:"check12"})),c("span",{key:"e3667537c11eaf4630b89a830c53facf26002ad5"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"3163f166bb8a16a3000326b48215f06e6ac10cea"},c("span",{key:"5b4af8d341e2e688c4dba2fcab0b6957e7a86102"},c("ifx-icon",{key:"dd9aba05df8fccb1144a532a527be0869bd27c69",class:"check__icon",icon:"check12"})),c("span",{key:"22bfe9fdffe6b317f6661b1c8ebc48c5e2ab17d9"},"Removable border")),c("li",{key:"67838f7fd27076bfbed736a30bd1953b5429eb3a"},c("span",{key:"8c366a8caa894f5a9582ddc4ff079a67142e597d"},c("ifx-icon",{key:"5cefbec251575e61507daf3a008cf98ffeb17ab8",class:"check__icon",icon:"check12"})),c("span",{key:"f333836b85dcf5d4b801485ae85f3b19b8a3e121"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a6b2985d353f8dc9ac85225f4c8483fec0813a6c"})),c("tr",{key:"77fe2c1074f549432bb17f478b5278165455e48f"},c("td",{key:"015d0ee0530b581d55014444b57187eb9a30064f",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"19f40082a99cbb0ff087b4c7327a07bf92fc3b16",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"e4ff066fd9b9e06780f1dbf94b01458329f5708a"},c("ul",{key:"ab0c5d15ac4432cae215c707907ecdd9c34abec3"},c("li",{key:"56020cf51f0674cca2190ac89a8886f279ee4df9"},c("span",{key:"628398070a6673099e19a1d9a9f3c4e25b429189"},c("ifx-icon",{key:"f0e325db7517d5eb463b42f971448e3ea8c34369",class:"check__icon",icon:"check12"})),c("span",{key:"b69d2a810c4ada5ef69fa68afacfe03ea26d99da"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"a2967265d8dfc4adb6195b99af23179190d047ea"},c("span",{key:"ec2d5e0c59396661eb21819fa0761778acadc376"},c("ifx-icon",{key:"a8b14e43f4a12bd8244483bae368afe77ad2f2da",class:"check__icon",icon:"check12"})),c("span",{key:"846665a6465f4e21250cfdc9649ce059b781c088"},"Default and Compact variants")),c("li",{key:"510a9ec888f1bff52a36c8ca1e386c97b5e0576f"},c("span",{key:"b00d20a8e389978daf825207bd28585ac882f979"},c("ifx-icon",{key:"f69cf2578af55ea036995f43f94c280915714a5d",class:"check__icon",icon:"check12"})),c("span",{key:"cf2b03672951ce304ff59e948fdafbbedb193592"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e7361cfe4dbda09307d6a5a6e17e1e0f06f839db"},c("ul",{key:"738948aae7c42f6e57928ab236d30854138f9b93"},c("li",{key:"49325bcb2475f442db1fdb9430fa6c2a8c6da875"},c("span",{key:"a1fa64290925d6da58d40d33bbf4c21ca0a33698"},c("ifx-icon",{key:"bc14c3adb1d32ef7bee9a1f4abb54e326a5885ca",class:"check__icon",icon:"check12"})),c("span",{key:"c8069a4f11c27f79dd5a92a7a0152ce52b25f042"},"Vertical variant")))),c("td",{key:"f1104183c70e2e97911c3de11df89cc22fef83b6"})),c("tr",{key:"bc90dc31ee3f4706d652500cf210bfd3a163e9f8"},c("td",{key:"c4fc4496791ced310a722849bd58ac0387f23261",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"629185411074c11ee46c7211675d4e5aa5457976",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"d4e18ddfffd2501e7e9ef87a934bb01c491b23e5"},c("ul",{key:"c9bf8c767668e7b1fd6288b43b21682d9f42033a"},c("li",{key:"96a561a74fe1b41d1e6a17736db22209af29d7a7"},c("span",{key:"d381f7ef2c0e3c259e87cfd506011c73dbee41f5"},c("ifx-icon",{key:"0e7593a2e56170f79094c297a274ea3b85e526dc",class:"check__icon",icon:"check12"})),c("span",{key:"2dfb1e5c9714c05373c5bae8f224c1ead87db341"},"Provides an interactive and customizable interface for toggling between two states, typically representing an on/off or active/inactive status within a web application")),c("li",{key:"8f4265f2872532d66f15926ef8355f17319427fd"},c("span",{key:"21434f67b359e002c6ee836971a12aac71d258d6"},c("ifx-icon",{key:"52143d6aa3d87ee0eb011e292be42447faea7433",class:"check__icon",icon:"check12"})),c("span",{key:"bb48dbc11bbaeef63b1ef0d171e333c0221e3ad6"},"Adheres to web standards")))),c("td",{key:"78cf36239805cca4fcb340255b16b6486868d67c"},c("ul",{key:"b6bc6b588a4919719a8ed24f8f432646268aa293"},c("li",{key:"077c8030d91642ad1425f338c30519f0aeb5b933"},c("span",{key:"0d16a7409657426599e9fedced265f866dc45030"},c("ifx-icon",{key:"a97da8a50ec93702dd245450ffa4153c775a8b2d",class:"check__icon",icon:"check12"})),c("span",{key:"a3fd0cd5556a9444516993424f376a5c7a488ed1"},"Incorporated label feature")),c("li",{key:"6e5d7a165cfcac3016d1c6e5dfc9f72a95bcf03f"},c("span",{key:"c193af5092266c0ea4783f4559ff9ad7d8406822"},c("ifx-icon",{key:"530b62aac6a58132e76c557a72d72098cbbefd45",class:"check__icon",icon:"check12"})),c("span",{key:"21d3284d81b1fe9a8edd07e060e1501963d991a1"},"React, Vue and Angular wrapper integration")))),c("td",{key:"65ea3585f5884c246f151fba9797ac1b4ede9328"})),c("tr",{key:"b184014af36bcd5db045267fd53794b9825d2e3d"},c("td",{key:"5b581c554ce96d0082dd0efe0ccc82584121d12e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"787e2eef74ce65ced5524813ae24b19933ca5137",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-basic--development",size:"s",variant:"bold"},"Basic Table")),c("td",{key:"98c7c75c102dbe63dc190c762e42afa07c26b252"},c("ul",{key:"7e0f0a3f65cd887771cd3dc1dcf2e3154cd7f06e"},c("li",{key:"92aefc8acae96b6a4f28e355d566bf1616b0dc3a"},c("span",{key:"40cd5c5c8eca1e481668ef63b7decda8d1aefb35"},c("ifx-icon",{key:"92bc17661885913c95a2791939cadadf7c142468",class:"check__icon",icon:"check12"})),c("span",{key:"1b4500ef7b4ed74e20534fb5b7fe176c8685e451"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"cc88c8429d336930be26d28f05983dedb01c7392"},c("span",{key:"d033d2482255218cda88a895a63ad6eb54f4b60b"},c("ifx-icon",{key:"2988a02f1760db07a081e3c5fe06d7a9c92defb5",class:"check__icon",icon:"check12"})),c("span",{key:"4bdfd2511adeac62ab6ef9bd36217185e8bf7119"},"Includes basic features such as column sorting")))),c("td",{key:"f8fbe4fe821a0dd5bb7f79e2c1040eb539de2a8c"},c("ul",{key:"f88d0b078965a6974ce1a1b152dbbe075c934b53"},c("li",{key:"49e98c751ddcfa7a5716f36c5b85a0fc297031a0"},c("span",{key:"4469127660b2ba719938598c6ea904d57fe6064f"},c("ifx-icon",{key:"a2e432534fcb740531ab4cf1b8cbe93cd5a46361",class:"check__icon",icon:"check12"})),c("span",{key:"04634fad881ff6c3488358ddd6d7e21fe09ebcf9"},"Compact and Default variant")),c("li",{key:"720a8c0d447deca371f7b5808353c4c9b4ba2496"},c("span",{key:"8216f4d021ccb7d8e8144235b38c05d3204b1440"},c("ifx-icon",{key:"70d87d70b2eef72fc95b35b949929db1eeaf15a0",class:"check__icon",icon:"check12"})),c("span",{key:"ef522c3ee649b95fbfd93dd62ef80224a0fcd2b6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"afcaecb31c1f26bb9513dddd9dcdc32daab737ae"})),c("tr",{key:"53cf2ce6269da66a30963370decc28b5663b0d63"},c("td",{key:"96faee2c7e2c474e8d87dde11b0d4fc7a70651cc",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"94e704bc0bb8fbe706e44a511d52bd956e805419",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-advanced--development",size:"s",variant:"bold"},"Advanced Table")),c("td",{key:"6495f00e02658f12663f78b3e22bdcde2abe3e02"},c("ul",{key:"53aefcff33760ab98356545a8ae57ead0042b353"},c("li",{key:"bd5c4fca13828a81863d4f0521ecae3433834143"},c("span",{key:"f88a82397edfd70c3f157fd7bc1bd2c2d5234b32"},c("ifx-icon",{key:"2a3b797c321b89b86ed936b35ae9f8ccc2cdfc2b",class:"check__icon",icon:"check12"})),c("span",{key:"ce98c0231c9953b8b5f669d53a78c99693ccc3b7"},"Pagination")),c("li",{key:"9c46402a3091ec6d701e1647175eb46fee9e6b72"},c("span",{key:"372dadb487da77e2756431253e4f9e3cc8f05131"},c("ifx-icon",{key:"519423cf5c748b49dab9839898e3accd3c0733d2",class:"check__icon",icon:"check12"})),c("span",{key:"1d570b5fb6b155f043fad0889d2b94f5c5f7ddf7"},"Sidebar filter")),c("li",{key:"5bed640e247473336339f82487890fa2a57d6ea9"},c("span",{key:"de10521546ebf80ee66c31567ffdd7343ee39627"},c("ifx-icon",{key:"23cd488ff339725fd0828b8047d364180cc91498",class:"check__icon",icon:"check12"})),c("span",{key:"56051796a7fc71b3132271530b2ec0a2b9fc5932"},"Topbar filter")),c("li",{key:"7c9a817e755864cff7692a09ef44e9c257047a28"},c("span",{key:"fc33ee090d43ff0ff9a216a936dde1c3d13dca19"},c("ifx-icon",{key:"0613a370fb31a67d138fd6c26f66664290230f37",class:"check__icon",icon:"check12"})),c("span",{key:"4699101a6f21ec2c6fd709c1760f84fd4c636370"},"Nestable buttons")))),c("td",{key:"f44c54edd5da12cf07688bfdb485f0eaaa741747"}),c("td",{key:"d5de395049184cee951fb1abe369b45c4256478a"})),c("tr",{key:"f1859dbd2bc2466f2868450074be3518f7ece079"},c("td",{key:"618daa29caa9b6c89fbff67406b3ccf61e41187e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9536383b226ad7abee0e94f3fa64176d396bb36b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"52a939ac62e475dcbccd01a6c587c42dcc9e8ea3"},c("ul",{key:"75e9e3828e26a97bee329adc96d0b6ef823d8ff2"},c("li",{key:"a76f350bb068d1a698199da85d3c5d96cd13a890"},c("span",{key:"9953b37051c4b08269847370af76800c778023bd"},c("ifx-icon",{key:"22c0b275b1af2c96362db9763bb0d05b015f99cc",class:"check__icon",icon:"check12"})),c("span",{key:"906755afb092df368231c0141f7f3366ce096053"},"Offers a customizable and interactive layout that allows users to switch between different content panels, typically used for organizing related information or functional sections")),c("li",{key:"b9229dd9dcb8ce9dd1bb4d94fe6b7ae7521bdabf"},c("span",{key:"b3dae3924b954f2abbbdfd26758595aff07f75c6"},c("ifx-icon",{key:"dbf1033a33d8ed6a62e16e8a45a6c60af4ee87d7",class:"check__icon",icon:"check12"})),c("span",{key:"c3b5ad2cc7b79caf16a7eb4d588d71b8dfb7004d"},"Adheres to web standards")))),c("td",{key:"91b90bb1f75aa54c2e65b33f59d9574895937706"},c("ul",{key:"9f2f374bfb2c9cfb772889266f5f8ec54242d4de"},c("li",{key:"e4dac7fca27f4a0acb26e44bf2ed10988bf7b02a"},c("span",{key:"30348b3ba30ac4e580ba164407081275bb5130cd"},c("ifx-icon",{key:"a95de938f09bf57d368050c941e97479a590d4e4",class:"check__icon",icon:"check12"})),c("span",{key:"0e8664ddce0c973eecda5843e5d608df64fc1e15"},"Horizontal and Vertical orientation")),c("li",{key:"e5609355d9f918bd0dbef9de054f98c566ad41d8"},c("span",{key:"68ac8dabb34911362c19beeab9a2c412a9af1260"},c("ifx-icon",{key:"9e38aed6cc2335b3f7f7c8853699c68fe7791a0b",class:"check__icon",icon:"check12"})),c("span",{key:"caab43078c3b5e68c78f7f28a058d11386e11995"},"Extended customization")),c("li",{key:"be6f9024ade698f1ebec39298a82b78abd74f903"},c("span",{key:"26ae19ecbe37dcc33515ea775515dfed09fc14ba"},c("ifx-icon",{key:"247342387e32de49845c77dc81f4163961de89a6",class:"check__icon",icon:"check12"})),c("span",{key:"85897f32b88a6e8295ad9bc4a1eddb0d650e039a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a258090ec82c83af22d77c7dcb3ffdaa8fce1071"})),c("tr",{key:"d4ea082a2f4bf9ef65a0143183603ca9dad6e36b"},c("td",{key:"88bf24b9dd1afc42112819df521a59fd16ced404",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0b7936a590eb8f559772ee5aecdad6fa0352f457",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"0a12944ad3cd8d20fa91c39b05dcc69b79b0cb27"},c("ul",{key:"407b54c5a05c544d263c63a321f8d141a52a66f8"},c("li",{key:"c8e7d41c7a951b06f2c3f6e09cca051c2788bcbd"},c("span",{key:"095b76d30c091a2f54b3899c85074831c30cee70"},c("ifx-icon",{key:"17e8bdf77081be119ee0ccfaf07987533d0795fa",class:"check__icon",icon:"check12"})),c("span",{key:"16b40f5d4d8c7286e26c523d7f230eca7684f3aa"},"Offers a customizable and stylized marker that allows users to quickly identify and associate specific items or content with descriptive labels or categories")))),c("td",{key:"0c87376d4a40869409abda769abad2838c325e8b"},c("ul",{key:"113efbe2251351931ccf56d7f2d662beaaffc5b9"},c("li",{key:"69ea22277f3b791ee44645ff05ce3cfd93399b82"},c("span",{key:"9188a720b29e86cd8f1d21698945c6ec2a82510c"},c("ifx-icon",{key:"be6bd004bd69f9658631a32b7c66de51a5ae06e4",class:"check__icon",icon:"check12"})),c("span",{key:"dcd33edbc951c9bb4009b390cd241c626a1a5a20"},"Icon incorporated")),c("li",{key:"80da9e668e28bac0eea268a3edc0d787a344fc67"},c("span",{key:"cab4854578f4125ad8e7da51b1d1ec5f4eb4dd55"},c("ifx-icon",{key:"461998ef27ff00d2b7504848d320c79aa7813d5c",class:"check__icon",icon:"check12"})),c("span",{key:"7963692adff9230fc72995a4ccccaa5b7bb23635"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b53402cf1ae21753ffec2ff97c89d94f36ae69a2"})),c("tr",{key:"6f097fe0e0d95955ef3e36d3414ada976530bed2"},c("td",{key:"c47c5b102bd098c96aa95016320ee84e4789e8bb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"67b8f7f695bfb976e1b83c4ca389a387251d75be",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-text-field--development",size:"s",variant:"bold"},"Text Field")),c("td",{key:"87102439584bfd533f3c794e8a22a2f64cfb8c28"},c("ul",{key:"3a597bc84c05d69243cbaeca5d9c8ae672e58ab2"},c("li",{key:"8896e728a84ca66d5fb9a6bab24e0a489427220a"},c("span",{key:"e852d7faa0a8243734687d5bc4f07e1ad052eacd"},c("ifx-icon",{key:"11fe8c89660854b5c221d0d151263bb54ad416d8",class:"check__icon",icon:"check12"})),c("span",{key:"cc359c43672e3b448cc58979c618fe68b8147eac"},"Offers a customizable and accessible interface that allows users to input and modify text, facilitating various data entry and form submission tasks")),c("li",{key:"997a1ba7754a4e16aa23ba588385cc07dd6ae900"},c("span",{key:"3b655f85a282c7524e818845e120d82f5ac6d3d3"},c("ifx-icon",{key:"2e7e9b31d7588aeb8504cb4c3f3ed0bfde697d75",class:"check__icon",icon:"check12"})),c("span",{key:"797c8e7dcd52d97d75d9889b637d2a8b25cd9e5c"},"Adheres to web standards")))),c("td",{key:"4d0980faa7955a72f244ca9eaf991ce1c9b1c211"},c("ul",{key:"7ca7bfe839d2e71727de40d8eaac9c0a7b22724e"},c("li",{key:"45987deffaf65a6c8020a3faefd87ac4c00f4fff"},c("span",{key:"1ffb74c7f9b960b35a6ad91ce5e23db08dbcdd1c"},c("ifx-icon",{key:"bb28a93078b453be5247578c0acbf45014376016",class:"check__icon",icon:"check12"})),c("span",{key:"8a94b2e175594ff4600d73ff2cdbd1370bbd8100"},"Extended customization")),c("li",{key:"96205e9e0a42d745cb1d7eb53e0f331f0c22e301"},c("span",{key:"f48d0f7128660acdaabd557ac1de943e91f525a1"},c("ifx-icon",{key:"94140c9f5ca66ca57030b41c53860898107b95ad",class:"check__icon",icon:"check12"})),c("span",{key:"8379e6994b3b26b8b20447ad38f923381b550a73"},"Possibility for icon configuration")),c("li",{key:"e4593e39a9894c06fc1b281fc93410c4866f4a19"},c("span",{key:"d4a542a3058aa9cf07f4f5685bc7a82b3e47e973"},c("ifx-icon",{key:"0dba50196d7dc0215d6b88dd0d3ca2a3bb2c6652",class:"check__icon",icon:"check12"})),c("span",{key:"bec1f82ff00f622aa83044d68768af354228927b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"09489b56f9f57e9410a2ff7b499b21f48d9dee59"},c("ul",{key:"157d762f3fb511f52a439f93a0c4397dd04784b4"},c("li",{key:"f01ae7c866bde89a2c064b38414232985313bf48"},c("span",{key:"e13ea4087debdd27e8e89b47b84ebb6458be6fc5"},c("ifx-icon",{key:"2aeee3dae930709224192c416463c3064259da6c",class:"check__icon",icon:"check12"})),c("span",{key:"14bf405c6c9143328d40fb834da8dc2e6c2f34df"},"Form integration"))))),c("tr",{key:"9d9fb60b5574494588581552d889768b1a1ea0bb"},c("td",{key:"32b0a670127f99a65baa5e5ca0c943a3f4888271",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2dd7860d7c9deded1c065721979929f61c6c2978",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"19cfadd4cbc6794b0eb24512f63288a07a8b8048"},c("ul",{key:"32adec80042e74947646e51c18b0eb74807e8edd"},c("li",{key:"f769ef93bbb6641120fc3db35dcd9b927f1f5cb7"},c("span",{key:"9cb53a9763d6b9ee8c41ce38e813556ca004feed"},c("ifx-icon",{key:"6c0db8b653900d3be62b9f926094333bfb20642e",class:"check__icon",icon:"check12"})),c("span",{key:"f17708c62c9c4fdc8b512896bacfac134fdac0d3"},"Provides a simple and informative interface for displaying supplementary text or contextual information when users interact with specific elements within a web application")),c("li",{key:"000552a490e8ec67651bf9c44374394575b130d6"},c("span",{key:"0ea09fd9a0098e1e3c38d9832cff7a374bb115f2"},c("ifx-icon",{key:"cda82d11d78c2cdf46b07441197043e544ebe224",class:"check__icon",icon:"check12"})),c("span",{key:"ef4691d9a4f73ceb17b5e06270f7232a51f6b00a"},"Adheres to web standards")))),c("td",{key:"62cf3ffa55d5b4af69ec1bbf18bdf60192565037"},c("ul",{key:"1002e4bcc98a29cbc4bdac0ba2f6aed12e0a3aed"},c("li",{key:"284659c4e1d76aceedaad60e5d02574db8a3c6a5"},c("span",{key:"83525d24dba074cc4040e3b3f4317f48e6b1eb50"},c("ifx-icon",{key:"d6cdd50e90db0237083a8ed93c1d8bea1063d2cb",class:"check__icon",icon:"check12"})),c("span",{key:"a105b97b7c91582375150af1e80d117f63129f12"},"Compact, dismissible and Extended variants")),c("li",{key:"58d53c4d0dd06a958fdb383d8dd4f598f9560e50"},c("span",{key:"33982a155f66fdd00840036e6f2afb7f09073465"},c("ifx-icon",{key:"d69d30ae51feccd6138d4339eebcb2ea6769a23d",class:"check__icon",icon:"check12"})),c("span",{key:"37d08e47359d233164b6f73d1495a54e0904efa9"},"Auto-adjusting position")),c("li",{key:"e8ecb6ffd699e6a4765b3ddb227e49a757382ace"},c("span",{key:"f256b5ad83c181be49b828bca5db77867f37b821"},c("ifx-icon",{key:"b7df67b6034ade15bb465e630d8520ff37bc92cc",class:"check__icon",icon:"check12"})),c("span",{key:"421ffcd2ba9997e8b0a2c4d70f16ba8c0673328b"},"Icon incorporated")),c("li",{key:"0488865d3be74b73d5b4e4f13b32f0d4733fd84d"},c("span",{key:"39dd9b53b6cc6b4796752dc9abf94433467cc4aa"},c("ifx-icon",{key:"d30d8e572990a20ef60db9394cb621cefa4dca63",class:"check__icon",icon:"check12"})),c("span",{key:"8f5e2466045b1fba8a405667157eeebca0c3202f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"36407b0f9a51be0a21b9a3afd228813273dfcf65"})),c("tr",{key:"604a7e269fc5ed26002b2e1b5f2322702efecec2"},c("td",{key:"ddee96e69fd270e99550a00c19000838d9795a32",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2fb967b897d93ea119bcc524a0bf76422fd142f5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"40a461f1ca613faf6d14460c0763905154ee5d86"},c("ul",{key:"405842007a9c687295503974cabb3aa5bd1d0e0d"},c("li",{key:"cda1dad9c2228791e0defe0cc29eb9465570ed2c"},c("span",{key:"7eeecf26b45f8120242e601817d06727007ace2e"},c("ifx-icon",{key:"c51dff137d7e3d22d82f602c32649dece5dd7d6f",class:"check__icon",icon:"check12"})),c("span",{key:"e094ade806951ed1023dd0b75ca628255b62bfe7"},"Offers a flexible and visually distinct container for presenting informative, warning, or error messages to users, enhancing the overall user experience with timely and relevant feedback")),c("li",{key:"f145cb05cd90a5ea40ee46a15af0ba9880827f65"},c("span",{key:"7bc8ae4d43d4537737763b64118bb09e0301f327"},c("ifx-icon",{key:"bf9d55bdeaa3eb4c615a1f1188a482b5ba77c863",class:"check__icon",icon:"check12"})),c("span",{key:"4aa1bfcd892217d9821975f2a07ff02c5296bf08"},"Adheres to web standards")))),c("td",{key:"2fb734ed1787252af2589e28cec603d6bcc55e9b"}),c("td",{key:"f13d2f19a1e12e83e1d1c0618365f4de4bf2a9b6"})),c("tr",{key:"2a7d1571f07d8f163455ab327e28c1c1da8eb2ae"},c("td",{key:"b01e55bb3d1d2623e9413a324f64a3d0d9d962be",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bb58208d926aea7310db7099dd230969e81c2c8d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-content-switcher--development",size:"s",variant:"bold"},"Content Switcher")),c("td",{key:"dd5bfbb7d3e89000f1a6abc14dec509fdbc85814"},c("ul",{key:"cfe1e6f6084c86e35cf86f631943bc8791436ca2"},c("li",{key:"77cd28c3b590707022cd4a17cad9be74c5db419d"},c("span",{key:"6c50cc26b11d313cc67d3cbd9e351c86b23e02e6"},c("ifx-icon",{key:"5fba29882fb0c2fd99df8f6f34bd3f7fb44a71a1",class:"check__icon",icon:"check12"})),c("span",{key:"518bd4187e83fd5dcdae07acc4bc10593dff6ee3"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"2d8b822ff82a1a0c301dfbf93c2f267175607c80"},c("span",{key:"39311e2f5cbe460c2c7e0b3e8041e24f31d73d6e"},c("ifx-icon",{key:"0aefe1fbd6d7559b1c96847fc2c3fb8383c42124",class:"check__icon",icon:"check12"})),c("span",{key:"cb704399daf7c4826fabf025027fedad7dd293cc"},"Offers a customizable mechanism for users to toggle and display diverse content panels, facilitating seamless navigation and interaction with varying information or functional contexts")),c("li",{key:"7f1c6705003576c3cd032e473d1147ef3d3b7e05"},c("span",{key:"9e9e62ff7bfe798d39da884fcfc130470323d127"},c("ifx-icon",{key:"b5d749e53ae1d13da6f4dac154decf5adafac28a",class:"check__icon",icon:"check12"})),c("span",{key:"1df067c3033089b9909dbbe4792d2002bf129ee0"},"Adheres to web standards")))),c("td",{key:"35aaeb9958d5989e9999ba8cd8c60e3d47b182b4"}),c("td",{key:"c5745d3c6f0921de099ed6e1c334ed3d56296a83"})),c("tr",{key:"e27700c062b58ffbdffe478b1c2195b6902d0886"},c("td",{key:"4d886307e4e687b550e2ebfb756d150576d60c51",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"84b3f14787e751a4b449601089f0465cc5fc3eb7",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-control--development",size:"s",variant:"bold"},"Segmented Control")),c("td",{key:"45451ecd553b05739b45c0c726916617f7525aa5"},c("ul",{key:"bbaf7305bb1c5dcf488fd53f76c6deb0fddb6a51"},c("li",{key:"70d3e184d0607a2dea9063d5992b75ca9d316776"},c("span",{key:"58ce226086c091c489ad5db04aa2d5567c1b58a4"},c("ifx-icon",{key:"e6e1f69aceb760bc2e4bc8ae8ccb35eff61553a7",class:"check__icon",icon:"check12"})),c("span",{key:"c1ee3b080b511bd8688a7cb5c7939d841e843c34"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"b04abf1d474a79a80fedecfa777ad2446e1697ee"},c("span",{key:"14e2e0733740f9a034a6d035982ea302a76e6eec"},c("ifx-icon",{key:"b8570500e689dcf2f8a562fe8950390621613406",class:"check__icon",icon:"check12"})),c("span",{key:"86be3b9bca70342e600ed43ded84f1d902871f9e"},"Offers a customizable set of segmented buttons or tabs, allowing users to toggle between different choices or views, typically used for filtering, categorization, or navigation purposes")),c("li",{key:"4d5a9c1f3c8d82638bb8b98d5ffc02a8ba67fb11"},c("span",{key:"10922a682383ea7be091da8432eb3438ea66d14b"},c("ifx-icon",{key:"b3db7cbf3f8c91e59f4e8b8aa4494dad5ecc2fd0",class:"check__icon",icon:"check12"})),c("span",{key:"48e2075ba4343c214f7a3e3df6afef04b484a2bd"},"Adheres to web standards")))),c("td",{key:"3dcb73af79648c3eb8d2087bab086c1e009cbbb3"}),c("td",{key:"b65ff05a8491733bf483a70927c87725074470ca"})),c("tr",{key:"c69516347f54904376dfe6e7cf19813d0070df86"},c("td",{key:"b9e5e4184381b8db0ee1fe322f5ba910e37e2dbd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"007bb077ef0135700467d8197152c18041ec49d7",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-controls--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"0cb849bf4dbd9600d27eec5eafc2290dbd634e78"},c("ul",{key:"3b74f653b2f4ee029e9d44ae7d7d55524c2b54b1"},c("li",{key:"4c80d8ec1314cc5b39c5f65047dcd133adee8f48"},c("span",{key:"6f08deefd65e6760b5f0a118d08a1a91e4bdc801"},c("ifx-icon",{key:"5e1d0bb81d2c1f765a2130b8c15d6bfc0d079816",class:"check__icon",icon:"check12"})),c("span",{key:"edf3ea64a6981902483cc88834e833b2e1b60d86"},"Provides a customizable multi-line text input interface, enabling users to input, edit, and view large amounts of text, while adhering to web standards for accessibility and usability.")),c("li",{key:"6975fc2074be5611ace7c8afdb5564b4e8495970"},c("span",{key:"ed6492f339b0eaff91121fa081778e1293efaca8"},c("ifx-icon",{key:"93583c6337e801f62a8abb256eaa49691ed2b794",class:"check__icon",icon:"check12"})),c("span",{key:"3f54e52868400717dee16c8826f43de41ad4de7c"},"Form integration")))),c("td",{key:"1601fbc162ebdb8f9c86b7f232ace613d0f014fc"}),c("td",{key:"3eea45bd7d9ed7dab2103efcd8c5098714d96644"})),c("tr",{key:"b6c06379933ed7db671ad57b1e5ce9395fabe665"},c("td",{key:"5467ec0bf122adaeb0df235b6baadca5611453ff",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"acc481e484e8bdff6f77ad7e0629514411ea23d3",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"a93df0f838be29b818a06b4b4a62e224c35673f0"},c("ul",{key:"0542d5f573463b3b7d17dafc011a7562fa529e88"},c("li",{key:"28dcbc63b8086e39b653ab4ce9a750c6caa31a30",class:"planned__component-wrapper"},c("span",{key:"ade2900dd1589247fac86877f86f3b2e477df496"},c("ifx-icon",{key:"f319878c0949a2acaf9f1c2eb1894235f8a44719",class:"planned__icon",icon:"clock24"})),c("span",{key:"3bf154ea585ee87d0db47cc551e9c4d42c0a93a5"},"On Hold")))),c("td",{key:"4aa08c38773c7fd2a3d879bba34a688b32c590c7"}),c("td",{key:"2e4002ddc0c4d1a4122a877dbdb6f740283fff25"})),c("tr",{key:"f2e9073485062db091ca755ad708267af4c602b3"},c("td",{key:"3f2162cc91b2c272a5239729968d8b7aa96a2493",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"e4c5747895f1023a43c3a4f2a1122b54f8f95fb9",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"6c3d2633fa8b9af77c111ffc06de0c2f2d1f5aff"},c("ul",{key:"0db3a5c1f6320f15c70e83e04a2796dca2a5be52"},c("li",{key:"1dfff4aaf28e90e2cbcb37b335d1a35a9bfe327e",class:"planned__component-wrapper"},c("span",{key:"791e0dbc101688c15086f6fbe742ca7e77a7437e"},c("ifx-icon",{key:"7208eb9184c0b4c44520903a410d21ffbf021977",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"816e387e69564a1f75e46f3070b1c6b38e3e1a06"},"In Progress")))),c("td",{key:"c6a60abc862e34410ad1270656a3f17d60321d43"}),c("td",{key:"7c764f760cf6ac2f7078a002706f52068692495b"})),c("tr",{key:"c586788facc4b77125b64f983f8fc8e96b983f9f"},c("td",{key:"2a7bf3be283d1a8559981bf416b35510a253d6ae",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"71f2f91c2b04d1df4f62def73a481ab22e4f024e",href:"",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"1f9db64e3174d49d9eb70c7eaf377d86d9c9257f"},c("ul",{key:"0487f7945bf4f5f88dfe44e5f0475b38e901fc10"},c("li",{key:"0eee586464c8984ac82c5909b4b1500f9c0827e0",class:"planned__component-wrapper"},c("span",{key:"07c7d2ff310ede8d400fc3497bab791a66263201"},c("ifx-icon",{key:"a0eb779ecb80abb0bf7d08fb0838654205559f07",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"54153ee21aef7ddcf7ac6ed022dbcbb934988fb1"},"In Progress")))),c("td",{key:"aa83ab0b59a235b3b2142223260c454512d4c788"}),c("td",{key:"3ffab5da88efc20dd9421a62374252a69c23b2c5"})),c("tr",{key:"97949d42c9e52b8545e8af31fe26656af7a3ef20"},c("td",{key:"9514974d917344544ab242c120346fee44fbc124",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"61e916aca82d25046468d06b66125ea7590b1686",href:"",size:"s",variant:"bold"},"Radio Group")),c("td",{key:"bc37417614895c8caded816ee6753550ac7f17d6"},c("ul",{key:"a22790b9200485434a671816ffe2fc261e6959f2"},c("li",{key:"8c837e9918f43596ac79398c29e76d3b6528de0c",class:"planned__component-wrapper"},c("span",{key:"09afbd0c1a9557565b215257467d789caa559110"},c("ifx-icon",{key:"ab5f1e9734f4e59d1a663bd8741e42f9bfb2e10b",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"310c6cfc09be9a81986e8b24cc551e401b934514"},"In Progress")))),c("td",{key:"04120b2f62d87858038a82a21a630bc9121f0a37"}),c("td",{key:"638b63b35110af9e641038e814eeba4aaa286cc7"})),c("tr",{key:"e6612d32ba0e6ac071d7bbed9f88ba7d916a2153"},c("td",{key:"5d7e3ad3af841b1c87591e87230ed84456ee9b81",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"adb2b90c4038a469b28333d87b4b103b668e7814",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"ff05b68faa1593512eb29b55a101f29ba029a647"},c("ul",{key:"cde4eee27f700eb0a5d9e6cb3b50da176d3ffb37"},c("li",{key:"913ab554927296bba32b91808fba2e9053f0affc",class:"planned__component-wrapper"},c("span",{key:"1b46ace70c11a8d1ced645e739c1e0ec6ff2f0a4"},c("ifx-icon",{key:"3bda77798a4ef7f9e42993f99f830275d80d484a",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"126c5fab04c784e495955b4daf832f41cdc1703a"},"In Progress")))),c("td",{key:"b4b9e6070a794549b192efd3f9108ef202222791"}),c("td",{key:"f5a371eab4914cfbf51bffe5935abda4a3d6662c"})),c("tr",{key:"64d611592b19ce77d84d8b9c01decf6bc1fedd8a"},c("td",{key:"64a03de26fe748b73b9ebe63648791aafeff3d75",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"048956a0fb4b49a43230d721ddcd11ed3082ceac",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"2f255a60c7c339a7f3ddff27780c2e2e27cef86b"},c("ul",{key:"e1794b12aa84b86195beadb8cebb3a782c9861be"},c("li",{key:"6ee0a2f0980fc4bb5113eb46fa52301459beaaad",class:"planned__component-wrapper"},c("span",{key:"bfb1b0a19247bbc0731f9e6ffcca465c72bb13b5"},c("ifx-icon",{key:"084acf5fb400a0d0cf17b96caac4a7d69a48cc66",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"47541418b9c0639e24b2ec46db56d868f4b9a99c"},"In Progress")))),c("td",{key:"9e2dcf7d0f5ff5bcadba843cf8f20e07d65be8f1"}),c("td",{key:"c932a935d7331027b661c7ed707c25e87e1ad278"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
-//# sourceMappingURL=p-eb752024.entry.js.map

package/dist/infineon-design-system-stencil/p-eb78b152.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,g as i}from"./p-c808c7d2.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.col{display:flex;flex-direction:column;gap:12px;padding-right:8px;color:#1D1D1D;font-family:var(--ifx-font-family)}.col ::slotted([slot=title]){box-sizing:border-box;font-weight:600;font-size:1rem;line-height:1.5rem;margin:0;padding:0}.col span{display:flex;flex-direction:column;gap:12px;color:#1D1D1D}.col span ::slotted([slot=link]){box-sizing:border-box;font-weight:400;font-size:1rem;line-height:1.5rem}';const a=t;const f=class{constructor(o){e(this,o)}render(){return o("div",{key:"4cad5415cae80dfff4e7d75e82163bd0ef71f648",class:"col"},o("slot",{key:"e884b90aadc3df6f4ec4ccff44a8e05589277b5c",name:"title"}),o("span",{key:"e29933f15be919b14ea765ccbcf75bcd8c8f19e7","aria-label":"navigation link"},o("slot",{key:"5ae8906786990bc1e0821982fa4f0d7bb9dadc9f",name:"link"})))}get el(){return i(this)}};f.style=a;export{f as ifx_footer_column};
-//# sourceMappingURL=p-eb78b152.entry.js.map

package/dist/infineon-design-system-stencil/p-ecd0640d.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as i,g as o}from"./p-c808c7d2.js";const c=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const t=c;const n=class{constructor(i){e(this,i);this.ifxChange=r(this,"ifxChange",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.disabled=false;this.checked=false;this.error=false;this.size="m";this.indeterminate=false}handleCheckbox(){if(!this.disabled){if(this.inputElement.indeterminate){this.internalChecked=true;this.internalIndeterminate=false}else{this.internalChecked=!this.internalChecked}if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}}async isChecked(){return this.internalChecked}async toggleCheckedState(e){this.internalChecked=e}valueChanged(e,r){if(e!==r){this.internalChecked=e;this.inputElement.checked=this.internalChecked}}indeterminateChanged(e,r){if(e!==r){this.internalIndeterminate=e;this.inputElement.indeterminate=this.internalIndeterminate}}handleKeydown(e){if(e.keyCode===32||e.keyCode===13){this.handleCheckbox();e.preventDefault()}}componentWillLoad(){this.internalChecked=this.checked;this.internalIndeterminate=this.indeterminate}componentDidRender(){this.inputElement.indeterminate=this.internalIndeterminate}formResetCallback(){this.internals.setFormValue(null)}getCheckedClassName(){if(this.error){if(this.internalChecked){return"checked error"}else{return"error"}}else if(this.internalChecked){return"checked"}else return""}render(){const e=this.el.innerHTML;let r=false;if(e){r=true}return i("div",{key:"42d5a5b45e19edb9ad6885c2849ec4909fb587ea",class:"checkbox__container"},i("input",{key:"a924fc885614c78b86d396c50665470e1c281c2f",type:"checkbox",hidden:true,ref:e=>this.inputElement=e,checked:this.internalChecked,onChange:this.handleCheckbox.bind(this),id:"checkbox",value:`${this.value}`,disabled:this.disabled?true:undefined}),i("div",{key:"b39d40cdd76089d90ef783f971b3ff1eedddd16c",tabindex:"0",onClick:this.handleCheckbox.bind(this),onKeyDown:this.handleKeydown.bind(this),role:"checkbox","aria-checked":this.indeterminate?"mixed":this.internalChecked.toString(),"aria-disabled":this.disabled,"aria-labelledby":"label",class:`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size==="m"?"checkbox-m":""}\n        ${this.indeterminate?"indeterminate":""}\n        ${this.disabled?"disabled":""}`},this.internalChecked&&i("ifx-icon",{key:"c377c5f5a75b99a6b9b9e94b46f585e0957779bf",icon:"check-12","aria-hidden":"true"})),r&&i("div",{key:"eece08029794065f499efe28480f2fc2030dabd9",id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},i("slot",{key:"a317e5c7eedb34e245888b7f24df1cd5de633bf3"})))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{checked:["valueChanged"],indeterminate:["indeterminateChanged"]}}};n.style=t;export{n as ifx_checkbox};
-//# sourceMappingURL=p-ecd0640d.entry.js.map

package/dist/infineon-design-system-stencil/p-ecd0640d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","IfxCheckboxStyle0","Checkbox","constructor","hostRef","this","disabled","checked","error","size","indeterminate","handleCheckbox","inputElement","internalChecked","internalIndeterminate","value","undefined","internals","setFormValue","ifxChange","emit","isChecked","toggleCheckedState","newVal","valueChanged","newValue","oldValue","indeterminateChanged","handleKeydown","event","keyCode","preventDefault","componentWillLoad","componentDidRender","formResetCallback","getCheckedClassName","render","slot","el","innerHTML","hasSlot","h","key","class","type","hidden","ref","onChange","bind","id","tabindex","onClick","onKeyDown","role","toString","icon"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family);\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (this.inputElement.indeterminate) {\n        this.internalChecked = true;\n        this.internalIndeterminate = false;\n      } else {\n        this.internalChecked = !this.internalChecked;\n      }\n      \n      if (this.internalChecked) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n\n    if (slot) {\n      hasSlot = true;\n    }\n\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && <ifx-icon icon=\"check-12\"  aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,guEACpB,MAAAC,EAAeD,E,MCSFE,EAAQ,MAPrB,WAAAC,CAAAC,G,+MAWUC,KAAAC,SAAoB,MACpBD,KAAAE,QAAmB,MACnBF,KAAAG,MAAiB,MACjBH,KAAAI,KAAe,IACfJ,KAAAK,cAAyB,K,CASjC,cAAAC,GACE,IAAKN,KAAKC,SAAU,CAClB,GAAID,KAAKO,aAAaF,cAAe,CACnCL,KAAKQ,gBAAkB,KACvBR,KAAKS,sBAAwB,K,KACxB,CACLT,KAAKQ,iBAAmBR,KAAKQ,e,CAG/B,GAAIR,KAAKQ,gBAAiB,CACxB,GAAIR,KAAKU,QAAUC,UAAW,CAC5BX,KAAKY,UAAUC,aAAab,KAAKU,M,KAC5B,CACLV,KAAKY,UAAUC,aAAa,K,MAEzB,CACLb,KAAKY,UAAUC,aAAa,K,CAE9Bb,KAAKc,UAAUC,KAAKf,KAAKQ,gB,EAK7B,eAAMQ,GACJ,OAAOhB,KAAKQ,e,CAId,wBAAMS,CAAmBC,GACvBlB,KAAKQ,gBAAkBU,C,CAIzB,YAAAC,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBrB,KAAKQ,gBAAkBY,EACvBpB,KAAKO,aAAaL,QAAUF,KAAKQ,e,EAMrC,oBAAAc,CAAqBF,EAAmBC,GACtC,GAAID,IAAaC,EAAU,CACzBrB,KAAKS,sBAAwBW,EAC7BpB,KAAKO,aAAaF,cAAgBL,KAAKS,qB,EAI3C,aAAAc,CAAcC,GAEZ,GAAIA,EAAMC,UAAY,IAAMD,EAAMC,UAAY,GAAI,CAChDzB,KAAKM,iBACLkB,EAAME,gB,EAIV,iBAAAC,GACE3B,KAAKQ,gBAAkBR,KAAKE,QAC5BF,KAAKS,sBAAwBT,KAAKK,a,CAGpC,kBAAAuB,GACE5B,KAAKO,aAAaF,cAAgBL,KAAKS,qB,CAQzC,iBAAAoB,GACE7B,KAAKY,UAAUC,aAAa,K,CAG9B,mBAAAiB,GACE,GAAI9B,KAAKG,MAAO,CACd,GAAIH,KAAKQ,gBAAiB,CACxB,MAAO,e,KACF,CACL,MAAO,O,OAEJ,GAAIR,KAAKQ,gBAAiB,CAC/B,MAAO,S,MACF,MAAO,E,CAGhB,MAAAuB,GACE,MAAMC,EAAOhC,KAAKiC,GAAGC,UACrB,IAAIC,EAAU,MAEd,GAAIH,EAAM,CACRG,EAAU,I,CAGZ,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,SAAAC,IAAA,2CACEE,KAAK,WACLC,OAAM,KACNC,IAAMR,GAAQjC,KAAKO,aAAe0B,EAClC/B,QAASF,KAAKQ,gBACdkC,SAAU1C,KAAKM,eAAeqC,KAAK3C,MACnC4C,GAAG,WACHlC,MAAO,GAAGV,KAAKU,QACfT,SAAUD,KAAKC,SAAW,KAAOU,YAGnCyB,EAAA,OAAAC,IAAA,2CACEQ,SAAS,IACTC,QAAS9C,KAAKM,eAAeqC,KAAK3C,MAClC+C,UAAW/C,KAAKuB,cAAcoB,KAAK3C,MACnCgD,KAAK,WAAU,eACDhD,KAAKK,cAAgB,QAAUL,KAAKQ,gBAAgByC,WAAU,gBAC7DjD,KAAKC,SAAQ,kBACZ,QAChBqC,MAAO,iCACLtC,KAAK8B,kCACP9B,KAAKI,OAAS,IAAM,aAAe,eACnCJ,KAAKK,cAAgB,gBAAkB,eACvCL,KAAKC,SAAW,WAAa,MAE5BD,KAAKQ,iBAAmB4B,EAAA,YAAAC,IAAA,2CAAUa,KAAK,WAAU,cAAc,UAEjEf,GACCC,EAAA,OAAAC,IAAA,2CAAKO,GAAG,QAAQN,MAAO,SAAStC,KAAKI,OAAS,IAAM,UAAY,MAAMJ,KAAKC,SAAW,WAAa,MAAO6C,QAAS9C,KAAKM,eAAeqC,KAAK3C,OAC1IoC,EAAA,QAAAC,IAAA,8C","ignoreList":[]}