npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2297-20251204163058 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2297-20251204163058

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 (5141) hide show

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

@@ -0,0 +1,2243 @@
+# 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>
+          <ix-checkbox id="system" label="Use system"></ix-checkbox>
+        </ix-col>
+      </ix-row>
+    </ix-layout-grid>
+    <script type="module">
+      import { themeSwitcher } from '@siemens/ix';
+      const variants = ['light', 'dark'];
+      let selectedVariant = 'dark';
+      let useSystemTheme = false;
+      const toggleModeButton = document.getElementById('toggle-mode');
+      const themeSelect = document.getElementById('select-theme');
+      const toggleSystem = document.getElementById('system');
+      setTimeout(() => {
+        themeSwitcher.setTheme('classic');
+        themeSwitcher.setVariant(selectedVariant);
+      });
+      for (const variant of variants) {
+        const item = document.createElement('ix-select-item');
+        item.label = variant;
+        item.value = variant;
+        themeSelect.appendChild(item);
+      }
+      themeSelect.value = selectedVariant;
+      const updateControlsState = () => {
+        toggleModeButton.disabled = useSystemTheme;
+        themeSelect.disabled = useSystemTheme;
+      };
+      toggleModeButton.addEventListener('click', () => {
+        if (useSystemTheme) {
+          return;
+        }
+        themeSwitcher.toggleMode();
+        selectedVariant = selectedVariant === 'light' ? 'dark' : 'light';
+        themeSelect.value = selectedVariant;
+      });
+      themeSelect.addEventListener('valueChange', ({ detail: variant }) => {
+        if (useSystemTheme) {
+          return;
+        }
+        themeSwitcher.setVariant(variant);
+        selectedVariant = variant;
+      });
+      toggleSystem.addEventListener('checkedChange', ({ detail: checked }) => {
+        useSystemTheme = checked;
+        if (checked) {
+          themeSwitcher.setVariant();
+        } else {
+          themeSwitcher.setVariant(selectedVariant);
+          themeSelect.value = selectedVariant;
+        }
+        updateControlsState();
+      });
+      updateControlsState();
+    </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 { themeSwitcher, ThemeVariant } from '@siemens/ix';
+import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+  IxSelectItem,
+} from '@siemens/ix-react';
+import { useEffect, useState } from 'react';
+export default () => {
+  const [variants] = useState<ThemeVariant[]>(['light', 'dark']);
+  const [selectedVariant, setSelectedVariant] = useState<ThemeVariant>('dark');
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
+  useEffect(() => {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(selectedVariant);
+  }, []);
+  const onValueChange = (event: CustomEvent<string | string[]>) => {
+    if (useSystemTheme) {
+      return;
+    }
+    const newVariant = event.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    setSelectedVariant(newVariant);
+  };
+  const toggle = () => {
+    if (useSystemTheme) {
+      return;
+    }
+    themeSwitcher.toggleMode();
+    const newVariant = selectedVariant === 'light' ? 'dark' : 'light';
+    setSelectedVariant(newVariant);
+  };
+  const onCheckedChange = (event: CustomEvent<boolean>) => {
+    const checked = event.detail;
+    setUseSystemTheme(checked);
+    if (checked) {
+      themeSwitcher.setVariant();
+    } else {
+      themeSwitcher.setVariant(selectedVariant);
+    }
+  };
+  return (
+    <IxLayoutGrid className="theme-switcher">
+      <IxRow>
+        <IxCol size="2">
+          <span>Light/Dark</span>
+        </IxCol>
+        <IxCol>
+          <IxButton onClick={toggle} disabled={useSystemTheme}>
+            Toggle mode
+          </IxButton>
+        </IxCol>
+      </IxRow>
+      <IxRow>
+        <IxCol size="2">Theme</IxCol>
+        <IxCol>
+          <IxSelect
+            value={selectedVariant}
+            onValueChange={onValueChange}
+            disabled={useSystemTheme}
+          >
+            {variants.map((variant) => (
+              <IxSelectItem
+                key={variant}
+                label={variant}
+                value={variant}
+              ></IxSelectItem>
+            ))}
+          </IxSelect>
+        </IxCol>
+      </IxRow>
+      <IxRow>
+        <IxCol size="2"></IxCol>
+        <IxCol>
+          <IxCheckbox label="Use system" onCheckedChange={onCheckedChange} />
+        </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, type ThemeVariant } from '@siemens/ix';
+import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+  IxSelectItem,
+} from '@siemens/ix-vue';
+import { onMounted, ref } from 'vue';
+const variants = ref<ThemeVariant[]>(['light', 'dark']);
+const selectedVariant = ref<ThemeVariant>('dark');
+const useSystemTheme = ref(false);
+onMounted(() => {
+  themeSwitcher.setTheme('classic');
+  themeSwitcher.setVariant(selectedVariant.value);
+});
+const valueChange = (event: CustomEvent<string | string[]>) => {
+  if (useSystemTheme.value) {
+    return;
+  }
+  const newVariant = event.detail as ThemeVariant;
+  themeSwitcher.setVariant(newVariant);
+  selectedVariant.value = newVariant;
+};
+const toggle = () => {
+  if (useSystemTheme.value) {
+    return;
+  }
+  themeSwitcher.toggleMode();
+  selectedVariant.value = selectedVariant.value === 'light' ? 'dark' : 'light';
+};
+const systemChange = (event: CustomEvent<boolean>) => {
+  const checked = event.detail;
+  useSystemTheme.value = checked;
+  if (checked) {
+    themeSwitcher.setVariant();
+  } else {
+    themeSwitcher.setVariant(selectedVariant.value);
+  }
+};
+</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" :disabled="useSystemTheme">
+          Toggle mode
+        </IxButton>
+      </IxCol>
+    </IxRow>
+    <IxRow>
+      <IxCol :size="'2'">Theme</IxCol>
+      <IxCol>
+        <IxSelect
+          :value="selectedVariant"
+          @valueChange="valueChange"
+          :disabled="useSystemTheme"
+          placeholder="Select a theme"
+        >
+          <IxSelectItem
+            v-for="variant in variants"
+            :key="variant"
+            :label="variant"
+            :value="variant"
+          />
+        </IxSelect>
+      </IxCol>
+    </IxRow>
+    <IxRow>
+      <IxCol :size="'2'"></IxCol>
+      <IxCol>
+        <IxCheckbox label="Use system" @checkedChange="systemChange" />
+      </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, OnInit } from '@angular/core';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './theme-switcher.html',
+  styleUrls: ['./theme-switcher.css'],
+})
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
+  onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
+    const customEvent = event as CustomEvent<string>;
+    const newVariant = customEvent.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    this.selectedVariant = newVariant;
+  }
+  toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
+    themeSwitcher.toggleMode();
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
+  }
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+    if (checked) {
+      themeSwitcher.setVariant();
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
+    }
+  }
+}
+```
+#### 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()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2">Theme</ix-col>
+    <ix-col>
+      <ix-select
+        [value]="selectedVariant"
+        (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
+        placeholder="Select a theme"
+      >
+        <ix-select-item
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
+        ></ix-select-item>
+      </ix-select>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2"></ix-col>
+    <ix-col>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
+    </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 { NgForOf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+  IxSelectItem,
+  IxSelectValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxLayoutGrid,
+    IxRow,
+    IxCol,
+    IxButton,
+    IxCheckbox,
+    IxSelect,
+    IxSelectItem,
+    IxSelectValueAccessorDirective,
+    NgForOf,
+  ],
+  templateUrl: './theme-switcher.html',
+  styleUrls: ['./theme-switcher.css'],
+})
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
+  onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
+    const customEvent = event as CustomEvent<string>;
+    const newVariant = customEvent.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    this.selectedVariant = newVariant;
+  }
+  toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
+    themeSwitcher.toggleMode();
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
+  }
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+    if (checked) {
+      themeSwitcher.setVariant();
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
+    }
+  }
+}
+```
+#### 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()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2">Theme</ix-col>
+    <ix-col>
+      <ix-select
+        [value]="selectedVariant"
+        (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
+        placeholder="Select a theme"
+      >
+        <ix-select-item
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
+        ></ix-select-item>
+      </ix-select>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2"></ix-col>
+    <ix-col>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
+    </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>
+```
+## Properties
+| 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`    | `'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'` |
+| `i18nSelectListHeader`           | `i18n-select-list-header`             | Select list header                                                                                                                                              | `string`                 | `'Select an option'`      |
+| `infoText`                       | `info-text`                           | Info text for the select component                                                                                                                              | `string \| undefined`    | `undefined`               |
+| `invalidText`                    | `invalid-text`                        | Error text for the select component                                                                                                                             | `string \| undefined`    | `undefined`               |
+| `label`                          | `label`                               | Label for the select component                                                                                                                                  | `string \| undefined`    | `undefined`               |
+| `mode`                           | `mode`                                | Selection mode                                                                                                                                                  | `"multiple" \| "single"` | `'single'`                |
+| `name`                           | `name`                                | A string that represents the element's name attribute, containing a name that identifies the element when submitting the form.                                  | `string \| undefined`    | `undefined`               |
+| `readonly`                       | `readonly`                            | If true the select will be in readonly mode                                                                                                                     | `boolean`                | `false`                   |
+| `required`                       | `required`                            | A Boolean attribute indicating that an option with a non-empty string value must be selected                                                                    | `boolean`                | `false`                   |
+| `showTextAsTooltip`              | `show-text-as-tooltip`                | Show helper, error, info, warning text as tooltip                                                                                                               | `boolean \| undefined`   | `undefined`               |
+| `validText`                      | `valid-text`                          | Valid text for the select component                                                                                                                             | `string \| undefined`    | `undefined`               |
+| `value`                          | `value`                               | Current selected value. This corresponds to the value property of ix-select-items                                                                               | `string \| string[]`     | `[]`                      |
+| `warningText`                    | `warning-text`                        | Warning text for the select component                                                                                                                           | `string \| undefined`    | `undefined`               |
+## Events
+| Event         | Description                                       | Type                              |
+| ------------- | ------------------------------------------------- | --------------------------------- |
+| `addItem`     | Item added to selection                           | `CustomEvent<string>`             |
+| `inputChange` | Event dispatched whenever the text input changes. | `CustomEvent<string>`             |
+| `ixBlur`      | Blur input                                        | `CustomEvent<void>`               |
+| `valueChange` | Value changed                                     | `CustomEvent<string \| string[]>` |
+## Methods
+### `focusInput() => Promise<void>`
+Focuses the input field
+#### Returns
+Type: `Promise<void>`
+### `getNativeInputElement() => Promise<HTMLInputElement>`
+Returns the native input element used in the component.
+#### Returns
+Type: `Promise<HTMLInputElement>`
+## Dependencies
+### Used by
+ - [ix-pagination](../pagination)
+### Depends on
+- [ix-select-item](../select-item)
+- [ix-filter-chip](../filter-chip)
+- ix-field-wrapper
+- [ix-icon-button](../icon-button)
+- [ix-dropdown](../dropdown)
+- [ix-dropdown-item](../dropdown-item)
+### Graph
+```mermaid
+graph TD;
+  ix-select --> ix-select-item
+  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-pagination --> ix-select
+  style ix-select fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*