voyager-ionic-core 8.7.2 → 8.7.9

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h, forceUpdate } from "@stencil/core";
-import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
+import { Build, Host, h, forceUpdate } from "@stencil/core";
+import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
@@ -44,6 +44,10 @@ export class Select {
          * is applied in both cases.
          */
         this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The text to display on the cancel button.
          */
@@ -173,9 +177,46 @@ export class Select {
              */
             forceUpdate(this);
         });
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(this.el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextID = this.getHintTextID();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+        this.hintTextID = this.getHintTextID();
     }
     componentDidLoad() {
         /**
@@ -199,6 +240,11 @@ export class Select {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /**
      * Open the select overlay. The overlay is either an alert, action sheet, or popover,
@@ -715,11 +761,11 @@ export class Select {
     }
     renderListbox() {
         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) }));
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextID, "aria-invalid": this.isInvalid ? 'true' : undefined, "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) {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -731,10 +777,10 @@ export class Select {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = 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),
+            h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     /**
@@ -782,7 +828,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'c03fb65e8fc9f9aab295e07b282377d57d910519', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '35b5e18e6f79a802ff2d46d1242e80ff755cc0b9', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -800,7 +846,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '0d0c8ec55269adcac625f2899a547f4e7f3e3741', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f6dfc93c0e23cbe75a2947abde67d842db2dad78', class: "select-wrapper-inner" }, h("slot", { key: '957bfadf9f101f519091419a362d3abdc2be66f6', name: "start" }), h("div", { key: 'ca349202a484e7f2e884533fd330f0b136754f7d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'f0e62a6533ff1c8f62bd2d27f60b23385c4fa9ed', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fb840d46bafafb09898ebeebbe8c181906a3d8a2', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '6005b34a0c50bc4d7653a4276bc232ecd02e083c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'c7e07aa81ae856c057f16275dd058f37c5670a47', class: "select-wrapper-inner" }, h("slot", { key: '7fc2deefe0424404caacdbbd9e08ed43ba55d28a', name: "start" }), h("div", { key: '157d74ee717b1bc30b5f1c233a09b0c8456aa68e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ea66db304528b82bf9317730b6dce3db2612f235', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '786eb1530b7476f0615d4e7c0bf4e7e4dc66509c', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -820,7 +866,6 @@ export class Select {
         return {
             "cancelText": {
                 "type": "string",
-                "attribute": "cancel-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -836,11 +881,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "cancel-text",
                 "defaultValue": "'Cancel'"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -861,11 +906,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "color"
             },
             "compareWith": {
                 "type": "string",
-                "attribute": "compare-with",
                 "mutable": false,
                 "complexType": {
                     "original": "string | SelectCompareFn | null",
@@ -886,11 +931,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "compare-with"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -906,11 +951,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "fill": {
                 "type": "string",
-                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "'outline' | 'solid'",
@@ -925,11 +970,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "fill"
             },
             "errorText": {
                 "type": "string",
-                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -944,11 +989,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "error-text"
             },
             "helperText": {
                 "type": "string",
-                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -963,11 +1008,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text"
             },
             "interface": {
                 "type": "string",
-                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectInterface",
@@ -989,11 +1034,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "interface",
                 "defaultValue": "'alert'"
             },
             "interfaceOptions": {
                 "type": "any",
-                "attribute": "interface-options",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -1009,11 +1054,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "interface-options",
                 "defaultValue": "{}"
             },
             "justify": {
                 "type": "string",
-                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'space-between'",
@@ -1028,11 +1073,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "justify"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1047,11 +1092,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelPlacement": {
                 "type": "string",
-                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'floating' | 'stacked' | 'fixed'",
@@ -1067,11 +1112,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-placement",
                 "defaultValue": "'start'"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1087,11 +1132,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "multiple",
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1107,11 +1152,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "okText": {
                 "type": "string",
-                "attribute": "ok-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1127,11 +1172,11 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "ok-text",
                 "defaultValue": "'OK'"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1146,11 +1191,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "selectedText": {
                 "type": "string",
-                "attribute": "selected-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1165,11 +1210,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "selected-text"
             },
             "toggleIcon": {
                 "type": "string",
-                "attribute": "toggle-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1184,11 +1229,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "toggle-icon"
             },
             "expandedIcon": {
                 "type": "string",
-                "attribute": "expanded-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1203,11 +1248,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "expanded-icon"
             },
             "shape": {
                 "type": "string",
-                "attribute": "shape",
                 "mutable": false,
                 "complexType": {
                     "original": "'round'",
@@ -1222,11 +1267,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "shape"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any | null",
@@ -1241,11 +1286,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1261,6 +1306,7 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             }
         };
@@ -1268,7 +1314,9 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
-            "hasFocus": {}
+            "hasFocus": {},
+            "isInvalid": {},
+            "hintTextID": {}
         };
     }
     static get events() {

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

@@ -97,7 +97,6 @@ export class SelectModal {
         return {
             "header": {
                 "type": "string",
-                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -112,11 +111,11 @@ export class SelectModal {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "header"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -131,11 +130,11 @@ export class SelectModal {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "multiple"
             },
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectModalOption[]",

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

@@ -30,7 +30,6 @@ export class SelectOption {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -46,11 +45,11 @@ export class SelectOption {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any | null",
@@ -65,7 +64,8 @@ export class SelectOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }

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

@@ -121,7 +121,6 @@ export class SelectPopover {
         return {
             "header": {
                 "type": "string",
-                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -136,11 +135,11 @@ export class SelectPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "header"
             },
             "subHeader": {
                 "type": "string",
-                "attribute": "sub-header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -155,11 +154,11 @@ export class SelectPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "sub-header"
             },
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -174,11 +173,11 @@ export class SelectPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "message"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -193,11 +192,11 @@ export class SelectPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "multiple"
             },
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SelectPopoverOption[]",

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -50,7 +50,6 @@ export class SkeletonText {
         return {
             "animated": {
                 "type": "boolean",
-                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -66,6 +65,7 @@ export class SkeletonText {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "animated",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/spinner/spinner.js

@@ -61,7 +61,6 @@ export class Spinner {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -82,11 +81,11 @@ export class Spinner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "color"
             },
             "duration": {
                 "type": "number",
-                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -101,11 +100,11 @@ export class Spinner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "duration"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "SpinnerTypes",
@@ -126,11 +125,11 @@ export class Spinner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "paused": {
                 "type": "boolean",
-                "attribute": "paused",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -146,6 +145,7 @@ export class Spinner {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "paused",
                 "defaultValue": "false"
             }
         };