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-progress-indicator/readme.md CHANGED Viewed

@@ -1,1902 +1,3 @@
-# ix-progress-indicator
-## HTML Examples
-### Example: progress-indicator-circular-sizes
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Size - XS</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xs"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - SM</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="sm"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - MD</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="md"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - LG</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="lg"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - XL</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xl"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-circular-status
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Status - Default</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Success</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="success"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Error</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="error"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Info</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="info"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Warning</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="warning"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Paused</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="paused"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-circular
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-linear-sizes
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Size - XS</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xs"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - SM</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="sm"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - MD</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="md"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - LG</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="lg"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - XL</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xl"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-linear-status
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Status - Default</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Success</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="success"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Error</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="error"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Info</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="info"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Warning</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="warning"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Paused</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="paused"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-  </head>
-  <body>
-    <ix-progress-indicator
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: progress-indicator-circular-sizes
-```tsx
-import { IxProgressIndicator } from '@siemens/ix-react';
-import './progress-indicator.scoped.css';
-export default () => {
-  return (
-    <>
-      <h2 className="example-header">Size - XS</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="xs"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - SM</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="sm"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - MD</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="md"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - LG</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="lg"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - XL</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="xl"
-      >
-        75%
-      </IxProgressIndicator>
-    </>
-  );
-};
-```
-### Example: progress-indicator-circular-status
-```tsx
-import { IxProgressIndicator } from '@siemens/ix-react';
-import './progress-indicator.scoped.css';
-export default () => {
-  return (
-    <>
-      <h2 className="example-header">Status - Default</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Success</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="success"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Error</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="error"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Info</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="info"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Warning</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="warning"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Paused</h2>
-      <IxProgressIndicator
-        type="circular"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="paused"
-      >
-        75%
-      </IxProgressIndicator>
-    </>
-  );
-};
-```
-### Example: progress-indicator-circular
-```tsx
-import { IxProgressIndicator } from '@siemens/ix-react';
-import './progress-indicator.scoped.css';
-export default () => {
-  return (
-    <IxProgressIndicator
-      type="circular"
-      label="Download"
-      value={75}
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%
-    </IxProgressIndicator>
-  );
-};
-```
-### Example: progress-indicator-linear-sizes
-```tsx
-import { IxProgressIndicator } from '@siemens/ix-react';
-import './progress-indicator.scoped.css';
-export default () => {
-  return (
-    <>
-      <h2 className="example-header">Size - XS</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="xs"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - SM</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="sm"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - MD</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="md"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - LG</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="lg"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Size - XL</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        size="xl"
-      >
-        75%
-      </IxProgressIndicator>
-    </>
-  );
-};
-```
-### Example: progress-indicator-linear-status
-```tsx
-import { IxProgressIndicator } from '@siemens/ix-react';
-import './progress-indicator.scoped.css';
-export default () => {
-  return (
-    <>
-      <h2 className="example-header">Status - Default</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Success</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="success"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Error</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="error"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Info</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="info"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Warning</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="warning"
-      >
-        75%
-      </IxProgressIndicator>
-      <h2 className="example-header">Status - Paused</h2>
-      <IxProgressIndicator
-        type="linear"
-        label="Download"
-        value={75}
-        helper-text="This is a help text for the progress indicator"
-        status="paused"
-      >
-        75%
-      </IxProgressIndicator>
-    </>
-  );
-};
-```
-### Example: progress-indicator
-```tsx
-import { IxProgressIndicator } from '@siemens/ix-react';
-import './progress-indicator.scoped.css';
-export default () => {
-  return (
-    <IxProgressIndicator
-      label="Download"
-      value={75}
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%
-    </IxProgressIndicator>
-  );
-};
-```
-## Vue Examples
-### Example: progress-indicator-circular-sizes
-```tsx
-<script setup lang="ts">
-import { IxProgressIndicator } from '@siemens/ix-vue';
-</script>
-<style scoped src="./progress-indicator.css"></style>
-<template>
-  <h2 class="example-header">Size - XS</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="xs"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - SM</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="sm"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - MD</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="md"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - LG</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="lg"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - XL</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="xl"
-  >
-    75%
-  </IxProgressIndicator>
-</template>
-```
-### Example: progress-indicator-circular-status
-```tsx
-<script setup lang="ts">
-import { IxProgressIndicator } from '@siemens/ix-vue';
-</script>
-<style scoped src="./progress-indicator.css"></style>
-<template>
-  <h2 class="example-header">Status - Default</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Success</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="success"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Error</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="error"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Info</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="info"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Warning</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="warning"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Paused</h2>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="paused"
-  >
-    75%
-  </IxProgressIndicator>
-</template>
-```
-### Example: progress-indicator-circular
-```tsx
-<script setup lang="ts">
-import { IxProgressIndicator } from '@siemens/ix-vue';
-</script>
-<style scoped src="./progress-indicator.css"></style>
-<template>
-  <IxProgressIndicator
-    type="circular"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-  >
-    75%
-  </IxProgressIndicator>
-</template>
-```
-### Example: progress-indicator-linear-sizes
-```tsx
-<script setup lang="ts">
-import { IxProgressIndicator } from '@siemens/ix-vue';
-</script>
-<style scoped src="./progress-indicator.css"></style>
-<template>
-  <h2 class="example-header">Size - XS</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="xs"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - SM</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="sm"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - MD</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="md"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - LG</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="lg"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Size - XL</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    size="xl"
-  >
-    75%
-  </IxProgressIndicator>
-</template>
-```
-### Example: progress-indicator-linear-status
-```tsx
-<script setup lang="ts">
-import { IxProgressIndicator } from '@siemens/ix-vue';
-</script>
-<style scoped src="./progress-indicator.css"></style>
-<template>
-  <h2 class="example-header">Status - Default</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Success</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="success"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Error</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="error"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Info</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="info"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Warning</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="warning"
-  >
-    75%
-  </IxProgressIndicator>
-  <h2 class="example-header">Status - Paused</h2>
-  <IxProgressIndicator
-    type="linear"
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-    status="paused"
-  >
-    75%
-  </IxProgressIndicator>
-</template>
-```
-### Example: progress-indicator
-```tsx
-<script setup lang="ts">
-import { IxProgressIndicator } from '@siemens/ix-vue';
-</script>
-<style scoped src="./progress-indicator.css"></style>
-<template>
-  <IxProgressIndicator
-    label="Download"
-    :value="75"
-    helper-text="This is a help text for the progress indicator"
-  >
-    75%
-  </IxProgressIndicator>
-</template>
-```
-## Angular Examples
-### Example: progress-indicator-circular-sizes
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './progress-indicator-circular-sizes.html',
-})
-export default class ProgressIndicatorCircularSizes {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Size - XS</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xs"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - SM</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="sm"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - MD</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="md"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - LG</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="lg"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - XL</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xl"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-circular-status
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './progress-indicator-circular-status.html',
-})
-export default class ProgressIndicatorCircularStatus {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Status - Default</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Success</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="success"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Error</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="error"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Info</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="info"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Warning</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="warning"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Paused</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="paused"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-circular
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './progress-indicator-circular.html',
-})
-export default class ProgressIndicatorCircular {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-linear-sizes
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './progress-indicator-linear-sizes.html',
-})
-export default class ProgressIndicatorLinearSizes {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Size - XS</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xs"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - SM</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="sm"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - MD</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="md"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - LG</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="lg"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - XL</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xl"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-linear-status
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './progress-indicator-linear-status.html',
-})
-export default class ProgressIndicatorLinearStatus {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Status - Default</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Success</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="success"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Error</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="error"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Info</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="info"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Warning</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="warning"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Paused</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="paused"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './progress-indicator.html',
-})
-export default class ProgressIndicator {}
-```
-#### 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-progress-indicator
-  label="Download"
-  value="75"
-  helper-text="This is a help text for the progress indicator"
->
-  75%</ix-progress-indicator
->
-```
-## Angular Standalone Examples
-### Example: progress-indicator-circular-sizes
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  templateUrl: './progress-indicator-circular-sizes.html',
-  styleUrl: './progress-indicator.css',
-  imports: [IxProgressIndicator],
-})
-export default class ProgressIndicatorCircularSizes {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Size - XS</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xs"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - SM</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="sm"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - MD</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="md"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - LG</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="lg"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - XL</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xl"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-circular-status
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  templateUrl: './progress-indicator-circular-status.html',
-  styleUrl: './progress-indicator.css',
-  imports: [IxProgressIndicator],
-})
-export default class ProgressIndicatorCircularStatus {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Status - Default</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Success</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="success"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Error</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="error"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Info</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="info"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Warning</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="warning"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Paused</h2>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="paused"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-circular
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  templateUrl: './progress-indicator-circular.html',
-  styleUrl: './progress-indicator.css',
-  imports: [IxProgressIndicator],
-})
-export default class ProgressIndicatorCircular {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <ix-progress-indicator
-      type="circular"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-linear-sizes
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  templateUrl: './progress-indicator-linear-sizes.html',
-  styleUrl: './progress-indicator.css',
-  imports: [IxProgressIndicator],
-})
-export default class ProgressIndicatorLinearSizes {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Size - XS</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xs"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - SM</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="sm"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - MD</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="md"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - LG</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="lg"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Size - XL</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      size="xl"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator-linear-status
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  templateUrl: './progress-indicator-linear-status.html',
-  styleUrl: './progress-indicator.css',
-  imports: [IxProgressIndicator],
-})
-export default class ProgressIndicatorLinearStatus {}
-```
-#### 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.
--->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Popover news example</title>
-    <link rel="stylesheet" href="./progress-indicator.css" />
-  </head>
-  <body>
-    <h2 class="example-header">Status - Default</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Success</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="success"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Error</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="error"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Info</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="info"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Warning</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="warning"
-    >
-      75%</ix-progress-indicator
-    >
-    <h2 class="example-header">Status - Paused</h2>
-    <ix-progress-indicator
-      type="linear"
-      label="Download"
-      value="75"
-      helper-text="This is a help text for the progress indicator"
-      status="paused"
-    >
-      75%</ix-progress-indicator
-    >
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: progress-indicator
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  templateUrl: './progress-indicator.html',
-  styleUrl: './progress-indicator.css',
-  imports: [IxProgressIndicator],
-})
-export default class ProgressIndicator {}
-```
-#### 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-progress-indicator
-  label="Download"
-  value="75"
-  helper-text="This is a help text for the progress indicator"
->
-  75%</ix-progress-indicator
->
-```
 <!-- Auto Generated Below -->