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

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

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

Files changed (5141) hide show

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

@@ -0,0 +1,3281 @@
+# 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>
+          <ix-checkbox id="system" label="Use system"></ix-checkbox>
+        </ix-col>
+      </ix-row>
+    </ix-layout-grid>
+    <script type="module">
+      import { themeSwitcher } from '@siemens/ix';
+      const variants = ['light', 'dark'];
+      let selectedVariant = 'dark';
+      let useSystemTheme = false;
+      const toggleModeButton = document.getElementById('toggle-mode');
+      const themeSelect = document.getElementById('select-theme');
+      const toggleSystem = document.getElementById('system');
+      setTimeout(() => {
+        themeSwitcher.setTheme('classic');
+        themeSwitcher.setVariant(selectedVariant);
+      });
+      for (const variant of variants) {
+        const item = document.createElement('ix-select-item');
+        item.label = variant;
+        item.value = variant;
+        themeSelect.appendChild(item);
+      }
+      themeSelect.value = selectedVariant;
+      const updateControlsState = () => {
+        toggleModeButton.disabled = useSystemTheme;
+        themeSelect.disabled = useSystemTheme;
+      };
+      toggleModeButton.addEventListener('click', () => {
+        if (useSystemTheme) {
+          return;
+        }
+        themeSwitcher.toggleMode();
+        selectedVariant = selectedVariant === 'light' ? 'dark' : 'light';
+        themeSelect.value = selectedVariant;
+      });
+      themeSelect.addEventListener('valueChange', ({ detail: variant }) => {
+        if (useSystemTheme) {
+          return;
+        }
+        themeSwitcher.setVariant(variant);
+        selectedVariant = variant;
+      });
+      toggleSystem.addEventListener('checkedChange', ({ detail: checked }) => {
+        useSystemTheme = checked;
+        if (checked) {
+          themeSwitcher.setVariant();
+        } else {
+          themeSwitcher.setVariant(selectedVariant);
+          themeSelect.value = selectedVariant;
+        }
+        updateControlsState();
+      });
+      updateControlsState();
+    </script>
+    <script type="module" src="./init.js"></script>
+  </body>
+</html>
+```
+## 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 { themeSwitcher, ThemeVariant } from '@siemens/ix';
+import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+  IxSelectItem,
+} from '@siemens/ix-react';
+import { useEffect, useState } from 'react';
+export default () => {
+  const [variants] = useState<ThemeVariant[]>(['light', 'dark']);
+  const [selectedVariant, setSelectedVariant] = useState<ThemeVariant>('dark');
+  const [useSystemTheme, setUseSystemTheme] = useState(false);
+  useEffect(() => {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(selectedVariant);
+  }, []);
+  const onValueChange = (event: CustomEvent<string | string[]>) => {
+    if (useSystemTheme) {
+      return;
+    }
+    const newVariant = event.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    setSelectedVariant(newVariant);
+  };
+  const toggle = () => {
+    if (useSystemTheme) {
+      return;
+    }
+    themeSwitcher.toggleMode();
+    const newVariant = selectedVariant === 'light' ? 'dark' : 'light';
+    setSelectedVariant(newVariant);
+  };
+  const onCheckedChange = (event: CustomEvent<boolean>) => {
+    const checked = event.detail;
+    setUseSystemTheme(checked);
+    if (checked) {
+      themeSwitcher.setVariant();
+    } else {
+      themeSwitcher.setVariant(selectedVariant);
+    }
+  };
+  return (
+    <IxLayoutGrid className="theme-switcher">
+      <IxRow>
+        <IxCol size="2">
+          <span>Light/Dark</span>
+        </IxCol>
+        <IxCol>
+          <IxButton onClick={toggle} disabled={useSystemTheme}>
+            Toggle mode
+          </IxButton>
+        </IxCol>
+      </IxRow>
+      <IxRow>
+        <IxCol size="2">Theme</IxCol>
+        <IxCol>
+          <IxSelect
+            value={selectedVariant}
+            onValueChange={onValueChange}
+            disabled={useSystemTheme}
+          >
+            {variants.map((variant) => (
+              <IxSelectItem
+                key={variant}
+                label={variant}
+                value={variant}
+              ></IxSelectItem>
+            ))}
+          </IxSelect>
+        </IxCol>
+      </IxRow>
+      <IxRow>
+        <IxCol size="2"></IxCol>
+        <IxCol>
+          <IxCheckbox label="Use system" onCheckedChange={onCheckedChange} />
+        </IxCol>
+      </IxRow>
+    </IxLayoutGrid>
+  );
+};
+```
+## 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, type ThemeVariant } from '@siemens/ix';
+import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+  IxSelectItem,
+} from '@siemens/ix-vue';
+import { onMounted, ref } from 'vue';
+const variants = ref<ThemeVariant[]>(['light', 'dark']);
+const selectedVariant = ref<ThemeVariant>('dark');
+const useSystemTheme = ref(false);
+onMounted(() => {
+  themeSwitcher.setTheme('classic');
+  themeSwitcher.setVariant(selectedVariant.value);
+});
+const valueChange = (event: CustomEvent<string | string[]>) => {
+  if (useSystemTheme.value) {
+    return;
+  }
+  const newVariant = event.detail as ThemeVariant;
+  themeSwitcher.setVariant(newVariant);
+  selectedVariant.value = newVariant;
+};
+const toggle = () => {
+  if (useSystemTheme.value) {
+    return;
+  }
+  themeSwitcher.toggleMode();
+  selectedVariant.value = selectedVariant.value === 'light' ? 'dark' : 'light';
+};
+const systemChange = (event: CustomEvent<boolean>) => {
+  const checked = event.detail;
+  useSystemTheme.value = checked;
+  if (checked) {
+    themeSwitcher.setVariant();
+  } else {
+    themeSwitcher.setVariant(selectedVariant.value);
+  }
+};
+</script>
+<style scoped src="./theme-switcher.css"></style>
+<template>
+  <IxLayoutGrid class="theme-switcher">
+    <IxRow>
+      <IxCol :size="'2'">
+        <span>Light/Dark</span>
+      </IxCol>
+      <IxCol>
+        <IxButton @click="toggle" :disabled="useSystemTheme">
+          Toggle mode
+        </IxButton>
+      </IxCol>
+    </IxRow>
+    <IxRow>
+      <IxCol :size="'2'">Theme</IxCol>
+      <IxCol>
+        <IxSelect
+          :value="selectedVariant"
+          @valueChange="valueChange"
+          :disabled="useSystemTheme"
+          placeholder="Select a theme"
+        >
+          <IxSelectItem
+            v-for="variant in variants"
+            :key="variant"
+            :label="variant"
+            :value="variant"
+          />
+        </IxSelect>
+      </IxCol>
+    </IxRow>
+    <IxRow>
+      <IxCol :size="'2'"></IxCol>
+      <IxCol>
+        <IxCheckbox label="Use system" @checkedChange="systemChange" />
+      </IxCol>
+    </IxRow>
+  </IxLayoutGrid>
+</template>
+```
+## 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, OnInit } from '@angular/core';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
+@Component({
+  standalone: false,
+  selector: 'app-example',
+  templateUrl: './theme-switcher.html',
+  styleUrls: ['./theme-switcher.css'],
+})
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
+  onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
+    const customEvent = event as CustomEvent<string>;
+    const newVariant = customEvent.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    this.selectedVariant = newVariant;
+  }
+  toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
+    themeSwitcher.toggleMode();
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
+  }
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+    if (checked) {
+      themeSwitcher.setVariant();
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
+    }
+  }
+}
+```
+#### Component template
+```html
+<ix-layout-grid class="theme-switcher">
+  <ix-row>
+    <ix-col size="2">
+      <span>Light/Dark</span>
+    </ix-col>
+    <ix-col>
+      <ix-button (click)="toggleMode()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2">Theme</ix-col>
+    <ix-col>
+      <ix-select
+        [value]="selectedVariant"
+        (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
+        placeholder="Select a theme"
+      >
+        <ix-select-item
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
+        ></ix-select-item>
+      </ix-select>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2"></ix-col>
+    <ix-col>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
+    </ix-col>
+  </ix-row>
+</ix-layout-grid>
+```
+## 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 { NgForOf } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import {
+  IxButton,
+  IxCheckbox,
+  IxCol,
+  IxLayoutGrid,
+  IxRow,
+  IxSelect,
+  IxSelectItem,
+  IxSelectValueAccessorDirective,
+} from '@siemens/ix-angular/standalone';
+import { themeSwitcher, ThemeVariant } from '@siemens/ix';
+@Component({
+  selector: 'app-example',
+  imports: [
+    IxLayoutGrid,
+    IxRow,
+    IxCol,
+    IxButton,
+    IxCheckbox,
+    IxSelect,
+    IxSelectItem,
+    IxSelectValueAccessorDirective,
+    NgForOf,
+  ],
+  templateUrl: './theme-switcher.html',
+  styleUrls: ['./theme-switcher.css'],
+})
+export default class ThemeSwitcher implements OnInit {
+  variants: ThemeVariant[] = ['light', 'dark'];
+  selectedVariant: ThemeVariant = 'dark';
+  useSystemTheme = false;
+  ngOnInit() {
+    themeSwitcher.setTheme('classic');
+    themeSwitcher.setVariant(this.selectedVariant);
+  }
+  onValueChange(event: Event) {
+    if (this.useSystemTheme) {
+      return;
+    }
+    const customEvent = event as CustomEvent<string>;
+    const newVariant = customEvent.detail as ThemeVariant;
+    themeSwitcher.setVariant(newVariant);
+    this.selectedVariant = newVariant;
+  }
+  toggleMode() {
+    if (this.useSystemTheme) {
+      return;
+    }
+    themeSwitcher.toggleMode();
+    this.selectedVariant = this.selectedVariant === 'light' ? 'dark' : 'light';
+  }
+  onSystemMode(event: CustomEvent<boolean>) {
+    const checked = event.detail;
+    this.useSystemTheme = checked;
+    if (checked) {
+      themeSwitcher.setVariant();
+    } else {
+      themeSwitcher.setVariant(this.selectedVariant);
+    }
+  }
+}
+```
+#### Component template
+```html
+<!--
+SPDX-FileCopyrightText: 2025 Siemens AG
+SPDX-License-Identifier: MIT
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-layout-grid class="theme-switcher">
+  <ix-row>
+    <ix-col size="2">
+      <span>Light/Dark</span>
+    </ix-col>
+    <ix-col>
+      <ix-button (click)="toggleMode()" [disabled]="useSystemTheme">
+        Toggle mode
+      </ix-button>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2">Theme</ix-col>
+    <ix-col>
+      <ix-select
+        [value]="selectedVariant"
+        (valueChange)="onValueChange($event)"
+        [disabled]="useSystemTheme"
+        placeholder="Select a theme"
+      >
+        <ix-select-item
+          *ngFor="let variant of variants"
+          [label]="variant"
+          [value]="variant"
+        ></ix-select-item>
+      </ix-select>
+    </ix-col>
+  </ix-row>
+  <ix-row>
+    <ix-col size="2"></ix-col>
+    <ix-col>
+      <ix-checkbox
+        label="Use system"
+        (checkedChange)="onSystemMode($event)"
+      ></ix-checkbox>
+    </ix-col>
+  </ix-row>
+</ix-layout-grid>
+```
+## Properties
+| Property   | Attribute   | Description                                                               | Type                          | Default |
+| ---------- | ----------- | ------------------------------------------------------------------------- | ----------------------------- | ------- |
+| `columns`  | `columns`   | Overwrite the default number of columns. Choose between 2 and 12 columns. | `number`                      | `12`    |
+| `gap`      | `gap`       | Grid gap                                                                  | `"12" \| "16" \| "24" \| "8"` | `'24'`  |
+| `noMargin` | `no-margin` | The grid will not have any horizontal padding                             | `boolean`                     | `false` |
+## Dependencies
+### Used by
+ - [ix-date-dropdown](../date-dropdown)
+ - [ix-datetime-picker](../datetime-picker)
+### Graph
+```mermaid
+graph TD;
+  ix-date-dropdown --> ix-layout-grid
+  ix-datetime-picker --> ix-layout-grid
+  style ix-layout-grid fill:#f9f,stroke:#333,stroke-width:4px
+```
+----------------------------------------------
+*Built with [StencilJS](https://stenciljs.com/)*