@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772030258.1ee4f499

package/components/radio-group.js

@@ -1,4 +1,290 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,Build as o,h as r,Host as s,transformTag as n}from"@stencil/core/internal/client";import{e as a}from"./helpers.js";import{c as l}from"./validity.js";import{b as d}from"./ionic-global.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.ionChange=e(this,"ionChange",7),this.ionValueChange=e(this,"ionValueChange",7),this.inputId="ion-rg-"+p++,this.helperTextId=`${this.inputId}-helper-text`,this.errorTextId=`${this.inputId}-error-text`,this.labelId=`${this.inputId}-lbl`,this.isInvalid=!1,this.allowEmptySelection=!1,this.name=this.inputId,this.setRadioTabindex=t=>{const i=this.getRadios(),e=i.find((t=>!t.disabled)),o=i.find((i=>i.value===t&&!i.disabled));if(!e&&!o)return;const r=o||e;for(const t of i)t.setButtonTabindex(t===r?0:-1)},this.onClick=t=>{t.preventDefault();const i=t.target&&t.target.closest("ion-radio");if(i&&!i.disabled){const e=i.value;e!==this.value?(this.value=e,this.emitValueChange(t)):this.allowEmptySelection&&(this.value=void 0,this.emitValueChange(t))}}}valueChanged(t){this.setRadioTabindex(t),this.ionValueChange.emit({value:t})}componentDidLoad(){this.valueChanged(this.value)}async connectedCallback(){const t=this.el.querySelector("ion-list-header")||this.el.querySelector("ion-item-divider");if(t){const i=this.label=t.querySelector("ion-label");i&&(this.labelId=i.id=this.name+"-lbl")}o.isBrowser&&"undefined"!=typeof MutationObserver&&(this.validationObserver=new MutationObserver((()=>{const t=l(this.el);this.isInvalid!==t&&(this.isInvalid=t,Promise.resolve().then((()=>{this.hintTextId=this.getHintTextId()})))})),this.validationObserver.observe(this.el,{attributes:!0,attributeFilter:["class"]})),this.isInvalid=l(this.el)}componentWillLoad(){this.hintTextId=this.getHintTextId()}disconnectedCallback(){this.validationObserver&&(this.validationObserver.disconnect(),this.validationObserver=void 0)}getRadios(){return Array.from(this.el.querySelectorAll("ion-radio"))}emitValueChange(t){const{value:i}=this;this.ionChange.emit({value:i,event:t})}onKeydown(t){const i=!!this.el.closest("ion-select-popover")||!!this.el.closest("ion-select-modal");if(t.target&&!this.el.contains(t.target))return;const e=this.getRadios().filter((t=>!t.disabled));if(t.target&&e.includes(t.target)){const o=e.findIndex((i=>i===t.target)),r=e[o];let s;if(["ArrowDown","ArrowRight"].includes(t.key)&&(s=o===e.length-1?e[0]:e[o+1]),["ArrowUp","ArrowLeft"].includes(t.key)&&(s=0===o?e[e.length-1]:e[o-1]),s&&e.includes(s)&&(s.setFocus(t),i||(this.value=s.value,this.emitValueChange(t))),[" "].includes(t.key)){const i=this.value;this.value=this.allowEmptySelection&&void 0!==this.value?void 0:r.value,(i!==this.value||this.allowEmptySelection)&&this.emitValueChange(t),t.preventDefault()}}}async setFocus(){const t=this.getRadios().find((t=>-1!==t.tabIndex));null==t||t.setFocus()}renderHintText(){const{helperText:t,errorText:i,helperTextId:e,errorTextId:o,isInvalid:s}=this;if(t||i)return r("div",{class:"radio-group-top"},r("div",{id:e,class:"helper-text","aria-live":"polite"},s?null:t),r("div",{id:o,class:"error-text",role:"alert"},s?i:null))}getHintTextId(){const{helperText:t,errorText:i,helperTextId:e,errorTextId:o,isInvalid:r}=this;return r&&i?o:t?e:void 0}render(){const{label:t,labelId:i,el:e,name:o,value:n}=this,l=d(this);return a(!0,e,o,n,!1),r(s,{key:"db593b3ed511e9395e3c7bfd91b787328692cd6d",role:"radiogroup","aria-labelledby":t?i:null,"aria-describedby":this.hintTextId,"aria-invalid":this.isInvalid?"true":void 0,onClick:this.onClick,class:l},this.renderHintText(),r("div",{key:"85045b45a0100a45f3b9a35d1c5a25ec63d525c4",class:"radio-group-wrapper"},r("slot",{key:"53dacb87ce62398e78771fb2efaf839ab922d946"})))}get el(){return this}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return{ios:"ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}",md:"ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}"}}},[292,"ion-radio-group",{allowEmptySelection:[4,"allow-empty-selection"],compareWith:[1,"compare-with"],name:[1],value:[1032],helperText:[1,"helper-text"],errorText:[1,"error-text"],isInvalid:[32],hintTextId:[32],setFocus:[64]},[[4,"keydown","onKeydown"]],{value:[{valueChanged:0}]}]);let p=0;function c(){"undefined"!=typeof customElements&&["ion-radio-group"].forEach((t=>{"ion-radio-group"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h as R,c as d}
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
+import { e as renderHiddenInput } from './helpers.js';
+import { c as checkInvalidState } from './validity.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const radioGroupIosCss = "ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}";
+
+const radioGroupMdCss = "ion-radio-group{vertical-align:top}.radio-group-wrapper{display:inline}.radio-group-top{line-height:1.5}.radio-group-top .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid .radio-group-top .error-text{display:block}.ion-touched.ion-invalid .radio-group-top .helper-text{display:none}ion-list .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}";
+
+const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.ionChange = createEvent(this, "ionChange", 7);
+        this.ionValueChange = createEvent(this, "ionValueChange", 7);
+        this.inputId = `ion-rg-${radioGroupIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.labelId = `${this.inputId}-lbl`;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * If `true`, the radios can be deselected.
+         */
+        this.allowEmptySelection = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        this.setRadioTabindex = (value) => {
+            const radios = this.getRadios();
+            // Get the first radio that is not disabled and the checked one
+            const first = radios.find((radio) => !radio.disabled);
+            const checked = radios.find((radio) => radio.value === value && !radio.disabled);
+            if (!first && !checked) {
+                return;
+            }
+            // If an enabled checked radio exists, set it to be the focusable radio
+            // otherwise we default to focus the first radio
+            const focusable = checked || first;
+            for (const radio of radios) {
+                const tabindex = radio === focusable ? 0 : -1;
+                radio.setButtonTabindex(tabindex);
+            }
+        };
+        this.onClick = (ev) => {
+            ev.preventDefault();
+            /**
+             * The Radio Group component mandates that only one radio button
+             * within the group can be selected at any given time. Since `ion-radio`
+             * is a shadow DOM component, it cannot natively perform this behavior
+             * using the `name` attribute.
+             */
+            const selectedRadio = ev.target && ev.target.closest('ion-radio');
+            /**
+             * Our current disabled prop definition causes Stencil to mark it
+             * as optional. While this is not desired, fixing this behavior
+             * in Stencil is a significant breaking change, so this effort is
+             * being de-risked in STENCIL-917. Until then, we compromise
+             * here by checking for falsy `disabled` values instead of strictly
+             * checking `disabled === false`.
+             */
+            if (selectedRadio && !selectedRadio.disabled) {
+                const currentValue = this.value;
+                const newValue = selectedRadio.value;
+                if (newValue !== currentValue) {
+                    this.value = newValue;
+                    this.emitValueChange(ev);
+                }
+                else if (this.allowEmptySelection) {
+                    this.value = undefined;
+                    this.emitValueChange(ev);
+                }
+            }
+        };
+    }
+    valueChanged(value) {
+        this.setRadioTabindex(value);
+        this.ionValueChange.emit({ value });
+    }
+    componentDidLoad() {
+        /**
+         * There's an issue when assigning a value to the radio group
+         * within the Angular primary content (rendering within the
+         * app component template). When the template is isolated to a route,
+         * the value is assigned correctly.
+         * To address this issue, we need to ensure that the watcher is
+         * called after the component has finished loading,
+         * allowing the emit to be dispatched correctly.
+         */
+        this.valueChanged(this.value);
+    }
+    async connectedCallback() {
+        // Get the list header if it exists and set the id
+        // this is used to set aria-labelledby
+        const header = this.el.querySelector('ion-list-header') || this.el.querySelector('ion-item-divider');
+        if (header) {
+            const label = (this.label = header.querySelector('ion-label'));
+            if (label) {
+                this.labelId = label.id = this.name + '-lbl';
+            }
+        }
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(this.el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(this.el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
+    }
+    componentWillLoad() {
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
+    }
+    getRadios() {
+        return Array.from(this.el.querySelectorAll('ion-radio'));
+    }
+    /**
+     * Emits an `ionChange` event.
+     *
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
+    emitValueChange(event) {
+        const { value } = this;
+        this.ionChange.emit({ value, event });
+    }
+    onKeydown(ev) {
+        // We don't want the value to automatically change/emit when the radio group is part of a select interface
+        // as this will cause the interface to close when navigating through the radio group options
+        const inSelectInterface = !!this.el.closest('ion-select-popover') || !!this.el.closest('ion-select-modal');
+        if (ev.target && !this.el.contains(ev.target)) {
+            return;
+        }
+        // Get all radios inside of the radio group and then
+        // filter out disabled radios since we need to skip those
+        const radios = this.getRadios().filter((radio) => !radio.disabled);
+        // Only move the radio if the current focus is in the radio group
+        if (ev.target && radios.includes(ev.target)) {
+            const index = radios.findIndex((radio) => radio === ev.target);
+            const current = radios[index];
+            let next;
+            // If hitting arrow down or arrow right, move to the next radio
+            // If we're on the last radio, move to the first radio
+            if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+                next = index === radios.length - 1 ? radios[0] : radios[index + 1];
+            }
+            // If hitting arrow up or arrow left, move to the previous radio
+            // If we're on the first radio, move to the last radio
+            if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+                next = index === 0 ? radios[radios.length - 1] : radios[index - 1];
+            }
+            if (next && radios.includes(next)) {
+                next.setFocus(ev);
+                if (!inSelectInterface) {
+                    this.value = next.value;
+                    this.emitValueChange(ev);
+                }
+            }
+            // Update the radio group value when a user presses the
+            // space bar on top of a selected radio
+            if ([' '].includes(ev.key)) {
+                const previousValue = this.value;
+                this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;
+                if (previousValue !== this.value || this.allowEmptySelection) {
+                    /**
+                     * Value change should only be emitted if the value is different,
+                     * such as selecting a new radio with the space bar or if
+                     * the radio group allows for empty selection and the user
+                     * is deselecting a checked radio.
+                     */
+                    this.emitValueChange(ev);
+                }
+                // Prevent browsers from jumping
+                // to the bottom of the screen
+                ev.preventDefault();
+            }
+        }
+    }
+    /** @internal */
+    async setFocus() {
+        const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
+        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
+    }
+    /**
+     * Renders the helper text or error text values
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        const hasHintText = !!helperText || !!errorText;
+        if (!hasHintText) {
+            return;
+        }
+        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
+    }
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
+            return errorTextId;
+        }
+        if (helperText) {
+            return helperTextId;
+        }
+        return undefined;
+    }
+    render() {
+        const { label, labelId, el, name, value } = this;
+        const mode = getIonMode(this);
+        renderHiddenInput(true, el, name, value, false);
+        return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, h("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return {
+        ios: radioGroupIosCss,
+        md: radioGroupMdCss
+    }; }
+}, [292, "ion-radio-group", {
+        "allowEmptySelection": [4, "allow-empty-selection"],
+        "compareWith": [1, "compare-with"],
+        "name": [1],
+        "value": [1032],
+        "helperText": [1, "helper-text"],
+        "errorText": [1, "error-text"],
+        "isInvalid": [32],
+        "hintTextId": [32],
+        "setFocus": [64]
+    }, [[4, "keydown", "onKeydown"]], {
+        "value": ["valueChanged"]
+    }]);
+let radioGroupIds = 0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-radio-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-radio-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RadioGroup);
+            }
+            break;
+    } });
+}
+
+export { RadioGroup as R, defineCustomElement as d };

package/components/radio.js

@@ -1,4 +1,232 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,Host as a,transformTag as o}from"@stencil/core/internal/client";import{a as n,b as s}from"./helpers.js";import{h as l,c as d}from"./theme.js";import{b as c}from"./ionic-global.js";const p=(e,t,r)=>"function"==typeof r?r(e,t):"string"==typeof r?e[r]===t[r]:Array.isArray(t)?t.includes(e):e===t,m=(e,t,r)=>void 0!==e&&(Array.isArray(e)?e.some((e=>p(e,t,r))):p(e,t,r)),b=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ionFocus=r(this,"ionFocus",7),this.ionBlur=r(this,"ionBlur",7),this.inputId="ion-rb-"+h++,this.radioGroup=null,this.checked=!1,this.buttonTabindex=-1,this.name=this.inputId,this.disabled=!1,this.labelPlacement="start",this.updateState=()=>{if(this.radioGroup){const{compareWith:e,value:t}=this.radioGroup;this.checked=m(t,this.value,e)}},this.onClick=()=>{const{radioGroup:e,checked:t,disabled:r}=this;r||(this.checked=!t||!(null==e?void 0:e.allowEmptySelection))},this.onFocus=()=>{this.ionFocus.emit()},this.onBlur=()=>{this.ionBlur.emit()}}valueChanged(){this.updateState()}componentDidLoad(){this.updateState()}async setFocus(e){void 0!==e&&(e.stopPropagation(),e.preventDefault()),this.el.focus()}async setButtonTabindex(e){this.buttonTabindex=e}connectedCallback(){void 0===this.value&&(this.value=this.inputId);const e=this.radioGroup=this.el.closest("ion-radio-group");e&&(this.updateState(),n(e,"ionValueChange",this.updateState))}disconnectedCallback(){const e=this.radioGroup;e&&(s(e,"ionValueChange",this.updateState),this.radioGroup=null)}get hasLabel(){return""!==this.el.textContent}renderRadioControl(){return i("div",{class:"radio-icon",part:"container"},i("div",{class:"radio-inner",part:"mark"}),i("div",{class:"radio-ripple"}))}render(){const{checked:e,disabled:t,color:r,el:o,justify:n,labelPlacement:s,hasLabel:p,buttonTabindex:m,alignment:b}=this,h=c(this),x=l("ion-item",o);return i(a,{key:"3353b28172b7f837d4b38964169b5b5f4ba02788",onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:d(r,{[h]:!0,"in-item":x,"radio-checked":e,"radio-disabled":t,[`radio-justify-${n}`]:void 0!==n,[`radio-alignment-${b}`]:void 0!==b,[`radio-label-placement-${s}`]:!0,"ion-activatable":!x,"ion-focusable":!x}),role:"radio","aria-checked":e?"true":"false","aria-disabled":t?"true":null,tabindex:m},i("label",{key:"418a0a48366ff900e97da123abf665bbbda87fb7",class:"radio-wrapper"},i("div",{key:"6e5acdd8c8f5d0ad26632a65396afef8094153d1",class:{"label-text-wrapper":!0,"label-text-wrapper-hidden":!p},part:"label"},i("slot",{key:"10b157162cd283d624153c747679609cf0bbf11e"})),i("div",{key:"4c45cca95cb105cd6df1025a26e3c045272184a0",class:"native-wrapper"},this.renderRadioControl())))}get el(){return this}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return{ios:':host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}',md:':host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}'}}},[289,"ion-radio",{color:[513],name:[1],disabled:[4],value:[8],labelPlacement:[1,"label-placement"],justify:[1],alignment:[1],checked:[32],buttonTabindex:[32],setFocus:[64],setButtonTabindex:[64]},void 0,{value:[{valueChanged:0}]}]);let h=0;function x(){"undefined"!=typeof customElements&&["ion-radio"].forEach((e=>{"ion-radio"===e&&(customElements.get(o(e))||customElements.define(o(e),b))}))}export{b as R,p as c,x as d,m as i}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as addEventListener, b as removeEventListener } from './helpers.js';
+import { h as hostContext, c as createColorClasses } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const compareOptions = (currentValue, compareValue, compareWith) => {
+    if (typeof compareWith === 'function') {
+        return compareWith(currentValue, compareValue);
+    }
+    else if (typeof compareWith === 'string') {
+        return currentValue[compareWith] === compareValue[compareWith];
+    }
+    else {
+        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+    }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const isOptionSelected = (currentValue, compareValue, compareWith) => {
+    if (currentValue === undefined) {
+        return false;
+    }
+    if (Array.isArray(currentValue)) {
+        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+    }
+    else {
+        return compareOptions(currentValue, compareValue, compareWith);
+    }
+};
+
+const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}";
+
+const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}";
+
+const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionFocus = createEvent(this, "ionFocus", 7);
+        this.ionBlur = createEvent(this, "ionBlur", 7);
+        this.inputId = `ion-rb-${radioButtonIds++}`;
+        this.radioGroup = null;
+        /**
+         * If `true`, the radio is selected.
+         */
+        this.checked = false;
+        /**
+         * The tabindex of the radio button.
+         * @internal
+         */
+        this.buttonTabindex = -1;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot interact with the radio.
+         */
+        this.disabled = false;
+        /**
+         * Where to place the label relative to the radio.
+         * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
+        this.updateState = () => {
+            if (this.radioGroup) {
+                const { compareWith, value: radioGroupValue } = this.radioGroup;
+                this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);
+            }
+        };
+        this.onClick = () => {
+            const { radioGroup, checked, disabled } = this;
+            if (disabled) {
+                return;
+            }
+            /**
+             * The modern control does not use a native input
+             * inside of the radio host, so we cannot rely on the
+             * ev.preventDefault() behavior above. If the radio
+             * is checked and the parent radio group allows for empty
+             * selection, then we can set the checked state to false.
+             * Otherwise, the checked state should always be set
+             * to true because the checked state cannot be toggled.
+             */
+            if (checked && (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.allowEmptySelection)) {
+                this.checked = false;
+            }
+            else {
+                this.checked = true;
+            }
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+    }
+    valueChanged() {
+        /**
+         * The new value of the radio may
+         * match the radio group's value,
+         * so we see if it should be checked.
+         */
+        this.updateState();
+    }
+    componentDidLoad() {
+        /**
+         * The value may be `undefined` if it
+         * gets set before the radio is
+         * rendered. This ensures that the radio
+         * is checked if the value matches. This
+         * happens most often when Angular is
+         * rendering the radio.
+         */
+        this.updateState();
+    }
+    /** @internal */
+    async setFocus(ev) {
+        if (ev !== undefined) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
+        this.el.focus();
+    }
+    /** @internal */
+    async setButtonTabindex(value) {
+        this.buttonTabindex = value;
+    }
+    connectedCallback() {
+        if (this.value === undefined) {
+            this.value = this.inputId;
+        }
+        const radioGroup = (this.radioGroup = this.el.closest('ion-radio-group'));
+        if (radioGroup) {
+            this.updateState();
+            addEventListener(radioGroup, 'ionValueChange', this.updateState);
+        }
+    }
+    disconnectedCallback() {
+        const radioGroup = this.radioGroup;
+        if (radioGroup) {
+            removeEventListener(radioGroup, 'ionValueChange', this.updateState);
+            this.radioGroup = null;
+        }
+    }
+    get hasLabel() {
+        return this.el.textContent !== '';
+    }
+    renderRadioControl() {
+        return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
+    }
+    render() {
+        const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
+        const mode = getIonMode(this);
+        const inItem = hostContext('ion-item', el);
+        return (h(Host, { key: '3353b28172b7f837d4b38964169b5b5f4ba02788', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+                [mode]: true,
+                'in-item': inItem,
+                'radio-checked': checked,
+                'radio-disabled': disabled,
+                [`radio-justify-${justify}`]: justify !== undefined,
+                [`radio-alignment-${alignment}`]: alignment !== undefined,
+                [`radio-label-placement-${labelPlacement}`]: true,
+                // Focus and active styling should not apply when the radio is in an item
+                'ion-activatable': !inItem,
+                'ion-focusable': !inItem,
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '418a0a48366ff900e97da123abf665bbbda87fb7', class: "radio-wrapper" }, h("div", { key: '6e5acdd8c8f5d0ad26632a65396afef8094153d1', class: {
+                'label-text-wrapper': true,
+                'label-text-wrapper-hidden': !hasLabel,
+            }, part: "label" }, h("slot", { key: '10b157162cd283d624153c747679609cf0bbf11e' })), h("div", { key: '4c45cca95cb105cd6df1025a26e3c045272184a0', class: "native-wrapper" }, this.renderRadioControl()))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+    static get style() { return {
+        ios: radioIosCss,
+        md: radioMdCss
+    }; }
+}, [289, "ion-radio", {
+        "color": [513],
+        "name": [1],
+        "disabled": [4],
+        "value": [8],
+        "labelPlacement": [1, "label-placement"],
+        "justify": [1],
+        "alignment": [1],
+        "checked": [32],
+        "buttonTabindex": [32],
+        "setFocus": [64],
+        "setButtonTabindex": [64]
+    }, undefined, {
+        "value": ["valueChanged"]
+    }]);
+let radioButtonIds = 0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Radio);
+            }
+            break;
+    } });
+}
+
+export { Radio as R, compareOptions as c, defineCustomElement as d, isOptionSelected as i };