voyager-ionic-core 8.4.3 → 8.5.0

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

@@ -189,32 +189,39 @@ input {
   opacity: 0;
 }
 
-:host(.checkbox-justify-space-between) .checkbox-wrapper {
+.checkbox-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.checkbox-justify-start) .checkbox-wrapper {
-  justify-content: start;
+:host(.checkbox-label-placement-stacked) .checkbox-bottom {
+  font-size: 1rem;
 }
 
-:host(.checkbox-justify-end) .checkbox-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.
+ */
+.checkbox-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.checkbox-alignment-start) .checkbox-wrapper {
-  align-items: start;
+.checkbox-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.checkbox-alignment-center) .checkbox-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text {
+  display: block;
 }
 
-:host(.checkbox-justify-space-between),
-:host(.checkbox-justify-start),
-:host(.checkbox-justify-end),
-:host(.checkbox-alignment-start),
-:host(.checkbox-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -243,6 +250,7 @@ input {
  */
 :host(.checkbox-label-placement-end) .checkbox-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -285,6 +293,7 @@ input {
  */
 :host(.checkbox-label-placement-stacked) .checkbox-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
@@ -330,6 +339,34 @@ input {
   }
 }
 
+:host(.checkbox-justify-space-between) .checkbox-wrapper {
+  justify-content: space-between;
+}
+
+:host(.checkbox-justify-start) .checkbox-wrapper {
+  justify-content: start;
+}
+
+:host(.checkbox-justify-end) .checkbox-wrapper {
+  justify-content: end;
+}
+
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
+:host(.checkbox-justify-space-between),
+:host(.checkbox-justify-start),
+:host(.checkbox-justify-end),
+:host(.checkbox-alignment-start),
+:host(.checkbox-alignment-center) {
+  display: block;
+}
+
 :host(.checkbox-checked) .checkbox-icon,
 :host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);

package/dist/collection/components/checkbox/checkbox.js

@@ -13,10 +13,15 @@ import { getIonMode } from "../../global/ionic-global";
  * @part container - The container for the checkbox mark.
  * @part label - The label text describing the checkbox.
  * @part mark - The checkmark used to indicate the checked state.
+ * @part supporting-text - Supporting text displayed beneath the checkbox label.
+ * @part helper-text - Supporting text displayed beneath the checkbox label when the checkbox is valid.
+ * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
  */
 export class Checkbox {
     constructor() {
         this.inputId = `ion-cb-${checkboxIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
         /**
          * Sets the checked property and emits
@@ -54,10 +59,13 @@ export class Checkbox {
         this.checked = false;
         this.indeterminate = false;
         this.disabled = false;
+        this.errorText = undefined;
+        this.helperText = undefined;
         this.value = 'on';
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
+        this.required = false;
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
@@ -68,12 +76,38 @@ export class Checkbox {
             this.focusEl.focus();
         }
     }
+    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: "checkbox-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 { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
+        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
+        return (h(Host, { key: '7ac31df89b07c781ddcd30a6a8c109494d0c500a', "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -83,10 +117,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
+            }), onClick: this.onClick }, h("label", { key: '674e923fe1ec83a33c31d67b0d414d61ba8f9e4b', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'c4866e392fbdf3b76edcd1507cb67f40a213a4e7', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '79cb96e5963b9331a760438ec8cc9e456215de91', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), h("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, h("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, h("slot", { key: '896cb26292c9a4a6c105afb39611472b93bf5e90' }), this.renderHintText()), h("div", { key: '52cd22e79fd5db30b45d7b092aa5af3944392336', class: "native-wrapper" }, h("svg", { key: '18d862ab7cc32055eaf200eea560ff1b2b6cbde0', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -206,6 +240,40 @@ export class Checkbox {
                 "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 checkbox 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 checkbox label and displayed when no error is detected."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
             "value": {
                 "type": "any",
                 "mutable": false,
@@ -275,6 +343,24 @@ export class Checkbox {
                 },
                 "attribute": "alignment",
                 "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/checkbox/checkbox.md.css

@@ -189,32 +189,39 @@ input {
   opacity: 0;
 }
 
-:host(.checkbox-justify-space-between) .checkbox-wrapper {
+.checkbox-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.checkbox-justify-start) .checkbox-wrapper {
-  justify-content: start;
+:host(.checkbox-label-placement-stacked) .checkbox-bottom {
+  font-size: 1rem;
 }
 
-:host(.checkbox-justify-end) .checkbox-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.
+ */
+.checkbox-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.checkbox-alignment-start) .checkbox-wrapper {
-  align-items: start;
+.checkbox-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.checkbox-alignment-center) .checkbox-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text {
+  display: block;
 }
 
-:host(.checkbox-justify-space-between),
-:host(.checkbox-justify-start),
-:host(.checkbox-justify-end),
-:host(.checkbox-alignment-start),
-:host(.checkbox-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -243,6 +250,7 @@ input {
  */
 :host(.checkbox-label-placement-end) .checkbox-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -285,6 +293,7 @@ input {
  */
 :host(.checkbox-label-placement-stacked) .checkbox-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.checkbox-label-placement-stacked) .label-text-wrapper {
@@ -330,6 +339,34 @@ input {
   }
 }
 
+:host(.checkbox-justify-space-between) .checkbox-wrapper {
+  justify-content: space-between;
+}
+
+:host(.checkbox-justify-start) .checkbox-wrapper {
+  justify-content: start;
+}
+
+:host(.checkbox-justify-end) .checkbox-wrapper {
+  justify-content: end;
+}
+
+:host(.checkbox-alignment-start) .checkbox-wrapper {
+  align-items: start;
+}
+
+:host(.checkbox-alignment-center) .checkbox-wrapper {
+  align-items: center;
+}
+
+:host(.checkbox-justify-space-between),
+:host(.checkbox-justify-start),
+:host(.checkbox-justify-end),
+:host(.checkbox-alignment-start),
+:host(.checkbox-alignment-center) {
+  display: block;
+}
+
 :host(.checkbox-checked) .checkbox-icon,
 :host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);

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

@@ -311,6 +311,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -340,7 +341,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -359,7 +360,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }

package/dist/collection/components/input/input.js

@@ -149,8 +149,19 @@ export class Input {
             nativeInput.value = value;
         }
     }
+    /**
+     * dir is a globally enumerated attribute.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onDirChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        forceUpdate(this);
+    }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type']));
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
     }
     connectedCallback() {
         const { el } = this;
@@ -414,7 +425,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '54b5662d9a7f011a85e4119650c92b9af275bf96', class: createColorClasses(this.color, {
+        return (h(Host, { key: '166f7dea59931b8276bebef4d7a1fcd5ace90bad', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -425,7 +436,7 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '551cf8a932af3275689ecf32988b84355404e8f1', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'b3601dca7e0f23517748f6e7feb899c953355bc4', class: "native-wrapper" }, h("slot", { key: 'd687a9bb4c5778cfee35ce1b8d6d16ddc8eca768', name: "start" }), h("input", Object.assign({ key: 'ab927e84e43bedf8b7827bb743888a1778292deb', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '0d2ee3f7e69cee75f071f37b2e9bc174572c5a01', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: 'c6da0b068f8abc0fb8ffaee1a71685b03ec837ec', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'cd25ec6d885bdbfdb2def51f1ad1756cc4f3e9e0', class: "native-wrapper" }, h("slot", { key: '2582b54d551c93a89d4a663a8a61b6de5fae85cc', name: "start" }), h("input", Object.assign({ key: '2b496016ba7a0c51ccd5509183e531f802701455', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '2db9987180cd4030ad63de197af838e152b47998', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -440,7 +451,7 @@ export class Input {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'c7715111897f43839c10d38662616edb662cd49b', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'afc44cbe1ad50f17942d5297a12509abecbd6ecd', name: "end" })), shouldRenderHighlight && h("div", { key: 'ee3af32cd9003d497f33e352e56313d43295f3a9', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'ea5e1a5f61046434bf502db692a05dece19aecd9', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'db1e7452cfc25accdb518ff0cc59ae3e2e47b049', name: "end" })), shouldRenderHighlight && h("div", { key: '0daeaaa5238e0c60ccfd251dedc6a381eba2fcc8', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }
@@ -1211,6 +1222,9 @@ export class Input {
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "dir",
+                "methodName": "onDirChanged"
             }];
     }
 }

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

@@ -311,6 +311,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -340,7 +341,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -359,7 +360,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -799,6 +800,10 @@
   --border-color: var(--highlight-color);
 }
 
+/**
+ * The bottom content should never have
+ * a border with the solid style.
+ */
 :host(.input-fill-solid) .input-bottom {
   border-top: none;
 }

package/dist/collection/components/item-divider/item-divider.js

@@ -18,11 +18,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '6cff318230a9b2a9db529df154285d3dd9822efe', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7150b1a3a881c3c312db40821acb9830c2885ccf', class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: 'eb50dfab74ab0fd13697db17ecd60e8fa0bf1750', name: "start" }), h("div", { key: '2806efd89d086f4fb844a479d9c095e1e0775713', class: "item-divider-inner" }, h("div", { key: '77b7d5fa987e5f1c26d8023cd1f974a8a263a3de', class: "item-divider-wrapper" }, h("slot", { key: 'dbafb0deb140a19a2a9748fd5b48760c39c6fd2e' })), h("slot", { key: 'ef9a848fe21e84ef21cd273b8a4d9f95f558175b', name: "end" }))));
+            }) }, h("slot", { key: '6e9d9615f475392a81177bc49b4b01dbdab67925', name: "start" }), h("div", { key: '12fe6b840ad1a1897cc34529e488207b2df448f7', class: "item-divider-inner" }, h("div", { key: '626776a8c9887dd2df5ecf3b7861beb742b41e03', class: "item-divider-wrapper" }, h("slot", { key: '90379dd99914e24ae45c9571c8d390f9b6622fd4' })), h("slot", { key: '105644332c08530155b9cd8e8c6fa9e332072a63', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f9ffe0290d3fa546494fe55f952d8554f2a8abf8', role: "group", class: {
+        return (h(Host, { key: 'de2a969ed0dda880bc560a325848b28d0287fdb9', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,

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

@@ -44,12 +44,12 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '1b7708dd178dc2c9280652ca3da38c84ba7b767f', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, h("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), h("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, h("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), h("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), h("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), h("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), h("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
+            }) }, h(TagType, Object.assign({ key: 'd9f899f5425ad6b97071494485aa3ca90bc89d30' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'adc2cf72b4363be9b9eeb3584723e2bfc862af20', class: "button-inner" }, h("slot", { key: 'e668fe8e655a74e6a35e979e0cd488506b962dbf', name: "top" }), h("div", { key: '2ddcdb92b6b19c3cc549a7aee2400d1a6eeb51f1', class: "horizontal-wrapper" }, h("slot", { key: '441f13df18b72e5ed6bb51b157722e065b5847d2', name: "start" }), h("slot", { key: '425d815874b49e1628880160d7175ed3ca36ca39', name: "icon-only" }), h("slot", { key: '27437d3fa3365b12bc030704e18481fdfb14aebb' }), h("slot", { key: 'bd39330771c7f85c6df10f7f9050335ee7f14ff0', name: "end" })), h("slot", { key: '440cb6dc7743d50b261d4bf61d2c24e24b89e58c', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: '29632941464bbb34551cf64961187643f62bf755' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-options/item-options.js

@@ -17,7 +17,7 @@ export class ItemOptions {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '6d91399d2aaaa81d514d0bbc8dffe53eeec25d36', class: {
+        return (h(Host, { key: '7df4b71547524bf359c48e1b40ccbc44e850f632', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

package/dist/collection/components/item-sliding/item-sliding.js

@@ -388,7 +388,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a5216b11d92a1e1afed09d139212e0df81fdab79', class: {
+        return (h(Host, { key: 'd7697278008dd6531c0e4f9c235b955a337e3140', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/collection/components/label/label.js

@@ -55,13 +55,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses(this.color, {
+        return (h(Host, { key: '4da84c95351a74b547f8224ecfa66924d21398c5', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
+            }) }, h("slot", { key: 'ea158ebb620275e5492965234d0ab925d391f919' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/list-header/list-header.js

@@ -15,10 +15,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses(this.color, {
+        return (h(Host, { key: '95ce2135e2b1ad4d7d6020b0fb9bc6e02b3c0851', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, h("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
+            }) }, h("div", { key: '3065b0a094bc31a90518898a5126a813c8a33816', class: "list-header-inner" }, h("slot", { key: 'fe15c87d7867f3e5d8185645c49c0228496697b8' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -161,9 +161,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'd97f536b7f443ea19a2bbf2dcbc7f546b8e0a092', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd6066c8b56b1fe4b597a243a7dab191ef0d21286', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '6cd39bd7912fd080ab59d041644054c96d238ea9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c14ca5a9308844f11bcb010257e15208a75b39bc', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '118bceefa8e1cf8b225a858f224e6d919cf03c26', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '490d6e8ae4433835fe273162d7b90deab944fb39', class: "loading-spinner" }, h("ion-spinner", { key: 'c5cf6549c43df4cb23814b3e62ec4d9e7ea2b64f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '2b888362122d3b66b0492d53b0c21bd6a2a97501', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '2431eda00a2a3f510f5dfc39b7c7d47c056dfa3d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'cf210aaf5e754e4eccdb49cf7ead4647b3f9b2d1', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'fa9375143d391656d70e181d25b952c77c2fc6ec', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '8e4a4ed994f7f62df86b03696ac95162df41f52d', class: "loading-spinner" }, h("ion-spinner", { key: 'e5b323c272d365853ba92bd211e390b4fd4751d2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'cae35ec8c34800477bff3ebcec8010e632158233', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -614,14 +614,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '342db8551d26604128b29b21d2d8c37593972ed9', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '3c9bec2862b7fb9d88de66b1600be01f6735e3dd', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '76283b4b2a65c78646f92c3b273eea021eda499c' })), h("ion-backdrop", { key: '121c395bc4873542a1b6ae2c9e23f2e881e75d93', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '7ec29715ce7926b7c2b08f3d9cac8aaa16b3dc28', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '3cde3704f28eb275f4a5ff2985bbb68c1024e79c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -55,7 +55,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: 'd4c5929264af3ba0328118bcc27d2ab7ef5d3809' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '7bfa6e9a93105486623d044861e879ec79ff64f1', class: "button-inner" }, h("slot", { key: '071ab58e285832fc188706166f5547d45d501ac5' }, h("ion-icon", { key: '918ec5d791921de9821c347af4f65f97dd94aabf', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '00ffdd53f635e706c1dbd01b8e7944498650fe81', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: 'a02a3374288bd1759b6e352ada8eab0d45c6422f' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'ba699f2277a4e7b27ce5e42faeefc53d8805bb43', class: "button-inner" }, h("slot", { key: '829fe6cbdeb173f50d1a670389d1565baa6273e4' }, h("ion-icon", { key: 'a9a9f7b8dcffc648a8429fe0adbe766869de72fd', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '48deca9a771a249f2fc76eaa8b9741c8d66d8355', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }