@riverty/web-components 6.3.0 → 6.3.1

package/dist/cjs/r-radio-button-leading.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const radioButtonLeadingCss = ":host{color:var(--r-icon-soft, #686868)}";
+
+const RadioButtonLeading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fcfa2b1df999df8a168bd0255ad7855dce28485c', slot: "leading" }, index.h("div", { key: '2d0e091a66adb24576f5e4a2f0959b8c83dc2017', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: 'cebdf0262db3ce092efbe2e8e830aa54903aa59e' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+RadioButtonLeading.style = radioButtonLeadingCss;
+
+exports.r_radio_button_leading = RadioButtonLeading;

package/dist/cjs/r-radio-button-title.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const radioButtonTitleCss = ":host{font-weight:var(--r-font-weight-semibold, 600);font-size:var(--r-font-size-400, 1rem);line-height:var(--r-line-height-m, 1.5);color:var(--r-text-regular, #282828);text-align:left;cursor:inherit}";
+
+const RadioButtonTitle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '12da195c66d902eba41e84b1ccaf3efbabbac144', slot: "title" }, index.h("div", { key: '84fc3a3e1d0b9b641a7fb859d03e904b5009cb44', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '6562965e5dfa79f4b9f80f22b4293e8ea600e4b2' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+RadioButtonTitle.style = radioButtonTitleCss;
+
+exports.r_radio_button_title = RadioButtonTitle;

package/dist/cjs/r-radio-button-trailing.cjs.entry.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const radioButtonTrailingCss = ":host{font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:right;color:var(--r-text-regular, #282828)}";
+
+const RadioButtonTrailing = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b9fc1731ecc2b522e341cfaceb5b703c8d74253f', slot: "trailing" }, index.h("div", { key: 'f1319664b1543a4a784cb2cd665567a4d561bdc3', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: 'dbed8559c3b0a5ba2580fe9e8c297e7eb947e5a5' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+RadioButtonTrailing.style = radioButtonTrailingCss;
+
+exports.r_radio_button_trailing = RadioButtonTrailing;

package/dist/cjs/r-radio-button.cjs.entry.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+
+const radioButtonCss = ":host{display:inline-flex;outline:none;position:relative;pointer-events:auto;border:0.0625rem solid transparent;cursor:pointer;min-width:17.5rem}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--cursor:pointer;--r-radio-button--box--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within),:host(.focused){--r-radio-button--box--box-shadow:0 0 0 4px var(--r-border-focused-outlined, #fff);--r-radio-button--box--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--box--outline-offset:1px}:host([checked]:not([checked=false])),:host([checked]:not([checked=false]):hover){cursor:default;--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-softest, #fff);--r-radio-button--marker--transform:scale(1)}:host([invalid]:not([invalid=false])),:host([invalid]:not([invalid=false])[checked]:not([checked=false])){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6)}:host([disabled]:not([disabled=false])){--r-radio-button--box--opacity:0.4;cursor:not-allowed}.r-radio-button{display:var(--r-radio-button--display, flex);flex:var(--r-radio-button--flex, 1);gap:var(--r-radio-button--gap, var(--r-spacing-075, 0.75rem));position:var(--r-radio-button--position, relative);min-height:var(--r-radio-button--min-height, 24px);user-select:var(--r-radio-button--user-select, none);box-sizing:var(--r-radio-button--box-sizing, border-box);font-family:var(--r-radio-button--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-radio-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-radio-button--line-height, var(--r-line-height-m, 1.5rem));text-align:var(--r-radio-button--text-align, left);color:var(--r-radio-button--color, var(--r-text-regular, #282828));opacity:var(--r-radio-button--opacity, 1);box-shadow:var(--r-radio-button--box-shadow, none);outline:var(--r-radio-button--outline, none);cursor:var(--r-radio-button--cursor, inherit);padding:var(--r-radio-button--padding, var(--r-spacing-100, 1rem));margin:var(--r-radio-button--margin, 0);background-color:var(--r-radio-button--background-color, transparent);border-color:var(--r-radio-button--border-color, transparent);border-width:var(--r-radio-button--border-width, 0);border-style:var(--r-radio-button--border-style, solid)}.r-radio-button--input{position:var(--r-radio-button--input--position, absolute);z-index:var(--r-radio-button--input--z-index, -1);opacity:var(--r-radio-button--input--opacity, 0)}.r-radio-button--box{position:var(--r-radio-button--box--position, relative);display:var(--r-radio-button--box--display, block);top:var(--r-radio-button--box--top, 0);left:var(--r-radio-button--box--left, 0);width:var(--r-radio-button--box--width, 1.5rem);height:var(--r-radio-button--box--height, 1.5rem);background-color:var(--r-radio-button--box--background-color, var(--r-background-interactive-softest, #fff));border-width:var(--r-radio-button--box--border-width, 0.0625rem);border-style:var(--r-radio-button--box--border-style, solid);border-color:var(--r-radio-button--box--border-color, var(--r-border-soft, #686868));border-radius:var(--r-radio-button--box--border-radius, 50%);box-sizing:var(--r-radio-button--box--box-sizing, border-box);box-shadow:var(--r-radio-button--box--box-shadow, none);outline:var(--r-radio-button--box--outline, none);outline-offset:var(--r-radio-button--box--outline-offset, 0);cursor:var(--r-radio-button--box--cursor, inherit);opacity:var(--r-radio-button--box--opacity, 1)}.r-radio-button--box::before{content:var(--r-radio-button--marker--content, \"\");display:var(--r-radio-button--marker--display, block);width:var(--r-radio-button--marker--width, 0.75rem);height:var(--r-radio-button--marker--height, 0.75rem);position:var(--r-radio-button--marker--position, absolute);top:var(--r-radio-button--marker--top, calc(50% - 0.375rem));left:var(--r-radio-button--marker--left, calc(50% - 0.375rem));border-radius:var(--r-radio-button--marker--border-radius, 50%);background-color:var(--r-radio-button--marker--background-color, var(--r-background-interactive-regular, #282828));transition:var(--r-radio-button--marker--transition, 0.1s all);transform:var(--r-radio-button--marker--transform, scale(0));transform-origin:var(--r-radio-button--marker--transform-origin, center)}.r-radio-button--text{flex:var(--r-radio-button--text--flex, 1);display:var(--r-radio-button--text--display, flex);flex-direction:var(--r-radio-button--text--flex-direction, column);gap:var(--r-radio-button--text--gap, var(--r-spacing-025, 0.25rem));font-weight:var(--r-radio-button--text--font-weight, var(--r-font-weight-semibold, 600))}.r-radio-button--leading{min-height:var(--r-radio-button--leading--min-height, var(--r-spacing-150, 1.5rem));min-width:var(--r-radio-button--leading--min-width, calc(var(--r-spacing-150, 1.5rem) + 2 * var(--r-spacing-075, 0.75rem)));color:var(--r-radio-button--leading--color, var(--r-icon-soft, #686868));display:var(--r-radio-button--leading--display, flex);justify-content:var(--r-radio-button--leading--justify-content, center);align-items:var(--r-radio-button--leading--align-items, start)}";
+
+const RadioButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rChange = index.createEvent(this, "rChange");
+        this.rReset = index.createEvent(this, "rReset");
+        this.radioButtonClick = index.createEvent(this, "radioButtonClick");
+        this.radioButtonKeydown = index.createEvent(this, "radioButtonKeydown");
+        this.radioButtonDeselect = index.createEvent(this, "radioButtonDeselect");
+        /** Value of element data within a form */
+        this.value = this.slotTextValue;
+        /** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+        this.autofocus = false;
+        /** Unique id */
+        this.uniqueId = `r-radio-button-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.onClick = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            event.preventDefault();
+            this.radioButtonClick.emit(event);
+        };
+        this.onKeydown = (event) => {
+            if (this.disabled)
+                return;
+            this.radioButtonKeydown.emit(event);
+        };
+        this.onFocus = () => {
+            this.host.classList.add('focused');
+        };
+        this.onBlur = () => {
+            this.host.classList.remove('focused');
+        };
+        this.applyAutofocus = () => {
+            queueMicrotask(() => {
+                this.setFocus();
+            });
+        };
+    }
+    /** Sets focus on the radio button element */
+    async setFocus() {
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /** Blurs the radio button element */
+    async setBlur() {
+        var _a;
+        (_a = this.nativeEl) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** Selects the radio button element */
+    async select() {
+        var _a, _b, _c;
+        if (this.checked)
+            return;
+        if (this.disabled)
+            return;
+        (_a = this.radioElements) === null || _a === void 0 ? void 0 : _a.forEach(radio => {
+            radio.checked = false;
+            radio.shadowRoot.querySelector('.r-radio-button--input').setAttribute('tabindex', '-1');
+        });
+        this.checked = true;
+        (_b = this.nativeEl) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        (_c = this.nativeEl) === null || _c === void 0 ? void 0 : _c.focus();
+        const { host, value, checked } = this;
+        this.rChange.emit({ element: host, value, checked });
+    }
+    /** Reference to the radio button elements */
+    get radioElements() {
+        if (this.groupEl) {
+            // Use :scope > to only select direct children, excluding nested radio-group buttons
+            return this.groupEl.querySelectorAll(`:scope > r-radio-button`);
+        }
+        if (this.parentFormEl) {
+            return this.parentFormEl.querySelectorAll(`r-radio-button[name=${this.name}]`);
+        }
+        return document.querySelectorAll(`r-radio-button[name=${this.name}]`);
+    }
+    /** Get the text content of the slot */
+    get slotTextValue() {
+        return this.host.textContent || null;
+    }
+    /** Identify wrapping radio group element */
+    get groupEl() {
+        return this.host.closest('r-radio-group') || null;
+    }
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || null;
+    }
+    /** Check if the radio button is leading */
+    get isLeading() {
+        return this.icon !== undefined || this.host.querySelector('[slot="leading"]') !== null || this.host.querySelector('r-radio-button-leading') !== null;
+    }
+    /** Check if the radio button is trailing */
+    get isTrailing() {
+        return this.host.querySelector('[slot="trailing"]') !== null || this.host.querySelector('r-radio-button-trailing') !== null;
+    }
+    get shouldAutofocus() {
+        return this.autofocus && (!this.groupEl || !this.groupEl.autofocus);
+    }
+    componentWillLoad() {
+        if (!this.initialState)
+            this.initialState = this.checked;
+        if (this.groupEl && !this.name) {
+            this.name = this.groupEl.name;
+        }
+    }
+    componentDidLoad() {
+        if (this.shouldAutofocus)
+            this.applyAutofocus();
+    }
+    render() {
+        const { name, value, checked, disabled, hint, uniqueId, required, invalid, error, autofocus } = this;
+        const inputAttrs = {
+            type: 'radio',
+            tabindex: '-1',
+            name,
+            value,
+            disabled,
+            checked,
+            required,
+            autofocus
+        };
+        return (index.h(index.Host, { key: 'ce9e98b6480c18675ac0dac4b118e574872f9af7' }, index.h("label", { key: 'adb23e0f9092e7c5bc2c0c70df71fa255f8a441b', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: 'cdd35d3caebb8e7eb8162dcc97c73f85067a55bb' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: '89e258e8d5b41a51ff48ad26f1e83bcdb447089a', class: "r-radio-button--box" }), this.isLeading &&
+            index.h("div", { key: '14e5cbd3fb54b86761f68f53f64081be3021bf9d', class: "r-radio-button--leading" }, index.h("slot", { key: '8350ee29002de443338179d8e926356fa080cb97', name: "leading" }, this.icon && index.h("r-icon", { key: 'ba1ad94e6eabd2aa113e46ddc4f5f7cdc8e39635', name: this.icon, size: "m" }))), index.h("div", { key: '75c735e748dc36c3c785cb048f920060f31c7c9a', class: "r-radio-button--text" }, index.h("slot", { key: 'b2f39d35860d6ed36bf1913836af065ed093a9b4', name: "title" }, index.h("div", { key: '4f6fdd992b61a01c13810fbee76f66d514f8e8e2', style: { display: 'contents' } }, index.h("slot", { key: 'b0d6d3eb4b9687751822fd6e026cc5eec2fe3d6b' }))), index.h("slot", { key: '66f2d4a0262d494b4c5c700e48abb7210e5fc8df', name: "description" }, this.description)), this.isTrailing &&
+            index.h("div", { key: '64bb5efd43a7e52461dff3e3416c968bbe44d1a4', class: "r-radio-button--trailing" }, index.h("slot", { key: '20798c2198cc1360f6b04fa0a94984bb697eda6c', name: "trailing" }))), invalid && error &&
+            index.h("r-hint", { key: '06bd4aa937a926612c428e9f9cfcde98e60c6ca7', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
+            index.h("r-hint", { key: '5031e00344241c184fb8ef2aa8275274415b8a3e', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+    }
+    get host() { return index.getElement(this); }
+};
+RadioButton.style = radioButtonCss;
+
+exports.r_radio_button = RadioButton;

package/dist/cjs/r-radio-group.cjs.entry.js

@@ -0,0 +1,428 @@
+'use strict';
+
+var index = require('./index-BnETQtSf.js');
+var formData = require('./formData-B2DZyLxP.js');
+
+const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #b00c15);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #b00c15)}:host .r-radio-group{display:var(--r-radio-group--display, flex);flex-direction:var(--r-radio-group--flex-direction, column);padding:var(--r-radio-group--padding, 0);margin:var(--r-radio-group--margin, 0);border:var(--r-radio-group--border, none)}:host .r-radio-group--label-container{display:var(--r-radio-group--label-container--display, flex);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);flex-wrap:var(--r-radio-group--content--flex-wrap, nowrap);gap:var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem))}:host .r-radio-group+.r-radio-group--message r-hint{margin-top:var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem))}";
+
+const RadioGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rValidate = index.createEvent(this, "rValidate");
+        this.rChange = index.createEvent(this, "rChange");
+        this.rReset = index.createEvent(this, "rReset");
+        /** Controls the style variation of the radio buttons. */
+        this.variant = 'standard';
+        /**
+         * When set to `true`, automatically focuses the first enabled radio button in the group on mount.
+         * This will focus the selected radio button if one exists, or the first enabled radio button otherwise.
+         */
+        this.autofocus = false;
+        this.validityState = '';
+        this.validityMessage = '';
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        /** Unique id */
+        this.uniqueId = `r-radio-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.getValidityStateData = element => {
+            let validityState = '';
+            let validityMessage = '';
+            if (element === null)
+                return { validityState, validityMessage };
+            for (const state in element.validity) {
+                if (element.validity[state]) {
+                    validityState = state;
+                    if (this[state + 'Message']) {
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
+                    }
+                    validityMessage = element.validationMessage;
+                }
+            }
+            return { validityState, validityMessage };
+        };
+        this.validateFormElement = (element = null) => {
+            if (element === null)
+                return;
+            if (this.isNoValidate)
+                return;
+            if (this.error)
+                return;
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
+            const isValid = this.validityState === 'valid';
+            this.valid = isValid;
+            this.invalid = !isValid;
+            this.rValidate.emit({
+                state: this.validityState,
+                message: this.validityMessage
+            });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            this.validateFormElement(this.nativeSelectedEl || this.nativeFirstEl);
+            if (!this.hasSelected || this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onResetForm = () => {
+            this.reset();
+        };
+        this.onLabelClick = () => {
+            const radioButtonEl = this.radioButtonElements[0].shadowRoot.querySelector('[type="radio"]');
+            radioButtonEl === null || radioButtonEl === void 0 ? void 0 : radioButtonEl.focus();
+        };
+        this.contributeToFormData = (event) => {
+            formData.appendControlToFormData(this.host, event.formData);
+        };
+        /**
+         * Handles parent radio group value changes for nested groups.
+         * If this is a nested group with a parentValue specified, it will reset when
+         * the parent group's value changes to something other than the parentValue.
+         */
+        this.onParentGroupChange = (event) => {
+            // Only proceed if this group has a parentValue specified (indicating it's nested)
+            if (!this.parentValue)
+                return;
+            const parentNewValue = event.detail.value;
+            // If parent changed to a different value than our parentValue, reset this nested group
+            if (parentNewValue !== this.parentValue) {
+                this.clearValue();
+                // Emit rReset event to notify that the nested group was automatically reset
+                this.rReset.emit({
+                    element: this.host,
+                    value: null
+                });
+            }
+        };
+    }
+    rChangeAction(event) {
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
+        this.resetValidity();
+        this.setValue(event.detail.value);
+    }
+    /**
+     * Resets the radio group to its initial state.
+     * This method clears the validity state and message, and sets the value and validity
+     * to their initial values.
+     */
+    radioButtonClickAction(event) {
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
+        !event.target.disabled && event.target.select();
+    }
+    get selectedIndex() {
+        return Array.from(this.radioButtonElements).findIndex(el => el.hasAttribute('checked'));
+    }
+    get prevIndex() {
+        const isNoSelected = this.selectedIndex === -1;
+        const isnativeFirstElement = this.selectedIndex === 0;
+        return isnativeFirstElement || isNoSelected ? this.radioButtonElements.length - 1 : this.selectedIndex - 1;
+    }
+    get focusedRadioButtonEl() {
+        // Query all descendants to find focused element, but it will only be used for direct children
+        return this.host.querySelector('r-radio-button.focused');
+    }
+    get focusedRadioButtonElIndex() {
+        return Array.from(this.radioButtonElements).indexOf(this.focusedRadioButtonEl);
+    }
+    get nextIndex() {
+        const isNoSelected = this.selectedIndex === -1;
+        if (isNoSelected) {
+            return this.focusedRadioButtonElIndex === -1 ? 0 : this.focusedRadioButtonElIndex + 1;
+        }
+        const isLastElement = this.selectedIndex === this.radioButtonElements.length - 1;
+        return isLastElement ? 0 : this.selectedIndex + 1;
+    }
+    radioButtonKeydownAction(event) {
+        var _a;
+        // Only handle events from direct children, not from nested radio-groups
+        const targetElement = event.target;
+        const isDirectChild = targetElement.parentElement === this.host;
+        if (!isDirectChild) {
+            return; // Ignore events from nested radio-groups
+        }
+        // Stop event from bubbling to parent radio-groups
+        event.stopPropagation();
+        switch (event.detail.code) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                // Select previous radio button
+                this.radioButtonElements[this.prevIndex].select();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                // Select next radio button
+                this.radioButtonElements[this.nextIndex].select();
+                break;
+            case 'Enter': {
+                const submitEl = this.host.querySelector('[type="submit"]') ||
+                    ((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.querySelector('[type="submit"]'));
+                if (submitEl && 'triggerClick' in submitEl) {
+                    submitEl === null || submitEl === void 0 ? void 0 : submitEl.triggerClick();
+                }
+                else {
+                    this.parentFormEl.requestSubmit();
+                }
+                break;
+            }
+        }
+    }
+    /**
+     * Resets the validity state and message of the radio group.
+     * This method clears the validity message and state, and sets the invalid
+     * property to its initial value.
+     */
+    async resetValidity() {
+        this.validityMessage = null;
+        this.validityState = null;
+        this.invalid = this.initial['invalid'];
+        this.valid = !this.invalid;
+    }
+    /**
+     * Resets the radio group to its initial state.
+     *
+     * This method:
+     * - clears the validity state and message,
+     * - sets the value and validity to initial values,
+     * - if no initial value the radio group will be deselected,
+     * - restores the tabindex on the first element.
+     */
+    async reset() {
+        this.resetValidity();
+        if (this.initial['value']) {
+            this.setValue(this.initial['value']);
+            return;
+        }
+        // Set default value to null
+        this.clearValue();
+    }
+    /**
+     * Sets the value of the radio group to the specified value.
+     * If a radio button with the specified value exists, it will be selected.
+     *
+     * @param value - The value to set for the radio group.
+     */
+    async setValue(value) {
+        const element = Array.from(this.radioButtonElements).find(el => el.value === value);
+        if (element === undefined) {
+            this.clearValue();
+            return;
+        }
+        this.value = value;
+        element === null || element === void 0 ? void 0 : element.select();
+    }
+    /**
+     * Gets the current value of the radio group.
+     *
+     * @returns The current value of the radio group.
+     */
+    async getValue() {
+        return this.value || null;
+    }
+    /**
+     * Clears the value of the radio group and deselects all radio buttons.
+     * This method sets the value to null and deselects all radio buttons in the group.
+     */
+    async clearValue() {
+        var _a, _b, _c, _d, _e, _f;
+        const isSelectedEqualsFirst = ((_a = this.nativeSelectedEl) === null || _a === void 0 ? void 0 : _a.value) === ((_b = this.nativeFirstEl) === null || _b === void 0 ? void 0 : _b.value);
+        if (!isSelectedEqualsFirst) {
+            (_c = this.nativeSelectedEl) === null || _c === void 0 ? void 0 : _c.setAttribute('tabindex', '-1');
+        }
+        (_d = this.nativeSelectedEl) === null || _d === void 0 ? void 0 : _d.setAttribute('tabindex', '-1');
+        (_e = this.nativeFirstEl) === null || _e === void 0 ? void 0 : _e.setAttribute('tabindex', '0');
+        (_f = this.selectedRadioButtonElement) === null || _f === void 0 ? void 0 : _f.removeAttribute('checked');
+        this.value = null;
+    }
+    /**
+     * Validates the radio group without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the radio group is valid.
+     */
+    async checkValidity() {
+        const element = this.nativeSelectedEl || this.nativeFirstEl || null;
+        const { validityState } = this.getValidityStateData(element);
+        return validityState === 'valid';
+    }
+    /**
+     * Validates the radio group and displays the validity state.
+     */
+    async reportValidity() {
+        const element = this.nativeSelectedEl || this.nativeFirstEl || null;
+        this.validateFormElement(element);
+        return this.validityState === 'valid';
+    }
+    /**
+     * Sets a custom validity message for the radio group.
+     * If the message is not empty, the radio group will be considered invalid.
+     *
+     * @param message - The custom validity message to set.
+     */
+    async setCustomValidity(message) {
+        const element = this.nativeSelectedEl || this.nativeFirstEl || null;
+        this.customErrorMessage = message;
+        this.validateFormElement(element);
+    }
+    /**
+     * Sets focus on the radio button element.
+     * */
+    async setFocus() {
+        const element = this.selectedRadioButtonElement || this.radioButtonElements[0] || null;
+        element === null || element === void 0 ? void 0 : element.setFocus();
+    }
+    /**
+     * Blurs the radio button element.
+     * */
+    async setBlur() {
+        var _a;
+        (_a = this.focusedRadioButtonEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+    }
+    /** Determine whether this element should be ignored during Constraint Validation API validation. */
+    get isNoValidate() {
+        var _a;
+        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
+            this.novalidate ||
+            !this.required ||
+            false);
+    }
+    /** Identify wrapping form element */
+    get parentFormEl() {
+        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
+    }
+    get radioButtonElements() {
+        // Use :scope > to only select direct children, excluding nested radio-group buttons
+        return this.host.querySelectorAll(':scope > r-radio-button:not([disabled]:not([disabled="false"]))');
+    }
+    get selectedRadioButtonElement() {
+        return Array.from(this.radioButtonElements).find(el => el.checked || el.hasAttribute('checked')) || null;
+    }
+    get hasSelected() {
+        return Array.from(this.radioButtonElements).some(el => el.checked || el.hasAttribute('checked'));
+    }
+    get nativeSelectedEl() {
+        var _a, _b;
+        if (this.selectedRadioButtonElement === null)
+            return null;
+        return ((_b = (_a = this.selectedRadioButtonElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.r-radio-button--input')) || null;
+    }
+    get nativeFirstEl() {
+        var _a, _b;
+        return ((_b = (_a = this.radioButtonElements[0]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.r-radio-button--input')) || null;
+    }
+    get hasValidationError() {
+        return this.validityState && this.validityState !== 'valid' && !!(this.validityMessage || this.customErrorMessage);
+    }
+    passPropsToGroupItems(props = {}) {
+        Object.entries(props).forEach(([key, value]) => {
+            this.radioButtonElements.forEach(el => {
+                if (typeof value === 'string')
+                    el.setAttribute(key, value);
+                if (typeof value === 'boolean' && value)
+                    el.setAttribute(key, '');
+            });
+        });
+    }
+    selectGroupItemByValue() {
+        if (this.hasSelected && !this.value) {
+            this.value = this.selectedRadioButtonElement.value;
+        }
+        this.setValue(this.value);
+    }
+    setTabindex() {
+        const el = this.nativeSelectedEl || this.nativeFirstEl;
+        el === null || el === void 0 ? void 0 : el.setAttribute('tabindex', '0');
+    }
+    get parentRadioGroup() {
+        var _a;
+        // Find the parent radio group element
+        return ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.closest('r-radio-group')) || null;
+    }
+    connectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('reset', this.onResetForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('submit', this.onSubmitForm, { capture: true });
+    }
+    disconnectFormEventListeners() {
+        var _a, _b, _c;
+        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
+        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.onResetForm);
+        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('submit', this.onSubmitForm);
+    }
+    connectParentGroupListener() {
+        // Only connect if this is a nested group (has parentValue specified)
+        if (this.parentValue && this.parentRadioGroup) {
+            this.parentRadioGroup.addEventListener('rChange', this.onParentGroupChange);
+        }
+    }
+    disconnectParentGroupListener() {
+        if (this.parentValue && this.parentRadioGroup) {
+            this.parentRadioGroup.removeEventListener('rChange', this.onParentGroupChange);
+        }
+    }
+    get ariaDescribedBy() {
+        const messageId = `${this.uniqueId}-message`;
+        return this.hint ? `${this.uniqueId}-hint ${messageId}` : messageId;
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+        this.connectParentGroupListener();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
+        this.disconnectParentGroupListener();
+    }
+    componentWillLoad() {
+        const { required, name } = this;
+        this.passPropsToGroupItems({ required, name });
+        // If `value` is provided: item within group with such value shall be selected
+        this.selectGroupItemByValue();
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+    }
+    componentDidLoad() {
+        const { name, required } = this;
+        this.passPropsToGroupItems({ name, required });
+        this.setTabindex();
+        if (this.autofocus) {
+            // Use setTimeout to ensure setValue has completed and checked state is synced
+            setTimeout(() => {
+                this.setFocus();
+            }, 0);
+        }
+    }
+    render() {
+        const { label, hint, fieldIndicator, error, uniqueId, invalid } = this;
+        const fieldsetAttrs = {
+            'aria-invalid': `${invalid || false}`,
+            'aria-describedby': this.ariaDescribedBy
+        };
+        return (index.h(index.Host, { key: 'a542762b5523cd568341316eb9e1d3ba328662f3' }, index.h("fieldset", Object.assign({ key: 'cd6877a67816eff8a423a60ef1e9079cab4ea21a', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
+            index.h("legend", { key: '00adcfa6fa8296f295b48f90d19b11928fb580d6', class: "r-radio-group--label-container" }, index.h("r-label", { key: 'f353298317ffe0043dd0dae0905499ef17fa90ba', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), index.h("slot", { key: '5e9ecf61a1a65f20ed3e48006f2a913723bdfb38', name: "popover" })), hint &&
+            index.h("r-hint", { key: '0e266db62c6bb2f8a770502ab64ca7f2edc54d39', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), index.h("div", { key: '2d951da223a892721db7e5d858e52b27eebfcf98', class: "r-radio-group--content" }, index.h("slot", { key: '341225a7be93a07fa9c3e4c96241f84c8008b182' })), index.h("div", { key: '255d3bbd8fd5b192e4dd2cca03bb7b0e2bdefd0e', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
+            index.h("r-hint", { key: '7c91e92235c2d4bd36baf327ce0bf7ed18982886', variant: "error" }, error), this.hasValidationError &&
+            index.h("r-hint", { key: '522a8a74f88356d42929f9e1fe4ab2a4326d25d7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage)))));
+    }
+    get host() { return index.getElement(this); }
+};
+RadioGroup.style = radioGroupCss;
+
+exports.r_radio_group = RadioGroup;