From 7f99f4ac9680407783a4c0b29a56d5fbcab810a0 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Wed, 18 Sep 2024 17:41:28 +0200
Subject: [PATCH 01/20] fix(1479): align radio button to web standards

---
 .../stencil-components/vanilla-cdn/index.html |  17 +-
 .../radio-button/radio-button.e2e.ts          | 148 ++++++++++--------
 .../radio-button/radio-button.stories.ts      |   4 +-
 .../components/radio-button/radio-button.tsx  |  72 ++++++---
 .../src/components/radio-button/readme.md     |  27 +++-
 5 files changed, 169 insertions(+), 99 deletions(-)

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
index 8125fee2a..3d6af4158 100644
--- a/examples/stencil-components/vanilla-cdn/index.html
+++ b/examples/stencil-components/vanilla-cdn/index.html
@@ -301,7 +301,13 @@ <h2>Progress bar</h2>
 
 
     <h2>Radio Button</h2>
-    <ifx-radio-button id="radio-btn" error="false" disabled="false" value="false" size="s">Text</ifx-radio-button>
+    <form id="radio-form">
+      <ifx-radio-button id="radio-btn" error="false" disabled="false" size="s" name="fruit" value="apple">Apple</ifx-radio-button>
+      <ifx-radio-button error="false" disabled="false" size="s" name="fruit" value="pear">Pear</ifx-radio-button>
+      <ifx-radio-button error="false" disabled="false" size="s" name="fruit" value="orange">Orange</ifx-radio-button>
+      <ifx-button type="submit">Submit</ifx-button>
+    </form>
+
     <br />
 
     <h2>Spinner</h2>
@@ -652,9 +658,12 @@ <h5 slot="title">Title</h5>
       updateValues();
     });
 
-    radioBtn.addEventListener('ifxChange', (event) => {
-      console.log("radio btn value change", event.detail);
-      radioChecked = !radioChecked;
+    document.getElementById('radio-form').addEventListener('submit', event => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        formData.forEach((value, key) => {
+          console.log(`${key}: ${value}`);
+        });
     });
 
     openModalBtn.addEventListener('click', (event) => {
diff --git a/packages/components/src/components/radio-button/radio-button.e2e.ts b/packages/components/src/components/radio-button/radio-button.e2e.ts
index 1fa2a8d09..94cc03136 100644
--- a/packages/components/src/components/radio-button/radio-button.e2e.ts
+++ b/packages/components/src/components/radio-button/radio-button.e2e.ts
@@ -9,97 +9,119 @@ describe('ifx-radio-button', () => {
     expect(element).toHaveClass('hydrated');
   });
 
-  it('handleRadioButtonClick should emit ifxChange event if not disabled, not in errorv or not already checked', async () => {
+  it('should be checked if is attribute checked is set', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-radio-button checked>Test</ifx-radio-button>');
+    const element = await page.find('ifx-radio-button');
+    const checkmark = await page.find('.radioButton__wrapper-mark');
+
+    expect(await element.callMethod("isChecked")).toBe(true);
+    expect(checkmark).not.toBeNull();
+  });
+
+  it('should not be checked if is attribute checked is not set', async () => {
     const page = await newE2EPage();
     await page.setContent('<ifx-radio-button>Test</ifx-radio-button>');
-    const component = await page.find('ifx-radio-button');
+    const element = await page.find('ifx-radio-button');
+    const checkmark = await page.find('.radioButton__wrapper-mark');
 
-    component.setProperty('disabled', false);
-    component.setProperty('error', false);
-    component.setProperty('value', false);
+    expect(await element.callMethod("isChecked")).toBe(false);
+    expect(checkmark).toBeNull();
+  });
 
-    await page.waitForChanges();
+  it('should emit ifxChange event if button is clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-radio-button>Test</ifx-radio-button>');
+    const component = await page.find('ifx-radio-button');
 
     const changeSpy = await component.spyOnEvent('ifxChange');
 
-    const element = await page.find('ifx-radio-button >>> .label');
-    await element.click();
+    const button = await page.find('ifx-radio-button .radioButton__wrapper')
+
+    await button.click();
 
     expect(changeSpy).toHaveReceivedEventDetail(true);
   });
 
-  it('handleRadioButtonClick should be on when form submitted', async () => {
-    const page = await newE2EPageWithRadioButtonWithinForm();
-
-    const radioButton = await page.find('ifx-radio-button');
-    await radioButton.click();
+  it('should emit ifxChange event if label is clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-radio-button>Test</ifx-radio-button>');
+    const component = await page.find('ifx-radio-button');
 
-    const submitButton = await page.find('#submit');
-    await submitButton.click();
+    const changeSpy = await component.spyOnEvent('ifxChange');
 
-    const formData: FormData = await page.evaluate(() => {
-      return window['formData'];
-    });
+    const label = await page.find('ifx-radio-button .label')
+    await label.click();
 
-    expect(formData['radiobtn']).toBe('on');
+    expect(changeSpy).toHaveReceivedEventDetail(true);
   });
 
-  it('handleRadioButtonClick should be off when form submitted and radio button not clicked', async () => {
-    const page = await newE2EPageWithRadioButtonWithinForm();
+  it('should disable radio buttons of the same group', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <ifx-radio-button name="test" value="one">One</ifx-radio-button>
+      <ifx-radio-button name="test" value="two" checked>Two</ifx-radio-button>
+      `);
 
-    const submitButton = await page.find('#submit');
-    await submitButton.click();
+      const button1 = await page.find('ifx-radio-button[value="one"]');
+      const button2 = await page.find('ifx-radio-button[value="two"]');
 
-    const formData: FormData = await page.evaluate(() => {
-      return window['formData'];
-    });
+      await button1.click();
 
-    expect(formData['radiobtn']).toBeUndefined;
-  });
+      expect(await button1.callMethod('isChecked')).toBe(true);
+      expect(await button2.callMethod('isChecked')).toBe(false);
 
+      await button2.click();
 
-  it('handleRadioButtonClick should be off when form is reset ', async () => {
+      expect(await button1.callMethod('isChecked')).toBe(false);
+      expect(await button2.callMethod('isChecked')).toBe(true);
+  });
+
+  it('should have the correct value when form is submitted', async () => {
     const page = await newE2EPageWithRadioButtonWithinForm();
-    const element = await page.find('ifx-radio-button >>> .label');
-    const submitButton = await page.find('#submit');
-    const resetButton = await page.find('#reset');
 
-    await element.click();
-    await resetButton.click();
+    const button2 = await page.find('ifx-radio-button[value="two"]');
+    await button2.click();
+
+    const submitButton = await page.find('#submit');
     await submitButton.click();
 
-    const formData: FormData = await page.evaluate(() => {
+    const formData: Record<string, FormDataEntryValue> = await page.evaluate(() => {
       return window['formData'];
     });
 
-    expect(formData['radiobtn']).toBeUndefined;
+    expect(formData['test']).toBe('two');
   });
-});
 
-async function newE2EPageWithRadioButtonWithinForm(): Promise<E2EPage> {
-  const page = await newE2EPage();
-  await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
-    <ifx-radio-button name="radiobtn" value="false">Test</ifx-radio-button>
-    <button id="submit" type="submit">Submit</button>
-    <button id="reset" type="reset">Reset</button>
-  </form>`);
-
-  // convert formdata to serializable Object and set to window.formData
-  await page.addScriptTag({
-    content: `
-      function handleSubmit(event) {
-        event.preventDefault();
-        const formData = new FormData(event.target);
-        
-        const obj = Array.from(formData.entries()).reduce((acc, [key, value]) => {
-          acc[key] = value;
-          return acc;
-        }, {});
-        window.formData = obj;
-      }
-      window.handleSubmit = handleSubmit;
-    `,
-  });
+  async function newE2EPageWithRadioButtonWithinForm(): Promise<E2EPage> {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <form id="testForm" onSubmit="handleSubmit(event)">
+        <ifx-radio-button name="test" value="one">One</ifx-radio-button>
+        <ifx-radio-button name="test" value="two">Two</ifx-radio-button>
+        <ifx-radio-button name="test" value="three">Three</ifx-radio-button>
+        <button id="submit" type="submit">Submit</button>
+        <button id="reset" type="reset">Reset</button>
+      </form>
+    `);
+
+    // convert form data to a serializable object and set it to window.formData
+    await page.addScriptTag({
+      content: `
+        function handleSubmit(event) {
+          event.preventDefault();
+          const formData = new FormData(event.target);
+          
+          const obj = Array.from(formData.entries()).reduce((acc, [key, value]) => {
+            acc[key] = value;
+            return acc;
+          }, {});
+          window.formData = obj;
+        }
+        window.handleSubmit = handleSubmit;
+      `,
+    });
 
-  return page;
-}
+    return page;
+  };
+});
diff --git a/packages/components/src/components/radio-button/radio-button.stories.ts b/packages/components/src/components/radio-button/radio-button.stories.ts
index 6ef8a5b14..3877eddf3 100644
--- a/packages/components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/components/src/components/radio-button/radio-button.stories.ts
@@ -7,7 +7,7 @@ export default {
   args: {
     error: false,
     disabled: false,
-    value: false,
+    checked: false,
     size: 's',
     label: 'Text',
     name: 'radio-button'
@@ -43,7 +43,7 @@ const DefaultTemplate = args => {
   // Set the attributes
   element.setAttribute('error', args.error);
   element.setAttribute('disabled', args.disabled);
-  element.setAttribute('value', args.value);
+  element.setAttribute('checked', args.checked);
   element.setAttribute('size', args.size);
   element.setAttribute('name', args.name);
 
diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index 1c17e5154..63bb533a2 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -1,34 +1,37 @@
-import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, AttachInternals } from '@stencil/core';
+import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';
  
 
 @Component({
   tag: 'ifx-radio-button',
   styleUrl: 'radio-button.scss',
-  shadow: true,
-  formAssociated: true
+  shadow: false,
+  formAssociated: false
 })
 export class RadioButton {
   @Element() el;
   @Prop() disabled: boolean = false;
-  @Prop() value: boolean = false;
+  @Prop() value: string;
   @Prop() error: boolean = false;
   @Prop() size: "s" | "m" = "s";
-  @State() internalValue: boolean;
+  @Prop() name: string;
+  @Prop() checked: boolean;
+  @State() internalChecked: boolean = false;
   @State() hasSlot: boolean = true;
 
+  @State() inputElement: HTMLInputElement;
+
   @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;
 
-  @AttachInternals() internals: ElementInternals;
-  
-  @Watch('value')
-  valueChanged(newValue: boolean, oldValue: boolean) {
-    if (newValue !== oldValue) {
-      this.internalValue = newValue;
-    }
+  /**
+   * @returns whether the radio button is checked.
+   */
+  @Method()
+  async isChecked(): Promise<boolean> {
+    return this.internalChecked;
   }
-
+  
   componentWillLoad() {
-    this.internalValue = this.value;
+    if (this.checked) this.internalChecked = this.checked;
     const slot = this.el.innerHTML;
     if (slot) {
       this.hasSlot = true;
@@ -36,17 +39,29 @@ export class RadioButton {
   }
 
 
+  /**
+   * Click the hidden input element to let it handle the state
+   * and emit ifxChange event.
+   */
   handleRadioButtonClick() {
-    if (!this.disabled && !this.error && !this.internalValue) {
-      this.internalValue = !this.internalValue;
-      this.el.shadowRoot.querySelector('.radioButton__wrapper').focus();
-      this.ifxChange.emit(this.internalValue);
-      this.internals.setFormValue(this.internalValue ? 'on' : null);
-    }
+    this.inputElement.click();
+    this.internalChecked = this.inputElement.checked;
+    this.ifxChange.emit(this.internalChecked);
   }
 
-  formResetCallback() {
-    this.internals.setFormValue(null);
+  /**
+   * Listen to all change events.
+   * Needed to get informed when another button of the group gets chcked 
+   * and this one needs to become unchecked. 
+   * 
+   * @param event 
+   */
+  @Listen('change', { target: 'window' }) 
+  handleChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    if (target.name === this.name) {
+      this.internalChecked = this.inputElement.checked;
+    }
   }
 
   render() {
@@ -58,18 +73,27 @@ export class RadioButton {
       >
         <div
           class={`radioButton__wrapper 
-          ${this.internalValue ? 'checked' : ''} 
+          ${this.internalChecked ? 'checked' : ''} 
           ${this.disabled ? 'disabled' : ''} 
           ${this.error ? 'error' : ''}`}
           tabIndex={this.disabled ? -1 : 0}
         >
-          {this.internalValue && <div class="radioButton__wrapper-mark"></div>}
+          {this.internalChecked && <div class="radioButton__wrapper-mark"></div>}
         </div>
         {this.hasSlot && (
           <div class={`label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}`}>
             <slot />
           </div>
         )}
+        <input
+          type="radio" 
+          hidden 
+          ref={el => this.inputElement = el as HTMLInputElement} 
+          name={this.name}  
+          value={this.value}
+          checked={this.internalChecked}        
+          disabled={this.disabled}
+          onClick={(e) => e.stopPropagation()}></input>
       </div>
     );
   }
diff --git a/packages/components/src/components/radio-button/readme.md b/packages/components/src/components/radio-button/readme.md
index bda5a6c33..c826fe42a 100644
--- a/packages/components/src/components/radio-button/readme.md
+++ b/packages/components/src/components/radio-button/readme.md
@@ -7,12 +7,14 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type         | Default |
-| ---------- | ---------- | ----------- | ------------ | ------- |
-| `disabled` | `disabled` |             | `boolean`    | `false` |
-| `error`    | `error`    |             | `boolean`    | `false` |
-| `size`     | `size`     |             | `"m" \| "s"` | `"s"`   |
-| `value`    | `value`    |             | `boolean`    | `false` |
+| Property   | Attribute  | Description | Type         | Default     |
+| ---------- | ---------- | ----------- | ------------ | ----------- |
+| `checked`  | `checked`  |             | `boolean`    | `undefined` |
+| `disabled` | `disabled` |             | `boolean`    | `false`     |
+| `error`    | `error`    |             | `boolean`    | `false`     |
+| `name`     | `name`     |             | `string`     | `undefined` |
+| `size`     | `size`     |             | `"m" \| "s"` | `"s"`       |
+| `value`    | `value`    |             | `string`     | `undefined` |
 
 
 ## Events
@@ -22,6 +24,19 @@
 | `ifxChange` |             | `CustomEvent<any>` |
 
 
+## Methods
+
+### `isChecked() => Promise<boolean>`
+
+
+
+#### Returns
+
+Type: `Promise<boolean>`
+
+whether the radio button is checked.
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

From 28969462f78684efbbf2a071e8b1a412372399a1 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 19 Sep 2024 13:37:11 +0200
Subject: [PATCH 02/20] fix(1479): align checkbox ti web standards

---
 .../src/components/checkbox/checkbox.e2e.ts   | 22 +++++++++++
 .../components/checkbox/checkbox.stories.ts   |  6 +--
 .../src/components/checkbox/checkbox.tsx      | 38 ++++++++++---------
 .../src/components/checkbox/readme.md         | 12 +++++-
 .../components/chip/chip-item/chip-item.tsx   |  2 +-
 .../select/multi-select/multiselect.tsx       |  6 +--
 6 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.e2e.ts b/packages/components/src/components/checkbox/checkbox.e2e.ts
index 19a839ad8..aa38d0618 100644
--- a/packages/components/src/components/checkbox/checkbox.e2e.ts
+++ b/packages/components/src/components/checkbox/checkbox.e2e.ts
@@ -23,6 +23,28 @@ describe('ifx-checkbox', () => {
     expect(labelContent).toBe('Test content');
   });
 
+  it('should be checked when checked attribute is set', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-checkbox checked="true">Test content</ifx-checkbox>');
+
+    const checkbox = await page.find('ifx-checkbox');
+    const checkmark = await page.find('ifx-checkbox >>> .checkbox__wrapper')
+
+    expect(await checkbox.callMethod("isChecked")).toBe(true);
+    expect(checkmark).toHaveClass("checked");
+  });
+
+  it('should not be checked when checked attribute is not set', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<ifx-checkbox>Test content</ifx-checkbox>');
+
+    const checkbox = await page.find('ifx-checkbox');
+    const checkmark = await page.find('ifx-checkbox >>> .checkbox__wrapper')
+
+    expect(await checkbox.callMethod("isChecked")).toBe(false);
+    expect(checkmark).not.toHaveClass("checked");
+  });
+
   it('should emit ifxChange event when clicked', async () => {
     const page = await newE2EPage();
     await page.setContent('<ifx-checkbox></ifx-checkbox>');
diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts
index 3968bf3ee..08532cc49 100644
--- a/packages/components/src/components/checkbox/checkbox.stories.ts
+++ b/packages/components/src/components/checkbox/checkbox.stories.ts
@@ -6,7 +6,7 @@ export default {
   args: {
     error: false,
     disabled: false,
-    value: false,
+    checked: false,
     label: 'Text',
     size: 's',
     indeterminate: false,
@@ -36,11 +36,11 @@ export default {
   },
 };
 
-const DefaultTemplate = ({ error, disabled, value, indeterminate, size, label, name }) => {
+const DefaultTemplate = ({ error, disabled, checked, indeterminate, size, label, name }) => {
   const checkbox = document.createElement('ifx-checkbox');
   checkbox.setAttribute('error', error);
   checkbox.setAttribute('disabled', disabled);
-  checkbox.setAttribute('value', value);
+  checkbox.setAttribute('checked', checked);
   checkbox.setAttribute('size', size);
   checkbox.setAttribute('indeterminate', indeterminate);
   checkbox.setAttribute('name', name);
diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
index fcce78857..59b1109a0 100644
--- a/packages/components/src/components/checkbox/checkbox.tsx
+++ b/packages/components/src/components/checkbox/checkbox.tsx
@@ -13,10 +13,10 @@ export class Checkbox {
 
   @Element() el;
   @Prop() disabled: boolean = false;
-  @Prop() value: boolean = false;
+  @Prop() checked: boolean = false;
   @Prop() error: boolean = false;
   @Prop() size: string = 'm';
-  @State() internalValue: boolean;
+  @State() internalChecked: boolean;
   @Prop() indeterminate: boolean = false;
   @State() internalIndeterminate: boolean;
 
@@ -27,28 +27,32 @@ export class Checkbox {
   handleCheckbox() {
     if (!this.disabled) {
       if (this.inputElement.indeterminate) {
-        this.internalValue = true;
+        this.internalChecked = true;
         this.internalIndeterminate = false;
       } else {
-        this.internalValue = !this.internalValue;
+        this.internalChecked = !this.internalChecked;
       }
-      this.internals.setFormValue(this.internalValue ? 'on' : null);
+      this.internals.setFormValue(this.internalChecked ? 'on' : null);
       
-      this.ifxChange.emit(this.internalValue);
+      this.ifxChange.emit(this.internalChecked);
     }
   }
 
+  @Method()
+  async isChecked(): Promise<boolean> {
+    return this.internalChecked;
+  }
 
   @Method()
   async toggleCheckedState(newVal: boolean) {
-    this.internalValue = newVal;
+    this.internalChecked = newVal;
   }
 
-  @Watch('value')
+  @Watch('checked')
   valueChanged(newValue: boolean, oldValue: boolean) {
     if (newValue !== oldValue) {
-      this.internalValue = newValue;
-      this.inputElement.checked = this.internalValue; // update the checkbox's checked property
+      this.internalChecked = newValue;
+      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property
     }
   }
 
@@ -70,7 +74,7 @@ export class Checkbox {
   }
 
   componentWillLoad() {
-    this.internalValue = this.value;
+    this.internalChecked = this.checked;
     this.internalIndeterminate = this.indeterminate;
   }
 
@@ -89,12 +93,12 @@ export class Checkbox {
 
   getCheckedClassName() {
     if (this.error) {
-      if (this.internalValue) {
+      if (this.internalChecked) {
         return "checked error"
       } else {
         return "error"
       }
-    } else if (this.internalValue) {
+    } else if (this.internalChecked) {
       return "checked";
     } else return ""
   }
@@ -114,10 +118,10 @@ export class Checkbox {
           type="checkbox"
           hidden
           ref={(el) => (this.inputElement = el)}
-          checked={this.internalValue}
+          checked={this.internalChecked}
           onChange={this.handleCheckbox.bind(this)} // Listen for changes here
           id='checkbox'
-          value={`${this.internalValue}`}
+          value={`${this.internalChecked}`}
         />
 
         <div
@@ -125,7 +129,7 @@ export class Checkbox {
           onClick={this.handleCheckbox.bind(this)}
           onKeyDown={this.handleKeydown.bind(this)}
           role="checkbox"  // role attribute
-          aria-value={this.internalValue}
+          aria-value={this.internalChecked}
           aria-disabled={this.disabled}
           aria-labelledby="label"
           class={`checkbox__wrapper 
@@ -134,7 +138,7 @@ export class Checkbox {
         ${this.indeterminate ? 'indeterminate' : ""}
         ${this.disabled ? 'disabled' : ""}`}
         >
-          {this.internalValue && <ifx-icon icon="check-12"></ifx-icon>}
+          {this.internalChecked && <ifx-icon icon="check-12"></ifx-icon>}
         </div>
         {hasSlot &&
           <div id="label" class={`label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `} onClick={this.handleCheckbox.bind(this)}>
diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md
index 783e17699..deeb60fcb 100644
--- a/packages/components/src/components/checkbox/readme.md
+++ b/packages/components/src/components/checkbox/readme.md
@@ -9,11 +9,11 @@
 
 | Property        | Attribute       | Description | Type      | Default |
 | --------------- | --------------- | ----------- | --------- | ------- |
+| `checked`       | `checked`       |             | `boolean` | `false` |
 | `disabled`      | `disabled`      |             | `boolean` | `false` |
 | `error`         | `error`         |             | `boolean` | `false` |
 | `indeterminate` | `indeterminate` |             | `boolean` | `false` |
 | `size`          | `size`          |             | `string`  | `'m'`   |
-| `value`         | `value`         |             | `boolean` | `false` |
 
 
 ## Events
@@ -25,6 +25,16 @@
 
 ## Methods
 
+### `isChecked() => Promise<boolean>`
+
+
+
+#### Returns
+
+Type: `Promise<boolean>`
+
+
+
 ### `toggleCheckedState(newVal: boolean) => Promise<void>`
 
 
diff --git a/packages/components/src/components/chip/chip-item/chip-item.tsx b/packages/components/src/components/chip/chip-item/chip-item.tsx
index 052ab5200..4a294d708 100644
--- a/packages/components/src/components/chip/chip-item/chip-item.tsx
+++ b/packages/components/src/components/chip/chip-item/chip-item.tsx
@@ -96,7 +96,7 @@ export class ChipItem {
                 {/* Checkbox; renders only in 'multi' variant. */}
                 { 
                     this.chipState.variant === 'multi' &&
-                    <ifx-checkbox value={this.selected}
+                    <ifx-checkbox checked={this.selected}
                         tabIndex={-1} 
                         size='s'>
                     </ifx-checkbox>
diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx
index 729652af8..214d50e40 100644
--- a/packages/components/src/components/select/multi-select/multiselect.tsx
+++ b/packages/components/src/components/select/multi-select/multiselect.tsx
@@ -492,7 +492,7 @@ export class Multiselect {
           onClick={() => !disableCheckbox && this.handleOptionClick(option)}
           tabindex="0"
           role={`${option.children?.length > 0 ? "treeitem" : "option"}`}>
-          <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size="s" value={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>
+          <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size="s" checked={isIndeterminate ? false : isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>
           <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>
         </div>
         {option.children && option.children.map((child, childIndex) => this.renderSubOption(child, `${index}-${childIndex}`))}
@@ -548,7 +548,7 @@ export class Multiselect {
         onKeyDown={(e) => !disableCheckbox && this.handleOptionKeyDown(e, option)}
         onClick={() => !disableCheckbox && this.handleOptionClick(option)}
         tabindex="0">
-        <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size="s" value={isSelected} disabled={disableCheckbox}></ifx-checkbox>
+        <ifx-checkbox tabIndex={-1} ref={(el) => option.checkboxRef = el} id={uniqueId} size="s" checked={isSelected} disabled={disableCheckbox}></ifx-checkbox>
         <label htmlFor={uniqueId} onClick={(e) => e.stopPropagation()}>{option.label}</label>
       </div>
     );
@@ -577,7 +577,7 @@ export class Multiselect {
 
     return <div class="select-all-wrapper">
       <div class={`option ${this.getSizeClass()}`} tabindex='0' onKeyDown={(e) => handleSelectAllKeydown(e)} onClick={toggleSelectAll}>
-        <ifx-checkbox tabIndex={-1} id='selectAll' value={allSelected} indeterminate={indeterminate} size="s"></ifx-checkbox>
+        <ifx-checkbox tabIndex={-1} id='selectAll' checked={allSelected} indeterminate={indeterminate} size="s"></ifx-checkbox>
         <label htmlFor='selectAll'>Select all</label>
       </div>
       <ifx-dropdown-separator></ifx-dropdown-separator>

From c532f13b74611b0bc1645784ce27323f069cbc9c Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 19 Sep 2024 14:04:23 +0200
Subject: [PATCH 03/20] fix(1479): align switch to web standards

---
 .../src/components/switch/readme.md           | 15 ++++++++-
 .../src/components/switch/switch.e2e.ts       |  6 ++--
 .../src/components/switch/switch.stories.ts   |  4 +--
 .../src/components/switch/switch.tsx          | 31 +++++++++++--------
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/switch/readme.md b/packages/components/src/components/switch/readme.md
index cdcadc257..6f5a4b74f 100644
--- a/packages/components/src/components/switch/readme.md
+++ b/packages/components/src/components/switch/readme.md
@@ -9,9 +9,9 @@
 
 | Property   | Attribute  | Description | Type      | Default |
 | ---------- | ---------- | ----------- | --------- | ------- |
+| `checked`  | `checked`  |             | `boolean` | `false` |
 | `disabled` | `disabled` |             | `boolean` | `false` |
 | `name`     | `name`     |             | `string`  | `''`    |
-| `value`    | `value`    |             | `boolean` | `false` |
 
 
 ## Events
@@ -21,6 +21,19 @@
 | `ifxChange` |             | `CustomEvent<boolean>` |
 
 
+## Methods
+
+### `isChecked() => Promise<boolean>`
+
+
+
+#### Returns
+
+Type: `Promise<boolean>`
+
+
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/switch/switch.e2e.ts b/packages/components/src/components/switch/switch.e2e.ts
index 7504adb19..1a8176672 100644
--- a/packages/components/src/components/switch/switch.e2e.ts
+++ b/packages/components/src/components/switch/switch.e2e.ts
@@ -62,12 +62,12 @@ describe('ifx-switch', () => {
 
 
 
-  it('updates the visual state when value prop changes', async () => {
+  it('updates the visual state when checked prop changes', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-switch value="false"></ifx-switch>');
+    await page.setContent('<ifx-switch checked="false"></ifx-switch>');
 
     const component = await page.find('ifx-switch');
-    component.setProperty('value', true);
+    component.setProperty('checked', true);
     await page.waitForChanges();
 
     const container = await page.find('ifx-switch >>> .switch__checkbox-container');
diff --git a/packages/components/src/components/switch/switch.stories.ts b/packages/components/src/components/switch/switch.stories.ts
index 4d1c96856..34c12e54d 100644
--- a/packages/components/src/components/switch/switch.stories.ts
+++ b/packages/components/src/components/switch/switch.stories.ts
@@ -5,7 +5,7 @@ export default {
   tags: ['autodocs'],
 
   args: {
-    value: false,
+    checked: false,
     disabled: false,
     label: 'Switch',
     name: 'switch'
@@ -33,7 +33,7 @@ const DefaultTemplate = args => {
 
   // Set the attributes
   element.setAttribute('disabled', args.disabled);
-  element.setAttribute('value', args.value);
+  element.setAttribute('checked', args.checked);
   element.setAttribute('name', args.name);
 
   // Add the event listener
diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
index 8bff4ca61..79c8ec45c 100644
--- a/packages/components/src/components/switch/switch.tsx
+++ b/packages/components/src/components/switch/switch.tsx
@@ -1,4 +1,4 @@
-import { AttachInternals } from '@stencil/core';
+import { AttachInternals, Method } from '@stencil/core';
 import { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';
  
 
@@ -9,10 +9,10 @@ import { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '
   formAssociated: true
 })
 export class Switch {
-  @Prop() value: boolean = false;
+  @Prop() checked: boolean = false;
   @Prop() name: string = '';
   @Prop() disabled: boolean = false;
-  @State() internalValue: boolean = false;
+  @State() internalChecked: boolean = false;
 
   @AttachInternals() internals: ElementInternals;
 
@@ -20,8 +20,13 @@ export class Switch {
 
   @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;
 
+  @Method()
+  async isChecked(): Promise<boolean> {
+    return this.internalChecked;
+  }
+
   componentWillLoad() {
-    this.internalValue = this.value;
+    this.internalChecked = this.checked;
   }
   
 
@@ -40,18 +45,18 @@ export class Switch {
 
   }
     
-  @Watch('value')
+  @Watch('checked')
   valueChanged(newValue: boolean, oldValue: boolean) {
     if (newValue !== oldValue) {
-      this.internalValue = newValue;
+      this.internalChecked = newValue;
     }
   }
 
   toggleSwitch() {
     if (this.disabled) return;
-    this.internalValue = !this.internalValue;
-    this.internals.setFormValue(this.internalValue ? 'on' : null);
-    this.ifxChange.emit(this.internalValue);
+    this.internalChecked = !this.internalChecked;
+    this.internals.setFormValue(this.internalChecked ? 'on' : null);
+    this.ifxChange.emit(this.internalChecked);
   }
 
   handleKeyDown(event: KeyboardEvent) {
@@ -75,22 +80,22 @@ export class Switch {
       <div
         class="container"
         role="switch"
-        aria-checked={this.internalValue ? 'true' : 'false'}
+        aria-checked={this.internalChecked ? 'true' : 'false'}
         aria-label={this.name}
         onClick={() => this.toggleSwitch()}
         onKeyDown={(event) => this.handleKeyDown(event)}
         >
         {/* Checkbox */}
         <div 
-          class={`switch__checkbox-container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}
+          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}
           tabindex="0"
         >
           <div class="switch__checkbox-wrapper">
             <input type="checkbox" hidden
               name={this.name}
               disabled={this.disabled}
-              value={`${this.internalValue}`} />
-            <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />
+              value={`${this.internalChecked}`} />
+            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />
           </div>
         </div >
 

From 846b069105abe51514b02e854dbfeba6314eca36 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 19 Sep 2024 12:25:02 +0000
Subject: [PATCH 04/20] Update Stencil library version to
 26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0

---
 lerna.json                                     |  2 +-
 package-lock.json                              | 18 +++++++++---------
 packages/components-angular/package.json       |  4 ++--
 .../projects/component-library/package.json    |  4 ++--
 packages/components-react/package.json         |  4 ++--
 packages/components-vue/package.json           |  4 ++--
 packages/components/package.json               |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index d908cd166..2a9d361a2 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.1.0",
+  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index e3e3dd97f..39400c554 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34457,7 +34457,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "25.1.0",
+      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -34518,7 +34518,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "25.1.0",
+      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -34529,7 +34529,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^25.1.0",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -34549,7 +34549,7 @@
     },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "25.1.0",
+      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -34558,16 +34558,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.1.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "25.1.0",
+      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.1.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -34580,11 +34580,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "25.1.0",
+      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.1.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 3bc17384b..752ca9996 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.1.0",
+  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^25.1.0",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index ea563bcd2..ca362b079 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.1.0",
+  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.1.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index b8cfb962b..215d4a0fb 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.1.0",
+  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.1.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index bfc000552..bc4371747 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.1.0",
+  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.1.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index 8b6943f0d..6f2117017 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.1.0",
+  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From ebdb3612161bc20d29d3445abff1216882756e69 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 19 Sep 2024 15:28:05 +0200
Subject: [PATCH 05/20] fix(1479): add value property to checkbox and switch

---
 .../src/components/checkbox/checkbox.e2e.ts     | 17 ++++++++++++++++-
 .../src/components/checkbox/checkbox.stories.ts |  5 ++++-
 .../src/components/checkbox/checkbox.tsx        | 15 ++++++++++++---
 .../src/components/checkbox/readme.md           | 15 ++++++++-------
 .../components/src/components/switch/readme.md  | 11 ++++++-----
 .../src/components/switch/switch.e2e.ts         | 16 ++++++++++++++--
 .../components/src/components/switch/switch.tsx | 16 ++++++++++++++--
 7 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.e2e.ts b/packages/components/src/components/checkbox/checkbox.e2e.ts
index aa38d0618..d3dc39c3c 100644
--- a/packages/components/src/components/checkbox/checkbox.e2e.ts
+++ b/packages/components/src/components/checkbox/checkbox.e2e.ts
@@ -70,7 +70,7 @@ describe('ifx-checkbox', () => {
     expect(value).toBeUndefined();
   })
 
-  it('should be on when form is submitted', async () => {
+  it('should be on when form is submitted when no value is given', async () => {
     const page = await newE2EPage();
     await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
       <ifx-checkbox name="checkbox"></ifx-checkbox>
@@ -85,6 +85,21 @@ describe('ifx-checkbox', () => {
     expect(value).toBe('on')
   });
 
+  it('should set value when form is submitted when value is given', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
+      <ifx-checkbox name="checkbox" value="check"></ifx-checkbox>
+      <button id="submit" type="submit">Submit</button>
+    </form>`);
+    await addHandleSubmitScript(page);
+    const checkbox = await page.find('ifx-checkbox');
+
+    await checkbox.click();
+
+    const value = await submitAndGetValue(page);
+    expect(value).toBe('check')
+  });
+
   it('should not change value when disabled attribute is present', async () => {
     const page = await newE2EPage();
     await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts
index 08532cc49..f00472336 100644
--- a/packages/components/src/components/checkbox/checkbox.stories.ts
+++ b/packages/components/src/components/checkbox/checkbox.stories.ts
@@ -10,7 +10,7 @@ export default {
     label: 'Text',
     size: 's',
     indeterminate: false,
-    name: 'checkbox'
+    name: 'checkbox',
   },
 
   argTypes: {
@@ -32,6 +32,9 @@ export default {
     },
     name: {
       description: 'Name of the element, that is used as reference when a form is submitted.'
+    },
+    value: {
+      description: 'The value that gets submitted, when the checkbox is seleted'
     }
   },
 };
diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
index 59b1109a0..8e18cc477 100644
--- a/packages/components/src/components/checkbox/checkbox.tsx
+++ b/packages/components/src/components/checkbox/checkbox.tsx
@@ -16,8 +16,9 @@ export class Checkbox {
   @Prop() checked: boolean = false;
   @Prop() error: boolean = false;
   @Prop() size: string = 'm';
-  @State() internalChecked: boolean;
   @Prop() indeterminate: boolean = false;
+  @Prop() value: string;
+  @State() internalChecked: boolean;
   @State() internalIndeterminate: boolean;
 
   @AttachInternals() internals: ElementInternals;
@@ -32,8 +33,16 @@ export class Checkbox {
       } else {
         this.internalChecked = !this.internalChecked;
       }
-      this.internals.setFormValue(this.internalChecked ? 'on' : null);
       
+      if (this.internalChecked) {
+        if (this.value !== undefined) {
+          this.internals.setFormValue(this.value);
+        } else {
+          this.internals.setFormValue("on")
+        }
+      } else {
+        this.internals.setFormValue(null)
+      }
       this.ifxChange.emit(this.internalChecked);
     }
   }
@@ -121,7 +130,7 @@ export class Checkbox {
           checked={this.internalChecked}
           onChange={this.handleCheckbox.bind(this)} // Listen for changes here
           id='checkbox'
-          value={`${this.internalChecked}`}
+          value={`${this.value}`}
         />
 
         <div
diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md
index deeb60fcb..3ec516e23 100644
--- a/packages/components/src/components/checkbox/readme.md
+++ b/packages/components/src/components/checkbox/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property        | Attribute       | Description | Type      | Default |
-| --------------- | --------------- | ----------- | --------- | ------- |
-| `checked`       | `checked`       |             | `boolean` | `false` |
-| `disabled`      | `disabled`      |             | `boolean` | `false` |
-| `error`         | `error`         |             | `boolean` | `false` |
-| `indeterminate` | `indeterminate` |             | `boolean` | `false` |
-| `size`          | `size`          |             | `string`  | `'m'`   |
+| Property        | Attribute       | Description | Type      | Default     |
+| --------------- | --------------- | ----------- | --------- | ----------- |
+| `checked`       | `checked`       |             | `boolean` | `false`     |
+| `disabled`      | `disabled`      |             | `boolean` | `false`     |
+| `error`         | `error`         |             | `boolean` | `false`     |
+| `indeterminate` | `indeterminate` |             | `boolean` | `false`     |
+| `size`          | `size`          |             | `string`  | `'m'`       |
+| `value`         | `value`         |             | `string`  | `undefined` |
 
 
 ## Events
diff --git a/packages/components/src/components/switch/readme.md b/packages/components/src/components/switch/readme.md
index 6f5a4b74f..42a920ffc 100644
--- a/packages/components/src/components/switch/readme.md
+++ b/packages/components/src/components/switch/readme.md
@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type      | Default |
-| ---------- | ---------- | ----------- | --------- | ------- |
-| `checked`  | `checked`  |             | `boolean` | `false` |
-| `disabled` | `disabled` |             | `boolean` | `false` |
-| `name`     | `name`     |             | `string`  | `''`    |
+| Property   | Attribute  | Description | Type      | Default     |
+| ---------- | ---------- | ----------- | --------- | ----------- |
+| `checked`  | `checked`  |             | `boolean` | `false`     |
+| `disabled` | `disabled` |             | `boolean` | `false`     |
+| `name`     | `name`     |             | `string`  | `''`        |
+| `value`    | `value`    |             | `string`  | `undefined` |
 
 
 ## Events
diff --git a/packages/components/src/components/switch/switch.e2e.ts b/packages/components/src/components/switch/switch.e2e.ts
index 1a8176672..ccf384766 100644
--- a/packages/components/src/components/switch/switch.e2e.ts
+++ b/packages/components/src/components/switch/switch.e2e.ts
@@ -60,8 +60,6 @@ describe('ifx-switch', () => {
     expect(container).not.toHaveClass('checked');
   });
 
-
-
   it('updates the visual state when checked prop changes', async () => {
     const page = await newE2EPage();
     await page.setContent('<ifx-switch checked="false"></ifx-switch>');
@@ -101,6 +99,20 @@ describe('ifx-switch', () => {
     expect(value).toBe('on')
   });
 
+  it('should be value when form is submitted and value is set', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
+      <ifx-switch name="switch" value="val"></ifx-switch>
+      <button id="submit" type="submit">Submit</button>
+    </form>`);
+    await addHandleSubmitScript(page);
+    const switchEl = await page.find('ifx-switch');
+
+    await switchEl.click();
+
+    const value = await submitAndGetValue(page);
+    expect(value).toBe('val')
+  });
   
   it('should not change value when disabled attribute is present', async () => {
     const page = await newE2EPage();
diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
index 79c8ec45c..a9cf3ea42 100644
--- a/packages/components/src/components/switch/switch.tsx
+++ b/packages/components/src/components/switch/switch.tsx
@@ -12,6 +12,7 @@ export class Switch {
   @Prop() checked: boolean = false;
   @Prop() name: string = '';
   @Prop() disabled: boolean = false;
+  @Prop() value: string;
   @State() internalChecked: boolean = false;
 
   @AttachInternals() internals: ElementInternals;
@@ -55,7 +56,17 @@ export class Switch {
   toggleSwitch() {
     if (this.disabled) return;
     this.internalChecked = !this.internalChecked;
-    this.internals.setFormValue(this.internalChecked ? 'on' : null);
+
+    if (this.internalChecked) {
+      if (this.value !== undefined) {
+        this.internals.setFormValue(this.value);
+      } else {
+        this.internals.setFormValue("on")
+      }
+    } else {
+      this.internals.setFormValue(null)
+    }
+
     this.ifxChange.emit(this.internalChecked);
   }
 
@@ -94,7 +105,8 @@ export class Switch {
             <input type="checkbox" hidden
               name={this.name}
               disabled={this.disabled}
-              value={`${this.internalChecked}`} />
+              checked={this.internalChecked}
+              value={`${this.value}`} />
             <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />
           </div>
         </div >

From 55f9027bd3665832b48f8294db76f91a2302544a Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 19 Sep 2024 13:32:46 +0000
Subject: [PATCH 06/20] Update Stencil library version to
 26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0

---
 lerna.json                                     |  2 +-
 package-lock.json                              | 18 +++++++++---------
 packages/components-angular/package.json       |  4 ++--
 .../projects/component-library/package.json    |  4 ++--
 packages/components-react/package.json         |  4 ++--
 packages/components-vue/package.json           |  4 ++--
 packages/components/package.json               |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 2a9d361a2..346ba8e95 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+  "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index 39400c554..f187529d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34457,7 +34457,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+      "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -34518,7 +34518,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+      "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -34529,7 +34529,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -34549,7 +34549,7 @@
     },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+      "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -34558,16 +34558,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+      "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -34580,11 +34580,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+      "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 752ca9996..075c254f9 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+  "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index ca362b079..53b7320e2 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+  "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 215d4a0fb..448b5624d 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+  "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index bc4371747..cb40f0615 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+  "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index 6f2117017..d513407cb 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "26.0.0--canary.1485.833ab61b477acf7252dbed7b76a9deb06e705f2f.0",
+  "version": "26.0.0--canary.1485.ffadea0bdd8f824ef0978634f92643181023cd37.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From 1f158ca91ab504915b6b2be5c403c69f61095455 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Mon, 30 Sep 2024 13:30:42 +0000
Subject: [PATCH 07/20] Update Stencil library version to
 26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0

---
 lerna.json                                     |  2 +-
 package-lock.json                              | 18 +++++++++---------
 packages/components-angular/package.json       |  4 ++--
 .../projects/component-library/package.json    |  4 ++--
 packages/components-react/package.json         |  4 ++--
 packages/components-vue/package.json           |  4 ++--
 packages/components/package.json               |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 34c1a3298..5ad195599 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.2.2",
+  "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index b5bbb7d95..791ec5840 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34457,7 +34457,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "25.2.2",
+      "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -34518,7 +34518,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "25.2.2",
+      "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -34529,7 +34529,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^25.2.2",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -34549,7 +34549,7 @@
     },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "25.2.2",
+      "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -34558,16 +34558,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.2.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "25.2.2",
+      "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.2.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -34580,11 +34580,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "25.2.2",
+      "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.2.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index bfe12bedc..73a05098c 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.2.2",
+  "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^25.2.2",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index d28bd32f2..c02b32d7e 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.2.2",
+  "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.2.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 537724dc1..581a88fc0 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.2.2",
+  "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.2.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index 0ec9b217c..6c9d6f607 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.2.2",
+  "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.2.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index 6d81ba080..8fec87286 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.2.2",
+  "version": "26.0.0--canary.1485.f296bbab81cf552d0251e1d4e859d8ef3c8aceaf.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From 20a3251689bfb6807b930f0aea3ac249eee7c051 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Wed, 2 Oct 2024 12:49:49 +0000
Subject: [PATCH 08/20] Update Stencil library version to
 26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0

---
 lerna.json                                     |  2 +-
 package-lock.json                              | 18 +++++++++---------
 packages/components-angular/package.json       |  4 ++--
 .../projects/component-library/package.json    |  4 ++--
 packages/components-react/package.json         |  4 ++--
 packages/components-vue/package.json           |  4 ++--
 packages/components/package.json               |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index a7fbb4be9..cf5a72c5a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.6.2",
+  "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index b36af9c04..d2bd7338f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34580,7 +34580,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "25.6.2",
+      "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -34641,7 +34641,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "25.6.2",
+      "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -34652,7 +34652,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^25.6.2",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -34672,7 +34672,7 @@
     },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "25.6.2",
+      "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -34681,16 +34681,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.6.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "25.6.2",
+      "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.6.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -34703,11 +34703,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "25.6.2",
+      "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.6.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index b15b5d428..0601c05a7 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.6.2",
+  "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^25.6.2",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index 0fe62c3a8..981c22407 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.6.2",
+  "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.6.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 3368f3afa..2fcf83b3c 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.6.2",
+  "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.6.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index 115b13bcb..4b93d391a 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.6.2",
+  "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.6.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index 47d693ebf..7be5bc121 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.6.2",
+  "version": "26.0.0--canary.1485.af4c485da7b7dbbf1b1abe9496bd767a83758ec4.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From c3267e63ef1d9bab2a89366f7b5d0793ca8ed78d Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 08:22:49 +0200
Subject: [PATCH 09/20] fix((1479): stop emitting ifxChange when disabled

---
 .../components/src/components/radio-button/radio-button.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index 63bb533a2..ffbf08222 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -44,6 +44,8 @@ export class RadioButton {
    * and emit ifxChange event.
    */
   handleRadioButtonClick() {
+    if (this.disabled) return;
+    
     this.inputElement.click();
     this.internalChecked = this.inputElement.checked;
     this.ifxChange.emit(this.internalChecked);

From 248227ac65d66a210a5b56b6ea1b6476faa35bb2 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 08:46:05 +0200
Subject: [PATCH 10/20] fix(1479): remove name of single select searchbar

---
 .../components/src/components/select/single-select/select.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/select/single-select/select.tsx b/packages/components/src/components/select/single-select/select.tsx
index 6aaa9f173..914a76577 100644
--- a/packages/components/src/components/select/single-select/select.tsx
+++ b/packages/components/src/components/select/single-select/select.tsx
@@ -435,7 +435,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
               },
               input: ({ classNames }) => {
                 return template(`
-              <input type="search" name="search_terms" 
+              <input type="search"
               class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
               autocomplete="off"
               autocapitalize="off"

From 00e50b18f84446e49445d6433bfa758e797e1e28 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 09:04:31 +0200
Subject: [PATCH 11/20] fix(1479): removedisabled from checkbox and switch
 story

---
 .../components/src/components/checkbox/checkbox.stories.ts    | 4 +---
 packages/components/src/components/switch/switch.stories.ts   | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts
index f00472336..4a61d30b0 100644
--- a/packages/components/src/components/checkbox/checkbox.stories.ts
+++ b/packages/components/src/components/checkbox/checkbox.stories.ts
@@ -5,7 +5,6 @@ export default {
   tags: ['autodocs'],
   args: {
     error: false,
-    disabled: false,
     checked: false,
     label: 'Text',
     size: 's',
@@ -39,10 +38,9 @@ export default {
   },
 };
 
-const DefaultTemplate = ({ error, disabled, checked, indeterminate, size, label, name }) => {
+const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) => {
   const checkbox = document.createElement('ifx-checkbox');
   checkbox.setAttribute('error', error);
-  checkbox.setAttribute('disabled', disabled);
   checkbox.setAttribute('checked', checked);
   checkbox.setAttribute('size', size);
   checkbox.setAttribute('indeterminate', indeterminate);
diff --git a/packages/components/src/components/switch/switch.stories.ts b/packages/components/src/components/switch/switch.stories.ts
index 34c12e54d..bd57f7f7a 100644
--- a/packages/components/src/components/switch/switch.stories.ts
+++ b/packages/components/src/components/switch/switch.stories.ts
@@ -6,7 +6,6 @@ export default {
 
   args: {
     checked: false,
-    disabled: false,
     label: 'Switch',
     name: 'switch'
   },
@@ -32,7 +31,6 @@ const DefaultTemplate = args => {
   const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;
 
   // Set the attributes
-  element.setAttribute('disabled', args.disabled);
   element.setAttribute('checked', args.checked);
   element.setAttribute('name', args.name);
 

From f115d90e4dc4f8d95689044625d881cb2419bd89 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 09:11:47 +0200
Subject: [PATCH 12/20] fix(1479): add value prop to storybook

Added value prop to checkbox, radio-button and switch
---
 .../components/src/components/checkbox/checkbox.stories.ts | 1 +
 .../src/components/radio-button/radio-button.stories.ts    | 7 ++++++-
 .../components/src/components/switch/switch.stories.ts     | 7 ++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts
index 4a61d30b0..37f264dbe 100644
--- a/packages/components/src/components/checkbox/checkbox.stories.ts
+++ b/packages/components/src/components/checkbox/checkbox.stories.ts
@@ -10,6 +10,7 @@ export default {
     size: 's',
     indeterminate: false,
     name: 'checkbox',
+    value: 'checkbox',
   },
 
   argTypes: {
diff --git a/packages/components/src/components/radio-button/radio-button.stories.ts b/packages/components/src/components/radio-button/radio-button.stories.ts
index 3877eddf3..e8780fe3d 100644
--- a/packages/components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/components/src/components/radio-button/radio-button.stories.ts
@@ -10,7 +10,8 @@ export default {
     checked: false,
     size: 's',
     label: 'Text',
-    name: 'radio-button'
+    name: 'radio-button',
+    value: 'radio',
   },
   argTypes: {
     ifxChange: {
@@ -32,6 +33,9 @@ export default {
     },
     name: {
       description: 'Name of the element, that is used as reference when a form is submitted.'
+    },
+    value: {
+      description: 'The value that gets submitted, when the radio button is checked'
     }
   },
 };
@@ -46,6 +50,7 @@ const DefaultTemplate = args => {
   element.setAttribute('checked', args.checked);
   element.setAttribute('size', args.size);
   element.setAttribute('name', args.name);
+  element.setAttribute('value', args.value);
 
   // Add the label as a text node
   element.appendChild(document.createTextNode(args.label));
diff --git a/packages/components/src/components/switch/switch.stories.ts b/packages/components/src/components/switch/switch.stories.ts
index bd57f7f7a..bef4ce3fd 100644
--- a/packages/components/src/components/switch/switch.stories.ts
+++ b/packages/components/src/components/switch/switch.stories.ts
@@ -7,12 +7,16 @@ export default {
   args: {
     checked: false,
     label: 'Switch',
-    name: 'switch'
+    name: 'switch',
+    value: 'switch',
   },
   argTypes: {
     name: {
       description: 'Name of the element, that is used as reference when a form is submitted.'
     },
+    value: {
+      description: 'The value that gets submitted, when the radio button is checked'
+    },
     ifxChange: {
       description: 'Custom event emitted on change',
       table: {
@@ -33,6 +37,7 @@ const DefaultTemplate = args => {
   // Set the attributes
   element.setAttribute('checked', args.checked);
   element.setAttribute('name', args.name);
+  element.setAttribute('value', args.value);
 
   // Add the event listener
   // element.addEventListener('ifxChange', action('ifxChange'));

From a46b813d3095e8f67ec1319221ca1a87659e947a Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 10:31:13 +0200
Subject: [PATCH 13/20] fix(1479): add form association to multiselect

---
 .../select/multi-select/multiselect.stories.ts        |  6 ------
 .../components/select/multi-select/multiselect.tsx    | 11 +++++++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/select/multi-select/multiselect.stories.ts b/packages/components/src/components/select/multi-select/multiselect.stories.ts
index ebc2bc20c..11027a4a6 100644
--- a/packages/components/src/components/select/multi-select/multiselect.stories.ts
+++ b/packages/components/src/components/select/multi-select/multiselect.stories.ts
@@ -65,7 +65,6 @@ export default {
     error: false,
     errorMessage: 'Some error',
     label: '',
-    disabled: false,
     placeholder: 'Placeholder',
   },
   argTypes: {
@@ -88,10 +87,6 @@ export default {
       control: { type: 'number' },
       description: 'Number of maximum selectable items',
     },
-    disabled: {
-      options: [true, false],
-      control: { type: 'radio' },
-    },
     showSearch: {
       options: [true, false],
       control: { type: 'radio' },
@@ -141,7 +136,6 @@ const Template = args => {
   error-message='${args.errorMessage}'
   label='${args.label}'
   placeholder='${args.placeholder}'
-  disabled='${args.disabled}'
   show-search='${args.showSearch}'
   show-select-all='${args.showSelectAll}'>
 </ifx-multiselect>`;
diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx
index 214d50e40..a11a5ae9a 100644
--- a/packages/components/src/components/select/multi-select/multiselect.tsx
+++ b/packages/components/src/components/select/multi-select/multiselect.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';
+import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals } from '@stencil/core';
 import { Option } from './interfaces';
 
 // Debounce function
@@ -17,7 +17,8 @@ function debounce(func, wait) {
 @Component({
   tag: 'ifx-multiselect',
   styleUrl: 'multiselect.scss',
-  shadow: true
+  shadow: true,
+  formAssociated: true
 })
 
 
@@ -56,6 +57,8 @@ export class Multiselect {
   @Element() el: HTMLElement;
   dropdownElement!: HTMLElement;
 
+  @AttachInternals() internals: ElementInternals;
+
 
   async loadInitialOptions() {
     this.isLoading = true;
@@ -215,6 +218,10 @@ export class Multiselect {
     this.filteredOptions = [...this.loadedOptions];
   }
 
+  @Watch('persistentSelectedOptions')
+  onSelectionChange(newValue: Option[], _: Option[]) {
+    this.internals.setFormValue(JSON.stringify(newValue));
+  }
 
   handleOptionClick(option: Option) {
     this.internalError = false;

From 64b1b40f19c407663c2f0221c9a6d17916324371 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 10 Oct 2024 08:34:25 +0000
Subject: [PATCH 14/20] Update Stencil library version to
 26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0

---
 lerna.json                                     |  2 +-
 package-lock.json                              | 18 +++++++++---------
 packages/components-angular/package.json       |  4 ++--
 .../projects/component-library/package.json    |  4 ++--
 packages/components-react/package.json         |  4 ++--
 packages/components-vue/package.json           |  4 ++--
 packages/components/package.json               |  2 +-
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 6829161e5..4ee9baecc 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.7.2",
+  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index 193478f2a..ae4e0eaf3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34580,7 +34580,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "25.7.2",
+      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -34641,7 +34641,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "25.7.2",
+      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -34652,7 +34652,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^25.7.2",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -34672,7 +34672,7 @@
     },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "25.7.2",
+      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -34681,16 +34681,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.7.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "25.7.2",
+      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.7.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -34703,11 +34703,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "25.7.2",
+      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.7.2"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 6fc63fb20..627774156 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.7.2",
+  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^25.7.2",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index b2330243d..1d342b27c 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.7.2",
+  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.7.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 67118c633..a0fafab53 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.7.2",
+  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.7.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index e36776066..e5d6c15f1 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.7.2",
+  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.7.2"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index 0b8957f00..e1e0c6e34 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.7.2",
+  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From 888b4485a70fa6c1e4c3d87b5ca872a64f50f726 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 13:42:16 +0200
Subject: [PATCH 15/20] fix(1479): adapt form value of multiselect to web
 standards

---
 .../src/components/select/multi-select/multiselect.tsx       | 5 ++++-
 .../components/src/components/select/multi-select/readme.md  | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx
index a11a5ae9a..48e6bb7d2 100644
--- a/packages/components/src/components/select/multi-select/multiselect.tsx
+++ b/packages/components/src/components/select/multi-select/multiselect.tsx
@@ -25,6 +25,7 @@ function debounce(func, wait) {
 
 export class Multiselect {
 
+  @Prop() name: string;
   @Prop() options: any[] | string;
   @Prop() batchSize: number = 50;
   @Prop() size: string = 'medium (40px)';
@@ -220,7 +221,9 @@ export class Multiselect {
 
   @Watch('persistentSelectedOptions')
   onSelectionChange(newValue: Option[], _: Option[]) {
-    this.internals.setFormValue(JSON.stringify(newValue));
+    const formData = new FormData();
+    newValue.forEach(option => formData.append(this.name, option.value));
+    this.internals.setFormValue(formData);
   }
 
   handleOptionClick(option: Option) {
diff --git a/packages/components/src/components/select/multi-select/readme.md b/packages/components/src/components/select/multi-select/readme.md
index aa405d6be..1936f07f7 100644
--- a/packages/components/src/components/select/multi-select/readme.md
+++ b/packages/components/src/components/select/multi-select/readme.md
@@ -15,6 +15,7 @@
 | `errorMessage`  | `error-message`   |             | `string`          | `"Error"`         |
 | `label`         | `label`           |             | `string`          | `""`              |
 | `maxItemCount`  | `max-item-count`  |             | `number`          | `undefined`       |
+| `name`          | `name`            |             | `string`          | `undefined`       |
 | `options`       | `options`         |             | `any[] \| string` | `undefined`       |
 | `placeholder`   | `placeholder`     |             | `string`          | `""`              |
 | `showSearch`    | `show-search`     |             | `boolean`         | `true`            |

From 5a9612ec3cc8b0458bc2f69c6bf760775e9f16aa Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 10 Oct 2024 13:44:16 +0200
Subject: [PATCH 16/20] fix(1479): radio-button emitting click event when
 disabled

---
 .../src/components/radio-button/radio-button.tsx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/radio-button/radio-button.tsx b/packages/components/src/components/radio-button/radio-button.tsx
index ffbf08222..862decb7f 100644
--- a/packages/components/src/components/radio-button/radio-button.tsx
+++ b/packages/components/src/components/radio-button/radio-button.tsx
@@ -43,9 +43,12 @@ export class RadioButton {
    * Click the hidden input element to let it handle the state
    * and emit ifxChange event.
    */
-  handleRadioButtonClick() {
-    if (this.disabled) return;
-    
+  handleRadioButtonClick(event: PointerEvent) {
+    if (this.disabled) {
+      event.stopPropagation();
+      return;
+    }
+
     this.inputElement.click();
     this.internalChecked = this.inputElement.checked;
     this.ifxChange.emit(this.internalChecked);

From 3b629b29647a9629fcaad465669ef62451b0ef1e Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 10 Oct 2024 11:51:42 +0000
Subject: [PATCH 17/20] Update Stencil library version to
 26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0

---
 lerna.json                                    |  2 +-
 package-lock.json                             | 46 +++++++++++++++----
 packages/components-angular/package.json      |  4 +-
 .../projects/component-library/package.json   |  4 +-
 packages/components-react/package.json        |  4 +-
 packages/components-vue/package.json          |  4 +-
 packages/components/package.json              |  2 +-
 7 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/lerna.json b/lerna.json
index 4ee9baecc..282ffb659 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index ae4e0eaf3..5a9ac4075 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34580,7 +34580,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -34641,7 +34641,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -34652,7 +34652,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -34670,9 +34670,37 @@
         "ng-packagr": "^18.2.0"
       }
     },
+    "packages/components-angular/node_modules/@infineon/infineon-design-system-stencil": {
+      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+      "resolved": "https://registry.npmjs.org/@infineon/infineon-design-system-stencil/-/infineon-design-system-stencil-26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0.tgz",
+      "integrity": "sha512-xcGG/iyLJUkoflAPEVop+0CfqWnQwpv4dHf8za0jrSmowY4Z0yVX6IL9LRaul1yjNLc033pLT5vBi4BKzSKGhg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@infineon/design-system-tokens": "3.3.3",
+        "@infineon/infineon-icons": "^2.1.2",
+        "@popperjs/core": "^2.11.8",
+        "@stencil/angular-output-target": "^0.9.0",
+        "@stencil/core": "^4.21.0",
+        "@stencil/vue-output-target": "^0.8.9",
+        "@storybook/cli": "^8.3.0",
+        "@storybook/test": "^8.3.0",
+        "babel-prettier-parser": "^0.10.8",
+        "classnames": "^2.3.2",
+        "i": "^0.3.7",
+        "npm": "^10.2.1",
+        "npm-run-all": "^4.1.5",
+        "prettier-standalone": "^1.3.1-0"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.4.5",
+        "ag-grid-community": "^30.0.6",
+        "choices.js": "^10.2.0"
+      }
+    },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -34681,16 +34709,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -34703,11 +34731,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 627774156..ea4bda871 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index 1d342b27c..ff73ee468 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index a0fafab53..65b5f3986 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index e5d6c15f1..e21956864 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index e1e0c6e34..5b7a29086 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
+  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From bafbbb9d47d396a206993d2a5a8a63088deaf800 Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 17 Oct 2024 09:11:31 +0000
Subject: [PATCH 18/20] Update Stencil library version to
 26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0

---
 .../react-vite-js/package.json                |  2 +-
 .../vue-javascript/package.json               |  2 +-
 lerna.json                                    |  2 +-
 package-lock.json                             | 46 ++++---------------
 packages/components-angular/package.json      |  4 +-
 .../projects/component-library/package.json   |  4 +-
 packages/components-react/package.json        |  4 +-
 packages/components-vue/package.json          |  4 +-
 packages/components/package.json              |  2 +-
 9 files changed, 21 insertions(+), 49 deletions(-)

diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
index 46498d99b..ebef3fe96 100644
--- a/examples/wrapper-components/react-vite-js/package.json
+++ b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
+    "@infineon/infineon-design-system-react": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
index ac50d1219..60d754d1c 100644
--- a/examples/wrapper-components/vue-javascript/package.json
+++ b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "25.10.0--canary.1533.c0d964bf3ea3f65d8ace03aba6f8f7c7d5574689.0",
+    "@infineon/infineon-design-system-vue": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "vite": "^5.0.12",
diff --git a/lerna.json b/lerna.json
index 282ffb659..aa713a81a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+  "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index 49c9540cd..14300519a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37095,7 +37095,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+      "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -37157,7 +37157,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+      "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -37168,7 +37168,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -37186,37 +37186,9 @@
         "ng-packagr": "^18.2.0"
       }
     },
-    "packages/components-angular/node_modules/@infineon/infineon-design-system-stencil": {
-      "version": "26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0",
-      "resolved": "https://registry.npmjs.org/@infineon/infineon-design-system-stencil/-/infineon-design-system-stencil-26.0.0--canary.1485.f2fc704e0f8c7da8c16c62d36613cf512c31633b.0.tgz",
-      "integrity": "sha512-xcGG/iyLJUkoflAPEVop+0CfqWnQwpv4dHf8za0jrSmowY4Z0yVX6IL9LRaul1yjNLc033pLT5vBi4BKzSKGhg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-icons": "^2.1.2",
-        "@popperjs/core": "^2.11.8",
-        "@stencil/angular-output-target": "^0.9.0",
-        "@stencil/core": "^4.21.0",
-        "@stencil/vue-output-target": "^0.8.9",
-        "@storybook/cli": "^8.3.0",
-        "@storybook/test": "^8.3.0",
-        "babel-prettier-parser": "^0.10.8",
-        "classnames": "^2.3.2",
-        "i": "^0.3.7",
-        "npm": "^10.2.1",
-        "npm-run-all": "^4.1.5",
-        "prettier-standalone": "^1.3.1-0"
-      },
-      "peerDependencies": {
-        "@floating-ui/dom": "^1.4.5",
-        "ag-grid-community": "^30.0.6",
-        "choices.js": "^10.2.0"
-      }
-    },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+      "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -37225,16 +37197,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+      "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
+        "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0"
       },
       "devDependencies": {
         "@types/node": "^20.1.4",
@@ -37247,11 +37219,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+      "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
+        "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 38cfda8e7..00914fd50 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+  "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index ff73ee468..4bb523845 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+  "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 65b5f3986..fd3212185 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+  "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
+    "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index e21956864..32b28d227 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+  "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0"
+    "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index c58ba784e..0263797a7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "26.0.0--canary.1485.18a56b6dfc2849a533e97b8fba5387491d525bce.0",
+  "version": "26.0.0--canary.1485.2bf616acdcc9d0d562598edde850bf390cf42094.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

From 1101ab928b6fc0941b14ec3144b3b5b9268a2e21 Mon Sep 17 00:00:00 2001
From: Pfaff Fabian <fabian.pfaff@infineon.com>
Date: Thu, 14 Nov 2024 08:49:15 +0100
Subject: [PATCH 19/20] chore: npm install

---
 package-lock.json | 80 ++++++++++++++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca148e49a..e7e88a18b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4871,7 +4871,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.6.tgz",
       "integrity": "sha512-QIss8MPh6qUoFJmuaF4dSHts3qCsA36S3HcOLiNPShxhgYPr4XJRnCBKPipk85sR9xr6TQrOcDMfexwbNdJHYA==",
-      "dev": true,
       "peerDependencies": {
         "@types/react": "17 || 18"
       }
@@ -8037,7 +8036,6 @@
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.23.0.tgz",
       "integrity": "sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==",
-      "dev": true,
       "dependencies": {
         "fast-glob": "^3.3.2",
         "minimatch": "^9.0.3",
@@ -8049,7 +8047,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -8058,7 +8055,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -8073,7 +8069,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
       "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
       "bin": {
         "mkdirp": "dist/cjs/src/bin.js"
       },
@@ -8469,8 +8464,7 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.17",
@@ -10822,8 +10816,7 @@
     "node_modules/code-block-writer": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
-      "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
-      "dev": true
+      "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg=="
     },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
@@ -11512,8 +11505,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/custom-event": {
       "version": "1.0.1",
@@ -11989,7 +11981,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
       "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
       "dependencies": {
         "domelementtype": "^2.3.0",
         "domhandler": "^5.0.2",
@@ -12003,7 +11994,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
       "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12015,7 +12005,6 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
       "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
       "dependencies": {
         "domelementtype": "^2.3.0"
       },
@@ -12030,7 +12019,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
       "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dev": true,
       "dependencies": {
         "dom-serializer": "^2.0.0",
         "domelementtype": "^2.3.0",
@@ -12278,7 +12266,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -14210,7 +14197,6 @@
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.10.tgz",
       "integrity": "sha512-GwArYL3V3V8yU/mLKoFF7HlLBv80BZ2Ey1BzfVNRpAci0cEKhFHI/Qh8o8oyt3qlAMLlK250wsxLdYX4viedvg==",
-      "dev": true,
       "dependencies": {
         "domhandler": "5.0.3",
         "htmlparser2": "9.1.0"
@@ -14220,7 +14206,6 @@
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
       "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
-      "dev": true,
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
         {
@@ -14311,7 +14296,6 @@
       "version": "5.1.18",
       "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.18.tgz",
       "integrity": "sha512-65BwC0zzrdeW96jB2FRr5f1ovBhRMpLPJNvwkY5kA8Ay5xdL9t/RH2/uUTM7p+cl5iM88i6dDk4LXtfMnRmaJQ==",
-      "dev": true,
       "dependencies": {
         "domhandler": "5.0.3",
         "html-dom-parser": "5.0.10",
@@ -14839,8 +14823,7 @@
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
-      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
-      "dev": true
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
     },
     "node_modules/inquirer": {
       "version": "8.2.6",
@@ -18878,7 +18861,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -22024,6 +22006,8 @@
     },
     "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -22422,6 +22406,8 @@
     },
     "node_modules/npm/node_modules/@sigstore/sign/node_modules/make-fetch-happen": {
       "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-13.0.1.tgz",
+      "integrity": "sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -22884,6 +22870,8 @@
     },
     "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -22927,6 +22915,8 @@
     },
     "node_modules/npm/node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "inBundle": true,
       "license": "MIT"
     },
@@ -23553,6 +23543,8 @@
     },
     "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23577,6 +23569,8 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23601,6 +23595,8 @@
     },
     "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23626,6 +23622,8 @@
     },
     "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23772,6 +23770,8 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/make-fetch-happen": {
       "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-13.0.1.tgz",
+      "integrity": "sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23812,6 +23812,8 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/nopt": {
       "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23875,6 +23877,8 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/which": {
       "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -23903,6 +23907,8 @@
     },
     "node_modules/npm/node_modules/nopt/node_modules/abbrev": {
       "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -24409,6 +24415,8 @@
     },
     "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -24544,6 +24552,8 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
       "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -24555,6 +24565,8 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
       "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -24566,6 +24578,8 @@
     },
     "node_modules/npm/node_modules/tar/node_modules/minipass": {
       "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -24661,6 +24675,8 @@
     },
     "node_modules/npm/node_modules/tuf-js/node_modules/make-fetch-happen": {
       "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-13.0.1.tgz",
+      "integrity": "sha512-cKTUFc/rbKUd/9meOvgrpJ2WrNzymt6jfRDdwg5UCnVzv9dTpEj9JS5m3wtziXVCjluIXyL8pcaukYqezIzZQA==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -24790,6 +24806,8 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
       "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -24828,6 +24846,8 @@
     },
     "node_modules/npm/node_modules/which/node_modules/isexe": {
       "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
       "inBundle": true,
       "license": "ISC",
       "engines": {
@@ -24873,6 +24893,8 @@
     },
     "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
       "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -24905,6 +24927,8 @@
     },
     "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
       "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
@@ -26340,8 +26364,7 @@
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-      "dev": true
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
     },
     "node_modules/path-case": {
       "version": "3.0.4",
@@ -27313,7 +27336,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -27325,7 +27347,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -27342,8 +27363,7 @@
     "node_modules/react-property": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
-      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
-      "dev": true
+      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug=="
     },
     "node_modules/read": {
       "version": "2.1.0",
@@ -28592,7 +28612,6 @@
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -30049,7 +30068,6 @@
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.16.tgz",
       "integrity": "sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==",
-      "dev": true,
       "dependencies": {
         "style-to-object": "1.0.8"
       }
@@ -30058,7 +30076,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
       "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
-      "dev": true,
       "dependencies": {
         "inline-style-parser": "0.2.4"
       }
@@ -30637,7 +30654,6 @@
       "version": "22.0.0",
       "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-22.0.0.tgz",
       "integrity": "sha512-M9MqFGZREyeb5fTl6gNHKZLqBQA0TjA1lea+CR48R8EBTDuWrNqW6ccC5QvjNR4s6wDumD3LTCjOFSp9iwlzaw==",
-      "dev": true,
       "dependencies": {
         "@ts-morph/common": "~0.23.0",
         "code-block-writer": "^13.0.1"

From 145c0a72a4ff10ebd6c3ac6b67fd6c162750622c Mon Sep 17 00:00:00 2001
From: github-actions <github-actions@github.com>
Date: Thu, 14 Nov 2024 08:15:44 +0000
Subject: [PATCH 20/20] Update Stencil library version to
 26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0

---
 .../react-vite-js/package.json                 |  2 +-
 .../vue-javascript/package.json                |  2 +-
 lerna.json                                     |  2 +-
 package-lock.json                              | 18 +++++++++---------
 packages/components-angular/package.json       |  4 ++--
 .../projects/component-library/package.json    |  4 ++--
 packages/components-react/package.json         |  4 ++--
 packages/components-vue/package.json           |  4 ++--
 packages/components/package.json               |  2 +-
 9 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
index e5584345b..9e8558846 100644
--- a/examples/wrapper-components/react-vite-js/package.json
+++ b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+    "@infineon/infineon-design-system-react": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
index 5d2eac722..4612ca42a 100644
--- a/examples/wrapper-components/vue-javascript/package.json
+++ b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+    "@infineon/infineon-design-system-vue": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "vite": "^5.0.12",
diff --git a/lerna.json b/lerna.json
index f3af97af4..bb62da3d5 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+  "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
index e7e88a18b..c30dde605 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33108,7 +33108,7 @@
     },
     "packages/components": {
       "name": "@infineon/infineon-design-system-stencil",
-      "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+      "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
@@ -33170,7 +33170,7 @@
       }
     },
     "packages/components-angular": {
-      "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+      "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^18.0.0",
@@ -33181,7 +33181,7 @@
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
-        "@infineon/infineon-design-system-angular": "^25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+        "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "typescript": "~5.4.4",
@@ -33201,7 +33201,7 @@
     },
     "packages/components-angular/projects/component-library": {
       "name": "@infineon/infineon-design-system-angular",
-      "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+      "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -33210,16 +33210,16 @@
         "@angular/common": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0"
+        "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0"
       }
     },
     "packages/components-react": {
       "name": "@infineon/infineon-design-system-react",
-      "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+      "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "^25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+        "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
         "@stencil/react-output-target": "^0.7.1"
       },
       "devDependencies": {
@@ -33233,11 +33233,11 @@
     },
     "packages/components-vue": {
       "name": "@infineon/infineon-design-system-vue",
-      "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+      "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
       "license": "MIT",
       "dependencies": {
         "@infineon/design-system-tokens": "3.3.3",
-        "@infineon/infineon-design-system-stencil": "^25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0"
+        "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0"
       },
       "devDependencies": {
         "@babel/types": "^7.22.5",
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index af89e8041..592eb38be 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+  "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+    "@infineon/infineon-design-system-angular": "^26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
index 4062cfcca..cb02a0247 100644
--- a/packages/components-angular/projects/component-library/package.json
+++ b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+  "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0"
+    "@infineon/infineon-design-system-stencil": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 27e487c4b..77768f163 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+  "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+    "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
index 2e4185819..19f0b26cd 100644
--- a/packages/components-vue/package.json
+++ b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+  "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0"
+    "@infineon/infineon-design-system-stencil": "^26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
index a260bc3b5..5725bb8ae 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.18.1--canary.1567.6510a80557e0611c0b0130ba9658379ed51eab31.0",
+  "version": "26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",