npm - @siemens/ix-docs - Versions diffs - 4.0.0 → 4.1.0 - Mend

@siemens/ix-docs 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (833) hide show

package/build/docs/autogenerated/prompt/ix-select/readme.md CHANGED Viewed

@@ -1,2044 +1,3 @@
-# ix-select
-## HTML Examples
-### Example: datepicker-locale
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datepicker locale example</title>
-  </head>
-  <body>
-    <span style="margin-right: 1rem">Language:</span>
-    <ix-select style="margin: 1rem 0">
-      <ix-select-item value="de" label="de"></ix-select-item>
-      <ix-select-item value="en" label="en"></ix-select-item>
-    </ix-select>
-    <ix-date-picker range="false"></ix-date-picker>
-    <script>
-      const select = document.querySelector('ix-select');
-      const datepicker = document.querySelector('ix-date-picker');
-      let locale = 'de';
-      function setLocale(newLocale) {
-        locale = newLocale;
-        datepicker.locale = locale;
-        select.value = locale;
-      }
-      setLocale(locale);
-      select.addEventListener('valueChange', ({ detail }) => {
-        setLocale(detail);
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: form-layout-auto
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Avatar example</title>
-  </head>
-  <body>
-    <ix-layout-auto>
-      <ix-field-label htmlFor="my-select-1">Example</ix-field-label>
-      <ix-select id="my-select-1"></ix-select>
-      <ix-field-label htmlFor="my-select-2">Example</ix-field-label>
-      <ix-input id="my-select-2"></ix-input>
-      <ix-button data-colspan="2">Submit</ix-button>
-    </ix-layout-auto>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: form-layout-grid
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Avatar example</title>
-    <link rel="stylesheet" href="./form-layout-grid.css" />
-  </head>
-  <body>
-    <ix-layout-grid class="layout-grid-example">
-      <ix-row>
-        <ix-col size="2" size-sm="12">
-          <ix-field-label for="my-select-1">Example</ix-field-label>
-        </ix-col>
-        <ix-col>
-          <ix-select id="my-select-1"></ix-select>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col size="2" size-sm="12">
-          <ix-field-label for="my-select-2">Example</ix-field-label>
-        </ix-col>
-        <ix-col>
-          <ix-input id="my-select-2"></ix-input>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col size="12" size-sm="12">
-          <ix-button data-colspan="2">Submit</ix-button>
-        </ix-col>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: select-editable
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select editable example</title>
-  </head>
-  <body>
-    <ix-select editable value="1">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: select-multiple
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select multiple example</title>
-  </head>
-  <body>
-    <ix-select mode="multiple">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-    <script>
-      (async function () {
-        await window.customElements.whenDefined('ix-select');
-        const select = document.querySelector('ix-select');
-        select.value = ['1', '3'];
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: select-validation
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select validation example</title>
-  </head>
-  <body>
-    <div>
-      <ix-select
-        label="Framework options"
-        name="framework-option"
-        info-text="We will show examples based on your selection."
-        class="ix-info"
-      >
-        <ix-select-item value="angular" label="Angular"></ix-select-item>
-        <ix-select-item value="react" label="React"></ix-select-item>
-        <ix-select-item value="vue" label="Vue"></ix-select-item>
-      </ix-select>
-    </div>
-    <div>
-      <ix-select
-        label="Framework options"
-        name="framework-option"
-        warning-text="Selected Framework is partly supported."
-        class="ix-warning"
-        value="blazor"
-      >
-        <ix-select-item value="blazor" label="Blazor"></ix-select-item>
-        <ix-select-item value="nextjs" label="NextJS"></ix-select-item>
-      </ix-select>
-    </div>
-    <div>
-      <ix-select
-        label="Framework options"
-        name="framework-option"
-        valid-text="Selected Framework is fully supported."
-        class="ix-valid"
-        value="angular"
-      >
-        <ix-select-item value="angular" label="Angular"></ix-select-item>
-        <ix-select-item value="react" label="React"></ix-select-item>
-        <ix-select-item value="vue" label="Vue"></ix-select-item>
-      </ix-select>
-    </div>
-    <div>
-      <ix-select
-        label="Framework options"
-        name="framework-option"
-        invalid-text="Selected Framework is not supported."
-        class="ix-invalid"
-        value="svelte"
-      >
-        <ix-select-item value="svelte" label="Svelte"></ix-select-item>
-        <ix-select-item value="solid" label="Solid"></ix-select-item>
-      </ix-select>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: select
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Select example</title>
-  </head>
-  <body>
-    <ix-select value="1">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: theme-switcher
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Theme switcher example</title>
-    <link rel="stylesheet" href="./theme-switcher.css" />
-  </head>
-  <body>
-    <ix-layout-grid class="theme-switcher">
-      <ix-row>
-        <ix-col size="2">
-          <span>Light/Dark</span>
-        </ix-col>
-        <ix-col>
-          <ix-button id="toggle-mode">Toggle mode</ix-button>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col size="2">Theme</ix-col>
-        <ix-col>
-          <ix-select id="select-theme" placeholder="Select a theme">
-          </ix-select>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col size="2"></ix-col>
-        <ix-col>
-          <input class="ix-form-control" type="checkbox" id="system" />
-          <label class="ix-form-label" for="system">Use System</label>
-        </ix-col>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module">
-      import { themeSwitcher } from '@siemens/ix';
-      (async function () {
-        const themes = ['theme-classic-light', 'theme-classic-dark'];
-        let selectedTheme = themes[1];
-        setTimeout(() => {
-          themeSwitcher.setTheme(selectedTheme);
-        });
-        const toggleModeButton = document.getElementById('toggle-mode');
-        toggleModeButton.addEventListener('click', () => {
-          themeSwitcher.toggleMode();
-        });
-        const themeSelect = document.getElementById('select-theme');
-        themes.forEach((theme) => {
-          const item = document.createElement('ix-select-item');
-          item.label = theme;
-          item.value = theme;
-          themeSelect.appendChild(item);
-        });
-        themeSelect.value = selectedTheme;
-        themeSelect.addEventListener('valueChange', ({ detail: theme }) => {
-          themeSwitcher.setTheme(theme);
-          selectedTheme = theme;
-        });
-        const toggleSystem = document.getElementById('system');
-        toggleSystem.addEventListener('change', ({ target }) => {
-          if (target.checked) {
-            themeSwitcher.setVariant();
-            return;
-          }
-          themeSwitcher.setTheme(selectedTheme);
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: validation-select
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Validation select example</title>
-  </head>
-  <body>
-    <form class="form-validation-example" data-ix-disable-valid>
-      <ix-select
-        allow-clear
-        name="car"
-        label="Select Car"
-        helper-text="Select your car brand"
-        invalid-text="Value is required"
-        required
-      >
-        <ix-select-item value="audi" label="Audi"></ix-select-item>
-        <ix-select-item value="vw" label="VW"></ix-select-item>
-      </ix-select>
-      <ix-button type="submit">Submit</ix-button>
-    </form>
-    <script type="module">
-      const form = document.querySelector('form');
-      form.addEventListener('submit', (event) => {
-        event.preventDefault();
-        const formData = new FormData(form);
-        for (const [key, value] of formData.entries()) {
-          console.log(`${key}: ${value}`);
-        }
-      });
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: datepicker-locale
-```tsx
-import { IxDatePicker, IxSelect, IxSelectItem } from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [locale, setLocale] = useState<'de' | 'en' | (string & {})>('de');
-  return (
-    <>
-      <span style={{ marginRight: '1rem' }}>Language:</span>
-      <IxSelect
-        value={locale}
-        onValueChange={({ detail }) => {
-          if (!Array.isArray(detail)) {
-            setLocale(detail);
-          }
-        }}
-        style={{
-          margin: '1rem 0',
-        }}
-      >
-        <IxSelectItem label="de" value={'de'}></IxSelectItem>
-        <IxSelectItem label="en" value={'en'}></IxSelectItem>
-      </IxSelect>
-      <IxDatePicker locale={locale} />
-    </>
-  );
-};
-```
-### Example: form-layout-auto
-```tsx
-import {
-  IxButton,
-  IxFieldLabel,
-  IxInput,
-  IxLayoutAuto,
-  IxSelect,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutAuto>
-      <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
-      <IxSelect id="my-select-1"></IxSelect>
-      <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
-      <IxInput id="my-select-2"></IxInput>
-      <IxButton data-colspan="2">Submit</IxButton>
-    </IxLayoutAuto>
-  );
-};
-```
-### Example: form-layout-grid
-```tsx
-import {
-  IxButton,
-  IxCol,
-  IxFieldLabel,
-  IxInput,
-  IxLayoutGrid,
-  IxRow,
-  IxSelect,
-} from '@siemens/ix-react';
-import './form-layout-grid.scoped.css';
-export default () => {
-  return (
-    <IxLayoutGrid className="layout-grid-example">
-      <IxRow>
-        <IxCol size="2" size-sm="12">
-          <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
-        </IxCol>
-        <IxCol>
-          <IxSelect id="my-select-1"></IxSelect>
-        </IxCol>
-      </IxRow>
-      <IxRow>
-        <IxCol size="2" size-sm="12">
-          <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
-        </IxCol>
-        <IxCol>
-          <IxInput id="my-select-2"></IxInput>
-        </IxCol>
-      </IxRow>
-      <IxRow>
-        <IxCol size="12" size-sm="12">
-          <IxButton data-colspan="2">Submit</IxButton>
-        </IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: select-editable
-```tsx
-import { IxSelect, IxSelectItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxSelect value={'1'} editable>
-      <IxSelectItem label="Item 1" value="1"></IxSelectItem>
-      <IxSelectItem label="Item 2" value="2"></IxSelectItem>
-      <IxSelectItem label="Item 3" value="3"></IxSelectItem>
-      <IxSelectItem label="Item 4" value="4"></IxSelectItem>
-    </IxSelect>
-  );
-};
-```
-### Example: select-multiple
-```tsx
-import { IxSelect, IxSelectItem } from '@siemens/ix-react';
-import { useLayoutEffect, useState } from 'react';
-export default () => {
-  const [selection, setSelection] = useState<string[]>([]);
-  useLayoutEffect(() => {
-    setSelection(['1', '3']);
-  }, [setSelection]);
-  return (
-    <IxSelect mode="multiple" value={selection}>
-      <IxSelectItem label="Item 1" value="1"></IxSelectItem>
-      <IxSelectItem label="Item 2" value="2"></IxSelectItem>
-      <IxSelectItem label="Item 3" value="3"></IxSelectItem>
-      <IxSelectItem label="Item 4" value="4"></IxSelectItem>
-    </IxSelect>
-  );
-};
-```
-### Example: select-validation
-```tsx
-import { IxSelect, IxSelectItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <div>
-        <IxSelect
-          label="Framework options"
-          name="framework-option"
-          infoText="We will show examples based on your selection."
-          className="ix-info"
-        >
-          <IxSelectItem value="angular" label="Angular"></IxSelectItem>
-          <IxSelectItem value="react" label="React"></IxSelectItem>
-          <IxSelectItem value="vue" label="Vue"></IxSelectItem>
-        </IxSelect>
-      </div>
-      <div>
-        <IxSelect
-          label="Framework options"
-          name="framework-option"
-          warningText="Selected Framework is partly supported."
-          className="ix-warning"
-          value="blazor"
-        >
-          <IxSelectItem value="blazor" label="Blazor"></IxSelectItem>
-          <IxSelectItem value="nextjs" label="NextJS"></IxSelectItem>
-        </IxSelect>
-      </div>
-      <div>
-        <IxSelect
-          label="Framework options"
-          name="framework-option"
-          validText="Selected Framework is fully supported."
-          className="ix-valid"
-          value="angular"
-        >
-          <IxSelectItem value="angular" label="Angular"></IxSelectItem>
-          <IxSelectItem value="react" label="React"></IxSelectItem>
-          <IxSelectItem value="vue" label="Vue"></IxSelectItem>
-        </IxSelect>
-      </div>
-      <div>
-        <IxSelect
-          label="Framework options"
-          name="framework-option"
-          invalidText="Selected Framework is not supported."
-          className="ix-invalid"
-          value="svelte"
-        >
-          <IxSelectItem value="svelte" label="Svelte"></IxSelectItem>
-          <IxSelectItem value="solid" label="Solid"></IxSelectItem>
-        </IxSelect>
-      </div>
-    </>
-  );
-};
-```
-### Example: select
-```tsx
-import { IxSelect, IxSelectItem } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxSelect value="1">
-      <IxSelectItem label="Item 1" value="1"></IxSelectItem>
-      <IxSelectItem label="Item 2" value="2"></IxSelectItem>
-      <IxSelectItem label="Item 3" value="3"></IxSelectItem>
-      <IxSelectItem label="Item 4" value="4"></IxSelectItem>
-    </IxSelect>
-  );
-};
-```
-### Example: theme-switcher
-```tsx
-import './theme-switcher.scoped.css';
-import { IxSelectCustomEvent, themeSwitcher } from '@siemens/ix';
-import {
-  IxButton,
-  IxCol,
-  IxLayoutGrid,
-  IxRow,
-  IxSelect,
-  IxSelectItem,
-} from '@siemens/ix-react';
-import { ChangeEvent, useState } from 'react';
-export default () => {
-  const [themes] = useState(['theme-classic-light', 'theme-classic-dark']);
-  const [selectedTheme, setSelectedTheme] = useState(themes[1]);
-  const valueChange = (event: IxSelectCustomEvent<string | string[]>) => {
-    const newTheme: string = event.detail as string;
-    themeSwitcher.setTheme(newTheme);
-    setSelectedTheme(newTheme);
-  };
-  const toggle = () => {
-    themeSwitcher.toggleMode();
-  };
-  const systemChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
-    if (target.checked) {
-      themeSwitcher.setVariant();
-      return;
-    }
-    themeSwitcher.setTheme(selectedTheme);
-  };
-  return (
-    <IxLayoutGrid class="theme-switcher">
-      <IxRow>
-        <IxCol size="2">
-          <span>Light/Dark</span>
-        </IxCol>
-        <IxCol>
-          <IxButton onClick={toggle}>Toggle mode</IxButton>
-        </IxCol>
-      </IxRow>
-      <IxRow>
-        <IxCol size="2">Theme</IxCol>
-        <IxCol>
-          <IxSelect
-            value={selectedTheme}
-            onValueChange={valueChange}
-            placeholder="Select a theme"
-          >
-            {themes.map((theme) => (
-              <IxSelectItem
-                key={theme}
-                label={theme}
-                value={theme}
-              ></IxSelectItem>
-            ))}
-          </IxSelect>
-        </IxCol>
-      </IxRow>
-      <IxRow>
-        <IxCol size="2"></IxCol>
-        <IxCol>
-          <input
-            className="ix-form-control"
-            type="checkbox"
-            id="system"
-            onChange={systemChange}
-          />
-          <label className="ix-form-label" htmlFor="system">
-            Use System
-          </label>
-        </IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: validation-select
-```tsx
-import { IxButton, IxSelect, IxSelectItem } from '@siemens/ix-react';
-import { Controller, useForm } from 'react-hook-form';
-export default function () {
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm({
-    mode: 'onChange',
-  });
-  const onSubmit = (data: any) => {
-    console.log(data);
-  };
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="form-validation-example">
-      <Controller
-        name="car"
-        control={control}
-        rules={{
-          required: {
-            message: 'Value is required',
-            value: true,
-          },
-        }}
-        render={({ field }) => {
-          return (
-            <IxSelect
-              allowClear
-              label="Select Car"
-              value={field.value}
-              onValueChange={field.onChange}
-              helperText="Select your car brand"
-              invalidText={errors.car?.message?.toString()}
-              className={`${errors.car ? 'ix-invalid' : undefined}`}
-            >
-              <IxSelectItem value="audi" label="Audi"></IxSelectItem>
-              <IxSelectItem value="vw" label="VW"></IxSelectItem>
-            </IxSelect>
-          );
-        }}
-      />
-      <IxButton type="submit">Submit</IxButton>
-    </form>
-  );
-}
-```
-## Vue Examples
-### Example: datepicker-locale
-```tsx
-<script setup lang="ts">
-import { IxDatePicker, IxSelect, IxSelectItem } from '@siemens/ix-vue';
-</script>
-<script lang="ts">
-export default {
-  data() {
-    return {
-      locale: 'de',
-    };
-  },
-  methods: {
-    setLocale({ detail: newLocale }: CustomEvent<string | string[]>) {
-      if (Array.isArray(newLocale)) {
-        return;
-      }
-      this.locale = newLocale;
-    },
-  },
-};
-</script>
-<template>
-  <span style="margin-right: 1rem">Language:</span>
-  <IxSelect :value="locale" @valueChange="setLocale" style="margin: 1rem 0">
-    <IxSelectItem label="de" value="de"></IxSelectItem>
-    <IxSelectItem label="en" value="en"></IxSelectItem>
-  </IxSelect>
-  <IxDatePicker v-bind:locale="locale" />
-</template>
-```
-### Example: form-layout-auto
-```tsx
-<script setup lang="ts">
-import {
-  IxButton,
-  IxFieldLabel,
-  IxInput,
-  IxLayoutAuto,
-  IxSelect,
-} from '@siemens/ix-vue';
-</script>
-<template>
-  <IxLayoutAuto>
-    <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
-    <IxSelect id="my-select-1"></IxSelect>
-    <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
-    <IxInput id="my-select-2"></IxInput>
-    <IxButton data-colspan="2">Submit</IxButton>
-  </IxLayoutAuto>
-</template>
-```
-### Example: form-layout-grid
-```tsx
-<script setup lang="ts">
-import {
-  IxButton,
-  IxCol,
-  IxFieldLabel,
-  IxInput,
-  IxLayoutGrid,
-  IxRow,
-  IxSelect,
-} from '@siemens/ix-vue';
-</script>
-<style scoped src="./form-layout-grid.css"></style>
-<template>
-  <IxLayoutGrid class="layout-grid-example">
-    <IxRow>
-      <IxCol size="2" size-sm="12">
-        <IxFieldLabel htmlFor="my-select-1">Example</IxFieldLabel>
-      </IxCol>
-      <IxCol>
-        <IxSelect id="my-select-1"></IxSelect>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol size="2" size-sm="12">
-        <IxFieldLabel htmlFor="my-select-2">Example</IxFieldLabel>
-      </IxCol>
-      <IxCol>
-        <IxInput id="my-select-2"></IxInput>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol size="12" size-sm="12">
-        <IxButton data-colspan="2">Submit</IxButton>
-      </IxCol>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: select-editable
-```tsx
-<script setup lang="ts">
-import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxSelect value="1" editable>
-    <IxSelectItem label="Item 1" value="1"></IxSelectItem>
-    <IxSelectItem label="Item 2" value="2"></IxSelectItem>
-    <IxSelectItem label="Item 3" value="3"></IxSelectItem>
-    <IxSelectItem label="Item 4" value="4"></IxSelectItem>
-  </IxSelect>
-</template>
-```
-### Example: select-multiple
-```tsx
-<script setup lang="ts">
-import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
-import { nextTick, onMounted, ref } from 'vue';
-const selection = ref<string[]>([]);
-onMounted(() => nextTick(() => (selection.value = ['1', '3'])));
-</script>
-<template>
-  <IxSelect mode="multiple" :value="selection">
-    <IxSelectItem label="Item 1" value="1"></IxSelectItem>
-    <IxSelectItem label="Item 2" value="2"></IxSelectItem>
-    <IxSelectItem label="Item 3" value="3"></IxSelectItem>
-    <IxSelectItem label="Item 4" value="4"></IxSelectItem>
-  </IxSelect>
-</template>
-```
-### Example: select-validation
-```tsx
-<script setup lang="ts">
-import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <div>
-    <IxSelect
-      label='Framework options'
-      name='framework-option'
-      info-text='We will show examples based on your selection.'
-      class='ix-info'
-    >
-      <IxSelectItem value='angular' label='Angular'></IxSelectItem>
-      <IxSelectItem value='react' label='React'></IxSelectItem>
-      <IxSelectItem value='vue' label='Vue'></IxSelectItem>
-    </IxSelect>
-  </div>
-  <div>
-    <IxSelect
-      label='Framework options'
-      name='framework-option'
-      warning-text='Selected Framework is partly supported.'
-      class='ix-warning'
-      value='blazor'
-    >
-      <IxSelectItem value='blazor' label='Blazor'></IxSelectItem>
-      <IxSelectItem value='nextjs' label='NextJS'></IxSelectItem>
-    </IxSelect>
-  </div>
-  <div>
-    <IxSelect
-      label='Framework options'
-      name='framework-option'
-      valid-text='Selected Framework is fully supported.'
-      class='ix-valid'
-      value='angular'
-    >
-      <IxSelectItem value='angular' label='Angular'></IxSelectItem>
-      <IxSelectItem value='react' label='React'></IxSelectItem>
-      <IxSelectItem value='vue' label='Vue'></IxSelectItem>
-    </IxSelect>
-  </div>
-  <div>
-    <IxSelect
-      label='Framework options'
-      name='framework-option'
-      invalid-text='Selected Framework is not supported.'
-      class='ix-invalid'
-      value='svelte'
-    >
-      <IxSelectItem value='svelte' label='Svelte'></IxSelectItem>
-      <IxSelectItem value='solid' label='Solid'></IxSelectItem>
-    </IxSelect>
-  </div>
-</template>
-```
-### Example: select
-```tsx
-<script setup lang="ts">
-import { IxSelect, IxSelectItem } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxSelect value="1">
-    <IxSelectItem label="Item 1" value="1"></IxSelectItem>
-    <IxSelectItem label="Item 2" value="2"></IxSelectItem>
-    <IxSelectItem label="Item 3" value="3"></IxSelectItem>
-    <IxSelectItem label="Item 4" value="4"></IxSelectItem>
-  </IxSelect>
-</template>
-```
-### Example: theme-switcher
-```tsx
-<script setup lang="ts">
-import { themeSwitcher } from '@siemens/ix';
-import {
-  IxButton,
-  IxCol,
-  IxLayoutGrid,
-  IxRow,
-  IxSelect,
-} from '@siemens/ix-vue';
-import { onMounted } from 'vue';
-const themes = ['theme-classic-light', 'theme-classic-dark'];
-let selectedTheme = themes[1];
-themeSwitcher.setTheme(selectedTheme);
-onMounted(() => {
-  const themeSelect: HTMLSelectElement | null = document.getElementById(
-    'select-theme'
-  ) as HTMLSelectElement;
-  if (themeSelect) {
-    themes.forEach((theme) => {
-      const item = document.createElement('ix-select-item');
-      item.label = theme;
-      item.value = theme;
-      themeSelect.appendChild(item);
-    });
-    themeSelect.value = selectedTheme;
-    themeSelect.addEventListener('valueChange', (event: Event) => {
-      const target = event.target as HTMLSelectElement;
-      const detail = target.value;
-      themeSwitcher.setTheme(detail);
-      selectedTheme = detail;
-    });
-  }
-});
-const toggle = () => {
-  themeSwitcher.toggleMode();
-};
-const systemChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  if (target.checked) {
-    themeSwitcher.setVariant();
-    return;
-  }
-  themeSwitcher.setTheme(selectedTheme);
-};
-</script>
-<style scoped src="./theme-switcher.css"></style>
-<template>
-  <IxLayoutGrid class="theme-switcher">
-    <IxRow>
-      <IxCol :size="'2'">
-        <span>Light/Dark</span>
-      </IxCol>
-      <IxCol>
-        <IxButton @click="toggle">Toggle mode</IxButton>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol :size="'2'">Theme</IxCol>
-      <IxCol>
-        <IxSelect id="select-theme" placeholder="Select a theme"> </IxSelect>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol :size="'2'"></IxCol>
-      <IxCol>
-        <input
-          class="ix-form-control"
-          type="checkbox"
-          id="system"
-          @change="systemChange"
-        />
-        <label class="ix-form-label" for="system">Use System</label>
-      </IxCol>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: validation-select
-```tsx
-<script lang="ts">
-import { IxSelect, IxSelectItem, IxButton } from '@siemens/ix-vue';
-import useValidate from '@vuelidate/core'
-import { required } from '@vuelidate/validators'
-export default {
-  name: 'ValidationSelect',
-  components: { IxSelect, IxSelectItem, IxButton },
-  setup() {
-    /**
-     * Using `@vuelidate/core` is just an example to demonstrate how validation could be done
-     * within vue. You can use any other validation library or write your own validation logic.
-     */
-    const v$ = useValidate()
-    return { v$ }
-  },
-  methods: {
-    async submitForm() {
-      const result = await this.v$.$validate();
-      console.log(result, this.v$)
-    },
-  },
-  data() {
-    return {
-      car: '',
-    };
-  },
-  validations: {
-    car: { required }
-  }
-};
-</script>
-<template>
-  <form className="form-validation-example" @submit.prevent @submit="submitForm">
-    <IxSelect
-      allowClear
-      label="Select Car"
-      helper-text="Select your car brand"
-      :invalid-text="v$.car.$errors[0]?.$message"
-      v-model="car"
-      :class="{ 'ix-invalid': v$.$error }"
-      >
-      <IxSelectItem value="audi" label="Audi"></IxSelectItem>
-      <IxSelectItem value="vw" label="VW"></IxSelectItem>
-    </IxSelect>
-    <IxButton type="submit">Submit</IxButton>
-  </form>
-</template>
-```
-## Angular Examples
-### Example: datepicker-locale
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './datepicker-locale.html',
-})
-export default class DatepickerLocale {
-  locale: 'de' | 'en' | (string & {}) = 'de';
-  setLocale(event: Event) {
-    const { detail } = event as CustomEvent<string>;
-    this.locale = detail;
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2024 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<span style="margin-right: 1rem">Language:</span>
-<ix-select
-  style="margin: 1rem 0"
-  [value]="locale"
-  (valueChange)="setLocale($event)"
->
-  <ix-select-item value="de" label="de"></ix-select-item>
-  <ix-select-item value="en" label="en"></ix-select-item>
-</ix-select>
-<ix-date-picker range="false" [locale]="locale"></ix-date-picker>
-```
-### Example: form-layout-auto
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './form-layout-auto.html',
-})
-export default class FormLayoutAuto {}
-```
-#### Component template
-```html
-<ix-layout-auto>
-  <ix-field-label for="my-select-1">Example</ix-field-label>
-  <ix-select id="my-select-1"></ix-select>
-  <ix-field-label for="my-select-2">Example</ix-field-label>
-  <ix-input id="my-select-2"></ix-input>
-  <ix-button data-colspan="2">Submit</ix-button>
-</ix-layout-auto>
-```
-### Example: form-layout-grid
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './form-layout-grid.html',
-  styleUrls: ['./form-layout-grid.css'],
-})
-export default class FormLayoutGrid {}
-```
-#### Component template
-```html
-<ix-layout-grid class="layout-grid-example">
-  <ix-row>
-    <ix-col size="2" size-sm="12">
-      <ix-field-label for="my-select-1">Example</ix-field-label>
-    </ix-col>
-    <ix-col>
-      <ix-select id="my-select-1"></ix-select>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="2" size-sm="12">
-      <ix-field-label for="my-select-2">Example</ix-field-label>
-    </ix-col>
-    <ix-col>
-      <ix-input id="my-select-2"></ix-input>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="12" size-sm="12">
-      <ix-button data-colspan="2">Submit</ix-button>
-    </ix-col>
-  </ix-row>
-</ix-layout-grid>
-```
-### Example: select-editable
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-select editable [value]="value">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-  `,
-})
-export default class SelectEditable {
-  value = '1';
-}
-```
-### Example: select-multiple
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-select mode="multiple" [value]="value">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-  `,
-})
-export default class SelectMultiple {
-  value = ['1', '3'];
-}
-```
-### Example: select-validation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './select-validation.html',
-})
-export default class SelectValidation {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2024 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<div>
-  <ix-select
-    label='Framework options'
-    name='framework-option'
-    info-text='We will show examples based on your selection.'
-    class='ix-info'
-  >
-    <ix-select-item value='angular' label='Angular'></ix-select-item>
-    <ix-select-item value='react' label='React'></ix-select-item>
-    <ix-select-item value='vue' label='Vue'></ix-select-item>
-  </ix-select>
-</div>
-<div>
-  <ix-select
-    label='Framework options'
-    name='framework-option'
-    warning-text='Selected Framework is partly supported.'
-    class='ix-warning'
-    value='blazor'
-  >
-    <ix-select-item value='blazor' label='Blazor'></ix-select-item>
-    <ix-select-item value='nextjs' label='NextJS'></ix-select-item>
-  </ix-select>
-</div>
-<div>
-  <ix-select
-    label='Framework options'
-    name='framework-option'
-    valid-text='Selected Framework is fully supported.'
-    class='ix-valid'
-    value='angular'
-  >
-    <ix-select-item value='angular' label='Angular'></ix-select-item>
-    <ix-select-item value='react' label='React'></ix-select-item>
-    <ix-select-item value='vue' label='Vue'></ix-select-item>
-  </ix-select>
-</div>
-<div>
-  <ix-select
-    label='Framework options'
-    name='framework-option'
-    invalid-text='Selected Framework is not supported.'
-    class='ix-invalid'
-    value='svelte'
-  >
-    <ix-select-item value='svelte' label='Svelte'></ix-select-item>
-    <ix-select-item value='solid' label='Solid'></ix-select-item>
-  </ix-select>
-</div>
-```
-### Example: select
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-select [value]="value">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-  `,
-})
-export default class Select {
-  value = '1';
-}
-```
-### Example: theme-switcher
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { themeSwitcher } from '@siemens/ix';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './theme-switcher.html',
-  styleUrls: ['./theme-switcher.css'],
-})
-export default class ThemeSwitcher {
-  themes = ['theme-classic-light', 'theme-classic-dark'];
-  selectedTheme = this.themes[1];
-  constructor() {}
-  onValueChange(event: Event) {
-    const customEvent = event as CustomEvent<string>;
-    const newTheme = customEvent.detail;
-    themeSwitcher.setTheme(newTheme);
-    this.selectedTheme = newTheme;
-  }
-  toggleMode() {
-    themeSwitcher.toggleMode();
-  }
-  onSystemMode({ target }: Event) {
-    if ((target as HTMLInputElement).checked) {
-      themeSwitcher.setVariant();
-      return;
-    }
-    themeSwitcher.setTheme(this.selectedTheme);
-  }
-}
-```
-#### Component template
-```html
-<ix-layout-grid class="theme-switcher">
-  <ix-row>
-    <ix-col size="2">
-      <span>Light/Dark</span>
-    </ix-col>
-    <ix-col>
-      <ix-button (click)="toggleMode()">Toggle mode</ix-button>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="2">Theme</ix-col>
-    <ix-col>
-      <ix-select
-        [value]="selectedTheme"
-        (valueChange)="onValueChange($event)"
-        placeholder="Select a theme"
-      >
-        <ix-select-item
-          *ngFor="let theme of themes"
-          [label]="theme"
-          [value]="theme"
-        ></ix-select-item>
-      </ix-select>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="2"></ix-col>
-    <ix-col>
-      <input
-        class="ix-form-control"
-        type="checkbox"
-        id="system"
-        (change)="onSystemMode($event)"
-      />
-      <label class="ix-form-label" for="system">Use System</label>
-    </ix-col>
-  </ix-row>
-</ix-layout-grid>
-```
-### Example: validation-select
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: `./validation-select.html`,
-})
-export default class ValidationSelect {
-  exampleForm = new FormGroup({
-    car: new FormControl('', [Validators.required]),
-  });
-  submit() {
-    console.log(this.exampleForm.value);
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2024 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<form class="form-validation-example" [formGroup]="exampleForm" (ngSubmit)="submit()" data-ix-disable-valid>
-  <ix-select
-    allowClear
-    label="Select Car"
-    helperText="Select your car brand"
-    invalidText="Value is required"
-    formControlName="car"
-  >
-    <ix-select-item value="audi" label="Audi"></ix-select-item>
-    <ix-select-item value="vw" label="VW"></ix-select-item>
-  </ix-select>
-  <ix-button type="submit">Submit</ix-button>
-</form>
-```
-## Angular Standalone Examples
-### Example: datepicker-locale
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxSelect,
-  IxSelectItem,
-  IxDatePicker,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-type Locale = 'de' | 'en';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxSelect,
-    IxSelectItem,
-    IxDatePicker,
-    IxSelectValueAccessorDirective,
-  ],
-  templateUrl: './datepicker-locale.html',
-})
-export default class DatepickerLocale {
-  locale: Locale = 'de';
-  setLocale(event: Event) {
-    const { detail } = event as CustomEvent<string>;
-    this.locale = detail as Locale;
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<span style="margin-right: 1rem">Language:</span>
-<ix-select
-  style="margin: 1rem 0"
-  [value]="locale"
-  (valueChange)="setLocale($event)"
->
-  <ix-select-item value="de" label="de"></ix-select-item>
-  <ix-select-item value="en" label="en"></ix-select-item>
-</ix-select>
-<ix-date-picker range="false" [locale]="locale"></ix-date-picker>
-```
-### Example: form-layout-auto
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxLayoutAuto,
-  IxFieldLabel,
-  IxSelect,
-  IxInput,
-  IxButton,
-  IxSelectValueAccessorDirective,
-  IxTextValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxLayoutAuto,
-    IxFieldLabel,
-    IxSelect,
-    IxInput,
-    IxButton,
-    IxSelectValueAccessorDirective,
-    IxTextValueAccessorDirective,
-  ],
-  templateUrl: './form-layout-auto.html',
-})
-export default class FormLayoutAuto {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<ix-layout-auto>
-  <ix-field-label for="my-select-1">Example</ix-field-label>
-  <ix-select id="my-select-1"></ix-select>
-  <ix-field-label for="my-select-2">Example</ix-field-label>
-  <ix-input id="my-select-2"></ix-input>
-  <ix-button data-colspan="2">Submit</ix-button>
-</ix-layout-auto>
-```
-### Example: form-layout-grid
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxLayoutGrid,
-  IxRow,
-  IxCol,
-  IxFieldLabel,
-  IxSelect,
-  IxInput,
-  IxButton,
-  IxSelectValueAccessorDirective,
-  IxTextValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxLayoutGrid,
-    IxRow,
-    IxCol,
-    IxFieldLabel,
-    IxSelect,
-    IxInput,
-    IxButton,
-    IxSelectValueAccessorDirective,
-    IxTextValueAccessorDirective,
-  ],
-  templateUrl: './form-layout-grid.html',
-  styleUrls: ['./form-layout-grid.css'],
-})
-export default class FormLayoutGrid {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<ix-layout-grid class="layout-grid-example">
-  <ix-row>
-    <ix-col size="2" size-sm="12">
-      <ix-field-label for="my-select-1">Example</ix-field-label>
-    </ix-col>
-    <ix-col>
-      <ix-select id="my-select-1"></ix-select>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="2" size-sm="12">
-      <ix-field-label for="my-select-2">Example</ix-field-label>
-    </ix-col>
-    <ix-col>
-      <ix-input id="my-select-2"></ix-input>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="12" size-sm="12">
-      <ix-button data-colspan="2">Submit</ix-button>
-    </ix-col>
-  </ix-row>
-</ix-layout-grid>
-```
-### Example: select-editable
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxSelect,
-  IxSelectItem,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxSelect, IxSelectItem, IxSelectValueAccessorDirective],
-  template: `
-    <ix-select editable [value]="value">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-  `,
-})
-export default class SelectEditable {
-  value = '1';
-}
-```
-### Example: select-multiple
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxSelect,
-  IxSelectItem,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxSelect, IxSelectItem, IxSelectValueAccessorDirective],
-  template: `
-    <ix-select mode="multiple" [value]="value">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-  `,
-})
-export default class SelectMultiple {
-  value = ['1', '3'];
-}
-```
-### Example: select-validation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxSelect,
-  IxSelectItem,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxSelect, IxSelectItem, IxSelectValueAccessorDirective],
-  templateUrl: './select-validation.html',
-})
-export default class SelectValidation {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<div>
-  <ix-select
-    label="Framework options"
-    name="framework-option"
-    info-text="We will show examples based on your selection."
-    class="ix-info"
-  >
-    <ix-select-item value="angular" label="Angular"></ix-select-item>
-    <ix-select-item value="react" label="React"></ix-select-item>
-    <ix-select-item value="vue" label="Vue"></ix-select-item>
-  </ix-select>
-</div>
-<div>
-  <ix-select
-    label="Framework options"
-    name="framework-option"
-    warning-text="Selected Framework is partly supported."
-    class="ix-warning"
-    value="blazor"
-  >
-    <ix-select-item value="blazor" label="Blazor"></ix-select-item>
-    <ix-select-item value="nextjs" label="NextJS"></ix-select-item>
-  </ix-select>
-</div>
-<div>
-  <ix-select
-    label="Framework options"
-    name="framework-option"
-    valid-text="Selected Framework is fully supported."
-    class="ix-valid"
-    value="angular"
-  >
-    <ix-select-item value="angular" label="Angular"></ix-select-item>
-    <ix-select-item value="react" label="React"></ix-select-item>
-    <ix-select-item value="vue" label="Vue"></ix-select-item>
-  </ix-select>
-</div>
-<div>
-  <ix-select
-    label="Framework options"
-    name="framework-option"
-    invalid-text="Selected Framework is not supported."
-    class="ix-invalid"
-    value="svelte"
-  >
-    <ix-select-item value="svelte" label="Svelte"></ix-select-item>
-    <ix-select-item value="solid" label="Solid"></ix-select-item>
-  </ix-select>
-</div>
-```
-### Example: select
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxSelect,
-  IxSelectItem,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxSelect, IxSelectItem, IxSelectValueAccessorDirective],
-  template: `
-    <ix-select [value]="value">
-      <ix-select-item label="Item 1" value="1"></ix-select-item>
-      <ix-select-item label="Item 2" value="2"></ix-select-item>
-      <ix-select-item label="Item 3" value="3"></ix-select-item>
-      <ix-select-item label="Item 4" value="4"></ix-select-item>
-    </ix-select>
-  `,
-})
-export default class Select {
-  value = '1';
-}
-```
-### Example: theme-switcher
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { NgForOf } from '@angular/common';
-import {
-  IxLayoutGrid,
-  IxRow,
-  IxCol,
-  IxButton,
-  IxSelect,
-  IxSelectItem,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-import { themeSwitcher } from '@siemens/ix';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxLayoutGrid,
-    IxRow,
-    IxCol,
-    IxButton,
-    IxSelect,
-    IxSelectItem,
-    IxSelectValueAccessorDirective,
-    NgForOf,
-  ],
-  templateUrl: './theme-switcher.html',
-  styleUrls: ['./theme-switcher.css'],
-})
-export default class ThemeSwitcher {
-  themes = ['theme-classic-light', 'theme-classic-dark'];
-  selectedTheme = this.themes[1];
-  constructor() {}
-  onValueChange(event: Event) {
-    const customEvent = event as CustomEvent<string>;
-    const newTheme = customEvent.detail;
-    themeSwitcher.setTheme(newTheme);
-    this.selectedTheme = newTheme;
-  }
-  toggleMode() {
-    themeSwitcher.toggleMode();
-  }
-  onSystemMode({ target }: Event) {
-    if ((target as HTMLInputElement).checked) {
-      themeSwitcher.setVariant();
-      return;
-    }
-    themeSwitcher.setTheme(this.selectedTheme);
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<ix-layout-grid class="theme-switcher">
-  <ix-row>
-    <ix-col size="2">
-      <span>Light/Dark</span>
-    </ix-col>
-    <ix-col>
-      <ix-button (click)="toggleMode()">Toggle mode</ix-button>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="2">Theme</ix-col>
-    <ix-col>
-      <ix-select
-        [value]="selectedTheme"
-        (valueChange)="onValueChange($event)"
-        placeholder="Select a theme"
-      >
-        <ix-select-item
-          *ngFor="let theme of themes"
-          [label]="theme"
-          [value]="theme"
-        ></ix-select-item>
-      </ix-select>
-    </ix-col>
-  </ix-row>
-  <ix-row>
-    <ix-col size="2"></ix-col>
-    <ix-col>
-      <input type="checkbox" id="system" (change)="onSystemMode($event)" />
-      <label for="system">Use System</label>
-    </ix-col>
-  </ix-row>
-</ix-layout-grid>
-```
-### Example: validation-select
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxSelect,
-  IxSelectItem,
-  IxButton,
-  IxSelectValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-import {
-  FormControl,
-  FormGroup,
-  Validators,
-  ReactiveFormsModule,
-} from '@angular/forms';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxSelect,
-    IxSelectItem,
-    IxButton,
-    IxSelectValueAccessorDirective,
-    ReactiveFormsModule,
-  ],
-  templateUrl: `./validation-select.html`,
-})
-export default class ValidationSelect {
-  exampleForm = new FormGroup({
-    car: new FormControl('', [Validators.required]),
-  });
-  submit() {
-    console.log(this.exampleForm.value);
-  }
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<form
-  class="form-validation-example"
-  [formGroup]="exampleForm"
-  (ngSubmit)="submit()"
-  data-ix-disable-valid
->
-  <ix-select
-    allowClear
-    label="Select Car"
-    helperText="Select your car brand"
-    invalidText="Value is required"
-    formControlName="car"
-  >
-    <ix-select-item value="audi" label="Audi"></ix-select-item>
-    <ix-select-item value="vw" label="VW"></ix-select-item>
-  </ix-select>
-  <ix-button type="submit">Submit</ix-button>
-</form>
-```
 <!-- Auto Generated Below -->
@@ -2048,14 +7,16 @@ LICENSE file in the root directory of this source tree.
 | Property                         | Attribute                             | Description                                                                                                                                                     | Type                     | Default                   |
 | -------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------- |
 | `allowClear`                     | `allow-clear`                         | Show clear button                                                                                                                                               | `boolean`                | `false`                   |
-| `ariaLabelChevronDownIconButton` | `aria-label-chevron-down-icon-button` | ARIA label for the chevron down icon button Will be set as aria-label on the nested HTML button element                                                         | `string \| undefined`    | `undefined`               |
+| `ariaLabelChevronDownIconButton` | `aria-label-chevron-down-icon-button` | ARIA label for the chevron down icon button Will be set as aria-label on the nested HTML button element                                                         | `string \| undefined`    | `'Open select dropdown'`  |
 | `ariaLabelClearIconButton`       | `aria-label-clear-icon-button`        | ARIA label for the clear icon button Will be set as aria-label on the nested HTML button element                                                                | `string \| undefined`    | `undefined`               |
+| `collapseMultipleSelection`      | `collapse-multiple-selection`         | Show "all" chip when all items are selected in multiple mode                                                                                                    | `boolean`                | `false`                   |
 | `disabled`                       | `disabled`                            | If true the select will be in disabled state                                                                                                                    | `boolean`                | `false`                   |
 | `dropdownMaxWidth`               | `dropdown-max-width`                  | The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). By default the maximum width of the dropdown element is set to 100%. | `string \| undefined`    | `undefined`               |
 | `dropdownWidth`                  | `dropdown-width`                      | The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").                                                                              | `string \| undefined`    | `undefined`               |
 | `editable`                       | `editable`                            | Select is extendable                                                                                                                                            | `boolean`                | `false`                   |
 | `helperText`                     | `helper-text`                         | Helper text for the select component                                                                                                                            | `string \| undefined`    | `undefined`               |
 | `hideListHeader`                 | `hide-list-header`                    | Hide list header                                                                                                                                                | `boolean`                | `false`                   |
+| `i18nAllSelected`                | `i18n-all-selected`                   | Chip label for all selected items in multiple mode.                                                                                                             | `string`                 | `'All'`                   |
 | `i18nNoMatches`                  | `i18n-no-matches`                     | Information inside of dropdown if no items where found with current filter text                                                                                 | `string`                 | `'No matches'`            |
 | `i18nPlaceholder`                | `i18n-placeholder`                    | Input field placeholder                                                                                                                                         | `string`                 | `'Select an option'`      |
 | `i18nPlaceholderEditable`        | `i18n-placeholder-editable`           | Input field placeholder for editable select                                                                                                                     | `string`                 | `'Type of select option'` |
@@ -2115,8 +76,8 @@ Type: `Promise<HTMLInputElement>`
 ### Depends on
 - [ix-select-item](../select-item)
-- ix-field-wrapper
 - [ix-filter-chip](../filter-chip)
+- ix-field-wrapper
 - [ix-icon-button](../icon-button)
 - [ix-dropdown](../dropdown)
 - [ix-dropdown-item](../dropdown-item)
@@ -2125,19 +86,19 @@ Type: `Promise<HTMLInputElement>`
 ```mermaid
 graph TD;
   ix-select --> ix-select-item
-  ix-select --> ix-field-wrapper
   ix-select --> ix-filter-chip
+  ix-select --> ix-field-wrapper
   ix-select --> ix-icon-button
   ix-select --> ix-dropdown
   ix-select --> ix-dropdown-item
   ix-select-item --> ix-dropdown-item
+  ix-filter-chip --> ix-icon-button
+  ix-icon-button --> ix-spinner
   ix-field-wrapper --> ix-field-label
   ix-field-wrapper --> ix-tooltip
   ix-field-wrapper --> ix-typography
   ix-field-label --> ix-typography
   ix-tooltip --> ix-typography
-  ix-filter-chip --> ix-icon-button
-  ix-icon-button --> ix-spinner
   ix-pagination --> ix-select
   style ix-select fill:#f9f,stroke:#333,stroke-width:4px
 ```