@ionic/core 8.4.4-dev.11741289071.1e8e1c3f → 8.4.4-dev.11741298262.12200f27

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

@@ -299,63 +299,6 @@ 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
@@ -743,8 +686,6 @@ 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,15 +23,10 @@ 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;
@@ -82,8 +77,6 @@ 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;
@@ -664,43 +657,7 @@ 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) }));
-    }
-    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());
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -731,7 +688,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '6c0141f40087a1793516882641e4473a6a82a0b2', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f7cf03de773cd85da42978e274d65cc1eb6ed8a3', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -747,7 +704,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'a0d70c7cfb6c784f200e9b0893ddcbd25b59b167', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'd398f85e1c3af2758cf0672ce8eab1ffa1e3e6a8', class: "select-wrapper-inner" }, h("slot", { key: 'b2ba9dbc8b944c04981b5f97975231a4b1c18768', name: "start" }), h("div", { key: '625c1029456701694f521a9b3e2199a8fd6c3331', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '54bee045845d773e11f8952b9278c97082534488', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'cf70509d4140259a41367333ca3815a427f9ad66', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '91674f8f5cce37c87a7096d09b3f1d351cba1527', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '2229333833047db13ed2a01cb10bb6e6f774031d', class: "select-wrapper-inner" }, h("slot", { key: 'f2766bdf8bff261efa5711f72d9edef407e45189', name: "start" }), h("div", { key: '84fec020ecaaac41298a01dbffdbb2f3744170b4', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9b91237d7a1621bce1e15546abcb4f6b74cccc5f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e02aea3e8f344376013257f5261a29408e62b359', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -864,40 +821,6 @@ 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,

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

@@ -299,63 +299,6 @@ 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
@@ -825,10 +768,6 @@ 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;
 }

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

@@ -171,32 +171,39 @@ input {
   align-items: center;
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
+.toggle-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: 1rem;
 }
 
-:host(.toggle-justify-end) .toggle-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.
+ */
+.toggle-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
+.toggle-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
+  display: block;
 }
 
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -225,6 +232,7 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -267,6 +275,7 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -312,6 +321,34 @@ input {
   }
 }
 
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
+}
+
 .toggle-icon-wrapper {
   display: flex;
   position: relative;

package/dist/collection/components/toggle/toggle.js

@@ -17,10 +17,15 @@ import { getIonMode } from "../../global/ionic-global";
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
  * @part label - The label text describing the toggle.
+ * @part supporting-text - Supporting text displayed beneath the toggle label.
+ * @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid.
+ * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 export class Toggle {
     constructor() {
         this.inputId = `ion-tg-${toggleIds++}`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
@@ -66,6 +71,8 @@ export class Toggle {
         this.name = this.inputId;
         this.checked = false;
         this.disabled = false;
+        this.errorText = undefined;
+        this.helperText = undefined;
         this.value = 'on';
         this.enableOnOffLabels = config.get('toggleOnOffLabels');
         this.labelPlacement = 'start';
@@ -152,13 +159,39 @@ export class Toggle {
     get hasLabel() {
         return this.el.textContent !== '';
     }
+    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: "toggle-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 { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '6a03757dc962cda1c8f986e84d8545875de8e5fa', "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -168,10 +201,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, h("input", Object.assign({ key: '360b53080aacfd99a9ff60ffb5219816bd4163ee', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
+            }) }, h("label", { key: '842e00a34befece9ea84a9e28dd62d49104de681', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'eb889c180b3f6efab26f31669aa6adc23d866eb1', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: 'fe57b4a97a0ddabf99995f1def5cd432b7ea591d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), h("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '4ae52733af284130dfb2e2c3b476e0516e0be147' }), this.renderHintText()), h("div", { key: 'ffee5416e2ab4b8d286d2790490255bb45346ce0', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -266,6 +299,40 @@ export class Toggle {
                 "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 toggle 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 toggle label and displayed when no error is detected."
+                },
+                "attribute": "helper-text",
+                "reflect": false
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

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

@@ -171,32 +171,39 @@ input {
   align-items: center;
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
+.toggle-bottom {
+  padding-top: 4px;
+  display: flex;
   justify-content: space-between;
+  font-size: 0.75rem;
+  white-space: normal;
 }
 
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: 1rem;
 }
 
-:host(.toggle-justify-end) .toggle-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.
+ */
+.toggle-bottom .error-text {
+  display: none;
+  color: var(--ion-color-danger, #c5000f);
 }
 
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
+.toggle-bottom .helper-text {
+  display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
+:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
+  display: block;
 }
 
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
-  display: block;
+:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
+  display: none;
 }
 
 /**
@@ -225,6 +232,7 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
+  justify-content: start;
 }
 
 /**
@@ -267,6 +275,7 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
+  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -312,6 +321,34 @@ input {
   }
 }
 
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
+}
+
 .toggle-icon-wrapper {
   display: flex;
   position: relative;