voyager-ionic-core 8.4.1 → 8.5.0

package/dist/collection/components/row/row.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        return (h(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode(this) }, h("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
+        return (h(Host, { key: 'a690022e2abdce6946d24264574e4aa0886a8ea5', class: getIonMode(this) }, h("slot", { key: 'd1a0e831dd1dbfe7877d3ad01d0a3045a5fb29e3' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.js

@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '0ef595eb1628928d4c7fdb166b8e41768700fa6e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'ea2c9b36d991acf5af7662059cb6b045f683ca94', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '17d57ece5852d03047e4d53ddad6c9d88a432a00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '989f3e84c472ada6e66dd9b249d0d268bf17ce26', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '7d335d4fde33822dc79d26b748ba2e98db7494bb', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'd1a1972725e949fb102c91487aaa7b9d10c2d718', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: 'f67c2124e70c24eef0a271516e9c4bdaf7e98ceb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '8c7f7ccc6809cca30ccc8c4e98e349d3f916321d', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: 'f06524d3163b3883bbde937862aa1e0e8f49f6e1', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9f7ba2bec93412ecb674b197be13db1de308bb57', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'add53640b2994cb6b2bf02792dafe51aba6b1684', class: "searchbar-input-container" }, h("input", Object.assign({ key: '160cc36459a4a652e7f41ccd14dcdc782278779e', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '8825fd13af0d2dea451ccc0e00ae7b5021dc01c4', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '8a7b56da278b9ca5c4f5a4ee9c01924fd5ae29d8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '19fc3dbc722acc47ff7eb3c94ad4de8aed38dff4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '24c55274516ab012d8c25f03525c6cdb9409e52f', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/segment/segment.js

@@ -149,6 +149,7 @@ export class Segment {
         this.emitStyle();
     }
     async componentDidLoad() {
+        this.segmentViewEl = this.getSegmentView();
         this.setCheckedClasses();
         /**
          * We need to wait for the buttons to all be rendered
@@ -529,14 +530,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '66bd7a565ba73540b3bbe56dd23b95e59bcef9bc', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a64e39352050b516f7dc82ce95a4bcff8431d1d0', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '782c521b1a33729b8eab1c4b879bc3f2ff48ae1b', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: 'bb3f3ec30e59e0461fa620d8961ab730cc802a4e', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment-button/segment-button.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
+import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 let ids = 0;
@@ -39,7 +39,35 @@ export class SegmentButton {
     valueChanged() {
         this.updateState();
     }
-    connectedCallback() {
+    waitForSegmentContent(ionSegment, contentId) {
+        return new Promise((resolve, reject) => {
+            let timeoutId = undefined;
+            let animationFrameId;
+            const check = () => {
+                if (!ionSegment) {
+                    reject(new Error(`Segment not found when looking for Segment Content`));
+                    return;
+                }
+                const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes
+                const segmentContent = segmentView === null || segmentView === void 0 ? void 0 : segmentView.querySelector(`ion-segment-content[id="${contentId}"]`);
+                if (segmentContent && timeoutId) {
+                    clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+                    cancelAnimationFrame(animationFrameId);
+                    resolve(segmentContent);
+                }
+                else {
+                    animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+                }
+            };
+            check();
+            // Set a timeout to reject the promise
+            timeoutId = setTimeout(() => {
+                cancelAnimationFrame(animationFrameId);
+                reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+            }, 1000);
+        });
+    }
+    async connectedCallback() {
         const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
         if (segmentEl) {
             this.updateState();
@@ -49,11 +77,14 @@ export class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        // Attempt to find the Segment Content by its contentId
-        const segmentContent = document.getElementById(this.contentId);
-        // If no associated Segment Content exists, log an error and return
-        if (!segmentContent) {
-            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+        let segmentContent;
+        try {
+            // Attempt to find the Segment Content by its contentId
+            segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+        }
+        catch (error) {
+            // If no associated Segment Content exists, log an error and return
+            console.error('Segment Button: ', error.message);
             return;
         }
         // Ensure the found element is a valid ION-SEGMENT-CONTENT
@@ -99,7 +130,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
+        return (h(Host, { key: 'e1e582b9a142cb07043ba08f02ad25f5a1fa5690', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -115,7 +146,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, h("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && h("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), h("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '8621a028894fb382854ff28779d0cadd3d9035f7', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '5c55858dbfb50734fb02d24091ebac3e0d05259f', class: "button-inner" }, h("slot", { key: '1f3bb8d76a1039ad648e202c650db06dfca88f79' })), mode === 'md' && h("ion-ripple-effect", { key: 'bda74b25bfdd431a8a36f0ee727b9184e9074321' })), h("div", { key: 'ff11369e921d6d0a540c75c37f692a3853e903f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '74ec4ca69331ed3f155fd8a8a356545941887df1', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment-content/segment-content.js

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 export class SegmentContent {
     render() {
-        return (h(Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, h("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
+        return (h(Host, { key: '64b3965b14c749e77e9ce13b59f349d971e245c8' }, h("slot", { key: '2d0bed34f9bc93f92e713cb51e42220f3cecd8f5' })));
     }
     static get is() { return "ion-segment-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment-view/segment-view.js

@@ -94,10 +94,10 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (h(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+        return (h(Host, { key: 'fa528d2d9ae0f00fc3067defe2a047dce77c814a', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, h("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+            } }, h("slot", { key: '74dc8b4d073caeff1bab272d11b9ea3e1a215954' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -299,6 +299,63 @@ button {
   --highlight-color: var(--highlight-color-valid);
 }
 
+.select-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text select.
+   */
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: 5px;
+  padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+  font-size: 0.75rem;
+  white-space: normal;
+}
+
+/**
+ * If the select has a validity state, the
+ * border and label should reflect that as a color.
+ * The invalid state should show if the select is
+ * invalid and has already been touched.
+ * The valid state should show if the select
+ * is valid, has already been touched, and
+ * is currently focused. Do not show the valid
+ * highlight when the select is blurred.
+ */
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-color: var(--highlight-color);
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the select. Otherwise the helper text should
+ * be shown.
+ */
+.select-bottom .error-text {
+  display: none;
+  color: var(--highlight-color-invalid);
+}
+
+.select-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+}
+
+:host(.ion-touched.ion-invalid) .select-bottom .error-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .select-bottom .helper-text {
+  display: none;
+}
+
 .label-text-wrapper {
   /**
    * This causes the label to take up
@@ -686,6 +743,8 @@ button {
  * }
  */
 :host {
+  --border-width: 0.55px;
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
   --highlight-height: 0px;
 }
 

package/dist/collection/components/select/select.js

@@ -23,10 +23,15 @@ import { getIonMode } from "../../global/ionic-global";
  * @part icon - The select icon container.
  * @part container - The container for the selected text or placeholder.
  * @part label - The label text describing the select.
+ * @part supporting-text - Supporting text displayed beneath the select.
+ * @part helper-text - Supporting text displayed beneath the select when the select is valid.
+ * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched.
  */
 export class Select {
     constructor() {
         this.inputId = `ion-sel-${selectIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
         this.onClick = (ev) => {
             const target = ev.target;
@@ -77,6 +82,8 @@ export class Select {
         this.compareWith = undefined;
         this.disabled = false;
         this.fill = undefined;
+        this.errorText = undefined;
+        this.helperText = undefined;
         this.interface = 'alert';
         this.interfaceOptions = {};
         this.justify = undefined;
@@ -91,6 +98,7 @@ export class Select {
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
+        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -153,15 +161,8 @@ export class Select {
         }
         this.isExpanded = true;
         const overlay = (this.overlay = await this.createOverlay(event));
-        overlay.onDidDismiss().then(() => {
-            this.overlay = undefined;
-            this.isExpanded = false;
-            this.ionDismiss.emit();
-            this.setFocus();
-        });
-        await overlay.present();
-        // focus selected option for popovers and modals
-        if (this.interface === 'popover' || this.interface === 'modal') {
+        // Add logic to scroll selected item into view before presenting
+        const scrollSelectedIntoView = () => {
             const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
@@ -179,6 +180,7 @@ export class Select {
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
+                        selectedItem.scrollIntoView({ block: 'nearest' });
                         // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
                         // and removing `ion-focused` style
                         interactiveEl.setFocus();
@@ -202,7 +204,40 @@ export class Select {
                     focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
+        };
+        // For modals and popovers, we can scroll before they're visible
+        if (this.interface === 'modal') {
+            overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
+        }
+        else if (this.interface === 'popover') {
+            overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
+        }
+        else {
+            /**
+             * For alerts and action sheets, we need to wait a frame after willPresent
+             * because these overlays don't have their content in the DOM immediately
+             * when willPresent fires. By waiting a frame, we ensure the content is
+             * rendered and can be properly scrolled into view.
+             */
+            const scrollAfterRender = () => {
+                requestAnimationFrame(() => {
+                    scrollSelectedIntoView();
+                });
+            };
+            if (this.interface === 'alert') {
+                overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
+            }
+            else if (this.interface === 'action-sheet') {
+                overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
+            }
         }
+        overlay.onDidDismiss().then(() => {
+            this.overlay = undefined;
+            this.isExpanded = false;
+            this.ionDismiss.emit();
+            this.setFocus();
+        });
+        await overlay.present();
         return overlay;
     }
     createOverlay(ev) {
@@ -628,8 +663,44 @@ export class Select {
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        const { disabled, inputId, isExpanded, required } = this;
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+    }
+    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;
+    }
+    /**
+     * Renders the helper text or error text values
+     */
+    renderHintText() {
+        const { helperText, errorText, helperTextId, errorTextId } = this;
+        return [
+            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),
+        ];
+    }
+    /**
+     * Responsible for rendering helper text, and error text. This element
+     * should only be rendered if hint text is set.
+     */
+    renderBottomContent() {
+        const { helperText, errorText } = 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: "select-bottom" }, this.renderHintText());
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -660,7 +731,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'aa7bd7fbb6479c7805486990650a406e5470fd13', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -676,7 +747,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
+            }) }, h("label", { key: 'fde3cdfd0ef7d1a20263e35ff4358ee7f61a789f', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '6fb8deedc827b6be2f19f9e57a62efefaaba200f', class: "select-wrapper-inner" }, h("slot", { key: 'a57a204ea1cbd9c4bac338f14e196e780dab0a10', name: "start" }), h("div", { key: '78b83e1484a446537e038527d539d997e330cd69', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9fc660134e5247c4e5243c7d9d71ac6cec08705d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '7f143285efa7fd7756dfdc5517ca33e84c8a027e', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -793,6 +864,40 @@ export class Select {
                 "attribute": "fill",
                 "reflect": 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 select 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 select and displayed when no error is detected."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
             "interface": {
                 "type": "string",
                 "mutable": false,
@@ -1042,6 +1147,24 @@ export class Select {
                 },
                 "attribute": "value",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -299,6 +299,63 @@ button {
   --highlight-color: var(--highlight-color-valid);
 }
 
+.select-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text select.
+   */
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: 5px;
+  padding-bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+  font-size: 0.75rem;
+  white-space: normal;
+}
+
+/**
+ * If the select has a validity state, the
+ * border and label should reflect that as a color.
+ * The invalid state should show if the select is
+ * invalid and has already been touched.
+ * The valid state should show if the select
+ * is valid, has already been touched, and
+ * is currently focused. Do not show the valid
+ * highlight when the select is blurred.
+ */
+:host(.has-focus.ion-valid),
+:host(.ion-touched.ion-invalid) {
+  --border-color: var(--highlight-color);
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the select. Otherwise the helper text should
+ * be shown.
+ */
+.select-bottom .error-text {
+  display: none;
+  color: var(--highlight-color-invalid);
+}
+
+.select-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+}
+
+:host(.ion-touched.ion-invalid) .select-bottom .error-text {
+  display: block;
+}
+
+:host(.ion-touched.ion-invalid) .select-bottom .helper-text {
+  display: none;
+}
+
 .label-text-wrapper {
   /**
    * This causes the label to take up
@@ -768,6 +825,10 @@ button {
   --border-color: var(--highlight-color);
 }
 
+/**
+ * The bottom content should never have
+ * a border with the solid style.
+ */
 :host(.select-fill-solid) .select-bottom {
   border-top: none;
 }