@ionic/core 8.4.4-dev.11738863153.1dafb0b9 → 8.4.4-dev.11739906326.1989484f

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

@@ -7,7 +7,7 @@ import { clamp, raf, getElementRoot } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
-export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
+export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -24,10 +24,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             { offset: 1, transform: 'translateY(100%)' },
         ],
         BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
-        CONTENT_KEYFRAMES: [
-            { offset: 0, maxHeight: '100%' },
-            { offset: 1, maxHeight: '0%' },
-        ],
     };
     const contentEl = baseEl.querySelector('ion-content');
     const height = wrapperEl.clientHeight;
@@ -35,11 +31,10 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let offset = 0;
     let canDismissBlocksGesture = false;
     const canDismissMaxStep = 0.95;
-    const maxBreakpoint = breakpoints[breakpoints.length - 1];
-    const minBreakpoint = breakpoints[0];
     const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
     const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
-    const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
+    const maxBreakpoint = breakpoints[breakpoints.length - 1];
+    const minBreakpoint = breakpoints[0];
     const enableBackdrop = () => {
         baseEl.style.setProperty('pointer-events', 'auto');
         backdropEl.style.setProperty('pointer-events', 'auto');
@@ -62,31 +57,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          */
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
-    /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
-     */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
-        }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
-        const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
-        }
-        else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
-        }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
-    };
     /**
      * After the entering animation completes,
      * we need to set the animation to go from
@@ -98,7 +68,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     if (wrapperAnimation && backdropAnimation) {
         wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
         backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-        contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
         animation.progressStart(true, 1 - currentBreakpoint);
         /**
          * If backdrop is not enabled, then content
@@ -115,7 +84,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             disableBackdrop();
         }
     }
-    if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) {
+    if (contentEl && currentBreakpoint !== maxBreakpoint) {
         contentEl.scrollY = false;
     }
     const canStart = (detail) => {
@@ -129,13 +98,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          */
         const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
-        /**
-         * If we have expandToScroll disabled, we should not allow the swipe gesture to start
-         * if the content is being swiped.
-         */
-        if (!expandToScroll && contentEl) {
-            return false;
-        }
         if (currentBreakpoint === 1 && contentEl) {
             /**
              * The modal should never swipe to close on the content with a refresher.
@@ -166,15 +128,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * Remove undefined check
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
-         */
-        if (!expandToScroll) {
-            swapFooterVisibility('original');
-        }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
          * We do not want scrolling to happen at the same time as the gesture.
@@ -290,19 +243,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                     opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
             ]);
-            if (contentAnimation) {
-                /**
-                 * The modal content should scroll at any breakpoint when expandToScroll
-                 * is disabled. In order to do this, the content needs to be completely
-                 * viewable so scrolling can access everything. Otherwise, the default
-                 * behavior would show the content off the screen and only allow
-                 * scrolling when the sheet is fully expanded.
-                 */
-                contentAnimation.keyframes([
-                    { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
-                    { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
-                ]);
-            }
             animation.progressStep(0);
         }
         /**
@@ -310,14 +250,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -325,13 +257,13 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             onDismiss();
         }
         /**
-         * Enables scrolling immediately if the sheet is about to fully expand
-         * or if it allows scrolling at any breakpoint. Without this, there would
-         * be a ~500ms delay while the modal animation completes, causing a
-         * noticeable lag. Native iOS allows scrolling as soon as the gesture is
-         * released, so we align with that behavior.
+         * If the sheet is going to be fully expanded then we should enable
+         * scrolling immediately. The sheet modal animation takes ~500ms to finish
+         * so if we wait until then there is a visible delay for when scrolling is
+         * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
+         * as the gesture is released, so we align with that.
          */
-        if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
+        if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
             contentEl.scrollY = true;
         }
         return new Promise((resolve) => {
@@ -349,7 +281,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);

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

@@ -201,12 +201,6 @@ 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
@@ -331,14 +325,4 @@ ion-backdrop {
   border-start-end-radius: var(--border-radius);
   border-end-end-radius: 0;
   border-end-start-radius: 0;
-}
-
-/**
- * Sheet modals require an additional padding as mentioned in the
- * `core.scss` file. However, there's a workaround that requires
- * a cloned footer to be added to the modal. This is only necessary
- * because the core styles are not being applied to the cloned footer.
- */
-:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type {
-  padding-top: 6px;
 }

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

@@ -86,7 +86,6 @@ export class Modal {
         this.enterAnimation = undefined;
         this.leaveAnimation = undefined;
         this.breakpoints = undefined;
-        this.expandToScroll = true;
         this.initialBreakpoint = undefined;
         this.backdropBreakpoint = 0;
         this.handle = undefined;
@@ -302,7 +301,6 @@ export class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
-            expandToScroll: this.expandToScroll,
         });
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
@@ -353,10 +351,7 @@ 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,
-            expandToScroll: this.expandToScroll,
-        }));
+        const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
         const contentEl = findIonContent(el);
         if (!contentEl) {
             printIonContentErrorMsg(el);
@@ -401,10 +396,9 @@ 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, this.expandToScroll, () => { 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, () => { 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 });
@@ -482,7 +476,6 @@ 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();
@@ -568,23 +561,23 @@ export class Modal {
         return true;
     }
     render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
+        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = 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: 'ff15df63e72caaeb0a4ad68e9eedeaaa7d3f3bde', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "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, [`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: '27a73655779af9d175a829d3d2d29e42fd2a63ee', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '406a65080087e7895026ecc2f04e9d707439e86f', class: "modal-shadow" }), h("div", Object.assign({ key: '8e410eb925374158996c82cbbd522f07d741679e',
+            }, 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',
             /*
               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: '7326c969ebe5a70a35e83b09d3db2bb848c90e47', 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: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', 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: '0b65cdb9e337a27edf437b9e754e79f1449c217d' }))));
+            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' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -742,24 +735,6 @@ 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,12 +201,6 @@ 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/radio/radio.ios.css

@@ -175,32 +175,39 @@ input {
   align-items: center;
 }
 
-:host(.radio-justify-space-between) .radio-wrapper {
+.radio-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.radio-justify-start) .radio-wrapper {
-  justify-content: start;
+:host(.radio-label-placement-stacked) .radio-bottom {
+  font-size: 1rem;
 }
 
-:host(.radio-justify-end) .radio-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the checkbox. Otherwise the helper text should
+ * be shown.
+ */
+.radio-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.radio-alignment-start) .radio-wrapper {
-  align-items: start;
+.radio-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.radio-alignment-center) .radio-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .radio-bottom .error-text {
+  display: block;
 }
 
-:host(.radio-justify-space-between),
-:host(.radio-justify-start),
-:host(.radio-justify-end),
-:host(.radio-alignment-start),
-:host(.radio-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .radio-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -229,6 +236,7 @@ input {
  */
 :host(.radio-label-placement-end) .radio-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -270,6 +278,7 @@ input {
  */
 :host(.radio-label-placement-stacked) .radio-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.radio-label-placement-stacked) .label-text-wrapper {
@@ -315,6 +324,34 @@ input {
   }
 }
 
+:host(.radio-justify-space-between) .radio-wrapper {
+  justify-content: space-between;
+}
+
+:host(.radio-justify-start) .radio-wrapper {
+  justify-content: start;
+}
+
+:host(.radio-justify-end) .radio-wrapper {
+  justify-content: end;
+}
+
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  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;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -14,10 +14,15 @@ import { getIonMode } from "../../global/ionic-global";
  * @part container - The container for the radio mark.
  * @part label - The label text describing the radio.
  * @part mark - The checkmark or dot used to indicate the checked state.
+ * @part supporting-text - Supporting text displayed beneath the radio label.
+ * @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
+ * @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
  */
 export class Radio {
     constructor() {
         this.inputId = `ion-rb-${radioButtonIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.radioGroup = null;
         this.updateState = () => {
             if (this.radioGroup) {
@@ -57,6 +62,8 @@ export class Radio {
         this.color = undefined;
         this.name = this.inputId;
         this.disabled = false;
+        this.errorText = undefined;
+        this.helperText = undefined;
         this.value = undefined;
         this.labelPlacement = 'start';
         this.justify = undefined;
@@ -116,11 +123,37 @@ export class Radio {
     renderRadioControl() {
         return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
     }
+    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;
+    }
+    /**
+     * Responsible for rendering helper text and error text.
+     * This element should only be rendered if hint text is set.
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId } = this;
+        /**
+         * undefined and empty string values should
+         * be treated as not having helper/error text.
+         */
+        const hasHintText = !!helperText || !!errorText;
+        if (!hasHintText) {
+            return;
+        }
+        return (h("div", { class: "radio-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+    }
     render() {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -131,10 +164,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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, h("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, h("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', 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: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), h("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -211,6 +244,40 @@ export class Radio {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the radio label and displayed when an error is detected."
+                },
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is placed under the radio label and displayed when no error is detected."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
             "value": {
                 "type": "any",
                 "mutable": false,

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

@@ -175,32 +175,39 @@ input {
   align-items: center;
 }
 
-:host(.radio-justify-space-between) .radio-wrapper {
+.radio-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.radio-justify-start) .radio-wrapper {
-  justify-content: start;
+:host(.radio-label-placement-stacked) .radio-bottom {
+  font-size: 1rem;
 }
 
-:host(.radio-justify-end) .radio-wrapper {
-  justify-content: end;
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the checkbox. Otherwise the helper text should
+ * be shown.
+ */
+.radio-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.radio-alignment-start) .radio-wrapper {
-  align-items: start;
+.radio-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.radio-alignment-center) .radio-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .radio-bottom .error-text {
+  display: block;
 }
 
-:host(.radio-justify-space-between),
-:host(.radio-justify-start),
-:host(.radio-justify-end),
-:host(.radio-alignment-start),
-:host(.radio-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .radio-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -229,6 +236,7 @@ input {
  */
 :host(.radio-label-placement-end) .radio-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -270,6 +278,7 @@ input {
  */
 :host(.radio-label-placement-stacked) .radio-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.radio-label-placement-stacked) .label-text-wrapper {
@@ -315,6 +324,34 @@ input {
   }
 }
 
+:host(.radio-justify-space-between) .radio-wrapper {
+  justify-content: space-between;
+}
+
+:host(.radio-justify-start) .radio-wrapper {
+  justify-content: start;
+}
+
+:host(.radio-justify-end) .radio-wrapper {
+  justify-content: end;
+}
+
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
+}
+
+:host(.radio-alignment-center) .radio-wrapper {
+  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;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use