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

@siemens/ix-docs 4.0.0 → 4.1.0

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

Files changed (833) hide show

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

@@ -1,1760 +1,3 @@
-# ix-icon-button
-## HTML Examples
-### Example: application-header
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application header example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconCheckboxes } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCheckboxes,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-application-header name="My Application">
-      <div class="placeholder-logo" slot="logo"></div>
-      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-      <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-      <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-        <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-        <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-        <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-      </ix-dropdown-button>
-      <ix-avatar username="John Doe" extra="Administrator">
-        <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-        <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      </ix-avatar>
-    </ix-application-header>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: blind-header-actions
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Blind header actions example</title>
-    <link rel="stylesheet" href="./blind-header-actions.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconInfo, iconContextMenu } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconInfo,
-        iconContextMenu,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-blind label="Example" icon="info">
-      <ix-icon-button variant="tertiary" id="context-menu" slot="header-actions" icon="context-menu" icon-color="color-primary"></ix-icon-button>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet.
-    </ix-blind>
-    <ix-dropdown trigger="context-menu">
-      <ix-dropdown-item label="Rename..." icon="rename"></ix-dropdown-item>
-      <ix-dropdown-item label="Delete" icon="trashcan"></ix-dropdown-item>
-    </ix-dropdown>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: button-loading
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button loading example</title>
-    <link rel="stylesheet" href="./button-loading.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconStar } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconStar,
-      });
-    </script>
-  </head>
-  <body>
-    <script>
-      function toggle(obj) {
-        obj.loading = true;
-        setTimeout(() => {
-          obj.loading = false;
-        }, 2500);
-      }
-    </script>
-    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
-    <ix-button variant="subtle-primary" onclick="toggle(this)"> Button </ix-button>
-    <ix-button variant="subtle-primary" onclick="toggle(this)" icon="star"> Button </ix-button>
-    <ix-icon-button variant="subtle-primary" onclick="toggle(this)" icon="star">
-    </ix-icon-button>
-    <ix-button variant="subtle-primary" loading> Button </ix-button>
-    <ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: button-with-icon
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Button with icon example</title>
-    <link rel="stylesheet" href="./button-with-icon.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconInfo } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconInfo,
-      });
-    </script>
-  </head>
-  <body>
-    <div>
-      <ix-icon-button icon="info" variant="primary"></ix-icon-button>
-      <ix-icon-button icon="info"></ix-icon-button>
-      <ix-icon-button icon="info" variant="danger-primary"></ix-icon-button>
-      <ix-icon-button variant="subtle-primary" icon="info"></ix-icon-button>
-      <ix-icon-button variant="tertiary" icon="info"></ix-icon-button>
-    </div>
-    <div>
-      <ix-icon-button icon="info" oval variant="primary"></ix-icon-button>
-      <ix-icon-button icon="info" oval></ix-icon-button>
-      <ix-icon-button icon="info" oval variant="danger-primary"></ix-icon-button>
-      <ix-icon-button variant="subtle-primary" icon="info" oval></ix-icon-button>
-      <ix-icon-button variant="tertiary" icon="info" oval></ix-icon-button>
-    </div>
-    <div>
-      <ix-icon-button icon="info" size="12"></ix-icon-button>
-      <ix-icon-button icon="info" size="16"></ix-icon-button>
-      <ix-icon-button icon="info" size="24"></ix-icon-button>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: content-header-no-back
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Content header no back example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconPen,
-        iconTrashcan,
-        iconContextMenu,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconPen,
-        iconTrashcan,
-        iconContextMenu,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-content-header
-      variant="subtle-primary"
-      header-title="Content title"
-      header-subtitle="Subtitle"
-    >
-      <ix-icon-button icon="pen" variant="tertiary">
-        Button1
-      </ix-icon-button>
-      <ix-icon-button icon="trashcan" variant="tertiary">
-        Button2
-      </ix-icon-button>
-      <ix-icon-button icon="context-menu" variant="tertiary">
-        Button3
-      </ix-icon-button>
-    </ix-content-header>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: custom-field
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Custom field example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import { iconOpenFile } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconOpenFile,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-custom-field helper-text="Choose file">
-      <ix-input value="No file chosen" readonly></ix-input>
-      <ix-icon-button icon="open-file" variant="subtle-primary"></ix-icon-button>
-      <input id="file-upload" type="file" style="display: none" />
-    </ix-custom-field>
-    <script type="module" src="./init.js"></script>
-    <script>
-      document.querySelector('ix-icon-button').addEventListener('click', () => {
-        document.querySelector('#file-upload').click();
-      });
-      document.querySelector('#file-upload').addEventListener('input', (e) => {
-        const fileName = e.target.files[0]?.name;
-        document.querySelector('ix-input').value = fileName || 'No file chosen';
-      });
-    </script>
-  </body>
-</html>
-```
-### Example: dropdown-quick-actions
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dropdown quick actions example</title>
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconCut,
-        iconBulb,
-        iconTrashcan,
-        iconStar,
-        iconDocument,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconCut,
-        iconBulb,
-        iconTrashcan,
-        iconStar,
-        iconDocument,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-button id="iconTriggerId">Open</ix-button>
-    <ix-dropdown trigger="iconTriggerId">
-      <ix-dropdown-quick-actions>
-        <ix-icon-button variant="tertiary" icon="cut"></ix-icon-button>
-        <ix-icon-button variant="tertiary" icon="bulb"></ix-icon-button>
-        <ix-icon-button variant="tertiary" icon="trashcan"></ix-icon-button>
-      </ix-dropdown-quick-actions>
-      <ix-divider></ix-divider>
-      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
-      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
-      <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
-    </ix-dropdown>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: tile
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tile example</title>
-    <link rel="stylesheet" href="./tile.css" />
-    <script type="module">
-      import { addIcons } from '@siemens/ix-icons';
-      import {
-        iconContextMenu,
-        iconChevronRightSmall,
-      } from '@siemens/ix-icons/icons';
-      addIcons({
-        iconContextMenu,
-        iconChevronRightSmall,
-      });
-    </script>
-  </head>
-  <body>
-    <ix-tile size="small">92.8 °C</ix-tile>
-    <ix-tile size="medium">
-      <div slot="header">Tile header</div>
-      <div class="text-l">92.8 °C</div>
-    </ix-tile>
-    <ix-tile size="big">
-      <div class="tile-header" slot="header">
-        Tile header
-        <ix-icon-button variant="tertiary" icon="context-menu"></ix-icon-button>
-      </div>
-      <div slot="subheader">Temperature</div>
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          align-items: flex-end;
-          justify-content: space-between;
-        "
-      >
-        <span>92.8 °C</span>
-      </div>
-      <div class="tile-footer" slot="footer">
-        <ix-button variant="tertiary" icon="chevron-right-small" slot="footer">
-          Details
-        </ix-button>
-      </div>
-    </ix-tile>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: application-header
-```tsx
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-import {
-  IxApplicationHeader,
-  IxAvatar,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxIconButton,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxApplicationHeader name="My Application">
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
-      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
-      <IxIconButton variant="tertiary" icon={iconCheckboxes}></IxIconButton>
-      <IxDropdownButton variant="subtle-tertiary" label="Select config">
-        <IxDropdownItem label="Config 1"></IxDropdownItem>
-        <IxDropdownItem label="Config 2"></IxDropdownItem>
-        <IxDropdownItem label="Config 3"></IxDropdownItem>
-      </IxDropdownButton>
-      <IxAvatar username="John Doe" extra="Administrator">
-        <IxDropdownItem label="Action 1"></IxDropdownItem>
-        <IxDropdownItem label="Action 2"></IxDropdownItem>
-      </IxAvatar>
-    </IxApplicationHeader>
-  );
-};
-```
-### Example: blind-header-actions
-```tsx
-import {
-  iconContextMenu,
-  iconInfo,
-  iconRename,
-  iconTrashcan,
-} from '@siemens/ix-icons/icons';
-import './blind-header-actions.scoped.css';
-import {
-  IxBlind,
-  IxDropdown,
-  IxDropdownItem,
-  IxIconButton,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxBlind label="Example" icon={iconInfo}>
-        <IxIconButton variant="tertiary" id="context-menu" slot="header-actions" icon={iconContextMenu} iconColor="color-primary"></IxIconButton>
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
-        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-        ipsum dolor sit amet.
-      </IxBlind>
-      <IxDropdown trigger={'context-menu'}>
-        <IxDropdownItem icon={iconRename}>Rename...</IxDropdownItem>
-        <IxDropdownItem icon={iconTrashcan}>Delete</IxDropdownItem>
-      </IxDropdown>
-    </>
-  );
-};
-```
-### Example: button-loading
-```tsx
-import { iconStar } from '@siemens/ix-icons/icons';
-import './button-loading.scoped.css';
-import { IxButton, IxIconButton } from '@siemens/ix-react';
-import { useState } from 'react';
-export default () => {
-  const [toggle, setToggle] = useState(false);
-  const [toggle2, setToggle2] = useState(false);
-  const [toggle3, setToggle3] = useState(false);
-  return (
-    <>
-      <IxButton
-        onClick={() => {
-          setToggle(true);
-          setTimeout(() => {
-            setToggle(false);
-          }, 2500);
-        }}
-        loading={toggle}
-        outline
-      >
-        Button
-      </IxButton>
-      <IxButton
-        onClick={() => {
-          setToggle2(true);
-          setTimeout(() => {
-            setToggle2(false);
-          }, 2500);
-        }}
-        loading={toggle2}
-        outline
-        icon={iconStar}
-      >
-        Button
-      </IxButton>
-      <IxButton
-        onClick={() => {
-          setToggle3(true);
-          setTimeout(() => {
-            setToggle3(false);
-          }, 2500);
-        }}
-        loading={toggle3}
-        outline
-        icon={iconStar}
-      ></IxButton>
-      <IxIconButton
-        onClick={() => {
-          setToggle(true);
-          setTimeout(() => {
-            setToggle(false);
-          }, 2500);
-        }}
-        loading={toggle}
-        outline
-        icon={iconStar}
-      ></IxIconButton>
-      <IxButton variant="subtle-primary" loading>
-        Button
-      </IxButton>
-      <IxIconButton variant="subtle-primary" loading></IxIconButton>
-    </>
-  );
-};
-```
-### Example: button-with-icon
-```tsx
-import { iconInfo } from '@siemens/ix-icons/icons';
-import './button-with-icon.scoped.css';
-import { IxIconButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <div>
-        <IxIconButton icon={iconInfo} variant="primary"></IxIconButton>
-        <IxIconButton icon={iconInfo}></IxIconButton>
-        <IxIconButton icon={iconInfo} variant="danger-primary"></IxIconButton>
-        <IxIconButton variant="subtle-primary" icon={iconInfo}></IxIconButton>
-        <IxIconButton variant="tertiary" icon={iconInfo}></IxIconButton>
-      </div>
-      <div>
-        <IxIconButton icon={iconInfo} oval variant="primary"></IxIconButton>
-        <IxIconButton icon={iconInfo} oval></IxIconButton>
-        <IxIconButton icon={iconInfo} oval variant="danger-primary"></IxIconButton>
-        <IxIconButton variant="subtle-primary" icon={iconInfo} oval></IxIconButton>
-        <IxIconButton variant="tertiary" icon={iconInfo} oval></IxIconButton>
-      </div>
-      <div>
-        <IxIconButton icon={iconInfo} size="12"></IxIconButton>
-        <IxIconButton icon={iconInfo} size="16"></IxIconButton>
-        <IxIconButton icon={iconInfo} size="24"></IxIconButton>
-      </div>
-    </>
-  );
-};
-```
-### Example: content-header-no-back
-```tsx
-import {
-  iconContextMenu,
-  iconPen,
-  iconTrashcan,
-} from '@siemens/ix-icons/icons';
-import { IxContentHeader, IxIconButton } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxContentHeader
-      variant="subtle-primary"
-      header-title="Content title"
-      header-subtitle="Subtitle"
-    >
-      <IxIconButton icon={iconPen} variant="tertiary">
-        Button1
-      </IxIconButton>
-      <IxIconButton icon={iconTrashcan} variant="tertiary">
-        Button2
-      </IxIconButton>
-      <IxIconButton icon={iconContextMenu} variant="tertiary">
-        Button3
-      </IxIconButton>
-    </IxContentHeader>
-  );
-};
-```
-### Example: custom-field
-```tsx
-import { useRef } from 'react';
-import { IxCustomField, IxIconButton, IxInput } from '@siemens/ix-react';
-export default () => {
-  const ref = useRef<HTMLInputElement>(null);
-  return (
-    <IxCustomField helper-text="Choose file">
-      <IxInput value="Enter text here" readonly></IxInput>
-      <IxIconButton icon="open-file" variant="subtle-primary" onClick={() => {
-          ref.current?.click();
-        }}
-      ></IxIconButton>
-      <input
-        ref={ref}
-        id="file-upload"
-        type="file"
-        style={{ display: 'none' }}
-        onInput={(e: any) => console.log(e.target.files)}
-      />
-    </IxCustomField>
-  );
-};
-```
-### Example: dropdown-quick-actions
-```tsx
-import {
-  iconBulb,
-  iconCut,
-  iconDocument,
-  iconStar,
-  iconTrashcan,
-} from '@siemens/ix-icons/icons';
-import {
-  IxButton,
-  IxDivider,
-  IxDropdown,
-  IxDropdownItem,
-  IxDropdownQuickActions,
-  IxIconButton,
-} from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <IxButton id="iconTriggerId">Open</IxButton>
-      <IxDropdown trigger="iconTriggerId">
-        <IxDropdownQuickActions>
-          <IxIconButton variant="tertiary" icon={iconCut}></IxIconButton>
-          <IxIconButton variant="tertiary" icon={iconBulb}></IxIconButton>
-          <IxIconButton variant="tertiary" icon={iconTrashcan}></IxIconButton>
-        </IxDropdownQuickActions>
-        <IxDivider></IxDivider>
-        <IxDropdownItem icon={iconStar} label="Item 1"></IxDropdownItem>
-        <IxDropdownItem icon={iconDocument} label="Item 2"></IxDropdownItem>
-        <IxDropdownItem icon={iconBulb} label="Item 3"></IxDropdownItem>
-      </IxDropdown>
-    </>
-  );
-};
-```
-### Example: tile
-```tsx
-import './tile.scoped.css';
-import { IxButton, IxIconButton, IxTile } from '@siemens/ix-react';
-import {
-  iconChevronRightSmall,
-  iconContextMenu,
-} from '@siemens/ix-icons/icons';
-export default () => {
-  return (
-    <div className="example">
-      <IxTile size="small">92.8 °C</IxTile>
-      <IxTile size="medium">
-        <div slot="header">Tile header</div>
-        <div className="text-l">92.8 °C</div>
-      </IxTile>
-      <IxTile size="big">
-        <div className="tile-header" slot="header">
-          Tile header
-          <IxIconButton variant="tertiary" icon={iconContextMenu}></IxIconButton>
-        </div>
-        <div slot="subheader">Temperature</div>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>92.8 °C</span>
-        </div>
-        <div className="tile-footer" slot="footer">
-        <IxButton variant="tertiary" icon={iconChevronRightSmall} slot="footer">
-            Details
-        </IxButton>
-        </div>
-      </IxTile>
-    </div>
-  );
-};
-```
-## Vue Examples
-### Example: application-header
-```tsx
-<script setup lang="ts">
-import {
-  IxApplicationHeader,
-  IxAvatar,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxIconButton,
-} from '@siemens/ix-vue';
-import { iconCheckboxes } from '@siemens/ix-icons/icons';
-</script>
-<template>
-  <IxApplicationHeader name="My Application">
-    <div className="placeholder-logo" slot="logo"></div>
-    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
-    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
-    <IxIconButton variant="tertiary" :icon="iconCheckboxes"></IxIconButton>
-    <IxDropdownButton variant="subtle-tertiary" label="Select config">
-      <IxDropdownItem label="Config 1"></IxDropdownItem>
-      <IxDropdownItem label="Config 2"></IxDropdownItem>
-      <IxDropdownItem label="Config 3"></IxDropdownItem>
-    </IxDropdownButton>
-    <IxAvatar username="John Doe" extra="Administrator">
-      <IxDropdownItem label="Action 1"></IxDropdownItem>
-      <IxDropdownItem label="Action 2"></IxDropdownItem>
-    </IxAvatar>
-  </IxApplicationHeader>
-</template>
-```
-### Example: blind-header-actions
-```tsx
-<script setup lang="ts">
-import {
-  iconContextMenu,
-  iconInfo,
-  iconRename,
-  iconTrashcan,
-} from '@siemens/ix-icons/icons';
-import { IxBlind, IxDropdown, IxIconButton } from '@siemens/ix-vue';
-</script>
-<style scoped src="./blind-header-actions.css"></style>
-<template>
-  <IxBlind label="Example" :icon="iconInfo">
-    <IxIconButton variant="tertiary" id="context-menu" slot="header-actions" :icon="iconContextMenu" iconColor="color-primary"></IxIconButton>
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-    amet.
-  </IxBlind>
-  <IxDropdown trigger="context-menu">
-    <IxDropdownItem label="Rename..." :icon="iconRename"></IxDropdownItem>
-    <IxDropdownItem label="trashcan" :icon="iconTrashcan"></IxDropdownItem>
-  </IxDropdown>
-</template>
-```
-### Example: button-loading
-```tsx
-<script setup lang="ts">
-import { iconStar } from '@siemens/ix-icons/icons';
-import { IxButton, IxIconButton } from '@siemens/ix-vue';
-import { ref } from 'vue';
-let toggle1 = ref(false);
-let toggle2 = ref(false);
-let toggle3 = ref(false);
-function load(value: string) {
-  if (value === '1') toggle1.value = true;
-  if (value === '2') toggle2.value = true;
-  if (value === '3') toggle3.value = true;
-  setTimeout(() => {
-    if (value === '1') toggle1.value = false;
-    if (value === '2') toggle2.value = false;
-    if (value === '3') toggle3.value = false;
-  }, 2500);
-}
-</script>
-<style scoped src="./button-loading.css"></style>
-<template>
-  <div>
-    <IxButton variant="subtle-primary" :loading="toggle1" @click="load('1')"> Button </IxButton>
-    <IxButton variant="subtle-primary" :loading="toggle2" @click="load('2')" :icon="iconStar">
-      Button
-    </IxButton>
-    <IxIconButton variant="subtle-primary" :loading="toggle3" @click="load('3')" :icon="iconStar"></IxIconButton>
-    <IxButton variant="subtle-primary" loading> Button </IxButton>
-    <IxIconButton variant="subtle-primary" loading></IxIconButton>
-  </div>
-</template>
-```
-### Example: button-with-icon
-```tsx
-<script setup lang="ts">
-import { iconInfo } from '@siemens/ix-icons/icons';
-import { IxIconButton } from '@siemens/ix-vue';
-</script>
-<style scoped src="./button-with-icon.css"></style>
-<template>
-  <div>
-    <IxIconButton :icon="iconInfo" variant="primary"></IxIconButton>
-    <IxIconButton :icon="iconInfo"></IxIconButton>
-    <IxIconButton :icon="iconInfo" variant="danger-primary"></IxIconButton>
-    <IxIconButton variant="subtle-primary" :icon="iconInfo"></IxIconButton>
-    <IxIconButton variant="tertiary" :icon="iconInfo"></IxIconButton>
-  </div>
-  <div>
-    <IxIconButton :icon="iconInfo" oval variant="primary"></IxIconButton>
-    <IxIconButton :icon="iconInfo" oval></IxIconButton>
-    <IxIconButton :icon="iconInfo" oval variant="danger-primary"></IxIconButton>
-    <IxIconButton variant="subtle-primary" :icon="iconInfo" oval></IxIconButton>
-    <IxIconButton variant="tertiary" :icon="iconInfo" oval></IxIconButton>
-  </div>
-  <div>
-    <IxIconButton :icon="iconInfo" size="12"></IxIconButton>
-    <IxIconButton :icon="iconInfo" size="16"></IxIconButton>
-    <IxIconButton :icon="iconInfo" size="24"></IxIconButton>
-  </div>
-</template>
-```
-### Example: content-header-no-back
-```tsx
-<script setup lang="ts">
-import {
-  iconContextMenu,
-  iconPen,
-  iconTrashcan,
-} from '@siemens/ix-icons/icons';
-import { IxContentHeader, IxIconButton } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxContentHeader
-    variant="subtle-primary"
-    header-title="Content title"
-    header-subtitle="Subtitle"
-  >
-    <IxIconButton :icon="iconPen" variant="tertiary">
-      Button1
-    </IxIconButton>
-    <IxIconButton :icon="iconTrashcan" variant="tertiary">
-      Button2
-    </IxIconButton>
-    <IxIconButton :icon="iconContextMenu" variant="tertiary">
-      Button3
-    </IxIconButton>
-  </IxContentHeader>
-</template>
-```
-### Example: custom-field
-```tsx
-<script setup lang="ts">
-import { ref } from 'vue';
-import { IxCustomField, IxInput, IxIconButton } from '@siemens/ix-vue';
-const input = ref();
-const openFileBrowser = () => {
-  input.value.click();
-};
-</script>
-<template>
-  <IxCustomField helper-text="Choose file">
-    <IxInput value="Enter text here" readonly></IxInput>
-    <IxIconButton icon="open-file" variant="subtle-primary" @click="openFileBrowser()"></IxIconButton>
-    <input
-      ref="input"
-      id="file-upload"
-      type="file"
-      style="display: none"
-      @input="(e: any) => console.log(e.target.files)"
-    />
-  </IxCustomField>
-</template>
-```
-### Example: dropdown-quick-actions
-```tsx
-<script setup lang="ts">
-import {
-  iconBulb,
-  iconCut,
-  iconDocument,
-  iconStar,
-  iconTrashcan,
-} from '@siemens/ix-icons/icons';
-import {
-  IxButton,
-  IxDivider,
-  IxDropdown,
-  IxDropdownItem,
-  IxDropdownQuickActions,
-  IxIconButton,
-} from '@siemens/ix-vue';
-</script>
-<template>
-  <div>
-    <IxButton id="iconTriggerId">Open</IxButton>
-    <IxDropdown trigger="iconTriggerId">
-      <IxDropdownQuickActions>
-        <IxIconButton variant="tertiary" :icon="iconCut"></IxIconButton>
-        <IxIconButton variant="tertiary" :icon="iconBulb"></IxIconButton>
-        <IxIconButton variant="tertiary" :icon="iconTrashcan"></IxIconButton>
-      </IxDropdownQuickActions>
-      <IxDivider></IxDivider>
-      <IxDropdownItem :icon="iconStar" label="Item 1"></IxDropdownItem>
-      <IxDropdownItem :icon="iconDocument" label="Item 2"></IxDropdownItem>
-      <IxDropdownItem :icon="iconBulb" label="Item 3"></IxDropdownItem>
-    </IxDropdown>
-  </div>
-</template>
-```
-### Example: tile
-```tsx
-<script setup lang="ts">
-import {
-  iconChevronRightSmall,
-  iconContextMenu,
-} from '@siemens/ix-icons/icons';
-import { IxButton, IxIconButton, IxTile } from '@siemens/ix-vue';
-</script>
-<style scoped src="./tile.css"></style>
-<template>
-  <div className="example">
-    <IxTile size="small">92.8 °C</IxTile>
-    <IxTile size="medium">
-      <div slot="header">Tile header</div>
-      <div className="text-l">92.8 °C</div>
-    </IxTile>
-    <IxTile size="big">
-      <div className="tile-header" slot="header">
-        Tile header
-        <IxIconButton variant="tertiary" :icon="iconContextMenu"></IxIconButton>
-      </div>
-      <div slot="subheader">Temperature</div>
-      <div
-        style="
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          align-items: flex-end;
-          justify-content: space-between;
-        "
-      >
-        <span>92.8 °C</span>
-      </div>
-      <div className="tile-footer" slot="footer">
-        <IxButton variant="tertiary" :icon="iconChevronRightSmall" slot="footer">
-          Details
-        </IxButton>
-      </div>
-    </IxTile>
-  </div>
-</template>
-```
-## Angular Examples
-### Example: application-header
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './application-header.html',
-})
-export default class ApplicationHeaderExample {}
-```
-#### Component template
-```html
-<ix-application-header name="My Application">
-  <div class="placeholder-logo" slot="logo"></div>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-    <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-    <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-    <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-  </ix-dropdown-button>
-  <ix-avatar username="John Doe" extra="Administrator">
-    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-  </ix-avatar>
-</ix-application-header>
-```
-### Example: blind-header-actions
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-blind label="Example" icon="info">
-      <ix-icon-button variant="tertiary" id="context-menu" slot="header-actions" icon="context-menu" icon-color="color-primary"></ix-icon-button>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet.
-    </ix-blind>
-    <ix-dropdown trigger="context-menu">
-      <ix-dropdown-item icon="rename">Rename...</ix-dropdown-item>
-      <ix-dropdown-item icon="trashcan">Delete...</ix-dropdown-item>
-    </ix-dropdown>
-  `,
-  styleUrls: ['./blind-header-actions.css'],
-})
-export default class Blind {}
-```
-### Example: button-loading
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: './button-loading.html',
-  styleUrls: ['./button-loading.css'],
-})
-export default class ButtonLoading {
-  loading = false;
-  loading2 = false;
-  loading3 = false;
-  toggle() {
-    this.loading = true;
-    setTimeout(() => {
-      this.loading = false;
-    }, 2500);
-  }
-  toggle2() {
-    this.loading2 = true;
-    setTimeout(() => {
-      this.loading2 = false;
-    }, 2500);
-  }
-  toggle3() {
-    this.loading3 = true;
-    setTimeout(() => {
-      this.loading3 = false;
-    }, 2500);
-  }
-}
-```
-#### Component template
-```html
-<ix-button variant="subtle-primary" (click)="toggle()" [loading]="loading">
-  Button
-</ix-button>
-<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
-  Button
-</ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-button>
-<ix-button variant="subtle-primary" loading> Button </ix-button>
-<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
-```
-### Example: button-with-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './button-with-icon.html',
-  styleUrls: ['./button-with-icon.css'],
-})
-export default class ButtonWithIcon {}
-```
-#### Component template
-```html
-<div>
-  <ix-icon-button icon="info" variant="primary"></ix-icon-button>
-  <ix-icon-button icon="info"></ix-icon-button>
-  <ix-icon-button icon="info" variant="danger-primary"></ix-icon-button>
-  <ix-icon-button variant="subtle-primary" icon="info"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="info"></ix-icon-button>
-</div>
-<div>
-  <ix-icon-button icon="info" oval variant="primary"></ix-icon-button>
-  <ix-icon-button icon="info" oval></ix-icon-button>
-  <ix-icon-button icon="info" oval variant="danger-primary"></ix-icon-button>
-  <ix-icon-button variant="subtle-primary" icon="info" oval></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="info" oval></ix-icon-button>
-</div>
-<div>
-  <ix-icon-button icon="info" size="12"></ix-icon-button>
-  <ix-icon-button icon="info" size="16"></ix-icon-button>
-  <ix-icon-button icon="info" size="24"></ix-icon-button>
-</div>
-```
-### Example: content-header-no-back
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './content-header-no-back.html',
-})
-export default class ContentHeaderNoBack {}
-```
-#### 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-content-header
-  variant="subtle-primary"
-  headerTitle="Content title"
-  headerSubtitle="Subtitle"
->
-  <ix-icon-button icon="pen" variant="tertiary"> Button1 </ix-icon-button>
-  <ix-icon-button icon="trashcan" variant="tertiary">
-    Button2
-  </ix-icon-button>
-  <ix-icon-button icon="context-menu" variant="tertiary">
-    Button3
-  </ix-icon-button>
-</ix-content-header>
-```
-### Example: custom-field
-#### Component typescript
-```typescript
-import { Component, ElementRef, ViewChild } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './custom-field.html',
-})
-export default class CustomField {
-  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLElement>;
-  openFileBrowser() {
-    this.fileUpload.nativeElement.click();
-    this.fileUpload.nativeElement.oninput = (event: any) => {
-      console.log(event.target.files);
-    };
-  }
-}
-```
-#### 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-custom-field helper-text="Choose file">
-  <ix-input value="No file chosen" readonly></ix-input>
-  <ix-icon-button icon="open-file" variant="subtle-primary" (click)="openFileBrowser()"></ix-icon-button>
-  <input #fileUpload type="file" style="display: none" />
-</ix-custom-field>
-```
-### Example: dropdown-quick-actions
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './dropdown-quick-actions.html',
-})
-export default class DropdownQuickActions {}
-```
-#### 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-button #trigger>Open</ix-button>
-<ix-dropdown [ixDropdownTrigger]="trigger">
-  <ix-dropdown-quick-actions>
-    <ix-icon-button variant="tertiary" icon="cut"></ix-icon-button>
-    <ix-icon-button variant="tertiary" icon="bulb"></ix-icon-button>
-    <ix-icon-button variant="tertiary" icon="trashcan"></ix-icon-button>
-  </ix-dropdown-quick-actions>
-  <ix-divider></ix-divider>
-  <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
-  <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
-  <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
-</ix-dropdown>
-```
-### Example: tile
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  template: `
-    <ix-tile size="small">92.8 °C</ix-tile>
-    <ix-tile size="medium">
-      <div slot="header">Tile header</div>
-      <div class="text-l">92.8 °C</div>
-    </ix-tile>
-    <ix-tile size="big">
-      <div class="tile-header" slot="header">
-        Tile header
-        <ix-icon-button variant="tertiary" icon="context-menu"></ix-icon-button>
-      </div>
-      <div slot="subheader">Temperature</div>
-      <div
-        style="
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        align-items: flex-end;
-        justify-content: space-between;
-      "
-      >
-        <span>92.8 °C</span>
-      </div>
-      <div class="tile-footer" slot="footer">
-        <ix-button variant="tertiary" icon="chevron-right-small" slot="footer">
-          Details
-        </ix-button>
-      </div>
-    </ix-tile>
-  `,
-  styleUrls: ['./tile.css'],
-})
-export default class Tile {}
-```
-## Angular Standalone Examples
-### Example: application-header
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplicationHeader,
-  IxIconButton,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxAvatar,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplicationHeader,
-    IxIconButton,
-    IxDropdownButton,
-    IxDropdownItem,
-    IxAvatar,
-  ],
-  templateUrl: './application-header.html',
-})
-export default class ApplicationHeaderExample {}
-```
-#### 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-application-header name="My Application">
-  <div class="placeholder-logo" slot="logo"></div>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="checkboxes"></ix-icon-button>
-  <ix-dropdown-button variant="subtle-tertiary" label="Select config">
-    <ix-dropdown-item label="Config 1"></ix-dropdown-item>
-    <ix-dropdown-item label="Config 2"></ix-dropdown-item>
-    <ix-dropdown-item label="Config 3"></ix-dropdown-item>
-  </ix-dropdown-button>
-  <ix-avatar username="John Doe" extra="Administrator">
-    <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-    <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-  </ix-avatar>
-</ix-application-header>
-```
-### Example: blind-header-actions
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxBlind,
-  IxIconButton,
-  IxDropdown,
-  IxDropdownItem,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxBlind, IxIconButton, IxDropdown, IxDropdownItem],
-  template: `
-    <ix-blind label="Example" icon="info">
-      <ix-icon-button variant="tertiary" id="context-menu" slot="header-actions" icon="context-menu" icon-color="color-primary"></ix-icon-button>
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet.
-    </ix-blind>
-    <ix-dropdown trigger="context-menu">
-      <ix-dropdown-item icon="rename">Rename...</ix-dropdown-item>
-      <ix-dropdown-item icon="trashcan">Delete...</ix-dropdown-item>
-    </ix-dropdown>
-  `,
-  styleUrls: ['./blind-header-actions.css'],
-})
-export default class Blind {}
-```
-### Example: button-loading
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  selector: 'app-example',
-  template: './button-loading.html',
-  styleUrls: ['./button-loading.css'],
-})
-export default class ButtonLoading {
-  loading = false;
-  loading2 = false;
-  loading3 = false;
-  toggle() {
-    this.loading = true;
-    setTimeout(() => {
-      this.loading = false;
-    }, 2500);
-  }
-  toggle2() {
-    this.loading2 = true;
-    setTimeout(() => {
-      this.loading2 = false;
-    }, 2500);
-  }
-  toggle3() {
-    this.loading3 = true;
-    setTimeout(() => {
-      this.loading3 = false;
-    }, 2500);
-  }
-}
-```
-#### 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-button variant="subtle-primary" (click)="toggle()" [loading]="loading"> Button </ix-button>
-<ix-button variant="subtle-primary" (click)="toggle2()" [loading]="loading2" icon="star">
-  Button
-</ix-button>
-<ix-icon-button variant="subtle-primary" (click)="toggle3()" [loading]="loading3" icon="star">
-</ix-icon-button>
-<ix-button variant="subtle-primary" loading> Button </ix-button>
-<ix-icon-button variant="subtle-primary" loading icon="star"></ix-icon-button>
-```
-### Example: button-with-icon
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxIconButton } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxIconButton],
-  templateUrl: './button-with-icon.html',
-  styleUrls: ['./button-with-icon.css'],
-})
-export default class ButtonWithIcon {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2025 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<div>
-  <ix-icon-button icon="info" variant="primary"></ix-icon-button>
-  <ix-icon-button icon="info"></ix-icon-button>
-  <ix-icon-button icon="info" variant="danger-primary"></ix-icon-button>
-  <ix-icon-button variant="subtle-primary" icon="info"></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="info"></ix-icon-button>
-</div>
-<div>
-  <ix-icon-button icon="info" oval variant="primary"></ix-icon-button>
-  <ix-icon-button icon="info" oval></ix-icon-button>
-  <ix-icon-button icon="info" oval variant="danger-primary"></ix-icon-button>
-  <ix-icon-button variant="subtle-primary" icon="info" oval></ix-icon-button>
-  <ix-icon-button variant="tertiary" icon="info" oval></ix-icon-button>
-</div>
-<div>
-  <ix-icon-button icon="info" size="12"></ix-icon-button>
-  <ix-icon-button icon="info" size="16"></ix-icon-button>
-  <ix-icon-button icon="info" size="24"></ix-icon-button>
-</div>
-```
-### Example: content-header-no-back
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxContentHeader, IxIconButton } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxContentHeader, IxIconButton],
-  templateUrl: './content-header-no-back.html',
-})
-export default class ContentHeaderNoBack {}
-```
-#### 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-content-header
-  variant="subtle-primary"
-  headerTitle="Content title"
-  headerSubtitle="Subtitle"
->
-  <ix-icon-button icon="pen" variant="tertiary"> Button1 </ix-icon-button>
-  <ix-icon-button icon="trashcan" variant="tertiary">
-    Button2
-  </ix-icon-button>
-  <ix-icon-button icon="context-menu" variant="tertiary">
-    Button3
-  </ix-icon-button>
-</ix-content-header>
-```
-### Example: custom-field
-#### Component typescript
-```typescript
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import {
-  IxCustomField,
-  IxInput,
-  IxIconButton,
-  IxTextValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxCustomField, IxInput, IxIconButton, IxTextValueAccessorDirective],
-  templateUrl: './custom-field.html',
-})
-export default class CustomField {
-  @ViewChild('fileUpload') fileUpload!: ElementRef<HTMLElement>;
-  openFileBrowser() {
-    this.fileUpload.nativeElement.click();
-    this.fileUpload.nativeElement.oninput = (event: any) => {
-      console.log(event.target.files);
-    };
-  }
-}
-```
-#### 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-custom-field helper-text="Choose file">
-  <ix-input value="No file chosen" readonly></ix-input>
-  <ix-icon-button icon="open-file" variant="subtle-primary" (click)="openFileBrowser()"></ix-icon-button>
-  <input #fileUpload type="file" style="display: none" />
-</ix-custom-field>
-```
-### Example: dropdown-quick-actions
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxButton,
-  IxDropdown,
-  IxDropdownQuickActions,
-  IxIconButton,
-  IxDivider,
-  IxDropdownItem,
-  IxDropdownTriggerDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxButton,
-    IxDropdown,
-    IxDropdownQuickActions,
-    IxIconButton,
-    IxDivider,
-    IxDropdownItem,
-    IxDropdownTriggerDirective,
-  ],
-  templateUrl: './dropdown-quick-actions.html',
-})
-export default class DropdownQuickActions {}
-```
-#### 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-button #trigger>Open</ix-button>
-<ix-dropdown [ixDropdownTrigger]="trigger">
-  <ix-dropdown-quick-actions>
-    <ix-icon-button variant="tertiary" icon="cut"></ix-icon-button>
-    <ix-icon-button variant="tertiary" icon="bulb"></ix-icon-button>
-    <ix-icon-button variant="tertiary" icon="trashcan"></ix-icon-button>
-  </ix-dropdown-quick-actions>
-  <ix-divider></ix-divider>
-  <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
-  <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
-  <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
-</ix-dropdown>
-```
-### Example: tile
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxTile,
-  IxIconButton,
-  IxButton,
-  IxIcon,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxTile, IxIconButton, IxButton, IxIcon],
-  template: `
-    <ix-tile size="small">92.8 °C</ix-tile>
-    <ix-tile size="medium">
-      <div slot="header">Tile header</div>
-      <div class="text-l">92.8 °C</div>
-    </ix-tile>
-    <ix-tile size="big">
-      <div class="tile-header" slot="header">
-        Tile header
-        <ix-icon-button variant="tertiary" icon="context-menu"></ix-icon-button>
-      </div>
-      <div slot="subheader">Temperature</div>
-      <div
-        style="
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        align-items: flex-end;
-        justify-content: space-between;
-      "
-      >
-        <span>92.8 °C</span>
-      </div>
-      <div class="tile-footer" slot="footer">
-        <ix-button variant="tertiary" slot="footer">
-          <ix-icon name="chevron-right-small"></ix-icon>Details
-        </ix-button>
-      </div>
-    </ix-tile>
-  `,
-  styleUrls: ['./tile.css'],
-})
-export default class Tile {}
-```
 <!-- Auto Generated Below -->