@ionic/core 8.4.4-dev.11741048645.1fe58d92 → 8.4.4-dev.11741101920.155e1c29

package/dist/collection/components/modal/modal.js

@@ -86,6 +86,7 @@ export class Modal {
         this.enterAnimation = undefined;
         this.leaveAnimation = undefined;
         this.breakpoints = undefined;
+        this.expandToScroll = true;
         this.initialBreakpoint = undefined;
         this.backdropBreakpoint = 0;
         this.handle = undefined;
@@ -301,6 +302,7 @@ export class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
         });
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
@@ -351,7 +353,10 @@ export class Modal {
         // should be in the DOM and referenced by now, except
         // for the presenting el
         const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation);
-        const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
+        const ani = (this.animation = animationBuilder(el, {
+            presentingEl: this.presentingElement,
+            expandToScroll: this.expandToScroll,
+        }));
         const contentEl = findIonContent(el);
         if (!contentEl) {
             printIonContentErrorMsg(el);
@@ -396,9 +401,10 @@ export class Modal {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
         }));
         ani.progressStart(true, 1);
-        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
+        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
             if (this.currentBreakpoint !== breakpoint) {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
@@ -476,6 +482,7 @@ export class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
         });
         if (dismissed) {
             const { delegate } = this.getDelegate();
@@ -561,23 +568,23 @@ export class Modal {
         return true;
     }
     render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
+        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8b74b6fa151995ab86cdeb989e338ee45c687f6d', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), h("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '1b264a356f792492fe5ece24928b701152be3d7f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '14590998fd2e87ebfb08c06bec795d122165ae09', class: "modal-shadow" }), h("div", Object.assign({ key: '73e4d6c4eb342d48dfcb7bfbfae7c020931aa36f',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '52c4949baf5b7c0639a9a58f06cd4e0cad662b23', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '0620b3f2e7cfef42f6c602211c4cdcaf4e646546' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -735,6 +742,24 @@ export class Modal {
                     "text": "The breakpoints to use when creating a sheet modal. Each value in the\narray must be a decimal between 0 and 1 where 0 indicates the modal is fully\nclosed and 1 indicates the modal is fully open. Values are relative\nto the height of the modal, not the height of the screen. One of the values in this\narray must be the value of the `initialBreakpoint` property.\nFor example: [0, .25, .5, 1]"
                 }
             },
+            "expandToScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether scrolling or dragging within the sheet modal expands\nit to a larger breakpoint. This only takes effect when `breakpoints`\nand `initialBreakpoint` are set.\n\nIf `true`, scrolling or dragging anywhere in the modal will first expand\nit to the next breakpoint. Once fully expanded, scrolling will affect the content.\nIf `false`, scrolling will always affect the content, and the modal will only expand\nwhen dragging the header or handle."
+                },
+                "attribute": "expand-to-scroll",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "initialBreakpoint": {
                 "type": "number",
                 "mutable": false,

package/dist/collection/components/modal/modal.md.css

@@ -201,6 +201,12 @@ ion-backdrop {
   bottom: 0;
 }
 
+:host(.modal-sheet.modal-no-expand-scroll) ion-footer {
+  position: absolute;
+  bottom: 0;
+  width: var(--width);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/nav/nav.js

@@ -830,7 +830,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'dfe98cb6604a2015a49f41beffebdd2da957dfff' });
+        return h("slot", { key: '71e9b5d07fc90ca5534197a63a003a4154aabd59' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-link/nav-link.js

@@ -14,7 +14,7 @@ export class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
+        return h(Host, { key: '9ba170d1b10e08e8a6b5e6a30d363871d455a0a9', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.js

@@ -13,9 +13,9 @@ export class Note {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses(this.color, {
+        return (h(Host, { key: '3c3d9b2aa805c0bc1fdc6270a2bbf4dcc1b96c5b', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: 'b6a9459e1b85f608fafd060a4bfeb11637ebe873' })));
+            }) }, h("slot", { key: '39e34682009fcb705ecafe51825162734bdf14d3' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -76,10 +76,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c743c6ef44bb9f765cc15b3b5d2864de6520203a', class: createColorClasses(color, {
+        return (h(Host, { key: 'c1353e99c2aa19c0e3ddbe433557ed18e72e1c66', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: '4c3d9eb245c52b2c007f727e145cfb55759bd7a9', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '4c907d2187cbe9d5941e27f2b12578e2b7271461' }))));
+            }) }, h("button", { key: 'b4ee62ecf7458a07a56e8aa494485766a87a3fcb', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '9ab1e4700c27103b676670a4b3521c183c6ab83d' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-legacy/picker.js

@@ -185,11 +185,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '0712fa8732141848e50ad2e08e2ba66ef2a48991', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'dc03f252e3b59a94bc7132c953d2d3b36b62237e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'c997632ef0488698739664012de5a6494de438b6', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '20045054a76cca997b410835fa6b305af22dcb12', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a73a6ac20b685ed9694d4fa95ea236ce5d63fdbf', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '1221cdcc2ff013deeba12170129c8fe78308330c', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '45038a58430a4251100797b902e7034243137564', class: "picker-columns" }, h("div", { key: 'c579bb69cddd4090912855ffd7f59536280f34b9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '978c6632d82a97d053b729c9de65dd3af4c4cee2', class: "picker-below-highlight" }))), h("div", { key: 'e7e9dc437a3cf6d559e2cb0df71af69047a2ae31', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'bdabe9c82c41f96da5dafb1a0aa0854fa7e7ec93', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '1380e0c8989153b425674753764f12f253f4a738', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'edec769bbc0993d003852d0bf1123e6e2332ebbe', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'b82c67ff47aa9412a6ff8f3b2e6230b855e92c51', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '76485b643387f36b6b3d5f85e4d072fa18e68552', class: "picker-columns" }, h("div", { key: '99268217263feb5285db1b1acd48fd0e4d5f0e7b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '2dd7e488bc4e9695094f0758567e626e0bb5979d', class: "picker-below-highlight" }))), h("div", { key: '8b2f3ae798a4ddcdd4e2716ebba1de797e446ac4', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy-column/picker-column.js

@@ -336,9 +336,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c015eb8bc01b3287cbd1d71af0aa311b6be89d36', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '88a3c9397c9ac92dd814074c8ae6ecf8e3420a2c', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: 'f9de3fe2f5c7ad3256d6e5f44b6d03a2b1f96ffb', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '10f9c12aa174f96c7cf9adc30efbb26695c0aa64', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '1d9c0892ce56e0da9044c79eb953827166f5190b', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '4491a705d15337e6f45f3cf6fd21af5242474729', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'b0dd4b7a7a4c1edc4b73e7fb134ac85264072365', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'c16419ce6481d60fc3ba6b8d102a4edf0ede02aa', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/popover/popover.js

@@ -338,9 +338,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: 'ffe8b37c9ffb5cac210a7307e6cdfcf78712905b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '48f108a9b74f121559626889dd5a1fcccf38fc3d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '12b3ffa3928b4d56a4f09c3d2f5d493d47b45255', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '2c2862d5c7e75b637973c712b4982bf4978c0cdf', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '0cfacc52afaa7abc28c1b7742889d7a1c23a37ad', class: "popover-arrow", part: "arrow" }), h("div", { key: '3ef570c44d4fe7f063dd419008c92c8c40d3cd22', class: "popover-content", part: "content" }, h("slot", { key: '6fc5dfdce20fee1642bc1f05d41b5bf7d1034457' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '580c14ab48472534f59eedc5ba7fa486df25ed4e', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '9bcf47893e8d3053e2baa40511785d84feb4038c', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '4d47f2bdc01a546a88190c07f8f4700f21de6715', class: "popover-arrow", part: "arrow" }), h("div", { key: '70018c088654c1996e305b7b6b114419e97824ef', class: "popover-content", part: "content" }, h("slot", { key: '3de8e1959b8facba2fbe694947704832200d8276' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -28,7 +28,7 @@ export class ProgressBar {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'd60eeaa18aaee607e083c0ef9d0de8178d47c4cd', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

package/dist/collection/components/radio/radio.js

@@ -120,7 +120,7 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '8badd4aec277addc0793e14df21f73bb345e99b7', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -131,10 +131,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'f5673a798e6d87868339f046445f707e1d93b7b6', class: "radio-wrapper" }, h("div", { key: 'e9190c06f75a171cab63e3f74ccf771c3ed87005', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '8765b847edc93a1b5a16506e155ed03da807bb10', class: "radio-wrapper" }, h("div", { key: '3d568a0192a32d4f0b8a920019c79ff02639b5c9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '6cedf4e7b3bd03e4a635727dd7b6094bab64af64' })), h("div", { key: '26dd48d9d2848b7f100b732abdc4a3171adde483', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '331f3dc2ce5f6ed8f124fc4560f92e0f7c668a85' })), h("div", { key: '473bd4aaf448753e385f2dda3fddc9f56379aa19', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.ios.css

@@ -0,0 +1,206 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+ion-radio-group {
+  vertical-align: top;
+}
+
+.radio-group-wrapper {
+  display: inline;
+}
+
+.radio-group-top {
+  line-height: 1.5;
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the radio group. Otherwise the helper text should
+ * be shown.
+ */
+.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;
+}
+
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+ion-list .radio-group-top {
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+}

package/dist/collection/components/radio-group/radio-group.js

@@ -7,6 +7,8 @@ import { getIonMode } from "../../global/ionic-global";
 export class RadioGroup {
     constructor() {
         this.inputId = `ion-rg-${radioGroupIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.labelId = `${this.inputId}-lbl`;
         this.setRadioTabindex = (value) => {
             const radios = this.getRadios();
@@ -58,6 +60,8 @@ export class RadioGroup {
         this.compareWith = undefined;
         this.name = this.inputId;
         this.value = undefined;
+        this.helperText = undefined;
+        this.errorText = undefined;
     }
     valueChanged(value) {
         this.setRadioTabindex(value);
@@ -156,13 +160,46 @@ export class RadioGroup {
         const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
         radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
     }
+    /**
+     * Renders the helper text or error text values
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const hasHintText = !!helperText || !!errorText;
+        if (!hasHintText) {
+            return;
+        }
+        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text" }, errorText)));
+    }
+    getHintTextID() {
+        const { el, helperText, errorText, helperTextId, errorTextId } = this;
+        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+            return errorTextId;
+        }
+        if (helperText) {
+            return helperTextId;
+        }
+        return undefined;
+    }
     render() {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return (h(Host, { key: 'cac92777297029d7fd1b6af264d92850e35dfbba', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '3e7ec0fc7b90d635b84201e006eb5622df2ed191', class: "radio-group-wrapper" }, h("slot", { key: '6b3aaa635597017f961fa895973a0ee174944dcf' }))));
     }
     static get is() { return "ion-radio-group"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["radio-group.ios.scss"],
+            "md": ["radio-group.md.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["radio-group.ios.css"],
+            "md": ["radio-group.md.css"]
+        };
+    }
     static get properties() {
         return {
             "allowEmptySelection": {
@@ -240,6 +277,40 @@ export class RadioGroup {
                 },
                 "attribute": "value",
                 "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text to display at the top of the radio group."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error text to display at the top of the radio group."
+                },
+                "attribute": "error-text",
+                "reflect": false
             }
         };
     }