@ionic/core 8.2.2 → 8.2.3-dev.11719301373.17616928

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

@@ -10,7 +10,7 @@ import { GESTURE, createDelegateController, createTriggerController, dismiss, ev
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,7 +19,8 @@ import { getAnimationPosition } from "./animations/utils";
 import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @part button - Any button element that is displayed inside of the toast.
  * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
@@ -175,11 +176,12 @@ export class Toast {
      * Present the toast overlay after it has been created.
      */
     async present() {
+        const mode = getIonMode(this);
         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);
+        const animationPosition = getAnimationPosition(position, anchor, mode, el);
         /**
          * Cache the calculated position of the toast, so we can re-use it
          * in the dismiss animation.
@@ -343,12 +345,12 @@ export class Toast {
         if (buttons.length === 0) {
             return;
         }
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const buttonGroupsClasses = {
             '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", 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), theme === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
     }
     /**
      * Render the `message` property.
@@ -375,7 +377,7 @@ export class Toast {
         const allButtons = this.getButtons();
         const startButtons = allButtons.filter((b) => b.side === 'start');
         const endButtons = allButtons.filter((b) => b.side !== 'start');
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const wrapperClass = {
             'toast-wrapper': true,
             [`toast-${this.position}`]: true,
@@ -388,22 +390,24 @@ 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: 'da148788489146a20b42023fdc6401e53c044767', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'cb84d6f739571bc4193840fb790caa5bb5d86570', 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: 'ab0a4d783aa43ba961492b3eb8beb60a38153057', class: wrapperClass }, h("div", { key: '83e49027fd1ca6553d6910ff91befeea43576f3c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '025cb4b6b170a89548969a25bcce4ab7a3817898', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'b811b4e1cbc1528c2cfb57898f5615692120f840', 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: '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')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toast.ios.scss"],
-            "md": ["toast.md.scss"]
+            "md": ["toast.md.scss"],
+            "ionic": ["toast.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toast.ios.css"],
-            "md": ["toast.md.css"]
+            "md": ["toast.md.css"],
+            "ionic": ["toast.md.css"]
         };
     }
     static get properties() {
@@ -734,7 +738,7 @@ export class Toast {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the toast will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -218,6 +224,12 @@
     cursor: pointer;
   }
 }
+/**
+ * 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

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -110,18 +116,18 @@
 input {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
-  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
+  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -372,6 +378,12 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
+/**
+ * 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
@@ -427,6 +439,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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
@@ -562,6 +580,9 @@ input {
   position: absolute;
   width: 15px;
   height: 15px;
+}
+
+.toggle-switch-icon-checked-default {
   transform: translateY(-50%) rotate(90deg);
 }
 

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

@@ -8,9 +8,10 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { checkmarkOutline, removeOutline, ellipseOutline } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -55,11 +56,8 @@ export class Toggle {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.getSwitchLabelIcon = (mode, checked) => {
-            if (mode === 'md') {
-                return checked ? checkmarkOutline : removeOutline;
-            }
-            return checked ? removeOutline : ellipseOutline;
+        this.getSwitchLabelIcon = (checked) => {
+            return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
         };
         this.activated = false;
         this.color = undefined;
@@ -135,30 +133,67 @@ export class Toggle {
             this.focusEl.focus();
         }
     }
-    renderOnOffSwitchLabels(mode, checked) {
-        const icon = this.getSwitchLabelIcon(mode, checked);
+    get toggleDefaultCheckedIcon() {
+        const theme = getIonTheme(this);
+        return theme === 'md' ? checkmarkOutline : removeOutline;
+    }
+    /**
+     * Get the icon to use for the checked icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     *
+     * @returns {string} The icon to use for the checked icon.
+     */
+    get toggleCheckedIcon() {
+        return config.get('toggleCheckedIcon', this.toggleDefaultCheckedIcon);
+    }
+    /**
+     * Get the icon to use for the unchecked icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     *
+     * @returns {string} The icon to use for the unchecked icon.
+     */
+    get toggleUncheckedIcon() {
+        const theme = getIonTheme(this);
+        const defaultIcon = theme === 'md' ? removeOutline : ellipseOutline;
+        return config.get('toggleUncheckedIcon', defaultIcon);
+    }
+    renderOnOffSwitchLabels(checked) {
+        const icon = this.getSwitchLabelIcon(checked);
         return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
+                /**
+                 * The default checked icon is being modified with
+                 * styling that causes it to rotate by 90 degrees
+                 * when the theme is `ios`.
+                 *
+                 * To prevent any rotation on a custom icon that is
+                 * set through the config, we need to apply a class
+                 * that handles the styling only when the default
+                 * checked icon is being used.
+                 */
+                'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
             }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));
+            theme === 'ios' && [this.renderOnOffSwitchLabels(true), this.renderOnOffSwitchLabels(false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && theme === 'md' && this.renderOnOffSwitchLabels(checked)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
     }
     render() {
         const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'b0d648e071bc8095998b519ce4dcdd0ea91575c0', onClick: this.onClick, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '673ca5b84a64fe95a1fdb6db2ea8d83e07727049', onClick: this.onClick, class: createColorClasses(color, {
+                [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
                 'toggle-checked': checked,
@@ -167,23 +202,25 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '9a2fe1d16dba66a9dfef450efebf2e5cbe3dcd00', class: "toggle-wrapper" }, h("input", Object.assign({ key: '4358d18cb86da768155c17f9da3aac641296c256', 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: '0ec99e452164d7059cc4f93d09e5b918f82c022a', class: {
+            }) }, h("label", { key: '08a82b8dac263adf4574cfdec8643bd3c6b28e97', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f910b50abdefa78645b5b18ec47b418c2057d474', 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: '1d35cff3e28c69cbd49c33c62e4555a61c811f74', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '1c5cbc99905a79e842e9487eb3ca654e1bab3c66' })), h("div", { key: 'ca8196423b429899febd11c7337d768ff05df6f4', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '338ec071aa8db10dbd8839640a8ff6516f2f3734' })), h("div", { key: '7aa74ff055525617668500f46612bc03e73a7230', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toggle.ios.scss"],
-            "md": ["toggle.md.scss"]
+            "md": ["toggle.md.scss"],
+            "ionic": ["toggle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
-            "md": ["toggle.md.css"]
+            "md": ["toggle.md.css"],
+            "ionic": ["toggle.md.css"]
         };
     }
     static get properties() {

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -110,18 +116,18 @@
 input {
   position: absolute;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
-  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
+  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -372,6 +378,12 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
+/**
+ * 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
@@ -427,6 +439,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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

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

@@ -0,0 +1,233 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --background: Background of the toolbar
+   *
+   * @prop --border-color: Color of the toolbar border
+   * @prop --border-style: Style of the toolbar border
+   * @prop --border-width: Width of the toolbar border
+   *
+   * @prop --color: Color of the toolbar text
+   *
+   * @prop --min-height: Minimum height of the toolbar
+   *
+   * @prop --opacity: Opacity of the toolbar background
+   *
+   * @prop --padding-top: Top padding of the toolbar
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
+   * @prop --padding-bottom: Bottom padding of the toolbar
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
+   */
+  --border-width: 0;
+  --border-style: solid;
+  --opacity: 1;
+  --opacity-scale: 1;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: block;
+  position: relative;
+  width: 100%;
+  padding-right: var(--ion-safe-area-right);
+  padding-left: var(--ion-safe-area-left);
+  color: var(--color);
+  contain: content;
+  box-sizing: border-box;
+}
+
+.toolbar-container {
+  -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: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: var(--min-height);
+  contain: content;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.toolbar-background {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  transform: translateZ(0);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--background);
+  contain: strict;
+  opacity: calc(var(--opacity) * var(--opacity-scale));
+  pointer-events: none;
+}
+
+::slotted(ion-progress-bar) {
+  right: 0;
+  left: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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 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(--ionic-color-base-white, #ffffff);
+  --color: var(--ionic-color-neutral-1200, #242424);
+  --border-color: currentColor;
+  --padding-top: var(--ionic-space-200, 8px);
+  --padding-bottom: var(--ionic-space-200, 8px);
+  --padding-start: var(--ionic-space-200, 8px);
+  --padding-end: var(--ionic-space-200, 8px);
+  --min-height: var(--ionic-scale-1400, 56px);
+}
+
+.toolbar-container {
+  gap: var(--ionic-space-400, 16px);
+  z-index: 10;
+}
+
+.toolbar-content {
+  flex: 1;
+  order: 3;
+  min-width: 0;
+}
+
+:host(.toolbar-divider) {
+  border-bottom: var(--ionic-border-size-025, 1px) var(--ionic-border-style-solid, solid) var(--ionic-color-neutral-300, #cfcfcf);
+}
+
+:host(.toolbar-searchbar) .toolbar-container {
+  -webkit-padding-start: var(--ionic-space-400, 16px);
+  padding-inline-start: var(--ionic-space-400, 16px);
+  -webkit-padding-end: var(--ionic-space-400, 16px);
+  padding-inline-end: var(--ionic-space-400, 16px);
+}
+
+:host(.toolbar-searchbar) ::slotted(ion-searchbar) {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+::slotted(ion-title) {
+  -webkit-padding-start: var(--padding-top);
+  padding-inline-start: var(--padding-top);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+}
+
+:host(.toolbar-title-default) ::slotted(ion-title) {
+  text-align: center;
+}
+
+::slotted([slot=start]) {
+  order: 1;
+}
+
+::slotted([slot=secondary]) {
+  order: 2;
+}
+
+::slotted([slot=primary]) {
+  order: 4;
+  text-align: end;
+}
+
+::slotted([slot=end]) {
+  gap: var(--ionic-space-200, 8px);
+  order: 5;
+  text-align: end;
+}