@ionic/core 8.2.3-dev.11724326037.1eacfaff → 8.2.3-dev.11724345963.10ca6051

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

@@ -1,3 +1,64 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 /**
  * Convert a pixels given value into rem
  * 
@@ -111,27 +172,10 @@
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
   box-sizing: border-box;
 }
 
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-  min-height: 56px;
-}
-
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -195,6 +239,7 @@
   resize: none;
   appearance: none;
 }
+
 .native-textarea::placeholder {
   padding-left: 0;
   padding-right: 0;
@@ -229,6 +274,7 @@
   position: absolute;
   pointer-events: none;
 }
+
 .cloned-input {
   inset-inline-start: 0;
 }
@@ -279,21 +325,10 @@
   caret-color: var(--highlight-color);
 }
 
-.native-wrapper textarea {
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-}
-
 .native-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
-  min-height: inherit;
-  max-height: inherit;
   /**
    * This avoids a WebKit bug where
    * the height of the inner textarea
@@ -303,6 +338,7 @@
    */
   grid-auto-rows: 100%;
 }
+
 .native-wrapper::after {
   white-space: pre-wrap;
   content: attr(data-replicated-value) " ";
@@ -364,21 +400,9 @@
 }
 
 .textarea-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 textarea.
-   */
-  -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;
 }
 
 /**
@@ -421,9 +445,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
-  padding-inline-start: 16px;
 }
 
 .label-text-wrapper {
@@ -498,20 +520,6 @@
   flex-direction: row;
 }
 
-:host(.textarea-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the textarea should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 /**
  * Label is on the right of the textarea in LTR and
  * on the left in RTL.
@@ -520,34 +528,6 @@
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the textarea should be on the start
- * when the label sits at the end.
- */
-:host(.textarea-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-:host(.textarea-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the textarea should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 /**
  * Label is on the left of the textarea in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -594,6 +574,7 @@
    */
   z-index: 2;
 }
+
 :host-context([dir=rtl]):host(.textarea-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).textarea-label-placement-stacked .label-text-wrapper, :host-context([dir=rtl]):host(.textarea-label-placement-floating) .label-text-wrapper, :host-context([dir=rtl]).textarea-label-placement-floating .label-text-wrapper {
   transform-origin: right top;
 }
@@ -603,7 +584,6 @@
     transform-origin: right top;
   }
 }
-
 /**
  * Ensures the textarea does not
  * overlap the label.
@@ -620,13 +600,6 @@
   margin-bottom: 0px;
 }
 
-:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
-:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
-:host(.textarea-label-placement-floating) ::slotted([slot=start]),
-:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
-  margin-top: 8px;
-}
-
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -661,15 +634,122 @@
   max-width: calc(100% / 0.75);
 }
 
+.start-slot-wrapper,
+.end-slot-wrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-self: start;
+}
+
+:host {
+  min-height: 44px;
+  font-family: var(--ion-font-family, inherit);
+  z-index: 2;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+  min-height: 56px;
+}
+
+.native-wrapper {
+  min-height: inherit;
+  max-height: inherit;
+}
+
+.native-wrapper textarea {
+  -webkit-padding-start: 0px;
+  padding-inline-start: 0px;
+  -webkit-padding-end: 0px;
+  padding-inline-end: 0px;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
+.textarea-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 textarea.
+   */
+  -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;
+  font-size: 0.75rem;
+}
+
+.textarea-bottom .counter {
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  padding-inline-start: 16px;
+}
+
+:host(.textarea-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the textarea should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * The margin between the label and
+ * the textarea should be on the start
+ * when the label sits at the end.
+ */
+:host(.textarea-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.textarea-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the textarea should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .start-slot-wrapper,
 .end-slot-wrapper {
   padding-left: 0;
   padding-right: 0;
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  display: flex;
-  flex-shrink: 0;
-  align-self: start;
+}
+
+:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 8px;
 }
 
 ::slotted([slot=start]),

package/dist/collection/components/thumbnail/thumbnail.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8911848dc9edd536023c8a68e51752b751e3f0ab', class: {
+        return (h(Host, { key: '8913b780b1ac6a325126622f992da0d4169b5c8c', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'aaa7d7010d4050eebaed490b3ef7e641b076607c' })));
+            } }, h("slot", { key: '10127c5603bc9b750e060e35f8b7f665befce81a' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -31,11 +31,11 @@ export class ToolbarTitle {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '67f00e2664322d0a5df32e093c7e227fc6f16c98', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f381a740291cd926b40f52a3020fe3905f96fe1f', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'cfc8295c9c599a9a61ea794b30169fdd574708f1', class: "toolbar-title" }, h("slot", { key: '2065458af3ed39d230c935332e7ff9c9d2d20e78' }))));
+            }) }, h("div", { key: '01169b8d89fe706b3d6700d60429963be41ccd8d', class: "toolbar-title" }, h("slot", { key: '38222a860da0030c168c3adc8361796e1ba7598f' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -390,9 +390,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'cb84d6f739571bc4193840fb790caa5bb5d86570', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'c0989bce71160a39841e75a2724e0c2e339424fd', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '2d9d8ce5d886779f406410197df2a6244032c012', class: wrapperClass }, h("div", { key: '3a64cc8e864daf97f13c94416a544a80738273ba', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'c1461d577adabfb1244be84d5bc433c256a86a38', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '5a4cfe8b8fe74fa550468183b3f43294827b800f', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '152e56b2ebf42a4db999c77b79bc24c9860c9d5b', class: wrapperClass }, h("div", { key: '366fecd312dd4ef827f5c8bf976ca4c7eb95fff9', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '996753bdeb68bd6ef273714c11dafe8a9dde3581', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '23172e800e524666c4dd77fe95ccd34a42184812', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -207,7 +207,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '06f5bc54f99b5f27f0d67a6934aea6bb671ec440', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '184a920569b42f66f52fc7aab2d8670220a7e605', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -217,10 +217,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '7831cd36159ce5fc9d854ebecb597ae3c659a1c1', class: "toggle-wrapper" }, h("input", Object.assign({ key: '11ea2c3830239223c8b570216ca84109155d7776', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '5ae16c5503913089ca9ec268cf4db8a7745460b6', class: {
+            }) }, h("label", { key: '702b8e0c1014fa2425a8e4b4e68d451bd6b8ff7a', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'c382b53502cc1aa783674625ddc66adbe96a0619', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'd3c469fb9aca7c90cf1df6e731f3c1345b558b31', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '8787021fe340347d6ae44c22959f387f03b871e0' })), h("div", { key: '7ac6cf4bfeb41fc0e8ff9fa2e55571234ab07d03', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '1891a02e9ad17a2433f29c7f51cb9d9b16750a4e' })), h("div", { key: 'f84cb5515f519de8a174d9111a99fe4d648d0e76', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -63,10 +63,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '958f4b7dd7edd7e14188ede019a3ec83955047e7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '0b157e806d08ed75667a8d4c824531274c636c3f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '13c34671af2a47ee2d13c3348d87590696fe2043', class: "toolbar-background" }), h("div", { key: '00cb26c46ab564017c5b59133082966487f3268a', class: "toolbar-container" }, h("slot", { key: 'a9c5fc777ff5eab4ef91d7c9b274a53012280f35', name: "start" }), h("slot", { key: 'a5a4e11b5d5847ff167ae95b86cd3625d482e257', name: "secondary" }), h("div", { key: 'e9f06b74b6aa933363aa0b671216b37300cc660c', class: "toolbar-content" }, h("slot", { key: '05929530a64a6d497ef5bc69dbc42adc11c9694f' })), h("slot", { key: 'f03445495cd36c54a7a43b47ab47169c53d9d15b', name: "primary" }), h("slot", { key: 'd8a60db04c290933462b517cc6627500bd9ebe34', name: "end" }))));
+            })) }, h("div", { key: '8413374c1b4f3d16afb265d89a2506c83983da11', class: "toolbar-background" }), h("div", { key: 'da917701a03f82fe0030c68663381f99324dd9aa', class: "toolbar-container" }, h("slot", { key: '89cbc4450b377901cd732dcef02303a41205f202', name: "start" }), h("slot", { key: 'ee00a40995e755970cb9be8ccacaefbe394bca93', name: "secondary" }), h("div", { key: 'ae653739005ac675f789a57a6c5ee6899d24c34b', class: "toolbar-content" }, h("slot", { key: 'e90829ef9c274f14bfd8e85834183d3498bd2825' })), h("slot", { key: '8f5106bb52b434a6760cf6f7848471ab99f2c80b', name: "primary" }), h("slot", { key: '9d20e5120164268411bd7e9e091ced61d24da5cc', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-08-22T11:30:28",
+  "timestamp": "2024-08-22T17:02:46",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.3",
@@ -36143,6 +36143,40 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "size",
+          "type": "\"large\" | \"medium\" | \"small\" | undefined",
+          "complexType": {
+            "original": "'small' | 'medium' | 'large'",
+            "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "The size of the textarea. If \"large\" it will increase the height of the textarea, while\n\"small\" and \"medium\" provide progressively smaller heights. The default size is \"medium\".\nThis property only applies to the `\"ionic\"` theme.",
+          "docsTags": [],
+          "default": "'medium'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "spellcheck",
           "type": "boolean",

package/dist/esm/ion-app_8.entry.js

@@ -1230,11 +1230,11 @@ const ToolbarTitle = class {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '67f00e2664322d0a5df32e093c7e227fc6f16c98', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f381a740291cd926b40f52a3020fe3905f96fe1f', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'cfc8295c9c599a9a61ea794b30169fdd574708f1', class: "toolbar-title" }, h("slot", { key: '2065458af3ed39d230c935332e7ff9c9d2d20e78' }))));
+            }) }, h("div", { key: '01169b8d89fe706b3d6700d60429963be41ccd8d', class: "toolbar-title" }, h("slot", { key: '38222a860da0030c168c3adc8361796e1ba7598f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1306,10 +1306,10 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '958f4b7dd7edd7e14188ede019a3ec83955047e7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '0b157e806d08ed75667a8d4c824531274c636c3f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '13c34671af2a47ee2d13c3348d87590696fe2043', class: "toolbar-background" }), h("div", { key: '00cb26c46ab564017c5b59133082966487f3268a', class: "toolbar-container" }, h("slot", { key: 'a9c5fc777ff5eab4ef91d7c9b274a53012280f35', name: "start" }), h("slot", { key: 'a5a4e11b5d5847ff167ae95b86cd3625d482e257', name: "secondary" }), h("div", { key: 'e9f06b74b6aa933363aa0b671216b37300cc660c', class: "toolbar-content" }, h("slot", { key: '05929530a64a6d497ef5bc69dbc42adc11c9694f' })), h("slot", { key: 'f03445495cd36c54a7a43b47ab47169c53d9d15b', name: "primary" }), h("slot", { key: 'd8a60db04c290933462b517cc6627500bd9ebe34', name: "end" }))));
+            })) }, h("div", { key: '8413374c1b4f3d16afb265d89a2506c83983da11', class: "toolbar-background" }), h("div", { key: 'da917701a03f82fe0030c68663381f99324dd9aa', class: "toolbar-container" }, h("slot", { key: '89cbc4450b377901cd732dcef02303a41205f202', name: "start" }), h("slot", { key: 'ee00a40995e755970cb9be8ccacaefbe394bca93', name: "secondary" }), h("div", { key: 'ae653739005ac675f789a57a6c5ee6899d24c34b', class: "toolbar-content" }, h("slot", { key: 'e90829ef9c274f14bfd8e85834183d3498bd2825' })), h("slot", { key: '8f5106bb52b434a6760cf6f7848471ab99f2c80b', name: "primary" }), h("slot", { key: '9d20e5120164268411bd7e9e091ced61d24da5cc', name: "end" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-avatar_3.entry.js

@@ -136,9 +136,9 @@ const Thumbnail = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8911848dc9edd536023c8a68e51752b751e3f0ab', class: {
+        return (h(Host, { key: '8913b780b1ac6a325126622f992da0d4169b5c8c', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'aaa7d7010d4050eebaed490b3ef7e641b076607c' })));
+            } }, h("slot", { key: '10127c5603bc9b750e060e35f8b7f665befce81a' })));
     }
 };
 Thumbnail.style = IonThumbnailStyle0;

package/dist/esm/ion-input-password-toggle.entry.js

@@ -10,14 +10,11 @@ const eyeSlashSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
 
 const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yNDcuMzEsMTI0Ljc2Yy0uMzUtLjc5LTguODItMTkuNTgtMjcuNjUtMzguNDFDMTk0LjU3LDYxLjI2LDE2Mi44OCw0OCwxMjgsNDhTNjEuNDMsNjEuMjYsMzYuMzQsODYuMzVDMTcuNTEsMTA1LjE4LDksMTI0LDguNjksMTI0Ljc2YTgsOCwwLDAsMCwwLDYuNWMuMzUuNzksOC44MiwxOS41NywyNy42NSwzOC40QzYxLjQzLDE5NC43NCw5My4xMiwyMDgsMTI4LDIwOHM2Ni41Ny0xMy4yNiw5MS42Ni0zOC4zNGMxOC44My0xOC44MywyNy4zLTM3LjYxLDI3LjY1LTM4LjRBOCw4LDAsMCwwLDI0Ny4zMSwxMjQuNzZaTTEyOCwxOTJjLTMwLjc4LDAtNTcuNjctMTEuMTktNzkuOTMtMzMuMjVBMTMzLjQ3LDEzMy40NywwLDAsMSwyNSwxMjgsMTMzLjMzLDEzMy4zMywwLDAsMSw0OC4wNyw5Ny4yNUM3MC4zMyw3NS4xOSw5Ny4yMiw2NCwxMjgsNjRzNTcuNjcsMTEuMTksNzkuOTMsMzMuMjVBMTMzLjQ2LDEzMy40NiwwLDAsMSwyMzEuMDUsMTI4QzIyMy44NCwxNDEuNDYsMTkyLjQzLDE5MiwxMjgsMTkyWm0wLTExMmE0OCw0OCwwLDEsMCw0OCw0OEE0OC4wNSw0OC4wNSwwLDAsMCwxMjgsODBabTAsODBhMzIsMzIsMCwxLDEsMzItMzJBMzIsMzIsMCwwLDEsMTI4LDE2MFoiLz48L3N2Zz4=';
 
-const inputPasswordToggleIonicCss = ":host ion-button.button-has-icon-only{--padding-end:inherit;--color:var(--ionic-color-neutral-500, #a2a2a2);--margin-end:calc(-1 * var(--padding-end));-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:0;margin-bottom:0}";
-const IonInputPasswordToggleIonicStyle0 = inputPasswordToggleIonicCss;
+const iosInputPasswordToggleCss = "";
+const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCss;
 
-const iosInputPasswordToggleCommonCss = "";
-const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCommonCss;
-
-const mdInputPasswordToggleCommonCss = "";
-const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCommonCss;
+const mdInputPasswordToggleCss = "";
+const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCss;
 
 const InputPasswordToggle = class {
     constructor(hostRef) {
@@ -102,16 +99,16 @@ const InputPasswordToggle = class {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '140bda3fc0a5a4dda16c9dfcf1254cc94c60206e', class: createColorClasses(color, {
+        return (h(Host, { key: '4ca80b49b49f4ed0c14573a2965e5590e1cb7607', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'ec84dcf19d488f9454eadc860e10be8f8a306f0b', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '37eeacd2673026ce9c068c45af0df09a9d83156c', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '40d2804ffafda8cb18c4f55af8cb6f7916c7c466', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '27ad27e94b0fee38cf6129870621a0c96de4375a', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -119,7 +116,6 @@ const InputPasswordToggle = class {
     }; }
 };
 InputPasswordToggle.style = {
-    ionic: IonInputPasswordToggleIonicStyle0,
     ios: IonInputPasswordToggleIosStyle0,
     md: IonInputPasswordToggleMdStyle0
 };