@infineon/infineon-design-system-stencil 33.4.1--canary.1855.83055532e24827965eebebc371d8d9f314f098a7.0 → 33.4.1--canary.1855.4ecc2334895a5f7093529884743b44972a5ab85b.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","constructor","hostRef","this","inputId","datePickerId","size","error","success","disabled","type","required","autocomplete","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","hours","getHours","minutes","getMinutes","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","toISOString","substring","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","componentWillUpdate","formResetCallback","render","h","key","class","htmlFor","_a","label","trim","undefined","ariaLabel","max","min","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  componentDidLoad() { \n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n        { this.label?.trim() }\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"mappings":"yDAAA,MAAMA,EAAgB,6yEACtB,MAAAC,EAAeD,E,MCUFE,EAAU,MAPvB,WAAAC,CAAAC,G,2MAQUC,KAAAC,QAAkB,qBAAqBC,IAGvCF,KAAAG,KAAe,IACfH,KAAAI,MAAiB,MACjBJ,KAAAK,QAAmB,MACnBL,KAAAM,SAAoB,MAGpBN,KAAAO,KAAe,OAGfP,KAAAQ,SAAoB,MAGpBR,KAAAS,aAAuB,I,CAM/B,OAAAC,CAAQC,GACN,MAAMC,EAAaD,EAAEE,OAAOC,MAC5B,MAAMC,EAAe,IAAIC,KAAKJ,GAC9B,MAAMK,EAAMF,EAAaL,UACzB,MAAMQ,EAAQH,EAAaI,WAAa,EACxC,MAAMC,EAAOL,EAAaM,cAI1B,IAAKT,EAAY,CACfZ,KAAKsB,UAAUC,aAAa,MAE5B,GAAGvB,KAAKO,OAAS,iBAAkB,CACjC,MAAMiB,EAAQT,EAAaU,WAC3B,MAAMC,EAAUX,EAAaY,aAC7B3B,KAAK4B,QAAQC,KAAK,CAACZ,MAAKC,QAAOE,OAAMI,QAAOE,W,KACvC,CACL1B,KAAK4B,QAAQC,KAAK,CAACZ,MAAKC,QAAOE,Q,CAEjC,M,CAGF,MAAMU,EAAQ9B,KAAK+B,GAAGC,WAAWC,cAAc,uBAC/CH,EAAMI,UAAUC,IAAI,aAEpBnC,KAAKsB,UAAUC,aAAaR,EAAaqB,cAAcC,UAAU,EAAE,KACnE,GAAGrC,KAAKO,OAAS,iBAAkB,CACjC,MAAMiB,EAAQT,EAAaU,WAC3B,MAAMC,EAAUX,EAAaY,aAC7B3B,KAAK4B,QAAQC,KAAK,CAACZ,MAAKC,QAAOE,OAAMI,QAAOE,W,KACvC,CACL1B,KAAK4B,QAAQC,KAAK,CAACZ,MAAKC,QAAOE,Q,EAInC,2BAAAkB,GACE,MAAMR,EAAQ9B,KAAK+B,GAAGC,WAAWC,cAAc,uBAC/C,GAAGH,EAAO,CACRA,EAAMS,O,EAIX,UAAAC,GACG,GAAIC,UAAUC,UAAUC,QAAQ,YAAc,EAAI,CAChD,MAAO,Q,MACF,GAAIF,UAAUC,UAAUC,QAAQ,WAAa,EAAI,CACtD,MAAO,O,MACF,GAAIF,UAAUC,UAAUC,QAAQ,UAAY,EAAI,CACrD,MAAO,I,MACF,GAAIF,UAAUC,UAAUC,QAAQ,aAAe,EAAI,CACxD,MAAO,S,KACF,CACL,MAAO,S,EAIX,iBAAAC,GACE,MAAMC,EAAU7C,KAAKwC,aACrB,MAAMV,EAAQ9B,KAAK+B,GAAGC,WAAWC,cAAc,uBAE/C,GAAGY,IAAY,UAAW,CACxBf,EAAMI,UAAUC,IAAI,mB,MACf,GAAGL,EAAMI,UAAUY,SAAS,oBAAqB,CACtDhB,EAAMI,UAAUa,OAAO,mB,EAI3B,gBAAAC,GACEhD,KAAK4C,mB,CAGP,mBAAAK,GACE,GAAIjD,KAAKc,MAAO,CACdd,KAAKU,QAAQ,CAAEG,OAAQ,CAAEC,MAAOd,KAAKc,Q,EAIzC,iBAAAoC,GACElD,KAAKsB,UAAUC,aAAa,K,CAG9B,MAAA4B,G,QACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0BtD,KAAKI,MAAQ,QAAU,MAAMJ,KAAKM,SAAW,WAAY,MAE7F8C,EAAA,SAAAC,IAAA,2CAAOC,MAAM,iBAAiBC,QAAUvD,KAAKC,UAC3CuD,EAAAxD,KAAKyD,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGdN,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBtD,KAAKG,OAAS,IAAM,QAAU,WAAWH,KAAKM,SAAW,WAAa,MAClG8C,EAAA,SAAAC,IAAA,2CACA9C,KAAMP,KAAKO,KACXE,aAAcT,KAAKS,aACnB6C,MAAO,sBAAsBtD,KAAKI,MAAQ,QAAU,MAAMJ,KAAKK,QAAU,UAAY,KACrFC,SAAUN,KAAKM,SAAW,KAAOqD,UAAS,eAC5B3D,KAAKI,MAAQ,KAAOuD,UAAS,aAC/B3D,KAAK4D,UACjBC,IAAK7D,KAAK6D,IACVC,IAAK9D,KAAK8D,IACVhD,MAAOd,KAAKc,MACZN,SAAUR,KAAKQ,SACfuD,SAAWpD,GAAMX,KAAKU,QAAQC,KAC9ByC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBAAgBU,KAAK,SAASC,QAAS,IAAMjE,KAAKsC,+BAC3Dc,EAAA,YAAAC,IAAA,2CAAUa,KAAK,aAAY,cAAa,aAI1CC,EAAAnE,KAAKoE,WAAO,MAAAD,SAAA,SAAAA,EAAET,SACZN,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACPtD,KAAKoE,QAAQV,Q,mEAQ7B,IAAIxD,EAAe,E","ignoreList":[]}

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as i,g as o}from"./p-e6edf72d.js";const t=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:"Source Sans 3"}.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:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).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 c=t;const n=class{constructor(i){e(this,i);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",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=!this.internalChecked}if(this.internalChecked&&!this.internalIndeterminate){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}}errorChanged(e,r){if(e!==r){this.ifxError.emit(e)}}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:"ae37e8cf56cecc28d1d3441e4ca70a66d19fd4a9",class:"checkbox__container"},i("input",{key:"210ff7879962c1df556491d83d3ebcf7238b6b50",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:"2b1b2065f41003c4e627e802fa70728f7b884710",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&&!this.internalIndeterminate&&i("ifx-icon",{key:"ca2171404ee8926623bab88b5d4abbb906d66a9d",icon:"check-12","aria-hidden":"true"})),r&&i("div",{key:"efb5c73f051dceb60b79220bffd5b1694502be7b",id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},i("slot",{key:"1c3d1089dfce161a4e4c093c3211a8d772b3d90b"})))}static get formAssociated(){return true}get el(){return o(this)}static get watchers(){return{checked:["valueChanged"],error:["errorChanged"],indeterminate:["indeterminateChanged"]}}};n.style=c;export{n as ifx_checkbox};
-//# sourceMappingURL=p-bf1f6439.entry.js.map

package/dist/infineon-design-system-stencil/p-bf1f6439.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","errorChanged","ifxError","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.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: tokens.$ifxFontFamilyBody;\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        &.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:not(.indeterminate) {\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}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\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  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\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  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\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   * 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    if (slot) {\n      hasSlot = true;\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        <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 && !this.internalIndeterminate && <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}"],"mappings":"yDAAA,MAAMA,EAAc,0zEACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,MAPrB,WAAAC,CAAAC,G,kPAWUC,KAAAC,SAAoB,MACpBD,KAAAE,QAAmB,MACnBF,KAAAG,MAAiB,MACjBH,KAAAI,KAAe,IACfJ,KAAAK,cAAyB,K,CAUjC,cAAAC,GACE,IAAKN,KAAKC,SAAU,CAClB,IAAKD,KAAKO,aAAaF,cAAe,CACpCL,KAAKQ,iBAAmBR,KAAKQ,e,CAE/B,GAAIR,KAAKQ,kBAAoBR,KAAKS,sBAAuB,CACvD,GAAIT,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,EAKrC,YAAAc,CAAaF,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBrB,KAAKuB,SAASR,KAAKK,E,EAKvB,oBAAAI,CAAqBJ,EAAmBC,GACtC,GAAID,IAAaC,EAAU,CACzBrB,KAAKS,sBAAwBW,EAC7BpB,KAAKO,aAAaF,cAAgBL,KAAKS,qB,EAI3C,aAAAgB,CAAcC,GAEZ,GAAIA,EAAMC,UAAY,IAAMD,EAAMC,UAAY,GAAI,CAChD3B,KAAKM,iBACLoB,EAAME,gB,EAIV,iBAAAC,GACE7B,KAAKQ,gBAAkBR,KAAKE,QAC5BF,KAAKS,sBAAwBT,KAAKK,a,CAGpC,kBAAAyB,GACE9B,KAAKO,aAAaF,cAAgBL,KAAKS,qB,CAOzC,iBAAAsB,GACE/B,KAAKY,UAAUC,aAAa,K,CAG9B,mBAAAmB,GACE,GAAIhC,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,MAAAyB,GACE,MAAMC,EAAOlC,KAAKmC,GAAGC,UACrB,IAAIC,EAAU,MACd,GAAIH,EAAM,CACRG,EAAU,I,CAEZ,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uBACTF,EAAA,SAAAC,IAAA,2CACEE,KAAK,WACLC,OAAM,KACNC,IAAMR,GAAQnC,KAAKO,aAAe4B,EAClCjC,QAASF,KAAKQ,gBACdoC,SAAU5C,KAAKM,eAAeuC,KAAK7C,MACnC8C,GAAG,WACHpC,MAAO,GAAGV,KAAKU,QACfT,SAAUD,KAAKC,SAAW,KAAOU,YAEnC2B,EAAA,OAAAC,IAAA,2CACEQ,SAAS,IACTC,QAAShD,KAAKM,eAAeuC,KAAK7C,MAClCiD,UAAWjD,KAAKyB,cAAcoB,KAAK7C,MACnCkD,KAAK,WAAU,eACDlD,KAAKK,cAAgB,QAAUL,KAAKQ,gBAAgB2C,WAAU,gBAC7DnD,KAAKC,SAAQ,kBACZ,QAChBuC,MAAO,iCACLxC,KAAKgC,kCACPhC,KAAKI,OAAS,IAAM,aAAe,eACnCJ,KAAKK,cAAgB,gBAAkB,eACvCL,KAAKC,SAAW,WAAa,MAE5BD,KAAKQ,kBAAoBR,KAAKS,uBAAyB6B,EAAA,YAAAC,IAAA,2CAAUa,KAAK,WAAU,cAAa,UAE/Ff,GACCC,EAAA,OAAAC,IAAA,2CAAKO,GAAG,QAAQN,MAAO,SAASxC,KAAKI,OAAS,IAAM,UAAY,MAAMJ,KAAKC,SAAW,WAAa,MAAO+C,QAAShD,KAAKM,eAAeuC,KAAK7C,OAC1IsC,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as c,g as a}from"./p-e6edf72d.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:"f201576d3fd51d3b0d714a61796b6dc91947706c",class:"container"},c("header",{key:"b846cee37aa333193aaaa9ac6870cc43a466dae7",class:"header"},c("div",{key:"753bb36a852ae41cfe01d0dd413fd020e3b5b616",class:"header__info-wrapper"},c("div",{key:"ff7d1b3931f5ac16bf4c5f8bd644ee8769f0d43e",class:"title"},"DDS Components Overview"),c("div",{key:"fc6d8000ee858b96a02d99014a9f2186afe8c39e",class:"infoboard__wrapper"},c("div",{key:"495671879681ae19e6d4bb57d4dd1975cbbfa3f9",class:"basic__info"},c("div",{key:"c29909c3beddb824de1dfc5e766b969be6aad8c5"},"Total Number:"),c("div",{key:"192cdfc36066d4f8108b79c339132940ab9d40f2"},c("ifx-number-indicator",{key:"d60c4192d097f64d0abfe86c2afdd19405af2229",id:"number__indicator-total"}))),c("div",{key:"6b72e2ba98202eaabcef3589ca269f60c19d4d5d",class:"basic__info"},c("div",{key:"45dd2261b9a986038404feb13cd781c801c24027"},"Completed:"),c("div",{key:"bc832cfe111638963ead973e475bca7eca13459a"},c("ifx-number-indicator",{key:"6fde7ff79aa5fa04604041e1023c3db3195a9ed2",id:"number__indicator-completed"}))),c("div",{key:"cdcf279b6bf170f369f90f7cd87cc3a848830061",class:"basic__info"},c("div",{key:"f21f4aaec288f4cad7476a816f7f51a4d7ec1e62"},"In Progress:"),c("div",{key:"507f4f6486a09317039dd06d48528c7dde613153"},c("ifx-number-indicator",{key:"e1a05079eea3f0f943e4751e3a289bd0bb53f9c0",id:"number__indicator-planned"})))))),c("div",{key:"7b481348db5e4cf8194b019ea1b278c1e87fe72d",class:"view"},c("div",{key:"6b1b10be24934f3705b31bcfd17fe30da3d07b60",class:"wrapper"},c("table",{key:"4f53169026c3f19d6aa0f5d90b425665bc7ae521"},c("thead",{key:"d6e35a7310eeee9f3a147e5c8b806c3b0247505e"},c("tr",{key:"ae142b5aa2bbabc315d1f3ea4164905ba2927c43"},c("th",{key:"6fc0c1a296fe285449df45ba22ba7ed7e0a2a6a4",class:"sticky-col second-col"},"Component"),c("th",{key:"e5f39953aeed9f9a83e8bee157cab91544e68276"},c("div",{key:"8cd6c42769c13fc1765b3bc968dfb495430f39e2",class:"version__wrapper"},c("span",{key:"b024b9fb6a3d1dc1c4fc201cf513facb3b3232d4"},"Version 1"))),c("th",{key:"12320eba2bbf2db54e811735d3cf7c056bb8e098"},c("div",{key:"4ce30f4b2c20d60b413c172518b3d7b2b1afb5e5",class:"version__wrapper"},c("span",{key:"77455c7a7bdb14b8a034b457da7d4e619e0ca7c1"},"Version 2"))),c("th",{key:"3cbc2f1f4e8395424433fefe034324a5c5c7232d"},"Version 3"))),c("tbody",{key:"4c074141f2329cdeee53a67c66887ab4c0487be8"},c("tr",{key:"46c1c4f688c674bce47b9ee2b1e3373ecfeee30f"},c("td",{key:"8cf4c3d78fbd8d107d1344836f534fa1fac919ee",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c1ac6a6008551b648793f808488d1ee321ebd86c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"cd2814fe77c64330fb7b1f29b8b7071de18abd3e"},c("ul",{key:"15f6d6bde3f209055dfd5d3faa44810ec2dc33e6"},c("li",{key:"91c46003d82bd3b09334824b68a32ffe169a3076"},c("span",{key:"6e86b37fef8b41046a07519d0a80b9f88d0e2261"},c("ifx-icon",{key:"d4f5461f2f717f937847eb54b25175caf269c135",class:"check__icon",icon:"check12"})),c("span",{key:"fd379c5d01c7e6dabade9d849d2a1ac434f9813a"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"0e8b4c41b2cb9223e5def881d18a719ff01a0f80"},c("span",{key:"dc2972a00f1ad57c55db11c95ca29f2aa98fa02f"},c("ifx-icon",{key:"b34570e2c2e432eebaca48ae4c401eec204c0561",class:"check__icon",icon:"check12"})),c("span",{key:"537797d799a0bec8ea307cea854146e6f3f91ee7"},"Adheres to web standards")),c("li",{key:"608e12d015e4145c67d1b69a8b32bef8022298f0"},c("span",{key:"ca7cf6b05dbef07a8ccb8ac78bd264f0f5c54d03"},c("ifx-icon",{key:"d8c896bcae999bbada122269c9d039c0eb54bb7c",class:"check__icon",icon:"check12"})),c("span",{key:"768d8056c44aac6dd25c59f007482132e6d47a61"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"3fe455ca59e0a2d0b57a2340fe3f03f1e8b17b08"},c("ul",{key:"3b4512c827108d29b4fcc020c5b27dd4364c9613"},c("li",{key:"d6b1d52e302a285e37e27778911d7ffd062f5e37"},c("span",{key:"47cd720b4dc2036fc16798f54ef1f3be6b172c8f"},c("ifx-icon",{key:"6fa5e9c984290ed1ba2c34f9ada46c216cf2c24a",class:"check__icon",icon:"check12"})),c("span",{key:"756fef5519d06a6dbce0a300d5048ed2f0a2d601"},"Auto collapse feature")),c("li",{key:"2fff531dea6b4f5ec7593fd28a75203373b1a06e"},c("span",{key:"4b32b039ea4459ef8c12a05c01fc2a959c850d8a"},c("ifx-icon",{key:"e404a35248b511276319cd9a387dbfe5c081b1c8",class:"check__icon",icon:"check12"})),c("span",{key:"02c3d506efca079201dfa01261dda24c09f6ef9d"},"Initial collapse feature")),c("li",{key:"e0764625158651698454345b0f7da8cdd8ea7fa6"},c("span",{key:"f261e709c47c239a6ca9db181fd05b9b1974dfa1"},c("ifx-icon",{key:"f2726dcb5ccba3ed0fbc6b203e3a3c1221a5f0bd",class:"check__icon",icon:"check12"})),c("span",{key:"bad0d139b51958307ee2fd271050881bd3d9520e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"dec3d56d4d1777fa8a0e5d4f567d5db3d6b8e79a"})),c("tr",{key:"ca2eb3f183b3000a9e279936a66b3d35caff1ac0"},c("td",{key:"dfbae5e008f3ddeb8fccd0218706ea084ccee6c4",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2d90ce67e2aa9d6b2a737e049d647d52d42f87a6",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"6f36819b851a73a17958e2c1df45ca142058fe57"},c("ul",{key:"44afc68cb4dda2151158ba870a09cb03eb603133"},c("li",{key:"b290c37b0e015b9e0eb229f4659cf458d90609f9"},c("span",{key:"8eb634e69abc3ff784bd5a2512c6ba1a82c2dfbf"},c("ifx-icon",{key:"55fa31f59131e077ff4aa1dccb8b963e3b6b0c6a",class:"check__icon",icon:"check12"})),c("span",{key:"dafdc9b57d5c85a3eec010d2199346d6de4f0fc7"},"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:"dd692807903319663d9feb177780a2b99032b73e"},c("span",{key:"04e9106895f411384d212118887d288bd0f8ccdd"},c("ifx-icon",{key:"ec95aa4bfa0a5d77ece08c75655ec46c6872ae9a",class:"check__icon",icon:"check12"})),c("span",{key:"53415631501dfcf1d3bc64a5bdb0384b140d2c2b"},"Adheres to web standards")))),c("td",{key:"340cc33ded9863df81f79d3b45b81ce01d196e7f"},c("ul",{key:"0ae56e0775cd4fc574eca4baecad828676b760ae"},c("li",{key:"804b0bc40f4133e0a5dc27732f181f7edd9f2119"},c("span",{key:"def2e72c01b990aa9093888d71a0e9c1e185d813"},c("ifx-icon",{key:"57a17eb0edd0599ab8cf9ee9830ca7919307d403",class:"check__icon",icon:"check12"})),c("span",{key:"6fa230c604b9e0ecb93e9de3ee23e28e262101ad"},"Configurable close button")),c("li",{key:"c47c3516cc0f706e9c8ca3780e79bd4328ff3a15"},c("span",{key:"c0afca9f2eebe096ee9f5d72a2929a2a77c7d4b6"},c("ifx-icon",{key:"a5ff1be702d2d993587006cd4f5614ba20ee3d85",class:"check__icon",icon:"check12"})),c("span",{key:"a346037df55b412e0e74b3b270efb10aeec57e5f"},"Additional Info variant")),c("li",{key:"b2b85e291c2485555f7e8f0780c01b3340f03e36"},c("span",{key:"48318b9bb890960e6a835c44d3d65b0b9045d439"},c("ifx-icon",{key:"5256476e8e6351aa97223703bf6d7c9261ff8958",class:"check__icon",icon:"check12"})),c("span",{key:"e48fa130574fc57693ea66b773839d83c43e8638"},"React, Vue and Angular wrapper integration")))),c("td",{key:"87ef2af05bd5609d0ac604a9fd6f2b2eb34b8b52"})),c("tr",{key:"755d70abe3c365ff52f83164aa808bb4bee64bfd"},c("td",{key:"254a7468deed1eb98e10d24898f5de0ee0049b31",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7fe652e56ef32cf149882cfb6a616f45ed16d18d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"77921eaf1ff0675b397ca1603d1309782985251d"},c("ul",{key:"16441aefca1cb6dc3976781abb9d8b3cddb403de"},c("li",{key:"819b307496c8207dee2f9e61f90e215b451ea472"},c("span",{key:"782e1eae21d74828ed95f20fe4669d35fee8eb6e"},c("ifx-icon",{key:"8da41320c4d90915de63a6d95e43fc40b3722874",class:"check__icon",icon:"check12"})),c("span",{key:"b5684b9437db6cbf910c2f2a880c005462a9161f"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"f174ce8365ceb10e4299060319346c2f3e6b13e5"},c("span",{key:"8b95fe32a0ea1aef533e1520af4acd504f000509"},c("ifx-icon",{key:"daaedbaf6fd2c7c41e87f7c224acf4ee984858f9",class:"check__icon",icon:"check12"})),c("span",{key:"3d35fa3aa92023deebf473f366804685c5670561"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"b438a342e34fab1d6965637ab8d4e6aeb74e3a1f"},c("ul",{key:"612977c4d16fa0c78e8110fc94196e8bfca08b89"},c("li",{key:"43f20299e637ad40d74310226da2047c99c25802"},c("span",{key:"45911235d2406e3e9a71109e4078fad5909a305f"},c("ifx-icon",{key:"0b91739d3cc7c6650e90c25dfa743e25477bada2",class:"check__icon",icon:"check12"})),c("span",{key:"aab14d403ed08fced3e2c97a8a22959e43e00ab9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0c69f0e8dc89c435eef0fa167ed38ffe9417742e"})),c("tr",{key:"6d7c31e2ebd1b53ca9a32cad50d553dad991525f"},c("td",{key:"96a089f1022681e08141c1df4d79669baca461bf",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"02fc61eb6f93fe79faa2ae5fd14cc1bc31fb76aa",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"f9029cdc47442118e5e91c216b7bccc6527da4ce"},c("ul",{key:"30c73efab8d4eabc13fa8f2925eb7668f0997d21"},c("li",{key:"30b19183720448db2575cc0cb859d9c0b8071874"},c("span",{key:"38ea42393fe9535061d3df6188c7fa5d1fd43c91"},c("ifx-icon",{key:"4ae9efa2d1adacead6c1c59698ff1f872fe23e78",class:"check__icon",icon:"check12"})),c("span",{key:"2860b124e8f674ffc2fbd6d22d3d8e55aac72ca4"},"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:"88cd1246133e66c57f2479d11946c720a74757fa"},c("span",{key:"17f2200968936e4d16eb9b3e81f4205d61defc73"},c("ifx-icon",{key:"c33e472c9cad4aacf5b8c81704d5b5a8b34d3504",class:"check__icon",icon:"check12"})),c("span",{key:"bb895ef40d5ad8b08a0f76bd4a293879a44a72ea"},"Adheres to web standards")))),c("td",{key:"c90645e624eeb076ebdc41fafee2358b1fc3e66b"},c("ul",{key:"da975d0b1324f944e6e63086fb12218f3d3dece1"},c("li",{key:"fc2eacd1c4d69b25b3532b28b790b3d22ec4dd4b"},c("span",{key:"e8fa373034c60bf08602715b5fca792215451834"},c("ifx-icon",{key:"62e4757f77229153f488b595f9f8adc3662e0b8c",class:"check__icon",icon:"check12"})),c("span",{key:"9bbd7f7b4ddc63266b91fd418ddafa44223c7891"},"Possibility to add an icon")),c("li",{key:"5c53997d40aa797033919dc466029975bd91e8ff"},c("span",{key:"f841efa197d04c66bad83b9871104530ff15e3ec"},c("ifx-icon",{key:"c9ce22bed44e64a58fdde5b09f525de00597e61b",class:"check__icon",icon:"check12"})),c("span",{key:"dea8af12d637200bea99e20702bb0cbcc9371994"},"Incorporated dropdown-menu for individual items")),c("li",{key:"1b0a5815dd1bb96b5ec6501b25ff2965fd378172"},c("span",{key:"4b1f46cc624fdd8deda13880904da93396674ae1"},c("ifx-icon",{key:"7153dc6a3f4010461952c8cd992a9e95c72be3c3",class:"check__icon",icon:"check12"})),c("span",{key:"c4e0a2739d73429f8774084e6d0b7866acf13f79"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fb429122a93436e3e3721c84fccdb80269b62b2d"})),c("tr",{key:"d4d1e61be4f8ba16f720302d79e79b053495d064"},c("td",{key:"f066da956f1c339ea09712a8c20653664461e44a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5f86931b70272c85def917d3eb1d3f2bcd00f416",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"d34169e8f8ccb80a6adcf89feef02ec56254503e"},c("ul",{key:"6b68de0052a61b750c542a72a728fb98d72351a4"},c("li",{key:"ac37ee50e6ca553aa6c67bf89e21ddd4f4d3be9b"},c("span",{key:"aa23940bc4613a715930054f3cd638984c612018"},c("ifx-icon",{key:"e0bb21faff9828c3c596d4b16e3cd254f331916b",class:"check__icon",icon:"check12"})),c("span",{key:"4dc7d8c2ba8c4d6d09852871366aee52d04c98df"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"defa0d6a61b3f526a8a09cf6c3b07cbfea0bb49e"},c("span",{key:"b905e3f7646486cdaa81b5c70f53b9bac9b46c97"},c("ifx-icon",{key:"de561c441e0be3a5ab97f4900560c7372b4e4160",class:"check__icon",icon:"check12"})),c("span",{key:"f22e4a30b856d90636380ee74314521988c5456f"},"Adheres to web standards")))),c("td",{key:"aac44358012531a91cc693401ac24b189d758057"},c("ul",{key:"9eb9572c370832d10da8b51405bc8d872f31d085"},c("li",{key:"8dbb571ae6c7c20f1d391f5801251b278d12bc91"},c("span",{key:"5294dc446fa89c7f71d3975c7fc52b100b25aae8"},c("ifx-icon",{key:"66e77fc5ad88b2dbad6afcd8095a61cbe9984605",class:"check__icon",icon:"check12"})),c("span",{key:"6b07c6bc94b81932400efea79fc82a7580e1eb10"},"fullWidth feature")),c("li",{key:"121497676d0212467dd887a5209aa0302dce3c7c"},c("span",{key:"0bdb1542ac4778426fc329cbb6f52215db847060"},c("ifx-icon",{key:"226d95129cacf0b92b34cb601b2ee50df37bdd75",class:"check__icon",icon:"check12"})),c("span",{key:"ffd08d2096e75e6c6d8c9e9ece74115396483b43"},"Icon integration")),c("li",{key:"41958c3ed90d5f8e457433a824f1568c06edd77c"},c("span",{key:"6cbce1c01185f99520d08cb354fba81ae6d089e7"},c("ifx-icon",{key:"e669bf4e9d6d9431f197574083f6860e4ba6604e",class:"check__icon",icon:"check12"})),c("span",{key:"1ffc50c51bf868ce6dc3d177410c7ef6fe562fcf"},"Link integration")),c("li",{key:"60e0bea4b338a3230e38ca13efcda43c7a918fb3"},c("span",{key:"2a76d16fdb1d43e3c2e4c9c646fbea7009062cc4"},c("ifx-icon",{key:"c057b4d616716549d8e0f3d071e5a7eeb3fff430",class:"check__icon",icon:"check12"})),c("span",{key:"d19afad05aa85d64ddca644f87c95179facbacb1"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a2b5b0ebdab71f10ab3eac3665767cd20bdae0ee"},c("ul",{key:"c37a0b56bc6f0a1e69536ec61b04f59ca7e4127a"},c("li",{key:"d0c8da504e2315d7c8392ef18f213f48135581a6"},c("span",{key:"519225abee4bbf423deac163330ee9286c5ba899"},c("ifx-icon",{key:"1d50d4f678ca6f1f7ef0f5a738365e4275f10cc2",class:"check__icon",icon:"check12"})),c("span",{key:"87ddd475cf8ab49d308e82088ba79da8cbd13d51"},"Form integration"))))),c("tr",{key:"90366ab3046fba2c9b785ec80a8ccaf06ed04e2a"},c("td",{key:"1e201c0c8ae64157645d550fcf70c35eb283f5c7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0413799faabf289b31893e0c36366c1359bf52fb",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"12d6d9450ef401bd0db36230627fc9ea451c40a7"},c("ul",{key:"967174c91ab962b72cf0b40ad6bdd70d6532d94c"},c("li",{key:"2a979412ba29e9fc98a74b468c34e122065545da"},c("span",{key:"daed4dd70800048757c072d64e9bacf18c0b1f15"},c("ifx-icon",{key:"df6fe3a650b226b863d959b083b299c3e18487c5",class:"check__icon",icon:"check12"})),c("span",{key:"1a16d1cee14d77ff7e24941b1e17010ce7a96f7d"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"1d743a97ba19c3f996931270e28a536ab6a56de7"},c("span",{key:"fa0bf865602ea9e72bf631d10f05dca1cb8fec00"},c("ifx-icon",{key:"aca06f41a369b789963c2f167cdb4f7fee1cac14",class:"check__icon",icon:"check12"})),c("span",{key:"819caeb668b7e91041b2cd5cf871118f1f0fe57a"},"Adheres to web standards")),c("li",{key:"bd40477d3ec8f1ba76d9380a29171fc67e09395d"},c("span",{key:"f41a978b1b779c1a70bb0dab11095107597412d7"},c("ifx-icon",{key:"540d88cec4a72f80b28b2072016b1b32773fc785",class:"check__icon",icon:"check12"})),c("span",{key:"19effcae98d8a63c9a6058565d13b32e9f520cac"},"Horizontal and Vertical layout")))),c("td",{key:"183f0fed9c2f74174d8cfd6e17119481740f50eb"},c("ul",{key:"db0778834abfb7e41ec8419c7729f187791f7129"},c("li",{key:"a86198ec207b37ffafdb9e9f52740ede7d3f3ee1"},c("span",{key:"017346273ea65d8db597dc4c55a1f203bc67c03a"},c("ifx-icon",{key:"e82fb14bd941679cc430272a5f75a0818e599341",class:"check__icon",icon:"check12"})),c("span",{key:"a6c7d89a1f820cf469973a39e8672bd2c518d237"},"Possibility to embed multiple buttons")),c("li",{key:"e9d78affc3c8b0e24929664c54a3ef78d7ac32a2"},c("span",{key:"f329b82cb35b5ffc2120244b22dd87e22326e7e0"},c("ifx-icon",{key:"9085c32665d1688340e2542ce500578a0598f2cd",class:"check__icon",icon:"check12"})),c("span",{key:"7e84256f7f030f714c6487c89ed69052a40e654e"},"A switch between a Link and a Button")),c("li",{key:"ca9dd8421731fd946c8fd47c5061ff398a491445"},c("span",{key:"02b9280174aeb3af9af46d931f17e63ee6abd0bd"},c("ifx-icon",{key:"69dc9a9607682e2f1f45654960c09e133fae3f27",class:"check__icon",icon:"check12"})),c("span",{key:"454856211ba98f7eea0c28c33c04492f4992903b"},"Enhanced stylying behavior")),c("li",{key:"8abdd135d38cf35fe5f149cba2fbbb10b33e1968"},c("span",{key:"d2e4f24333fc51ce2993bd9d0917ecec4342e03a"},c("ifx-icon",{key:"a909c32d3ae9380f43ccf8874da9f61f502f8e39",class:"check__icon",icon:"check12"})),c("span",{key:"c8fbb28e561cd84f7bd14a4b282f3153fc031131"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6dd4d853f84aeb91fb4364d2b363acc791df38f1"})),c("tr",{key:"138e74a6eeb6d33a5262b08067a4afe217e533f9"},c("td",{key:"adfe409eb37a3dc4cc811342fdf120cb1c1fa64e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d21bed1309f2d181f97b37a61f0e8f310a901548",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"aef77482627ee31a80bd2e73e77ccbc91b358a92"},c("ul",{key:"bfbfc17ae7e85df1333c65839c520a67c0954646"},c("li",{key:"9cc1380cdcec86be17c2aec1b0717afc561088c0"},c("span",{key:"9eb7a15a65ff3f859119252385befdadfb603965"},c("ifx-icon",{key:"292ac1842554c270f157e898a24c18b39c584fdc",class:"check__icon",icon:"check12"})),c("span",{key:"01f5aedb6eaacfa5f10b88e846cf26ac758f41a8"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"fafbf99eb2a019c4ef7834627de1d2a877a01788"},c("span",{key:"676fa161ea8a98b504dc38505c532e2d5ee9735f"},c("ifx-icon",{key:"e7a1c81971a1fdfeb285829739b83044331d0903",class:"check__icon",icon:"check12"})),c("span",{key:"54189607ec40f573f0a9e10462053880a68667f4"},"Adheres to web standards")))),c("td",{key:"3fe1709de5c3849e55563e5a398c56e2c125f4e0"},c("ul",{key:"3e45ca5d8766b578d918b98f8c50cd670164caa0"},c("li",{key:"801489ff6b9df25b827866fc186b06211364c12e"},c("span",{key:"f2c79371edf36763dd0b871a4a9283903cfad03a"},c("ifx-icon",{key:"a69e952efed0e752065dfb8e45d92d4143679f01",class:"check__icon",icon:"check12"})),c("span",{key:"a425280e361dff6592cddfde7410e5ec8b587dad"},"Indeterminate state variant")),c("li",{key:"1457ac4f0ae1328f97d8f2b1b289d3168a9994eb"},c("span",{key:"6d153f3c7476ff6e27931b5d2044183a9d7f486c"},c("ifx-icon",{key:"9e76400f295bfa21bfe6f5b7adc8bcfc454b16b1",class:"check__icon",icon:"check12"})),c("span",{key:"6340926b15d9c99e6a52a4034ceeff5ae9535045"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f3f636bf745d53a2ac9e5eea801405af957aec37"})),c("tr",{key:"c98cdc5fa759521ddcbdd4db0b1b3ba8cb4120f2"},c("td",{key:"540ec851da7938aafbaf5ad6197372bac8cd7724",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4a0ab4b4ff9ceb83c02d52e91a204e8ddefc160d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox-group--development",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"6a121fd6896c91dea191dcac2710fb96b27e89b4"},c("ul",{key:"75501f1d99779bd2f074edd6261be15a6429a3eb"},c("li",{key:"1fa9485cad05b38411c7cb4ab6551270e168963f"},c("span",{key:"507fbaedab3ea71427360237d11298d37f22eed3"},c("ifx-icon",{key:"70dab252704eb04ae3a4f2b7559309c48e4d8a64",class:"check__icon",icon:"check12"})),c("span",{key:"26f9b2d2f2b4d05f8e8fe52a38780b49e27038e3"},"Provides a simple and customizable interface for grouping multiple checkbox inputs")),c("li",{key:"113333db00441c7fd6dfb5ed3412acd219efa28d"},c("span",{key:"d155603ffb63c74551fc08a655348dc3fe3f95e3"},c("ifx-icon",{key:"a0ec01de8cfeaf606435d5ef2d13d0958137ce6e",class:"check__icon",icon:"check12"})),c("span",{key:"8680aa39b23675b577067d4258fcb0be98d21b8c"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"e26bb39b12085cc2805fdbefe3ef2811ffd06ffc"},c("span",{key:"ca7588593839f99af507b7e4a13d6904ac89e6a6"},c("ifx-icon",{key:"cf186c822ee0e03020ff59e1de74f7b026c95214",class:"check__icon",icon:"check12"})),c("span",{key:"9aeb0e660f3bc0075daf1009fce61c8edeec0e63"},"Allows to display individual or group error")),c("li",{key:"1da1ace0b4741af8b623aa28e61308fe9471d54e"},c("span",{key:"21d706266240831cb159eb8b4c6e005451b2c86a"},c("ifx-icon",{key:"8d974efe70afb6ff72b7227b5010e331f0e4a1c9",class:"check__icon",icon:"check12"})),c("span",{key:"488853ca14e14c60b8e6324fa84a4237a50c4055"},"React, Vue and Angular wrapper integration")),c("li",{key:"8459e91dde10f656dc1428459b74e4148f8414c0"},c("span",{key:"e629662dad9829ffd953754feae44dad64eaa0e8"},c("ifx-icon",{key:"f8b50bcd5787551163767a360278993501ed37b5",class:"check__icon",icon:"check12"})),c("span",{key:"3c95451cafc447d74aa54421a31cc44e6b79226b"},"Adheres to web standards")))),c("td",{key:"8965da31655e9ded78dc66259ca1db1b03eeb637"}),c("td",{key:"3050b840d467222c7c885b36dc408b5e5bccadc6"})),c("tr",{key:"2d3e2444303ac8752f06eddb9165f30630a8f527"},c("td",{key:"041e2d6a064435e847c679d9ac225aca4057cbbb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"85ddc437dc25289d6d1948b2af37f8bb0ff65943",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"8529cdbcd4980b6d025e844b286d80d8fd6e53e8"},c("ul",{key:"7c92a9506162c8165f3c1063553343996b65ba40"},c("li",{key:"dce82e60ef285c7c5e07168523a28ae8ec1e73ea"},c("span",{key:"bf751d72b1a6dfb379a3f23b54af888e75d2d10e"},c("ifx-icon",{key:"a9431c572e45c2e2a5de16f35255f9b844ac53af",class:"check__icon",icon:"check12"})),c("span",{key:"8e550649f4e8cf0c6057824ef17bada2e9c7e02b"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"51803af7eb68ebabae05a51e2fe49a8c7c5fe650"},c("span",{key:"ff4f9a8655b8bf770163b00bd31c1154baafa0be"},c("ifx-icon",{key:"cb5e547dd4a66a788b9fdc2578b5eb31289d1525",class:"check__icon",icon:"check12"})),c("span",{key:"ddad8d3bc40acd93a45d8323836ba1563f9f6597"},"Adheres to web standards")))),c("td",{key:"95150dbeec3e526f85f4bc7643735bbe2ebf6164"},c("ul",{key:"c03c9608b4d78dc906532815b70de3e1da8eff3b"},c("li",{key:"d200c7bdd5a1237d51e7aa71c946e296bc6f4d4c"},c("span",{key:"4b07f51460fa3a460a5534a7fb3c227ea8e549c0"},c("ifx-icon",{key:"cc4895c5eb0366a4506f84ce6140a453c15b4c67",class:"check__icon",icon:"check12"})),c("span",{key:"9457e02e33cffacaccf434b3f9cef6d110440de8"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"8635182797cc32a7a1138d16f2c7196883e743d5"},c("span",{key:"2115be0f478f7bd5c7c8d4a33778089127773d83"},c("ifx-icon",{key:"121867240f3bad86fb1f155f7f8dd2d53a3fa654",class:"check__icon",icon:"check12"})),c("span",{key:"e30ea47ddace6157773c9badd2f33a7cbba4a96a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"bf767641798051020920f478bc4b93353c69f42c"})),c("tr",{key:"ec552458e32f427dd07f4f5b89dba35c8c4b5a14"},c("td",{key:"f6e21072bf95c4c4015f76cb2631ca051a573123",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f3436eb99b975434e5acc2b7fd71563dc28546f",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:"1363770a1849ee4db5fd90be9da9af2f3dda37de"},c("ul",{key:"0094d17e2175e5eab334153fec32f4330ae7b209"},c("li",{key:"49a13a3fe0b830557a07edbe533abf5f82b74282"},c("span",{key:"3d2962c6616b954cca411abb010e5f38ca5caf58"},c("ifx-icon",{key:"0d66fe1c5298b63f06780c1e4bbee3720c18b966",class:"check__icon",icon:"check12"})),c("span",{key:"8d12ee9c31eebf380db2a90f6d7f201cb214577d"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"706b7821aa0e728769d40269f3e175cc0555bb96"},c("span",{key:"cf2ca4367dc4be19d100add483ecc5e905c1805d"},c("ifx-icon",{key:"8177c701213b38c853f500bb7ebe0cb0ea90df7c",class:"check__icon",icon:"check12"})),c("span",{key:"1f8c569a593ac17889f7fac47fcfe9e3c2c5498a"},"Cross browser compatibility")),c("li",{key:"783a793cf719b28c76715321923835c44f5b3c1c"},c("span",{key:"19bb9bc07c7f6e1afab5557f9ba9d17fae5b833c"},c("ifx-icon",{key:"1ca91987966a01a48fd33111a03d8a5bb1358d17",class:"check__icon",icon:"check12"})),c("span",{key:"f244e62054c0d72c3833018f74efbd7022c82b09"},"Form integration")),c("li",{key:"0f8ac57660b25b905ccf07510d4b98348c4ed0d5"},c("span",{key:"5c746dc670e80c3fbd936bf592f15d5a08cd4092"},c("ifx-icon",{key:"26af6a30e56b6e646cbdfc8cdeaec77556c77acd",class:"check__icon",icon:"check12"})),c("span",{key:"148963a7a7e88cbd6a0832dfb1b8eeebb0f5bf3f"},"Adheres to web standards")))),c("td",{key:"e8424f35b732804554d4547282c7f27dec9d4b26"},c("ul",{key:"28183c33e6635eaf19c08aae59126ad0ecca6423"},c("li",{key:"0fc831f33c84c3952f9ec23ae86f005968f80b81"},c("span",{key:"01fd1fab47e0612fad822a699550c12245ed419d"},c("ifx-icon",{key:"4465d61c32ef77a9a7457dbf47635f1b8ca51132",class:"check__icon",icon:"check12"})),c("span",{key:"ffa6a141299399d8c2054bf5536f061c36d45a81"},"Range")),c("li",{key:"4ed1de59bb9ec7aeaccb4c5266d828c9ae7a923d"},c("span",{key:"742938e3c4acd9cddb6790fc5f31fc8db9627a8a"},c("ifx-icon",{key:"76d45170c183a3a9b10fd4aa311fd87550411c76",class:"check__icon",icon:"check12"})),c("span",{key:"79eb6b76342b82026a674afd046e635dd05e5358"},"Default value")))),c("td",{key:"b89302957610ab5ae2a54c006f4693c58ec8c6fa"})),c("tr",{key:"46943a39f9a758890c3914bcf6106ce6fbaa85de"},c("td",{key:"fc59165e3bfcf1a28373ca84b110adca48cc0730",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"feab1b31cacbe8528480a4d56ffc4754775fa600",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"42775ee72590a12dd41e0f8aee602078450bf7cd"},c("ul",{key:"8e10f2950e727c889c52c9a0e7da9c65e784da43"},c("li",{key:"76efd60fd478dcc72a75d9463e7a62ae964fe586"},c("span",{key:"56706a902f4ea2b0cc3bc37bdb5274679e592e3c"},c("ifx-icon",{key:"662fa129f0c384f1d5d3ca629b4f63700505a943",class:"check__icon",icon:"check12"})),c("span",{key:"2f4e27012bd89d1b4719b5c56aabd797fcb873f7"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"08e759cd7340fe378b9c80d563565e8d7cd754e8"},c("span",{key:"83a76b2c9db89ab7ea3bf7be7ce3f3cd5553c29c"},c("ifx-icon",{key:"b2cb9125e77bb0703d0c61be0a61d96e25ea01ce",class:"check__icon",icon:"check12"})),c("span",{key:"1f3ab24e537b77c1a7b1ebb5403a3300134efe34"},"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:"5f7b862e63380581d6695247c477e9f5e63548fb"},c("ul",{key:"68afd43d6e86314933bd49a5e27b3bf054ff3fb4"},c("li",{key:"d9919c4fdeca10764ce08526a67e2b46772a554e"},c("span",{key:"ad49e6a430eb3734afa6086b50a24bfa0263dab0"},c("ifx-icon",{key:"798585d38cc5df2bf91e7cb99e50990ac8671fc3",class:"check__icon",icon:"check12"})),c("span",{key:"485b6aaca87d90fc3347e1ece5cc175be41ea552"},"Search filter")),c("li",{key:"00bec32d8832b97d6c41204e2e1913ed6a07bee5"},c("span",{key:"16194de1f023fdd8af024128025cea7cb22da40a"},c("ifx-icon",{key:"ad7677af691b077cbd0b64bc9fff53dbee2255f5",class:"check__icon",icon:"check12"})),c("span",{key:"19912c074c698e91cc1b6d84830f416c9df181d4"},"Header section")),c("li",{key:"5f2c699742663a6cff5f04678973241850a4d9a2"},c("span",{key:"75d7bf66933f6926b19dffe2d11875d9414d7d47"},c("ifx-icon",{key:"dc932d10ebbe2448b3e31224253939cef159b3f1",class:"check__icon",icon:"check12"})),c("span",{key:"a6c627b62992a296c5c40e9ce43dfe654b681d7f"},"Menu Item Divider")),c("li",{key:"8c35190b8137e54c5b2aa025231cb6eeb11135d0"},c("span",{key:"b4eec2229a1230a9648b19e41c508bbe25895976"},c("ifx-icon",{key:"b20975b3c490361b0dbf93956cd718cd6305e0f2",class:"check__icon",icon:"check12"})),c("span",{key:"e01ba746e3b05f587fdb6ef2ec7faad61cb0a32a"},"Icon incorporated")),c("li",{key:"d74536caccaff27acb54fcb6a25d65683ab3c28d"},c("span",{key:"89e06510589bb1d144659c51de28e10a4768ef9f"},c("ifx-icon",{key:"1fb3963c586ba53478eecd42692db7aa8a3e08dc",class:"check__icon",icon:"check12"})),c("span",{key:"e316d387af320375aee652338c4291a5004b43df"},"Extended customization and configurations")),c("li",{key:"9165d37bf37bba9ccb48bc867f201e5ef08e5bab"},c("span",{key:"c22cac0a4a06c62ecacce19346c7b06ddd30f39a"},c("ifx-icon",{key:"46878b2d600b9ff477ec3a3ffa8f1e5e55c94089",class:"check__icon",icon:"check12"})),c("span",{key:"5d4a3ffc57613f4543aef233c6690c5a07f96819"},"Separate label trigger")),c("li",{key:"783f01b9452b522247f5a82513c6c0a0ff9a9416"},c("span",{key:"6d4e91767e8a0536ea37b275df958ca76b560ccf"},c("ifx-icon",{key:"bd4c721237850835c249d8bf8a9127343b11bf35",class:"check__icon",icon:"check12"})),c("span",{key:"3998ac77685d282775e3fa8bc633575a966790c9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2fbf2cd7d6965e1543d200fa9550f078f4c0f187"})),c("tr",{key:"0564a90a425d9dcd72aeeabb2bb31cae3aca1eef"},c("td",{key:"9208350d58153199cd92626fd95eef9ce03c2c99",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"55d56ad5088364ad21ec43b1d72d5fa95f1a556b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"569ec53a0d64cac2db69d28fd62a4e20dc869e0d"},c("ul",{key:"2da03bf89a27ee249e2c11b7e45b2f664495c7c1"},c("li",{key:"bebcd6013aa7373c103f833b0082d26be1bc56de"},c("span",{key:"20cc5fcc50f1a79ea968fba0e7bd07345f953850"},c("ifx-icon",{key:"d2ac0b3f572309c040f30e020b5e62dba33a1d5c",class:"check__icon",icon:"check12"})),c("span",{key:"f9c59d690f793bcc69dd3706bf91b48273ab3526"},"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:"2b06b61ee99d90af8d00a03a48aad1b206222845"},c("span",{key:"a783a3f4866b3630ab4fef1561fd4833fc082955"},c("ifx-icon",{key:"950d1ca04d1b19927a850c267a95b120053d0532",class:"check__icon",icon:"check12"})),c("span",{key:"3ccebef76c2b512bb19077acb878cd77b513e30a"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"1c17260cfe6fa9f8ef6c8d1e22af9af1355f36ea"},c("span",{key:"654fbe741374c5d40ce35466236d7fa79af1e118"},c("ifx-icon",{key:"b61f556d8bd3634830387f082bf9de74053df096",class:"check__icon",icon:"check12"})),c("span",{key:"62741ef0e455c6475781d5909b964201cc19b994"},"Adheres to web standards")))),c("td",{key:"3d79b2719fd29b32dde9dc6f4726212ad38a11d6"},c("ul",{key:"c46c7d6f3d53d32470bbdf8c7b96c7445e1169a2"},c("li",{key:"b18b01ae5eda6e7df4520d695fbc3c0c9223f247"},c("span",{key:"1044e746be7df573387d881f319fc4837593f726"},c("ifx-icon",{key:"a666623260eb9222664eb5bf660e09bcfd817006",class:"check__icon",icon:"check12"})),c("span",{key:"ed3cbaaa45f5dfd264012b0cf13c97c77e9b7dca"},"Small, Medium and Large variants")),c("li",{key:"fd6474f9365308d7c4c7f81be490f1714f60e097"},c("span",{key:"e8cc58a51a5399d9f8ef6c83c2a76149ebb2d0e4"},c("ifx-icon",{key:"2b97032a90d1c163986a2bb66b2e961d83b47e6f",class:"check__icon",icon:"check12"})),c("span",{key:"276f6f5a25387528f4db179a95b62fccc26aa904"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1522d136a7bdf22aa1b2606cd89561179a580743"},c("ul",{key:"0c02b9047033258ba31d867413ad0d4a4ea787d8"},c("li",{key:"0e58d5e2997ca0d5c946c96814ee60f655144ea7"},c("span",{key:"d1d33b810bcf448e23be6c199d8b85cd1b8c87e8"},c("ifx-icon",{key:"55cdfdb0a1a3b0d4845c26ae658340ddc289b647",class:"check__icon",icon:"check12"})),c("span",{key:"00e203c135206ed621627d92bbe1eee5f0a8ec2f"},"Customizable and removable links"))))),c("tr",{key:"ac27cbb01cef44e579df120fbe7a80edab69cf48"},c("td",{key:"3b3e51a58a789c217cb447d48d00bf89564112db",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"671d773ead7679607106210cd075f98b7e8f13e9",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:"c4b5ca64a263bedbe198f1c1076929b745d0fc75"},c("ul",{key:"ea55cde63f5f83e5d922ae5a892eb27cc9a8fbf2"},c("li",{key:"3692ef5d0c776aafb0a61fa651cf42829e93861d"},c("span",{key:"fd5c7eea91b485b74ff076b18170b5e10d3d52fe"},c("ifx-icon",{key:"628c7f8d4234f7f75fbe96d2f822b4396f235e68",class:"check__icon",icon:"check12"})),c("span",{key:"92bdbccb4776806cfee4408eb640bd1356680b08"},"Offers a compact and interactive icon-based button element")),c("li",{key:"395c9ff3feb20055312d9354db9bca9874c8e6f2"},c("span",{key:"5bc4b58522987cb2ef72bc4570e9a18e3e8dc360"},c("ifx-icon",{key:"5c110e0baf8767873a13498833a2fdf7f741141c",class:"check__icon",icon:"check12"})),c("span",{key:"34ee140ac4ef9513b645856f6a611c4f8ad9b2d9"},"Provides a limited scope of customization")),c("li",{key:"a6b341a001e85b14c7ffbf30a7f98fbcde92f6b1"},c("span",{key:"88594b7b77e454b3ea2b610c9c45db646cb47cb7"},c("ifx-icon",{key:"93797d2e53fccc1f1715a1f06973b98c96a48862",class:"check__icon",icon:"check12"})),c("span",{key:"7767f73aaed4297d5e1c5e3ceaf9140b4f89fd01"},"Adheres to web standards")))),c("td",{key:"ea4685ecc489797b8864631a96bf6c0f1661f131"},c("ul",{key:"5bd07f3592c32711210b953412f614200b9993a7"},c("li",{key:"d7f76cbe0621cc79f405eafa5a9c34dfab669d98"},c("span",{key:"6e19ba55857d2d16ce374e65d883a4b186b7fbdc"},c("ifx-icon",{key:"e7b7da0dce67f2fd31831a432d90ce17ece8a23c",class:"check__icon",icon:"check12"})),c("span",{key:"de0b3ebb32711bef08187c9e5abe7ecadcebd599"},"Additional Round and Square shape variants")),c("li",{key:"e231f6c904853aadec645c063e35cd83e2dfe901"},c("span",{key:"af2c2ed5662bc9c22c253ca394412ac3dbf9b814"},c("ifx-icon",{key:"e75cff61ba0c0c1acc0d26de158f783ab4e112a5",class:"check__icon",icon:"check12"})),c("span",{key:"14bd0f081d7993f01fbd43b53acd2ddf87038345"},"Small, Medium and Large size")),c("li",{key:"7f1736c0efb43860bb5ff20ea1a1fede85be7ad5"},c("span",{key:"c37d4b7a01f2ba1d104eea8a94bfc90f777de942"},c("ifx-icon",{key:"bd2a6a2fe40acbd35c922ced8c16c43ed5884b67",class:"check__icon",icon:"check12"})),c("span",{key:"e16120d820948fb039ac929b789ec4ed263e5edb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2e27282026f43153ec293779f4b0905db250ac52"})),c("tr",{key:"e42dfcf6e9249dda79b21e5bbd774e551c477caf"},c("td",{key:"fd1466837c510768610b36b776858597610bde6c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e8c92f1ed48d240046a9d673272bc74f4e3a19da",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"ecea975f2418363f4a6000ed4137cacb9b5ab60c"},c("ul",{key:"eabb428cf10af2dfcf2c45856ddaf9d34a252ac9"},c("li",{key:"556311e0f9d249b2f443ca29be2f397dab25a1f5"},c("span",{key:"1da7ede20ba606c2eec7306da9240a31763cd6f4"},c("ifx-icon",{key:"84cca141df189543980b7ebd55c0055580feb79f",class:"check__icon",icon:"check12"})),c("span",{key:"53a378d429e9e106e138e9c68bf76dabd4a4cc2a"},"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:"c50a1404d9e029ca46cb9cf093c4bc44be76adfb"},c("ul",{key:"d9fa51a61c3d39bf0621dd086a375fdbfc69ef09"},c("li",{key:"48fd010b067d0cd111744001a2b4db23f7186e9e"},c("span",{key:"c514197afba65d52f42cb379d533159d864fec12"},c("ifx-icon",{key:"e932d9d36c5da6354f6587ba9f64c7db196cac3b",class:"check__icon",icon:"check12"})),c("span",{key:"a94a3d07a078096a174135e239657c2ae3f49675"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b6a7d368a8c25aaf294c948766a177f67e90e10d"})),c("tr",{key:"3812d1b7bff93bb9ea83e442db440762aee6391f"},c("td",{key:"b9205da6185b19ee65fc01d7f6e14c2b14d216dd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"de14ca312937a41a99258c37e46c48cd2c2a999c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"7643a497b752de34a38a4ef654fe2993d3963384"},c("ul",{key:"db3033c01dce767be3387f03716cd390016b142a"},c("li",{key:"6ed9e4891c8962f70f32159036dbff7972bcd631"},c("span",{key:"a945c7b920ef6673f5159829f53c737470fc433a"},c("ifx-icon",{key:"4e594aa3a41e3659d51be23940e09249c89802c1",class:"check__icon",icon:"check12"})),c("span",{key:"bd22362f050256178ea8e207d8463234e00be29b"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"21de7fd02a852fea8aebc6fe69436191921ac3c1"},c("span",{key:"f24ce900d833b975a7e69c10a3a4f7923e3ddb2f"},c("ifx-icon",{key:"182e9ad669dd3d02c38c01924815ee1c85c2d0cd",class:"check__icon",icon:"check12"})),c("span",{key:"c5ee8a90eabf52333f402c5ce607254602cf444e"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"ce4434752a12b0d9aea230e1c35f222d7653968e"},c("span",{key:"44ad6230c0e750ee36fef77526287d2991e264ce"},c("ifx-icon",{key:"81a5781f65019b904214548de42889433169190a",class:"check__icon",icon:"check12"})),c("span",{key:"adec486a126303562c6dfea23cf5054db7dec8c8"},"Adheres to web standards")))),c("td",{key:"79d5e08cab95af1096b5132439a0e251c356fc38"},c("ul",{key:"6f245ae9662066ca27da0cde642311c01657190f"},c("li",{key:"ab9a7034e2ad2cf3567c0c604ebf48f1f10a9988"},c("span",{key:"6f02ab5567b115a9e94928cb6017f44fa6afc6b1"},c("ifx-icon",{key:"c8a7226a806dba1deac2965f2a146f39eec3016c",class:"check__icon",icon:"check12"})),c("span",{key:"17e921f156dcdcb7daeab7db23f516872a6590d0"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"cb34123af9c4fa02243100ac31d0ceea1e9d7c1e"},c("span",{key:"388855b08574130d541f4bd81cef26fa83f98e4d"},c("ifx-icon",{key:"e57f88ce13d4962db9930b354cd01facd01ece50",class:"check__icon",icon:"check12"})),c("span",{key:"e2941b264c8e87e27fe9189a0c938096d7d24a19"},"Icon incorporated")),c("li",{key:"9011a128d183aa7f8f877952afc886473572a8b8"},c("span",{key:"e3fadf534ae1679d38653361a560b9570f273da0"},c("ifx-icon",{key:"81f41b49bcf0fb3e43e4139dae1bdee136158a6f",class:"check__icon",icon:"check12"})),c("span",{key:"dddf67fad8be3b0df9e8f00d44e7c4a8a401f4b8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"32968f6ba5a6de432955bdc32f8c86e75ce3eecd"},c("ul",{key:"697f5bd1bf5f15bc23897394df21b3bb6d62f023"},c("li",{key:"04c73b71c316f519e2213b6ff4d727456dce06a7"},c("span",{key:"493e67a9180cc288be0076477ca8537c1959831c"},c("ifx-icon",{key:"3133d398d5605bd036d8c8e775d0fb02cfcb4e03",class:"check__icon",icon:"check12"})),c("span",{key:"4645bdc837d46bbac38fffade6c0a8c3a9794966"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"37a621682735a86bba5ecd89e844b1cdc0940b17"},c("td",{key:"bff656f860b9efd52ea3c27044f15ff2fa56a11a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a172d561afa75a5804ad216f9b8a4508a15e9388",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"f84581021511d12dd255451138d7b38b68f1a009"},c("ul",{key:"31742cb12bf4dd231300f4a3d14d140036a447fb"},c("li",{key:"3eca54bdeeef283595f47232d8a9dda9c4ae4c02"},c("span",{key:"9e513cf509785ecdb283ba8514c91811606fb1b1"},c("ifx-icon",{key:"64b1bd855d617e5cff15645b31b6e65505d44085",class:"check__icon",icon:"check12"})),c("span",{key:"a3c1effa5f68023cbf2796397d1cbac03c854b0a"},"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:"e170ce67156eeca90bc41668abfe0da20b0f57bf"},c("span",{key:"e8eb0ec1d41e7cd3aab0da77a67b18f889017549"},c("ifx-icon",{key:"45c66cdf64e5399d84e2a97413080d4722a4ef24",class:"check__icon",icon:"check12"})),c("span",{key:"16a84c2c542789f1b58dd415d714279701f1b397"},"Adheres to webstandards")))),c("td",{key:"ce294a8639f51eca54e3274138dbe2e0c61e9039"},c("ul",{key:"0ee668c040f327102dd27abbc4d414a07a0f21dc"},c("li",{key:"adad11f8655f012783613407675dc7c6066c253c"},c("span",{key:"9a5f24b5af47d6e8cad0c2b29f624c2f34eacfc6"},c("ifx-icon",{key:"f19de37640b9dd792299490b60c70fa5296965d0",class:"check__icon",icon:"check12"})),c("span",{key:"d1939187b03af2710b0dbb2cd73d51c88394eebb"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"044c5ff92609e45216c3396e2aff5dfc998e45e3"},c("span",{key:"0d6f4151c60f761cae3ff7ffaf86d8d968bbcecb"},c("ifx-icon",{key:"a13fa2f0936942da38cf74dee16a1589e7eb0e48",class:"check__icon",icon:"check12"})),c("span",{key:"050bbab914d1b7d79a439be9571f202d03a73843"},"Extended customization")),c("li",{key:"8ba2019995985cc5da938759ff0f9a57c29f4bea"},c("span",{key:"a1952752acc4a6581e31a7befee7601b0cc5c733"},c("ifx-icon",{key:"789e8395ffd17614a491e90d81ec45ae21cc1ca5",class:"check__icon",icon:"check12"})),c("span",{key:"18190a64f19650dec5a1f67c6f88efa875c42f14"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7f73ebb5ec677713211986f4d1bf1ac29c012d56"},c("ul",{key:"af0d8925fa16a29174e775203fe15c89b8ff7301"},c("li",{key:"0231cf9fc4aed8df2373f0d8e11b925159506b97"},c("span",{key:"d7f613121d22d4ba5b3b5c37668a173bd7ced67f"},c("ifx-icon",{key:"e8cf79b2f314b35f1b987ecac927871614f5363c",class:"check__icon",icon:"check12"})),c("span",{key:"10451f6a7f5fcc643403414586b247dd818c1e8c"},"Removable close button"))))),c("tr",{key:"caef92451bbcde5c3a984167d03de60ae7228e87"},c("td",{key:"cc590120cf13922cebcab1573730d525c4e0a8b1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"80fe84a9cca00af92d6285e4232e825960c11522",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:"1649dfe8300c90566502358e191a9a461d60511f"},c("ul",{key:"b410aef59cc06ee5abea97b6049ee8206f0d10e8"},c("li",{key:"eadcbc6e681c0e0656dc29f113e2353c40c5b86b"},c("span",{key:"cec5196445c49535d43f79bc7be3808c224c58bd"},c("ifx-icon",{key:"54d7f14a015f786bfba9767839a9e482a86ab24c",class:"check__icon",icon:"check12"})),c("span",{key:"057e3f8ec93b23d606db449981a71f41a2c242cb"},"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:"eccff1cd82222e5624c297ac8bfa23ea76f8932c"},c("span",{key:"1f1ba345d7632f5de467d89977fbb7975f6c77d5"},c("ifx-icon",{key:"5a00ca55c7fb6916d6d8cde3b7d76e08c583d5f7",class:"check__icon",icon:"check12"})),c("span",{key:"f4346de83747445fd864a418b12d6768dafe45c5"},"Adheres to web stadards")))),c("td",{key:"dc0eb3547ed5142c2cb0aea0d742a10cc647769b"},c("ul",{key:"9f1839f99e3d35ab91e47388c92e9e8c9e83352c"},c("li",{key:"09e166f499ce75a5fdd907f72442d5d669488c48"},c("span",{key:"0f2c09e701abb9af2cc476e22efbd9a361719f62"},c("ifx-icon",{key:"7f9c5b22c1cd72e9a6e863dc333905f434e603cd",class:"check__icon",icon:"check12"})),c("span",{key:"cb950c48d1a37b147e015048cf57c6dad607353a"},"Navbar-profile component")),c("li",{key:"9ee96e24f4c2eda895ad4a2b0272bdb87d1e47a3"},c("span",{key:"178df7d8fc234dc637a52ae0e427a8682678386e"},c("ifx-icon",{key:"7786f08a8b91faa87049fc9ebaaf9a80464f5682",class:"check__icon",icon:"check12"})),c("span",{key:"759efbd46525c2a69ca2ac30ae242753fefe6cc4"},"Mobile Responsiveness")),c("li",{key:"7f5d672c777ed856fc6a2fce7637bc7a5a49582e"},c("span",{key:"6c0113cbf762aba7fc52f60b36358c2655f0ed87"},c("ifx-icon",{key:"3921682331407d56a0e58a5473b35a6df409ef40",class:"check__icon",icon:"check12"})),c("span",{key:"82c50aa36255e293fd79df9f6b3b6d6314b32aa4"},"Mobile Sidebar")),c("li",{key:"4cd75ca1be966a0cbf72718a434397f2c3af6490"},c("span",{key:"b2360fd56d64cea0c60eb5896d0905f9f2742b03"},c("ifx-icon",{key:"29ef3b403eab5c82eab0b390421369f572cde767",class:"check__icon",icon:"check12"})),c("span",{key:"3c7d221c0032843347d2bd35726680911a5117a9"},"Extended customization")),c("li",{key:"748255cf5f562bc3599672e7eb8c82d7b68eee99"},c("span",{key:"1958f3be84039de9775e0c7f665f2865d0a2cb99"},c("ifx-icon",{key:"88a35604cba178212200e8edefb4672548ab4620",class:"check__icon",icon:"check12"})),c("span",{key:"4dc0f8c81a21d440374cc7687563c42c7ee2a0b2"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d3ce4e04b75e0b5a63ce80b7c723c9f83c1187e3"})),c("tr",{key:"11286540accbfb1a90ae9738961033719745f1e6"},c("td",{key:"dd6ccbfcf5056a5ed1bc89fabc8084eace7d2be1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3300576cb9e22688117e9686cea3367b89cbb1dd",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:"7d8965b9853d91f90658b813aaa0abf92d0c4421"},c("ul",{key:"2f2cf4f670022c0cb7d1456f34051783421b17e7"},c("li",{key:"3421d30b5a413dbfc39aee19c24ccd67ac5c9424"},c("span",{key:"ab0196bd84d02a2fc0c70bfa298a060f0bfeb04c"},c("ifx-icon",{key:"82be14f4a5b12914349670e9b53fc5aa09c09c2c",class:"check__icon",icon:"check12"})),c("span",{key:"d4ab7e48f72f743d6f2e9754b6919303a41ffcdb"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"1cb7ed33e58fdf97db4533f11090183080a6f952"},c("span",{key:"984336ed0278a70b9b63f7f6e94dee2fa213609e"},c("ifx-icon",{key:"58cbe5ba0c953188a6a4e9bf845496c87d9f4e1f",class:"check__icon",icon:"check12"})),c("span",{key:"f06eb1cfef53eabf24f78552acba43e2e9ef9a04"},"Adheres to web standards")))),c("td",{key:"9be7a159e053f38d1e1f584ac591a7502af99a6e"},c("ul",{key:"97c4f5d9e50ce04e5bb5fdceac040631fc3dc044"},c("li",{key:"2ffffa1e6e9fcb9774a340c7c4fdecade31c6ace"},c("span",{key:"23558bb53ef4f0a54e7403383a42f002d4c2feab"},c("ifx-icon",{key:"81cce31d9b73c94b3176c56d88cfd4df64c1aa0e",class:"check__icon",icon:"check12"})),c("span",{key:"7715da94ab5673645ed107699b2debc1fb9014e8"},"Inverted option")),c("li",{key:"19e2743ea6337015571cb088a7702081a0dd2cb9"},c("span",{key:"0c751ebe4dbc8d0fd7c8838e5961c75693639523"},c("ifx-icon",{key:"dfc8fc7224b00649caa63442a1b858b0087787a2",class:"check__icon",icon:"check12"})),c("span",{key:"8a55d7e08a62a855d05f39f685daf9b6198a7d8c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d54cfaf4398b6f643a1f04bdeeb31412eebc53af"})),c("tr",{key:"e3721b7b518ea2020514c7b87703fc0de675b42d"},c("td",{key:"12bd928b0c9af8b102d3a49c0b5d5c53ab75a0c5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f568f953a6039a7d74fe1819ce4cd2ba6019f4aa",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"e1c06a59e3ec020c917dc69529809b2aa13b9f29"},c("ul",{key:"3b4de2d82e7920d10992a4d4dca62633ff246b49"},c("li",{key:"136576450fc19ccb597059cada01189fc1801943"},c("span",{key:"902e63733485549b58bedb4655739285c8797f9b"},c("ifx-icon",{key:"dcbc36c6561d905fa914b98d692eee4140204f1d",class:"check__icon",icon:"check12"})),c("span",{key:"6d3ecb88b48ea52ef2538c2a460eba29f10c7f4a"},"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:"8bc3a2eb20fd0f4b6d84c51bff0a14a88370bb84"},c("span",{key:"a715628eb1f7f9522c094ecb8ccbc497670f61ae"},c("ifx-icon",{key:"819858f883ce1b35cd0dd576496a7c0a96332503",class:"check__icon",icon:"check12"})),c("span",{key:"c435e05e72cedb67be044c5d44548b0893113620"},"Adheres to web standards")))),c("td",{key:"579b1a17d90abb86b91d6992a44e37bb8211c91f"},c("ul",{key:"5c7ec3e65d9b634ef661fe677be4c3b6bcb18901"},c("li",{key:"445e1891217a26b2be67733d3435ea5c75455220"},c("span",{key:"0928537ae969bdf3d37196533e3adaec022b2984"},c("ifx-icon",{key:"0d712cd5e146cd8c2d3ada8df5dfad1ff8767d0c",class:"check__icon",icon:"check12"})),c("span",{key:"d84cf4e5fdbe464bfbea1ca9d404f4ea69de4c48"},"Extended customization")),c("li",{key:"a7275f5ec913c4fc2204b030e317cf8dbec49fa6"},c("span",{key:"3c1462d2f0201d73ce2e21af8fe28c615880cc1f"},c("ifx-icon",{key:"43c926ca45d716140403f0164b7fd672175317a2",class:"check__icon",icon:"check12"})),c("span",{key:"b2466015e33e2480bd17042d434c5bd872ea1133"},"Configurable Results Per Page option")),c("li",{key:"c4ecc047147b671b4d01cf9aaca0ba4ae278399e"},c("span",{key:"1f64a55e5d15434ba25bbf33c56c7bcde3b7d65b"},c("ifx-icon",{key:"110ff539ff5c5d4d54b7dfdaca404556611d3e99",class:"check__icon",icon:"check12"})),c("span",{key:"19234752ce6f238333ff0d99ef2094fdc6408db9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2c646ea174e4d3bc6cd8c05219c483c65aa638e6"})),c("tr",{key:"6c679adbd22ae31aee2789d329e422ced14c1291"},c("td",{key:"df30ad942af0eea2929ca9ac530df2ccb2f0a6ef",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9c6af7afdf50d0a17d74a8b046afc5920255ea36",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:"de0b09e6a62542b1df95fe86231c1ef40859af87"},c("ul",{key:"92919ee0679c8ff4ed9a398ffed50e69ac55d785"},c("li",{key:"eb8809deed39f0b575eb72a6a7b73a7a7d3f2f94"},c("span",{key:"3c4f0838b5b2a6bcb2bc30f1a49b9da01536d775"},c("ifx-icon",{key:"d09221f2feffcdee7548f36efdf36a0acb6a5377",class:"check__icon",icon:"check12"})),c("span",{key:"55abd6126c1507168ee885138028f4248405d226"},"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:"6b7c984dd1ba77b604f12d9d99a2d5c6c418354c"},c("span",{key:"106e3bde832947b9cb772a5837585797c79db1a3"},c("ifx-icon",{key:"d35135a1bea870b5e80d69e8a963ab2231bf2668",class:"check__icon",icon:"check12"})),c("span",{key:"aa7e201475501f78e99b195b6d61c30754bc9d68"},"Adheres to web standards")))),c("td",{key:"c61a9e61bc018fa4421513f8d4dde35cbbee83cd"},c("ul",{key:"83bb339172f549eb9f2abd0c711a117ae5800ac7"},c("li",{key:"c5130b834b3b6a39e3e23c41f3cb013dc87e2abc"},c("span",{key:"b032a8a5c80accc9934dc08c3f87afa29a049e8a"},c("ifx-icon",{key:"b4d28303369f4c44c8baeab8dbde30272135206d",class:"check__icon",icon:"check12"})),c("span",{key:"c4b4663ce200b00045f4b4b4ee87916f15c5516a"},"Extended customization")),c("li",{key:"f487f43d7fdc945a56bb1a2c0db0dd6b4a4be371"},c("span",{key:"aba57cc8550c18913a39f970182dec944bbf57fe"},c("ifx-icon",{key:"3c626e572524809b816d13e6bd1350f5542e47a8",class:"check__icon",icon:"check12"})),c("span",{key:"c8d36cde3a226e359886999d2adebb9b41f3d204"},"Show percentage option")),c("li",{key:"789b4083c28488c3ef748eefaaacdfbc09b70aba"},c("span",{key:"0ce02933841124b54e920e64cb6c9f57e0a77ec8"},c("ifx-icon",{key:"531bf425a4b3dcc6e715019dd255cb807a3c4df0",class:"check__icon",icon:"check12"})),c("span",{key:"49b08410a32dabcdcb1fad391e4466fe4a651f79"},"Small and With Label variants included")),c("li",{key:"e3e8ff3009f97b4cd1a9c0bffc5b3c912305ac95"},c("span",{key:"579e7367d520d72d858f6ead01110301f07d2033"},c("ifx-icon",{key:"115a368b3dfd4ebb345fc4fa23f3e09af88142c4",class:"check__icon",icon:"check12"})),c("span",{key:"a2bd1ec73366487ec8b0cbc7fa52b810a4caed32"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ea677ce8a01617c5d48e6d56742b016bd03149e6"})),c("tr",{key:"e5d72b76ad06c0fcda09341df189ef72e3bf4d07"},c("td",{key:"2ff940a98de2841061555fd8a770395ccfe4585a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"fef3dc501d5c123d1a28080a837fd263993b7e5b",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:"cf4abefaecd5bbc42267104e772d921ab705d862"},c("ul",{key:"271dde31cd6476af682d701940ad433372402e05"},c("li",{key:"6b4ed5595a3c6168ff3538945c0adf6c227ee735"},c("span",{key:"2ca41b94b98ff141e42cf19fedbf19ad22c064dd"},c("ifx-icon",{key:"98b81fd5aa8f4afe7c1f352245fa63d01353cf63",class:"check__icon",icon:"check12"})),c("span",{key:"46c5ae30ecf55a62c37634a96b0dc00fa7546a93"},"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:"d207bfc28967af900f200fc6c81cc32c474b3417"},c("span",{key:"faf96d01718c8ea72fa8e6fa94d85bd3cb38849f"},c("ifx-icon",{key:"f38ab0289d1a6fb147885d3995a0c8bba6ca6656",class:"check__icon",icon:"check12"})),c("span",{key:"7a3197721ef789e18adb57d654d7cf7f38f23484"},"Adheres to web standards")))),c("td",{key:"0340faa8eb0346bed5f55a0256dcbf962dfb1fb3"},c("ul",{key:"021ffd1a28b5b33425c465fb0d9cd2580327775b"},c("li",{key:"182a8fd2cf3616f3452f219f9b21414cf4858f18"},c("span",{key:"baefef16c943694e5cceac6625ae73eb27b646b1"},c("ifx-icon",{key:"1bda0170cbdb37683b040e5e23f875c5afc58970",class:"check__icon",icon:"check12"})),c("span",{key:"7f632e86d40691c73605b29dd37ad878c185faf0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"cda22fe874a78158b3e54b06d6efd187f37792c4"})),c("tr",{key:"a01a234e124be92113004e6cb7520141b4bf8ba9"},c("td",{key:"8f5f45ad3afd25a61fd08be90d403cb1081c4e17",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"26151f84f0044868a033804c776d00521714ce7d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button-group--development",size:"s",variant:"bold"},"Radio Button Group")),c("td",{key:"c454f20dced429b12cd85d4cda6b97a9658743ae"},c("ul",{key:"61c4e3a0396ab0990fc7a1a591359e4c73343bb2"},c("li",{key:"f52c184d92dbaae3d5c3b1605a16ee0985381f7d"},c("span",{key:"16a29ab0a68cb358225742f2b745b7df9dc0e418"},c("ifx-icon",{key:"8947a73042b7c563a74ae4d317db1473093b9e97",class:"check__icon",icon:"check12"})),c("span",{key:"f483fc6c22fc54aef74250edc51558bee68b3f8f"},"Provides a customizable interface for grouping multiple radio-button inputs")),c("li",{key:"5e2c64642e25812f821f9b2264f96d336b6eacec"},c("span",{key:"bce7fdb6fa1f7417375871625d505869a69b4b17"},c("ifx-icon",{key:"ba83833cb74a4a2a997bfab45bf71d271a5878a2",class:"check__icon",icon:"check12"})),c("span",{key:"8b8549df026f56898ee08044e9649be70fd52c46"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"9a6505cd2b3b41244a0d5c4fa387accadaf7c0ee"},c("span",{key:"f4b57866e905b8e38536e5cfc7931914a980822d"},c("ifx-icon",{key:"fdd3c7b2a1f97baa6d107a37a5f79038285f3768",class:"check__icon",icon:"check12"})),c("span",{key:"2c6645df0c228f96a41d85d55bf0ccaf07da519b"},"Allows to display individual or group error")),c("li",{key:"e657d17908ea836a2a027c7c7e6ed18aeacb2abf"},c("span",{key:"ac836dfe9b817648d358d3f503b1c50654830652"},c("ifx-icon",{key:"5bb7eff9df702e562ab5b5aebabce15076f0bfc0",class:"check__icon",icon:"check12"})),c("span",{key:"827eca79987e6411b5c2c4b69adb138d7ba17c9f"},"React, Vue and Angular wrapper integration")),c("li",{key:"d3679291e65cb23c186c00311aac3be60b0fcfd5"},c("span",{key:"57fde7597e484560fc3c3adff592798b808a9005"},c("ifx-icon",{key:"893db321b6338269ebd9af6a294ca80937836951",class:"check__icon",icon:"check12"})),c("span",{key:"174f815c0cdada2893b8207ba420ab78514e9669"},"Adheres to web standards")))),c("td",{key:"43b8a7e141c5d35c34d4a303d8fbede95a67cde7"}),c("td",{key:"bdaff9bd2000779cb5f8a4d0ead2a2be200b8513"})),c("tr",{key:"b0ec94c60305a04960a65bf14ec0feaf5988d4e7"},c("td",{key:"9276a1c26f9ce2d0fe8dd2dc75e14976919cd701",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7c75d5727a4fb022851bda1bd51c7c0d79ec4b40",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:"2a76019edcca5b6b7e9dbe24b630dfa05d0b5b2f"},c("ul",{key:"007d68664f2c2ccbf5a4553b9241b71dd46ce585"},c("li",{key:"0e85a597c05ace0b239f5c8b2d8ccb3efdde8f97"},c("span",{key:"42fc8424265a39a370787d6050d7dd31d74a52a3"},c("ifx-icon",{key:"4003d6c4ab7b8605a3946a27bf68345fb7b99eb4",class:"check__icon",icon:"check12"})),c("span",{key:"9c4f388593416e8d4c77d0b43ce058a806981a09"},"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:"13450dfde68184e19ef5e44e7e384fd5dd97a098"},c("span",{key:"45d8d97d863dc3bbb2a8f4782b336b08bdd401c1"},c("ifx-icon",{key:"4fa6cc29c564153664b5b2bbedc401179b01c757",class:"check__icon",icon:"check12"})),c("span",{key:"2a3e0be9260abf3d70e7f5f5178a133c4108c56b"},"Adheres to web standards")))),c("td",{key:"adce065f0c6aa3d93e046405c6e6f6af05f858b9"},c("ul",{key:"85cf501ef7f58a4e370dfe14738121355069162b"},c("li",{key:"45bac4bcde887ed1952bb5e6795b2c697374942b"},c("span",{key:"1d33e9cb7886e155f382c3a0b6e9e5f3d58f9c6e"},c("ifx-icon",{key:"70e688434273a891587de59cdee3dda9157f23c9",class:"check__icon",icon:"check12"})),c("span",{key:"750abd9e132ad071a4d1e7c765cb201f581d6b47"},"Collapsable option")),c("li",{key:"171ae0542c161c392d4a984f90567c09d4ba7906"},c("span",{key:"1a4dd56c50fa83eed5a96a35efe3efb2b174c14a"},c("ifx-icon",{key:"78470c8acbcdbca2ca9e0f5cbf02899577a8f010",class:"check__icon",icon:"check12"})),c("span",{key:"e72fa56fc138cd2067c62f938cacc6e1d2b1ff67"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0400da8263a34b8cd775af097057a304f6aa3b65"})),c("tr",{key:"d0e2050a98e7adecf11b3ff06229177574b874cc"},c("td",{key:"793c9e6204ea278f9e5ea968fd9fa7e1324db1f6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5a1e1ef2220485a17e690b99045d80aa37827d90",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:"a93204ac8a9a604d81742f3e35e3ed996bc3a94e"},c("ul",{key:"2483ffda547f5701ad93ac00718f9c4285dc3551"},c("li",{key:"b11782d7f6981a85d294d8ed1895bcfccd19692d"},c("span",{key:"05409106662a5689a1be91ab8329108193fd06ff"},c("ifx-icon",{key:"0043364caba378cc1b7b314074e154109f0b4a73",class:"check__icon",icon:"check12"})),c("span",{key:"f95117601a39914b72818e40cd1cd3a7b4a1e8fc"},"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:"b56a211cf85679886589939553f1077de9ab5ea5"},c("span",{key:"63088fa36a7bd3eb3ad3d396eb5bd5f242d82d89"},c("ifx-icon",{key:"469b2a7ab63690abac14de10bff72744ec8ceee3",class:"check__icon",icon:"check12"})),c("span",{key:"bc3330584ef5c4f610e59b43520f240e592deaec"},"Adheres to web standards")))),c("td",{key:"ded9735c63cc0648011c48656bb816100f8d0f08"},c("ul",{key:"da510cd1c79ae914303e0759f3f87923084fa184"},c("li",{key:"322d0a2929733db54e4b58b534611bf044655ce3"},c("span",{key:"1179f9af8d53e7cf0f6b66e9346078014989dfc0"},c("ifx-icon",{key:"dfb83bd6973be7c0835e1f39d4ca7f901b454e8d",class:"check__icon",icon:"check12"})),c("span",{key:"56004abe135742eb4dc6d3503a707cd1713edbf5"},"Show Delete Icon option")),c("li",{key:"47f061a7a2c27e11eb3437896bc0e8f10226cf7c"},c("span",{key:"1830e1a9578d2b0f52c00bb64314668cecfbcbef"},c("ifx-icon",{key:"3d37a1afd0b41e9b1eb30081b306a2bb5ca570d4",class:"check__icon",icon:"check12"})),c("span",{key:"6ee3869f95e640bf54cf87af102b81bcc247fbd6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b7bf924920f770e79d1df8a97797a30f24a4f441"})),c("tr",{key:"b9acda45882857fec0b86849bba24645629572fb"},c("td",{key:"39e2a28414b21f44c8f7220697ab1475a16d8f66",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"25842b2e7a33b152f2017fd82b09a1f3256475f4",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:"9fda35f689c040bc92fc2f003ae4b56edaefc1f5"},c("ul",{key:"ec4f37c7197d8c633dd16fb1f9e00036e0778608"},c("li",{key:"42f66f766382fe149bdf7953f06d318f978d727f"},c("span",{key:"a38197bc03dedc83eaea97a9f4d3be7c52f5e148"},c("ifx-icon",{key:"4fc50260bd58c7c32a653a3134b55b7a9c204b4a",class:"check__icon",icon:"check12"})),c("span",{key:"3d26db88ef1aa8b85881b2298bb01e04fab3c4cf"},"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:"dcfe98a13adab610fe3dbd43488475ee5ee21e44"},c("ul",{key:"69490dada4bd44fdbc1e232faac5423fde07cc94"},c("li",{key:"8e40bbd46cc26f5470446de3ece7251cb493d237"},c("span",{key:"3848427708e2228d4721b513988f4816027cb6e1"},c("ifx-icon",{key:"678fd3eafcc5a2682cbcc7011ee11174151d4ed7",class:"check__icon",icon:"check12"})),c("span",{key:"dc40f405e4d9081268341175d754016b82540f25"},"Extended customization")),c("li",{key:"bf7295e4489ac7631c1a81dbf245c4c15a5502c9"},c("span",{key:"d95ac030e802022c435db33d25008bce763aa320"},c("ifx-icon",{key:"4bfabdfe04399ed0bb72d2a63d093942cc59948f",class:"check__icon",icon:"check12"})),c("span",{key:"27df9ee568d654b82b15c36bb6b10bcbaaa9e4eb"},"Option to enable and disable the search")),c("li",{key:"487b151554b406e1e6d2127541024108b88a52ac"},c("span",{key:"ae3bb68cbbc2b5640d0fd5a137bb997f23e6bc70"},c("ifx-icon",{key:"a4f2e398df7732bf0d4ffca511a67008f77dd90d",class:"check__icon",icon:"check12"})),c("span",{key:"e489d9c82fefeb7dec1fe88196183db2b6ff0b34"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fa0cd28cf5573a9c53614d7d2ed47f7a5e0bb5ca"})),c("tr",{key:"6e3c246a4cae673c1ef973c354a0c847fa4ec887"},c("td",{key:"38175b8ba27cb185f16523b6a7d0f40a6f734991",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2f4bbc5d2db13a19628c104e8672118545f971d9",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:"f1462e998e5098016693a0819f2226d4d7d930a2"},c("ul",{key:"9bd82adb470489ef60375e47e01195e1202ae5f0"},c("li",{key:"58db8eb9a03e9e2b17ed7b5a70b85ce83e8f4978"},c("span",{key:"8976a78801beca4668367aab6746b57ff5589b89"},c("ifx-icon",{key:"9d91828ad69fb502aa1e3230c11bcba1f39f2682",class:"check__icon",icon:"check12"})),c("span",{key:"deeff30de0975c443be519efb51533b544f02df6"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"30e6ab7a6919278a89e97858bad530d212059313"},c("span",{key:"95288bc528b6e72b028ad2dbc03740aee41eae50"},c("ifx-icon",{key:"40c1b9b387994d091ea0da12159f64d9df32ced4",class:"check__icon",icon:"check12"})),c("span",{key:"b216f30e2f59d34b479f75da8e4691559452711b"},"Adheres to web standards")))),c("td",{key:"8e38543e2e9f66b69cb3f933cf7499ea3a90042a"},c("ul",{key:"8549c4395d840433fea71e947ddab924443dd11f"},c("li",{key:"c4dc8384fb710465b5b82233beeb199c7af17e71"},c("span",{key:"698176c1c0dd342a5a0612d702843afa253b884f"},c("ifx-icon",{key:"a05364f9a6bb37dc436655322e5d70ac377032ce",class:"check__icon",icon:"check12"})),c("span",{key:"c2f454e4344ab57d903063713de02632e07d7f85"},"Extended customization")),c("li",{key:"247acbc873caf3d372064718a2826ec8d48fe65d"},c("span",{key:"98d86a5a18693b0926b08b86b0ad5eef82f7a2e5"},c("ifx-icon",{key:"1d6f5a947886b9a94d7134611638e77522ae1eaf",class:"check__icon",icon:"check12"})),c("span",{key:"12facf8901a8220289a37a67ce3d3d081d42aae5"},"Nestable options")),c("li",{key:"14568b31857b3984f46dca1a78f586cfb51dfd2e"},c("span",{key:"4ddd7425c1169d0320b3b36952cc49fd8bfc0ed8"},c("ifx-icon",{key:"403150fe343ccc62e19748da654c208361069ae1",class:"check__icon",icon:"check12"})),c("span",{key:"c5aced4672ec5f9927ccb3568633990e36faa9e3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8d5ba2c5cc309ca32a1c0f2012ac903adb5095e5"},c("ul",{key:"b6ad38892bc27a054f0251c55cf5fdd072a100db"},c("li",{key:"326ae8af9e840bc047bc3e9cfb1a0c122ce1d97a"},c("span",{key:"5c6b80af0607fc3811cb59bc47e6e17e656f8e31"},c("ifx-icon",{key:"f8bf94560c5c257e13e53396073d709beb95f361",class:"check__icon",icon:"check12"})),c("span",{key:"21b47167bf12697314ca2e8705b1ffc7607f5ca0"},"Option to enable and disable the search"))))),c("tr",{key:"cd69ccd30e7b5aa08bbccb71f5f919994950a5a3"},c("td",{key:"b7765aefb09285bf5594e148071f77a814168892",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8f602606916fad748a4d43c780410dc0dbb47d60",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:"b67269c9702686e07cd9dc8cf0b8bb79547696e0"},c("ul",{key:"2bf5138f5f26aef7960ab3eb0e7f708c4997af8f"},c("li",{key:"f9f4988c904bc3d93125a8a773cdbd49d6524c41"},c("span",{key:"b1582376347ac2680cdf760a261d3516055ca9e6"},c("ifx-icon",{key:"6911ef3b99803212c2895f7a24dcb957d424a47b",class:"check__icon",icon:"check12"})),c("span",{key:"2c4ada532690146f2362d2d210349b4890bafb47"},"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:"a308b95ee797357167a356b73fc94cfe0e57be88"},c("span",{key:"272daa13de960da6ce5daa07d0eb0df4f881bec5"},c("ifx-icon",{key:"a88dde75ba9552595faa92edc11776265910937b",class:"check__icon",icon:"check12"})),c("span",{key:"3566533c714afc9b5071e607200aa3aac9ac509d"},"Adheres to web standards")))),c("td",{key:"4efc3d3f8f369ef756bac015912d33a2ccc8a6f3"},c("ul",{key:"1bd1ab926f20b91e60d30998d9da1d228a3e13a2"},c("li",{key:"891338fe58bb3769a5d6582f4fe84ac03b08ab78"},c("span",{key:"2a76c76195517c9096304c7616ac01dbaa5cdd9b"},c("ifx-icon",{key:"9ce7950591498a834c0507e06ec9d6541c5b2d70",class:"check__icon",icon:"check12"})),c("span",{key:"ab3a523d8c926e9453174a20497dd23fcd6ec519"},"Extended customization")),c("li",{key:"a1b190d66534738ac8de3fca9945e9f5af02ba11"},c("span",{key:"38eaec2506abfb7993c4599eb0efc51135fde15f"},c("ifx-icon",{key:"31cd08d540941fd55a073b22e1f6297a884c00f4",class:"check__icon",icon:"check12"})),c("span",{key:"b343084b8eadbfb181ed09241408d1857b5a33ff"},"Multi-layer nestable items and menu")),c("li",{key:"335bdb5f4dbf5cdc811ec8e163884ea28f11e348"},c("span",{key:"6f570eb0f8f88c80c0ce75b0d741573c3096e86e"},c("ifx-icon",{key:"9b3b9b2c6d62e2804b3ca9fd4188a133c3caa118",class:"check__icon",icon:"check12"})),c("span",{key:"213df173fbaaa1ca152383662d49fc12cf670e0a"},"Initial collapse option")),c("li",{key:"78731cd76af39b8301c0c88de8492d5440db3f02"},c("span",{key:"85e8ddab42da31decc74b28e33a44893ac2ba75f"},c("ifx-icon",{key:"e42993e0125aaabafbcc086b8dcf684d3a81930b",class:"check__icon",icon:"check12"})),c("span",{key:"8d8d2604945782437322b4702384e70ce2cc3881"},"Active and action item feature")),c("li",{key:"bee700f2aefdaa8e489f43546c21efd6e943ccd0"},c("span",{key:"b853562a5d07d3c8d927c2092f77802137bb5fb0"},c("ifx-icon",{key:"e874741cf4ad40dde3500d5f31ee683ce98c4f3f",class:"check__icon",icon:"check12"})),c("span",{key:"bb913624616adc837c4ffcea75fd4dda8770bdb7"},"Number indicator integration")),c("li",{key:"dbef43f78e0ea9c780fec9851a60a009b4391542"},c("span",{key:"6c5b51d2c808b0312a335efc97997e22d6e78627"},c("ifx-icon",{key:"2f1f6ef44273fa706ac980ae797770b3d0fc7b8e",class:"check__icon",icon:"check12"})),c("span",{key:"71f0cea9375289687ba0c548b7c4be634b960c2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7cc1a6af0b4c05418d2fad3e2ceb616b4f33db83"},c("ul",{key:"9add2f7a2eee5e1fe2a53c8a8a67e05ff135ba03"},c("li",{key:"2ccc432836e3c31b6126df9ec0a23fe6c77747fb"},c("span",{key:"c3f68ad950f4a58c6e36a6cc7c1156484ffce1ae"},c("ifx-icon",{key:"5fb826253f9c47212aa2b1b71afd72759df2f138",class:"check__icon",icon:"check12"})),c("span",{key:"5e5093455f660b0848e961f469003d306a9d2df8"},"Removable Footer, Header and Logo")),c("li",{key:"adc0508639ce07dce2577ca85cd3a32fce7904ef"},c("span",{key:"ac562dfedc597084bffbd2e1161c5aae82da8afa"},c("ifx-icon",{key:"969c336b8d932a9d1f622e2ed5e98811552823e1",class:"check__icon",icon:"check12"})),c("span",{key:"639bd91bb35fef169d6081be683fdcc2356459f1"},"Removable and customizable Links"))))),c("tr",{key:"748cca714d08207736cf8274e69c1e6a45325467"},c("td",{key:"4a00eed66727ee02679e47adf8175d8f93dde15c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b82f4debf6354b47c943643c555ae8d0fadd5450",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"130152082878efdbeeaf4a98ae6fb5104f09790f"},c("ul",{key:"6f0c7ea67106293e961ee1e83d02cc02ae201cc2"},c("li",{key:"3c41d05d7cc63e4bee251fe9c0d483d671c1a22c"},c("span",{key:"e46da8f1a898000a1b894b5d0fb58317bf84a679"},c("ifx-icon",{key:"285143a6c81ac68b326b5bd8e52dadbc3c4e18cb",class:"check__icon",icon:"check12"})),c("span",{key:"323c3cad60af6fd37f72922dbe76f5637eda7ea9"},"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:"264fccfe393fce9a796e25d2c87c952cf744f1db"},c("span",{key:"40142cb9ef768b5206b4ef5028df174ea9ec2bb6"},c("ifx-icon",{key:"2a55185505e47b8d34e8da519ade1d38c5850faa",class:"check__icon",icon:"check12"})),c("span",{key:"037521ae1282b0130502d89d6cb7517686d4da54"},"Adheres to web standards")))),c("td",{key:"539dd7f6420ca1f004292b0e455825014ec58ad1"},c("ul",{key:"71967638c9e37314587f9242228b2726b7181f7a"},c("li",{key:"64f77ca7b0da38c7d258354c8c98be5893901ace"},c("span",{key:"cb5554574255e236925a81cff4c112477de8b92f"},c("ifx-icon",{key:"a78c24a7ce93f7ef7d581ef2df23e7d8814f1791",class:"check__icon",icon:"check12"})),c("span",{key:"eac60e42c976987e72c76cceb17ffa08c5517789"},"Icon incorporated")),c("li",{key:"09279a3f5d095c3d6d0bfb6a56ba77f7b073a924"},c("span",{key:"120b409b603da9f843ecde3c4ae66796744aa818"},c("ifx-icon",{key:"5277b87f2a1901d9305d2645cdad9b39ac7f0087",class:"check__icon",icon:"check12"})),c("span",{key:"8ac9f8021d3c0f9b92600e1203a2221e55c8d9fa"},"Percentage variant")),c("li",{key:"2930eee00ff2ee7b5cfb7f4aa9356cc58adddb40"},c("span",{key:"eec00f27f00891b384c4e6fba9d13caef0351be8"},c("ifx-icon",{key:"6509a1acfdff9f5ee825ef4724d4b62a098b9791",class:"check__icon",icon:"check12"})),c("span",{key:"bc6be8ac29dfffb3bb159e40e0269020ceb4efe6"},"Text variant")),c("li",{key:"89b7a02255c57cb7d885abc2e5d9b09e59f30eaa"},c("span",{key:"f5436f00be78dd884f9f5aac1b41fc4f0f9b7dc5"},c("ifx-icon",{key:"9fe37917112e85554a08be8c4962ac9216500eb6",class:"check__icon",icon:"check12"})),c("span",{key:"9e243a52c451cb7c80ebdfd5adaa25caf5c4a2aa"},"React, Vue and Angular wrapper integration")))),c("td",{key:"4fb688581439cfaf046371ec10234ca54f08f429"})),c("tr",{key:"cf42edc0555916fb025cc69557c47a17119bb86d"},c("td",{key:"8e702a9b965ac74573edcd0b014e97b080b07360",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c331ab20f2caaf8d20bbb925823dd19da9bdc243",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"ad113843aff4f8af8f06b8d2af03c92e51d1e8d7"},c("ul",{key:"38d4be4805c1e41f408b779ac97c97b8349622f7"},c("li",{key:"9fe2127dcfbd4b9937043a39a48035d13667c6de"},c("span",{key:"7d108a53566eea73abe06d6581c8870880402ca4"},c("ifx-icon",{key:"1aedd04159cbb9659deb454d1a53d8f729f9f294",class:"check__icon",icon:"check12"})),c("span",{key:"0fc5ba439e1e4827651e4a48be944a44ce4bf8e3"},"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:"0cddf2fdc97d2681603371b87f3c9c1979f8290d"},c("span",{key:"17f5c33f4b31f4efce14a65c0243bde5b9e0f435"},c("ifx-icon",{key:"6749d8a033aee3cec9ce0945b9303410bb2caa29",class:"check__icon",icon:"check12"})),c("span",{key:"7df0f8a0fc28e40cc1dd241f0c50df47ae23742c"},"Adheres to web standards")))),c("td",{key:"8b4a1034660a4cb3d4e6f61aff109eb15a92bdf3"},c("ul",{key:"3d9cb6552630a5cb22bdb8f08e1e4d4789faa2d1"},c("li",{key:"117299195a3c393d385e2a270c02f72d874809b3"},c("span",{key:"031127a1d582a5d396cf149388b177938a4b459a"},c("ifx-icon",{key:"4ad4b5b588f7999234a348a39884e56cc7b67d29",class:"check__icon",icon:"check12"})),c("span",{key:"7cb68403c384ce8d5a3fa9d03d49dd9a1d66e071"},"Brand variant")),c("li",{key:"60bd4873d8c0a2d06c82fc6d4071910ebbbcd671"},c("span",{key:"8202404a35ff4a6eb306e50a6b4012b307e3c490"},c("ifx-icon",{key:"c9b5ced6235df980072ff97ca213f7b1fa48bb17",class:"check__icon",icon:"check12"})),c("span",{key:"42168c4a016c41213f305d15ef7217ab6360135d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"cbe7e837551d43bb286c26409c9895c8420cca8e"})),c("tr",{key:"57d848ba00e846bf0ed0a6a01a055055ecb4332a"},c("td",{key:"81732e4ec111e0ff3b66bd006b08978068564603",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ef39d6ff7efd7d18b9bdb7641ad449ef371ec908",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"ac6a7497a8cd9322dd39f62242b5fa3e087577b1"},c("ul",{key:"99dfa208ce5d49973dd020442de044322b74f552"},c("li",{key:"6383c450c4e86898dec326fbe14f2a8fa5f04348"},c("span",{key:"59be43eb76f35fbd28be9977fa0c42d5b7505c91"},c("ifx-icon",{key:"ba53ad58eee92afe60d1d648394d6d7a67ffe1b0",class:"check__icon",icon:"check12"})),c("span",{key:"aa91301807602d5dc7b21ad204b6cee81ed7e4ab"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"6fce64bf9251d12b35ce9d880aad685b0a88a87f"},c("ul",{key:"ed95865a105a212f96004171be1a873b4547345c"},c("li",{key:"f97bdb56a4e7690b7369c3e2f4b206dedbd5ec7b"},c("span",{key:"78ccaec267c20a1a267512e4cadf07ef1b3c9d02"},c("ifx-icon",{key:"9fcce1e8df84c7e0fda736eef893f46e0c3e1d73",class:"check__icon",icon:"check12"})),c("span",{key:"aa0840e508a8dd8a4c84ac570020d7d4651934bb"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"09a956e82467b3232bbbfc1c5d8d174e0c1a7777"},c("span",{key:"ad8586970fd425505eeea2eea2c9db9c1ce59fa6"},c("ifx-icon",{key:"103a864afb908e6b50b95e6553c32f43f8da0644",class:"check__icon",icon:"check12"})),c("span",{key:"4133d5ac1e81d0517f35fd43bf36b2901ce0c565"},"Removable border")),c("li",{key:"a2ac7c0cdd59a3827d082e0092a5903976e96716"},c("span",{key:"94b8216d7cfa82310007459899c0a00d91ee2b64"},c("ifx-icon",{key:"2781efc37890126467b6f71d55908c5705b0c4bb",class:"check__icon",icon:"check12"})),c("span",{key:"a5b63b5c51acbd39ec80fd37394f6f4db5101206"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1e138d1df237f74aa031fb6b2af3c3fb70b2268c"})),c("tr",{key:"de88ee4079104e2b0bb24430273872767b02f978"},c("td",{key:"f883caea62e4075c94ba1d1560b3d8f2c5247161",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d519c31e2cfcc6a0997947ed300a669f1f95ec74",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"22d65aa9cea0a652777a4930a9993065ff73a607"},c("ul",{key:"1cedcf2fd1558cb1ca91ed038628f1955ef7781e"},c("li",{key:"480feb4e7fe0e631fca7ca53b6aef8f84b99d5a0"},c("span",{key:"6e216da44a82701e8a995b3a358c75932dfb794b"},c("ifx-icon",{key:"fbefa843053a20dd3b32c1f47a934b6f18275852",class:"check__icon",icon:"check12"})),c("span",{key:"eb3421d54a75e286a7b808c52c489f30c3962a78"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"702080ea56b80ed508d0533e5bc1497c77d69007"},c("span",{key:"d7fe4219a87290995bf778cb99a7c16c5ac4669a"},c("ifx-icon",{key:"de888cc605496a42e9280b77503b85f7acc07d66",class:"check__icon",icon:"check12"})),c("span",{key:"5e1f7135961c570cef60c2aa60baa9e629ab1513"},"Default and Compact variants")),c("li",{key:"4cd638fba554c3db1a19b9f3b57e3d52b1114bd3"},c("span",{key:"bd8163d145588d2222732d24db5f9e176a23642f"},c("ifx-icon",{key:"06abb064d0c2d7cbce62642d916257d2aebf9dc8",class:"check__icon",icon:"check12"})),c("span",{key:"9627b8cb967d69c107ff15a87b2ad0d1c727afdf"},"React, Vue and Angular wrapper integration")))),c("td",{key:"4025d288698e5354e765aba513be6c5fe8dd2521"},c("ul",{key:"b4b9fd847b1962869f2ec95b77f807197c52e49d"},c("li",{key:"036535c99021c2eb6c9035c39a972d7b6a6cd3e7"},c("span",{key:"d03fc25311aaefa253ecc85bf0795609c993749d"},c("ifx-icon",{key:"37a519dc7d2015ebc25d94812493d91daa564e73",class:"check__icon",icon:"check12"})),c("span",{key:"c227be9da1b51fb54d61b1d4de8e20c7764f9258"},"Vertical variant")))),c("td",{key:"cfbac6e25f93b6148dc0504dde455511b321b064"})),c("tr",{key:"f63a455054387c98909a28936e841f270938fc78"},c("td",{key:"722f2d2d427aa3f3e2f66bbefe361edc5e3f2981",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"23e07ec719fed95e853f5795ba0f3cdd33d9a5ab",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"276521922a5fa332b9478d88f93de7e4a5d6bbbc"},c("ul",{key:"1c1b051842a0c09f3cbbabb612d71a13afef6b29"},c("li",{key:"73be196120bfe7e733342ee14c86e414410b7593"},c("span",{key:"92629cf310bc23a80ab318e47a2f1b85eea8fc6f"},c("ifx-icon",{key:"c8aaa1fa75c0a9812267cb67b6fd8209dddb172a",class:"check__icon",icon:"check12"})),c("span",{key:"6e126f5f75e91cb19a82f9e353c407c4b99b793d"},"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:"9b44113247344dac87649aaa7776a23eb85fe3b2"},c("span",{key:"a4b5529acf66d077e37b022fdc13abfb4d00157f"},c("ifx-icon",{key:"cbf7b412ae2518bc199e7c899788cfaf3166280b",class:"check__icon",icon:"check12"})),c("span",{key:"2b47b7f2da8d895adc53e54b14369cbc9d93f771"},"Adheres to web standards")))),c("td",{key:"2ad14d5c0fdd45d8b10212dce4ca21ec4c56b2fb"},c("ul",{key:"65d8a334453bab9afe619aabd0049f696c0abdbf"},c("li",{key:"b5be2c7a95e2e99c4568cbeabbfd83dff1f74b37"},c("span",{key:"60faa9b59bc048211605f0568d6db04f7c90e034"},c("ifx-icon",{key:"cb8c618c76c83db2bc8e2cf597f81a399581cb4c",class:"check__icon",icon:"check12"})),c("span",{key:"b232fa57d6c0e50ede4986fc0f0c58647c7b0f55"},"Incorporated label feature")),c("li",{key:"04c7b780b2400e0e32820de75941e6b0e8ed4e88"},c("span",{key:"ad2d65a01e63c9c1888e635e32076adae6d0b291"},c("ifx-icon",{key:"922d34889ae7cc9a3b4fad693119a00f59bc3553",class:"check__icon",icon:"check12"})),c("span",{key:"d3e8f5a79238741e95a9be7463933bb41b6ce00b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0cf9f017a6682fcb88f0694beb1625885b7ef1ee"})),c("tr",{key:"e866d24794b538be09f6cd4edd601da238fb37cd"},c("td",{key:"1ab3b35c5c6a863da37169342af104772bb248e0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bc8ea1590899a38c43ef4de9d55979b6eb0d22b9",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:"bf87dcf430aa6de9b229a7a1b39916b7e43c83fa"},c("ul",{key:"0e244c0ef8e6f8fd1495be0d7d2f902e86634193"},c("li",{key:"29a6496154e0ef12613071e18cd511f780269ccb"},c("span",{key:"32bc6de6bb59ddb5ca62b994bebdddcc122e886f"},c("ifx-icon",{key:"1af6ae4e9c1f6162178ea048b5d9f006e8f6dbba",class:"check__icon",icon:"check12"})),c("span",{key:"762ff15f29dc067c0749047d4313332e41edddc1"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"502f538d3a3f59931f7956d91a207392947b4e42"},c("span",{key:"f2c37915b46642b417a042c40b9e6a9090daf8c9"},c("ifx-icon",{key:"63c468bb99ea31e5e3b01d6f95636b8520a330ba",class:"check__icon",icon:"check12"})),c("span",{key:"31675dfd00335b3b1bd5655e03904247d47007c0"},"Includes basic features such as column sorting")))),c("td",{key:"b22b3250f91a2873a16c736917e541a416ade0d6"},c("ul",{key:"56c9a5d16d26cd95e366e3c77afdba48493ce6c2"},c("li",{key:"ca300dc8790b3760926134c12571b9a780b919b4"},c("span",{key:"7b86817361f65ba28cf8f810dfbee27f5e592883"},c("ifx-icon",{key:"9cbbdc4a633e4286e6af5508a812101a88111031",class:"check__icon",icon:"check12"})),c("span",{key:"da9ad6468e67496ae11e91afda407df10e6882fa"},"Compact and Default variant")),c("li",{key:"e2d6f8b1ef56563744e6992091743ce19b3e52d6"},c("span",{key:"c847ab55db8591974fcce160d0c02d85a65dd145"},c("ifx-icon",{key:"9fb05fd6b69ceda6a6feccc44659c0f8e87b593d",class:"check__icon",icon:"check12"})),c("span",{key:"ab4f1cf030e76d5c0d188d48eb86df8bf547aa2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"e6a839b554c6f4fcfdecde376a688974b7cca3e4"})),c("tr",{key:"00eaae2f00200a58a01dd7ffb1c49ea6b86242f4"},c("td",{key:"1ac46ed709d385396b322e00be18104a9c7415be",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6128687cb91cedf78a18d77cb83eb9338f80bec8",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:"553e891d4e54fba97db58df5ee73499544f5f86c"},c("ul",{key:"89d828fb7a3983e2a5ecc7e83f537f7aa213a14b"},c("li",{key:"296957cf57c8ea14ec21c4d80507bf6ae1f1deda"},c("span",{key:"d0f6cc8823be46e4ef138a64fdbd1fe8699d9793"},c("ifx-icon",{key:"50f352cdf119c9fdc396a28f05418b8b9227a96b",class:"check__icon",icon:"check12"})),c("span",{key:"15f5fcc33e79170bbd93a99c9f584ddb4a5f18b1"},"Pagination")),c("li",{key:"af5e0f4c913c726f8c60e5da958a159fef9b2ab8"},c("span",{key:"36d6c4b024614866f90c15049a3254dc4231aaa9"},c("ifx-icon",{key:"8bb7d9b57bb926f2203838c5862c8034bade1f0c",class:"check__icon",icon:"check12"})),c("span",{key:"4e98bd3c458a6d64bd198994b74fab6ca8fa1d23"},"Sidebar filter")),c("li",{key:"a661960717d45093338224070c068665d2c86834"},c("span",{key:"f7adbfa0a132e9c87359592c573a6a81612aec1d"},c("ifx-icon",{key:"6c6fee0c5cf431f654c724ac064520941be5da3d",class:"check__icon",icon:"check12"})),c("span",{key:"f7ab10c4fb8df620efc9d42891231fdf96b259d3"},"Topbar filter")),c("li",{key:"a2250b51d2e72692b0848acfe2a08f13ef2ad5f8"},c("span",{key:"e573c228776ae5178123c40e8dba494a5d0b94e2"},c("ifx-icon",{key:"2ef8c29dae8e882a23a7404d186e38ca3bc82b25",class:"check__icon",icon:"check12"})),c("span",{key:"c00c370bb4a5775fd4beceaa4b29f89be532e218"},"Nestable buttons")))),c("td",{key:"82421e651e51eb6a0f66bf1bca10f0ac8a587444"}),c("td",{key:"e027f6f13dfa993a2349050667d3f8b772dbcdef"})),c("tr",{key:"02d2e7bca37d889b484a450ff38f816e2a625b1d"},c("td",{key:"9c6154ed9a8ec20b270091542139ecb0fb29dbfb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ec46e49ab70a1dd4e8cc720428f7956b54cb3077",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"e343f620aa3c19e8fb1130647b56ee97f65cfe76"},c("ul",{key:"2c1fdf87edcb019066fe23d70d7a2220bc7b8c09"},c("li",{key:"519fcbe1591ef36f93653a63407aa2d732971572"},c("span",{key:"a26aaecee2b48c3146657a25e922981dfa67e081"},c("ifx-icon",{key:"ddfea20c5578bd3b531d888916316fdb968f204f",class:"check__icon",icon:"check12"})),c("span",{key:"1d573c784010d440b241f388312c6b303ada298c"},"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:"4a523e4f66e039ec025d384878acfc0536a87822"},c("span",{key:"b9a67f27e9242cec547bc5e0db8c654b7e4672a4"},c("ifx-icon",{key:"9500e30237b04ca3c3565238afc1c3684676f27c",class:"check__icon",icon:"check12"})),c("span",{key:"bf68172304725150a8c93771ca3d09db655c0043"},"Adheres to web standards")))),c("td",{key:"6bf45ef8437270681bf25367b425119245ac99f0"},c("ul",{key:"e07e0fa755a61e568e047f49018a46ff08699f3c"},c("li",{key:"ee7c99323e9a24ec5f8c3e1aa264cc0c126864c1"},c("span",{key:"18e3313107b7dd01c925de27d21fcf90098b8d69"},c("ifx-icon",{key:"a8a494ff588b93b03c2fdcd9aa524c51cf3de6e5",class:"check__icon",icon:"check12"})),c("span",{key:"bda6e7c85fe735c59c0aed4c72f7c73217f31c64"},"Horizontal and Vertical orientation")),c("li",{key:"54c42999996e15521d41374c830ee81be9973e60"},c("span",{key:"b463c87371017c91e75d52023290fe5313d83d2a"},c("ifx-icon",{key:"58375594bd3862c17f47346e9ba84932273ca603",class:"check__icon",icon:"check12"})),c("span",{key:"c27713ef8e6383e2039bd3c57d105fad5b1c2caf"},"Extended customization")),c("li",{key:"5bb60eb9409d2cd1159c4271e58ab42bbe4b74e8"},c("span",{key:"f19351e04a3cd114a274a21ffc898ea1870d9338"},c("ifx-icon",{key:"161870e5bae0039224d387ace762242a28b25d45",class:"check__icon",icon:"check12"})),c("span",{key:"1ab0cb79cfdb4a43a5f5c6b5e451a82bd51d1cd6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a1feaa519054aeab44d68fc4799d5f7735e558c2"})),c("tr",{key:"aebffaf38038097c177adb978df1c24f75801d8b"},c("td",{key:"f5b8fb718ed15560beaacef2f11615b542d6db1e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cd5fe211889b5c9a835bf390f41c70255ba35429",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"41e4fcec0b099fa2069c3a2ca81a4b509f092607"},c("ul",{key:"a01ac336d90f144bb7cdd35ff7d33849d2311d8f"},c("li",{key:"1723019377ba6280dc70b42105514f5388645f74"},c("span",{key:"f333d21f5f60f692fc1acabb176b218bb14ab1fb"},c("ifx-icon",{key:"964de2bf01847f75cdb50ece6650ddbf4d3a74a6",class:"check__icon",icon:"check12"})),c("span",{key:"08b4107121db8dd1eb3c65352cfd36fb8ff7c177"},"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:"e77afa02d678b562b92f0c3a24bfc075362efbd2"},c("ul",{key:"374eae592d0633cb807602aaf0514d16937efa83"},c("li",{key:"85e6407e73b2cc729a2e69341b1626c97b8d4a55"},c("span",{key:"5cf4bb2c0b778a74aa173cf3925eb24d026c28ab"},c("ifx-icon",{key:"74e008fbfd1f439ceb48037b5283d5b66ad1fb0a",class:"check__icon",icon:"check12"})),c("span",{key:"d22f2d612384911137ef45bc676dd265b2a6159c"},"Icon incorporated")),c("li",{key:"ebfd140a62587a3cf3468c74c937ac0e6e4dbbc9"},c("span",{key:"be413d2f1a44e14b58bb44f55490bd23dc260563"},c("ifx-icon",{key:"f84f9f243fac13b15336e2fe1378f226a90f6111",class:"check__icon",icon:"check12"})),c("span",{key:"04c2e264165bfe4ea718e31962dbce0625ea1113"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f81cd91a8dd4ae938bb8d71dd86f606d37b7035d"})),c("tr",{key:"5dd7813bac46ea9fe38f955ed2ba0109b4fe6ac3"},c("td",{key:"a04de809d22339bc652dc7c5b078defb9c59e09d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"118477988aca1f2bbc02d1c422cedf4010396a24",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:"85b005dc49d845d04b507c1c83daf056060e3019"},c("ul",{key:"21d402386894909a8814f8c7d8587a7a009f0cc0"},c("li",{key:"f7c2826ba517080166022dd2b1e2e1bec68b2a8b"},c("span",{key:"0b55bdc4bb6b77c404f37cb5e7a75bca9570c666"},c("ifx-icon",{key:"d10dc2f58a5d9a84f8ce02b985677fa5154c9cfb",class:"check__icon",icon:"check12"})),c("span",{key:"15a8a8cf1e288a7568d0d64d4236396feff4667d"},"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:"2e20596fe5793258af62cb8fa125272288be1ff9"},c("span",{key:"005f31a9cfac8e912bbcbf0615db5beebfa6c153"},c("ifx-icon",{key:"30bd6f361b7d7dda51190ebe1bc6514df845c3e9",class:"check__icon",icon:"check12"})),c("span",{key:"a16bcfd5510e76ce7878697e1f8aafe12f239697"},"Adheres to web standards")))),c("td",{key:"adf2eef9981c528e732495b211199535412de4f5"},c("ul",{key:"2c80eda228ab65f3ae587d1570b1f1eb6cf6d324"},c("li",{key:"a8c3bc01f79b61f9fdc757b50c16f5a8c027fc05"},c("span",{key:"03b93776feb1dce30e7322b2754910c1c232d4e8"},c("ifx-icon",{key:"d9e8b1565dda87b58bea37ed3c8c9ae95c99b634",class:"check__icon",icon:"check12"})),c("span",{key:"54b85405483ca86d5569198ce7effde89688e7cb"},"Extended customization")),c("li",{key:"b4c58ccfeab7662f2a407dd95fd4008950e30010"},c("span",{key:"c818b703d3d4c7ad48202780531368f28f6f0aa0"},c("ifx-icon",{key:"b789f4305ecbd794baa3126e07e5119a60e1b54c",class:"check__icon",icon:"check12"})),c("span",{key:"59218a4c756ded3ca72879947e2e7425d9be6829"},"Possibility for icon configuration")),c("li",{key:"9b9aa25a3f5f0a8e2bcee554f37bfa59b62259ec"},c("span",{key:"e1418369f1271c1af4c97b905d41bc39d8c3c73d"},c("ifx-icon",{key:"ff41ae300dd04e039ea8120f643c66669b880720",class:"check__icon",icon:"check12"})),c("span",{key:"f63a4b6b95e5a92239236c0dfc62c7ac51c740b6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"83e875b5b04c1cbae8219c4177add5e06b7cd613"},c("ul",{key:"9f8d6e065654dc04a3f3e67b04cbe57c6f0a0e6c"},c("li",{key:"b30e7693d8f13ccb298922ab389052fc44eeeed6"},c("span",{key:"0f7f6ba63e3384b735adc3d2fb23f744ee453cee"},c("ifx-icon",{key:"1a18552c1333b29afd3a5f62a17c8caffed230dd",class:"check__icon",icon:"check12"})),c("span",{key:"c96d990d82cb9bd34a5e1472c44ffb9d71b6b212"},"Form integration"))))),c("tr",{key:"64e96fe291bc2de9089910e0628c58cfd03b6fc8"},c("td",{key:"a38c798e88bf98e091ec8a5d8d4e9b42cedbd87a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"299276a3ba27a8a28f415d46d9ce47332eaec26c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"beaf3b4159a357af77efdb93417b1ef96793ca32"},c("ul",{key:"33ff20f829cb1e8b57c8e1d24390eff0f394efb2"},c("li",{key:"8d38fb4e4d3791c402bd2ff4986b9c171ffadcdf"},c("span",{key:"0720f83bc7352cf7e68153c5fbc657fe7d5a1a21"},c("ifx-icon",{key:"d678e41595c3fa772dc4d522008b187b7ffc0417",class:"check__icon",icon:"check12"})),c("span",{key:"f4a54721b68517787a5f418e30a312541fd75714"},"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:"370019faa505f0130dafd4fd67ecab230f3fa75c"},c("span",{key:"76bcd70c7dd6a045513f10a2c14535de2096a1b2"},c("ifx-icon",{key:"3a955cc90f00994f063da3cf06f72ba4e5065bbf",class:"check__icon",icon:"check12"})),c("span",{key:"ec91d5e7c3797d81caac45d80d46fa504e8a9b2b"},"Adheres to web standards")))),c("td",{key:"b3048dbd00e37ac3e836e04bc1de708f3bbba7dd"},c("ul",{key:"8d282f0b163d59cda6e5fd42a227ce503a36172b"},c("li",{key:"72252783ad59124a60bee991a9c90cf1d44e36e4"},c("span",{key:"28f9b204289487019877eb002a8748a2344ecbd9"},c("ifx-icon",{key:"d5141c8ef4c0c290a49ce7dc1403e9152613e82f",class:"check__icon",icon:"check12"})),c("span",{key:"9ff8d1f70b9224230801de39747f00f4d507e69b"},"Compact, dismissible and Extended variants")),c("li",{key:"18c9bb18999437dc8bfe40d5373e878ccf725cc0"},c("span",{key:"27a65f955a5bce022daaf900897a732d7c8216ed"},c("ifx-icon",{key:"0ec0dde0d5094d52f3386acc2a9a1031946967d5",class:"check__icon",icon:"check12"})),c("span",{key:"bfd2ccfdc5a4bb4aa382d77acf9d1bf5445f32fd"},"Auto-adjusting position")),c("li",{key:"864b9f98b299dd11bc95334984c8533ed98b0dfe"},c("span",{key:"23a19c5806c2484aed24abbcc12013b51671ea63"},c("ifx-icon",{key:"3179e6e1da7293aaf741101ec9cfa79ddd403c1e",class:"check__icon",icon:"check12"})),c("span",{key:"4948436998da1f6f3b5c0a4496c0884f018b8267"},"Icon incorporated")),c("li",{key:"9fbed72e461f0630cd692634c919757711173b3e"},c("span",{key:"9cd9baaa8229b8a5a8acf33e333cd3487bef8ad0"},c("ifx-icon",{key:"0d741430de41c137baaeebcaf507d4a1d412065e",class:"check__icon",icon:"check12"})),c("span",{key:"6f7116cc8f3e4ceaf0fff978a5a5cdc17b2bb6e3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7c1c6ad7d7e298bd35bdc6679aed6c850f755cb5"})),c("tr",{key:"e3aa89d2d6fd00d62f8fe8e576129c49d58da788"},c("td",{key:"be1172b1f7c04d54d7d9d0fa7fe3c16cd1f45445",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cff08ab93bfaea0f369d6ff5ccbcb7a26dfefc10",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"5bf85c2f8bd3f874ff0f81860c9f3dd13f0fa037"},c("ul",{key:"7c9daea978f85c1543356a987386070bb033cab3"},c("li",{key:"a27df700f27a5e03cd8dd69d58fe6cb9fdf51887"},c("span",{key:"c2e52a172b2b8cfa51d5c00957aa3ddfa0e59f44"},c("ifx-icon",{key:"13213925ee979480425e06f22ef30e833e1d4551",class:"check__icon",icon:"check12"})),c("span",{key:"a7c9d50d32ec9cbc47d590cd97d4192bb51c62db"},"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:"90ed78acf891ba6ee08add4613a03e41174b5c17"},c("span",{key:"9190b26afcd6bfaef514c95b4edda9554d04e2a3"},c("ifx-icon",{key:"fe7275a916a4cb41d0b7f7ba69fc83e66052851a",class:"check__icon",icon:"check12"})),c("span",{key:"e204cc426608ff70df468ea32c3f0b7c1ac40e3a"},"Adheres to web standards")))),c("td",{key:"b93615ddf0d17c3c80a5d16b085f7d5cc39a3af2"}),c("td",{key:"b6cf19a9592ef52fe2adee7561639b8f1c14b5f7"})),c("tr",{key:"e0498fb517777f0263c4422bea4f8b31925137ba"},c("td",{key:"470ff105fb8b4f4a23b826bfc7319d73d03420ab",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"26a601f8281302f97d4de4d58c76fb63d806b734",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:"e952b16778fc3884c915930f33955112aa8105de"},c("ul",{key:"36159768cd5950e03145deccb419d97b2c3fc73e"},c("li",{key:"b68f2172d4d33d3ad87cf64bfd590e4d55848b99"},c("span",{key:"669de759d75424fba3ed3d08ef4285c157be1e86"},c("ifx-icon",{key:"0fa274eada0c02f97b770a51912b9c13427ba533",class:"check__icon",icon:"check12"})),c("span",{key:"7c473e37b9f40efac39f1fa5548a29b3735e709c"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"9c74f29da05c71a31880168ee433c27095a3556a"},c("span",{key:"4e6f0956676d26c394bab053275af50adf5e4ef1"},c("ifx-icon",{key:"0e32ee2b4008da7effd0aa59d9e331fa519026e5",class:"check__icon",icon:"check12"})),c("span",{key:"70f4c689e768a2fdb8eb1202ebbdbce18457f8f6"},"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:"91c83dff50d68c42825d993202859119ceb7aa04"},c("span",{key:"82f204254130ccd559b4c2a45294dc36e68210e4"},c("ifx-icon",{key:"6bd9cf25b9ef442c00d202f5c84ae82d46d97ee5",class:"check__icon",icon:"check12"})),c("span",{key:"ee5d6f14225e1efd1efcf7c7bc9ca12c4efd8905"},"Adheres to web standards")))),c("td",{key:"f630a997c4b621a73d49bccee64e6a49a1d22540"}),c("td",{key:"3919d80156d398e4074868d0ef81d9043a3207cb"})),c("tr",{key:"3f50c29c1d6a4acb0d620c538f6a2980e8484156"},c("td",{key:"029e008cae5583662e2ddae73c0eb704ca46b945",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d374c08e7ec684ec89948a950b42b097875a7cb2",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:"45c946e23150dd8a6516a3843e009fd7af38fe21"},c("ul",{key:"d24e4e4b2d2371c54fac1af29d03cddf268cc7ef"},c("li",{key:"bfeaa5e0e6f9524a28eebc97b20c861b59688123"},c("span",{key:"23916b37fc2da76dac6470bde35c688c7d0e7739"},c("ifx-icon",{key:"6627d779d0adda176a2536dd82c98aa0ac7b91ac",class:"check__icon",icon:"check12"})),c("span",{key:"100ed703d5fbdd3d99bf7e46d92becd5570ae31d"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"baef626e28e24e7915ca745ddcd7623a27a9114e"},c("span",{key:"d0c9a5fe2e2f84bfadf5b694d6fd60fb1840e3ef"},c("ifx-icon",{key:"c6a4256937298c9c6a7cc10c4d5b4816486a4838",class:"check__icon",icon:"check12"})),c("span",{key:"3ae261b3c7a6cddfd304e26ff2702497e934b5fb"},"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:"1f170beb0a7ef7fb62a42a536dbeace905f86ab3"},c("span",{key:"f2795572dd661f5b6be344883db205fc99a7debb"},c("ifx-icon",{key:"e617b7b4917123a0f9354baba966b75aaf2fa901",class:"check__icon",icon:"check12"})),c("span",{key:"477787e4851e65b764247fc065f197a8a08fc528"},"Adheres to web standards")))),c("td",{key:"afe18ef0379fc51b456f99988f9f641f34392d07"}),c("td",{key:"c5ab4b21c41fd53a0358690736e953408e97aad6"})),c("tr",{key:"d5e8328752b0a0a0dc121891ae51c8c0fa5eb58a"},c("td",{key:"4c694381ef5577be519269ca99d2c9d5356fd311",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cba2fae4e556826f0ab9def8ee14a4d90ccba842",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:"0d10cfa411798ba3979cb07a5e1fd48c32a8ded2"},c("ul",{key:"c1f1e001080f5a743f013708c6edf3a3caea25f6"},c("li",{key:"02d99025cd1a1c970e0df40790ac388f2a11adbd"},c("span",{key:"1c0b83ccfa9f605a763f104e1ec5cae05afe12e7"},c("ifx-icon",{key:"0b54c57dd2cbb9e2f1d06ff56f115a209e3b6c16",class:"check__icon",icon:"check12"})),c("span",{key:"e0948abd5c1d1379b419113c3bc86b0f94b2d776"},"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:"c8e7d138d85e1a97be20759c315084a4408910ce"},c("span",{key:"413949f2bcb167752bbc7c19f1e685072fc214c6"},c("ifx-icon",{key:"d0563548e1c1be9ab6591886c9333316a090789c",class:"check__icon",icon:"check12"})),c("span",{key:"de35d1ecc6939f9c048c3ac485b4f52653b7836d"},"Form integration")))),c("td",{key:"b631d7f85a5090720a4bf36d0f880025be1b236a"}),c("td",{key:"4fdce8ddd3c399fa3051117fbd103ea016a60e2a"})),c("tr",{key:"6de51cc2e8ec8dae6cb104a54295e5320b7f8891"},c("td",{key:"f4e4266537d9ed145e08ee79f34f00f1cb4302f3",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"260340b56ea054475dee89fd591d44f7a7397a76",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"9965128b3c4849c30ed9148935eac015f5a0bdc4"},c("ul",{key:"3bc98f56da00ac8aa7c7da48e3a859881cdb13e3"},c("li",{key:"d8f97e57e59fac739871df3c04557f20fa21328e",class:"planned__component-wrapper"},c("span",{key:"187b0598bd71e62617aa1c1800718b3ea9733136"},c("ifx-icon",{key:"1faaf7c3512618bf9e27ae6396998fd8fd094d7b",class:"planned__icon",icon:"clock24"})),c("span",{key:"4bb6d0c3803c541adffd2f81412b501ad6286165"},"On Hold")))),c("td",{key:"efb19c8379917cc789c22d65a69cf71b16f01d34"}),c("td",{key:"687192ce63078cb7294a8eddfacb68b515a6735b"})),c("tr",{key:"7cda1dd2a977c7a41803b2cbc0977ead0fc24c68"},c("td",{key:"bd290ef3d261acbd3345eb7f06e77e541bd3cb10",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"895a9ed4e03de6025706ab64c957c5810af9ae2c",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"5e6d6caddb399090340731828282816cfbacfc4e"},c("ul",{key:"db0af552e782f65a68f6f1bd7fd75161c3c733c7"},c("li",{key:"b5995de8641fb1f6c5ca39928f11b36d5b7da509",class:"planned__component-wrapper"},c("span",{key:"b8910d05137b4daeef02c175f91eefa9741968dc"},c("ifx-icon",{key:"61b46feb15574d733b5c450ed361b1e1df9e6922",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"d6e7064d3329e86c8236c3fdfd25a5eb7676ae01"},"In Progress")))),c("td",{key:"327d313f3b9d01b1d5561c9c6433d4497f0fd505"}),c("td",{key:"3c91b8d65d58d3a1bd5c5da85465341658fad700"})),c("tr",{key:"692b4b17d64d5d0b786494654563e27f89b4c673"},c("td",{key:"c2a4b1b01b63b838aeaead9ec8f4051406c2d12e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"bf09f91a2bded7755642263ffe445ecf13345be3",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"f8d4fbc986af363ae765c88a96dc38e5c5b689bc"},c("ul",{key:"c1113cf174fc031d0f0afa6f4e7fa0320f9e63d5"},c("li",{key:"8cb023a8f2627a75ef145f4f30dff81b5724fff7",class:"planned__component-wrapper"},c("span",{key:"3377fea23dc481e60b60ea83acff57dc7935c683"},c("ifx-icon",{key:"75d9965cc1e7a04cc3a0e71df505d4fb222903a4",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"e30cb3920a1f0f36d3d0df1b1a2656672079ab07"},"In Progress")))),c("td",{key:"ac7fb1ba2902d574af718878ba8a8246e79ec396"}),c("td",{key:"1d47b94a942c4a7fbe040e89522276f876cffadb"})),c("tr",{key:"c9a1ab1d4630fc1b97f4b86fe4cf894e2fd3af06"},c("td",{key:"ae62f1a3e56677fa80ec4308d2e7d4c0a258ce30",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"91158664f3b74e36ac6dec9883bc272f9f9a196a",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"64e542a98d769fd20823117aa615629b43f27575"},c("ul",{key:"ef24e9931b65f18d25644305b070016d134c8639"},c("li",{key:"efb76407a207c8e7c6f7244bce00d7608610ece4",class:"planned__component-wrapper"},c("span",{key:"ce528230f74426ee1e0dda976d16781d21c883e4"},c("ifx-icon",{key:"c8a12b8f379a8d86388063dff7429d0e15b53556",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"168d5f1c68790aeb7a6d5ec57ff7f3c43f95684f"},"In Progress")))),c("td",{key:"fe69d79a778d04a86711feef3cbb5627123691d0"}),c("td",{key:"0808946dadfc86a270a87453a8de04174c6a3efc"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
-//# sourceMappingURL=p-eb510174.entry.js.map