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

@siemens/ix-docs 4.0.0 → 4.2.0

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

Files changed (853) hide show

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

@@ -1,1013 +1,3 @@
-# ix-radio-group
-## HTML Examples
-### Example: application-breakpoints
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Application breakpoints example</title>
-  </head>
-  <body>
-    <ix-application application-name="Application name">
-      <ix-application-header name="My Application">
-        <div class="placeholder-logo" slot="logo"></div>
-        <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>
-          <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-          <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-          <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-        </ix-avatar>
-      </ix-application-header>
-      <ix-menu>
-        <ix-menu-item>Item 1</ix-menu-item>
-        <ix-menu-item>Item 2</ix-menu-item>
-      </ix-menu>
-      <ix-content>
-        <ix-content-header slot="header" header-title="Choose breakpoint">
-        </ix-content-header>
-        <ix-radio-group id="radio-group" value="md">
-          <ix-radio value="sm" label="Small"></ix-radio>
-          <ix-radio value="md" label="Medium"></ix-radio>
-          <ix-radio value="lg" label="Large"></ix-radio>
-        </ix-radio-group>
-      </ix-content>
-    </ix-application>
-    <script type="module">
-      (async () => {
-        const validBreakpoints = new Set(['sm', 'md', 'lg']);
-        await globalThis.customElements.whenDefined('ix-application');
-        await globalThis.customElements.whenDefined('ix-radio-group');
-        const nav = document.querySelector('ix-application');
-        nav.breakpoints = ['md'];
-        const radioGroup = document.getElementById('radio-group');
-        radioGroup.addEventListener('valueChange', ({ detail }) => {
-          if (validBreakpoints.has(detail)) {
-            nav.breakpoints = [detail];
-          }
-        });
-      })();
-    </script>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: radio-group
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Radio group example</title>
-  </head>
-  <body>
-    <ix-radio-group label="Storage options">
-      <ix-radio
-        label="256GB SSD storage"
-        value="256"
-        name="storage-256gb"
-      ></ix-radio>
-      <ix-radio
-        label="512GB SSD storage"
-        value="512"
-        name="storage-512gb"
-      ></ix-radio>
-      <ix-radio
-        label="1TB SSD storage"
-        value="1024"
-        name="storage-1tb"
-      ></ix-radio>
-      <ix-radio
-        label="2TB SSD storage"
-        value="2048"
-        name="storage-2tb"
-        disabled
-      ></ix-radio>
-    </ix-radio-group>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-### Example: radio-validation
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Radio validation example</title>
-  </head>
-  <style>
-    ix-radio-group {
-      margin-bottom: 1rem;
-    }
-  </style>
-  <body>
-    <div>
-      <ix-radio-group label="Storage options">
-        <ix-radio
-          label="256GB SSD storage"
-          value="256"
-          name="storage-256gb"
-          checked
-          class="ix-info"
-          info-text="Storage options might differ in speed."
-        ></ix-radio>
-        <ix-radio
-          label="512GB SSD storage"
-          value="512"
-          name="storage-512gb"
-          class="ix-warning"
-          warning-text="Storage options might not be available."
-        ></ix-radio>
-      </ix-radio-group>
-    </div>
-    <div>
-      <ix-radio-group label="Storage options">
-        <ix-radio
-          label="256GB SSD storage"
-          value="256"
-          name="storage-256gb"
-          checked
-          class="ix-valid"
-          valid-text="Storage option is available."
-        ></ix-radio>
-        <ix-radio
-          label="512GB SSD storage"
-          value="512"
-          name="storage-512gb"
-          class="ix-invalid"
-          invalid-text="Storage option is not available."
-        ></ix-radio>
-      </ix-radio-group>
-    </div>
-    <script type="module" src="./init.js"></script>
-  </body>
-</html>
-```
-## React Examples
-### Example: application-breakpoints
-```tsx
-import { Breakpoint } from '@siemens/ix';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxRadio,
-  IxRadioGroup,
-} from '@siemens/ix-react';
-import { useState } from 'react';
-const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-export default () => {
-  const [breakpoints, setBreakpoints] = useState<Breakpoint[]>(['md']);
-  const handleBreakpointChange = (event: CustomEvent<string>) => {
-    const value = event.detail;
-    if (validBreakpoints.has(value as Breakpoint)) {
-      setBreakpoints([value as Breakpoint]);
-    }
-  };
-  return (
-    <IxApplication breakpoints={breakpoints}>
-      <IxApplicationHeader name="My Application">
-        <div className="placeholder-logo" slot="logo"></div>
-        <IxDropdownButton variant="subtle-tertiary" label="Select config">
-          <IxDropdownItem label="Config 1"></IxDropdownItem>
-          <IxDropdownItem label="Config 2"></IxDropdownItem>
-          <IxDropdownItem label="Config 3"></IxDropdownItem>
-        </IxDropdownButton>
-        <IxAvatar>
-          <IxDropdownItem label="Action 1"></IxDropdownItem>
-          <IxDropdownItem label="Action 2"></IxDropdownItem>
-          <IxDropdownItem label="Action 3"></IxDropdownItem>
-        </IxAvatar>
-      </IxApplicationHeader>
-      <IxMenu>
-        <IxMenuItem>Item 1</IxMenuItem>
-        <IxMenuItem>Item 2</IxMenuItem>
-      </IxMenu>
-      <IxContent>
-        <IxContentHeader
-          slot="header"
-          headerTitle="Choose breakpoint"
-        ></IxContentHeader>
-        <IxRadioGroup
-          value={breakpoints[0]}
-          onValueChange={handleBreakpointChange}
-        >
-          <IxRadio value="sm" label="Small"></IxRadio>
-          <IxRadio value="md" label="Medium"></IxRadio>
-          <IxRadio value="lg" label="Large"></IxRadio>
-        </IxRadioGroup>
-      </IxContent>
-    </IxApplication>
-  );
-};
-```
-### Example: radio-group
-```tsx
-import { IxRadio, IxRadioGroup } from '@siemens/ix-react';
-export default () => {
-  return (
-    <IxRadioGroup label="Storage options">
-      <IxRadio
-        label="256GB SSD storage"
-        value="256"
-        name="storage-256gb"
-      ></IxRadio>
-      <IxRadio
-        label="512GB SSD storage"
-        value="512"
-        name="storage-512gb"
-      ></IxRadio>
-      <IxRadio
-        label="1TB SSD storage"
-        value="1024"
-        name="storage-1tb"
-      ></IxRadio>
-      <IxRadio
-        label="2TB SSD storage"
-        value="2048"
-        name="storage-2tb"
-        disabled
-      ></IxRadio>
-    </IxRadioGroup>
-  );
-};
-```
-### Example: radio-validation
-```tsx
-import { IxRadio, IxRadioGroup } from '@siemens/ix-react';
-export default () => {
-  return (
-    <>
-      <div>
-        <IxRadioGroup
-          label="Storage options"
-          infoText="Storage options might differ in speed."
-        >
-          <IxRadio
-            label="256GB SSD storage"
-            value="256"
-            name="storage-256gb"
-            checked
-            className="ix-info"
-          ></IxRadio>
-          <IxRadio
-            label="512GB SSD storage"
-            value="512"
-            name="storage-512gb"
-            className="ix-info"
-          ></IxRadio>
-        </IxRadioGroup>
-      </div>
-      <div>
-        <IxRadioGroup
-          label="Storage options"
-          warningText="Storage options might not be available."
-        >
-          <IxRadio
-            label="256GB SSD storage"
-            value="256"
-            name="storage-256gb"
-            checked
-            className="ix-warning"
-          ></IxRadio>
-          <IxRadio
-            label="512GB SSD storage"
-            value="512"
-            name="storage-512gb"
-            className="ix-warning"
-          ></IxRadio>
-        </IxRadioGroup>
-      </div>
-      <div>
-        <IxRadioGroup
-          label="Storage options"
-          validText="Storage option is available."
-        >
-          <IxRadio
-            label="256GB SSD storage"
-            value="256"
-            name="storage-256gb"
-            checked
-            className="ix-valid"
-          ></IxRadio>
-          <IxRadio
-            label="512GB SSD storage"
-            value="512"
-            name="storage-512gb"
-            className="ix-valid"
-          ></IxRadio>
-        </IxRadioGroup>
-      </div>
-      <div>
-        <IxRadioGroup
-          label="Storage options"
-          invalidText="Storage option is not available."
-        >
-          <IxRadio
-            label="256GB SSD storage"
-            value="256"
-            name="storage-256gb"
-            checked
-            className="ix-invalid"
-          ></IxRadio>
-          <IxRadio
-            label="512GB SSD storage"
-            value="512"
-            name="storage-512gb"
-            className="ix-invalid"
-          ></IxRadio>
-        </IxRadioGroup>
-      </div>
-    </>
-  );
-};
-```
-## Vue Examples
-### Example: application-breakpoints
-```tsx
-<script setup lang="ts">
-import type { Breakpoint } from '@siemens/ix';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxRadio,
-  IxRadioGroup,
-} from '@siemens/ix-vue';
-</script>
-<script lang="ts">
-const validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-export default {
-  data(): {
-    breakpoints: Breakpoint[];
-  } {
-    return {
-      breakpoints: ['md'],
-    };
-  },
-  methods: {
-    setBreakpoint(event: CustomEvent<Breakpoint>) {
-      const value = event?.detail;
-      if (validBreakpoints.has(value)) {
-        this.breakpoints = [value];
-      }
-    },
-  },
-};
-</script>
-<template>
-  <IxApplication :breakpoints="breakpoints">
-    <IxApplicationHeader name="My Application">
-      <div className="placeholder-logo" slot="logo"></div>
-      <IxDropdownButton variant="subtle-tertiary" label="Select config">
-        <IxDropdownItem label="Config 1"></IxDropdownItem>
-        <IxDropdownItem label="Config 2"></IxDropdownItem>
-        <IxDropdownItem label="Config 3"></IxDropdownItem>
-      </IxDropdownButton>
-      <IxAvatar>
-        <IxDropdownItem label="Action 1"></IxDropdownItem>
-        <IxDropdownItem label="Action 2"></IxDropdownItem>
-        <IxDropdownItem label="Action 3"></IxDropdownItem>
-      </IxAvatar>
-    </IxApplicationHeader>
-    <IxMenu>
-      <IxMenuItem>Item 1</IxMenuItem>
-      <IxMenuItem>Item 2</IxMenuItem>
-    </IxMenu>
-    <IxContent>
-      <IxContentHeader
-        slot="header"
-        header-title="Choose breakpoint"
-      ></IxContentHeader>
-      <IxRadioGroup :value="breakpoints[0]" @valueChange="setBreakpoint">
-        <IxRadio value="sm" label="Small" aria-label="Small"></IxRadio>
-        <IxRadio value="md" label="Medium" aria-label="Medium"></IxRadio>
-        <IxRadio value="lg" label="Large" aria-label="Large"></IxRadio>
-      </IxRadioGroup>
-    </IxContent>
-  </IxApplication>
-</template>
-```
-### Example: radio-group
-```tsx
-<script setup lang="ts">
-import { IxRadio, IxRadioGroup } from '@siemens/ix-vue';
-</script>
-<template>
-  <IxRadioGroup label="Storage options">
-    <IxRadio
-      label="256GB SSD storage"
-      value="256"
-      name="storage-256gb"
-    ></IxRadio>
-    <IxRadio
-      label="512GB SSD storage"
-      value="512"
-      name="storage-512gb"
-    ></IxRadio>
-    <IxRadio
-      label="1TB SSD storage"
-      value="1024"
-      name="storage-1tb"
-    ></IxRadio>
-    <IxRadio
-      label="2TB SSD storage"
-      value="2048"
-      name="storage-2tb"
-      disabled
-    ></IxRadio>
-  </IxRadioGroup>
-</template>
-```
-### Example: radio-validation
-```tsx
-<script setup lang="ts">
-import { IxRadio, IxRadioGroup } from '@siemens/ix-vue';
-</script>
-<template>
-  <div>
-    <IxRadioGroup
-      label="Storage options"
-      info-text="Storage options might differ in speed."
-    >
-      <IxRadio
-        label="256GB SSD storage"
-        value="256"
-        name="storage-256gb"
-        checked
-        class="ix-info"
-      ></IxRadio>
-      <IxRadio
-        label="512GB SSD storage"
-        value="512"
-        name="storage-512gb"
-        class="ix-info"
-      ></IxRadio>
-    </IxRadioGroup>
-  </div>
-  <div>
-    <IxRadioGroup
-      label="Storage options"
-      warning-text="Storage options might not be available."
-    >
-      <IxRadio
-        label="256GB SSD storage"
-        value="256"
-        name="storage-256gb"
-        checked
-        class="ix-warning"
-      ></IxRadio>
-      <IxRadio
-        label="512GB SSD storage"
-        value="512"
-        name="storage-512gb"
-        class="ix-warning"
-      ></IxRadio>
-    </IxRadioGroup>
-  </div>
-  <div>
-    <IxRadioGroup
-      label="Storage options"
-      valid-text="Storage option is available."
-    >
-      <IxRadio
-        label="256GB SSD storage"
-        value="256"
-        name="storage-256gb"
-        checked
-        class="ix-valid"
-      ></IxRadio>
-      <IxRadio
-        label="512GB SSD storage"
-        value="512"
-        name="storage-512gb"
-        class="ix-valid"
-      ></IxRadio>
-    </IxRadioGroup>
-  </div>
-  <div>
-    <IxRadioGroup
-      label="Storage options"
-      invalid-text="Storage option is not available."
-    >
-      <IxRadio
-        label="256GB SSD storage"
-        value="256"
-        name="storage-256gb"
-        checked
-        class="ix-invalid"
-      ></IxRadio>
-      <IxRadio
-        label="512GB SSD storage"
-        value="512"
-        name="storage-512gb"
-        class="ix-invalid"
-      ></IxRadio>
-    </IxRadioGroup>
-  </div>
-</template>
-```
-## Angular Examples
-### Example: application-breakpoints
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import { Breakpoint } from '@siemens/ix';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './application-breakpoints.html',
-})
-export default class ApplicationBreakpointExample {
-  breakpoints: Breakpoint[] = ['md'];
-  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-  onCheckedChange(value: string) {
-    const breakpoint = value as Breakpoint;
-    if (this.validBreakpoints.has(breakpoint)) {
-      this.breakpoints = [breakpoint];
-    }
-  }
-}
-```
-#### 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-application application-name="Application name" [breakpoints]="breakpoints">
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <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>
-      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-    </ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="Choose breakpoint">
-    </ix-content-header>
-    <ix-radio-group
-      [value]="breakpoints[0]"
-      (valueChange)="onCheckedChange($event.detail)"
-    >
-      <ix-radio value="sm" label="Small"></ix-radio>
-      <ix-radio value="md" label="Medium"></ix-radio>
-      <ix-radio value="lg" label="Large"></ix-radio>
-    </ix-radio-group>
-  </ix-content>
-</ix-application>
-```
-### Example: radio-group
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './radio-group.html',
-})
-export default class RadioGroup {}
-```
-#### 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-radio-group label='Storage options'>
-  <ix-radio
-    label='256GB SSD storage'
-    value='256'
-    name='storage-256gb'
-  ></ix-radio>
-  <ix-radio
-    label='512GB SSD storage'
-    value='512'
-    name='storage-512gb'
-  ></ix-radio>
-  <ix-radio
-    label='1TB SSD storage'
-    value='1024'
-    name='storage-1tb'
-  ></ix-radio>
-  <ix-radio
-    label='2TB SSD storage'
-    value='2048'
-    name='storage-2tb'
-    disabled
-  ></ix-radio>
-</ix-radio-group>
-```
-### Example: radio-validation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-@Component({
-  standalone: false,
-  selector: 'app-example',
-  templateUrl: './radio-validation.html',
-})
-export default class RadioValidation {}
-```
-#### Component template
-```html
-<!--
-SPDX-FileCopyrightText: 2024 Siemens AG
-SPDX-License-Identifier: MIT
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
--->
-<div>
-  <ix-radio-group
-    label='Storage options'
-  >
-    <ix-radio
-      label='256GB SSD storage'
-      value='256'
-      name='storage-256gb'
-      checked
-      class='ix-info'
-      info-text='Storage options might differ in speed.'
-    ></ix-radio>
-    <ix-radio
-      label='512GB SSD storage'
-      value='512'
-      name='storage-512gb'
-      class='ix-warning'
-      warning-text='Storage options might not be available.'
-    ></ix-radio>
-  </ix-radio-group>
-</div>
-<div>
-  <ix-radio-group
-    label='Storage options'
-  >
-    <ix-radio
-      label='256GB SSD storage'
-      value='256'
-      name='storage-256gb'
-      checked
-      class='ix-valid'
-      valid-text='Storage option is available.'
-    ></ix-radio>
-    <ix-radio
-      label='512GB SSD storage'
-      value='512'
-      name='storage-512gb'
-      class='ix-invalid'
-      invalid-text='Storage option is not available.'
-    ></ix-radio>
-  </ix-radio-group>
-</div>
-```
-## Angular Standalone Examples
-### Example: application-breakpoints
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxApplication,
-  IxApplicationHeader,
-  IxAvatar,
-  IxContent,
-  IxContentHeader,
-  IxDropdownButton,
-  IxDropdownItem,
-  IxMenu,
-  IxMenuItem,
-  IxRadio,
-  IxRadioGroup,
-} from '@siemens/ix-angular/standalone';
-import { Breakpoint } from '@siemens/ix';
-@Component({
-  selector: 'app-example',
-  imports: [
-    IxApplication,
-    IxApplicationHeader,
-    IxDropdownButton,
-    IxDropdownItem,
-    IxAvatar,
-    IxMenu,
-    IxMenuItem,
-    IxContent,
-    IxContentHeader,
-    IxRadioGroup,
-    IxRadio,
-  ],
-  templateUrl: './application-breakpoints.html',
-})
-export default class ApplicationBreakpointExample {
-  breakpoints: Breakpoint[] = ['md'];
-  private readonly validBreakpoints = new Set<Breakpoint>(['sm', 'md', 'lg']);
-  onCheckedChange(value: string) {
-    const breakpoint = value as Breakpoint;
-    if (this.validBreakpoints.has(breakpoint)) {
-      this.breakpoints = [breakpoint];
-    }
-  }
-}
-```
-#### 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 application-name="Application name" [breakpoints]="breakpoints">
-  <ix-application-header name="My Application">
-    <div class="placeholder-logo" slot="logo"></div>
-    <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>
-      <ix-dropdown-item label="Action 1"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 2"></ix-dropdown-item>
-      <ix-dropdown-item label="Action 3"></ix-dropdown-item>
-    </ix-avatar>
-  </ix-application-header>
-  <ix-menu>
-    <ix-menu-item>Item 1</ix-menu-item>
-    <ix-menu-item>Item 2</ix-menu-item>
-  </ix-menu>
-  <ix-content>
-    <ix-content-header slot="header" header-title="Choose breakpoint">
-    </ix-content-header>
-    <ix-radio-group
-      [value]="breakpoints[0]"
-      (valueChange)="onCheckedChange($event.detail)"
-    >
-      <ix-radio value="sm" label="Small"></ix-radio>
-      <ix-radio value="md" label="Medium"></ix-radio>
-      <ix-radio value="lg" label="Large"></ix-radio>
-    </ix-radio-group>
-  </ix-content>
-</ix-application>
-```
-### Example: radio-group
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxRadioGroup,
-  IxRadio,
-  IxRadioValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxRadioGroup, IxRadio, IxRadioValueAccessorDirective],
-  templateUrl: './radio-group.html',
-})
-export default class RadioGroup {}
-```
-#### 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-radio-group label="Storage options">
-  <ix-radio
-    label="256GB SSD storage"
-    value="256"
-    name="storage-256gb"
-  ></ix-radio>
-  <ix-radio
-    label="512GB SSD storage"
-    value="512"
-    name="storage-512gb"
-  ></ix-radio>
-  <ix-radio label="1TB SSD storage" value="1024" name="storage-1tb"></ix-radio>
-  <ix-radio
-    label="2TB SSD storage"
-    value="2048"
-    name="storage-2tb"
-    disabled
-  ></ix-radio>
-</ix-radio-group>
-```
-### Example: radio-validation
-#### Component typescript
-```typescript
-import { Component } from '@angular/core';
-import {
-  IxRadioGroup,
-  IxRadio,
-  IxRadioValueAccessorDirective,
-} from '@siemens/ix-angular/standalone';
-@Component({
-  selector: 'app-example',
-  imports: [IxRadioGroup, IxRadio, IxRadioValueAccessorDirective],
-  templateUrl: './radio-validation.html',
-})
-export default class RadioValidation {}
-```
-#### 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-radio-group label="Storage options">
-    <ix-radio
-      label="256GB SSD storage"
-      value="256"
-      name="storage-256gb"
-      checked
-      class="ix-info"
-      info-text="Storage options might differ in speed."
-    ></ix-radio>
-    <ix-radio
-      label="512GB SSD storage"
-      value="512"
-      name="storage-512gb"
-      class="ix-warning"
-      warning-text="Storage options might not be available."
-    ></ix-radio>
-  </ix-radio-group>
-</div>
-<div>
-  <ix-radio-group label="Storage options">
-    <ix-radio
-      label="256GB SSD storage"
-      value="256"
-      name="storage-256gb"
-      checked
-      class="ix-valid"
-      valid-text="Storage option is available."
-    ></ix-radio>
-    <ix-radio
-      label="512GB SSD storage"
-      value="512"
-      name="storage-512gb"
-      class="ix-invalid"
-      invalid-text="Storage option is not available."
-    ></ix-radio>
-  </ix-radio-group>
-</div>
-```
 <!-- Auto Generated Below -->