@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

package/dist/cjs/ion-progress-bar.cjs.entry.js

@@ -3,10 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var helpers = require('./helpers-CaLhEmTE.js');
-var theme = require('./theme-Bw0rpaNN.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var index = require('./index-BfaXsATC.js');
+var helpers = require('./helpers-DdZyl6WL.js');
+var theme = require('./theme-CeDs6Hcv.js');
+var ionicGlobal = require('./ionic-global-BerQGEpE.js');
+require('./dir-DD0jPVH3.js');
 
 const progressBarIosCss = () => `:host{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);--progress-background:var(--ion-color-primary, #0054e9);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:-webkit-transform 150ms linear;transition:-webkit-transform 150ms linear;transition:transform 150ms linear;transition:transform 150ms linear, -webkit-transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;-webkit-animation:primary-indeterminate-translate 2s infinite linear;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{-webkit-animation:primary-indeterminate-scale 2s infinite linear;animation:primary-indeterminate-scale 2s infinite linear;-webkit-animation-play-state:inherit;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;-webkit-animation:secondary-indeterminate-translate 2s infinite linear;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{-webkit-animation:secondary-indeterminate-scale 2s infinite linear;animation:secondary-indeterminate-scale 2s infinite linear;-webkit-animation-play-state:inherit;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--background) 0%, var(--background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;-webkit-animation:buffering 450ms infinite linear;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{-webkit-animation-play-state:paused;animation-play-state:paused}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@-webkit-keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);-webkit-transform:translateX(83.67142%);transform:translateX(83.67142%)}100%{-webkit-transform:translateX(200.611057%);transform:translateX(200.611057%)}}@keyframes primary-indeterminate-translate{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{-webkit-animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);-webkit-transform:translateX(0);transform:translateX(0)}59.15%{-webkit-animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);-webkit-transform:translateX(83.67142%);transform:translateX(83.67142%)}100%{-webkit-transform:translateX(200.611057%);transform:translateX(200.611057%)}}@-webkit-keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);-webkit-transform:scaleX(0.661479);transform:scaleX(0.661479)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@keyframes primary-indeterminate-scale{0%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}36.65%{-webkit-animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}69.15%{-webkit-animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);-webkit-transform:scaleX(0.661479);transform:scaleX(0.661479)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@-webkit-keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);-webkit-transform:translateX(37.651913%);transform:translateX(37.651913%)}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);-webkit-transform:translateX(84.386165%);transform:translateX(84.386165%)}100%{-webkit-transform:translateX(160.277782%);transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-translate{0%{-webkit-animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);-webkit-transform:translateX(0);transform:translateX(0)}25%{-webkit-animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);-webkit-transform:translateX(37.651913%);transform:translateX(37.651913%)}48.35%{-webkit-animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);-webkit-transform:translateX(84.386165%);transform:translateX(84.386165%)}100%{-webkit-transform:translateX(160.277782%);transform:translateX(160.277782%)}}@-webkit-keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);-webkit-transform:scaleX(0.457104);transform:scaleX(0.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);-webkit-transform:scaleX(0.72796);transform:scaleX(0.72796)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{-webkit-animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}19.15%{-webkit-animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);-webkit-transform:scaleX(0.457104);transform:scaleX(0.457104)}44.15%{-webkit-animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);-webkit-transform:scaleX(0.72796);transform:scaleX(0.72796)}100%{-webkit-transform:scaleX(0.08);transform:scaleX(0.08)}}@-webkit-keyframes buffering{to{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}@keyframes buffering{to{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}:host{border-radius:9999px;height:4px}:host(.progress-bar-solid){--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}`;
 
@@ -15,40 +16,34 @@ const progressBarMdCss = () => `:host{--background:rgba(var(--ion-color-primary-
 const ProgressBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The state of the progress bar, based on if the time the process takes is known or not.
+         * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+         */
+        this.type = 'determinate';
+        /**
+         * If true, reverse the progress bar direction.
+         */
+        this.reversed = false;
+        /**
+         * The value determines how much of the active bar should display when the
+         * `type` is `"determinate"`.
+         * The value should be between [0, 1].
+         */
+        this.value = 0;
+        /**
+         * If the buffer and value are smaller than 1, the buffer circles will show.
+         * The buffer should be between [0, 1].
+         */
+        this.buffer = 1;
     }
-    /**
-     * The state of the progress bar, based on if the time the process takes is known or not.
-     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
-     */
-    type = 'determinate';
-    /**
-     * If true, reverse the progress bar direction.
-     */
-    reversed = false;
-    /**
-     * The value determines how much of the active bar should display when the
-     * `type` is `"determinate"`.
-     * The value should be between [0, 1].
-     */
-    value = 0;
-    /**
-     * If the buffer and value are smaller than 1, the buffer circles will show.
-     * The buffer should be between [0, 1].
-     */
-    buffer = 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;
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = index.config.getBoolean('_testing');
         const mode = ionicGlobal.getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (index.h(index.Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: theme.createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

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

@@ -3,13 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var helpers = require('./helpers-CaLhEmTE.js');
+var index = require('./index-BfaXsATC.js');
+var helpers = require('./helpers-DdZyl6WL.js');
 var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
-var itemMultipleInputs = require('./item-multiple-inputs-BdYSbfKN.js');
-var theme = require('./theme-Bw0rpaNN.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var itemMultipleInputs = require('./item-multiple-inputs-jOJZE_I0.js');
+var theme = require('./theme-CeDs6Hcv.js');
+var ionicGlobal = require('./ionic-global-BerQGEpE.js');
 var validity = require('./validity-BpS37YFM.js');
+require('./dir-DD0jPVH3.js');
 
 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}`;
 
@@ -20,38 +21,67 @@ const Radio = class {
         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
@@ -60,40 +90,6 @@ 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
@@ -139,39 +135,6 @@ 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 !== '';
     }
@@ -183,7 +146,7 @@ const Radio = class {
         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: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -196,11 +159,12 @@ 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: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, index.h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, index.h("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, index.h("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, index.h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), index.h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, index.h("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), index.h("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0
@@ -222,64 +186,73 @@ const RadioGroup = class {
         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;
+        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
@@ -292,22 +265,6 @@ const RadioGroup = class {
          */
         this.valueChanged(this.value);
     }
-    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
@@ -378,36 +335,6 @@ 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
@@ -475,7 +402,7 @@ const RadioGroup = class {
     /** @internal */
     async setFocus() {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
-        radioToFocus?.setFocus();
+        radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
     }
     /**
      * Renders the helper text or error text values
@@ -502,8 +429,9 @@ const RadioGroup = class {
         const { label, labelId, el, name, value } = this;
         const mode = ionicGlobal.getIonMode(this);
         helpers.renderHiddenInput(true, el, name, value, false);
-        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' })));
+        return (index.h(index.Host, { key: '377e4aa3a656cc84b742f9d7a7d4be65d20c69f5', 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: 'c3187a2497773b4f15cea3b413b036502bcec8c0' })));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": [{
                 "valueChanged": 0