@ionic/core 7.4.4-dev.11699474548.1f806781 → 7.4.4-dev.11699475060.1eee2115

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

@@ -15,7 +15,6 @@ import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
-import { getAnimationPosition } from "./animations/utils";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -55,7 +54,6 @@ export class Toast {
     this.message = undefined;
     this.keyboardClose = false;
     this.position = 'bottom';
-    this.positionAnchor = undefined;
     this.buttons = undefined;
     this.translucent = false;
     this.animated = true;
@@ -103,19 +101,7 @@ export class Toast {
   async present() {
     const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    const { el, position } = this;
-    const anchor = this.getAnchorElement();
-    const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
-    /**
-     * Cache the calculated position of the toast, so we can re-use it
-     * in the dismiss animation.
-     */
-    this.lastPresentedPosition = animationPosition;
-    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
-      position,
-      top: animationPosition.top,
-      bottom: animationPosition.bottom,
-    });
+    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
@@ -137,28 +123,15 @@ 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) {
-      clearTimeout(durationTimeout);
+    if (this.durationTimeout) {
+      clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
-    /**
-     * Fetch the cached position that was calculated back in the present
-     * animation. We always want to animate the dismiss from the same
-     * position the present stopped at, so the animation looks continuous.
-     */
-    {
-      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 : '',
-    });
+    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
-    this.lastPresentedPosition = undefined;
     unlock();
     return dismissed;
   }
@@ -182,44 +155,6 @@ export class Toast {
       : [];
     return buttons;
   }
-  /**
-   * Returns the element specified by the positionAnchor prop,
-   * or undefined if prop's value is an ID string and the element
-   * is not found in the DOM.
-   */
-  getAnchorElement() {
-    const { position, positionAnchor, el } = this;
-    /**
-     * If positionAnchor is undefined then
-     * no anchor should be used when presenting the toast.
-     */
-    if (positionAnchor === undefined) {
-      return;
-    }
-    if (position === 'middle' && positionAnchor !== undefined) {
-      printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
-      return undefined;
-    }
-    if (typeof positionAnchor === 'string') {
-      /**
-       * If the anchor is defined as an ID, find the element.
-       * We do this on every present so the toast doesn't need
-       * to account for the surrounding DOM changing since the
-       * last time it was presented.
-       */
-      const foundEl = document.getElementById(positionAnchor);
-      if (foundEl === null) {
-        printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
-        return undefined;
-      }
-      return foundEl;
-    }
-    if (positionAnchor instanceof HTMLElement) {
-      return positionAnchor;
-    }
-    printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
-    return undefined;
-  }
   async buttonClick(button) {
     const role = button.role;
     if (isCancel(role)) {
@@ -582,34 +517,12 @@ export class Toast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property."
+          "text": "The position of the toast on the screen."
         },
         "attribute": "position",
         "reflect": false,
         "defaultValue": "'bottom'"
       },
-      "positionAnchor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement | string",
-          "resolved": "HTMLElement | string | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored."
-        },
-        "attribute": "position-anchor",
-        "reflect": false
-      },
       "buttons": {
         "type": "unknown",
         "mutable": false,
@@ -900,9 +813,8 @@ export class Toast {
               "id": "global::Promise"
             },
             "ToastPresentOptions": {
-              "location": "import",
-              "path": "./toast-interface",
-              "id": "src/components/toast/toast-interface.ts::ToastPresentOptions"
+              "location": "global",
+              "id": "global::ToastPresentOptions"
             }
           },
           "return": "Promise<void>"
@@ -934,9 +846,8 @@ export class Toast {
               "id": "global::Promise"
             },
             "ToastDismissOptions": {
-              "location": "import",
-              "path": "./toast-interface",
-              "id": "src/components/toast/toast-interface.ts::ToastDismissOptions"
+              "location": "global",
+              "id": "global::ToastDismissOptions"
             }
           },
           "return": "Promise<boolean>"

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

@@ -1,36 +1,3 @@
-/**
- * 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.
- */
 :host {
   /**
    * @prop --background: Background of the toast
@@ -193,10 +160,6 @@
   margin-inline-start: 16px;
 }
 
-.toast-content {
-  min-width: 0;
-}
-
 .toast-message {
   flex: 1;
   white-space: var(--white-space);
@@ -233,39 +196,6 @@
     cursor: pointer;
   }
 }
-/**
- * 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.
- */
 :host {
   --background: var(--ion-color-step-800, #333333);
   --border-radius: 4px;
@@ -275,7 +205,7 @@
   --max-width: 700px;
   --start: 8px;
   --end: 8px;
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 
 .toast-wrapper {
@@ -303,11 +233,11 @@
 .toast-header {
   margin-bottom: 2px;
   font-weight: 500;
-  line-height: 1.25rem;
+  line-height: 20px;
 }
 
 .toast-message {
-  line-height: 1.25rem;
+  line-height: 20px;
 }
 
 .toast-layout-baseline .toast-button-group-start {
@@ -342,7 +272,7 @@
   position: relative;
   background-color: transparent;
   font-family: var(--ion-font-family);
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.84px;
   text-transform: uppercase;

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

@@ -1,36 +1,3 @@
-/**
- * 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.
- */
 :host {
   /**
    * @prop --track-background: Background of the toggle track
@@ -404,72 +371,6 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
-/**
- * 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.
- */
-/**
- * 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.
- */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);
   --track-background-checked: var(--ion-color-primary, #3880ff);

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

@@ -44,6 +44,9 @@ export class Toggle {
       }
     };
     this.onClick = (ev) => {
+      if (this.disabled) {
+        return;
+      }
       ev.preventDefault();
       if (this.lastDrag + 300 < Date.now()) {
         this.toggleChecked();

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

@@ -1,36 +1,3 @@
-/**
- * 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.
- */
 :host {
   /**
    * @prop --track-background: Background of the toggle track
@@ -404,72 +371,6 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
-/**
- * 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.
- */
-/**
- * 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.
- */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);
   --track-background-checked: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);

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

@@ -1,36 +1,3 @@
-/**
- * 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.
- */
 :host {
   /**
    * @prop --background: Background of the toolbar
@@ -120,39 +87,6 @@
   position: absolute;
 }
 
-/**
- * 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.
- */
 :host {
   --background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
@@ -187,6 +121,10 @@
   margin-top: 3px;
 }
 
+:host(.toolbar-searchbar) ::slotted(ion-back-button) {
+  height: 38px;
+}
+
 ::slotted(ion-buttons) {
   min-height: 38px;
 }
@@ -209,6 +147,16 @@
   text-align: end;
 }
 
+/**
+ * Ensure there is enough spacing between the large
+ * title and any potential content in subsequent
+ * toolbars. We do not add padding to the title
+ * itself because it is absolutely positioned.
+ */
+:host(.toolbar-title-large) {
+  padding-bottom: 7px;
+}
+
 :host(.toolbar-title-large) .toolbar-container {
   flex-wrap: wrap;
   align-items: flex-start;