@riverty/web-components 6.2.0 → 6.3.0

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

@@ -1,137 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.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) {
-        registerInstance(this, hostRef);
-        this.rChange = createEvent(this, "rChange");
-        this.rReset = createEvent(this, "rReset");
-        this.radioButtonClick = createEvent(this, "radioButtonClick");
-        this.radioButtonKeydown = createEvent(this, "radioButtonKeydown");
-        this.radioButtonDeselect = 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 (h(Host, { key: 'cf6b1b5db202773a2c6eea4df6a9303275054a73' }, h("label", { key: '4e203583a2b779e239c2893eadccc3514f84b0c4', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: '14e89b050928abd51b66e8637c39bbd8da8e9856' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'ee55afd60c5dbb947e9c12fffc401f7acfcefada', class: "r-radio-button--box" }), this.isLeading &&
-            h("div", { key: 'eabd27b399dee0bc2cef0fb7a92adad55095708b', class: "r-radio-button--leading" }, h("slot", { key: '5ec99653141268456cf9c8b2398f70c7b1afd36d', name: "leading" }, this.icon && h("r-icon", { key: '47662e84ad1aac02e867ddd040b5b7e1890ba986', name: this.icon, size: "m" }))), h("div", { key: 'bcaaf67c6cdf95a0bfa0dd5784d69c237e551a0e', class: "r-radio-button--text" }, h("slot", { key: 'a54f1823afe368d85f9bd4743ac0aa1df7298049', name: "title" }, h("div", { key: 'b531b659b920d7f064f10e622b83099d14270935', style: { display: 'contents' } }, h("slot", { key: 'b51f3e83234681804c49cb1043d90de70e4929db' }))), h("slot", { key: 'd217abfd3675898afd5b41a543200f7104019aed', name: "description" }, this.description)), this.isTrailing &&
-            h("div", { key: '664ddcc19dba3029343532caa13b05a6e3834977', class: "r-radio-button--trailing" }, h("slot", { key: 'b4ec626236a01c9c74b20ae09194ea414bc7699c', name: "trailing" }))), invalid && error &&
-            h("r-hint", { key: 'bd60d4337984662f410613b470b6e3be695343f5', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            h("r-hint", { key: '31c5712fe6f2164219e28484a40ce5452a836743', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
-    }
-    get host() { return getElement(this); }
-};
-RadioButton.style = radioButtonCss;
-
-export { RadioButton as r_radio_button };

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

@@ -1,423 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-import { a as appendControlToFormData } from './formData-DvLT8-y3.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) {
-        registerInstance(this, hostRef);
-        this.rValidate = createEvent(this, "rValidate");
-        this.rChange = createEvent(this, "rChange");
-        this.rReset = 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) => {
-            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;
-    }
-    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 (h(Host, { key: 'bd1b1d42f3efab78cf0a2cce7b1a1e2568f21765' }, h("fieldset", Object.assign({ key: 'c449667b014cf8aeea4176b0d94c82573b661182', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
-            h("legend", { key: '212e27fd8d20b31cf6d84078870ec59796bb59c6', class: "r-radio-group--label-container" }, h("r-label", { key: '69907b0e2bdb49bcdea00d1849bc0c5c4d3404ae', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: 'd208c147248154ba26ecc5b412233d2cf479bb68', name: "popover" })), hint &&
-            h("r-hint", { key: 'b409e053226d88ac3619524b2d63864b49972985', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: 'c8e98214e9b14f6fdcf97677b392abd14d653a56', class: "r-radio-group--content" }, h("slot", { key: '5e4aa07801e8f1bd7ec3262511d28f553d8740a7' })), h("div", { key: 'a576e8c91d33877eb677d5551ac18d10924586fd', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
-            h("r-hint", { key: '98f7fa6855c0803ae5d31a3a248c146679204af9', variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            h("r-hint", { key: 'de1997af842a7e5fdb887a830fd0fe701e4fa5ce', variant: "error" }, this.customErrorMessage || this.validityMessage)))));
-    }
-    get host() { return getElement(this); }
-};
-RadioGroup.style = radioGroupCss;
-
-export { RadioGroup as r_radio_group };