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

@siemens/ix-docs 4.0.0 → 4.2.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 (853) hide show

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

@@ -1,3159 +1,3 @@
-# ix-layout-grid
-## HTML Examples
-### 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: grid-padding
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Grid padding example</title>
-    <link rel="stylesheet" href="./grid-padding.css" />
-  </head>
-  <body>
-    <div class="grid">
-      <h4>Grid with margin</h4>
-      <ix-layout-grid>
-        <ix-row>
-          <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-        </ix-row>
-      </ix-layout-grid>
-      <h4>Grid without margin</h4>
-      <ix-layout-grid no-margin>
-        <ix-row>
-          <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-        </ix-row>
-      </ix-layout-grid>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: grid-size
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Grid size example</title>
-    <link rel="stylesheet" href="./grid-size.css" />
-  </head>
-  <body>
-    <div class="grid">
-      <h4>Column 6 takes up more space to a max of 12 columns total</h4>
-      <ix-layout-grid>
-        <ix-row>
-          <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-          <ix-col size="6"
-            ><ix-typography format="display">6</ix-typography></ix-col
-          >
-        </ix-row>
-      </ix-layout-grid>
-      <h4>Stack columns on smaller screens</h4>
-      <ix-layout-grid>
-        <ix-row>
-          <ix-col size="12" size-md="3"
-            ><ix-typography format="display">1</ix-typography></ix-col
-          >
-          <ix-col size="12" size-md="3"
-            ><ix-typography format="display">2</ix-typography></ix-col
-          >
-          <ix-col size="12" size-md="3"
-            ><ix-typography format="display">3</ix-typography></ix-col
-          >
-          <ix-col size="12" size-md="3"
-            ><ix-typography format="display">4</ix-typography></ix-col
-          >
-        </ix-row>
-      </ix-layout-grid>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: grid
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Grid example</title>
-    <link rel="stylesheet" href="./grid.css" />
-  </head>
-  <body>
-    <div class="grid">
-      <ix-layout-grid>
-        <ix-row>
-          <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-        </ix-row>
-      </ix-layout-grid>
-      <ix-layout-grid>
-        <ix-row>
-          <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-          <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-        </ix-row>
-      </ix-layout-grid>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: icon-toggle-button-primary-ghost
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Icon toggle button primary ghost example</title>
-    <link rel="stylesheet" href="./icon-toggle-button-primary-ghost.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" pressed></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled loading></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" pressed oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled loading oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: icon-toggle-button-primary-outline
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Icon toggle button primary outline example</title>
-    <link rel="stylesheet" href="./icon-toggle-button-primary-outline.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" pressed></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled loading></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" pressed oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled loading oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: icon-toggle-button-secondary-ghost
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Icon toggle button secondary ghost example</title>
-    <link rel="stylesheet" href="./icon-toggle-button-secondary-ghost.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" pressed></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled loading></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" pressed oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" disabled loading oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: icon-toggle-button-secondary-outline
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Icon toggle button secondary outline example</title>
-    <link rel="stylesheet" href="./icon-toggle-button-secondary-outline.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" pressed></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled loading></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" pressed></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" disabled></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" disabled loading></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" pressed></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" disabled></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" disabled loading></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" pressed oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" disabled loading oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" pressed oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" disabled oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" disabled loading oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" pressed oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" disabled oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" disabled loading oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: icon-toggle-button-secondary
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Icon toggle button secondary example</title>
-    <link rel="stylesheet" href="./icon-toggle-button-secondary.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          icon="checkboxes"
-          pressed
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          icon="checkboxes"
-          disabled
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          icon="checkboxes"
-          disabled
-          loading
-        ></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          icon="checkboxes"
-          pressed
-          oval
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          icon="checkboxes"
-          disabled
-          oval
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          icon="checkboxes"
-          disabled
-          loading
-          oval
-        ></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: pill-variants
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pill variant examples</title>
-    <link rel="stylesheet" href="./pill-variants.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconInfo } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconInfo,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-layout-grid>
-      <ix-row>
-        <ix-col>
-          <ix-pill icon="info"> Primary </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="subtle-primary" icon="info"> Primary </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill
-            variant="custom"
-            color="color-soft-text"
-            background="purple"
-            icon="info"
-          >
-            Custom
-          </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="custom" color="color-soft-text" background="purple" icon="info">
-            Custom
-          </ix-pill>
-        </ix-col>
-      </ix-row>
-    </ix-layout-grid>
-    <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>
-```
-## React Examples
-### 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: grid-padding
-```tsx
-import './grid-padding.scoped.css';
-import { IxCol, IxLayoutGrid, IxRow, IxTypography } from '@siemens/ix-react';
-export default () => {
-  return (
-    <div className="grid">
-      <h4>Grid with margin</h4>
-      <IxLayoutGrid>
-        <IxRow>
-          <IxCol>
-            <IxTypography format="display">1</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">2</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">3</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">4</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">5</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">6</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">7</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">8</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">9</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">10</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">11</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">12</IxTypography>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-      <h4>Grid without margin</h4>
-      <IxLayoutGrid noMargin>
-        <IxRow>
-          <IxCol>
-            <IxTypography format="display">1</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">2</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">3</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">4</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">5</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">6</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">7</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">8</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">9</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">10</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">11</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">12</IxTypography>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-    </div>
-  );
-};
-```
-### Example: grid-size
-```tsx
-import './grid-size.scoped.css';
-import { IxCol, IxLayoutGrid, IxRow, IxTypography } from '@siemens/ix-react';
-export default () => {
-  return (
-    <div className="grid">
-      <h4>Column 6 takes up more space to a max of 12 columns total</h4>
-      <IxLayoutGrid>
-        <IxRow>
-          <IxCol>
-            <IxTypography format="display">1</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">2</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">3</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">4</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">5</IxTypography>
-          </IxCol>
-          <IxCol size="6">
-            <IxTypography format="display">6</IxTypography>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-      <h4>Stack columns on smaller screens</h4>
-      <IxLayoutGrid>
-        <IxRow>
-          <IxCol size="12" size-md="3">
-            <IxTypography format="display">1</IxTypography>
-          </IxCol>
-          <IxCol size="12" size-md="3">
-            <IxTypography format="display">2</IxTypography>
-          </IxCol>
-          <IxCol size="12" size-md="3">
-            <IxTypography format="display">3</IxTypography>
-          </IxCol>
-          <IxCol size="12" size-md="3">
-            <IxTypography format="display">4</IxTypography>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-    </div>
-  );
-};
-```
-### Example: grid
-```tsx
-import './grid.scoped.css';
-import { IxCol, IxLayoutGrid, IxRow, IxTypography } from '@siemens/ix-react';
-export default () => {
-  return (
-    <div className="grid">
-      <IxLayoutGrid>
-        <IxRow>
-          <IxCol>
-            <IxTypography format="display">1</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">2</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">3</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">4</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">5</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">6</IxTypography>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-      <IxLayoutGrid>
-        <IxRow>
-          <IxCol>
-            <IxTypography format="display">1</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">2</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">3</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">4</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">5</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">6</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">7</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">8</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">9</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">10</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">11</IxTypography>
-          </IxCol>
-          <IxCol>
-            <IxTypography format="display">12</IxTypography>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-    </div>
-  );
-};
-```
-### Example: icon-toggle-button-primary-ghost
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import './icon-toggle-button-primary-ghost.scoped.css';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutGrid>
-      <IxRow>
-        <IxIconToggleButton variant="tertiary" icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled loading icon={iconCheckboxes}></IxIconToggleButton>
-      </IxRow>
-      <IxRow>
-        <IxIconToggleButton variant="tertiary" icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" pressed icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled loading icon={iconCheckboxes} oval></IxIconToggleButton>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: icon-toggle-button-primary-outline
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import './icon-toggle-button-primary-outline.scoped.css';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutGrid>
-      <IxRow>
-        <IxIconToggleButton variant="subtle-primary" icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled loading icon={iconCheckboxes}></IxIconToggleButton>
-      </IxRow>
-      <IxRow>
-        <IxIconToggleButton variant="subtle-primary" icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" pressed icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled loading icon={iconCheckboxes} oval></IxIconToggleButton>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: icon-toggle-button-secondary-ghost
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import './icon-toggle-button-secondary-ghost.scoped.css';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutGrid>
-      <IxRow>
-        <IxIconToggleButton variant="tertiary" icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled loading icon={iconCheckboxes}></IxIconToggleButton>
-      </IxRow>
-      <IxRow>
-        <IxIconToggleButton variant="tertiary" icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" pressed icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="tertiary" disabled loading icon={iconCheckboxes} oval></IxIconToggleButton>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: icon-toggle-button-secondary-outline
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import './icon-toggle-button-secondary-outline.scoped.css';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutGrid>
-      <IxRow>
-        <IxIconToggleButton variant="subtle-primary" icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled loading icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" disabled loading icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" disabled loading icon={iconCheckboxes}></IxIconToggleButton>
-      </IxRow>
-      <IxRow>
-        <IxIconToggleButton variant="subtle-primary" icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" pressed icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" disabled loading icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" pressed icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" disabled icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="16" disabled loading icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" pressed icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" disabled icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton variant="subtle-primary" size="12" disabled loading icon={iconCheckboxes} oval></IxIconToggleButton>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: icon-toggle-button-secondary
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import './icon-toggle-button-secondary.scoped.css';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutGrid>
-      <IxRow>
-        <IxIconToggleButton icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton pressed icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton disabled icon={iconCheckboxes}></IxIconToggleButton>
-        <IxIconToggleButton
-          disabled
-          loading
-          icon={iconCheckboxes}
-        ></IxIconToggleButton>
-      </IxRow>
-      <IxRow>
-        <IxIconToggleButton icon={iconCheckboxes} oval></IxIconToggleButton>
-        <IxIconToggleButton
-          pressed
-          icon={iconCheckboxes}
-          oval
-        ></IxIconToggleButton>
-        <IxIconToggleButton
-          disabled
-          icon={iconCheckboxes}
-          oval
-        ></IxIconToggleButton>
-        <IxIconToggleButton
-          disabled
-          loading
-          icon={iconCheckboxes}
-          oval
-        ></IxIconToggleButton>
-      </IxRow>
-    </IxLayoutGrid>
-  );
-};
-```
-### Example: pill-variants
-```tsx
-import { iconInfo } from '@siemens/ix-icons/icons';
-import './pill-variants.scoped.css';
-import { IxCol, IxLayoutGrid, IxPill, IxRow } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxLayoutGrid>
-        <IxRow>
-          <IxCol>
-            <IxPill icon={iconInfo}>Primary</IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="subtle-primary" icon={iconInfo}>
-              Primary
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill variant="alarm" icon={iconInfo}>
-              Alarm
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="alarm" icon={iconInfo}>
-              Alarm
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill variant="critical" icon={iconInfo}>
-              Critical
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="critical" icon={iconInfo}>
-              Critical
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill variant="warning" icon={iconInfo}>
-              Warning
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="warning" icon={iconInfo}>
-              Warning
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill variant="success" icon={iconInfo}>
-              Success
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="success" icon={iconInfo}>
-              Success
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill variant="info" icon={iconInfo}>
-              Info
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="info" icon={iconInfo}>
-              Info
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill variant="neutral" icon={iconInfo}>
-              Neutral
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="neutral" icon={iconInfo}>
-              Neutral
-            </IxPill>
-          </IxCol>
-        </IxRow>
-        <IxRow>
-          <IxCol>
-            <IxPill
-              variant="custom"
-              color="color-soft-text"
-              background="purple"
-              icon={iconInfo}
-            >
-              Custom
-            </IxPill>
-          </IxCol>
-          <IxCol>
-            <IxPill variant="custom" color="color-soft-text" background="purple" icon={iconInfo}>
-              Custom
-            </IxPill>
-          </IxCol>
-        </IxRow>
-      </IxLayoutGrid>
-    </>
-  );
-};
-```
-### 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>
-  );
-};
-```
-## Vue Examples
-### 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: grid-padding
-```tsx
-<script setup lang="ts">
-import { IxCol, IxLayoutGrid, IxRow, IxTypography } from '@siemens/ix-vue';
-</script>
-<style scoped src="./grid-padding.css"></style>
-<template>
-  <div class="grid">
-    <h4>Grid with margin</h4>
-    <IxLayoutGrid>
-      <IxRow>
-        <IxCol><IxTypography format="display">1</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">2</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">3</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">4</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">5</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">6</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">7</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">8</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">9</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">10</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">11</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">12</IxTypography></IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-    <h4>Grid without margin</h4>
-    <IxLayoutGrid noMargin>
-      <IxRow>
-        <IxCol><IxTypography format="display">1</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">2</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">3</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">4</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">5</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">6</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">7</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">8</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">9</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">10</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">11</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">12</IxTypography></IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-  </div>
-</template>
-```
-### Example: grid-size
-```tsx
-<script setup lang="ts">
-import { IxCol, IxLayoutGrid, IxRow, IxTypography } from '@siemens/ix-vue';
-</script>
-<style scoped src="./grid-size.css"></style>
-<template>
-  <div class="grid">
-    <h4>Column 6 takes up more space to a max of 12 columns total</h4>
-    <IxLayoutGrid>
-      <IxRow>
-        <IxCol><IxTypography format="display">1</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">2</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">3</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">4</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">5</IxTypography></IxCol>
-        <IxCol size="6"><IxTypography format="display">6</IxTypography></IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-    <h4>Stack columns on smaller screens</h4>
-    <IxLayoutGrid>
-      <IxRow>
-        <IxCol size="12" size-md="3">
-          <IxTypography format="display">1</IxTypography>
-        </IxCol>
-        <IxCol size="12" size-md="3">
-          <IxTypography format="display">2</IxTypography>
-        </IxCol>
-        <IxCol size="12" size-md="3">
-          <IxTypography format="display">3</IxTypography>
-        </IxCol>
-        <IxCol size="12" size-md="3">
-          <IxTypography format="display">4</IxTypography>
-        </IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-  </div>
-</template>
-```
-### Example: grid
-```tsx
-<script setup lang="ts">
-import { IxCol, IxLayoutGrid, IxRow, IxTypography } from '@siemens/ix-vue';
-</script>
-<style scoped src="./grid.css"></style>
-<template>
-  <div class="grid">
-    <IxLayoutGrid>
-      <IxRow>
-        <IxCol><IxTypography format="display">1</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">2</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">3</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">4</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">5</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">6</IxTypography></IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-    <IxLayoutGrid>
-      <IxRow>
-        <IxCol><IxTypography format="display">1</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">2</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">3</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">4</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">5</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">6</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">7</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">8</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">9</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">10</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">11</IxTypography></IxCol>
-        <IxCol><IxTypography format="display">12</IxTypography></IxCol>
-      </IxRow>
-    </IxLayoutGrid>
-  </div>
-</template>
-```
-### Example: icon-toggle-button-primary-ghost
-```tsx
-<script setup lang="ts">
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-vue';
-</script>
-<style scoped src="./icon-toggle-button-primary-ghost.css"></style>
-<template>
-  <IxLayoutGrid>
-    <IxRow>
-      <IxIconToggleButton variant="tertiary" :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" pressed :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled loading :icon="iconCheckboxes"></IxIconToggleButton>
-    </IxRow>
-    <IxRow>
-      <IxIconToggleButton variant="tertiary" :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" pressed :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled loading :icon="iconCheckboxes" oval></IxIconToggleButton>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: icon-toggle-button-primary-outline
-```tsx
-<script setup lang="ts">
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-vue';
-</script>
-<style scoped src="./icon-toggle-button-primary-outline.css"></style>
-<template>
-  <IxLayoutGrid>
-    <IxRow>
-      <IxIconToggleButton variant="subtle-primary" :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" pressed :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled loading :icon="iconCheckboxes"></IxIconToggleButton>
-    </IxRow>
-    <IxRow>
-      <IxIconToggleButton variant="subtle-primary" :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" pressed :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled loading :icon="iconCheckboxes" oval></IxIconToggleButton>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: icon-toggle-button-secondary-ghost
-```tsx
-<script setup lang="ts">
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-vue';
-</script>
-<style scoped src="./icon-toggle-button-secondary-ghost.css"></style>
-<template>
-  <IxLayoutGrid>
-    <IxRow>
-      <IxIconToggleButton variant="tertiary" :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" pressed :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled loading :icon="iconCheckboxes"></IxIconToggleButton>
-    </IxRow>
-    <IxRow>
-      <IxIconToggleButton variant="tertiary" :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" pressed :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="tertiary" disabled loading :icon="iconCheckboxes" oval></IxIconToggleButton>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: icon-toggle-button-secondary-outline
-```tsx
-<script setup lang="ts">
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-vue';
-</script>
-<style scoped src="./icon-toggle-button-secondary-outline.css"></style>
-<template>
-  <IxLayoutGrid>
-    <IxRow>
-      <IxIconToggleButton variant="subtle-primary" :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" :icon="iconCheckboxes" pressed></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled loading :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" pressed :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" disabled loading :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" pressed :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" disabled loading :icon="iconCheckboxes"></IxIconToggleButton>
-    </IxRow>
-    <IxRow>
-      <IxIconToggleButton variant="subtle-primary" :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" :icon="iconCheckboxes" pressed oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" disabled loading :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" pressed :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" disabled :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="16" disabled loading :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" pressed :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" disabled :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton variant="subtle-primary" size="12" disabled loading :icon="iconCheckboxes" oval></IxIconToggleButton>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: icon-toggle-button-secondary
-```tsx
-<script setup lang="ts">
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import { IxIconToggleButton, IxLayoutGrid, IxRow } from '@siemens/ix-vue';
-</script>
-<style scoped src="./icon-toggle-button-secondary.css"></style>
-<template>
-  <IxLayoutGrid>
-    <IxRow>
-      <IxIconToggleButton :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton pressed :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton disabled :icon="iconCheckboxes"></IxIconToggleButton>
-      <IxIconToggleButton
-        disabled
-        loading
-        :icon="iconCheckboxes"
-      ></IxIconToggleButton>
-    </IxRow>
-    <IxRow>
-      <IxIconToggleButton :icon="iconCheckboxes" oval></IxIconToggleButton>
-      <IxIconToggleButton
-        pressed
-        :icon="iconCheckboxes"
-        oval
-      ></IxIconToggleButton>
-      <IxIconToggleButton
-        disabled
-        :icon="iconCheckboxes"
-        oval
-      ></IxIconToggleButton>
-      <IxIconToggleButton
-        disabled
-        loading
-        :icon="iconCheckboxes"
-        oval
-      ></IxIconToggleButton>
-    </IxRow>
-  </IxLayoutGrid>
-</template>
-```
-### Example: pill-variants
-```tsx
-<script setup lang="ts">
-import { iconInfo } from '@siemens/ix-icons/icons';
-import { IxCol, IxLayoutGrid, IxPill, IxRow } from '@siemens/ix-vue';
-</script>
-<style scoped src="./pill-variants.css"></style>
-<template>
-  <IxLayoutGrid>
-    <IxRow>
-      <IxCol>
-        <IxPill :icon="iconInfo"> Primary </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="subtle-primary" :icon="iconInfo"> Primary </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill variant="alarm" :icon="iconInfo"> Alarm </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="alarm" :icon="iconInfo"> Alarm </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill variant="critical" :icon="iconInfo"> Critical </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="critical" :icon="iconInfo"> Critical </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill variant="warning" :icon="iconInfo"> Warning </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="warning" :icon="iconInfo"> Warning </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill variant="success" :icon="iconInfo"> Success </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="success" :icon="iconInfo"> Success </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill variant="info" :icon="iconInfo"> Info </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="info" :icon="iconInfo"> Info </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill variant="neutral" :icon="iconInfo"> Neutral </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="neutral" :icon="iconInfo"> Neutral </IxPill>
-      </IxCol>
-    </IxRow>
-    <IxRow>
-      <IxCol>
-        <IxPill
-          variant="custom"
-          color="color-soft-text"
-          background="purple"
-          :icon="iconInfo"
-        >
-          Custom
-        </IxPill>
-      </IxCol>
-      <IxCol>
-        <IxPill variant="custom" color="color-soft-text" background="purple" :icon="iconInfo">
-          Custom
-        </IxPill>
-      </IxCol>
-    </IxRow>
-  </IxLayoutGrid>
-</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>
-```
-## Angular Examples
-### 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: grid-padding
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './grid-padding.html',
-  styleUrls: ['./grid-padding.css'],
-})
-export default class GridPadding {}
-```
-#### 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 class="grid">
-  <h4>Grid with margin</h4>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-  <h4>Grid without margin</h4>
-  <ix-layout-grid no-margin>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-</div>
-```
-### Example: grid-size
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './grid-size.html',
-  styleUrls: ['./grid-size.css'],
-})
-export default class GridSize {}
-```
-#### 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 class="grid">
-  <h4>Column 6 takes up more space to a max of 12 columns total</h4>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col size="6"
-        ><ix-typography format="display">6</ix-typography></ix-col
-      >
-    </ix-row>
-  </ix-layout-grid>
-  <h4>Stack columns on smaller screens</h4>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">1</ix-typography></ix-col
-      >
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">2</ix-typography></ix-col
-      >
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">3</ix-typography></ix-col
-      >
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">4</ix-typography></ix-col
-      >
-    </ix-row>
-  </ix-layout-grid>
-</div>
-```
-### Example: grid
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './grid.html',
-  styleUrls: ['./grid.css'],
-})
-export default class Grid {}
-```
-#### 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 class="grid">
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-</div>
-```
-### Example: icon-toggle-button-primary-ghost
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" oval icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed oval icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled oval icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading oval icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-primary-ghost.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-primary-outline
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-primary-outline.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-secondary-ghost
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-secondary-ghost.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-secondary-outline
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-secondary-outline.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-secondary
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          pressed
-          icon="checkboxes"
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          icon="checkboxes"
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          loading
-          icon="checkboxes"
-        ></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          pressed
-          icon="checkboxes"
-          oval
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          icon="checkboxes"
-          oval
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          loading
-          icon="checkboxes"
-          oval
-        ></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-secondary.css'],
-})
-export default class Buttons {}
-```
-### Example: pill-variants
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  styleUrls: ['./pill-variants.css'],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-col>
-          <ix-pill icon="info"> Primary </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="subtle-primary" icon="info"> Primary </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill
-            variant="custom"
-            color="color-soft-text"
-            background="purple"
-            icon="info"
-          >
-            Custom
-          </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="custom" color="color-soft-text" background="purple" icon="info">
-            Custom
-          </ix-pill>
-        </ix-col>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-})
-export default class Pill {}
-```
-### 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>
-```
-## Angular Standalone Examples
-### 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: grid-padding
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxLayoutGrid,
-  IxRow,
-  IxCol,
-  IxTypography,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxLayoutGrid, IxRow, IxCol, IxTypography],
-  templateUrl: './grid-padding.html',
-  styleUrls: ['./grid-padding.css'],
-})
-export default class GridPadding {}
-```
-#### 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 class="grid">
-  <h4>Grid with margin</h4>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-  <h4>Grid without margin</h4>
-  <ix-layout-grid no-margin>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-</div>
-```
-### Example: grid-size
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxLayoutGrid,
-  IxRow,
-  IxCol,
-  IxTypography,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxLayoutGrid, IxRow, IxCol, IxTypography],
-  templateUrl: './grid-size.html',
-  styleUrls: ['./grid-size.css'],
-})
-export default class GridSize {}
-```
-#### 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 class="grid">
-  <h4>Column 6 takes up more space to a max of 12 columns total</h4>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col size="6"
-        ><ix-typography format="display">6</ix-typography></ix-col
-      >
-    </ix-row>
-  </ix-layout-grid>
-  <h4>Stack columns on smaller screens</h4>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">1</ix-typography></ix-col
-      >
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">2</ix-typography></ix-col
-      >
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">3</ix-typography></ix-col
-      >
-      <ix-col size="12" size-md="3"
-        ><ix-typography format="display">4</ix-typography></ix-col
-      >
-    </ix-row>
-  </ix-layout-grid>
-</div>
-```
-### Example: grid
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxLayoutGrid,
-  IxRow,
-  IxCol,
-  IxTypography,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxLayoutGrid, IxRow, IxCol, IxTypography],
-  templateUrl: './grid.html',
-  styleUrls: ['./grid.css'],
-})
-export default class Grid {}
-```
-#### 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 class="grid">
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-  <ix-layout-grid>
-    <ix-row>
-      <ix-col><ix-typography format="display">1</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">2</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">3</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">4</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">5</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">6</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">7</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">8</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">9</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">10</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">11</ix-typography></ix-col>
-      <ix-col><ix-typography format="display">12</ix-typography></ix-col>
-    </ix-row>
-  </ix-layout-grid>
-</div>
-```
-### Example: icon-toggle-button-primary-ghost
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxIconToggleButton,
-  IxLayoutGrid,
-  IxRow,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxIconToggleButton, IxLayoutGrid, IxRow],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-primary-ghost.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-primary-outline
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxIconToggleButton,
-  IxLayoutGrid,
-  IxRow,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxIconToggleButton, IxLayoutGrid, IxRow],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-primary-outline.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-secondary-ghost
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxIconToggleButton,
-  IxLayoutGrid,
-  IxRow,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxIconToggleButton, IxLayoutGrid, IxRow],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="tertiary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="tertiary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-secondary-ghost.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-secondary-outline
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxIconToggleButton,
-  IxLayoutGrid,
-  IxRow,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxIconToggleButton, IxLayoutGrid, IxRow],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" pressed icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled loading icon="checkboxes"></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button variant="subtle-primary" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="16" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" pressed icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button variant="subtle-primary" size="12" disabled loading icon="checkboxes" oval></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-secondary-outline.css'],
-})
-export default class Buttons {}
-```
-### Example: icon-toggle-button-secondary
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxIconToggleButton,
-  IxLayoutGrid,
-  IxRow,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxIconToggleButton, IxLayoutGrid, IxRow],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-icon-toggle-button icon="checkboxes"></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          pressed
-          icon="checkboxes"
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          icon="checkboxes"
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          loading
-          icon="checkboxes"
-        ></ix-icon-toggle-button>
-      </ix-row>
-      <ix-row>
-        <ix-icon-toggle-button icon="checkboxes" oval></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          pressed
-          icon="checkboxes"
-          oval
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          icon="checkboxes"
-          oval
-        ></ix-icon-toggle-button>
-        <ix-icon-toggle-button
-          disabled
-          loading
-          icon="checkboxes"
-          oval
-        ></ix-icon-toggle-button>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-  styleUrls: ['./icon-toggle-button-secondary.css'],
-})
-export default class Buttons {}
-```
-### Example: pill-variants
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxLayoutGrid,
-  IxRow,
-  IxCol,
-  IxPill,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxLayoutGrid, IxRow, IxCol, IxPill],
-  styleUrls: ['./pill-variants.css'],
-  template: `
-    <ix-layout-grid>
-      <ix-row>
-        <ix-col>
-          <ix-pill icon="info"> Primary </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="subtle-primary" icon="info"> Primary </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="alarm" icon="info"> Alarm </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="critical" icon="info"> Critical </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="warning" icon="info"> Warning </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="success" icon="info"> Success </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="info" icon="info"> Info </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="neutral" icon="info"> Neutral </ix-pill>
-        </ix-col>
-      </ix-row>
-      <ix-row>
-        <ix-col>
-          <ix-pill
-            variant="custom"
-            color="color-soft-text"
-            background="purple"
-            icon="info"
-          >
-            Custom
-          </ix-pill>
-        </ix-col>
-        <ix-col>
-          <ix-pill variant="custom" color="color-soft-text" background="purple" icon="info">
-            Custom
-          </ix-pill>
-        </ix-col>
-      </ix-row>
-    </ix-layout-grid>
-  `,
-})
-export default class Pill {}
-```
-### 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>
-```
 <!-- Auto Generated Below -->