@siemens/ix 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058

package/dist/collection/components/radio/radio.css

@@ -73,7 +73,7 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
-:host button {
+:host .radio-checkmark {
   all: unset;
   display: inline-flex;
   position: relative;
@@ -88,13 +88,6 @@
   border: 1px solid white;
   border-radius: 100px;
 }
-:host button:focus-visible {
-  outline: 0.0625rem solid var(--theme-color-focus-bdr);
-  outline-offset: var(--theme-radiobtn--focus--outline-offset);
-}
-:host input[type=radio] {
-  display: none;
-}
 :host .radio-button {
   height: 1.5rem;
   width: 1.5rem;
@@ -116,35 +109,35 @@
   height: 0.5rem;
 }
 
-:host button {
+:host .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
 }
 
-:host(:hover) button {
+:host(:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
 }
 
-:host(:active) button {
+:host(:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
 }
 
-:host(.checked) button,
-:host([indeterminate]) button {
+:host(.checked) .radio-checkmark,
+:host([indeterminate]) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
 }
 
-:host(.checked:hover) button,
-:host([indeterminate]:hover) button {
+:host(.checked:hover) .radio-checkmark,
+:host([indeterminate]:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
 }
 
-:host(.checked:active) button,
-:host([indeterminate]:active) button {
+:host(.checked:active) .radio-checkmark,
+:host([indeterminate]:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
@@ -152,22 +145,27 @@
 :host(.disabled) {
   pointer-events: none;
 }
-:host(.disabled) button {
+:host(.disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.checked.disabled) button,
-:host([indeterminate].disabled) button {
+:host(.checked.disabled) .radio-checkmark,
+:host([indeterminate].disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
 }
 
+:host(:focus-visible) {
+  outline: 0.0625rem solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-radiobtn--focus--outline-offset);
+}
+
 ix-typography {
   margin: 0.125rem 0 0.125rem 0.5rem;
 }
 
-:host(.ix-info:not(.disabled)) button {
+:host(.ix-info:not(.disabled)) .radio-checkmark {
   --theme-radiobtn-unchecked--background: var(
     --theme-radiobtn-unchecked--background--info
   );
@@ -224,51 +222,51 @@ ix-typography {
   );
 }
 
-:host(.ix-info) button {
+:host(.ix-info) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
 }
 
-:host(.ix-info:hover) button {
+:host(.ix-info:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
 }
 
-:host(.ix-info:active) button {
+:host(.ix-info:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
 }
 
-:host(.ix-info.checked) button,
-:host(.ix-info[indeterminate]) button {
+:host(.ix-info.checked) .radio-checkmark,
+:host(.ix-info[indeterminate]) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
 }
 
-:host(.ix-info.checked:hover) button,
-:host(.ix-info[indeterminate]:hover) button {
+:host(.ix-info.checked:hover) .radio-checkmark,
+:host(.ix-info[indeterminate]:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
 }
 
-:host(.ix-info.checked:active) button,
-:host(.ix-info[indeterminate]:active) button {
+:host(.ix-info.checked:active) .radio-checkmark,
+:host(.ix-info[indeterminate]:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-info.disabled) button {
+:host(.ix-info.disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-info.checked.disabled) button,
-:host(.ix-info[indeterminate].disabled) button {
+:host(.ix-info.checked.disabled) .radio-checkmark,
+:host(.ix-info[indeterminate].disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
 }
 
-:host(.ix-warning:not(.disabled)) button {
+:host(.ix-warning:not(.disabled)) .radio-checkmark {
   --theme-radiobtn-unchecked--background: var(
     --theme-radiobtn-unchecked--background--warning
   );
@@ -325,51 +323,51 @@ ix-typography {
   );
 }
 
-:host(.ix-warning) button {
+:host(.ix-warning) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
 }
 
-:host(.ix-warning:hover) button {
+:host(.ix-warning:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
 }
 
-:host(.ix-warning:active) button {
+:host(.ix-warning:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
 }
 
-:host(.ix-warning.checked) button,
-:host(.ix-warning[indeterminate]) button {
+:host(.ix-warning.checked) .radio-checkmark,
+:host(.ix-warning[indeterminate]) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
 }
 
-:host(.ix-warning.checked:hover) button,
-:host(.ix-warning[indeterminate]:hover) button {
+:host(.ix-warning.checked:hover) .radio-checkmark,
+:host(.ix-warning[indeterminate]:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
 }
 
-:host(.ix-warning.checked:active) button,
-:host(.ix-warning[indeterminate]:active) button {
+:host(.ix-warning.checked:active) .radio-checkmark,
+:host(.ix-warning[indeterminate]:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-warning.disabled) button {
+:host(.ix-warning.disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-warning.checked.disabled) button,
-:host(.ix-warning[indeterminate].disabled) button {
+:host(.ix-warning.checked.disabled) .radio-checkmark,
+:host(.ix-warning[indeterminate].disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
 }
 
-:host(.ix-invalid--required:not(.disabled)) button {
+:host(.ix-invalid--required:not(.disabled)) .radio-checkmark {
   --theme-radiobtn-unchecked--background: var(
     --theme-radiobtn-unchecked--background--invalid
   );
@@ -426,51 +424,51 @@ ix-typography {
   );
 }
 
-:host(.ix-invalid--required) button {
+:host(.ix-invalid--required) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
 }
 
-:host(.ix-invalid--required:hover) button {
+:host(.ix-invalid--required:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
 }
 
-:host(.ix-invalid--required:active) button {
+:host(.ix-invalid--required:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
 }
 
-:host(.ix-invalid--required.checked) button,
-:host(.ix-invalid--required[indeterminate]) button {
+:host(.ix-invalid--required.checked) .radio-checkmark,
+:host(.ix-invalid--required[indeterminate]) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
 }
 
-:host(.ix-invalid--required.checked:hover) button,
-:host(.ix-invalid--required[indeterminate]:hover) button {
+:host(.ix-invalid--required.checked:hover) .radio-checkmark,
+:host(.ix-invalid--required[indeterminate]:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
 }
 
-:host(.ix-invalid--required.checked:active) button,
-:host(.ix-invalid--required[indeterminate]:active) button {
+:host(.ix-invalid--required.checked:active) .radio-checkmark,
+:host(.ix-invalid--required[indeterminate]:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-invalid--required.disabled) button {
+:host(.ix-invalid--required.disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-invalid--required.checked.disabled) button,
-:host(.ix-invalid--required[indeterminate].disabled) button {
+:host(.ix-invalid--required.checked.disabled) .radio-checkmark,
+:host(.ix-invalid--required[indeterminate].disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
 }
 
-:host(.ix-invalid:not(.disabled)) button {
+:host(.ix-invalid:not(.disabled)) .radio-checkmark {
   --theme-radiobtn-unchecked--background: var(
     --theme-radiobtn-unchecked--background--invalid
   );
@@ -527,46 +525,46 @@ ix-typography {
   );
 }
 
-:host(.ix-invalid) button {
+:host(.ix-invalid) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
 }
 
-:host(.ix-invalid:hover) button {
+:host(.ix-invalid:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
 }
 
-:host(.ix-invalid:active) button {
+:host(.ix-invalid:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
 }
 
-:host(.ix-invalid.checked) button,
-:host(.ix-invalid[indeterminate]) button {
+:host(.ix-invalid.checked) .radio-checkmark,
+:host(.ix-invalid[indeterminate]) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
 }
 
-:host(.ix-invalid.checked:hover) button,
-:host(.ix-invalid[indeterminate]:hover) button {
+:host(.ix-invalid.checked:hover) .radio-checkmark,
+:host(.ix-invalid[indeterminate]:hover) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--hover);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
 }
 
-:host(.ix-invalid.checked:active) button,
-:host(.ix-invalid[indeterminate]:active) button {
+:host(.ix-invalid.checked:active) .radio-checkmark,
+:host(.ix-invalid[indeterminate]:active) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--active);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
 }
 
-:host(.ix-invalid.disabled) button {
+:host(.ix-invalid.disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-unchecked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
 }
 
-:host(.ix-invalid.checked.disabled) button,
-:host(.ix-invalid[indeterminate].disabled) button {
+:host(.ix-invalid.checked.disabled) .radio-checkmark,
+:host(.ix-invalid[indeterminate].disabled) .radio-checkmark {
   background-color: var(--theme-radiobtn-checked--background--disabled);
   border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
 }

package/dist/collection/components/radio/radio.js

@@ -6,10 +6,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Host, h, } from "@stencil/core";
-import { makeRef } from "../utils/make-ref";
-import { createClassMutationObserver, } from "../utils/input";
+import { h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
+import { createClassMutationObserver, } from "../utils/input";
 /**
  * @form-ready
  */
@@ -29,11 +28,9 @@ export class Radio {
          * @since 3.0.0
          */
         this.required = false;
-        this.inputRef = makeRef((radiobuttonRef) => {
-            radiobuttonRef.checked = this.checked;
-        });
     }
-    setCheckedState(newChecked) {
+    /** @internal */
+    async setCheckedState(newChecked) {
         if (this.checked) {
             return;
         }
@@ -44,8 +41,6 @@ export class Radio {
         this.checked = newChecked;
     }
     async onCheckedChange() {
-        const radiobuttonRef = await this.inputRef.waitForCurrent();
-        radiobuttonRef.checked = this.checked;
         this.updateFormInternalValue();
     }
     onValueChange() {
@@ -76,6 +71,35 @@ export class Radio {
             this.formInternals.setFormValue(null);
         }
     }
+    onKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        let preventEvent = false;
+        if (event.code === 'Space') {
+            preventEvent = true;
+            this.setCheckedState(true);
+        }
+        const closestRadioGroup = this.hostElement.closest('ix-radio-group');
+        switch (event.code) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                preventEvent = true;
+                closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, false);
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                preventEvent = true;
+                closestRadioGroup === null || closestRadioGroup === void 0 ? void 0 : closestRadioGroup.setCheckedToNextItem(this.hostElement, true);
+                break;
+            default:
+                break;
+        }
+        if (preventEvent) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
     /** @internal */
     hasValidValue() {
         return Promise.resolve(this.checked);
@@ -85,18 +109,21 @@ export class Radio {
         return Promise.resolve(this.formInternals.form);
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'e74cc1b490830412ff329d586c35914a8b55abb8', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", class: {
+        let tabIndex = 0;
+        if (this.disabled) {
+            tabIndex = -1;
+        }
+        return (h(Host, { key: '0a08dcbeaaf21bb9063ff44dbb9b7fec0bd18b85', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
-            }, onBlur: () => this.ixBlur.emit() }, h("label", { key: '2e2736e762d21e1e254078dc07e0e6754c9f0d60' }, h("div", { key: 'c22603f3a435fc4271b092af4010208ab7d43eda', class: "radio-button" }, h("input", { key: 'd56beba76c83ab1ccf2e3eaea89c6d1c285e3c62', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, name: this.name, ref: this.inputRef, type: "radio", value: (_a = this.value) !== null && _a !== void 0 ? _a : 'on', onChange: () => {
-                const ref = this.inputRef.current;
-                if (ref) {
-                    this.setCheckedState(ref.checked);
-                }
-            } }), h("button", { key: '70747f5c03103161f8808d996b15720af681c54d', disabled: this.disabled, class: {
+            }, onClick: () => {
+                if (this.disabled)
+                    return;
+                this.setCheckedState(true);
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'ba82e05023a706e366cede669060ec11d2848754' }, h("div", { key: 'c3b75eea221618adc27dec099089dac0f84a91ac', class: "radio-button" }, h("div", { key: 'd5d10cfce1442f641f939aa16a6feb79fc38caf0', "aria-hidden": "true", class: {
+                ['radio-checkmark']: true,
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, h("div", { key: '3f2a5030726debb338686f95feabc123f64524bb', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: '1beb22d26c2e6c759bfc6be64ad6a11b1c0d2d19', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'cbf06b0578d34daed1a952d2bb3346affaf384b6' }))))));
+            } }, h("div", { key: 'fe7c6830a7fb254291fe95d4310b59bd32ed9492', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'bc5fe1821b5686760eb7fa3959cf30b54cca40ee', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'a72b3d10cdcbaa398a6f59b9ce1d036f12e4819c' }))))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -285,6 +312,30 @@ export class Radio {
     }
     static get methods() {
         return {
+            "setCheckedState": {
+                "complexType": {
+                    "signature": "(newChecked: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "newChecked",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
             "hasValidValue": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",

package/dist/collection/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Method,\n  Element,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  IxFormComponent,\n} from '../utils/input';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Requires the radio component and its group to be checked for the form to be submittable\n   *\n   * @since 3.0.0\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the radio is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private classMutationObserver?: ClassMutationObserver;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((radiobuttonRef) => {\n    radiobuttonRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    const radiobuttonRef = await this.inputRef.waitForCurrent();\n    radiobuttonRef.checked = this.checked;\n\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  connectedCallback(): void {\n    const parent = this.hostElement.closest('ix-radio-group');\n    if (parent) {\n      this.classMutationObserver = createClassMutationObserver(parent, () => {\n        this.hostElement.classList.toggle(\n          'ix-invalid--required',\n          parent.classList.contains('ix-invalid--required')\n        );\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.classMutationObserver) {\n      this.classMutationObserver.destroy();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"radio\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <div class=\"radio-button\">\n            <input\n              aria-checked={a11yBoolean(this.checked)}\n              required={this.required}\n              disabled={this.disabled}\n              checked={this.checked}\n              name={this.name}\n              ref={this.inputRef}\n              type=\"radio\"\n              value={this.value ?? 'on'}\n              onChange={() => {\n                const ref = this.inputRef.current;\n                if (ref) {\n                  this.setCheckedState(ref.checked);\n                }\n              }}\n            />\n            <button\n              disabled={this.disabled}\n              class={{\n                checked: this.checked,\n              }}\n              onClick={() => this.setCheckedState(!this.checked)}\n            >\n              <div\n                class=\"checkmark\"\n                style={{ visibility: this.checked ? 'visible' : 'hidden' }}\n              ></div>\n            </button>\n          </div>\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.disabled ? 'weak' : 'std'}\n            >\n              {this.label}\n              <slot></slot>\n            </ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAEL,2BAA2B,GAE5B,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AAOH,MAAM,OAAO,KAAK;IANlB;QAyBE;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;;;WAIG;QACsB,aAAQ,GAAY,KAAK,CAAC;KA0KpD;IAvJC,gBAAgB;IAEhB,KAAK,CAAC,eAAe,CAAC,UAAmB;QACvC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACnD,IAAI,MAAM,CAAC,gBAAgB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC5B,CAAC;IAGD,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,iBAAiB;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,qBAAqB,GAAG,2BAA2B,CAAC,MAAM,EAAE,GAAG,EAAE;gBACpE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAC/B,sBAAsB,EACtB,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAClD,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC;QACvC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,uBAAuB;;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,SAAS,CAAC,KAAoB;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,YAAY,GAAG,KAAK,CAAC;QAEzB,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3B,YAAY,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;QACD,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QAErE,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,SAAS,CAAC;YACf,KAAK,WAAW;gBACd,YAAY,GAAG,IAAI,CAAC;gBACpB,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;gBACjE,MAAM;YACR,KAAK,WAAW,CAAC;YACjB,KAAK,YAAY;gBACf,YAAY,GAAG,IAAI,CAAC;gBACpB,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;gBAChE,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,gBAAgB;IAEhB,aAAa;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvC,CAAC;IAED,gBAAgB;IAEhB,wBAAwB;QACtB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,IAAI,QAAQ,GAAG,CAAC,CAAC;QAEjB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,QAAQ,GAAG,CAAC,CAAC,CAAC;QAChB,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qEACW,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,mBACxB,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EACzC,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,EACD,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,IAAI,CAAC,QAAQ;oBAAE,OAAO;gBAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC,EACD,SAAS,EAAE,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAC1D,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAEhC;gBACE,4DAAK,KAAK,EAAC,cAAc;oBACvB,2EACc,MAAM,EAClB,KAAK,EAAE;4BACL,CAAC,iBAAiB,CAAC,EAAE,IAAI;4BACzB,OAAO,EAAE,IAAI,CAAC,OAAO;yBACtB;wBAED,4DACE,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,GACrD,CACH,CACF;gBACL,IAAI,CAAC,KAAK,IAAI,CACb,sEACE,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;oBAExC,IAAI,CAAC,KAAK;oBACX,8DAAa,CACC,CACjB,CACK,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  IxFormComponent,\n} from '../utils/input';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-radio',\n  styleUrl: 'radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Radio implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxRadioElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the radio component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the radio component\n   */\n  @Prop({ reflect: true }) value?: string;\n\n  /**\n   * Label for the radio component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Disabled state of the radio component\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Checked state of the radio component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Requires the radio component and its group to be checked for the form to be submittable\n   *\n   * @since 3.0.0\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Event emitted when the checked state of the radio changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the radio changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the radio is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private classMutationObserver?: ClassMutationObserver;\n\n  /** @internal */\n  @Method()\n  async setCheckedState(newChecked: boolean) {\n    if (this.checked) {\n      return;\n    }\n    const result = this.checkedChange.emit(newChecked);\n    if (result.defaultPrevented) {\n      return;\n    }\n\n    this.checked = newChecked;\n  }\n\n  @Watch('checked')\n  async onCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  connectedCallback(): void {\n    const parent = this.hostElement.closest('ix-radio-group');\n    if (parent) {\n      this.classMutationObserver = createClassMutationObserver(parent, () => {\n        this.hostElement.classList.toggle(\n          'ix-invalid--required',\n          parent.classList.contains('ix-invalid--required')\n        );\n      });\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.classMutationObserver) {\n      this.classMutationObserver.destroy();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  onKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n    let preventEvent = false;\n\n    if (event.code === 'Space') {\n      preventEvent = true;\n      this.setCheckedState(true);\n    }\n    const closestRadioGroup = this.hostElement.closest('ix-radio-group');\n\n    switch (event.code) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        preventEvent = true;\n        closestRadioGroup?.setCheckedToNextItem(this.hostElement, false);\n        break;\n      case 'ArrowDown':\n      case 'ArrowRight':\n        preventEvent = true;\n        closestRadioGroup?.setCheckedToNextItem(this.hostElement, true);\n        break;\n      default:\n        break;\n    }\n\n    if (preventEvent) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    let tabIndex = 0;\n\n    if (this.disabled) {\n      tabIndex = -1;\n    }\n\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"radio\"\n        tabindex={tabIndex}\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n        onClick={() => {\n          if (this.disabled) return;\n          this.setCheckedState(true);\n        }}\n        onKeyDown={(event: KeyboardEvent) => this.onKeyDown(event)}\n        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <div class=\"radio-button\">\n            <div\n              aria-hidden=\"true\"\n              class={{\n                ['radio-checkmark']: true,\n                checked: this.checked,\n              }}\n            >\n              <div\n                class=\"checkmark\"\n                style={{ visibility: this.checked ? 'visible' : 'hidden' }}\n              ></div>\n            </div>\n          </div>\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.disabled ? 'weak' : 'std'}\n            >\n              {this.label}\n              <slot></slot>\n            </ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-group/radio-group.js

@@ -82,10 +82,20 @@ export class RadiobuttonGroup {
             }
             radio.checked = false;
         });
+        const hasCheckedRadio = this.isSomeRadioChecked();
+        for (const radio of this.radiobuttonElements) {
+            radio.tabIndex = radio.checked ? 0 : -1;
+        }
+        if (!hasCheckedRadio && this.radiobuttonElements.length > 0) {
+            this.radiobuttonElements[0].tabIndex = 0;
+        }
     }
     hasNestedRequiredRadio() {
         this.required = this.radiobuttonElements.some((radiobutton) => radiobutton.required);
     }
+    isSomeRadioChecked() {
+        return this.radiobuttonElements.some((radio) => radio.checked);
+    }
     onValueChangeHandler(newValue) {
         this.touched = true;
         this.radiobuttonElements.forEach((radiobutton) => {
@@ -116,11 +126,31 @@ export class RadiobuttonGroup {
     isTouched() {
         return Promise.resolve(this.touched);
     }
+    /** @internal */
+    async setCheckedToNextItem(currentRadio, forward = true) {
+        const { radiobuttonElements } = this;
+        const { length } = radiobuttonElements;
+        if (length <= 1) {
+            return;
+        }
+        const index = radiobuttonElements.indexOf(currentRadio);
+        const step = forward ? 1 : -1;
+        let nextIndex = (index + step + length) % length;
+        while (radiobuttonElements[nextIndex].disabled) {
+            if (nextIndex === index) {
+                return;
+            }
+            nextIndex = (nextIndex + step + length) % length;
+        }
+        const nextRadio = radiobuttonElements[nextIndex];
+        nextRadio.setCheckedState(true);
+        nextRadio.focus();
+    }
     render() {
-        return (h(Host, { key: '93241d4ab22b1d87d5fd1e5ff65d5fc8877e1784', onIxBlur: () => (this.touched = true), ref: this.groupRef }, h("ix-field-wrapper", { key: '8ee3487bb24408f698cb975822eed476c070f3eb', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '96216c66bce9e4b63071048a3848de1c611da84f', class: {
+        return (h(Host, { key: 'db3158ccabcd99d1b5185607b848c424a4c4c970', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '5668fbc12f4d264869dfe03dc2bbd3d380da6ae1', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: 'a5ec59c15eb8353d66bc6f0668dd7148dbd447a6', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '8910a200a6eb0d9f88f3b45d96967a7f406b545d' })))));
+            } }, h("slot", { key: '325b19034d55cc20cd556a24585d05ce32f22bb6' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -400,6 +430,38 @@ export class RadiobuttonGroup {
                             "text": undefined
                         }]
                 }
+            },
+            "setCheckedToNextItem": {
+                "complexType": {
+                    "signature": "(currentRadio: HTMLIxRadioElement, forward?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "currentRadio",
+                            "type": "HTMLIxRadioElement",
+                            "docs": ""
+                        }, {
+                            "name": "forward",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIxRadioElement": {
+                            "location": "global",
+                            "id": "global::HTMLIxRadioElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }