@ionic/core 8.4.2-dev.11736797843.16cc5058 → 8.4.2-dev.11737633140.1934dd0f

package/components/ion-toggle.js

@@ -28,39 +28,6 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
-        this.activated = false;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the toggle is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true`, the user cannot interact with the toggle.
-         */
-        this.disabled = false;
-        /**
-         * The value of the toggle does not mean if it's checked or not, use the `checked`
-         * property for that.
-         *
-         * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
-         * it's only used when the toggle participates in a native `<form>`.
-         */
-        this.value = 'on';
-        /**
-         * Enables the on/off accessibility switch labels within the toggle.
-         */
-        this.enableOnOffLabels = config.get('toggleOnOffLabels');
-        /**
-         * Where to place the label relative to the input.
-         * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the toggle 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 toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
         this.setupGesture = async () => {
             const { toggleTrack } = this;
             if (toggleTrack) {
@@ -98,6 +65,17 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
             }
             return checked ? removeOutline : ellipseOutline;
         };
+        this.activated = false;
+        this.color = undefined;
+        this.name = this.inputId;
+        this.checked = false;
+        this.disabled = false;
+        this.value = 'on';
+        this.enableOnOffLabels = config.get('toggleOnOffLabels');
+        this.labelPlacement = 'start';
+        this.justify = undefined;
+        this.alignment = undefined;
+        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -179,12 +157,12 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '480c8d1145b183e8a06081340d9ffd65a113e5e9', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -194,10 +172,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
+            }) }, h("label", { key: '175e148a9fcb48a7e19c4d6ccb6d73ee576d6dd8', class: "toggle-wrapper" }, h("input", Object.assign({ key: '2d28f75d495f0e13dccc3f5c9beba26b7c12ea26', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: '12556bb7c0aff6f9fbfc3e2c91ce989b0f5c8048', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: 'cac9052a882a5ba4205f3bee3fc4f34eefe5e2c9' })), h("div", { key: 'dcc82cc33d2d88712da3a5540d3c9ce4366999c3', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -217,6 +195,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         "labelPlacement": [1, "label-placement"],
         "justify": [1],
         "alignment": [1],
+        "required": [4],
         "activated": [32]
     }, undefined, {
         "disabled": ["disabledChanged"]

package/components/item.js

@@ -25,26 +25,18 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
-        /**
-         * If `true`, a button tag will be rendered and the item will be tappable.
-         */
+        this.color = undefined;
         this.button = false;
-        /**
-         * The icon to use when `detail` is set to `true`.
-         */
+        this.detail = undefined;
         this.detailIcon = chevronForward;
-        /**
-         * If `true`, the user cannot interact with the item.
-         */
         this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
+        this.download = undefined;
+        this.href = undefined;
+        this.rel = undefined;
+        this.lines = undefined;
+        this.routerAnimation = undefined;
         this.routerDirection = 'forward';
-        /**
-         * The type of the button. Only used when an `onclick` or `button` property is present.
-         */
+        this.target = undefined;
         this.type = 'button';
     }
     buttonChanged() {

package/components/label.js

@@ -18,6 +18,8 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.ionColor = createEvent(this, "ionColor", 7);
         this.ionStyle = createEvent(this, "ionStyle", 7);
         this.inRange = false;
+        this.color = undefined;
+        this.position = undefined;
         this.noAnimate = false;
     }
     componentWillLoad() {

package/components/list-header.js

@@ -16,6 +16,8 @@ const ListHeader = /*@__PURE__*/ proxyCustomElement(class ListHeader extends HTM
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.color = undefined;
+        this.lines = undefined;
     }
     render() {
         const { lines } = this;

package/components/list.js

@@ -14,9 +14,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * If `true`, the list will have margin around it and rounded corners.
-         */
+        this.lines = undefined;
         this.inset = false;
     }
     /**

package/components/modal.js

@@ -1131,98 +1131,6 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
-        this.presented = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = true;
-        /**
-         * A decimal value between 0 and 1 that indicates the
-         * point after which the backdrop will begin to fade in
-         * when using a sheet modal. Prior to this point, the
-         * backdrop will be hidden and the content underneath
-         * the sheet can be interacted with. This value is exclusive
-         * meaning the backdrop will become active after the value
-         * specified.
-         */
-        this.backdropBreakpoint = 0;
-        /**
-         * The interaction behavior for the sheet modal when the handle is pressed.
-         *
-         * Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed.
-         * Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
-         *
-         * Handle behavior is unavailable when the `handle` property is set to `false` or
-         * when the `breakpoints` property is not set (using a fullscreen or card modal).
-         */
-        this.handleBehavior = 'none';
-        /**
-         * If `true`, the modal will be dismissed when the backdrop is clicked.
-         */
-        this.backdropDismiss = true;
-        /**
-         * If `true`, a backdrop will be displayed behind the modal.
-         * This property controls whether or not the backdrop
-         * darkens the screen when the modal is presented.
-         * It does not control whether or not the backdrop
-         * is active or present in the DOM.
-         */
-        this.showBackdrop = true;
-        /**
-         * If `true`, the modal will animate.
-         */
-        this.animated = true;
-        /**
-         * If `true`, the modal will open. If `false`, the modal will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the modalController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the modal dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        /**
-         * If `true`, the component passed into `ion-modal` will
-         * automatically be mounted when the modal is created. The
-         * component will remain mounted even when the modal is dismissed.
-         * However, the component will be destroyed when the modal is
-         * destroyed. This property is not reactive and should only be
-         * used when initially creating a modal.
-         *
-         * Note: This feature only applies to inline modals in JavaScript
-         * frameworks such as Angular, React, and Vue.
-         */
-        this.keepContentsMounted = false;
-        /**
-         * If `true`, focus will not be allowed to move outside of this overlay.
-         * If `false`, focus will be allowed to move outside of the overlay.
-         *
-         * In most scenarios this property should remain set to `true`. Setting
-         * this property to `false` can cause severe accessibility issues as users
-         * relying on assistive technologies may be able to move focus into
-         * a confusing state. We recommend only setting this to `false` when
-         * absolutely necessary.
-         *
-         * Developers may want to consider disabling focus trapping if this
-         * overlay presents a non-Ionic overlay from a 3rd party library.
-         * Developers would disable focus trapping on the Ionic overlay
-         * when presenting the 3rd party overlay and then re-enable
-         * focus trapping when dismissing the 3rd party overlay and moving
-         * focus back to the Ionic overlay.
-         */
-        this.focusTrap = true;
-        /**
-         * Determines whether or not a modal can dismiss
-         * when calling the `dismiss` method.
-         *
-         * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
-         * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
-         *
-         * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
-         * if you need to access `this` from within the callback.
-         */
-        this.canDismiss = true;
         this.onHandleClick = () => {
             const { sheetTransition, handleBehavior } = this;
             if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
@@ -1260,6 +1168,31 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
                 el.dispatchEvent(ev);
             }
         };
+        this.presented = false;
+        this.hasController = false;
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.keyboardClose = true;
+        this.enterAnimation = undefined;
+        this.leaveAnimation = undefined;
+        this.breakpoints = undefined;
+        this.initialBreakpoint = undefined;
+        this.backdropBreakpoint = 0;
+        this.handle = undefined;
+        this.handleBehavior = 'none';
+        this.component = undefined;
+        this.componentProps = undefined;
+        this.cssClass = undefined;
+        this.backdropDismiss = true;
+        this.showBackdrop = true;
+        this.animated = true;
+        this.presentingElement = undefined;
+        this.htmlAttributes = undefined;
+        this.isOpen = false;
+        this.trigger = undefined;
+        this.keepContentsMounted = false;
+        this.focusTrap = true;
+        this.canDismiss = true;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {

package/components/picker-column-option.js

@@ -23,24 +23,9 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
          * clicking an enable option.
          */
         this.pickerColumn = null;
-        /**
-         * The aria-label of the option.
-         *
-         * If the value changes, then it will trigger a
-         * re-render of the picker since it's a @State variable.
-         * Otherwise, the `aria-label` attribute cannot be updated
-         * after the component is loaded.
-         */
         this.ariaLabel = null;
-        /**
-         * If `true`, the user cannot interact with the picker column option.
-         */
         this.disabled = false;
-        /**
-         * 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).
-         */
+        this.value = undefined;
         this.color = 'primary';
     }
     /**

package/components/picker-column.js

@@ -21,28 +21,6 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
-        this.ariaLabel = null;
-        this.isActive = false;
-        /**
-         * If `true`, the user cannot interact with the picker.
-         */
-        this.disabled = false;
-        /**
-         * 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).
-         */
-        this.color = 'primary';
-        /**
-         * If `true`, tapping the picker will
-         * reveal a number input keyboard that lets
-         * the user type in values for each picker
-         * column. This is useful when working
-         * with time pickers.
-         *
-         * @internal
-         */
-        this.numericInput = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -409,6 +387,12 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
              */
             return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
         };
+        this.ariaLabel = null;
+        this.isActive = false;
+        this.disabled = false;
+        this.value = undefined;
+        this.color = 'primary';
+        this.numericInput = false;
     }
     ariaLabelChanged(newValue) {
         this.ariaLabel = newValue;

package/components/picker-column2.js

@@ -32,6 +32,7 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
         // Ex: column is created with 3 options. User updates the column data
         // to have 5 options. The column will still think it only has 3 options.
         this.colDidChange = false;
+        this.col = undefined;
     }
     colChanged() {
         this.colDidChange = true;

package/components/popover.js

@@ -990,128 +990,6 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         this.lockController = createLockController();
         this.inline = false;
         this.focusDescendantOnPresent = false;
-        this.presented = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = true;
-        /**
-         * If `true`, the popover will be dismissed when the backdrop is clicked.
-         */
-        this.backdropDismiss = true;
-        /**
-         * If `true`, a backdrop will be displayed behind the popover.
-         * This property controls whether or not the backdrop
-         * darkens the screen when the popover is presented.
-         * It does not control whether or not the backdrop
-         * is active or present in the DOM.
-         */
-        this.showBackdrop = true;
-        /**
-         * If `true`, the popover will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * If `true`, the popover will animate.
-         */
-        this.animated = true;
-        /**
-         * Describes what kind of interaction with the trigger that
-         * should cause the popover to open. Does not apply when the `trigger`
-         * property is `undefined`.
-         * If `"click"`, the popover will be presented when the trigger is left clicked.
-         * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
-         * If `"context-menu"`, the popover will be presented when the trigger is right
-         * clicked on desktop and long pressed on mobile. This will also prevent your
-         * device's normal context menu from appearing.
-         */
-        this.triggerAction = 'click';
-        /**
-         * Describes how to calculate the popover width.
-         * If `"cover"`, the popover width will match the width of the trigger.
-         * If `"auto"`, the popover width will be set to a static default value.
-         */
-        this.size = 'auto';
-        /**
-         * If `true`, the popover will be automatically
-         * dismissed when the content has been clicked.
-         */
-        this.dismissOnSelect = false;
-        /**
-         * Describes what to position the popover relative to.
-         * If `"trigger"`, the popover will be positioned relative
-         * to the trigger button. If passing in an event, this is
-         * determined via event.target.
-         * If `"event"`, the popover will be positioned relative
-         * to the x/y coordinates of the trigger action. If passing
-         * in an event, this is determined via event.clientX and event.clientY.
-         */
-        this.reference = 'trigger';
-        /**
-         * Describes which side of the `reference` point to position
-         * the popover on. The `"start"` and `"end"` values are RTL-aware,
-         * and the `"left"` and `"right"` values are not.
-         */
-        this.side = 'bottom';
-        /**
-         * If `true`, the popover will display an arrow that points at the
-         * `reference` when running in `ios` mode. Does not apply in `md` mode.
-         */
-        this.arrow = true;
-        /**
-         * If `true`, the popover will open. If `false`, the popover will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the popoverController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the popover dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        /**
-         * @internal
-         *
-         * If `true` the popover will not register its own keyboard event handlers.
-         * This allows the contents of the popover to handle their own keyboard interactions.
-         *
-         * If `false`, the popover will register its own keyboard event handlers for
-         * navigating `ion-list` items within a popover (up/down/home/end/etc.).
-         * This will also cancel browser keyboard event bindings to prevent scroll
-         * behavior in a popover using a list of items.
-         */
-        this.keyboardEvents = false;
-        /**
-         * If `true`, focus will not be allowed to move outside of this overlay.
-         * If `false`, focus will be allowed to move outside of the overlay.
-         *
-         * In most scenarios this property should remain set to `true`. Setting
-         * this property to `false` can cause severe accessibility issues as users
-         * relying on assistive technologies may be able to move focus into
-         * a confusing state. We recommend only setting this to `false` when
-         * absolutely necessary.
-         *
-         * Developers may want to consider disabling focus trapping if this
-         * overlay presents a non-Ionic overlay from a 3rd party library.
-         * Developers would disable focus trapping on the Ionic overlay
-         * when presenting the 3rd party overlay and then re-enable
-         * focus trapping when dismissing the 3rd party overlay and moving
-         * focus back to the Ionic overlay.
-         */
-        this.focusTrap = true;
-        /**
-         * If `true`, the component passed into `ion-popover` will
-         * automatically be mounted when the popover is created. The
-         * component will remain mounted even when the popover is dismissed.
-         * However, the component will be destroyed when the popover is
-         * destroyed. This property is not reactive and should only be
-         * used when initially creating a popover.
-         *
-         * Note: This feature only applies to inline popovers in JavaScript
-         * frameworks such as Angular, React, and Vue.
-         */
-        this.keepContentsMounted = false;
         this.onBackdropTap = () => {
             this.dismiss(undefined, BACKDROP);
         };
@@ -1159,6 +1037,34 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
             }
             this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
         };
+        this.presented = false;
+        this.hasController = false;
+        this.delegate = undefined;
+        this.overlayIndex = undefined;
+        this.enterAnimation = undefined;
+        this.leaveAnimation = undefined;
+        this.component = undefined;
+        this.componentProps = undefined;
+        this.keyboardClose = true;
+        this.cssClass = undefined;
+        this.backdropDismiss = true;
+        this.event = undefined;
+        this.showBackdrop = true;
+        this.translucent = false;
+        this.animated = true;
+        this.htmlAttributes = undefined;
+        this.triggerAction = 'click';
+        this.trigger = undefined;
+        this.size = 'auto';
+        this.dismissOnSelect = false;
+        this.reference = 'trigger';
+        this.side = 'bottom';
+        this.alignment = undefined;
+        this.arrow = true;
+        this.isOpen = false;
+        this.keyboardEvents = false;
+        this.focusTrap = true;
+        this.keepContentsMounted = false;
     }
     onTriggerChange() {
         this.configureTriggerInteraction();

package/components/radio-group.js

@@ -13,14 +13,6 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         this.ionValueChange = createEvent(this, "ionValueChange", 7);
         this.inputId = `ion-rg-${radioGroupIds++}`;
         this.labelId = `${this.inputId}-lbl`;
-        /**
-         * 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
@@ -67,6 +59,11 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
                 }
             }
         };
+        this.allowEmptySelection = false;
+        this.compareWith = undefined;
+        this.name = this.inputId;
+        this.required = false;
+        this.value = undefined;
     }
     valueChanged(value) {
         this.setRadioTabindex(value);
@@ -166,10 +163,10 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
     }
     render() {
-        const { label, labelId, el, name, value } = this;
+        const { label, labelId, el, name, value, required } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: '1b86c9ba343929ffd5579dd5d1c18ca616b2e9aa', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode, "aria-required": `${required}` });
     }
     get el() { return this; }
     static get watchers() { return {
@@ -179,6 +176,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         "allowEmptySelection": [4, "allow-empty-selection"],
         "compareWith": [1, "compare-with"],
         "name": [1],
+        "required": [4],
         "value": [1032],
         "setFocus": [64]
     }, [[4, "keydown", "onKeydown"]], {

package/components/radio.js

@@ -58,31 +58,6 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.inputId = `ion-rb-${radioButtonIds++}`;
         this.radioGroup = null;
-        /**
-         * If `true`, the radio is selected.
-         */
-        this.checked = false;
-        /**
-         * The tabindex of the radio button.
-         * @internal
-         */
-        this.buttonTabindex = -1;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the user cannot interact with the radio.
-         */
-        this.disabled = false;
-        /**
-         * Where to place the label relative to the radio.
-         * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
         this.updateState = () => {
             if (this.radioGroup) {
                 const { compareWith, value: radioGroupValue } = this.radioGroup;
@@ -116,6 +91,15 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
+        this.checked = false;
+        this.buttonTabindex = -1;
+        this.color = undefined;
+        this.name = this.inputId;
+        this.disabled = false;
+        this.value = undefined;
+        this.labelPlacement = 'start';
+        this.justify = undefined;
+        this.alignment = undefined;
     }
     valueChanged() {
         /**

package/components/ripple-effect.js

@@ -12,15 +12,6 @@ const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends
         super();
         this.__registerHost();
         this.__attachShadow();
-        /**
-         * Sets the type of ripple-effect:
-         *
-         * - `bounded`: the ripple effect expands from the user's click position
-         * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
-         *
-         * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
-         * while surfaces for unbounded ripples should have it set to visible.
-         */
         this.type = 'bounded';
     }
     /**

package/components/select-modal.js

@@ -32,6 +32,8 @@ const SelectModal = /*@__PURE__*/ proxyCustomElement(class SelectModal extends H
     constructor() {
         super();
         this.__registerHost();
+        this.header = undefined;
+        this.multiple = undefined;
         this.options = [];
     }
     closeModal() {