@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

package/dist/cjs/ion-radio_2.cjs.entry.js

@@ -3,87 +3,55 @@
  */
 'use strict';
 
-var index = require('./index-C1knGA9x.js');
-var helpers = require('./helpers-Fh1iXsX9.js');
+var index = require('./index-uvry__L4.js');
+var helpers = require('./helpers-CaLhEmTE.js');
 var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
-var itemMultipleInputs = require('./item-multiple-inputs-DKn76MYO.js');
-var theme = require('./theme-IlOsGAz7.js');
-var ionicGlobal = require('./ionic-global-DvEcO0tQ.js');
-var validity = require('./validity-QmuwEptc.js');
-require('./focus-visible-BIj-I3-C.js');
+var itemMultipleInputs = require('./item-multiple-inputs-BdYSbfKN.js');
+var theme = require('./theme-Bw0rpaNN.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var validity = require('./validity-BpS37YFM.js');
 
-const radioIonicCss = () => `: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;-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}: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}: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-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}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}: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.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:var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));--color-checked:var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));--border-width:var(--token-border-size-025, var(--token-scale-025, 1px));--border-style:var(--token-border-style-solid, solid);--border-radius:var(--token-border-radius-full, 999px);--focus-ring-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--focus-ring-width:var(--token-border-size-050, var(--token-scale-050, 2px));font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;min-height:var(--token-scale-1200, 48px);color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base);background-color:var(--ion-color-base)}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:var(--token-space-250, var(--token-scale-250, 10px))}.native-wrapper .radio-icon{width:var(--token-scale-600, 24px);height:var(--token-scale-600, 24px)}.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);background-color:var(--token-bg-input-default, var(--token-primitives-base-white, #ffffff))}.radio-inner{border-radius:var(--inner-border-radius);width:calc(32% + var(--border-width));height:calc(32% + var(--border-width));background-color:var(--token-bg-surface-inverse, var(--token-primitives-base-white, #ffffff))}:host(.radio-checked) .radio-icon{border-color:var(--color-checked);background-color:var(--color-checked)}:host(.radio-label-placement-start) .label-text-wrapper,:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:0;margin-inline-end:0}: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:var(--token-space-400, var(--token-scale-400, 16px));max-width:133.3333333333%}:host(:not(.in-item):not(:last-of-type)){margin-bottom:var(--token-space-200, var(--token-scale-200, 8px))}:host(.radio-disabled) .radio-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none;border-radius:inherit;top:calc(var(--border-width) * -1);bottom:0;width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width))}:host(.radio-disabled) .radio-icon::after{inset-inline-start:calc(var(--border-width) * -1);inset-inline-end:0}:host(.ion-focused) .radio-icon{outline-offset:var(--focus-ring-width);outline:var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color)}:host(.ion-activated) .radio-icon::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-press, rgba(36, 36, 36, 0.08));content:"";border-radius:inherit;top:calc(var(--border-width) * -1);bottom:0;width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width))}:host(.ion-activated) .radio-icon::after{inset-inline-start:calc(var(--border-width) * -1);inset-inline-end:0}`;
+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}: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}.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}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}`;
 
-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;-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}: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}: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-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}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}: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.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{z-index:2}: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;pointer-events:none}: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}: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) .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-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{--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}.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;-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}: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}: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-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}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}: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.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{z-index:2}: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;pointer-events:none}: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}: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) .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-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{--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}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}`;
+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}: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}.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}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}`;
 
 const Radio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionFocus = index.createEvent(this, "ionFocus", 7);
         this.ionBlur = index.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 = compareWithUtils.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();
-        };
     }
+    inputId = `ion-rb-${radioButtonIds++}`;
+    radioGroup = null;
+    itemFocusObserver;
+    get el() { return index.getElement(this); }
+    /**
+     * If `true`, the radio is selected.
+     */
+    checked = false;
+    /**
+     * The tabindex of the radio button.
+     * @internal
+     */
+    buttonTabindex = -1;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * If `true`, the user cannot interact with the radio.
+     */
+    disabled = false;
+    /**
+     * the value of the radio.
+     */
+    value;
     valueChanged() {
         /**
          * The new value of the radio may
@@ -92,6 +60,40 @@ const Radio = class {
          */
         this.updateState();
     }
+    /**
+     * 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.
+     */
+    labelPlacement = 'start';
+    /**
+     * How to pack the label and radio within a line.
+     * `"start"`: The label and radio will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and radio will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and radio will appear on opposite
+     * ends of the line with space between the two elements.
+     * Setting this property will change the radio `display` to `block`.
+     */
+    justify;
+    /**
+     * How to control the alignment of the radio and label on the cross axis.
+     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+     * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+     * Setting this property will change the radio `display` to `block`.
+     */
+    alignment;
+    /**
+     * Emitted when the radio button has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the radio button loses focus.
+     */
+    ionBlur;
     componentDidLoad() {
         /**
          * The value may be `undefined` if it
@@ -123,7 +125,6 @@ const Radio = class {
         if (radioGroup) {
             this.updateState();
             helpers.addEventListener(radioGroup, 'ionValueChange', this.updateState);
-            radioGroup.updateRadiosTabindex();
         }
         this.itemFocusObserver = itemMultipleInputs.createItemMultipleInputsObserver(this.el, () => index.forceUpdate(this));
     }
@@ -131,7 +132,6 @@ const Radio = class {
         const radioGroup = this.radioGroup;
         if (radioGroup) {
             helpers.removeEventListener(radioGroup, 'ionValueChange', this.updateState);
-            radioGroup.updateRadiosTabindex();
             this.radioGroup = null;
         }
         if (this.itemFocusObserver) {
@@ -139,6 +139,39 @@ const Radio = class {
             this.itemFocusObserver = undefined;
         }
     }
+    updateState = () => {
+        if (this.radioGroup) {
+            const { compareWith, value: radioGroupValue } = this.radioGroup;
+            this.checked = compareWithUtils.isOptionSelected(radioGroupValue, this.value, compareWith);
+        }
+    };
+    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?.allowEmptySelection) {
+            this.checked = false;
+        }
+        else {
+            this.checked = true;
+        }
+    };
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
     get hasLabel() {
         return this.el.textContent !== '';
     }
@@ -147,11 +180,11 @@ const Radio = class {
     }
     render() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
-        const theme$1 = ionicGlobal.getIonTheme(this);
+        const mode = ionicGlobal.getIonMode(this);
         const inItem = theme.hostContext('ion-item', el);
         const inMultipleInputsItem = theme.hostContext('ion-item.item-multiple-inputs', el);
-        return (index.h(index.Host, { key: 'e2d5c0a52199f5c6ebf05a5178e9370f7df06717', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
-                [theme$1]: true,
+        return (index.h(index.Host, { key: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
+                [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
                 'radio-disabled': disabled,
@@ -163,12 +196,11 @@ const Radio = class {
                 // styling stays suppressed either way.
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem || inMultipleInputsItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, index.h("label", { key: '898d505c52ed530fac01b4ab81f0e697d538a520', class: "radio-wrapper" }, index.h("div", { key: '8d2cc81c342ee4b10ac9eed9189be9b6fc594f38', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, index.h("label", { key: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, index.h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, index.h("slot", { key: '459439aeb1689cb7baff901d5b7a2ed96e98cf19' })), index.h("div", { key: '3ec8b4de39f6c18ee43b956b6c031321e6844919', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, index.h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), index.h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0
@@ -177,91 +209,77 @@ const Radio = class {
 };
 let radioButtonIds = 0;
 Radio.style = {
-    ionic: radioIonicCss(),
     ios: radioIosCss(),
     md: radioMdCss()
 };
 
-const radioGroupIonicCss = () => `:host{display:block}.radio-group-top .error-text{display:none}.radio-group-top .helper-text{display:block}:host(.ion-touched.ion-invalid) .radio-group-top .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-group-top .helper-text{display:none}.radio-group-top{font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.radio-group-top .error-text{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.radio-group-top .helper-text{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}:host(.in-list) .radio-group-top{padding-right:var(--token-space-400, var(--token-scale-400, 16px));padding-left:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.in-list) .radio-group-top,:host-context([dir=rtl]).in-list .radio-group-top{padding-right:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));padding-left:var(--token-space-400, var(--token-scale-400, 16px))}@supports selector(:dir(rtl)){:host(.in-list:dir(rtl)) .radio-group-top{padding-right:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));padding-left:var(--token-space-400, var(--token-scale-400, 16px))}}`;
-
-const radioGroupIosCss = () => `:host{display:block}.radio-group-top .error-text{display:none}.radio-group-top .helper-text{display:block}:host(.ion-touched.ion-invalid) .radio-group-top .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-group-top .helper-text{display:none}.radio-group-top{line-height:1.5}.radio-group-top .error-text{color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.in-list) .radio-group-top{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}`;
+const radioGroupIosCss = () => `ion-radio-group{vertical-align:top}.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 = () => `:host{display:block}.radio-group-top .error-text{display:none}.radio-group-top .helper-text{display:block}:host(.ion-touched.ion-invalid) .radio-group-top .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-group-top .helper-text{display:none}.radio-group-top{line-height:1.5}.radio-group-top .error-text{color:var(--ion-color-danger, #c5000f)}.radio-group-top .helper-text{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.in-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-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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionChange = index.createEvent(this, "ionChange", 7);
         this.ionValueChange = index.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;
-        /** Ensures that the tabindex update is debounced and only called once. */
-        this.scheduleTabindexUpdate = helpers.debounce(() => this.setRadioTabindex(this.value), 0);
-        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);
-                }
-            }
-        };
     }
+    inputId = `ion-rg-${radioGroupIds++}`;
+    helperTextId = `${this.inputId}-helper-text`;
+    errorTextId = `${this.inputId}-error-text`;
+    labelId = `${this.inputId}-lbl`;
+    label;
+    validationObserver;
+    get el() { return index.getElement(this); }
+    /**
+     * Track validation state for proper aria-live announcements.
+     */
+    isInvalid = false;
+    hintTextId;
+    /**
+     * If `true`, the radios can be deselected.
+     */
+    allowEmptySelection = false;
+    /**
+     * This property allows developers to specify a custom function or property
+     * name for comparing objects when determining the selected option in the
+     * ion-radio-group. When not specified, the default behavior will use strict
+     * equality (===) for comparison.
+     */
+    compareWith;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * the value of the radio group.
+     */
+    value;
+    /**
+     * The helper text to display at the top of the radio group.
+     */
+    helperText;
+    /**
+     * The error text to display at the top of the radio group.
+     */
+    errorText;
     valueChanged(value) {
         this.setRadioTabindex(value);
         this.ionValueChange.emit({ value });
     }
+    /**
+     * Emitted when the value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the `value` property has changed.
+     * This is used to ensure that `ion-radio` can respond
+     * to any value property changes from the group.
+     *
+     * @internal
+     */
+    ionValueChange;
     componentDidLoad() {
         /**
          * There's an issue when assigning a value to the radio group
@@ -274,10 +292,22 @@ const RadioGroup = class {
          */
         this.valueChanged(this.value);
     }
-    /** @internal - Recompute which radio has tabindex 0. Call when radios are added/removed. */
-    async updateRadiosTabindex() {
-        this.scheduleTabindexUpdate();
-    }
+    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);
+        }
+    };
     async connectedCallback() {
         // Get the list header if it exists and set the id
         // this is used to set aria-labelledby
@@ -348,6 +378,36 @@ const RadioGroup = class {
         const { value } = this;
         this.ionChange.emit({ value, event });
     }
+    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);
+            }
+        }
+    };
     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
@@ -415,7 +475,7 @@ const RadioGroup = class {
     /** @internal */
     async setFocus() {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
+        radioToFocus?.setFocus();
     }
     /**
      * Renders the helper text or error text values
@@ -426,7 +486,7 @@ const RadioGroup = class {
         if (!hasHintText) {
             return;
         }
-        return (index.h("div", { class: "radio-group-top" }, index.h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), index.h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
+        return (index.h("div", { class: "radio-group-top" }, index.h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), index.h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -440,14 +500,10 @@ const RadioGroup = class {
     }
     render() {
         const { label, labelId, el, name, value } = this;
-        const theme$1 = ionicGlobal.getIonTheme(this);
+        const mode = ionicGlobal.getIonMode(this);
         helpers.renderHiddenInput(true, el, name, value, false);
-        return (index.h(index.Host, { key: '01aa69d37d97ff7395b5bbeabdc62d1ce535285c', class: {
-                [theme$1]: true,
-                'in-list': theme.hostContext('ion-list', el),
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "data-roving-focus": true, onClick: this.onClick }, this.renderHintText(), index.h("slot", { key: 'd2f5c174a88636020b8911cb6748b42f8b5d9fbe' })));
+        return (index.h(index.Host, { key: '8d926a17e800adf0184274215c9689c96a8d6dfd', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), index.h("slot", { key: '2ff891123d5971a581b70d0886d23a074358c2dc' })));
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0
@@ -456,7 +512,6 @@ const RadioGroup = class {
 };
 let radioGroupIds = 0;
 RadioGroup.style = {
-    ionic: radioGroupIonicCss(),
     ios: radioGroupIosCss(),
     md: radioGroupMdCss()
 };