npm - @siemens/ix-docs - Versions diffs - 0.0.0-pr-2238-20251103105018 → 4.1.0 - Mend

@siemens/ix-docs 0.0.0-pr-2238-20251103105018 → 4.1.0

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

Files changed (996) hide show

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

@@ -1,1998 +1,3 @@
-# ix-typography
-## HTML Examples
-### Example: card
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Card example</title>
-    <link rel="stylesheet" href="./card.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCapacity } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCapacity,
-      });
-    </script>
-  </head>
-  <body>
-    <div class="card-example">
-      <ix-card variant="outline">
-        <ix-card-content>
-          <ix-icon name="capacity"></ix-icon>
-          <ix-typography bold>Number of components</ix-typography>
-          <ix-typography>
-            Vanilla JavaScript<br />
-            Angular<br />
-            Blazor<br />
-            React<br />
-            Vue.js
-          </ix-typography>
-          <ix-typography format="h1">123</ix-typography>
-        </ix-card-content>
-      </ix-card>
-    </div>
-    <script type="module">
-      (async () => {
-        await window.customElements.whenDefined('ix-card');
-        const cardElement = document.querySelector('ix-card');
-        cardElement.addEventListener('click', console.log);
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: date-input-with-slots
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Date input with slots example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconBulb } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconBulb,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-date-input value="1970/01/01">
-      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
-      <ix-typography slot="end">Slot</ix-typography>
-    </ix-date-input>
-    <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: input-with-slots
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Input with slots example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconBulb } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconBulb,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-input>
-      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
-      <ix-typography slot="end">unit</ix-typography>
-    </ix-input>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: layout-auto-custom
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Layout auto custom example</title>
-    <link rel="stylesheet" href="./layout-auto.css" />
-  </head>
-  <body>
-    <ix-layout-auto>
-      <ix-typography format="display">1</ix-typography>
-      <ix-typography format="display">2</ix-typography>
-      <ix-typography format="display">3</ix-typography>
-      <ix-typography format="display" data-colspan="4">4</ix-typography>
-      <ix-typography format="display">5</ix-typography>
-      <ix-typography format="display">6</ix-typography>
-    </ix-layout-auto>
-    <script>
-      const autoLayout = document.querySelector('ix-layout-auto');
-      autoLayout.layout = [
-        { minWidth: '0', columns: 1 },
-        { minWidth: '35rem', columns: 2 },
-        { minWidth: '50rem', columns: 4 },
-      ];
-    </script>
-    <style>
-      ix-layout-auto > ix-typography {
-        display: flex;
-        padding: 0.15rem;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        align-self: stretch;
-        border: 1px solid var(--theme-color-soft-bdr);
-        background: var(--theme-color-ghost);
-        border-radius: 3px;
-      }
-    </style>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: layout-auto
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Layout auto example</title>
-    <link rel="stylesheet" href="./layout-auto.css" />
-  </head>
-  <body>
-    <ix-layout-auto>
-      <ix-typography format="display">1</ix-typography>
-      <ix-typography format="display">2</ix-typography>
-      <ix-typography format="display">3</ix-typography>
-      <ix-typography format="display" data-colspan="2">4</ix-typography>
-      <ix-typography format="display">5</ix-typography>
-      <ix-typography format="display">6</ix-typography>
-    </ix-layout-auto>
-    <style>
-      ix-layout-auto > ix-typography {
-        display: flex;
-        padding: 0.15rem;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        align-self: stretch;
-        border: 1px solid var(--theme-color-soft-bdr);
-        background: var(--theme-color-ghost);
-        border-radius: 3px;
-      }
-    </style>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: number-input-with-slots
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Number input with slots example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconBulb } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconBulb,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-number-input>
-      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
-      <ix-typography slot="end">unit</ix-typography>
-    </ix-number-input>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: time-input-with-slots
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Time input with slots example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconBulb } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconBulb,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-time-input>
-      <ix-icon slot="start" name="bulb" size="16"></ix-icon>
-      <ix-typography slot="end">Slot</ix-typography>
-    </ix-time-input>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: card
-```tsx
-import './card.scoped.css';
-import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-react';
-import { iconCapacity } from '@siemens/ix-icons/icons';
-export default () => {
-  return (
-    <IxCard variant="outline" onClick={console.log}>
-      <IxCardContent>
-        <IxIcon name={iconCapacity}></IxIcon>
-        <IxTypography bold>Number of components</IxTypography>
-        <IxTypography>
-          Vanilla JavaScript
-          <br />
-          Angular
-          <br />
-          Blazor
-          <br />
-          React
-          <br />
-          Vue.js
-        </IxTypography>
-        <IxTypography format="h1">123</IxTypography>
-      </IxCardContent>
-    </IxCard>
-  );
-};
-```
-### Example: date-input-with-slots
-```tsx
-import { IxDateInput, IxIcon, IxTypography } from '@siemens/ix-react';
-import { iconBulb } from '@siemens/ix-icons/icons';
-export default () => {
-  return (
-    <IxDateInput value="1970/01/01">
-      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
-      <IxTypography slot="end">Slot</IxTypography>
-    </IxDateInput>
-  );
-};
-```
-### 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: input-with-slots
-```tsx
-import { IxIcon, IxInput, IxTypography } from '@siemens/ix-react';
-import { iconBulb } from '@siemens/ix-icons/icons';
-export default () => {
-  return (
-    <IxInput>
-      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
-      <IxTypography slot="end">unit</IxTypography>
-    </IxInput>
-  );
-};
-```
-### Example: layout-auto-custom
-```tsx
-import './layout-auto.scoped.css';
-import { IxLayoutAuto, IxTypography } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutAuto
-      className="LayoutExample"
-      layout={[
-        { minWidth: '0', columns: 1 },
-        { minWidth: '560px', columns: 2 },
-        { minWidth: '800px', columns: 4 },
-      ]}
-    >
-      <IxTypography format="display">1</IxTypography>
-      <IxTypography format="display">2</IxTypography>
-      <IxTypography format="display">3</IxTypography>
-      <IxTypography format="display" data-colspan="2">
-        4
-      </IxTypography>
-      <IxTypography format="display">5</IxTypography>
-      <IxTypography format="display">6</IxTypography>
-    </IxLayoutAuto>
-  );
-};
-```
-### Example: layout-auto
-```tsx
-import './layout-auto.scoped.css';
-import { IxLayoutAuto, IxTypography } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxLayoutAuto className="LayoutExample">
-      <IxTypography format="display">1</IxTypography>
-      <IxTypography format="display">2</IxTypography>
-      <IxTypography format="display">3</IxTypography>
-      <IxTypography format="display" data-colspan="2">
-        4
-      </IxTypography>
-      <IxTypography format="display">5</IxTypography>
-      <IxTypography format="display">6</IxTypography>
-    </IxLayoutAuto>
-  );
-};
-```
-### Example: number-input-with-slots
-```tsx
-import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-react';
-import { iconBulb } from '@siemens/ix-icons/icons';
-export default () => {
-  return (
-    <IxNumberInput>
-      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
-      <IxTypography slot="end">unit</IxTypography>
-    </IxNumberInput>
-  );
-};
-```
-### Example: time-input-with-slots
-```tsx
-import { IxTimeInput, IxIcon, IxTypography } from '@siemens/ix-react';
-import { iconBulb } from '@siemens/ix-icons/icons';
-export default () => {
-  return (
-    <IxTimeInput>
-      <IxIcon name={iconBulb} slot="start" size="16"></IxIcon>
-      <IxTypography slot="end">Slot</IxTypography>
-    </IxTimeInput>
-  );
-};
-```
-## Vue Examples
-### Example: card
-```tsx
-<script setup lang="ts">
-import { iconCapacity } from '@siemens/ix-icons/icons';
-import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-vue';
-const onClick = (event: Event) => {
-  console.log(event);
-};
-</script>
-<style scoped src="./card.css"></style>
-<template>
-  <IxCard variant="outline" @click="onClick">
-    <IxCardContent>
-      <IxIcon :name="iconCapacity"></IxIcon>
-      <IxTypography bold>Number of components</IxTypography>
-      <IxTypography>
-        Vanilla JavaScript<br />
-        Angular<br />
-        Blazor<br />
-        React<br />
-        Vue.js
-      </IxTypography>
-      <IxTypography format="h1">123</IxTypography>
-    </IxCardContent>
-  </IxCard>
-</template>
-```
-### Example: date-input-with-slots
-```tsx
-<script setup lang="ts">
-import { iconBulb } from '@siemens/ix-icons/icons';
-import { IxDateInput, IxIcon, IxTypography } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxDateInput value="1970/01/01">
-    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
-    <IxTypography slot="end">Slot</IxTypography>
-  </IxDateInput>
-</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: input-with-slots
-```tsx
-<script setup lang="ts">
-import { iconBulb } from '@siemens/ix-icons/icons';
-import { IxInput, IxIcon, IxTypography } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxInput>
-    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
-    <IxTypography slot="end">unit</IxTypography>
-  </IxInput>
-</template>
-```
-### Example: layout-auto-custom
-```tsx
-<script setup lang="ts">
-import { IxLayoutAuto, IxTypography } from '@siemens/ix-vue';
-const layout = [
-  { minWidth: '0', columns: 1 },
-  { minWidth: '560px', columns: 2 },
-  { minWidth: '800px', columns: 4 },
-];
-</script>
-<style scoped src="./layout-auto.css"></style>
-<template>
-  <IxLayoutAuto className="LayoutExample" :layout="layout">
-    <IxTypography format="display">1</IxTypography>
-    <IxTypography format="display">2</IxTypography>
-    <IxTypography format="display">3</IxTypography>
-    <IxTypography format="display" data-colspan="2"> 4 </IxTypography>
-    <IxTypography format="display">5</IxTypography>
-    <IxTypography format="display">6</IxTypography>
-  </IxLayoutAuto>
-</template>
-```
-### Example: layout-auto
-```tsx
-<script setup lang="ts">
-import { IxLayoutAuto, IxTypography } from '@siemens/ix-vue';
-</script>
-<style scoped src="./layout-auto.css"></style>
-<template>
-  <IxLayoutAuto className="LayoutExample">
-    <IxTypography format="display">1</IxTypography>
-    <IxTypography format="display">2</IxTypography>
-    <IxTypography format="display">3</IxTypography>
-    <IxTypography format="display" data-colspan="2"> 4 </IxTypography>
-    <IxTypography format="display">5</IxTypography>
-    <IxTypography format="display">6</IxTypography>
-  </IxLayoutAuto>
-</template>
-```
-### Example: number-input-with-slots
-```tsx
-<script setup lang="ts">
-import { iconBulb } from '@siemens/ix-icons/icons';
-import { IxIcon, IxNumberInput, IxTypography } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxNumberInput>
-    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
-    <IxTypography slot="end">unit</IxTypography>
-  </IxNumberInput>
-</template>
-```
-### Example: time-input-with-slots
-```tsx
-<script setup lang="ts">
-import { iconBulb } from '@siemens/ix-icons/icons';
-import { IxTimeInput, IxIcon, IxTypography } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxTimeInput>
-    <IxIcon :name="iconBulb" slot="start" size="16"></IxIcon>
-    <IxTypography slot="end">Slot</IxTypography>
-  </IxTimeInput>
-</template>
-```
-## Angular Examples
-### Example: card
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './card.html',
-  styleUrls: ['./card.css'],
-})
-export default class Card {
-  onClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-#### 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.
--->
-<ix-card (click)="onClick($event)" variant="outline">
-  <ix-card-content>
-    <ix-icon name="capacity"></ix-icon>
-    <ix-typography bold>Number of components</ix-typography>
-    <ix-typography>
-      Vanilla JavaScript<br />
-      Angular<br />
-      Blazor<br />
-      React<br />
-      Vue.js
-    </ix-typography>
-    <ix-typography format="h1">123</ix-typography>
-  </ix-card-content>
-</ix-card>
-```
-### Example: date-input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './date-input-with-slots.html',
-})
-export default class DateInputWithSlots {}
-```
-#### 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.
--->
-<ix-date-input value="1970/01/01">
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">Slot</ix-typography>
-</ix-date-input>
-```
-### 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: input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './input-with-slots.html',
-})
-export default class InputWithSlots {}
-```
-#### 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.
--->
-<ix-input>
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">unit</ix-typography>
-</ix-input>
-```
-### Example: layout-auto-custom
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './layout-auto-custom.html',
-  styleUrls: ['./layout-auto.css'],
-})
-export default class LayoutAutoCustom {
-  layout = [
-    { minWidth: '0', columns: 1 },
-    { minWidth: '35rem', columns: 2 },
-    { minWidth: '50rem', columns: 4 },
-  ];
-}
-```
-#### 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.
--->
-<ix-layout-auto [layout]="layout">
-  <ix-typography format="display">1</ix-typography>
-  <ix-typography format="display">2</ix-typography>
-  <ix-typography format="display">3</ix-typography>
-  <ix-typography format="display" data-colspan="2">4</ix-typography>
-  <ix-typography format="display">5</ix-typography>
-  <ix-typography format="display">6</ix-typography>
-</ix-layout-auto>
-```
-### Example: layout-auto
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './layout-auto.html',
-  styleUrls: ['./layout-auto.css'],
-})
-export default class LayoutAuto {}
-```
-#### 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.
--->
-<ix-layout-auto>
-  <ix-typography format="display">1</ix-typography>
-  <ix-typography format="display">2</ix-typography>
-  <ix-typography format="display">3</ix-typography>
-  <ix-typography format="display" data-colspan="2">4</ix-typography>
-  <ix-typography format="display">5</ix-typography>
-  <ix-typography format="display">6</ix-typography>
-</ix-layout-auto>
-```
-### Example: number-input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './number-input-with-slots.html',
-})
-export default class NumberInputWithSlots {}
-```
-#### 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.
--->
-<ix-number-input>
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">unit</ix-typography>
-</ix-number-input>
-```
-### Example: time-input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './time-input-with-slots.html',
-})
-export default class TimeInputWithSlots {}
-```
-#### 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-time-input>
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">Slot</ix-typography>
-</ix-time-input>
-```
-## Angular Standalone Examples
-### Example: card
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxCard,
-  IxCardContent,
-  IxIcon,
-  IxTypography,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxCard, IxCardContent, IxIcon, IxTypography],
-  templateUrl: './card.html',
-  styleUrls: ['./card.css'],
-})
-export default class Card {
-  onClick(event: Event) {
-    console.log(event);
-  }
-}
-```
-#### 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-card (click)="onClick($event)" variant="outline">
-  <ix-card-content>
-    <ix-icon name="capacity"></ix-icon>
-    <ix-typography bold>Number of components</ix-typography>
-    <ix-typography>
-      Vanilla JavaScript<br />
-      Angular<br />
-      Blazor<br />
-      React<br />
-      Vue.js
-    </ix-typography>
-    <ix-typography format="h1">123</ix-typography>
-  </ix-card-content>
-</ix-card>
-```
-### Example: date-input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxDateInput,
-  IxIcon,
-  IxTypography,
-  IxDateValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxDateInput, IxIcon, IxTypography, IxDateValueAccessorDirective],
-  templateUrl: './date-input-with-slots.html',
-})
-export default class DateInputWithSlots {}
-```
-#### 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-date-input value="1970/01/01">
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">Slot</ix-typography>
-</ix-date-input>
-```
-### 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: input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxInput,
-  IxIcon,
-  IxTypography,
-  IxTextValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxInput, IxIcon, IxTypography, IxTextValueAccessorDirective],
-  templateUrl: './input-with-slots.html',
-})
-export default class InputWithSlots {}
-```
-#### 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-input>
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">unit</ix-typography>
-</ix-input>
-```
-### Example: layout-auto-custom
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxLayoutAuto, IxTypography } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxLayoutAuto, IxTypography],
-  templateUrl: './layout-auto-custom.html',
-  styleUrls: ['./layout-auto.css'],
-})
-export default class LayoutAutoCustom {
-  layout = [
-    { minWidth: '0', columns: 1 },
-    { minWidth: '35rem', columns: 2 },
-    { minWidth: '50rem', columns: 4 },
-  ];
-}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<ix-layout-auto [layout]="layout">
-  <ix-typography format="display">1</ix-typography>
-  <ix-typography format="display">2</ix-typography>
-  <ix-typography format="display">3</ix-typography>
-  <ix-typography format="display" data-colspan="2">4</ix-typography>
-  <ix-typography format="display">5</ix-typography>
-  <ix-typography format="display">6</ix-typography>
-</ix-layout-auto>
-```
-### Example: layout-auto
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxLayoutAuto, IxTypography } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxLayoutAuto, IxTypography],
-  templateUrl: './layout-auto.html',
-  styleUrls: ['./layout-auto.css'],
-})
-export default class LayoutAuto {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<ix-layout-auto>
-  <ix-typography format="display">1</ix-typography>
-  <ix-typography format="display">2</ix-typography>
-  <ix-typography format="display">3</ix-typography>
-  <ix-typography format="display" data-colspan="2">4</ix-typography>
-  <ix-typography format="display">5</ix-typography>
-  <ix-typography format="display">6</ix-typography>
-</ix-layout-auto>
-```
-### Example: number-input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxNumberInput,
-  IxIcon,
-  IxTypography,
-  IxTextValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxNumberInput, IxIcon, IxTypography, IxTextValueAccessorDirective],
-  templateUrl: './number-input-with-slots.html',
-})
-export default class NumberInputWithSlots {}
-```
-#### 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-number-input>
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">unit</ix-typography>
-</ix-number-input>
-```
-### Example: time-input-with-slots
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxTimeInput,
-  IxIcon,
-  IxTypography,
-  IxTimeValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxTimeInput, IxIcon, IxTypography, IxTimeValueAccessorDirective],
-  templateUrl: './time-input-with-slots.html',
-})
-export default class TimeInputWithSlots {}
-```
-#### 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-time-input>
-  <ix-icon name="bulb" slot="start" size="16"></ix-icon>
-  <ix-typography slot="end">Slot</ix-typography>
-</ix-time-input>
-```
 <!-- Auto Generated Below -->