voyager-ionic-core 8.8.17 → 9.0.3

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

@@ -112,20 +112,6 @@
   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
@@ -248,8 +234,8 @@
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-top: 0;
+  padding-bottom: 0;
   border-radius: var(--border-radius);
   display: flex;
   position: relative;
@@ -262,23 +248,46 @@
   line-height: normal;
 }
 
+.textarea-control {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-grow: 1;
+  align-items: start;
+  align-self: stretch;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and textarea's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and textarea truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-:host(.has-focus) textarea {
-  caret-color: var(--highlight-color);
+/**
+ * When the label sits beside the textarea, the label should size to its content
+ * and the textarea should take the remaining space. A zero flex basis prevents
+ * the textarea from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.textarea-label-placement-start) .native-wrapper,
+:host(.textarea-label-placement-end) .native-wrapper,
+:host(.textarea-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
 }
 
-.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);
+:host(.has-focus) textarea {
+  caret-color: var(--highlight-color);
 }
 
 .native-wrapper {
@@ -305,8 +314,8 @@
 .native-wrapper::after {
   padding-left: 0;
   padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+  padding-top: 0;
+  padding-bottom: 0;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -332,12 +341,6 @@
   word-break: break-word;
 }
 
-.textarea-wrapper-inner {
-  display: flex;
-  width: 100%;
-  min-height: inherit;
-}
-
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -421,12 +424,12 @@
 }
 
 .label-text-wrapper {
-  -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);
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * textarea and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -445,6 +448,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -488,7 +503,7 @@
  * Label is on the left of the textarea in LTR and
  * on the right in RTL.
  */
-:host(.textarea-label-placement-start) .textarea-wrapper {
+:host(.textarea-label-placement-start) .textarea-control {
   flex-direction: row;
 }
 
@@ -510,7 +525,7 @@
  * Label is on the right of the textarea in LTR and
  * on the left in RTL.
  */
-:host(.textarea-label-placement-end) .textarea-wrapper {
+:host(.textarea-label-placement-end) .textarea-control {
   flex-direction: row-reverse;
 }
 
@@ -560,8 +575,15 @@
  * down when the textarea is focused or has a value.
  *
  */
-:host(.textarea-label-placement-stacked) .textarea-wrapper,
-:host(.textarea-label-placement-floating) .textarea-wrapper {
+:host(.textarea-label-placement-stacked),
+:host(.textarea-label-placement-floating) {
+  --padding-top: 20px;
+  --padding-bottom: 6px;
+}
+
+:host(.textarea-label-placement-stacked) .textarea-control,
+:host(.textarea-label-placement-floating) .textarea-control {
+  padding-top: 0;
   flex-direction: column;
   align-items: start;
 }
@@ -574,12 +596,10 @@
 :host(.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
-  -webkit-padding-start: 0px;
-  padding-inline-start: 0px;
-  -webkit-padding-end: 0px;
-  padding-inline-end: 0px;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   max-width: 100%;
   /**
    * The 2 ensures the label
@@ -614,13 +634,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.
@@ -655,19 +668,17 @@
   max-width: calc(100% / 0.75);
 }
 
-.start-slot-wrapper, .end-slot-wrapper {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
+.textarea-start,
+.textarea-end {
   display: flex;
+  position: relative;
   flex-shrink: 0;
   align-self: start;
 }
 
 ::slotted([slot=start]),
 ::slotted([slot=end]) {
-  margin-top: 0;
+  margin-top: var(--padding-top);
 }
 
 ::slotted([slot=start]:last-of-type) {
@@ -906,7 +917,6 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
 }
 
 /**
@@ -1034,7 +1044,14 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  min-height: 56px;
+  /**
+   * The measured width of the start container, as a negative offset
+   * in LTR and a positive one in RTL. Written to the host by the
+   * start container controller, so renaming it here requires renaming
+   * it there too. Declared with a default so the label is positioned
+   * correctly before the first measurement runs.
+   */
+  --internal-start-container-adjustment: 0px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1088,15 +1105,25 @@
   border-bottom: none;
 }
 
+/**
+ * The resting label is positioned relative to the control so it can size to
+ * the space between the start and end slots. When floating, the label needs
+ * to escape the control and position itself relative to the wrapper instead.
+ */
+:host(.textarea-fill-outline:not(.label-floating)) .textarea-control {
+  position: relative;
+}
+
 :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
   position: absolute;
   /**
-   * Label text should not extend
-   * beyond the bounds of the textarea.
+   * While resting this is the width of the textarea, which already
+   * excludes the start and end slots. Once the label floats the
+   * containing block becomes the wrapper and the rule below takes over.
    */
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+  max-width: 100%;
 }
 :host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-stacked .label-text-wrapper, :host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper, :host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-floating .label-text-wrapper {
   transform-origin: right top;
@@ -1121,7 +1148,7 @@
  * This makes the label sit above the textarea.
  */
 :host(.label-floating.textarea-fill-outline) .label-text-wrapper {
-  transform: translateY(-32%) scale(0.75);
+  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1137,7 +1164,7 @@
 
 /**
  * This ensures that the textarea does not
- * overlap the floating label while still
+ * overlap the outline container while still
  * remaining visually centered.
  */
 :host(.textarea-fill-outline.textarea-label-placement-stacked) textarea,
@@ -1148,17 +1175,10 @@
   margin-inline-start: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
-  margin-top: 12px;
+  margin-top: 19px;
   margin-bottom: 0px;
 }
 
-:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
-:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
-:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
-:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
-  margin-top: 12px;
-}
-
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1276,6 +1296,7 @@
   --padding-bottom: 8px;
   --padding-start: 0px;
   --highlight-height: 2px;
+  min-height: 72px;
   font-size: inherit;
 }
 
@@ -1337,6 +1358,11 @@
   --border-radius: 16px;
 }
 
+::slotted(ion-button[slot=start]),
+::slotted(ion-button[slot=end]) {
+  margin-top: 7px;
+}
+
 /**
  * Slotted buttons have a lot of default padding that can
  * cause them to look misaligned from other pieces such

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: getIonMode(this) }, h("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
+        return (h(Host, { key: 'ff9d2a4886b1c90a316c761f1160111f0e997f5d', class: getIonMode(this) }, h("slot", { key: '9a0f0d69e3713831e88c8770a60b28ff1a03abb6' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,11 +23,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c5f0b913ff0a22d9bf02da48a313a613c2ac8fe7', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
+            }) }, h("div", { key: '5253b9e39fb764bfe1e57370719139f8a83e9904', class: "toolbar-title" }, h("slot", { key: 'e38b1eccb0175c36f8cab211aee7ce4d61fc9035' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -177,8 +177,7 @@ export class Toast {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        var _a;
-        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+        if (!this.htmlAttributes?.id) {
             setOverlayId(this.el);
         }
     }
@@ -252,7 +251,6 @@ export class Toast {
      * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
-        var _a, _b;
         const unlock = await this.lockController.lock();
         const { durationTimeout, position, lastPresentedPosition } = this;
         if (durationTimeout) {
@@ -266,8 +264,8 @@ export class Toast {
          */
         {
             position,
-            top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
-            bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
+            top: lastPresentedPosition?.top ?? '',
+            bottom: lastPresentedPosition?.bottom ?? '',
         });
         if (dismissed) {
             this.delegateController.removeViewFromDom();
@@ -352,7 +350,7 @@ export class Toast {
         return Promise.resolve();
     }
     async callButtonHandler(button) {
-        if (button === null || button === void 0 ? void 0 : button.handler) {
+        if (button?.handler) {
             // a handler has been provided, execute it
             // pass the handler the values from the inputs
             try {
@@ -377,7 +375,7 @@ export class Toast {
             'toast-button-group': true,
             [`toast-button-group-${side}`]: true,
         };
-        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", { ...b.htmlAttributes, type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }, h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
     }
     /**
      * Render the `message` property.
@@ -417,9 +415,14 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - 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: 'b5256edcf33d0ef51e6c5080c84e1ca58abe2ae0', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, { key: '15d2ff8b689e40bb5cae3e304448dadf91b11b88', tabindex: "-1", ...this.htmlAttributes, style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '0860f7e895d8bc66e44c4d924ca569f4cbb1a749', class: wrapperClass, part: "wrapper" }, h("div", { key: '28784199c880a3f664677c8f5560b7caa8903251', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0a63ba1336ad43d2aec14e49055eb46c112359c2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'ecec8107af582dc55d4b3828dd7f3054a29f26b1', class: "toast-content", part: "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, {
+                [mode]: true,
+                ...getClassMap(this.cssClass),
+                'overlay-hidden': true,
+                'toast-translucent': this.translucent,
+            }), onIonToastWillDismiss: this.dispatchCancelHandler }, h("div", { key: 'd26cc17a59e3d81810e22ee422398f2cc4c7a05c', class: wrapperClass, part: "wrapper" }, h("div", { key: 'f15e1a97f13defcbf96612df4c7ba45999e6244d', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '639cacec828f969673071e54dc68284050e9f2fd', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a07e68cf68e4c507e4515de1a4b43dd8fb3541d3', class: "toast-content", part: "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

@@ -221,7 +221,9 @@ export class Toggle {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
         this.hintTextId = this.getHintTextId();
     }
     onStart() {
@@ -301,7 +303,7 @@ export class Toggle {
         // The attributes are matched too because the class needs the item to render.
         const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'e2fb9e7fb497511a8f763895fab34f20d5f8cb9e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: '148d15040257b05b3769da5a2439d051e357cbba', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 // `ion-focusable` has to stay on because it is what makes the item focusable.
@@ -315,10 +317,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'ab95b2af493f6352abefbc8661b112796ed12035', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f5a96b8f56787d67fa4ed2c29a089cd2fa02cb00', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '3bdabb3c25ec4417b0e968bae12f7365a77acb65', class: {
+            }) }, h("label", { key: '0dbc40adc87e2ab4bdcd9a9fef43393484174c18', class: "toggle-wrapper", htmlFor: inputId }, h("input", { key: '92dee565687fc9a883f97091ead1bbb51df43779', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required, ...inheritedAttributes }), h("div", { key: 'f057bc57714b26e84226ee931e09212b86dba69f', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3de9890950b5066173d49a6d615e415d286e4aa5' }), this.renderHintText()), h("div", { key: 'de233f83efd106d043b31cceb5eb9a6e5758d032', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '345efb5ce20f8124d1e74877b4943edf82fe2f8e' }), this.renderHintText()), h("div", { key: 'fc1a7fb6b65064307fbe0a50178559a52d6aedb7', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,10 +65,13 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
-                'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
+        return (h(Host, { key: 'c16803dc4eae9972ef19bf43aa74b94feb4fd4c1', class: {
+                ...childStyles,
+                ...createColorClasses(this.color, {
+                    [mode]: true,
+                    'in-toolbar': hostContext('ion-toolbar', this.el),
+                }),
+            } }, h("div", { key: '20e3f85844c94b8399c245d2df125e6ab678d681', class: "toolbar-background", part: "background" }), h("div", { key: '12f09e324e8d9130b9d30c493106b500233fb016', class: "toolbar-container", part: "container" }, h("slot", { key: '6da0fe99ee0c4d7c969712e2908a4e7e6be5ed2c', name: "start" }), h("slot", { key: '177c346d6dcabb7857d810cda7d25c6dde32e6e2', name: "secondary" }), h("div", { key: '8c921b415940c71bf4c1a2c5c6887f36ad1afd16', class: "toolbar-content", part: "content" }, h("slot", { key: '1f2976b80d967bd51e86ed1357b363271d655df2' })), h("slot", { key: '0f7618044a7e8b0d9b715a8e208070f7ef2ee4c8', name: "primary" }), h("slot", { key: '125c393197e0660a3c2638dd4628c41ef7e05f19', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/global/config.js

@@ -37,7 +37,7 @@ export const configFromSession = (win) => {
         const configStr = win.sessionStorage.getItem(IONIC_SESSION_KEY);
         return configStr !== null ? JSON.parse(configStr) : {};
     }
-    catch (e) {
+    catch {
         return {};
     }
 };
@@ -45,7 +45,7 @@ export const saveConfig = (win, c) => {
     try {
         win.sessionStorage.setItem(IONIC_SESSION_KEY, JSON.stringify(c));
     }
-    catch (e) {
+    catch {
         return;
     }
 };
@@ -59,7 +59,7 @@ export const configFromURL = (win) => {
         try {
             return [decodeURIComponent(key), decodeURIComponent(value)];
         }
-        catch (e) {
+        catch {
             return ['', ''];
         }
     })

package/dist/collection/global/ionic-global.js

@@ -19,7 +19,13 @@ export const initialize = (userConfig = {}) => {
     const Ionic = (win.Ionic = win.Ionic || {});
     // create the Ionic.config from raw config object (if it exists)
     // and convert Ionic.config into a ConfigApi that has a get() fn
-    const configObj = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), { persistConfig: false }), Ionic.config), configFromURL(win)), userConfig);
+    const configObj = {
+        ...configFromSession(win),
+        persistConfig: false,
+        ...Ionic.config,
+        ...configFromURL(win),
+        ...userConfig,
+    };
     config.reset(configObj);
     if (config.getBoolean('persistConfig')) {
         saveConfig(win, configObj);
@@ -37,7 +43,7 @@ export const initialize = (userConfig = {}) => {
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
-    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+    const isIonicElement = (elm) => elm.tagName?.startsWith('ION-');
     const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
         while (elm) {

package/dist/collection/index.js

@@ -17,5 +17,5 @@ export { getMode, setupConfig } from './utils/config';
 export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
-export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';
+export { alertController, actionSheetController, modalController, loadingController, popoverController, toastController, } from './utils/overlays';
 export { IonicSlides } from './components/slides/IonicSlides';

package/dist/collection/utils/animation/animation.js

@@ -122,7 +122,7 @@ export const createAnimation = (animationId) => {
         return ani;
     };
     const onFinish = (callback, opts) => {
-        const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
+        const callbacks = opts?.oneTimeCallback ? onFinishOneTimeCallbacks : onFinishCallbacks;
         callbacks.push({ c: callback, o: opts });
         return ani;
     };
@@ -155,7 +155,7 @@ export const createAnimation = (animationId) => {
              * for another animation to have already
              * cleaned up a particular stylesheet
              */
-            if (stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.parentNode) {
+            if (stylesheet?.parentNode) {
                 stylesheet.parentNode.removeChild(stylesheet);
             }
         });
@@ -655,7 +655,7 @@ export const createAnimation = (animationId) => {
     };
     const play = (opts) => {
         return new Promise((resolve) => {
-            if (opts === null || opts === void 0 ? void 0 : opts.sync) {
+            if (opts?.sync) {
                 shouldForceSyncPlayback = true;
                 onFinish(() => (shouldForceSyncPlayback = false), { oneTimeCallback: true });
             }

package/dist/collection/utils/config.js

@@ -4,18 +4,19 @@
 export const setupConfig = (config) => {
     const win = window;
     const Ionic = win.Ionic;
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (Ionic && Ionic.config && Ionic.config.constructor.name !== 'Object') {
         return;
     }
     win.Ionic = win.Ionic || {};
-    win.Ionic.config = Object.assign(Object.assign({}, win.Ionic.config), config);
+    win.Ionic.config = {
+        ...win.Ionic.config,
+        ...config,
+    };
     return win.Ionic.config;
 };
 export const getMode = () => {
-    var _a;
     const win = window;
-    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
+    const config = win?.Ionic?.config;
     if (config) {
         if (config.mode) {
             return config.mode;

package/dist/collection/utils/content/index.js

@@ -54,6 +54,36 @@ export const findIonContent = (el) => {
 export const findClosestIonContent = (el) => {
     return el.closest(ION_CONTENT_SELECTOR);
 };
+/**
+ * Queries the custom scroll host an `ion-refresher` scrolls with in the given
+ * `ion-content`. A refresher only pairs with the first host.
+ */
+export const findRefresherScrollHost = (ionContent) => {
+    return ionContent.querySelector(ION_CONTENT_CLASS_SELECTOR);
+};
+/**
+ * Queries the `ion-refresher` that scrolls with the given content element,
+ * which may be an `ion-content` or a custom scroll host. A refresher is a
+ * `slot="fixed"` child of `ion-content`, so it is a sibling of a scroll host
+ * rather than a descendant of it.
+ */
+export const findRefresherInContent = (contentEl) => {
+    // An `ion-content` owns any refresher inside it, scroll host or not.
+    if (isIonContent(contentEl)) {
+        return contentEl.querySelector('ion-refresher');
+    }
+    // A refresher needs an `ion-content` ancestor to initialize.
+    const ionContent = contentEl.closest(ION_CONTENT_ELEMENT_SELECTOR);
+    if (ionContent === null) {
+        return null;
+    }
+    // Any scroll host other than the refresher's own has no refresher.
+    const refresherScrollHost = findRefresherScrollHost(ionContent);
+    if (refresherScrollHost === null || !refresherScrollHost.contains(contentEl)) {
+        return null;
+    }
+    return ionContent.querySelector('ion-refresher');
+};
 /**
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.

package/dist/collection/utils/focus-controller/index.js

@@ -36,7 +36,7 @@ export const createFocusController = () => {
          */
         if (focusManagerEnabled) {
             const activeEl = document.activeElement;
-            if (activeEl !== null && (referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.contains(activeEl))) {
+            if (activeEl !== null && referenceEl?.contains(activeEl)) {
                 activeEl.setAttribute(LAST_FOCUS, 'true');
             }
         }